/* Network shop — gardenia page wash + 3D product-ticket lift.
   Hub + sister shops (beats, alarm, tint, pods).
   Applied on body.shop-landing / body.page-shop wherever this sheet is linked.
   Do not copy into shop-landing.css (lockstep). Do not style .offer-card. */

html:has(body.shop-landing),
html:has(body.page-shop){
  min-height: 100%;
  background-color: #F8FBF8;
}

body.shop-landing,
body.page-shop{
  --ams-gardenia-deep: #F3F8F4;
  --ams-gardenia-hold: #F7FAF7;
  --ams-gardenia-mid: #FAFCFA;
  --ams-gardenia-high: #FDFEFD;
  --ams-gardenia-white: #FFFFFF;
  min-height: 100%;
  background-color: var(--ams-gardenia-mid);
  background-image: linear-gradient(
    to top right,
    var(--ams-gardenia-deep) 0%,
    var(--ams-gardenia-hold) 28%,
    var(--ams-gardenia-mid) 55%,
    var(--ams-gardenia-high) 80%,
    var(--ams-gardenia-white) 100%
  );
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
}

@media (max-width: 760px){
  body.shop-landing,
  body.page-shop{
    background-attachment: scroll;
  }
}

/* Let the page wash read through shop chrome and bands. Cards stay white. */
body.shop-landing .section,
body.page-shop .section,
body.shop-landing .section-alt,
body.page-shop .section-alt,
body.shop-landing .shop-hero,
body.page-shop .shop-hero,
body.shop-landing .shop-hero--simulator,
body.page-shop .shop-hero--simulator,
body.shop-landing .shop-hero--slim,
body.page-shop .shop-hero--slim,
body.shop-landing .shop-home-shell,
body.page-shop .shop-home-shell,
body.shop-landing .shop-home-hero,
body.page-shop .shop-home-hero,
body.shop-landing .page-short-band,
body.page-shop .page-short-band,
body.shop-landing .product-shot-band,
body.page-shop .product-shot-band,
body.shop-landing .shop-claim,
body.page-shop .shop-claim,
body.shop-landing .shop-pickup,
body.page-shop .shop-pickup,
body.shop-landing .shop-build-promo,
body.page-shop .shop-build-promo{
  background: transparent;
}

body.shop-landing .topbar,
body.page-shop .topbar,
body.shop-landing header.site-header,
body.page-shop header.site-header,
body.shop-landing footer.site-footer,
body.page-shop footer.site-footer,
body.shop-landing .mobile-cta-bar,
body.page-shop .mobile-cta-bar{
  background: color-mix(in srgb, var(--ams-gardenia-white) 55%, transparent);
  backdrop-filter: blur(10px);
}

@media (max-width: 1120px){
  body.shop-landing nav.main-nav.open,
  body.page-shop nav.main-nav.open{
    background: color-mix(in srgb, var(--ams-gardenia-white) 92%, transparent);
  }
}

/* Room for ticket shadows; do not clip the lift. */
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{
  overflow: visible;
}

body.shop-landing .shop-products,
body.page-shop .shop-products,
body.shop-landing #category-wall .shop-products,
body.page-shop #category-wall .shop-products,
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{
  padding: 18px 12px 40px !important;
  gap: 22px !important;
  perspective: 1100px;
}

@media (max-width: 760px){
  body.shop-landing .shop-products,
  body.page-shop .shop-products,
  body.shop-landing #category-wall .shop-products,
  body.page-shop #category-wall .shop-products{
    padding: 14px 6px 36px !important;
    gap: 16px !important;
  }
}

/* Tickets — white cards clearly lifted off the gardenia wash. */
body.shop-landing .product-card,
body.page-shop .product-card{
  position: relative;
  z-index: 1;
  background: #FFFFFF;
  border: 1px solid rgba(24, 48, 28, 0.12);
  transform: translate3d(0, -14px, 18px);
  transform-style: preserve-3d;
  box-shadow:
    0 1px 1px rgba(16, 36, 20, 0.10),
    0 4px 8px rgba(16, 36, 20, 0.08),
    0 16px 28px rgba(16, 36, 20, 0.14),
    0 40px 64px rgba(16, 36, 20, 0.18);
  transition: transform .22s ease, box-shadow .22s ease;
}

body.shop-landing .product-card:hover,
body.page-shop .product-card:hover{
  z-index: 2;
  transform: translate3d(0, -22px, 26px);
  box-shadow:
    0 2px 3px rgba(16, 36, 20, 0.12),
    0 8px 14px rgba(16, 36, 20, 0.10),
    0 22px 36px rgba(16, 36, 20, 0.16),
    0 52px 80px rgba(16, 36, 20, 0.20);
}

@media (prefers-reduced-motion: reduce){
  body.shop-landing .product-card,
  body.page-shop .product-card,
  body.shop-landing .product-card:hover,
  body.page-shop .product-card:hover{
    transition: none;
    transform: none;
  }
}