.product-detail-card{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  grid-template-areas:
    "header header"
    "gallery info"
    "utility info"
    "desc desc";
  column-gap:50px;
  row-gap:30px;
  background:var(--base-3);
  color:var(--off-black);
  font-size:16px;
  margin-bottom:30px;
  overflow:visible;
}

.product-detail-card > *{ min-width:0; }

.product-detail-header{ grid-area:header; }
.product-detail-gallery{ grid-area:gallery; }
.product-utility-ctas{ grid-area:utility; }
.product-detail-info{ grid-area:info; }
.product-detail-description{ grid-area:desc; }

.product-detail-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  column-gap:15px;
}

.product-detail-info{
  display:flex;
  flex-direction:column;
  row-gap:20px;
}

@media (max-width:1024px){
  .product-detail-card{
    column-gap:30px;
    row-gap:20px;
    font-size:15px;
  }

  .product-detail-card{
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:
      "gallery"
      "header"
      "info"
      "utility"
      "desc";
    row-gap:16px;
    font-size:14px;
  }

  .product-detail-info{ row-gap:15px; }

  .product-info-block--price{ order:1; }
  .product-info-block--quick{ order:2; }
  .product-info-block--meta{ order:3; }

  .product-detail-header{
    flex-direction:column;
    align-items:center;
    row-gap: 10px;
  }

  .product-breadcrumbs--mobile{ display:block; }
  .product-detail-header .product-breadcrumbs--desktop{ display:none; }


  .product-videos-grid{ grid-template-columns:repeat(3,1fr); }

  .video-modal-close{
    top:-30px;
    font-size:28px;
  }

  .built-by-text{ font-size:16px; }
}

.product-breadcrumbs--mobile{
  display:none;
  margin:0 0 8px;
}
.product-breadcrumbs--mobile .product-detail-meta{ font-weight:600; }
.product-breadcrumbs--mobile .product-detail-meta-link{
  color:inherit;
  text-decoration:none;
}
.product-breadcrumbs--mobile .meta-sep{ margin:0 6px; }

.product-breadcrumbs--desktop{ font-weight:600; }
.product-breadcrumbs--desktop a{ color:var(--accent) !important; }

.meta-sep{ padding:0 6px; }
.product-detail-meta a{
  text-decoration:none;
  color:inherit;
}
.product-detail-meta a:hover{ color:var(--accent); }

.product-detail-title{
  font-weight:600;
  margin:0 0 5px;
}

/* Share popup container — now lives below the phone CTA inside
   .inv-ctas--vdp, so it centers like the phone link rather than
   sitting in the page header. */
.share-popup-container{
  position:relative;
  z-index:1000;
  text-align:center;
}

.product-detail-share-button{
  display:inline-flex;
  align-items:center;
  column-gap:.4em;
  font-size:13px;
  font-weight:500;
  color:var(--off-black, #111);
  text-decoration:underline;
}
.product-detail-share-button:hover,
.product-detail-share-button:focus-visible{
  color:var(--accent, #cf1e27);
}
.product-detail-share-button svg{
  width:14px;
  height:14px;
  display:block;
}

.share-popup{
  position:absolute;
  top:30px;
  left:50%;
  transform:translateX(-50%);
  background:#fff;
  border:1px solid #ccc;
  border-radius:4px;
  padding:6px 10px;
  display:none;
  min-width:200px;
  box-shadow:0 6px 20px rgba(0,0,0,.15);
}
.share-popup::before,
.share-popup::after{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
}
.share-popup::before{
  top:-8px;
  border-width:0 8px 8px 8px;
  border-style:solid;
  border-color:transparent transparent #ccc transparent;
}
.share-popup::after{
  top:-6px;
  border-width:0 7px 7px 7px;
  border-style:solid;
  border-color:transparent transparent #fff transparent;
}
.share-popup-icons{
  display:flex;
  gap:12px;
}
.share-icon-link{
  display:flex;
  align-items:center;
  justify-content:center;
  width:26px;
  height:26px;
  color:var(--off-black);
  flex-shrink:0;
}
.share-icon-link svg{
  width:20px;
  height:20px;
  display:block;
}
.share-icon-link svg path{ fill:var(--off-black); }
.share-icon-link:hover svg path{ fill:var(--accent); }

.product-detail-gallery{
  min-width:0;
  max-width:100%;
  overflow:hidden;
  contain:layout paint;
}

.product-detail-gallery *{ min-width:0; }

.product-detail-gallery-main-item{
  position:relative;
  width:100%;
  aspect-ratio:16 / 9;
  padding-bottom:0;
  margin-bottom:20px;
  cursor:auto;
}
.product-detail-gallery-main-item img,
.product-detail-gallery-main-item iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  cursor: zoom-in;
}

/* Tag pill — floats over the gallery image (top-left). Flat
   light-grey pill with an exclamation-circle icon, kept readable on
   any photo via a soft drop-shadow. */
.pd-sale-ribbon{
  position:absolute;
  top:12px;
  left:12px;
  z-index:2;
}
.pd-tag-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 14px 7px 10px;
  background:#f4f4f5;
  color:#111;
  border:1px solid #e4e4e7;
  border-radius:999px;
  font-weight:600;
  font-size:13px;
  line-height:1.2;
  box-shadow:0 2px 8px rgba(0, 0, 0, 0.14);
}
.pd-tag-icon{
  width:16px;
  height:16px;
  flex-shrink:0;
  color:#4a4a4a;
}
.pd-tag-label{ white-space:nowrap; }

