/* ==========================================================================
   BOAT DETAILS / VDP  (body.boatDetailsPage) — gallery, price panel,
   collapsible details and the contact aside.
   ========================================================================== */
.boatDetailsPage input.fieldInput, .boatDetailsPage select.fieldInput { height: 50px; }

/* ---- Gallery ------------------------------------------------------------------ */
.vdpGallery { display: flex; flex: 3 1 760px; flex-direction: column; gap: 12px; min-width: 0; }
.galleryStage { aspect-ratio: 16 / 10; }
.galleryPhoto { cursor: zoom-in; }
.galleryVideo { background: var(--black); }
.galleryVideo[hidden], .galleryPhoto[hidden] { display: none; }

.galleryNav {
    position: absolute;
    top: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    padding: 0;
    color: var(--black);
    background: rgba(255, 255, 255, .92);
    border: 0;
    border-radius: 50%;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
    transform: translateY(-50%);
    cursor: pointer;
    transition: background-color .2s, color .2s;
}
.galleryNav:hover { color: var(--blue-dark); background: var(--white); }
.galleryPrev { left: 24px; }
.galleryNext { right: 24px; }
.chevLeft { transform: rotate(90deg); }
.chevRight { transform: rotate(-90deg); }

.galleryCount {
    position: absolute;
    left: 24px;
    bottom: 24px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--white);
    background: rgba(5, 5, 5, .78);
}
.galleryActions { position: absolute; right: 24px; bottom: 24px; display: flex; gap: 8px; }
.galleryAction {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 16px;
    font: 700 12px var(--font-body);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--black);
    background: rgba(255, 255, 255, .94);
    border: 0;
    cursor: pointer;
    transition: background-color .2s, color .2s;
}
.galleryAction:hover { color: var(--blue-dark); background: var(--white); }

.thumbStrip { display: flex; gap: 12px; padding-bottom: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--black) var(--line-light); }
.galleryThumb {
    position: relative;
    flex: 0 0 calc((100% - 36px) / 4);
    aspect-ratio: 16 / 10;
    padding: 0;
    overflow: hidden;
    background: var(--light-3);
    border: 2px solid transparent;
    opacity: .72;
    cursor: pointer;
    scroll-snap-align: start;
    transition: opacity .2s, border-color .2s;
}
.galleryThumb:hover { opacity: 1; }
.galleryThumb.isActive { border-color: var(--blue); opacity: 1; }
.thumbPlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(5, 5, 5, .35); }
.thumbPlay > span { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; color: var(--black); background: var(--blue); border-radius: 50%; }

/* ---- Price & contact panel ------------------------------------------------------- */
.vdpInfo { position: sticky; top: 128px; display: flex; flex: 1 1 400px; flex-direction: column; gap: 24px; min-width: 0; max-width: 480px; }
.vdpKicker { font-size: 13px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--gray); }
.vdpPrice { display: flex; flex-direction: column; gap: 8px; padding: 24px 0; border-top: 1px solid var(--line-light); border-bottom: 1px solid var(--line-light); }
.vdpEstimate { font-size: 15px; color: var(--text-dark); }
.vdpEstimate strong { color: var(--black); }
.vdpEstimateLink { text-decoration: underline; }
.quickSpecs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 0; background: var(--line-light); border: 1px solid var(--line-light); }
.quickSpecs > div { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; background: var(--white); }
.quickSpecs .specLabel { letter-spacing: .14em; }
.quickSpecs dd { margin: 0; font-weight: 700; }
.btnTight { padding: 0 12px; }
.vdpCall { padding: 20px; }
.vdpCallText { display: flex; flex-direction: column; gap: 2px; font-size: 14px; color: var(--text-dark); }
.vdpCallText a { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--black); }
.vdpCallText a:hover { color: var(--blue-dark); }

/* ---- Collapsible details ---------------------------------------------------------- */
.detailsItem summary { padding: 30px 0; }
.detailsItem summary h2 { transition: color .2s; }
.detailsItem summary:hover h2 { color: var(--blue-dark); }
.detailsItem .faqToggle { width: 48px; height: 48px; }
.detailsBody { padding-bottom: 40px; }
.overviewBody { max-width: 980px; }
.detailsText { margin: 0; font-size: 17px; line-height: 1.75; color: var(--text-dark); }
.specList { column-gap: 48px; margin: 0; }
.specRow { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; font-size: 15px; border-bottom: 1px solid var(--line-light); }
.specRow dt { font-weight: 400; color: var(--gray); }
.specRow dd { margin: 0; font-weight: 700; text-align: right; color: var(--black); }
.featureGrid { column-gap: 48px; }

/* ---- Contact aside ------------------------------------------------------------------- */
.vdpContact { position: sticky; top: 128px; display: flex; flex: 1 1 420px; flex-direction: column; gap: 22px; min-width: 0; max-width: 520px; padding: 40px; background: var(--light-2); border: 1px solid var(--line-light); scroll-margin-top: 128px; }
.vdpContactText { margin: 0; font-size: 15px; line-height: 1.6; color: var(--text-dark); }
.vdpSubmit { margin-top: 6px; }

/* ---- Responsive ------------------------------------------------------------------------ */
@media (max-width: 1399.98px) {
    .vdpInfo, .vdpContact { position: static; }
    /* keep the price panel beside the gallery on laptops; full width once it wraps */
    .vdpGallery { flex-basis: 700px; }
    .vdpInfo { max-width: none; }
}
@media (max-width: 1199.98px) {
    .vdpInfo, .vdpContact { max-width: none; }
}
@media (max-width: 767.98px) {
    .galleryNav { width: 44px; height: 44px; }
    .galleryPrev { left: 12px; }
    .galleryNext { right: 12px; }
    .galleryCount { left: 12px; bottom: 12px; height: 32px; padding: 0 10px; }
    .galleryActions { right: 12px; bottom: 12px; }
    .galleryAction { width: 40px; padding: 0; justify-content: center; }
    .galleryActionLabel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
    .thumbStrip { gap: 8px; }
    .galleryThumb { flex-basis: calc((100% - 16px) / 3); }
    .thumbPlay > span { width: 40px; height: 40px; }
    .detailsItem summary { padding: 22px 0; }
    .detailsItem .faqToggle { width: 40px; height: 40px; }
    .detailsText { font-size: 16px; }
    .vdpContact { padding: 28px 20px; }
}