/* ══════════════════════════════════════════════════════════════════════════
   LUXE COLOR DECK — shared stylesheet
   © LUXE Protection Films. Served from the LUXE shared services host.

   ONE stylesheet for every LUXE-hosted installer color deck. Do not copy this
   file into a site; link it. Editing it here updates every deck at once.

   ── Token contract ──────────────────────────────────────────────────────
   The host page must define these on :root. Every LUXE site already does.
     --ink  --ink-2  --line  --line-2  --gold  --txt  --mute  --faint
     --rad  --disp  --body
   Optional, for the installer's own accent colour (both fall back to LUXE gold):
     --deck-glow   translucent wash behind the deck hero, e.g. rgba(242,110,43,.12)
     --deck-rule   the rule beside the swatch-accuracy note, e.g. rgba(242,110,43,.5)
   The host page must also provide the shared button classes used by the
   detail card: .btn, .btn--gold, .btn--ghost.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Deck hero ─────────────────────────── */
.dhero{padding:132px 0 clamp(40px,6vw,64px);position:relative;overflow:hidden}
.dhero::after{content:"";position:absolute;inset:auto 0 0 0;height:1px;background:var(--line-2)}
.dhero__bg{position:absolute;inset:0;z-index:0;opacity:.5;
  background:radial-gradient(120% 80% at 78% 8%,rgba(239,193,74,.16),transparent 58%),
             radial-gradient(100% 70% at 8% 92%,var(--deck-glow,rgba(239,193,74,.12)),transparent 60%)}
.dhero .wrap{position:relative;z-index:1}
.dhero h1{font-size:clamp(2.4rem,6vw,4.4rem);font-weight:800;font-stretch:104%;margin-top:18px;max-width:16ch}
.dhero h1 em{font-style:normal;color:var(--gold);font-stretch:96%;display:block}
.dhero__sub{margin-top:22px;max-width:60ch;font-size:clamp(1rem,1.6vw,1.12rem);color:var(--mute);line-height:1.62}
.dhero__note{margin-top:20px;max-width:62ch;font-size:13.5px;color:var(--faint);line-height:1.6;
  border-left:2px solid var(--deck-rule,var(--gold));padding-left:16px}

/* ── Controls ─────────────────────────── */
.ctrl{position:sticky;top:74px;z-index:60;background:rgba(10,10,11,.93);
  backdrop-filter:saturate(160%) blur(12px);-webkit-backdrop-filter:saturate(160%) blur(12px);
  border-bottom:1px solid var(--line-2);padding:16px 0}
.ctrl__in{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.search{position:relative;flex:1 1 300px;min-width:0}
.search input{width:100%;font-family:var(--body);font-size:15px;color:var(--txt);background:var(--ink-2);
  border:1px solid var(--line);border-radius:var(--rad);padding:13px 40px 13px 40px}
.search input:focus{border-color:var(--gold);outline:none}
.search svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--faint)}
.search button{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:0;
  color:var(--faint);font-size:18px;cursor:pointer;padding:4px 8px;line-height:1}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{font-family:var(--disp);font-size:11.5px;font-weight:700;letter-spacing:.10em;text-transform:uppercase;
  padding:10px 14px;border:1px solid var(--line);background:transparent;color:rgba(255,255,255,.88);
  border-radius:var(--rad);cursor:pointer;transition:.18s;white-space:nowrap}
.chip:hover{border-color:var(--gold);color:var(--gold)}
.chip[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:#0A0A0B}
.count{font-family:var(--disp);font-size:11.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--faint);margin-left:auto;white-space:nowrap}

/* ── Grid ─────────────────────────────── */
.deckgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(166px,1fr));gap:13px;
  padding:clamp(30px,4vw,48px) 0 clamp(60px,8vw,96px)}
.tile{position:relative;border:1px solid var(--line);border-radius:var(--rad);background:var(--ink-2);
  overflow:hidden;text-align:left;padding:0;color:inherit;font:inherit;cursor:pointer;
  transition:border-color .2s ease,transform .2s ease}
.tile:hover{border-color:var(--gold);transform:translateY(-3px)}
/* Square container is load-bearing: the sprite cells are square, so any other
   aspect ratio stretches the artwork and crops the LUXE emboss. */
.tile__sw{display:block;aspect-ratio:1/1;position:relative}
.tile__sw::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.tile__wm{position:absolute;bottom:8px;right:9px;width:38px;height:15px;opacity:.55;z-index:2;
  filter:brightness(0) invert(1) drop-shadow(0 1px 2px rgba(0,0,0,.55));pointer-events:none}
