/* ==========================================================================
   Thai Heritage — home (strona-home) · SITEMAP 2.1, CONCEPT §4–§8, HERO.md §2
   Rytm: hero (sala, wrota) → tryptyk (dziedziniec) → 12 stylizacji (sala) →
   nowa kolekcja (sala) → divider → pakiety + wizyta (dziedziniec) →
   mundurki (sala) → sklep + formularz (dziedziniec) → stopka (noc).
   Kolory wyłącznie przez zmienne powierzchni / tokeny; zero style="".
   ========================================================================== */

/* ---------- 1. Hero „Wrota” ---------- */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: calc(
      var(--header-h) + var(--banner-h, 0px) + clamp(1.25rem, 4.5vh, 3.5rem)
    )
    var(--gutter) clamp(2rem, 6vh, 4.5rem);
  /* laka + ciepło świecy za portretem (materiał, nie dekoracja) */
  background-color: var(--lacquer-900);
  background-image:
    var(--svg-grain),
    radial-gradient(
      55% 75% at 76% 48%,
      rgba(176, 48, 31, 0.3),
      rgba(176, 48, 31, 0) 70%
    ),
    radial-gradient(
      40% 50% at 18% 92%,
      rgba(198, 154, 68, 0.1),
      rgba(198, 154, 68, 0) 70%
    ),
    linear-gradient(var(--lacquer-950), var(--lacquer-900) 35%);
  background-size:
    180px 180px,
    100% 100%,
    100% 100%,
    100% 100%;
}
.hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: clamp(2rem, 6vw, 7rem);
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
}
.hero__text {
  display: grid;
  justify-items: start;
  align-content: center;
  min-width: 0;
}
.hero__kicker {
  margin-bottom: clamp(0.75rem, 2vh, 1.25rem);
}
.hero__title {
  max-width: 11em;
  /* niski ekran laptopa (1280 × 720): tytuł skaluje się też z wysokością, żeby CTA i ceny były nad zgięciem */
  font-size: min(var(--fs-display), 9.4svh);
  text-wrap: balance;
}
.hero__title:lang(zh) {
  font-size: min(var(--fs-display), 9svh);
}
.hero__title:lang(th) {
  font-size: min(var(--fs-display), 7.6svh);
}
@media (min-width: 48.0625rem) {
  .hero__title .keep {
    white-space: nowrap;
  }
}
.hero__lead,
.looks__intro,
.pieces__intro,
.plans__lead,
.uniform-teaser__lead,
.cr-teaser__lead,
.shop__lead,
.enquiry__lead {
  hyphens: manual;
}
.hero__lead {
  max-width: 38rem;
  margin-top: clamp(1rem, 2.6vh, 1.6rem);
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--text-2);
}

/* ceny: tabliczka z cienkich złotych linii; 8 h w kartuszu z plakietką; czwarta kolumna = suknia VIP ze zdjęć */
.hero__prices {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, auto));
  width: min(100%, 44rem);
  margin-top: clamp(1.4rem, 3.4vh, 2.25rem);
  border-block: 1px solid var(--line);
}
.hero__price {
  position: relative;
  display: grid;
  align-content: start;
  gap: 0.35rem;
  padding: 1.05rem clamp(0.75rem, 1.6vw, 1.5rem) 1rem;
}
.hero__price:first-child {
  padding-left: 0;
}
.hero__price.is-pick {
  margin-block: -1px;
  padding-inline: clamp(1rem, 2vw, 1.6rem);
  background-color: rgba(219, 180, 99, 0.08);
  box-shadow:
    inset 0 0 0 1px var(--gold-400),
    0 18px 40px -26px rgba(219, 180, 99, 0.55);
}
.hero__price.is-pick .badge--pick {
  position: absolute;
  top: 0;
  left: clamp(1rem, 2vw, 1.6rem);
  transform: translateY(-50%);
}
.hero__pkg {
  font-family: var(--ff-body);
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1.35;
  color: var(--text-2);
}
.hero__time {
  display: block;
  font-weight: 400;
  color: var(--text-3);
}
.hero__price .price {
  font-size: clamp(1.55rem, 2.3vw, 2.15rem);
}
.hero__price.is-pick .price {
  color: var(--gold-300);
}

