/* ==========================================================================
   styles.css – sivuston ulkoasu
   --------------------------------------------------------------------------
   Tämä tiedosto määrää miltä sivusto näyttää: värit, fontit, valikko,
   sliderit, tuotekortit, lomakkeet ja alatunniste.

   Sisältö:
   1.  Värit ja perusasetukset
   2.  Yläpalkki ja päävalikko
   3.  Surun kohdatessa -sivun linkit
   4.  Etusivun iso kuva (hero-slider)
   5.  Muiden sivujen yläkuvat (catalog-slider)
   6.  Sisältöalueet, kortit ja palvelulistat
   7.  Verkkokauppa, hautakivet ja tuotesivut
   8.  Painikkeet, ostoskori ja kassa
   9.  Lomakkeet, yhteystiedot ja hinnoittelutaulukko
   10. Alatunniste (footer)
   11. Valikko kuvan päällä ja marmoritaustat
   12. Rekisteriseloste ja evästebanneri
   13. Puhelinnäkymä (kapea näyttö)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. VÄRIT JA PERUSASETUKSET
   Näitä muuttujia käytetään muualla tiedostossa. Vaihda väri tai fontti
   täältä, niin muutos näkyy koko sivustolla.
   -------------------------------------------------------------------------- */
:root {
  --bg: #f3efe8;              /* Sivun vaalea taustaväri */
  --surface: #fffcf7;         /* Korttien ja laatikoiden tausta */
  --text: #2a2622;            /* Leipätekstin väri */
  --muted: #6a6258;           /* Himmeämpi aputeksti */
  --primary: #a6894f;         /* Kultainen painike- ja linkkiväri */
  --primary-dark: #8a7040;    /* Linkin väri, kun hiiri on päällä */
  --accent: #c4ae7a;          /* Korosteväri (esim. aktiivinen valikko) */
  --ink: #2a2622;             /* Tumma teksti ja tummat painikkeet */
  --ink-soft: #3f3932;        /* Hieman vaaleampi tumma sävy */
  --border: #e4dbcf;          /* Ohuiden reunaviivojen väri */
  --shadow: 0 4px 24px rgba(42, 38, 34, 0.08); /* Korttien varjo */
  --radius: 12px;             /* Kulmien pyöristys */
  --max-width: 1120px;        /* Sisällön enimmäisleveys */
  --font-sans: "Inter", system-ui, -apple-system, sans-serif; /* Leipätekstin fontti */
  --font-serif: "Source Serif 4", Georgia, serif;             /* Otsikoiden fontti */
}

/* Kaikkien elementtien leveyslaskenta: reunat eivät kasvata kokoa. */
*, *::before, *::after { box-sizing: border-box; }

/* Sivun vieritys on pehmeä, kun siirrytään ankkurilinkillä. */
html { scroll-behavior: smooth; }

/* Koko sivun perusfontti, riviväli ja tausta. */
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
}

/* Kuvat eivät ylitä sarakkeen leveyttä. */
img { max-width: 100%; height: auto; display: block; }

/* Linkkien perusväri ja alleviivaus. */
a { color: var(--primary); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--primary-dark); }

/* Näppäimistökäyttäjän "Siirry sisältöön" -linkki, näkyy vain kohdistettaessa. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--primary);
  color: #fff;
  padding: 8px 16px;
  z-index: 1000;
}
.skip-link:focus { left: 8px; }

/* Sivun keskitetty sisältöpalsta (enintään --max-width). */
.container {
  width: min(100% - 2rem, var(--max-width));
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   2. YLÄPALKKI JA PÄÄVALIKKO
   Logo, ostoskori, hampurilaisvalikko (puhelin) ja sivulinkit.
   -------------------------------------------------------------------------- */
/* Tumma marmoritaustainen palkki sivun yläreunassa. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: #2a2622;
  background-image:
    linear-gradient(rgba(30, 26, 22, 0.28), rgba(30, 26, 22, 0.34)),
    url("../../images/tummamarmori.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-bottom: 1px solid rgba(247, 241, 230, 0.18);
  color: #f7f1e6;
}

/* Logo vasemmalla, valikko ja ostoskori oikealla. */
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 0;
}

/* Yrityksen nimi (Tohmajärven Hautauspalvelu) ja TH-merkki. */
.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: inherit;
}

.brand:hover {
  color: inherit;
}

.brand-mark {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(247, 241, 230, 0.92);
  color: #2a2622;
  display: grid;
  place-items: center;
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-weight: 600;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(247, 241, 230, 0.35);
}

.brand-text strong {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.05rem;
  line-height: 1.2;
  color: #f7f1e6;
}
.brand-text span {
  font-size: 0.8rem;
  color: rgba(247, 241, 230, 0.78);
}

/* Hampurilaispainike: näkyy vain puhelimella (ks. Responsive-osio). */
.nav-toggle {
  display: none;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid rgba(247, 241, 230, 0.35);
  background: rgba(42, 38, 34, 0.45);
  border-radius: 8px;
  padding: 0.5rem 0.85rem;
  font: inherit;
  cursor: pointer;
  color: #f7f1e6;
}

/* Ostoskori ja hampurilaispainike yläpalkin oikeassa reunassa. */
.header-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-left: auto;
  flex-shrink: 0;
}

.header-cart {
  text-decoration: none;
  color: #f7f1e6;
  padding: 0.45rem 0.85rem;
  border: 1px solid rgba(247, 241, 230, 0.35);
  background: rgba(42, 38, 34, 0.45);
  border-radius: 8px;
  white-space: nowrap;
}

/* Piilossa, kun kori on tyhjä – ei vie tilaa hampurilaisvalikolta. */
.cart-link.header-cart:not(.is-visible) {
  display: none;
}

.header-cart:hover {
  color: #f7f1e6;
  background: rgba(42, 38, 34, 0.7);
}

/* Päävalikon linkkirivi (Etusivu, Palvelut, Arkut …). */
.site-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.95rem;
  padding-bottom: 0.65rem;
}

.site-nav > ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: contents;
}

.site-nav a {
  text-decoration: none;
  color: rgba(247, 241, 230, 0.92);
  font-size: 0.95rem;
  padding: 0.35rem 0;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: #fff;
  border-bottom-color: #c4ae7a;
}

/* Hinnoittelu ja Surun kohdatessa – työpöydällä samassa rivissä muiden kanssa. */
.nav-secondary {
  display: contents;
}

.nav-secondary a {
  font-weight: 500;
}

/* Valikkokohta, jossa on alavalikko (esim. Arkut → Vainajan vaatetus). */
.nav-item-has-sub {
  position: relative;
}

.nav-details {
  position: relative;
}

.nav-details > summary {
  list-style: none;
  cursor: pointer;
  font-size: 0.95rem;
  padding: 0.35rem 0;
  border-bottom: 2px solid transparent;
  color: rgba(247, 241, 230, 0.92);
  user-select: none;
}

.nav-details > summary::-webkit-details-marker {
  display: none;
}

.nav-details > summary::after {
  content: " ▾";
  font-size: 0.75em;
  opacity: 0.75;
}

