/*
  OutDoorSauna veebileht

  FAIL: style.css
  SIIN MUUDAD: värvid, suurused, vahed, mobiilivaade, kaartide välimus ja efektid.

  Kiirelt:
  - :root all on põhivärvid. Muuda neid, kui tahad kogu lehe värvipaletti muuta.
  - .hero muudab avalehe suurt pilti ja kõrgust.
  - .product-card muudab toodete kaarte.
  - @media plokid on telefoni/tahvli vaate jaoks
*/
* {
  box-sizing:border-box;
  margin:0;
  padding:0
}
/* Põhivärvid ja üldised väärtused kogu lehe jaoks */
:root {
  --bg:#f6efe4;
  --paper:#fffaf2;
  --dark:#1c130d;
  --brown:#6b3b1f;
  --wood:#c77a35;
  --wood-dark:#9a5624;
  --muted:#715d4b;
  --line:#ead8c3;
  --shadow:0 22px 55px rgba(37,24,14,.13);
}

html,
body {
  height: 100%;
}

body {
  font-family:Arial,Helvetica,sans-serif;
  background:var(--bg);
  color:var(--dark);
  line-height:1.55;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

main {
  flex:1;
}

button,input,textarea,select {
  font:inherit
}
button {
  cursor:pointer
}
img {
  max-width:100%;
  display:block
}
/* Kõige ülemine väike riba */
.topbar {
  background:#160f0a;
  color:#f6dec0;
  text-align:center;
  padding:10px 18px;
  font-weight:700;
  font-size:14px
}
/* Ülemine menüü */
.site-header {
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(255,250,242,.92);
  backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:14px 6%
}
.brand {
  border:0;
  background:transparent;
  font-size:28px;
  font-weight:950;
  color:var(--dark);
  letter-spacing:-.8px
}
.brand span {
  color:var(--wood)
}
nav {
  display:flex;
  align-items:center;
  gap:8px
}
.nav-link,.lang {
  border:0;
  background:transparent;
  border-radius:999px;
  padding:11px 15px;
  font-weight:850;
  color:#332218;
  transition:.25s
}
.nav-link:hover,.nav-link.active,.lang.active {
  background:#ead7bf;
  color:#5b2f15
}
.nav-cta {
  background:var(--wood)!important;
  color:white!important
}
.language {
  display:flex;
  gap:6px
}
.mobile-menu {
  display:none;
  border:0;
  background:#ead7bf;
  border-radius:12px;
  padding:9px 13px;
  font-size:22px
}
/* Lehe vaadete süsteem: ainult aktiivne vaade on nähtav */
.page {
  display:none;
  animation:fade .35s ease
}
.page.active {
  display:block
}
@keyframes fade {
  from {
    opacity:0;
    transform:translateY(8px)
  }
  to {
    opacity:1;
    transform:none
  }
}
/* Avalehe suur pildiplokk */
.hero {
  min-height:calc(100vh - 108px);
  position:relative;
  display:flex;
  align-items:center;
  padding:90px 6%;
  overflow:hidden;
  background:#160f0a;
}

.hero-bg {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  z-index:0;
}
/* TUME FILTER PILDILE */
.hero-overlay {
  z-index:1;
  position:absolute;
  inset:0;
  background:
  linear-gradient(
  90deg,
  rgba(5,5,5,.93) 0%,
  rgba(5,5,5,.72) 45%,
  rgba(5,5,5,.42) 100%
  );
}
/* HERO SISU */
.hero-content {
  position:relative;
  z-index:2;
  max-width:790px;
  color:white;
  animation:fadeUp 1s ease;
}
/* VÄIKE PILL */
.pill,
.eyebrow {
  display:inline-block;
  font-weight:900;
  color:#e0a15e;
  background:rgba(199,122,53,.14);
  border:1px solid rgba(199,122,53,.28);
  padding:10px 15px;
  border-radius:999px;
  margin-bottom:18px;
  text-transform:uppercase;
  letter-spacing:1px;
  font-size:12px;
  backdrop-filter:blur(2px);
}
/* SUUR PEALKIRI */
.hero h1,
.page-head h1,
.contact-info h1 {
  font-size:clamp(46px,7vw,82px);
  line-height:.92;
  letter-spacing:-3px;
  margin-bottom:24px;
  text-shadow:0 5px 20px rgba(0,0,0,.35);
}
/* KIRJELDUS */
.hero p {
  font-size:22px;
  color:#f3e7d8;
  max-width:700px;
  margin-bottom:34px;
  line-height:1.55;
}
/* NUPUD */
.hero-actions {
  display:flex;
  gap:16px;
  flex-wrap:wrap;
}
/* SUJUV SISSETULEKU ANIMATSIOON */
@keyframes fadeUp {
  from {
    opacity:0;
    transform:translateY(30px);
  }
  to {
    opacity:1;
    transform:translateY(0);
  }
}
.btn {
  border:0;
  border-radius:999px;
  padding:14px 23px;
  font-weight:950;
  transition:.25s;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center
}
.btn.primary {
  background:var(--wood);
  color:white;
  box-shadow:0 14px 34px rgba(199,122,53,.28)
}
.btn.primary:hover {
  background:var(--wood-dark);
  transform:translateY(-3px);
  box-shadow:0 20px 42px rgba(199,122,53,.35)
}
.btn.ghost {
  background:rgba(255,255,255,.14);
  color:white;
  border:1px solid rgba(255,255,255,.28)
}
.full {
  width:100%
}
/* Avalehe neli väikest infokaarti */
.quick-cards {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
  padding:0 6%;
  margin-top:-54px;
  position:relative;
  z-index:3;
}
.quick-card {
  background:var(--paper);
  border:1px solid rgba(0,0,0,.04);
  border-radius:26px;
  padding:24px;
  box-shadow:
  0 10px 30px rgba(0,0,0,.07),
  0 2px 8px rgba(0,0,0,.04);
  transition:
  transform .25s ease,
  box-shadow .25s ease,
  border-color .25s ease;
}
/* HOVER EFEKT */
.quick-card:hover {
  transform:translateY(-6px);
  border-color:rgba(199,122,53,.18);
  box-shadow:
  0 20px 45px rgba(0,0,0,.12),
  0 5px 14px rgba(0,0,0,.06);
}
.footer {
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  margin-top:80px;
  padding:40px 20px;
  background:linear-gradient(
  180deg,
  rgba(20,12,7,0.96),
  rgba(10,6,4,1)
  );
  border-top:1px solid rgba(255,255,255,0.08);
}
.footer p {
  margin:0;
  color:rgba(255,255,255,0.82);
  font-size:14px;
  letter-spacing:1px;
  text-transform:uppercase;
  font-weight:500;
}
.icon {
  font-size:31px;
  margin-bottom:10px
}
.quick-card h3 {
  font-size:21px;
  margin-bottom:5px
}
.quick-card p {
  color:var(--muted)
}
.intro-split {
  padding:90px 6%;
  display:grid;
  grid-template-columns:1fr .9fr;
  gap:46px;
  align-items:center
}
.intro-split h2 {
  font-size:clamp(32px,4vw,54px);
  line-height:1.05;
  margin-bottom:16px
}
.intro-split p {
  font-size:18px;
  color:var(--muted);
  margin-bottom:18px
}
.intro-split img {
  border-radius:32px;
  box-shadow:var(--shadow);
  height:520px;
  width:100%;
  object-fit:cover
}
.check-list {
  list-style:none;
  display:grid;
  gap:10px
}
.check-list li {
  background:#fffaf2;
  border:1px solid var(--line);
  padding:13px 15px;
  border-radius:16px;
  font-weight:800
}
.check-list li:before {
  content:"✔ ";
  color:var(--wood)
}
.page-head {
  padding:80px 6% 32px;
  max-width:1000px
}
.page-head h1 {
  color:var(--dark)
}
.page-head p {
  font-size:19px;
  color:var(--muted);
  max-width:820px
}
/* Toodete kaartide paigutus */
.product-grid {
  padding:10px 6% 50px;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:26px
}
/* Ühe toote kaart */
.product-card {
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:34px;
  overflow:hidden;
  box-shadow:var(--shadow);
  transition:.3s
}
.product-card:hover {
  transform:translateY(-6px)
}
.product-card img {
  width:100%;
  height:100%;
  min-height:0;
  object-fit:contain;
  object-position:center;
  display:block;
  background:#f4eadc
}
.product-carousel {
  position:relative;
  overflow:hidden;
  height:430px;
  background:#f4eadc
}
.product-carousel img {
  cursor:zoom-in;
  transition:transform .35s ease, opacity .2s ease
}
.product-carousel:hover img {
  transform:scale(1.03)
}
.carousel-arrow {
  position:absolute;
  top:50%;
  z-index:2;
  width:48px;
  height:48px;
  border:1px solid rgba(255,255,255,.55);
  border-radius:16px;
  background:linear-gradient(180deg, rgba(34,23,16,.88), rgba(13,10,8,.82));
  color:white;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  box-sizing:border-box;
  font-size:0;
  line-height:1;
  cursor:pointer;
  box-shadow:0 12px 28px rgba(0,0,0,.32);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  transform:translateY(-50%);
  transition:background .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.carousel-arrow::before {
  content:"";
  width:13px;
  height:13px;
  border-top:4px solid currentColor;
  border-right:4px solid currentColor;
  display:block;
}
.carousel-arrow.prev::before {
  transform:rotate(-135deg);
  margin-left:5px;
}
.carousel-arrow.next::before {
  transform:rotate(45deg);
  margin-right:5px;
}
.carousel-arrow:hover {
  background:linear-gradient(180deg, rgba(143,86,44,.96), rgba(103,60,31,.94));
  border-color:rgba(255,255,255,.75);
  transform:translateY(-50%) scale(1.06);
  box-shadow:0 16px 34px rgba(0,0,0,.38);
}
.carousel-arrow:focus-visible {
  outline:3px solid rgba(255,255,255,.85);
  outline-offset:3px;
}
.carousel-arrow.prev {
  left:16px
}
.carousel-arrow.next {
  right:16px
}
.product-body {
  padding:28px
}
.badge {
  display:inline-block;
  background:#ead7bf;
  color:#683819;
  border-radius:999px;
  padding:7px 12px;
  font-weight:950;
  font-size:13px;
  margin-bottom:12px
}
.product-body h2 {
  font-size:30px;
  margin-bottom:9px
}
.product-body p {
  color:var(--muted);
  margin-bottom:15px
}
.specs {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:9px;
  margin:17px 0
}
.specs span,.included-grid span {
  background:#f3e5d3;
  border:1px solid #ead2b6;
  border-radius:14px;
  padding:10px;
  font-weight:800;
  color:#53341f;
  height:auto;
  align-self:start
}
.price {
  font-size:28px;
  font-weight:950;
  color:var(--wood-dark);
  margin:18px 0
}
.details-panel {
  margin:0 6% 80px;
  background:#21150e;
  color:white;
  border-radius:34px;
  padding:36px;
  box-shadow:var(--shadow)
}
.details-panel h2 {
  font-size:36px;
  margin-bottom:22px
}
.included-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px
}
/* Galerii piltide ruudustik */
.gallery-grid {
  padding:10px 6% 80px;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:18px
}
.gallery-grid figure {
  position:relative;
  min-height:370px;
  border:0;
  border-radius:18px;
  overflow:hidden;
  background:#20130d;
  box-shadow:0 16px 38px rgba(37,24,14,.18)
}
.gallery-grid figure::after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:45%;
  background:linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0));
  pointer-events:none
}
.gallery-grid figure img {
  width:100%;
  height:370px;
  object-fit:cover;
  object-position:center;
  transition:transform .35s ease, filter .35s ease
}
.gallery-grid figure:hover img {
  transform:scale(1.05);
  filter:saturate(1.05)
}
.gallery-grid figcaption {
  position:absolute;
  left:18px;
  right:18px;
  bottom:16px;
  z-index:2;
  padding:0;
  color:white;
  font-size:18px;
  font-weight:900;
  text-shadow:0 2px 12px rgba(0,0,0,.45)
}
figure {
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:25px;
  overflow:hidden;
  box-shadow:0 12px 32px rgba(37,24,14,.1)
}
figure img {
  width:100%;
  height:320px;
  object-fit:cover;
  transition:.35s
}
figure:hover img {
  transform:scale(1.04)
}
figcaption {
  padding:14px 16px;
  font-weight:900;
  color:#4f321f
}
/* Tootmise/transportimise ajajoone plokk */
.timeline {
  padding:10px 6% 80px;
  display:grid;
  gap:28px
}
.timeline-card {
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:34px;
  box-shadow:var(--shadow);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  overflow:hidden;
  align-items:center
}
.timeline-card.reverse img {
  order:2;
  justify-self: end;
}

