/* Shop landing — WHITE e-commerce canvas. Ahmad, 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 keep dark chrome.
   Tokens stay on body.shop-landing / body.page-shop only. */
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%; }
  /* Phone crop is already 2:1. Contain so the stacked AMS / Bagger / Stereo
     script cannot lose a letter if the box is a pixel off 2:1. */
  body.shop-landing[data-ams-site="pods"] .shop-hero__banner img, body.page-shop[data-ams-site="pods"] .shop-hero__banner img{
    object-fit: contain;
    object-position: 50% 50%;
    background: #0A1220;
  }
}
@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 .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;
}