.nav-details[open] > summary,
.nav-details > summary:hover,
.nav-details.is-current > summary {
  color: #fff;
  border-bottom-color: #c4ae7a;
}

.nav-sub {
  list-style: none;
  display: block;
  margin: 0.35rem 0 0;
  padding: 0.4rem 0;
  min-width: 14rem;
  background: #f7f1e6;
  border: 1px solid rgba(42, 38, 34, 0.18);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(42, 38, 34, 0.12);
}

.nav-sub a {
  display: block;
  padding: 0.5rem 0.85rem;
  border-bottom: none;
  white-space: nowrap;
  color: var(--ink);
}

.nav-sub a:hover,
.nav-sub a[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: transparent;
  background: rgba(42, 38, 34, 0.06);
}

/* Työpöydällä alavalikko avautuu linkin alle, ei sivun sisään. */
@media (min-width: 769px) {
  .nav-sub {
    position: absolute;
    top: calc(100% + 0.35rem);
    left: 0;
    z-index: 120;
  }
}

/* --------------------------------------------------------------------------
   3. SURUN KOHDATESSA -SIVU
   Tarkistuslista ja ulkoisten linkkien kortit (linkit.html).
   -------------------------------------------------------------------------- */
.planning-checklist-block {
  margin: 0 0 2.5rem;
  max-width: 42rem;
}

.planning-checklist-block h2 {
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 2.2vw, 1.55rem);
  margin: 0 0 1rem;
}

.planning-checklist {
  margin: 0;
  padding-left: 1.35rem;
  display: grid;
  gap: 0.55rem;
  color: var(--ink);
  line-height: 1.5;
}

.planning-checklist a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* Ulkoisten ohjesivujen lista korteissa. */
.link-collection {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}

.link-collection li {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
}

.link-collection h2 {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  margin: 0 0 0.35rem;
}

.link-collection p {
  margin: 0;
  color: var(--muted);
}

.link-collection-action {
  margin-top: 0.85rem !important;
}

/* Ostoskorilinkki yläpalkissa ja tuotemäärä (pieni ympyrä). */
.cart-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 500;
}

.cart-count {
  background: var(--ink);
  color: #f7f1e6;
  font-size: 0.75rem;
  min-width: 1.35rem;
  height: 1.35rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
  padding: 0 0.3rem;
}

/* --------------------------------------------------------------------------
   4. ETUSIVUN ISO KUVA (HERO-SLIDER)
   index.html:n vaihtuvat taustakuvat, otsikko ja painikkeet.
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: clamp(420px, 78vh, 760px);
  display: grid;
  align-items: end;
  color: #fff;
  overflow: hidden;
}

.hero-track {
  position: absolute;
  inset: 0;
}

.hero-slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity 1.2s ease;
  pointer-events: none;
}

/* Yksi kuva kerrallaan; aktiivinen kuva on näkyvä (is-active). */
.hero-slide.is-active {
  opacity: 1;
  pointer-events: auto;
  z-index: 1;
}

.hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.04);
  transition: transform 7s ease;
}

.hero-slide .image-do-not-use {
  z-index: 2;
}

.hero-slide.is-active img {
  transform: scale(1);
}

/* Hitaampi ristiinhäivytys ja kevyt zoom etusivun kuvissa. */
.hero--soft .hero-slide {
  transition: opacity 2.6s ease-in-out;
}

.hero--soft .hero-slide img {
  transform: scale(1);
  transition: transform 10s ease-out;
}

.hero--soft .hero-slide.is-active img {
  transform: scale(1.035);
}

/* Vaalentaa tummaa valokuvaa (etusivun 1. ja 6. kuva). */
.hero-slide--light img {
  filter: brightness(1.32) contrast(0.92) saturate(0.95);
}

/* Poistaa animaatiot, jos käyttäjä on pyytänyt vähemmän liikettä. */
@media (prefers-reduced-motion: reduce) {
  .hero-slide,
  .hero--soft .hero-slide {
    transition: opacity 0.01ms;
  }

  .hero-slide img,
  .hero--soft .hero-slide img,
  .hero-slide.is-active img,
  .hero--soft .hero-slide.is-active img {
    transform: none;
    transition: none;
  }
}

/* Tumma liukuväri kuvan päällä, jotta valkoinen teksti erottuu. */
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(42, 38, 34, 0.82) 0%, rgba(42, 38, 34, 0.35) 55%, rgba(42, 38, 34, 0.15) 100%);
}

.hero-content {
  position: relative;
  z-index: 2;
  width: min(100% - 2rem, var(--max-width));
  max-width: none;
  margin-inline: auto;
  padding: 3rem 0 3.25rem;
}

/* Etusivun otsikko ja painikkeet: nosta tekstiä ylemmäs pisteistä. */
.page-index .hero-content {
  padding-bottom: 8.75rem;
}

.hero h1 {
  font-family: var(--font-serif);
  font-size: clamp(1.65rem, 4.2vw, 3rem);
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 0.85rem;
  max-width: none;
  white-space: normal;
  overflow-wrap: anywhere;
}

.hero p {
  margin: 0;
  font-size: clamp(1rem, 2.5vw, 1.15rem);
  max-width: none;
  width: 100%;
  line-height: 1.55;
  opacity: 0.95;
}

.hero-content > p + h1 {
  margin-top: 0.35rem;
}

.hero-content > h1 + p {
  margin-top: 0;
}

.hero-title-continue {
  margin: 0.35rem 0 0 !important;
  font-family: var(--font-serif);
  font-size: clamp(1.2rem, 3vw, 1.85rem);
  font-weight: 500;
  line-height: 1.3;
  opacity: 0.95 !important;
}

.hero-title-continue[hidden] {
  display: none !important;
}

/* Etusivun painikkeet (esim. Palvelut / Yhteystiedot). */
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.35rem !important;
  opacity: 1 !important;
}

.btn-hero-outline {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.85);
  color: #fff;
}

.btn-hero-outline:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  border-color: #fff;
}

.hero-actions .btn-primary {
  background: #f7f1e6;
  color: #1f1c18;
  box-shadow: none;
}

.hero-actions .btn-primary:hover {
  background: var(--primary);
  color: #1f1c18;
}

/* Pienet pallot, joilla vaihdetaan etusivun kuvaa. */
.hero-dots {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 1rem;
  transform: translateX(-50%);
  display: flex;
  gap: 0.45rem;
}

.hero-dot {
  width: 0.55rem;
  height: 0.55rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  cursor: pointer;
}

.hero-dot[aria-current="true"] {
  background: #fff;
  transform: scale(1.15);
}

/* --------------------------------------------------------------------------
   5. MUIDEN SIVUJEN YLÄKUVAT (CATALOG-SLIDER)
   Palvelut, Arkut, Uurnat, yhteystiedot ym. – iso kuva ja otsikko yläreunassa.
   -------------------------------------------------------------------------- */
.catalog-slider {
  position: relative;
  width: 100%;
  min-height: clamp(380px, 65vh, 680px);
  overflow: hidden;
  color: #fff;
  isolation: isolate;
  background: #2a2622;
}

.catalog-slider-track {
  position: absolute;
  inset: 0;
}

.catalog-slider-slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity 1.1s ease;
  pointer-events: none;
  display: grid;
  place-items: center;
}