/* suknia VIP (CHANGES-2026-10-25 §2.1): inna kategoria niż czas wypożyczenia, więc oddzielona pionową linią */
.hero__price--vip {
  border-left: 1px solid var(--line);
}
.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem 1rem;
  margin-top: clamp(1.4rem, 3.4vh, 2.25rem);
}
/* pieczęć: etykieta nad numerem ID (ID zawsze widoczne — da się przepisać ręcznie) */
.hero__ctas .btn--seal .btn__label,
.enquiry__ctas .btn--seal .btn__label {
  display: grid;
  justify-items: start;
  line-height: 1.2;
  text-align: start;
}
.hero__ctas .btn--seal .btn__id,
.enquiry__ctas .btn--seal .btn__id {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--text-2);
}

.hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.4rem;
  margin-top: clamp(1.1rem, 2.6vh, 1.6rem);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  font-weight: 500;
  color: var(--text-2);
}
.hero__trust li {
  display: inline-flex;
  align-items: center;
}
.hero__trust li::before,
.steps__opt::before {
  content: "";
  width: 0.38em;
  height: 0.38em;
  margin-inline: 0 0.6em;
  background-color: var(--gold-text);
  -webkit-mask: var(--svg-dia) center / contain no-repeat;
  mask: var(--svg-dia) center / contain no-repeat;
}
.hero__where {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem 0.5rem;
  margin-top: 0.35rem;
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--text-3);
}
.hero__where .icon {
  width: 1.05rem;
  height: 1.05rem;
  color: var(--gold-text);
}
.hero__where a {
  color: var(--link);
}
.hero__where a:hover {
  color: var(--link-hover);
}

/* portret w ramce marki — LCP; wysokość ramki mieści się w ekranie */
.hero__photo {
  width: min(34rem, calc((100svh - var(--header-h) - 9rem) / 1.5 + 2.2rem));
  min-width: 17rem;
  margin: 0;
}
.hero__photo picture {
  aspect-ratio: 2 / 3;
}
.hero__photo img {
  height: 100%;
}

/* ---------- 2. Tryptyk trzech pism ---------- */
.triptych {
  padding-block: clamp(3rem, 7vw, 6rem);
}
.triptych__frame {
  --frame-pad: clamp(2rem, 4.4vw, 4.25rem);
  width: min(100%, 80rem);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  text-align: center;
}
.triptych__line {
  position: relative;
  max-width: none;
  padding-inline: clamp(1rem, 2.6vw, 2.75rem);
  font-family: var(--ff-display);
  font-weight: var(--fw-display);
  letter-spacing: var(--ls-display);
  font-size: calc(var(--fs-h2) * 0.94);
  line-height: var(--lh-h2);
  color: var(--ink-900);
  text-wrap: balance;
  hyphens: manual;
}
.triptych__line[lang|="zh"] {
  color: var(--lacquer-700);
}
.triptych__line[lang="th"] {
  color: var(--gold-800);
  text-align: center; /* base.css [lang="th"] { text-align: start } nadpisywał środek ramy */
}
/* pionowe złote linie z rombem — trzy skrzydła parawanu */
.triptych__line + .triptych__line::before {
  content: "";
  position: absolute;
  top: 8%;
  bottom: 8%;
  left: 0;
  width: 9px;
  translate: -50% 0;
  -webkit-mask:
    linear-gradient(#000, #000) center / 1px 100% no-repeat,
    var(--svg-dia) center / 9px 9px no-repeat;
  mask:
    linear-gradient(#000, #000) center / 1px 100% no-repeat,
    var(--svg-dia) center / 9px 9px no-repeat;
  background-color: var(--gold-600);
}

/* ---------- 3. Dwanaście stylizacji ---------- */
.looks__head,
.pieces__head,
.plans__head {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  align-items: end;
  gap: 1.5rem var(--col-gap);
}
.looks__aside,
.pieces__intro,
.plans__lead {
  margin: 0;
  justify-self: end;
  max-width: 34rem;
  color: var(--text-2);
}
.looks__aside {
  display: grid;
  gap: 1.25rem;
}
.looks__intro {
  margin: 0;
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
}

/* jedna informacja VIP (stylizacje i ceny): plakietka · nazwa · cena, pod spodem zdanie, że każda pokazana suknia to VIP */
.vip-plate {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.75rem;
  max-width: 34rem;
  margin: 0;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--line);
  border-left: 2px solid var(--gold-400);
  color: var(--text-2);
}
.vip-plate .badge--vip {
  align-self: center;
}
.vip-plate__name {
  color: var(--text);
  font-weight: 500;
}
.vip-plate__price {
  margin-left: auto;
  font-size: clamp(1.5rem, 2vw, 1.85rem);
  color: var(--gold-text);
}
.vip-plate__note {
  flex-basis: 100%;
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--text-3);
}
.looks .dial {
  margin-top: 0.5rem;
}
.looks__more,
.pieces__more {
  justify-self: center;
  margin-top: 0.5rem;
}
.looks .look-card .nameplate--card {
  margin-top: 0.85rem;
}

