/* Best Beans – bestbeans.eu
   Värvid on võetud 2026. aasta pakenditelt: kreemjas ülaosa, kitsas metallik-/sidrunriba ja iga kohvi oma alumine toon. */

:root {
  --paber: #FAF8EB;        /* lehe taust */
  --kreem: #F3EECE;        /* pakendi ülaosa */
  --kuld: #A8832A;         /* sõnamärk (pakendi kuld, loetavuse jaoks tumedam) */
  --tekst: #33241F;        /* põhitekst – kohvipruun */
  --tekst-pehme: #6B5B52;
  --joon: #DDD6B8;

  --grafiit: #504C49;      /* Classic */
  --pruun: #4F3830;        /* Supreme */
  --bordoo: #7B333E;       /* Superiore */
  --sidrun: #D1C815;       /* Supreme/Superiore riba ja nimi */
  --hobe: #CFCAC6;         /* Classic riba ja nimi */
  --tume: #3B2A24;         /* ärikliendi plokk ja jalus */

  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Jost", "Futura", "Century Gothic", "Avenir Next", system-ui, sans-serif;

  --raam: 1180px;
  --vahe: clamp(4rem, 8vw, 7rem);
}

*,
*::before,
*::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paber);
  color: var(--tekst);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-weight: 400;
}

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

a { color: inherit; text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 3px solid var(--sidrun); outline-offset: 3px; }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 600;
  font-variation-settings: "SOFT" 100;
  line-height: 1.1;
  margin: 0;
}

h2 { font-size: clamp(2rem, 3.6vw, 2.9rem); letter-spacing: -.01em; }
h3 { font-size: 1.35rem; }

p { margin: 0; }

.raam { width: min(100% - 2.5rem, var(--raam)); margin-inline: auto; }
.kitsas { max-width: 760px; }