.catalog-slider-slide.is-active {
  opacity: 1;
  pointer-events: auto;
}

.catalog-slider-slide--placeholder,
.catalog-slider--placeholder .catalog-slider-slide {
  background:
    linear-gradient(160deg, rgba(47, 61, 58, 0.92), rgba(42, 38, 34, 0.88)),
    radial-gradient(ellipse at 30% 20%, rgba(244, 239, 230, 0.12), transparent 55%);
}

/* Kuvan reunat sumennetaan, keskellä näkyy itse valokuva. */
.catalog-slider-slide::before {
  content: "";
  position: absolute;
  inset: -12%;
  background-image: var(--slide-image);
  background-size: cover;
  background-position: center;
  filter: blur(28px) saturate(1.08) brightness(0.78);
  transform: scale(1.12);
  z-index: 0;
}

.catalog-slider-slide img {
  position: relative;
  z-index: 1;
  width: auto;
  height: auto;
  max-width: min(100%, 720px);
  max-height: min(100%, 92%);
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 10px 28px rgba(0, 0, 0, 0.28));
  transform: scale(0.97);
  transition: transform 7s ease;
}

.catalog-slider-slide.is-active img {
  transform: scale(1);
}

/* Kuva kiinnitetään alareunaan (esim. arkut). */
.catalog-slider--anchor-bottom .catalog-slider-slide {
  place-items: end center;
  align-content: end;
  padding-bottom: 0.35rem;
}

.catalog-slider--anchor-bottom .catalog-slider-slide::before {
  background-position: center bottom;
}

.catalog-slider--anchor-bottom .catalog-slider-slide img {
  object-position: center bottom;
  max-height: min(100%, 96%);
  margin-bottom: 0;
  align-self: end;
}

/* Kuva täyttää koko leveyden ilman kehystä (esim. adressit, hautakivet). */
.catalog-slider--fullbleed .catalog-slider-slide::before {
  display: none;
}

.catalog-slider--fullbleed .catalog-slider-slide img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  object-position: center;
  filter: none;
  transform: scale(1.04);
}

.catalog-slider--fullbleed .catalog-slider-slide.is-active img {
  transform: scale(1);
}

.catalog-slider--fullbleed.catalog-slider--anchor-bottom .catalog-slider-slide img {
  object-position: center bottom;
}

.catalog-slider-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(42, 38, 34, 0.18) 0%, rgba(42, 38, 34, 0.28) 40%, rgba(42, 38, 34, 0.72) 100%);
  pointer-events: none;
}

.catalog-slider-content {
  position: relative;
  z-index: 2;
  min-height: inherit;
  display: grid;
  place-items: center;
  padding: 2.5rem 1.25rem;
  text-align: center;
}

.catalog-slider-content h1 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(2.25rem, 7vw, 4.25rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
  animation: catalog-title-in 0.9s ease both;
}

/* Otsikko ja alaotsikko pysyvät yhdessä (ei veny koko kuvan korkeuteen). */
.catalog-slider-copy {
  max-width: min(42rem, 100%);
}

.catalog-slider-subtitle {
  margin: 0.85rem auto 0;
  max-width: 34ch;
  font-size: clamp(1rem, 2.2vw, 1.2rem);
  line-height: 1.45;
  font-weight: 400;
  opacity: 0.95;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
  animation: catalog-title-in 0.9s ease 0.12s both;
}

.catalog-slider-copy .catalog-slider-subtitle {
  max-width: none;
}

/* Allekirjoitus yhteystietojen yläkuvassa. */
.catalog-slider-signoff {
  margin: 0.85rem 0 0;
  font-family: var(--font-serif);
  font-size: clamp(0.95rem, 1.8vw, 1.1rem);
  font-weight: 500;
  opacity: 0.95;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
  animation: catalog-title-in 0.9s ease 0.2s both;
}

.catalog-slider-dots {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 1rem;
  transform: translateX(-50%);
  display: flex;
  gap: 0.45rem;
}

.catalog-slider-dot {
  width: 0.55rem;
  height: 0.55rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  cursor: pointer;
}

.catalog-slider-dot[aria-current="true"] {
  background: #fff;
  transform: scale(1.15);
}

/* Punainen "ÄLÄ KÄYTÄ" -leima kuvan päällä (vain luonnoskuvat). */
.image-do-not-use {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  margin: 0;
  pointer-events: none;
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 5vw, 3rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 80, 80, 0.92);
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.55),
    0 0 18px rgba(0, 0, 0, 0.35);
  transform: rotate(-18deg);
  white-space: nowrap;
}

