/* LensKit Pro Wizard Styles — Phase 4 */

:root {
    --lk-primary: #1e63ff;
    --lk-primary-dark: #1647b8;
    --lk-secondary: #10b981;
    --lk-bg: #f6f8fb;
    --lk-white: #ffffff;
    --lk-border: #e7ebf2;
    --lk-text: #0f172a;
    --lk-muted: #5f6b7b;
    --lk-radius: 16px;
    --lk-shadow: 0 14px 40px rgba(15, 23, 42, 0.08);
}

/* ── Wizard container ──────────────────────────────────────────────────────── */
.lenskit-wizard-overlay {
    position: fixed;
    inset: 0;
    background: linear-gradient(180deg, #f8faff 0%, #f4f7fb 100%);
    z-index: 99999;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    padding: 0;
    /* Push below WP admin bar when admin is logged in */
    top: var(--wp-admin--admin-bar--height, 0px);
    /* Height must shrink by the same offset so footer never goes off-screen */
    height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px));
}

/* ── Theme isolation reset (Hello Elementor / any WP theme) ─────────────────
   :where() has zero specificity so every class rule in this file still wins.
   This only neutralises properties that themes set on bare element selectors. */
:where(.lenskit-wizard-overlay) *,
:where(.lenskit-wizard-overlay) *::before,
:where(.lenskit-wizard-overlay) *::after {
    box-sizing: border-box;
}

/* Neutralise theme button bleed (border, background, padding, radius, font) */
:where(.lenskit-wizard-overlay) button {
    appearance: none;
    -webkit-appearance: none;
    background: none;
    border: none;
    border-radius: 0;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    letter-spacing: normal;
    text-transform: none;
    box-shadow: none;
    cursor: pointer;
}

/* Neutralise theme paragraph / list margin bleed */
:where(.lenskit-wizard-overlay) p,
:where(.lenskit-wizard-overlay) ul,
:where(.lenskit-wizard-overlay) ol {
    margin: 0;
    padding: 0;
}
:where(.lenskit-wizard-overlay) ul,
:where(.lenskit-wizard-overlay) ol {
    list-style: none;
}

/* Neutralise theme heading size/weight/margin bleed */
:where(.lenskit-wizard-overlay) h1,
:where(.lenskit-wizard-overlay) h2,
:where(.lenskit-wizard-overlay) h3,
:where(.lenskit-wizard-overlay) h4,
:where(.lenskit-wizard-overlay) h5,
:where(.lenskit-wizard-overlay) h6 {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

/* Neutralise section/div margin/padding bleed (Elementor sections) */
:where(.lenskit-wizard-overlay) section,
:where(.lenskit-wizard-overlay) div {
    margin: 0;
}

.lenskit-wizard {
    background: var(--lk-white);
    border-radius: 0;
    box-shadow: var(--lk-shadow);
    width: 100vw;
    max-width: 100vw;
    height: 100%;
    max-height: 100%;
    display: flex;
    overflow: hidden;
}

/* ── Left panel (product preview) ─────────────────────────────────────────── */
.lk-wizard-left {
    width: 30%;
    flex-shrink: 0;
    background: #f8fafc;
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-right: 1px solid var(--lk-border);
    overflow: hidden;
}

.lk-product-image {
    width: 100%;
    max-height: 160px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--lk-border);
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08);
    flex-shrink: 0;
}

.lk-product-title { font-size: 17px; font-weight: 700; color: var(--lk-text); line-height: 1.25; text-transform: capitalize; }
.lk-product-base-price { font-size: 13px; color: var(--lk-muted); }

.lk-price-breakdown {
    margin-top: auto;
    border-radius: 12px;
    border: 1.5px solid var(--lk-border);
    background: #fff;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.lk-price-rows {
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow-y: auto;
    max-height: 140px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 6px 8px 4px;
}
.lk-price-rows::-webkit-scrollbar { display: none; }
.lk-price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 6px;
    border-bottom: 1px solid var(--lk-border);
    transition: background .15s;
}
.lk-price-row:last-child { border-bottom: none; }
.lk-price-row--base .lk-pr-label { font-weight: 600; color: var(--lk-text); }
.lk-price-row--base .lk-pr-amount { color: var(--lk-text); }
.lk-pr-label {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--lk-muted);
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lk-pr-amount {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--lk-text);
    white-space: nowrap;
    flex-shrink: 0;
}
.lk-pr-amount--add {
    color: var(--lk-secondary);
}
.lk-price-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 15px;
    font-weight: 800;
    color: var(--lk-primary);
    background: color-mix(in srgb, var(--lk-primary) 8%, white);
    padding: 10px 14px;
    border-top: 1.5px solid color-mix(in srgb, var(--lk-primary) 20%, white);
    flex-shrink: 0;
}

/* ── Glasses tint preview ────────────────────────────────────────────── */
.lk-glasses-preview {
    text-align: center;
    padding: 10px 8px 12px;
}

.lk-lens-svg {
    width: 100%;
    max-width: 240px;
    height: auto;
    display: block;
    margin: 0 auto;
    overflow: visible;
}

.lk-glasses-tint-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--lk-text, #1e293b);
    margin-top: 8px;
    padding: 4px 12px;
    background: rgba(0,0,0,0.05);
    border: 1px solid rgba(0,0,0,0.10);
    border-radius: 999px;
}

