/* PopShop™ — PS-4206P-R4 Certified Customer Light/Dark Surfaces */
html[data-customer-appearance="light"],
html[data-customer-appearance="light"] body {
  color-scheme: light;
  background: var(--ps-bg);
  color: var(--ps-text);
}
html[data-customer-appearance="dark"],
html[data-customer-appearance="dark"] body {
  color-scheme: dark;
}
html[data-customer-appearance="light"] .modal-box,
html[data-customer-appearance="light"] .psch-modal,
html[data-customer-appearance="light"] .psch-sheet,
html[data-customer-appearance="light"] .psch-card,
html[data-customer-appearance="light"] .ps-item-card,
html[data-customer-appearance="light"] .ps-service-card,
html[data-customer-appearance="light"] .ps-feat-card {
  background: var(--ps-surface);
  color: var(--ps-text);
  border-color: color-mix(in srgb, var(--ps-text) 13%, transparent);
}
html[data-customer-appearance="light"] input,
html[data-customer-appearance="light"] textarea,
html[data-customer-appearance="light"] select,
html[data-customer-appearance="light"] .psch-input,
html[data-customer-appearance="light"] .psch-phone-display {
  background: var(--ps-surface-2);
  color: var(--ps-text);
  border-color: color-mix(in srgb, var(--ps-text) 14%, transparent);
}
html[data-customer-appearance="light"] #psDockCapsule {
  background: color-mix(in srgb, var(--ps-surface) 92%, transparent);
  border-color: color-mix(in srgb, var(--ps-text) 15%, transparent);
  box-shadow: 0 14px 34px rgba(28,35,31,.18);
}
html[data-customer-appearance="light"] .ps-dock-icon-circle {
  background: color-mix(in srgb, var(--ps-surface-2) 94%, var(--ps-primary) 6%);
  color: var(--ps-text);
  border-color: color-mix(in srgb, var(--ps-text) 12%, transparent);
}
html[data-customer-appearance="light"] .ps-dock-action-label,
html[data-customer-appearance="light"] .ps-item-card-name,
html[data-customer-appearance="light"] .ps-service-card-name {
  color: var(--ps-text);
}
html[data-customer-appearance="light"] .ps-dock-action.primary .ps-dock-icon-circle,
html[data-customer-appearance="light"] .ps-item-price-badge,
html[data-customer-appearance="light"] .ps-item-type-badge {
  background: var(--ps-primary);
  color: var(--ps-primary-contrast, var(--ps-on-primary, #111));
}
.psch-appearance {
  display:flex; gap:6px; padding:4px; border-radius:12px;
  background:var(--ps-surface-2); border:1px solid color-mix(in srgb,var(--ps-text) 10%,transparent);
}
.psch-appearance button {
  flex:1; border:0; border-radius:9px; padding:9px 10px; font:700 13px/1 var(--ps-font);
  background:transparent; color:var(--ps-text-muted); cursor:pointer;
}
.psch-appearance button.is-active {
  background:var(--ps-primary); color:var(--ps-primary-contrast,var(--ps-on-primary,#111));
  box-shadow:0 5px 16px color-mix(in srgb,var(--ps-primary) 20%,transparent);
}
/* Engage bar may be visually unique per template; functionality is unchanged. */
#psActionDock[data-ps-engage-style="rigid"] #psDockCapsule { border-radius:8px; border-width:2px; }
#psActionDock[data-ps-engage-style="minimal"] #psDockCapsule { box-shadow:none; backdrop-filter:none; }
#psActionDock[data-ps-engage-style="soft"] #psDockCapsule { border-radius:28px; }
#psActionDock[data-ps-engage-style="editorial"] #psDockCapsule { border-radius:10px; }
#psActionDock[data-ps-engage-style="neon"] #psDockCapsule {
  border-color:color-mix(in srgb,var(--ps-primary) 58%,transparent);
  box-shadow:0 0 30px color-mix(in srgb,var(--ps-primary) 16%,transparent),0 16px 38px rgba(0,0,0,.28);
}
#psActionDock[data-ps-engage-style="luxe"] #psDockCapsule {
  border-color:color-mix(in srgb,var(--ps-primary) 34%,var(--ps-text) 12%);
}

/* ═════════════════════════════════════════════════════════════════════
   PS-4215R — CERTIFIED GENERIC TEMPLATE LIGHT MODE
   Brand primary/accent remain intact. Structural surfaces, text, borders,
   overlays and legacy template sections gain a legible light counterpart.
   ═════════════════════════════════════════════════════════════════════ */
html[data-customer-appearance="light"] #shopApp{
  background:
    radial-gradient(circle at 82% 10%,color-mix(in srgb,var(--ps-primary) 9%,transparent),transparent 32%),
    var(--ps-bg)!important;
  color:var(--ps-text)!important;
}
html[data-customer-appearance="light"] #shopHeader,
html[data-customer-appearance="light"] .shop-header{
  background:linear-gradient(135deg,
    color-mix(in srgb,var(--ps-primary) 84%,#0b1a12),
    color-mix(in srgb,var(--ps-primary) 66%,var(--ps-accent) 34%))!important;
  color:#fff!important;
  border-bottom:1px solid color-mix(in srgb,var(--ps-primary) 35%,rgba(0,0,0,.12))!important;
  box-shadow:0 10px 28px color-mix(in srgb,var(--ps-primary) 18%,rgba(20,40,28,.16))!important;
}
html[data-customer-appearance="light"] #shopHeader :is(.header-row,.ps-header-greeting,.header-status,.ps-header-contact,.ps-header-social),
html[data-customer-appearance="light"] .shop-header :is(.header-row,.ps-header-greeting,.header-status,.ps-header-contact,.ps-header-social){color:#fff!important}
html[data-customer-appearance="light"] #shopHeader :is(button,.header-btn,.ps-header-cta button,.ps-header-cta a),
html[data-customer-appearance="light"] .shop-header :is(button,.header-btn,.ps-header-cta button,.ps-header-cta a){
  background:color-mix(in srgb,var(--ps-accent) 78%,#152027)!important;color:#fff!important;
  border-color:rgba(255,255,255,.24)!important;
}
html[data-customer-appearance="light"] .shop-body,
html[data-customer-appearance="light"] #storePop,
html[data-customer-appearance="light"] #psCustomSectionsMount{
  color:var(--ps-text)!important;
}
html[data-customer-appearance="light"] .category-section,
html[data-customer-appearance="light"] .ps-service-section,
html[data-customer-appearance="light"] .ps-featured-section{
  color:var(--ps-text)!important;
}
html[data-customer-appearance="light"] .ps-item-card,
html[data-customer-appearance="light"] .ps-service-card,
html[data-customer-appearance="light"] .ps-feat-card,
html[data-customer-appearance="light"] .item-card{
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--ps-surface) 94%,var(--ps-primary) 6%),
    var(--ps-surface))!important;
  color:var(--ps-text)!important;
  border-color:color-mix(in srgb,var(--ps-text) 11%,transparent)!important;
  box-shadow:0 10px 26px rgba(30,48,37,.11)!important;
}
html[data-customer-appearance="light"] .ps-service-card-desc,
html[data-customer-appearance="light"] .ps-item-card-desc,
html[data-customer-appearance="light"] .ps-feat-card-desc{
  color:var(--ps-text-muted)!important;
}
html[data-customer-appearance="light"] .ps-mini-player{
  background:color-mix(in srgb,var(--ps-surface) 96%,transparent)!important;
  color:var(--ps-text)!important;
  border-color:color-mix(in srgb,var(--ps-text) 14%,transparent)!important;
  box-shadow:0 18px 44px rgba(31,48,38,.18)!important;
}


