/* ==========================================
   ENADKO HOUSE I — AWAKENING
   MASTER STYLESHEET
   ========================================== */


/* ==========================================
   GLOBAL
   ========================================== */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: #000;
  color: #fff;
  font-family: Georgia, "Times New Roman", serif;
  overflow-x: hidden;
}


/* ==========================================
   ENADKO BACKGROUND EMBLEM
   ========================================== */

body::before {
  content: "";

  position: fixed;
  inset: 0;

  background:
    url("https://enadko.com/content/images/size/w1200/2025/07/hero.png")
    center top / 520px auto no-repeat;

  background-attachment: fixed;

  opacity: 0.04;

  pointer-events: none;

  z-index: -2;
}


/* ==========================================
   PARTICLE FIELD
   ========================================== */

.particles {
  position: fixed;
  inset: 0;

  background:
    url("https://enadko.com/content/images/2025/07/particles-glow.gif")
    center / cover no-repeat;

  opacity: 0.05;

  pointer-events: none;

  z-index: -1;
}


/* ==========================================
   MAIN OVERLAY
   ========================================== */

.overlay {
  min-height: 100vh;

  background:
    rgba(0, 0, 0, 0.88);

  backdrop-filter: blur(6px);

  padding:
    4rem 1.2rem 6rem;
}


/* ==========================================
   HERO
   ========================================== */

.hero {
  min-height: 90vh;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  text-align: center;

  animation:
    fadeIn 1.8s ease;
}

.brand {
  letter-spacing: 0.4em;

  font-size: 1.1rem;

  color: #fff;

  margin-bottom: 3rem;
}

.eyebrow {
  color: #d4af37;

  letter-spacing: 0.25em;

  text-transform: uppercase;

  font-size: 0.75rem;

  margin-bottom: 1rem;
}

h1 {
  font-size:
    clamp(3.5rem, 10vw, 8rem);

  letter-spacing: 0.12em;

  margin: 0;

  color: #d4af37;

  text-shadow:
    0 0 25px
    rgba(212, 175, 55, 0.15);
}

h2 {
  font-size:
    clamp(2rem, 5vw, 3.5rem);

  font-weight: 400;

  margin-top: 0;
}

.house {
  margin-top: 1.5rem;

  letter-spacing: 0.25em;

  color: #aaa;
}

.hero-description {
  margin-top: 2rem;

  font-size: 1.2rem;

  line-height: 1.8;

  color: #ddd;
}


/* ==========================================
   ARTIFACT NUMBER
   ========================================== */

.artifact-number {
  margin-top: 2rem;

  color: #d4af37;

  letter-spacing: 0.2em;

  font-size: 0.85rem;

  min-height: 1.2rem;
}


/* ==========================================
   LIVE INVENTORY
   ========================================== */

.inventory-display {
  margin-top: 0.8rem;

  text-align: center;
}

.inventory-count {
  color: #fff;

  font-size: 1.15rem;

  font-weight: 600;

  letter-spacing: 0.08em;
}

.inventory-status {
  margin-top: 0.8rem;

  color: #d4af37;

  font-size: 0.9rem;

  letter-spacing: 0.12em;

  text-transform: uppercase;

  text-shadow:
    0 0 10px
    rgba(212, 175, 55, 0.25);
}

.inventory-status.sold-out {
  color: #d4af37;

  font-weight: bold;

  text-shadow:
    0 0 15px
    rgba(212, 175, 55, 0.55);
}

.inventory-status.loading {
  color: #999;
}


/* ==========================================
   BUTTONS
   ========================================== */

.cta {
  display: inline-block;

  margin-top: 2rem;

  padding: 1rem 2rem;

  border:
    1px solid #d4af37;

  color: #d4af37;

  background: transparent;

  text-decoration: none;

  letter-spacing: 0.15em;

  text-transform: uppercase;

  transition:
    0.3s ease;

  font-family:
    Georgia,
    "Times New Roman",
    serif;
}

.cta:hover {
  background: #d4af37;

  color: #000;

  box-shadow:
    0 0 25px
    rgba(212, 175, 55, 0.4);
}

.cta:focus-visible {
  outline:
    2px solid #d4af37;

  outline-offset: 4px;
}


/* ==========================================
   SECTIONS
   ========================================== */

.section {
  max-width: 1100px;

  margin:
    0 auto 10rem;

  padding:
    4rem 1rem;
}


/* ==========================================
   ARTIFACT GRID
   ========================================== */

.artifact-grid {
  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 4rem;

  align-items: center;
}


/* ==========================================
   ARTIFACT IMAGE
   ========================================== */

.artifact-image {
  min-height: 500px;

  display: flex;

  align-items: center;

  justify-content: center;

  text-align: center;

  border:
    1px solid
    rgba(212, 175, 55, 0.3);

  padding: 2rem;

  background:
    rgba(255, 255, 255, 0.015);

  overflow: hidden;
}

.artifact-image img {
  display: block;

  width: 100%;

  max-width: 520px;

  height: auto;

  object-fit: contain;

  margin: 0 auto;

  filter:
    drop-shadow(
      0 0 25px
      rgba(212, 175, 55, 0.12)
    );
}


/* ==========================================
   ARTIFACT COPY
   ========================================== */

.artifact-copy p {
  color: #ccc;

  line-height: 1.8;
}

.gold {
  color: #d4af37 !important;
}


/* ==========================================
   QUOTES
   ========================================== */

.quote {
  max-width: 700px;

  font-size: 1.25rem;

  line-height: 2;

  color: #bbb;

  font-style: italic;
}


/* ==========================================
   HOUSE DETAILS
   ========================================== */

.details {
  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 1rem;

  margin-top: 4rem;
}

.detail {
  border-top:
    1px solid
    rgba(212, 175, 55, 0.35);

  padding-top: 1rem;

  color: #aaa;

  line-height: 1.8;
}

.detail strong {
  display: block;

  color: #d4af37;

  margin-bottom: 0.5rem;
}


/* ==========================================
   PHILOSOPHY
   ========================================== */

.philosophy {
  text-align: center;
}

.philosophy .quote {
  margin-left: auto;

  margin-right: auto;
}


/* ==========================================
   EDITION
   ========================================== */

.edition {
  text-align: center;
}

.edition-number {
  font-size:
    clamp(8rem, 20vw, 15rem);

  line-height: 1;

  color: #d4af37;

  text-shadow:
    0 0 40px
    rgba(212, 175, 55, 0.2);
}


