/* =========================================================
   Inventory VDP (Single Vehicle)
   File: /assets/css/pages/inventory-vdp.css

   Notes:
   - Scoped to the VDP only.
   - Gallery on page is a 16:9 hero (not a giant fixed-height crop).
   - Lightbox hides the mobile bottom action bar.
   - Lightbox prev/next arrows are BELOW the photo (not overlaying it).
========================================================= */

#primary.site-main[data-yrvb-vdp]{
  width:100%;
}

#primary.site-main[data-yrvb-vdp] *{ box-sizing:border-box; }

#primary.site-main[data-yrvb-vdp] .yrvb-vdp-wrap{
  max-width:1200px;
  margin:0 auto;
  padding:28px 18px 60px;
}

/* Back to SRP */
#primary.site-main[data-yrvb-vdp] .yrvb-vdp-back{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin:0 0 14px;
  padding:8px 12px;
  border-radius:12px;
  font-weight:900;
  text-decoration:none;
  color:var(--yrvb-blue);
  background:var(--yrvb-white, #fff);
  border:2px solid rgba(10,35,66,.18);
}

#primary.site-main[data-yrvb-vdp] .yrvb-vdp-back:hover{
  background:rgba(10,35,66,.06);
  border-color:rgba(10,35,66,.35);
}

/* ---------- Title row ---------- */
#primary.site-main[data-yrvb-vdp] .yrvb-vdp-title-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  margin-bottom:18px;
}

#primary.site-main[data-yrvb-vdp] .yrvb-vdp-title-row > div:first-child{
  flex:1 1 auto;
  min-width:0;
}

#primary.site-main[data-yrvb-vdp] .yrvb-vdp-title{
  margin:0;
  font-size:clamp(26px, 3.0vw, 38px);
  line-height:1.12;
  font-weight:800;
  color:var(--yrvb-blue);
}

#primary.site-main[data-yrvb-vdp] .yrvb-title-line1{
  display:block;
  white-space:nowrap;
}

/* Stock + availability */
#primary.site-main[data-yrvb-vdp] .yrvb-vdp-meta{ margin-top:8px; }
#primary.site-main[data-yrvb-vdp] .yrvb-vdp-stockline{
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
  font-weight:800;
  color:rgba(10,35,66,.75);
}
#primary.site-main[data-yrvb-vdp] .yrvb-vdp-stock{ font-weight:900; }
#primary.site-main[data-yrvb-vdp] .yrvb-vdp-availability{
  font-weight:900;
  color:var(--yrvb-burgundy);
}

/* ---------- Price block ---------- */
#primary.site-main[data-yrvb-vdp] .yrvb-vdp-price-wrap{
  flex:0 0 auto;
  width:auto;
  min-width:260px;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  justify-content:flex-start;
  gap:6px;
  text-align:right;
}

#primary.site-main[data-yrvb-vdp] .yrvb-vdp-price-line,
#primary.site-main[data-yrvb-vdp] .yrvb-vdp-discount-wrap{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
  flex-wrap:wrap;
}

#primary.site-main[data-yrvb-vdp] .yrvb-vdp-price{
  font-size:34px;
  font-weight:900;
  line-height:1;
  color:#000;
}

#primary.site-main[data-yrvb-vdp] .yrvb-vdp-price-wrap.has-discount .yrvb-vdp-price{
  text-decoration:line-through;
  text-decoration-thickness:3px;
  text-decoration-color:rgba(120,120,120,.75);
  opacity:.75;
}

/* Pill tag */
#primary.site-main[data-yrvb-vdp] .yrvb-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 12px;
  border-radius:999px;
  border:0;
  background:rgba(10,35,66,.08);
  color:var(--yrvb-blue);
  font-weight:900;
  font-size:14px;
  letter-spacing:.3px;
  white-space:nowrap;
}

/* ---- RED NOW PRICE (FORCE NOT BOLD) ---- */
#primary.site-main[data-yrvb-vdp] .yrvb-vdp-discount{
  font-size:34px;
  line-height:1;
  color:var(--yrvb-burgundy);
  display:flex;
  align-items:baseline;
  gap:10px;
  font-weight:700 !important;
}
#primary.site-main[data-yrvb-vdp] .yrvb-vdp-discount .yrvb-now{
  font-weight:700 !important;
  letter-spacing:.3px;
}
#primary.site-main[data-yrvb-vdp] .yrvb-vdp-discount .yrvb-now-price{
  font-weight:700 !important;
}

