/* ============================================================
   TIIGLE — etusivu: hero + "Näin se toimii"

   Hero-sommitelma on rakennettu kokonaan suhteellisin mitoin:
   säiliöllä on kiinteä kuvasuhde ja kaikki osat asemoidaan
   prosentteina. Ei transform: scale() -skaalausta missään,
   joten animaatiot eivät voi enää törmätä sen kanssa.
   ============================================================ */

/* ============================================================
   HERO
   ============================================================ */
.hero {
  min-height: calc(100svh - var(--nav-h));
  display: flex;
  align-items: center;
  padding: 3rem var(--gutter);
  background: var(--dark);
}

.hero-inner {
  max-width: var(--wrap);
  width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3rem;
}

.hero-content { flex: 1 1 520px; max-width: 580px; }

.hero-title {
  font-size: clamp(2.3rem, 4.6vw, 4rem);
  line-height: 1.12;
  margin-bottom: 1.5rem;
}
.hero-title .gold { color: var(--gold); }

.hero-subtitle {
  color: rgba(255, 255, 255, 0.88);
  font-size: clamp(1.15rem, 1.5vw, 1.4rem);   /* isompi kuin ennen */
  line-height: 1.65;
  font-weight: 300;
  max-width: 30rem;
  margin-bottom: 2.4rem;
}

.hero-actions { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; }

.hero-scroll-hint {
  color: var(--gold);
  font-size: 0.95rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 500;
  margin-top: 1.6rem;
  animation: scrollBounce 2s ease-in-out infinite;
}
@keyframes scrollBounce {
  0%, 100% { opacity: 0.55; transform: translateY(0); }
  50%      { opacity: 1;    transform: translateY(4px); }
}

/* ------------------------------------------------------------
   HERO-SOMMITELMA — tiit, pussi ja jaettu pinta
   Säiliö: kuvasuhde 480 x 440. Kaikki lapset % -mitoin.
   ------------------------------------------------------------ */
.hero-visual {
  flex: 0 0 auto;
  position: relative;
  width: clamp(320px, 42vw, 580px);
  aspect-ratio: 480 / 440;
  /* Puhdas koriste (aria-hidden): ei saa siepata kosketuksia.
     Mobiilissa skaalattu laatikko ulottuu näkymättömänä napin
     päälle — ilman tätä näpäytykset osuisivat sommitelmaan. */
  pointer-events: none;
}

.hero-scene {
  position: absolute;
  inset: 0;
  transform-origin: center bottom;
  animation: sceneBreathe 9s ease-in-out infinite;
}
@keyframes sceneBreathe {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-1.1%); }
}

/* Lämmin ambienssihehku ryhmän takana — elegantti, kuten tekoälykuvassa.
   Hienovarainen kultainen valo joka nostaa pussin ja tikut tummasta taustasta. */
.hero-surface {
  position: absolute;
  left: 50%;
  bottom: 34%;
  transform: translateX(-50%);
  width: 92%;
  height: 70%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 45%,
    rgba(201, 168, 76, 0.14) 0%,
    rgba(201, 168, 76, 0.06) 38%,
    transparent 66%);
  z-index: 0;
  filter: blur(6px);
}
/* Kontaktivarjon "lattiaviiva" ryhmän alle */
.hero-surface::before {
  content: '';
  position: absolute;
  left: 6%; right: 6%; bottom: 22%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201, 168, 76, 0.22), transparent);
}

/* Kontaktivarjot */
.hero-shadow {
  position: absolute;
  z-index: 1;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.5), transparent 72%);
  filter: blur(7px);
}
.hero-shadow-bag  { width: 44%; height: 5%; left: 28%; bottom: 31%; }
.hero-shadow-tees { width: 54%; height: 4%; left: 24%; bottom: 12%; }

/* ---- 3D-tikut ja pussi: tekoälykuvan sommitelma PNG-tikuilla ----
   Iso pussi keskellä; seisova tii nojaa sen vasenta reunaa vasten; kaksi
   makaavaa tikkua edessä lähes yhdensuuntaisina, porrastettuna (etummainen
   alempana). Kaikki tiit samaa tii-pituutta. Sijainnit helppo hienosäätää. */

.hero-bag {
  position: absolute;
  left: 25%;
  bottom: 34%;
  width: 50%;
  z-index: 2;
}
.hero-bag img { width: 100%; height: auto; display: block;
  filter: drop-shadow(4px 14px 20px rgba(0, 0, 0, 0.55)); }

.hero-tee3d { position: absolute; }
.hero-tee3d img {
  width: 100%; height: auto; display: block;
  filter: drop-shadow(3px 8px 11px rgba(0, 0, 0, 0.45));
}
.hero-tee3d canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}

/* ---- Kolme makaavaa tiitä viuhkana pussin edessä ----
   Kupit tiiviisti alavasemmalla (transform-origin: left center), kärjet
   leviävät oikealle eri kulmissa. Ryhmä on keskitetty vaakasuunnassa,
   joten sommitelma pysyy keskellä myös kapeilla näytöillä. Sijainnit ja
   koot on helppo hienosäätää — kaikki % säiliön mitoista. */

/* Ylin/taimmainen */
.tee-lie-a {
  left: 25%;
  bottom: 23%;
  width: 44%;
  z-index: 4;
  transform: rotate(-4deg);
  transform-origin: left center;
}

/* Keskimmäinen (pisin) */
.tee-lie-b {
  left: 25.5%;
  bottom: 16.5%;
  width: 46%;
  z-index: 5;
  transform: rotate(4deg);
  transform-origin: left center;
}

/* Etummainen/alin — eniten käännettä */
.tee-lie-c {
  left: 27%;
  bottom: 10.5%;
  width: 43%;
  z-index: 6;
  transform: rotate(12deg);
  transform-origin: left center;
}

/* ============================================================
   NÄIN SE TOIMII
   ============================================================ */
.how-section {
  background: var(--dark2);
  padding: 3rem var(--gutter);
  text-align: center;
}

.steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.6rem;
  max-width: var(--wrap);
  margin: 2rem auto 0;
}

/* Yhdysviiva ympyröiden takana */
.steps-line {
  position: absolute;
  top: 36px;
  left: 8%; right: 8%;
  height: 1px;
  z-index: 0;
  background: linear-gradient(90deg,
    transparent, rgba(201, 168, 76, 0.35) 12%,
    rgba(201, 168, 76, 0.35) 88%, transparent);
}

.step { position: relative; z-index: 1; min-width: 0; }

