/* ============================================================
   Vanguard — Frontend CSS  (Dark / Tech)  v1.0.16
   Every rule is scoped under .vg-wrap so it cannot leak.
   Primary gradient: #1264af → #6bb5e5   Accent: #EA801A
   ============================================================ */

/* ── Namespace variables (local to the wrap only) ── */
.vg-wrap{
    --vg-pri-1:#1264af;
    --vg-pri-2:#6bb5e5;
    --vg-accent:#EA801A;
    --vg-accent-2:#f59e2c;

    /* Dark surface palette */
    --vg-ink:#ffffff;
    --vg-ink-soft:#e6e9f0;
    --vg-muted:#8b94a8;
    --vg-muted-2:#5b6373;
    --vg-bg:transparent;            /* inherit dark page bg */
    --vg-card:#14171f;              /* main card surface */
    --vg-card-2:#1b1f29;            /* slightly lifted */
    --vg-card-3:#0f121a;            /* deeper inset */
    --vg-border:rgba(255,255,255,.08);
    --vg-border-strong:rgba(255,255,255,.16);

    --vg-radius:10px;
    --vg-radius-sm:8px;
    --vg-shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
    --vg-glow-pri:0 0 0 1px rgba(107,181,229,.35), 0 0 24px rgba(18,100,175,.18);
    --vg-glow-acc:0 0 0 1px rgba(234,128,26,.45), 0 0 18px rgba(234,128,26,.25);

    /* Column ratio — reused by Row 2 and Row 3 so widths line up perfectly */
    --vg-col-image:5;
    --vg-col-spec:7;
    --vg-col-gap:24px;

    /* Sticky offset — keep in sync with vg-row-tabs margin-top */
    --vg-sticky-top:24px;
}

/* Scoped reset */
.vg-wrap,.vg-wrap *,.vg-wrap *::before,.vg-wrap *::after{box-sizing:border-box;}

/* Top-level container — matches site's 1300px boxed container */
.vg-wrap{
    max-width:1300px;
    margin:0 auto;
    padding:20px 3px 40px;
    color:var(--vg-ink);
    font-family:inherit;
    font-size:15px;
    line-height:1.5;
    position:relative;
}

/* Honor site theme's .container width at desktop */
@media (min-width:1200px){
    .container{width:1170px;}
}
@media (min-width:1300px){
    .container{width:1300px !important;}
}
.vg-wrap img{max-width:100%;height:auto;display:block;}
.vg-form{margin:0;padding:0;}

/* ══════════════════════════════════════════════
   ROW 1 : TITLE + PRICE
══════════════════════════════════════════════ */
.vg-row-title{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
    margin-bottom:18px;
    flex-wrap:wrap;
}
.vg-title{
    margin:0;
    font-size:28px;
    font-weight:800;
    letter-spacing:-.015em;
    line-height:1.2;
    color:var(--vg-ink);
    flex:1 1 auto;
    text-shadow:0 1px 0 rgba(0,0,0,.4);
}
.vg-price-box{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
    justify-content:flex-end;
    white-space:nowrap;
}
.vg-price-reg{color:var(--vg-muted);font-size:14px;}
.vg-price-reg del{color:var(--vg-muted);opacity:.85;}
.vg-price-badge{
    background:var(--vg-accent);
    color:#fff;
    font-size:11px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.06em;
    padding:5px 10px;
    border-radius:4px;
    line-height:1;
    box-shadow:0 0 0 1px rgba(234,128,26,.3), 0 4px 12px rgba(234,128,26,.25);
}
.vg-price-now{
    font-size:30px;
    font-weight:800;
    color:#fff;
    line-height:1;
    letter-spacing:-.01em;
}
.vg-price-now .woocommerce-Price-amount{color:inherit;}

