/* ==========================================================================
   Sabai v3: sivukohtaiset tyylit hintalista/, sarjahoidot/, tarjoukset/
   Ladataan style.css:n jälkeen. Käyttää style.css:n tokeneita ja komponentteja.
   .pagehead            alasivun pää (teksti + kuva), padding-top header + 96
   .subnav              hinnaston sticky osastonavi (scrollspy js/page-hinnasto.js)
   .dept / .svc / .more hinnaston osasto: sticky kuva + hoitorivit + <details>
   .seriesbox           laitehoitojen sarjahoitolaatikko (kultahiusviivakehys)
   .srow / .buylist     sarjahoitojen kuva + ostorivit
   .tiers               kolmen sarakkeen hintataulukko (ultraääni)
   .rules, .terms       ehdot hiusviivariveinä
   .offer, .devices     tarjoukset
   ========================================================================== */

/* ---------- ankkurit: yksi offset (header + osastonavi + 16) ---------- */
:root { --subnav-h: 0px; }
html.has-subnav { --subnav-h: 56px; }
html { scroll-padding-top: calc(var(--header-h) + var(--subnav-h) + 16px); }
[id] { scroll-margin-top: 0; }

/* ---------- alasivun pää ---------- */
.pagehead { padding-top: calc(var(--header-h) + 96px); padding-bottom: var(--section); }
.pagehead__grid { align-items: end; row-gap: 48px; }
.has-subnav .pagehead { padding-bottom: clamp(56px, 6vw, 96px); }
/* sama pinta peräkkäin: ei kaksinkertaista osioväliä */
.pagehead.bg + .section.bg { padding-top: 0; }
.pagehead__text .lead { max-width: 46ch; }
.pagehead__media { margin: 0; }
.pagehead__media img { width: 100%; height: 100%; object-fit: cover; }
.pagehead__grid--tall { align-items: end; }
.pagehead__grid--tall { align-items: center; }
.pagehead__media--tall { max-width: 440px; justify-self: end; width: 100%; }

/* tarjousten pikalinkit (pään ledger) */
.jumps { margin-top: 40px; border-bottom: 1px solid var(--line); max-width: 560px; }
.stack > .lead + .jumps { margin-top: 40px; }
.jump { display: grid; grid-template-columns: minmax(0, 1fr) auto 18px; align-items: baseline; column-gap: 20px; padding: 18px 0; border-top: 1px solid var(--line); }
.jump__name { font-family: var(--f-display); font-size: clamp(1.375rem, 1.8vw, 1.625rem); line-height: 1.2; transition: color var(--dur-micro) var(--ease-out); }
.jump__price { font-family: var(--f-display); font-size: clamp(1.375rem, 1.8vw, 1.625rem); color: var(--gold); white-space: nowrap; }
.jump__from { font-family: var(--f-body); font-size: 14px; color: var(--cream-70); margin-right: 6px; }
.jump__arrow { width: 18px; height: 18px; color: var(--gold-2); align-self: center; transition: transform var(--dur-micro) var(--ease-out); }
.jump:hover .jump__name { color: var(--gold-2); }
.jump:hover .jump__arrow { transform: translateX(4px); }
@media (max-width: 599px) {
  .jump { grid-template-columns: minmax(0, 1fr) 18px; row-gap: 2px; }
  .jump__price { grid-column: 1; grid-row: 2; }
  .jump__arrow { grid-column: 2; grid-row: 1 / span 2; }
}
.pagehead__aside { display: flex; justify-content: flex-end; }
.passe { margin: 0; width: 100%; max-width: 520px; padding: clamp(12px, 1.4vw, 20px); background: var(--surface); border-radius: var(--radius); }
.passe .media { border-radius: var(--radius); }
@media (max-width: 899px) {
  .pagehead { padding-top: calc(var(--header-h) + 56px); }
  .pagehead__media--tall { max-width: none; aspect-ratio: 4 / 3; }
  .pagehead__aside { justify-content: flex-start; }
}

