/* 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;
}