/* ============================================================
   RENOVAR PAINT LP — paint.css
   Page-specific: hero swatch fan, before/after color-swipe,
   the four-swatch services stage, color-direction tiles.
   ============================================================ */

/* ------------------------------------------------------------
   1. HERO — editorial, paper white, drafting grid, swatch fan
   ------------------------------------------------------------ */
.paint-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 108px 20px 40px;
  background:
    linear-gradient(rgba(30, 30, 30, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30, 30, 30, 0.028) 1px, transparent 1px),
    var(--bg);
  background-size: 56px 56px, 56px 56px, auto;
  overflow: hidden;
}

.paint-hero-inner {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}

.paint-hero-copy {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;      /* never let long inline content widen the grid column */
  max-width: 100%;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;   /* long suffix wraps instead of overflowing on phones */
  gap: 4px 10px;
  max-width: 100%;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 22px;
}

@media (max-width: 520px) {
  .hero-eyebrow { font-size: 0.6rem; letter-spacing: 0.13em; }
}

.hero-eyebrow::before {
  content: "";
  width: 12px;
  height: 12px;
  margin-top: 1px;
  background: var(--accent);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  flex: none;
}

.paint-hero h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3.1rem, 13.5vw, 4.2rem);
  line-height: 0.92;
  letter-spacing: 0.012em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 18px;
  max-width: 14ch;
  text-wrap: balance;
}

.paint-hero h1 em {
  font-style: normal;
  color: var(--accent);
  position: relative;
  display: inline-block;
}

/* the accent phrase gets painted under — one brush pull, after the
   headline lands */
.paint-hero h1 em::after {
  content: "";
  position: absolute;
  left: 0.02em;
  right: 0.02em;
  bottom: -0.07em;
  height: 0.085em;
  background: url('/assets/images/stroke-blue-deep.webp') no-repeat center / 100% 100%;
  opacity: 0.85;
  clip-path: inset(0 100% 0 0);
  animation: strokePaint 0.8s cubic-bezier(0.5, 0, 0.2, 1) 1.15s forwards;
  pointer-events: none;
}

@keyframes strokePaint {
  to { clip-path: inset(0 0 0 0); }
}

.paint-hero .hero-sub {
  font-size: clamp(0.92rem, 3vw, 1.05rem);
  line-height: 1.65;
  color: var(--text-muted);
  font-weight: 400;
  max-width: 460px;
  margin-bottom: 0;
  text-wrap: balance;
}

.hero-cta-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin: 26px 0 0;
}

.hero-trust {
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-light);
  font-weight: 500;
}

/* Hero entrance */
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero-eyebrow,
.paint-hero h1,
.paint-hero .hero-sub,
.paint-hero .hero-cta-row {
  animation: heroFadeUp 0.7s ease forwards;
  opacity: 0;
}

.paint-hero h1        { animation-delay: 0.08s; }
.paint-hero .hero-sub { animation-delay: 0.18s; }
.paint-hero .hero-cta-row { animation-delay: 0.28s; }

.hero-spec { animation: heroFadeUp 0.7s ease 1.15s forwards; opacity: 0; }

/* ── Swatch fan — a real fan deck: strips bolted at one pivot ── */
.paint-hero-visual {
  min-width: 0;
}

.hero-swatches {
  position: relative;
  height: 285px;
  margin-top: 8px;
}

.swatch-drift {
  position: absolute;
  inset: 0;
  will-change: transform;
}

.swatch-fan {
  position: absolute;
  inset: 0;
}

/* drafting-spec annotation under the fan */
.hero-spec {
  margin: 22px auto 0;
  width: min(310px, 100%);
  padding-top: 12px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: center;
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-light);
}

.hero-spec-hint {
  color: var(--accent-dark);
  opacity: 0.75;
}