/* ---------- Top layout ---------- */
#primary.site-main[data-yrvb-vdp] .yrvb-vdp-top{
  display:grid;
  grid-template-columns:1.45fr .95fr;
  gap:20px;
  align-items:start;
}

/* =========================================================
   Hero Gallery (ON-PAGE)
   Requirement: 16:9 on the VDP page
========================================================= */

#primary.site-main[data-yrvb-vdp] .yrvb-vdp-hero{
  width:100%;
  border:1px solid rgba(10,35,66,.12);
  border-radius:16px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 16px 40px rgba(0,0,0,.06);
  position:relative;
}

/* Base image rules (then we lock it into 16:9 below) */
#primary.site-main[data-yrvb-vdp] .yrvb-vdp-hero-image{
  width:100%;
  height:auto;
  display:block;
  cursor:zoom-in;
}

/* Preferred: modern aspect-ratio */
@supports (aspect-ratio: 16 / 9){
  #primary.site-main[data-yrvb-vdp] .yrvb-vdp-hero{
    aspect-ratio:16/9;
  }
  #primary.site-main[data-yrvb-vdp] .yrvb-vdp-hero-image{
    height:100%;
    object-fit:cover;
  }
}

/* Fallback: padding hack for older browsers */
@supports not (aspect-ratio: 16 / 9){
  #primary.site-main[data-yrvb-vdp] .yrvb-vdp-hero::before{
    content:"";
    display:block;
    padding-top:56.25%; /* 9/16 */
  }
  #primary.site-main[data-yrvb-vdp] .yrvb-vdp-hero-image{
    position:absolute;
    inset:0;
    height:100%;
    object-fit:cover;
  }
}

#primary.site-main[data-yrvb-vdp] .yrvb-vdp-no-image{
  padding:80px 20px;
  text-align:center;
  font-weight:700;
  color:rgba(10,35,66,.65);
}

/* ---------- Thumbnails ---------- */
#primary.site-main[data-yrvb-vdp] .yrvb-vdp-thumbs{
  margin-top:12px;
  display:grid;
  grid-template-columns:56px 1fr 56px;
  gap:10px;
  align-items:center;
}
#primary.site-main[data-yrvb-vdp] .yrvb-vdp-thumbs-track{
  display:flex;
  align-items:center;
  gap:10px;
  overflow-x:auto;
  padding:8px 6px;
  scroll-behavior:smooth;
}
#primary.site-main[data-yrvb-vdp] .yrvb-vdp-thumb-btn{
  border:2px solid transparent;
  background:transparent;
  padding:0;
  border-radius:12px;
  overflow:hidden;
  width:72px;
  height:54px;
  flex:0 0 auto;
  cursor:pointer;
  position:relative;
}
#primary.site-main[data-yrvb-vdp] .yrvb-vdp-thumb-btn img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
#primary.site-main[data-yrvb-vdp] .yrvb-vdp-thumb-btn.is-active{
  border-color:#1E3A8A;
  box-shadow:0 10px 24px rgba(30,58,138,.18);
}

#primary.site-main[data-yrvb-vdp] .yrvb-vdp-thumbs-nav{
  width:56px;
  height:56px;
  border:0;
  border-radius:14px;
  background:#1E3A8A;
  color:#fff;
  font-size:26px;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 14px 30px rgba(30,58,138,.25);
  transition:transform .12s ease, filter .12s ease;
}
#primary.site-main[data-yrvb-vdp] .yrvb-vdp-thumbs-nav:hover{
  transform:translateY(-1px);
  filter:brightness(1.05);
}

/* ---------- Right panel ---------- */
#primary.site-main[data-yrvb-vdp] .yrvb-vdp-panel{
  border:1px solid rgba(10,35,66,.12);
  border-radius:16px;
  background:#fff;
  padding:16px;
  box-shadow:0 16px 40px rgba(0,0,0,.06);
  position:sticky;
  top:18px;
}
#primary.site-main[data-yrvb-vdp] .yrvb-vdp-note{
  margin:0 0 14px;
  color:rgba(10,35,66,.82);
  line-height:1.45;
  font-weight:650;
}

/* ---------- Buttons ---------- */
#primary.site-main[data-yrvb-vdp] .yrvb-vdp-cta-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin:14px 0 0;
}