.timeline-card img {
  height:430px;
  width:50%;
  object-fit:cover;
  object-position:center center
}

.timeline-card div:not(.step) {
  padding:38px
}
.step {
  display:inline-grid;
  place-items:center;
  width:52px;
  height:52px;
  background:var(--wood);
  color:white;
  border-radius:50%;
  font-weight:950;
  margin-bottom:18px
}
.timeline-card h2 {
  font-size:34px;
  margin-bottom:10px
}
.timeline-card p {
  color:var(--muted);
  font-size:18px
}
/* Kontaktivaade ja taotluse vorm */
.contact-layout {
  padding:80px 6%;
  display:grid;
  grid-template-columns:.8fr 1fr;
  gap:34px;
  align-items:start
}
.contact-info {
  background:#21150e;
  color:white;
  border-radius:34px;
  padding:38px;
  min-height:100%
}
.contact-info p {
  color:#ead9c4;
  font-size:18px;
  margin-bottom:24px
}
.contact-cards {
  display:grid;
  gap:13px;
  margin-top:20px
}
.contact-cards div {
  display:flex;
  gap:12px;
  align-items:center;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  padding:16px;
  border-radius:18px;
  font-weight:850
}
.quote-form {
  background:var(--paper);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  border-radius:34px;
  padding:32px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px
}
.quote-form h2 {
  grid-column:1/-1;
  font-size:34px
}
.quote-form label {
  display:grid;
  gap:7px;
  font-weight:900;
  color:#4b2f1d
}
.quote-form label:nth-last-of-type(1) {
  grid-column:1/-1
}
input,select,textarea {
  border:1px solid #dcc6ad;
  background:white;
  border-radius:15px;
  padding:14px;
  outline:none
}
input:focus,select:focus,textarea:focus {
  border-color:var(--wood);
  box-shadow:0 0 0 4px rgba(199,122,53,.14)
}
.quote-form button,.form-note {
  grid-column:1/-1
}
.form-note {
  color:var(--muted);
  font-size:14px;
  text-align:center
}

