/* Shop landing — WHITE e-commerce canvas. the owner, 20 Aug 2026: regular
   pages stay black; /shop is the only white page. Do not flip this to
   var(--bg) / black page + white cards. Header / footer / topbar / mobile
   CTA are white chrome on shop pages only (Sep 2026). Tokens stay on
   body.shop-landing / body.page-shop only. Do not copy onto home. */
body.shop-landing,
body.page-shop{
  background: #FFFFFF;
}
body.shop-landing .shop-hero,
body.shop-landing .section,
body.shop-landing .page-short-band,
body.shop-landing .product-shot-band,
body.page-shop .shop-hero,
body.page-shop .section,
body.page-shop .page-short-band,
body.page-shop .product-shot-band{
  color: #141414;
}

body.shop-landing .section,
body.page-shop .section{
  padding: 48px 0;
  color: #141414;
  background: #FFFFFF;
}
body.shop-landing .section-alt,
body.page-shop .section-alt{
  background: #F5F5F5;
}
@media (min-width: 761px) {
  body.shop-landing .section,
body.page-shop .section{ padding: 80px 0; }
}

body.shop-landing .shop-section-head h2,
body.shop-landing .shop-pickup h2,
body.shop-landing .shop-build-promo h2,
body.shop-landing .product-card__name,
body.shop-landing .product-card__price,
body.shop-landing .shop-claim blockquote{
  color: #141414;
}
body.shop-landing .shop-section-head p,
body.shop-landing .shop-pickup p,
body.shop-landing .shop-build-promo p,
body.shop-landing .product-card__why,
body.shop-landing .product-card__stock,
body.shop-landing .product-card__brand,
body.shop-landing .shop-claim cite,
body.shop-landing .shop-xsell,
body.shop-landing .shop-alarm-note{
  color: #5C5C5C;
}

body.shop-landing .section .btn-outline,
body.shop-landing .shop-hero .btn-outline{
  color: #141414;
  border-color: rgba(20,20,20,.22);
  background: #FFFFFF;
}
body.shop-landing .section .btn-outline:hover,
body.shop-landing .shop-hero .btn-outline:hover{
  border-color: rgba(20,20,20,.4);
}

@media (max-width: 760px) {
  body.shop-landing .ams-chat,
body.page-shop .ams-chat{
    bottom: calc(72px + env(safe-area-inset-bottom, 0px) + 8px);
  }
}

body.shop-landing .shop-hero, body.page-shop .shop-hero{
  position: relative;
  min-height: 0;
  display: block;
  border-bottom: 1px solid rgba(20,20,20,.10);
  overflow: hidden;
  background: #FFFFFF;
}
body.shop-landing .shop-hero__banner, body.page-shop .shop-hero__banner{
  width: 100%;
  background: #F5F5F5;
  border-bottom: 1px solid rgba(20,20,20,.08);
  overflow: hidden;
}
body.shop-landing .shop-hero__banner picture, body.page-shop .shop-hero__banner picture{
  display: block;
  width: 100%;
  height: 100%;
}
body.shop-landing .shop-hero__banner img, body.page-shop .shop-hero__banner img{
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  object-position: center;
}
/* Phone: 2:1 cover crop. Dedicated *-phone.jpg frames keep the script
   (Car Audio / Auto Alarm / VIPER / Infiniti + AMS mark) on a 390px screen.
   Do not use contain — that squeezes the full Wix strip and clips the words. */
@media (max-width: 760px) {
  body.shop-landing .shop-hero__banner, body.page-shop .shop-hero__banner{
    aspect-ratio: 2 / 1;
  }
  body.shop-landing .shop-hero__banner img, body.page-shop .shop-hero__banner img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  body.shop-landing[data-ams-site="beats"] .shop-hero__banner img, body.page-shop[data-ams-site="beats"] .shop-hero__banner img{ object-position: 50% 50%; }
  body.shop-landing[data-ams-site="alarm"] .shop-hero__banner img, body.page-shop[data-ams-site="alarm"] .shop-hero__banner img{ object-position: 100% 50%; }
  body.shop-landing[data-ams-site="hub"] .shop-hero__banner img, body.page-shop[data-ams-site="hub"] .shop-hero__banner img{ object-position: 82% 38%; }
  /* Complementary 2:1 phone (shop-fix 2026-09-06). Cover fills the 2:1 box
     with no navy letterbox. Tall 1080×1920 Shizzele masters stay on disk. */
  body.shop-landing[data-ams-site="pods"] .shop-hero__banner img, body.page-shop[data-ams-site="pods"] .shop-hero__banner img{
    object-fit: cover;
    object-position: 50% 50%;
    background: #FFFFFF;
  }
}
@media (min-width: 761px) {
  body.shop-landing .shop-hero__banner img, body.page-shop .shop-hero__banner img{
    width: auto;
    max-width: 100%;
    max-height: 380px;
    margin: 0 auto;
  }
}
body.shop-landing .shop-hero__bg, body.page-shop .shop-hero__bg{
  display: none;
}
body.shop-landing .shop-hero__bg::after, body.page-shop .shop-hero__bg::after{
  content: none;
}
body.shop-landing .shop-hero__inner, body.page-shop .shop-hero__inner,
body.shop-landing .shop-hero__copy, body.page-shop .shop-hero__copy{
  position: relative;
  z-index: 1;
  padding: 24px 72px 32px 0;
  max-width: 40rem;
}
@media (min-width: 761px) {
  body.shop-landing .shop-hero__inner, body.page-shop .shop-hero__inner,
body.shop-landing .shop-hero__copy, body.page-shop .shop-hero__copy{
    padding: 28px 0 36px;
  }
}
@media (min-width: 1121px) {
  body.shop-landing .shop-hero__inner, body.page-shop .shop-hero__inner,
body.shop-landing .shop-hero__copy, body.page-shop .shop-hero__copy{
    padding: 36px 0 48px;
  }
}
body.shop-landing .shop-hero__inner h1, body.page-shop .shop-hero__inner h1,
body.shop-landing .shop-hero__copy h1, body.page-shop .shop-hero__copy h1{
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1.12;
  margin: 0 0 14px;
  color: #141414;
}
body.shop-landing .shop-hero__inner .lead, body.page-shop .shop-hero__inner .lead,
body.shop-landing .shop-hero__copy .lead, body.page-shop .shop-hero__copy .lead{
  color: #5C5C5C;
  font-size: 1.05rem;
  line-height: 1.55;
  margin: 0 0 22px;
}
body.shop-landing .shop-hero__inner .eyebrow, body.page-shop .shop-hero__inner .eyebrow,
body.shop-landing .shop-hero__copy .eyebrow, body.page-shop .shop-hero__copy .eyebrow{
  color: #5C5C5C;
}
body.shop-landing .shop-hero--simulator, body.page-shop .shop-hero--simulator{
  align-items: stretch;
  min-height: auto;
  display: block;
  background: #FFFFFF;
}
body.shop-landing .shop-hero--simulator .shop-hero__copy, body.page-shop .shop-hero--simulator .shop-hero__copy{
  padding: 48px 0 8px;
  max-width: 40rem;
}
body.shop-landing .shop-hero--simulator .shop-hero__grid, body.page-shop .shop-hero--simulator .shop-hero__grid{
  position: relative;
  z-index: 1;
  display: block;
  padding: 0 0 72px;
}
@media (min-width: 901px) {
  body.shop-landing .shop-hero--simulator .shop-hero__grid, body.page-shop .shop-hero--simulator .shop-hero__grid{
    grid-template-columns: none;
    gap: 40px;
    padding: 64px 0;
    align-items: center;
  }
}

body.shop-landing .shop-brand-strip, body.page-shop .shop-brand-strip{
  padding: 0 0 8px;
}
body.shop-landing .shop-brand-strip img, body.page-shop .shop-brand-strip img{
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  aspect-ratio: 16 / 5;
  max-height: 220px;
  border: 1px solid rgba(20,20,20,.10);
  border-radius: 8px;
  background: #FFFFFF;
}

body.shop-landing .page-short-band:not([hidden]),
body.page-shop .page-short-band:not([hidden]){
  padding-top: 16px;
  padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px));
}
body.shop-landing .page-short-title,
body.page-shop .page-short-title{
  scroll-margin-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 1121px) {
  body.shop-landing .page-short-band:not([hidden]),
body.page-shop .page-short-band:not([hidden]){
    padding-bottom: 32px;
  }
}

body.shop-landing .page-short-title,
body.page-shop .page-short-title,
body.shop-landing .product-shot h2,
body.page-shop .product-shot h2,
body.shop-landing .tsim-title,
body.page-shop .tsim-title{
  color: #141414;
}
body.shop-landing .page-short-caption,
body.page-shop .page-short-caption,
body.shop-landing .product-shot p,
body.page-shop .product-shot p,
body.shop-landing .tsim-sub,
body.page-shop .tsim-sub{
  color: #5C5C5C;
}
/* The simulator head used dark-panel ink (#F5F5F5). On the white shop canvas
   the H2 vanished and the hours line ran under the 44px chat launcher, which
   is how "AM" split to the next line. Keep the time as one unit. */
body.shop-landing .tsim-hours-line, body.page-shop .tsim-hours-line{ white-space: nowrap; }
@media (max-width: 1120px) {
  body.shop-landing .shop-hero--simulator .tsim-head,
body.page-shop .shop-hero--simulator .tsim-head{
    padding-right: 64px;
  }
}
body.shop-landing .product-shot-list,
body.page-shop .product-shot-list{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
body.shop-landing .product-shot img,
body.page-shop .product-shot img{
  background: #FFFFFF;
  border-color: rgba(20, 20, 20, 0.10);
}
@media (min-width: 761px) {
  body.shop-landing .product-shot-list,
body.page-shop .product-shot-list{
    gap: 24px;
  }
}
body.shop-landing .card-link,
body.page-shop .card-link{
  color: #141414;
  font-weight: 600;
}

/* Tint shade simulator (hero) */
body.shop-landing .shade-sim, body.page-shop .shade-sim{
  border: 1px solid rgba(20, 20, 20, 0.12);
  border-radius: 8px;
  background: #FFFFFF;
  padding: 18px;
}
body.shop-landing .shade-sim__glass, body.page-shop .shade-sim__glass{
  position: relative;
  height: 220px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border);
  background:
    linear-gradient(160deg, #3a4a58 0%, #1a2228 45%, #0d1216 100%);
}
body.shop-landing .shade-sim__glass::before, body.page-shop .shade-sim__glass::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.08) 50%, transparent 100%);
}
body.shop-landing .shade-sim__film, body.page-shop .shade-sim__film{
  position: absolute;
  inset: 0;
  background: #05070a;
  opacity: 0.45;
  transition: opacity .35s ease;
}
body.shop-landing .shade-sim__meta, body.page-shop .shade-sim__meta{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 14px;
  gap: 12px;
}
body.shop-landing .shade-sim__meta strong, body.page-shop .shade-sim__meta strong{
  font-family: var(--font-head);
  font-size: 1.05rem;
  color: #141414;
}
body.shop-landing .shade-sim__meta span, body.page-shop .shade-sim__meta span{
  font-size: .8rem;
  color: #5C5C5C;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 600;
}
body.shop-landing .shade-sim__swatches, body.page-shop .shade-sim__swatches{
  display: flex;
  gap: 10px;
  margin-top: 14px;
  flex-wrap: wrap;
}
body.shop-landing .shade-sim__swatch, body.page-shop .shade-sim__swatch{
  width: 40px;
  height: 40px;
  border-radius: 4px;
  border: 1px solid rgba(20, 20, 20, 0.12);
  cursor: pointer;
  padding: 0;
  background: #111;
}
body.shop-landing .shade-sim__swatch[aria-pressed="true"], body.page-shop .shade-sim__swatch[aria-pressed="true"]{
  outline: 2px solid var(--cta);
  outline-offset: 2px;
}
body.shop-landing .shade-sim__swatch:focus-visible, body.page-shop .shade-sim__swatch:focus-visible{
  outline: 2px solid var(--cta);
  outline-offset: 2px;
}