/* ==========================================
   PREORDER
   ========================================== */

.preorder {
  max-width: 700px;
}

.preorder-form {
  margin-top: 3rem;
}

.preorder-form label {
  display: block;

  margin-top: 1.5rem;

  color: #ccc;
}

.preorder-form input,
.preorder-form select,
.preorder-form textarea {
  width: 100%;

  margin-top: 0.5rem;

  padding: 1rem;

  background: #111;

  border:
    1px solid
    rgba(212, 175, 55, 0.3);

  color: #fff;

  border-radius: 4px;

  font-size: 1rem;

  font-family:
    Georgia,
    "Times New Roman",
    serif;
}

.preorder-form textarea {
  resize: vertical;

  min-height: 120px;
}

.preorder-form input:focus,
.preorder-form select:focus,
.preorder-form textarea:focus {
  outline: none;

  border-color: #d4af37;

  box-shadow:
    0 0 10px
    rgba(212, 175, 55, 0.15);
}

.checkout-subheading {
  margin-top: 3rem;

  padding-top: 2rem;

  border-top:
    1px solid
    rgba(212, 175, 55, 0.15);
}


/* ==========================================
   ORDER SUMMARY
   ========================================== */

.order-summary {
  margin-top: 3rem;

  border-top:
    1px solid
    rgba(212, 175, 55, 0.3);

  border-bottom:
    1px solid
    rgba(212, 175, 55, 0.3);

  padding:
    1rem 0;
}

.order-row {
  display: flex;

  justify-content: space-between;

  gap: 1rem;

  padding: 0.8rem 0;

  color: #aaa;
}

.order-row.total {
  color: #d4af37;

  font-size: 1.1rem;

  font-weight: 600;
}


/* ==========================================
   CHECKOUT MESSAGE
   ========================================== */

.checkout-message {
  margin-top: 1.5rem;

  padding: 1rem;

  border:
    1px solid
    rgba(212, 175, 55, 0.3);

  background:
    rgba(212, 175, 55, 0.04);

  color: #ddd;

  line-height: 1.6;

  text-align: center;
}


/* ==========================================
   RESERVE BUTTON
   ========================================== */

.preorder-form .cta {
  width: 100%;

  cursor: pointer;
}


/* ==========================================
   PAYMENT NOTE
   ========================================== */

.payment-note {
  text-align: center;

  color: #777;

  margin-top: 1rem;

  font-size: 0.85rem;

  line-height: 1.6;
}


/* ==========================================
   SOLD-OUT STATE
   ========================================== */

.sold-out-state {
  max-width: 640px;

  margin:
    2rem auto;

  padding:
    3rem 2rem;

  text-align: center;

  background:
    linear-gradient(
      145deg,
      rgba(255, 215, 0, 0.06),
      rgba(255, 255, 255, 0.02)
    );

  border:
    1px solid
    rgba(212, 175, 55, 0.35);

  border-radius: 14px;

  box-shadow:
    0 0 25px
    rgba(212, 175, 55, 0.12),

    inset 0 0 25px
    rgba(212, 175, 55, 0.03);
}

.sold-out-state .eyebrow {
  color: #d4af37;
}

.sold-out-state h2 {
  color: #d4af37;

  font-size: 2rem;

  letter-spacing: 0.08em;

  margin-bottom: 1.5rem;

  text-shadow:
    0 0 15px
    rgba(212, 175, 55, 0.35);
}

.sold-out-state p {
  color: #c8c8c8;

  line-height: 1.7;

  max-width: 520px;

  margin-left: auto;

  margin-right: auto;
}

.sold-out-state p:first-of-type {
  color: #fff;

  font-weight: 600;

  letter-spacing: 0.06em;
}

.archive-button {
  display: inline-block;

  margin-top: 1.5rem;

  text-decoration: none;
}


/* ==========================================
   FOOTER
   ========================================== */

footer {
  text-align: center;

  padding:
    5rem 1rem 2rem;

  border-top:
    1px solid
    rgba(212, 175, 55, 0.15);

  color: #777;
}

.footer-brand {
  color: #d4af37;

  letter-spacing: 0.4em;

  margin-bottom: 1rem;
}

.footer-statement {
  color: #aaa;

  margin-bottom: 1rem;
}

.footer-small {
  letter-spacing: 0.2em;

  font-size: 0.75rem;
}

.support-link {
  margin-top: 2rem;
}

.support-link a {
  color: #d4af37;
}


/* ==========================================
   ANIMATION
   ========================================== */

@keyframes fadeIn {

  from {
    opacity: 0;

    transform:
      translateY(30px);
  }

  to {
    opacity: 1;

    transform:
      translateY(0);
  }

}


/* ==========================================
   TABLET / MOBILE
   ========================================== */

@media (max-width: 700px) {

  .artifact-grid {
    grid-template-columns: 1fr;

    gap: 2rem;
  }

  .details {
    grid-template-columns: 1fr;
  }

  h1 {
    font-size: 3.5rem;
  }

  .artifact-image {
    min-height: 350px;
  }

  .section {
    margin-bottom: 6rem;
  }

}


/* ==========================================
   SMALL MOBILE
   ========================================== */

@media (max-width: 480px) {

  .overlay {
    padding:
      2.5rem 1rem 4rem;
  }

  .brand {
    margin-bottom: 2rem;
  }

  h1 {
    font-size: 2.8rem;
  }

  .house {
    font-size: 0.8rem;

    letter-spacing: 0.16em;
  }

  .hero-description {
    font-size: 1rem;
  }

  .artifact-number {
    font-size: 0.72rem;
  }

  .inventory-count {
    font-size: 1rem;
  }

  .inventory-status {
    font-size: 0.75rem;
  }

  .artifact-image {
    min-height: 280px;

    padding: 1rem;
  }

  .sold-out-state {
    padding:
      2rem 1.2rem;
  }

  .sold-out-state h2 {
    font-size: 1.5rem;
  }

  .sold-out-state .eyebrow {
    font-size: 0.7rem;
  }

  .order-row {
    font-size: 0.9rem;
  }

}


/* ==========================================
   ENADKO PAYMENT SUCCESS PAGE
   ========================================== */

.payment-success-page {
  min-height: 100vh;
  width: 100%;

  display: flex;

  align-items: center;
  justify-content: center;

  padding: 40px 20px;

  background: #000;
  color: #fff;

  text-align: center;
}