/* ══════════════════════════════════════════════
   SHARED 2-COLUMN GRID (Row 2 and Row 3)
   - 35% / 1fr split for summary=image width, tabs=spec width
   - align-items:stretch (default, explicit) so grid cells fill the row
     height — this is REQUIRED for position:sticky inside .vg-summary-col
     to scroll within its own column.
══════════════════════════════════════════════ */
.vg-wrap .vg-row-main,
.vg-wrap .vg-row-tabs{
    display:grid !important;
    grid-template-columns:35% 1fr !important;
    gap:var(--vg-col-gap);
    align-items:stretch;
    width:100%;
}
.vg-wrap .vg-row-main{align-items:flex-start;} /* image+spec don't need equal height */
.vg-wrap .vg-row-tabs{margin-top:var(--vg-sticky-top);}

/* ══════════════════════════════════════════════
   ROW 2 : GALLERY + SPEC GRID
══════════════════════════════════════════════ */
.vg-gallery{position:sticky;top:90px;}
.vg-gallery-main{
    position:relative;
    background:var(--vg-card);
    border:1px solid var(--vg-border);
    border-radius:var(--vg-radius);
    overflow:hidden;
    aspect-ratio:1/1;
    box-shadow:var(--vg-shadow);
}
.vg-slide{display:none;width:100%;height:100%;}
.vg-slide.active{display:block;}
.vg-slide img{width:100%;height:100%;object-fit:contain;}
/* ── Thumbs carousel (horizontal scroll + prev/next arrows) ── */
.vg-thumbs-wrap{
    position:relative;
    margin-top:10px;
}
.vg-thumbs{
    display:flex;
    flex-wrap:nowrap;
    gap:8px;
    overflow-x:auto;
    scroll-behavior:smooth;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;                /* Firefox */
    -ms-overflow-style:none;             /* IE/Edge */
    padding:2px 0;
}
.vg-thumbs::-webkit-scrollbar{display:none;}   /* Chrome/Safari */
.vg-thumb{
    flex:0 0 calc((100% - 32px) / 5);    /* 5 visible with 8px gaps on desktop */
    max-width:96px;
    cursor:pointer;
    border:1px solid var(--vg-border);
    border-radius:var(--vg-radius-sm);
    overflow:hidden;
    background:var(--vg-card);
    aspect-ratio:1/1;
    scroll-snap-align:start;
    transition:border-color .15s ease, box-shadow .15s ease;
}
.vg-thumb img{width:100%;height:100%;object-fit:cover;}
.vg-thumb.active{border-color:var(--vg-pri-2);box-shadow:0 0 0 1px var(--vg-pri-2);}
.vg-thumb:hover{border-color:var(--vg-pri-2);}
.vg-thumbs-arrow{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:30px;height:30px;
    border-radius:50%;
    border:0;
    background:rgba(20,23,31,.85);
    color:#fff;
    font-size:14px;
    line-height:1;
    cursor:pointer;
    z-index:2;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 4px 12px rgba(0,0,0,.5), 0 0 0 1px var(--vg-border-strong);
    transition:background .15s ease, opacity .15s ease, transform .1s ease;
    opacity:.95;
}
.vg-thumbs-arrow:hover{background:var(--vg-pri-1);opacity:1;}
.vg-thumbs-arrow:active{transform:translateY(-50%) scale(.94);}
.vg-thumbs-arrow--prev{left:-4px;}
.vg-thumbs-arrow--next{right:-4px;}
.vg-thumbs-arrow[disabled]{opacity:.25;cursor:default;pointer-events:none;}