body.shop-landing .shop-cats, body.page-shop .shop-cats{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
body.shop-landing .shop-cats:has(.shop-cat--tile), body.page-shop .shop-cats:has(.shop-cat--tile){
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 560px) {
  body.shop-landing .shop-cats, body.page-shop .shop-cats,
body.shop-landing .shop-cats:has(.shop-cat--tile), body.page-shop .shop-cats:has(.shop-cat--tile){
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 900px) {
  body.shop-landing .shop-cats, body.page-shop .shop-cats,
body.shop-landing .shop-cats:has(.shop-cat--tile), body.page-shop .shop-cats:has(.shop-cat--tile){
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
body.shop-landing .shop-cat, body.page-shop .shop-cat{
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 72px;
  padding: 16px 14px;
  border-radius: 8px;
  border: 1px solid rgba(20, 20, 20, 0.12);
  background: #FFFFFF;
  color: #141414;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  box-shadow: none;
  transition: border-color .2s ease;
}
body.shop-landing .shop-cat:hover, body.page-shop .shop-cat:hover{
  color: #141414;
  border-color: rgba(20, 20, 20, 0.28);
  background: #FFFFFF;
}
body.shop-landing .shop-cat--tile, body.page-shop .shop-cat--tile{
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  padding: 0;
  overflow: hidden;
  min-height: 0;
  text-align: left;
}
body.shop-landing .shop-cat--tile img, body.page-shop .shop-cat--tile img{
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
  background: #141414;
  vertical-align: bottom;
}
body.shop-landing .shop-cat--tile span, body.page-shop .shop-cat--tile span{
  display: block;
  padding: 8px 10px 10px;
  font-size: 0.95rem;
  line-height: 1.2;
}

body.shop-landing .shop-build-promo, body.page-shop .shop-build-promo{
  border-block: 1px solid rgba(20, 20, 20, 0.10);
  background: #F5F5F5;
}
body.shop-landing .shop-build-promo__inner, body.page-shop .shop-build-promo__inner{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}
body.shop-landing .shop-build-promo h2, body.page-shop .shop-build-promo h2{
  font-family: var(--font-head);
  font-size: clamp(1.75rem, 3vw, 2rem);
  margin: 8px 0 10px;
  color: #141414;
}
body.shop-landing .shop-build-promo p, body.page-shop .shop-build-promo p{
  color: #5C5C5C;
  max-width: 40rem;
  margin: 0;
}

body.shop-landing .shop-products, body.page-shop .shop-products{
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 560px) {
  body.shop-landing .shop-products, body.page-shop .shop-products{
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 18px;
  }
}
body.shop-landing .product-card, body.page-shop .product-card{
  border: 1px solid rgba(20, 20, 20, 0.12);
  border-radius: 8px;
  background: #FFFFFF;
  padding: 18px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: none;
}
body.shop-landing .product-card__media, body.page-shop .product-card__media{
  aspect-ratio: 1;
  min-height: 220px;
  border-radius: 8px;
  border: 1px solid rgba(20, 20, 20, 0.10);
  background: #F7F7F7;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
body.shop-landing .product-card__media:has(img), body.page-shop .product-card__media:has(img){ background:#FFFFFF; }
body.shop-landing .product-card__media:not(:has(img)), body.page-shop .product-card__media:not(:has(img)){ display:none; }
body.shop-landing .product-card__media img, body.page-shop .product-card__media img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: #FFFFFF;
}
body.shop-landing .product-card__media--photo, body.page-shop .product-card__media--photo{
  aspect-ratio: 16 / 9;
  min-height: 0;
  background: #141414;
}
body.shop-landing .product-card__media--photo img, body.page-shop .product-card__media--photo img{
  object-fit: cover;
  background: #141414;
}
body.shop-landing .product-card__media span, body.page-shop .product-card__media span{
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.65rem;
  letter-spacing: .04em;
  color: #5C5C5C;
}
body.shop-landing .product-card__brand, body.page-shop .product-card__brand{
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: #5C5C5C;
  margin: 2px 0 0;
}
body.shop-landing .product-card__name, body.page-shop .product-card__name{
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 17px;
  color: #141414;
  margin: 0;
  line-height: 1.25;
}
body.shop-landing .product-card__why, body.page-shop .product-card__why{
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  color: #5C5C5C;
  margin: 0;
  line-height: 1.45;
  flex: 1;
}
body.shop-landing .product-card__price, body.page-shop .product-card__price{
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  color: #141414;
  margin: 0;
}
body.shop-landing .product-card__price small, body.page-shop .product-card__price small{
  display: block;
  font-weight: 500;
  font-size: 12px;
  color: #5C5C5C;
  margin-top: 2px;
}
body.shop-landing .product-card__stock, body.page-shop .product-card__stock{
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  color: #5C5C5C;
  margin: 0;
}
body.shop-landing .product-card .btn, body.page-shop .product-card .btn{
  border-radius: 4px;
  align-self: stretch;
  text-align: center;
  box-shadow: none;
}

body.shop-landing .shop-claim, body.page-shop .shop-claim{
  border-block: 1px solid rgba(20, 20, 20, 0.10);
  text-align: center;
}
body.shop-landing .shop-claim blockquote, body.page-shop .shop-claim blockquote{
  margin: 0 auto;
  max-width: 46rem;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  line-height: 1.35;
  color: #141414;
}
body.shop-landing .shop-claim cite, body.page-shop .shop-claim cite{
  display: block;
  margin-top: 16px;
  font-style: normal;
  font-family: var(--font-body);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #5C5C5C;
}

body.shop-landing .shop-pickup, body.page-shop .shop-pickup{
  border: 1px solid rgba(20, 20, 20, 0.12);
  border-radius: 8px;
  background: #FFFFFF;
  padding: 28px 28px 30px;
  max-width: 52rem;
}
body.shop-landing .shop-pickup h2, body.page-shop .shop-pickup h2{
  font-family: var(--font-head);
  font-size: 1.5rem;
  margin: 0 0 10px;
  color: #141414;
}
body.shop-landing .shop-pickup p, body.page-shop .shop-pickup p{
  margin: 0;
  color: #5C5C5C;
  line-height: 1.6;
}
body.shop-landing .shop-pickup__extra, body.page-shop .shop-pickup__extra{
  margin-top: 12px !important;
  color: #141414 !important;
  font-weight: 500;
}

body.shop-landing .shop-xsell, body.page-shop .shop-xsell{
  border-top: 1px solid rgba(20, 20, 20, 0.10);
  padding: 28px 0 8px;
  color: #5C5C5C;
  font-size: .95rem;
}
body.shop-landing .shop-xsell a, body.page-shop .shop-xsell a{
  color: #141414;
  text-decoration: underline;
  text-underline-offset: 3px;
}
body.shop-landing .shop-xsell a:hover, body.page-shop .shop-xsell a:hover{ color: #141414; }

body.shop-landing .shop-alarm-note, body.page-shop .shop-alarm-note{
  margin-top: 18px;
  font-size: .9rem;
  color: #5C5C5C;
}
body.shop-landing .shop-alarm-note a, body.page-shop .shop-alarm-note a{ color: #141414; }

body.shop-landing .shop-section-head, body.page-shop .shop-section-head{
  margin-bottom: 28px;
}
body.shop-landing .shop-section-head h2, body.page-shop .shop-section-head h2{
  font-family: var(--font-head);
  font-size: 2rem;
  margin: 0 0 8px;
  color: #141414;
}
body.shop-landing .shop-section-head p, body.page-shop .shop-section-head p{
  margin: 0;
  color: #5C5C5C;
  max-width: 40rem;
}
body.shop-landing .shop-section-head--brand,
body.page-shop .shop-section-head--brand{
  margin-bottom: 8px;
}
body.shop-landing .shop-brand-intro,
body.page-shop .shop-brand-intro{
  max-width: 46rem;
}
body.shop-landing .shop-brand-intro p,
body.page-shop .shop-brand-intro p{
  margin: 0 0 1rem;
  max-width: 46rem;
  color: #5C5C5C;
  line-height: 1.6;
}
body.shop-landing .shop-brand-intro p:last-child,
body.page-shop .shop-brand-intro p:last-child{
  margin-bottom: 0;
}

body.shop-landing #car-stereo,
body.page-shop #car-stereo{
  scroll-margin-top: 96px;
}
body.shop-landing .shop-stereo-filters,
body.page-shop .shop-stereo-filters{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 24px;
}
body.shop-landing .shop-stereo-filter,
body.page-shop .shop-stereo-filter{
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid rgba(20, 20, 20, 0.12);
  background: #FFFFFF;
  color: #141414;
  border-radius: 4px;
  padding: 8px 14px;
  cursor: pointer;
}
body.shop-landing .shop-stereo-filter:hover,
body.page-shop .shop-stereo-filter:hover{
  border-color: rgba(20, 20, 20, 0.28);
}
body.shop-landing .shop-stereo-filter[aria-pressed="true"],
body.page-shop .shop-stereo-filter[aria-pressed="true"]{
  border-color: rgba(20, 20, 20, 0.28);
  background: #F5F5F5;
}
body.shop-landing .product-shot__sku,
body.page-shop .product-shot__sku{
  margin: 0 0 4px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5C5C5C;
}
body.shop-landing .product-shot--no-photo,
body.page-shop .product-shot--no-photo{
  border: 1px solid rgba(20, 20, 20, 0.10);
  border-radius: 8px;
  background: #FFFFFF;
  padding: 16px;
}

body.shop-landing .btn-cta, body.page-shop .btn-cta,
body.shop-landing .btn-call, body.page-shop .btn-call{
  box-shadow: none;
}
body.shop-landing .btn-cta:hover, body.page-shop .btn-cta:hover,
body.shop-landing .btn-call:hover, body.page-shop .btn-call:hover{
  box-shadow: none;
}

/* Phone sizes for the card text. The locked design system puts body at 1rem/1.6 and
   these are body copy — the reason to buy, and whether it is on the shelf — but they
   ship at 14px and 13px on the most transactional page on the site. Raised on phones
   only, so the desktop grid keeps its density. Declared here rather than in style.css
   because this file loads after it and would otherwise win the cascade at equal
   specificity. */
@media (max-width: 760px){
  body.shop-landing .product-card__why, body.page-shop .product-card__why{ font-size: 1rem; line-height: 1.5; }
  body.shop-landing .product-card__stock, body.page-shop .product-card__stock{ font-size: .9rem; }
}

body.shop-landing .shop-drop-proof,
body.page-shop .shop-drop-proof {
  background: #FFFFFF;
}

body.shop-landing .shop-browse-hero .breadcrumbs,
body.page-shop .shop-browse-hero .breadcrumbs{
  color: #5C5C5C;
}
body.shop-landing .shop-browse-hero .breadcrumbs a,
body.page-shop .shop-browse-hero .breadcrumbs a{
  color: #141414;
}
body.shop-landing .shop-browse-hero h1,
body.page-shop .shop-browse-hero h1{
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(2.75rem, 5vw, 3.25rem);
  line-height: 1.15;
  color: #141414;
  margin: 0 0 12px;
}
body.shop-landing .shop-cat-count,
body.page-shop .shop-cat-count{
  display: block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #5C5C5C;
  margin-top: 6px;
}
body.shop-landing .shop-section-head--brands,
body.page-shop .shop-section-head--brands{
  margin-top: 48px;
}
body.shop-landing .shop-brands,
body.page-shop .shop-brands{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
body.shop-landing .shop-brand,
body.page-shop .shop-brand{
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid rgba(20,20,20,.12);
  border-radius: 4px;
  background: #FFFFFF;
  color: #141414;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .9rem;
  text-decoration: none;
}
body.shop-landing .shop-brand span,
body.page-shop .shop-brand span{
  color: #5C5C5C;
  font-weight: 500;
  font-size: .8rem;
}
body.shop-landing .shop-brand:hover,
body.page-shop .shop-brand:hover{
  border-color: rgba(20,20,20,.28);
  color: #141414;
}
body.shop-landing .shop-subnav,
body.page-shop .shop-subnav{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}
body.shop-landing .shop-subnav__link,
body.page-shop .shop-subnav__link{
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 8px 12px;
  border: 1px solid rgba(20,20,20,.12);
  border-radius: 4px;
  color: #141414;
  font-weight: 600;
  font-size: .86rem;
  text-decoration: none;
}
body.shop-landing .shop-subnav__link[aria-current="page"],
body.page-shop .shop-subnav__link[aria-current="page"]{
  border-color: #C6A15B;
}

/* ---------- Shop-only white chrome (header / footer / topbar / CTA bar) ----------
   Locked home heroes and sister-site interiors stay on dark style.css tokens.
   These overrides are shop-landing.css only so a home page cannot pick them up. */
body.shop-landing .topbar,
body.page-shop .topbar{
  background: #FFFFFF;
  border-bottom-color: rgba(20,20,20,.10);
  color: #5C5C5C;
}
body.shop-landing .topbar a,
body.page-shop .topbar a{
  color: #5C5C5C;
}
body.shop-landing .topbar a:hover,
body.page-shop .topbar a:hover{
  color: #141414;
}

body.shop-landing header.site-header,
body.page-shop header.site-header{
  background: rgba(255,255,255,.94);
  border-bottom-color: rgba(20,20,20,.10);
}
body.shop-landing .logo,
body.page-shop .logo,
body.shop-landing footer.site-footer .logo,
body.page-shop footer.site-footer .logo{
  color: #141414;
}
body.shop-landing .logo small,
body.page-shop .logo small{
  color: #5C5C5C;
}
body.shop-landing nav.main-nav a.nav-link,
body.page-shop nav.main-nav a.nav-link{
  color: #5C5C5C;
}
body.shop-landing nav.main-nav a.nav-link:hover,
body.shop-landing nav.main-nav li.active a.nav-link,
body.shop-landing nav.main-nav a.nav-link[aria-current="page"],
body.page-shop nav.main-nav a.nav-link:hover,
body.page-shop nav.main-nav li.active a.nav-link,
body.page-shop nav.main-nav a.nav-link[aria-current="page"]{
  color: #141414;
  background: #F5F5F5;
}
body.shop-landing .dropdown,
body.page-shop .dropdown{
  background: #FFFFFF;
  border-color: rgba(20,20,20,.12);
  box-shadow: 0 8px 24px rgba(20,20,20,.08);
}
body.shop-landing .dropdown a,
body.page-shop .dropdown a{
  color: #5C5C5C;
}
body.shop-landing .dropdown a:hover,
body.page-shop .dropdown a:hover{
  background: #F5F5F5;
  color: #141414;
}
body.shop-landing .mega-col-title,
body.page-shop .mega-col-title{
  color: var(--accent);
}

body.shop-landing .nav-toggle,
body.page-shop .nav-toggle,
body.shop-landing .header-cta .btn-outline,
body.page-shop .header-cta .btn-outline,
body.shop-landing .mobile-cta-bar .btn-outline,
body.page-shop .mobile-cta-bar .btn-outline{
  color: #141414;
  border-color: rgba(20,20,20,.22);
  background: #FFFFFF;
}
body.shop-landing .nav-toggle:hover,
body.page-shop .nav-toggle:hover,
body.shop-landing .header-cta .btn-outline:hover,
body.page-shop .header-cta .btn-outline:hover,
body.shop-landing .mobile-cta-bar .btn-outline:hover,
body.page-shop .mobile-cta-bar .btn-outline:hover{
  border-color: rgba(20,20,20,.4);
  color: #141414;
}

@media (max-width: 1120px){
  body.shop-landing nav.main-nav.open,
  body.page-shop nav.main-nav.open{
    background: rgba(255,255,255,.98);
    border-bottom-color: rgba(20,20,20,.10);
  }
}

body.shop-landing footer.site-footer,
body.page-shop footer.site-footer{
  background: #FFFFFF;
  border-top-color: rgba(20,20,20,.10);
}
body.shop-landing .footer-grid h4,
body.page-shop .footer-grid h4{
  color: #141414;
}
body.shop-landing .footer-grid a,
body.page-shop .footer-grid a,
body.shop-landing .footer-about p,
body.page-shop .footer-about p,
body.shop-landing footer.site-footer li,
body.page-shop footer.site-footer li{
  color: #5C5C5C;
}
body.shop-landing .footer-grid a:hover,
body.page-shop .footer-grid a:hover{
  color: #141414;
}
body.shop-landing .footer-social a,
body.page-shop .footer-social a{
  color: #5C5C5C;
  border-color: rgba(20,20,20,.16);
}
body.shop-landing .footer-social a:hover,
body.page-shop .footer-social a:hover{
  color: #141414;
  border-color: rgba(20,20,20,.4);
}
body.shop-landing .footer-bottom,
body.page-shop .footer-bottom{
  border-top-color: rgba(20,20,20,.10);
  color: #5C5C5C;
}
body.shop-landing .footer-bottom a,
body.page-shop .footer-bottom a{
  color: #5C5C5C;
}
body.shop-landing .footer-bottom a:hover,
body.page-shop .footer-bottom a:hover{
  color: #141414;
}

body.shop-landing .mobile-cta-bar,
body.page-shop .mobile-cta-bar{
  background: #FFFFFF;
  border-top-color: rgba(20,20,20,.10);
}
body.shop-landing .mega-count,
body.page-shop .mega-count{
  color: #5C5C5C;
}

/* Persistent left browse / filters — thin Crutchfield rail on desktop.
   Under 760px the rail stacks above products and starts collapsed. */
body.shop-landing .shop-browse-layout,
body.page-shop .shop-browse-layout{
  display: grid;
  /* Mobile-first: 1-col. Sidebar rail only from 761px up. */
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  overflow-x: clip;
}
@media (min-width: 761px){
  body.shop-landing .shop-browse-layout,
  body.page-shop .shop-browse-layout{
    grid-template-columns: minmax(180px, 220px) minmax(0, 1fr);
    gap: 24px;
  }
}
body.shop-landing .shop-filters,
body.page-shop .shop-filters{
  margin: 0;
  width: 100%;
  max-width: none;
  border: 1px solid rgba(20,20,20,.12);
  border-radius: 8px;
  background: #FFFFFF;
  position: static;
  max-height: none;
  overflow: visible;
  display: block;
}
@media (min-width: 761px){
  body.shop-landing .shop-filters,
  body.page-shop .shop-filters{
    max-width: 220px;
    position: sticky;
    top: 72px;
    max-height: calc(100vh - 72px - 80px);
    overflow: auto;
  }
}
body.shop-landing .shop-filters[open],
body.page-shop .shop-filters[open]{
  display: block;
}
body.shop-landing .shop-filters__toggle,
body.page-shop .shop-filters__toggle{
  display: none;
  list-style: none;
}
body.shop-landing .shop-filters__toggle::-webkit-details-marker,
body.page-shop .shop-filters__toggle::-webkit-details-marker{ display: none; }
body.shop-landing .shop-filters .shop-sidebar,
body.page-shop .shop-filters .shop-sidebar{
  display: block;
}
/* Closed filters hide sidebar on mobile; desktop forces open below */
body.shop-landing .shop-filters:not([open]) > .shop-sidebar,
body.page-shop .shop-filters:not([open]) > .shop-sidebar{
  display: none;
}
@media (min-width: 761px){
  body.shop-landing .shop-filters:not([open]) > .shop-sidebar,
  body.page-shop .shop-filters:not([open]) > .shop-sidebar,
  body.shop-landing .shop-filters > .shop-sidebar,
  body.page-shop .shop-filters > .shop-sidebar{
    display: block !important;
  }
}
body.shop-landing .shop-sidebar,
body.page-shop .shop-sidebar{
  padding: 6px 8px 10px;
}
body.shop-landing .shop-sidebar__title,
body.page-shop .shop-sidebar__title{
  margin: 10px 0 4px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #5C5C5C;
}
body.shop-landing .shop-facet-group:first-child .shop-sidebar__title,
body.page-shop .shop-facet-group:first-child .shop-sidebar__title{ margin-top: 8px; }
body.shop-landing .shop-sidebar__nav,
body.page-shop .shop-sidebar__nav,
body.shop-landing .shop-facet-list,
body.page-shop .shop-facet-list{
  display: flex;
  flex-direction: column;
  gap: 2px;
}
body.shop-landing .shop-sidebar__nav--brands,
body.page-shop .shop-sidebar__nav--brands{
  max-height: 280px;
  overflow: auto;
}
body.shop-landing .shop-sidebar a,
body.page-shop .shop-sidebar a{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px;
  padding: 4px 2px;
  color: #141414;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .72rem;
  line-height: 1.25;
  text-decoration: none;
  border-radius: 4px;
}
@media (min-width: 761px){
  body.shop-landing .shop-sidebar a,
  body.page-shop .shop-sidebar a{
    padding: 6px 4px;
    font-size: .82rem;
    gap: 8px;
  }
}
body.shop-landing .shop-sidebar a span,
body.page-shop .shop-sidebar a span{
  color: #5C5C5C;
  font-weight: 500;
  font-size: .78rem;
}
body.shop-landing .shop-sidebar a.shop-sidebar__sub,
body.page-shop .shop-sidebar a.shop-sidebar__sub{
  padding-left: 16px;
  font-size: .84rem;
  font-weight: 500;
}
body.shop-landing .shop-sidebar a:hover,
body.page-shop .shop-sidebar a:hover{
  background: #F5F5F5;
  color: #141414;
}
body.shop-landing .shop-sidebar a[aria-current="page"],
body.page-shop .shop-sidebar a[aria-current="page"]{
  color: #141414;
  box-shadow: inset 3px 0 0 #C6A15B;
}
body.shop-landing .shop-size-tiles,
body.page-shop .shop-size-tiles{
  display: none;
}
@media (min-width: 761px){
  body.shop-landing .shop-size-tiles,
  body.page-shop .shop-size-tiles{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 20px;
  }
}
body.shop-landing .shop-size-tile,
body.page-shop .shop-size-tile{
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 88px;
  padding: 10px 12px;
  border: 1px solid rgba(20,20,20,.12);
  border-radius: 4px;
  background: #FFFFFF;
  color: #141414;
  text-decoration: none;
}
body.shop-landing .shop-size-tile:hover,
body.page-shop .shop-size-tile:hover{
  border-color: rgba(20,20,20,.28);
}
body.shop-landing .shop-size-tile[aria-current="page"],
body.page-shop .shop-size-tile[aria-current="page"]{
  border-color: #C6A15B;
}
body.shop-landing .shop-size-tile__label,
body.page-shop .shop-size-tile__label{
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1rem;
}
body.shop-landing .shop-size-tile__count,
body.page-shop .shop-size-tile__count{
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #5C5C5C;
}

/* Shop homepage: hero full width, then the same left browse column as category landings */
body.shop-landing .shop-home-shell,
body.page-shop .shop-home-shell{
  padding: 16px 0 48px;
}
@media (min-width: 761px){
  body.shop-landing .shop-home-shell,
  body.page-shop .shop-home-shell{
    padding: 24px 0 64px;
  }
}
body.shop-landing .shop-browse-layout--home,
body.page-shop .shop-browse-layout--home{
  display: grid;
  /* Mobile-first: never show Crutchfield sidebar column under ~761 */
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  overflow-x: clip;
}
body.shop-landing .shop-browse-layout--home .shop-home-main,
body.page-shop .shop-browse-layout--home .shop-home-main{
  min-width: 0;
}
@media (min-width: 761px){
  body.shop-landing .shop-browse-layout--home,
  body.page-shop .shop-browse-layout--home{
    grid-template-columns: minmax(180px, 220px) minmax(0, 1fr);
    gap: 24px;
  }
}
body.shop-landing .shop-home-main .container,
body.page-shop .shop-home-main .container{
  max-width: none;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}
body.shop-landing .product-shot__media-link,
body.page-shop .product-shot__media-link,
body.shop-landing .product-card__media-link,
body.page-shop .product-card__media-link{
  display: block;
  color: inherit;
  text-decoration: none;
}
body.shop-landing .product-shot__title-link,
body.page-shop .product-shot__title-link,
body.shop-landing .product-card__title-link,
body.page-shop .product-card__title-link{
  color: inherit;
  text-decoration: none;
}
body.shop-landing .product-shot__title-link:hover,
body.page-shop .product-shot__title-link:hover,
body.shop-landing .product-card__title-link:hover,
body.page-shop .product-card__title-link:hover{
  text-decoration: underline;
}
body.shop-landing .product-shot__cta,
body.page-shop .product-shot__cta{
  display: inline-block;
  margin-top: 8px;
}
body.shop-landing .shop-home-main > .section:first-child,
body.page-shop .shop-home-main > .section:first-child,
body.shop-landing .shop-home-main > .page-short-band:first-child,
body.page-shop .shop-home-main > .page-short-band:first-child,
body.shop-landing .shop-home-main > .product-shot-band:first-child,
body.page-shop .shop-home-main > .product-shot-band:first-child{
  padding-top: 8px;
}
body.shop-landing .shop-sidebar__acc,
body.page-shop .shop-sidebar__acc{
  margin: 0;
  border: 0;
  background: transparent;
}
body.shop-landing .shop-sidebar__acc-sum,
body.page-shop .shop-sidebar__acc-sum{
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
}
body.shop-landing .shop-sidebar__acc-sum::-webkit-details-marker,
body.page-shop .shop-sidebar__acc-sum::-webkit-details-marker{ display: none; }
body.shop-landing .shop-sidebar__acc-sum::after,
body.page-shop .shop-sidebar__acc-sum::after{
  content: "+";
  margin-left: auto;
  color: #5C5C5C;
  font-weight: 600;
  font-size: 14px;
  padding-right: 4px;
}
body.shop-landing .shop-sidebar__acc[open] > .shop-sidebar__acc-sum::after,
body.page-shop .shop-sidebar__acc[open] > .shop-sidebar__acc-sum::after{
  content: "\2212";
}
body.shop-landing .shop-sidebar__acc-sum a,
body.page-shop .shop-sidebar__acc-sum a{
  flex: 1;
}
body.shop-landing .shop-sidebar__acc--brands > .shop-sidebar__acc-sum,
body.page-shop .shop-sidebar__acc--brands > .shop-sidebar__acc-sum{
  padding: 8px 4px 4px;
}
body.shop-landing .shop-sidebar__acc--brands .shop-sidebar__title,
body.page-shop .shop-sidebar__acc--brands .shop-sidebar__title{
  margin: 0;
}
body.shop-landing .shop-browse-layout > *,
body.page-shop .shop-browse-layout > *,
body.shop-landing .shop-browse-layout .shop-products,
body.page-shop .shop-browse-layout .shop-products,
body.shop-landing .shop-browse-layout .product-card,
body.page-shop .shop-browse-layout .product-card,
body.shop-landing .shop-home-main .shop-products,
body.page-shop .shop-home-main .shop-products,
body.shop-landing .shop-home-main .product-card,
body.page-shop .shop-home-main .product-card{
  min-width: 0;
  max-width: 100%;
}
body.shop-landing .shop-browse-layout .product-card,
body.page-shop .shop-browse-layout .product-card,
body.shop-landing .shop-home-main .product-card,
body.page-shop .shop-home-main .product-card{
  overflow: hidden;
}
@media (max-width: 760px){
  body.shop-browse .shop-browse-hero.section{
    padding: 20px 0 16px;
  }
  body.shop-browse #on-the-wall.section{
    padding-top: 16px;
  }
  body.shop-landing .shop-browse-layout .product-card,
  body.page-shop .shop-browse-layout .product-card,
  body.shop-landing .shop-home-main .product-card,
  body.page-shop .shop-home-main .product-card{
    padding: 10px 10px 12px;
    gap: 6px;
  }
  body.shop-landing .shop-browse-layout .product-card__media,
  body.page-shop .shop-browse-layout .product-card__media,
  body.shop-landing .shop-home-main .product-card__media,
  body.page-shop .shop-home-main .product-card__media{
    min-height: 0;
    aspect-ratio: 1;
  }
  body.shop-landing .shop-sidebar__nav--brands,
  body.page-shop .shop-sidebar__nav--brands{
    max-height: 168px;
  }
  body.shop-landing .shop-browse-layout,
  body.page-shop .shop-browse-layout,
  body.shop-landing .shop-browse-layout--home,
  body.page-shop .shop-browse-layout--home{
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
  body.shop-landing .shop-filters,
  body.page-shop .shop-filters{
    max-width: none;
    width: 100%;
    position: static;
    max-height: none;
    overflow: visible;
  }
  body.shop-landing .shop-filters__toggle,
  body.page-shop .shop-filters__toggle{
    display: flex;
    align-items: center;
    justify-content: space-between;
    list-style: none;
    cursor: pointer;
    padding: 12px 14px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: .82rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #141414;
  }
  body.shop-landing .shop-filters__toggle::-webkit-details-marker,
  body.page-shop .shop-filters__toggle::-webkit-details-marker{ display: none; }
  body.shop-landing .shop-filters__toggle::after,
  body.page-shop .shop-filters__toggle::after{
    content: "+";
    font-size: 16px;
    color: #5C5C5C;
  }
  body.shop-landing .shop-filters[open] > .shop-filters__toggle::after,
  body.page-shop .shop-filters[open] > .shop-filters__toggle::after{
    content: "\2212";
  }
  body.shop-landing .shop-filters:not([open]) > .shop-sidebar,
  body.page-shop .shop-filters:not([open]) > .shop-sidebar{
    display: none;
  }
  body.shop-landing .shop-browse-hero h1,
  body.page-shop .shop-browse-hero h1,
  body.shop-landing .shop-hero__inner h1,
  body.page-shop .shop-hero__inner h1,
  body.shop-landing .shop-hero__copy h1,
  body.page-shop .shop-hero__copy h1{
    font-size: clamp(1.5rem, 6vw, 2rem);
  }
}

/* White shop category banners (Shizzle 2026-09-06).
   Desktop 2560×1440 + mobile 1080×1920. Never crop one file to cover both. */
body.shop-landing .shop-hero__banner--white,
body.page-shop .shop-hero__banner--white,
body.shop-landing .shop-browse-hero__banner,
body.page-shop .shop-browse-hero__banner{
  aspect-ratio: auto;
  background: #FFFFFF;
  border-bottom: 1px solid rgba(20,20,20,.08);
  overflow: hidden;
}
body.shop-landing .shop-hero__banner--white picture,
body.page-shop .shop-hero__banner--white picture,
body.shop-landing .shop-browse-hero__banner picture,
body.page-shop .shop-browse-hero__banner picture{
  display: block;
  width: 100%;
}
body.shop-landing .shop-hero__banner--white img,
body.page-shop .shop-hero__banner--white img,
body.shop-landing .shop-browse-hero__banner img,
body.page-shop .shop-browse-hero__banner img{
  width: 100%;
  height: auto;
  max-height: none;
  display: block;
  object-fit: contain;
  object-position: center;
  background: #FFFFFF;
}
@media (max-width: 760px) {
  body.shop-landing .shop-hero__banner--white,
  body.page-shop .shop-hero__banner--white,
  body.shop-landing .shop-browse-hero__banner,
  body.page-shop .shop-browse-hero__banner{
    aspect-ratio: auto;
  }
  body.shop-landing .shop-hero__banner--white img,
  body.page-shop .shop-hero__banner--white img,
  body.shop-landing .shop-browse-hero__banner img,
  body.page-shop .shop-browse-hero__banner img{
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center;
  }
}
@media (min-width: 761px) {
  body.shop-landing .shop-hero__banner--white img,
  body.page-shop .shop-hero__banner--white img,
  body.shop-landing .shop-browse-hero__banner img,
  body.page-shop .shop-browse-hero__banner img{
    width: 100%;
    max-width: 100%;
    max-height: none;
    margin: 0 auto;
  }
}
body.shop-landing .shop-browse-hero__banner,
body.page-shop .shop-browse-hero__banner{
  margin: 0 0 8px;
}
body.shop-landing .shop-cat--tile picture,
body.page-shop .shop-cat--tile picture{
  display: block;
  width: 100%;
}
body.shop-landing .shop-cat--white img,
body.page-shop .shop-cat--white img{
  object-fit: contain;
  background: #FFFFFF;
}
@media (max-width: 760px) {
  body.shop-landing .shop-cat--white img,
  body.page-shop .shop-cat--white img{
    aspect-ratio: 9 / 16;
  }
}

/* Category section header with inline "See all →" link (hub shop landing) */
body.shop-landing .shop-section-head--cat,
body.page-shop .shop-section-head--cat{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 28px;
}
body.shop-landing .shop-section-head--cat > div,
body.page-shop .shop-section-head--cat > div{
  flex: 1;
  min-width: 0;
}
body.shop-landing .shop-section-head--cat > div h2,
body.page-shop .shop-section-head--cat > div h2{
  margin-bottom: 6px;
}
body.shop-landing .shop-see-all,
body.page-shop .shop-see-all{
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .88rem;
  color: #141414;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
  flex-shrink: 0;
  padding-top: 8px;
}
body.shop-landing .shop-see-all:hover,
body.page-shop .shop-see-all:hover{
  color: #141414;
  opacity: 0.65;
}

/* Hub shop landing: 2:1 cover crop for portrait mobile master (2026-09-08).
   White-banner contain rules above apply to all sites; hub needs cover so the
   1080×1920 master fills the 2:1 phone slot without letterboxing. */
@media (max-width: 760px) {
  body.shop-landing[data-ams-site="hub"] .shop-hero__banner--white,
  body.page-shop[data-ams-site="hub"] .shop-hero__banner--white{
    aspect-ratio: 2 / 1;
  }
  body.shop-landing[data-ams-site="hub"] .shop-hero__banner--white img,
  body.page-shop[data-ams-site="hub"] .shop-hero__banner--white img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 82% 38%;
  }
}

/* AMS Pods complementary 2:1 shop phone + 16:9 tiles (2026-09-06).
   Must follow the white-banner contain / 9:16 tile rules so they win. */
@media (max-width: 760px) {
  body.shop-landing[data-ams-site="pods"] .shop-hero__banner--white,
  body.page-shop[data-ams-site="pods"] .shop-hero__banner--white{
    aspect-ratio: 2 / 1;
    background: #FFFFFF;
  }
  body.shop-landing[data-ams-site="pods"] .shop-hero__banner--white img,
  body.page-shop[data-ams-site="pods"] .shop-hero__banner--white img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    background: #FFFFFF;
  }
  body.shop-landing[data-ams-site="pods"] .shop-cat--white img,
  body.page-shop[data-ams-site="pods"] .shop-cat--white img{
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: #141414;
  }
}

/* ── Tom QA fixes 2026-09-08 ────────────────────────────────────────────── */

/* FIX 1 — Desktop hero: image left, copy right (hub /shop/ only).
   Previously the full-width 16:9 banner pushed copy into a separate block
   below ~780px of image. Flex-row tightens them into one visual unit. */
@media (min-width: 761px) {
  body.shop-landing[data-ams-site="hub"] .shop-hero,
  body.page-shop[data-ams-site="hub"] .shop-hero{
    display: flex;
    flex-direction: row;
    align-items: stretch;
    max-height: 360px;
    overflow: hidden;
    border-bottom: 1px solid rgba(20,20,20,.10);
  }
  body.shop-landing[data-ams-site="hub"] .shop-hero__banner--white,
  body.page-shop[data-ams-site="hub"] .shop-hero__banner--white{
    flex: 0 0 58%;
    max-height: none;
    overflow: hidden;
    border-bottom: 0;
    border-right: 1px solid rgba(20,20,20,.08);
  }
  body.shop-landing[data-ams-site="hub"] .shop-hero__banner--white picture,
  body.page-shop[data-ams-site="hub"] .shop-hero__banner--white picture{
    display: block;
    width: 100%;
    height: 100%;
  }
  body.shop-landing[data-ams-site="hub"] .shop-hero__banner--white img,
  body.page-shop[data-ams-site="hub"] .shop-hero__banner--white img{
    width: 100%;
    height: 100%;
    max-height: none;
    margin: 0;
    object-fit: cover;
    object-position: 65% center;
  }
  body.shop-landing[data-ams-site="hub"] .shop-hero__inner,
  body.page-shop[data-ams-site="hub"] .shop-hero__inner{
    flex: 1;
    max-width: none;
    width: auto;
    margin: 0;
    padding: 32px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

/* FIX 2 — Mobile category tiles: clean 3-col wall on phones (~390px).
   Prior pass lost to higher-specificity base
   `.shop-cats:has(.shop-cat--tile) { 2-col }` — must match :has + --browse.
   9 hub categories → 3×3 (no blank last cell). Shorter 4:3 crop vs tall 3:2. */
body.shop-landing .shop-cat--tile picture,
body.page-shop .shop-cat--tile picture{
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
@media (max-width: 760px) {
  body.shop-landing .shop-cats--browse,
  body.page-shop .shop-cats--browse,
  body.shop-landing .shop-cats--browse:has(.shop-cat--tile),
  body.page-shop .shop-cats--browse:has(.shop-cat--tile),
  body.shop-landing .shop-cats:has(.shop-cat--tile).shop-cats--browse,
  body.page-shop .shop-cats:has(.shop-cat--tile).shop-cats--browse{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }
  body.shop-landing .shop-cats--browse .shop-cat--tile,
  body.page-shop .shop-cats--browse .shop-cat--tile{
    min-height: 0;
  }
  body.shop-landing .shop-cats--browse .shop-cat--tile img,
  body.page-shop .shop-cats--browse .shop-cat--tile img,
  body.shop-landing .shop-cats--browse .shop-cat--tile picture,
  body.page-shop .shop-cats--browse .shop-cat--tile picture{
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: center;
    background: #FFFFFF;
  }
  body.shop-landing .shop-cats--browse .shop-cat--tile span,
  body.page-shop .shop-cats--browse .shop-cat--tile span{
    padding: 5px 6px 6px;
    font-size: 0.72rem;
    line-height: 1.15;
  }
}

/* FIX 3 — Curated product-shot media: explicit 4:3 frame + contain so all
   product shots fill a consistent box without large white voids from images
   with mismatched aspect ratios (e.g. 2400×1464 vs 800×800 in same row). */
body.shop-landing .product-shot__media-link,
body.page-shop .product-shot__media-link{
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #FFFFFF;
  border-radius: 8px;
  border: 1px solid rgba(20,20,20,.10);
}
body.shop-landing .product-shot__media-link picture,
body.page-shop .product-shot__media-link picture{
  display: block;
  width: 100%;
  height: 100%;
}
body.shop-landing .product-shot__media-link img,
body.page-shop .product-shot__media-link img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: #FFFFFF;
  border-radius: 0;
  border: 0;
}

/* ── FIX 4 — Category circles: Crutchfield-style product-in-circle ──────── */
body.shop-landing .shop-cat--circle,
body.page-shop .shop-cat--circle{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  min-height: 0;
  border-radius: 0;
  box-shadow: none;
  text-decoration: none;
}
body.shop-landing .shop-cat--circle:hover,
body.page-shop .shop-cat--circle:hover{
  border: 0;
  background: transparent;
  color: #141414;
}
body.shop-landing .shop-cat__circle,
body.page-shop .shop-cat__circle{
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #F5F0E8;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: 15%;
  box-sizing: border-box;
}
body.shop-landing .shop-cat__circle picture,
body.page-shop .shop-cat__circle picture{
  display: block;
  width: 100%;
  height: 100%;
}
body.shop-landing .shop-cat__circle img,
body.page-shop .shop-cat__circle img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
}
body.shop-landing .shop-cat__label,
body.page-shop .shop-cat__label{
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.72rem;
  line-height: 1.25;
  color: #141414;
  text-align: center;
  padding: 0 2px;
}
@media (max-width: 760px){
  body.shop-landing .shop-cats--circles,
  body.page-shop .shop-cats--circles{
    gap: 14px 8px;
  }
}
@media (min-width: 761px){
  body.shop-landing .shop-cats--circles,
  body.page-shop .shop-cats--circles{
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px 20px;
  }
  body.shop-landing .shop-cat__label,
  body.page-shop .shop-cat__label{
    font-size: 0.85rem;
  }
}
@media (min-width: 1200px){
  body.shop-landing .shop-cats--circles,
  body.page-shop .shop-cats--circles{
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* ── FIX 5 — Brand horizontal scroll rail with prev/next arrows ─────────── */
body.shop-landing .shop-brands-rail-wrap,
body.page-shop .shop-brands-rail-wrap{
  display: flex;
  align-items: center;
  gap: 8px;
}
body.shop-landing .shop-brands-rail,
body.page-shop .shop-brands-rail{
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  gap: 8px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  flex: 1;
  min-width: 0;
  padding: 4px 0 8px;
}
body.shop-landing .shop-brands-rail::-webkit-scrollbar,
body.page-shop .shop-brands-rail::-webkit-scrollbar{ display: none; }
body.shop-landing .shop-brands-rail .shop-brand,
body.page-shop .shop-brands-rail .shop-brand{
  flex: 0 0 auto;
  scroll-snap-align: start;
  white-space: nowrap;
}
body.shop-landing .shop-brands-rail .shop-brand span,
body.page-shop .shop-brands-rail .shop-brand span{ display: none; }
body.shop-landing .brands-rail-btn,
body.page-shop .brands-rail-btn{
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(20,20,20,.14);
  border-radius: 50%;
  background: #FFFFFF;
  color: #141414;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
body.shop-landing .brands-rail-btn:hover,
body.page-shop .brands-rail-btn:hover{
  border-color: rgba(20,20,20,.32);
  background: #F5F5F5;
}

/* ── FIX 6 — Product-shot horizontal scroll rail (~2.5 cards on 390px) ──── */
body.shop-landing .product-shot-list--rail,
body.page-shop .product-shot-list--rail{
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  gap: 12px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 6px;
  grid-template-columns: none !important;
}
body.shop-landing .product-shot-list--rail::-webkit-scrollbar,
body.page-shop .product-shot-list--rail::-webkit-scrollbar{ display: none; }
body.shop-landing .product-shot-list--rail .product-shot,
body.page-shop .product-shot-list--rail .product-shot{
  flex: 0 0 38vw;
  max-width: 190px;
  min-width: 110px;
  scroll-snap-align: start;
}
@media (min-width: 761px){
  body.shop-landing .product-shot-list--rail .product-shot,
  body.page-shop .product-shot-list--rail .product-shot{
    flex: 0 0 200px;
    max-width: 220px;
  }
}
/* Rail cards: hide long desc + CTA; short clamped title, no price */
body.shop-landing .product-shot-list--rail figcaption > p:not(.product-shot__sku),
body.page-shop .product-shot-list--rail figcaption > p:not(.product-shot__sku){ display: none; }
body.shop-landing .product-shot-list--rail .product-shot__cta,
body.page-shop .product-shot-list--rail .product-shot__cta{ display: none; }
body.shop-landing .product-shot-list--rail .product-shot h2,
body.page-shop .product-shot-list--rail .product-shot h2{
  font-size: 0.82rem;
  font-weight: 600;
  margin: 6px 0 2px;
  line-height: 1.3;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}


/* ── FIX 7 — Tom QA #342: Featured + On the wall → rails, no prices ─────── */
body.shop-landing #featured .shop-products,
body.page-shop #featured .shop-products,
body.shop-landing #on-the-wall .shop-products,
body.page-shop #on-the-wall .shop-products{
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  gap: 10px;
  padding: 4px 0 12px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  grid-template-columns: none;
}
body.shop-landing #featured .shop-products::-webkit-scrollbar,
body.page-shop #featured .shop-products::-webkit-scrollbar,
body.shop-landing #on-the-wall .shop-products::-webkit-scrollbar,
body.page-shop #on-the-wall .shop-products::-webkit-scrollbar{ display: none; }

body.shop-landing #featured .product-card,
body.page-shop #featured .product-card,
body.shop-landing #on-the-wall .product-card,
body.page-shop #on-the-wall .product-card{
  flex: 0 0 42vw;
  max-width: 200px;
  scroll-snap-align: start;
  min-width: 0;
}
@media (min-width: 761px){
  body.shop-landing #featured .product-card,
  body.page-shop #featured .product-card,
  body.shop-landing #on-the-wall .product-card,
  body.page-shop #on-the-wall .product-card{
    flex-basis: 200px;
  }
}

/* Zack: no prices on landing wall / featured stacks */
body.shop-landing #featured .product-card__price,
body.page-shop #featured .product-card__price,
body.shop-landing #featured .product-card__why,
body.page-shop #featured .product-card__why,
body.shop-landing #featured .product-card__stock,
body.page-shop #featured .product-card__stock,
body.shop-landing #featured [data-reserve],
body.page-shop #featured [data-reserve],
body.shop-landing #on-the-wall .product-card__price,
body.page-shop #on-the-wall .product-card__price,
body.shop-landing #on-the-wall .product-card__why,
body.page-shop #on-the-wall .product-card__why,
body.shop-landing #on-the-wall .product-card__stock,
body.page-shop #on-the-wall .product-card__stock,
body.shop-landing #on-the-wall [data-reserve],
body.page-shop #on-the-wall [data-reserve]{
  display: none !important;
}

body.shop-landing #featured .product-card__media,
body.page-shop #featured .product-card__media,
body.shop-landing #on-the-wall .product-card__media,
body.page-shop #on-the-wall .product-card__media{
  aspect-ratio: 1;
  min-height: 0;
}


/* ── FIX 8 — Tom QA #342: real mobile ~390 — collapse sidebar ───────────── */
@media (max-width: 760px){
  body.shop-landing .shop-browse-layout--home .shop-filters,
  body.page-shop .shop-browse-layout--home .shop-filters{
    max-width: none;
    width: 100%;
    position: static;
    max-height: none;
    overflow: visible;
    border: 1px solid rgba(20,20,20,.12);
  }
  body.shop-landing .shop-browse-layout--home .shop-filters__toggle,
  body.page-shop .shop-browse-layout--home .shop-filters__toggle{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    font-weight: 600;
    cursor: pointer;
  }
  /* Hide sidebar body unless user opens the details */
  body.shop-landing .shop-browse-layout--home .shop-filters:not([open]) > .shop-sidebar,
  body.page-shop .shop-browse-layout--home .shop-filters:not([open]) > .shop-sidebar{
    display: none !important;
  }
  body.shop-landing .shop-browse-layout--home .shop-filters[open] > .shop-sidebar,
  body.page-shop .shop-browse-layout--home .shop-filters[open] > .shop-sidebar{
    display: block;
  }
}
@media (min-width: 761px){
  body.shop-landing .shop-browse-layout--home .shop-filters__toggle,
  body.page-shop .shop-browse-layout--home .shop-filters__toggle{
    display: none;
  }
  body.shop-landing .shop-browse-layout--home .shop-filters > .shop-sidebar,
  body.page-shop .shop-browse-layout--home .shop-filters > .shop-sidebar{
    display: block !important;
  }
}


/* ── FIX 9 — Tom QA #343: alarm/pods mobile 1-col cats + 1-up rails; no sidebar column ─ */
/* Do NOT change hub (#342 PASS keeps mobile 3-up cats). */
@media (max-width: 760px){
  body.shop-landing[data-ams-site="alarm"] .shop-cats--circles,
  body.shop-landing[data-ams-site="pods"] .shop-cats--circles,
  body.page-shop[data-ams-site="alarm"] .shop-cats--circles,
  body.page-shop[data-ams-site="pods"] .shop-cats--circles{
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 16px;
    max-width: 280px;
    margin-inline: auto;
  }
  body.shop-landing[data-ams-site="alarm"] .product-shot-list--rail .product-shot,
  body.shop-landing[data-ams-site="pods"] .product-shot-list--rail .product-shot,
  body.page-shop[data-ams-site="alarm"] .product-shot-list--rail .product-shot,
  body.page-shop[data-ams-site="pods"] .product-shot-list--rail .product-shot,
  body.shop-landing[data-ams-site="alarm"] #featured .product-card,
  body.shop-landing[data-ams-site="pods"] #featured .product-card,
  body.page-shop[data-ams-site="alarm"] #featured .product-card,
  body.page-shop[data-ams-site="pods"] #featured .product-card,
  body.shop-landing[data-ams-site="alarm"] #on-the-wall .product-card,
  body.shop-landing[data-ams-site="pods"] #on-the-wall .product-card,
  body.page-shop[data-ams-site="alarm"] #on-the-wall .product-card,
  body.page-shop[data-ams-site="pods"] #on-the-wall .product-card{
    flex: 0 0 88vw !important;
    max-width: 320px;
  }
}

/* Alarm + pods shop home: never a left sidebar column (filters = collapsed top only) */
body.shop-landing[data-ams-site="alarm"] .shop-browse-layout,
body.shop-landing[data-ams-site="alarm"] .shop-browse-layout--home,
body.shop-landing[data-ams-site="pods"] .shop-browse-layout,
body.shop-landing[data-ams-site="pods"] .shop-browse-layout--home,
body.page-shop[data-ams-site="alarm"] .shop-browse-layout,
body.page-shop[data-ams-site="alarm"] .shop-browse-layout--home,
body.page-shop[data-ams-site="pods"] .shop-browse-layout,
body.page-shop[data-ams-site="pods"] .shop-browse-layout--home{
  grid-template-columns: minmax(0, 1fr) !important;
}
body.shop-landing[data-ams-site="alarm"] .shop-filters,
body.shop-landing[data-ams-site="pods"] .shop-filters,
body.page-shop[data-ams-site="alarm"] .shop-filters,
body.page-shop[data-ams-site="pods"] .shop-filters{
  max-width: none !important;
  width: 100%;
  position: static !important;
}
body.shop-landing[data-ams-site="alarm"] .shop-filters__toggle,
body.shop-landing[data-ams-site="pods"] .shop-filters__toggle,
body.page-shop[data-ams-site="alarm"] .shop-filters__toggle,
body.page-shop[data-ams-site="pods"] .shop-filters__toggle{
  display: flex !important;
}
body.shop-landing[data-ams-site="alarm"] .shop-filters:not([open]) > .shop-sidebar,
body.shop-landing[data-ams-site="pods"] .shop-filters:not([open]) > .shop-sidebar,
body.page-shop[data-ams-site="alarm"] .shop-filters:not([open]) > .shop-sidebar,
body.page-shop[data-ams-site="pods"] .shop-filters:not([open]) > .shop-sidebar{
  display: none !important;
}

/* Catalog wall prices (JS-injected) — never on landing */
body.shop-landing #on-the-wall .product-card__price,
body.page-shop #on-the-wall .product-card__price,
body.shop-landing [data-ams-catalog] .product-card__price,
body.page-shop [data-ams-catalog] .product-card__price,
body.shop-landing #on-the-wall [data-reserve],
body.page-shop #on-the-wall [data-reserve],
body.shop-landing [data-ams-catalog] [data-reserve],
body.page-shop [data-ams-catalog] [data-reserve],
body.shop-landing #on-the-wall .product-card__why,
body.page-shop #on-the-wall .product-card__why,
body.shop-landing #on-the-wall .product-card__stock,
body.page-shop #on-the-wall .product-card__stock{
  display: none !important;
}

body.shop-landing #featured .shop-products,
body.page-shop #featured .shop-products,
body.shop-landing #on-the-wall .shop-products,
body.page-shop #on-the-wall .shop-products{
  display: flex !important;
  flex-wrap: nowrap !important;
  grid-template-columns: none !important;
}

/* ── SLIM HERO + VERTICAL GRIDS (2026-09-09) ───────────────────────────────
   Replaces tall photo banners with compact text bars (~72–96px).
   Kills all horizontal scroll rails — all grids vertical. */

body.shop-landing .shop-hero--slim,
body.page-shop .shop-hero--slim{
  display: block;
  min-height: 0;
  max-height: none;
  flex-direction: unset;
  overflow: visible;
}
/* Zack LOOK v2 white/light slim strips — desktop 2560×192 / mobile 1080×96 */
body.shop-landing .shop-hero--slim .shop-hero__banner,
body.page-shop .shop-hero--slim .shop-hero__banner,
body.shop-landing .shop-hero--slim .shop-hero__banner--slim,
body.page-shop .shop-hero--slim .shop-hero__banner--slim{
  display: block !important;
  width: 100%;
  max-height: 96px;
  background: #FFFFFF;
  border-bottom: 1px solid rgba(20,20,20,.08);
  overflow: hidden;
  aspect-ratio: auto;
}
body.shop-landing .shop-hero--slim .shop-hero__banner picture,
body.page-shop .shop-hero--slim .shop-hero__banner picture{
  display: block;
  width: 100%;
  height: 100%;
}
body.shop-landing .shop-hero--slim .shop-hero__banner img,
body.page-shop .shop-hero--slim .shop-hero__banner img{
  width: 100%;
  height: auto;
  max-height: 96px;
  display: block;
  object-fit: cover;
  object-position: center;
  margin: 0;
}
@media (min-width: 761px){
  body.shop-landing .shop-hero--slim .shop-hero__banner,
  body.page-shop .shop-hero--slim .shop-hero__banner,
  body.shop-landing .shop-hero--slim .shop-hero__banner--slim,
  body.page-shop .shop-hero--slim .shop-hero__banner--slim{
    max-height: 120px;
  }
  body.shop-landing .shop-hero--slim .shop-hero__banner img,
  body.page-shop .shop-hero--slim .shop-hero__banner img{
    width: 100%;
    max-width: none;
    max-height: 120px;
    height: auto;
    margin: 0;
    object-fit: cover;
    object-position: center;
  }
  body.shop-landing[data-ams-site="hub"] .shop-hero--slim,
  body.page-shop[data-ams-site="hub"] .shop-hero--slim{
    display: block;
    flex-direction: unset;
    max-height: none;
    overflow: visible;
  }
}
body.shop-landing .shop-hero--slim .shop-hero__inner,
body.page-shop .shop-hero--slim .shop-hero__inner,
body.shop-landing .shop-hero--slim .shop-hero__copy,
body.page-shop .shop-hero--slim .shop-hero__copy{
  padding: 14px 0 16px;
  max-width: none;
  flex: unset;
  width: auto;
  margin: 0;
  display: block;
  justify-content: unset;
}
body.shop-landing .shop-hero--slim .shop-hero__inner h1,
body.page-shop .shop-hero--slim .shop-hero__inner h1,
body.shop-landing .shop-hero--slim .shop-hero__copy h1,
body.page-shop .shop-hero--slim .shop-hero__copy h1{
  font-size: clamp(1.15rem, 3vw, 1.6rem);
  margin: 0 0 4px;
  line-height: 1.2;
}
body.shop-landing .shop-hero--slim .lead,
body.page-shop .shop-hero--slim .lead{
  font-size: 0.88rem;
  margin: 0;
}
body.shop-landing .shop-hero--slim .hero-actions,
body.page-shop .shop-hero--slim .hero-actions{
  display: none;
}

/* Slim category browse hero */
body.shop-landing .shop-browse-hero--slim,
body.page-shop .shop-browse-hero--slim{
  padding: 16px 0 20px;
}
/* Tighten top gap between slim hero and first browse-wall on desktop */
@media (min-width: 761px){
  body.shop-landing #browse-wall.section,
  body.page-shop #browse-wall.section{
    padding-top: 12px;
  }
}
body.shop-landing .shop-browse-hero--slim .shop-browse-hero__banner,
body.page-shop .shop-browse-hero--slim .shop-browse-hero__banner{
  display: none !important;
  margin: 0;
}