.payment-success-card {
  width: 100%;
  max-width: 650px;

  padding: 45px 35px;

  border:
    1px solid
    rgba(212, 175, 55, 0.45);

  background:
    rgba(15, 15, 15, 0.96);

  box-shadow:
    0 0 40px
    rgba(212, 175, 55, 0.12),

    inset 0 0 30px
    rgba(212, 175, 55, 0.03);
}

.payment-success-icon {
  width: 75px;
  height: 75px;

  margin: 0 auto 25px;

  display: flex;

  align-items: center;
  justify-content: center;

  border:
    2px solid #d4af37;

  border-radius: 50%;

  color: #d4af37;

  font-size: 42px;

  font-weight: bold;
}

.payment-success-card h1 {
  margin: 0 0 20px;

  font-size:
    clamp(2rem, 6vw, 4rem);

  color: #d4af37;

  letter-spacing: 0.08em;
}

.payment-success-message {
  color: #ccc;

  line-height: 1.8;

  margin-bottom: 30px;
}

.payment-success-card .order-summary {
  margin: 30px 0;

  padding: 15px 0;

  border-top:
    1px solid
    rgba(212, 175, 55, 0.3);

  border-bottom:
    1px solid
    rgba(212, 175, 55, 0.3);
}

.payment-success-card .order-row {
  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 20px;

  padding: 12px 0;

  text-align: left;
}

.payment-success-card .order-row span {
  color: #999;
}

.payment-success-card .order-row strong {
  color: #fff;

  text-align: right;

  word-break: break-word;
}

.artifact-message {
  margin-top: 30px;

  padding: 25px;

  border:
    1px solid
    rgba(212, 175, 55, 0.2);

  background:
    rgba(212, 175, 55, 0.04);
}

.artifact-message h2 {
  color: #d4af37;

  font-size: 1.5rem;

  margin-bottom: 15px;
}

.artifact-message p {
  color: #ccc;

  line-height: 1.7;
}

.reference {
  margin-top: 30px;

  color: #777;

  font-size: 0.85rem;

  line-height: 1.6;

  word-break: break-word;
}

.reference strong {
  color: #d4af37;
}

.payment-result {
  min-height: 100vh;

  width: 100%;

  display: flex;

  align-items: center;
  justify-content: center;

  padding: 40px 20px;

  background: #000;

  color: #fff;

  text-align: center;
}

.payment-result.error {
  flex-direction: column;
}

.payment-result h1 {
  color: #d4af37;

  font-size:
    clamp(2rem, 6vw, 4rem);

  margin-bottom: 20px;
}

.payment-result p {
  color: #ccc;

  line-height: 1.7;
}


/* ==========================================
   PAYMENT SUCCESS — MOBILE
   ========================================== */

@media (max-width: 600px) {

  .payment-success-card {
    padding: 35px 20px;
  }

  .payment-success-card .order-row {
    flex-direction: column;

    align-items: flex-start;

    gap: 5px;
  }

  .payment-success-card .order-row strong {
    text-align: left;
  }

}


/* ==========================================================
   ENADKO HOUSE I — PREORDER BRAND REFINEMENT
   VISUAL ONLY — DOES NOT ALTER EXISTING FUNCTIONALITY
   ========================================================== */


/* ----------------------------------------------------------
   OFFICIAL ENADKO EMBLEM
   ---------------------------------------------------------- */

.hero::before {
  content: "";

  display: block;

  width: clamp(110px, 14vw, 170px);
  height: clamp(110px, 14vw, 170px);

  margin: 0 auto 2rem;

  background-image:
    url("https://enadko.com/content/images/2026/08/ENADKO-OFFICIAL-EMBLEM--6---1-.png");

  background-repeat: no-repeat;

  background-position: center;

  background-size: contain;

  filter:
    drop-shadow(
      0 0 18px
      rgba(212, 175, 55, 0.14)
    );

  opacity: 0.96;

  pointer-events: none;
}


/* ----------------------------------------------------------
   SHOP ENADKO — SECONDARY BRAND MARK
   ---------------------------------------------------------- */

.hero::after {
  content: "";

  display: block;

  width: clamp(130px, 16vw, 190px);
  height: clamp(45px, 5vw, 65px);

  margin: 2rem auto 0;

  background-image: none;

  background-repeat: no-repeat;

  background-position: center;

  background-size: contain;

  filter:
    drop-shadow(
      0 0 16px
      rgba(212, 175, 55, 0.10)
    );

  opacity: 0.92;

  pointer-events: none;
}


/* ----------------------------------------------------------
   HERO SPACING REFINEMENT
   ---------------------------------------------------------- */

.hero .brand {
  margin-bottom: 1.5rem;
}


/* ----------------------------------------------------------
   EMBLEM PRESENCE ON THE ARTIFACT SECTION
   ---------------------------------------------------------- */

.artifact-copy::before {
  content: "";

  display: block;

  width: 54px;
  height: 54px;

  margin-bottom: 1.4rem;

  background-image: none;

  background-repeat: no-repeat;

  background-position: center;

  background-size: contain;

  opacity: 0.78;

  filter:
    drop-shadow(
      0 0 12px
      rgba(212, 175, 55, 0.12)
    );

  pointer-events: none;
}


/* ----------------------------------------------------------
   SHOP ENADKO MARK ABOVE PREORDER AREA
   ---------------------------------------------------------- */

.preorder::before {
  content: "";

  display: block;

  width: 150px;
  height: 52px;

  margin: 0 auto 1.8rem;

  background-image: none;

  background-repeat: no-repeat;

  background-position: center;

  background-size: contain;

  opacity: 0.88;

  filter:
    drop-shadow(
      0 0 14px
      rgba(212, 175, 55, 0.10)
    );

  pointer-events: none;
}


/* ----------------------------------------------------------
   MOBILE REFINEMENT
   ---------------------------------------------------------- */

@media (max-width: 700px) {

  .hero::before {
    width: 115px;

    height: 115px;

    margin-bottom: 1.5rem;
  }

  .hero::after {
    width: 145px;

    height: 48px;

    margin-top: 1.5rem;
  }

  .artifact-copy::before {
    width: 46px;

    height: 46px;

    margin-left: auto;

    margin-right: auto;
  }

  .preorder::before {
    width: 135px;

    height: 46px;

    margin-bottom: 1.5rem;
  }

}


/* ----------------------------------------------------------
   SMALL MOBILE
   ---------------------------------------------------------- */