#js-gallery-thumbs:not(.lightSlider){
  --thumb-gap: 10px;
  display:flex;
  gap:var(--thumb-gap);
  width:100%;
  max-width:100%;
  box-sizing:border-box;
  padding:0;
  list-style:none;
  flex-wrap:nowrap;
  overflow:hidden;
  margin: 0 0 20px;
}

#js-gallery-thumbs:not(.lightSlider) > li{
  flex:0 0 calc((100% - (var(--thumb-gap) * 4)) / 5);
  max-width:calc((100% - (var(--thumb-gap) * 4)) / 5);
  cursor: pointer;
}

@media (max-width:768px){
  #js-gallery-thumbs:not(.lightSlider) > li{
    flex:0 0 calc((100% - (var(--thumb-gap) * 3)) / 4);
    max-width:calc((100% - (var(--thumb-gap) * 3)) / 4);
  }
}

#js-gallery-thumbs{
  padding:0;
  list-style:none;
}

#js-gallery-thumbs > li{
  position:relative;
  box-sizing:border-box;
}

#js-gallery-thumbs > li::after{
  content:"";
  position:absolute;
  inset:0;
  border:2px solid var(--off-black);
  pointer-events:none;
  transition:border-color .2s;
}

#js-gallery-thumbs > li.active::after{ border-color:var(--accent); }
#js-gallery-thumbs > li:hover::after{ border-color:var(--accent); }

#js-gallery-thumbs > li > img{
  display:block;
  width:100%;
  height:100%;
  box-sizing:border-box;
  padding:10px;
  aspect-ratio:5/4;
  object-fit:contain;
}

@media (max-width:768px){
  #js-gallery-thumbs > li > img{ padding:5px; }
}

.video-thumbnail-overlay{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}

#js-gallery-thumbs.lightSlider{
  display:block !important;
  padding:0 !important;
}

#js-gallery-thumbs.lightSlider > li{
  max-width:none !important;
  flex:none !important;
}

.product-detail-gallery .lSSlideOuter,
.product-detail-gallery .lSSlideWrapper{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  overflow:hidden;
}

/* Wrapper around the new ClearPrice-style price card. */
.product-detail-price-wrapper{
  display:flex;
  flex-direction:column;
}

.no-strikethrough {
    text-decoration: none;
}

.product-detail-add-to-cart-wrapper .product-detail-meta{ line-height:2.25em; }


.two-col{
  grid-template-columns:1fr;
  margin-top:0;
}
@media (min-width:768px){
  .two-col{
    grid-template-columns:1fr 1fr;
    margin-top:0;
  }
}