#primary.site-main[data-yrvb-vdp] .yrvb-vdp-cta-row-secondary{
  margin-top:12px; /* space between Make Offer and next block */
}

#primary.site-main[data-yrvb-vdp] .yrvb-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  border-radius:12px;
  padding:14px 12px;
  font-weight:900;
  letter-spacing:.8px;
  text-transform:uppercase;
  border:2px solid transparent;
  transition:background .12s ease, color .12s ease, border-color .12s ease, filter .12s ease;
  user-select:none;
}

#primary.site-main[data-yrvb-vdp] .yrvb-btn.maroon{
  background:var(--yrvb-burgundy);
  color:#fff;
  border-color:var(--yrvb-burgundy);
  box-shadow:0 14px 26px rgba(128,0,32,.20);
}

#primary.site-main[data-yrvb-vdp] .yrvb-btn.outline{
  background:#fff;
  border-color:rgba(10,35,66,.22);
  color:var(--yrvb-blue);
}

#primary.site-main[data-yrvb-vdp] .yrvb-btn.gold{
  background:var(--yrvb-gold-cta);
  color:var(--yrvb-blue);
  border-color:transparent;
  box-shadow:0 14px 26px rgba(212,168,83,.18);
}

#primary.site-main[data-yrvb-vdp] .yrvb-btn.full{ grid-column:1 / -1; }

/* Hover rules */
#primary.site-main[data-yrvb-vdp] .yrvb-vdp-panel .yrvb-btn.maroon:hover,
#primary.site-main[data-yrvb-vdp] .yrvb-vdp-panel .yrvb-btn.maroon:focus,
#primary.site-main[data-yrvb-vdp] .yrvb-vdp-panel .yrvb-btn.gold:hover,
#primary.site-main[data-yrvb-vdp] .yrvb-vdp-panel .yrvb-btn.gold:focus{
  background:#fff;
  color:var(--yrvb-blue);
  border-color:var(--yrvb-blue);
  outline:none;
}

#primary.site-main[data-yrvb-vdp] .yrvb-vdp-panel .yrvb-btn.outline:hover,
#primary.site-main[data-yrvb-vdp] .yrvb-vdp-panel .yrvb-btn.outline:focus{
  background:rgba(212,168,83,.14);
  border-color:rgba(10,35,66,.28);
  color:var(--yrvb-blue);
  outline:none;
}

/* Desktop/Mobile CTA visibility helpers */
#primary.site-main[data-yrvb-vdp] .yrvb-mobile-only{ display:inline-flex; }
#primary.site-main[data-yrvb-vdp] .yrvb-desktop-only{ display:none; }

@media (min-width: 901px){
  #primary.site-main[data-yrvb-vdp] .yrvb-mobile-only{ display:none !important; }
  #primary.site-main[data-yrvb-vdp] .yrvb-desktop-only{ display:inline-flex !important; }
}

/* ---------- Sections ---------- */
#primary.site-main[data-yrvb-vdp] .yrvb-vdp-section{
  margin-top:18px;
  border:1px solid rgba(10,35,66,.12);
  border-radius:16px;
  background:#fff;
  padding:16px;
  box-shadow:0 16px 40px rgba(0,0,0,.05);
}
#primary.site-main[data-yrvb-vdp] .yrvb-vdp-section h2{
  margin:0 0 8px;
  font-size:18px;
  font-weight:900;
  color:var(--yrvb-blue);
}

/* Smart Money Highlights (legacy label; section removed on the VDP, but keep style safe) */
#primary.site-main[data-yrvb-vdp] .yrvb-vdp-section h2.yrvb-vdp-highlights-title{
  margin: 0 0 18px;
  text-align: center;
  font-family: var(--yrvb-font-display, "Playfair Display", Georgia, "Times New Roman", serif);
  font-size: clamp(22px, 2.5vw, 34px);
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---------- VDP Details (content) ----------
   The "Full Details" content comes from the editor and may include
   wide/full-width blocks that can drift left on mobile.
   Normalize them so the content stays centered and never overflows.
-------------------------------------------------- */
#primary.site-main[data-yrvb-vdp] .yrvb-vdp-details{
  /* Slightly tighter than the generic section spacing */
  margin-top:12px;
  padding-top:12px;
  overflow-x:hidden;
}

#primary.site-main[data-yrvb-vdp] .yrvb-vdp-details > :first-child{
  margin-top:0 !important;
}