@media (max-width: 480px) {

  .hero::before {
    width: 95px;

    height: 95px;

    margin-bottom: 1.2rem;
  }

  .hero::after {
    width: 125px;

    height: 42px;

    margin-top: 1.2rem;
  }

  .artifact-copy::before {
    width: 40px;

    height: 40px;
  }

  .preorder::before {
    width: 120px;

    height: 42px;
  }

}

/* ==========================================================
   ENADKO HOUSE I — SACRED ARTIFACT SELECTOR
   Premium visual layer
   ========================================================== */

:root {
  --enadko-black: #0a0a0a;
  --enadko-obsidian: #11110f;
  --enadko-bone: #f5f3ea;
  --enadko-gold: #d4af37;
  --enadko-gold-soft: rgba(212, 175, 55, 0.24);
  --enadko-line: rgba(212, 175, 55, 0.16);
  --enadko-muted: #92908a;
}


/* ----------------------------------------------------------
   ARTIFACT INTRODUCTION
   ---------------------------------------------------------- */

.artifact-choice-intro {
  margin: 0 0 1.4rem;
}

.artifact-choice-kicker {
  color: var(--enadko-bone);
  font-size: clamp(1.45rem, 4vw, 2rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.2;
}

.artifact-choice-intro p {
  max-width: 560px;
  margin: 0.75rem 0 0;
  color: var(--enadko-muted);
  font-size: 0.9rem;
  line-height: 1.75;
}


/* ----------------------------------------------------------
   ARTIFACT CARDS
   ---------------------------------------------------------- */

.artifact-selector {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
  margin-top: 1.5rem;
}

.artifact-option {
  position: relative;

  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 1rem;

  min-height: 132px;
  padding: 1.2rem 1.1rem;

  border: 1px solid rgba(212, 175, 55, 0.18);
  border-radius: 2px;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.035),
      rgba(255, 255, 255, 0.008)
    );

  color: var(--enadko-bone);
  text-align: left;

  cursor: pointer;

  transition:
    border-color 260ms ease,
    background 260ms ease,
    transform 260ms ease,
    box-shadow 260ms ease;
}


/* Hover */

.artifact-option:hover {
  border-color: rgba(212, 175, 55, 0.48);
  transform: translateY(-2px);
}


/* Keyboard accessibility */

.artifact-option:focus-visible {
  outline: 1px solid var(--enadko-gold);
  outline-offset: 4px;
}


/* Selected state */

.artifact-option.is-selected {
  border-color: var(--enadko-gold);

  background:
    linear-gradient(
      145deg,
      rgba(212, 175, 55, 0.10),
      rgba(255, 255, 255, 0.018)
    );

  box-shadow:
    0 0 0 1px rgba(212, 175, 55, 0.10),
    0 14px 50px rgba(0, 0, 0, 0.24);
}


/* ----------------------------------------------------------
   COLOR SWATCHES
   ---------------------------------------------------------- */

.artifact-option-swatch {
  width: 25px;
  height: 25px;

  border-radius: 50%;

  border: 1px solid rgba(255, 255, 255, 0.24);

  box-shadow:
    inset 0 0 0 4px rgba(0, 0, 0, 0.16);
}


/* Obsidian */

.artifact-option-black .artifact-option-swatch {
  background: #0b0b0b;
}


/* Bone */

.artifact-option-white .artifact-option-swatch {
  background: #f3f0e6;

  border-color:
    rgba(212, 175, 55, 0.40);
}


/* ----------------------------------------------------------
   ARTIFACT TYPOGRAPHY
   ---------------------------------------------------------- */

.artifact-option-copy {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  min-width: 0;
}

.artifact-option-name {
  color: var(--enadko-bone);

  font-size: 0.95rem;
  letter-spacing: 0.10em;

  text-transform: uppercase;
}

.artifact-option-edition {
  color: var(--enadko-gold);

  font-size: 0.74rem;
  letter-spacing: 0.16em;
}

.artifact-option-meta {
  color: #85837d;

  font-size: 0.68rem;
  letter-spacing: 0.14em;

  text-transform: uppercase;
}


/* ----------------------------------------------------------
   SELECT / SELECTED LABEL
   ---------------------------------------------------------- */

.artifact-option-status {
  align-self: end;

  color: #6f6d67;

  font-size: 0.61rem;
  letter-spacing: 0.16em;

  text-transform: uppercase;
}

.artifact-option.is-selected .artifact-option-status {
  color: var(--enadko-gold);
}

.artifact-option.is-selected
.artifact-option-status::before {
  content: "✓ ";
}


/* ----------------------------------------------------------
   HIDE NATIVE SELECT VISUALLY
   KEEP IT FUNCTIONAL FOR EXISTING CHECKOUT
   ---------------------------------------------------------- */

.artifact-color-native,
.visually-hidden-field-label {
  position: absolute !important;

  width: 1px !important;
  height: 1px !important;

  padding: 0 !important;
  margin: -1px !important;

  overflow: hidden !important;

  clip: rect(0, 0, 0, 0) !important;

  white-space: nowrap !important;

  border: 0 !important;
}


/* ----------------------------------------------------------
   SELECTION CONFIRMATION
   ---------------------------------------------------------- */

.artifact-selection-confirmation {
  display: flex;

  justify-content: space-between;

  gap: 1rem;

  margin-top: 0.9rem;
  padding: 0.9rem 0;

  border-bottom:
    1px solid rgba(212, 175, 55, 0.10);

  color: #77756f;

  font-size: 0.68rem;
  letter-spacing: 0.12em;

  text-transform: uppercase;
}

.artifact-selection-confirmation strong {
  color: var(--enadko-gold);

  font-weight: 500;

  text-align: right;
}


/* ----------------------------------------------------------
   CHECKOUT FORM REFINEMENT
   ---------------------------------------------------------- */

.preorder-form input,
.preorder-form select,
.preorder-form textarea {
  background:
    rgba(255, 255, 255, 0.018);

  border-color:
    rgba(212, 175, 55, 0.20);

  border-radius: 2px;

  transition:
    border-color 220ms ease,
    box-shadow 220ms ease,
    background 220ms ease;
}

.preorder-form input:hover,
.preorder-form select:hover,
.preorder-form textarea:hover {
  border-color:
    rgba(212, 175, 55, 0.34);
}

.preorder-form input:focus,
.preorder-form select:focus,
.preorder-form textarea:focus {
  background:
    rgba(212, 175, 55, 0.025);
}


/* ----------------------------------------------------------
   ORDER SUMMARY
   ---------------------------------------------------------- */