.lk-glasses-hint {
    font-size: 11px;
    color: var(--lk-muted, #94a3b8);
    margin-top: 8px;
    display: block;
    letter-spacing: 0.3px;
}

/* ── Product image / Glass transitions ───────────────────────────────── */
/* Product image — enter */
.lk-img-enter-t  { transition: opacity 0.30s ease; }
.lk-img-enter-s  { opacity: 0; }
.lk-img-enter-e  { opacity: 1; }
/* Product image — leave */
.lk-img-leave-t  { transition: opacity 0.22s ease; }
.lk-img-leave-s  { opacity: 1; }
.lk-img-leave-e  { opacity: 0; }

/* Glass — enter: fade in */
.lk-glass-enter-t { transition: opacity 0.35s ease; }
.lk-glass-enter-s { opacity: 0; }
.lk-glass-enter-e { opacity: 1; }
/* Glass — leave: fade out */
.lk-glass-leave-t { transition: opacity 0.28s ease; }
.lk-glass-leave-s { opacity: 1; }
.lk-glass-leave-e { opacity: 0; }

/* ── Right panel (steps) ──────────────────────────────────────────────────── */
.lk-wizard-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

.lk-wizard-header {
    padding: 22px 28px 14px;
    border-bottom: 1px solid var(--lk-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.lk-header-content { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.lk-step-badge { font-size: 11px; font-weight: 700; color: var(--lk-primary); text-transform: uppercase; letter-spacing: 0.06em; }
.lk-wizard-header h2 { margin: 0; font-size: 20px; color: var(--lk-text); letter-spacing: -0.01em; }
.lk-wizard-close {
    width: 38px;
    height: 38px;
    border-radius: 999px;
    border: 1px solid var(--lk-border);
    background: #fff;
    font-size: 20px;
    cursor: pointer;
    color: var(--lk-muted);
    line-height: 1;
    padding: 0;
}
.lk-wizard-close:hover {
    color: var(--lk-primary-dark);
    border-color: #8fb6b0;
    background: #f2f8f6;
}

/* ── Progress line ───────────────────────────────────────────────────────── */
.lk-progress-line { height: 4px; background: var(--lk-border); }
.lk-progress-line-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--lk-primary) 0%, var(--lk-secondary) 100%);
    transition: width .4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Step nav breadcrumb ──────────────────────────────────────────────────── */
.lk-step-nav {
    display: flex;
    align-items: flex-start;
    padding: 12px 20px;
    overflow-x: auto;
    scrollbar-width: none;
    border-bottom: 1px solid var(--lk-border);
    background: #fafbff;
    gap: 0;
}
.lk-step-nav::-webkit-scrollbar { display: none; }

.lk-step-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    flex: 1;
    min-width: 52px;
    position: relative;
}

.lk-step-nav-item:not(.last)::after {
    content: '';
    position: absolute;
    top: 11px;
    left: calc(50% + 13px);
    right: calc(-50% + 13px);
    height: 2px;
    background: var(--lk-border);
    z-index: 0;
    transition: background .3s ease;
}
.lk-step-nav-item.done:not(.last)::after { background: var(--lk-primary); }

.lk-step-bubble {
    width: 24px; height: 24px;
    border-radius: 50%;
    border: 2px solid var(--lk-border);
    background: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700;
    color: var(--lk-muted);
    position: relative; z-index: 1;
    transition: background .2s, border-color .2s, color .2s, box-shadow .2s;
    flex-shrink: 0;
}
.lk-step-nav-item.active .lk-step-bubble {
    background: var(--lk-primary);
    border-color: var(--lk-primary);
    color: #fff;
    box-shadow: 0 0 0 4px rgba(30, 99, 255, 0.15);
}
.lk-step-nav-item.done .lk-step-bubble {
    background: var(--lk-primary);
    border-color: var(--lk-primary);
    color: #fff;
}

.lk-step-nav-label {
    font-size: 10px;
    color: var(--lk-muted);
    text-align: center;
    white-space: normal;
    word-break: break-word;
    max-width: 68px;
    line-height: 1.2;
}
.lk-step-nav-item.active .lk-step-nav-label { color: var(--lk-primary); font-weight: 700; }
.lk-step-nav-item.done .lk-step-nav-label { color: var(--lk-primary); }


.lk-error-banner {
    background: #fff1f2;
    color: #9f1239;
    border: 1px solid #fecdd3;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 13px;
    margin-bottom: 14px;
}

/* ── Step content ─────────────────────────────────────────────────────────── */
.lk-step-body { flex: 1; overflow-y: auto; padding: 26px 32px; background: var(--lk-bg); }
.lk-step-title { font-size: 18px; font-weight: 700; margin: 0 0 18px; color: var(--lk-text); }

/* ── Animations ───────────────────────────────────────────────────────────── */
@keyframes lk-card-in {
    from { opacity: 0; transform: translateY(14px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
}

@keyframes lk-select-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(30, 99, 255, 0.32); }
    55%  { box-shadow: 0 0 0 9px rgba(30, 99, 255, 0); }
    100% { box-shadow: 0 14px 32px rgba(22, 71, 184, 0.14); }
}

/* ── Option grid ──────────────────────────────────────────────────────────── */
.lk-option-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 6px;
}

.lk-option-card {
    border: 1.5px solid var(--lk-border);
    border-radius: 6px;
    padding: 12px 16px;
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, border-left-width .18s ease;
    background: #fff;
    user-select: none;
    animation: lk-card-in 0.3s ease both;
    position: relative;
}
.lk-option-card:nth-child(1) { animation-delay: 0.00s; }
.lk-option-card:nth-child(2) { animation-delay: 0.06s; }
.lk-option-card:nth-child(3) { animation-delay: 0.12s; }
.lk-option-card:nth-child(4) { animation-delay: 0.18s; }
.lk-option-card:nth-child(5) { animation-delay: 0.22s; }
.lk-option-card:nth-child(6) { animation-delay: 0.26s; }
.lk-option-card:hover {
    border-color: var(--lk-primary);
    border-left-width: 4px;
    background: color-mix(in srgb, var(--lk-secondary) 6%, white);
    box-shadow: 0 4px 16px rgba(0,0,0,0.07);
}
.lk-option-card:hover .lk-check {
    border-color: var(--lk-primary);
}
.lk-option-card.selected {
    border-color: var(--lk-primary);
    border-left-width: 4px;
    background: #fff;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    animation: lk-select-pulse 0.3s ease forwards;
}
.lk-option-card { position: relative; }

.lk-option-main {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    flex: 1;
}

.lk-option-content {
    min-width: 0;
    flex: 1;
}

