/* Nutiost. Suund: nagu telefoniäpp. Telefonis alumine menüü, suured
   ümarad plokid, Bricolage pealkirjad. Äratuntav osa on kollane kontrollsilt
   nagu remonditöökoja kleebis; teine värv on piparmündiroheline "korras". */

@font-face {
  font-family: "Bricolage";
  src: url("/fondid/bricolage-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212, U+2215;
}

@font-face {
  font-family: "Bricolage";
  src: url("/fondid/bricolage-latin-ext.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
  unicode-range:
    U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --taust: #f1f3f6;
  --pind: #ffffff;
  --tint: #0d1117;
  --tint-2: #59626f;
  --tint-3: #8b939f;
  --joon: #e1e5eb;
  --tume: #0d1117;
  --tume-2: #1a2029;
  --kollane: #ffd93d;
  --kollane-serv: #e9bd0b;
  --kollane-tint: #3a2e05;
  --munt: #2fd39a;
  --munt-tume: #0b7a55;
  --munt-hele: #d9f7ec;
  --hoiatus: #c2410c;
  --hoiatus-hele: #fde9de;
  --r-suur: 28px;
  --r: 20px;
  --r-vaike: 14px;
  --vari: 0 1px 2px rgb(13 17 23 / 5%), 0 10px 30px rgb(13 17 23 / 8%);
  --vari-suur: 0 4px 10px rgb(13 17 23 / 8%), 0 24px 60px rgb(13 17 23 / 16%);
  --pealkiri: "Bricolage", system-ui, sans-serif;
  --menuu-korgus: 72px;
  color-scheme: light;
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--taust);
  color: var(--tint);
  font-family:
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    sans-serif;
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--munt-tume);
}

h1,
h2,
h3,
.pealkirjakiri {
  font-family: var(--pealkiri);
  font-optical-sizing: auto;
  margin: 0 0 0.45em;
  line-height: 1.02;
  letter-spacing: -0.03em;
}

h1 {
  font-size: clamp(2.4rem, 8.5vw, 4.8rem);
  font-weight: 800;
}

h2 {
  font-size: clamp(1.6rem, 5vw, 2.5rem);
  font-weight: 750;
}

h3 {
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.2;
}

p {
  margin: 0 0 1em;
}

/* Peidetud element jääb peitu ka siis, kui tema klass annab talle display väärtuse. */
[hidden] {
  display: none !important;
}

.nahtamatu {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

:focus-visible {
  outline: 3px solid var(--munt-tume);
  outline-offset: 2px;
}

/* Raam */

.naidis-riba {
  background: var(--tint);
  color: #cfd5dd;
  font-size: 0.78rem;
  text-align: center;
  padding: 5px 16px;
}

.naidis-riba strong {
  color: var(--kollane);
}

.sisu {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}

.kitsas {
  max-width: 680px;
}

.pais {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgb(241 243 246 / 82%);
  backdrop-filter: saturate(1.6) blur(14px);
}

.pais .sisu {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 64px;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--tint);
  text-decoration: none;
  font-family: var(--pealkiri);
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: -0.04em;
  margin-right: auto;
}

.logo-mark {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--kollane);
  color: var(--kollane-tint);
  display: grid;
  place-items: center;
  font-size: 1.05rem;
  transform: rotate(-8deg);
  box-shadow: inset 0 -2px 0 rgb(0 0 0 / 12%);
}

.pais-otsing {
  display: none;
  flex: 1;
  max-width: 420px;
  margin: 0 8px;
}

.pais-otsing input {
  min-height: 44px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  background: var(--pind);
  padding: 0 18px;
  box-shadow: var(--vari);
}

.pais nav {
  display: flex;
  align-items: center;
  gap: 4px;
}

.pais nav a:not(.nupp) {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--tint);
  text-decoration: none;
  font-weight: 650;
  padding: 10px 12px;
  border-radius: 999px;
  white-space: nowrap;
}

.pais nav a:not(.nupp):hover,
.pais nav a[aria-current="page"] {
  background: var(--pind);
}

.pais nav a.ikoon-nupp {
  width: 44px;
  height: 44px;
  justify-content: center;
  padding: 0;
}

.pais nav a.ikoon-nupp svg,
.alamenuu svg {
  width: 24px;
  height: 24px;
}

.loendur {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--tint);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
}

.loendur:empty {
  display: none;
}

/* Telefoni alumine menüü */

.alamenuu {
  position: fixed;
  left: 10px;
  right: 10px;
  bottom: calc(10px + env(safe-area-inset-bottom));
  z-index: 40;
  height: 64px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
  background: rgb(13 17 23 / 92%);
  backdrop-filter: blur(16px);
  border-radius: 22px;
  box-shadow: var(--vari-suur);
}

.alamenuu a {
  display: grid;
  justify-items: center;
  gap: 2px;
  color: #aab2bd;
  text-decoration: none;
  font-size: 0.68rem;
  font-weight: 650;
}

.alamenuu a[aria-current="page"] {
  color: #fff;
}

.alamenuu a[aria-current="page"] svg {
  color: var(--kollane);
}

.alamenuu .muu-nupp {
  width: 54px;
  height: 54px;
  margin-top: -26px;
  border-radius: 18px;
  background: var(--kollane);
  color: var(--kollane-tint);
  display: grid;
  place-items: center;
  box-shadow: 0 8px 20px rgb(255 217 61 / 40%);
  transform: rotate(-6deg);
}

.alamenuu .muu-nupp svg {
  width: 28px;
  height: 28px;
  transform: rotate(6deg);
}