/* ═════════════════════════════════════════════════════════════════════
   PS-9633 — Storefront authored Light closure
   Light stays brand-forward and intentionally distinct from Dark. No Dark
   selectors are changed here.
   ═════════════════════════════════════════════════════════════════════ */
html[data-customer-appearance="light"]{
  --ps-light-page:color-mix(in srgb,#eef3ef 88%,var(--ps-primary) 12%);
  --ps-light-paper:#f7f5ee;
  --ps-light-card:#fbfcfa;
  --ps-light-ink:#17231c;
  --ps-light-muted:#66736b;
}
html[data-customer-appearance="light"] body,
html[data-customer-appearance="light"] #shopApp{
  background:
    radial-gradient(780px 460px at 10% 0%,color-mix(in srgb,var(--ps-primary) 10%,transparent),transparent 58%),
    radial-gradient(620px 420px at 100% 12%,color-mix(in srgb,var(--ps-accent) 8%,transparent),transparent 64%),
    var(--ps-light-page)!important;
  color:var(--ps-light-ink)!important;
}

/* Generic storefront headers/navigation receive the strongest primary color. */
html[data-customer-appearance="light"] :is(#shopHeader,.shop-header,.storefront-header,.template-header,.ps-template-header,.ps-section-header.is-brand){
  background:linear-gradient(135deg,
    color-mix(in srgb,var(--ps-primary) 84%,#173326),
    color-mix(in srgb,var(--ps-primary) 64%,var(--ps-accent) 36%))!important;
  color:#fff!important;
  border-color:color-mix(in srgb,var(--ps-primary) 34%,rgba(0,0,0,.12))!important;
}
html[data-customer-appearance="light"] :is(#shopHeader,.shop-header,.storefront-header,.template-header,.ps-template-header) :is(h1,h2,h3,strong,p,small,span,a){color:#fff!important}
html[data-customer-appearance="light"] :is(#shopHeader,.shop-header,.storefront-header,.template-header,.ps-template-header) :is(button,.btn,.header-btn,.cta){
  background:color-mix(in srgb,var(--ps-accent) 78%,#17343a)!important;
  color:#fff!important;border-color:rgba(255,255,255,.24)!important;
}

/* Common template/content surfaces get mineral paper instead of white inversion. */
html[data-customer-appearance="light"] :is(
  .shop-body,.storefront-body,.template-body,.template-content,.ps-template-content,
  .custom-section,.ps-custom-section,.section-card,.content-card,.feature-card,
  .ps-item-card,.ps-service-card,.ps-feat-card,.item-card,.service-card,
  .booking-card,.portfolio-card,.referral-card,.promo-card
){
  color:var(--ps-light-ink)!important;
}
html[data-customer-appearance="light"] :is(
  .section-card,.content-card,.feature-card,.ps-item-card,.ps-service-card,
  .ps-feat-card,.item-card,.service-card,.booking-card,.portfolio-card,
  .referral-card,.promo-card
){
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--ps-light-card) 94%,var(--ps-primary) 6%),
    var(--ps-light-card))!important;
  border-color:color-mix(in srgb,var(--ps-primary) 13%,rgba(20,35,27,.12))!important;
  box-shadow:0 12px 28px rgba(29,48,37,.11)!important;
}
html[data-customer-appearance="light"] :is(.muted,.subtext,.description,.desc,.ps-item-card-desc,.ps-service-card-desc,.ps-feat-card-desc){
  color:var(--ps-light-muted)!important;
}

