/* ============================================================================
   SM KICKZ — hero, marquee, rails, tiles, cards, editorial, journal, pages
   ========================================================================== */

/* ── hero ─────────────────────────────────────────────────────────────────── */
.smk-hero {
  position: relative;
  height: clamp(460px, 78vh, 780px);
  background: var(--smk-surface);
  overflow: hidden;
}

.smk-hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.7s var(--smk-ease),
    visibility 0.7s;
}

.smk-hero__slide[data-on] {
  opacity: 1;
  visibility: visible;
}

/*
 * <picture> is only a wrapper for choosing a source, and on wide screens the frame is
 * only a wrapper too. Neither may become a box of its own there, or the picture inside
 * would position against it rather than the slide and collapse to nothing.
 */
.smk-hero__picture,
.smk-hero__frame {
  display: contents;
}

.smk-hero__media,
.smk-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /*
   * Aim the crop at the product, set per slide in the Customizer. On a typical desktop
   * the hero is wider than the picture's own ratio, so it crops top and bottom and this
   * has no visible effect. It matters as the screen narrows — tablets, and the phone
   * frame below — where the default centre crop lands on the empty half of a picture
   * composed with the product on one side and room for copy on the other.
   */
  object-position: var(--smk-focus, 50%) center;
}

/*
 * The bundled placeholder art is low-key on purpose; lift it so it reads through the
 * scrim. Deliberately NOT applied to uploaded art — a normal photograph put through
 * +45% brightness comes out washed out, and the person uploading it has no idea why.
 */
.smk-hero__media--stock {
  filter: brightness(1.45) contrast(1.05) saturate(1.08);
}

.smk-hero__slide[data-on] .smk-hero__media,
.smk-hero__slide[data-on] .smk-hero__video {
  animation: smk-pan 9s var(--smk-ease) forwards;
}

@keyframes smk-pan {
  from {
    transform: scale(1.04);
  }
  to {
    transform: scale(1.11);
  }
}

.smk-hero__veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgba(10, 10, 11, 0.86) 0%, rgba(10, 10, 11, 0.42) 40%, rgba(10, 10, 11, 0) 70%),
    linear-gradient(to top, rgba(10, 10, 11, 0.62), transparent 48%);
}


.smk-hero__inner {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 720px;
  padding-bottom: 40px;
}

/*
 * Phone layout: the picture in a 4:3 frame, the copy underneath on solid ground.
 *
 * Why stacked rather than overlaid. Hero pictures for this theme are composed for the
 * desktop — product on the right, empty space on the left for the headline. A phone
 * cannot show that width. Crop to the middle and you get the empty half and a sliver
 * of shoe; crop to the product and the headline lands on top of it. Only by moving the
 * copy off the picture can a phone show the product whole AND keep the text readable.
 * A 4:3 frame shows about 72% of a typical 1.86:1 hero image, which is enough to fit
 * the product with the focus setting pointed at it.
 *
 * The slides share one grid cell instead of being absolutely positioned, so the hero
 * takes the height of its tallest slide. Absolute slides would give it no height at
 * all; stacking them in normal flow would put all three one under another. The
 * crossfade is untouched — it runs on opacity, which does not care how they are laid
 * out.
 *
 * This block must stay BELOW the rules it overrides. A media query adds no
 * specificity, so an identical selector further down the file wins whatever the
 * query says — which silently broke the first version of this layout.
 */
@media (max-width: 767px) {
  .smk-hero {
    height: auto;
    display: grid;
  }

  .smk-hero__slide {
    position: relative;
    inset: auto;
    grid-area: 1 / 1;
    display: flex;
    flex-direction: column;
  }

  .smk-hero__frame {
    display: block;
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
  }

  /*
   * No slow zoom here. At 11% it pushes a product that only just fits the frame back
   * out of it — the very thing this layout is for.
   */
  .smk-hero__slide[data-on] .smk-hero__media,
  .smk-hero__slide[data-on] .smk-hero__video {
    animation: none;
    transform: none;
  }

  /* Only a short fade at the foot, melting the picture into the copy's background. */
  .smk-hero__veil {
    background: linear-gradient(to top, var(--smk-surface) 0%, rgba(18, 18, 21, 0) 42%);
  }

  .smk-hero__inner {
    height: auto;
    justify-content: flex-start;
    padding-top: 20px;
    /* Room for the slide dots, which sit at the bottom of the hero. */
    padding-bottom: 62px;
  }
}