.alamenuu .muu-silt {
  color: #fff;
}

body {
  padding-bottom: calc(var(--menuu-korgus) + 24px);
}

body:has(.ostuniba) .alamenuu {
  display: none;
}

/* Jalus */

.jalus {
  margin-top: 80px;
  background: var(--tume);
  color: #aeb6c1;
  font-size: 0.93rem;
  border-radius: var(--r-suur) var(--r-suur) 0 0;
}

.jalus .sisu {
  display: grid;
  gap: 28px;
  padding-top: 44px;
  padding-bottom: 32px;
}

.jalus h3 {
  color: #fff;
  font-size: 1rem;
  margin-bottom: 10px;
}

.jalus ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.jalus a {
  color: #e8ebef;
  text-decoration: none;
}

.jalus a:hover {
  text-decoration: underline;
}

.jalus .logo {
  color: #fff;
  margin-bottom: 10px;
}

.jalus-alus {
  border-top: 1px solid #252c36;
  padding: 16px 0 28px;
  font-size: 0.82rem;
  color: #858e9a;
}

/* Nupud */

.nupp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 12px 24px;
  border-radius: 999px;
  border: 2px solid var(--tint);
  background: var(--tint);
  color: #fff;
  font: inherit;
  font-family: var(--pealkiri);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition:
    transform 140ms ease,
    background-color 140ms ease,
    box-shadow 140ms ease;
}

.nupp:hover {
  background: #252c36;
}

.nupp:active {
  transform: scale(0.96);
}

.nupp[disabled] {
  opacity: 0.55;
  cursor: wait;
}

.nupp-roheline {
  background: var(--munt);
  border-color: var(--munt);
  color: #052e20;
}

.nupp-roheline:hover {
  background: #25c08b;
}

.nupp-kollane {
  background: var(--kollane);
  border-color: var(--kollane);
  color: var(--kollane-tint);
}

.nupp-kollane:hover {
  background: #ffd01a;
}

.nupp-hele {
  background: transparent;
  color: var(--tint);
}

.nupp-hele:hover {
  background: rgb(13 17 23 / 6%);
}

.nupp-valge {
  background: #fff;
  border-color: #fff;
  color: var(--tint);
}

.nupp-valge:hover {
  background: #eef0f3;
}

.nupp-hoiatus {
  background: transparent;
  color: var(--hoiatus);
  border-color: var(--hoiatus);
}

.nupp-hoiatus:hover {
  background: var(--hoiatus-hele);
}

.nupp-lai {
  width: 100%;
}

.nupp-vaike {
  min-height: 42px;
  padding: 8px 18px;
  font-size: 0.95rem;
}

/* Kontrollsilt */

.silt {
  position: relative;
  background: var(--kollane);
  color: var(--kollane-tint);
  border-radius: 12px;
  padding: 18px 20px 18px 34px;
  /* Augud sildi vasakus servas */
  background-image: radial-gradient(
    circle at 0 50%,
    var(--taust) 7px,
    transparent 7.5px
  );
  background-size: 14px 22px;
  background-repeat: repeat-y;
  background-position: -1px center;
  box-shadow: inset 0 -3px 0 rgb(0 0 0 / 8%);
}

.silt h3 {
  margin: 0 0 2px;
  font-size: 1.15rem;
}

.silt .kuupaev {
  font-size: 0.85rem;
  opacity: 0.75;
  margin: 0 0 12px;
}

.silt ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 7px;
}

.silt li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 9px;
  align-items: start;
  font-weight: 650;
  font-size: 0.95rem;
}

.silt li::before {
  content: "✓";
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--kollane-tint);
  color: var(--kollane);
  display: grid;
  place-items: center;
  font-size: 0.75rem;
}

.silt li.ostjale::before {
  content: "?";
  background: transparent;
  color: var(--kollane-tint);
  border: 1.5px solid var(--kollane-tint);
}

.silt .imei {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  letter-spacing: 0.04em;
}

.silt-suur {
  transform: rotate(-3deg);
  box-shadow: 0 18px 40px rgb(0 0 0 / 25%);
}

.silt-tume {
  background-image: radial-gradient(
    circle at 0 50%,
    var(--tume) 7px,
    transparent 7.5px
  );
}

.silt-tukk {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.76rem;
  font-weight: 750;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--kollane);
  color: var(--kollane-tint);
}

/* Avaleht: kaks suurt valikut */

.esi {
  padding-top: 12px;
}

.esi h1 {
  max-width: 11em;
  margin-bottom: 18px;
}

.esi .juhatus {
  font-size: 1.12rem;
  color: var(--tint-2);
  max-width: 34em;
  margin-bottom: 24px;
}

.kahene {
  display: grid;
  gap: 14px;
}

.valikkaart {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-suur);
  padding: 26px 22px 24px;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  isolation: isolate;
}

.valikkaart h2 {
  font-size: clamp(2rem, 7vw, 3.1rem);
  margin-bottom: 8px;
}

.valikkaart p {
  max-width: 22em;
}

.valikkaart .silt-tukk {
  align-self: flex-start;
  margin-bottom: 14px;
}

.kast-muu {
  background: var(--kollane);
  color: var(--kollane-tint);
}

.kast-muu p {
  color: #5a4a0d;
}

.kast-muu .nupp {
  margin-top: auto;
  align-self: flex-start;
}

.kast-muu .silt-tukk {
  background: var(--kollane-tint);
  color: var(--kollane);
}

.kast-muu p {
  max-width: 62%;
}