/* ---------- osastonavi ---------- */
.pricelist { position: relative; }
.subnav {
  position: sticky;
  top: var(--header-h);
  z-index: 40;
  height: var(--subnav-h);
  background: rgba(26, 17, 11, .97);
  border-bottom: 1px solid var(--line);
}
.subnav__inner { height: 100%; }
.subnav__list {
  display: flex;
  gap: clamp(24px, 3vw, 44px);
  height: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.subnav__list::-webkit-scrollbar { display: none; }
.subnav__list li { flex: none; display: flex; }
.subnav__list a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 100%;
  font-size: 15px;
  font-weight: 500;
  color: var(--cream-70);
  white-space: nowrap;
  transition: color var(--dur-micro) var(--ease-out);
}
.subnav__list a:hover, .subnav__list a.is-active { color: var(--cream); }
.subnav__list a::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: var(--gold);
  transform: scaleX(0); transform-origin: left;
  transition: transform 300ms var(--ease-out);
}
.subnav__list a.is-active::after { transform: scaleX(1); }
.subnav__count { font-size: 13px; font-weight: 400; color: var(--cream-70); font-variant-numeric: lining-nums tabular-nums; }
@media (max-width: 767px) {
  .subnav__inner { padding-inline: 0; }
  .subnav__list { padding-inline: var(--gutter); gap: 24px; scroll-padding-inline: var(--gutter);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 28px), transparent 100%); }
}

/* ---------- osasto: sticky kuva + hoitorivit ---------- */
.dept { padding-block: var(--section); }
.dept__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
}
.dept__aside { grid-column: 1 / span 4; align-self: start; position: sticky; top: calc(var(--header-h) + var(--subnav-h) + 16px); }
.dept__aside h2 { max-width: 12ch; }
.dept__count { margin-top: 12px; font-size: 15px; color: var(--cream-70); }
.dept__media {
  margin: 28px 0 0;
  aspect-ratio: 4 / 5;
  max-height: calc(100vh - var(--header-h) - var(--subnav-h) - 210px);
  min-height: 280px;
}
.dept__list { grid-column: 6 / -1; border-bottom: 1px solid var(--line); }

/* kultainen verho: osaston kuva avautuu keskeltä kerran (sivun muistettava hetki) */
.js .dept__aside[data-reveal] .dept__media img { opacity: 0; scale: 1.05; transition: opacity 1200ms var(--ease-out) 150ms, scale 1800ms var(--ease-out) 150ms, transform var(--dur-img) var(--ease-out); }
.js .dept__aside[data-reveal].is-in .dept__media img { opacity: 1; scale: 1; }
.dept__media::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--line-gold); pointer-events: none; }

.svc { border-top: 1px solid var(--line); padding: 28px 0; }
.svc__head {
  display: grid;
  grid-template-columns: minmax(0, max-content) minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: 16px;
}
.svc__name { font-size: 1.625rem; line-height: 1.15; font-weight: 500; text-wrap: balance; }
.svc__dur { font-size: 15px; color: var(--cream-70); white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }
.svc__price { font-family: var(--f-display); font-size: 1.5rem; line-height: 1.2; color: var(--gold); white-space: nowrap; text-align: right; font-variant-numeric: lining-nums tabular-nums; }
.svc__desc { margin-top: 10px; max-width: 62ch; font-size: 16px; line-height: 1.6; color: var(--cream-70); }
.svc__desc p + p { margin-top: .7em; }

@media (max-width: 899px) {
  .dept__aside { grid-column: 1 / -1; position: static; margin-bottom: 40px; }
  .dept__media { aspect-ratio: 16 / 10; max-height: none; min-height: 0; margin-top: 24px; }
  .dept__list { grid-column: 1 / -1; }
}
@media (max-width: 599px) {
  .svc { padding: 24px 0; }
  .svc__head { grid-template-columns: minmax(0, 1fr) auto; row-gap: 4px; }
  .svc__name { grid-column: 1 / -1; font-size: 1.5rem; }
  .svc__dur { grid-column: 1; }
  .svc__price { grid-column: 2; font-size: 1.375rem; }
  .svc__desc { font-size: 15px; }
}

/* ---------- Lue lisää hoidosta (<details>, 300 ms grid-rows) ---------- */
.more { margin-top: 16px; max-width: 62ch; }
.more summary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  font-size: 15px;
  font-weight: 500;
  color: var(--gold-2);
  cursor: pointer;
  list-style: none;
}
.more summary::-webkit-details-marker { display: none; }
.more summary:hover span:first-child { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; text-decoration-color: var(--line-gold); }
.more__icon { position: relative; width: 11px; height: 11px; flex: none; }
.more__icon::before, .more__icon::after { content: ''; position: absolute; left: 0; top: 5px; width: 11px; height: 1.5px; background: currentColor; transition: transform 300ms var(--ease-out); }
.more__icon::after { transform: rotate(90deg); }
.more[open] .more__icon::after { transform: rotate(0deg); }
.more__body { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 300ms var(--ease-out); }
.more__body.is-collapsed { grid-template-rows: 0fr; }
.more__inner { min-height: 0; overflow: hidden; color: var(--cream-70); font-size: 16px; line-height: 1.6; }
.more__inner > :first-child { margin-top: 12px; }
.more__inner > * + * { margin-top: .8em; }
.more__inner h4 { margin-top: 1.5em; font-family: var(--f-body); font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--cream); }
.more__inner h4 + p { margin-top: .4em; }
.more__list li { position: relative; padding: 8px 0 8px 22px; border-top: 1px solid var(--line); }
.more__list li:last-child { border-bottom: 1px solid var(--line); }
.more__list li::before { content: ''; position: absolute; left: 0; top: 1.15em; width: 10px; height: 1px; background: var(--gold); }
@media (max-width: 599px) { .more__inner { font-size: 15px; } }