.step-num {
  width: 72px; height: 72px;
  margin: 0 auto 1.3rem;
  border: 1px solid var(--gold);
  border-radius: 50%;
  background: var(--dark2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
}
.step-icon { font-size: 1.5rem; line-height: 1; }

.step-title {
  font-family: 'Jost', 'Apple Symbols', 'Segoe UI Symbol', sans-serif;
  font-weight: 600;
  font-size: 1.3rem;              /* isompi (oli 1.18rem) */
  line-height: 1.3;
  margin-bottom: 0.7rem;
}
.step-desc {
  color: rgba(255, 255, 255, 0.88);
  font-size: 1.1rem;              /* isompi (oli 1.05rem) */
  line-height: 1.6;
  font-weight: 300;
}

/* ============================================================
   YLLÄPITOPALKKI — hero mahtuu ruutuun myös kirjautuneena
   ============================================================ */
@media (min-width: 861px) {
  body.admin-bar .hero { min-height: calc(100svh - var(--nav-h) - 32px); }
}


/* ============================================================
   VIERITYSPALJASTUS
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ============================================================
   KESKIKOKOISET NÄYTÖT — askeleet kahdelle riville
   ============================================================ */
@media (max-width: 1080px) {
  .steps { grid-template-columns: repeat(3, 1fr); gap: 2.5rem 1.5rem; }
  .steps-line { display: none; }
}

/* ============================================================
   PIENET NÄYTÖT — hero pinoutuu
   ============================================================ */
@media (max-width: 860px) {
  /* Hero mitoitetaan mahtumaan yhteen ruudulliseen: teksti tiiviimmäksi
     ja sommitelma sidotaan näkymän KORKEUTEEN, ei leveyteen. */
  .hero {
    min-height: calc(100svh - var(--nav-h));
    padding: 0.8rem var(--gutter) 1.2rem;
  }
  .hero-inner {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.4rem;
  }
  .hero-content { flex: none; max-width: 100%; }

  .hero-title {
    font-size: clamp(2.3rem, 10.5vw, 3rem);
    margin-bottom: 0.9rem;
  }
  .hero-subtitle {
    font-size: 1rem;
    line-height: 1.55;
    max-width: 24rem;
    margin: 0 auto 1.3rem;
  }

  .hero-actions { justify-content: center; }
  .hero .btn-primary { padding: 0.9rem 1.9rem; font-size: 0.92rem; }

  /* Vieritysvihje pois — nappi sanoo jo saman, ja se vei 40 px. */
  .hero-scroll-hint { display: none; }

  /* Sommitelma: leveys määrää koon kapealla näytöllä (korkeus seuraa
     kuvasuhteesta), ja visuaalinen suurennos tehdään transformilla
     SÄILIÖÖN — sisällön oma hengitysanimaatio kirjoittaa scene-tason
     transformia, joten skaalan on asuttava kerrosta ylempänä.
     Suurennos kasvattaa pussia ja tiitä ylös- ja sivullepäin ilman
     että asettelu venyy: napin ja pussin väli kuroutuu itsestään. */
  .hero-visual {
    width: 100%;
    max-width: 440px;
    height: auto;
    transform: scale(1.42);
    transform-origin: 50% 96%;
    /* Suurennos kasvaa ylöspäin asettelun ulkopuolella — tämä vara
       pitää pussin nyörit irti Aloita suunnittelu -napista. */
    margin-top: 2.6rem;
  }

  /* Suurennos ei saa synnyttää vaakavieritystä. */
  .hero { overflow-x: clip; }

  .how-section { padding: 3.5rem var(--gutter); }
  .steps { grid-template-columns: repeat(2, 1fr); gap: 2.5rem 1.25rem; margin-top: 2.5rem; }
  .step-num { width: 64px; height: 64px; margin-bottom: 1rem; }
  .step-icon { font-size: 1.35rem; }
  .step-title { font-size: 1.2rem; }
  .step-desc { font-size: 1.05rem; }
}

@media (max-width: 460px) {
  .steps { grid-template-columns: 1fr; gap: 2rem; }
}


/* ============================================================
   VAIHE 1 — omat tekstit + vaakapino

   Koko vaihe mahtuu yhdelle ruudulle:
   - Työpöytä: esikatselu ja hallinta rinnakkain. Mitään ei ole
     esikatselun alapuolella, joten se ei voi vierittyä pois.
   - Mobiili: esikatselu kiinnitetty (sticky), kutistuu kirjoittaessa.
   - Ideat ja Omat tekstit jakavat yhden paneelin -> ei koskaan
     kahta pitkää listaa päällekkäin.
   ============================================================ */
.customize-section {
  background: var(--dark);
  padding: 2rem var(--gutter);
}

.section-sub {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.98rem;
  max-width: 34rem;
  margin: 0 auto;
}

/* ---------- Asettelu: kaksi samankorkuista saraketta ---------- */
.design-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* JS asettaa --box-h tiiden määrän mukaan. */
  grid-template-rows: var(--box-h, 440px);
  gap: 2.5rem;
  max-width: 1000px;
  margin: 1.5rem auto 0;
}

/* ---------- Esikatselulaatikko ---------- */
.design-preview {
  position: relative;
  height: 100%;
  padding: 1.2rem;
  border-radius: 6px;
  overflow: hidden;

  /* Kevyt reunus + hehku. Raskas 3 px kulta vei huomion itse tiiltä. */
  border: 1px solid rgba(201, 168, 76, 0.55);
  box-shadow:
    0 0 0 1px rgba(201, 168, 76, 0.10),
    0 0 34px rgba(201, 168, 76, 0.07),
    0 10px 40px rgba(0, 0, 0, 0.55);

  /* Nurmi tummennettuna: tiit lepäävät pinnalla, eivät tyhjyydessä. */
  background-color: #141a10;
  background-image:
    linear-gradient(135deg, rgba(18, 26, 14, 0.84) 0%, rgba(10, 14, 9, 0.93) 100%),
    url('../images/nurmi.png');
  background-size: cover, cover;
  background-position: center, center;
}
.design-preview canvas {
  display: block;
  width: 100%;
  height: calc(100% - 26px);   /* alalaitaan jää tilaa ohjeelle */
  touch-action: manipulation;
}

/* Laskuri laatikon kulmassa — tekstit voivat tulla kummasta tahansa
   välilehdestä, joten laskuri ei kuulu kumpaankaan nappiin. */