.lk-option-icon {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid var(--lk-border);
    background: #fff;
    flex-shrink: 0;
}
.lk-option-dashicon {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    background: #f1f5ff;
    border: 1px solid var(--lk-border);
    color: var(--lk-primary);
    font-size: 22px;
    flex-shrink: 0;
}
.lk-option-name { font-size: 15px; font-weight: 600; color: var(--lk-text); margin-bottom: 4px; }
.lk-option-tooltip {
    font-size: 12px;
    color: var(--lk-muted);
    margin: 0;
    line-height: 1.4;
    max-width: 60ch;
}
.lk-option-price { font-size: 16px; color: var(--lk-primary); font-weight: 700; margin-left: auto; padding-left: 8px; }
.lk-option-price.free { color: var(--lk-muted); }

/* Card bottom row: price + check indicator */
.lk-card-bottom {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-shrink: 0;
}

/* ── Selection check indicator ── */
.lk-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid var(--lk-border);
    background: #fff;
    flex-shrink: 0;
    transition: border-color .2s, background .2s, transform .2s;
    position: relative;
}
.lk-check::after {
    content: '';
    display: block;
    width: 6px;
    height: 10px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(45deg) scale(0) translate(-1px, -1px);
    transition: transform .18s cubic-bezier(.34,1.56,.64,1);
}
.selected .lk-check {
    background: var(--lk-primary);
    border-color: var(--lk-primary);
    transform: scale(1.1);
}
.selected .lk-check::after {
    transform: rotate(45deg) scale(1) translate(-1px, -1px);
}

/* ── Price block (sale + original) ──────────────────────────────────────── */
.lk-price-block {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
    flex-shrink: 0;
    margin-left: 8px;
}
.lk-orig-price {
    font-size: 11px;
    color: #94a3b8;
    text-decoration: line-through;
    font-weight: 400;
    line-height: 1.2;
}
.lk-card-price {
    font-size: 15px;
    color: var(--lk-primary);
    font-weight: 700;
    white-space: nowrap;
}
.lk-card-price.sale { color: #e11d48; }
.lk-card-price.free {
    font-size: 13px;
    color: var(--lk-secondary, #10b981);
    font-weight: 800;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}
.lk-card-price.included {
    font-size: 11px;
    color: var(--lk-secondary, #10b981);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    background: color-mix(in srgb, var(--lk-secondary, #10b981) 10%, white);
    padding: 2px 7px;
    border-radius: 20px;
    border: 1px solid color-mix(in srgb, var(--lk-secondary, #10b981) 25%, white);
}

.lk-empty-state {
    margin: 6px 0;
    padding: 16px 14px;
    border: 1px dashed #c6d4f7;
    border-radius: 4px;
    color: #4b5c60;
    background: #f7f9ff;
}

/* ── Coatings (multi-select, card style) ──────────────────────────────────── */
.lk-coating-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.lk-coating-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border: 1.5px solid var(--lk-border);
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    transition: border-color .18s, background .18s, box-shadow .18s, transform .18s;
    animation: lk-card-in 0.3s ease both;
}
.lk-coating-item:hover {
    border-color: var(--lk-primary);
    background: #fafbff;
    transform: translateX(3px);
    box-shadow: 4px 0 0 0 var(--lk-primary), 0 3px 12px rgba(0,0,0,0.06);
}
.lk-coating-item:hover .lk-check-sq {
    border-color: var(--lk-primary);
}
.lk-coating-item.selected {
    border-color: var(--lk-primary);
    background: #fff;
    box-shadow: 4px 0 0 0 var(--lk-primary), 0 4px 16px rgba(0,0,0,0.07);
    transform: translateX(4px);
}
.lk-coating-main {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1;
}
.lk-coating-img { width: 44px; height: 44px; object-fit: cover; border-radius: 4px; flex-shrink: 0; border: 1px solid var(--lk-border); }
.lk-coating-icon { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 4px; background: #f1f5ff; border: 1px solid var(--lk-border); color: var(--lk-primary); font-size: 22px; flex-shrink: 0; }
.lk-coating-info { min-width: 0; flex: 1; }
.lk-coating-name { font-size: 14px; font-weight: 600; color: var(--lk-text); }
.lk-coating-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* Checkbox-style lk-check (square with rounded corners, for multi-select) */
.lk-check-sq {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 5px;
    border: 2px solid var(--lk-border);
    background: #fff;
    flex-shrink: 0;
    transition: border-color .18s, background .18s, transform .18s;
    position: relative;
}
.lk-check-sq::after {
    content: '';
    display: block;
    width: 6px;
    height: 10px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(45deg) scale(0) translate(-1px, -1px);
    transition: transform .18s cubic-bezier(.34,1.56,.64,1);
}
.selected .lk-check-sq {
    background: var(--lk-primary);
    border-color: var(--lk-primary);
    transform: scale(1.08);
}
.selected .lk-check-sq::after {
    transform: rotate(45deg) scale(1) translate(-1px, -1px);
}

/* ── Tint swatches ────────────────────────────────────────────────────────── */
.lk-tint-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.lk-tint-swatch {
    width: 44px; height: 44px;
    border-radius: 50%;
    border: 3px solid transparent;
    cursor: pointer;
    position: relative;
    transition: border-color .15s, transform .1s;
}
.lk-tint-swatch:hover { transform: scale(1.1); }
.lk-tint-swatch.selected { border-color: var(--lk-primary); }
.lk-tint-swatch-label { font-size: 11px; text-align: center; margin-top: 4px; color: var(--lk-muted); }

.lk-inline-tint {
    margin-top: 16px;
    border: 1px solid var(--lk-border);
    border-radius: 12px;
    padding: 14px;
    background: #fff;
}

.lk-inline-tint-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.lk-inline-tint-head .lk-step-title {
    margin: 0;
    font-size: 16px;
}

.lk-inline-tag {
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--lk-secondary) 12%, white);
    color: var(--lk-secondary);
    font-weight: 700;
}

.lk-tint-inline-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.lk-tint-chip {
    border: 1px solid var(--lk-border);
    background: #fff;
    border-radius: 999px;
    padding: 7px 12px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--lk-text);
    cursor: pointer;
    transition: border-color .2s, box-shadow .2s, background .2s;
}

.lk-tint-chip:hover {
    border-color: #b9cbf8;
    background: #f5f8ff;
}

.lk-tint-chip.selected {
    border-color: var(--lk-primary);
    background: #edf3ff;
    box-shadow: 0 8px 20px rgba(30, 99, 255, 0.12);
}

.lk-tint-chip-swatch {
    width: 16px;
    height: 16px;
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    flex-shrink: 0;
}

.lk-lens-accordion-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 10px;
}

.lk-lens-accordion {
    border: 1.5px solid var(--lk-border);
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
    animation: lk-card-in 0.3s ease both;
    transition: border-color .18s, box-shadow .18s, transform .18s;
}
.lk-lens-accordion:nth-child(1) { animation-delay: 0.00s; }
.lk-lens-accordion:nth-child(2) { animation-delay: 0.06s; }
.lk-lens-accordion:nth-child(3) { animation-delay: 0.12s; }
.lk-lens-accordion:nth-child(4) { animation-delay: 0.18s; }
.lk-lens-accordion:nth-child(5) { animation-delay: 0.22s; }

.lk-lens-accordion.selected {
    border-color: var(--lk-primary);
    box-shadow: 4px 0 0 0 var(--lk-primary), 0 4px 20px rgba(0,0,0,0.08);
    transform: translateX(4px);
}

.lk-lens-accordion-head {
    width: 100%;
    border: 0;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    text-align: left;
    cursor: pointer;
    transition: background .15s;
    position: relative;
}
.lk-lens-accordion-head:hover {
    background: #fafbff;
}
.lk-lens-accordion-head:hover .lk-check {
    border-color: var(--lk-primary);
}

.lk-lens-accordion-main {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    flex: 1;
}

.lk-lens-accordion-content {
    min-width: 0;
}

.lk-lens-accordion-right {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.lk-lens-accordion-chevron {
    font-size: 12px;
    color: var(--lk-muted);
    transition: transform .2s ease;
}

.lk-lens-accordion-chevron.open {
    transform: rotate(180deg);
}

.lk-lens-accordion-body {
    border-top: 1px solid var(--lk-border);
    padding: 12px 14px 14px;
    background: #fbfcff;
}

.lk-lens-accordion-body .lk-inline-tint-head {
    margin-bottom: 8px;
}

/* ── Usage sub-option list ───────────────────────────────────────────────── */
.lk-usage-sub-body { padding: 10px 12px 12px; }

.lk-sub-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--lk-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin: 0 0 8px;
}

.lk-sub-option-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.lk-sub-option-item {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    border: 1.5px solid var(--lk-border);
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    text-align: left;
    transition: border-color .15s, background .15s, box-shadow .15s, transform .15s;
}

.lk-sub-option-item:hover {
    border-color: var(--lk-primary);
    background: #fafbff;
    transform: translateX(3px);
    box-shadow: 3px 0 0 0 var(--lk-primary);
}

.lk-sub-option-item.selected {
    border-color: var(--lk-primary);
    background: #fff;
    box-shadow: 4px 0 0 0 var(--lk-primary), 0 3px 12px rgba(0,0,0,0.07);
    transform: translateX(4px);
}

.lk-sub-option-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.lk-sub-option-main {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
}

.lk-sub-option-icon {
    width: 28px;
    height: 28px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
}

.lk-sub-option-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--lk-text);
}

