/* Teeman tokenit. Muuta värit ja fontit tästä, ei yksittäisistä säännöistä. */
:root {
  --dv-color-primary: #2f5741;
  --dv-color-primary-contrast: #ffffff;
  --dv-color-bg: #faf8f5;
  --dv-color-surface: #f1ede6;
  --dv-color-text: #1f1d1a;
  --dv-color-muted: #5c554c;
  --dv-color-border: #dfd8cc;
  --dv-font-heading: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, "Times New Roman", serif;
  --dv-font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --dv-font-size-base: 17px;
  --dv-line-height: 1.65;
  --dv-font-size-h1: calc(var(--dv-font-size-base) * 2.488);
  --dv-font-size-h2: calc(var(--dv-font-size-base) * 2.074);
  --dv-font-size-h3: calc(var(--dv-font-size-base) * 1.728);
  --dv-font-size-h4: calc(var(--dv-font-size-base) * 1.440);
  --dv-font-size-h5: calc(var(--dv-font-size-base) * 1.200);
  --dv-font-size-h6: calc(var(--dv-font-size-base) * 1.000);
  --dv-radius: 6px;
  --dv-spacing: 1rem;
  --dv-container-max: 1120px;
  --dv-container-gutter: 1.25rem;
  --dv-shadow: 0 1px 2px rgba(31,29,26,.04), 0 10px 30px rgba(31,29,26,.05);
}

/* Perustyylit (alustan oletustyylit sellaisenaan): reset, evästekysely, varauskalenteri ja lomakkeet.
   Sivuston oma ulkoasu on theme.css:ssä, joka ladataan tämän jälkeen ja voittaa. */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--dv-color-bg);color:var(--dv-color-text);font-family:var(--dv-font-body);font-size:var(--dv-font-size-base);line-height:var(--dv-line-height)}