.preview-count {
  position: absolute;
  top: 0.7rem;
  right: 0.9rem;
  z-index: 2;
  padding: 0.2rem 0.6rem;
  background: rgba(26, 26, 24, 0.78);
  border: 1px solid rgba(201, 168, 76, 0.35);
  border-radius: 3px;
  color: var(--gold);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 1px;
}

/* Ohje alalaidassa. Kun tii on valittuna, sen teksti näkyy tässä
   isolla — siksi erillistä listaa ei tarvita. */
.preview-hint {
  position: absolute;
  left: 0.8rem;
  right: 0.8rem;
  bottom: 0.7rem;
  text-align: center;
  color: rgba(201, 168, 76, 0.6);
  font-size: 0.92rem;
  letter-spacing: 0.5px;
  line-height: 1.3;
  pointer-events: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color var(--transition);
}
/* Kun tii on valittuna, ohje näyttää sen tekstin ISOLLA ja toimii
   poistonappina — poisto onnistuu siis myös tästä. */
.preview-hint.is-active {
  color: var(--gold-light);
  pointer-events: auto;
  cursor: pointer;
}
.preview-hint.is-active:hover { color: var(--white); }
.preview-hint strong { font-weight: 600; color: var(--white); }
.preview-hint u { text-decoration-color: rgba(201, 168, 76, 0.6); }

/* ---------- Oikea sarake: vaihtuva paneeli ylhäällä, napit alhaalla ----------
   Napit ovat sarakkeen alareunassa, samassa linjassa tii-laatikon
   alareunan kanssa. Sarake ei koskaan kasva laatikkoa korkeammaksi. */
.design-col {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
}

/* ---------- Lomake (Oma teksti -välilehden sisällä) ---------- */
.design-form { flex: 0 0 auto; display: flex; flex-direction: column; }

.form-label {
  display: block;
  color: var(--gold);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 0.6rem;
}

.form-input {
  width: 100%;
  min-height: 48px;
  padding: 0.7rem 3.4rem 0.7rem 1rem;   /* tilaa laskurille oikeassa reunassa */
  background: var(--dark2);
  border: 1px solid rgba(201, 168, 76, 0.35);
  border-radius: 3px;
  color: var(--white);
  font-family: 'Jost', 'Apple Symbols', 'Segoe UI Symbol', sans-serif;
  font-size: 1.1rem;
  font-weight: 400;
  letter-spacing: 0.5px;
  transition: border-color var(--transition);
}
.form-input::placeholder { color: rgba(255, 255, 255, 0.35); }
.form-input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 1px rgba(201, 168, 76, 0.4);
}

/* Kenttä + laskuri sen sisällä */
.input-row { position: relative; }

.char-count {
  position: absolute;
  right: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

/* Symbolit ja lisäysnappi samalla rivillä */
.form-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.6rem;
}

.symbol-picker { display: flex; gap: 0.4rem; flex: 0 0 auto; }

.symbol-btn {
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid rgba(201, 168, 76, 0.35);
  border-radius: 3px;
  color: var(--gold);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}
.symbol-btn:hover {
  background: rgba(201, 168, 76, 0.12);
  border-color: var(--gold);
}

.char-count {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.85rem;
  white-space: nowrap;
}

.add-text-btn {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  padding: 0.72rem 1rem;
  background: transparent;
  border: 1px solid var(--gold);
  border-radius: 3px;
  color: var(--gold);
  font-family: 'Jost', 'Apple Symbols', 'Segoe UI Symbol', sans-serif;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.add-text-btn:hover { background: rgba(201, 168, 76, 0.12); }
.add-text-btn.pulse { background: var(--gold); color: var(--dark); }

/* ---------- Paneeli: Ideat | Oma teksti ---------- */
.panel-tabs {
  flex: 0 0 auto;
  display: flex;
  gap: 0.5rem;
  margin-top: 0.8rem;   /* napit ALHAALLA */
}

.panel-tab {
  flex: 1;
  padding: 0.55rem 0.7rem;
  background: transparent;
  border: 1px solid rgba(201, 168, 76, 0.3);
  border-radius: 3px;
  color: var(--text-muted);
  font-family: 'Jost', 'Apple Symbols', 'Segoe UI Symbol', sans-serif;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all var(--transition);
}
.panel-tab:hover { border-color: var(--gold); color: var(--gold); }
.panel-tab.is-active {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--dark);
}
.tab-count { font-weight: 700; }

.panel-body {
  flex: 1 1 auto;
  min-height: 0;
  border: 1px solid rgba(201, 168, 76, 0.2);
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

.panel-pane { height: 100%; }

/* HUOM: ID-valitsin voitti aiemmin tämän säännön ja piti ideat näkyvissä
   vaikka välilehti oli vaihdettu. Siksi luokat + !important. */
.panel-pane[hidden] { display: none !important; }

.panel-pane ::-webkit-scrollbar,
.panel-pane::-webkit-scrollbar { width: 6px; }
.panel-pane ::-webkit-scrollbar-thumb,
.panel-pane::-webkit-scrollbar-thumb {
  background: rgba(201, 168, 76, 0.3);
  border-radius: 3px;
}

/* ---------- Ideat-välilehti ---------- */
.pane-ideas {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 0.4rem;
  padding: 0.7rem;
  overflow-y: auto;
}

/* ---------- Oma teksti -välilehti: kenttä ylhäällä, lista vierii alla ---------- */
.pane-mine {
  display: flex;
  flex-direction: column;
  justify-content: center;   /* lomake keskelle: tyhjä tila näyttää tarkoitukselliselta */
  padding: 0.8rem;
  overflow-y: auto;
}

.inspo-chip {
  padding: 0.32rem 0.65rem;
  background: var(--dark2);
  border: 1px solid rgba(201, 168, 76, 0.25);
  border-radius: 3px;
  color: var(--text-muted);
  font-family: 'Jost', 'Apple Symbols', 'Segoe UI Symbol', sans-serif;
  font-size: 0.88rem;
  letter-spacing: 0.3px;
  white-space: nowrap;
  cursor: pointer;
  transition: all var(--transition);
}
.inspo-chip:hover {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(201, 168, 76, 0.08);
}

/* ---------- Seuraava vaihe ---------- */
.next-step-wrap { text-align: center; margin-top: 1.3rem; }

.next-step-btn {
  display: inline-block;
  padding: 0.8rem 2.2rem;
  background: transparent;
  border: 1px solid var(--gold);
  border-radius: 3px;
  color: var(--gold);
  font-family: 'Jost', 'Apple Symbols', 'Segoe UI Symbol', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--transition);
}
.next-step-btn:hover { background: rgba(201, 168, 76, 0.12); color: var(--gold); }