/* ---------- laitehoitojen sarjahoitolaatikko ---------- */
.seriesbox { margin: 56px 0 28px; padding: clamp(24px, 3vw, 40px); border: 1px solid var(--line-gold); border-radius: var(--radius); }
.seriesbox__title { font-size: 1.75rem; }
.seriesbox__lead { margin-top: 12px; font-size: 15px; color: var(--cream-70); }
.seriesbox .ledger { margin-top: 24px; }
.seriesbox .ledger__row { padding: 16px 0; }
.seriesbox .link-arrow { margin-top: 28px; }
.dept__list:has(.seriesbox) { border-bottom: 0; }
.dept__list .seriesbox { border-bottom: 1px solid var(--line-gold); }

/* ---------- lopetuslause ---------- */
.closing__inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 28px; }
.closing__text { font-family: var(--f-display); font-size: 1.75rem; line-height: 1.3; max-width: 28ch; text-wrap: balance; }

/* ---------- sarjahoidot: kuva + ostorivit ---------- */
.srows .wrap { display: grid; row-gap: clamp(88px, 10vw, 152px); }
.srow { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: center; }
.srow__media { grid-column: 1 / span 5; margin: 0; }
.srow__body { grid-column: 7 / span 6; }
.srow--flip .srow__media { grid-column: 8 / span 5; grid-row: 1; }
.srow--flip .srow__body { grid-column: 1 / span 6; grid-row: 1; }
.srow__body h2 { margin-bottom: 32px; }
.srow__note { margin-top: 20px; font-size: 15px; }
@media (max-width: 899px) {
  .srow__media, .srow__body, .srow--flip .srow__media, .srow--flip .srow__body { grid-column: 1 / -1; grid-row: auto; }
  .srow__media { margin-bottom: 36px; }
  .srow__media.r-4x5 { aspect-ratio: 4 / 3; }
}

.buylist { border-bottom: 1px solid var(--line); }
.buyrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 7.5rem 8.5rem 18px;
  align-items: center;
  column-gap: clamp(16px, 2.4vw, 32px);
  padding: 20px 0;
  border-top: 1px solid var(--line);
}
.buyrow--four { grid-template-columns: minmax(0, 1fr) 8.5rem 18px; }
.buyrow__qty { font-family: var(--f-display); font-size: clamp(1.5rem, 2vw, 1.875rem); line-height: 1.1; transition: color var(--dur-micro) var(--ease-out); }
.buyrow__save { font-size: 15px; color: var(--cream-70); white-space: nowrap; }
.buyrow__end { display: grid; justify-items: end; row-gap: 2px; text-align: right; }
.buyrow__end .price { font-family: var(--f-display); font-size: clamp(1.5rem, 2vw, 1.75rem); line-height: 1.1; color: var(--gold); white-space: nowrap; }
.buyrow__arrow { width: 18px; height: 18px; color: var(--gold-2); transition: transform var(--dur-micro) var(--ease-out); }
.buyrow:hover .buyrow__qty { color: var(--gold-2); }
.buyrow:hover .buyrow__arrow { transform: translateX(4px); }
@media (max-width: 599px) {
  .buyrow { grid-template-columns: minmax(0, 1fr) auto 18px; row-gap: 2px; column-gap: 14px; padding: 18px 0; }
  .buyrow__qty { grid-column: 1; grid-row: 1; }
  .buyrow__save { grid-column: 1; grid-row: 2; font-size: 14px; }
  .buyrow__end { grid-column: 2; grid-row: 1 / span 2; }
  .buyrow__arrow { grid-column: 3; grid-row: 1 / span 2; }
  .buyrow--four .buyrow__end { grid-row: 1; }
  .buyrow--four .buyrow__arrow { grid-row: 1; }
}