h1,h2,h3,h4,h5,h6{font-family:var(--dv-font-heading);line-height:1.2;margin:0 0 .5em}
h1{font-size:var(--dv-font-size-h1)}h2{font-size:var(--dv-font-size-h2)}h3{font-size:var(--dv-font-size-h3)}
a{color:var(--dv-color-primary)}
img,video{max-width:100%;height:auto}
.dv-main{max-width:var(--dv-container-max);margin-inline:auto;padding-inline:var(--dv-container-gutter)}
[hidden]{display:none!important}
/* Sivukohtaisen CSS:n kääre ei vaikuta asetteluun (src/lib/scope-css). */
[data-page-css]{display:contents}
/* Lomakkeen roskapostiansa: pois näkyvistä, ei display:none (botit täyttävät sen). */
.dv-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.dv-consent-launcher{position:fixed;left:max(1rem,env(safe-area-inset-left));bottom:max(1rem,env(safe-area-inset-bottom));z-index:2147482999;display:grid;place-items:center;width:3rem;height:3rem;padding:0;border:1px solid var(--dv-color-border);border-radius:50%;background:var(--dv-color-surface);color:var(--dv-color-text);box-shadow:var(--dv-shadow,0 2px 12px rgba(0,0,0,.2));cursor:pointer}
.dv-consent-launcher:focus-visible,.dv-consent__close:focus-visible{outline:2px solid var(--dv-color-primary);outline-offset:3px}
.dv-consent__close{justify-self:end;border:0;background:transparent;color:inherit;min-width:2.75rem;min-height:2.75rem;font-size:1.5rem;cursor:pointer}
.dv-consent{position:fixed;z-index:2147483000;box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1fr);gap:calc(var(--dv-spacing) * .75);padding:var(--dv-spacing);max-height:calc(100vh - 2 * var(--dv-spacing));max-height:calc(100dvh - 2 * var(--dv-spacing));overflow:auto;background:var(--dv-color-surface);color:var(--dv-color-text);border:1px solid var(--dv-color-border);border-radius:var(--dv-radius);box-shadow:var(--dv-shadow, 0 -2px 24px rgba(0,0,0,.18));font-family:var(--dv-font-body);font-size:.95rem;line-height:var(--dv-line-height)}
.dv-consent.dv-consent--bottom{inset:auto 0 0 0;transform:none;width:100%;border-radius:0;border-inline-width:0;border-block-end-width:0}
.dv-consent.dv-consent--bottom-left{inset:auto auto var(--dv-spacing) var(--dv-spacing);transform:none;width:min(28rem, calc(100vw - 2 * var(--dv-spacing)))}
.dv-consent.dv-consent--bottom-right{inset:auto var(--dv-spacing) var(--dv-spacing) auto;transform:none;width:min(28rem, calc(100vw - 2 * var(--dv-spacing)))}
.dv-consent.dv-consent--center{inset:50% auto auto 50%;width:min(32rem, calc(100vw - 2 * var(--dv-spacing)));transform:translate(-50%,-50%)}
.dv-consent__body{display:flex;flex-direction:column;gap:.35rem}
.dv-consent__title{margin:0;font-family:var(--dv-font-heading);font-size:1.05rem;font-weight:600}
.dv-consent__text{margin:0;color:var(--dv-color-muted)}
.dv-consent__link{align-self:flex-start;color:var(--dv-color-primary)}
.dv-consent__cats{display:flex;flex-direction:column;gap:.5rem;max-height:40vh;overflow:auto;padding-block-start:.5rem;border-block-start:1px solid var(--dv-color-border)}
.dv-consent__cat{display:flex;gap:.6rem;align-items:flex-start;cursor:pointer}
.dv-consent__cat-input{flex:none;margin-block-start:.2rem;accent-color:var(--dv-color-primary)}
.dv-consent__cat-input:disabled{cursor:not-allowed}
.dv-consent__cat-text{display:flex;flex-direction:column;gap:.15rem}
.dv-consent__cat-label{font-weight:600}
.dv-consent__cat-desc{color:var(--dv-color-muted);font-size:.85em}
.dv-consent__actions{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.dv-consent__btn{font:inherit;cursor:pointer;padding:.55rem 1.1rem;border:1px solid var(--dv-color-border);border-radius:var(--dv-radius);background:var(--dv-color-bg);color:var(--dv-color-text)}
.dv-consent__btn:focus-visible{outline:2px solid var(--dv-color-primary);outline-offset:2px}
.dv-consent__btn--primary{background:var(--dv-color-primary);color:var(--dv-color-primary-contrast);border-color:var(--dv-color-primary)}
.dv-consent__btn--ghost{margin-inline-end:auto;background:transparent;border-color:transparent;text-decoration:underline;color:var(--dv-color-text)}
@media (max-width:480px){.dv-consent__actions{flex-direction:column;align-items:stretch}.dv-consent__btn--ghost{margin-inline-end:0}}
.dv-booking{display:flex;flex-direction:column;gap:.6rem;font-family:var(--dv-font-body);color:var(--dv-color-text)}
.dv-booking--busy{opacity:.6}
.dv-booking__bar{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.dv-booking__month{margin:0;font-family:var(--dv-font-heading);font-size:1.05rem;font-weight:600;text-align:center;flex:1 1 auto}
.dv-booking__nav{font:inherit;cursor:pointer;min-width:40px;min-height:40px;padding:.4rem .7rem;border:1px solid var(--dv-color-border);border-radius:var(--dv-radius);background:var(--dv-color-surface);color:var(--dv-color-text)}
.dv-booking__nav:focus-visible{outline:2px solid var(--dv-color-primary);outline-offset:2px}
.dv-booking__nav:disabled{opacity:.5;cursor:not-allowed}
.dv-booking__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.dv-booking__weekdays{display:contents}
.dv-booking__week{display:contents}
.dv-booking__weekday{padding:.25rem 0;text-align:center;font-size:.8em;color:var(--dv-color-muted)}
.dv-booking__cell{display:block}
.dv-booking__cell--empty{min-height:40px}
.dv-booking__day{font:inherit;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:100%;min-width:40px;min-height:40px;padding:.3rem 0;border:1px solid transparent;border-radius:var(--dv-radius);background:var(--dv-color-surface);color:var(--dv-color-text)}
.dv-booking__day:focus-visible{outline:2px solid var(--dv-color-primary);outline-offset:2px}
.dv-booking__daynum{line-height:1}
.dv-booking__dot{display:block;width:6px;height:6px;border-radius:50%;background:transparent}
.dv-booking__day--free .dv-booking__dot{background:var(--dv-color-primary)}
.dv-booking__day--free{border-color:var(--dv-color-border)}
.dv-booking__day--today{box-shadow:inset 0 0 0 1px var(--dv-color-accent)}
.dv-booking__day--none{color:var(--dv-color-muted);cursor:default}
.dv-booking__day--selected{background:var(--dv-color-primary);color:var(--dv-color-primary-contrast);border-color:var(--dv-color-primary);font-weight:700}
.dv-booking__day--selected .dv-booking__dot{background:var(--dv-color-primary-contrast)}
.dv-booking__day[aria-disabled="true"]{opacity:.65;cursor:default}
.dv-booking__hint{margin:0;color:var(--dv-color-muted);font-size:.85em}
.dv-booking__status{margin:0;color:var(--dv-color-muted);font-size:.9em}
.dv-booking__status--error{color:var(--dv-color-danger);font-weight:600}
.dv-booking__times{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
.dv-booking__times-title{flex:1 0 100%;margin:0;font-weight:600;font-size:.9em}
.dv-booking__slot{font:inherit;cursor:pointer;min-height:40px;padding:.5rem .9rem;border:1px solid var(--dv-color-border);border-radius:var(--dv-radius);background:var(--dv-color-surface);color:var(--dv-color-text)}
.dv-booking__slot:focus-visible{outline:2px solid var(--dv-color-primary);outline-offset:2px}
.dv-booking__slot--selected{background:var(--dv-color-primary);color:var(--dv-color-primary-contrast);border-color:var(--dv-color-primary);font-weight:700}
.dv-booking__selected{margin:0;font-weight:600}
.dv-booking__empty{margin:0;color:var(--dv-color-muted)}
.dv-booking__retry{font:inherit;cursor:pointer;align-self:flex-start;min-height:40px;padding:.5rem 1.1rem;border:1px solid var(--dv-color-primary);border-radius:var(--dv-radius);background:var(--dv-color-primary);color:var(--dv-color-primary-contrast)}
.dv-booking__retry:focus-visible{outline:2px solid var(--dv-color-primary);outline-offset:2px}
.dv-booking__rental{gap:.5rem}
/* Vuokrausvalitsimen otsikko, kontrolli ja painike kantavat MYÖS lomakkeen
   omia luokkia (dv-form__label/__control/__submit), jotta ne näyttäisivät
   sivuston muilta kentiltä. Alusta ei tyylittele lomaketta, joten sen ei pidä
   kilpailla sivuston säännöistä näistä elementeistä: :where() pudottaa nämä
   oletukset nollaspesifisyyteen. Sivuston sääntö voittaa aina, mutta
   tyylittelemätön sivusto saa silti käyttökelpoisen ulkoasun. */
:where(.dv-booking__rental-label){font-weight:600;font-size:.9em}
:where(.dv-booking__rental-control){font:inherit;min-height:40px;padding:.5rem .7rem;border:1px solid var(--dv-color-border);border-radius:var(--dv-radius);background:var(--dv-color-surface);color:var(--dv-color-text)}
:where(.dv-booking__rental-control):focus-visible{outline:2px solid var(--dv-color-primary);outline-offset:2px}
:where(.dv-booking__rental-trigger){text-align:start;cursor:pointer;inline-size:100%}
/*
 * PANEELI ON TYÖPÖYDÄLLÄ LIIPAISIMEN ALLA KELLUVA KORTTI.
 *
 * '.dv-booking__rental-field' kääri liipaisimen ja paneelin samaan
 * 'position:relative'-konttiin, jotta 'inset-block-start:100%' tarkoittaa
 * juuri liipaisimen alalaitaa eikä koko widgetin alalaitaa (jolloin
 * kalenteri avautuisi vasta lisätuotteiden alapuolelle). '[hidden]' hoitaa
 * piilotuksen — selain ohittaa muun asettelun automaattisesti.
 */
.dv-booking__rental-field{position:relative;display:flex;flex-direction:column}
.dv-booking__rental-panel{position:absolute;inset-block-start:100%;inset-inline-start:0;z-index:20;margin-block-start:.3rem;min-inline-size:min(20rem, 100%);max-inline-size:min(24rem, 90vw);display:flex;flex-direction:column;gap:.5rem;padding:.75rem;background:var(--dv-color-surface);color:var(--dv-color-text);border:1px solid var(--dv-color-border);border-radius:var(--dv-radius);box-shadow:var(--dv-shadow, 0 4px 20px rgba(0,0,0,.18))}
.dv-booking__rental-panel--open{box-shadow:var(--dv-shadow, 0 8px 28px rgba(0,0,0,.24))}
.dv-booking__rental-panel-bar{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.dv-booking__rental-panel-title{margin:0;font-family:var(--dv-font-heading);font-size:1rem;font-weight:600;text-align:center;flex:1 1 auto}
.dv-booking__rental-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
[data-dv-rental-mode="month"] .dv-booking__rental-grid{grid-template-columns:repeat(4,1fr)}
.dv-booking__rental-hint{margin:0;color:var(--dv-color-muted);font-size:.85em}
.dv-booking__rental-panel-actions{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.dv-booking__rental-clear{font:inherit;cursor:pointer;min-height:40px;padding:.4rem .8rem;border:1px solid var(--dv-color-border);border-radius:var(--dv-radius);background:var(--dv-color-surface);color:var(--dv-color-text)}
.dv-booking__rental-clear:focus-visible{outline:2px solid var(--dv-color-primary);outline-offset:2px}
.dv-booking__rental-close{font:inherit;cursor:pointer;min-height:40px;padding:.4rem .9rem;border:1px solid var(--dv-color-primary);border-radius:var(--dv-radius);background:var(--dv-color-primary);color:var(--dv-color-primary-contrast)}
.dv-booking__rental-close:focus-visible{outline:2px solid var(--dv-color-primary);outline-offset:2px}
.dv-booking__day--range-start,.dv-booking__day--range-end{background:var(--dv-color-primary);color:var(--dv-color-primary-contrast);border-color:var(--dv-color-primary);font-weight:700}
.dv-booking__day--in-range{background:color-mix(in srgb, var(--dv-color-primary) 18%, var(--dv-color-surface));border-color:var(--dv-color-border)}
.dv-booking__rental-help{margin:0;color:var(--dv-color-muted);font-size:.85em}
:where(.dv-booking__rental-refresh){font:inherit;cursor:pointer;align-self:flex-start;min-height:40px;padding:.5rem 1.1rem;border:1px solid var(--dv-color-primary);border-radius:var(--dv-radius);background:var(--dv-color-primary);color:var(--dv-color-primary-contrast)}
:where(.dv-booking__rental-refresh):focus-visible{outline:2px solid var(--dv-color-primary);outline-offset:2px}
.dv-booking__rental-status{margin:0;color:var(--dv-color-muted);font-size:.9em}
.dv-booking__rental-status--error{color:var(--dv-color-danger);font-weight:600}
.dv-booking__rental-summary{display:flex;flex-direction:column;gap:.35rem}
.dv-booking__rental-period{margin:0;font-weight:600}
.dv-booking__rental-lines{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:.2rem}
.dv-booking__rental-line{font-size:.9em;color:var(--dv-color-muted)}
.dv-booking__rental-total{margin:0;font-weight:700;font-size:1.05em;color:var(--dv-color-text)}
.dv-booking__rental-addons{margin:0;padding:.6rem .8rem;border:1px solid var(--dv-color-border);border-radius:var(--dv-radius);min-inline-size:0}
.dv-booking__rental-addons-title{padding:0 .3rem;font-weight:600;font-size:.9em}
.dv-booking__rental-addon{display:flex;align-items:center;gap:.5rem;padding:.15rem 0}
.dv-form__rental-fallback{margin:0;color:var(--dv-color-muted);font-size:.9em}
/*
 * MOBIILISSA PANEELI ON ALALAIDAN LEVY, EI LIIPAISIMEN ALLA KELLUVA KORTTI.
 *
 * Kapealla näytöllä liipaisimen alle asemoitu kortti tuppaa ylittämään
 * ruudun reunan tai peittämään loput lomakkeesta. 'position:fixed' +
 * 'inset-block-end:0' kiinnittää sen näytön alalaitaan riippumatta siitä
 * missä kohtaa pitkää lomaketta liipaisin sijaitsee, ja kosketuskohteet
 * kasvatetaan 44 px:iin (WCAG 2.5.5).
 */
@media (max-width:480px){.dv-booking__grid{gap:1px}.dv-booking__slot{flex:1 1 40%}.dv-booking__month{font-size:1rem}:where(.dv-booking__rental-refresh){align-self:stretch}.dv-booking__rental-panel{position:fixed;inset-inline:0;inset-block-end:0;inset-block-start:auto;max-inline-size:none;max-block-size:85vh;overflow-y:auto;border-end-end-radius:0;border-end-start-radius:0;margin-block-start:0}.dv-booking__rental-grid{gap:1px}[data-dv-rental-mode="month"] .dv-booking__rental-grid{grid-template-columns:repeat(3,1fr)}.dv-booking__rental-panel [data-dv-rental-day],.dv-booking__rental-panel [data-dv-rental-month]{min-height:44px}.dv-booking__nav,.dv-booking__rental-clear,.dv-booking__rental-close{min-height:44px}}
.dv-form__step{border:0;margin:0;padding:0;min-inline-size:0}
.dv-form__step-nav{display:flex;gap:.5rem;flex-wrap:wrap}
.dv-form__step-prev,.dv-form__step-next{font:inherit;cursor:pointer}
.dv-form__step-prev[disabled]{opacity:.5;cursor:default}
.dv-form__step-progress{margin:.25rem 0;font-size:.875rem;color:var(--dv-color-muted)}
.dv-form__step--current{display:block}
:where(.dv-booking-confirm){max-width:42rem;margin-inline:auto;padding:2rem 1rem;font-family:var(--dv-font-body)}
:where(.dv-booking-confirm__title){margin:0 0 1rem}
:where(.dv-booking-confirm__reservation){margin:0 0 1.5rem;padding-block-end:1.5rem;border-block-end:1px solid var(--dv-color-border)}
:where(.dv-booking-confirm__reservation):last-of-type{border-block-end:0;margin-block-end:0;padding-block-end:0}
:where(.dv-booking-confirm__continue){display:inline-block;margin-block-start:1rem;font-weight:600}

/* =========================================================
   Puukasa — sivuston tyylit
   Värit, fontit, mitat ja kulmat tulevat teeman tokeneista
   (settings/theme.json -> tokens). Älä kovakoodaa värejä tähän.
   ========================================================= */

:root {
  --pk-measure: 62ch;
  --pk-gap: 1.5rem;
  --pk-section-y: clamp(2.75rem, 1.5rem + 4vw, 5rem);
}

/* ---------------------------------------------------------
   Perustypografia
   --------------------------------------------------------- */

body {
  -webkit-text-size-adjust: 100%;
  text-wrap: pretty;
}

h1, h2, h3 {
  text-wrap: balance;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2rem, 1.35rem + 2.6vw, 2.9rem); margin-block-end: 0.5em; }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 1.95rem); margin-block-end: 0.6em; }
h3 { font-size: clamp(1.1rem, 1.02rem + 0.4vw, 1.28rem); margin-block-end: 0.5em; }

p { margin: 0 0 1em; max-width: var(--pk-measure); }
p:last-child { margin-block-end: 0; }

a { text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--dv-color-primary);
  outline-offset: 2px;
  border-radius: 2px;
}

strong { font-weight: 600; }

.lead {
  font-size: 1.1rem;
  color: var(--dv-color-text);
}

.muted { color: var(--dv-color-muted); }

.eyebrow {
  margin-block-end: 0.6rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--dv-color-primary);
}

