/* PopShop™ — PS-7426J9J storefront page-background + intro presentation
   Canonical page-background consumer. Page backgrounds sit behind the complete
   storefront. Hero media remains a separate explicit template choice. */
#shopBgLayer{
  position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;
  background:var(--ps-bg,#0b0b0f)
}
#shopBgLayer video,#shopBgLayer img{
  width:100%;height:100%;object-fit:cover;display:block
}
/* Adaptive dark/light gradient replaces the old flat black wash. */
#shopBgLayer::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,
      rgb(0 0 0 / calc(var(--ps-bg-overlay,.35) * .42)) 0%,
      rgb(0 0 0 / calc(var(--ps-bg-overlay,.35) * .66)) 42%,
      rgb(0 0 0 / calc(var(--ps-bg-overlay,.35) * 1.05)) 100%),
    linear-gradient(90deg,rgb(0 0 0 / .16),transparent 50%,rgb(0 0 0 / .10))
}
html[data-customer-appearance="light"] #shopBgLayer::after,
html[data-appearance="light"] #shopBgLayer::after{
  background:
    linear-gradient(180deg,
      rgb(255 255 255 / calc(var(--ps-bg-overlay,.35) * .54)) 0%,
      rgb(255 255 255 / calc(var(--ps-bg-overlay,.35) * .70)) 46%,
      rgb(245 245 242 / calc(var(--ps-bg-overlay,.35) * .88)) 100%),
    linear-gradient(90deg,rgb(255 255 255 / .14),transparent 52%,rgb(0 0 0 / .04))
}
/* Retire the old independent overlay paint. The canonical layer above owns it. */
#shopBgOverlay{background:transparent!important}
html[data-ps-page-background] body{background:transparent}
html[data-ps-page-background] #shopApp{background:transparent}
html[data-ps-page-background] .shop-body{background:transparent}

/* Header and fixed customer CTA/action surfaces retain their own backgrounds
   for legibility; content remains naturally over the background media. */