/* ---------- Kiinnitetty alapalkki (vain mobiili) ---------- */
.next-sticky { display: none; }

/* ---------- Ilmoitus ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 2rem;
  transform: translate(-50%, 20px);
  z-index: 400;
  padding: 0.9rem 1.6rem;
  background: var(--dark2);
  border: 1px solid var(--gold);
  border-radius: 3px;
  color: var(--white);
  font-size: 1.05rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }


/* ============================================================
   VAIHE 1 — MOBIILI

   - Esikatselu kiinnitetty, ja sen KORKEUS KASVAA tiiden mukana
     (JS asettaa sen; yksi tii ei vaadi kymmenen tiin verran tilaa).
   - Välilehtinapit heti laatikon alla, jotta ne ovat aina yhden
     napautuksen päässä eivätkä pitkän listan takana.
   - Kentän otsikko piilotetaan näkyvistä (placeholder kertoo saman),
     mutta se jää ruudunlukijoille.
   ============================================================ */
@media (max-width: 860px) {
  /* Tiiviimmät reunukset -> canvas leveämmäksi -> tii ja kaiverrus isommiksi. */
  .customize-section { padding: 2.5rem 1rem 3rem; }

  /* Kiinnityskohta yhteen paikkaan, jotta laatikko ja napit pysyvät linjassa. */
  .design-wrap {
    --stick-top: calc(var(--nav-h) + 8px);
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    margin-top: 1.6rem;
  }
  body.admin-bar .design-wrap { --stick-top: calc(var(--nav-h) + 54px); }

  .design-preview {
    position: sticky;
    top: var(--stick-top);
    z-index: 5;
    height: var(--box-h, 320px);   /* JS asettaa tiiden määrän mukaan */
    padding: 0.6rem;
  }

  .design-col { height: auto; }

  /* Napit kiinnitetään laatikon alle — myös ne pysyvät näkyvissä. */
  .panel-tabs {
    order: 1;
    position: sticky;
    top: calc(var(--stick-top) + var(--box-h, 320px) + 10px);
    z-index: 4;
    margin-top: 0;
    margin-bottom: 0.6rem;
    padding-bottom: 0.5rem;
    background: var(--dark);
  }
  /* Ideat: kiinteä laatikko + vieritys.
     Oma teksti: sisällön korkuinen -> ei turhaa tyhjää. */
  .panel-body { order: 2; height: auto; min-height: 0; }
  .panel-pane { height: auto; }
  .pane-mine  { height: auto; justify-content: flex-start; }
  .pane-ideas {
    height: 300px;
    overflow-y: auto;
    gap: 0.35rem;
    padding: 0.6rem;
  }

  /* Idea-napit pienemmiksi kapealla ruudulla. */
  .inspo-chip {
    padding: 0.28rem 0.55rem;
    font-size: 0.8rem;
    letter-spacing: 0.2px;
  }

  /* Symbolit ja lisäysnappi mahtuvat yhdelle riville. */
  .symbol-btn { width: 38px; height: 38px; font-size: 1.05rem; }
  .symbol-picker { gap: 0.3rem; }
  .add-text-btn { font-size: 0.82rem; letter-spacing: 1px; padding: 0.7rem 0.6rem; }
  .btn-long { display: none; }            /* "+ Lisää" riittää kapealla */
  .form-input { padding-right: 3rem; }

  /* Kiinnitetty alapalkki: näkyy kun tiitä on ja Vaihe 1 on ruudussa. */
  .next-sticky {
    display: block;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 300;
    padding: 0.65rem 1rem calc(0.65rem + env(safe-area-inset-bottom, 0px));
    background: rgba(20, 20, 18, 0.96);
    border-top: 1px solid rgba(201, 168, 76, 0.3);
  }
  .next-sticky[hidden] { display: none; }
  .next-sticky .btn-primary {
    display: block;
    width: 100%;
    text-align: center;
    padding: 0.9rem 1rem;
    font-size: 0.88rem;
    letter-spacing: 1.4px;
  }

  /* Tilaa alapalkille, ja toast sen yläpuolelle. */
  .customize-section { padding-bottom: 6rem; }
  .toast { bottom: 5.5rem; }

  /* Otsikko pois näkyvistä, säilyy ruudunlukijoille. */
  .form-label {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  .next-step-wrap { margin-top: 1.6rem; }
  .next-step-btn {
    width: 100%;
    font-size: 0.9rem;         /* mahtuu yhdelle riville */
    letter-spacing: 1.4px;
    padding: 0.95rem 1rem;
  }

}

@media (max-width: 600px) {
  body.admin-bar .design-wrap { --stick-top: calc(var(--nav-h) + 8px); }
}


/* ============================================================
   VAIHE 2 — PAKETIT

   Kortti: pystytii nurmella, teksti kiertää asiakkaan omien
   tekstien läpi. Neljä korttia rivissä, Club Legend leveänä
   bannerina alla (se on eri kokoluokan B2B-tuote).
   ============================================================ */
.products-section {
  background: var(--dark2);
  padding: 2rem var(--gutter);
}

.products-empty {
  text-align: center;
  color: var(--text-muted);
  font-size: 1.05rem;
  padding: 3rem 0;
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  max-width: var(--wrap);
  margin: 1.5rem auto 0;
}

/* ---------- Kortti ---------- */
.product-card {
  display: flex;
  flex-direction: column;
  background: var(--dark);
  border: 1px solid rgba(201, 168, 76, 0.2);
  border-radius: 4px;
  overflow: hidden;
  transition: border-color var(--transition), transform var(--transition);
}
.product-card:hover { border-color: rgba(201, 168, 76, 0.5); transform: translateY(-3px); }

.product-card.is-featured { border-color: var(--gold); }
.product-card.is-picked {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold), 0 0 24px rgba(201, 168, 76, 0.15);
}

