/* ---- preview shop page ---- */
:where(.vpp-shop) .cat-tabs { display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:32px; overflow-x:auto; }
:where(.vpp-shop) .cat-tab { background:none; border:none; padding:14px 22px; font-family:var(--font-sans); font-size:14px; font-weight:500; color:var(--ink-500); border-bottom:2px solid transparent; cursor:pointer; white-space:nowrap; }
:where(.vpp-shop) .cat-tab:hover { color:var(--navy-800); }
:where(.vpp-shop) .cat-tab.active { color:var(--navy-800); border-color:var(--navy-700); font-weight:600; }
:where(.vpp-shop) .cat-tab .count { display:inline-block; margin-left:6px; padding:2px 8px; background:var(--paper); border:1px solid var(--line); border-radius:999px; font-family:var(--font-mono); font-size:11px; color:var(--ink-500); }
:where(.vpp-shop) .cat-tab.active .count { background:var(--navy-700); color:#fff; border-color:var(--navy-700); }
:where(.vpp-shop) .cat-panel { display:none; }
:where(.vpp-shop) .cat-panel.active { display:block; }
:where(.vpp-shop) .cat-banner { padding:18px 22px; margin-bottom:24px; border-radius:8px; border-left:4px solid var(--teal-500); background:#EEF6FB; color:#0B4C5F; font-size:14px; line-height:1.6; }
:where(.vpp-shop) .cat-banner strong { color:var(--navy-800); }
:where(.vpp-shop) .price-tbd-shop { font-size:13px; color:var(--ink-500); font-style:italic; font-weight:500; }
:where(.vpp-shop) .product-card .bogo-badge { position:absolute; top:12px; right:12px; background:#B91C1C; color:#fff; font-family:var(--font-mono); font-size:9.5px; padding:4px 9px; border-radius:3px; letter-spacing:0.10em; font-weight:700; z-index:3; }
:where(.vpp-shop) .product-card .bulk-badge { position:absolute; top:12px; right:12px; background:var(--teal-500); color:#fff; font-family:var(--font-mono); font-size:9.5px; padding:4px 9px; border-radius:3px; letter-spacing:0.10em; font-weight:700; z-index:2; }
:where(.vpp-shop) .product-card .vial-frame:has(.bogo-badge) .bulk-badge { top:38px; }

/* ---- preview product page ---- */
:where(.vpp-pdp) .pdp { display:grid; grid-template-columns: 1.1fr 1fr; gap: 56px; margin-top: 32px; }
:where(.vpp-pdp) .pdp-image { background: #fff; border:1px solid var(--line); border-radius: 12px; padding: 0; display:flex; align-items:center; justify-content:center; align-self:start; position:relative; overflow:hidden; }
:where(.vpp-pdp) .pdp-image img { width:100%; height:auto; aspect-ratio:1; object-fit:contain; display:block; }
:where(.vpp-pdp) .pdp-image .pdp-blend-badge { position:absolute; top:20px; left:20px; background:var(--navy-700); color:#fff; font-family:var(--font-mono); font-size:11px; padding:6px 12px; border-radius:4px; letter-spacing:0.16em; font-weight:600; }
:where(.vpp-pdp) .pdp-info .subtitle { font-size: 13px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--teal-500); font-weight: 600; }
:where(.vpp-pdp) .pdp-info h1 { font-size: 40px; margin: 10px 0 6px; }
:where(.vpp-pdp) .pdp-info .tagline { font-family: var(--font-mono); font-size: 13px; color: var(--navy-800); margin: 4px 0 8px; }
:where(.vpp-pdp) .pdp-info .cas { font-family: var(--font-mono); font-size: 13px; color: var(--ink-500); line-height: 1.7; }
:where(.vpp-pdp) .strength-opts { display:flex; gap: 10px; margin: 8px 0 24px; flex-wrap:wrap; }
:where(.vpp-pdp) .strength-opt { font-family: var(--font-mono); font-size: 14px; padding: 10px 18px; background: var(--paper); border: 1.5px solid var(--line); border-radius: 8px; cursor: pointer; user-select:none; transition: all .15s; }
:where(.vpp-pdp) .strength-opt:hover { border-color: var(--navy-700); }
:where(.vpp-pdp) .strength-opt input { display:none; }
:where(.vpp-pdp) .strength-opt.selected { background: var(--navy-700); color: #fff; border-color: var(--navy-700); }
:where(.vpp-pdp) .spec-table { margin-top: 32px; width: 100%; border-collapse: collapse; }
:where(.vpp-pdp) .spec-table th, :where(.vpp-pdp) .spec-table td { text-align:left; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
:where(.vpp-pdp) .spec-table th { color: var(--ink-500); font-weight: 500; width: 40%; }
:where(.vpp-pdp) .spec-table td { color: var(--navy-800); font-family: var(--font-mono); word-break: break-word; }
:where(.vpp-pdp) .ruo-callout { margin-top: 24px; padding: 16px 18px; background: #FDF7E8; border-left: 4px solid #C99A2A; border-radius: 4px; font-size: 13px; color: #6B4E0F; line-height: 1.6; }
:where(.vpp-pdp) .buffered-note { margin-top: 16px; padding: 14px 16px; background: #EEF6FB; border-left: 4px solid var(--teal-500); border-radius: 4px; font-size: 13px; color: #0B4C5F; line-height: 1.6; }
:where(.vpp-pdp) .bogo-note { margin-top: 16px; padding: 14px 16px; background: #FEF2F2; border-left: 4px solid #B91C1C; border-radius: 4px; font-size: 13px; color: #7F1D1D; line-height: 1.6; }
:where(.vpp-pdp) .bogo-note strong, :where(.vpp-pdp) .bulk-note strong { color: var(--navy-800); }
:where(.vpp-pdp) .bulk-note { margin-top: 16px; padding: 14px 16px; background: #F0FAFB; border-left: 4px solid var(--teal-500); border-radius: 4px; font-size: 13px; color: #0B4C5F; line-height: 1.6; }
:where(.vpp-pdp) .pack-toggle { display:flex; gap:8px; margin-bottom:16px; }
:where(.vpp-pdp) .pack-toggle button { flex:1; padding:10px 14px; background:var(--paper); border:1.5px solid var(--line); border-radius:8px; font-family:var(--font-sans); font-size:13px; font-weight:500; color:var(--navy-800); cursor:pointer; }
:where(.vpp-pdp) .pack-toggle button.active { background:var(--navy-700); color:#fff; border-color:var(--navy-700); }
:where(.vpp-pdp) .qty-row { display:flex; align-items:center; gap: 12px; margin: 24px 0 16px; }
:where(.vpp-pdp) .qty-input { width: 80px; text-align:center; }
:where(.vpp-pdp) .price-live { margin-left:auto; font-family:var(--font-mono); color:var(--navy-800); font-size: 26px; font-weight: 600; }
:where(.vpp-pdp) .price-tbd { font-size: 14px; color: var(--ink-500); font-weight: 500; font-style: italic; }
:where(.vpp-pdp) .tabs { margin-top: 64px; border-top: 1px solid var(--line); padding-top: 40px; }
:where(.vpp-pdp) .tabs-nav { display:flex; gap: 32px; border-bottom: 1px solid var(--line); flex-wrap:wrap; }
:where(.vpp-pdp) .tabs-nav button { background:none; border:none; padding: 12px 0; font-size: 14px; font-weight: 500; color: var(--ink-500); border-bottom: 2px solid transparent; cursor: pointer; font-family: var(--font-sans); }
:where(.vpp-pdp) .tabs-nav button.active { color: var(--navy-800); border-color: var(--navy-700); }
:where(.vpp-pdp) .tab-panel { padding: 24px 0; font-size: 15px; color: var(--ink-700); line-height: 1.7; max-width: 780px; display:none; }
:where(.vpp-pdp) .tab-panel.active { display:block; }
:where(.vpp-pdp) .blend-breakdown { display:grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-top: 16px; }
:where(.vpp-pdp) .blend-item { padding: 14px 16px; background: var(--paper); border: 1px solid var(--line); border-radius: 8px; }
:where(.vpp-pdp) .blend-item .n { font-family: var(--font-mono); font-size: 13px; color: var(--navy-800); font-weight: 600; }
:where(.vpp-pdp) .blend-item .a { font-family: var(--font-mono); font-size: 15px; color: var(--teal-500); margin-top: 4px; }
@media (max-width: 900px) {
:where(.vpp-pdp) .pdp { grid-template-columns: 1fr; gap: 32px; }
:where(.vpp-pdp) .pdp-info h1 { font-size: 32px; }
}

/* ---- preview cart page ---- */
:where(.vpp-cart) .cart-grid { display:grid; grid-template-columns: 1fr 360px; gap:40px; }
@media (max-width: 900px) {
:where(.vpp-cart) .cart-grid { grid-template-columns: 1fr; }
}
:where(.vpp-cart) .cart-line { display:grid; grid-template-columns: 90px 1fr auto; gap:20px; padding:20px 0; border-bottom:1px solid var(--line); align-items:center; }
:where(.vpp-cart) .cart-line img { width:70px; height:auto; }
:where(.vpp-cart) .cart-line .name { font-family:var(--font-display); font-weight:600; color:var(--navy-800); font-size:16px; }
:where(.vpp-cart) .cart-line .meta { font-size:13px; color:var(--ink-500); margin-top:4px; }
:where(.vpp-cart) .cart-line .meta .tag { display:inline-block; padding:2px 8px; margin-right:6px; border-radius:3px; font-family:var(--font-mono); font-size:10px; letter-spacing:0.08em; font-weight:600; text-transform:uppercase; }
:where(.vpp-cart) .cart-line .tag-bogo { background:#FEF2F2; color:#B91C1C; }
:where(.vpp-cart) .cart-line .tag-bulk { background:#F0FAFB; color:#0B4C5F; }
:where(.vpp-cart) .cart-line .tag-blend { background:#EEF2F7; color:var(--navy-800); }
:where(.vpp-cart) .cart-line .qty-row { display:flex; align-items:center; gap:8px; margin-top:8px; }
:where(.vpp-cart) .cart-line .qty-row input { width:56px; text-align:center; }
:where(.vpp-cart) .cart-line .line-total { font-family:var(--font-mono); font-size:18px; color:var(--navy-800); font-weight:600; text-align:right; }
:where(.vpp-cart) .cart-line .remove { background:none; border:none; color:var(--ink-500); cursor:pointer; font-size:12px; text-decoration:underline; margin-top:6px; }
:where(.vpp-cart) .summary { background:var(--paper); border:1px solid var(--line); border-radius:8px; padding:24px; position:sticky; top:24px; }
:where(.vpp-cart) .summary h3 { margin:0 0 16px; font-size:18px; }
:where(.vpp-cart) .summary .row { display:flex; justify-content:space-between; padding:8px 0; font-size:14px; color:var(--ink-500); }
:where(.vpp-cart) .summary .row.total { border-top:1px solid var(--line); margin-top:12px; padding-top:16px; font-size:16px; font-weight:600; color:var(--navy-800); }
:where(.vpp-cart) .summary .row .amt { font-family:var(--font-mono); color:var(--navy-800); }
:where(.vpp-cart) .summary .discount .amt { color:#059669; }
:where(.vpp-cart) .empty-state { text-align:center; padding:80px 20px; color:var(--ink-500); }
:where(.vpp-cart) .empty-state h2 { color:var(--navy-800); margin-bottom:12px; }

/* ---- preview checkout page ---- */
:where(.vpp-checkout) .co-grid { display:grid; grid-template-columns: 1fr 360px; gap:40px; align-items:start; }
@media (max-width: 900px) {
:where(.vpp-checkout) .co-grid { grid-template-columns: 1fr; }
}
:where(.vpp-checkout) .co-steps { display:flex; gap:0; margin-bottom:32px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
:where(.vpp-checkout) .co-step { padding:12px 20px; font-size:13px; color:var(--ink-500); border-bottom:2px solid transparent; font-family:var(--font-sans); font-weight:500; }
:where(.vpp-checkout) .co-step.done { color:var(--teal-500); }
:where(.vpp-checkout) .co-step.active { color:var(--navy-800); border-color:var(--navy-700); font-weight:600; }
:where(.vpp-checkout) .co-step .num { display:inline-block; width:22px; height:22px; line-height:22px; text-align:center; border-radius:50%; background:var(--paper); border:1px solid var(--line); font-family:var(--font-mono); font-size:11px; margin-right:8px; }
:where(.vpp-checkout) .co-step.active .num { background:var(--navy-700); color:#fff; border-color:var(--navy-700); }
:where(.vpp-checkout) .co-step.done .num { background:var(--teal-500); color:#fff; border-color:var(--teal-500); }
:where(.vpp-checkout) .co-panel { display:none; }
:where(.vpp-checkout) .co-panel.active { display:block; }
:where(.vpp-checkout) .co-grid input, :where(.vpp-checkout) .co-grid select, :where(.vpp-checkout) .co-grid textarea { width:100%; margin-bottom:14px; }
:where(.vpp-checkout) .co-grid label { display:block; font-size:13px; font-weight:500; color:var(--navy-800); margin-bottom:4px; }
:where(.vpp-checkout) .co-2col { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
:where(.vpp-checkout) .co-3col { display:grid; grid-template-columns:2fr 1fr 1fr; gap:14px; }
:where(.vpp-checkout) .co-actions { display:flex; justify-content:space-between; margin-top:24px; }
:where(.vpp-checkout) .pay-option { display:block; padding:16px; border:1.5px solid var(--line); border-radius:8px; margin-bottom:10px; cursor:pointer; }
:where(.vpp-checkout) .pay-option.selected { border-color:var(--navy-700); background:#F8FAFC; }
:where(.vpp-checkout) .pay-option .label { font-weight:600; color:var(--navy-800); }
:where(.vpp-checkout) .pay-option .desc { font-size:12px; color:var(--ink-500); margin-top:4px; }
:where(.vpp-checkout) .summary-mini { background:var(--paper); border:1px solid var(--line); border-radius:8px; padding:24px; position:sticky; top:24px; }
:where(.vpp-checkout) .summary-mini h3 { margin:0 0 16px; font-size:16px; }
:where(.vpp-checkout) .summary-mini .line { display:flex; justify-content:space-between; padding:6px 0; font-size:13px; color:var(--ink-500); border-bottom:1px dashed var(--line); }
:where(.vpp-checkout) .summary-mini .line .n { color:var(--navy-800); }
:where(.vpp-checkout) .summary-mini .totals { margin-top:12px; padding-top:12px; }
:where(.vpp-checkout) .summary-mini .totals .row { display:flex; justify-content:space-between; padding:4px 0; font-size:13px; }
:where(.vpp-checkout) .summary-mini .totals .row.grand { border-top:1px solid var(--line); margin-top:8px; padding-top:12px; font-weight:600; color:var(--navy-800); font-size:15px; }
:where(.vpp-checkout) .review-block { padding:16px; background:var(--paper); border-radius:6px; margin-bottom:16px; font-size:13px; line-height:1.6; }
:where(.vpp-checkout) .review-block h4 { margin:0 0 6px; font-size:13px; color:var(--navy-800); font-family:var(--font-sans); font-weight:600; }
:where(.vpp-checkout) .review-block .edit { float:right; font-size:12px; text-decoration:underline; }

/* ---- preview order-confirmation page ---- */
:where(.vpp-thankyou) .oc-hero { text-align:center; padding:40px 20px 24px; }
:where(.vpp-thankyou) .oc-hero .check { width:64px; height:64px; border-radius:50%; background:#DCFCE7; color:#059669; display:inline-flex; align-items:center; justify-content:center; font-size:32px; margin-bottom:16px; }
:where(.vpp-thankyou) .oc-hero h1 { margin:0 0 8px; font-size:32px; color:var(--navy-800); }
:where(.vpp-thankyou) .oc-hero .oid { font-family:var(--font-mono); color:var(--ink-500); font-size:14px; }
:where(.vpp-thankyou) .oc-card { background:#fff; border:1px solid var(--line); border-radius:8px; padding:28px; margin-top:24px; }
:where(.vpp-thankyou) .oc-card h3 { margin:0 0 14px; font-size:16px; color:var(--navy-800); }
:where(.vpp-thankyou) .oc-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
@media (max-width:700px) {
:where(.vpp-thankyou) .oc-grid { grid-template-columns:1fr; }
}
:where(.vpp-thankyou) .oc-item { display:flex; gap:16px; padding:12px 0; border-bottom:1px dashed var(--line); align-items:center; }
:where(.vpp-thankyou) .oc-item:last-child { border-bottom:none; }
:where(.vpp-thankyou) .oc-item .info { flex:1; }
:where(.vpp-thankyou) .oc-totals { margin-top:12px; padding-top:12px; border-top:2px solid var(--navy-800); }
:where(.vpp-thankyou) .oc-totals .row { display:flex; justify-content:space-between; padding:4px 0; }
:where(.vpp-thankyou) .oc-totals .row.grand { font-weight:600; font-size:16px; color:var(--navy-800); }
:where(.vpp-thankyou) .next-steps { background:var(--paper); border-left:4px solid var(--teal-500); padding:20px; border-radius:6px; margin-top:24px; font-size:14px; line-height:1.7; }