/* Vertical product-shot grid: override horizontal rail */
body.shop-landing .product-shot-list--rail,
body.page-shop .product-shot-list--rail{
  display: grid !important;
  flex-wrap: unset !important;
  overflow-x: visible !important;
  scroll-snap-type: none !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 16px !important;
  padding-bottom: 0 !important;
}
@media (min-width: 761px){
  body.shop-landing .product-shot-list--rail,
  body.page-shop .product-shot-list--rail{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 24px !important;
  }
}
@media (min-width: 1024px){
  body.shop-landing .product-shot-list--rail,
  body.page-shop .product-shot-list--rail{
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}
body.shop-landing .product-shot-list--rail .product-shot,
body.page-shop .product-shot-list--rail .product-shot{
  flex: unset !important;
  max-width: none;
  min-width: 0;
}
body.shop-landing .product-shot-list--rail figcaption > p:not(.product-shot__sku),
body.page-shop .product-shot-list--rail figcaption > p:not(.product-shot__sku){ display: block; }
body.shop-landing .product-shot-list--rail .product-shot__cta,
body.page-shop .product-shot-list--rail .product-shot__cta{ display: inline-block; }
body.shop-landing .product-shot-list--rail .product-shot h2,
body.page-shop .product-shot-list--rail .product-shot h2{
  font-size: 1rem;
  margin: 8px 0 4px;
  display: block;
  overflow: visible;
  -webkit-line-clamp: unset;
  -webkit-box-orient: unset;
}

/* Vertical brands wrap: override horizontal rail */
body.shop-landing .shop-brands-rail,
body.page-shop .shop-brands-rail{
  display: flex !important;
  flex-wrap: wrap !important;
  overflow-x: visible;
  scroll-snap-type: none;
  padding-bottom: 0;
}
body.shop-landing .shop-brands-rail .shop-brand,
body.page-shop .shop-brands-rail .shop-brand{
  flex: 0 0 auto;
  scroll-snap-align: none;
}
body.shop-landing .brands-rail-btn,
body.page-shop .brands-rail-btn{ display: none !important; }

/* Vertical Featured + On-the-wall: override horizontal rails */
body.shop-landing #featured .shop-products,
body.page-shop #featured .shop-products,
body.shop-landing #on-the-wall .shop-products,
body.page-shop #on-the-wall .shop-products{
  display: grid !important;
  flex-wrap: unset !important;
  overflow-x: visible !important;
  scroll-snap-type: none !important;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
  gap: 18px !important;
  padding-bottom: 0 !important;
}
@media (max-width: 760px){
  body.shop-landing #featured .shop-products,
  body.page-shop #featured .shop-products,
  body.shop-landing #on-the-wall .shop-products,
  body.page-shop #on-the-wall .shop-products{
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }
}
body.shop-landing #featured .product-card,
body.page-shop #featured .product-card,
body.shop-landing #on-the-wall .product-card,
body.page-shop #on-the-wall .product-card{
  flex: unset !important;
  max-width: none;
  scroll-snap-align: none;
}