.image-lightbox {
  position:fixed;
  inset:0;
  z-index:200;
  display:none;
  align-items:center;
  justify-content:center;
  padding:28px;
  background:rgba(14,9,6,.86);
}
.image-lightbox.open {
  display:flex
}
.image-lightbox img {
  max-width:min(1100px,94vw);
  max-height:88vh;
  border-radius:18px;
  box-shadow:0 30px 90px rgba(0,0,0,.48);
  object-fit:contain;
  background:#160f0a
}
.lightbox-close {
  position:absolute;
  top:22px;
  right:22px;
  width:46px;
  height:46px;
  border:1px solid rgba(255,255,255,.35);
  border-radius:50%;
  background:rgba(255,250,242,.16);
  color:white;
  font-size:34px;
  line-height:1;
  display:grid;
  place-items:center;
}
.lightbox-close:hover {
  background:var(--wood);
  border-color:var(--wood)
}
body.lightbox-active {
  overflow:hidden
}

.keris-img{
  height:340px;
  width:80%;
  object-fit:cover;
  object-position:center 70%;
}

/* Tahvli ja väiksema ekraani vaade */
@media(max-width:980px) {
  .mobile-menu {
    display:block
  }
  .site-header {
    flex-wrap:wrap
  }
  nav {
    display:none;
    width:100%;
    flex-direction:column;
    align-items:stretch
  }
  nav.open {
    display:flex
  }
  .nav-link {
    text-align:left
  }
  .quick-cards,.product-grid,.included-grid,.gallery-grid {
    grid-template-columns:1fr 1fr
  }
  .intro-split,.timeline-card,.contact-layout {
    grid-template-columns:1fr
  }
  .timeline-card.reverse img {
    order:0
  }
}
/* Telefoni vaade */
@media(max-width:640px) {
  .topbar {
    font-size:12px
  }
  .brand {
    font-size:24px
  }
  .hero {
    min-height:620px;
    padding:55px 5%
  }
  .hero h1,.page-head h1,.contact-info h1 {
    font-size:42px;
    letter-spacing:-1.4px
  }
  .hero p {
    font-size:17px
  }
  .quick-cards,.product-grid,.included-grid,.gallery-grid {
    grid-template-columns:1fr
  }
  .quick-cards {
    margin-top:18px;
    padding:0 5%
  }
  .intro-split,.page-head,.product-grid,.gallery-grid,.timeline,.contact-layout {
    padding-left:5%;
    padding-right:5%
  }
  .intro-split img,.product-card img,figure img {
    height:280px;
    width:100%;
  
    object-fit:cover;
    object-position:center 65%;
    transform:none;
  }

  .gallery-grid figure {
    min-height:230px
  }
  .gallery-grid figure img {
    height:230px;
    transform:none;
    object-position:center
  }
  .gallery-grid figcaption {
    font-size:16px;
    left:14px;
    bottom:14px
  }
  .carousel-arrow {
    width:42px;
    height:42px;
    border-radius:14px;
  }
  .carousel-arrow::before {
    width:11px;
    height:11px;
    border-top-width:3px;
    border-right-width:3px;
  }
  .carousel-arrow.prev {
    left:10px
  }
  .carousel-arrow.next {
    right:10px
  }

  .timeline-card img{
  height:430px;
  width:100%;
  object-fit:cover;
  object-position:center center;
}
  .specs {
    grid-template-columns:1fr
  }
  .quote-form {
    grid-template-columns:1fr;
    padding:23px;
    border-radius:26px
  }
  .contact-info {
    padding:26px;
    border-radius:26px
  }
  .details-panel {
    margin-left:5%;
    margin-right:5%;
    padding:25px
  }

  .product-main-img{
  object-fit:cover;
  object-position:center 60%;
  transform:none;
}

  @media(max-width:640px){

  .intro-split img,
  .product-card img,
  figure img,
  .timeline-card img{
    height:280px;
    width:100%;

    object-fit:cover;

    object-position:center 65%;

    transform:none;
  }

}

  @media (max-width:768px){

  .hero{
    min-height:78vh;

    background-size:cover;

    background-position:10% center;

    padding:120px 7% 90px;
  }

}
}