.pd-accordion{
  display:grid;
  gap:0;
}
.pd-accordion-item{ border-bottom:1px solid var(--accent); }
.pd-accordion-toggle{
  appearance:none;
  background:transparent!important;
  border:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  padding:20px 0;
  cursor:pointer;
  text-align:left;
  color:inherit!important;
  margin-bottom:0;
}
.pd-accordion-toggle::after{
  content:'+';
  font-size:22px;
  font-weight:900;
  line-height:1;
}
.pd-accordion-item.is-open .pd-accordion-toggle::after{ content:'–'; }
.pd-accordion-panel{ padding:0 0 16px 0; }

.pd-specs-grid dt{ font-weight:600; }
.pd-specs-grid dd{ margin:0 0 20px; }
@media (min-width:768px){
  .pd-specs-grid{ column-count:2; }
}
@media (min-width:1025px){
  .pd-specs-grid{ column-count:3; }
}

.product-detail-videos{ margin-top:30px; }
.product-detail-videos-heading{
  font-size:22px;
  font-weight:700;
  margin:0 0 20px;
}
.product-videos-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
}

.product-video-thumb{
  position:relative;
  display:block;
  padding-bottom:56.25%;
  border:2px solid var(--off-black);
  border-radius:10px;
  overflow:hidden;
}
.product-video-thumb img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.product-video-play{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:48px;
  height:48px;
  background:rgba(0,0,0,.6);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
}

.video-modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.8);
  align-items:center;
  justify-content:center;
  z-index:9999;
  display:none;
}
.video-modal-content{
  position:relative;
  width:90%;
  max-width:900px;
  aspect-ratio:16/9;
}
.video-modal-content iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:none;
}
.video-modal-close{
  position:absolute;
  top:-40px;
  right:0;
  background:none;
  border:none;
  color:#fff;
  font-size:32px;
  cursor:pointer;
  padding:0;
  line-height:1;
  background:transparent!important;
  transition:ease-in-out .3s;
}
.video-modal-close:hover{ transform:scale(1.25); }

/* DPS "Value My Trade" campaign modal. Mirrors the .video-modal chrome, but
   the DPS embed reports its own height via postMessage, so the overlay
   scrolls for tall forms instead of locking to a fixed aspect ratio. */
.trade-modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.8);
  z-index:9999;
  display:none;
  align-items:flex-start;
  justify-content:center;
  overflow-y:auto;
  padding:48px 16px;
  -webkit-overflow-scrolling:touch;
}
.trade-modal-content{
  position:relative;
  width:100%;
  max-width:640px;
  margin:auto;
  background:#fff;
  border-radius:10px;
  overflow:hidden;
}
.trade-modal-content iframe{
  display:block;
  width:100%;
  min-height:520px;
  border:none;
  border-radius:10px;
}
.trade-modal-close{
  position:fixed;
  top:14px;
  right:20px;
  background:transparent!important;
  border:none;
  color:#fff;
  font-size:36px;
  line-height:1;
  cursor:pointer;
  padding:0;
  z-index:10000;
  transition:ease-in-out .3s;
}
.trade-modal-close:hover{ transform:scale(1.25); }
body.dps-modal-open{ overflow:hidden; }

.copy-toast{
  position:fixed;
  bottom:20px;
  right:20px;
  background:var(--off-black);
  color:#fff;
  padding:8px 12px;
  border-radius:4px;
  opacity:0;
  pointer-events:none;
  transform:translateY(20px);
  transition:opacity .3s,transform .3s;
  z-index:99999;
}
.copy-toast.show{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0);
}

.age-message{
  font-size:15px;
  font-weight:700;
  text-align:center;
  display:flex;
  align-items:center;
  justify-content:center;
  column-gap:3px;
}
.age-message svg{
  width:1.1em;
  height:1.1em;
}

.customized-message{
  font-size:16px;
  text-align:center;
  font-style:italic;
}

.built-by-text{
  font-size:20px;
  font-weight:600;
}

.product-detail-gallery .lSAction > a{
  width: 31px;
  height: 31px;
  border-radius: 50%;
  opacity:1;
  margin-top:-18px;
  background-repeat:no-repeat;
  background-position:center;
  background-size:36px 36px;
}

.product-detail-gallery .lSAction > .lSPrev,
.product-detail-gallery .lSAction > .lSNext{
  background-color:#fff;
}