/* ── CATEGORY / BRAND BROWSE: Crutchfield rail LEFT + 4-up small cards (2026-09-10)
   Category pages reuse id="on-the-wall", so landing-rail rules (#342/#344) were
   collapsing the main column to one giant product image. Scope browse walls to
   .shop-browse-layout (not --home): sticky left filters, 4-up desktop grid,
   compact cards, friendly titles visible, vertical scroll only. Site chrome Menu
   / Locations untouched. */
body.shop-landing .shop-browse-layout:not(.shop-browse-layout--home),
body.page-shop .shop-browse-layout:not(.shop-browse-layout--home){
  /* Keep sidebar column first (far left); products fill remaining main column */
  display: grid;
}
@media (min-width: 761px){
  body.shop-landing .shop-browse-layout:not(.shop-browse-layout--home),
  body.page-shop .shop-browse-layout:not(.shop-browse-layout--home){
    grid-template-columns: minmax(180px, 220px) minmax(0, 1fr) !important;
  }
}

body.shop-landing .shop-browse-layout:not(.shop-browse-layout--home) .shop-products,
body.page-shop .shop-browse-layout:not(.shop-browse-layout--home) .shop-products,
body.shop-landing #category-wall .shop-products,
body.page-shop #category-wall .shop-products{
  display: grid !important;
  flex-wrap: unset !important;
  overflow-x: visible !important;
  scroll-snap-type: none !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
  padding: 0 !important;
  width: 100%;
  max-width: 100%;
}
@media (min-width: 761px){
  body.shop-landing .shop-browse-layout:not(.shop-browse-layout--home) .shop-products,
  body.page-shop .shop-browse-layout:not(.shop-browse-layout--home) .shop-products,
  body.shop-landing #category-wall .shop-products,
  body.page-shop #category-wall .shop-products{
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }
}