@keyframes catalog-title-in {
  from {
    opacity: 0;
    transform: translateY(0.6rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Teksti yläkuvan alapuolella (esim. palveluiden johdanto). */
.catalog-intro {
  margin: 0 0 1.75rem;
  max-width: none;
  width: 100%;
}

.catalog-intro--wide {
  max-width: none;
  width: 100%;
}

.catalog-intro--wide p {
  max-width: none;
}

.catalog-intro p:last-child {
  margin-bottom: 0;
}

/* Kuljetuspalvelu-sivun lisätiedot. */
.transport-details {
  margin: 0 0 2rem;
  max-width: none;
  width: 100%;
}

.transport-details h2 {
  font-family: var(--font-serif);
  font-size: clamp(1.35rem, 2.4vw, 1.7rem);
  margin: 0 0 0.85rem;
}

.transport-details p {
  margin: 0 0 0.85rem;
  color: var(--muted);
  line-height: 1.55;
}

.transport-details ul {
  margin: 0;
  padding-left: 1.25rem;
  color: var(--ink);
  line-height: 1.55;
  display: grid;
  gap: 0.45rem;
}

.transport-page .catalog-intro p,
.transport-page .transport-details,
.transport-page .transport-details p,
.transport-page .transport-details ul,
.transport-page .transport-details li,
.transport-page .lead-box p {
  color: var(--text);
  font-size: 1rem;
  line-height: 1.65;
}

.transport-page .transport-details h2,
.transport-page .lead-box h2 {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.65;
  color: var(--text);
  margin: 0 0 0.85rem;
}

.section.catalog-section {
  padding-top: 2rem;
}

/* --------------------------------------------------------------------------
   6. SISÄLTÖALUEET, KORTIT JA PALVELULISTAT
   Sivun osioiden välistys, korttiruudukot ja palvelut.html.
   -------------------------------------------------------------------------- */
.section { padding: 3.5rem 0; }
.section-alt { background: var(--surface); }

.section-header {
  margin-bottom: 2rem;
}

.section-header h2 {
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  margin: 0 0 0.5rem;
}

.section-header p {
  margin: 0;
  color: var(--muted);
  max-width: 60ch;
}

.section-header--full p {
  max-width: none;
}

/* Korttiruudukko (2 tai 3 saraketta). */
.grid {
  display: grid;
  gap: 1.25rem;
}

.grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* Etusivun palvelukortit: 3 + 4, isommat kuvat. */
.home-services {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.grid-home-services {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}

.grid-home-services--rest {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grid-home-services .card-media {
  aspect-ratio: 4 / 3;
}

@media (max-width: 960px) {
  .grid-home-services--rest {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .grid-home-services,
  .grid-home-services--rest {
    grid-template-columns: 1fr;
  }
}

/* Klikattava kortti kuvalla ja tekstillä. */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform 0.2s, box-shadow 0.2s;
  display: flex;
  flex-direction: column;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(42, 42, 42, 0.1);
}

.card-body {
  padding: 1.25rem 1.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.card-actions {
  margin-top: auto;
  padding-top: 1rem;
}

.card h3 {
  font-family: var(--font-serif);
  margin: 0 0 0.5rem;
  font-size: 1.2rem;
}

.card p { margin: 0; color: var(--muted); font-size: 0.95rem; }

.card-media {
  aspect-ratio: 16 / 10;
  object-fit: cover;
  width: 100%;
}

.card-media--placeholder {
  background:
    linear-gradient(160deg, rgba(47, 61, 58, 0.88), rgba(42, 38, 34, 0.82)),
    radial-gradient(ellipse at 30% 20%, rgba(244, 239, 230, 0.12), transparent 55%);
}

.card-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.home-services .card-link .card-media {
  transition: transform 0.25s ease;
}

.home-services .card-link:hover .card-media,
.home-services .card-link:focus-visible .card-media {
  transform: scale(1.03);
}

@media (prefers-reduced-motion: reduce) {
  .home-services .card-link .card-media,
  .home-services .card-link:hover .card-media,
  .home-services .card-link:focus-visible .card-media {
    transition: none;
    transform: none;
  }
}

/* Korostettu tekstilaatikko (esim. johdanto tai tarjouspyyntö). */
.lead-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem;
  box-shadow: var(--shadow);
}

.lead-box h2 {
  font-family: var(--font-serif);
  margin-top: 0;
}

/* Palvelut-sivun lista: kuva + otsikko + kuvaus. */
.service-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 1rem;
}

.service-list li {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 1.15rem;
  align-items: start;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  overflow: hidden;
}

.service-thumb {
  width: 140px;
  height: 105px;
  object-fit: cover;
  border-radius: calc(var(--radius) - 2px);
  background: var(--border);
}

.service-body {
  min-width: 0;
  padding-top: 0.15rem;
  padding-right: 0.35rem;
}

.service-list h3 {
  font-family: var(--font-serif);
  margin: 0 0 0.35rem;
  font-size: 1.1rem;
}

.service-list p { margin: 0; color: var(--muted); }

.service-body p + p {
  margin-top: 0.65rem;
}

.service-action {
  margin-top: 0.75rem !important;
}

.service-list--rows {
  gap: 1.5rem;
}

.service-list--rows li {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: stretch;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  overflow: visible;
}

.service-list--rows .service-body {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem;
  box-shadow: var(--shadow);
}

.service-list--rows h3 {
  font-size: clamp(1.35rem, 2.4vw, 1.85rem);
  margin-bottom: 0.75rem;
}

.service-list--rows .service-thumb {
  width: 100%;
  height: 100%;
  min-height: 260px;
  max-height: 360px;
  object-fit: cover;
  border-radius: var(--radius);
}

.service-list--rows .service-thumb--contain {
  object-fit: contain;
  background: #fff;
}

.page-palvelut .service-list li {
  overflow: visible;
}

.page-palvelut .service-thumb,
.page-palvelut .grid > img {
  display: block;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.page-palvelut .service-thumb:hover,
.page-palvelut .grid > img:hover {
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 10px 28px rgba(42, 38, 34, 0.18);
  z-index: 1;
  position: relative;
}

@media (prefers-reduced-motion: reduce) {
  .page-palvelut .service-thumb,
  .page-palvelut .grid > img,
  .page-palvelut .service-thumb:hover,
  .page-palvelut .grid > img:hover {
    transition: none;
    transform: none;
  }
}

@media (max-width: 800px) {
  .service-list--rows li {
    grid-template-columns: 1fr;
  }

  .service-list--rows .service-thumb {
    min-height: 220px;
    height: 240px;
    max-height: 280px;
  }
}

@media (max-width: 560px) {
  .service-list li {
    grid-template-columns: 1fr;
    gap: 0.85rem;
  }

  .service-thumb {
    width: 100%;
    height: 160px;
  }

  .service-list--rows .service-body {
    padding: 1.35rem;
  }

  .service-list--rows .service-thumb {
    min-height: 200px;
    height: 220px;
    max-height: 240px;
  }
}

/* --------------------------------------------------------------------------
   7. VERKKOKAUPPA, HAUTAKIVET JA TUOTESIVUT
   Tuoteruudukot, suurennus (lightbox), tuotesivu ja valinnat.
   -------------------------------------------------------------------------- */
.shop-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

.product-catalog {
  display: grid;
  gap: 2.5rem;
}

.product-group-title {
  font-family: var(--font-serif);
  font-size: clamp(1.45rem, 2.5vw, 1.85rem);
  margin: 0 0 1rem;
}

.product-group-desc {
  margin: -0.35rem 0 1.25rem;
  max-width: none;
  width: 100%;
  color: var(--muted);
  line-height: 1.55;
}

.product-group-more {
  margin: 1.1rem 0 0;
  text-align: center;
  color: var(--text);
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1.25rem;
}

/* Hautakivet-sivun esimerkkikivet neljässä sarakkeessa. */
.stone-category {
  margin: 2.25rem 0 2.5rem;
}

.stone-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.stone-row img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--border);
  display: block;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.stone-row img:hover {
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 10px 28px rgba(42, 38, 34, 0.18);
}

@media (prefers-reduced-motion: reduce) {
  .stone-row img,
  .stone-row img:hover {
    transition: none;
    transform: none;
  }
}

.stone-more {
  margin: 1.1rem 0 0;
}

.stone-request {
  margin: 2.5rem 0 0;
}

.stone-request .lead-box {
  max-width: 40rem;
}

.option-group--row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  min-inline-size: 0;
}

.option-group--row .option-toggle {
  margin: 0;
  justify-content: center;
  text-align: center;
}

@media (max-width: 768px) {
  .stone-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .option-group--row {
    grid-template-columns: 1fr;
  }
}

/* Yksi tuote ruudukossa (kuva, nimi, hinta, ostosnappi). */
.product-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.product-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow);
}

.product-card-link {
  color: inherit;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.product-card-link-info {
  height: auto;
  flex: 1;
}

.product-card-link:hover {
  color: inherit;
}

/* Klikkaa kuvaa: avaa suurennuksen. */
.product-zoom-trigger {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
  font: inherit;
  color: inherit;
}

.product-zoom-trigger img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
}

.product-zoom-hint {
  position: absolute;
  right: 0.65rem;
  bottom: 0.65rem;
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  background: rgba(42, 38, 34, 0.72);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  opacity: 0;
  transform: translateY(0.2rem);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}

.product-zoom-trigger:hover .product-zoom-hint,
.product-zoom-trigger:focus-visible .product-zoom-hint {
  opacity: 1;
  transform: translateY(0);
}

.product-detail-media .product-zoom-trigger {
  width: 100%;
}

/* Kuvan suurennus koko ruudulle (klikkaa kuvaa). */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  background: rgba(18, 22, 20, 0.88);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.lightbox.is-open {
  opacity: 1;
  visibility: visible;
}

.lightbox-dialog {
  position: relative;
  max-width: min(96vw, 1100px);
  max-height: 92vh;
  outline: none;
}

.lightbox-dialog img {
  max-width: 96vw;
  max-height: 88vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35);
  background: #111;
}