/* yksi lakanpunainen piste: sivun ainoa punainen */
.dot-lacquer { display: inline-block; width: 8px; height: 8px; margin-right: 12px; border-radius: 50%; background: var(--lacquer); box-shadow: 0 0 0 3px rgba(122, 42, 36, .28); vertical-align: .12em; }
.four__lead { max-width: 44ch; }
@media (max-width: 899px) { .four__grid .buylist { margin-top: 40px; } }

/* ---------- ultraääni: hintasarakkeet ---------- */
.tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line-gold); border-bottom: 1px solid var(--line); }
.tiers li + li { border-left: 1px solid var(--line); }
.tier { display: flex; flex-direction: column; align-items: flex-start; height: 100%; padding: clamp(28px, 3vw, 44px) clamp(20px, 2.4vw, 36px) clamp(28px, 3vw, 40px); transition: background-color var(--dur-micro) var(--ease-out); }
.tiers li:first-child .tier { padding-left: 0; }
.tier__qty { font-family: var(--f-display); font-size: clamp(2rem, 3vw, 2.75rem); line-height: 1; }
.tier__kind { margin-top: 8px; font-size: 15px; color: var(--cream-70); }
.tier__price { margin-top: clamp(28px, 3vw, 40px); font-family: var(--f-display); font-size: clamp(2.25rem, 3.4vw, 3rem); line-height: 1; color: var(--gold); }
.tier .was { margin-top: 8px; }
.tier__buy { margin-top: 28px; display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 7px; text-decoration-color: var(--line-gold); transition: color var(--dur-micro); }
.tier__buy svg { width: 16px; height: 16px; transition: transform var(--dur-micro) var(--ease-out); }
.tier:hover .tier__buy { color: var(--gold-2); text-decoration-color: var(--gold-2); }
.tier:hover .tier__buy svg { transform: translateX(4px); }
.tier:hover .tier__qty { color: var(--gold-2); }
.tiers__more { margin-top: 40px; }
@media (max-width: 767px) {
  .tiers { grid-template-columns: 1fr; border-top: 0; }
  .tiers li + li { border-left: 0; }
  .tiers li { border-top: 1px solid var(--line); }
  .tiers li:first-child { border-top-color: var(--line-gold); }
  .tier, .tiers li:first-child .tier { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; padding: 24px 0; }
  .tier__qty { grid-column: 1; font-size: 1.875rem; }
  .tier__kind { grid-column: 1; margin-top: 4px; }
  .tier__price { grid-column: 2; grid-row: 1; margin-top: 0; font-size: 1.875rem; justify-self: end; }
  .tier .was { grid-column: 2; grid-row: 2; margin-top: 4px; justify-self: end; }
  .tier__buy { grid-column: 1 / -1; margin-top: 16px; }
}

/* ---------- käytännöt ---------- */
.rules__head { position: sticky; top: calc(var(--header-h) + 32px); align-self: start; }
.rules__list { border-bottom: 1px solid var(--line); }
.rules__list li { padding: 24px 0; border-top: 1px solid var(--line); font-family: var(--f-display); font-size: clamp(1.25rem, 1.7vw, 1.5rem); line-height: 1.35; }
@media (max-width: 899px) {
  .rules__head { position: static; margin-bottom: 40px; }
}

/* ---------- tarjoukset ---------- */
.offer__grid { align-items: center; row-gap: 48px; }
.offer__media .passe { max-width: 480px; }
.terms { margin-top: 20px; }
.terms li { position: relative; padding: 6px 0 6px 22px; font-size: 15px; color: var(--cream-70); }
.terms li::before { content: ''; position: absolute; left: 0; top: 1.05em; width: 10px; height: 1px; background: var(--gold); }
.stack > .terms + .buylist { margin-top: 32px; }
.stack > .buylist + .btn-row { margin-top: 32px; }

.devices__aside { position: sticky; top: calc(var(--header-h) + 32px); align-self: start; }
.devices__lead { margin-top: 20px; max-width: 30ch; }
.devices__fig { margin: 40px 0 0; padding: 10px; max-width: 360px; }
.devices__fig img { width: 100%; max-width: 340px; height: auto; border-radius: var(--radius); }
.ledger--big .ledger__row { padding: 18px 0; font-family: var(--f-display); font-size: clamp(1.25rem, 1.7vw, 1.5rem); line-height: 1.25; }
.ledger--big .ledger__row .was { font-family: var(--f-body); }
.ledger--big .price { font-size: clamp(1.375rem, 1.8vw, 1.625rem); }
.devices__sub { margin-top: 64px; margin-bottom: 20px; }
.devices__more { margin-top: 32px; }
.devices__btns { margin-top: 40px; }
@media (max-width: 899px) {
  .devices__aside { position: static; margin-bottom: 48px; }
  .devices__fig { max-width: 300px; }
}