/* Ülemised minimaalsed sotsiaalmeedia ikoonid */
.header-socials{
  display:flex;
  align-items:center;
  gap:10px;
}

.header-socials a{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:999px;
  color:var(--dark);
  background:rgba(255,255,255,.55);
  border:1px solid rgba(0,0,0,.08);
  text-decoration:none;
  transition:.25s ease;
}

.header-socials a:hover{
  color:white;
  background:var(--wood);
  border-color:var(--wood);
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(199,122,53,.25);
}

.header-socials svg{
  width:19px;
  height:19px;
  fill:currentColor;
}

@media(max-width:980px){
  .header-socials{
    margin-left:0;
  }
}

@media(max-width:640px){
  .header-socials a{
    width:35px;
    height:35px;
  }

  .header-socials svg{
    width:18px;
    height:18px;
  }
}

/* Päringuvormi teated */
.form-status{
  min-height:24px;
  font-weight:850;
  text-align:center;
}
.form-status.success{
  color:#2f6b35;
}
.form-status.error{
  color:#9b2f1f;
}
.form-status.info{
  color:#6b3b1f;
}
.quote-form button:disabled{
  opacity:.78;
  cursor:not-allowed;
  transform:none;
}


/* Valikute lehe pildid väiksemaks ja täispildina nähtavaks */
.product-carousel{
  height:430px;
  background:#f4eadc;
}
.product-card img,
.product-main-img{
  width:100%;
  height:100%;
  min-height:0;
  object-fit:cover;
  object-position:center;
  transform:none;
  background:#f4eadc;
}
@media(max-width:980px){
  .product-carousel{height:360px;}
}
@media(max-width:640px){
  .product-carousel{height:270px;}
}

