/* axtlan.mx - Shop section (release 20261007). Uses the site tokens (--shell, --line, --orange, --muted, --paper).
   No prices, offers or delivery claims here: those live only on shop.axtlan.mx (SEO_RELEASE_GATE). */

.shop-scene {
  padding-block: var(--pad) 2rem;
  background:
    radial-gradient(circle at 18% 0%, rgb(255 106 36 / .10), transparent 30rem),
    radial-gradient(circle at 90% 60%, rgb(215 162 91 / .07), transparent 28rem),
    #070605;
}

.shop-heading,
.shop-atlas,
.shop-perks,
.shop-cta,
.shop-media {
  inline-size: var(--shell);
  margin-inline: auto;
}

.shop-atlas {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-block-start: clamp(3rem, 6vw, 6rem);
  background: var(--line);
  border: 1px solid var(--line);
}

.shop-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
  background: #0c0a08;
  color: inherit;
  text-decoration: none;
  transition: background .4s ease;
}

.shop-card:is(:hover, :focus-within) {
  background: linear-gradient(160deg, rgb(255 106 35 / .14), transparent 60%), #100c09;
}

.shop-card > img {
  display: block;
  inline-size: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  filter: saturate(.9) contrast(1.04);
  transition: filter .5s ease, transform .6s ease;
}

.shop-card:is(:hover, :focus-within) > img {
  filter: saturate(1.08) contrast(1.08);
}

.shop-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: .6rem;
  padding: 1.4rem 1.5rem 1.6rem;
}

.shop-card span,
.shop-media span.shop-kind,
.shop-share h3 {
  color: var(--orange);
  font-family: "Axtlan Detector", monospace;
  font-size: .6rem;
  letter-spacing: .11em;
}

.shop-card strong {
  font-size: clamp(1.2rem, 2vw, 2.2rem);
  line-height: .95;
  overflow-wrap: anywhere;
}

.shop-card p {
  margin: 0;
  color: var(--muted);
  font-size: .84rem;
}


.shop-card-link { margin-block-start: auto; align-self: flex-start; color: var(--orange-hot); }

.shop-card-link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.shop-factions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-block-start: auto;
}

.shop-factions a {
  position: relative;
  z-index: 1;
  padding: .45rem .8rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--paper);
  font-size: .78rem;
  text-decoration: none;
  transition: border-color .3s ease, background .3s ease;
}

.shop-factions a:is(:hover, :focus-visible) {
  border-color: var(--orange);
  background: rgb(255 106 36 / .12);
}

.shop-perks {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 2rem;
  margin-block: 2rem 0;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: .82rem;
}

.shop-perks li::before {
  content: "◆";
  margin-inline-end: .55rem;
  color: var(--orange);
  font-size: .6rem;
}

.shop-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
  margin-block-start: 2.2rem;
}



.shop-cta p {
  margin: 0;
  color: var(--muted);
  font-size: .78rem;
}

.shop-media {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  margin-block-start: clamp(3rem, 6vw, 5rem);
  background: var(--line);
  border: 1px solid var(--line);
}

.shop-video {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  align-items: center;
  margin: 0;
  background: #0c0a08;
}

.shop-video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
}

.shop-video-frame > img,
.shop-video-frame > iframe {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  border: 0;
  object-fit: cover;
}

.shop-video-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  inline-size: 100%;
  padding: 0;
  border: 0;
  background: linear-gradient(180deg, transparent 40%, rgb(0 0 0 / .55));
  color: var(--paper);
  cursor: pointer;
}




.shop-video figcaption {
  display: grid;
  gap: .8rem;
  padding: clamp(1.4rem, 3vw, 3rem);
}

.shop-video figcaption strong {
  font-size: clamp(1rem, 1.6vw, 1.5rem);
  line-height: 1.05;
}

.shop-video figcaption small {
  color: var(--muted);
  font-size: .72rem;
}

.shop-video figcaption a {
  color: var(--orange-hot);
  font-size: .8rem;
  text-decoration: none;
}

.shop-share {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem;
  background: #0c0a08;
}

.shop-share h3 {
  margin: 0;
}

.shop-share-list {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
}

.shop-share-list a,
.shop-share-list button {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .55rem .9rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--paper);
  font: inherit;
  font-size: .78rem;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .3s ease, background .3s ease;
}

.shop-share-list :is(a, button):is(:hover, :focus-visible) {
  border-color: var(--orange);
  background: rgb(255 106 36 / .12);
}

.shop-share-list svg {
  inline-size: 1rem;
  block-size: 1rem;
  fill: currentColor;
}

.shop-share-status {
  min-block-size: 1.2em;
  margin: 0;
  color: var(--muted);
  font-size: .75rem;
}

body[data-theme="light"] .shop-scene {
  background:
    radial-gradient(circle at 18% 0%, rgb(255 106 36 / .10), transparent 30rem),
    #f3e8d8;
}

body[data-theme="light"] :is(.shop-card, .shop-video, .shop-share) {
  background: #fbf4ea;
}

body[data-theme="light"] .shop-share-list :is(a, button),
body[data-theme="light"] .shop-factions a {
  color: #1d1610;
}

@media (max-width: 1100px) {
  .shop-atlas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .shop-video {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 620px) {
  .shop-atlas {
    grid-template-columns: minmax(0, 1fr);
  }

  .shop-card > img {
    aspect-ratio: 16 / 9;
  }

  .shop-cta {
    flex-direction: column;
    align-items: stretch;
  }

}

@media (prefers-reduced-motion: reduce) {
  .shop-card,
  .shop-card > img,
  .shop-share-list :is(a, button) {
    transition: none;
  }
}