.tile__meta{display:block;padding:12px 13px 14px;border-top:1px solid var(--line-2)}
.tile__name{display:block;font-family:var(--disp);font-size:13px;font-weight:700;line-height:1.3;color:#fff}
.tile__tpu{display:block;font-family:var(--disp);font-size:10px;font-weight:700;letter-spacing:.14em;
  color:var(--gold);margin-top:6px}
.tile__cat{display:block;margin-top:4px;font-family:var(--disp);font-size:9.5px;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;color:var(--faint)}
.empty{padding:60px 0;color:var(--mute);font-size:16px}
.empty b{color:#fff}

/* ── Detail card ──────────────────────── */
.sheet{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:22px}
.sheet.is-open{display:flex}
.sheet__bg{position:absolute;inset:0;background:rgba(6,6,8,.82);backdrop-filter:blur(6px)}
/* align-items:start keeps the card's height driven by the text column. Without
   it the square swatch pins the row height and both scrollbars appear. */
.sheet__card{position:relative;width:min(100%,880px);max-height:calc(100dvh - 44px);
  overflow-x:hidden;overflow-y:auto;
  background:var(--ink-2);border:1px solid var(--line);border-radius:var(--rad);
  display:grid;grid-template-columns:1fr 1fr;align-items:start}
.sheet__sw{aspect-ratio:1/1;min-height:0;position:relative;align-self:start}
.sheet__wm{position:absolute;bottom:14px;right:16px;width:64px;height:25px;opacity:.55;z-index:2;
  filter:brightness(0) invert(1) drop-shadow(0 1px 2px rgba(0,0,0,.55));pointer-events:none}
.sheet__body{padding:clamp(24px,3vw,38px)}
.sheet__cat{font-family:var(--disp);font-size:10.5px;font-weight:800;letter-spacing:.19em;
  text-transform:uppercase;color:var(--gold)}
.sheet__body h2{font-size:clamp(1.5rem,3vw,2.1rem);font-weight:800;margin-top:12px;color:#fff}
.sheet__tpu{font-family:var(--disp);font-size:13px;font-weight:700;letter-spacing:.16em;color:var(--mute);margin-top:9px}
.sheet__body p{margin-top:18px;color:var(--mute);font-size:14.5px;line-height:1.62}
.sheet__fine{color:var(--faint);font-size:13.5px}
.sheet__cta{display:flex;flex-direction:column;gap:10px;margin-top:26px}
.sheet__x{position:absolute;right:12px;top:12px;z-index:3;background:var(--gold);border:1px solid var(--gold);
  border-radius:var(--rad);width:40px;height:40px;color:#0A0A0B;font-size:20px;font-weight:700;line-height:1;
  cursor:pointer;display:grid;place-items:center;box-shadow:0 2px 10px rgba(0,0,0,.45);
  transition:background .18s ease,transform .18s ease}
.sheet__x:hover{background:#fff;border-color:#fff;transform:scale(1.06)}
@media (max-width:700px){.sheet__card{grid-template-columns:1fr}}

/* ── Back bar ─────────────────────────── */
.backbar{border-bottom:1px solid var(--line-2);background:var(--ink-2)}
.backbar .wrap{display:flex;flex-wrap:wrap;gap:16px;align-items:center;padding:13px 0;
  font-family:var(--disp);font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.backbar a{color:rgba(255,255,255,.86)}
.backbar a:hover{color:var(--gold)}
.backbar span{color:var(--faint)}

/* ── Sticky mobile bar ────────────────── */
.mbar{position:fixed;inset:auto 0 0 0;z-index:110;display:none;
  background:rgba(10,10,11,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-top:1px solid var(--line);padding:9px 12px calc(9px + env(safe-area-inset-bottom));gap:8px}
.mbar a{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;
  font-family:var(--disp);font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  padding:13px 6px;border:1px solid var(--line);border-radius:var(--rad);color:var(--txt)}
.mbar a.pri{background:var(--gold);color:#0A0A0B;border-color:var(--gold)}
@media (max-width:760px){.mbar{display:flex}body{padding-bottom:70px}}

/* ── Offline / failed-load notice ─────── */
.deckfail{padding:56px 0;color:var(--mute);font-size:16px;line-height:1.7}
.deckfail b{color:#fff}