.kast-muu .kast-pilt {
  position: absolute;
  right: -14px;
  bottom: -70px;
  width: 36%;
  max-width: 190px;
  transform: rotate(14deg);
  z-index: -1;
  filter: drop-shadow(0 18px 24px rgb(58 46 5 / 30%));
}

.kast-osta {
  background: var(--tume);
  color: #fff;
}

.kast-osta::before {
  content: "";
  position: absolute;
  inset: auto -30% -60% auto;
  width: 120%;
  aspect-ratio: 1;
  background: radial-gradient(
    circle,
    rgb(47 211 154 / 30%),
    rgb(47 211 154 / 0%) 60%
  );
  z-index: -1;
}

.kast-osta p {
  color: #b9c1cc;
}

.kast-osta .silt-tukk {
  background: var(--munt);
  color: #052e20;
}

.otsing {
  display: flex;
  gap: 6px;
  margin-top: auto;
  background: var(--pind);
  border-radius: 999px;
  padding: 6px;
}

.otsing input {
  flex: 1;
  min-width: 0;
  border: 0;
  min-height: 48px;
  padding: 0 16px;
  font-size: 1.02rem;
  border-radius: 999px;
}

.otsing input:focus-visible {
  outline: 2px solid var(--munt-tume);
  outline-offset: 0;
}

.kiirvalikud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 0;
}

.kiirvalikud a {
  font-size: 0.88rem;
  font-weight: 650;
  color: #fff;
  text-decoration: none;
  background: rgb(255 255 255 / 9%);
  border-radius: 999px;
  padding: 6px 13px;
}

.kiirvalikud a:hover {
  background: rgb(255 255 255 / 16%);
}

/* Jooksev riba päris kuulutustest */

.jooksev {
  margin-top: 28px;
  overflow: hidden;
  mask-image: linear-gradient(
    90deg,
    transparent,
    #000 8%,
    #000 92%,
    transparent
  );
}

.jooksev-rada {
  display: flex;
  gap: 10px;
  width: max-content;
}

@media (prefers-reduced-motion: no-preference) {
  .jooksev-rada {
    animation: jookse 45s linear infinite;
  }

  .jooksev:hover .jooksev-rada {
    animation-play-state: paused;
  }
}

@keyframes jookse {
  to {
    transform: translateX(-50%);
  }
}

.jooksev a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--pind);
  border-radius: 999px;
  padding: 6px 16px 6px 6px;
  color: var(--tint);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 650;
  white-space: nowrap;
  box-shadow: var(--vari);
}

.jooksev img {
  width: 34px;
  height: 34px;
  object-fit: contain;
  border-radius: 50%;
  background: var(--taust);
  padding: 3px;
}

.jooksev .hind {
  font-family: var(--pealkiri);
  font-weight: 800;
}

.jooksev .ok {
  color: var(--munt-tume);
}

/* Lõigud */

.loik {
  padding-top: 56px;
}