.lightbox-close {
  position: absolute;
  top: -0.35rem;
  right: -0.35rem;
  width: 2.4rem;
  height: 2.4rem;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: #2a2622;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.lightbox-close:hover,
.lightbox-close:focus-visible {
  background: var(--primary);
  color: #fff;
}

body.lightbox-open {
  overflow: hidden;
}

.product-card img {
  aspect-ratio: 1;
  object-fit: cover;
  width: 100%;
}

.page-kukkalaitteet .product-card,
.page-uurnat .product-card,
.page-arkut .product-card,
.page-adressit .product-card {
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.2s;
}

.page-kukkalaitteet .product-card img,
.page-uurnat .product-card img,
.page-arkut .product-card img,
.page-adressit .product-card img {
  transition: transform 0.35s ease;
}

.page-kukkalaitteet .product-card:hover,
.page-uurnat .product-card:hover,
.page-arkut .product-card:hover,
.page-adressit .product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(42, 38, 34, 0.18);
  z-index: 1;
}

.page-kukkalaitteet .product-card:hover img,
.page-uurnat .product-card:hover img,
.page-arkut .product-card:hover img,
.page-adressit .product-card:hover img {
  transform: scale(1.03);
}

.page-adressit .product-card img {
  object-fit: contain;
  background: #eef4f8;
}

.page-adressit .product-detail-media {
  background: #eef4f8;
}

.page-adressit .product-detail-media img,
.page-adressit .product-zoom-trigger img {
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: center top;
}

@media (prefers-reduced-motion: reduce) {
  .page-kukkalaitteet .product-card,
  .page-uurnat .product-card,
  .page-arkut .product-card,
  .page-adressit .product-card,
  .page-kukkalaitteet .product-card img,
  .page-uurnat .product-card img,
  .page-arkut .product-card img,
  .page-adressit .product-card img,
  .page-kukkalaitteet .product-card:hover,
  .page-uurnat .product-card:hover,
  .page-arkut .product-card:hover,
  .page-adressit .product-card:hover,
  .page-kukkalaitteet .product-card:hover img,
  .page-uurnat .product-card:hover img,
  .page-arkut .product-card:hover img,
  .page-adressit .product-card:hover img {
    transition: none;
    transform: none;
  }
}

.product-image-placeholder {
  aspect-ratio: 1;
  width: 100%;
  display: grid;
  place-items: center;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.55), rgba(0, 0, 0, 0.04)),
    repeating-linear-gradient(
      -18deg,
      transparent,
      transparent 10px,
      rgba(0, 0, 0, 0.03) 10px,
      rgba(0, 0, 0, 0.03) 11px
    ),
    var(--paper-elevated, #f3eee6);
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-align: center;
  padding: 1rem;
  box-sizing: border-box;
}

.product-detail-media .product-image-placeholder {
  border-radius: var(--radius);
  min-height: 280px;
}

.cart-page-item .product-image-placeholder,
.cart-item-placeholder {
  width: 120px;
  height: 120px;
  aspect-ratio: auto;
  flex-shrink: 0;
  border-radius: calc(var(--radius) - 2px);
  font-size: 0.75rem;
}

.product-info {
  padding: 1rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.product-info h3 {
  font-size: 0.95rem;
  margin: 0 0 0.25rem;
  font-weight: 600;
}

.product-price {
  font-weight: 600;
  color: var(--primary);
  margin-bottom: 0.75rem;
}

.product-info .btn {
  margin-top: auto;
  align-self: flex-start;
}

.product-actions {
  margin-top: auto;
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.qty-input {
  width: 3.5rem;
  padding: 0.4rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  text-align: center;
  font: inherit;
}

.product-breadcrumb {
  margin: 0 0 1.5rem;
}

.product-breadcrumb a {
  text-decoration: none;
  font-weight: 500;
}

/* Edellinen / Seuraava -linkit tuotesivulla (esim. adressit). */
.product-pager {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0 0 1.5rem;
}

.product-pager + .product-detail-grid + .product-pager {
  margin: 2rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}

.product-pager-link {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  max-width: min(46%, 16rem);
  padding: 0.7rem 1rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.product-pager-link:hover,
.product-pager-link:focus-visible {
  border-color: var(--primary);
  box-shadow: 0 4px 14px rgba(42, 38, 34, 0.08);
}

.product-pager-link--next {
  margin-left: auto;
  text-align: right;
}

.product-pager-dir {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--primary);
}

.product-pager-name {
  color: var(--muted);
  font-size: 0.95rem;
}

/* Tuotesivu: kuva vasemmalla, tiedot ja ostosnappi oikealla. */
.product-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: start;
}

.product-detail-media {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.product-detail-media img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.product-detail-info h1 {
  margin: 0 0 0.35rem;
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 2.5vw, 2.1rem);
}

.product-detail-price {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--primary);
  margin: 0 0 1rem;
}

.product-detail-sku + .product-detail-price:not([data-base-price]) {
  display: none;
}

.product-detail-sku {
  margin: 0 0 0.35rem;
  color: var(--muted);
  font-size: 0.95rem;
}

.quote-form-title {
  margin: 0 0 0.5rem;
  font-family: var(--font-serif);
  font-size: 1.25rem;
}

.product-detail-text {
  margin: 0 0 1.5rem;
  color: var(--muted);
}

.product-detail-note {
  margin: -0.75rem 0 1.5rem;
  color: var(--ink);
}

/* Tuotesivun valinnat (esim. koko tai materiaali). */
.product-options-form {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
}

.option-group {
  border: none;
  margin: 0 0 1rem;
  padding: 0;
}

.option-group legend {
  font-weight: 600;
  margin-bottom: 0.75rem;
  padding: 0;
}

.option-toggle {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.7rem 0.85rem;
  margin-bottom: 0.5rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  background: var(--bg);
  font-weight: 500;
}

.option-toggle:has(input:checked) {
  border-color: var(--primary);
  background: #f4ecdf;
}

.option-toggle input {
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--primary);
}

.option-toggle em {
  font-style: normal;
  color: var(--muted);
  font-weight: 400;
}

.option-extra {
  margin: 0 0 0.85rem 0.25rem;
}

.product-buy-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.qty-label {
  font-weight: 500;
  font-size: 0.9rem;
}

.product-buy-row .btn {
  flex: 1;
  min-width: 10rem;
}

.cart-item-options {
  margin-top: 0.35rem !important;
  font-size: 0.8rem !important;
  line-height: 1.4;
}

.product-missing {
  max-width: 32rem;
}

.product-loading {
  color: var(--muted);
}

@media (max-width: 800px) {
  .product-detail-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
}