/* ---------- 4. Nowa kolekcja ---------- */
.pieces__intro {
  font-size: var(--fs-body);
}
.pieces__track {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.5rem, 2.6vw, 2.5rem) var(--col-gap);
}

/* ---------- 6. Pakiety ---------- */
.plans__lead {
  font-size: var(--fs-body);
}
.plans__list {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  padding-top: 1.75rem;
}
.plans__list > li {
  display: flex;
}
.plans .package {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
  width: 100%;
  text-decoration: none;
}
.plans .package .price {
  margin-top: 0.5rem;
  font-size: clamp(2.4rem, 3.4vw, 3.1rem);
}
.plans .package__note {
  margin-top: 0.15rem;
  font-weight: 500;
  color: var(--gold-800);
}
.plans .package__choose {
  align-self: stretch;
  margin-top: auto;
}
.plans .package:hover .package__choose,
.plans .package:focus-visible .package__choose {
  background-color: var(--lacquer-900);
  border-color: var(--lacquer-900);
  color: var(--gold-300);
}
.plans .package:focus-visible {
  outline: 2px solid var(--gold-700);
  outline-offset: 3px;
}
.plans .package--pick .package__choose {
  background-color: var(--lacquer-900);
  border-color: var(--lacquer-900);
  color: var(--gold-300);
}
.plans .package--pick:hover .package__choose {
  background-color: var(--lacquer-700);
}
/* suknia VIP: czwarta karta, plakietka na górnej krawędzi jak „our pick” */
.plans .package--vip .badge--vip {
  position: absolute;
  top: 0;
  left: clamp(1.5rem, 2.4vw, 2.25rem);
  transform: translateY(-50%);
}
.plans__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem clamp(1.5rem, 3vw, 3rem);
}
.plans__note {
  flex: 1 1 22rem;
  margin: 0;
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--text-2);
}
.plans__foot .chips {
  flex: 2 1 28rem;
}
.plans__more {
  flex: 0 0 auto;
}

/* ---------- 7. Jak wygląda wizyta (prawdziwa sekwencja → numery) ---------- */
.steps__list {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1.5rem var(--col-gap);
  margin: 0;
}
.steps__list::before {
  content: "";
  position: absolute;
  top: 1.4rem;
  left: 1.4rem;
  right: 0;
  height: 1px;
  background: linear-gradient(
    to right,
    var(--gold-600) 0 80%,
    rgba(166, 124, 46, 0)
  );
}
.steps__item {
  position: relative;
  display: grid;
  align-content: start;
  gap: 0.6rem;
}
.steps__num {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  width: 2.8rem;
  height: 2.8rem;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  font-variant-numeric: lining-nums;
  line-height: 1;
  color: var(--gold-800);
}
.steps__num::before {
  content: "";
  position: absolute;
  inset: 0.42rem;
  z-index: -1;
  border: 1px solid var(--gold-600);
  background-color: var(--cream-100);
  transform: rotate(45deg);
}
.steps__item:last-child .steps__num::before {
  background-color: var(--lacquer-900);
  border-color: var(--lacquer-900);
}
.steps__item:last-child .steps__num {
  color: var(--gold-300);
}
/* ZH: bez cyfr (zakaz eksponowanej 4) — w rombie mały złoty romb, jak na /visit/ */
.steps__num:empty::after {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  background-color: currentColor;
  transform: rotate(45deg);
}
.steps__title {
  margin-top: 0.4rem;
  font-size: max(1.25rem, calc(var(--fs-h4) * 0.86));
  line-height: var(--lh-h4);
}
.steps__opt {
  display: inline-flex;
  align-items: center;
  font-family: var(--ff-body);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0;
  color: var(--text-3);
  vertical-align: 0.1em;
}
.steps__opt::before {
  margin-inline: 0.1em 0.5em;
}
.steps__text {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--text-2);
}
.steps__more,
.plans__more {
  margin: 0;
}