/* ── Spec grid ── */
.vg-spec-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:10px;
}
.vg-spec-card{
    display:flex;
    flex-direction:column;
    gap:8px;
    padding:14px 14px 16px;
    background:var(--vg-card);
    border:1px solid var(--vg-border);
    border-radius:var(--vg-radius);
    box-shadow:var(--vg-shadow);
    transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
    min-height:130px;
    position:relative;
    overflow:hidden;
}
.vg-spec-card::before{
    content:"";
    position:absolute;
    inset:0 0 auto 0;
    height:1px;
    background:linear-gradient(90deg,transparent,rgba(107,181,229,.35),transparent);
    opacity:.6;
}
.vg-spec-card:hover{
    transform:translateY(-2px);
    border-color:var(--vg-border-strong);
    box-shadow:0 1px 2px rgba(0,0,0,.5), 0 12px 28px rgba(0,0,0,.45);
}
.vg-spec-card.has-upgrade::after{
    content:"";
    position:absolute;
    right:10px;top:10px;
    width:6px;height:6px;border-radius:50%;
    background:var(--vg-accent);
    box-shadow:0 0 8px rgba(234,128,26,.7);
}
.vg-spec-icon{
    width:38px;height:38px;
    display:flex;align-items:center;justify-content:center;
    background:transparent;
    border:1px solid var(--vg-border);
    border-radius:8px;
    font-size:20px;
    color:#fff;
}
.vg-spec-icon img{
    width:24px;height:24px;object-fit:contain;
    filter:brightness(0) invert(1);
}
.vg-spec-icon-ch{line-height:1;}
.vg-spec-text{
    flex:1 1 auto;min-width:0;
    display:flex;flex-direction:column;
    gap:3px;
}
.vg-spec-label{
    font-size:12px;font-weight:700;
    color:var(--vg-ink);
    line-height:1.2;
    letter-spacing:.01em;
}
.vg-spec-value{
    font-size:12px;
    font-weight:500;
    color:var(--vg-accent);
    line-height:1.4;
    word-break:break-word;
}
.vg-spec-empty{color:var(--vg-muted);font-weight:400;}
.vg-spec-value--upgraded{color:var(--vg-accent);font-weight:700;}
.vg-spec-card.is-upgraded{
    border-color:rgba(234,128,26,.45);
    box-shadow:0 1px 2px rgba(0,0,0,.5), 0 0 0 1px rgba(234,128,26,.25), 0 10px 24px rgba(0,0,0,.45);
}
.vg-spec-card.is-upgraded::after{
    background:#22c55e;
    box-shadow:0 0 8px rgba(34,197,94,.7);
}
.vg-upgrade-badge{
    align-self:flex-start;
    margin-top:4px;
    background:transparent;
    border:1px solid var(--vg-pri-2);
    color:var(--vg-pri-2);
    font-size:10px;
    font-weight:800;
    letter-spacing:.08em;
    padding:3px 9px;
    border-radius:4px;
    cursor:pointer;
    text-transform:uppercase;
    transition:background .15s ease, color .15s ease, box-shadow .15s ease;
}
.vg-upgrade-badge:hover{
    background:linear-gradient(90deg,var(--vg-pri-1),var(--vg-pri-2));
    color:#fff;
    border-color:transparent;
    box-shadow:0 0 14px rgba(107,181,229,.4);
}

/* ── Spec foot (Copy + Checkout CTA, directly under the spec grid) ──
   Buttons sized consistently: same padding + font-size + letter-spacing
   so they line up as equal-height siblings. */
.vg-spec-foot{
    display:flex;
    align-items:stretch;
    gap:12px;
    margin-top:12px;
    position:relative;
    flex-wrap:wrap;
}
.vg-spec-foot .vg-btn-ripple,
.vg-spec-foot .vg-btn-copy{
    padding:14px 28px;
    font-size:14px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.08em;
    border-radius:var(--vg-radius-sm);
    line-height:1;
    min-height:48px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
}
.vg-btn-copy{
    background:transparent;
    border:1px solid var(--vg-border-strong);
    color:var(--vg-ink-soft);
    cursor:pointer;
    transition:border-color .15s ease, color .15s ease, background .15s ease;
}
.vg-btn-copy:hover{
    border-color:var(--vg-pri-2);
    color:#fff;
    background:rgba(107,181,229,.06);
}