.lk-sub-option-price {
    font-size: 13px;
    color: var(--lk-primary);
    font-weight: 600;
    flex-shrink: 0;
}

.lk-sub-option-price.free {
    color: var(--lk-muted);
    font-weight: 400;
}

/* ── Unified card variants ──────────────────────────────────────────────────
   .lk-option-card  = base (package/thickness/upgrade — the "perfect" template)
   .lk-option-multi = same card but checkbox indicator (coatings)
   .lk-option-sub   = same card but slightly reduced (usage children)
   .lk-option-card.expanded = card whose sub-panel is open
   All share identical HTML: .lk-option-main > (.lk-option-icon | .lk-option-dashicon) + .lk-option-content
                              .lk-card-bottom > .lk-price-block + .lk-check / .lk-check-sq / .lk-card-chevron
   To redesign all options at once, edit only .lk-option-card and .lk-card-bottom.
   ─────────────────────────────────────────────────────────────────────────── */

/* Expanded = sub-panel open; soften bottom corners to visually connect */
.lk-option-card.expanded {
    border-bottom-color: var(--lk-primary);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* Wrapper: one flex child per card+sub-panel pair; no extra visual styling */
.lk-option-item-wrap {
    display: flex;
    flex-direction: column;
}

/* Sub-card (usage children, same card structure but indented) */
.lk-option-card.lk-option-sub {
    padding: 12px 16px;
    min-height: 60px;
}

/* ── Card chevron (replaces lk-lens-accordion-chevron on cards) ── */
.lk-card-chevron {
    font-size: 12px;
    color: var(--lk-muted);
    transition: transform .2s ease;
    flex-shrink: 0;
}
.lk-card-chevron.open {
    transform: rotate(180deg);
}

/* ── Sub-panel (below card grid for children/tints) ── */
.lk-sub-panel {
    margin-top: 0;
    border: 1.5px solid var(--lk-primary);
    border-top: none;
    border-radius: 0 0 6px 6px;
    padding: 14px 16px 16px;
    background: #fbfcff;
    animation: lk-card-in .2s ease both;
}

.lk-sub-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.lk-sub-panel-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--lk-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin: 0 0 10px;
}

.lk-sub-panel-head .lk-sub-panel-label {
    margin-bottom: 0;
}

/* Sub-tile grid (usage children, slightly tighter) */
.lk-sub-tiles {
    gap: 10px;
}

/* ── Review table ───────────────────────────────────────────────── */
.lk-review-wrap { display: flex; flex-direction: column; gap: 0; }

.lk-review-table {
    border: 1px solid var(--lk-border);
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
}

