/* Product page — "Marketplace" layout (shop/product/marketplace). Mobile-first; tokens from pb-sections.css. */
.vh-pd { max-width: var(--shop-container, 80rem); margin: 0 auto; padding: 14px 1rem 48px; box-sizing: border-box; color: var(--vh-pb-text); }
@media (min-width: 640px) { .vh-pd { padding-left: 1.5rem; padding-right: 1.5rem; } }
@media (min-width: 1024px) { .vh-pd { padding: 18px 2rem 64px; } }

.vh-pd-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 16px; font-size: 13.5px; color: var(--vh-pb-muted); }
.vh-pd-crumbs a { color: inherit; text-decoration: none; }
.vh-pd-crumbs a:first-child, .vh-pd-crumbs a:hover { color: var(--vh-pb-primary); }
.vh-pd-crumbs .bi { font-size: 10px; }
.vh-pd-crumbs span { color: var(--vh-pb-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }

.vh-pd-box { border: 1px solid var(--vh-pb-border); border-radius: 14px; background: var(--vh-pb-surface); }
.vh-pd-h2 { margin: 0 0 12px; font-size: 18px; font-weight: 800; }
.vh-pd-stars { color: #f59e0b; letter-spacing: 1px; }
.vh-pd-stars .bi-star { color: #d1d5db; }

/* ---- Top grid: gallery · info · side ---- */
.vh-pd-top { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; align-items: start; }
@media (min-width: 900px) {
    .vh-pd-top { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 28px; }
    .vh-pd-side { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
}
@media (min-width: 1200px) {
    .vh-pd-top { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr) 21.5rem; gap: 26px; }
    .vh-pd-side { grid-column: auto; display: flex; flex-direction: column; gap: 14px; }
}

/* ---- Gallery ---- */
.vh-pd-gallery { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
@media (min-width: 640px) {
    .vh-pd-gallery { grid-template-columns: 84px minmax(0, 1fr); column-gap: 14px; }
    .vh-pd-stage { grid-column: 2; grid-row: 1; }
    .vh-pd-thumbs { grid-column: 1; grid-row: 1; flex-direction: column; }
    .vh-pd-thumbs__rail { flex-direction: column; max-height: 452px; overflow-x: hidden; overflow-y: auto; }
    .vh-pd-highlights { grid-column: 1 / -1; }
}
.vh-pd-stage { position: relative; aspect-ratio: 1; border-radius: 16px; overflow: hidden; background: var(--vh-pb-surface-2); border: 1px solid var(--vh-pb-border); }
@media (min-width: 640px) { .vh-pd-stage { aspect-ratio: 5 / 4.4; } }
/* Frame shapes (config product_page.gallery_shapes): the frame takes the photos' shape so they fill it. */
.vh-pd-stage.vh-pd-stage--tall { aspect-ratio: 2 / 3; }
.vh-pd-stage.vh-pd-stage--portrait { aspect-ratio: 3 / 4; }
.vh-pd-stage.vh-pd-stage--square { aspect-ratio: 1; }
.vh-pd-stage.vh-pd-stage--landscape { aspect-ratio: 4 / 3; }
/* A tall frame on a phone would push the price far down; cap it to most of the screen height. */
@media (max-width: 639px) { .vh-pd-stage.vh-pd-stage--tall, .vh-pd-stage.vh-pd-stage--portrait { max-height: 78vh; margin-inline: auto; width: min(100%, calc(78vh * .75)); } }
.vh-pd-stage__item { position: absolute; inset: 0; }
.vh-pd-stage__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; border: 0; }
/* Photos are sized to the picture itself (centred), so its rounded corners show instead of a letterbox. */
img.vh-pd-stage__media { width: auto; height: auto; max-width: 100%; max-height: 100%; margin: auto; border-radius: 12px; }
.vh-pd-stage__video { background: #000; }
/* Video with the title bar zoomed out of the frame (config product_page.video.hide_title / title_crop, set by product-page.js). */
.vh-pd-stage__video--crop { transform: scale(var(--vh-pd-video-crop, 1)); pointer-events: none; }
.vh-pd-off { position: absolute; left: 14px; top: 14px; z-index: 2; padding: 3px 9px; border-radius: 6px; background: #ef4444; color: #fff; font-size: 13px; font-weight: 700; }
.vh-pd-heart { position: absolute; right: 14px; top: 14px; z-index: 2; width: 40px; height: 40px; border: 0; border-radius: 999px; background: #fff; color: #374151; box-shadow: 0 2px 10px rgba(15, 23, 42, .12); font-size: 18px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.vh-pd-heart.is-on, .vh-pd-heart[data-in-wishlist="true"] { color: #ef4444; }
.vh-pd-arrow { position: absolute; top: 50%; z-index: 2; width: 38px; height: 38px; margin-top: -19px; border: 0; border-radius: 999px; background: #fff; color: #111827; box-shadow: 0 2px 10px rgba(15, 23, 42, .15); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.vh-pd-arrow--prev { left: 14px; }
.vh-pd-arrow--next { right: 14px; }

.vh-pd-thumbs { display: flex; align-items: center; gap: 8px; min-width: 0; }
.vh-pd-thumbs__rail { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; min-width: 0; padding: 2px; }
.vh-pd-thumbs__rail::-webkit-scrollbar { display: none; }
.vh-pd-thumb { position: relative; flex: 0 0 72px; width: 72px; height: 72px; padding: 4px; border: 1px solid var(--vh-pb-border); border-radius: 10px; background: var(--vh-pb-surface); cursor: pointer; }
@media (min-width: 640px) { .vh-pd-thumb { flex-basis: 80px; width: 80px; height: 80px; } }
.vh-pd-thumb.is-on { border-color: var(--vh-pb-primary); box-shadow: 0 0 0 1px var(--vh-pb-primary); }
.vh-pd-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 6px; }
.vh-pd-thumb__play { position: absolute; inset: 4px; border-radius: 6px; background: rgba(0, 0, 0, .4); color: #fff; font-size: 22px; display: flex; align-items: center; justify-content: center; }
.vh-pd-thumbs__more { flex-shrink: 0; width: 40px; height: 40px; border: 1px solid var(--vh-pb-border); border-radius: 10px; background: var(--vh-pb-surface); color: var(--vh-pb-text); cursor: pointer; }
@media (max-width: 639px) { .vh-pd-thumbs__more .bi { display: inline-block; transform: rotate(-90deg); } }
@media (min-width: 640px) { .vh-pd-thumbs__more { width: 80px; } }

.vh-pd-highlights { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
@media (min-width: 480px) { .vh-pd-highlights { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Icon on the left; label above its value (markup order: icon, value, label). */
.vh-pd-highlights li { display: grid; grid-template-columns: 40px minmax(0, 1fr); grid-template-areas: "ic label" "ic value"; align-items: center; column-gap: 12px; row-gap: 2px; padding: 12px 14px; border: 1px solid var(--vh-pb-border); border-radius: 12px; background: var(--vh-pb-surface); text-align: left; font-size: 12.5px; color: var(--vh-pb-muted); min-width: 0; }
.vh-pd-highlights .bi { grid-area: ic; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: var(--vh-pb-primary-soft); font-size: 19px; color: var(--vh-pb-primary); }
.vh-pd-highlights span { grid-area: label; }
.vh-pd-highlights strong { grid-area: value; font-size: 14px; line-height: 1.35; color: var(--vh-pb-text); overflow-wrap: anywhere; }

/* ---- Info + buy box ---- */
.vh-pd-info { min-width: 0; }
.vh-pd-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.vh-pd-badge { padding: 4px 10px; border-radius: 6px; font-size: 12.5px; font-weight: 600; }
.vh-pd-badge--amber { background: #fef3c7; color: #b45309; }
.vh-pd-badge--green { background: #dcfce7; color: #15803d; }
.vh-pd-badge--orange { background: #ffedd5; color: #c2410c; }
.vh-pd-badge--red { background: #fee2e2; color: #b91c1c; }
.vh-pd-badge--blue { background: var(--vh-pb-primary-soft); color: var(--vh-pb-primary); }
.vh-pd-title { margin: 0; font-size: 24px; font-weight: 800; line-height: 1.2; letter-spacing: -.01em; }
@media (min-width: 768px) { .vh-pd-title { font-size: 28px; } }
.vh-pd-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 8px; font-size: 13.5px; color: var(--vh-pb-muted); }
.vh-pd-meta > * + *::before { content: ""; display: inline-block; width: 1px; height: 12px; margin-right: 14px; background: var(--vh-pb-border); vertical-align: middle; }
.vh-pd-meta a { color: inherit; text-decoration: none; }
.vh-pd-meta a:hover { color: var(--vh-pb-primary); }
.vh-pd-meta__rating { display: inline-flex; align-items: center; gap: 8px; }
.vh-pd-lead { margin: 14px 0 0; font-size: 15px; line-height: 1.65; color: var(--vh-pb-muted); }

.vh-pd-price { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 16px; }
.vh-pd-price strong { font-size: 30px; font-weight: 800; letter-spacing: -.02em; }
.vh-pd-price s { font-size: 17px; color: var(--vh-pb-muted); }
.vh-pd-price__off { padding: 4px 10px; border-radius: 6px; background: #fee2e2; color: #dc2626; font-size: 14px; font-weight: 700; }
.vh-pd-tax { margin: 4px 0 0; font-size: 13px; color: var(--vh-pb-muted); }

.vh-pd-opt { margin-top: 18px; }
.vh-pd-opt__label { margin: 0 0 8px; font-size: 14.5px; font-weight: 600; }
.vh-pd-opt__label span { color: var(--vh-pb-primary); font-weight: 600; }
.vh-pd-opt__values { display: flex; flex-wrap: wrap; gap: 10px; }
.vh-pd-swatch { width: 50px; height: 50px; padding: 6px; border: 1px solid var(--vh-pb-border); border-radius: 12px; background: var(--vh-pb-surface); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
.vh-pd-swatch svg { width: 100%; height: 100%; }
.vh-pd-swatch circle { stroke: rgba(0, 0, 0, .12); stroke-width: 1; }
/* A colour whose name was not recognised shows its full name (never two letters). */
.vh-pd-swatch--name { width: auto; min-width: 50px; padding: 0 14px; }
.vh-pd-swatch__name { font-size: 13px; font-weight: 600; white-space: nowrap; }
.vh-pd-choice { min-width: 96px; display: grid; gap: 2px; padding: 9px 14px; border: 1px solid var(--vh-pb-border); border-radius: 10px; background: var(--vh-pb-surface); color: var(--vh-pb-text); font: inherit; text-align: center; cursor: pointer; }
.vh-pd-choice strong { font-size: 14.5px; }
.vh-pd-choice span { font-size: 12.5px; color: var(--vh-pb-muted); }
.vh-pd-swatch.is-on, .vh-pd-choice.is-on { border-color: var(--vh-pb-primary); box-shadow: 0 0 0 1px var(--vh-pb-primary); background: var(--vh-pb-primary-soft); }
.vh-pd-choice.is-on strong { color: var(--vh-pb-primary); }
.vh-pd-swatch.is-na, .vh-pd-choice.is-na { opacity: .4; cursor: not-allowed; }
.vh-pd-choice.is-na strong { text-decoration: line-through; }

.vh-pd-qty { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 18px; }
.vh-pd-qty .vh-pd-opt__label { margin: 0; }
.vh-pd-stepper { display: inline-flex; align-items: center; border: 1px solid var(--vh-pb-border); border-radius: 10px; overflow: hidden; background: var(--vh-pb-surface); }
.vh-pd-stepper button { width: 38px; height: 38px; border: 0; background: none; color: var(--vh-pb-text); font-size: 18px; cursor: pointer; }
.vh-pd-stepper button:disabled { opacity: .35; cursor: not-allowed; }
.vh-pd-stepper span { min-width: 44px; height: 38px; border-left: 1px solid var(--vh-pb-border); border-right: 1px solid var(--vh-pb-border); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }
.vh-pd-low { font-size: 13px; font-weight: 600; color: #ea580c; }
.vh-pd-choose { margin: 10px 0 0; font-size: 13px; color: #b45309; }

.vh-pd-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
.vh-pd-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 50px; padding: 0 16px; border-radius: 10px; font: inherit; font-size: 15.5px; font-weight: 700; cursor: pointer; transition: filter .15s, background .15s; }
.vh-pd-btn--cart { border: 0; background: var(--vh-pb-primary); color: #fff; }
.vh-pd-btn--cart.is-added { background: #16a34a; }
.vh-pd-btn--buy { border: 1.5px solid var(--vh-pb-primary); background: var(--vh-pb-surface); color: var(--vh-pb-primary); }
.vh-pd-btn:hover { filter: brightness(1.06); }
.vh-pd-btn:disabled { opacity: .5; cursor: not-allowed; filter: none; }

.vh-pd-trust { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 640px) { .vh-pd-trust { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); } }
.vh-pd-trust li { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--vh-pb-muted); line-height: 1.3; }
.vh-pd-trust .bi { font-size: 20px; color: var(--vh-pb-primary); }
.vh-pd-trust strong { display: block; font-size: 12px; color: var(--vh-pb-text); }

/* ---- Side column ---- */
.vh-pd-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.vh-pd-deliver { display: flex; gap: 14px; padding: 16px 18px; border-color: #bbf7d0; background: #f0fdf4; font-size: 13.5px; color: #374151; }
.dark .vh-pd-deliver { border-color: #14532d; background: rgba(22, 163, 74, .1); color: #d1d5db; }
.vh-pd-deliver__icon { font-size: 28px; color: #16a34a; }
.vh-pd-deliver strong { display: block; margin-bottom: 2px; font-size: 14.5px; color: var(--vh-pb-text); }
.vh-pd-deliver p { margin: 2px 0 0; }
.vh-pd-deliver__ok { color: #15803d; font-weight: 600; }

.vh-pd-seller { padding: 16px 18px; }
.vh-pd-seller__head { display: flex; align-items: center; gap: 12px; }
.vh-pd-seller__logo { width: 52px; height: 52px; flex-shrink: 0; border: 1px solid var(--vh-pb-border); border-radius: 12px; overflow: hidden; background: var(--vh-pb-surface-2); display: inline-flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 800; color: var(--vh-pb-primary); }
.vh-pd-seller__logo img { width: 100%; height: 100%; object-fit: contain; }
.vh-pd-seller__name { flex: 1; min-width: 0; }
.vh-pd-seller__name strong { display: block; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vh-pd-seller__name .bi { color: var(--vh-pb-primary); font-size: 14px; }
.vh-pd-seller__name span { font-size: 13px; color: var(--vh-pb-muted); }
.vh-pd-seller__cta { flex-shrink: 0; padding: 7px 14px; border: 1px solid var(--vh-pb-primary); border-radius: 8px; color: var(--vh-pb-primary); font-size: 13.5px; font-weight: 600; text-decoration: none; }
.vh-pd-seller__cta:hover { background: var(--vh-pb-primary-soft); }
.vh-pd-seller__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); margin: 16px 0 0; text-align: center; }
.vh-pd-seller__stats div + div { border-left: 1px solid var(--vh-pb-border); }
.vh-pd-seller__stats dt { font-size: 16px; font-weight: 800; }
.vh-pd-seller__stats dt .bi { color: #f59e0b; font-size: 13px; }
.vh-pd-seller__stats dd { margin: 2px 0 0; font-size: 12.5px; color: var(--vh-pb-muted); }

.vh-pd-assure { list-style: none; margin: 0; padding: 8px 18px; background: var(--vh-pb-surface-2); }
.vh-pd-assure li { display: flex; align-items: center; gap: 14px; padding: 10px 0; font-size: 13px; color: var(--vh-pb-muted); }
.vh-pd-assure li + li { border-top: 1px solid var(--vh-pb-border); }
.vh-pd-assure strong { display: block; font-size: 14px; color: var(--vh-pb-text); }
.vh-pd-assure__icon { width: 38px; height: 38px; flex-shrink: 0; border-radius: 999px; background: var(--vh-pb-primary-soft); color: var(--vh-pb-primary); display: inline-flex; align-items: center; justify-content: center; font-size: 18px; }

.vh-pd-sideactions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.vh-pd-sidebtn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 50px; font: inherit; font-size: 14.5px; font-weight: 600; color: var(--vh-pb-primary); cursor: pointer; }
.vh-pd-sidebtn:hover { border-color: var(--vh-pb-primary); }
.vh-pd-sidebtn.is-on, .vh-pd-sidebtn[data-in-wishlist="true"] { color: #ef4444; }

/* ---- Bottom: tabs + related ---- */
.vh-pd-bottom { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 32px; align-items: start; }
@media (min-width: 1200px) { .vh-pd-bottom.has-related { grid-template-columns: minmax(0, 1fr) 31rem; } }
.vh-pd-tabs { min-width: 0; overflow: hidden; }
.vh-pd-tabs__bar { display: flex; gap: 4px; padding: 0 12px; border-bottom: 1px solid var(--vh-pb-border); overflow-x: auto; scrollbar-width: none; }
.vh-pd-tabs__bar::-webkit-scrollbar { display: none; }
.vh-pd-tab { flex-shrink: 0; padding: 16px 14px 14px; border: 0; border-bottom: 3px solid transparent; background: none; color: var(--vh-pb-muted); font: inherit; font-size: 15px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.vh-pd-tab.is-on { border-bottom-color: var(--vh-pb-primary); color: var(--vh-pb-primary); }
.vh-pd-panel { padding: 20px 18px 24px; }
@media (min-width: 768px) { .vh-pd-panel { padding: 24px 24px 28px; } }
.vh-pd-panel .vh-pd-h2 + .vh-pd-prose, .vh-pd-prose + .vh-pd-h2 { margin-top: 0; }
.vh-pd-prose + .vh-pd-h2, .vh-pd-lines + .vh-pd-h2 { margin-top: 22px; }
.vh-pd-prose { margin: 0; font-size: 15px; line-height: 1.7; color: var(--vh-pb-muted); overflow-wrap: anywhere; }
.vh-pd-prose p { margin: 0 0 10px; }
.vh-pd-prose img { max-width: 100%; height: auto; }
.vh-pd-keyfeat { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
@media (min-width: 560px) { .vh-pd-keyfeat { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .vh-pd-keyfeat { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Same card as the highlights under the gallery: icon square, label above its value. */
.vh-pd-keyfeat li { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px 14px; border: 1px solid var(--vh-pb-border); border-radius: 12px; background: var(--vh-pb-surface); font-size: 12.5px; color: var(--vh-pb-muted); }
.vh-pd-keyfeat .bi { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: var(--vh-pb-primary-soft); font-size: 19px; color: var(--vh-pb-primary); }
.vh-pd-keyfeat li > span { display: flex; flex-direction: column-reverse; gap: 2px; min-width: 0; }
.vh-pd-keyfeat strong { font-size: 14px; line-height: 1.35; color: var(--vh-pb-text); overflow-wrap: anywhere; }
.vh-pd-spec { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.vh-pd-spec th, .vh-pd-spec td { padding: 11px 14px; border-bottom: 1px solid var(--vh-pb-border); text-align: left; vertical-align: top; }
.vh-pd-spec th { width: 38%; font-weight: 500; color: var(--vh-pb-muted); background: var(--vh-pb-surface-2); }
.vh-pd-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14.5px; }
.vh-pd-lines li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; padding: 10px 14px; border: 1px solid var(--vh-pb-border); border-radius: 10px; }
.vh-pd-lines span { color: var(--vh-pb-muted); }

.vh-pd-rsum { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-bottom: 18px; padding: 16px; border-radius: 12px; background: var(--vh-pb-surface-2); }
@media (min-width: 640px) { .vh-pd-rsum { grid-template-columns: 150px minmax(0, 1fr); align-items: center; } }
.vh-pd-rsum__avg { display: grid; justify-items: center; gap: 4px; text-align: center; font-size: 13px; color: var(--vh-pb-muted); }
.vh-pd-rsum__avg strong { font-size: 40px; font-weight: 800; line-height: 1; color: var(--vh-pb-text); }
.vh-pd-rsum__bars { display: grid; gap: 6px; }
.vh-pd-rbar { display: grid; grid-template-columns: 34px minmax(0, 1fr) 28px; align-items: center; gap: 10px; font-size: 12.5px; color: var(--vh-pb-muted); }
.vh-pd-rbar .bi { color: #f59e0b; font-size: 11px; }
.vh-pd-rbar span:last-child { text-align: right; }
.vh-pd-rbar meter { width: 100%; height: 8px; border: 0; border-radius: 999px; background: var(--vh-pb-border); -webkit-appearance: none; appearance: none; }
.vh-pd-rbar meter::-webkit-meter-bar { height: 8px; border: 0; border-radius: 999px; background: var(--vh-pb-border); }
.vh-pd-rbar meter::-webkit-meter-optimum-value, .vh-pd-rbar meter::-webkit-meter-suboptimum-value, .vh-pd-rbar meter::-webkit-meter-even-less-good-value { border-radius: 999px; background: #f59e0b; }
.vh-pd-rbar meter::-moz-meter-bar { border-radius: 999px; background: #f59e0b; }
.vh-pd-reviews { display: grid; gap: 12px; }
.vh-pd-review { padding: 14px 16px; border: 1px solid var(--vh-pb-border); border-radius: 12px; }
.vh-pd-review header { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.vh-pd-review__avatar { width: 38px; height: 38px; border-radius: 999px; background: var(--vh-pb-primary-soft); color: var(--vh-pb-primary); font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.vh-pd-review__who { display: grid; font-size: 13px; }
.vh-pd-review__who strong { font-size: 14px; }
.vh-pd-review__ok { font-size: 12px; font-weight: 600; color: #15803d; }
.vh-pd-review time { margin-left: auto; font-size: 12.5px; color: var(--vh-pb-muted); }
.vh-pd-review h3 { margin: 10px 0 0; font-size: 14.5px; }
.vh-pd-review p { margin: 6px 0 0; font-size: 14px; line-height: 1.6; color: var(--vh-pb-muted); }
.vh-pd-review__imgs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.vh-pd-review__imgs img { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; border: 1px solid var(--vh-pb-border); display: block; }
.vh-pd-review__reply { padding: 10px 12px; border-left: 3px solid var(--vh-pb-primary); border-radius: 6px; background: var(--vh-pb-surface-2); }
.vh-pd-review__reply strong { display: block; color: var(--vh-pb-text); font-size: 13px; }
.vh-pd-empty { margin: 0; font-size: 14px; color: var(--vh-pb-muted); }
.vh-pd-panel #write-review, .vh-pd-panel--qa > section { max-width: none; margin-left: 0; margin-right: 0; }
.vh-pd-panel--qa #questions { margin-top: 0; }
.vh-pd-panel--qa > section { padding: 24px 0 0; }

.vh-pd-related { padding: 18px; }
.vh-pd-related header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.vh-pd-related header a { font-size: 14px; font-weight: 600; color: var(--vh-pb-primary); text-decoration: none; white-space: nowrap; }
.vh-pd-related__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 640px) { .vh-pd-related__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---- Gallery zoom: hover magnifies under the pointer, click opens the enlarged view ---- */
.vh-pd-zoom { overflow: hidden; cursor: zoom-in; }
.vh-pd-zoom .vh-pd-stage__media { transition: transform .12s ease-out; transform-origin: var(--vh-pd-zx, 50%) var(--vh-pd-zy, 50%); }
@media (hover: hover) and (pointer: fine) {
    .vh-pd-zoom.is-panning .vh-pd-stage__media { transform: scale(var(--vh-pd-zoom, 2)); }
}
.vh-pd-lightbox { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(15, 23, 42, .88); cursor: zoom-out; }
.vh-pd-lightbox__img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 12px; background: #fff; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .6); }
.vh-pd-lightbox__close, .vh-pd-lightbox__nav { position: absolute; display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .92); color: #0f172a; font-size: 18px; cursor: pointer; }
.vh-pd-lightbox__close { top: 16px; right: 16px; }
.vh-pd-lightbox__nav { top: 50%; transform: translateY(-50%); }
.vh-pd-lightbox__nav--prev { left: 16px; }
.vh-pd-lightbox__nav--next { right: 16px; }
.vh-pd-lightbox__close:hover, .vh-pd-lightbox__nav:hover { background: #fff; }
@media (max-width: 639px) { .vh-pd-lightbox { padding: 12px; } .vh-pd-lightbox__nav { width: 40px; height: 40px; } }
html.vh-pd-noscroll { overflow: hidden; }