/* --------------------------------------------------------------------------
   8. PAINIKKEET, OSTOSKORI JA KASSA
   Kultainen / ääriviiva-painike, sivusta aukeava kori ja kassa-sivu.
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.65rem 1.15rem;
  border-radius: 8px;
  border: none;
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}

.btn-primary {
  background: var(--ink);
  color: #f7f1e6;
  box-shadow: inset 0 0 0 1px rgba(166, 137, 79, 0.55);
}
.btn-primary:hover {
  background: var(--primary);
  color: #1f1c18;
  box-shadow: none;
}

.btn-outline {
  background: transparent;
  border: 1px solid var(--primary);
  color: var(--ink-soft);
}
.btn-outline:hover {
  background: var(--primary);
  color: #1f1c18;
  border-color: var(--primary);
}

.btn-sm { padding: 0.45rem 0.85rem; font-size: 0.9rem; }

.btn-block { width: 100%; }

/* Sivusta aukeava ostoskori (peitto + paneeli). */
.cart-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 200;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s, visibility 0.25s;
}
.cart-overlay.open { opacity: 1; visibility: visible; }

.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: min(100%, 420px);
  height: 100%;
  background: var(--surface);
  z-index: 201;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12);
}
.cart-drawer.open { transform: translateX(0); }

.cart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border);
}

.cart-header h2 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 1.25rem;
}

.cart-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--muted);
  line-height: 1;
}

.cart-items {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 1.5rem;
}

.cart-item {
  display: flex;
  gap: 0.75rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border);
}

.cart-item img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 8px;
}

.cart-item-details { flex: 1; }
.cart-item-details h4 { margin: 0 0 0.25rem; font-size: 0.9rem; }
.cart-item-details p { margin: 0; font-size: 0.85rem; color: var(--muted); }

.cart-item-remove {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.8rem;
  text-decoration: underline;
}

.cart-footer {
  padding: 1.25rem 1.5rem;
  border-top: 1px solid var(--border);
  background: var(--bg);
}

.cart-total {
  display: flex;
  justify-content: space-between;
  font-weight: 600;
  font-size: 1.1rem;
  margin-bottom: 1rem;
}

.cart-empty {
  text-align: center;
  color: var(--muted);
  padding: 0.5rem 0 1.5rem;
  margin: 0;
}

.cart-empty-box {
  text-align: center;
  padding: 2rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.cart-empty-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1rem;
  max-width: 640px;
  margin: 0 auto;
}

.cart-empty-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  text-decoration: none;
  color: var(--ink-soft);
  font-weight: 500;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.cart-empty-link:hover {
  color: var(--ink);
  border-color: var(--primary);
  background: #f4ecdf;
  box-shadow: var(--shadow);
}

.cart-empty-link img {
  width: 88px;
  height: 88px;
  object-fit: cover;
  border-radius: 8px;
}

/* Ostoskori-sivu (koko sivu, ei sivupaneeli). */
.cart-page {
  max-width: 900px;
}

.cart-page-items {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.cart-page-item {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  gap: 1rem;
  align-items: start;
  padding: 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.cart-page-item img {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 8px;
}

.cart-page-item-details h3 {
  margin: 0 0 0.35rem;
  font-size: 1.05rem;
}

.cart-page-item-price,
.cart-page-item-details p {
  margin: 0 0 0.35rem;
  color: var(--muted);
  font-size: 0.95rem;
}

.cart-qty-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.5rem 0;
  font-size: 0.9rem;
  font-weight: 500;
}

.cart-page-item-total {
  font-weight: 600;
  white-space: nowrap;
}

.cart-page-summary {
  padding: 1.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.cart-page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: flex-end;
}

.btn.is-disabled,
a.is-disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* Kassa: tilauksen yhteenveto ja yhteystietolomake. */
.checkout-page {
  max-width: 980px;
}

.checkout-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: start;
}

.checkout-summary,
.checkout-form-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
}

.checkout-summary h2,
.checkout-form-wrap h2 {
  margin-top: 0;
  font-family: var(--font-serif);
  font-size: 1.35rem;
}

@media (max-width: 800px) {
  .cart-page-item {
    grid-template-columns: 88px 1fr;
  }

  .cart-page-item img {
    width: 88px;
    height: 88px;
  }

  .cart-page-item-total {
    grid-column: 2;
  }

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

/* --------------------------------------------------------------------------
   9. LOMAKKEET, YHTEYSTIEDOT JA HINNOITTELU
   Yhteydenottolomake, käyntiosoitteet, aukioloajat ja esimerkkilasku.
   -------------------------------------------------------------------------- */
.form-group { margin-bottom: 1rem; }

.form-row {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 0.75rem;
}

@media (max-width: 600px) {
  .form-row {
    grid-template-columns: 1fr;
  }
}

.form-group label {
  display: block;
  margin-bottom: 0.35rem;
  font-weight: 500;
  font-size: 0.9rem;
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  font: inherit;
  background: var(--surface);
}

.form-group textarea { min-height: 100px; resize: vertical; }

.form-hint {
  font-size: 0.85rem;
  color: var(--muted);
  margin-top: 0.25rem;
}

.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.form-captcha input[type="number"] {
  max-width: 8rem;
}

.form-status {
  padding: 0.85rem 1rem;
  border-radius: 8px;
  margin-top: 1rem;
  display: none;
}
.form-status.success {
  display: block;
  background: #e8f0ea;
  color: var(--primary-dark);
  border: 1px solid #c5d5c9;
}
.form-status.error {
  display: block;
  background: #fce8e8;
  color: #8b2e2e;
  border: 1px solid #e8b4b4;
}

/* Yhteystiedot: kuva vasemmalla, lomake ja osoitteet oikealla. */
.contact-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr 1fr;
}

.contact-portrait {
  margin: 0 0 1.5rem;
  max-width: 320px;
}

.contact-portrait img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center top;
  border-radius: var(--radius);
  background: var(--border);
}

.contact-portrait figcaption {
  margin: 0.55rem 0 0;
  font-size: 0.9rem;
  color: var(--muted);
}

.contact-info address {
  font-style: normal;
  line-height: 1.8;
}

/* Toimipisteet, puhelin ja aukioloajat. */
.location-blocks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

.location-block {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.15rem 1.25rem 1.25rem;
}

.location-block h3 {
  margin: 0 0 0.75rem;
  font-family: var(--font-serif);
  font-size: 1.15rem;
}

.location-block address {
  font-style: normal;
  margin: 0 0 0.75rem;
  line-height: 1.55;
}

.location-phone {
  margin: 0 0 1rem;
  line-height: 1.55;
}

.location-block h4 {
  margin: 0 0 0.45rem;
  font-size: 0.95rem;
  font-weight: 600;
}

.location-block .hours-table {
  width: 100%;
  margin: 0;
}

.location-block .hours-table td {
  border-bottom: none;
  padding: 0.2rem 0;
}

.location-block .hours-table td:first-child {
  width: 40%;
  color: var(--muted);
}

.location-note {
  color: var(--muted);
  font-size: 0.95rem;
  margin: 1rem 0 0;
}

.hours-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}
.hours-table th,
.hours-table td {
  text-align: left;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border);
}
.hours-table th { font-weight: 600; width: 40%; }

/* Hinnoittelu-sivun esimerkkilasku (taulukko). */
.price-example {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem 1.75rem 1.25rem;
  box-shadow: var(--shadow);
  max-width: 44rem;
}