/* Clamp any wide/full blocks to the section width */
#primary.site-main[data-yrvb-vdp] .yrvb-vdp-details .alignwide,
#primary.site-main[data-yrvb-vdp] .yrvb-vdp-details .alignfull{
  width:100% !important;
  max-width:100% !important;
  margin-left:0 !important;
  margin-right:0 !important;
}

/* Genesis Blocks / WP blocks can inject a decorative left bar and odd offsets */
#primary.site-main[data-yrvb-vdp] .yrvb-vdp-details .gb-block-container,
#primary.site-main[data-yrvb-vdp] .yrvb-vdp-details .wp-block-genesis-blocks-gb-container,
#primary.site-main[data-yrvb-vdp] .yrvb-vdp-details .wp-block-genesis-blocks-gb-columns,
#primary.site-main[data-yrvb-vdp] .yrvb-vdp-details .wp-block-columns,
#primary.site-main[data-yrvb-vdp] .yrvb-vdp-details .wp-block-group{
  width:100% !important;
  max-width:100% !important;
  margin-left:auto !important;
  margin-right:auto !important;
  box-sizing:border-box;
  border-left:0 !important;
  padding-left:0 !important;
}

/* Remove left-bar pseudo elements */
#primary.site-main[data-yrvb-vdp] .yrvb-vdp-details .gb-block-container::before,
#primary.site-main[data-yrvb-vdp] .yrvb-vdp-details .wp-block-genesis-blocks-gb-container::before{
  display:none !important;
}

/* ---------- Overflow + wrapping safety (mobile)
   Some imported/spec blocks contain nowrap text, fixed columns, or other fun
   surprises that create horizontal scrolling on phones. Force sane wrapping
   INSIDE the details section only.
-------------------------------------------------- */

#primary.site-main[data-yrvb-vdp]{
  overflow-x:hidden;
}

#primary.site-main[data-yrvb-vdp] .yrvb-vdp-details *{
  max-width:100%;
  box-sizing:border-box;
  min-width:0;
}

#primary.site-main[data-yrvb-vdp] .yrvb-vdp-details h1,
#primary.site-main[data-yrvb-vdp] .yrvb-vdp-details h2,
#primary.site-main[data-yrvb-vdp] .yrvb-vdp-details h3,
#primary.site-main[data-yrvb-vdp] .yrvb-vdp-details h4,
#primary.site-main[data-yrvb-vdp] .yrvb-vdp-details h5,
#primary.site-main[data-yrvb-vdp] .yrvb-vdp-details h6,
#primary.site-main[data-yrvb-vdp] .yrvb-vdp-details p,
#primary.site-main[data-yrvb-vdp] .yrvb-vdp-details li,
#primary.site-main[data-yrvb-vdp] .yrvb-vdp-details a,
#primary.site-main[data-yrvb-vdp] .yrvb-vdp-details span,
#primary.site-main[data-yrvb-vdp] .yrvb-vdp-details strong,
#primary.site-main[data-yrvb-vdp] .yrvb-vdp-details em{
  white-space:normal !important;
  overflow-wrap:anywhere;
  word-break:break-word;
}

#primary.site-main[data-yrvb-vdp] .yrvb-vdp-details pre,
#primary.site-main[data-yrvb-vdp] .yrvb-vdp-details code{
  white-space:pre-wrap !important;
  overflow-wrap:anywhere;
}

#primary.site-main[data-yrvb-vdp] .yrvb-vdp-details img,
#primary.site-main[data-yrvb-vdp] .yrvb-vdp-details iframe,
#primary.site-main[data-yrvb-vdp] .yrvb-vdp-details video{
  max-width:100% !important;
  height:auto !important;
}

#primary.site-main[data-yrvb-vdp] .yrvb-vdp-details table{
  width:100%;
  max-width:100%;
}

@media (max-width: 900px){
  #primary.site-main[data-yrvb-vdp] .yrvb-vdp-details .wp-block-columns,
  #primary.site-main[data-yrvb-vdp] .yrvb-vdp-details .wp-block-genesis-blocks-gb-columns{
    flex-wrap:wrap !important;
  }
  #primary.site-main[data-yrvb-vdp] .yrvb-vdp-details .wp-block-column,
  #primary.site-main[data-yrvb-vdp] .yrvb-vdp-details .gb-block-layout-column{
    min-width:0 !important;
  }
}