/* ---------------------------------------------------------
   Kontti ja osiot
   --------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--dv-container-max);
  margin-inline: auto;
  padding-inline: var(--dv-container-gutter);
}

.section { padding-block: var(--pk-section-y); }

.section--tinted {
  background: var(--dv-color-surface);
  border-block: 1px solid var(--dv-color-border);
}

.section--cta {
  background: var(--dv-color-primary);
  color: var(--dv-color-primary-contrast);
}

.section--cta h2,
.section--cta .lead,
.section--cta .muted { color: var(--dv-color-primary-contrast); }

.section--cta .muted { opacity: 0.8; }

/* Tekstilinkit tummalla kehotuspalstalla: teeman oletusvihreä ei erotu taustasta. */
.section--cta a:not(.btn) {
  color: var(--dv-color-primary-contrast);
  text-decoration: underline;
}

.section--cta a:not(.btn):focus-visible { outline-color: var(--dv-color-primary-contrast); }

.section__head { margin-block-end: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); }
.section__head > :last-child { margin-block-end: 0; }
.section__lead { color: var(--dv-color-muted); font-size: 1.05rem; }

.pagehead {
  padding-block: clamp(2rem, 1.25rem + 3vw, 3.5rem) clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border-block-end: 1px solid var(--dv-color-border);
}

.pagehead__title { margin-block-end: 0.4em; }

.pagehead__lead {
  margin: 0;
  font-size: 1.1rem;
  color: var(--dv-color-muted);
}

/* Artikkeleissa ingressin perässä on vielä julkaisupäivä. Ingressillä ei ole
   alamarginaalia (sivuilla se on otsikkolohkon viimeinen elementti), joten
   väli annetaan seuraajalle. */
.pagehead__lead + * { margin-block-start: 1rem; }

/* ---------------------------------------------------------
   Ohitalinkki
   --------------------------------------------------------- */

.skiplink {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.7rem 1.1rem;
  background: var(--dv-color-primary);
  color: var(--dv-color-primary-contrast);
  text-decoration: none;
}