.order-summary {
  margin-top: 3.4rem;

  padding: 1.4rem 0;

  border-top-color:
    rgba(212, 175, 55, 0.28);

  border-bottom-color:
    rgba(212, 175, 55, 0.28);
}

.order-summary-heading {
  margin-bottom: 0.65rem;

  color: var(--enadko-bone);

  font-size: 0.7rem;
  letter-spacing: 0.22em;

  text-transform: uppercase;
}

.order-row {
  padding: 0.72rem 0;

  font-size: 0.84rem;
}

.order-row span:last-child {
  color: #c2c0b9;
  text-align: right;
}

.order-row.total {
  margin-top: 0.35rem;

  padding-top: 1rem;

  border-top:
    1px solid rgba(212, 175, 55, 0.10);
}


/* ----------------------------------------------------------
   RESERVE BUTTON
   ---------------------------------------------------------- */

.preorder-form .cta {
  min-height: 58px;

  margin-top: 1.8rem;

  border-radius: 1px;

  letter-spacing: 0.22em;

  text-transform: uppercase;

  transition:
    transform 220ms ease,
    box-shadow 220ms ease,
    opacity 220ms ease;
}

.preorder-form .cta:not(:disabled):hover {
  transform: translateY(-2px);

  box-shadow:
    0 12px 36px rgba(0, 0, 0, 0.32);
}

.preorder-form .cta:disabled {
  cursor: not-allowed;

  opacity: 0.42;
}


/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media (max-width: 700px) {

  .artifact-selector {
    grid-template-columns: 1fr;
  }

  .artifact-option {
    min-height: 116px;
  }

  .artifact-selection-confirmation {
    align-items: flex-start;

    flex-direction: column;
  }

  .artifact-selection-confirmation strong {
    text-align: left;
  }

}


@media (max-width: 480px) {

  .artifact-option {
    grid-template-columns: 24px 1fr auto;

    gap: 0.75rem;

    padding: 1rem 0.85rem;
  }

  .artifact-option-name {
    font-size: 0.82rem;
  }

  .artifact-option-edition {
    font-size: 0.68rem;
  }

  .artifact-option-meta,
  .artifact-option-status {
    font-size: 0.58rem;
  }

  .artifact-choice-kicker {
    font-size: 1.25rem;
  }

}

/* ==========================================================
   ENADKO HOUSE I — SOLD OUT ARTIFACT STATE
   ========================================================== */

.artifact-option.is-sold-out {
  cursor: not-allowed;
  opacity: 0.42;
  border-color: rgba(255, 255, 255, 0.08);
}

.artifact-option.is-sold-out:hover {
  transform: none;
  border-color: rgba(255, 255, 255, 0.08);
}

.artifact-option.is-sold-out .artifact-option-status {
  color: #777;
}

.artifact-option.is-sold-out .artifact-option-edition {
  color: #666;
}
/* ==========================================================
   ENADKO HOUSE I — FORM OPTION VISIBILITY
   Preserve native dropdown functionality while ensuring
   option text remains visible across browsers.
   ========================================================== */

.preorder-form select {
  color: #ffffff;
  background-color: #111111;
}

.preorder-form select option {
  color: #ffffff;
  background-color: #111111;
  font-family: Georgia, "Times New Roman", serif;
}

.preorder-form select option:checked {
  color: #ffffff;
  background-color: #1a1a1a;
}

.preorder-form select:invalid {
  color: #999999;
}

.preorder-form select:valid {
  color: #ffffff;
}

/* =========================================================
   ENADKO HOUSE I — SACRED EDITORIAL FACELIFT
   Visual layer only.
   Does not modify checkout or allocation logic.
   ========================================================= */


/* ---------------------------------------------------------
   AWAKENING STORY
   --------------------------------------------------------- */

.awakening-story {
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
}

.awakening-story h2 {
  max-width: 850px;
}

.story-lead {
  max-width: 760px;
  font-size: 1.08rem;
  line-height: 1.9;
  opacity: 0.86;
  margin-bottom: 3rem;
}


/* ---------------------------------------------------------
   EDITORIAL GALLERY
   Full image visible — NEVER crop.
   --------------------------------------------------------- */

.editorial-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin: 3rem 0;
}

.editorial-frame {
  margin: 0;
  border: 1px solid rgba(201, 176, 55, 0.28);
  background: #0b0b0b;
  overflow: hidden;
}

.editorial-frame img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: contain;
}

.editorial-frame figcaption {
  padding: 14px 18px;
  border-top: 1px solid rgba(201, 176, 55, 0.18);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #c9b037;
}

.story-copy {
  max-width: 760px;
  margin: 3rem auto 0;
  line-height: 1.9;
}

.story-signature {
  letter-spacing: 0.16em;
  text-transform: uppercase;
}


/* ---------------------------------------------------------
   LIVE PRODUCT PREVIEW
   --------------------------------------------------------- */

.artifact-preview {
  margin-top: 28px;
  border: 1px solid rgba(201, 176, 55, 0.35);
  background: #080808;
}

.artifact-preview-media {
  width: 100%;
  background: #050505;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.artifact-preview-media img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: center;
}

.artifact-preview-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 20px 20px;
  border-top: 1px solid rgba(201, 176, 55, 0.18);
}

.artifact-preview-kicker {
  color: #c9b037;
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.artifact-preview-meta strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.35rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#artifact-preview-edition {
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  opacity: 0.65;
}


/* ---------------------------------------------------------
   HOUSE AUTHENTICITY NOTE
   --------------------------------------------------------- */

.house-visual-note {
  margin: 32px 0;
  padding: 22px 24px;
  border-left: 1px solid #c9b037;
  background: rgba(255, 255, 255, 0.025);
}