/* =========================================================
   Lightbox
   - Bottom bar hidden while open
   - Nav arrows BELOW the image (no overlay)
   - Uses dynamic viewport height (dvh) when supported to avoid rotation cropping
========================================================= */

#primary.site-main[data-yrvb-vdp] .yrvb-lightbox{
  position:fixed;
  inset:0;
  /* Needs to sit above the fixed mobile action bar. */
  z-index:10000000;
  display:none;

  /* Sizing vars */
  --yrvb-lb-pad: 16px;
  --yrvb-lb-navspace: 92px;
  --yrvb-lb-vh: 100vh;
}

@supports (height: 100dvh){
  #primary.site-main[data-yrvb-vdp] .yrvb-lightbox{
    --yrvb-lb-vh: 100dvh;
  }
}

#primary.site-main[data-yrvb-vdp] .yrvb-lightbox.is-open{ display:block; }

#primary.site-main[data-yrvb-vdp] .yrvb-lightbox-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.72);
}

#primary.site-main[data-yrvb-vdp] .yrvb-lightbox-stage{
  position:absolute;
  inset:0;
  /* Keep all media centered, with reserved space for the nav row under the photo */
  padding: var(--yrvb-lb-pad);
  padding-bottom: calc(var(--yrvb-lb-navspace) + env(safe-area-inset-bottom));
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

/* Shared available height for 16:9 sizing */
#primary.site-main[data-yrvb-vdp] .yrvb-lightbox-stage{
  --yrvb-lb-avail-h: max(0px, calc(
    var(--yrvb-lb-vh) - (var(--yrvb-lb-navspace) + (var(--yrvb-lb-pad) * 2) + env(safe-area-inset-bottom))
  ));
}

#primary.site-main[data-yrvb-vdp] .yrvb-lightbox-image{
  /* 16:9 frame that always fits in the viewport (no cropping, no scroll) */
  width: min(96vw, 1400px, calc(var(--yrvb-lb-avail-h) * 16 / 9));
  height: min(calc(96vw * 9 / 16), var(--yrvb-lb-avail-h));
  object-fit: contain;
  background:#000;
  border-radius:16px;
  box-shadow:0 24px 80px rgba(0,0,0,.45);
}

#primary.site-main[data-yrvb-vdp] .yrvb-lightbox-video{
  width: min(96vw, 1100px, calc(var(--yrvb-lb-avail-h) * 16 / 9));
  height: min(calc(96vw * 9 / 16), var(--yrvb-lb-avail-h));
  aspect-ratio:16/9;
  background:#000;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 24px 80px rgba(0,0,0,.45);
  display:none;
}
#primary.site-main[data-yrvb-vdp] .yrvb-lightbox.is-video .yrvb-lightbox-video{ display:block; }
#primary.site-main[data-yrvb-vdp] .yrvb-lightbox.is-video .yrvb-lightbox-image{ display:none; }

#primary.site-main[data-yrvb-vdp] .yrvb-lightbox-video iframe{
  width:100%;
  height:100%;
  border:0;
  display:block;
}

/* Close button visible + blue like arrows */
#primary.site-main[data-yrvb-vdp] .yrvb-lightbox-close{
  position:absolute;
  top:18px;
  right:18px;
  width:56px;
  height:56px;
  border-radius:14px;
  border:0;
  background:#1E3A8A;
  color:#fff;
  font-weight:900;
  font-size:20px;
  cursor:pointer;
  box-shadow:0 18px 44px rgba(0,0,0,.30);
}

#primary.site-main[data-yrvb-vdp] .yrvb-lightbox-nav{
  position:absolute;
  /* Place nav below the photo (not on top of it). */
  top:auto;
  bottom:calc(18px + env(safe-area-inset-bottom));
  transform:none;
  width:56px;
  height:56px;
  border-radius:14px;
  border:0;
  background:#1E3A8A;
  color:#fff;
  font-size:26px;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 18px 44px rgba(0,0,0,.30);
}

/* Center the pair of nav buttons under the image.
   56px button + 12px gap + 56px button = 124px total.
   To center: prev starts at (50% - 62px), next starts at (50% + 6px). */
#primary.site-main[data-yrvb-vdp] .yrvb-lightbox-nav.prev{ left:calc(50% - 62px); right:auto; }
#primary.site-main[data-yrvb-vdp] .yrvb-lightbox-nav.next{ left:calc(50% + 6px); right:auto; }