.swatch-card {
  position: absolute;
  left: calc(50% - 78px);
  top: 14px;
  width: 156px;
  padding: 0;
  display: block;
  text-align: inherit;
  -webkit-appearance: none;
  appearance: none;
  background: #fff;
  border: 1px solid rgba(30, 30, 30, 0.15);
  border-radius: 3px;
  overflow: hidden;
  cursor: pointer;
  box-shadow:
    0 30px 56px -18px rgba(30, 30, 30, 0.30),
    0 10px 20px -10px rgba(30, 30, 30, 0.14);
  transform-origin: 50% 16px;      /* every strip rotates around the bolt */
  transform: rotate(var(--rot, 0deg)) translateY(var(--lift, 0px));
  transition: transform 0.55s cubic-bezier(0.22, 0.9, 0.3, 1.05);
}

/* deck positions — tap a side strip to pull it to the front.
   rotate(-30deg) swings a strip's bottom RIGHT; rotate(30deg) LEFT. */
.pos-front { --rot: 0deg;   z-index: 3; cursor: default; }
.pos-left  { --rot: 30deg;  z-index: 2; }
.pos-right { --rot: -30deg; z-index: 1; }

/* side strips slide OUT of the deck along their own axis (away from the
   bolt — toward the cursor, so the hover can never jitter at the edge).
   :active must not add displacement — movement between mousedown/up
   breaks the click. */
.swatch-card:not(.pos-front):hover { --lift: 12px; }

.swatch-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

@media (max-width: 480px) {
  .pos-left  { --rot: 28deg; }
  .pos-right { --rot: -28deg; }
  .swatch-label strong { font-size: 0.6rem; }
  .swatch-label span { font-size: 0.5rem; }
}

/* the deck fans open on load; JS removes .fan-enter afterwards so the
   filled keyframes can't override the interactive transitions */
@keyframes fanOpen {
  from { transform: rotate(0deg); opacity: 0; }
  to   { transform: rotate(var(--rot, 0deg)); opacity: 1; }
}

.fan-enter .swatch-card { animation: fanOpen 0.9s cubic-bezier(0.22, 0.9, 0.3, 1.04) 0.5s both; }
.fan-enter .pos-front   { animation-delay: 0.38s; }


/* painted-surface grain — vertical drawdown pull, felt more than seen.
   Taste rule: texture ONLY where the surface would physically carry
   paint (deck strips, stage drawdown). UI chrome stays clean. */
.swatch-band { position: relative; }
.stage-mobile-card { position: relative; }

.swatch-band::after,
.stage-col::after,
.stage-mobile-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9 0.045' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.55'/%3E%3C/svg%3E");
  background-size: 240px 240px;
  opacity: 0.08;
  pointer-events: none;
}

/* stage copy stays crisp above the grain */
.stage-col > *,
.stage-mobile-card > * {
  position: relative;
  z-index: 1;
}
.stage-col::after,
.stage-mobile-card::after { z-index: 0; }

/* full-bleed color bands, dark to light */
.swatch-band {
  height: 46px;
  position: relative;
}

/* tint strengths — the drafting detail on the front strip */
.swatch-tint {
  position: absolute;
  right: 9px;
  bottom: 6px;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: rgba(30, 30, 30, 0.34);
  opacity: 0;
  transition: opacity 0.3s ease 0.25s;
}

.pos-front .swatch-tint { opacity: 1; }

.swatch-band { display: block; }

/* label footer — name over code, aligned toward each strip's exposed edge */
.swatch-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 12px 11px;
  background: #fff;
}

.swatch-label strong {
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.15;
}

.swatch-label span {
  font-size: 0.54rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-light);
}

/* codes sit on each strip's EXPOSED edge; the front strip earns its
   full name + tint marks */
.pos-right .swatch-label { align-items: flex-end; text-align: right; }
.pos-left  .swatch-label { align-items: flex-start; text-align: left; }
.pos-front .swatch-label { align-items: center; text-align: center; }
.pos-left .swatch-label strong,
.pos-right .swatch-label strong { display: none; }

