/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   PN-STORE-STYLES — 2026-09-27 (Vero, CEO live-review of the Vault's style shelf + detail window).
   Scope: the unified LOOKS shelf (`#store-looks-sec`, `.pn-look-*`, built by collectionsHTML() in
   script-01.js) + the detail sheet (`.pn-detail`) + one office-view world-backdrop fix. Loaded LAST
   in play.html (after pn-ds.css and everything else) so it wins ties by source order — no
   `!important` arms race except where an existing rule already carries one at equal specificity
   (noted inline, per the project's own cascade-trap warning).

   THE THREE CEO NOTES THIS ANSWERS, in order:
   1. "too many [styles] — pick the most dramatic ones... the design of this page is poor, look at
      the button — redesign." → script-01.js cut 10 collections to 4 measured-dramatic ones and
      folded True Themes into the same shelf; THIS file gives every card equal height, one CTA per
      state that never overflows its pill (root cause found in pn-system.css: `.pn-btn{ white-space:
      nowrap }` — a long label in a narrow card had nowhere to go but past the border), and replaces
      the cramped nested "N short / you hold M / Top up" box with a single clean line.
   2. "these all look terrible" (the detail window) → bigger hero art, the compare promoted to the
      first thing under the title (already true in markup; here it gets room to breathe), no more
      wall of tiny uppercase labels.
   3. "there is no difference when I click 'now'/'with'" + "these different rooms have zero effect
      when applied" → THE OFFICE-VIEW WORLD BACKDROP WAS `display:none !important` REGARDLESS OF
      WHAT WAS WORN (pn-ceo-0720.css line ~50, dated 2026-07-20 — a genuine, separate, older fix
      that inadvertently muted every later "wear a style" claim on the one view players see most).
      Re-enabled below at a controlled ambient strength — NOT the old full-bleed busy photo the
      07-20 fix was written to remove (its own #penthouse-bg photo layers stay dead; only the
      worn-world layer, which already carries its own darkening scrims, returns, and capped lower
      than on other worn views so it reads as mood, not clutter).
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── 0 · THE OFFICE-VIEW WORLD BACKDROP, RESTORED (root cause of "zero effect") ────────────────
   Same selector/specificity as pn-ceo-0720.css's `body[data-view="office"] #worn-world{display:none
   !important}` — this file loads later, so on a tie the later rule wins; no specificity hack needed.
   Capped to a lower opacity than PN_WEAR_VIEWS' other rooms (1) so The Floor gets a genuine but
   CONTROLLED wash, matching the intent of the 07-20 fix ("not the busy office photo") while still
   being visibly, measurably different per style (qa/store_styles.test.mjs pins the diff). */
body[data-view="office"] #worn-world{ display:block !important; }
body[data-view="office"][data-worn="1"] #worn-world{ opacity:.62 !important; }
body[data-view="office"] #worn-world .ww-grade{
  /* a touch darker than the shared rule so text/numbers over it hold AA even at this opacity */
  background:
    linear-gradient(180deg,rgba(4,7,13,.74) 0%,rgba(4,7,13,.66) 42%,rgba(4,7,13,.9) 100%),
    radial-gradient(130% 100% at 50% 0%,transparent 30%,rgba(3,5,10,.8) 100%) !important;
}
body.mvc-light[data-view="office"] #worn-world .ww-grade{
  background:
    linear-gradient(180deg,rgba(244,247,252,.56) 0%,rgba(244,247,252,.48) 40%,rgba(244,247,252,.78) 100%),
    radial-gradient(130% 100% at 50% 0%,transparent 36%,rgba(230,236,246,.72) 100%) !important;
}
@media (prefers-reduced-motion:reduce){
  body[data-view="office"] #worn-world{ transition:none !important; }
}

/* ── 1 · THE BUTTON FIX — root cause of the clipped "Owned — view & wear" pill ─────────────────
   pn-system.css's `.pn-btn{ white-space:nowrap }` is correct for short labels everywhere else in
   the product; scoped here only, because a look card's width is content the player chose (a 3–4up
   grid), not a label author controls. Belt + braces: wrap AND the labels themselves were shortened
   in script-01.js so neither one alone has to do all the work. */
.pn-store-sec .pn-btn,
.pn-detail .pn-btn{
  white-space:normal; text-align:center; line-height:1.2; overflow-wrap:break-word;
}

/* ── 2 · THE LOOKS SHELF — one grid, equal-height cards, one CTA per state ─────────────────────
   `grid-auto-rows:1fr` + `align-items:stretch` on the parent, `display:flex;flex-direction:column`
   + `flex:1` on the body, is the entire "equal height" mechanism — no fixed px heights, so real
   copy of different lengths still lines up without truncation. */
#store-looks-sec .pn-head-note{
  margin:10px 0 0; max-width:62ch; font:400 14px/1.6 var(--pn-sans,sans-serif);
  color:var(--mvc-fg-70,rgba(238,243,251,.72));
}
.pn-look-hero{
  position:relative; isolation:isolate; overflow:hidden; border-radius:3px; margin-top:22px;
  padding:clamp(24px,4vw,40px); min-height:280px; display:flex; flex-direction:column; justify-content:flex-end;
  border:1px solid color-mix(in srgb, var(--edge,#f97316) 30%, var(--mvc-brd,rgba(255,255,255,.14)));
}
.pn-look-hero .pn-hero-media{ position:absolute; inset:0; z-index:0 }
.pn-look-hero .pn-hero-media img{ width:100%; height:100%; object-fit:cover; object-position:center 42% }
.pn-look-hero .pn-hero-scrim{ position:absolute; inset:0; z-index:1;
  background:linear-gradient(0deg,rgba(4,6,10,.92) 0%,rgba(4,6,10,.55) 46%,rgba(4,6,10,.18) 100%) }
.pn-look-hero > *:not(.pn-hero-media):not(.pn-hero-scrim){ position:relative; z-index:2 }
.pn-look-hero .pn-body{ color:rgba(255,255,255,.88) }

.pn-look-grid{
  display:grid; gap:18px; margin-top:22px; align-items:stretch;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
.pn-look-grid--sm{ margin-top:14px }
.pn-look-owned{ margin-top:clamp(40px,6vw,64px); padding-top:22px; border-top:1px solid var(--mvc-brd,rgba(255,255,255,.12)) }

.pn-look-card{
  display:flex; flex-direction:column; height:100%; border-radius:3px; overflow:hidden;
  background:var(--glass-a,rgba(14,17,24,.55)); border:1px solid var(--mvc-brd,rgba(255,255,255,.12));
  transition:transform .3s var(--pn-ease,ease), border-color .3s;
}
.pn-look-card:hover{ transform:translateY(-3px); border-color:var(--mvc-brd-hi,rgba(255,255,255,.28)) }
.pn-look-card.is-worn{ border-color:color-mix(in srgb, var(--mvc-green,#3ecf8e) 55%, var(--mvc-brd)) }

.pn-look-art{
  all:unset; box-sizing:border-box; display:block; position:relative; width:100%; aspect-ratio:16/10;
  cursor:pointer; background:#0a0b10;
}
.pn-look-art img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s var(--pn-ease,ease) }
.pn-look-card:hover .pn-look-art img{ transform:scale(1.05) }
.pn-look-art::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,transparent 50%,rgba(0,0,0,.6)) }
.pn-look-art:focus-visible{ outline:2px solid #fff; outline-offset:-2px }
.pn-look-tag{
  position:absolute; left:11px; top:11px; z-index:1; font:700 10px/1 var(--pn-mono,monospace);
  letter-spacing:.1em; text-transform:uppercase; color:#fff; padding:6px 9px; border-radius:2px;
  background:rgba(6,9,14,.62); backdrop-filter:blur(6px);
}
.pn-look-price{
  position:absolute; right:11px; bottom:10px; z-index:1; font-family:var(--pn-disp,inherit);
  font-size:19px; color:#fff; text-shadow:0 2px 8px rgba(0,0,0,.7);
}
.pn-look-price .cur{ font-family:var(--pn-sans,inherit); font-weight:700; font-size:.6em; opacity:.85 }
.pn-look-price--nfs{ font:700 10px/1 var(--pn-mono,monospace); letter-spacing:.1em; text-shadow:none }

.pn-look-body{ display:flex; flex-direction:column; gap:9px; padding:15px 16px 16px; flex:1 }
.pn-look-name{ display:flex; align-items:center; gap:8px; font:700 15px/1.2 var(--pn-sans,inherit); color:var(--mvc-fg,#eef3fb) }
.pn-look-blurb{ margin:0; flex:1; font:400 12.5px/1.5 var(--pn-sans,inherit); color:var(--mvc-fg-70,rgba(238,243,251,.7)) }

/* ONE clear state per card — never two competing calls to action stacked in a box */
.pn-look-cta{ margin-top:2px }
.pn-look-cta .pn-btn{ min-height:44px }
.pn-look-state.is-worn{
  display:flex; align-items:center; justify-content:center; gap:7px; width:100%; min-height:44px;
  border-radius:var(--pn-btn-r,6px); font:700 13px var(--pn-sans,inherit); letter-spacing:.02em;
  color:var(--mvc-green,#3ecf8e); background:color-mix(in srgb, var(--mvc-green,#3ecf8e) 14%, transparent);
  border:1px solid color-mix(in srgb, var(--mvc-green,#3ecf8e) 40%, transparent);
}
.pn-look-state.is-worn::before{ content:""; width:7px; height:7px; border-radius:50%; background:currentColor }
.pn-look-see{
  all:unset; cursor:pointer; align-self:flex-start; font:600 12px var(--pn-sans,inherit);
  color:var(--mvc-fg-55,rgba(238,243,251,.6)); text-decoration:underline; text-underline-offset:3px;
}
.pn-look-see:hover, .pn-look-see:focus-visible{ color:var(--mvc-fg,#eef3fb) }
.pn-look-see:focus-visible{ outline:2px solid #fff; outline-offset:2px }

@media (prefers-reduced-motion:reduce){
  .pn-look-card, .pn-look-art img{ transition:none !important }
  .pn-look-card:hover{ transform:none !important }
}

/* ── 2b · SPEND IT — the Duff + Arcade hero cards (CEO, 2026-09-27: promote these over the looks
   below). Reuses .pn-look-hero/.pn-hero-media/.pn-hero-scrim verbatim (same featured-card look as
   the reskin shelf), just as a real <a> to a real page rather than a button that opens a sheet —
   so it needs its own anchor reset (no blue link colour/underline) and a two-up grid. */
.pn-spend-grid{
  display:grid; gap:18px; margin-top:22px;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
}
.pn-spend-hero{
  text-decoration:none; color:inherit; cursor:pointer; min-height:240px;
  transition:transform .3s var(--pn-ease,ease), border-color .3s;
}
.pn-spend-hero:hover, .pn-spend-hero:focus-visible{
  transform:translateY(-3px); border-color:color-mix(in srgb, var(--edge,#f97316) 60%, var(--mvc-brd,rgba(255,255,255,.14)));
}
.pn-spend-hero:focus-visible{ outline:2px solid #fff; outline-offset:2px }
@media (max-width:560px){
  .pn-spend-hero{ min-height:200px; padding:22px }
}
@media (prefers-reduced-motion:reduce){
  .pn-spend-hero{ transition:none !important }
  .pn-spend-hero:hover{ transform:none !important }
}

/* ── 3 · THE DETAIL WINDOW — the compare leads, the price/decision follows, at proper scale ────
   CEO: "these all look terrible" — the sheet was a wall of small uppercase labels around a thumbnail
   pair. The NOW/WITH compare already IS the first thing under the title in the markup; this gives it
   the size a decision-making image needs, and quiets everything under it by comparison. */
.pn-detail .pn-detail-hero{ min-height:220px }
.pn-detail .pn-spec-section{ margin:22px 0 28px }
.pn-detail .pn-cmp-cell img{ height:clamp(220px,34vw,340px) !important }
.pn-detail .pn-cmp-seg button{ font-size:12.5px; padding:11px 10px }
@media (max-width:560px){
  .pn-detail .pn-cmp-cell img{ height:clamp(170px,52vw,240px) !important }
}