#primary.site-main[data-yrvb-vdp] .yrvb-lightbox.is-video .yrvb-lightbox-nav{ display:none; }

/* When the VDP lightbox is open, hide the fixed mobile action bar
   so it doesn't cover the full-screen photo. */
@media (max-width:900px){
  #primary.site-main[data-yrvb-vdp] .yrvb-vdp-wrap{ padding-bottom: 28px; }
  body.yrvb-lightbox-open .yrvb-mobile-bar{ display:none !important; }
}

/* Landscape phones: reclaim vertical space and prevent "cropped" feeling */
@media (max-width:900px) and (orientation: landscape){
  #primary.site-main[data-yrvb-vdp] .yrvb-lightbox{
    --yrvb-lb-pad: 10px;
    --yrvb-lb-navspace: 78px;
  }

  #primary.site-main[data-yrvb-vdp] .yrvb-lightbox-close{
    width:48px;
    height:48px;
    border-radius:12px;
    font-size:18px;
  }

  #primary.site-main[data-yrvb-vdp] .yrvb-lightbox-nav{
    width:48px;
    height:48px;
    border-radius:12px;
    font-size:24px;
  }

  /* 48px + 12px + 48px = 108px total */
  #primary.site-main[data-yrvb-vdp] .yrvb-lightbox-nav.prev{ left:calc(50% - 54px); }
  #primary.site-main[data-yrvb-vdp] .yrvb-lightbox-nav.next{ left:calc(50% + 6px); }
}


/* ---------- Responsive ---------- */
@media (max-width:900px){
  #primary.site-main[data-yrvb-vdp] .yrvb-vdp-title-row{ flex-direction:column; align-items:flex-start; }
  #primary.site-main[data-yrvb-vdp] .yrvb-vdp-price-wrap{ align-items:flex-start; text-align:left; min-width:0; }
  #primary.site-main[data-yrvb-vdp] .yrvb-vdp-price-line,
  #primary.site-main[data-yrvb-vdp] .yrvb-vdp-discount-wrap{ justify-content:flex-start; }
  #primary.site-main[data-yrvb-vdp] .yrvb-vdp-top{ grid-template-columns:1fr; }
  #primary.site-main[data-yrvb-vdp] .yrvb-vdp-panel{ position:static; }
  #primary.site-main[data-yrvb-vdp] .yrvb-title-line1{ white-space:normal; }
}

@media (max-width:520px){
  #primary.site-main[data-yrvb-vdp] .yrvb-vdp-wrap{ padding-bottom: 24px; }
  #primary.site-main[data-yrvb-vdp] .yrvb-vdp-cta-row{ grid-template-columns:1fr; }
  #primary.site-main[data-yrvb-vdp] .yrvb-btn.full{ grid-column:auto; }
  #primary.site-main[data-yrvb-vdp] .yrvb-lightbox-stage{ inset:80px 14px calc(96px + env(safe-area-inset-bottom)); }
}
/* ---------------------------------------------------------
   Pricing labels
--------------------------------------------------------- */

#primary.site-main[data-yrvb-vdp] .yrvb-vdp-price-label{
  font-size: 0.85rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(10,35,66,.75);
}



/* =========================================================
   Lightbox: fullscreen landscape + pinch/zoom support (v6)
   - Fixes phone landscape NOT matching max-width media queries
     (landscape CSS width often > 900px on modern phones)
   - Enables pinch/drag zoom on the photo
========================================================= */

body.yrvb-lightbox-open{
  overscroll-behavior: none;
}

/* Enable gesture handling on the image itself (JS applies transforms). */
#primary.site-main[data-yrvb-vdp] .yrvb-lightbox-image{
  will-change: transform;
  transform-origin: center center;
  touch-action: none;
  user-select: none;
  cursor: zoom-in;
}
#primary.site-main[data-yrvb-vdp] .yrvb-lightbox.is-zoomed .yrvb-lightbox-image{ cursor: grab; }
#primary.site-main[data-yrvb-vdp] .yrvb-lightbox.is-zoomed .yrvb-lightbox-image:active{ cursor: grabbing; }

/* Small phones: remove the extra inset so the viewer is actually full screen */
@media (max-width:520px){
  #primary.site-main[data-yrvb-vdp] .yrvb-lightbox-stage{ inset:0; }
}