/* Template sections that were authored with hard-coded graphite backgrounds are
   remapped only in Light. Media/hero/video nodes are excluded so artwork stays intact. */
html[data-customer-appearance="light"] #shopApp :is(
  section:not(.media-section):not(.hero-media):not(.video-section),
  .section:not(.media-section):not(.hero-media):not(.video-section),
  .content-section,.info-section,.details-section,.stats-section,.feature-section
){
  border-color:color-mix(in srgb,var(--ps-primary) 12%,rgba(20,35,27,.10));
}
html[data-customer-appearance="light"] #shopApp :is(.stats-grid,.stats-section,.info-grid,.details-grid){
  background:color-mix(in srgb,var(--ps-light-paper) 94%,var(--ps-primary) 6%)!important;
  color:var(--ps-light-ink)!important;
}
html[data-customer-appearance="light"] #shopApp :is(.stats-grid,.stats-section,.info-grid,.details-grid) :is(h2,h3,h4,strong,b){
  color:color-mix(in srgb,var(--ps-primary) 76%,#14251b)!important;
}

/* Bottom dock/sheets: pale mineral base with branded active action. */
html[data-customer-appearance="light"] #psDockCapsule{
  background:color-mix(in srgb,var(--ps-light-paper) 94%,transparent)!important;
  border-color:color-mix(in srgb,var(--ps-primary) 15%,rgba(20,35,27,.10))!important;
}
html[data-customer-appearance="light"] .ps-dock-action.primary .ps-dock-icon-circle{
  background:var(--ps-primary)!important;color:#fff!important;
}
html[data-customer-appearance="light"] :is(.modal-box,.psch-modal,.psch-sheet,.bottom-sheet,.sheet,.drawer,.dialog){
  background:linear-gradient(180deg,#fbfcfa,#edf4ef)!important;
  color:var(--ps-light-ink)!important;
  border-color:color-mix(in srgb,var(--ps-primary) 14%,rgba(20,35,27,.12))!important;
}