.skiplink:focus {
  left: 0.5rem;
  top: 0.5rem;
}

/* ---------------------------------------------------------
   Yläpalkki ja päävalikko
   --------------------------------------------------------- */

.topbar {
  background: var(--dv-color-bg);
  border-block-end: 1px solid var(--dv-color-border);
}

.topbar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  padding-block: 0.9rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--dv-color-text);
}

/* Logo on SVG, joten kiinteä pikselikoko riittää — ei skaalausartefakteja. */
.brand__mark {
  flex: none;
  width: 44px;
  height: 44px;
}

.brand__text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.brand__name {
  font-family: var(--dv-font-heading);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.brand__tagline {
  font-size: 0.78rem;
  color: var(--dv-color-muted);
}

.topbar .dv-nav { margin-inline-start: auto; }

.topbar .dv-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.topbar .dv-menu a,
.topbar .dv-menu span {
  display: inline-block;
  padding-block: 0.35rem;
  font-size: 0.98rem;
  font-weight: 500;
  color: var(--dv-color-text);
  text-decoration: none;
  border-block-end: 2px solid transparent;
}

.topbar .dv-menu a:hover { border-block-end-color: var(--dv-color-border); }
.topbar .dv-menu span { color: var(--dv-color-muted); }

.topbar .dv-menu .is-active > a {
  color: var(--dv-color-primary);
  border-block-end-color: var(--dv-color-primary);
}

.topbar__call {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--dv-color-primary);
  border-radius: var(--dv-radius);
  text-decoration: none;
  color: var(--dv-color-primary);
  white-space: nowrap;
}

.topbar__call:hover {
  background: var(--dv-color-primary);
  color: var(--dv-color-primary-contrast);
}

.topbar__call-label {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.topbar__call-number { font-weight: 600; }

@media (max-width: 800px) {
  .topbar__inner { gap: 0.75rem 1rem; }

  /*
     Tagline piiloon: 412px:n leveydellä se vie ~300px, jolloin soittonappi
     ei mahtunut brändin viereen vaan putosi omalle rivilleen ja sen
     vasemmalle jäi iso tyhjä alue. Sama teksti on sivun otsikossa ja
     alatunnisteessa, joten tieto ei katoa.
  */
  .brand__tagline { display: none; }

  /*
     Valikko rivittyy kahdelle riville (5 kohdetta, ei alavalikoita).
     Aiemmin täällä oli overflow-x: auto ja white-space: nowrap eli yritys
     tehdä yksi vaakavieritettävä rivi, mutta .dv-menun flex-wrap: wrap jäi
     voimaan eikä vieritys aktivoitunut koskaan. Vieritysrivi ei myöskään
     kerro mitenkään että osa linkeistä on ruudun ulkopuolella.
  */
  .topbar .dv-nav {
    order: 3;
    width: 100%;
    margin-inline-start: 0;
  }

  /* Riviväli 0.4rem: päällekkäiset linkit erottuvat omiksi osumakohteikseen. */
  .topbar .dv-menu { gap: 0.4rem 1.1rem; }

  .topbar__call { margin-inline-start: auto; }
}

/* ---------------------------------------------------------
   Painikkeet
   --------------------------------------------------------- */

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  max-width: none;
  margin-block: 1.5rem 0;
}

.actions--center { justify-content: center; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.9rem;
  padding: 0.6rem 1.25rem;
  border: 1px solid transparent;
  border-radius: var(--dv-radius);
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.btn--primary {
  background: var(--dv-color-primary);
  border-color: var(--dv-color-primary);
  color: var(--dv-color-primary-contrast);
}

.btn--primary:hover {
  background: color-mix(in oklab, var(--dv-color-primary) 85%, black);
  border-color: color-mix(in oklab, var(--dv-color-primary) 85%, black);
}

.btn--ghost {
  background: transparent;
  border-color: var(--dv-color-border);
  color: var(--dv-color-text);
}

.btn--ghost:hover {
  border-color: var(--dv-color-text);
  background: var(--dv-color-surface);
}

.btn--lg {
  min-height: 3.25rem;
  padding-inline: 1.6rem;
  font-size: 1.05rem;
}

.section--cta .btn--primary {
  background: var(--dv-color-primary-contrast);
  border-color: var(--dv-color-primary-contrast);
  color: var(--dv-color-primary);
}

.section--cta .btn--primary:hover {
  background: color-mix(in oklab, var(--dv-color-primary-contrast) 88%, black);
  border-color: color-mix(in oklab, var(--dv-color-primary-contrast) 88%, black);
}

.section--cta .btn--ghost {
  border-color: color-mix(in oklab, var(--dv-color-primary-contrast) 55%, transparent);
  color: var(--dv-color-primary-contrast);
}

.section--cta .btn--ghost:hover {
  background: color-mix(in oklab, var(--dv-color-primary-contrast) 12%, transparent);
  border-color: var(--dv-color-primary-contrast);
}

/* ---------------------------------------------------------
   Hero
   --------------------------------------------------------- */

.hero {
  padding-block: clamp(2rem, 1.25rem + 3vw, 4rem);
  border-block-end: 1px solid var(--dv-color-border);
}

.hero__inner {
  display: grid;
  gap: clamp(1.75rem, 1rem + 3vw, 3.5rem);
  align-items: center;
}

.hero__title { margin-block-end: 0.6em; }

.hero__media img,
.split__media img,
.promo__media img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--dv-radius);
}

@media (min-width: 860px) {
  .hero__inner { grid-template-columns: 1.05fr 1fr; }
}

/*
   Puhelimella hero on pelkkää tekstiä: kuva ja hero-tekstin lisätiedot
   jäävät pois, jotta otsikko ja soittonappi mahtuvat ensinäkymään.
   Raja 859px on sama kohta jossa hero muuttuu yksipalstaiseksi.
   Kuvan lataus estetaan hero-kuva.liquidin sizes-arvolla, koska
   display: none ei yksin estä selainta hakemasta kuvaa.
*/
@media (max-width: 859px) {
  .hero__media,
  .pk-hide-sm { display: none; }
}

/* ---------------------------------------------------------
   Kortit (etusivun tuotenostot)
   --------------------------------------------------------- */

.cards {
  display: grid;
  gap: var(--pk-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 620px) {
  .cards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
  .cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.card {
  display: flex;
  flex-direction: column;
  background: var(--dv-color-bg);
  border: 1px solid var(--dv-color-border);
  border-radius: var(--dv-radius);
  overflow: hidden;
}

.card__media img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.card__body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.15rem 1.25rem 1.35rem;
}

.card__title { margin: 0; }

.card__price {
  margin: 0;
  color: var(--dv-color-primary);
}

.card__price strong {
  font-size: 1.35rem;
  font-weight: 700;
}

.card__price span {
  color: var(--dv-color-muted);
  font-size: 0.95rem;
}

.card__text {
  margin: 0;
  color: var(--dv-color-muted);
}

/* ---------------------------------------------------------
   Tuote- ja konelistaus
   --------------------------------------------------------- */

.products {
  display: grid;
  gap: clamp(1.75rem, 1rem + 2.5vw, 3rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.product {
  display: grid;
  gap: clamp(1.25rem, 0.75rem + 2vw, 2.5rem);
  padding-block-end: clamp(1.75rem, 1rem + 2.5vw, 3rem);
  border-block-end: 1px solid var(--dv-color-border);
}

.products > .product:last-child {
  padding-block-end: 0;
  border-block-end: 0;
}

.product__media img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--dv-radius);
}

.product__title { margin-block-end: 0.35em; }

.product__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  margin-block-end: 0.9rem;
}