/* Phone landscape: use max-height (not max-width) so it actually applies */
@media (max-height:520px) and (orientation: landscape) and (pointer: coarse){
  #primary.site-main[data-yrvb-vdp] .yrvb-lightbox{
    --yrvb-lb-pad: 0px;
    --yrvb-lb-navspace: 0px;
  }

  #primary.site-main[data-yrvb-vdp] .yrvb-lightbox-stage{
    padding:0;
    padding-bottom: env(safe-area-inset-bottom);
  }

  #primary.site-main[data-yrvb-vdp] .yrvb-lightbox-backdrop{
    background:#000;
  }

  #primary.site-main[data-yrvb-vdp] .yrvb-lightbox-image,
  #primary.site-main[data-yrvb-vdp] .yrvb-lightbox-video{
    width:100vw;
    height: var(--yrvb-lb-vh);
    max-width:100vw;
    max-height: var(--yrvb-lb-vh);
    border-radius:0;
    box-shadow:none;
  }

  /* Overlay nav buttons mid-left / mid-right to avoid stealing vertical space */
  #primary.site-main[data-yrvb-vdp] .yrvb-lightbox-nav{
    top:50%;
    bottom:auto;
    transform: translateY(-50%);
    width:48px;
    height:48px;
    border-radius:14px;
    background: rgba(30,58,138,.92);
  }
  #primary.site-main[data-yrvb-vdp] .yrvb-lightbox-nav.prev{ left:14px; right:auto; }
  #primary.site-main[data-yrvb-vdp] .yrvb-lightbox-nav.next{ left:auto; right:14px; }

  #primary.site-main[data-yrvb-vdp] .yrvb-lightbox-close{
    top:12px;
    right:12px;
    width:48px;
    height:48px;
    border-radius:14px;
  }
}



/* =========================================================
   Lightbox: true fullscreen behavior on mobile landscape
   - Removes the 16:9 framed "card" in landscape so photos can use the whole screen area.
   - Does NOT "remove" the browser URL bar (browsers don't allow that), but it maximizes the viewport area.
========================================================= */
@media (orientation: landscape) and (pointer: coarse){
  #primary.site-main[data-yrvb-vdp] .yrvb-lightbox{
    --yrvb-lb-pad: 0px;
    --yrvb-lb-navspace: 0px;
  }

  #primary.site-main[data-yrvb-vdp] .yrvb-lightbox-stage{
    padding: 0;
    padding-bottom: env(safe-area-inset-bottom);
  }

  #primary.site-main[data-yrvb-vdp] .yrvb-lightbox-image{
    width: 100vw;
    height: calc(var(--yrvb-lb-vh) - env(safe-area-inset-bottom));
    max-width: none;
    max-height: none;
    border-radius: 0;
    box-shadow: none;
    background: #000;
  }

  /* Move nav to left/right so it doesn't consume vertical space */
  #primary.site-main[data-yrvb-vdp] .yrvb-lightbox-nav{
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
  }
  #primary.site-main[data-yrvb-vdp] .yrvb-lightbox-nav.prev{ left: 12px; right: auto; }
  #primary.site-main[data-yrvb-vdp] .yrvb-lightbox-nav.next{ right: 12px; left: auto; }

  #primary.site-main[data-yrvb-vdp] .yrvb-lightbox-close{
    top: 12px;
    right: 12px;
  }
}

/* Fullscreen toggle button (shows only if supported; injected via JS) */
#primary.site-main[data-yrvb-vdp] .yrvb-lightbox-fullscreen{
  position:absolute;
  top:18px;
  right:calc(18px + 72px); /* sits left of the close button */
  width:56px;
  height:56px;
  border-radius:14px;
  border:0;
  background:#1E3A8A;
  color:#fff;
  font-size:22px;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 18px 44px rgba(0,0,0,.30);
  display:none; /* enabled by JS when fullscreen is supported */
}

#primary.site-main[data-yrvb-vdp] .yrvb-lightbox.is-open .yrvb-lightbox-fullscreen{
  display:block;
}

@media (orientation: landscape) and (pointer: coarse){
  #primary.site-main[data-yrvb-vdp] .yrvb-lightbox-fullscreen{
    top: 12px;
    right: calc(12px + 60px);
    width: 48px;
    height: 48px;
    border-radius: 12px;
    font-size: 18px;
  }
}