.quote-form .full-field {
  grid-column: 1 / -1;
  width: 100%;
}

.quote-form .full-field input,
.quote-form .full-field select {
  width: 100%;
}

.toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  background: #24160f;
  color: #ffffff;
  padding: 14px 18px;
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(0,0,0,.25);
  font-weight: 800;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: .25s ease;
  z-index: 999;
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

.lightbox-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:54px;
  height:54px;
  border:1px solid rgba(255,255,255,.35);
  border-radius:50%;
  background:rgba(20,12,7,.65);
  color:white;
  font-size:42px;
  z-index:3;
}

.lightbox-prev{
  left:28px;
}

.lightbox-next{
  right:28px;
}

.lightbox-thumbs{
  position:absolute;
  left:50%;
  bottom:22px;
  transform:translateX(-50%);
  display:flex;
  gap:8px;
  max-width:90vw;
  overflow-x:auto;
  padding:8px;
  background:rgba(20,12,7,.65);
  border-radius:16px;
}

.lightbox-thumbs img{
  width:70px;
  height:52px;
  object-fit:cover;
  border-radius:10px;
  opacity:.55;
  cursor:pointer;
  border:2px solid transparent;
}

.lightbox-thumbs img.active{
  opacity:1;
  border-color:#c77a35;
}