/* the bolt that holds the deck together */
.fan-rivet {
  position: absolute;
  left: 50%;
  top: 30px;                        /* card top (14px) + origin (16px) */
  transform: translate(-50%, -50%);
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #FCFBF9, #B9B5AF 75%);
  border: 1px solid rgba(30, 30, 30, 0.32);
  box-shadow:
    0 1px 2px rgba(30, 30, 30, 0.28),
    inset 0 -1px 2px rgba(30, 30, 30, 0.18);
  z-index: 5;
}

/* ── Desktop: editorial two-column spread ───────────────────── */
@media (min-width: 1024px) {
  .paint-hero {
    min-height: calc(100svh - 72px); /* the full-bleed trust band peeks above the fold */
    padding: 104px 60px 60px;
  }

  .paint-hero-inner {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    gap: 48px;
  }

  .paint-hero-copy {
    text-align: left;
    align-items: flex-start;
  }

  .hero-eyebrow { justify-content: flex-start; }

  .paint-hero h1 {
    font-size: clamp(4.2rem, 5.8vw, 5.6rem);
    max-width: 12ch;
  }

  .paint-hero .hero-sub { max-width: 44ch; }

  .hero-cta-row {
    flex-direction: row;
    align-items: center;
    gap: 22px;
    margin-top: 30px;
  }

  /* bigger deck with more presence in its own column */
  .hero-swatches { height: 380px; margin-top: 0; }
  .swatch-card {
    left: calc(50% - 98px);
    top: 16px;
    width: 196px;
    transform-origin: 50% 18px;
  }
  .swatch-band { height: 58px; }
  .swatch-tint { font-size: 9px; right: 11px; bottom: 7px; }
  .swatch-label { padding: 11px 14px 13px; }
  .swatch-label strong { font-size: 0.8rem; }
  .swatch-label span { font-size: 0.6rem; }
  .fan-rivet { top: 34px; width: 17px; height: 17px; }
}

/* parallax translate is applied on the inner wrapper so the
   rotation on the card itself is preserved */
.swatch-drift { will-change: transform; }

/* ------------------------------------------------------------
   2. BEFORE / AFTER SHOWCASE — same room, color swipe
   ------------------------------------------------------------ */
.ba-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  max-width: 1180px;
  margin: 0 auto;
  text-align: left;
}

.ba-pair-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;   /* note drops to its own line on narrow screens */
  gap: 4px 16px;
  margin-bottom: 12px;
}

.ba-pair-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.5rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--text);
}

.ba-pair-note {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-light);
}

/* Frame */
.ba-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border);
  touch-action: pan-y;      /* keep vertical scroll; we handle horizontal drag */
  cursor: ew-resize;
  --cut: 50%;
}

.ba-side {
  position: absolute;
  inset: 0;
}

/* The AFTER layer sits on top, clipped from the left: before shows on
   the left of the handle, after is revealed on the right */
.ba-after {
  clip-path: inset(0 0 0 var(--cut));
}

/* photographic layers — identical framing on both sides */
.ba-side img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Corner chips */
.ba-chip {
  position: absolute;
  top: 12px;
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1;
  padding: 8px 12px 6px;
  border-radius: var(--radius-sm);
  z-index: 3;
}

.ba-before .ba-chip {
  left: 12px;
  background: rgba(30, 30, 30, 0.72);
  color: rgba(255, 255, 255, 0.92);
}

.ba-after .ba-chip {
  right: 12px;
  background: var(--accent);
  color: #fff;
}

/* the color's paint-chip label — revealed with the swipe */
.ba-color {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 7px 12px;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  box-shadow: 0 4px 14px rgba(30, 30, 30, 0.14);
  white-space: nowrap;
}

.ba-color i {
  width: 14px;
  height: 14px;
  border-radius: 2px;
  border: 1px solid rgba(30, 30, 30, 0.1);
  display: block;
}

