/* Hub speaker + car-stereo + amplifier PDPs and clickable cards. Do not copy onto sister shops. */
body.shop-landing .product-card__media-link,
body.page-shop .product-card__media-link{
  display: block;
  width: 100%;
  height: 100%;
  color: inherit;
  text-decoration: none;
}
body.shop-landing .product-card__media-link img,
body.page-shop .product-card__media-link img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}
body.shop-landing .product-card__title-link,
body.page-shop .product-card__title-link{
  color: inherit;
  text-decoration: none;
}
body.shop-landing .product-card__title-link:hover,
body.page-shop .product-card__title-link:hover{
  text-decoration: underline;
}

body.shop-landing .shop-browse-hero--pdp,
body.page-shop .shop-browse-hero--pdp{
  padding-bottom: 16px;
}
@media (min-width: 761px){
  body.shop-landing .shop-browse-hero--pdp,
  body.page-shop .shop-browse-hero--pdp{
    padding-bottom: 24px;
  }
}

body.shop-landing .shop-pdp,
body.page-shop .shop-pdp{
  min-width: 0;
}
body.shop-landing .shop-pdp .product-card.shop-pdp__buy,
body.page-shop .shop-pdp .product-card.shop-pdp__buy{
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  padding: 20px;
  overflow: visible;
}
@media (min-width: 761px){
  body.shop-landing .shop-pdp .product-card.shop-pdp__buy,
  body.page-shop .shop-pdp .product-card.shop-pdp__buy{
    grid-template-columns: minmax(0, 1.05fr) minmax(260px, 0.95fr);
    gap: 32px;
    padding: 28px;
    align-items: start;
  }
}
body.shop-landing .shop-pdp__media,
body.page-shop .shop-pdp__media{
  aspect-ratio: 1;
  min-height: 280px;
  margin: 0;
}
@media (min-width: 761px){
  body.shop-landing .shop-pdp__media,
  body.page-shop .shop-pdp__media{
    min-height: 420px;
  }
}
body.shop-landing .shop-pdp__info,
body.page-shop .shop-pdp__info{
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
body.shop-landing .shop-pdp__name,
body.page-shop .shop-pdp__name{
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  line-height: 1.2;
  color: #141414;
  margin: 0;
}
body.shop-landing .shop-pdp__spec,
body.page-shop .shop-pdp__spec{
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #5C5C5C;
  margin: 0;
}
body.shop-landing .shop-pdp .product-card__price,
body.page-shop .shop-pdp .product-card__price{
  font-size: 1.25rem;
}
body.shop-landing .shop-pdp .product-card .btn,
body.page-shop .shop-pdp .product-card .btn,
body.shop-landing .shop-pdp .card-link,
body.page-shop .shop-pdp .card-link{
  align-self: stretch;
}

/* ---------------------------------------------------------------------------
   PDP blocks, 2026-09-21. The page was a buy box and nothing else; these are the
   sections under it. Same white shop canvas, same hairlines, same one accent.
   --------------------------------------------------------------------------- */

body.shop-pdp-page .shop-pdp__type{
  font-family: var(--font-body);
  font-size: 15px;
  color: #5C5C5C;
  margin: -4px 0 0;
}

body.shop-pdp-page .shop-pdp__install{
  font-family: var(--font-body);
  font-size: 13px;
  color: #5C5C5C;
  margin: 2px 0 0;
}
body.shop-pdp-page .shop-pdp__install a{
  color: var(--cta);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

body.shop-pdp-page .shop-pdp__block{
  margin: 40px 0 0;
  padding-top: 28px;
  border-top: 1px solid rgba(20, 20, 20, 0.10);
}
body.shop-pdp-page .shop-pdp__block > h2{
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.35rem;
  color: #141414;
  margin: 0 0 12px;
}
body.shop-pdp-page .shop-pdp__block > p{
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: #3D3D3D;
  max-width: 68ch;
  margin: 0;
}

body.shop-pdp-page .shop-pdp__specs{
  width: 100%;
  max-width: 560px;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: 14px;
}
body.shop-pdp-page .shop-pdp__specs th,
body.shop-pdp-page .shop-pdp__specs td{
  text-align: left;
  padding: 9px 0;
  border-bottom: 1px solid rgba(20, 20, 20, 0.08);
  vertical-align: top;
}
body.shop-pdp-page .shop-pdp__specs th{
  font-weight: 500;
  color: #5C5C5C;
  width: 42%;
}
body.shop-pdp-page .shop-pdp__specs td{ color: #141414; font-weight: 500; }

body.shop-pdp-page .shop-pdp__rail .shop-products{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
@media (max-width: 1000px){
  body.shop-pdp-page .shop-pdp__rail .shop-products{ grid-template-columns: repeat(2, 1fr); }
}

body.shop-pdp-page .shop-pdp__pickup{
  background: #F5F5F5;
  border-radius: 8px;
  border-top: 0;
  padding: 24px;
}
body.shop-pdp-page .shop-pdp__pickup h2{ margin-top: 0; }
body.shop-pdp-page .shop-pdp__pickup p + p{ margin-top: 14px; }

body.shop-pdp-page .shop-pdp__faq{
  font-family: var(--font-body);
  max-width: 68ch;
  margin: 0;
}
body.shop-pdp-page .shop-pdp__faq dt{
  font-weight: 600;
  font-size: 15px;
  color: #141414;
  margin-top: 16px;
}
body.shop-pdp-page .shop-pdp__faq dt:first-child{ margin-top: 0; }
body.shop-pdp-page .shop-pdp__faq dd{
  margin: 5px 0 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: #5C5C5C;
}

/* The PDP body sits inside .shop-browse-layout, which is a two-column grid
   (sidebar | content) from 761px up. Without this the new sections become grid
   items and alternate across the two columns — headings land in the 180px rail
   and the rails crush to ~40px per card. Span the full row instead; the buy box
   keeps its place beside the sidebar. */
@media (min-width: 761px){
  body.shop-pdp-page .shop-browse-layout > .shop-pdp__block{
    grid-column: 1 / -1;
  }
}

body.shop-landing .shop-pdp__thumbs,
body.page-shop .shop-pdp__thumbs{
  display: flex;
  gap: 8px;
  margin-top: 8px;
  overflow-x: auto;
}
body.shop-landing .shop-pdp__thumbs img,
body.page-shop .shop-pdp__thumbs img{
  width: 72px;
  height: 72px;
  object-fit: contain;
  background: #fff;
  border: 1px solid rgba(20,20,20,.12);
  border-radius: 4px;
  flex: 0 0 auto;
}