/* ── Short description block under .vg-spec-foot ── */
.vg-short-desc{
    margin-top:18px;
    padding:14px 16px;
    background:var(--vg-card);
    border:1px solid var(--vg-border);
    border-radius:var(--vg-radius);
    box-shadow:var(--vg-shadow);
}
.vg-short-desc-title{
    margin:0 0 8px;
    font-size:13px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:var(--vg-ink);
}
.vg-short-desc-text{
    font-size:13px;
    line-height:1.6;
    color:#FFFFFFCC;
}
.vg-short-desc-text p{margin:0 0 8px;}
.vg-short-desc-text p:last-child{margin-bottom:0;}
.vg-short-desc-text ul,
.vg-short-desc-text ol{margin:0 0 8px 18px;padding:0;color:#FFFFFFCC;}
.vg-short-desc-text li{margin:0 0 4px;}
.vg-short-desc-text a{color:var(--vg-pri-2);text-decoration:underline;}
.vg-copy-tooltip{
    position:absolute;
    background:#fff;color:#111827;
    padding:6px 10px;border-radius:6px;
    font-size:12px;font-weight:600;
    left:0;top:-34px;
    opacity:0;pointer-events:none;
    transition:opacity .2s ease, transform .2s ease;
    transform:translateY(4px);
    box-shadow:0 4px 14px rgba(0,0,0,.35);
}
.vg-copy-tooltip.show{opacity:1;transform:translateY(0);}

/* ══════════════════════════════════════════════
   ROW 3 : STICKY SUMMARY (left) + TABS w/ PROGRESS BAR (right)
══════════════════════════════════════════════ */

/* Left column — summary is sticky so its top matches tabs top while scrolling.
   Fades in once this row intersects the viewport (JS toggles .show). */
.vg-summary-col{position:relative;}
.vg-sticky-summary{
    position:sticky;
    top:var(--vg-sticky-top);
    background:var(--vg-card);
    border:1px solid var(--vg-border);
    border-radius:var(--vg-radius);
    box-shadow:0 14px 36px rgba(0,0,0,.55);
    padding:14px 14px 16px;
    opacity:0;
    transform:translateY(6px);
    pointer-events:none;
    transition:opacity .25s ease, transform .25s ease;
    max-height:calc(100vh - 140px);
    overflow:auto;
    color:var(--vg-ink-soft);
}
.vg-sticky-summary.show{opacity:1;transform:translateY(0);pointer-events:auto;}
.vg-sticky-head{
    font-size:12px;font-weight:800;
    color:var(--vg-ink);
    text-transform:uppercase;letter-spacing:.08em;
    padding-bottom:8px;
    border-bottom:1px solid var(--vg-border);
    margin-bottom:8px;
}
.vg-sticky-list{
    list-style:none;margin:0;padding:0;
    display:flex;flex-direction:column;gap:2px;
}
.vg-sticky-item{
    display:flex;gap:8px;align-items:flex-start;
    padding:6px 4px;
    border-radius:6px;
    font-size:12px;
}
.vg-sticky-icon{
    flex:0 0 22px;width:22px;height:22px;
    display:flex;align-items:center;justify-content:center;
    background:transparent;
    border:1px solid var(--vg-border);
    border-radius:5px;
    font-size:13px;color:#fff;
}
.vg-sticky-icon img{width:14px;height:14px;object-fit:contain;filter:brightness(0) invert(1);}
.vg-sticky-text{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px;}
.vg-sticky-label{font-size:11px;font-weight:700;color:var(--vg-ink);}
.vg-sticky-val{font-size:11px;font-weight:500;color:var(--vg-accent);line-height:1.3;word-break:break-word;}
.vg-sticky-up{
    align-self:flex-start;
    font-size:9px;font-weight:800;
    color:var(--vg-pri-2);
    border:1px solid var(--vg-pri-2);
    padding:2px 5px;border-radius:3px;
    letter-spacing:.06em;
}
.vg-sticky-total{
    margin-top:10px;padding-top:10px;
    border-top:1px solid var(--vg-border);
    display:flex;flex-direction:column;gap:2px;
}
.vg-sticky-total-label{
    font-size:10px;font-weight:800;text-transform:uppercase;
    color:var(--vg-muted);letter-spacing:.08em;
}
.vg-sticky-total-val{font-size:20px;font-weight:800;color:#fff;line-height:1;}
.vg-btn-copy--sticky{margin-top:10px;width:100%;padding:9px 12px;font-size:12px;}

/* Tabs column card */
.vg-tabs-col{
    background:var(--vg-card);
    border:1px solid var(--vg-border);
    border-radius:var(--vg-radius);
    box-shadow:var(--vg-shadow);
    overflow:hidden;
}

/* ── Progress bar (stepper) ──
   Primary gradient ring around the active step's dot, filled connector
   line between completed steps. Click a step to jump to that tab.       */
.vg-progress{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:18px 22px 14px;
    background:var(--vg-card-3);
    border-bottom:1px solid var(--vg-border);
    gap:6px;
}
.vg-progress-step{
    flex:1 1 0;
    min-width:0;
    display:flex;
    align-items:center;
    gap:8px;
    background:transparent;
    border:0;
    padding:0;
    cursor:pointer;
    color:var(--vg-muted);
    font-size:12px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.08em;
    position:relative;
    transition:color .2s ease;
    text-align:left;
}
.vg-progress-step:last-child{flex:0 0 auto;padding-right:4px;}  /* was flex-grow:0 — caused the label to collapse */
.vg-progress-step:last-child .vg-progress-label{max-width:none;} /* ensure Checkout label stays visible */
.vg-progress-step:hover{color:var(--vg-ink);}
.vg-progress-dot{
    flex:0 0 28px;
    width:28px;height:28px;
    border-radius:50%;
    background:var(--vg-card);
    border:0;
    display:flex;align-items:center;justify-content:center;
    font-size:13px;font-weight:800;
    color:var(--vg-muted);
    transition:all .25s ease;
    position:relative;
    z-index:1;
}
.vg-progress-num{line-height:1;}
.vg-progress-label{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.vg-progress-bar{
    flex:1 1 auto;
    height:2px;
    background:var(--vg-border-strong);
    border-radius:2px;
    margin:0 4px;
    position:relative;
    overflow:hidden;
}
.vg-progress-bar::after{
    content:"";
    position:absolute;
    inset:0 100% 0 0;
    background:linear-gradient(90deg,var(--vg-pri-1),var(--vg-pri-2));
    transition:right .35s ease;
}
/* Active step (current tab) — dot gets primary gradient */
.vg-progress-step.active{color:#fff;}
.vg-progress-step.active .vg-progress-dot{
    background:linear-gradient(135deg,var(--vg-pri-1),var(--vg-pri-2));
    border-color:transparent;
    color:#fff;
    box-shadow:0 0 0 3px rgba(107,181,229,.15), 0 0 16px rgba(107,181,229,.5);
}
/* Completed steps (any step before the active one) — dot fully filled
   and connector bar at 100% */
.vg-progress-step.completed .vg-progress-dot{
    background:linear-gradient(135deg,var(--vg-pri-1),var(--vg-pri-2));
    border-color:transparent;
    color:#fff;
}
.vg-progress-step.completed .vg-progress-bar::after{right:0;}
.vg-progress-step.active .vg-progress-bar::after{right:50%;}

/* ── Tab panels ── */
.vg-tabs{padding:0;}
.vg-tab-panel{display:none;padding:22px;}
.vg-tab-panel.active{display:block;}

/* ── Upgrade slots ── */
.vg-up-slot{margin-bottom:22px;}
.vg-up-slot:last-child{margin-bottom:0;}
.vg-up-slot-title{
    margin:0 0 12px;
    font-size:15px;
    font-weight:800;
    display:flex;align-items:center;gap:8px;
    color:var(--vg-ink);
    text-transform:uppercase;
    letter-spacing:.06em;
}
.vg-up-slot-hint{
    color:var(--vg-muted);
    font-weight:500;font-size:12px;
    text-transform:none;letter-spacing:0;
}
.vg-up-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
    gap:10px;
}
.vg-up-card{
    display:flex;gap:10px;
    padding:12px;
    border:1px solid var(--vg-border);
    border-radius:var(--vg-radius);
    cursor:pointer;
    transition:border-color .15s ease, background .15s ease, box-shadow .15s ease;
    background:var(--vg-card-2);
    position:relative;
    color:var(--vg-ink-soft);
}
.vg-up-card:hover{border-color:var(--vg-border-strong);}
.vg-up-card input[type=radio]{position:absolute;opacity:0;pointer-events:none;}
.vg-up-card:has(input[type=radio]:checked){
    border-color:var(--vg-pri-2);
    background:linear-gradient(135deg,rgba(18,100,175,.16),rgba(107,181,229,.10));
    box-shadow:var(--vg-glow-pri);
}
.vg-up-card-img{
    flex:0 0 60px;
    width:60px;height:60px;
    border-radius:8px;overflow:hidden;
    background:var(--vg-card-3);
    border:1px solid var(--vg-border);
    display:flex;align-items:center;justify-content:center;
}
.vg-up-card-img img{width:100%;height:100%;object-fit:contain;}
.vg-up-card-img--keep{
    background:linear-gradient(135deg,var(--vg-pri-1),var(--vg-pri-2));
    color:#fff;font-size:26px;font-weight:800;
    border-color:transparent;
}
.vg-up-card-info{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px;}
.vg-up-card-name{font-weight:700;font-size:13.5px;line-height:1.3;word-break:break-word;color:var(--vg-ink);}
.vg-up-card-current{font-size:12px;color:var(--vg-muted);}
.vg-up-card-notes{font-size:12px;color:var(--vg-muted);line-height:1.4;}
.vg-up-card-extra{font-size:13px;font-weight:800;color:var(--vg-accent);margin-top:2px;}

/* ── PWP (promotion / addon) cards ── */
.vg-promo-group{margin-bottom:24px;}
.vg-promo-group:last-child{margin-bottom:0;}
.vg-group-title{
    margin:0 0 12px;
    font-size:15px;font-weight:800;color:var(--vg-ink);
    text-transform:uppercase;letter-spacing:.06em;
}
.vg-pwp-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
    gap:10px;
}
.vg-pwp-card{
    display:flex;gap:12px;align-items:center;
    padding:12px;
    background:var(--vg-card-2);
    border:1px solid var(--vg-border);
    border-radius:var(--vg-radius);
    cursor:pointer;
    position:relative;
    transition:border-color .15s ease, background .15s ease, box-shadow .15s ease;
    color:var(--vg-ink-soft);
}
.vg-pwp-card:hover{border-color:var(--vg-border-strong);}
.vg-pwp-card input[type=checkbox]{position:absolute;opacity:0;pointer-events:none;}
.vg-pwp-card:has(input[type=checkbox]:checked){
    border-color:var(--vg-pri-2);
    background:linear-gradient(135deg,rgba(18,100,175,.16),rgba(107,181,229,.10));
    box-shadow:var(--vg-glow-pri);
}
.vg-pwp-img{
    flex:0 0 56px;
    width:56px;height:56px;border-radius:8px;overflow:hidden;
    background:var(--vg-card-3);
    border:1px solid var(--vg-border);
    display:flex;align-items:center;justify-content:center;
}
.vg-pwp-img img{width:100%;height:100%;object-fit:contain;}
.vg-pwp-info{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px;}
.vg-pwp-name{font-weight:700;font-size:13.5px;line-height:1.3;word-break:break-word;color:var(--vg-ink);}
.vg-pwp-prices{font-size:13px;display:flex;align-items:center;gap:6px;}
.vg-pwp-prices del{color:var(--vg-muted);opacity:.8;font-weight:400;}
.vg-pwp-prices strong{color:var(--vg-accent);font-weight:800;}
.vg-pwp-check{
    width:20px;height:20px;flex:0 0 20px;
    border:1px solid var(--vg-border-strong);
    border-radius:6px;
    display:flex;align-items:center;justify-content:center;
    transition:background .15s ease, border-color .15s ease;
    background:var(--vg-card-3);
}
.vg-pwp-card:has(input[type=checkbox]:checked) .vg-pwp-check{
    background:linear-gradient(135deg,var(--vg-pri-1),var(--vg-pri-2));
    border-color:transparent;
}
.vg-pwp-card:has(input[type=checkbox]:checked) .vg-pwp-check::after{
    content:"✓";color:#fff;font-size:13px;font-weight:800;line-height:1;
}

/* ── Checkout panel ── */
.vg-checkout-box{display:flex;flex-direction:column;gap:14px;padding:4px;}
.vg-checkout-summary{
    background:var(--vg-card-3);
    border:1px solid var(--vg-border);
    border-radius:var(--vg-radius);
    padding:14px 16px;
    font-size:14px;
    color:var(--vg-ink-soft);
}
.vg-checkout-summary .vg-cs-row{
    display:flex;justify-content:space-between;
    padding:6px 0;
    border-bottom:1px dashed var(--vg-border);
}
.vg-checkout-summary .vg-cs-row:last-child{border-bottom:0;}
.vg-checkout-summary .vg-cs-total{
    font-size:18px;font-weight:800;
    color:#fff;
    padding-top:8px;margin-top:6px;
    border-top:1px solid var(--vg-border-strong);
}

/* ══════════════════════════════════════════════
   CHECKOUT CTA w/ RIPPLE (secondary = accent color)
══════════════════════════════════════════════ */
.vg-btn-ripple{
    position:relative;
    overflow:hidden;
    isolation:isolate;
    background:linear-gradient(90deg,var(--vg-accent),var(--vg-accent-2));
    color:#fff;
    border:0;
    font-weight:800;
    font-size:14px;
    text-transform:uppercase;
    letter-spacing:.08em;
    padding:14px 28px;
    border-radius:var(--vg-radius-sm);
    cursor:pointer;
    transition:filter .15s ease, transform .08s ease, box-shadow .2s ease;
    box-shadow:0 6px 16px rgba(234,128,26,.35), 0 0 0 1px rgba(234,128,26,.25);
    -webkit-tap-highlight-color:transparent;
}
.vg-btn-ripple:hover{
    filter:brightness(1.08);
    box-shadow:0 8px 22px rgba(234,128,26,.5), 0 0 0 1px rgba(234,128,26,.4);
}
.vg-btn-ripple:active{transform:translateY(1px);}
.vg-btn-ripple .vg-btn-label{position:relative;z-index:2;}
/* Ripple circle — JS positions & triggers it */
.vg-btn-ripple .vg-ripple{
    position:absolute;
    border-radius:50%;
    transform:scale(0);
    background:rgba(255,255,255,.45);
    pointer-events:none;
    animation:vgRipple .6s linear;
    z-index:1;
}
@keyframes vgRipple{
    to{transform:scale(2.6);opacity:0;}
}
/* Full-width variant used inside the Checkout panel */
.vg-btn-checkout--wide{width:100%;}

/* ══════════════════════════════════════════════
   STICKY BOTTOM PROGRESS BAR
   Fixed to the viewport bottom; slides up when the user scrolls
   past the main .vg-progress. Mirrors the main stepper and adds
   a Reset button on the left + Checkout on the right.
══════════════════════════════════════════════ */
.vg-progress-sticky{
    position:fixed;
    left:0;right:0;bottom:0;
    z-index:9000;
    background:var(--vg-card-3);
    border-top:1px solid var(--vg-border-strong);
    box-shadow:0 -8px 24px rgba(0,0,0,.55);
    transform:translateY(100%);
    transition:transform .28s ease;
    pointer-events:none;
}
.vg-progress-sticky.show{
    transform:translateY(0);
    pointer-events:auto;
}
.vg-progress-sticky-inner{
    max-width:1300px;
    margin:0 auto;
    padding:10px 18px;
    display:flex;
    align-items:center;
    gap:14px;
}

/* Mirrored stepper — inherit the base .vg-progress rules but drop
   the card background + bottom border. */
.vg-progress--sticky{
    flex:1 1 auto;
    padding:0 !important;
    background:transparent !important;
    border-bottom:0 !important;
    min-width:0;
}

/* Reset button (left) */
.vg-progress-sticky-reset{
    flex:0 0 auto;
    background:transparent;
    border:1px solid var(--vg-border-strong);
    color:var(--vg-ink-soft);
    font-size:13px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.06em;
    padding:10px 16px;
    border-radius:var(--vg-radius-sm);
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    gap:6px;
    line-height:1;
    transition:border-color .15s ease, color .15s ease, background .15s ease;
}
.vg-progress-sticky-reset:hover{
    border-color:var(--vg-pri-2);
    color:#fff;
    background:rgba(107,181,229,.08);
}
.vg-progress-sticky-reset-ico{font-size:16px;line-height:1;}

/* Checkout button (right) — accent ripple style, smaller than main CTA */
.vg-progress-sticky-checkout{
    flex:0 0 auto;
    padding:11px 22px !important;
    font-size:13px !important;
    letter-spacing:.06em !important;
}

@media (max-width:991px){
    .vg-progress-sticky-inner{padding:8px 10px;gap:8px;}
    .vg-progress-sticky-reset{padding:8px 12px;font-size:12px;}
    .vg-progress-sticky-checkout{padding:9px 16px !important;font-size:12px !important;}
}
@media (max-width:640px){
    .vg-progress-sticky-reset span:not(.vg-progress-sticky-reset-ico){display:none;}
    .vg-progress-sticky-reset{font-size:0;padding:8px 10px;}
    .vg-progress-sticky-reset-ico{font-size:18px;}
}

/* Elementor embed wrapper — simple spacing */
.vg-elementor-embed{
    margin-top:28px;
}

/* ══════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════ */
@media (max-width:1100px){
    .vg-wrap .vg-row-main,
    .vg-wrap .vg-row-tabs{grid-template-columns:1fr !important;}
    .vg-gallery{position:static;}
    .vg-summary-col{display:none;}              /* summary hidden < 1100 */
    .vg-spec-grid{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:991px){
    .vg-spec-grid{grid-template-columns:repeat(2,1fr);}
    .vg-progress-label{display:none;}           /* dots-only stepper on tablet */
    .vg-progress-step{flex:0 0 auto;}
    .vg-progress{justify-content:space-between;gap:0;}
    .vg-progress-bar{flex:1 1 auto;}
}
@media (max-width:640px){
    .vg-row-title{flex-wrap:nowrap;align-items:center;gap:10px;}
    .vg-title{font-size:18px;flex:0 0 60%;max-width:60%;}
    .vg-price-box{flex:0 0 40%;max-width:40%;justify-content:flex-end;}
    .vg-price-now{font-size:18px;}
    .vg-spec-grid{grid-template-columns:repeat(3,1fr);}
    .vg-tab-panel{padding:16px;}
    .vg-up-grid,.vg-pwp-grid{grid-template-columns:1fr;}
    .vg-thumb{flex:0 0 calc((100% - 24px) / 4);}  /* 4 visible thumbs on mobile */
    .vg-progress{padding:14px 14px 10px;}
    .vg-btn-ripple{padding:13px 22px;font-size:13px;}
}

/* ══════════════════════════════════════════════
   OUT-OF-STOCK STATES
   Greyed out + non-clickable upgrade / promo / add-on cards.
══════════════════════════════════════════════ */
.vg-wrap .vg-up-card--oos,
.vg-wrap .vg-pwp-card--oos{
    opacity:.45;
    filter:grayscale(.6);
    cursor:not-allowed !important;
    pointer-events:none;                 /* blocks clicks on the label */
}
.vg-wrap .vg-up-card--oos input,
.vg-wrap .vg-pwp-card--oos input{
    cursor:not-allowed !important;
    pointer-events:none;
}
.vg-up-card-oos,
.vg-pwp-oos{
    display:inline-block;
    margin-top:4px;
    font-size:11px;font-weight:800;
    text-transform:uppercase;letter-spacing:.08em;
    color:#ff6b6b;
}

/* ══════════════════════════════════════════════
   SUBMIT GUARD — disabled submit button state
══════════════════════════════════════════════ */
.vg-wrap .vg-btn-ripple.vg-is-submitting,
.vg-wrap button[type="submit"].vg-is-submitting{
    opacity:.6;
    cursor:wait !important;
    pointer-events:none;
}