/* ---------- Kuva-alue: tii nurmella ---------- */
.product-img {
  position: relative;
  aspect-ratio: 11 / 10;   /* matalampi kuin neliö — nurmea oli liikaa yläreunassa */
  overflow: hidden;
  background-color: #16210f;
  background-image:
    linear-gradient(rgba(12, 22, 10, 0.5) 0%, rgba(8, 14, 6, 0.78) 100%),
    url('../images/nurmi.png');
  background-size: cover;
  background-position: center;
}
.product-img canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.product-badge {
  position: absolute;
  top: 0.7rem;
  left: 0.7rem;
  z-index: 2;
  padding: 0.28rem 0.65rem;
  background: var(--gold);
  border-radius: 2px;
  color: var(--dark);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

/* ---------- Tiedot ---------- */
.product-info {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 0.9rem 1rem 1rem;
}

.product-name {
  font-family: 'Jost', 'Apple Symbols', 'Segoe UI Symbol', sans-serif;
  font-weight: 600;
  font-size: 1.15rem;
  letter-spacing: 0.5px;
  margin-bottom: 0.35rem;
}

.product-desc {
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.9rem;
  font-style: italic;
  line-height: 1.42;
  margin-bottom: 0.6rem;
  min-height: 2.6em;
}

/* Hinta, €/tii ja postikulut yhdessä lohkossa — kolme erillistä
   riviä söi 35 px korttia kohden ilman lisäarvoa. */
.product-price-row { margin-bottom: 0.7rem; }

.product-price {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.2;
}
.product-price span {
  font-family: 'Jost', 'Apple Symbols', 'Segoe UI Symbol', sans-serif;
  font-weight: 400;
  font-size: 0.95rem;
  color: var(--text-muted);
  letter-spacing: 0.5px;
}

.price-meta {
  margin-top: 0.15rem;
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.85rem;
  letter-spacing: 0.3px;
}
.price-meta strong { color: var(--gold); font-weight: 600; }

/* ---------- Valintanappi ---------- */
.add-btn-full {
  position: relative;
  overflow: hidden;
  margin-top: auto;
  width: 100%;
  padding: 0.7rem 1rem;
  background: transparent;
  border: 1px solid var(--gold);
  border-radius: 3px;
  color: var(--gold);
  font-family: 'Jost', 'Apple Symbols', 'Segoe UI Symbol', sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.add-btn-full:hover { background: rgba(201, 168, 76, 0.12); }

.is-featured .add-btn-full { background: var(--gold); color: var(--dark); }
.is-featured .add-btn-full:hover { background: var(--gold-light); }

.pick-done { display: none; }
.is-picked .add-btn-full { background: var(--gold); color: var(--dark); }
.is-picked .pick-label { display: none; }
.is-picked .pick-done  { display: inline; }

/* ---------- Club Legend -banneri ---------- */
.legend-banner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  align-items: center;
  max-width: var(--wrap);
  margin: 1.1rem auto 0;
  padding: 0.9rem 1.3rem;
  background: var(--dark);
  border: 1px solid rgba(201, 168, 76, 0.3);
  border-radius: 4px;
}

.legend-label {
  color: var(--gold);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}
.legend-title {
  font-family: 'Jost', 'Apple Symbols', 'Segoe UI Symbol', sans-serif;
  font-weight: 600;
  font-size: 1.35rem;
  letter-spacing: 0.5px;
  margin-bottom: 0.3rem;
}
.legend-desc {
  color: rgba(255, 255, 255, 0.65);
  font-size: 1rem;
  font-style: italic;
}

.legend-action { text-align: right; }
.legend-info {
  color: var(--text-muted);
  font-size: 0.95rem;
  margin-bottom: 0.7rem;
}
.legend-hint {
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.85rem;
  line-height: 1.45;
  margin-top: 0.7rem;
}
.legend-hint strong { color: var(--text-muted); font-weight: 600; }

/* ============================================================
   VAIHE 2 — KESKIKOKOISET NÄYTÖT
   ============================================================ */
@media (max-width: 1080px) {
  .products-grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
}

/* ============================================================
   VAIHE 2 — MOBIILI
   Kortit allekkain. Ei karusellia — nyt kaikki vaihtoehdot näkyvät.
   ============================================================ */
@media (max-width: 860px) {
  .products-section { padding: 3rem var(--gutter); }
  .products-grid { grid-template-columns: 1fr; gap: 1.25rem; margin-top: 2rem; }

  .product-img { aspect-ratio: 3 / 2; }
  .product-desc { min-height: 0; }

  .legend-banner {
    grid-template-columns: 1fr;
    gap: 1.2rem;
    padding: 1.4rem 1.2rem;
    margin-top: 1.5rem;
  }
  .legend-action { text-align: left; }
  .legend-action .btn-primary { display: block; width: 100%; text-align: center; }
}

/* ---------- Tyhjä tila + diagnostiikka ---------- */
.products-empty {
  max-width: 640px;
  margin: 2.5rem auto 0;
  padding: 1.6rem;
  text-align: center;
  border: 1px solid rgba(201, 168, 76, 0.25);
  border-radius: 4px;
  background: var(--dark);
  color: var(--text-muted);
  font-size: 1.05rem;
}
.products-empty-hint {
  margin-top: 0.6rem;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.5);
}
.products-empty-hint strong { color: var(--gold); font-weight: 600; }

.tiigle-diag {
  margin-top: 1.4rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(201, 168, 76, 0.2);
  text-align: left;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.6);
}
.tiigle-diag strong { color: var(--gold); }
.tiigle-diag ul { list-style: none; margin-top: 0.6rem; }
.tiigle-diag li {
  padding: 0.35rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  font-family: 'Jost', monospace;
}

.tiigle-diag-fix {
  margin: 1rem 0;
  padding: 0.9rem 1rem;
  background: rgba(201, 168, 76, 0.08);
  border-left: 3px solid var(--gold);
  border-radius: 0;
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.6;
}
.tiigle-diag-fix strong { color: var(--gold-light); }
.tiigle-diag-fix em { color: var(--white); font-style: normal; font-weight: 600; }


/* ============================================================
   VAIHE 3 — MÄÄRIEN JAKO
   ============================================================ */
.step3-section {
  background: var(--dark);
  padding: 1.8rem var(--gutter);
}

/* ---------- Ei pakettia ---------- */
.step3-empty {
  max-width: 520px;
  margin: 1.5rem auto 0;
  padding: 1.6rem 1.5rem;
  text-align: center;
  background: var(--dark2);
  border: 1px solid rgba(201, 168, 76, 0.2);
  border-radius: 4px;
}
.step3-empty p {
  color: var(--text-muted);
  font-size: 1.1rem;
  margin-bottom: 1.2rem;
}

/* ---------- Jako ---------- */
.step3-active {
  max-width: 620px;
  margin: 1.1rem auto 0;
}