@media(max-width:640px){
  .lightbox-arrow{
    width:42px;
    height:42px;
    font-size:32px;
  }

  .lightbox-prev{
    left:10px;
  }

  .lightbox-next{
    right:10px;
  }

  .lightbox-thumbs img{
    width:58px;
    height:44px;
  }
}

.lightbox-arrow{
  position:absolute;
  top:50%;
  z-index:4;
  width:50px;
  height:50px;
  border:1px solid rgba(255,255,255,.55);
  border-radius:18px;
  background:linear-gradient(180deg, rgba(34,23,16,.88), rgba(13,10,8,.82));
  color:white;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  box-sizing:border-box;
  font-size:0;
  line-height:1;
  cursor:pointer;
  box-shadow:0 12px 28px rgba(0,0,0,.32);
  backdrop-filter:blur(6px);
  transform:translateY(-50%);
}

.lightbox-arrow::before{
  content:"";
  width:15px;
  height:15px;
  border-top:4px solid currentColor;
  border-right:4px solid currentColor;
  display:block;
}

.lightbox-prev{
  left:32px;
}

.lightbox-next{
  right:32px;
}

.lightbox-prev::before{
  transform:rotate(-135deg);
  margin-left:6px;
}

.lightbox-next::before{
  transform:rotate(45deg);
  margin-right:6px;
}

.lightbox-arrow:hover{
  background:linear-gradient(180deg, rgba(143,86,44,.96), rgba(103,60,31,.94));
  transform:translateY(-50%) scale(1.06);
}