.price-example h2 {
  font-family: var(--font-serif);
  font-size: 1.45rem;
  margin: 0 0 1rem;
}

.price-example table {
  width: 100%;
  border-collapse: collapse;
}

.price-example th,
.price-example td {
  text-align: left;
  padding: 0.7rem 0.5rem 0.7rem 0;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

.price-example thead th {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.price-example td:last-child,
.price-example th:last-child {
  text-align: right;
  white-space: nowrap;
  font-weight: 600;
  padding-right: 0;
}

.price-example .price-example-note td,
.price-example .price-example-note td:last-child {
  text-align: left;
  font-weight: 400;
  white-space: normal;
}

.price-example tfoot th,
.price-example tfoot td {
  border-bottom: 0;
  padding-top: 1rem;
  font-size: 1.05rem;
}

/* --------------------------------------------------------------------------
   10. ALATUNNISTE (FOOTER)
   Yhteystiedot, linkit, liiton logo ja Facebook-kuvake.
   -------------------------------------------------------------------------- */
.site-footer {
  background-color: #2a2622;
  background-image:
    linear-gradient(rgba(30, 26, 22, 0.28), rgba(30, 26, 22, 0.34)),
    url("../../images/tummamarmori.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #f7f1e6;
  padding: 2.5rem 0 1.5rem;
  margin-top: 2rem;
}

.footer-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: 2fr 1fr 1fr;
  align-items: center;
}

.footer-logo {
  display: grid;
  place-items: center;
  text-decoration: none;
}

.footer-logo:hover {
  color: inherit;
  text-decoration: none;
}

.footer-logo img {
  width: min(9.5rem, 100%);
  height: auto;
}

/* Liiton logo ja Facebook-kuvake alatunnisteessa. */
.footer-badges {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  justify-self: stretch;
}

.footer-facebook {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  text-decoration: none;
}

.footer-facebook:hover {
  color: inherit;
  text-decoration: none;
  opacity: 0.88;
}

.footer-facebook img {
  width: 3.4rem;
  height: auto;
}

.site-footer a { color: rgba(247, 241, 230, 0.92); text-decoration-color: rgba(247, 241, 230, 0.35); }
.site-footer a:hover { color: #fff; text-decoration-color: rgba(255, 255, 255, 0.55); }
.site-footer strong { color: #f7f1e6; }

/* --------------------------------------------------------------------------
   11. VALIKKO KUVAN PÄÄLLÄ
   Sivut, joilla on iso yläkuva (body-luokka has-overlay-nav): valikko on
   läpinäkyvä kuvan päällä. Vieritettäessä tai puhelinvalikon avautuessa
   tausta muuttuu tummaksi, jotta linkit erottuvat.
   -------------------------------------------------------------------------- */
.has-overlay-nav .site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background-color: transparent;
  background-image: linear-gradient(
    to bottom,
    rgba(42, 38, 34, 0.62) 0%,
    rgba(42, 38, 34, 0.22) 70%,
    rgba(42, 38, 34, 0) 100%
  );
  border-bottom-color: transparent;
  color: #f7f1e6;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

/* Tumma tausta, kun sivua on vieritetty tai valikko on auki. */
.has-overlay-nav .site-header.is-scrolled,
.has-overlay-nav .site-header:has(.site-nav.open) {
  background-color: rgba(42, 38, 34, 0.94);
  background-image: none;
  border-bottom-color: rgba(247, 241, 230, 0.18);
}

.has-overlay-nav .hero,
.has-overlay-nav .catalog-slider {
  min-height: 100svh;
}

.has-overlay-nav .catalog-slider-content {
  padding-top: 7rem;
}

.has-overlay-nav:not(:has(.hero, .catalog-slider)) .site-header {
  background-color: rgba(42, 38, 34, 0.94);
  background-image: none;
  border-bottom-color: rgba(247, 241, 230, 0.18);
}

.has-overlay-nav:not(:has(.hero, .catalog-slider)) {
  padding-top: var(--header-h, 8.5rem);
}

/* Vaalea marmoritausta tietyillä sivuilla (ei käytössä overlay-valikon kanssa). */
.chrome-light:not(.has-overlay-nav) .site-header {
  background-color: #efe8dc;
  background-image:
    linear-gradient(rgba(255, 252, 247, 0.28), rgba(243, 239, 232, 0.38)),
    var(--chrome-image);
  color: #2a2622;
}

.page-palvelut {
  --chrome-image: url("../../images/marble.jpg");
}

.page-arkut {
  --chrome-image: url("../../images/vaaleamarmorikivi.jpg");
}

.page-arkut .catalog-slider-copy {
  max-width: min(56rem, 100%);
}

.page-arkut .catalog-slider-content h1 {
  font-size: clamp(1.55rem, 4vw, 2.75rem);
  line-height: 1.2;
  letter-spacing: 0.01em;
}

.page-kukkalaitteet .catalog-slider-copy {
  max-width: min(56rem, 100%);
}

.page-kukkalaitteet .catalog-slider-content h1 {
  white-space: nowrap;
}

@media (max-width: 800px) {
  .page-kukkalaitteet .catalog-slider-content h1 {
    white-space: normal;
  }
}

.page-uurnat {
  --chrome-image: url("../../images/marmorikuvio.jpg");
}

.chrome-light:not(.has-overlay-nav) .site-header {
  border-bottom-color: rgba(42, 38, 34, 0.14);
}

.chrome-light:not(.has-overlay-nav) .brand-text strong {
  color: #2a2622;
}

.chrome-light:not(.has-overlay-nav) .brand-text span {
  color: rgba(42, 38, 34, 0.72);
}

.chrome-light:not(.has-overlay-nav) .nav-toggle,
.chrome-light:not(.has-overlay-nav) .header-cart {
  color: #2a2622;
  border-color: rgba(42, 38, 34, 0.22);
  background: rgba(255, 252, 247, 0.62);
}

.chrome-light:not(.has-overlay-nav) .header-cart:hover {
  color: #2a2622;
  background: rgba(255, 252, 247, 0.88);
}

.chrome-light:not(.has-overlay-nav) .site-nav a,
.chrome-light:not(.has-overlay-nav) .nav-details > summary {
  color: rgba(42, 38, 34, 0.88);
}

.chrome-light:not(.has-overlay-nav) .site-nav a:hover,
.chrome-light:not(.has-overlay-nav) .site-nav a[aria-current="page"],
.chrome-light:not(.has-overlay-nav) .nav-details[open] > summary,
.chrome-light:not(.has-overlay-nav) .nav-details > summary:hover,
.chrome-light:not(.has-overlay-nav) .nav-details.is-current > summary {
  color: #2a2622;
}

@media (max-width: 768px) {
  .chrome-light:not(.has-overlay-nav) .site-nav a,
  .chrome-light:not(.has-overlay-nav) .nav-secondary a,
  .chrome-light:not(.has-overlay-nav) .nav-details > summary {
    border-bottom-color: rgba(42, 38, 34, 0.14);
  }

  .chrome-light:not(.has-overlay-nav) .nav-sub a,
  .chrome-light:not(.has-overlay-nav) .nav-sub a:hover,
  .chrome-light:not(.has-overlay-nav) .nav-sub a[aria-current="page"] {
    color: #2a2622;
  }
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem 1.5rem;
  align-content: start;
}

.footer-bottom {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(247, 241, 230, 0.2);
  font-size: 0.85rem;
  opacity: 0.9;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  align-items: center;
  justify-content: space-between;
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  align-items: center;
}

.footer-legal-btn,
.text-button {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(247, 241, 230, 0.35);
  cursor: pointer;
}

.footer-legal-btn:hover,
.text-button:hover {
  color: #fff;
  text-decoration-color: rgba(255, 255, 255, 0.55);
}

.text-button {
  color: var(--primary);
  text-decoration-color: rgba(184, 151, 90, 0.55);
}

.text-button:hover {
  color: var(--ink);
  text-decoration-color: rgba(42, 38, 34, 0.45);
}

/* Rekisteriseloste ja tietosuojatekstit. */
.policy-content {
  max-width: 48rem;
}

.policy-list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: policy;
  display: grid;
  gap: 1.75rem;
}

.policy-list > li {
  counter-increment: policy;
}

.policy-list h2 {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  margin: 0 0 0.5rem;
}

.policy-list h2::before {
  content: counter(policy) ". ";
}

.policy-list p,
.policy-list ul {
  margin: 0 0 0.65rem;
}

.policy-list ul {
  padding-left: 1.25rem;
}

.policy-list li p:last-child,
.policy-list li ul:last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   12. EVÄSTEBANNERI
   Alareunan evästeilmoitus ja asetukset-ikkuna.
   -------------------------------------------------------------------------- */
.cookie-banner {
  position: fixed;
  z-index: 1200;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1rem;
  pointer-events: none;
}

.cookie-banner-inner {
  pointer-events: auto;
  width: min(100%, 1120px);
  margin: 0 auto;
  background: #f7f1e6;
  color: #2a2622;
  border: 1px solid rgba(42, 38, 34, 0.18);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(42, 38, 34, 0.22);
  padding: 1.15rem 1.25rem;
  display: grid;
  gap: 1rem;
}

.cookie-banner-copy h2 {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  margin: 0 0 0.4rem;
}

.cookie-banner-copy p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
}

.cookie-banner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.cookie-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1300;
  background: rgba(42, 38, 34, 0.45);
}

/* Evästeasetusten ikkuna sivun keskellä. */
.cookie-panel {
  position: fixed;
  z-index: 1310;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(calc(100% - 2rem), 28rem);
  max-height: min(90vh, 36rem);
  overflow: auto;
  background: #f7f1e6;
  color: #2a2622;
  border: 1px solid rgba(42, 38, 34, 0.18);
  border-radius: 12px;
  box-shadow: 0 18px 48px rgba(42, 38, 34, 0.28);
  padding: 1.25rem;
}

.cookie-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.85rem;
}