/* ---------- liikkeen rajoitus ---------- */
@media (prefers-reduced-motion: reduce) {
  .js .dept__aside[data-reveal] .dept__media img { opacity: 1; scale: 1; transition: none; }
  .more__body, .more__icon::before, .more__icon::after, .subnav__list a::after { transition: none; }
}

/* breakpoint-kierros 15.10.: puhelin vaakatilassa pää mahtuu ensimmäiseen näkymään */
@media (max-height: 500px) and (orientation: landscape) {
  .pagehead { padding-top: calc(var(--header-h) + 1.25rem); }
  .pagehead__text .lead { max-width: 64ch; }
  .pagehead .stack > .lotus + :is(h1, h2) { margin-top: 0.75rem; }
}

/* ---------- tarjoukset: lokakuun kampanja (16.10.) ----------
   desktop: kuvat + hinnat vasemmalla (kaksi saraketta, oikea porrastettu alas), teksti ja koodilaatta oikealla.
   mobiili: teksti ensin, sitten hoidot pikkukuvan ja hintarivien pareina. */
.camp__grid { align-items: center; row-gap: 3rem; }
.camp__body { grid-column: 8 / -1; grid-row: 1; }
.camp__items { grid-column: 1 / span 6; grid-row: 1; display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(1rem, 2vw, 2rem); align-items: start; }
.camp__item + .camp__item { margin-top: clamp(2.5rem, 5vw, 4.5rem); }
.camp__media { margin: 0; max-width: 29.125rem; }
.camp__media::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--line-gold); pointer-events: none; }
.camp__info { margin-top: 1.25rem; }
.camp__name { font-family: var(--f-display); font-size: 1.625rem; line-height: 1.15; font-weight: 500; }
.camp__ledger { margin-top: 0.75rem; }
.camp__ledger .ledger__row { padding: 0.75rem 0; font-variant-numeric: lining-nums tabular-nums; }
.camp__ledger .ledger__end { flex-wrap: wrap; justify-content: flex-end; column-gap: 0.625rem; }
.camp__lead { max-width: 44ch; }
.camp__code { margin-top: 2rem; padding: 1.25rem 1.5rem 1.375rem; border: 1px solid var(--line-gold); border-radius: var(--radius); }
.camp__code-label { font-size: 0.9375rem; color: var(--cream-70); }
.camp__code-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; margin-top: 0.375rem; }
.camp__code-value { font-family: var(--f-display); font-size: clamp(2.5rem, 4vw, 3.5rem); line-height: 1; font-weight: 500; letter-spacing: 0.12em; color: var(--gold-2); font-variant-numeric: lining-nums; }
.camp__copy { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; padding: 0.5rem 1rem; border: 1px solid rgba(243, 234, 217, .55); border-radius: var(--radius-btn); background: transparent; color: var(--cream); font: 500 0.9375rem/1.2 var(--f-body); cursor: pointer; transition: border-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); }
.camp__copy svg { width: 1rem; height: 1rem; flex: none; }
.camp__copy:hover { border-color: var(--gold); }
.camp__copy:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 3px; }
.camp__copy.is-copied { border-color: var(--gold); color: var(--gold-2); }
.stack > .camp__code + .btn-row { margin-top: 1.75rem; }
.camp__note { margin-top: 1rem; font-size: 0.9375rem; color: var(--cream-70); }
@media (min-width: 900px) and (max-width: 1199px) {
  .camp__body { grid-column: 7 / -1; }
  .camp__ledger .ledger__end { flex-direction: column; align-items: flex-end; row-gap: 0; }
}
@media (max-width: 899px) {
  .camp__body, .camp__items { grid-column: 1 / -1; grid-row: auto; }
  .camp__body { max-width: 40rem; }
}
@media (max-width: 599px) {
  .camp__items { grid-template-columns: 1fr; row-gap: 2rem; }
  .camp__item { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); column-gap: 1rem; align-items: start; }
  .camp__item + .camp__item { margin-top: 0; }
  .camp__info { margin-top: 0; }
  .camp__name { font-size: 1.375rem; }
  .camp__ledger .ledger__row { padding: 0.625rem 0; }
  .camp__ledger .ledger__end { flex-direction: column; align-items: flex-end; row-gap: 0; }
  .camp__code { padding: 1.125rem 1.125rem 1.25rem; }
}