/* TinyLand: componentele homepage-ului 1a „Foto”, pentru clasele puse din Elementor (Advanced → CSS Classes).
   Îl scrie scripts/construieste_home.py; tema doar îl încarcă, după CSS-ul Elementor.
   Aici stă doar ce nu are control în Elementor gratuit: culorile, tipografia, spațierile, bordurile și
   fundalurile sunt setări native, editabile din Elementor. Tokenii (--tl-*) vin din tl-baza.css; valoarea de
   rezervă din var() e aceeași, ca o componentă să arate corect și fără ei. */

/* ───────── Butoane: înălțimea exactă și mărimea iconiței ─────────
   tl-btn + o înălțime (tl-btn--44 / 48 / 52 / 56). Padding-ul lateral, culorile, bordura de 1,5 px și lățimea
   completă pe mobil (Alignment: Justified) sunt din Elementor. */

.tl-btn .elementor-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: var(--tl-btn-h, 52px);
}
.tl-btn--44 { --tl-btn-h: 44px; }
.tl-btn--48 { --tl-btn-h: 48px; }
.tl-btn--52 { --tl-btn-h: 52px; }
.tl-btn--56 { --tl-btn-h: 56px; }

/* Iconița: implicit cât textul; WhatsApp 21 px, calendarul 16 px. */
.tl-btn .elementor-button-icon { font-size: var(--tl-btn-ic, 1em); }
.tl-btn--wa { --tl-btn-ic: 21px; }
.tl-btn--ic16 { --tl-btn-ic: 16px; }