/* ---------- 8. Mundurki (sala) ---------- */
.uniform-teaser__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
  gap: 2rem clamp(2rem, 6vw, 7rem);
}
.uniform-teaser__photo {
  margin: 0;
}
.uniform-teaser__photo picture {
  aspect-ratio: 4 / 5;
}
.uniform-teaser__photo img {
  height: 100%;
}
.uniform-teaser__text {
  display: grid;
  justify-items: start;
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
.uniform-teaser__lead {
  max-width: 34rem;
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--text-2);
}
.uniform-teaser__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: min(100%, 40rem);
  margin: 0;
  border-block: 1px solid var(--line);
}
.uniform-teaser__facts > div {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: 0.35rem;
  padding: 1.1rem clamp(0.75rem, 1.6vw, 1.5rem) 1.1rem;
}
.uniform-teaser__facts > div:first-child {
  padding-left: 0;
}
.uniform-teaser__facts > div + div {
  border-left: 1px solid var(--line);
}
.uniform-teaser__facts dt {
  font-size: var(--fs-small);
  line-height: 1.4;
  color: var(--text-2);
}
.uniform-teaser__facts dd {
  margin: 0;
}
.uniform-teaser__facts .price {
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  color: var(--gold-text);
}

/* ---------- 8b. Biała Świątynia, Chiang Rai (sala, lustro mundurków: tekst po lewej, zdjęcie po prawej) ---------- */
.cr-teaser__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  align-items: center;
  gap: 2rem clamp(2rem, 6vw, 7rem);
}
.cr-teaser__text {
  display: grid;
  justify-items: start;
  gap: clamp(1.1rem, 2.2vw, 1.75rem);
}
.cr-teaser__lead {
  max-width: 34rem;
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--text-2);
}
.cr-teaser__facts {
  display: grid;
  width: min(100%, 34rem);
  margin: 0;
  border-top: 1px solid var(--line);
}
.cr-teaser__facts > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--line);
}
.cr-teaser__facts dt {
  font-size: var(--fs-small);
  line-height: 1.4;
  color: var(--text-2);
}
.cr-teaser__facts dd {
  flex: none;
  margin: 0;
}
.cr-teaser__facts .price {
  font-size: clamp(1.35rem, 1.9vw, 1.65rem);
  color: var(--gold-text);
}
.cr-teaser__travel {
  max-width: 34rem;
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--text-3);
}
.cr-teaser__photo {
  margin: 0;
}
.cr-teaser__photo picture {
  aspect-ratio: 4 / 5;
}
.cr-teaser__photo img {
  height: 100%;
}

/* ---------- 9. Prawdziwy sklep ---------- */
.shop__grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  align-items: center;
  gap: 2.5rem clamp(2rem, 6vw, 7rem);
}
.shop__photos {
  position: relative;
  padding-bottom: 22%;
}
.shop__photos figure {
  margin: 0;
}
.shop__studio {
  width: 90%;
}
.shop__studio picture {
  aspect-ratio: 3 / 2;
}
.shop__front {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 40%;
  box-shadow: 0 30px 60px -30px rgba(42, 16, 11, 0.55);
}
.shop__front picture {
  aspect-ratio: 3 / 4;
}
.shop__photos img {
  height: 100%;
}
.shop__text {
  display: grid;
  justify-items: start;
  gap: 1.5rem;
}
.shop__lead {
  color: var(--text-2);
}
.shop__facts {
  display: grid;
  gap: 1rem;
  margin: 0;
  width: 100%;
  padding-block: 1.25rem;
  border-block: 1px solid var(--line);
}
.shop__facts > div {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  gap: 0.25rem 1rem;
}
.shop__facts dt {
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: var(--lh-body);
  color: var(--text-3);
}
.shop__facts dd {
  margin: 0;
  overflow-x: clip; /* WebKit (ZH autospace) reports ~17 px phantom overflow on „09:00–18:00（周日休息）” → 1 px page pan on iPhone */
}
.shop__facts a {
  color: var(--link);
  font-weight: 500;
}
.shop__facts a:hover {
  color: var(--link-hover);
}
.shop__moved,
.shop__langs {
  font-size: var(--fs-small);
  color: var(--text-3);
}
.shop__maps {
  display: grid;
  gap: 0.6rem;
}
.shop__maps-label {
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--text-3);
}
.shop__map-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.shop__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.75rem;
}