.smk-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--smk-font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--smk-acid);
  margin-bottom: 16px;
}

.smk-hero__eyebrow::before {
  content: '';
  width: 26px;
  height: 2px;
  background: var(--smk-acid);
}

.smk-hero__title {
  font-size: clamp(40px, 7.4vw, 92px);
  line-height: 0.92;
  letter-spacing: -0.035em;
  margin-bottom: 18px;
  text-shadow: 0 2px 30px rgba(10, 10, 11, 0.6);
}

.smk-hero__body {
  color: var(--smk-ink);
  font-size: clamp(14px, 1.6vw, 17px);
  max-width: 46ch;
  margin-bottom: 28px;
  text-shadow: 0 1px 18px rgba(10, 10, 11, 0.8);
}

.smk-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.smk-hero__dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 26px;
  display: flex;
  justify-content: center;
  gap: 8px;
  z-index: 3;
}

.smk-hero__dot {
  position: relative;
  width: 42px;
  height: 3px;
  background: rgba(255, 255, 255, 0.25);
  border-radius: var(--smk-r-pill);
  overflow: hidden;
}

.smk-hero__dot-fill {
  position: absolute;
  inset: 0;
  width: 0;
  background: var(--smk-acid);
  border-radius: var(--smk-r-pill);
}

.smk-hero__dot[data-on] .smk-hero__dot-fill {
  animation: smk-fill 7s linear forwards;
}

@keyframes smk-fill {
  to {
    width: 100%;
  }
}

.smk-hero__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  display: none;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: var(--smk-r-pill);
  background: rgba(10, 10, 11, 0.4);
  backdrop-filter: blur(6px);
  color: var(--smk-ink);
  transition:
    background 0.18s var(--smk-ease),
    border-color 0.18s var(--smk-ease);
}

.smk-hero__arrow:hover {
  background: var(--smk-acid);
  border-color: var(--smk-acid);
  color: var(--smk-acid-ink);
}

@media (min-width: 900px) {
  .smk-hero__arrow {
    display: grid;
  }
}

.smk-hero__arrow--prev {
  left: 22px;
}
.smk-hero__arrow--next {
  right: 22px;
}

.smk-hero__tag {
  position: absolute;
  left: 22px;
  bottom: 24px;
  z-index: 3;
  font-family: var(--smk-font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--smk-ink-faint);
}

@media (max-width: 899px) {
  .smk-hero__tag {
    display: none;
  }
}

/* ── marquee ──────────────────────────────────────────────────────────────── */
.smk-marquee {
  border-block: 1px solid var(--smk-line);
  background: var(--smk-surface);
  overflow: hidden;
  padding-block: 11px;
}

.smk-marquee__track {
  display: flex;
  gap: 34px;
  width: max-content;
  animation: smk-slide 34s linear infinite;
}

.smk-marquee:hover .smk-marquee__track {
  animation-play-state: paused;
}

@keyframes smk-slide {
  to {
    transform: translateX(-50%);
  }
}

.smk-marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 34px;
  font-family: var(--smk-font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--smk-ink-dim);
  white-space: nowrap;
}

.smk-marquee__item::after {
  content: '';
  width: 5px;
  height: 5px;
  background: var(--smk-acid);
  border-radius: var(--smk-r-pill);
}

/* ── rails ────────────────────────────────────────────────────────────────── */
.smk-rail__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}

.smk-rail__sub {
  color: var(--smk-ink-dim);
  font-size: 14px;
  margin-top: 6px;
  max-width: 52ch;
}

.smk-rail__tools {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.smk-arrowbtn {
  display: none;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--smk-line);
  border-radius: var(--smk-r-pill);
  color: var(--smk-ink-dim);
  transition:
    color 0.16s var(--smk-ease),
    border-color 0.16s var(--smk-ease);
}

.smk-arrowbtn:hover {
  color: var(--smk-acid);
  border-color: var(--smk-acid);
}

