/* CharmZ + Combos + made-to-order FigurZ grids.
   Linked after style.css. No inline styles (CSP style-src 'self'). */

/* Slightly tighter desktop nav so FigurZ / CharmZ / Combos fit at 860px+ */
@media (min-width:860px){
  .nav-links{gap:.85rem}
  .nav-links a{font-size:.9rem}
}

section h1{
  font-size:clamp(1.7rem,5vw,2.6rem);font-weight:900;font-style:italic;line-height:1.08;
  text-transform:uppercase;margin:0 0 .6rem;letter-spacing:-.005em;text-align:center;
}

.catalog-page{background:radial-gradient(60% 40% at 50% 0%,rgba(255,106,19,.10),transparent 70%),linear-gradient(180deg,#fff,var(--fizz));border-bottom:1px solid var(--line)}

.catalog-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:1.1rem;
}
@media (min-width:412px){
  .catalog-grid{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:768px){
  .catalog-grid{grid-template-columns:repeat(3,1fr);gap:1.25rem}
}
@media (min-width:1280px){
  .catalog-grid{grid-template-columns:repeat(5,1fr);gap:1.25rem}
}

/* Uniform navy/slate tile frame: mixed studio backdrops (light, navy, dark)
   sit on one card so edge shade-shifts read as intentional. */
.tile-frame{
  position:relative;
  background:#1c2433;
  padding:16px;
}
.catalog-card .card-media.tile-frame,
#charmz .card-media.tile-frame{
  padding:16px;
  background:#1c2433;
}
.tile-frame img{
  width:100%;
  aspect-ratio:1;
  object-fit:contain;
  border-radius:12px;
  background:transparent;
  display:block;
  box-shadow:none;
}
.tile-frame::after{
  content:"";
  position:absolute;
  inset:16px;
  border-radius:12px;
  box-shadow:inset 0 0 56px 12px rgba(8,12,20,.42);
  pointer-events:none;
  z-index:1;
}
.tile-frame .badge-render{z-index:2}
.tile-frame a{display:block;position:relative;z-index:0}
.tile-frame a:focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:12px}

.catalog-note{
  text-align:center;
  color:var(--muted);
  font-size:.9rem;
  margin:1.25rem auto 0;
  max-width:40rem;
}

.combo-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:1.25rem;
}
@media (min-width:768px){
  .combo-grid{grid-template-columns:repeat(3,1fr);gap:1.35rem}
}

.combo-shots{
  display:grid;
  gap:8px;
  padding:16px;
  background:#1c2433;
  position:relative;
}
.combo-shots-2{grid-template-columns:1fr 1fr}
.combo-shots-3{grid-template-columns:1fr 1fr 1fr}
.combo-shots img{
  width:100%;
  aspect-ratio:1;
  object-fit:contain;
  background:transparent;
  border-radius:12px;
  box-shadow:none;
}
.combo-shots::after{
  content:"";
  position:absolute;
  inset:16px;
  border-radius:12px;
  box-shadow:inset 0 0 56px 12px rgba(8,12,20,.42);
  pointer-events:none;
  z-index:1;
}
.combo-shots .badge-render{left:.8rem;bottom:.6rem;z-index:2}

.combo-intro{
  position:relative;
  margin:0 auto 2.5rem;
  max-width:34rem;
  border-radius:22px;
  overflow:hidden;
  background:#1c2433;
  box-shadow:var(--shadow-md);
}
.combo-intro img{width:100%;aspect-ratio:1;object-fit:contain;display:block;padding:16px;box-sizing:border-box}
.combo-intro .badge-render{left:.8rem;bottom:.8rem}

@media (max-width:360px){
  .catalog-grid,.combo-grid{gap:.9rem}
  .combo-shots-3{gap:6px}
  .combo-shots .badge-render{left:.35rem;bottom:.3rem;font-size:.55rem}
  .tile-frame, .catalog-card .card-media.tile-frame, #charmz .card-media.tile-frame{padding:12px}
  .tile-frame::after{inset:12px}
}

@media (prefers-reduced-motion:reduce){
  .catalog-card:hover{transform:none}
}

#charmz .card-body h3 a{color:inherit;text-decoration:none}
#charmz .card-body h3 a:hover,#charmz .card-body h3 a:focus-visible{color:var(--orange);text-decoration:underline;text-underline-offset:3px}

/* Shop adds one more nav link. Tighten from 860px so the bar stays
   on one line; relax slightly from 1100px. */
@media (min-width:860px){
  .nav{gap:.65rem}
  .nav-links{gap:.62rem}
  .nav-links a{font-size:.84rem}
  .nav-cta{padding:.5rem .9rem;font-size:.84rem}
}
@media (min-width:1100px){
  .nav-links{gap:.85rem}
  .nav-links a{font-size:.9rem}
  .nav-cta{padding:.55rem 1.05rem;font-size:.9rem}
}
.nav-links a[aria-current="page"]{color:var(--orange)}

/* "Join the Launch List" is longer than "Get notified". Keep it on one
   line and give the bar a little more room. */
@media (min-width:860px){
  .nav-cta{padding:.45rem .72rem;font-size:.78rem;letter-spacing:.01em}
}
@media (min-width:1200px){
  .nav-cta{padding:.5rem .95rem;font-size:.86rem}
}