/* Väike minimaalne keelevalik headeris */
.language-mini{
  display:flex;
  align-items:center;
}
.language-select{
  border:1px solid rgba(0,0,0,.10);
  background:rgba(255,255,255,.62);
  color:#332218;
  border-radius:999px;
  padding:8px 10px;
  font-weight:900;
  font-size:13px;
  outline:none;
  cursor:pointer;
}
.language-select:focus{
  border-color:var(--wood);
  box-shadow:0 0 0 3px rgba(199,122,53,.14);
}
@media(max-width:980px){
  .language-mini{margin-left:0;}
}
@media(max-width:640px){
  .language-select{
    padding:7px 8px;
    font-size:12px;
  }
}


/* Headeri parempoolne osa: sotsiaalid + keelevalik */
.header-tools{
  display:flex;
  align-items:center;
  gap:12px;
}
@media(max-width:980px){
  .header-tools{
    margin-left:auto;
    gap:8px;
  }
}
@media(max-width:640px){
  .header-tools{
    gap:7px;
  }
}


/* === ZONE FIX: cache/paigutus/keelevalik/lightbox/tootmine === */
.site-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
.header-tools{
  margin-left:auto;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end;
  gap:9px !important;
  flex:0 0 auto;
}
.header-socials{
  display:flex !important;
  align-items:center !important;
  gap:7px !important;
  flex:0 0 auto;
}
.header-socials a{
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(0,0,0,.10);
  color:var(--dark);
  text-decoration:none;
}
.header-socials svg{
  width:18px;
  height:18px;
  fill:currentColor;
}
.language-mini{
  display:flex !important;
  align-items:center !important;
  flex:0 0 auto;
}
.language-select{
  appearance:auto;
  -webkit-appearance:auto;
  width:auto;
  min-width:58px;
  height:34px;
  border:1px solid rgba(0,0,0,.12) !important;
  background:#fffaf2 !important;
  color:#25180f !important;
  border-radius:999px !important;
  padding:0 8px !important;
  font-size:13px !important;
  font-weight:900 !important;
  line-height:34px;
  box-shadow:0 6px 16px rgba(37,24,14,.08);
}

/* Tootmise pildid täidavad oma poole ära, ei jää keskele/paremale poolikuna */
.timeline-card img{
  width:100% !important;
  height:430px;
  object-fit:cover;
  object-position:center center;
  justify-self:stretch !important;
}
.timeline-card.reverse img{
  order:2;
  justify-self:stretch !important;
}

/* Lightbox: nooled samas stiilis nagu tavavaates + all thumbnail galerii nähtav */
.image-lightbox{
  padding:26px 86px 112px !important;
}
.image-lightbox img{
  max-width:min(1120px,86vw) !important;
  max-height:calc(100vh - 165px) !important;
  object-fit:contain !important;
}
.lightbox-arrow{
  position:fixed !important;
  top:50% !important;
  z-index:205 !important;
  width:52px !important;
  height:52px !important;
  border:1px solid rgba(255,255,255,.55) !important;
  border-radius:16px !important;
  background:linear-gradient(180deg, rgba(34,23,16,.90), rgba(13,10,8,.84)) !important;
  color:white !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 !important;
  font-size:0 !important;
  line-height:1 !important;
  cursor:pointer !important;
  box-shadow:0 12px 28px rgba(0,0,0,.32) !important;
  transform:translateY(-50%) !important;
}
.lightbox-arrow::before{
  content:"" !important;
  width:14px !important;
  height:14px !important;
  border-top:4px solid currentColor !important;
  border-right:4px solid currentColor !important;
  display:block !important;
}
.lightbox-prev{left:26px !important;}
.lightbox-next{right:26px !important;}
.lightbox-prev::before{transform:rotate(-135deg); margin-left:5px;}
.lightbox-next::before{transform:rotate(45deg); margin-right:5px;}
.lightbox-thumbs{
  position:fixed !important;
  left:50% !important;
  bottom:22px !important;
  transform:translateX(-50%) !important;
  z-index:206 !important;
  display:flex !important;
  gap:8px !important;
  max-width:min(760px,90vw) !important;
  overflow-x:auto !important;
  padding:8px !important;
  background:rgba(20,12,7,.72) !important;
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px !important;
}
.lightbox-thumbs img{
  width:72px !important;
  height:52px !important;
  min-width:72px !important;
  object-fit:cover !important;
  border-radius:10px !important;
  opacity:.55 !important;
  cursor:pointer !important;
  border:2px solid transparent !important;
  background:#160f0a !important;
}
.lightbox-thumbs img.active{
  opacity:1 !important;
  border-color:var(--wood) !important;
}