/* ---------- 10. Formularz skrócony ---------- */
.enquiry__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: start;
  gap: 2.5rem clamp(2rem, 6vw, 7rem);
}
.enquiry__intro {
  display: grid;
  justify-items: start;
  gap: 1.25rem;
}
.enquiry__lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--text-2);
}
.enquiry__other {
  margin-top: 0.5rem;
  font-weight: 500;
  color: var(--text);
}
.enquiry__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.enquiry__channels {
  display: grid;
  gap: 0.5rem;
  font-size: var(--fs-body);
}
.enquiry__channels li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.6rem;
}
.enquiry__channels .icon {
  color: var(--gold-text);
}
.enquiry__channels a {
  color: var(--link);
  font-weight: 500;
}
.enquiry__channels a:hover {
  color: var(--link-hover);
}
.enquiry__langs {
  font-size: var(--fs-small);
  color: var(--text-3);
}
.enquiry__garland {
  width: min(13rem, 55%);
  margin-top: 1rem;
  padding: 6px;
  background-color: var(--cream-50);
  box-shadow:
    inset 0 0 0 1px var(--gold-600),
    0 30px 60px -36px rgba(42, 16, 11, 0.6);
}
.enquiry__garland picture {
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.enquiry__garland img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.enquiry__panel {
  display: grid;
  gap: 1.25rem;
  padding: clamp(1.5rem, 3.4vw, 3rem);
  border: 1px solid var(--line-paper);
  border-top: 2px solid var(--gold-600);
  border-radius: var(--radius);
  background-color: var(--cream-50);
  box-shadow: 0 40px 80px -50px rgba(42, 16, 11, 0.55);
}
.enquiry__form .form__actions {
  padding-top: 0.25rem;
}
.enquiry__deposit,
.enquiry__full {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--text-3);
}
.enquiry__full a,
.form-status a {
  color: var(--link);
}

/* ==========================================================================
   Responsywność
   ========================================================================== */
@media (max-width: 80rem) {
  .steps__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .steps__list::before {
    display: none;
  }
}