.lk-review-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 16px;
    border-bottom: 1px solid var(--lk-border);
    transition: background .15s;
}

.lk-review-row:last-child { border-bottom: none; }
.lk-review-row:nth-child(even) { background: #f8faff; }
.lk-review-row:hover { background: #f2f6ff; }

.lk-review-label {
    width: 110px;
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 700;
    color: var(--lk-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.lk-review-value {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--lk-text);
}

.lk-review-swatch {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid rgba(0,0,0,0.1);
    flex-shrink: 0;
    display: inline-block;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.lk-review-price {
    font-size: 14px;
    font-weight: 700;
    color: var(--lk-primary);
    flex-shrink: 0;
}

.lk-review-included {
    font-size: 12px;
    font-weight: 600;
    color: var(--lk-muted);
    font-style: italic;
}

.lk-review-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
    padding: 16px 18px;
    background: var(--lk-primary);
    color: #fff;
    border-radius: 12px;
    font-size: 18px;
    font-weight: 700;
    box-shadow: 0 8px 24px rgba(30, 99, 255, 0.25);
}


/* ── Prescription review section ─────────────────────────────────────────── */
.lk-rx-review-section {
    margin-top: 14px;
    border: 1px solid var(--lk-border);
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
}

.lk-rx-review-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 16px;
    background: #f4f7ff;
    border-bottom: 1px solid var(--lk-border);
    font-size: 11px;
    font-weight: 700;
    color: var(--lk-primary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.lk-rx-review-table {
    width: 100%;
    border-collapse: collapse;
}

.lk-rx-review-table thead th {
    padding: 10px 14px;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    text-align: center;
    background: var(--lk-primary);
}

.lk-rx-review-table thead th.lk-rx-field-col,
.lk-rx-review-table thead th:first-child {
    background: var(--lk-primary);
    text-align: left;
    width: 60px;
}

.lk-rx-review-table tbody tr:nth-child(even) { background: #f8faff; }
.lk-rx-review-table tbody tr:hover { background: #f2f6ff; }

.lk-rx-field-label {
    padding: 9px 14px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--lk-muted);
    background: #f4f7ff;
    border-right: 1px solid var(--lk-border);
    width: 60px;
}

.lk-rx-review-table td {
    padding: 9px 14px;
    font-size: 14px;
    font-weight: 600;
    color: var(--lk-text);
    text-align: center;
    border-bottom: 1px solid var(--lk-border);
}

.lk-rx-review-table tbody tr:last-child td { border-bottom: none; }

/* Upload card */
.lk-rx-upload-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
}

.lk-rx-upload-icon { color: var(--lk-primary); flex-shrink: 0; }

.lk-rx-upload-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.lk-rx-upload-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--lk-text);
}

.lk-rx-upload-note {
    font-size: 12px;
    color: var(--lk-muted);
}

/* Later banner */
.lk-rx-later-banner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    background: #eff6ff;
    color: #1e40af;
}

.lk-rx-later-banner svg { flex-shrink: 0; margin-top: 1px; }

.lk-rx-later-banner p {
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
    color: #1e40af;
}

/* ── Prescription entry form ──────────────────────────────────────────────── */
.lk-rx-table { width: 100%; border-collapse: collapse; }
.lk-rx-table th { font-size: 12px; color: var(--lk-muted); text-align: center; padding: 4px 6px; }
.lk-rx-table td { padding: 6px; }
.lk-rx-input {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--lk-border);
    border-radius: 6px;
    text-align: center;
    font-size: 13px;
}
.lk-rx-input:focus { outline: none; border-color: var(--lk-primary); }
.lk-rx-eye-label { font-size: 13px; font-weight: 600; color: var(--lk-text); padding: 6px 0; }

/* ── Wizard footer ────────────────────────────────────────────────────────── */
.lk-wizard-footer {
    padding: 16px 28px;
    border-top: 1px solid var(--lk-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.lk-btn {
    padding: 12px 24px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: background .15s, opacity .15s;
}
.lk-btn-primary { background: var(--lk-primary); color: #fff; }
.lk-btn-primary:hover { background: var(--lk-primary-dark); transform: translateY(-1px); }
.lk-btn-secondary { background: var(--lk-bg); color: var(--lk-text); border: 1px solid var(--lk-border); }
.lk-btn-secondary:hover { background: #edf2fd; }
.lk-btn-skip {
    background: transparent;
    color: var(--lk-muted);
    border: 1px dashed var(--lk-border);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.1px;
}
.lk-btn-skip:hover {
    border-color: var(--lk-primary);
    color: var(--lk-primary);
    background: #f4f8ff;
}
.lk-btn:disabled { opacity: .5; cursor: not-allowed; }

.lk-btn-add-to-cart {
    background: var(--lk-primary);
    color: #fff;
    padding: 13px 26px;
    font-size: 15px;
    font-weight: 700;
    border-radius: 12px;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--lk-primary) 40%, transparent);
    letter-spacing: .2px;
    transition: background .18s, transform .15s, box-shadow .18s, filter .18s;
    border: none;
}
.lk-btn-add-to-cart:hover:not(:disabled) {
    filter: brightness(0.88);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px color-mix(in srgb, var(--lk-primary) 50%, transparent);
}
.lk-btn-add-to-cart:active:not(:disabled) {
    filter: brightness(0.80);
    transform: translateY(0);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--lk-primary) 30%, transparent);
}

.lk-atc-inner {
    display: flex;
    align-items: center;
    gap: 8px;
    pointer-events: none;
}

.lk-atc-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.lk-atc-total {
    opacity: .82;
    font-weight: 500;
    font-size: 14px;
}

/* Inline spinner inside btn */
.lk-btn-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2.5px solid rgba(255,255,255,.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: lk-spin .7s linear infinite;
    flex-shrink: 0;
}

@keyframes lk-spin {
    to { transform: rotate(360deg); }
}

.lk-btn.is-busy {
    opacity: .85;
    pointer-events: none;
    cursor: not-allowed;
}