.qty-counter {
  text-align: center;
  font-size: 1rem;
  color: var(--text-muted);
  margin-bottom: 0.7rem;
}
.qty-counter strong { color: var(--white); font-weight: 600; }
.qty-left { color: var(--gold); }
.qty-over { color: #E0715A; }
.qty-ok   { color: var(--gold-light); }

.qty-lines {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 0.8rem;

  /* Kymmenellä tekstillä rivit veisivät yli 700 px ja vahvistusnappi
     jäisi aina ruudun alle. Lista vierii sisäisesti — nappi pysyy näkyvissä. */
  max-height: 290px;
  overflow-y: auto;
  padding-right: 4px;
}
.qty-lines::-webkit-scrollbar { width: 6px; }
.qty-lines::-webkit-scrollbar-thumb {
  background: rgba(201, 168, 76, 0.3);
  border-radius: 3px;
}

.qty-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.4rem 0.85rem;
  background: var(--dark2);
  border: 1px solid rgba(201, 168, 76, 0.18);
  border-radius: 3px;
}

.ql-text {
  flex: 1;
  min-width: 0;
  font-size: 1.02rem;
  letter-spacing: 0.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ql-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.ql-btn {
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid rgba(201, 168, 76, 0.4);
  border-radius: 3px;
  color: var(--gold);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  transition: background var(--transition);
}
.ql-btn:hover { background: rgba(201, 168, 76, 0.14); }

.ql-num {
  min-width: 40px;
  text-align: center;
  font-size: 1.1rem;
  font-weight: 600;
}

/* ---------- Paketin vaihto ---------- */
.qty-upgrade {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.6rem 0.9rem;
  margin-bottom: 0.5rem;
  background: rgba(201, 168, 76, 0.08);
  border: 1px solid rgba(201, 168, 76, 0.3);
  border-radius: 3px;
}
.qu-text { color: var(--text-muted); font-size: 0.95rem; }
.qu-text strong { color: var(--white); font-weight: 600; }

.qu-btn {
  flex-shrink: 0;
  padding: 0.6rem 1.1rem;
  background: var(--gold);
  border: none;
  border-radius: 3px;
  color: var(--dark);
  font-family: 'Jost', 'Apple Symbols', 'Segoe UI Symbol', sans-serif;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--transition);
}
.qu-btn:hover { background: var(--gold-light); }

.qty-downgrade {
  display: block;
  width: 100%;
  padding: 0.3rem;
  margin-bottom: 0.6rem;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.45);
  font-family: 'Jost', 'Apple Symbols', 'Segoe UI Symbol', sans-serif;
  font-size: 0.95rem;
  cursor: pointer;
  transition: color var(--transition);
}
.qty-downgrade:hover { color: var(--gold); }

/* ---------- Vahvistus ---------- */
.order-btn {
  position: relative;
  overflow: hidden;
  display: block;
  width: 100%;
  padding: 0.8rem 1.5rem;
  margin-top: 0.3rem;
  background: var(--gold);
  border: none;
  border-radius: 3px;
  color: var(--dark);
  font-family: 'Jost', 'Apple Symbols', 'Segoe UI Symbol', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--transition);
}
.order-btn:hover { background: var(--gold-light); }
.order-btn:disabled { opacity: 0.6; cursor: default; }

.btn-ship {
  font-weight: 400;
  font-size: 0.82rem;
  letter-spacing: 0.5px;
  text-transform: none;
  opacity: 0.8;
}

/* Toimitusaika myy ostonapin vieressä, ei erillisessä prosessikuvauksessa. */
.step3-trust {
  margin-top: 0.7rem;
  text-align: center;
  color: rgba(255, 255, 255, 0.42);
  font-size: 0.88rem;
  letter-spacing: 0.3px;
}

.step3-back {
  display: block;
  margin-top: 0.5rem;
  text-align: center;
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.92rem;
}
.step3-back:hover { color: var(--gold); }

/* ---------- Lisätty koriin ---------- */
.step3-done {
  max-width: 520px;
  margin: 1.5rem auto 0;
  padding: 1.8rem 1.5rem;
  text-align: center;
  background: var(--dark2);
  border: 1px solid var(--gold);
  border-radius: 4px;
}
.done-mark {
  width: 56px; height: 56px;
  margin: 0 auto 1rem;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--gold);
  border-radius: 50%;
  color: var(--gold);
  font-size: 1.6rem;
}
.done-title {
  font-family: 'Jost', 'Apple Symbols', 'Segoe UI Symbol', sans-serif;
  font-weight: 600;
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}
.done-sub {
  color: var(--text-muted);
  font-size: 1.05rem;
  margin-bottom: 1.6rem;
}
.done-actions {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.done-actions .btn-primary { display: block; text-align: center; }

/* ============================================================
   VAIHE 3 — MOBIILI
   ============================================================ */
@media (max-width: 860px) {
  .step3-section { padding: 3rem var(--gutter); }
  .step3-active  { margin-top: 2rem; }

  .qty-lines { max-height: none; overflow-y: visible; }
  .qty-line { padding: 0.6rem 0.8rem; gap: 0.6rem; }
  .ql-text  { font-size: 1rem; }
  .ql-btn   { width: 42px; height: 42px; }
  .ql-num   { min-width: 38px; }

  .qty-upgrade { flex-direction: column; align-items: stretch; text-align: center; }
  .qu-btn { width: 100%; }

  .order-btn { font-size: 0.92rem; letter-spacing: 1px; }
  .btn-ship { display: block; margin-top: 0.2rem; }
}


/* ============================================================
   LANDING-HINNASTO — paketit näkyvissä sitoutumatta

   Kevyet kortit ilman canvasia (canvas on velhon Vaihe 2:ssa).
   Klikkaus vie suunnitteluun paketti valmiiksi merkittynä.
   ============================================================ */
.showcase {
  background: var(--dark2);
  padding: 2.5rem var(--gutter) 3rem;
}

.showcase-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  max-width: var(--wrap);
  margin: 1.6rem auto 0;
}

.showcase-card {
  display: flex;
  flex-direction: column;
  padding: 0;
  background: var(--dark);
  border: 1px solid rgba(201, 168, 76, 0.2);
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  transition: border-color var(--transition), transform var(--transition);
}
.showcase-card:hover { border-color: rgba(201, 168, 76, 0.5); transform: translateY(-3px); }
.showcase-card:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.showcase-card.is-featured { border-color: var(--gold); }

/* Kortti käyttää samoja .product-* -luokkia kuin velhon Vaihe 2 —
   kuva-alue, nimi, hupiteksti, hinta ja postikulut ovat identtiset.
   Vain "Suunnittele" -kutsu on tässä span (koko kortti on painike). */