.cookie-panel-header h2 {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  margin: 0;
}

.cookie-panel-close {
  appearance: none;
  border: 0;
  background: transparent;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: inherit;
  padding: 0.1rem 0.35rem;
}

.cookie-panel-body p {
  margin: 0 0 1rem;
  font-size: 0.95rem;
}

.cookie-option {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  align-items: start;
  padding: 0.85rem 0;
  border-top: 1px solid rgba(42, 38, 34, 0.12);
  cursor: pointer;
}

.cookie-option strong {
  display: block;
  margin-bottom: 0.2rem;
}

.cookie-option em {
  display: block;
  font-style: normal;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.45;
}

.cookie-panel-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.6rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(42, 38, 34, 0.12);
}

@media (min-width: 800px) {
  .cookie-banner-inner {
    grid-template-columns: 1fr auto;
    align-items: center;
  }
}

/* --------------------------------------------------------------------------
   13. PUHELINNÄKYMÄ (ALLE 768 px)
   Hampurilaisvalikko näkyviin, otsikot pienemmiksi, ruudukot yhteen sarakkeeseen.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .nav-toggle { display: inline-flex; }

  .hero h1 {
    font-size: clamp(1.45rem, 7vw, 2rem);
  }

  .hero-content {
    padding-bottom: 3.5rem;
  }

  .page-index .hero-content {
    padding-bottom: 7.5rem;
  }

  .catalog-slider {
    min-height: clamp(320px, 58vh, 520px);
  }

  .catalog-slider-slide img {
    max-width: min(92%, 420px);
    max-height: 88%;
  }

  .catalog-slider--fullbleed .catalog-slider-slide img {
    max-width: none;
    max-height: none;
    width: 100%;
    height: 100%;
  }

  .catalog-slider-content h1 {
    font-size: clamp(1.85rem, 10vw, 2.75rem);
  }

  .site-nav {
    display: none;
    padding-bottom: 1rem;
  }
  .site-nav.open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .site-nav a {
    display: block;
    padding: 0.65rem 0;
    border-bottom: 1px solid rgba(247, 241, 230, 0.18);
  }

  .nav-secondary {
    display: flex;
    margin-left: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
  }

  .nav-secondary a {
    display: block;
    padding: 0.65rem 0;
    border-bottom: 1px solid rgba(247, 241, 230, 0.18);
  }

  .nav-details > summary {
    display: block;
    padding: 0.65rem 0;
    border-bottom: 1px solid rgba(247, 241, 230, 0.18);
  }

  .nav-sub {
    position: static;
    min-width: 0;
    margin: 0 0 0.35rem;
    padding: 0 0 0 0.85rem;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .nav-sub a {
    padding: 0.55rem 0;
    color: rgba(247, 241, 230, 0.92);
  }

  .nav-sub a:hover,
  .nav-sub a[aria-current="page"] {
    color: #fff;
    background: transparent;
  }

  .contact-grid { grid-template-columns: 1fr; }
  .location-blocks { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-badges { justify-self: center; }
}

/* --------------------------------------------------------------------------
   14. TAKAISIN YLÖS -PAINIKE
   Kiinnitetty sivun oikeaan alareunaan, näkyy kun sivua on vieritetty.
   -------------------------------------------------------------------------- */
.back-to-top {
  position: fixed;
  right: 1.15rem;
  bottom: 1.25rem;
  z-index: 90;
  width: 2.85rem;
  height: 2.85rem;
  padding: 0;
  border: 1px solid rgba(247, 241, 230, 0.35);
  border-radius: 50%;
  background: #2a2622;
  color: #f7f1e6;
  box-shadow: 0 6px 20px rgba(42, 38, 34, 0.28);
  cursor: pointer;
  display: grid;
  place-items: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 0.2s, visibility 0.2s, transform 0.2s, background 0.2s;
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
}

.back-to-top:hover,
.back-to-top:focus-visible {
  background: var(--primary);
  color: #1f1c18;
  outline: none;
}

.back-to-top svg {
  width: 1.35rem;
  height: 1.35rem;
  fill: currentColor;
}

@media (max-width: 768px) {
  .back-to-top {
    right: 0.85rem;
    bottom: 0.85rem;
    width: 2.6rem;
    height: 2.6rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .back-to-top {
    transition: none;
    transform: none;
  }
}