/* ── Cart success overlay ──────────────────────────────────────────────────── */
.lk-cart-success-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    animation: lk-overlay-in .3s ease;
}

@keyframes lk-overlay-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.lk-cart-success-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 40px 36px;
    text-align: center;
    max-width: 380px;
    animation: lk-card-up .35s cubic-bezier(.34,1.56,.64,1) both;
}

@keyframes lk-card-up {
    from { opacity: 0; transform: translateY(24px) scale(.96); }
    to   { opacity: 1; transform: none; }
}

.lk-success-icon-wrap {
    color: var(--lk-primary);
    width: 72px;
    height: 72px;
    margin-bottom: 4px;
}

.lk-success-check {
    width: 72px;
    height: 72px;
}

/* Animated circle draw */
.lk-success-circle {
    stroke-dasharray: 157;
    stroke-dashoffset: 157;
    animation: lk-circle-draw .5s .1s ease forwards;
    color: var(--lk-primary);
}
@keyframes lk-circle-draw {
    to { stroke-dashoffset: 0; }
}

/* Animated tick draw */
.lk-success-tick {
    stroke-dasharray: 40;
    stroke-dashoffset: 40;
    animation: lk-tick-draw .35s .55s ease forwards;
    color: var(--lk-primary);
}
@keyframes lk-tick-draw {
    to { stroke-dashoffset: 0; }
}

.lk-success-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--lk-text);
    margin: 0;
    line-height: 1.25;
}

.lk-success-sub {
    font-size: 14px;
    color: var(--lk-muted);
    margin: 0;
}

.lk-success-price {
    display: flex;
    align-items: center;
    gap: 10px;
    background: color-mix(in srgb, var(--lk-primary) 8%, white);
    border: 1px solid color-mix(in srgb, var(--lk-primary) 25%, white);
    border-radius: 10px;
    padding: 10px 20px;
    font-size: 14px;
    color: var(--lk-primary-dark);
    font-weight: 500;
}
.lk-success-price strong {
    font-size: 18px;
    font-weight: 700;
}

.lk-success-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    margin-top: 6px;
}

.lk-btn-success-cart {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(135deg, var(--lk-primary) 0%, var(--lk-primary-dark) 100%);
    color: #fff;
    padding: 14px 24px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--lk-primary) 30%, transparent);
    transition: transform .15s, box-shadow .15s, filter .15s;
}
.lk-btn-success-cart svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}
.lk-btn-success-cart:hover {
    transform: translateY(-2px);
    filter: brightness(0.9);
    box-shadow: 0 6px 20px color-mix(in srgb, var(--lk-primary) 45%, transparent);
    color: #fff;
}

.lk-btn-success-continue {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: transparent;
    color: var(--lk-muted);
    padding: 11px 24px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    border: 1px solid var(--lk-border);
    transition: border-color .15s, color .15s, background .15s;
}
.lk-btn-success-continue svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
.lk-btn-success-continue:hover {
    border-color: var(--lk-primary);
    color: var(--lk-primary);
    background: #f4f8ff;
}

/* ── Prescription step ───────────────────────────────────────────────────── */
.lk-rx-step {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ── Rx method selection ─────────────────────────────────────────────────── */
.lk-rx-methods {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.lk-rx-method {
    border: 1px solid var(--lk-border);
    border-radius: 12px;
    background: #fff;
    text-align: left;
    padding: 16px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    transition: border-color .2s, box-shadow .2s, transform .2s;
}

.lk-rx-method:hover {
    border-color: #bfd1fb;
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(30, 99, 255, 0.08);
}

.lk-rx-method.selected {
    border-color: var(--lk-primary);
    background: color-mix(in srgb, var(--lk-primary) 5%, white);
    box-shadow: 0 10px 24px rgba(30, 99, 255, 0.13);
}

.lk-rx-method-icon {
    font-size: 22px;
    color: var(--lk-primary);
    margin-bottom: 4px;
    transition: transform .2s;
}

.lk-rx-method:hover .lk-rx-method-icon { transform: scale(1.15); }

.lk-rx-method-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--lk-text);
    line-height: 1.3;
}

.lk-rx-method-desc {
    font-size: 11px;
    color: var(--lk-muted);
    line-height: 1.45;
}

/* ── Rx panel ────────────────────────────────────────────────────────────── */
.lk-rx-panel {
    border: 1px solid var(--lk-border);
    border-radius: 12px;
    background: #fff;
    padding: 16px;
}

/* ── Rx dropdown form ────────────────────────────────────────────────────── */
.lk-rx-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.lk-rx-eye-block {
    border: 1px solid var(--lk-border);
    border-radius: 8px;
    padding: 12px 14px;
    background: #fafbff;
}

.lk-rx-single-pd { padding: 10px 14px; }

.lk-rx-eye-head {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 700;
    color: var(--lk-text);
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--lk-border);
}

.lk-rx-eye-head i { color: var(--lk-primary); font-size: 14px; }
.lk-rx-eye-head em { font-weight: 400; color: var(--lk-muted); }