#psShopIntroVideo{
  position:fixed;inset:0;z-index:12000;background:#000;display:flex;
  align-items:center;justify-content:center;
  padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)
}
#psShopIntroVideo video{width:100%;height:100%;object-fit:contain;background:#000}
.ps-intro-skip{
  position:absolute!important;inset:auto 16px calc(env(safe-area-inset-bottom,0px) + 18px) auto!important;
  width:auto!important;height:40px!important;min-width:58px!important;min-height:40px!important;max-height:40px!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;align-self:auto!important;
  border:1px solid rgba(255,255,255,.22);background:rgba(0,0,0,.58);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:#fff;border-radius:999px;padding:0 14px!important;
  font:700 12px var(--ps-font,system-ui);line-height:1!important;white-space:nowrap;cursor:pointer;box-sizing:border-box
}
.ps-intro-meta{
  position:absolute;left:16px;right:82px;
  bottom:calc(env(safe-area-inset-bottom,0px) + 18px);padding:12px 14px;
  border-radius:14px;background:linear-gradient(90deg,rgba(0,0,0,.72),rgba(0,0,0,.24));
  backdrop-filter:blur(8px);color:#fff;display:flex;flex-direction:column;gap:3px;
  pointer-events:none
}
.ps-intro-meta strong{font-size:15px}.ps-intro-meta span{font-size:12px;color:rgba(255,255,255,.76)}
@media(prefers-reduced-motion:reduce){#psShopIntroVideo video{animation:none}}

/* ═══════════════════════════════════════════════════════════════
   PS-8938 — STANDARD POPSHOP PRESENTATION
   Applies only when PSPresentationRuntime marks the canonical storefront as
   standard. Custom/template storefronts do not receive these classes.
   ═══════════════════════════════════════════════════════════════ */
#shopApp.ps-standard-products,
#shopApp.ps-standard-services,
#shopApp.ps-standard-hybrid{--ps-standard-font:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
#shopApp.ps-standard-products #ps3901Hero,
#shopApp.ps-standard-services #ps3901Hero,
#shopApp.ps-standard-hybrid #ps3901Hero{font-family:var(--ps-standard-font);isolation:isolate;overflow:hidden;border-bottom:1px solid color-mix(in srgb,var(--ps-text) 9%,transparent)}
#shopApp.ps-standard-products .ps-hero-brand-art,
#shopApp.ps-standard-services .ps-hero-brand-art,
#shopApp.ps-standard-hybrid .ps-hero-brand-art{display:none!important}
#shopApp.ps-standard-products .ps-hero-logo,
#shopApp.ps-standard-services .ps-hero-logo,
#shopApp.ps-standard-hybrid .ps-hero-logo{width:58px;height:58px;flex:0 0 58px;border-radius:16px;background:color-mix(in srgb,var(--ps-surface) 82%,transparent);border:1px solid color-mix(in srgb,var(--ps-text) 12%,transparent);box-shadow:0 10px 34px rgba(0,0,0,.22)}
#shopApp.ps-standard-products .ps-hero-logo img,
#shopApp.ps-standard-services .ps-hero-logo img,
#shopApp.ps-standard-hybrid .ps-hero-logo img{object-fit:contain}
#shopApp.ps-standard-products .ps-hero-name,
#shopApp.ps-standard-services .ps-hero-name,
#shopApp.ps-standard-hybrid .ps-hero-name{font-family:var(--ps-standard-font);font-weight:820;letter-spacing:-.035em;text-wrap:balance}

/* Product standard: cinematic but intentionally restrained so premium custom
   templates remain visibly more expressive. */
#shopApp.ps-standard-products #ps3901Hero.has-cover{height:clamp(300px,44vw,430px);min-height:300px}
#shopApp.ps-standard-products #ps3901Hero.no-cover{min-height:250px;background:
  radial-gradient(circle at 78% 14%,color-mix(in srgb,var(--ps-primary) 20%,transparent),transparent 34%),
  linear-gradient(155deg,color-mix(in srgb,var(--ps-surface) 94%,#050507),var(--ps-bg))}
#shopApp.ps-standard-products .ps-cover-scrim{background:
  linear-gradient(90deg,rgba(0,0,0,.66),rgba(0,0,0,.14) 60%,rgba(0,0,0,.34)),
  linear-gradient(0deg,rgba(0,0,0,.86),transparent 58%)}
#shopApp.ps-standard-products .ps-hero-identity{position:absolute;left:0;right:0;bottom:0;z-index:4;align-items:center;padding:18px clamp(16px,4vw,34px) 22px;background:linear-gradient(0deg,rgba(5,5,8,.82),rgba(5,5,8,.46) 60%,transparent);backdrop-filter:blur(2px)}
#shopApp.ps-standard-products .ps-hero-name{font-size:clamp(25px,4.5vw,38px)}
#shopApp.ps-standard-products #ps3901Featured{margin-top:12px}
#shopApp.ps-standard-products .ps-feat-card{border-radius:16px;border:1px solid color-mix(in srgb,var(--ps-text) 9%,transparent);background:color-mix(in srgb,var(--ps-surface) 95%,var(--ps-primary) 5%);box-shadow:0 10px 30px rgba(0,0,0,.16)}
#shopApp.ps-standard-products .ps-feat-card-badge{border-radius:999px}
#shopApp.ps-standard-products #psCategoryNav{background:color-mix(in srgb,var(--ps-bg) 88%,transparent);backdrop-filter:blur(14px);border-top:1px solid color-mix(in srgb,var(--ps-text) 5%,transparent);border-bottom:1px solid color-mix(in srgb,var(--ps-text) 7%,transparent)}
#shopApp.ps-standard-products .ps-cat-chip{border-radius:999px;min-height:42px;font-weight:760}
#shopApp.ps-standard-products .ps-item-card{border-radius:18px;border:1px solid color-mix(in srgb,var(--ps-text) 8%,transparent);box-shadow:0 12px 34px rgba(0,0,0,.12)}

/* Compact product hero state. A spacer keeps the storefront from jumping while
   the canonical hero becomes a small featured shelf. */
#psStandardHeroSpacer{display:none}
#shopApp.ps-standard-products.ps-standard-compact #psStandardHeroSpacer{display:block}
#shopApp.ps-standard-products.ps-standard-compact #ps3901Hero{position:fixed!important;top:0!important;left:0!important;right:0!important;height:82px!important;min-height:82px!important;z-index:420!important;border-bottom:1px solid color-mix(in srgb,var(--ps-text) 12%,transparent);box-shadow:0 14px 40px rgba(0,0,0,.28);background:color-mix(in srgb,var(--ps-bg) 88%,transparent);backdrop-filter:blur(18px);transition:height .26s ease,min-height .26s ease,background .26s ease}
#shopApp.ps-standard-products.ps-standard-compact #ps3901Hero .ps-cover-img,
#shopApp.ps-standard-products.ps-standard-compact #ps3901Hero .ps-cover-scrim,
#shopApp.ps-standard-products.ps-standard-compact #ps3901Hero .ps-hero-identity{opacity:0;pointer-events:none}
.ps-standard-compact-featured{display:none}
#shopApp.ps-standard-products.ps-standard-compact .ps-standard-compact-featured{display:flex;align-items:center;gap:8px;position:absolute;z-index:12;left:56px;right:12px;top:9px;height:64px;overflow-x:auto;scrollbar-width:none;padding-right:8px}
#shopApp.ps-standard-products.ps-standard-compact .ps-standard-compact-featured::-webkit-scrollbar{display:none}
.ps-standard-compact-card{display:flex;align-items:center;gap:9px;flex:0 0 auto;min-width:150px;max-width:220px;height:58px;padding:6px 10px 6px 6px;border-radius:15px;border:1px solid color-mix(in srgb,var(--ps-text) 10%,transparent);background:color-mix(in srgb,var(--ps-surface) 92%,transparent);color:var(--ps-text);font:700 12px/1.15 var(--ps-standard-font);text-align:left}
.ps-standard-compact-card img,.ps-standard-compact-fallback{width:46px;height:46px;flex:0 0 46px;border-radius:11px;object-fit:cover;background:var(--ps-surface-2);display:grid;place-items:center}
.ps-standard-compact-card span:last-child{display:grid;gap:3px;min-width:0}.ps-standard-compact-card strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ps-standard-compact-card small{font-size:11px;color:var(--ps-text-muted)}

/* Service standard: description-led, professional, conversion-first. */
#shopApp.ps-standard-services #ps3901Hero.has-cover{height:clamp(360px,48vw,500px);min-height:360px}
#shopApp.ps-standard-services #ps3901Hero.no-cover{min-height:330px;background:
  radial-gradient(circle at 84% 18%,color-mix(in srgb,var(--ps-primary) 13%,transparent),transparent 36%),
  linear-gradient(145deg,color-mix(in srgb,var(--ps-surface) 96%,#0a0a0d),var(--ps-bg))}
#shopApp.ps-standard-services .ps-cover-scrim{background:linear-gradient(90deg,rgba(0,0,0,.74),rgba(0,0,0,.22) 62%,rgba(0,0,0,.38)),linear-gradient(0deg,rgba(0,0,0,.78),transparent 58%)}
#shopApp.ps-standard-services .ps-hero-identity{position:absolute;left:0;right:0;bottom:0;z-index:4;align-items:flex-start;padding:26px clamp(18px,5vw,48px) 30px;background:linear-gradient(0deg,rgba(5,5,8,.88),rgba(5,5,8,.52) 68%,transparent)}
#shopApp.ps-standard-services .ps-hero-text{max-width:760px}
#shopApp.ps-standard-services .ps-hero-name{font-size:clamp(28px,5vw,48px);line-height:1.02}
.ps-standard-service-description{margin:10px 0 0;max-width:680px;font:500 clamp(14px,2vw,18px)/1.55 var(--ps-standard-font);color:rgba(255,255,255,.80)}
.ps-standard-service-cta{margin-top:15px;min-height:44px;border:0;border-radius:999px;padding:11px 18px;background:var(--ps-primary);color:var(--ps-primary-contrast,#07100a);font:800 13px var(--ps-standard-font);box-shadow:0 10px 28px color-mix(in srgb,var(--ps-primary) 20%,transparent)}
#shopApp.ps-standard-services .ps-service-card{border-radius:18px;border:1px solid color-mix(in srgb,var(--ps-text) 9%,transparent);box-shadow:0 12px 34px rgba(0,0,0,.12)}
#shopApp.ps-standard-services #psCategoryNav{background:transparent;border-bottom:1px solid color-mix(in srgb,var(--ps-text) 7%,transparent)}

html[data-appearance="light"] #shopApp.ps-standard-products .ps-hero-identity,
html[data-customer-appearance="light"] #shopApp.ps-standard-products .ps-hero-identity,
html[data-appearance="light"] #shopApp.ps-standard-services .ps-hero-identity,
html[data-customer-appearance="light"] #shopApp.ps-standard-services .ps-hero-identity{background:linear-gradient(0deg,rgba(255,255,255,.92),rgba(255,255,255,.58) 68%,transparent)}
html[data-appearance="light"] .ps-standard-service-description,
html[data-customer-appearance="light"] .ps-standard-service-description{color:color-mix(in srgb,var(--ps-text) 78%,transparent)}
@media(max-width:600px){
  #shopApp.ps-standard-products #ps3901Hero.has-cover{height:320px}
  #shopApp.ps-standard-products .ps-hero-identity{padding:14px 14px 18px}
  #shopApp.ps-standard-products .ps-hero-logo,#shopApp.ps-standard-services .ps-hero-logo{width:52px;height:52px;flex-basis:52px}
  #shopApp.ps-standard-products.ps-standard-compact .ps-standard-compact-featured{left:50px;right:8px}
  .ps-standard-compact-card{min-width:136px;max-width:182px}
  #shopApp.ps-standard-services #ps3901Hero.has-cover{height:390px}
  #shopApp.ps-standard-services .ps-hero-identity{padding:20px 16px 24px}
  #shopApp.ps-standard-services .ps-hero-name{font-size:30px}
}
@media(prefers-reduced-motion:reduce){#shopApp.ps-standard-products.ps-standard-compact #ps3901Hero{transition:none}}