.product__amount {
  font-family: var(--dv-font-heading);
  font-size: clamp(1.6rem, 1.3rem + 1vw, 2rem);
  font-weight: 700;
  color: var(--dv-color-primary);
  line-height: 1;
}

.product__unit { color: var(--dv-color-muted); }

.product__text { color: var(--dv-color-muted); }

.product--ask {
  align-content: start;
  padding: clamp(1.5rem, 1rem + 2vw, 2.25rem);
  background: var(--dv-color-surface);
  border: 1px solid var(--dv-color-border);
  border-radius: var(--dv-radius);
}

.product--ask .product__amount {
  font-family: var(--dv-font-body);
  font-size: 1.15rem;
  font-weight: 600;
}

.products > .product--ask:last-child { padding-block-end: clamp(1.5rem, 1rem + 2vw, 2.25rem); }

@media (min-width: 780px) {
  .product { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
  .product--ask { grid-template-columns: minmax(0, 1fr); }
}

/* Tekniset tiedot */

.specs {
  margin: 0 0 1.1rem;
  border-block-start: 1px solid var(--dv-color-border);
}

.specs__row {
  display: grid;
  gap: 0 1rem;
  padding-block: 0.6rem;
  border-block-end: 1px solid var(--dv-color-border);
}

.specs dt {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--dv-color-muted);
}

.specs dd { margin: 0; }

@media (min-width: 480px) {
  .specs__row { grid-template-columns: 11rem minmax(0, 1fr); align-items: baseline; }
}

.offer {
  margin: 0;
  padding: 0.85rem 1rem;
  background: var(--dv-color-surface);
  border-inline-start: 3px solid var(--dv-color-primary);
  border-radius: 0 var(--dv-radius) var(--dv-radius) 0;
}

.section--tinted .offer,
.product--ask .offer { background: var(--dv-color-bg); }

/* ---------------------------------------------------------
   Kaksipalstainen esittely
   --------------------------------------------------------- */

.split {
  display: grid;
  gap: clamp(1.75rem, 1rem + 3vw, 3.5rem);
  align-items: center;
}

@media (min-width: 860px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split__media { order: 2; }
}

.checks {
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.55rem;
}

.checks li {
  position: relative;
  padding-inline-start: 1.75rem;
}

.checks li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.42em;
  width: 0.7rem;
  height: 0.4rem;
  border-inline-start: 2px solid var(--dv-color-primary);
  border-block-end: 2px solid var(--dv-color-primary);
  transform: rotate(-45deg);
}

/* ---------------------------------------------------------
   Konevuokrausnosto
   --------------------------------------------------------- */

.promo {
  display: grid;
  gap: clamp(1.5rem, 1rem + 2.5vw, 3rem);
  align-items: center;
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  background: var(--dv-color-surface);
  border: 1px solid var(--dv-color-border);
  border-radius: var(--dv-radius);
}

@media (min-width: 860px) {
  .promo { grid-template-columns: 1.15fr 1fr; }
}

/*
   Kapeilla näytöillä kortin oma sisennys (1.5rem) tulee .wrapin kujan
   (2 x 1.25rem) päälle, jolloin tekstiltä katoaa lähes neljännes ruudun
   leveydestä. Pienennetään vain kortin vaakasisennystä; pystyasennot ja
   työpöydän ilme säilyvät ennallaan. Koskee etusivun konevuokrausnostoa
   ja tuotelistauksen kuvatonta korttia.
*/
@media (max-width: 360px) {
  .promo,
  .product--ask { padding-inline: 1rem; }
}

/* ---------------------------------------------------------
   Kolme huomiolaatikkoa
   --------------------------------------------------------- */

.notes {
  display: grid;
  gap: var(--pk-gap);
}