@media(max-width:980px){
  .site-header{flex-wrap:wrap;}
  .header-tools{margin-left:auto;}
}
@media(max-width:640px){
  .header-tools{gap:6px !important;}
  .header-socials a{width:32px;height:32px;}
  .header-socials svg{width:16px;height:16px;}
  .language-select{min-width:52px;height:32px;font-size:12px !important;padding:0 6px !important;}
  .image-lightbox{padding:22px 54px 96px !important;}
  .lightbox-prev{left:8px !important;}
  .lightbox-next{right:8px !important;}
  .lightbox-arrow{width:42px !important;height:42px !important;border-radius:14px !important;}
  .lightbox-arrow::before{width:11px !important;height:11px !important;border-top-width:3px !important;border-right-width:3px !important;}
  .lightbox-thumbs img{width:58px !important;height:44px !important;min-width:58px !important;}
  .timeline-card img{width:100% !important;height:280px !important;}
}

/* === FINAL FIX: header nupud keskele + lightbox alt valge scrollbar ära === */
@media (min-width:981px){
  .site-header{
    display:grid !important;
    grid-template-columns:minmax(190px, 260px) 1fr minmax(150px, 220px) !important;
    align-items:center !important;
    column-gap:18px !important;
    justify-content:normal !important;
  }

  .brand{
    justify-self:start !important;
  }

  #mainNav{
    justify-self:center !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:auto !important;
  }

  .header-tools{
    justify-self:end !important;
    margin-left:0 !important;
  }
}

.lightbox-thumbs{
  scrollbar-width:none !important;
  -ms-overflow-style:none !important;
}

.lightbox-thumbs::-webkit-scrollbar{
  display:none !important;
  width:0 !important;
  height:0 !important;
}


/* === MEIST LEHT === */
.about-section {
  padding:10px 6% 80px;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:34px;
  align-items:start;
}

.about-content {
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:34px;
  padding:36px;
  box-shadow:var(--shadow);
}

.about-content h2 {
  font-size:clamp(30px,4vw,48px);
  line-height:1.05;
  margin-bottom:18px;
}

.about-content p {
  color:var(--muted);
  font-size:18px;
  margin-bottom:16px;
}

.about-highlights {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin-top:24px;
}

.about-highlights div {
  background:#f3e5d3;
  border:1px solid #ead2b6;
  border-radius:18px;
  padding:16px;
}

.about-highlights strong,
.about-highlights span {
  display:block;
}

.about-highlights strong {
  color:#53341f;
  font-size:16px;
  margin-bottom:6px;
}

.about-highlights span {
  color:var(--muted);
  font-size:14px;
}

.about-image {
  border-radius:34px;
  overflow:hidden;
  background:var(--paper);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}

.about-image img {
  width:100%;
  height:560px;
  object-fit:cover;
  object-position:center;
}

.about-image figcaption {
  padding:16px 20px;
  color:#4f321f;
  font-weight:900;
}

@media(max-width:980px){
  .about-section{
    grid-template-columns:1fr;
  }
  .about-image img{
    height:360px;
  }
  .about-highlights{
    grid-template-columns:1fr;
  }
}

@media(max-width:640px){
  .about-section{
    padding:10px 18px 60px;
  }
  .about-content{
    padding:24px;
    border-radius:26px;
  }
  .about-content p{
    font-size:16px;
  }
  .about-image{
    border-radius:26px;
  }
  .about-image img{
    height:280px;
  }
}