.house-visual-note-kicker {
  display: block;
  margin-bottom: 12px;
  color: #c9b037;
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.house-visual-note p {
  margin: 0 0 10px;
  line-height: 1.7;
  opacity: 0.75;
}

.house-visual-note p:last-child {
  margin-bottom: 0;
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 760px) {

  .editorial-gallery {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .story-copy {
    margin-top: 2rem;
  }

  .artifact-preview {
    margin-top: 20px;
  }

  .artifact-preview-meta {
    padding: 16px;
  }

  .house-visual-note {
    padding: 18px;
  }

}

/* ==========================================================
   ENADKO HOUSE I — SACRED ARTIFACT SELECTOR REFINEMENT
   VISUAL ONLY
   Does not alter checkout/backend functionality.
   ========================================================== */


/* ----------------------------------------------------------
   ARTIFACT SELECTION INTRO
   ---------------------------------------------------------- */

.artifact-choice-intro {
  max-width: 760px;
  margin: 0 auto 1.75rem;
  text-align: center;
}

.artifact-choice-kicker {
  margin-bottom: 0.55rem;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(1.25rem, 2.2vw, 1.7rem);

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;

  color:
    #f5f5f0;
}

.artifact-choice-intro p {
  max-width: 620px;
  margin: 0 auto;

  font-size:
    0.92rem;

  line-height:
    1.75;

  color:
    rgba(245, 245, 240, 0.66);
}


/* ----------------------------------------------------------
   PREMIUM COLOR SELECTOR
   ---------------------------------------------------------- */

.artifact-selector {
  width: 100%;
  max-width: 780px;

  margin:
    0 auto;

  display:
    grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap:
    14px;

  padding:
    8px;

  border:
    1px solid
    rgba(201, 176, 55, 0.22);

  background:
    rgba(255, 255, 255, 0.025);

  box-shadow:
    0 24px 70px
    rgba(0, 0, 0, 0.30);

  border-radius:
    18px;
}


/* ----------------------------------------------------------
   COLOR OPTION
   ---------------------------------------------------------- */

.artifact-option {
  position: relative;

  min-height:
    142px;

  padding:
    24px 22px;

  display:
    flex;

  align-items:
    center;

  gap:
    16px;

  border:
    1px solid
    rgba(245, 245, 240, 0.10);

  border-radius:
    13px;

  background:
    rgba(255, 255, 255, 0.025);

  color:
    #f5f5f0;

  text-align:
    left;

  cursor:
    pointer;

  transition:
    border-color 220ms ease,
    background 220ms ease,
    transform 220ms ease,
    box-shadow 220ms ease;
}


.artifact-option:hover {
  transform:
    translateY(-2px);

  border-color:
    rgba(201, 176, 55, 0.45);

  background:
    rgba(201, 176, 55, 0.055);
}


.artifact-option:focus-visible {
  outline:
    2px solid
    #c9b037;

  outline-offset:
    3px;
}


/* ----------------------------------------------------------
   SELECTED STATE
   ---------------------------------------------------------- */

.artifact-option.is-selected {
  border-color:
    #c9b037;

  background:
    linear-gradient(
      135deg,
      rgba(201, 176, 55, 0.12),
      rgba(255, 255, 255, 0.035)
    );

  box-shadow:
    inset 0 0 0 1px
    rgba(201, 176, 55, 0.10),
    0 14px 40px
    rgba(0, 0, 0, 0.28);
}


.artifact-option.is-selected::after {
  content:
    "";

  position:
    absolute;

  top:
    12px;

  right:
    12px;

  width:
    7px;

  height:
    7px;

  border-radius:
    50%;

  background:
    #c9b037;

  box-shadow:
    0 0 14px
    rgba(201, 176, 55, 0.65);
}


/* ----------------------------------------------------------
   SWATCH
   ---------------------------------------------------------- */

.artifact-option-swatch {
  flex:
    0 0 52px;

  width:
    52px;

  height:
    52px;

  border-radius:
    50%;

  border:
    1px solid
    rgba(245, 245, 240, 0.20);

  box-shadow:
    inset 0 0 0 4px
    rgba(0, 0, 0, 0.12);
}


.artifact-option-black
.artifact-option-swatch {
  background:
    #111111;
}


.artifact-option-white
.artifact-option-swatch {
  background:
    #f3f0e7;

  border-color:
    rgba(20, 20, 20, 0.28);
}


/* ----------------------------------------------------------
   OPTION COPY
   ---------------------------------------------------------- */

.artifact-option-copy {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    4px;
}


.artifact-option-name {
  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    1.05rem;

  letter-spacing:
    0.04em;

  text-transform:
    uppercase;
}


.artifact-option-edition {
  font-size:
    0.78rem;

  letter-spacing:
    0.12em;

  color:
    #c9b037;

  text-transform:
    uppercase;
}


.artifact-option-meta {
  font-size:
    0.75rem;

  color:
    rgba(245, 245, 240, 0.55);
}


/* ----------------------------------------------------------
   STATUS
   ---------------------------------------------------------- */

.artifact-option-status {
  margin-left:
    auto;

  align-self:
    flex-start;

  padding:
    6px 9px;

  border:
    1px solid
    rgba(245, 245, 240, 0.12);

  border-radius:
    999px;

  font-size:
    0.62rem;

  letter-spacing:
    0.12em;

  text-transform:
    uppercase;

  color:
    rgba(245, 245, 240, 0.48);

  white-space:
    nowrap;
}


.artifact-option.is-selected
.artifact-option-status {
  border-color:
    rgba(201, 176, 55, 0.45);

  color:
    #c9b037;
}


/* ----------------------------------------------------------
   SOLD OUT
   ---------------------------------------------------------- */

.artifact-option.is-sold-out {
  opacity:
    0.40;

  cursor:
    not-allowed;

  transform:
    none;
}


.artifact-option.is-sold-out:hover {
  transform:
    none;

  border-color:
    rgba(245, 245, 240, 0.10);

  background:
    rgba(255, 255, 255, 0.025);
}


/* ----------------------------------------------------------
   HIDDEN NATIVE BACKEND SELECT
   ---------------------------------------------------------- */

.artifact-color-native {
  position:
    absolute !important;

  width:
    1px !important;

  height:
    1px !important;

  padding:
    0 !important;

  margin:
    -1px !important;

  overflow:
    hidden !important;

  clip:
    rect(0, 0, 0, 0) !important;

  white-space:
    nowrap !important;

  border:
    0 !important;
}


/* ----------------------------------------------------------
   SELECTION CONFIRMATION
   ---------------------------------------------------------- */

.artifact-selection-confirmation {
  width:
    100%;

  max-width:
    780px;

  margin:
    12px auto 0;

  padding:
    11px 15px;

  display:
    flex;

  justify-content:
    space-between;

  align-items:
    center;

  gap:
    14px;

  border:
    1px solid
    rgba(245, 245, 240, 0.08);

  background:
    rgba(255, 255, 255, 0.018);

  border-radius:
    9px;

  font-size:
    0.74rem;
}


.artifact-selection-confirmation-label {
  color:
    rgba(245, 245, 240, 0.42);

  letter-spacing:
    0.12em;

  text-transform:
    uppercase;
}


.artifact-selection-confirmation strong {
  color:
    rgba(245, 245, 240, 0.58);

  font-weight:
    500;
}


.artifact-selection-confirmation.has-selection {
  border-color:
    rgba(201, 176, 55, 0.22);
}


.artifact-selection-confirmation.has-selection strong {
  color:
    #c9b037;
}


/* ----------------------------------------------------------
   PREMIUM PREVIEW BOX
   ---------------------------------------------------------- */

.artifact-preview {
  width:
    100%;

  max-width:
    780px;

  margin:
    22px auto 0;

  padding:
    14px;

  border:
    1px solid
    rgba(201, 176, 55, 0.18);

  border-radius:
    16px;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.045),
      rgba(255, 255, 255, 0.012)
    );

  box-shadow:
    0 25px 70px
    rgba(0, 0, 0, 0.35);

  overflow:
    hidden;
}