body.shop-landing .shop-browse-layout:not(.shop-browse-layout--home) .product-card,
body.page-shop .shop-browse-layout:not(.shop-browse-layout--home) .product-card,
body.shop-landing #category-wall .product-card,
body.page-shop #category-wall .product-card{
  flex: unset !important;
  max-width: none !important;
  min-width: 0 !important;
  width: auto !important;
  scroll-snap-align: none !important;
  padding: 10px 10px 12px;
  gap: 6px;
  overflow: hidden;
}

body.shop-landing .shop-browse-layout:not(.shop-browse-layout--home) .product-card__media,
body.page-shop .shop-browse-layout:not(.shop-browse-layout--home) .product-card__media,
body.shop-landing #category-wall .product-card__media,
body.page-shop #category-wall .product-card__media{
  aspect-ratio: 1;
  min-height: 0 !important;
  max-height: none;
}

body.shop-landing .shop-browse-layout:not(.shop-browse-layout--home) .product-card__name,
body.page-shop .shop-browse-layout:not(.shop-browse-layout--home) .product-card__name,
body.shop-landing #category-wall .product-card__name,
body.page-shop #category-wall .product-card__name{
  font-size: 0.92rem;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

body.shop-landing .shop-browse-layout:not(.shop-browse-layout--home) .product-card__brand,
body.page-shop .shop-browse-layout:not(.shop-browse-layout--home) .product-card__brand,
body.shop-landing #category-wall .product-card__brand,
body.page-shop #category-wall .product-card__brand{
  font-size: 10px;
  margin: 0;
}