.peidus,
.hyppa:not(:focus) {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.hyppa:focus { position: fixed; top: .75rem; left: .75rem; z-index: 10; background: var(--tekst); color: var(--paber); padding: .6rem 1rem; }

/* ---------- Päis ---------- */

.pais { background: var(--paber); border-bottom: 1px solid var(--joon); }
.pais__rida { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: 1.1rem; }

.sonamark { display: inline-flex; flex-direction: column; align-items: flex-start; text-decoration: none; color: var(--kuld); line-height: 1; }
.sonamark__nimi {
  font-family: var(--serif);
  font-variation-settings: "SOFT" 0;
  font-weight: 500;
  font-size: 1.6rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.sonamark__alla {
  font-family: var(--serif);
  font-size: .72rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  margin-top: .35rem;
  padding-top: .3rem;
  border-top: 1px solid currentColor;
}

.menyy { display: flex; gap: 1.75rem; font-weight: 500; font-size: .98rem; }
.menyy a { text-decoration: none; padding-block: .3rem; }
.menyy a:hover { text-decoration: underline; }

/* ---------- Nupud ---------- */

.nupud { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }

.nupp {
  display: inline-block;
  font: 500 1rem/1 var(--sans);
  padding: .95rem 1.4rem;
  border: 1.5px solid var(--tekst);
  border-radius: 3px;
  text-decoration: none;
  color: var(--tekst);
  background: transparent;
}
.nupp:hover { background: var(--kreem); }
.nupp--taidetud { background: var(--tekst); color: var(--paber); }
.nupp--taidetud:hover { background: var(--pruun); border-color: var(--pruun); }
.nupp--hele { border-color: var(--paber); color: var(--paber); }
.nupp--hele:hover { background: var(--paber); color: var(--tume); }

/* ---------- Esileht ---------- */

.esi { padding-block: clamp(3rem, 7vw, 6rem) clamp(2rem, 4vw, 3.5rem); }
.esi__rida { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(2rem, 5vw, 5rem); align-items: end; }

.esi h1 {
  font-size: clamp(2.9rem, 6.4vw, 5.4rem);
  line-height: 1.02;
  letter-spacing: -.02em;
  max-width: 11ch;
}
.juht { font-size: 1.2rem; line-height: 1.6; color: var(--tekst-pehme); max-width: 34em; margin-top: 1.5rem; }

.esi__pakid {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  border-bottom: 6px solid var(--sidrun);
  padding-bottom: 0;
}
.esi__pakk { flex: 0 1 auto; margin-inline: -.9rem; }
.esi__pakk img {
  height: clamp(250px, 32vw, 440px);
  width: auto;
  filter: drop-shadow(0 14px 18px rgba(51, 36, 31, .16));
  transition: transform .25s ease;
}
.esi__pakk:hover img,
.esi__pakk:focus-visible img { transform: translateY(-8px); }
.esi__pakk:nth-child(2) { position: relative; z-index: 1; }

@media (prefers-reduced-motion: no-preference) {
  .esi__pakk img { animation: tousu .8s cubic-bezier(.2, .7, .2, 1) both; }
  .esi__pakk:nth-child(2) img { animation-delay: .1s; }
  .esi__pakk:nth-child(3) img { animation-delay: .2s; }
}
@keyframes tousu {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: none; }
}

/* ---------- Tooteribad ----------
   Iga riba kordab pakendi ülesehitust: kreemjas ülaosa, kitsas riba, kohvi oma toon. Pakk seisab piiri peal. */

.toode {
  --jaotus: clamp(170px, 20vw, 240px);
  --riba: var(--sidrun);
  --toon: var(--pruun);
  --nimi: var(--sidrun);
  background:
    linear-gradient(to bottom,
      var(--paber) 0 var(--jaotus),
      var(--riba) var(--jaotus) calc(var(--jaotus) + 6px),
      var(--toon) calc(var(--jaotus) + 6px) 100%);
  color: var(--paber);
  padding-bottom: var(--vahe);
}
.toode--classic { --riba: var(--hobe); --toon: var(--grafiit); --nimi: var(--hobe); }
.toode--supreme { --toon: var(--pruun); }
.toode--superiore { --toon: var(--bordoo); }

.toode__rida {
  display: grid;
  grid-template-columns: minmax(200px, 360px) minmax(0, 1fr);
  grid-template-rows: var(--jaotus) auto;
  column-gap: clamp(2rem, 6vw, 6rem);
}

.toode__roll {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  padding-bottom: 1.1rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  color: var(--tekst);
}

.toode__pakk {
  grid-column: 1;
  grid-row: 1 / span 2;
  margin: 0;
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
}
.toode__pakk img {
  width: 100%;
  max-width: 330px;
  margin-inline: auto;
  filter: drop-shadow(0 22px 26px rgba(0, 0, 0, .28));
}

.toode__tekst { grid-column: 2; grid-row: 2; padding-top: clamp(1.75rem, 3vw, 2.5rem); max-width: 40rem; }

/* keskmine riba peegelpildis, et kolm järjestikust riba ei korduks üks-ühele */
.toode--supreme .toode__rida { grid-template-columns: minmax(0, 1fr) minmax(200px, 360px); }
.toode--supreme .toode__roll,
.toode--supreme .toode__tekst { grid-column: 1; justify-self: end; width: 100%; max-width: 40rem; }
.toode--supreme .toode__pakk { grid-column: 2; }

.toode__nimi {
  font-size: clamp(4rem, 10vw, 8.5rem);
  font-weight: 700;
  line-height: .9;
  letter-spacing: -.025em;
  color: var(--nimi);
}

.toode__kirjeldus { font-size: 1.2rem; line-height: 1.6; margin-top: 1.5rem; max-width: 34em; }

.andmed { margin: 2.25rem 0 0; display: grid; gap: 0; border-top: 1px solid rgba(250, 248, 235, .28); }
.andmed > div {
  display: grid;
  grid-template-columns: 9.5rem 1fr;
  gap: 1rem;
  padding-block: .7rem;
  border-bottom: 1px solid rgba(250, 248, 235, .28);
}
.andmed dt { font-weight: 500; opacity: .78; }
.andmed dd { margin: 0; }

/* ---------- Üldplokid ---------- */

.plokk { padding-block: var(--vahe); }
.plokk__pais { max-width: 42rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.plokk__pais p { margin-top: 1rem; font-size: 1.15rem; color: var(--tekst-pehme); }

/* ---------- Võrdlus ---------- */

.tabel-kast { overflow-x: auto; }
.vordlus { width: 100%; min-width: 560px; table-layout: fixed; border-collapse: collapse; font-size: 1.02rem; }
.vordlus col { width: 26%; }
.vordlus col.v-silt { width: 22%; }
.vordlus th,
.vordlus td { text-align: left; vertical-align: top; padding: 1rem 1rem 1rem 0; border-bottom: 1px solid var(--joon); }
.vordlus tbody th { font-weight: 500; color: var(--tekst-pehme); }
.vordlus thead th {
  font-family: var(--serif);
  font-variation-settings: "SOFT" 100;
  font-size: 1.7rem;
  font-weight: 600;
  padding-top: 1.1rem;
  border-top: 6px solid;
  border-bottom-color: var(--tekst);
}
.vordlus thead td { border-bottom-color: var(--tekst); }
.v-classic { border-top-color: var(--grafiit) !important; }
.v-supreme { border-top-color: var(--pruun) !important; }
.v-superiore { border-top-color: var(--bordoo) !important; }

/* ---------- Standard ---------- */

.plokk--standard { background: var(--kreem); }
.standard { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 3.5rem); }
.standard > div { border-top: 1.5px solid var(--tekst); padding-top: 1.25rem; }
.standard h3 { margin-bottom: .75rem; }
.standard p { color: var(--tekst-pehme); }

.naitaja { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1.5rem; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--joon); }
.naitaja__arv { font-family: var(--serif); font-weight: 700; font-size: clamp(2.6rem, 5vw, 3.6rem); line-height: 1; }
.naitaja__selgitus { max-width: 32em; color: var(--tekst-pehme); }

