/**
* VendMizer Pro — Advanced storefront section styles (Section SDK, Phase 1).
* Uses the storefront's own theme tokens (--sf-*), so light/dark and RTL are
* inherited automatically. Scoped to the vmzp-* section classes only.
*/
/* ── Marquee ─────────────────────────────────────────────── */
.vmzp-marquee { overflow: hidden; }
.vmzp-marquee__track {
display: inline-flex;
white-space: nowrap;
will-change: transform;
animation: vmzp-marquee-scroll 24s linear infinite;
}
.vmzp-marquee__item {
display: inline-block;
padding: 10px 3rem;
font-size: 1.05rem;
font-weight: 600;
color: var(--sf-text, inherit);
letter-spacing: .01em;
}
[dir="rtl"] .vmzp-marquee__track { animation-direction: reverse; }
.vmzp-marquee:hover .vmzp-marquee__track { animation-play-state: paused; }
@keyframes vmzp-marquee-scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
.vmzp-marquee__track { animation: none; white-space: normal; }
.vmzp-marquee__item:nth-child(2) { display: none; }
}
/* ── Chat CTA ────────────────────────────────────────────── */
.vmzp-chatcta { text-align: center; padding-block: 8px; }
.vmzp-chatcta__title {
font-size: clamp(1.4rem, 3vw, 2rem);
font-weight: 800;
margin: 0 0 .4rem;
color: var(--sf-text, inherit);
}
.vmzp-chatcta__sub {
font-size: 1rem;
color: var(--sf-text-muted, inherit);
margin: 0 auto 1.4rem;
max-width: 46ch;
}
.vmzp-chatcta__btn {
display: inline-flex;
align-items: center;
gap: .55rem;
padding: .8rem 1.6rem;
border-radius: var(--sf-radius-lg, 12px);
background: #25D366; /* WhatsApp brand green — intentional, not the store accent */
color: #fff;
font-weight: 700;
font-size: 1rem;
text-decoration: none;
box-shadow: 0 6px 18px rgba(37, 211, 102, .32);
transition: transform .15s ease, box-shadow .15s ease;
}
.vmzp-chatcta__btn::before {
content: "";
width: 20px; height: 20px;
background: currentColor;
-webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
flex: none;
}
.vmzp-chatcta__btn:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(37, 211, 102, .4); }
/* ── Tabs ─────────────────────────────────────────────────── */
.vmzp-tabs__nav { display:flex; flex-wrap:wrap; gap:6px; border-bottom:1px solid var(--sf-border, #e5e7eb); margin-bottom:1.2rem; }
.vmzp-tabs__tab {
appearance:none; background:transparent; border:0; cursor:pointer;
padding:.7rem 1.1rem; font-size:.95rem; font-weight:600;
color:var(--sf-text-muted, #6b7280); border-bottom:2px solid transparent; margin-bottom:-1px;
}
.vmzp-tabs__tab:hover { color:var(--sf-text, inherit); }
.vmzp-tabs__tab--active { color:var(--sf-accent, #00A4FF); border-bottom-color:var(--sf-accent, #00A4FF); }
.vmzp-tabs__panel { color:var(--sf-text, inherit); line-height:1.7; }
/* ── Accordion + Rich FAQ ─────────────────────────────────── */
.vmzp-acc__item, .vmzp-faq__item { border:1px solid var(--sf-border, #e5e7eb); border-radius:var(--sf-radius, 10px); margin-bottom:.6rem; overflow:hidden; }
.vmzp-acc__q, .vmzp-faq__q {
width:100%; display:flex; align-items:center; justify-content:space-between; gap:1rem;
appearance:none; background:transparent; border:0; cursor:pointer; text-align:start;
padding:1rem 1.1rem; font-size:1rem; font-weight:600; color:var(--sf-text, inherit);
}
.vmzp-acc__q svg, .vmzp-faq__q svg { flex:none; transition:transform .2s ease; color:var(--sf-text-muted, #6b7280); }
.vmzp-acc__q[aria-expanded="true"] svg, .vmzp-faq__q[aria-expanded="true"] svg { transform:rotate(180deg); }
.vmzp-acc__a, .vmzp-faq__a { padding:0 1.1rem 1.1rem; color:var(--sf-text-muted, #6b7280); line-height:1.7; }
/* ── How It Works (steps) ─────────────────────────────────── */
.vmzp-steps__grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:1.4rem; }
.vmzp-steps__item { position:relative; padding:1.4rem 1.2rem; border:1px solid var(--sf-border, #e5e7eb); border-radius:var(--sf-radius-lg, 14px); background:var(--sf-surface, transparent); }
.vmzp-steps__num {
position:absolute; top:-14px; inset-inline-start:1.2rem;
width:30px; height:30px; border-radius:50%; display:grid; place-items:center;
background:var(--sf-accent, #00A4FF); color:#fff; font-weight:800; font-size:.9rem;
}
.vmzp-steps__icon { color:var(--sf-accent, #00A4FF); margin:.4rem 0 .6rem; }
.vmzp-steps__title { font-size:1.05rem; font-weight:700; margin:0 0 .4rem; color:var(--sf-text, inherit); }
.vmzp-steps__desc { font-size:.92rem; color:var(--sf-text-muted, #6b7280); line-height:1.6; margin:0; }
/* ── Icon Checklist ───────────────────────────────────────── */
.vmzp-checklist__grid { display:grid; gap:.75rem 1.5rem; }
.vmzp-checklist__grid--2 { grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); }
.vmzp-checklist__item { display:flex; align-items:flex-start; gap:.7rem; font-size:1rem; color:var(--sf-text, inherit); }
.vmzp-checklist__icon { color:var(--sf-accent, #00A4FF); flex:none; margin-top:1px; }
/* ── Split Feature ────────────────────────────────────────── */
.vmzp-split__grid { display:grid; grid-template-columns:1fr 1fr; gap:2.5rem; align-items:center; }
.vmzp-split--img-right .vmzp-split__media { order:2; }
.vmzp-split__media img { width:100%; height:auto; border-radius:var(--sf-radius-lg, 14px); display:block; }
.vmzp-split__title { font-size:clamp(1.4rem,3vw,2rem); font-weight:800; margin:0 0 .8rem; color:var(--sf-text, inherit); }
.vmzp-split__body { color:var(--sf-text-muted, #6b7280); line-height:1.7; margin-bottom:1.2rem; }
@media (max-width:720px){ .vmzp-split__grid { grid-template-columns:1fr; } .vmzp-split--img-right .vmzp-split__media { order:0; } }
/* ── Parallax Banner ──────────────────────────────────────── */
.vmzp-parallax { position:relative; padding:6rem 1.5rem; text-align:center; background-size:cover; background-position:center; }
.vmzp-parallax--has-bg { background-attachment:fixed; }
.vmzp-parallax__overlay { position:absolute; inset:0; background:rgba(0,0,0,.45); }
.vmzp-parallax--has-bg .vmzp-parallax__overlay { display:block; }
.vmzp-parallax:not(.vmzp-parallax--has-bg) .vmzp-parallax__overlay { display:none; }
.vmzp-parallax__content { position:relative; max-width:720px; margin:0 auto; }
.vmzp-parallax--has-bg .vmzp-parallax__title, .vmzp-parallax--has-bg .vmzp-parallax__sub { color:#fff; }
.vmzp-parallax__title { font-size:clamp(1.6rem,4vw,2.6rem); font-weight:800; margin:0 0 .6rem; color:var(--sf-text, inherit); }
.vmzp-parallax__sub { font-size:1.1rem; margin:0 0 1.4rem; color:var(--sf-text-muted, #6b7280); }
@media (max-width:720px){ .vmzp-parallax--has-bg { background-attachment:scroll; } }
/* ── Video Hero ───────────────────────────────────────────── */
.vmzp-vhero { position:relative; overflow:hidden; padding:6rem 1.5rem; text-align:center; min-height:340px; display:flex; align-items:center; justify-content:center; }
.vmzp-vhero__bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.vmzp-vhero__bg--img { background-size:cover; background-position:center; }
.vmzp-vhero__overlay { position:absolute; inset:0; background:rgba(0,0,0,.45); z-index:1; }
.vmzp-vhero__content { position:relative; z-index:2; max-width:720px; }
.vmzp-vhero__title { font-size:clamp(1.8rem,4.5vw,3rem); font-weight:800; margin:0 0 .6rem; color:#fff; }
.vmzp-vhero__sub { font-size:1.15rem; margin:0 0 1.4rem; color:rgba(255,255,255,.9); }
/* ── Content Cards ────────────────────────────────────────── */
.vmzp-cards__grid { display:grid; gap:1.4rem; }
.vmzp-cards__grid--2 { grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); }
.vmzp-cards__grid--3 { grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); }
.vmzp-cards__grid--4 { grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); }
.vmzp-cards__card { border:1px solid var(--sf-border, #e5e7eb); border-radius:var(--sf-radius-lg, 14px); overflow:hidden; background:var(--sf-surface, transparent); display:flex; flex-direction:column; }
.vmzp-cards__media img { width:100%; height:180px; object-fit:cover; display:block; }
.vmzp-cards__body { padding:1.1rem 1.2rem; display:flex; flex-direction:column; gap:.5rem; }
.vmzp-cards__title { font-size:1.1rem; font-weight:700; margin:0; color:var(--sf-text, inherit); }
.vmzp-cards__text { font-size:.92rem; color:var(--sf-text-muted, #6b7280); line-height:1.6; margin:0; }
.vmzp-cards__link { margin-top:auto; font-weight:600; color:var(--sf-accent, #00A4FF); text-decoration:none; font-size:.92rem; }
.vmzp-cards__link:hover { text-decoration:underline; }
/* ── Columns ──────────────────────────────────────────────── */
.vmzp-cols__grid { display:grid; gap:2rem; }
.vmzp-cols__grid--2 { grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); }
.vmzp-cols__grid--3 { grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); }
.vmzp-cols__title { font-size:1.15rem; font-weight:700; margin:0 0 .6rem; color:var(--sf-text, inherit); }
.vmzp-cols__content { color:var(--sf-text-muted, #6b7280); line-height:1.7; }
.vmzp-cols__content p { margin:0 0 .8rem; }
/* ── Slideshow (Phase 2c) ─────────────────────────────────── */
.vmzp-slides__viewport { position:relative; overflow:hidden; border-radius:var(--sf-radius-lg, 14px); background:var(--sf-surface, #f3f4f6); margin-top:.4rem; }
.vmzp-slides__track { display:flex; direction:ltr; transition:transform .45s ease; will-change:transform; }
.vmzp-slides__slide { position:relative; flex:0 0 100%; min-width:0; }
.vmzp-slides__img { width:100%; height:clamp(240px, 42vw, 460px); object-fit:cover; display:block; }
.vmzp-slides__cap { position:absolute; inset-inline:0; bottom:0; padding:2.2rem 1.6rem 1.6rem; background:linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,0)); color:#fff; text-align:start; }
.vmzp-slides__title { font-size:clamp(1.3rem, 3vw, 2rem); font-weight:800; margin:0 0 .4rem; color:#fff; }
.vmzp-slides__text { font-size:1rem; margin:0 0 1rem; color:rgba(255,255,255,.9); max-width:52ch; }
.vmzp-slides__nav { position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%; border:0; cursor:pointer; display:grid; place-items:center; color:#fff; background:rgba(0,0,0,.4); transition:background .15s ease; z-index:2; }
.vmzp-slides__nav:hover { background:rgba(0,0,0,.62); }
.vmzp-slides__nav--prev { inset-inline-start:12px; }
.vmzp-slides__nav--next { inset-inline-end:12px; }
[dir="rtl"] .vmzp-slides__nav svg { transform:scaleX(-1); }
.vmzp-slides__dots { position:absolute; inset-inline:0; bottom:12px; display:flex; justify-content:center; gap:8px; z-index:2; }
.vmzp-slides__dot { width:9px; height:9px; padding:0; border-radius:50%; border:0; cursor:pointer; background:rgba(255,255,255,.5); transition:background .15s ease, transform .15s ease; }
.vmzp-slides__dot--active { background:#fff; transform:scale(1.25); }
/* ── Gallery (masonry) + Lightbox (Phase 2c) ──────────────── */
.vmzp-gallery__grid { column-gap:14px; }
.vmzp-gallery__grid--2 { column-count:2; }
.vmzp-gallery__grid--3 { column-count:3; }
.vmzp-gallery__grid--4 { column-count:4; }
@media (max-width:900px){ .vmzp-gallery__grid--3, .vmzp-gallery__grid--4 { column-count:2; } }
@media (max-width:560px){ .vmzp-gallery__grid { column-count:1 !important; } }
.vmzp-gallery__item { display:block; width:100%; padding:0; margin:0 0 14px; border:0; cursor:pointer; position:relative; break-inside:avoid; border-radius:var(--sf-radius, 10px); overflow:hidden; background:var(--sf-surface, #f3f4f6); line-height:0; }
.vmzp-gallery__item img { width:100%; height:auto; display:block; transition:transform .3s ease; }
.vmzp-gallery__item:hover img { transform:scale(1.04); }
.vmzp-gallery__cap { position:absolute; inset-inline:0; bottom:0; padding:1.4rem .9rem .7rem; background:linear-gradient(to top, rgba(0,0,0,.7), rgba(0,0,0,0)); color:#fff; font-size:.85rem; line-height:1.3; text-align:start; opacity:0; transition:opacity .2s ease; }
.vmzp-gallery__item:hover .vmzp-gallery__cap, .vmzp-gallery__item:focus-visible .vmzp-gallery__cap { opacity:1; }
.vmzp-gallery__item:focus-visible { outline:2px solid var(--sf-accent, #00A4FF); outline-offset:2px; }
.vmzp-lb { position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.88); padding:3rem 1rem; }
.vmzp-lb__fig { margin:0; max-width:min(1100px, 92vw); display:flex; flex-direction:column; align-items:center; gap:.8rem; }
.vmzp-lb__img { max-width:100%; max-height:80vh; object-fit:contain; border-radius:6px; box-shadow:0 10px 40px rgba(0,0,0,.5); background:#111; }
.vmzp-lb__cap { color:rgba(255,255,255,.85); font-size:.95rem; text-align:center; margin:0; }
.vmzp-lb__close, .vmzp-lb__nav { position:absolute; border:0; cursor:pointer; color:#fff; background:rgba(255,255,255,.12); display:grid; place-items:center; border-radius:50%; transition:background .15s ease; }
.vmzp-lb__close:hover, .vmzp-lb__nav:hover { background:rgba(255,255,255,.26); }
.vmzp-lb__close { top:18px; inset-inline-end:18px; width:44px; height:44px; }
.vmzp-lb__nav { top:50%; transform:translateY(-50%); width:52px; height:52px; }
.vmzp-lb__nav--prev { inset-inline-start:18px; }
.vmzp-lb__nav--next { inset-inline-end:18px; }
[dir="rtl"] .vmzp-lb__nav svg { transform:scaleX(-1); }
html.vmzp-lb-open { overflow:hidden; }
/* ── Before / After (Phase 2c) ────────────────────────────── */
.vmzp-ba__frame { position:relative; overflow:hidden; border-radius:var(--sf-radius-lg, 14px); max-width:900px; margin-inline:auto; margin-top:.4rem; user-select:none; touch-action:pan-y; cursor:ew-resize; }
.vmzp-ba__img { display:block; width:100%; height:auto; }
.vmzp-ba__before { position:absolute; inset:0; }
.vmzp-ba__before .vmzp-ba__img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.vmzp-ba__handle { position:absolute; top:0; bottom:0; width:2px; margin-inline-start:-1px; background:#fff; box-shadow:0 0 0 1px rgba(0,0,0,.15); cursor:ew-resize; z-index:3; }
.vmzp-ba__grip { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:40px; height:40px; border-radius:50%; background:#fff; color:#111; display:grid; grid-auto-flow:column; place-items:center; box-shadow:0 2px 10px rgba(0,0,0,.3); }
.vmzp-ba__grip svg { width:14px; height:14px; }
.vmzp-ba__handle:focus-visible { outline:2px solid var(--sf-accent, #00A4FF); outline-offset:3px; }
.vmzp-ba__label { position:absolute; top:12px; padding:.3rem .7rem; border-radius:999px; z-index:2; background:rgba(0,0,0,.6); color:#fff; font-size:.8rem; font-weight:600; pointer-events:none; }
.vmzp-ba__label--before { inset-inline-start:12px; }
.vmzp-ba__label--after { inset-inline-end:12px; }
@media (prefers-reduced-motion: reduce){
.vmzp-slides__track { transition:none; }
.vmzp-gallery__item img { transition:none; }
.vmzp-gallery__item:hover img { transform:none; }
}
/* ── Advanced merchandising (product_carousel, best_sellers, product_tabs,
recently_viewed) ── The product grid/carousel and cards are core storefront
components (.vmz-sf-grid / .vmz-sf-carousel / .vmz-sf-card), so these rules
only add the tab strip, the empty state and a little rhythm. Tokens carry
hex fallbacks so the sections survive a missing core stylesheet. */
.vmzp-merch__empty {
padding:2rem 1rem; text-align:center; color:var(--sf-text-muted, #6b7280);
font-size:.95rem; border:1px dashed var(--sf-border, #e5e7eb);
border-radius:var(--sf-radius, 10px);
}
.vmzp-mstabs__nav {
display:flex; flex-wrap:wrap; gap:6px;
border-bottom:1px solid var(--sf-border, #e5e7eb); margin-bottom:1.2rem;
}
.vmzp-mstabs__tab {
appearance:none; background:transparent; border:0; cursor:pointer;
padding:.6rem 1rem; font-size:.95rem; font-weight:600;
color:var(--sf-text-muted, #6b7280); border-bottom:2px solid transparent;
margin-bottom:-1px;
}
.vmzp-mstabs__tab:hover { color:var(--sf-text, inherit); }
.vmzp-mstabs__tab--active {
color:var(--sf-accent, #00A4FF); border-bottom-color:var(--sf-accent, #00A4FF);
}
.vmzp-mstabs__panel { animation:vmzp-merch-fade .2s ease; }
@keyframes vmzp-merch-fade { from { opacity:.4; } to { opacity:1; } }
@media (prefers-reduced-motion: reduce){ .vmzp-mstabs__panel { animation:none; } }
/* ── Product Spotlight ── a large product hero: image one side, a buy box
(a product card with its image hidden) + editorial copy on the other. */
.vmzp-spot__grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,4vw,3rem); align-items:center; }
.vmzp-spot--right .vmzp-spot__media { order:2; }
.vmzp-spot__media img { width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:var(--sf-radius-lg,14px); display:block; }
.vmzp-spot__desc { color:var(--sf-text-muted,#6b7280); line-height:1.7; margin:.5rem 0 1rem; }
.vmzp-spot__buy .vmz-sf-card { border:0; background:transparent; box-shadow:none; padding:0; }
.vmzp-spot__buy .vmz-sf-card__img { display:none; }
.vmzp-spot__buy .vmz-sf-card__name { font-size:clamp(1.15rem,2.4vw,1.6rem); font-weight:700; }
.vmzp-spot__buy .vmz-sf-card__price { font-size:1.2rem; }
.vmzp-spot--norating .vmz-sf-card__stars { display:none; }
@media (max-width:768px){
.vmzp-spot__grid { grid-template-columns:1fr; }
.vmzp-spot--right .vmzp-spot__media { order:0; }
}
/* ── Collection Showcase ── a grid of category cards (image, name, count). */
.vmzp-coll__grid { display:grid; grid-template-columns:repeat(var(--vmzp-coll-cols,3),1fr); gap:1.2rem; }
.vmzp-coll__card { display:block; text-decoration:none; color:inherit; overflow:hidden; border:1px solid var(--sf-border,#e5e7eb); border-radius:var(--sf-radius-lg,14px); background:var(--sf-surface,transparent); transition:transform .2s ease, box-shadow .2s ease; }
.vmzp-coll__card:hover { transform:translateY(-2px); box-shadow:var(--sf-shadow-md,0 8px 24px rgba(0,0,0,.10)); }
.vmzp-coll__media { aspect-ratio:4/3; background-size:cover; background-position:center; background-color:var(--sf-bg-muted,#f3f4f6); display:flex; align-items:center; justify-content:center; color:var(--sf-text-muted,#9ca3af); }
.vmzp-coll__meta { padding:.9rem 1rem; }
.vmzp-coll__name { display:block; font-weight:700; color:var(--sf-text,inherit); }
.vmzp-coll__count { display:block; font-size:.85rem; color:var(--sf-text-muted,#6b7280); margin-top:2px; font-variant-numeric:tabular-nums; }
@media (max-width:768px){ .vmzp-coll__grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .vmzp-coll__grid { grid-template-columns:1fr; } }
/* ── Shoppable Lookbook ── a lifestyle image beside a "shop the look" grid. */
.vmzp-look__wrap { display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,4vw,3rem); align-items:start; }
.vmzp-look--right .vmzp-look__media { order:2; }
.vmzp-look__media img { width:100%; object-fit:cover; border-radius:var(--sf-radius-lg,14px); display:block; }
.vmzp-look__grid { margin-top:1rem; }
@media (max-width:768px){
.vmzp-look__wrap { grid-template-columns:1fr; }
.vmzp-look--right .vmzp-look__media { order:0; }
}
/* ── Comparison Table ── product cards as columns, feature rows beneath;
scrolls horizontally on small screens. */
.vmzp-cmp__scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.vmzp-cmp__table { width:100%; border-collapse:collapse; }
.vmzp-cmp__table th, .vmzp-cmp__table td { padding:.85rem 1rem; text-align:center; border-bottom:1px solid var(--sf-border,#e5e7eb); vertical-align:middle; }
.vmzp-cmp__corner { text-align:start; color:var(--sf-text-muted,#6b7280); font-weight:600; font-size:.8rem; text-transform:uppercase; letter-spacing:.03em; }
.vmzp-cmp__phead { min-width:200px; vertical-align:top; }
.vmzp-cmp__phead .vmz-sf-card { border:0; background:transparent; box-shadow:none; padding:0; }
.vmzp-cmp__rowlabel { text-align:start; font-weight:600; color:var(--sf-text,inherit); white-space:nowrap; }
.vmzp-cmp__yes { color:var(--sf-success,#16a34a); display:inline-flex; }
.vmzp-cmp__no, .vmzp-cmp__dash { color:var(--sf-text-muted,#9ca3af); display:inline-flex; justify-content:center; }
.vmzp-cmp__txt { color:var(--sf-text,inherit); }
/* ══════════════════════════════════════════════════════════════
Bundles & Mix & Match (needs the bundles module)
Token-driven (--sf-*), so light/dark + RTL come from the platform.
══════════════════════════════════════════════════════════════ */
/* ── Bundle Spotlight ── one bundle: what's inside + savings + buy ── */
.vmzp-bundle__grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,4vw,3rem); align-items:center; }
.vmzp-bundle__visual { display:flex; flex-direction:column; gap:.9rem; }
.vmzp-bundle__media { display:block; border-radius:var(--sf-radius-lg,16px); overflow:hidden; }
.vmzp-bundle__media img { width:100%; aspect-ratio:4/3; object-fit:cover; display:block; transition:transform var(--sf-transition,.18s ease); }
.vmzp-bundle__media:hover img { transform:scale(1.03); }
.vmzp-bundle__thumbs { display:flex; align-items:center; flex-wrap:wrap; gap:.5rem; }
.vmzp-bundle__thumb { position:relative; width:calc(58px*var(--sf-font-scale,1)); height:calc(58px*var(--sf-font-scale,1)); border-radius:var(--sf-radius,10px); overflow:hidden; background:var(--sf-bg-muted,#f4f4f5); border:1px solid var(--sf-border,#e4e4e7); flex:none; }
.vmzp-bundle__thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.vmzp-bundle__thumb-empty { display:flex; align-items:center; justify-content:center; width:100%; height:100%; color:var(--sf-text-muted,#9ca3af); }
.vmzp-bundle__qty { position:absolute; inset-inline-end:2px; inset-block-end:2px; background:var(--sf-accent,#18181b); color:var(--sf-accent-text,#fff); font-size:calc(10px*var(--sf-font-scale,1)); font-weight:700; line-height:1; padding:2px 4px; border-radius:6px; }
.vmzp-bundle__plus { color:var(--sf-text-muted,#9ca3af); font-weight:700; font-size:1.1rem; }
.vmzp-bundle__body { min-width:0; }
.vmzp-bundle__name { margin:0 0 .6rem; }
.vmzp-bundle__items { list-style:none; margin:0 0 1.1rem; padding:0; display:flex; flex-direction:column; gap:.5rem; }
.vmzp-bundle__li { display:flex; align-items:center; gap:.55rem; color:var(--sf-text,inherit); font-size:calc(15px*var(--sf-font-scale,1)); }
.vmzp-bundle__li-ic { color:var(--sf-success,#16a34a); display:inline-flex; flex:none; }
.vmzp-bundle__li-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vmzp-bundle__li-qty { color:var(--sf-text-muted,#6b7280); font-size:calc(13px*var(--sf-font-scale,1)); margin-inline-start:auto; font-variant-numeric:tabular-nums; }
.vmzp-bundle__price { display:flex; align-items:baseline; flex-wrap:wrap; gap:.6rem; margin-bottom:1.1rem; }
.vmzp-bundle__price-now { font-family:var(--sf-font-heading,inherit); font-size:calc(30px*var(--sf-font-scale,1)); font-weight:800; color:var(--sf-heading,inherit); font-variant-numeric:tabular-nums; }
.vmzp-bundle__price-was { color:var(--sf-text-muted,#9ca3af); text-decoration:line-through; font-size:calc(17px*var(--sf-font-scale,1)); font-variant-numeric:tabular-nums; }
.vmzp-bundle__save { color:var(--sf-success,#15803d); background:var(--sf-success-soft,rgba(21,128,61,.1)); font-weight:700; font-size:calc(13px*var(--sf-font-scale,1)); padding:.25rem .6rem; border-radius:var(--sf-radius-full,9999px); }
.vmzp-bundle__cta .vmz-sf-btn, .vmzp-bundle__add, .vmzp-bundle__view { display:inline-flex; align-items:center; gap:.5rem; }
@media (max-width:768px){ .vmzp-bundle__grid { grid-template-columns:1fr; } }
/* ── Mix & Match builder ── pick a pool, live price, add one line ── */
.vmzp-mm__pool { align-items:stretch; }
.vmzp-mm__card { display:flex; flex-direction:column; border:1px solid var(--sf-border,#e4e4e7); border-radius:var(--sf-radius,12px); background:var(--sf-bg-card,#fff); overflow:hidden; transition:border-color var(--sf-transition,.18s ease), box-shadow var(--sf-transition,.18s ease); }
.vmzp-mm__card--on { border-color:var(--sf-accent,#18181b); box-shadow:0 0 0 1px var(--sf-accent,#18181b) inset; }
.vmzp-mm__card--oos { opacity:.55; }
.vmzp-mm__card-img { position:relative; aspect-ratio:1/1; background:var(--sf-bg-muted,#f4f4f5); }
.vmzp-mm__card-img img { width:100%; height:100%; object-fit:cover; display:block; }
.vmzp-mm__card-empty { display:flex; align-items:center; justify-content:center; width:100%; height:100%; color:var(--sf-text-muted,#9ca3af); }
.vmzp-mm__oos { position:absolute; inset-block-start:8px; inset-inline-start:8px; background:var(--sf-text,#18181b); color:var(--sf-bg-card,#fff); font-size:calc(11px*var(--sf-font-scale,1)); font-weight:700; padding:2px 7px; border-radius:var(--sf-radius-full,9999px); }
.vmzp-mm__card-body { display:flex; flex-direction:column; gap:.35rem; padding:.7rem .75rem .8rem; flex:1; }
.vmzp-mm__card-name { font-size:calc(13px*var(--sf-font-scale,1)); font-weight:600; color:var(--sf-text,inherit); line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.vmzp-mm__card-price { font-size:calc(13px*var(--sf-font-scale,1)); font-weight:700; color:var(--sf-heading,inherit); font-variant-numeric:tabular-nums; }
.vmzp-mm__stepper { display:inline-flex; align-items:center; margin-top:auto; border:1px solid var(--sf-border,#e4e4e7); border-radius:var(--sf-radius-full,9999px); align-self:flex-start; overflow:hidden; }
.vmzp-mm__step { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border:0; background:transparent; color:var(--sf-text,inherit); cursor:pointer; transition:background var(--sf-transition,.18s ease); }
.vmzp-mm__step:hover:not(:disabled) { background:var(--sf-accent-soft,rgba(0,0,0,.05)); }
.vmzp-mm__step:disabled { opacity:.35; cursor:not-allowed; }
.vmzp-mm__qty { min-width:26px; text-align:center; font-weight:700; font-size:calc(14px*var(--sf-font-scale,1)); color:var(--sf-text,inherit); font-variant-numeric:tabular-nums; }
.vmzp-mm__bar { position:sticky; bottom:calc(var(--sf-btmnav-h,0px) + 10px); z-index:5; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem; margin-top:1.4rem; padding:.85rem 1.1rem; background:var(--sf-bg-card,#fff); border:1px solid var(--sf-border,#e4e4e7); border-radius:var(--sf-radius-lg,16px); box-shadow:var(--sf-shadow-md,0 4px 16px rgba(0,0,0,.08)); }
.vmzp-mm__status { display:flex; flex-direction:column; gap:.5rem; min-width:160px; flex:1; }
.vmzp-mm__count { font-weight:700; font-size:calc(14px*var(--sf-font-scale,1)); color:var(--sf-text,inherit); font-variant-numeric:tabular-nums; }
.vmzp-mm__progress { height:6px; border-radius:var(--sf-radius-full,9999px); background:var(--sf-bg-muted,#f4f4f5); overflow:hidden; max-width:280px; }
.vmzp-mm__progress-bar { display:block; height:100%; width:0; border-radius:inherit; background:var(--sf-success,#15803d); transition:width var(--sf-transition,.18s ease), background var(--sf-transition,.18s ease); }
.vmzp-mm__progress-bar.is-under { background:var(--sf-warning,#b45309); }
.vmzp-mm__progress-bar.is-over { background:var(--sf-danger,#dc2626); }
.vmzp-mm__buy { display:flex; align-items:center; gap:1rem; }
.vmzp-mm__price { font-family:var(--sf-font-heading,inherit); font-size:calc(22px*var(--sf-font-scale,1)); font-weight:800; color:var(--sf-heading,inherit); font-variant-numeric:tabular-nums; }
.vmzp-mm__add { display:inline-flex; align-items:center; gap:.5rem; }
.vmzp-mm__add:disabled { opacity:.5; cursor:not-allowed; }
@media (max-width:560px){
.vmzp-mm__bar { flex-direction:column; align-items:stretch; }
.vmzp-mm__buy { justify-content:space-between; }
.vmzp-mm__progress { max-width:none; }
}
/* ── Classic style (product-page look) for Bundles + Mix & Match ──
Reuses the global .vmz-sf-bundle-items / .vmz-sf-mm widget classes
(shipped in vmz-store.css, loaded storefront-wide) verbatim — the rules
here only frame that widget inside a builder section: a readable centred
column, plus button placement. Compound selectors beat .vmz-sf-container
regardless of stylesheet order. Tokens + logical props → dark + RTL free. */
.vmz-sf-container.vmzp-bundle-classic,
.vmz-sf-container.vmzp-mm-classic { max-width:600px; }
.vmzp-bundle-classic .vmz-sf-bundle-items,
.vmzp-mm-classic .vmz-sf-bundle-items { margin-bottom:0; }
.vmzp-bundle-classic__cta,
.vmzp-mm__buy--classic { display:flex; justify-content:center; margin-top:1.25rem; }
.vmzp-bundle-classic__cta .vmz-sf-btn,
.vmzp-mm__buy--classic .vmz-sf-btn { min-width:min(320px,100%); justify-content:center; }