/* ----------------------------------------------------------
   PREVIEW MEDIA
   ---------------------------------------------------------- */

.artifact-preview-media {
  width:
    100%;

  min-height:
    180px;

  max-height:
    460px;

  display:
    flex;

  justify-content:
    center;

  align-items:
    center;

  overflow:
    hidden;

  border-radius:
    11px;

  background:
    #111111;
}


.artifact-preview-image,
#artifact-preview-image {
  display:
    block;

  width:
    100%;

  max-width:
    100%;

  height:
    auto;

  max-height:
    460px;

  object-fit:
    contain;

  object-position:
    center;

  margin:
    0 auto;
}


/* ----------------------------------------------------------
   PREVIEW INFORMATION
   ---------------------------------------------------------- */

.artifact-preview-meta {
  padding:
    15px 8px 5px;

  display:
    flex;

  flex-direction:
    column;

  gap:
    5px;

  text-align:
    center;
}


.artifact-preview-kicker {
  font-size:
    0.62rem;

  letter-spacing:
    0.18em;

  text-transform:
    uppercase;

  color:
    rgba(245, 245, 240, 0.42);
}


.artifact-preview-meta strong {
  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    1rem;

  font-weight:
    500;

  letter-spacing:
    0.07em;

  text-transform:
    uppercase;

  color:
    #f5f5f0;
}


.artifact-preview-meta span:last-child {
  font-size:
    0.72rem;

  color:
    #c9b037;

  letter-spacing:
    0.10em;

  text-transform:
    uppercase;
}


/* ----------------------------------------------------------
   PREVIEW BEFORE SELECTION
   ---------------------------------------------------------- */

.artifact-preview:not(.has-selection)
.artifact-preview-media {
  min-height:
    110px;

  background:
    radial-gradient(
      circle at center,
      rgba(201, 176, 55, 0.045),
      rgba(0, 0, 0, 0.30)
    );
}


.artifact-preview:not(.has-selection)
.artifact-preview-media::before {
  content:
    "SELECT AN ARTIFACT COLOR";

  display:
    block;

  padding:
    20px;

  color:
    rgba(245, 245, 240, 0.38);

  font-size:
    0.68rem;

  letter-spacing:
    0.20em;

  text-align:
    center;
}


/* ----------------------------------------------------------
   HOUSE AUTHENTICITY NOTE
   ---------------------------------------------------------- */

.house-visual-note {
  width:
    100%;

  max-width:
    780px;

  margin:
    26px auto 34px;

  padding:
    22px 24px;

  position:
    relative;

  border:
    1px solid
    rgba(201, 176, 55, 0.20);

  border-left:
    2px solid
    #c9b037;

  border-radius:
    11px;

  background:
    linear-gradient(
      135deg,
      rgba(201, 176, 55, 0.065),
      rgba(255, 255, 255, 0.018)
    );

  box-shadow:
    0 18px 45px
    rgba(0, 0, 0, 0.22);
}


.house-visual-note::before {
  content:
    "ENADKO · HOUSE I";

  display:
    block;

  margin-bottom:
    9px;

  font-size:
    0.60rem;

  letter-spacing:
    0.20em;

  color:
    #c9b037;

  text-transform:
    uppercase;
}


.house-visual-note-kicker {
  display:
    block;

  margin-bottom:
    10px;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    1rem;

  letter-spacing:
    0.06em;

  color:
    #f5f5f0;
}


.house-visual-note p {
  margin:
    7px 0;

  font-size:
    0.78rem;

  line-height:
    1.7;

  color:
    rgba(245, 245, 240, 0.60);
}


.house-visual-note p.gold {
  color:
    #c9b037;
}


/* ----------------------------------------------------------
   PREORDER FORM — GIVE THE SELECTOR BREATHING ROOM
   ---------------------------------------------------------- */

.preorder-form
.artifact-selector-heading {
  margin-top:
    1.5rem;

  margin-bottom:
    1rem;
}


/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media (max-width: 700px) {

  .artifact-selector {
    grid-template-columns:
      1fr;

    padding:
      7px;

    gap:
      9px;

    border-radius:
      14px;
  }


  .artifact-option {
    min-height:
      112px;

    padding:
      18px 16px;
  }


  .artifact-option-swatch {
    flex-basis:
      44px;

    width:
      44px;

    height:
      44px;
  }


  .artifact-option-name {
    font-size:
      0.92rem;
  }


  .artifact-option-edition {
    font-size:
      0.68rem;
  }


  .artifact-option-meta {
    font-size:
      0.68rem;
  }


  .artifact-option-status {
    font-size:
      0.54rem;

    padding:
      5px 7px;
  }


  .artifact-selection-confirmation {
    align-items:
      flex-start;

    flex-direction:
      column;

    gap:
      4px;

    padding:
      12px 14px;
  }


  .artifact-preview {
    margin-top:
      16px;

    padding:
      8px;

    border-radius:
      12px;
  }


  .artifact-preview-media {
    min-height:
      150px;

    max-height:
      360px;
  }


  .artifact-preview-image,
  #artifact-preview-image {
    max-height:
      360px;
  }


  .artifact-preview-meta {
    padding:
      12px 5px 5px;
  }


  .artifact-preview-meta strong {
    font-size:
      0.86rem;
  }


  .artifact-preview-meta span:last-child {
    font-size:
      0.60rem;
  }


  .house-visual-note {
    margin:
      20px auto 27px;

    padding:
      18px 17px;
  }


  .house-visual-note p {
    font-size:
      0.72rem;

    line-height:
      1.65;
  }

}


/* ----------------------------------------------------------
   VERY SMALL DEVICES
   ---------------------------------------------------------- */