/* ---------- Kust osta ---------- */

.muujad { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 3.5rem); }
.muujad__grupp h3 { padding-bottom: .6rem; border-bottom: 1.5px solid var(--tekst); }
.muujad__grupp > p { color: var(--tekst-pehme); margin-top: .8rem; font-size: .98rem; }
.muujad ul { list-style: none; margin: 1rem 0 0; padding: 0; }
.muujad li { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-block: .75rem; border-bottom: 1px solid var(--joon); }
.muujad li a { font-weight: 500; font-size: 1.1rem; text-decoration: none; }
.muujad li a:hover { text-decoration: underline; }
.muujad li span { font-size: .9rem; color: var(--tekst-pehme); text-align: right; }
.muujad__lisa { margin-top: 2.5rem; color: var(--tekst-pehme); }

/* ---------- Ärikliendile ---------- */

.ari { background: var(--tume); color: var(--paber); padding-block: var(--vahe); }
.ari h2 { max-width: 22ch; }
.ari__veerud { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 6vw, 6rem); margin-top: clamp(2rem, 4vw, 3rem); }
.ari__veerud > div { display: flex; flex-direction: column; align-items: flex-start; border-top: 1.5px solid var(--sidrun); padding-top: 1.25rem; }
.ari__veerud .nupp { margin-top: auto; }
.ari__veerud p { margin-bottom: 1.75rem; }
.ari__veerud h3 { color: var(--sidrun); margin-bottom: .8rem; }
.ari__veerud p { max-width: 32em; opacity: .9; }
.ari__kontakt { margin-top: 3rem; font-size: 1.15rem; }

/* ---------- Küsimused ---------- */

details { border-bottom: 1px solid var(--joon); }
details:first-of-type { border-top: 1px solid var(--joon); }
summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--serif);
  font-variation-settings: "SOFT" 100;
  font-weight: 600;
  font-size: 1.3rem;
  padding: 1.2rem 2.5rem 1.2rem 0;
  position: relative;
}
summary::-webkit-details-marker { display: none; }
summary::after {
  content: "+";
  position: absolute; right: .25rem; top: 50%;
  transform: translateY(-50%);
  font-family: var(--sans); font-weight: 400; font-size: 1.6rem;
  transition: transform .2s ease;
}
details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
details p { padding-bottom: 1.3rem; max-width: 38em; color: var(--tekst-pehme); }

/* ---------- Jalus ---------- */

.jalus { background: var(--tume); color: rgba(250, 248, 235, .82); border-top: 1px solid rgba(250, 248, 235, .14); padding-block: 3rem; font-size: .95rem; }
.jalus__rida { display: grid; grid-template-columns: 1.2fr 1.4fr 1fr auto; gap: 2rem; align-items: start; }
.sonamark--jalus { color: var(--kreem); }
.jalus__aasta { justify-self: end; }

/* ---------- Kitsad ekraanid ---------- */

@media (max-width: 900px) {
  .esi__rida { grid-template-columns: 1fr; }
  .esi__pakid { margin-top: 1rem; }
  .standard, .muujad { grid-template-columns: 1fr; }
  .ari__veerud { grid-template-columns: 1fr; }
  .jalus__rida { grid-template-columns: 1fr 1fr; }
  .jalus__aasta { justify-self: start; }
}

@media (max-width: 720px) {
  .pais__rida { flex-direction: column; align-items: flex-start; gap: .8rem; }
  .menyy { gap: 1.25rem; overflow-x: auto; width: 100%; font-size: .95rem; }

  .toode { --jaotus: 250px; }
  .toode__rida,
  .toode--supreme .toode__rida { grid-template-columns: 1fr; grid-template-rows: auto auto auto; }
  .toode__roll,
  .toode--supreme .toode__roll { grid-column: 1; grid-row: 1; align-self: start; justify-self: start; padding: 2rem 0 0; }
  .toode__pakk,
  .toode--supreme .toode__pakk { grid-column: 1; grid-row: 2; padding-top: 1rem; }
  .toode__pakk img { max-width: 190px; }
  .toode__tekst,
  .toode--supreme .toode__tekst { grid-column: 1; grid-row: 3; }
  .andmed > div { grid-template-columns: 1fr; gap: .1rem; }
  .jalus__rida { grid-template-columns: 1fr; }
}

.plokk--kkk { padding-top: 0; }