/* Token @imports removed - inc/enqueue.php loads tokens as a dependency
   chain, which parallelises the requests instead of serialising them. */
*{box-sizing:border-box}

/* The browser's default [hidden] rule is display:none at the lowest priority,
   so any component that sets its own display (grid rows, flex layouts) stays
   visible after JS sets el.hidden = true. This makes the attribute mean what
   it says everywhere. */
[hidden]{display:none !important}

html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--surface-page);
  color:var(--text-primary);
  font-family:var(--font-sans);
  transition:background-color .25s ease;
}
a{color:var(--text-accent);text-decoration:none}
a:hover{color:var(--accent-primary)}
button{font-family:var(--font-sans)}
img{max-width:100%;display:block}

/* Reusable placeholder for image slots — real photography wasn't available
   to import intact, so slots render as on-brand gradient tiles with an icon
   and their design-time placeholder caption. */
.img-slot{
  position:relative;
  overflow:hidden;
  background:linear-gradient(155deg,var(--taupe-200) 0%,var(--taupe-400) 45%,var(--umber-600) 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  color:rgba(255,255,255,.85);
}
.img-slot::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.25), transparent 45%),
    radial-gradient(circle at 80% 85%, rgba(36,26,31,.25), transparent 50%);
}
/* Once a slot holds a real photo, the decorative placeholder overlay is unwanted. */
.img-slot:has(img)::before{
  display:none;
}
.img-slot--dark{
  background:linear-gradient(155deg,var(--plum-800) 0%,var(--plum-900) 55%,var(--plum-950) 100%);
}
/* Flat solid backgrounds for slots holding real photography — a gradient
   showing through a transparent product cutout's edges reads as a bug. */
.img-slot--flat{
  background:var(--surface-inverse-media);
  transition:background-color .25s ease;
}
.img-slot--pale{
  background:var(--cream-100);
}

.img-cover{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.img-contain{
  width:100%;
  height:100%;
  object-fit:contain;
  padding:6%;
  display:block;
}
.img-slot__icon{
  position:relative;
  z-index:1;
  width:28%;
  height:28%;
  min-width:20px;
  min-height:20px;
  max-width:56px;
  max-height:56px;
  opacity:.9;
}
.img-slot__caption{
  position:absolute;
  left:0; right:0; bottom:0;
  z-index:1;
  padding:8px 12px;
  font-size:10px;
  letter-spacing:var(--tracking-wide);
  text-transform:uppercase;
  color:rgba(255,255,255,.75);
  background:linear-gradient(0deg, rgba(0,0,0,.35), transparent);
}