body.shop-landing .shop-browse-layout:not(.shop-browse-layout--home) .product-card__price,
body.page-shop .shop-browse-layout:not(.shop-browse-layout--home) .product-card__price,
body.shop-landing #category-wall .product-card__price,
body.page-shop #category-wall .product-card__price{
  display: block !important;
  font-size: 0.95rem;
  margin: 0;
}

/* Compact category cards: drop long why/stock copy; keep title + price + CTA */
body.shop-landing .shop-browse-layout:not(.shop-browse-layout--home) .product-card__why,
body.page-shop .shop-browse-layout:not(.shop-browse-layout--home) .product-card__why,
body.shop-landing .shop-browse-layout:not(.shop-browse-layout--home) .product-card__stock,
body.page-shop .shop-browse-layout:not(.shop-browse-layout--home) .product-card__stock,
body.shop-landing #category-wall .product-card__why,
body.page-shop #category-wall .product-card__why,
body.shop-landing #category-wall .product-card__stock,
body.page-shop #category-wall .product-card__stock{
  display: none !important;
}

body.shop-landing .shop-browse-layout:not(.shop-browse-layout--home) [data-reserve],
body.page-shop .shop-browse-layout:not(.shop-browse-layout--home) [data-reserve],
body.shop-landing #category-wall [data-reserve],
body.page-shop #category-wall [data-reserve]{
  display: inline-flex !important;
  align-self: stretch;
  justify-content: center;
  font-size: 0.78rem;
  padding: 8px 10px;
}