@media (min-width: 900px) {
  .smk-arrowbtn {
    display: grid;
  }
}

.smk-rail {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 8px;
  scrollbar-width: none;
}

.smk-rail::-webkit-scrollbar {
  display: none;
}

.smk-rail__item {
  flex: 0 0 auto;
  width: 210px;
  scroll-snap-align: start;
}

@media (min-width: 640px) {
  .smk-rail__item {
    width: 244px;
  }
}

@media (min-width: 1200px) {
  .smk-rail__item {
    width: 274px;
  }
}

@media (min-width: 1800px) {
  .smk-rail__item {
    width: 300px;
  }
}

/* ── tiles ────────────────────────────────────────────────────────────────── */
.smk-tiles {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 640px) {
  .smk-tiles {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 1080px) {
  .smk-tiles {
    grid-template-columns: repeat(5, 1fr);
  }
}

@media (min-width: 1500px) {
  .smk-tiles {
    grid-template-columns: repeat(10, 1fr);
  }
}

.smk-tile {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  border-radius: var(--smk-r-md);
  overflow: hidden;
  background: var(--smk-surface-2);
  border: 1px solid var(--smk-line);
}

.smk-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.72;
  transition:
    transform 0.6s var(--smk-ease),
    opacity 0.3s var(--smk-ease);
}

.smk-tile:hover img {
  transform: scale(1.08);
  opacity: 1;
}

.smk-tile__label {
  position: absolute;
  inset: auto 0 0 0;
  padding: 12px 10px 14px;
  background: linear-gradient(to top, rgba(10, 10, 11, 0.94), transparent);
  font-family: var(--smk-font-display);
  font-size: 13px;
  text-transform: uppercase;
  text-align: center;
}

.smk-tile:hover .smk-tile__label {
  color: var(--smk-acid);
}

.smk-tile__count {
  display: block;
  font-family: var(--smk-font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--smk-ink-faint);
  margin-top: 2px;
}

/* ── USP row ──────────────────────────────────────────────────────────────── */
.smk-usps {
  display: grid;
  gap: 1px;
  background: var(--smk-line);
  border-block: 1px solid var(--smk-line);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .smk-usps {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .smk-usps {
    grid-template-columns: repeat(4, 1fr);
  }
}

.smk-usp {
  background: var(--smk-bg);
  padding: 26px 24px;
  display: flex;
  gap: 14px;
}

.smk-usp__icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: var(--smk-r-sm);
  background: var(--smk-surface-2);
  color: var(--smk-acid);
}

.smk-usp__title {
  font-family: var(--smk-font-ui);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 5px;
}

.smk-usp__body {
  font-size: 13px;
  color: var(--smk-ink-dim);
  line-height: 1.5;
  margin: 0;
}

/* ── editorial ────────────────────────────────────────────────────────────── */
.smk-split {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
}

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

.smk-split__card {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  border-radius: var(--smk-r-md);
  overflow: hidden;
  background: var(--smk-surface-2);
}

.smk-split__card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--smk-ease);
}

.smk-split__card:hover img {
  transform: scale(1.06);
}

.smk-split__body {
  position: absolute;
  inset: auto 0 0 0;
  padding: 24px;
  background: linear-gradient(to top, rgba(10, 10, 11, 0.95), transparent);
}

.smk-split__eyebrow {
  display: block;
  font-family: var(--smk-font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--smk-acid);
  margin-bottom: 8px;
}

.smk-split__title {
  font-size: clamp(20px, 2.4vw, 28px);
  margin-bottom: 8px;
}

.smk-split__text {
  font-size: 13px;
  color: var(--smk-ink-dim);
  max-width: 34ch;
  margin: 0;
}

.smk-split__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  font-family: var(--smk-font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--smk-acid);
}

/* ── stores ───────────────────────────────────────────────────────────────── */
.smk-stores {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
}

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

.smk-store {
  border: 1px solid var(--smk-line);
  border-radius: var(--smk-r-md);
  padding: 22px;
  background: var(--smk-surface);
}