@media (max-width: 64rem) {
  .hero__grid {
    column-gap: clamp(1.5rem, 4vw, 3rem);
  }
  .hero__photo {
    width: min(22rem, 36vw);
    min-width: 0;
  }
  .hero__title {
    font-size: calc(var(--fs-display) * 0.86);
  }
  .pieces__track {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .triptych__frame {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
  }
  .triptych__line + .triptych__line {
    padding-top: 1.5rem;
  }
  .triptych__line {
    font-size: var(--fs-h3);
    line-height: var(--lh-h3);
  }
  .triptych__line + .triptych__line::before {
    top: 0;
    bottom: auto;
    left: 50%;
    width: min(12rem, 60%);
    height: 9px;
    translate: -50% -50%;
    -webkit-mask:
      linear-gradient(#000, #000) center / 100% 1px no-repeat,
      var(--svg-dia) center / 9px 9px no-repeat;
    mask:
      linear-gradient(#000, #000) center / 100% 1px no-repeat,
      var(--svg-dia) center / 9px 9px no-repeat;
  }
  .shop__facts > div {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 48rem) {
  /* hero: kicker + tytuł obok portretu (wyśrodkowane w pionie: puste wiersze 1fr nad i pod), reszta pod
     spodem — komplet decyzji w 390 × 844 i 390 × 750 (WeChat). Portret 44vw, maks. 15rem (CONCEPT §4.0
     pkt 1: wyraźnie większy niż miniatura 36vw); rozmiary H1 dobrane tak, by najdłuższa fraza
     („in Nimman.”, „在宁曼路，”, „ชุดไทยผ้าไหม”) mieściła się w kolumnie bez łamania słowa. */
  .hero {
    align-items: start;
    padding: calc(var(--header-h) + var(--banner-h, 0px) + 1rem) var(--gutter)
      2.25rem;
  }
  .hero__grid {
    grid-template-columns: minmax(0, 1fr) min(44vw, 15rem);
    grid-template-rows: 1fr auto auto 1fr;
    grid-template-areas:
      ". photo"
      "kicker photo"
      "title photo"
      ". photo"
      "lead lead"
      "prices prices"
      "ctas ctas"
      "trust trust"
      "where where";
    align-items: start;
    column-gap: 1rem;
  }
  .hero__text {
    display: contents;
  }
  .hero__kicker {
    grid-area: kicker;
    margin-bottom: 0.85rem;
    text-wrap: balance; /* TH: „ย่านนิมมาน” w jednym wierszu (bez łamania między ย่าน | นิมมาน) */
  }
  .hero__title {
    grid-area: title;
    font-size: clamp(1.75rem, 8.5vw, 3.6rem);
  }
  .hero__title:lang(zh) {
    font-size: clamp(1.75rem, 8.4vw, 2.4rem);
  }
  .hero__title:lang(th) {
    font-size: clamp(1.75rem, 8.1vw, 2.5rem);
  }
  .hero__photo {
    grid-area: photo;
    align-self: center;
    width: 100%;
  }
  .hero__photo .frame {
    --frame-pad: 5px;
    --frame-gap: 4px;
  }
  .hero__lead {
    grid-area: lead;
    margin-top: 1rem;
    font-size: 1.0625rem;
    line-height: 1.55;
  }
  .hero__prices {
    grid-area: prices;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    margin-top: 1.4rem;
  }
  .hero__price {
    padding: 0.85rem 0.55rem 0.75rem;
  }
  .hero__price.is-pick {
    padding-inline: 0.6rem;
  }
  .hero__price.is-pick .badge--pick {
    left: 0.6rem;
  }
  .hero__price .price {
    font-size: 1.5rem;
  }
  .hero__pkg {
    font-size: 0.8125rem;
  }
  .hero__ctas {
    grid-area: ctas;
    margin-top: 1.25rem;
  }
  .hero__ctas > .btn {
    flex: 1 1 auto;
  }
  .hero__ctas > .btn--seal {
    justify-content: flex-start;
  }
  .hero__trust {
    grid-area: trust;
    margin-top: 1rem;
  }
  .hero__where {
    grid-area: where;
  }
  /* VIP: pełny wiersz pod trzema pakietami (cztery kolumny nie mieszczą się w 390 px) */
  .hero__price--vip {
    grid-column: 1 / -1;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--line);
  }
  .hero__price--vip .hero__time {
    display: inline;
    margin-left: 0.35em;
  }

  .looks__head,
  .pieces__head,
  .plans__head,
  .uniform-teaser__grid,
  .cr-teaser__grid,
  .shop__grid,
  .enquiry__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .looks__aside,
  .pieces__intro,
  .plans__lead {
    justify-self: start;
  }
  .vip-plate {
    padding: 0.8rem 0.9rem;
  }
  .cr-teaser__photo {
    order: -1;
    width: min(100%, 26rem);
  }

  /* nowa kolekcja: poziomy pas z przyciąganiem (bez JS) */
  .pieces__track {
    display: flex;
    gap: 1rem;
    margin-inline: calc(-1 * var(--gutter));
    padding: 0.25rem var(--gutter) 0.75rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .pieces__track::-webkit-scrollbar {
    display: none;
  }
  .pieces__track > .piece-card {
    flex: 0 0 74vw;
    scroll-snap-align: start;
  }

  .plans__list {
    grid-template-columns: minmax(0, 1fr);
    padding-top: 1rem;
    gap: 1.25rem;
  }
  /* karta pakietu: nazwa i czas po lewej, cena po prawej, przycisk pod spodem */
  .plans .package {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "name price"
      "time price"
      "note note"
      "choose choose";
    align-items: center;
    column-gap: 1rem;
    row-gap: 0.2rem;
    padding: 1.4rem 1.25rem 1.25rem;
  }
  .plans .package__name {
    grid-area: name;
  }
  .plans .package__time {
    grid-area: time;
  }
  .plans .package .price {
    grid-area: price;
    margin: 0;
    font-size: 2.3rem;
  }
  .plans .package__note {
    grid-area: note;
    margin-top: 0.35rem;
  }
  .plans .package__choose {
    grid-area: choose;
    margin-top: 0.85rem;
  }

  .steps__list {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .steps__list::before {
    display: block;
    top: 1.4rem;
    bottom: 1.4rem;
    left: 1.4rem;
    right: auto;
    width: 1px;
    height: auto;
    background: var(--gold-600);
  }
  .steps__item {
    grid-template-columns: 2.8rem minmax(0, 1fr);
    column-gap: 1rem;
    row-gap: 0.2rem;
    padding-bottom: 1.25rem;
  }
  .steps__num {
    grid-row: span 2;
  }
  .steps__title {
    margin-top: 0.45rem;
  }

  .uniform-teaser__photo {
    width: min(100%, 26rem);
  }
  .uniform-teaser__facts {
    grid-template-columns: minmax(0, 1fr);
  }
  .uniform-teaser__facts > div {
    display: grid;
    grid-template-columns: 6.25rem minmax(0, 1fr);
    align-items: baseline;
    gap: 1rem;
    padding: 0.85rem 0;
  }
  .uniform-teaser__facts dd {
    grid-area: 1 / 1;
  }
  .uniform-teaser__facts dt {
    grid-area: 1 / 2;
  }
  .uniform-teaser__facts > div + div {
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .shop__photos {
    padding-bottom: 26%;
  }

  .enquiry__intro {
    gap: 1rem;
  }
  .enquiry__garland {
    display: none;
  }
  .enquiry__panel {
    margin-inline: calc(-1 * var(--gutter));
    padding: 1.5rem var(--gutter) 1.75rem;
    border-inline: 0;
    border-radius: 0;
  }
  .enquiry__form select {
    padding-right: 2.2em;
    background-position: right 0.6em center;
  }
  .enquiry__ctas > .btn {
    flex: 1 1 100%;
    justify-content: flex-start;
  }
}

/* 36–48rem (duży telefon poziomo, tablet pionowo): także lead w kolumnie obok portretu — bez pustej
   kolumny przy wysokiej ramce; całość wyśrodkowana w wysokości ekranu jak na desktopie. */
@media (min-width: 36.0625rem) and (max-width: 48rem) {
  .hero {
    align-items: center;
  }
  .hero__grid {
    grid-template-columns: minmax(0, 1fr) min(16rem, 40vw);
    grid-template-rows: 1fr auto auto auto 1fr;
    grid-template-areas:
      ". photo"
      "kicker photo"
      "title photo"
      "lead photo"
      ". photo"
      "prices prices"
      "ctas ctas"
      "trust trust"
      "where where";
    column-gap: clamp(1.25rem, 4vw, 2rem);
  }
  .hero__title {
    font-size: clamp(2.3rem, 7.4vw, 3.6rem);
  }
  .hero__title:lang(zh) {
    font-size: clamp(1.85rem, 5.6vw, 2.6rem);
  }
  .hero__title:lang(th) {
    font-size: clamp(1.9rem, 5.8vw, 2.7rem);
  }
  .hero__prices {
    margin-top: 1.75rem;
  }
}

@media (max-width: 30rem) {
  .hero__ctas > .btn {
    flex-basis: 100%;
  }
}

@media (max-width: 22.5rem) {
  .hero__grid {
    grid-template-columns: minmax(0, 1fr) 42vw;
  }
  .hero__price .price {
    font-size: 1.3rem;
  }
}

/* niskie ekrany desktopowe: ciaśniejszy rytm hero (komplet decyzji nad zgięciem) */
@media (min-width: 48.0625rem) and (max-height: 50rem) {
  .hero {
    padding-top: calc(var(--header-h) + var(--banner-h, 0px) + 1rem);
    padding-bottom: 1.5rem;
  }
  .hero__kicker {
    margin-bottom: 0.5rem;
  }
  .hero__lead {
    max-width: 42rem;
    margin-top: 0.75rem;
    font-size: 1.125rem;
  }
  .hero__prices,
  .hero__ctas {
    margin-top: 1.1rem;
  }
  .hero__price {
    padding-block: 0.8rem 0.7rem;
  }
  .hero__trust {
    margin-top: 0.8rem;
  }
  .hero__where {
    margin-top: 0.15rem;
  }
}