.showcase-card .product-info { align-items: stretch; }

.showcase-go {
  margin-top: auto;
  width: 100%;
  padding: 0.7rem 1rem;
  border: 1px solid var(--gold);
  border-radius: 3px;
  color: var(--gold);
  font-family: 'Jost', 'Apple Symbols', 'Segoe UI Symbol', sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
  transition: background var(--transition), color var(--transition);
}
.showcase-card:hover .showcase-go { background: rgba(201, 168, 76, 0.12); }

/* Suosituin: täytetty nappi, kuten velhossa. */
.showcase-card.is-featured .showcase-go { background: var(--gold); color: var(--dark); }
.showcase-card.is-featured:hover .showcase-go { background: var(--gold-light); }

.showcase-facts {
  max-width: var(--wrap);
  margin: 1.6rem auto 0.2rem;
  text-align: center;
  color: rgba(255, 255, 255, 0.82);
  font-size: 1.02rem;
  letter-spacing: 0.3px;
}
.showcase-facts .fact-dot {
  color: var(--gold);
  margin: 0 0.5rem;
  font-weight: 700;
}

.showcase-note {
  max-width: var(--wrap);
  margin: 1.3rem auto 0;
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.95rem;
}

.showcase-cta {
  text-align: center;
  margin-top: 1.8rem;
}


/* ============================================================
   VELHO — vaiheistettu näkymä

   Yksi vaihe kerrallaan. Jokainen mahtuu yhteen näkymään, joten
   tiivistämispakkoa ei enää ole.
   ============================================================ */
body.is-wizard .site-footer { display: none; }   /* keskittymisen vuoksi */

.wizard { min-height: calc(100vh - var(--nav-h)); }

/* ---------- Edistymispalkki ---------- */
.wiz-bar {
  position: sticky;
  top: var(--nav-h);
  z-index: 50;
  background: var(--dark2);
  border-bottom: 1px solid rgba(201, 168, 76, 0.18);
  padding: 0.9rem var(--gutter);
}
body.admin-bar .wiz-bar { top: calc(var(--nav-h) + 32px); }
/* WP:n ylläpitopalkki on kapeilla näytöillä 46 px ja alle 600 px se
   vierii pois. Askelpalkin tarttumiskohta pitää seurata samaa, muuten
   navin ja palkin väliin jää rako, josta edellisen osion otsikko kurkkii.
   (Näkyy vain kirjautuneelle — asiakkaalle nämä eivät päde.) */
@media screen and (max-width: 782px) {
  body.admin-bar .wiz-bar { top: calc(var(--nav-h) + 46px); }
}
@media screen and (max-width: 600px) {
  body.admin-bar .wiz-bar { top: var(--nav-h); }
}

.wiz-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  max-width: 520px;
  margin: 0 auto;
}

.wiz-dot {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.4rem;
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.4);
  font-family: 'Jost', 'Apple Symbols', 'Segoe UI Symbol', sans-serif;
  transition: color var(--transition);
}
.wiz-dot:disabled { cursor: default; opacity: 0.55; }
.wiz-dot-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 0.9rem;
  font-weight: 700;
  flex-shrink: 0;
}
.wiz-dot-label {
  font-size: 0.9rem;
  letter-spacing: 0.5px;
}

.wiz-dot.is-current {
  color: var(--gold);
}
.wiz-dot.is-current .wiz-dot-num {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--dark);
}
.wiz-dot.is-done { color: var(--gold-light); }
.wiz-dot.is-done .wiz-dot-num {
  background: rgba(201, 168, 76, 0.18);
}

.wiz-line {
  width: 28px;
  height: 1px;
  background: rgba(201, 168, 76, 0.3);
  flex-shrink: 0;
}

/* ---------- Vaihe ---------- */
.wiz-step {
  padding: 2rem var(--gutter) 2.5rem;
}

/* ---------- Navigointi vaiheen alalaidassa ---------- */
.wiz-nav {
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: 620px;
  margin: 1.6rem auto 0;
}
.wiz-nav .order-btn,
.wiz-nav .wiz-fwd { margin-top: 0; flex: 1; }

.wiz-back {
  flex-shrink: 0;
  padding: 0.85rem 1.3rem;
  background: transparent;
  border: 1px solid rgba(201, 168, 76, 0.35);
  border-radius: 3px;
  color: var(--text-muted);
  font-family: 'Jost', 'Apple Symbols', 'Segoe UI Symbol', sans-serif;
  font-size: 0.95rem;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all var(--transition);
}
.wiz-back:hover { border-color: var(--gold); color: var(--gold); }

.wiz-fwd:disabled { opacity: 0.5; cursor: default; }

.wiz-exit {
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.92rem;
  align-self: center;
  transition: color var(--transition);
}
.wiz-exit:hover { color: var(--gold); }

/* Vaihe 1:n nav: koko leveä nappi + hienovarainen paluu.
   Vaiheessa 1 ei ole "Edellinen" (se on ensimmäinen). */
.wiz-step[data-step="1"] .wiz-nav { justify-content: space-between; }

/* ============================================================
   VELHO — MOBIILI
   ============================================================ */
@media (max-width: 860px) {
  .showcase { padding: 2rem var(--gutter) 2.5rem; }
  .showcase-grid { grid-template-columns: repeat(2, 1fr); gap: 0.9rem; }
  /* Mobiilissa hupiteksti ei tarvitse kiinteää minimikorkeutta. */
  .showcase-card .product-desc { min-height: 0; }

  .wiz-bar { padding: 0.7rem var(--gutter); }
  .wiz-progress { gap: 0.3rem; }
  .wiz-dot { padding: 0.2rem; }
  .wiz-dot-num { width: 26px; height: 26px; font-size: 0.85rem; }
  .wiz-dot-label { display: none; }          /* mobiilissa vain numerot */
  .wiz-dot.is-current .wiz-dot-label {
    display: inline;                           /* paitsi nykyinen vaihe */
  }
  .wiz-line { width: 20px; }

  .wiz-step { padding: 1.5rem var(--gutter) 2rem; }

  /* Nav kiinni alalaitaan, jotta pääpainike on aina peukalon ulottuvilla. */
  .wiz-nav {
    position: sticky;
    bottom: 0;
    margin-top: 1.2rem;
    padding: 0.8rem 0 0.4rem;
    background: linear-gradient(to top, var(--dark) 70%, transparent);
  }
  .wiz-step[data-step="2"] .wiz-nav,
  .wiz-step[data-step="3"] .wiz-nav { background: linear-gradient(to top, var(--dark2) 70%, transparent); }
}