.smk-store__city {
  font-family: var(--smk-font-display);
  font-size: 20px;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.smk-store__name {
  font-family: var(--smk-font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--smk-acid);
  margin-bottom: 12px;
}

.smk-store__addr {
  font-size: 13px;
  color: var(--smk-ink-dim);
  line-height: 1.6;
  margin-bottom: 14px;
}

.smk-store__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 14px;
  font-family: var(--smk-font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--smk-ink-faint);
  padding-top: 12px;
  border-top: 1px solid var(--smk-line);
}

.smk-store__map {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--smk-acid);
  text-decoration: none;
}

.smk-store__map:hover,
.smk-store__map:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/*
 * A single store. In the three-column grid one card sits at a third of the width with
 * two empty columns beside it, which reads as "two stores are missing". So one store
 * spans the row, and on wider screens lays its parts out side by side.
 */
@media (min-width: 780px) {
  .smk-stores--single {
    grid-template-columns: 1fr;
  }

  .smk-stores--single .smk-store {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) auto;
    align-items: center;
    gap: 12px 40px;
    padding: 28px 32px;
  }

  .smk-stores--single .smk-store__name {
    margin-bottom: 0;
  }

  .smk-stores--single .smk-store__addr {
    margin: 0;
    font-size: 15px;
    color: var(--smk-ink);
  }

  .smk-stores--single .smk-store__meta {
    flex-direction: column;
    align-items: flex-end;
    padding-top: 0;
    border-top: 0;
    text-align: right;
  }
}

/* ── journal ──────────────────────────────────────────────────────────────── */
.smk-journal {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}

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

.smk-post {
  display: block;
  border: 1px solid var(--smk-line);
  border-radius: var(--smk-r-md);
  overflow: hidden;
  background: var(--smk-surface);
  transition: border-color 0.18s var(--smk-ease);
}

.smk-post:hover {
  border-color: var(--smk-acid);
}

.smk-post__img {
  aspect-ratio: 16 / 10;
  width: 100%;
  object-fit: cover;
  background: var(--smk-surface-2);
}

.smk-post__body {
  padding: 18px 18px 20px;
}

.smk-post__meta {
  font-family: var(--smk-font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--smk-ink-faint);
  margin-bottom: 9px;
}

.smk-post__title {
  font-family: var(--smk-font-ui);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 8px;
  text-transform: none;
  letter-spacing: 0;
}

.smk-post:hover .smk-post__title {
  color: var(--smk-acid);
}

.smk-post__excerpt {
  font-size: 13px;
  color: var(--smk-ink-dim);
  line-height: 1.6;
  margin: 0;
}

/* ── chips ────────────────────────────────────────────────────────────────── */
.smk-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.smk-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding-inline: 14px;
  border: 1px solid var(--smk-line);
  border-radius: var(--smk-r-pill);
  font-size: 12px;
  color: var(--smk-ink-dim);
  transition:
    color 0.14s var(--smk-ease),
    border-color 0.14s var(--smk-ease);
}

.smk-chip:hover {
  color: var(--smk-acid);
  border-color: var(--smk-acid);
}

.smk-chip--sm {
  height: 28px;
  padding-inline: 10px;
  font-family: var(--smk-font-mono);
  font-size: 10px;
}

.smk-chips--active {
  padding-block: 14px;
}

.smk-chip--active {
  border-color: var(--smk-line-strong);
}

.smk-chip--active:hover {
  color: var(--smk-blaze);
  border-color: var(--smk-blaze);
}

.smk-chips__clear {
  align-self: center;
  font-family: var(--smk-font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--smk-acid);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── breadcrumbs & page heads ─────────────────────────────────────────────── */
.smk-crumbs,
.smk .woocommerce-breadcrumb {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  font-family: var(--smk-font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--smk-ink-faint);
  padding-block: 20px 16px;
}

.smk-crumbs a:hover,
.smk .woocommerce-breadcrumb a:hover {
  color: var(--smk-acid);
}

.smk-crumbs__here {
  color: var(--smk-ink-dim);
}

.smk-hero-band {
  border-bottom: 1px solid var(--smk-line);
  background:
    radial-gradient(90% 120% at 0% 0%, rgba(198, 242, 78, 0.09), transparent 55%),
    var(--smk-surface);
  padding-block: clamp(24px, 5vw, 56px);
}

.smk-page__title {
  font-size: clamp(30px, 6vw, 62px);
  max-width: 20ch;
}

.smk-page__lede {
  color: var(--smk-ink-dim);
  font-size: clamp(15px, 1.7vw, 18px);
  max-width: 62ch;
  margin-top: 16px;
  line-height: 1.65;
}

.smk-page {
  padding-block: clamp(30px, 5vw, 56px) 70px;
}

.smk-article {
  max-width: 74ch;
  margin-inline: auto;
}

.smk-article__img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--smk-r-md);
  margin-bottom: 30px;
}