/* Divider handle */
.ba-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--cut);
  width: 2px;
  margin-left: -1px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(30, 30, 30, 0.18);
  z-index: 4;
  pointer-events: none;
}

.ba-handle::after {
  content: "\2194";           /* ↔ */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid rgba(30, 30, 30, 0.16);
  box-shadow: 0 4px 14px rgba(30, 30, 30, 0.22);
  color: var(--ink);
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Invisible-but-focusable range input drives the slider (a11y) */
.ba-range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: ew-resize;
  z-index: 5;
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
}

/* keyboard focus only — pointer drags shouldn't flash the ring */
.ba-frame:has(.ba-range:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (min-width: 768px) {
  .ba-frame {
    aspect-ratio: 21 / 9;     /* one wide cinematic pair */
  }
}

/* ------------------------------------------------------------
   3. SERVICES — four-swatch stage (columns rise, payoff strip)
   ------------------------------------------------------------ */
.stage-track {
  position: relative;
  height: 380vh;              /* scroll runway for the scrub */
}

.stage-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: var(--ink-2);
}

.stage-head {
  position: absolute;
  inset: 0 0 auto 0;
  padding: clamp(6rem, 14vh, 9rem) 60px 0;
  max-width: 1180px;
  margin: 0 auto;
  right: 0;
  left: 0;
  text-align: center;
  z-index: 1;
}

.stage-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.6rem, 5.4vw, 4.6rem);
  line-height: 0.94;
  letter-spacing: 0.015em;
  text-transform: uppercase;
  color: #fff;
}

.stage-title em {
  font-style: normal;
  color: var(--accent-light);
}

.stage-hint {
  margin-top: 14px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
}

.stage-hint::after {
  content: "\2193";           /* ↓ */
  display: block;
  margin-top: 6px;
  font-size: 0.9rem;
  animation: hintNudge 2.2s ease-in-out infinite;
}

@keyframes hintNudge {
  0%, 100% { transform: translateY(0); opacity: 0.45; }
  50%      { transform: translateY(6px); opacity: 0.85; }
}

/* small drawdown signature on the final CTA band */
.cta-chips {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-bottom: 24px;
}

.cta-chips span {
  width: 22px;
  height: 22px;
  border-radius: var(--radius-sm);
  display: block;
}

/* The four swatch columns — rise from below, staggered (JS scrub) */
.stage-cols {
  position: absolute;
  inset: 62px 0 0 0;          /* stop just below the fixed top bar */
  display: flex;
  z-index: 2;
}

.stage-col {
  flex: 1;
  height: 100%;
  margin-left: -1px;
  background: var(--col-bg, var(--accent-soft));
  color: var(--col-ink, var(--ink));
  border-right: 1px solid rgba(30, 30, 30, 0.08);
  padding: clamp(2.2rem, 5.5vh, 3.6rem) clamp(1.2rem, 2.2vw, 2.2rem) 150px;
  display: flex;
  flex-direction: column;
  transform: translateY(103%);
  will-change: transform;
  box-shadow: 0 -24px 40px -24px rgba(20, 20, 22, 0.45);
}

.stage-col:last-child {
  border-right: none;
}

.col-punch {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--ink-2);   /* punched hole shows the stage behind */
  opacity: 0.28;
  margin-bottom: clamp(1.4rem, 4vh, 2.6rem);
}

.col-num {
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  opacity: 0.62;
  margin-bottom: 12px;
}

.col-rule {
  height: 1px;
  width: 100%;
  background: currentColor;
  opacity: 0.22;
  margin-bottom: clamp(1.2rem, 3vh, 2rem);
}

.col-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.7rem, 2.3vw, 2.4rem);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 0.96;
  margin-bottom: 14px;
}

.col-copy {
  font-size: clamp(0.85rem, 1vw, 0.98rem);
  line-height: 1.6;
  opacity: 0.82;
  max-width: 24rem;
}

.col-code {
  margin-top: auto;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.5;
}