.lk-rx-fields {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

.lk-rx-label {
    font-size: 11px;
    font-weight: 600;
    color: #475569;
    display: flex;
    flex-direction: column;
    gap: 5px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.lk-rx-select {
    border: 1px solid var(--lk-border);
    border-radius: 6px;
    padding: 6px 4px;
    font-size: 13px;
    font-weight: 500;
    background: #fff;
    color: var(--lk-text);
    cursor: pointer;
    transition: border-color .15s;
    width: 100%;
    appearance: auto;
}

.lk-rx-select:focus { outline: none; border-color: var(--lk-primary); }

/* ── Rx free-text grid fallback ──────────────────────────────────────────── */
.lk-rx-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.lk-rx-grid label {
    font-size: 12px;
    font-weight: 600;
    color: #334155;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* ── Rx actions & saved indicator ────────────────────────────────────────── */
.lk-rx-actions {
    margin-top: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.lk-rx-saved {
    color: #15803d;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 4px;
}

.lk-rx-saved i { font-size: 15px; }

/* ── Rx upload drop zone ─────────────────────────────────────────────────── */
.lk-rx-upload-label {
    border: 2px dashed var(--lk-border);
    border-radius: 10px;
    padding: 28px 20px;
    background: #f8faff;
    cursor: pointer;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    transition: border-color .2s, background .2s;
}

.lk-rx-upload-label:hover { border-color: var(--lk-primary); background: #f0f5ff; }

.lk-rx-upload-icon { font-size: 30px; color: var(--lk-primary); opacity: 0.75; }

.lk-rx-upload-label span { font-size: 14px; font-weight: 600; color: var(--lk-text); }
.lk-rx-upload-label em { font-size: 12px; color: var(--lk-muted); font-style: normal; }
.lk-rx-upload-label input[type="file"] { display: none; }

/* ── Rx later panel ──────────────────────────────────────────────────────── */
.lk-rx-panel-later {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 24px 20px;
}

.lk-rx-later-icon { font-size: 28px; color: var(--lk-primary); opacity: 0.7; }

.lk-rx-file,
.lk-rx-later-note {
    margin: 8px 0 0;
    font-size: 13px;
    color: var(--lk-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ── Rx recommendation tag ───────────────────────────────────────────────── */
.lk-rx-rec-tag {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 3px;
    background: color-mix(in srgb, var(--lk-secondary) 12%, white);
    color: var(--lk-secondary);
    border: 1px solid color-mix(in srgb, var(--lk-secondary) 30%, white);
    letter-spacing: 0.3px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.lk-rx-rec-tag i { font-size: 9px; }

/* ── Select lenses button (product page) ──────────────────────────────────── */
.lenskit-select-btn {
    margin-left: 8px;
}
.lenskit-select-btn.disabled {
    opacity: .5;
    pointer-events: none;
}

/* ── Initial fullscreen progress-bar loader ─────────────────────────────── */
.lk-init-loader {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    background: linear-gradient(160deg, #f0f4ff 0%, #f8fafc 100%);
    z-index: 9999;
    padding: 24px;
}
.lk-init-brand {
    font-size: 20px;
    font-weight: 800;
    color: var(--lk-primary, #2563eb);
    letter-spacing: -0.4px;
    text-transform: capitalize;
}
.lk-progress-track {
    width: 280px;
    height: 5px;
    background: var(--lk-border, #e2e8f0);
    border-radius: 999px;
    overflow: hidden;
}
.lk-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--lk-primary, #2563eb) 0%, var(--lk-secondary, #10b981) 100%);
    border-radius: 999px;
    animation: lk-progress 3.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes lk-progress {
    0%   { width: 0%; }
    30%  { width: 45%; }
    60%  { width: 72%; }
    85%  { width: 88%; }
    100% { width: 97%; }
}
.lk-init-status {
    font-size: 13px;
    font-weight: 600;
    color: var(--lk-text, #0f172a);
    letter-spacing: 0.1px;
    min-height: 20px;
    transition: opacity .3s;
}
.lk-eye-fact-wrap {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    margin-top: 24px;
    max-width: 340px;
}
.lk-eye-fact-avatar {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    background: #fff;
    border: 1.5px solid var(--lk-border, #e2e8f0);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
    animation: lk-avatar-pop .4s cubic-bezier(0.22,1,0.36,1);
}
@keyframes lk-avatar-pop {
    from { transform: scale(0.6); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}
.lk-eye-fact-bubble {
    position: relative;
    background: #fff;
    border: 1.5px solid var(--lk-border, #e2e8f0);
    border-radius: 18px 18px 18px 4px;
    padding: 12px 16px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.07);
}
.lk-eye-fact-bubble::before {
    content: '';
    position: absolute;
    bottom: 6px;
    left: -8px;
    width: 14px;
    height: 14px;
    background: #fff;
    border-left: 1.5px solid var(--lk-border, #e2e8f0);
    border-bottom: 1.5px solid var(--lk-border, #e2e8f0);
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
.lk-eye-fact-label {
    display: block;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--lk-primary);
    margin-bottom: 4px;
}
.lk-eye-fact-text {
    display: block;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.55;
    color: var(--lk-text, #0f172a);
}
.lk-fact-anim {
    animation: lk-fact-fade .4s cubic-bezier(0.22,1,0.36,1);
}
@keyframes lk-fact-fade {
    from { opacity: 0; transform: translateY(5px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── In-UI circle loader ─────────────────────────────────────────────────── */
.lk-loader {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.lk-loader-center {
    min-height: 120px;
    width: 100%;
    padding: 0;
}
.lk-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid var(--lk-border);
    border-top-color: var(--lk-primary);
    border-radius: 50%;
    animation: lk-spin .7s linear infinite;
}
@keyframes lk-spin { to { transform: rotate(360deg); } }

/* ── Tooltip ──────────────────────────────────────────────────────────────── */
.lk-tooltip-icon { cursor: help; color: var(--lk-muted); font-size: 14px; margin-left: 4px; }

/* ── Responsive ───────────────────────────────────────────────────────────── */

/* Tag rows & discount/badge chips */
.lk-tag-row {
    display: inline-flex;
    gap: 4px;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 2px;
}
.lk-discount-tag {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 3px;
    background: #fef2f2;
    color: #e11d48;
    border: 1px solid #fecdd3;
    letter-spacing: 0.3px;
    white-space: nowrap;
    line-height: 1.4;
}
.lk-badge-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: 20px;
    background: var(--lk-secondary);
    color: #fff;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    white-space: nowrap;
    line-height: 1;
    box-shadow: 0 2px 6px color-mix(in srgb, var(--lk-secondary) 40%, transparent);
}

/* Badge floats at top-right of option cards */
.lk-option-card .lk-badge-tag {
    position: absolute;
    top: -10px;
    right: 14px;
}

/* Badge floats at top-right of coating items */
.lk-coating-item .lk-badge-tag {
    position: absolute;
    top: -10px;
    right: 14px;
}

/* Badge sits inline at right side of accordion head (overflow:hidden safe) */
.lk-lens-accordion-head .lk-badge-tag {
    position: absolute;
    top: 50%;
    right: 58px;
    transform: translateY(-50%);
}

/* Tint chip price + text wrapper */
.lk-tint-chip-text {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    line-height: 1.3;
}
.lk-tint-price {
    font-size: 10px;
    color: var(--lk-primary);
    font-weight: 600;
    line-height: 1;
}
@media (max-width: 640px) {
    /* ── Overall layout: column, 30 / 70 split ── */
    .lenskit-wizard {
        flex-direction: column;
        height: 100%;
        max-height: 100%;
    }

    /* ── Top panel (product + price summary) — 30 % ── */
    .lk-wizard-left {
        width: 100%;
        height: 30%;
        min-height: 0;
        flex-shrink: 0;
        border-right: none;
        border-bottom: 1px solid var(--lk-border);
        padding: 10px 14px;
        display: grid;
        grid-template-columns: 72px 1fr;
        grid-template-rows: auto auto 1fr;
        grid-template-areas:
            'image title'
            'image base'
            'price price';
        align-items: start;
        gap: 3px 10px;
        overflow: hidden;
    }
    .lk-product-image    { grid-area: image; width: 72px; height: 72px; aspect-ratio: 1; object-fit: contain; background: #fff; align-self: center; }
    .lk-product-title    { grid-area: title; font-size: 14px; font-weight: 700; margin: 0; line-height: 1.2; }
    .lk-product-base-price { grid-area: base; font-size: 12px; }
    .lk-price-breakdown  {
        grid-area: price;
        margin-top: 0;
        border-radius: 8px;
        min-height: 0;
        width: 100%;
        align-self: end;
    }
    .lk-price-rows       { max-height: 56px; padding: 2px 8px; }
    .lk-price-row        { padding: 4px 4px; }
    .lk-price-total      { padding: 6px 10px; font-size: 13px; }

    /* ── Tint mode: left panel becomes full-bleed lens preview ── */
    .lk-wizard-left.lk-tint-mode {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 8px 12px;
        gap: 6px;
        overflow: hidden;
    }
    /* Hide everything except the glasses preview in tint mode */
    .lk-wizard-left.lk-tint-mode .lk-product-image,
    .lk-wizard-left.lk-tint-mode .lk-product-title,
    .lk-wizard-left.lk-tint-mode .lk-product-base-price,
    .lk-wizard-left.lk-tint-mode .lk-price-breakdown {
        display: none;
    }
    /* Glasses preview fills the whole 30% panel */
    .lk-wizard-left.lk-tint-mode .lk-glasses-preview {
        width: 100%;
        padding: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        flex: 1;
    }
    /* SVG takes max available width */
    .lk-wizard-left.lk-tint-mode .lk-lens-svg {
        width: 90%;
        max-width: 100%;
        height: auto;
    }

    /* ── Bottom panel (wizard steps) — 70 % ── */
    .lk-wizard-right {
        flex: 1;
        height: 70%;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden; /* children handle their own scroll */
    }

    /* Header shrinks slightly */
    .lk-wizard-header { padding: 10px 14px 8px; }
    .lk-wizard-header h2 { font-size: 16px; }
    .lk-step-badge { font-size: 10px; }

    /* Step nav: all steps fit in one row, smaller bubbles + labels */
    .lk-step-nav { padding: 6px 8px; gap: 0; }
    .lk-step-nav-item {
        flex: 1 1 0;
        min-width: 0;
    }
    .lk-step-bubble { width: 22px; height: 22px; font-size: 9px; }
    .lk-step-nav-label { max-width: 40px; font-size: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .lk-step-nav-item:not(.last)::after { top: 11px; left: calc(50% + 11px); right: calc(-50% + 11px); }

    /* Step body scrolls, footer stays pinned */
    .lk-step-body {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 14px 14px 8px;
        min-height: 0;
    }

    /* Footer always visible at bottom of the 70 % panel */
    .lk-wizard-footer {
        flex-shrink: 0;
        padding: 10px 14px;
    }

    /* Card & button tweaks */
    .lk-option-card    { padding: 10px 12px; gap: 10px; }
    .lk-option-name    { font-size: 14px; }
    .lk-option-tooltip { font-size: 11px; }
    .lk-option-price   { font-size: 14px; }
    .lk-option-icon,
    .lk-option-dashicon {
        width: 40px;
        height: 40px;
        border-radius: 8px;
        font-size: 19px;
    }
    .lk-btn { padding: 10px 16px; font-size: 14px; }
    .lk-rx-methods,
    .lk-rx-grid {
        grid-template-columns: 1fr;
    }
    .lk-rx-fields {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .lk-tint-inline-grid { gap: 7px; }
}

/* -- Sunglass product browser ----------------------------------------------- */
.lk-sg-products-wrap { animation: lkFadeIn .2s ease; }
.lk-sg-back { margin-top: 20px; }
.lk-sg-empty { color: var(--lk-muted); text-align: center; padding: 32px 0; }
.lk-sg-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 14px;
    margin-top: 4px;
}
.lk-sg-card {
    display: flex;
    flex-direction: column;
    border: 1.5px solid var(--lk-border);
    border-radius: var(--lk-radius);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    background: #fff;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.lk-sg-card:hover {
    border-color: var(--lk-primary);
    box-shadow: 0 4px 14px rgba(0,0,0,.1);
    transform: translateY(-2px);
}
.lk-sg-thumb-wrap {
    aspect-ratio: 4/3;
    background: var(--lk-gray-50, #f8f9fa);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.lk-sg-thumb { width: 100%; height: 100%; object-fit: cover; }
.lk-sg-no-img { font-size: 32px; color: var(--lk-muted); }
.lk-sg-info { padding: 10px 12px; }
.lk-sg-name { font-size: 13px; font-weight: 600; color: var(--lk-text); margin-bottom: 4px; line-height: 1.3; }
.lk-sg-price { font-size: 12px; color: var(--lk-primary); font-weight: 600; }