body.shop-landing .shop-browse-layout:not(.shop-browse-layout--home) .product-card .card-link,
body.page-shop .shop-browse-layout:not(.shop-browse-layout--home) .product-card .card-link,
body.shop-landing #category-wall .product-card .card-link,
body.page-shop #category-wall .product-card .card-link{
  font-size: 0.78rem;
}

/* ── Sort bar ─────────────────────────────────────────── */
body.shop-landing .shop-sort-bar,
body.page-shop .shop-sort-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin: 0 0 16px;
}
body.shop-landing .shop-sort-bar__label,
body.page-shop .shop-sort-bar__label {
  font-family: var(--font-body, Inter, sans-serif);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #5C5C5C;
  margin-right: 2px;
}
body.shop-landing .shop-sort-btn,
body.page-shop .shop-sort-btn {
  font-family: var(--font-body, Inter, sans-serif);
  font-size: 0.78rem;
  font-weight: 500;
  padding: 5px 12px;
  border-radius: 4px;
  border: 1px solid rgba(20,20,20,.18);
  background: #fff;
  color: #141414;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  white-space: nowrap;
}
body.shop-landing .shop-sort-btn:hover,
body.page-shop .shop-sort-btn:hover {
  border-color: rgba(20,20,20,.36);
  background: #F5F5F5;
}
body.shop-landing .shop-sort-btn--active,
body.shop-landing .shop-sort-btn[aria-pressed="true"],
body.page-shop .shop-sort-btn--active,
body.page-shop .shop-sort-btn[aria-pressed="true"] {
  border-color: #141414;
  background: #141414;
  color: #fff;
}

/* ── Spec pills ───────────────────────────────────────── */
body.shop-landing .product-card__specs,
body.page-shop .product-card__specs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  list-style: none;
  margin: 4px 0 6px;
  padding: 0;
}
body.shop-landing .product-card__spec,
body.page-shop .product-card__spec {
  font-family: var(--font-body, Inter, sans-serif);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #5C5C5C;
  background: rgba(20,20,20,.06);
  border-radius: 3px;
  padding: 2px 7px;
  white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   Ticket redesign, 2026-09-21. Density borrowed from OnlineCarStereo; the skin
   is ours — white canvas, Outfit/Inter, one accent per desk, hairlines not
   shadows. Do not import their palette, badges or layout.

   Three things this adds to a browse card:
     1. a plain-English type line under the model number
     2. spec pills on every category, not just speakers
     3. a fixed baseline row, so prices align across a row regardless of how
        many pills a card carries
   --------------------------------------------------------------------------- */

/* 4:3, not 1:1. 120 of 191 product photos are landscape (53 are 750x457) and a
   square plate letterboxes them with white bars top and bottom. */
body.shop-landing .shop-browse-layout .product-card__media,
body.page-shop .shop-browse-layout .product-card__media{
  aspect-ratio: 4 / 3;
  min-height: 0;
  padding: 12px;
}

/* The card becomes a column with the pills as the flexible row, so the price and
   CTAs pin to the bottom edge and line up across the grid. */
body.shop-landing .shop-browse-layout .product-card,
body.page-shop .shop-browse-layout .product-card{
  gap: 8px;
}
body.shop-landing .shop-browse-layout .product-card__specs,
body.page-shop .shop-browse-layout .product-card__specs{
  flex: 1 0 auto;
  align-content: flex-start;
}

body.shop-landing .product-card__type,
body.page-shop .product-card__type{
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 13px;
  line-height: 1.35;
  color: #5C5C5C;
  margin: -2px 0 0;
}

/* Stacked, not side-by-side. "Call to confirm" is long enough that sharing a
   row with the install link wrapped it to two lines and knocked the price off
   the baseline its neighbours sat on. Stacked, a priced card and a
   call-to-confirm card are the same height. */
body.shop-landing .product-card__baseline,
body.page-shop .product-card__baseline{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  margin-top: 2px;
  padding-top: 10px;
  border-top: 1px solid rgba(20, 20, 20, 0.10);
}
body.shop-landing .product-card__baseline .product-card__price,
body.page-shop .product-card__baseline .product-card__price{
  font-size: 17px;
}

body.shop-landing .product-card__install,
body.page-shop .product-card__install{
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  color: var(--cta);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  white-space: nowrap;
}
body.shop-landing .product-card__install:hover,
body.page-shop .product-card__install:hover{ color: var(--cta-hover); }

body.shop-landing .product-card__contact,
body.page-shop .product-card__contact{
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
}
body.shop-landing .product-card__contact .card-link,
body.page-shop .product-card__contact .card-link{
  font-size: 12.5px;
}

body.shop-landing .product-card__pickup,
body.page-shop .product-card__pickup{
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 11.5px;
  letter-spacing: .01em;
  color: #767676;
  margin: 0;
}

@media (max-width: 760px){
  body.shop-landing .product-card__type,
  body.page-shop .product-card__type{ font-size: 12.5px; }
  body.shop-landing .product-card__contact,
  body.page-shop .product-card__contact{ flex-direction: column; gap: 2px; }
}

/* Two lines reserved: "6x9 coaxial car speakers" is one line, "6.5 / 6.75\"
   coaxial car speakers" is two. Reserving both keeps the pills — and therefore
   the price — on a shared baseline across the row. */
body.shop-landing .shop-browse-layout .product-card__type,
body.page-shop .shop-browse-layout .product-card__type{
  min-height: 2.7em;
}
@media (max-width: 760px){
  body.shop-landing .shop-browse-layout .product-card__type,
  body.page-shop .shop-browse-layout .product-card__type{ min-height: 0; }
}

/* Category tiles with the art that was already shot for them. Text-in-a-box was
   the cheapest-looking element on the shop; these are the same image tiles
   OnlineCarStereo leads with, on our white canvas with our accent. */
body.shop-landing .shop-cat--art,
body.page-shop .shop-cat--art{
  display: grid;
  grid-template-rows: auto auto;
  gap: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(20, 20, 20, 0.12);
  border-radius: 8px;
  background: #FFFFFF;
  text-decoration: none;
  transition: border-color .15s ease;
}
body.shop-landing .shop-cat--art:hover,
body.page-shop .shop-cat--art:hover{ border-color: var(--cta); }

body.shop-landing .shop-cat__media,
body.page-shop .shop-cat__media{
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #F2F2F2;
}
body.shop-landing .shop-cat__media img,
body.page-shop .shop-cat__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}
body.shop-landing .shop-cat--art:hover .shop-cat__media img,
body.page-shop .shop-cat--art:hover .shop-cat__media img{ transform: scale(1.03); }

body.shop-landing .shop-cat__label,
body.page-shop .shop-cat__label{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 15px;
  color: #141414;
  border-top: 1px solid rgba(20, 20, 20, 0.08);
}

@media (prefers-reduced-motion: reduce){
  body.shop-landing .shop-cat__media img,
  body.page-shop .shop-cat__media img{ transition: none; }
  body.shop-landing .shop-cat--art:hover .shop-cat__media img,
  body.page-shop .shop-cat--art:hover .shop-cat__media img{ transform: none; }
}

/* Vehicle fitment on a card. A sentence, deliberately — it carries a hedge
   ("select") and a call-to-confirm, and both matter more than brevity. */
body.shop-landing .product-card__fits,
body.page-shop .product-card__fits{
  font-family: var(--font-body);
  font-size: 12.5px;
  line-height: 1.4;
  color: #3D3D3D;
  background: #F5F5F5;
  border-radius: 4px;
  padding: 7px 9px;
  margin: 0;
}

/* ---------------------------------------------------------------------------
   Chat launcher vs. card CTAs, mobile. On a 2-up grid the "Talk to me" speech
   bubble is ~180px wide and sits fixed over the right-hand column — landing
   squarely on that card's "Reserve for pickup" button and its Call / Text
   links, which makes the primary CTA untappable, not just untidy.

   Scoped to shop pages on purpose: ams-chat.css is shared by all six sites and
   the collision is specific to the product grid.
   --------------------------------------------------------------------------- */
@media (max-width: 760px){
  /* The label is the part that actually blocks the button. */
  body.shop-landing .ams-chat #ams-ai-bot .speech,
  body.page-shop .ams-chat #ams-ai-bot .speech{
    display: none !important;
  }
  /* 74px -> 56px, the usual floating-action size, anchored bottom-right so it
     tucks into the corner instead of sitting across a card. */
  body.shop-landing .ams-chat-launcher,
  body.page-shop .ams-chat-launcher{
    transform: scale(0.76);
    transform-origin: bottom right;
  }
}

/* ---------------------------------------------------------------------------
   Art tiles need more room than text tiles did. .shop-cats--browse forces a
   3-up grid with a 6px gap — fine for a label in a box, far too tight for
   photography on a 390px phone (~120px tiles, and "Processors & Line Output
   Converters" wrapping to four lines). Two up on mobile, and every caption
   reserves the same two lines so the tiles bottom out level.
   --------------------------------------------------------------------------- */