.smk-article__meta {
  font-family: var(--smk-font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--smk-ink-faint);
  margin-bottom: 16px;
}

/* ── 404 ──────────────────────────────────────────────────────────────────── */
.smk-notfound {
  text-align: center;
  padding-block: 90px 110px;
}

.smk-notfound__code {
  font-family: var(--smk-font-display);
  font-size: clamp(70px, 18vw, 190px);
  line-height: 0.85;
  color: var(--smk-acid);
  margin-bottom: 14px;
}

.smk-notfound__actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 22px;
}

/* ── accordions ───────────────────────────────────────────────────────────── */
.smk-acc {
  margin-top: 30px;
  border-top: 1px solid var(--smk-line);
}

.smk-acc__item {
  border-bottom: 1px solid var(--smk-line);
}

.smk-acc__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 17px 0;
  font-family: var(--smk-font-ui);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--smk-ink);
}

.smk-acc__top[aria-expanded='true'] .smk-icon {
  transform: rotate(180deg);
}

.smk-acc__body {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s var(--smk-ease);
}

.smk-acc__body[data-open] {
  max-height: 1400px;
}

.smk-acc__inner {
  padding-bottom: 20px;
}

/* ── first-order popup ────────────────────────────────────────────────────── */
.smk-pop {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: var(--smk-gut);
}

.smk-pop__scrim {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 11, 0.72);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 0.32s var(--smk-ease);
}

.smk-pop[data-on] .smk-pop__scrim {
  opacity: 1;
}

.smk-pop__box {
  position: relative;
  width: min(100%, 460px);
  padding: 34px 30px 26px;
  background: var(--smk-surface);
  border: 1px solid var(--smk-line-strong);
  border-radius: var(--smk-r-lg);
  text-align: center;
  opacity: 0;
  transform: translateY(14px) scale(0.98);
  transition:
    opacity 0.32s var(--smk-ease),
    transform 0.32s var(--smk-ease);
}

.smk-pop[data-on] .smk-pop__box {
  opacity: 1;
  transform: none;
}

.smk-pop__x {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--smk-r-pill);
  color: var(--smk-ink-dim);
}

.smk-pop__x:hover {
  color: var(--smk-ink);
  background: var(--smk-surface-3);
}

.smk-pop__eyebrow {
  display: inline-block;
  font-family: var(--smk-font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--smk-acid);
  margin-bottom: 12px;
}

.smk-pop__title {
  font-size: clamp(24px, 5vw, 32px);
  margin-bottom: 10px;
}

.smk-pop__body {
  color: var(--smk-ink-dim);
  font-size: 14px;
  margin-bottom: 20px;
}

.smk-pop__form {
  display: grid;
  gap: 10px;
}

.smk-pop__msg:empty {
  display: none;
}

.smk-pop__msg {
  margin: 12px 0 0;
  font-size: 13px;
  color: var(--smk-ink-dim);
}

.smk-pop__reveal {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--smk-line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.smk-pop__code {
  font-family: var(--smk-font-mono);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--smk-acid);
  padding: 10px 18px;
  border: 1px dashed var(--smk-acid);
  border-radius: var(--smk-r-sm);
}

.smk-pop__note {
  flex-basis: 100%;
  margin: 4px 0 0;
  font-size: 11px;
  color: var(--smk-ink-faint);
}

.smk-pop__no {
  margin-top: 16px;
  font-size: 12px;
  color: var(--smk-ink-faint);
  text-decoration: underline;
}

.smk-pop__no:hover {
  color: var(--smk-ink-dim);
}

@media (prefers-reduced-motion: reduce) {
  .smk-pop__scrim,
  .smk-pop__box {
    transition-duration: 0.01ms;
    transform: none;
  }
}