@media (min-width: 700px) {
  .notes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.note h3 { margin-block-end: 0.4em; }
.note p { margin: 0; color: var(--dv-color-muted); }

/* ---------------------------------------------------------
   Soittokehotus
   --------------------------------------------------------- */

.cta { text-align: center; }
.cta .lead,
.cta p { margin-inline: auto; }
.cta .muted { margin-block-start: 1.25rem; }

/* ---------------------------------------------------------
   Yhteystiedot
   --------------------------------------------------------- */

.contactgrid {
  display: grid;
  gap: clamp(2rem, 1.25rem + 3vw, 4rem);
  align-items: start;
}

@media (min-width: 900px) {
  .contactgrid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

.contactlist {
  margin: 1.5rem 0 0;
  border-block-start: 1px solid var(--dv-color-border);
}

.contactlist__row {
  display: grid;
  gap: 0 1rem;
  padding-block: 0.75rem;
  border-block-end: 1px solid var(--dv-color-border);
}

.contactlist dt {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--dv-color-muted);
}

.contactlist dd { margin: 0; }

@media (min-width: 480px) {
  .contactlist__row { grid-template-columns: 10rem minmax(0, 1fr); align-items: baseline; }
}

/* ---------------------------------------------------------
   Lomake (alustan tuottama merkintä)
   --------------------------------------------------------- */

.dv-form {
  display: grid;
  gap: 1rem;
  margin-block-start: 1.5rem;
  padding: clamp(1.25rem, 1rem + 1.5vw, 1.85rem);
  background: var(--dv-color-surface);
  border: 1px solid var(--dv-color-border);
  border-radius: var(--dv-radius);
}

.section--tinted .dv-form { background: var(--dv-color-bg); }

.dv-form__field {
  display: grid;
  gap: 0.35rem;
}

.dv-form__label {
  font-size: 0.9rem;
  font-weight: 600;
}

.dv-form__label span[aria-hidden] { color: var(--dv-color-primary); }

.dv-form__control {
  width: 100%;
  min-height: 2.9rem;
  padding: 0.6rem 0.75rem;
  font: inherit;
  color: var(--dv-color-text);
  background: var(--dv-color-bg);
  border: 1px solid var(--dv-color-border);
  border-radius: var(--dv-radius);
}

.section--tinted .dv-form .dv-form__control { background: var(--dv-color-surface); }

.dv-form textarea.dv-form__control {
  min-height: 8rem;
  resize: vertical;
}

.dv-form select.dv-form__control { appearance: auto; }

.dv-form__control::placeholder { color: var(--dv-color-muted); opacity: 0.85; }

.dv-form__control:focus-visible {
  border-color: var(--dv-color-primary);
  outline: 2px solid var(--dv-color-primary);
  outline-offset: 1px;
}

.dv-form .dv-form__submit {
  justify-self: start;
  min-height: 3rem;
  padding: 0.65rem 1.5rem;
  font: inherit;
  font-weight: 600;
  color: var(--dv-color-primary-contrast);
  background: var(--dv-color-primary);
  border: 1px solid var(--dv-color-primary);
  border-radius: var(--dv-radius);
  cursor: pointer;
}

.dv-form .dv-form__submit:hover {
  background: color-mix(in oklab, var(--dv-color-primary) 85%, black);
  border-color: color-mix(in oklab, var(--dv-color-primary) 85%, black);
}

.dv-form__status {
  padding: 0.75rem 1rem;
  background: var(--dv-color-bg);
  border: 1px solid var(--dv-color-border);
  border-radius: var(--dv-radius);
}

.dv-form--disabled { opacity: 0.6; }

/* ---------------------------------------------------------
   Varauskalenteri (alustan tuottama merkintä)
   --------------------------------------------------------- */

/* Vapaa eli valittavissa oleva päivä erottuu vaaleanvihreänä. Varatut ja
   menneet päivät saavat alustalta aria-disabled="true", joten ne jäävät
   alustan omaan haaleaan tyyliin. Valittu päivä ja valintaväli
   (--selected, --range-start, --range-end, --in-range) rajataan pois,
   jotta alustan vahvemmat sävyt säilyvät valinnan päällä. */
.dv-booking__day:where(:not([aria-disabled="true"], .dv-booking__day--selected, .dv-booking__day--range-start, .dv-booking__day--range-end, .dv-booking__day--in-range)) {
  background: color-mix(in srgb, var(--dv-color-primary) 14%, white);
  border-color: color-mix(in srgb, var(--dv-color-primary) 35%, var(--dv-color-border));
}

/* ---------------------------------------------------------
   Kuvagalleria (alustan tuottama merkintä)
   --------------------------------------------------------- */

.dv-gallery {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 640px) {
  .dv-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 980px) {
  .dv-gallery { gap: 1rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.dv-gallery__item {
  margin: 0;
  overflow: hidden;
  border-radius: var(--dv-radius);
  background: var(--dv-color-surface);
}

.dv-gallery__item img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* ---------------------------------------------------------
   Ohjevideot ja vaiheluettelo
   --------------------------------------------------------- */

.videos {
  display: grid;
  gap: var(--pk-gap);
}

@media (min-width: 720px) {
  .videos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.video { margin: 0; }

/*
   Videot ovat puhelimella kuvattua pystykuvaa 480x848. Ilman max-widthia
   ne venyisivät työpöydällä puolen palstan levyisiksi, jolloin yhden
   videon korkeus olisi yli 900 px. aspect-ratio varaa tilan etukäteen,
   ettei sivu hyppää poster-kuvan latautuessa.
*/
.video__player {
  display: block;
  width: 100%;
  max-width: 21rem;
  height: auto;
  aspect-ratio: 480 / 848;
  background: #000;
  border-radius: var(--dv-radius);
}

.video__caption {
  display: grid;
  gap: 0.15rem;
  max-width: 21rem;
  padding-block-start: 0.6rem;
}

.video__caption span {
  color: var(--dv-color-muted);
  font-size: 0.9rem;
}

.steps {
  max-width: var(--pk-measure);
  margin: 0;
  padding-inline-start: 1.3em;
}

.steps li { margin-block-end: 0.8rem; }
.steps li:last-child { margin-block-end: 0; }

.warn { color: #a3301c; }

/* Alustan tuottama medialataus (.dv-file) — alusta ei tyylitä sitä itse. */
.dv-file {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-block-start: 0.5rem;
  padding: 0.7rem 1.1rem;
  background: var(--dv-color-surface);
  border: 1px solid var(--dv-color-border);
  border-radius: var(--dv-radius);
  color: var(--dv-color-text);
  text-decoration: none;
  font-weight: 600;
}

.dv-file:hover {
  border-color: var(--dv-color-primary);
  color: var(--dv-color-primary);
}

.section--tinted .dv-file { background: var(--dv-color-bg); }

/* ---------------------------------------------------------
   Osoitekortti ja upotukset
   --------------------------------------------------------- */

.mapcard {
  max-width: 34rem;
  padding: clamp(1.25rem, 1rem + 1.5vw, 1.85rem);
  background: var(--dv-color-bg);
  border: 1px solid var(--dv-color-border);
  border-radius: var(--dv-radius);
}

.mapcard__address {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.5;
}

.mapcard .actions { margin-block-start: 1.25rem; }

.dv-embed {
  overflow: hidden;
  border: 1px solid var(--dv-color-border);
  border-radius: var(--dv-radius);
  background: var(--dv-color-surface);
}

/* ---------------------------------------------------------
   Alatunniste
   --------------------------------------------------------- */

.footer {
  margin-block-start: 0;
  padding-block: clamp(2.25rem, 1.5rem + 2.5vw, 3.5rem) 0;
  background: var(--dv-color-surface);
  border-block-start: 1px solid var(--dv-color-border);
}

.footer__grid {
  display: grid;
  gap: 2rem;
}

@media (min-width: 700px) {
  .footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.footer__name {
  margin: 0 0 0.2rem;
  font-family: var(--dv-font-heading);
  font-size: 1.25rem;
  font-weight: 700;
}

.footer__muted { margin: 0; color: var(--dv-color-muted); }

.footer__title {
  margin-block-end: 0.6em;
  font-family: var(--dv-font-body);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dv-color-muted);
}

.footer p { margin-block-end: 0.75rem; }
.footer a { color: var(--dv-color-text); }
.footer a:hover { color: var(--dv-color-primary); }

.footer .dv-menu {
  display: grid;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer .dv-menu a,
.footer .dv-menu span { text-decoration: none; }
.footer .dv-menu a:hover { text-decoration: underline; }
.footer .dv-menu span { color: var(--dv-color-muted); }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.35rem 1.5rem;
  margin-block-start: clamp(2rem, 1.5rem + 1.5vw, 2.75rem);
  padding-block: 1.1rem;
  border-block-start: 1px solid var(--dv-color-border);
}

.footer__bottom p {
  margin: 0;
  max-width: none;
  font-size: 0.9rem;
  color: var(--dv-color-muted);
}

/* Toteuttajakrediitti: hillitty, mutta linkki erottuu tekstistä. */
.footer__credit a {
  color: var(--dv-color-muted);
  text-decoration: underline;
}

.footer__credit a:hover { color: var(--dv-color-primary); }

/* ---------------------------------------------------------
   Evästekysely

   Alusta rakentaa bannerin runtime-JS:ssä ja tyylittelee sen teeman
   tokeneilla, joten täällä säädetään vain se mitä alusta ei voi tietää:
   sisältö sivuston omaan .wrap-rivistöön ja kosketusalueet samaan mittaan
   kuin muualla. Selektorit on luettu julkisen runtimen tuottamasta
   DOMista, ei arvattu.
   --------------------------------------------------------- */

.dv-consent.dv-consent--bottom {
  padding-block: clamp(1rem, 0.8rem + 1vw, 1.6rem);
  padding-inline: max(
    var(--dv-container-gutter),
    calc((100% - var(--dv-container-max)) / 2 + var(--dv-container-gutter))
  );
}

.dv-consent__text { max-width: var(--pk-measure); }

/* Ruksi on absoluuttisesti sijoitettu, jotta se ei vie omaa saraketta
   työpöydän kaksipalstaisesta ruudukosta. Sisällölle jätetään sen verran
   tilaa oikeaan reunaan, ettei otsikko mene painikkeen alle. */
.dv-consent__close {
  position: absolute;
  inset-block-start: 0.25rem;
  inset-inline-end: 0.4rem;
  min-width: 44px;
  min-height: 44px;
  color: var(--dv-color-muted);
}

.dv-consent__close:hover { color: var(--dv-color-text); }
.dv-consent__body { padding-inline-end: 2.75rem; }

/* Hyväksy ja hylkää ovat saman kokoisia ja samanarvoisia: eriarvoinen
   hylkäys ei tuota pätevää suostumusta. */
.dv-consent__btn {
  min-height: 44px;
  font-weight: 600;
}

.dv-consent__btn--ghost { font-weight: 500; }

/* Alatunnisteen evästeasetuslinkki on painike, koska se avaa ikkunan
   eikä osoitetta. Se pukeutuu silti alatunnisteen tekstilinkiksi. */
.footer__consent {
  padding: 0;
  font: inherit;
  color: var(--dv-color-muted);
  background: none;
  border: 0;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  cursor: pointer;
}

.footer__consent:hover { color: var(--dv-color-primary); }

/* Asetusten avaus on sama pyöreä painike kuin alustan oletus, mutta samaa
   44 pikselin mittaa kuin muut kosketusalueet. */
.dv-consent-launcher {
  width: 44px;
  height: 44px;
}

@media (min-width: 700px) {
  .dv-consent.dv-consent--bottom {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem 2.5rem;
  }

  /* Avattu asetuspaneeli vie oman rivinsä, jotta painikkeet eivät hyppää
     paikaltaan kun paneeli aukeaa. */
  .dv-consent__cats { grid-column: 1 / -1; }
  .dv-consent__cats:not([hidden]) ~ .dv-consent__actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }
}

/* ---------------------------------------------------------
   Liikkeen vähentäminen
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------
   Varauksen vahvistussivu

   Vuokrauslomakkeen natiivi POST palauttaa alustan oman vahvistussivun, joka
   ei ole sisältösivu — sen tyylit kuuluvat siksi tänne eivätkä sivun omaan
   CSS:ään. Luokat tulevat alustalta: dv-booking-confirm(-page),
   __title, __reservation, __continue ja hinnan erittelyn
   .dv-booking__rental-summary.
   --------------------------------------------------------- */

.dv-booking-confirm {
  max-width: 46rem;
  margin-inline: auto;
  padding-inline: var(--dv-container-gutter, 1.25rem);
  padding-block: clamp(2.5rem, 2rem + 2vw, 4rem);
}

.dv-booking-confirm__title {
  font-family: var(--dv-font-heading);
  margin-block: 0 0.75rem;
}

.dv-booking-confirm__reservation {
  margin-block-start: 1.25rem;
  padding: 1rem 1.15rem;
  background: var(--dv-color-surface);
  border: 1px solid var(--dv-color-border);
  border-radius: var(--dv-radius);
}

.dv-booking-confirm .dv-booking__rental-summary {
  margin-block-start: 0.75rem;
  font-size: 0.95rem;
}

.dv-booking-confirm__continue {
  display: inline-block;
  margin-block-start: 1.5rem;
  padding: 0.7rem 1.25rem;
  background: var(--dv-color-primary);
  color: var(--dv-color-primary-contrast);
  border-radius: var(--dv-radius);
  text-decoration: none;
  font-weight: 600;
}

.dv-booking-confirm__continue:hover { text-decoration: underline; }

/* ---------------------------------------------------------
   Peräkkäisten sisältölohkojen väli

   .checks, .steps, .offer, .notes ja .table-wrap on kirjoitettu
   olettaen, että ne ovat osionsa VIIMEINEN elementti: niillä ei ole
   alamarginaalia, eikä p:llä ole ylämarginaalia. Kun osioon tuli
   listan perään vielä kappale, ne asettuivat kiinni toisiinsa.

   Väli annetaan seuraajalle (+ *) eikä lohkolle itselleen, jottei
   yksinään olevan listan alle synny ylimääräistä tyhjää tilaa.
   --------------------------------------------------------- */

.checks + *,
.steps + *,
.notes + *,
.offer + *,
.table-wrap + *,
.faq + * {
  margin-block-start: 1.5rem;
}

/* Kappaleen perään tuleva luettelo tarvitsee vastaavan välin: .steps
   ei tuo omaa marginaalia, ja p:n 1em jää tiiviiksi listan edellä. */
p + .steps { margin-block-start: 1.25rem; }

/* ---------------------------------------------------------
   Artikkelien "Usein kysyttyä"
   Kysymys on h3 ja vastaus tavallinen kappale, eli teksti on aina
   näkyvissä. Piilotettu haitari näyttäisi siistimmältä, mutta vastaus
   löytyy silloin huonommin sekä lukijalta että selaimen sivuhaulta.
   --------------------------------------------------------- */

.faq {
  display: grid;
  gap: 1.25rem;
  margin-block-start: 0.25rem;
}

.faq__item {
  padding-block-end: 1.25rem;
  border-block-end: 1px solid var(--dv-color-border);
}

.faq__item:last-child {
  padding-block-end: 0;
  border-block-end: 0;
}

.faq__item h3 { margin-block-end: 0.35em; }

.faq__item p {
  margin: 0;
  max-width: var(--pk-measure);
  color: var(--dv-color-muted);
}

/* Ankkurilinkit: pehmeä vieritys ja hieman ilmaa kohdelohkon yläpuolelle. */
html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

main [id] { scroll-margin-block-start: 1.5rem; }

/* ---------------------------------------------------------
   Lahjakorttivinkki (layout: data-giftnote). Pieni ilmoitus oikeaan
   alakulmaan; vasen alakulma on evästeasetusten pyöreän painikkeen.
   --------------------------------------------------------- */

.giftnote {
  position: fixed;
  inset-block-end: calc(1rem + env(safe-area-inset-bottom, 0px));
  inset-inline-end: 1rem;
  z-index: 900;
  display: grid;
  gap: 0.35rem;
  width: min(20rem, calc(100vw - 2rem));
  padding: 1rem 1.1rem 1.1rem;
  background: var(--dv-color-surface);
  border: 1px solid var(--dv-color-border);
  border-radius: var(--dv-radius);
  box-shadow: 0 10px 30px rgb(0 0 0 / 0.14);
  animation: giftnote-in 0.25s ease-out;
}

/* Teeman display-sääntö ei saa kumota piilotusta. */
.giftnote[hidden] { display: none; }

.giftnote__title {
  margin: 0;
  padding-inline-end: 1.75rem;
  font-family: var(--dv-font-heading, Georgia, serif);
  font-size: 1.15rem;
  line-height: 1.25;
}

.giftnote__text {
  margin: 0 0 0.5rem;
  color: var(--dv-color-muted);
  font-size: 0.95rem;
}

.giftnote__cta { justify-self: start; }

.giftnote__close {
  position: absolute;
  inset-block-start: 0.35rem;
  inset-inline-end: 0.35rem;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  font: inherit;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--dv-color-muted);
  background: none;
  border: 0;
  border-radius: var(--dv-radius);
  cursor: pointer;
}

.giftnote__close:hover { color: var(--dv-color-text); }

.giftnote__close:focus-visible {
  outline: 2px solid var(--dv-color-primary);
  outline-offset: 1px;
}

@keyframes giftnote-in {
  from { opacity: 0; transform: translateY(0.5rem); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .giftnote { animation: none; }
}

/* Kapealla näytöllä koko levyinen, jolloin evästepainike jää vapaaksi yläpuolelle. */
@media (max-width: 30rem) {
  .giftnote {
    inset-inline: 0.75rem;
    inset-block-end: calc(4.25rem + env(safe-area-inset-bottom, 0px));
    width: auto;
  }
}

/* ---------------------------------------------------------
   Sesonkibanneri (layout: data-seasonbar, tekstit pk_season-asetuksesta).
   Tavallisessa virrassa yläpalkin yläpuolella; yläpalkki ei ole sticky.
   --------------------------------------------------------- */

.seasonbar {
  background: var(--dv-color-primary);
  color: var(--dv-color-primary-contrast);
  font-size: 0.92rem;
  line-height: 1.45;
}

.seasonbar__inner {
  position: relative;
  display: flex;
  justify-content: center;
  padding-block: 0.55rem;
  padding-inline-end: calc(var(--dv-container-gutter) + 2.25rem);
}

.seasonbar__text {
  margin: 0;
  max-width: none;
  text-align: center;
  text-wrap: balance;
}

.seasonbar__icon { margin-inline-end: 0.15rem; }

.seasonbar__link {
  display: inline-block;
  margin-inline-start: 0.35rem;
  font-weight: 600;
  color: var(--dv-color-primary-contrast);
  text-decoration: underline;
  white-space: nowrap;
}

.seasonbar__link:hover { text-decoration-thickness: 2px; }

.seasonbar__close {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: calc(var(--dv-container-gutter) - 0.6rem);
  transform: translateY(-50%);
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  font: inherit;
  font-size: 1.35rem;
  line-height: 1;
  color: inherit;
  background: none;
  border: 0;
  border-radius: var(--dv-radius);
  cursor: pointer;
  opacity: 0.85;
}

.seasonbar__close:hover { opacity: 1; }

.seasonbar :focus-visible { outline-color: var(--dv-color-primary-contrast); }

@media (max-width: 30rem) {
  .seasonbar { font-size: 0.85rem; }
}

/* ---------------------------------------------------------
   Lahjakortti päävalikossa: sama linkki kuin muut, mutta vihreä ja
   lahjapaketti-ikoni (CSS-maski, ei kuvaa eikä inline-SVG:tä).
   --------------------------------------------------------- */

.topbar .dv-menu .pk-menu-gift > a,
.topbar .dv-menu a.pk-menu-gift {
  color: var(--dv-color-primary);
  font-weight: 600;
}

.topbar .dv-menu .pk-menu-gift > a::before,
.topbar .dv-menu a.pk-menu-gift::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-inline-end: 0.35em;
  vertical-align: -0.12em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='18' height='4' rx='1'/%3E%3Cpath d='M12 8v13M19 12v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-7M7.5 8a2.5 2.5 0 0 1 0-5C11 3 12 8 12 8s1-5 4.5-5a2.5 2.5 0 0 1 0 5'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='18' height='4' rx='1'/%3E%3Cpath d='M12 8v13M19 12v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-7M7.5 8a2.5 2.5 0 0 1 0-5C11 3 12 8 12 8s1-5 4.5-5a2.5 2.5 0 0 1 0 5'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ---------------------------------------------------------
   Lahjakortin esimerkki (partial: lahjakortti-esimerkki). Jäljittelee
   sähköpostiin lähtevää korttia: vihreä yläpalkki, arvo, koodilaatikko.
   --------------------------------------------------------- */

.giftcard-figure {
  width: 100%;
  max-width: 23rem;
  margin: 0 auto;
}

.giftcard {
  overflow: hidden;
  font-size: 0.95rem;
  line-height: 1.5;
  text-align: start;
  background: color-mix(in srgb, var(--dv-color-bg) 30%, white);
  border: 1px solid var(--dv-color-border);
  border-radius: calc(var(--dv-radius) * 1.5);
  box-shadow: 0 1px 2px rgb(31 29 26 / 0.05), 0 14px 34px rgb(31 29 26 / 0.12);
}

.giftcard p { margin: 0; max-width: none; }

.giftcard__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.95rem 1.25rem;
  background: var(--dv-color-primary);
  color: var(--dv-color-primary-contrast);
}

.giftcard__brand {
  font-family: var(--dv-font-heading);
  font-size: 1.45rem;
  line-height: 1.1;
}

.giftcard__label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.giftcard__body { padding: 1.15rem 1.25rem 1.3rem; }

.giftcard__hello {
  font-family: var(--dv-font-heading);
  font-size: 1.2rem;
}

.giftcard .giftcard__greeting {
  margin-block-start: 0.2rem;
  font-family: var(--dv-font-heading);
  font-style: italic;
  color: var(--dv-color-muted);
}

.giftcard__caption {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dv-color-muted);
}

.giftcard__body > .giftcard__caption { margin-block-start: 0.9rem; }

.giftcard__value {
  font-family: var(--dv-font-heading);
  font-size: clamp(2.2rem, 1.9rem + 1vw, 2.7rem);
  line-height: 1.05;
  color: var(--dv-color-primary);
}

.giftcard__use {
  font-size: 0.88rem;
  color: var(--dv-color-muted);
}

.giftcard__code {
  display: grid;
  gap: 0.15rem;
  margin-block-start: 1rem;
  padding: 0.8rem 1rem;
  text-align: center;
  background: var(--dv-color-surface);
  border: 1.5px dashed var(--dv-color-primary);
  border-radius: var(--dv-radius);
}

.giftcard__codevalue {
  font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.18em;
}

.giftcard__valid { font-size: 0.82rem; }

.giftcard-figure__caption {
  margin-block-start: 0.7rem;
  font-size: 0.85rem;
  text-align: center;
  color: var(--dv-color-muted);
}

/* Puhelimella kortti pienenee, ettei se vie koko näyttöä. */
@media (max-width: 859px) {
  .giftcard-figure { max-width: 20rem; }
  .giftcard { font-size: 0.88rem; }
  .giftcard__body { padding: 0.95rem 1.1rem 1.1rem; }
  .giftcard__value { font-size: 2rem; }
  .giftcard__code { padding: 0.65rem 0.8rem; }
}

/* ---------------------------------------------------------
   Lahjakortin arvot pillereinä (etusivun nosto ja /lahjakortti)
   --------------------------------------------------------- */

.giftamounts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 1.1rem 0 0;
  padding: 0;
  list-style: none;
}

.giftamounts li {
  padding: 0.3rem 0.8rem;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--dv-color-primary);
  background: var(--dv-color-bg);
  border: 1px solid var(--dv-color-border);
  border-radius: 999px;
}