@media (max-width: 760px){
  body.shop-landing .shop-cats--browse:has(.shop-cat--art),
  body.page-shop .shop-cats--browse:has(.shop-cat--art){
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
}
body.shop-landing .shop-cat--art .shop-cat__label,
body.page-shop .shop-cat--art .shop-cat__label{
  min-height: 2.9em;
  align-items: flex-start;
}
body.shop-landing .shop-cat--art .shop-cat__label,
body.page-shop .shop-cat--art .shop-cat__label{
  display: flex;
  gap: 6px;
}
body.shop-landing .shop-cat--art .shop-cat-count,
body.page-shop .shop-cat--art .shop-cat-count{
  flex: 0 0 auto;
  margin-left: auto;
  color: #5C5C5C;
  font-weight: 500;
}


/* ---- Buy now, pay later tag ------------------------------------------------
   A squared corner tag rather than the starburst it replaces: it anchors to the
   tile corner instead of floating over the product, and it reads as a commerce
   tag rather than a sale sticker.

   It is a real link to /payment-plan/, which is why the tile markup is wrapped
   -- the tile itself is an <a> and anchors cannot nest.

   Black on yellow, matching the site's gold accent family. Kept on phones: it
   is anchored in the corner, so unlike the starburst it does not cover the
   product at tile size. */
/* The PDP image box is the tag's positioning context. */
body.shop-landing .shop-pdp__media,
body.page-shop .shop-pdp__media{
  position: relative;
  container-type: inline-size;
}
/* The PDP image box is roomier than a tile, so the tag can read properly there
   rather than sitting at the clamp floor. */
body.shop-landing .shop-pdp__media .pay-later-tag,
body.page-shop .shop-pdp__media .pay-later-tag{
  font-size: clamp(10px, 4cqw, 13px);
  padding: 0.62em 0.85em;
  letter-spacing: 0.04em;
}


body.shop-landing .shop-cat__media,
body.page-shop .shop-cat__media{
  position: relative;
  container-type: inline-size;
}

body.shop-landing .pay-later-tag,
body.page-shop .pay-later-tag{
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  background: #0A0A0A;
  color: #FFC629;
  font-weight: 800;
  font-size: clamp(7px, 2.1cqw, 11px);
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  padding: 0.55em 0.7em;
  border-bottom-left-radius: 8px;
}

body.shop-landing .pay-later-tag:hover,
body.page-shop .pay-later-tag:hover,
body.shop-landing .pay-later-tag:focus-visible,
body.page-shop .pay-later-tag:focus-visible{
  background: #FFC629;
  color: #0A0A0A;
}

@media (max-width: 479px){
  body.shop-landing .pay-later-tag,
  body.page-shop .pay-later-tag{
    padding: 0.6em 0.75em;
    letter-spacing: 0.03em;
  }
}

/* ---- Category page density -------------------------------------------------
   Measured on a 390x844 phone before this block: banner 942px tall, h1 at
   833px, first product card at 1132px, 0 cards in the first screen.

   The mobile banner asset is 1080x1920 (9:16 portrait), so at full width it is
   taller than the viewport on its own. Capping the height and cropping toward
   the top keeps the product visible and gets the grid above the fold. */
@media (max-width: 760px){
  body.shop-landing .shop-browse-hero__banner,
  body.page-shop .shop-browse-hero__banner{
    max-height: 140px;
    overflow: hidden;
    border-radius: 10px;
  }
  body.shop-landing .shop-browse-hero__banner img,
  body.page-shop .shop-browse-hero__banner img{
    width: 100%;
    height: 140px;
    object-fit: cover;
    /* the product sits in the upper two thirds of these assets; the lower third
       is the baked-in wordmark and dead space */
    object-position: 50% 32%;
    display: block;
  }
  body.shop-landing .shop-browse-hero.section,
  body.page-shop .shop-browse-hero.section{
    padding-top: 10px;
    padding-bottom: 8px;
  }
  body.shop-landing .shop-browse-hero h1,
  body.page-shop .shop-browse-hero h1{
    font-size: 1.35rem;
    line-height: 1.16;
    margin: 8px 0 4px;
  }
  body.shop-landing .shop-browse-hero p,
  body.page-shop .shop-browse-hero p{
    margin: 0 0 8px;
    font-size: 0.95rem;
  }
  /* the grid itself: tighter gutters, less card padding, more product per screen */
  body.shop-landing .shop-browse-layout,
  body.page-shop .shop-browse-layout{ gap: 12px; }

  body.shop-landing .product-grid,
  body.page-shop .product-grid{
    gap: 10px;
  }
  body.shop-landing .product-card,
  body.page-shop .product-card{
    padding: 10px;
  }
  body.shop-landing .product-card__media,
  body.page-shop .product-card__media{
    margin-bottom: 8px;
  }
}


/* The Buy now, pay later line in the product buy box. Small and quiet -- the
   Reserve button is the primary action; this is the answer to "can I pay over
   time", which is why it names the four lenders rather than just linking. */
body.shop-landing .product-card__paylater,
body.page-shop .product-card__paylater{
  margin: 4px 0 0;
  font-size: 0.82rem;
  line-height: 1.35;
  color: #5A5A5A;
}
body.shop-landing .product-card__paylater a,
body.page-shop .product-card__paylater a{
  font-weight: 700;
  color: #0A0A0A;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 2px;
  text-decoration-color: #FFC629;
}
body.shop-landing .product-card__paylater a:hover,
body.page-shop .product-card__paylater a:hover{
  text-decoration-color: #0A0A0A;
}


/* ---- The dense ticket -------------------------------------------------------
   Matched to the information density of onlinecarstereo's product ticket: a
   composed spec sentence under the name, then spec bullets in two columns, then
   the money and the actions. The sentence and the bullets come from the catalog
   spec fields, so they say something different on every ticket that has data --
   which is the point. 166 of 167 products currently share one description.

   Bullets are two columns because a single column of five short specs wastes
   the width and pushes the price below the fold on a phone. */
body.shop-landing .product-card__type--spec,
body.page-shop .product-card__type--spec{
  font-size: 0.83rem;
  line-height: 1.38;
  color: #3C3833;
  margin: 2px 0 8px;
}

body.shop-landing .product-card__speclist,
body.page-shop .product-card__speclist{
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px 12px;
}
body.shop-landing .product-card__speclist li,
body.page-shop .product-card__speclist li{
  position: relative;
  padding-left: 11px;
  font-size: 0.78rem;
  line-height: 1.5;
  color: #3C3833;
  font-variant-numeric: tabular-nums;
}
body.shop-landing .product-card__speclist li::before,
body.page-shop .product-card__speclist li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 4px;
  height: 4px;
  background: #101010;
}

/* Two columns only when the CARD is wide enough, not when the viewport is. At
   4-up on a desktop the card is ~190px and two columns wrap every bullet onto
   three lines; the viewport media query I first wrote never caught that. */
body.shop-landing .product-card,
body.page-shop .product-card{ container-type: inline-size; }

body.shop-landing .product-card__speclist,
body.page-shop .product-card__speclist{ grid-template-columns: minmax(0, 1fr); }

@container (min-width: 250px){
  body.shop-landing .product-card__speclist,
  body.page-shop .product-card__speclist{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* The tag needs a positioning context on the ticket image too, not just the PDP. */
body.shop-landing .product-card__media,
body.page-shop .product-card__media{
  position: relative;
  container-type: inline-size;
}


/* The pickup promise, promoted above the Reserve button. This is the shop's
   entire positioning -- no shipping, come and collect it in Carson -- and it
   was previously grey 11px type sitting below the lenders. Green reads as
   availability rather than restriction, which is the honest framing: the stock
   is here, today. */
body.shop-landing .product-card__pickup,
body.page-shop .product-card__pickup{
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 0 0 8px;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.35;
  color: #0F7A3D;
}
body.shop-landing .product-card__pickup span,
body.page-shop .product-card__pickup span{
  font-size: 0.78em;
  flex: none;
}


/* Tiles must line up as a grid. The label min-height was 2.9em, which fits two
   lines but not three -- "Processors & Line Output Converters" wraps to three
   and made its row taller than the others. Stretching the tile to the row and
   pinning the label to the bottom keeps every image the same size regardless of
   how long the category name is. */
body.shop-landing .shop-cats--browse:has(.shop-cat--art),
body.page-shop .shop-cats--browse:has(.shop-cat--art){
  align-items: stretch;
}
body.shop-landing .shop-cat--art,
body.page-shop .shop-cat--art{
  display: flex;
  flex-direction: column;
  height: 100%;
}
/* flex: none is load-bearing -- without it the aspect-ratio media box collapses
   to zero height inside the flex column and every tile loses its photo. */
body.shop-landing .shop-cat--art .shop-cat__media,
body.page-shop .shop-cat--art .shop-cat__media{
  flex: none;
  width: 100%;
}
body.shop-landing .shop-cat--art .shop-cat__label,
body.page-shop .shop-cat--art .shop-cat__label{
  margin-top: auto;
  min-height: 3.6em;
}


/* Compact card for the related rails. The full ticket belongs where someone is
   shopping a category; in a "you might also need this" rail it buries the next
   product under a second sales pitch. */
body.shop-landing .product-card--compact,
body.page-shop .product-card--compact{
  padding: 10px;
}
body.shop-landing .product-card--compact .product-card__name,
body.page-shop .product-card--compact .product-card__name{
  font-size: 0.95rem;
  line-height: 1.22;
  margin: 2px 0 4px;
}
body.shop-landing .product-card--compact .product-card__price,
body.page-shop .product-card--compact .product-card__price{
  margin: 0;
  font-size: 1rem;
}
/* The pay-later tag is for the ticket, not for a thumbnail in a rail. */
body.shop-landing .product-card--compact .pay-later-tag,
body.page-shop .product-card--compact .pay-later-tag{ display: none; }

/* ---------------------------------------------------------------------------
   Compact category / brand header.

   These pages used to open with a 1792x1008 banner at width:100%, which is
   about 810px tall on a 1440 laptop — half the viewport before a single product
   was visible. Replaced by a light band: a small real product photo beside the
   title, sized so the first row of products is above the fold.

   Light on purpose. The product photography is shot on white, so a dark hero
   fought every tile underneath it.
--------------------------------------------------------------------------- */
body.shop-landing .shop-browse-hero--compact.section,
body.page-shop .shop-browse-hero--compact.section{
  background: #FFFFFF;
  border-bottom: 1px solid rgba(20,20,20,.08);
  padding: 14px 0 16px;
}

.shop-cat-head{
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.2vw, 24px);
}

.shop-cat-head__media{
  flex: none;                 /* an aspect-ratio box in a flex row collapses without this */
  width: clamp(64px, 9vw, 104px);
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  border: 1px solid rgba(20,20,20,.08);
  border-radius: 10px;
  padding: 8px;
  box-sizing: border-box;
}

.shop-cat-head__media img{
  /* Intrinsic sizing bounded by the box, NOT width/height:100%. A percentage
     height needs a definite parent height, and the parent's height here comes
     from aspect-ratio inside a flex row — which does not reliably resolve, so
     the image painted at zero height and the box looked empty. */
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;        /* catalog shots vary in aspect; never crop a product */
  display: block;
}

.shop-cat-head__copy{ min-width: 0; }
.shop-cat-head__copy > :last-child{ margin-bottom: 0; }

/* The shared .shop-browse-hero h1 rule runs to 3.25rem, which was scaled for a
   full-bleed hero. Bring it down to band height without touching that rule. */
body.shop-landing .shop-browse-hero--compact h1,
body.page-shop .shop-browse-hero--compact h1{
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  margin: 0 0 4px;
}

body.shop-landing .shop-browse-hero--compact .shop-cat-head__copy p,
body.page-shop .shop-browse-hero--compact .shop-cat-head__copy p{
  margin: 0;
  color: #5C5C5C;
  font-size: .95rem;
  line-height: 1.45;
}

@media (max-width: 600px){
  .shop-cat-head{ gap: 12px; }
  .shop-cat-head__media{ width: 60px; padding: 6px; border-radius: 8px; }
  body.shop-landing .shop-browse-hero--compact .shop-cat-head__copy p,
  body.page-shop .shop-browse-hero--compact .shop-cat-head__copy p{
    font-size: .9rem;
  }
}

/* Car-stereo subcategory tiles. Unlike size tiles, these stay visible on a phone. */
body.shop-landing .shop-subcat-tiles,
body.page-shop .shop-subcat-tiles{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 0 0 20px;
}
@media (min-width: 761px){
  body.shop-landing .shop-subcat-tiles,
  body.page-shop .shop-subcat-tiles{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
body.shop-landing .shop-subcat-tile,
body.page-shop .shop-subcat-tile{
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 10px;
  background: #fff;
  border: 1px solid rgba(20,20,20,.12);
  border-radius: 8px;
  color: #141414;
  text-decoration: none;
}
body.shop-landing .shop-subcat-tile:hover,
body.page-shop .shop-subcat-tile:hover{
  border-color: rgba(20,20,20,.28);
}
body.shop-landing .shop-subcat-tile__media,
body.page-shop .shop-subcat-tile__media{
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  background: #F5F5F5;
  border-radius: 4px;
  overflow: hidden;
}
body.shop-landing .shop-subcat-tile__media img,
body.page-shop .shop-subcat-tile__media img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}
body.shop-landing .shop-subcat-tile__copy,
body.page-shop .shop-subcat-tile__copy{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
body.shop-landing .shop-subcat-tile__label,
body.page-shop .shop-subcat-tile__label{
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1rem;
}
body.shop-landing .shop-subcat-tile__count,
body.page-shop .shop-subcat-tile__count{
  color: #5C5C5C;
  font-size: .85rem;
}

/* Retrofit radios repeat under each vehicle. The outer list is a stack of
   sections, not a product grid. */
body.shop-landing .shop-browse-layout:not(.shop-browse-layout--home) .shop-products.shop-products--grouped,
body.page-shop .shop-browse-layout:not(.shop-browse-layout--home) .shop-products.shop-products--grouped,
body.shop-landing #category-wall .shop-products.shop-products--grouped,
body.page-shop #category-wall .shop-products.shop-products--grouped{
  display: block !important;
  grid-template-columns: none !important;
}
body.shop-landing .shop-vehicle,
body.page-shop .shop-vehicle{
  margin: 0 0 28px;
}
body.shop-landing .shop-vehicle__title,
body.page-shop .shop-vehicle__title{
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.35rem;
  margin: 0 0 6px;
  color: #141414;
}
body.shop-landing .shop-vehicle__note,
body.page-shop .shop-vehicle__note{
  margin: 0 0 12px;
  max-width: 62ch;
  color: #5C5C5C;
  font-size: .95rem;
  line-height: 1.45;
}