/* Linkul cu săgeată din cardurile căsuțelor: țintă de min. 44 px, săgeata aurie de 13 px după text. */
.tl-link-sageata .elementor-button {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.tl-link-sageata .elementor-button-icon {
  font-size: 13px;
  color: var(--tl-gold, #C9A45F);
  fill: var(--tl-gold, #C9A45F);
}

/* ───────── Cardurile căsuțelor: raport 4:5 ───────── */

.elementor .e-con.tl-card { aspect-ratio: 4 / 5; }

/* ───────── Gradientul de sub header: doar decor, nu prinde clicuri ───────── */

.elementor .e-con.tl-umbra-header { pointer-events: none; }

/* ───────── „Inclus în preț”: grilă cu 2 coloane pe mobil, 3 de la tabletă ───────── */

.elementor-widget.tl-inclus .elementor-icon-list-items {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 24px;
}
@media (min-width: 768px) {
  .elementor-widget.tl-inclus .elementor-icon-list-items { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.elementor-widget.tl-inclus .elementor-icon-list-item {
  margin: 0;
  padding: 13px 0;
  border-bottom: 1px solid var(--tl-line, #DCD7CE);
}
/* Iconița într-o casetă de 22 px; distanța până la text (12 px) e „Text Indent” din Elementor. */
.elementor-widget.tl-inclus,
.elementor-widget.tl-reper { --e-icon-list-icon-margin: 0; }
.elementor-widget.tl-inclus .elementor-icon-list-icon {
  flex: none;
  justify-content: center;
  width: 22px;
}
.elementor-widget.tl-reper .elementor-icon-list-icon {
  flex: none;
  justify-content: center;
  width: 20px;
}
/* Iconițele Elementor ca SVG („Inline Font Icons”, din 2026-10-20): SVG-ul nu se strânge în caseta de mai sus
   (Text Indent e padding în ea) și își ia lățimea din viewBox, deci arată exact ca vechiul font Font Awesome. */
.elementor-widget .elementor-icon-list-icon svg.e-font-icon-svg {
  flex-shrink: 0;
  width: auto;
}
/* La fel în butoane: înălțimea de 1em, lățimea din viewBox (altfel caseta e pătrată și butonul crește cu 2–3 px). */
.elementor-button-icon svg.e-font-icon-svg {
  height: 1em;
  width: auto;
}

/* ───────── Rânduri de preț și valori care nu se rup ───────── */

/* „600” și „lei / noapte” aliniate pe linia de bază (Elementor are doar start, centru, final, întins). */
.elementor .e-con.tl-pret {
  --align-items: baseline;
  white-space: nowrap;
}
.tl-nowrap .elementor-heading-title { white-space: nowrap; }
/* Rândul cu preț sau distanță: eticheta se împachetează, valoarea nu se strânge. Elementor dă etichetei „grow” (flex 1 0 auto)
   și valorii min-width 0, așa că „1.400 lei” din blocul Voucher ieșea din ecran la 360–390 px (17 oct). */
.e-con:has(> .elementor-widget.tl-nowrap) > .elementor-widget:not(.tl-nowrap) { flex-shrink: 1 !important; min-width: 0; }
.e-con > .elementor-widget.tl-nowrap { flex-shrink: 0 !important; }

/* ───────── Linkurile din text („Scrieți-ne pe WhatsApp”): 600, subliniate, la 4 px ───────── */

.tl-link a {
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ───────── Întrebări frecvente (Accordion) ───────── */

/* Linie deasupra și între întrebări; titlul de min. 64 px, la 16 px de cerc. */
.elementor-widget-n-accordion.tl-faq { --n-accordion-icon-gap: 0 16px; }
.elementor-widget-n-accordion.tl-faq .e-n-accordion { border-top: 1px solid var(--tl-line, #DCD7CE); }
.elementor-widget-n-accordion.tl-faq .e-n-accordion-item { border-bottom: 1px solid var(--tl-line, #DCD7CE); }
.elementor-widget-n-accordion.tl-faq .e-n-accordion-item-title { min-height: 64px; }
.elementor-widget-n-accordion.tl-faq .e-n-accordion-item-title-text {
  margin: 0;
  text-wrap: pretty;
}
.elementor-widget-n-accordion.tl-faq summary::-webkit-details-marker { display: none; }
.elementor-widget-n-accordion.tl-faq summary:focus-visible {
  outline: none;
  box-shadow: var(--tl-focus, 0 0 0 2px #FFFFFF, 0 0 0 4px #2F3542);
}

/* Cercul de 32 px: închis = contur #DCD7CE și „+”; deschis = plin bleumarin și „−” alb (culoarea iconiței e din Elementor). */
.elementor-widget-n-accordion.tl-faq .e-n-accordion-item-title-icon > span {
  box-sizing: border-box;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--tl-line, #DCD7CE);
  border-radius: var(--tl-r-full, 999px);
}
.elementor-widget-n-accordion.tl-faq .e-n-accordion-item[open] > .e-n-accordion-item-title .e-n-accordion-item-title-icon > span {
  background-color: var(--tl-navy, #2F3542);
  border-color: var(--tl-navy, #2F3542);
}

/* ───────── Harta: pe desktop crește cât coloana de text (min. 420 px) ───────── */

@media (min-width: 1025px) {
  .elementor .tl-harta,
  .elementor .tl-harta > .elementor-widget-container,
  .elementor .tl-harta .elementor-custom-embed { height: 100%; }
  /* !important: înălțimea din Elementor (Height) e scrisă pe iframe, cu specificitate mai mare */
  .elementor .tl-harta iframe {
    height: 100% !important;
    min-height: 420px;
  }
}

/* Elementor pune flex-shrink: 0 pe „Grow”; la 375 px textul din stânga (zilele din Tarife, reperele de la Locație)
   împingea valoarea din dreapta în afara ecranului. Coloana din stânga se poate strânge, textul trece pe rândul următor. */
.elementor .e-con.tl-flex-strange,
.elementor .elementor-widget.tl-flex-strange { --flex-shrink: 1; flex-shrink: 1; min-width: 0; }

/* Cardurile căsuțelor: overlay cu trei opriri (Elementor gratuit are două). Poza din Tiny One e foarte luminoasă,
   iar eticheta aurie de deasupra titlului nu se citea. */
.elementor .e-con.tl-card::before {
  background-image: linear-gradient(180deg, rgba(31, 36, 44, 0) 22%, rgba(31, 36, 44, .72) 52%, rgba(31, 36, 44, .95) 100%) !important;
  opacity: 1 !important;
}

/* Hero, din 13 oct: poza e <img> cu srcset ([tinyland_poza]) sub conținut, nu fundal CSS. Containerul pozei izolează
   stiva, iar poza stă pe z-index -1: sub text, peste fundalul Noapte. Umbrele (sub header și sub text) sunt ::after pe
   widgetul pozei; în dreptul titlului desktop sunt mai dense decât în design, pentru că „Lacu Roșu” cădea pe marginea albă
   a jacuzzi-ului (Andrei, 13 oct). */
.elementor .e-con.tl-hero-foto { position: relative; isolation: isolate; overflow: hidden; }
.elementor .e-con.tl-hero-foto > .e-con-inner { position: static; }
.elementor .e-con.tl-hero-foto > .elementor-widget.tl-fundal-poza,
.elementor .e-con.tl-hero-foto > .e-con-inner > .elementor-widget.tl-fundal-poza {  /* hero-ul desktop e „boxed” */
  position: absolute; inset: 0; z-index: -1; width: 100%; max-width: none; margin: 0;
}
.elementor-widget.tl-fundal-poza .elementor-widget-container,
.elementor-widget.tl-fundal-poza .elementor-shortcode,
.elementor-widget.tl-fundal-poza picture { display: block; width: 100%; height: 100%; }
.elementor-widget.tl-fundal-poza img.tl-poza {
  display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; border-radius: 0;
}
.elementor-widget.tl-fundal-poza::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.elementor-widget.tl-fundal-poza--hero-m::after {
  background: linear-gradient(180deg, rgba(31, 36, 44, .6) 0%, rgba(31, 36, 44, 0) 20%, rgba(31, 36, 44, 0) 55%, #1F242C 100%);
}
.elementor-widget.tl-fundal-poza--hero-d::after {
  background:
    linear-gradient(180deg, rgba(31, 36, 44, .6) 0%, rgba(31, 36, 44, 0) 22%),
    linear-gradient(72deg, rgba(31, 36, 44, .94) 0%, rgba(31, 36, 44, .8) 30%, rgba(31, 36, 44, .45) 50%, rgba(31, 36, 44, 0) 68%);
}
.elementor .tl-hero--desktop .elementor-heading-title,
.elementor .tl-hero--desktop .elementor-widget-text-editor { text-shadow: 0 1px 18px rgba(15, 18, 22, .5); }

/* Întrebări frecvente, din 13 oct: <details> nativ (fără JavaScript). Nested Accordion din Elementor 4.3.4 nu deschidea
   întrebarea apăsată (Andrei: „FAQ-ul nu funcționează”). name="tl-faq" ține deschisă una singură (browsere din 2024+). */
.tl-faq .tl-faq__lista { border-top: 1px solid var(--tl-line, #DCD7CE); }
.tl-faq .tl-faq__item { border-bottom: 1px solid var(--tl-line, #DCD7CE); }
.tl-faq .tl-faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 64px; padding: 18px 0; cursor: pointer; list-style: none;
}
.tl-faq .tl-faq__q::-webkit-details-marker { display: none; }
.tl-faq .tl-faq__q:focus-visible { outline: none; box-shadow: var(--tl-focus, 0 0 0 2px #FFFFFF, 0 0 0 4px #2F3542); }
.tl-faq .tl-faq__titlu {
  margin: 0; color: var(--tl-navy, #2F3542); font: 600 17px/1.35 var(--tl-font); letter-spacing: 0; text-wrap: pretty;
}
.tl-faq .tl-faq__ico {
  position: relative; flex: 0 0 32px; width: 32px; height: 32px; border: 1px solid var(--tl-line, #DCD7CE); border-radius: 50%;
}
.tl-faq .tl-faq__ico::before,
.tl-faq .tl-faq__ico::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; margin: -0.75px 0 0 -6px;
  background: var(--tl-navy, #2F3542);
}
.tl-faq .tl-faq__ico::after { transform: rotate(90deg); }
.tl-faq .tl-faq__item[open] .tl-faq__ico { background: var(--tl-navy, #2F3542); border-color: var(--tl-navy, #2F3542); }
.tl-faq .tl-faq__item[open] .tl-faq__ico::before { background: #FFFFFF; }
.tl-faq .tl-faq__item[open] .tl-faq__ico::after { transform: rotate(0deg); opacity: 0; }
.tl-faq .tl-faq__a { padding: 0 48px 22px 0; max-width: 680px; }
.tl-faq .tl-faq__a p { margin: 0; color: var(--tl-muted, #5E6470); font: 400 16px/1.6 var(--tl-font); text-wrap: pretty; }
.tl-faq .tl-faq__a a { color: var(--tl-navy, #2F3542); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.tl-faq .tl-faq__a a:hover { color: var(--tl-gold-ink, #7E5F27); }
@media (max-width: 767px) { .tl-faq .tl-faq__a { padding-right: 0; } }
/* 15 oct (Andrei): răspunsul se deschide în 200 ms, nu brusc. Doar CSS, fără JavaScript și fără efect la încărcare.
   Peste tot: textul apare lin și „+” se rotește în „−”. În Chrome/Edge 131+ (interpolate-size) crește lin și înălțimea;
   în celelalte browsere înălțimea sare, ca înainte. Cine are „reducerea mișcării” pornită nu vede nicio animație. */
@media (prefers-reduced-motion: no-preference) {
  .tl-faq .tl-faq__ico { transition: background-color .2s ease-out, border-color .2s ease-out; }
  .tl-faq .tl-faq__ico::before { transition: background-color .2s ease-out; }
  .tl-faq .tl-faq__ico::after { transition: transform .2s ease-out, opacity .2s ease-out; }
  .tl-faq .tl-faq__item[open] > .tl-faq__a { animation: tl-faq-deschide .2s ease-out; }
  @supports (interpolate-size: allow-keywords) {
    .tl-faq { interpolate-size: allow-keywords; }
    .tl-faq .tl-faq__item::details-content {
      block-size: 0; overflow-y: clip; transition: block-size .2s ease-out, content-visibility .2s ease-out allow-discrete;
    }
    .tl-faq .tl-faq__item[open]::details-content { block-size: auto; }
  }
}
@keyframes tl-faq-deschide { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* Harta oficială Google (iframe din „Embed a map”), 13 oct: aceleași colțuri, bordură și înălțimi ca widgetul de hartă. */
.elementor-widget.tl-harta--embed .tl-harta__iframe {
  display: block; width: 100%; height: 280px; border: 1px solid var(--tl-line, #DCD7CE); border-radius: 8px;
}
@media (min-width: 768px) { .elementor-widget.tl-harta--embed .tl-harta__iframe { height: 360px; } }
@media (min-width: 1025px) { .elementor-widget.tl-harta--embed .tl-harta__iframe { height: 100%; min-height: 420px; } }

/* ═════════ Pagini noi: căsuțele și voucherul (13 oct 2026, scripts/construieste_pagini.py) ═════════
   Doar clase noi (.tl-pag-hero, .tl-btn--hero, .tl-puncte, .tl-varianta, .tl-pas, .tl-motiv) și modificatorii
   pozelor (.tl-fundal-poza--pag, --alaturi). Regulile de mai sus rămân cum sunt; aici nu se suprascrie nimic
   de pe homepage. Culorile, tipografia, spațierile și bordurile sunt setări native Elementor. */

/* Butoanele din hero și din banda finală: 52 px pe telefon, 56 de la 768 px (README, „Butoane”). */
.tl-btn--hero { --tl-btn-h: 52px; }
@media (min-width: 768px) { .tl-btn--hero { --tl-btn-h: 56px; } }

/* Hero-ul paginilor: un singur hero, poza ca <img> ([tinyland_poza], prioritate="da"), sub text. Antetul nu stă
   peste poză pe celelalte pagini (tl-antet--peste e doar pe prima pagină), deci fără umbra de sub antet.
   De la 768 px poza acoperă tot hero-ul (regula .tl-hero-foto de mai sus), cu umbra de 72° sub text. */
.elementor-widget.tl-fundal-poza--pag::after {
  background:
    linear-gradient(0deg, rgba(31, 36, 44, .55) 0%, rgba(31, 36, 44, 0) 35%),
    linear-gradient(72deg, rgba(31, 36, 44, .94) 0%, rgba(31, 36, 44, .8) 30%, rgba(31, 36, 44, .45) 50%, rgba(31, 36, 44, 0) 68%);
}
@media (min-width: 768px) {
  .elementor .tl-pag-hero .elementor-heading-title,
  .elementor .tl-pag-hero .elementor-widget-text-editor { text-shadow: 0 1px 18px rgba(15, 18, 22, .5); }
}
/* Pe telefon poza stă deasupra textului, pe toată lățimea ecranului (peste marginile de 20 px ale hero-ului), iar
   textul urcă 72 px peste partea ei de jos (margin −72 din Elementor), pe umbra spre Noapte. */
@media (max-width: 767px) {
  .elementor .e-con.tl-hero-foto.tl-pag-hero > .elementor-widget.tl-fundal-poza,
  .elementor .e-con.tl-hero-foto.tl-pag-hero > .e-con-inner > .elementor-widget.tl-fundal-poza {
    position: relative;
    inset: auto;
    width: calc(100% + 40px);
    max-width: none;
    height: min(92vw, 440px);
    margin: 0 -20px;
  }
  .elementor-widget.tl-fundal-poza--pag::after {
    background: linear-gradient(180deg, rgba(31, 36, 44, 0) 45%, rgba(31, 36, 44, .7) 75%, #1F242C 100%);
  }
}

/* Poza de lângă „Cealaltă căsuță”: același <img> sub conținut (.tl-hero-foto), fără umbră. */
.elementor-widget.tl-fundal-poza--alaturi::after { background: none; }

/* „Interiorul”: lista de puncte pe o coloană, cu linie între rânduri (ca „Inclus în preț”, dar pe un rând întreg).
   Iconița aliniată sus și coborâtă 3 px sunt setări Elementor (Vertical Alignment, Adjust Vertical Position). */
.elementor-widget.tl-puncte { --e-icon-list-icon-margin: 0; }
.elementor-widget.tl-puncte .elementor-icon-list-items { border-top: 1px solid var(--tl-line, #DCD7CE); }
.elementor-widget.tl-puncte .elementor-icon-list-item {
  margin: 0;
  padding: 14px 0;
  border-bottom: 1px solid var(--tl-line, #DCD7CE);
}
.elementor-widget.tl-puncte .elementor-icon-list-icon {
  flex: none;
  justify-content: center;
  width: 22px;
}
.elementor-widget.tl-puncte .elementor-icon-list-text { text-wrap: pretty; }

/* Cardurile de variante (voucher): fundalul alb, bordura, colțurile de 8 px și padding-ul sunt din Elementor;
   prețul nu se rupe (.tl-nowrap, mai sus). */

/* Pașii numerotați (voucher): cifra într-un cerc de 44 px, conturat cu culoarea textului (auriu, din Elementor). */
.tl-pas__nr .elementor-heading-title {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  border: 1.5px solid currentColor;
  border-radius: var(--tl-r-full, 999px);
  font-variant-numeric: tabular-nums;
}

/* Titlurile scurte din pași, „Pentru cine” și cardurile de variante: rupte echilibrat. */
.tl-pas .elementor-heading-title,
.tl-motiv .elementor-heading-title,
.tl-varianta .elementor-heading-title { text-wrap: balance; }

/* Politica de confidențialitate și cookie-uri (/politica-cookies/), 15 oct: pagină WordPress simplă, fără Elementor
   (scripts/construieste_politica.py). Coloană de text îngustă, pe Hârtie, cu tipografia site-ului. */
.tl-legal { max-width: 760px; margin: 0 auto; padding: 56px 20px 88px; color: var(--tl-navy, #2F3542); font: 400 16px/1.7 var(--tl-font); }
.tl-legal h1 { margin: 0 0 28px; font: 600 clamp(30px, 4.4vw, 44px)/1.1 var(--tl-font); letter-spacing: -.015em; text-wrap: balance; }
.tl-legal h2 { margin: 44px 0 14px; font: 600 22px/1.3 var(--tl-font); letter-spacing: -.01em; }
.tl-legal p, .tl-legal li { color: var(--tl-muted, #5E6470); text-wrap: pretty; }
.tl-legal p { margin: 0 0 14px; }
.tl-legal ul { margin: 0 0 16px; padding-left: 22px; }
.tl-legal li { margin: 0 0 6px; }
.tl-legal strong { color: var(--tl-navy, #2F3542); font-weight: 600; }
.tl-legal a { color: var(--tl-navy, #2F3542); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; overflow-wrap: anywhere; }
.tl-legal a:hover { color: var(--tl-gold-ink, #7E5F27); }
.tl-legal code { font: 500 14px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; background: rgba(47, 53, 66, .06); padding: 1px 5px; border-radius: 4px; overflow-wrap: anywhere; }
.tl-legal__tabel { margin: 8px 0 18px; overflow-x: auto; border: 1px solid var(--tl-line, #DCD7CE); border-radius: 8px; }
.tl-legal table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 14px; line-height: 1.5; }
.tl-legal th, .tl-legal td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--tl-line, #DCD7CE); }
.tl-legal th { color: var(--tl-navy, #2F3542); font-weight: 600; background: rgba(47, 53, 66, .04); }
.tl-legal td { color: var(--tl-muted, #5E6470); }
.tl-legal tr:last-child td { border-bottom: 0; }
.tl-legal__buton {
  min-height: 48px; padding: 0 22px; border: 1px solid var(--tl-navy, #2F3542); border-radius: 4px; background: var(--tl-navy, #2F3542);
  color: #FFFFFF; font: 600 15px/1 var(--tl-font); cursor: pointer;
}
.tl-legal__buton:hover { background: transparent; color: var(--tl-navy, #2F3542); }
.tl-legal__buton:focus-visible { outline: none; box-shadow: var(--tl-focus, 0 0 0 2px #FFFFFF, 0 0 0 4px #2F3542); }

/* ───────── Pagina 404 (404.php, din 2026-10-21) ───────── */
/* Stă în .ast-container (padding-ul lateral e al lui Astra); butonul WhatsApp e ca în subsol. */
body.error404,
body.error404.ast-separate-container { background-color: var(--tl-paper); }   /* Astra pune altfel gri-albastrul „separate container” */
.tl-404 {
  padding: var(--tl-section-y) 0;
  font-family: var(--tl-font);
  color: var(--tl-navy);
}
.tl-404 .tl-404__interior { max-width: 640px; margin: 0 auto; }
.tl-404 .tl-404__eticheta {
  margin: 0 0 12px;
  color: var(--tl-gold-ink);
  font-size: var(--tl-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tl-eyebrow-ls);
  text-transform: uppercase;
}
.tl-404 .tl-404__titlu {
  margin: 0 0 16px;
  color: var(--tl-navy);
  font-size: var(--tl-h1);
  line-height: var(--tl-h1-lh);
  letter-spacing: var(--tl-h1-ls);
}
.tl-404 .tl-404__text {
  margin: 0 0 24px;
  color: var(--tl-muted);
  font-size: var(--tl-lead);
  line-height: var(--tl-lead-lh);
}
.tl-404 .tl-404__linkuri { margin: 0 0 32px; padding: 0; list-style: none; border-top: 1px solid var(--tl-line); }
.tl-404 .tl-404__linkuri li { margin: 0; border-bottom: 1px solid var(--tl-line); }
.tl-404 .tl-404__linkuri a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: var(--tl-tap);
  padding: 12px 0;
  color: var(--tl-navy);
  font-weight: 600;
  text-decoration: none;
}
.tl-404 .tl-404__linkuri a:hover { color: var(--tl-gold-ink); }
.tl-404 .tl-404__wa {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 20px;
  border-radius: var(--tl-r-sm);
  background: var(--tl-wa);
  color: #FFFFFF;
  font-size: var(--tl-button);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}
.tl-404 .tl-404__wa:hover { background: var(--tl-wa-hover); color: #FFFFFF; }
.tl-404 a:focus-visible { outline: none; box-shadow: var(--tl-focus); }