/* ============================================================
   CLUB LEGEND — TARJOUSPYYNTÖLOMAKE (MODAALI)
   ============================================================ */
.quote-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(10, 10, 9, 0.72);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  animation: quoteFade 0.2s ease;
}
/* hidden-attribuutti EI toimi jos elementille on asetettu display —
   luokan display voittaa selaimen [hidden]-säännön. Pakotetaan piiloon,
   kun attribuutti on paikalla (modaali auki vain kun JS poistaa sen). */
.quote-overlay[hidden] { display: none; }
@keyframes quoteFade { from { opacity: 0; } to { opacity: 1; } }

.quote-modal {
  position: relative;
  width: 100%;
  max-width: 620px;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--dark2);
  border: 1px solid rgba(201, 168, 76, 0.3);
  border-radius: 6px;
  padding: 2.4rem 2.4rem 2rem;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}

.quote-close {
  position: absolute;
  top: 0.7rem;
  right: 1rem;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  transition: color var(--transition);
}
.quote-close:hover { color: var(--gold); }

.quote-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.9rem;
  margin: 0.2rem 0 0.6rem;
}
.quote-intro {
  color: rgba(255, 255, 255, 0.7);
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 1.6rem;
}

.quote-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9rem 1rem;
  margin-bottom: 0.9rem;
}

.quote-field { display: block; }
.quote-field--wide { margin-bottom: 0.9rem; }
.quote-field > span {
  display: block;
  color: var(--gold);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 0.35rem;
}
.quote-field > span em { color: var(--gold); font-style: normal; }

.quote-field input,
.quote-field textarea {
  width: 100%;
  background: var(--dark);
  border: 1px solid rgba(201, 168, 76, 0.28);
  border-radius: 3px;
  color: var(--white);
  font-family: 'Jost', 'Apple Symbols', 'Segoe UI Symbol', sans-serif;
  font-size: 1rem;
  padding: 0.7rem 0.8rem;
  transition: border-color var(--transition);
}
.quote-field input:focus,
.quote-field textarea:focus {
  outline: none;
  border-color: var(--gold);
}
.quote-field textarea { resize: vertical; min-height: 2.6rem; }

/* Hunajapurkki pois näkyvistä (ei display:none, jotta botit täyttävät). */
.quote-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.quote-error {
  color: #E7A6A6;
  background: rgba(180, 60, 60, 0.12);
  border-left: 3px solid #C0564E;
  border-radius: 2px;
  font-size: 0.92rem;
  padding: 0.6rem 0.8rem;
  margin: 0.4rem 0 1rem;
}

.quote-actions { margin-top: 0.4rem; }
.quote-actions .btn-primary { width: 100%; text-align: center; }

.quote-alt {
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.9rem;
  text-align: center;
  margin-top: 1rem;
}

.quote-success { text-align: center; padding: 1.5rem 0 0.5rem; }
.quote-success .quote-intro { margin: 0 auto 1.6rem; max-width: 26rem; }
.quote-success .quote-actions .btn-primary { max-width: 220px; margin: 0 auto; }

@media (max-width: 600px) {
  .quote-modal { padding: 2rem 1.3rem 1.6rem; }
  .quote-title { font-size: 1.55rem; }
  .quote-grid { grid-template-columns: 1fr; gap: 0.8rem; }
}


/* ============================================================
   KAPEA PUHELIN — pakettinapin teksti mahtuu laatikkoon
   Kaksi korttia vierekkäin kapealla näytöllä jättää napille
   vähän tilaa; "SUUNNITTELE →" vuoti yli reunan (isot kirjaimet +
   kirjainväli). Pienennetään väliä, kokoa ja sisäreunusta niin että
   teksti pysyy yhdellä rivillä laatikon sisällä.
   ============================================================ */
@media (max-width: 520px) {
  .showcase-card .product-info,
  .product-card .product-info { padding-left: 0.7rem; padding-right: 0.7rem; }

  .showcase-go,
  .add-btn-full {
    font-size: 0.74rem;
    letter-spacing: 0;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}


/* ============================================================
   TARJOUSLOMAKE — TEKSTI + KPL -RIVIT
   ============================================================ */
.quote-rows-label {
  display: block;
  color: var(--gold);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 0.45rem;
}

.quote-rows { display: flex; flex-direction: column; gap: 0.5rem; }

.quote-row {
  display: grid;
  grid-template-columns: 1fr 92px 34px;
  gap: 0.5rem;
  align-items: center;
}

.quote-row input {
  width: 100%;
  background: var(--dark);
  border: 1px solid rgba(201, 168, 76, 0.28);
  border-radius: 3px;
  color: var(--white);
  font-family: 'Jost', 'Apple Symbols', 'Segoe UI Symbol', sans-serif;
  font-size: 0.98rem;
  padding: 0.65rem 0.75rem;
  transition: border-color var(--transition);
}
.quote-row input:focus { outline: none; border-color: var(--gold); }
.quote-row-qty { text-align: center; }

.quote-row-del {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 3px;
  color: rgba(255, 255, 255, 0.45);
  font-size: 1.15rem;
  line-height: 1;
  height: 2.45rem;
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition);
}
.quote-row-del:hover { color: #E7A6A6; border-color: rgba(231, 166, 166, 0.5); }

.quote-addrow {
  margin-top: 0.6rem;
  background: none;
  border: 1px dashed rgba(201, 168, 76, 0.5);
  border-radius: 3px;
  color: var(--gold);
  font-family: 'Jost', 'Apple Symbols', 'Segoe UI Symbol', sans-serif;
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 0.55rem 1.1rem;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}
.quote-addrow:hover { background: rgba(201, 168, 76, 0.1); border-color: var(--gold); }

.quote-rowhint {
  margin: 0.7rem 0 0;
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.84rem;
  line-height: 1.55;
}
.quote-rowhint strong { color: rgba(255, 255, 255, 0.7); }

.quote-total {
  display: block;
  margin-top: 0.3rem;
  color: var(--gold);
  font-weight: 600;
  letter-spacing: 0.5px;
}

@media (max-width: 600px) {
  .quote-row { grid-template-columns: 1fr 72px 32px; gap: 0.4rem; }
  .quote-row input { font-size: 0.92rem; padding: 0.6rem 0.6rem; }
}