.loik-pais {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.loik-pais h2 {
  margin: 0;
}

.loik-pais a {
  font-weight: 700;
  white-space: nowrap;
  color: var(--tint);
}

/* Väärtuse kalkulaator */

.vaartus {
  background: var(--pind);
  border-radius: var(--r-suur);
  padding: 26px 20px;
  display: grid;
  gap: 20px;
  box-shadow: var(--vari);
}

.vaartus h2 {
  margin: 0;
}

.vaartus-vorm {
  display: grid;
  gap: 10px;
}

.vaartus-tulemus {
  border-radius: var(--r);
  background: var(--taust);
  padding: 22px 20px;
  min-height: 150px;
  display: grid;
  align-content: center;
  gap: 6px;
}

.vaartus-tulemus .summa {
  font-family: var(--pealkiri);
  font-size: clamp(2.4rem, 9vw, 3.6rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
}

.vaartus-tulemus .vahemik {
  color: var(--tint-2);
  font-weight: 600;
}

.vaartus-tulemus .nupp {
  margin-top: 10px;
  justify-self: start;
}

/* Plokid: miks meie juures kindlam */

.bento {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.plokk {
  border-radius: var(--r-suur);
  padding: 22px 20px;
  min-height: 170px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
  position: relative;
  overflow: hidden;
}

.plokk h3 {
  font-size: 1.3rem;
  margin: 0;
}

.plokk p {
  margin: 0;
  font-size: 0.93rem;
}

.plokk .suur-number {
  font-family: var(--pealkiri);
  font-weight: 800;
  font-size: clamp(2.6rem, 10vw, 4.2rem);
  letter-spacing: -0.05em;
  line-height: 0.9;
}

.plokk-lai {
  grid-column: 1 / -1;
}

.plokk-tume {
  background: var(--tume);
  color: #fff;
}

.plokk-tume p {
  color: #b9c1cc;
}

.plokk-kollane {
  background: var(--kollane);
  color: var(--kollane-tint);
}

.plokk-munt {
  background: var(--munt);
  color: #052e20;
}

.plokk-valge {
  background: var(--pind);
  box-shadow: var(--vari);
}

.plokk-valge p {
  color: var(--tint-2);
}

.plokk .silt {
  margin-top: 6px;
  max-width: 300px;
}

/* Karussell ja ruudustik */

.karussell {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(200px, 46%);
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 4px 16px 12px;
  margin: 0 -16px;
  scrollbar-width: none;
}

.karussell::-webkit-scrollbar {
  display: none;
}

.karussell > * {
  scroll-snap-align: start;
}

.ruudustik {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.kaart {
  background: var(--pind);
  border-radius: var(--r);
  padding: 22px 20px;
  box-shadow: var(--vari);
}

.kuulutus-kaart {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--pind);
  border-radius: var(--r);
  overflow: hidden;
  color: var(--tint);
  box-shadow: var(--vari);
}

@media (prefers-reduced-motion: no-preference) {
  .kuulutus-kaart {
    transition:
      transform 180ms ease,
      box-shadow 180ms ease;
  }

  .kuulutus-kaart:hover {
    transform: translateY(-4px);
    box-shadow: var(--vari-suur);
  }
}

.kaardi-pilt {
  position: relative;
  aspect-ratio: 4 / 5;
  margin: 6px 6px 0;
  border-radius: calc(var(--r) - 6px);
  overflow: hidden;
  background: radial-gradient(
    circle at 50% 30%,
    #fff 0%,
    var(--toon, #e3e7ec) 130%
  );
}

.kaardi-pilt > img,
.kaardi-pilt > .telefon {
  position: absolute;
  inset: 16px;
  width: calc(100% - 32px);
  height: calc(100% - 32px);
  object-fit: contain;
}

.kaardi-pilt.foto > img {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.kaardi-pilt .silt-tukk {
  position: absolute;
  left: 8px;
  bottom: 8px;
}

.lemmik {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 0;
  background: rgb(255 255 255 / 92%);
  box-shadow: var(--vari);
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: 1.15rem;
  color: var(--tint-2);
  transition: transform 140ms ease;
}

.lemmik[aria-pressed="true"] {
  color: #e0245e;
}

.lemmik:active {
  transform: scale(0.85);
}

.kaardi-tekst {
  padding: 12px 14px 16px;
  display: grid;
  gap: 2px;
}

.kaardi-tekst h3 {
  margin: 0;
  font-size: 1.02rem;
}

.kaardi-link {
  color: inherit;
  text-decoration: none;
}

/* Kogu kaart on klikitav, kuid lemmiku nupp jääb eraldi nupuks. */
.kaardi-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.kaardi-link:focus-visible {
  outline: none;
}

.kuulutus-kaart:has(.kaardi-link:focus-visible) {
  outline: 3px solid var(--munt-tume);
  outline-offset: 2px;
}

.kaardi-tekst .hind {
  font-family: var(--pealkiri);
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  margin-top: 4px;
}

.kaardi-tekst .omadused {
  font-size: 0.85rem;
  color: var(--tint-2);
  margin: 0;
}

.kaardi-tekst .aku {
  font-size: 0.8rem;
  color: var(--munt-tume);
  font-weight: 700;
}

.tuhi {
  grid-column: 1 / -1;
  background: var(--pind);
  border-radius: var(--r-suur);
  padding: 40px 20px;
  text-align: center;
  box-shadow: var(--vari);
}

.tuhi .ikoon {
  font-size: 2.4rem;
  margin-bottom: 8px;
}

.skelett {
  border-radius: var(--r);
  background: linear-gradient(90deg, #e4e8ed 25%, #f3f5f8 50%, #e4e8ed 75%);
  background-size: 200% 100%;
  min-height: 320px;
}

@media (prefers-reduced-motion: no-preference) {
  .skelett {
    animation: helk 1.2s linear infinite;
  }
}

@keyframes helk {
  to {
    background-position: -200% 0;
  }
}

/* Sammud */

.sammud {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
  counter-reset: samm;
}

.sammud li {
  counter-increment: samm;
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 14px;
  align-items: center;
  background: var(--pind);
  border-radius: var(--r);
  padding: 16px;
  box-shadow: var(--vari);
}

.sammud li::before {
  content: counter(samm);
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: var(--tume);
  color: var(--kollane);
  font-family: var(--pealkiri);
  font-weight: 800;
  font-size: 1.4rem;
  display: grid;
  place-items: center;
}

.sammud h3 {
  margin: 0 0 2px;
}

.sammud p {
  margin: 0;
  font-size: 0.93rem;
  color: var(--tint-2);
}

.kkk details {
  background: var(--pind);
  border-radius: var(--r-vaike);
  padding: 4px 20px;
  margin-bottom: 8px;
  box-shadow: var(--vari);
}

.kkk summary {
  font-weight: 700;
  cursor: pointer;
  padding: 14px 0;
}

.kkk details p {
  margin: 0 0 16px;
  color: var(--tint-2);
}

/* Otsing */

.otsinguleht {
  display: grid;
  gap: 18px;
  padding-top: 12px;
}

.filtrid {
  background: var(--pind);
  border-radius: var(--r);
  padding: 4px 20px;
  box-shadow: var(--vari);
}

.filtrid summary {
  font-weight: 750;
  padding: 14px 0;
  cursor: pointer;
}

.filtrid form {
  display: grid;
  gap: 14px;
  padding-bottom: 20px;
}

.tulemuse-pais {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}

.tulemuse-pais h1 {
  font-size: clamp(1.6rem, 5vw, 2.2rem);
  margin: 0;
}

.tulemuse-pais select {
  width: auto;
  min-height: 42px;
  border-radius: 999px;
}

.aktiivsed {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}

.aktiivsed a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.88rem;
  font-weight: 650;
  color: #fff;
  background: var(--tint);
  border-radius: 999px;
  padding: 6px 14px;
  text-decoration: none;
}

.aktiivsed a::after {
  content: "×";
  color: #aab2bd;
}

.lehed {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}

/* Kuulutuse leht */

.kuulutus {
  display: grid;
  gap: 16px;
  padding-top: 12px;
}

.galerii {
  position: relative;
  background: radial-gradient(
    circle at 50% 30%,
    #fff 0%,
    var(--toon, #e3e7ec) 130%
  );
  border-radius: var(--r-suur);
  overflow: hidden;
}

.galerii-rada {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.galerii-rada::-webkit-scrollbar {
  display: none;
}

.galerii figure {
  flex: 0 0 100%;
  margin: 0;
  scroll-snap-align: center;
  aspect-ratio: 1 / 1;
  position: relative;
}

.galerii figure > img,
.galerii figure > .telefon {
  position: absolute;
  inset: 24px;
  width: calc(100% - 48px);
  height: calc(100% - 48px);
  object-fit: contain;
}

.galerii figure.foto {
  background: var(--tume-2);
}

.galerii figure.foto > img {
  inset: 0;
  width: 100%;
  height: 100%;
}

.galerii figcaption {
  position: absolute;
  left: 14px;
  bottom: 14px;
  font-size: 0.78rem;
  background: rgb(255 255 255 / 92%);
  color: var(--tint-2);
  border-radius: 999px;
  padding: 4px 12px;
}

.galerii-punktid {
  position: absolute;
  right: 16px;
  bottom: 18px;
  display: flex;
  gap: 6px;
}

.galerii-punktid button {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: 0;
  padding: 0;
  background: rgb(13 17 23 / 25%);
  cursor: pointer;
  transition: width 160ms ease;
}

.galerii-punktid button[aria-current="true"] {
  width: 22px;
  background: var(--tint);
}

.galerii .lemmik {
  top: 14px;
  right: 14px;
}

.ostukast {
  display: grid;
  gap: 14px;
}

.ostukast h1 {
  font-size: clamp(1.8rem, 6vw, 2.6rem);
  margin: 0;
}

.hind-suur {
  font-family: var(--pealkiri);
  font-size: 3rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  margin: 0;
}

.hea-hind {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--munt-hele);
  color: var(--munt-tume);
  font-weight: 750;
  font-size: 0.9rem;
  border-radius: 999px;
  padding: 5px 13px;
  justify-self: start;
}

.omadused-tabel {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px 18px;
  margin: 0;
}

.omadused-tabel dt {
  color: var(--tint-2);
}

.omadused-tabel dd {
  margin: 0;
  font-weight: 650;
}

.summad {
  display: grid;
  gap: 8px;
  margin: 0;
}

.summad div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.summad dt {
  color: var(--tint-2);
}

.summad dd {
  margin: 0;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.summad .kokku {
  border-top: 1px solid var(--joon);
  padding-top: 10px;
  font-size: 1.12rem;
}

.vihje {
  font-size: 0.92rem;
  color: var(--tint-2);
  margin: 0;
}

.kirjeldus {
  white-space: pre-line;
  margin: 0;
}

.lisainfo-pealkiri {
  margin-top: 22px;
}

.nupurida {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.nupurida .nupp {
  flex: 1;
}

.ostuniba {
  position: fixed;
  left: 10px;
  right: 10px;
  bottom: calc(10px + env(safe-area-inset-bottom));
  z-index: 35;
  background: rgb(13 17 23 / 94%);
  backdrop-filter: blur(16px);
  color: #fff;
  border-radius: 22px;
  padding: 10px 10px 10px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: var(--vari-suur);
}

.ostuniba .hind {
  font-family: var(--pealkiri);
  font-weight: 800;
  font-size: 1.35rem;
  margin-right: auto;
  line-height: 1.1;
}

.ostuniba .hind small {
  display: block;
  font-family: system-ui, sans-serif;
  font-weight: 500;
  font-size: 0.75rem;
  color: #aab2bd;
}

/* Vormid */

.vorm {
  display: grid;
  gap: 22px;
}

.vali {
  display: grid;
  gap: 6px;
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.vali > label,
.vali > legend {
  font-weight: 750;
  padding: 0;
}

.vali .abi {
  font-size: 0.88rem;
  color: var(--tint-2);
}

input,
select,
textarea {
  width: 100%;
  min-height: 52px;
  padding: 10px 16px;
  border: 1.5px solid var(--joon);
  border-radius: var(--r-vaike);
  background: #fff;
  color: var(--tint);
  font: inherit;
}

input:hover,
select:hover,
textarea:hover {
  border-color: #c7cdd6;
}

textarea {
  min-height: 110px;
  resize: vertical;
}

[aria-invalid="true"] {
  border-color: var(--hoiatus);
}

.viga {
  color: var(--hoiatus);
  font-size: 0.9rem;
  font-weight: 650;
}

.viga:empty {
  display: none;
}

.kaks {
  display: grid;
  gap: 16px;
}

.vormi-osa {
  background: var(--pind);
  border-radius: var(--r-suur);
  padding: 24px 20px;
  display: grid;
  gap: 20px;
  box-shadow: var(--vari);
}

.vormi-osa[hidden] {
  display: none;
}

.vormi-osa > h2 {
  font-size: clamp(1.5rem, 5vw, 2rem);
  margin: 0;
}

.samm-riba {
  display: grid;
  gap: 8px;
  margin: 18px 0 16px;
}

.samm-riba-tekst {
  display: flex;
  justify-content: space-between;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--tint-2);
}

.samm-riba-joon {
  height: 8px;
  border-radius: 999px;
  background: var(--joon);
  overflow: hidden;
}

.samm-riba-joon span {
  display: block;
  height: 100%;
  width: var(--edenemine, 20%);
  background: var(--tint);
  border-radius: 999px;
  transition: width 260ms ease;
}

.sammu-nupud {
  display: flex;
  gap: 8px;
}

.sammu-nupud .nupp:last-child {
  flex: 1;
}

.valikud {
  display: grid;
  gap: 8px;
}

.valik {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  align-items: start;
  background: #fff;
  border: 1.5px solid var(--joon);
  border-radius: var(--r-vaike);
  padding: 14px 16px;
  cursor: pointer;
}

.valik input,
.lyliti input {
  width: 20px;
  min-height: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: var(--tint);
}

.valik:has(input:checked) {
  border-color: var(--tint);
  background: #f7f8fa;
  box-shadow: inset 0 0 0 1px var(--tint);
}

.valik small {
  display: block;
  color: var(--tint-2);
}

.varvid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.varv {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1.5px solid var(--joon);
  border-radius: 999px;
  padding: 6px 14px 6px 6px;
  background: #fff;
  cursor: pointer;
  font-size: 0.95rem;
}

.varv input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.varv:has(input:checked) {
  border-color: var(--tint);
  box-shadow: inset 0 0 0 1px var(--tint);
}

.varv:has(input:focus-visible) {
  outline: 3px solid var(--munt-tume);
  outline-offset: 2px;
}

.varv-taps {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid rgb(0 0 0 / 15%);
}

.lyliti {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  align-items: start;
  cursor: pointer;
}

.fotod {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.foto-ruut {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--r-vaike);
  overflow: hidden;
  background: var(--taust);
}

.foto-ruut img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.foto-ruut button {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 0;
  background: rgb(13 17 23 / 75%);
  color: #fff;
  cursor: pointer;
}

.foto-lisa {
  position: relative;
  aspect-ratio: 1 / 1;
  border: 2px dashed #c3cad3;
  border-radius: var(--r-vaike);
  display: grid;
  place-items: center;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--tint-2);
  cursor: pointer;
  background: var(--taust);
  padding: 6px;
}

.foto-lisa:hover {
  border-color: var(--tint);
  color: var(--tint);
}

.foto-lisa input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.foto-lisa:has(input:focus-visible) {
  outline: 3px solid var(--munt-tume);
  outline-offset: 2px;
}

.foto-lisa .pluss {
  display: block;
  font-size: 1.8rem;
  line-height: 1;
}

.teade {
  border-radius: var(--r-vaike);
  padding: 14px 18px;
  font-weight: 650;
  margin: 0;
}

.teade-halb {
  background: var(--hoiatus-hele);
  color: var(--hoiatus);
}

.teade-hea {
  background: var(--munt-hele);
  color: var(--munt-tume);
}

.teade-info {
  background: var(--pind);
  border-left: 5px solid var(--kollane);
  font-weight: 500;
  box-shadow: var(--vari);
}

.teade[hidden] {
  display: none;
}

.naidisinfo {
  font-size: 0.9rem;
  background: var(--taust);
  border: 1.5px dashed var(--tint-3);
  border-radius: var(--r-vaike);
  padding: 14px 16px;
}

.lehe-pealkiri {
  margin-top: 20px;
}

.vorm-ees {
  margin-top: 12px;
}

/* Tehing, müüja leht ja "Minu" */

.tehing {
  display: grid;
  gap: 16px;
}

.olek {
  font-family: var(--pealkiri);
  font-weight: 750;
  font-size: 1.35rem;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
}

.ajajoon {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ajajoon li {
  position: relative;
  padding: 0 0 18px 36px;
  color: var(--tint-2);
}

.ajajoon li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--joon);
  background: #fff;
}

.ajajoon li::after {
  content: "";
  position: absolute;
  left: 13px;
  top: 25px;
  bottom: 0;
  width: 2px;
  background: var(--joon);
}

.ajajoon li:last-child::after {
  display: none;
}

.ajajoon li.tehtud {
  color: var(--tint);
}

.ajajoon li.tehtud::before {
  background: var(--munt);
  border-color: var(--munt);
}

.ajajoon li.tehtud::after {
  background: var(--munt);
}

.ajajoon li.praegu {
  color: var(--tint);
  font-weight: 750;
}

.ajajoon li.praegu::before {
  border-color: var(--munt-tume);
  box-shadow: 0 0 0 6px var(--munt-hele);
}

.ajajoon small {
  display: block;
  font-weight: 400;
  color: var(--tint-2);
}

.jaga {
  display: flex;
  gap: 8px;
}

.jaga input {
  flex: 1;
  min-width: 0;
  font-size: 0.92rem;
}

.kontrollnimekiri {
  margin: 8px 0 0;
  padding-left: 1.2em;
}

.kontrollnimekiri li {
  margin-bottom: 6px;
}

.tegevused {
  display: grid;
  gap: 10px;
}

.lyhike {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  color: var(--tint);
  text-decoration: none;
}

.lyhike .kaardi-pilt {
  margin: 0;
  border-radius: var(--r-vaike);
}

.lyhike h2,
.lyhike h3 {
  font-size: 1.15rem;
  margin: 0 0 4px;
}

.lyhike p {
  margin: 0;
  color: var(--tint-2);
  font-size: 0.92rem;
}

.lyhike .olekumark {
  font-size: 0.78rem;
  font-weight: 750;
  border-radius: 999px;
  padding: 4px 10px;
  background: var(--taust);
  white-space: nowrap;
}

.minu-loend {
  display: grid;
  gap: 10px;
}

.hinnavorm {
  display: flex;
  gap: 8px;
}

.hinnavorm input {
  flex: 1;
  min-width: 0;
}

.allikad li {
  margin-bottom: 10px;
}

.viga-leht {
  text-align: center;
  padding-top: 48px;
}

.viga-leht .suur {
  font-family: var(--pealkiri);
  font-size: 7rem;
  font-weight: 800;
  letter-spacing: -0.06em;
  line-height: 1;
  margin: 0;
}

.telefon {
  display: block;
}

.telefon svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Laiem ekraan */

@media (min-width: 760px) {
  body {
    padding-bottom: 0;
  }

  .alamenuu {
    display: none;
  }

  .pais-otsing {
    display: block;
  }

  .esi {
    padding-top: 32px;
  }

  .kahene {
    grid-template-columns: 1fr 1fr;
    gap: 18px;
  }

  .valikkaart {
    min-height: 380px;
    padding: 36px 34px 32px;
  }

  .kast-muu .kast-pilt {
    max-width: 230px;
  }

  .vaartus {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    padding: 40px;
  }

  .bento {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
  }

  .plokk {
    min-height: 220px;
    padding: 28px;
  }

  .plokk-lai {
    grid-column: span 2;
  }

  .plokk-korge {
    grid-row: span 2;
  }

  .karussell {
    grid-auto-columns: minmax(220px, 23%);
  }

  .ruudustik {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
  }

  .sammud {
    grid-template-columns: repeat(4, 1fr);
  }

  .sammud li {
    grid-template-columns: 1fr;
    align-items: start;
    padding: 22px;
  }

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

  .fotod {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .vormi-osa {
    padding: 32px;
  }

  .otsinguleht {
    grid-template-columns: 290px 1fr;
    align-items: start;
    padding-top: 24px;
  }

  .filtrid {
    position: sticky;
    top: 84px;
  }

  .kuulutus {
    grid-template-columns: 1.2fr 1fr;
    grid-template-areas:
      "pilt ost"
      "pilt silt"
      "toendid andmed"
      "toendid muuja";
    align-items: start;
    gap: 22px;
    padding-top: 24px;
  }

  .kuulutus .galerii {
    grid-area: pilt;
  }

  .kuulutus .ostukast {
    grid-area: ost;
  }

  .kuulutus-silt {
    grid-area: silt;
  }

  .kuulutus-andmed {
    grid-area: andmed;
  }

  .kuulutus-muuja {
    grid-area: muuja;
  }

  .kuulutus .toendid {
    grid-area: toendid;
  }

  .ostuniba {
    display: none;
  }

  .jalus .sisu {
    grid-template-columns: 1.6fr repeat(3, 1fr);
  }
}

@media (min-width: 1040px) {
  .ruudustik-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 759px) {
  .pais nav a.peida-kitsal {
    display: none;
  }
}

.teata {
  margin-top: 16px;
  border-top: 1px solid var(--joon);
  padding-top: 12px;
}

.teata summary {
  cursor: pointer;
  color: var(--tint-2);
  font-size: 0.92rem;
  font-weight: 650;
}

/* Telefoni enesetest */

.testi-pais {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.testi-pais h2 {
  margin: 0;
  font-size: 1.35rem;
}

.olekumark[data-olek="korras"] {
  background: var(--munt-hele);
  color: var(--munt-tume);
}

.olekumark[data-olek="viga"] {
  background: var(--hoiatus-hele);
  color: var(--hoiatus);
}

.testi-kusimus {
  flex-basis: 100%;
  margin: 0 0 4px;
  font-weight: 650;
}

.testi-kate {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: #000;
  color: #fff;
  display: flex;
  flex-direction: column;
  touch-action: none;
}

body.kate-lahti {
  overflow: hidden;
}

.testi-pind {
  flex: 1;
  cursor: pointer;
}

.testi-juhis {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 40px;
  margin: 0;
  padding: 12px 16px;
  border-radius: var(--r-vaike);
  background: rgb(0 0 0 / 70%);
  text-align: center;
  pointer-events: none;
}

.puute-vork {
  flex: 1;
  display: grid;
  gap: 2px;
  padding: 2px;
}

.puute-ruut {
  background: #2a313b;
  border-radius: 4px;
}

.puute-ruut[data-tehtud] {
  background: var(--munt);
}

.testi-video {
  flex: 1;
  width: 100%;
  min-height: 0;
  object-fit: cover;
}

.testi-alumine {
  display: grid;
  gap: 10px;
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
  background: #000;
}

.testi-alumine p {
  margin: 0;
  text-align: center;
}

.tase {
  flex-basis: 100%;
  height: 14px;
  border-radius: 999px;
  background: var(--joon);
  overflow: hidden;
}

.tase span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--munt);
  transition: width 80ms linear;
}

/* Mida on kontrollitud */

.toendid {
  display: grid;
  gap: 16px;
}

.toendid h2 {
  margin: 0;
}

.toend {
  border-top: 1px solid var(--joon);
  padding-top: 14px;
}

.toendi-pais {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 8px;
}

.toendi-pais h3 {
  margin: 0;
}

.toendi-allikas {
  font-size: 0.8rem;
  color: var(--tint-2);
  white-space: nowrap;
}

.toendi-read {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.toendi-read li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 8px;
  font-size: 0.95rem;
}

.toendi-read li::before {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.72rem;
  font-weight: 800;
}

.toendi-read li[data-olek="korras"]::before {
  content: "✓";
  background: var(--munt-hele);
  color: var(--munt-tume);
}

.toendi-read li[data-olek="viga"]::before {
  content: "✗";
  background: var(--hoiatus-hele);
  color: var(--hoiatus);
}

.toendi-read li[data-olek="testimata"]::before,
.toendi-read li[data-olek="puudub"]::before {
  content: "–";
  background: var(--taust);
  color: var(--tint-2);
}

.toendi-read li[data-olek="vaide"]::before {
  content: "”";
  background: var(--taust);
  color: var(--tint-2);
}

.toendi-read li[data-olek="ostja"]::before {
  content: "?";
  background: var(--kollane);
  color: var(--kollane-tint);
}

.otsin-vihje {
  flex-basis: 100%;
}

.soovi-ikoon {
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  border-radius: var(--r-vaike);
  background: var(--kollane);
  font-size: 1.6rem;
}

/* Vestlus ja hinnapakkumine */

.kusi {
  margin-top: 4px;
}

.kusi summary {
  list-style: none;
  cursor: pointer;
}

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

.kusi[open] summary {
  background: var(--taust);
}

.vestluse-pais {
  display: grid;
  gap: 12px;
  margin-bottom: 16px;
}

.kokkulepe {
  background: var(--munt-hele);
  border: 2px solid var(--munt);
}

.kokkulepe h2 {
  margin: 0 0 6px;
}

.sonumid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}

.mull {
  align-self: flex-start;
  max-width: 85%;
  padding: 10px 14px;
  border-radius: var(--r) var(--r) var(--r) 6px;
  background: var(--pind);
  box-shadow: var(--vari);
}

.mull-oma {
  align-self: flex-end;
  border-radius: var(--r) var(--r) 6px var(--r);
  background: var(--tume);
  color: #fff;
}

.mull p {
  margin: 4px 0 0;
  overflow-wrap: anywhere;
  white-space: pre-line;
}

.mull-kes {
  font-size: 0.8rem;
  color: var(--tint-2);
}

.mull-oma .mull-kes {
  color: #b9c1cc;
}

.mull-pakkumine {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.mull-pakkumine strong {
  font-family: var(--pealkiri);
  font-size: 1.6rem;
  letter-spacing: -0.03em;
}

.mull-otsus {
  font-weight: 650;
}

.mull .nupurida {
  margin-top: 10px;
}

.vestluse-vorm {
  display: grid;
  gap: 12px;
}

.sonumi-vorm {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}

.sonumi-vorm textarea {
  flex: 1;
  min-width: 0;
}

.pakkumise-vorm .vihje {
  margin: 6px 0 0;
}

.vestluste-loend {
  display: grid;
  gap: 8px;
}

.vestluse-rida {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--r-vaike);
  background: var(--taust);
  color: inherit;
  text-decoration: none;
}

.vestluse-rida p {
  margin: 2px 0 0;
  color: var(--tint-2);
  font-size: 0.92rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 60vw;
}

/* Müüja hinnangud */

.muuja-hinded {
  font-weight: 650;
}

.tarnid {
  margin: 0;
  color: var(--kollane-serv);
  font-size: 1.3rem;
  letter-spacing: 0.1em;
}

.tarnivalik {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 4px;
  border: 0;
  padding: 0;
  margin: 0;
}

.tarnivalik label {
  cursor: pointer;
  font-size: 2.4rem;
  line-height: 1;
  color: var(--joon);
}

.tarnivalik input:checked ~ label,
.tarnivalik label:hover,
.tarnivalik label:hover ~ label {
  color: var(--kollane-serv);
}

.tarnivalik input:focus-visible + label {
  outline: 3px solid var(--munt-tume);
  border-radius: 6px;
}

.hinnangud {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

.hinnang {
  padding: 14px 16px;
  border-radius: var(--r);
  background: var(--pind);
  box-shadow: var(--vari);
}

.hinnang p {
  margin: 4px 0 0;
}

/* Hinnalangus */

.vana-hind {
  margin-left: 8px;
  font-size: 0.8em;
  font-weight: 600;
  color: var(--tint-3);
}

.hinnalangus {
  display: inline-block;
  margin: 8px 0 0;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--munt-hele);
  color: var(--munt-tume);
  font-weight: 700;
  font-size: 0.92rem;
}

.hinnalanguse-teade ul {
  margin: 8px 0 0;
  padding-left: 18px;
}

.hinnalanguse-teade a {
  color: inherit;
}

/* Fotokood */

.fotokood {
  margin: 4px 0 8px;
  font-family: var(--pealkiri);
  font-size: 2.2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.fotokoodi-valikud {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 8px;
}

.fotokoodi-valik {
  display: grid;
  gap: 4px;
  padding: 4px;
  border: 2px solid var(--joon);
  border-radius: var(--r-vaike);
  background: var(--pind);
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
}

.fotokoodi-valik img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 10px;
}

.fotokoodi-valik[aria-pressed="true"] {
  border-color: var(--munt);
  background: var(--munt-hele);
  font-weight: 700;
}

.fotokoodi-pilt {
  display: block;
  width: 100%;
  max-height: 420px;
  object-fit: contain;
  border-radius: var(--r-vaike);
  background: var(--taust);
}

/* Fotokoodi silt on üleval, et see ei kataks fotol olevat koodi. */
.galerii figcaption.fotokoodi-silt {
  top: 14px;
  bottom: auto;
}

/* Äpina paigaldamine */

.paigaldus {
  display: grid;
  gap: 8px;
  justify-items: start;
  margin-bottom: 8px;
  background: var(--kollane);
  color: var(--kollane-tint);
}

.paigaldus h2,
.paigaldus p {
  margin: 0;
}

/* Teavituste kutse */

.teavituste-kutse {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  padding: 12px 16px;
  border-radius: var(--r-vaike);
  background: var(--kollane);
  color: var(--kollane-tint);
  font-weight: 650;
}

.teavituste-kutse p {
  margin: 0;
}