/* Payoff — the drawdown card's white label strip, typed across */
.stage-payoff {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  background: var(--bg);
  border-top: 1px solid var(--border);
  padding: 26px 60px 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  transform: translateY(103%);
  will-change: transform;
}

.payoff-line {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.8rem, 3.4vw, 3rem);
  line-height: 0.94;
  letter-spacing: 0.015em;
  text-transform: uppercase;
  color: var(--text);
}

.payoff-line em {
  font-style: normal;
  color: var(--accent);
}

.payoff-sub {
  font-size: 0.85rem;
  color: var(--text-muted);
  max-width: 320px;
}

.payoff-cta {
  flex-shrink: 0;
}

/* Mobile fallback — stacked swatch cards, no pin */
.stage-mobile {
  display: none;
}

@media (max-width: 767px) {
  .stage-track { display: none; }
  .stage-mobile {
    display: block;
    background: var(--ink-2);
    padding: 64px 20px 56px;
  }
  .stage-mobile .section-label { justify-content: center; width: 100%; }
  .stage-mobile-head {
    text-align: center;
    margin-bottom: 32px;
  }
  .stage-mobile-title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(2.4rem, 11vw, 3rem);
    line-height: 0.94;
    letter-spacing: 0.015em;
    text-transform: uppercase;
    color: #fff;
  }
  .stage-mobile-title em { font-style: normal; color: var(--accent-light); }

  .stage-mobile-card {
    background: var(--col-bg, var(--accent-soft));
    color: var(--col-ink, var(--ink));
    border-radius: var(--radius-md);
    padding: 24px 22px;
    margin-bottom: 12px;
    position: relative;
  }
  .stage-mobile-card .col-punch { margin-bottom: 14px; }
  .stage-mobile-card .col-title { font-size: 1.8rem; margin-bottom: 8px; }
  .stage-mobile-card .col-copy  { font-size: 0.92rem; max-width: none; }
  .stage-mobile-card .col-code  { margin-top: 16px; }

  .stage-mobile-payoff {
    background: var(--bg);
    border-radius: var(--radius-md);
    padding: 26px 22px;
    text-align: center;
  }
  .stage-mobile-payoff .payoff-line { font-size: 2rem; margin-bottom: 8px; }
  .stage-mobile-payoff .payoff-sub  { margin: 0 auto 18px; }
}

/* Reduced motion — columns and payoff simply present */
@media (prefers-reduced-motion: reduce) {
  .stage-track { height: auto; }
  .stage-sticky { position: relative; height: 100vh; }
  .stage-col, .stage-payoff { transform: none !important; }
}

/* ------------------------------------------------------------
   4. PHOTO-SLOT PLACEHOLDERS (spotlight / gallery TODO)
   ------------------------------------------------------------ */
/* color-direction tiles — visualized palettes with chip labels */
.look-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  max-width: 1180px;
  margin: 0 auto;
}

.look-tile {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  text-align: left;
  transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
}

.look-tile:hover {
  transform: translateY(-3px);
  border-color: rgba(46, 114, 176, 0.35);
  box-shadow: 0 14px 32px rgba(30, 30, 30, 0.10);
}

.look-img {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.look-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

.look-tile:hover .look-img img {
  transform: scale(1.03);
}

.look-label {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 10px;
  row-gap: 1px;
  align-items: center;
  padding: 13px 16px 14px;
}

.look-label i {
  grid-row: 1 / 3;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(30, 30, 30, 0.12);
  display: block;
}

.look-name {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.02em;
}

.look-name em {
  font-style: normal;
  font-weight: 700;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-light);
  margin-left: 8px;
}

.look-use {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.slot-note {
  margin: 28px auto 0;
  font-size: 0.78rem;
  color: var(--text-light);
  max-width: 520px;
}

@media (min-width: 768px) {
  .look-grid { grid-template-columns: repeat(3, 1fr); }
}