@media (max-width: 390px) {

  .artifact-option {
    padding:
      15px 13px;
  }


  .artifact-option-swatch {
    flex-basis:
      38px;

    width:
      38px;

    height:
      38px;
  }


  .artifact-option-status {
    display:
      none;
  }


  .artifact-preview-media {
    max-height:
      300px;
  }


  .artifact-preview-image,
  #artifact-preview-image {
    max-height:
      300px;
  }

}

/* =========================================================
   ENADKO HOUSE I — SACRED FACELIFT
   RESPONSIVE AWAKENING VISUAL PREVIEW
   ========================================================= */

/* Keep the visual presentation contained on desktop */
.house-visual-note {
  width: 100%;
  max-width: 1140px;
  margin: 48px auto 0;
  box-sizing: border-box;
}

/* The two Artifact previews */
.house-visual-note .house-visual-grid,
.house-visual-note-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  box-sizing: border-box;
}

/* Preview cards */
.house-visual-note .house-visual-card,
.house-visual-card {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

/* Full artwork — never crop it */
.house-visual-note img,
.house-visual-card img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  box-sizing: border-box;
}

/* Prevent long image URLs/content from forcing the page wider */
.house-visual-note *,
.house-visual-card * {
  max-width: 100%;
  box-sizing: border-box;
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

  .house-visual-note {
    width: calc(100% - 32px);
    max-width: 720px;
    margin: 40px auto 0;
  }

  .house-visual-note .house-visual-grid,
  .house-visual-note-grid {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
}

/* =========================================================
   MOBILE
   Stack the two Artifact previews vertically.
   This prevents horizontal compression and oversized cards.
   ========================================================= */

@media (max-width: 640px) {

  .house-visual-note {
    width: calc(100% - 28px);
    max-width: 520px;
    margin: 32px auto 0;
  }

  .house-visual-note .house-visual-grid,
  .house-visual-note-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .house-visual-note .house-visual-card,
  .house-visual-card {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
  }

  .house-visual-note img,
  .house-visual-card img {
    width: 100%;
    height: auto;
    max-width: 100%;
  }
}

/* =========================================================
   SMALL PHONES
   ========================================================= */

@media (max-width: 390px) {

  .house-visual-note {
    width: calc(100% - 22px);
    margin-top: 28px;
  }

  .house-visual-note .house-visual-grid,
  .house-visual-note-grid {
    gap: 14px;
  }
}

/* ==========================================================
   ENADKO HOUSE I — SACRED FACELIFT FINAL POLISH
   VISUAL ONLY — DOES NOT ALTER SUPABASE / RESERVATION / PAYSTACK
   ========================================================== */

/* ----------------------------------------------------------
   EDITORIAL PRODUCT IMAGES — FULL IMAGE, NO CROPPING
   ---------------------------------------------------------- */
.editorial-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  width: 100%;
  align-items: start;
}

.editorial-frame {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(212, 175, 55, 0.28);
  background: #080808;
}

.editorial-frame img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: contain;
  object-position: center;
  background: #080808;
}

.editorial-frame figcaption {
  padding: 0.9rem 1rem;
  color: #d4af37;
  background: #080808;
  border-top: 1px solid rgba(212, 175, 55, 0.18);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ----------------------------------------------------------
   MAIN ARTIFACT IMAGE — KEEP COMPLETE IMAGE VISIBLE
   ---------------------------------------------------------- */
.artifact-image {
  overflow: hidden;
}

.artifact-image img {
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center;
}

/* ----------------------------------------------------------
   COLOR SELECTOR PREVIEW — PREMIUM BOX
   ---------------------------------------------------------- */
.artifact-preview {
  width: 100%;
  margin: 1.5rem 0 0;
  padding: 0.9rem;
  border: 1px solid rgba(212, 175, 55, 0.32);
  background: linear-gradient(
    145deg,
    rgba(255,255,255,0.035),
    rgba(255,255,255,0.012)
  );
  box-shadow:
    0 18px 50px rgba(0,0,0,0.35),
    inset 0 0 30px rgba(212,175,55,0.025);
}

.artifact-preview-media {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  background: #080808;
  border: 1px solid rgba(212, 175, 55, 0.14);
}

.artifact-preview-media img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: 520px;
  object-fit: contain;
  object-position: center;
  background: #080808;
}

.artifact-preview-meta {
  padding: 0.95rem 0.25rem 0.15rem;
  text-align: center;
}

.artifact-preview-kicker {
  display: block;
  margin-bottom: 0.35rem;
  color: #d4af37;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

#artifact-preview-name {
  display: block;
  color: #fff;
  font-size: 1rem;
  letter-spacing: 0.06em;
}

#artifact-preview-edition {
  display: block;
  margin-top: 0.35rem;
  color: #999;
  font-size: 0.82rem;
}

/* ----------------------------------------------------------
   HOUSE AUTHENTICITY NOTE — DELIBERATE HOUSE CARD
   ---------------------------------------------------------- */
.house-visual-note {
  width: 100%;
  margin: 2.2rem 0 0;
  padding: 1.35rem 1.4rem;
  border: 1px solid rgba(212, 175, 55, 0.22);
  border-left: 2px solid rgba(212, 175, 55, 0.62);
  background: linear-gradient(
    135deg,
    rgba(212,175,55,0.045),
    rgba(255,255,255,0.012)
  );
}

.house-visual-note-kicker {
  display: block;
  margin-bottom: 0.7rem;
  color: #d4af37;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.house-visual-note p {
  margin: 0;
  color: #aaa;
  font-size: 0.86rem;
  line-height: 1.75;
}

.house-visual-note p + p {
  margin-top: 0.8rem;
}

/* ----------------------------------------------------------
   MOBILE — NEVER LET THE PRODUCT PREVIEW DOMINATE
   ---------------------------------------------------------- */
@media (max-width: 700px) {

  .editorial-gallery {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .editorial-frame img {
    aspect-ratio: auto;
    height: auto;
    object-fit: contain;
  }

  .artifact-preview {
    margin-top: 1.25rem;
    padding: 0.65rem;
  }

  .artifact-preview-media img {
    max-height: 360px;
  }

  .house-visual-note {
    margin-top: 1.6rem;
    padding: 1.1rem 1rem;
  }
}

@media (max-width: 480px) {

  .editorial-frame figcaption {
    padding: 0.75rem 0.8rem;
    font-size: 0.65rem;
  }

  .artifact-preview-media img {
    max-height: 300px;
  }

  .house-visual-note p {
    font-size: 0.78rem;
    line-height: 1.65;
  }
}