.product-detail-gallery .lSAction > .lSPrev{
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20640%20640%22%3E%3Cpath%20fill%3D%22%23cf1e27%22%20d%3D%22M576%20320C576%20178.6%20461.4%2064%20320%2064C178.6%2064%2064%20178.6%2064%20320C64%20461.4%20178.6%20576%20320%20576C461.4%20576%20576%20461.4%20576%20320zM231%20303L335%20199L352%20182L385.9%20215.9L368.9%20232.9L281.9%20319.9L368.9%20406.9L385.9%20423.9L352%20457.8L335%20440.8L231%20336.8L214%20319.8L231%20302.8z%22/%3E%3C/svg%3E");
}

.product-detail-gallery .lSAction > .lSNext{
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20640%20640%22%3E%3Cpath%20fill%3D%22%23cf1e27%22%20d%3D%22M64%20320C64%20461.4%20178.6%20576%20320%20576C461.4%20576%20576%20461.4%20576%20320C576%20178.6%20461.4%2064%20320%2064C178.6%2064%2064%20178.6%2064%20320zM409%20337L305%20441L288%20458L254.1%20424.1L271.1%20407.1L358.1%20320.1L271.1%20233.1L254.1%20216.1L288%20182.2L305%20199.2L409%20303.2L426%20320.2L409%20337.2z%22/%3E%3C/svg%3E");
}

.product-detail-gallery .lSAction > a:hover{
  transform:scale(1.08);
}

.pd-accordion-panel { display: none; }

.pd-accordion-item.is-open .pd-accordion-panel { display: block; }

/* =========================================================
   VDP CTA stack (mock-aligned)
   Lock in this price (primary) / Get approved /
   Value my trade + Schedule appt / phone link
   ========================================================= */

.inv-ctas--vdp {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0;
  margin-top: 16px;
}

.inv-ctas--vdp .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  width: 100%;
  box-sizing: border-box;
}

.inv-ctas--vdp .vdp-cta-primary,
.inv-ctas--vdp .vdp-cta-primary:hover,
.inv-ctas--vdp .vdp-cta-primary:focus-visible {
  background: var(--accent, #cf1e27);
  color: #fff;
  border: 1px solid var(--accent, #cf1e27);
  box-shadow: none;
}

.inv-ctas--vdp .vdp-cta-primary:hover,
.inv-ctas--vdp .vdp-cta-primary:focus-visible {
  background: #b51820;
  border-color: #b51820;
}

.inv-ctas--vdp .vdp-cta-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.inv-ctas--vdp .vdp-cta-secondary,
.inv-ctas--vdp .vdp-cta-secondary:hover,
.inv-ctas--vdp .vdp-cta-secondary:focus-visible {
  background: #4a4a4a;
  color: #fff;
  border: 1px solid #4a4a4a;
  box-shadow: none;
  text-shadow: none;
}

.inv-ctas--vdp .vdp-cta-secondary:hover,
.inv-ctas--vdp .vdp-cta-secondary:focus-visible {
  background: #333;
  border-color: #333;
  color: #fff;
}

.inv-ctas--vdp .vdp-cta-tertiary,
.inv-ctas--vdp .vdp-cta-tertiary:hover,
.inv-ctas--vdp .vdp-cta-tertiary:focus-visible {
  background: transparent;
  color: var(--accent, #cf1e27);
  border: 1px solid var(--accent, #cf1e27);
  box-shadow: none;
  text-shadow: none;
}

.inv-ctas--vdp .vdp-cta-tertiary:hover,
.inv-ctas--vdp .vdp-cta-tertiary:focus-visible {
  background: var(--accent, #cf1e27);
  color: #fff;
  border-color: var(--accent, #cf1e27);
}

.inv-ctas--vdp .vdp-cta-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.inv-ctas--vdp .vdp-cta-phone {
  display: block;
  text-align: center;
  padding: 8px 0 0;
  font-size: 13px;
  color: var(--off-black, #111);
  text-decoration: underline;
  font-weight: 500;
}

.inv-ctas--vdp .vdp-cta-phone:hover,
.inv-ctas--vdp .vdp-cta-phone:focus-visible {
  color: var(--accent, #cf1e27);
}