.giftamounts li:last-child { font-weight: 500; color: var(--dv-color-text); }

/* Etusivun lahjakorttinosto: .promo-kortti, jonka oikealla on esimerkkikortti. */
.giftpromo .actions { margin-block-start: 1.25rem; }
.giftpromo__note { margin-block-start: 0.85rem; font-size: 0.92rem; }

/* /lahjakortti-sivun yläosa (.pagehead + .split) */
.giftintro .giftamounts { margin-block-start: 1.25rem; }
.giftintro .actions { margin-block-start: 1.25rem; }
.giftintro__note { margin-block-start: 1rem; font-size: 0.95rem; }

/* ---------------------------------------------------------
   Lahjakortin ristiinmyynti polttopuu- ja konevuokraussivuilla (.offer)
   --------------------------------------------------------- */

.giftnudge {
  display: grid;
  gap: 0.75rem 1.5rem;
  align-items: center;
  margin-block-start: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
  padding: 1rem 1.15rem;
}

.giftnudge p { margin: 0; }

.giftnudge__title {
  font-family: var(--dv-font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.3;
}

/* .btn on inline-flex, joten tekstin ja nuolen väli tulee gapista. */
.giftnudge__cta {
  justify-self: start;
  gap: 0.35em;
  white-space: nowrap;
}

@media (min-width: 700px) {
  .giftnudge { grid-template-columns: minmax(0, 1fr) auto; }
}