/* =========================================================
   VELMORA — Jak vybrat správnou postel
   /jak-vybrat-spravnou-postel/
   ========================================================= */

body.vm-guide-page {
  --vg-ink:#2f2a24;
  --vg-soft:#5e554b;
  --vg-cream:#f7f3ec;
  --vg-cream2:#eee5d9;
  --vg-line:rgba(78,62,44,.15);
  --vg-gold:#9b7a54;
  --vg-gold-dark:#765a3b;
  --vg-white:#fffdfa;
  --vg-shadow:0 24px 70px rgba(55,42,28,.10);
  --vg-serif:Georgia,"Times New Roman",serif;

  background:var(--vg-white);
  color:var(--vg-ink);
}

body.vm-guide-page #content-wrapper {
  overflow:clip;
}

body.vm-guide-page .content-inner,
body.vm-guide-page #content {
  max-width:none !important;
}

body.vm-guide-page .content-inner {
  padding-left:0 !important;
  padding-right:0 !important;
}

.vm-guide {
  position:relative;
  isolation:isolate;
  overflow:clip;

  background:
    radial-gradient(
      circle at 7% 3%,
      rgba(155,122,84,.07),
      transparent 28rem
    ),
    linear-gradient(
      180deg,
      #fffdfa 0%,
      #fff 55%,
      #fbf8f3 100%
    );
}

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

.vm-guide a {
  color:inherit;
}

.vm-guide__shell {
  width:min(1240px,calc(100% - 48px));
  margin:0 auto;
}

.vm-guide__eyebrow {
  display:inline-flex;
  align-items:center;
  gap:10px;

  margin:0 0 18px;

  font-size:12px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;

  color:var(--vg-gold-dark);
}

.vm-guide__eyebrow::before {
  content:"";
  width:32px;
  height:1px;
  background:currentColor;
  opacity:.7;
}

.vm-guide h1,
.vm-guide h2,
.vm-guide h3 {
  font-family:var(--vg-serif);
  font-weight:400;
  color:#2d2923;
}


/* =========================================================
   HERO
   ========================================================= */

.vm-guide__hero {
  min-height:80vh;
  padding:96px 0 74px;

  display:grid;
  align-items:center;

  position:relative;

  border-bottom:1px solid var(--vg-line);

  background:
    linear-gradient(
      115deg,
      #f9f5ee 0%,
      #efe6da 100%
    );
}

.vm-guide__hero::before {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.32;

  background:
    repeating-linear-gradient(
      7deg,
      transparent 0 30px,
      rgba(91,68,45,.035) 31px 32px
    );
}

.vm-guide__hero-grid {
  position:relative;
  z-index:1;

  display:grid;
  grid-template-columns:
    minmax(0,1.08fr)
    minmax(380px,.92fr);

  gap:80px;
  align-items:center;
}

.vm-guide__hero h1 {
  margin:0;
  max-width:850px;

  font-size:clamp(50px,6.3vw,94px);
  line-height:.98;
  letter-spacing:-.05em;
}

.vm-guide__hero-lead {
  max-width:700px;
  margin:30px 0 0;

  color:var(--vg-soft);

  font-size:clamp(17px,1.5vw,21px);
  line-height:1.75;
}

.vm-guide__hero-actions {
  display:flex;
  flex-wrap:wrap;
  gap:12px;

  margin-top:34px;
}

.vm-guide__btn {
  min-height:52px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:14px 23px;

  border:1px solid var(--vg-ink);
  border-radius:999px;

  text-decoration:none !important;

  font-size:13px;
  font-weight:700;
  letter-spacing:.07em;
  text-transform:uppercase;

  transition:
    transform .25s ease,
    background .25s ease,
    color .25s ease;
}

.vm-guide__btn:hover {
  transform:translateY(-2px);
}

.vm-guide__btn--dark {
  background:var(--vg-ink);
  color:#fff !important;
}

.vm-guide__btn--light {
  background:rgba(255,255,255,.46);
}

.vm-guide__hero-visual {
  position:relative;
  min-height:500px;
}


/* =========================================================
   HERO — PŮDORYS
   ========================================================= */

.vm-room-plan {
  position:absolute;
  inset:8% 1% 4% 4%;

  display:grid;
  place-items:center;

  perspective:1200px;
}

.vm-room-plan__floor {
  position:relative;

  width:min(94%,500px);
  aspect-ratio:4 / 3;

  border:1px solid rgba(89,67,44,.16);
  border-radius:22px;

  background:
    repeating-linear-gradient(
      0deg,
      transparent 0 39px,
      rgba(100,75,50,.045) 40px
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0 39px,
      rgba(100,75,50,.045) 40px
    ),
    rgba(255,255,255,.4);

  transform:
    rotateX(58deg)
    rotateZ(-7deg);

  box-shadow:
    0 34px 70px rgba(54,41,28,.10);
}

.vm-room-plan__bed {
  position:absolute;

  left:50%;
  top:50%;

  width:58%;
  height:48%;

  transform:translate(-50%,-50%);

  border:2px solid #9d7d58;
  border-radius:7px;

  background:
    linear-gradient(
      180deg,
      #e6d0b1 0 12%,
      #f8f2ea 12% 100%
    );

  box-shadow:
    inset 0 0 0 9px rgba(155,122,84,.075);
}

.vm-room-plan__bed::before {
  content:"";

  position:absolute;

  left:7%;
  right:7%;
  top:8%;

  height:19%;

  border-radius:7px;

  background:#fff;

  box-shadow:
    0 3px 10px rgba(45,34,23,.06);
}

.vm-room-plan__measure {
  position:absolute;

  font-family:var(--vg-serif);
  font-size:16px;

  color:var(--vg-gold-dark);
}

.vm-room-plan__measure--width {
  left:16%;
  right:16%;
  bottom:-36px;

  text-align:center;
}

.vm-room-plan__measure--width::before {
  content:"";

  position:absolute;

  top:-8px;
  left:0;
  right:0;

  height:1px;

  background:rgba(118,90,59,.44);
}

.vm-room-plan__measure--length {
  top:15%;
  bottom:15%;
  right:-44px;

  writing-mode:vertical-rl;
}

.vm-room-plan__measure--length::before {
  content:"";

  position:absolute;

  top:0;
  bottom:0;
  left:-9px;

  width:1px;

  background:rgba(118,90,59,.44);
}

.vm-room-plan__stamp {
  position:absolute;

  right:0;
  bottom:4%;

  width:145px;
  aspect-ratio:1;

  display:grid;
  place-items:center;

  border-radius:50%;

  border:1px solid rgba(70,53,36,.22);

  background:rgba(255,253,250,.72);

  backdrop-filter:blur(8px);

  font-family:var(--vg-serif);

  font-size:18px;
  line-height:1.15;

  text-align:center;

  transform:rotate(8deg);
}


/* =========================================================
   NAVIGAČNÍ BOX
   ========================================================= */

.vm-guide__quick {
  position:relative;
  z-index:3;

  margin-top:-28px;
}

.vm-guide__quick-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);

  overflow:hidden;

  color:#fff;
  background:var(--vg-ink);

  border-radius:18px;

  box-shadow:var(--vg-shadow);
}

.vm-guide__quick a {
  min-height:120px;

  padding:25px 28px;

  display:flex;
  flex-direction:column;
  justify-content:center;

  color:#fff;

  text-decoration:none;

  transition:background .2s ease;
}

.vm-guide__quick a:hover {
  background:rgba(255,255,255,.055);
}

.vm-guide__quick a + a {
  border-left:1px solid rgba(255,255,255,.10);
}

.vm-guide__quick strong {
  font-family:var(--vg-serif);

  font-size:24px;

  font-weight:400;
}

.vm-guide__quick span {
  margin-top:7px;

  color:rgba(255,255,255,.61);

  font-size:13px;

  line-height:1.45;
}


/* =========================================================
   OBECNÉ SEKCE
   ========================================================= */

.vm-guide__section {
  padding:120px 0;
}

.vm-guide__section--cream {
  background:var(--vg-cream);

  border-block:1px solid var(--vg-line);
}

.vm-guide__head {
  display:grid;
  grid-template-columns:.92fr 1.08fr;

  gap:76px;

  align-items:end;

  margin-bottom:56px;
}

.vm-guide__head h2 {
  margin:0;

  font-size:clamp(42px,5vw,72px);

  line-height:1.02;

  letter-spacing:-.035em;
}

.vm-guide__head p {
  margin:0;

  color:var(--vg-soft);

  font-size:16px;

  line-height:1.85;
}


/* =========================================================
   ROZMĚRY
   ========================================================= */

.vm-size-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}

.vm-size-card {
  position:relative;

  min-height:300px;

  padding:31px;

  overflow:hidden;

  cursor:pointer;

  border:1px solid var(--vg-line);
  border-radius:20px;

  background:#fff;

  transition:
    transform .25s ease,
    box-shadow .25s ease,
    border-color .25s ease;
}

.vm-size-card:hover {
  transform:translateY(-4px);

  box-shadow:
    0 18px 45px rgba(52,40,28,.08);
}

.vm-size-card.is-active {
  border-color:rgba(118,90,59,.56);

  box-shadow:
    0 18px 45px rgba(52,40,28,.08);
}

.vm-size-card__size {
  display:block;

  color:var(--vg-gold-dark);

  font-family:var(--vg-serif);

  font-size:clamp(42px,5vw,66px);

  line-height:.95;

  letter-spacing:-.04em;
}

.vm-size-card__title {
  margin:22px 0 10px;

  font-family:var(--vg-serif);

  font-size:27px;
}

.vm-size-card p {
  max-width:300px;

  margin:0;

  color:var(--vg-soft);

  font-size:14.5px;

  line-height:1.72;
}

.vm-size-card__shape {
  position:absolute;

  right:-22px;
  bottom:-20px;

  width:160px;
  height:118px;

  border:1px solid rgba(118,90,59,.17);

  border-radius:10px;

  transform:rotate(-8deg);
}

.vm-size-card__shape::before,
.vm-size-card__shape::after {
  content:"";

  position:absolute;

  border:1px solid rgba(118,90,59,.11);

  border-radius:7px;
}

.vm-size-card__shape::before {
  inset:13px;
}

.vm-size-card__shape::after {
  inset:28px;
}


/* =========================================================
   DŮLEŽITÉ BOXY
   ========================================================= */

.vm-important-box {
  margin-top:25px;

  padding:24px 26px;

  display:grid;
  grid-template-columns:auto 1fr;

  gap:18px;

  align-items:start;

  border:1px solid var(--vg-line);
  border-left:3px solid var(--vg-gold);

  border-radius:0 15px 15px 0;

  background:#fbf8f3;
}

.vm-important-box__number {
  min-width:70px;

  color:var(--vg-gold-dark);

  font-family:var(--vg-serif);

  font-size:32px;
}

.vm-important-box strong {
  display:block;

  margin-bottom:6px;

  font-size:15px;
}

.vm-important-box p {
  margin:0;

  color:var(--vg-soft);

  font-size:14.5px;

  line-height:1.72;
}


/* =========================================================
   PROSTOR KOLEM POSTELE
   ========================================================= */

.vm-space-layout {
  display:grid;
  grid-template-columns:.95fr 1.05fr;

  gap:64px;

  align-items:center;
}

.vm-space-visual {
  position:relative;

  min-height:430px;

  overflow:hidden;

  border:1px solid var(--vg-line);
  border-radius:24px;

  background:
    repeating-linear-gradient(
      0deg,
      transparent 0 42px,
      rgba(85,65,45,.035) 43px
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0 42px,
      rgba(85,65,45,.035) 43px
    ),
    #faf7f1;
}

.vm-space-bed {
  position:absolute;

  left:23%;
  right:23%;

  top:23%;
  bottom:18%;

  border:2px solid #a1805b;

  border-radius:8px;

  background:#f5ecdf;

  box-shadow:
    inset 0 0 0 10px rgba(155,122,84,.07);
}

.vm-space-bed::before {
  content:"";

  position:absolute;

  left:8%;
  right:8%;
  top:8%;

  height:15%;

  background:#fff;

  border-radius:6px;
}

.vm-space-arrow {
  position:absolute;

  top:48%;

  width:17%;
  height:1px;

  background:var(--vg-gold);
}

.vm-space-arrow::before,
.vm-space-arrow::after {
  content:"";

  position:absolute;

  top:-4px;

  width:8px;
  height:8px;

  border-top:1px solid var(--vg-gold);
  border-right:1px solid var(--vg-gold);
}

.vm-space-arrow::before {
  left:0;

  transform:rotate(-135deg);
}

.vm-space-arrow::after {
  right:0;

  transform:rotate(45deg);
}

.vm-space-arrow--left {
  left:3%;
}

.vm-space-arrow--right {
  right:3%;
}

.vm-space-label {
  position:absolute;

  top:41%;

  color:var(--vg-gold-dark);

  font-family:var(--vg-serif);

  font-size:20px;
}

.vm-space-label--left {
  left:5%;
}

.vm-space-label--right {
  right:5%;
}

.vm-space-copy h2 {
  margin:0;

  font-size:clamp(42px,4.7vw,68px);

  line-height:1.02;

  letter-spacing:-.035em;
}

.vm-space-copy > p {
  margin:24px 0 0;

  color:var(--vg-soft);

  font-size:16px;

  line-height:1.85;
}

.vm-space-list {
  margin:28px 0 0;

  padding:0;

  list-style:none;
}

.vm-space-list li {
  padding:15px 0;

  border-top:1px solid var(--vg-line);

  color:var(--vg-soft);

  line-height:1.65;
}

.vm-space-list strong {
  color:var(--vg-ink);
}


/* =========================================================
   VÝŠKA POSTELE
   ========================================================= */

.vm-height-layout {
  display:grid;
  grid-template-columns:
    minmax(330px,.86fr)
    minmax(0,1.14fr);

  gap:68px;

  align-items:center;
}

.vm-height-visual {
  min-height:470px;

  position:relative;

  overflow:hidden;

  border:1px solid var(--vg-line);

  border-radius:24px;

  background:
    linear-gradient(
      145deg,
      #fff,
      #eee5d9
    );
}

.vm-height-floor {
  position:absolute;

  left:0;
  right:0;
  bottom:68px;

  height:1px;

  background:rgba(78,62,44,.18);
}

.vm-height-bed {
  position:absolute;

  left:15%;
  right:15%;
  bottom:68px;

  height:150px;
}

.vm-height-bed__frame {
  position:absolute;

  left:0;
  right:0;

  bottom:28px;

  height:34px;

  z-index:4;

  border:1px solid rgba(88,67,45,.28);

  border-radius:5px;

  background:
    linear-gradient(
      90deg,
      #d9c09f,
      #ead7bc,
      #d7bd9c
    );

  transition:
    bottom .45s cubic-bezier(.2,.8,.2,1);
}

.vm-height-bed__mattress {
  position:absolute;

  left:2%;
  right:2%;

  bottom:62px;

  height:58px;

  z-index:3;

  border:1px solid rgba(88,67,45,.12);

  border-radius:12px 12px 6px 6px;

  background:#fffdfa;

  box-shadow:
    0 7px 16px rgba(53,40,28,.06);

  transition:
    bottom .45s cubic-bezier(.2,.8,.2,1);
}

.vm-height-bed__leg {
  position:absolute;

  bottom:0;

  width:16px;
  height:28px;

  z-index:2;

  background:#b78f63;

  transition:
    height .45s cubic-bezier(.2,.8,.2,1);
}

.vm-height-bed__leg--left {
  left:5%;
}

.vm-height-bed__leg--right {
  right:5%;
}


/* =========================================================
   MĚŘICÍ ČÁRA
   ========================================================= */

.vm-height-measure {
  position:absolute;

  left:7%;
  bottom:68px;

  width:1px;
  height:120px;

  z-index:10;

  background:var(--vg-gold);

  transition:
    height .45s cubic-bezier(.2,.8,.2,1);
}

.vm-height-measure::before,
.vm-height-measure::after {
  content:"";

  position:absolute;

  left:-5px;

  width:11px;
  height:1px;

  background:var(--vg-gold);
}

.vm-height-measure::before {
  top:0;
}

.vm-height-measure::after {
  bottom:0;
}

.vm-height-measure span {
  position:absolute;

  top:50%;

  left:auto !important;
  right:12px !important;

  transform:translateY(-50%);

  z-index:20;

  white-space:nowrap;

  padding:2px 5px;

  color:var(--vg-gold-dark);

  background:rgba(250,247,241,.94);

  border-radius:4px;

  font-family:var(--vg-serif);

  font-size:18px;
}


/* =========================================================
   MOŽNOSTI VÝŠKY
   ========================================================= */

.vm-height-options {
  display:grid;

  gap:12px;
}

.vm-height-option {
  padding:22px 24px;

  cursor:pointer;

  border:1px solid var(--vg-line);

  border-radius:16px;

  background:#fff;

  transition:.22s ease;
}

.vm-height-option:hover {
  transform:translateX(4px);
}

.vm-height-option.is-active {
  border-color:rgba(118,90,59,.5);

  background:#fbf7f1;
}

.vm-height-option strong {
  display:block;

  font-family:var(--vg-serif);

  font-size:29px;

  font-weight:400;
}

.vm-height-option span {
  display:block;

  margin-top:6px;

  color:var(--vg-soft);

  font-size:14px;

  line-height:1.6;
}

.vm-height-rule {
  margin-top:20px;

  padding:20px 22px;

  border-radius:14px;

  background:#e9dfd2;

  color:#51473d;

  line-height:1.7;

  font-size:14.5px;
}

.vm-height-rule strong {
  color:#322c25;
}


/* =========================================================
   ČELO
   ========================================================= */

.vm-headboard-grid {
  display:grid;

  grid-template-columns:repeat(3,1fr);

  gap:16px;
}

.vm-headboard-card {
  min-height:295px;

  padding:29px;

  border:1px solid var(--vg-line);

  border-radius:20px;

  background:#fff;
}

.vm-headboard-icon {
  position:relative;

  height:120px;

  margin-bottom:30px;

  border-bottom:1px solid rgba(78,62,44,.13);
}

.vm-headboard-icon::before {
  content:"";

  position:absolute;

  bottom:0;
  left:50%;

  width:70%;

  height:var(--hb-height,74px);

  transform:translateX(-50%);

  border:1px solid rgba(118,90,59,.30);

  border-radius:4px 4px 0 0;

  background:
    repeating-linear-gradient(
      90deg,
      rgba(120,86,51,.06) 0 2px,
      transparent 2px 19px
    ),
    linear-gradient(
      90deg,
      #dfc9aa,
      #ecd9be,
      #dcc4a3
    );
}

.vm-headboard-card h3 {
  margin:0 0 10px;

  font-size:28px;
}

.vm-headboard-card p {
  margin:0;

  color:var(--vg-soft);

  font-size:14.5px;

  line-height:1.72;
}

.vm-headboard-warning {
  margin-top:25px;

  padding:24px 26px;

  display:grid;

  grid-template-columns:40px 1fr;

  gap:15px;

  border:1px solid var(--vg-line);

  border-radius:16px;

  background:#f8f4ee;
}

.vm-headboard-warning__icon {
  color:var(--vg-gold-dark);

  font-family:var(--vg-serif);

  font-size:30px;
}

.vm-headboard-warning strong {
  display:block;

  margin-bottom:5px;
}

.vm-headboard-warning p {
  margin:0;

  color:var(--vg-soft);

  font-size:14.5px;

  line-height:1.7;
}


/* =========================================================
   ŠUPLÍKY
   ========================================================= */

.vm-storage-layout {
  display:grid;

  grid-template-columns:1.05fr .95fr;

  gap:58px;

  align-items:center;
}


/* CELÁ ILUSTRACE */

.vm-storage-visual {
  position:relative;

  min-height:410px;

  overflow:hidden;

  border:1px solid var(--vg-line);

  border-radius:24px;

  background:
    linear-gradient(
      145deg,
      #faf6ef,
      #ece2d5
    );
}


/* RÁM POSTELE */

.vm-storage-bed {
  position:absolute;

  left:12%;
  right:12%;

  top:28%;

  height:82px;

  z-index:5;

  border:1px solid rgba(88,67,45,.25);

  border-radius:7px;

  background:
    linear-gradient(
      90deg,
      #d7bd9a,
      #ead6b9,
      #d2b58f
    );

  box-shadow:
    0 10px 20px rgba(76,55,34,.06);
}


/* MATRACE */

.vm-storage-bed::before {
  content:"";

  position:absolute;

  left:3%;
  right:3%;

  top:-45px;

  height:44px;

  border:1px solid rgba(88,67,45,.12);

  border-radius:9px 9px 3px 3px;

  background:#fffdfa;

  box-shadow:
    0 5px 13px rgba(53,40,28,.05);
}


/* =========================================================
   JEDEN DLOUHÝ ŠUPLÍK
   ========================================================= */

.vm-storage-drawer-single {
  position:absolute;

  left:17%;
  right:17%;

  top:calc(28% + 73px);

  height:120px;

  z-index:3;

  transform:translateY(16px);

  transition:
    transform .55s cubic-bezier(.2,.8,.2,1);

  perspective:900px;
}


/* HORNÍ VNITŘNÍ ČÁST ŠUPLÍKU */

.vm-storage-drawer-single__inside {
  position:absolute;

  left:8px;
  right:8px;

  top:1px;

  height:48px;

  z-index:1;

  border:1px solid rgba(92,67,41,.18);

  background:
    linear-gradient(
      180deg,
      #c8a77d,
      #ddc09a
    );

  transform:
    perspective(500px)
    rotateX(64deg);

  transform-origin:
    bottom center;

  opacity:.82;
}


/* ČELO ŠUPLÍKU */

.vm-storage-drawer-single__front {
  position:absolute;

  left:0;
  right:0;

  top:31px;

  height:82px;

  z-index:2;

  overflow:hidden;

  border:1px solid rgba(88,67,45,.23);

  border-radius:3px 3px 6px 6px;

  background:
    repeating-linear-gradient(
      2deg,
      rgba(106,75,43,.035) 0 2px,
      transparent 2px 18px
    ),
    linear-gradient(
      90deg,
      #d9bd98,
      #ead2af,
      #d7b890
    );

  box-shadow:
    0 14px 24px rgba(61,45,29,.09);
}


/* JEMNÁ HRANA NA ČELE */

.vm-storage-drawer-single__front::after {
  content:"";

  position:absolute;

  left:5%;
  right:5%;

  bottom:15px;

  height:1px;

  background:
    rgba(105,76,45,.07);
}


/* MADLO */

.vm-storage-drawer-single__handle {
  position:absolute;

  top:17px;
  left:50%;

  width:50px;
  height:5px;

  transform:translateX(-50%);

  border-radius:999px;

  background:
    rgba(81,59,36,.25);

  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.25);
}


/* PO NAJETÍ SE ŠUPLÍK VYSUNE */

.vm-storage-layout:hover
.vm-storage-drawer-single {
  transform:translateY(73px);
}


/* TEXT */

.vm-storage-copy h2 {
  margin:0;

  font-size:clamp(42px,4.8vw,68px);

  line-height:1.02;

  letter-spacing:-.035em;
}

.vm-storage-copy > p {
  margin:24px 0 0;

  color:var(--vg-soft);

  font-size:16px;

  line-height:1.85;
}

.vm-storage-list {
  margin:28px 0 0;

  padding:0;

  list-style:none;
}

.vm-storage-list li {
  padding:15px 0;

  border-top:1px solid var(--vg-line);

  color:var(--vg-soft);

  line-height:1.65;
}

.vm-storage-list strong {
  color:var(--vg-ink);
}


/* =========================================================
   MASIV
   ========================================================= */

.vm-solid-grid {
  display:grid;

  grid-template-columns:.9fr 1.1fr;

  gap:70px;

  align-items:center;
}

.vm-solid-art {
  position:relative;

  min-height:430px;

  overflow:hidden;

  border-radius:24px;

  border:1px solid var(--vg-line);

  background:#e4d1b5;
}

.vm-solid-board {
  position:absolute;

  left:12%;
  right:12%;

  top:22%;

  height:55%;

  border-radius:12px;

  border:1px solid rgba(80,58,36,.18);

  background:
    radial-gradient(
      ellipse at 27% 47%,
      rgba(86,59,32,.14) 0 4%,
      transparent 4.5%
    ),
    radial-gradient(
      ellipse at 71% 61%,
      rgba(86,59,32,.11) 0 3.5%,
      transparent 4%
    ),
    repeating-linear-gradient(
      4deg,
      rgba(114,80,45,.085) 0 2px,
      transparent 2px 15px
    ),
    linear-gradient(
      90deg,
      #d9bd98,
      #ead3b3,
      #d7bb96
    );

  box-shadow:
    0 26px 50px rgba(65,45,26,.12);
}

.vm-solid-ring {
  position:absolute;

  border:1px solid rgba(86,59,32,.14);

  border-radius:48% 52% 43% 57%;
}

.vm-solid-ring--1 {
  width:180px;
  height:125px;

  right:8%;
  bottom:6%;

  transform:rotate(-14deg);
}

.vm-solid-ring--2 {
  width:130px;
  height:90px;

  right:12%;
  bottom:10%;

  transform:rotate(12deg);
}

.vm-solid-copy h2 {
  margin:0;

  font-size:clamp(42px,4.8vw,68px);

  line-height:1.02;

  letter-spacing:-.035em;
}

.vm-solid-copy p {
  margin:24px 0 0;

  color:var(--vg-soft);

  font-size:16px;

  line-height:1.85;
}

.vm-solid-highlight {
  margin-top:28px;

  padding:22px 24px;

  border-left:2px solid var(--vg-gold);

  background:#f8f4ed;

  color:var(--vg-soft);

  line-height:1.72;
}

.vm-solid-highlight strong {
  color:var(--vg-ink);
}


/* =========================================================
   CHECKLIST
   ========================================================= */

.vm-check-section {
  padding:120px 0;

  background:#f1e8dc;

  border-block:1px solid var(--vg-line);
}

.vm-check-head {
  max-width:850px;

  margin-bottom:54px;
}

.vm-check-head h2 {
  margin:0;

  font-size:clamp(44px,5vw,72px);

  line-height:1.02;

  letter-spacing:-.035em;
}

.vm-check-grid {
  display:grid;

  grid-template-columns:repeat(2,1fr);

  gap:14px;
}

.vm-check {
  display:grid;

  grid-template-columns:54px 1fr;

  gap:17px;

  padding:25px;

  border:1px solid rgba(78,62,44,.13);

  border-radius:17px;

  background:rgba(255,255,255,.48);
}

.vm-check__num {
  width:50px;
  height:50px;

  display:grid;
  place-items:center;

  border:1px solid rgba(118,90,59,.25);

  border-radius:50%;

  color:var(--vg-gold-dark);

  font-family:var(--vg-serif);
}

.vm-check strong {
  display:block;

  margin:2px 0 6px;

  font-size:15px;
}

.vm-check p {
  margin:0;

  color:var(--vg-soft);

  font-size:14px;

  line-height:1.65;
}


/* =========================================================
   ZÁVĚR
   ========================================================= */

.vm-guide__final {
  padding:124px 0;

  text-align:center;
}

.vm-guide__final-inner {
  max-width:950px;

  margin:0 auto;
}

.vm-guide__final h2 {
  margin:0;

  font-size:clamp(46px,6vw,86px);

  line-height:1;

  letter-spacing:-.045em;
}

.vm-guide__final p {
  max-width:720px;

  margin:27px auto 0;

  color:var(--vg-soft);

  font-size:16px;

  line-height:1.82;
}

.vm-guide__final-rule {
  max-width:760px;

  margin:30px auto 0;

  padding:23px 26px;

  border-top:1px solid var(--vg-line);

  border-bottom:1px solid var(--vg-line);

  color:#433a31;

  font-family:var(--vg-serif);

  font-size:24px;

  line-height:1.4;
}

.vm-guide__final-actions {
  display:flex;
  justify-content:center;
  flex-wrap:wrap;

  gap:12px;

  margin-top:34px;
}


/* =========================================================
   PROGRESS
   ========================================================= */

.vm-guide-progress {
  position:fixed;

  top:0;
  left:0;

  z-index:99999;

  width:100%;
  height:3px;

  pointer-events:none;
}

.vm-guide-progress span {
  display:block;

  width:100%;
  height:100%;

  transform:scaleX(0);

  transform-origin:left center;

  background:var(--vg-gold);
}


/* =========================================================
   REVEAL
   ========================================================= */

.vm-guide-reveal {
  opacity:0;

  transform:translateY(25px);

  transition:
    opacity .72s ease,
    transform .72s cubic-bezier(.2,.75,.25,1);
}

.vm-guide-reveal.is-visible {
  opacity:1;

  transform:translateY(0);
}

.vm-guide-reveal[data-delay="1"] {
  transition-delay:.08s;
}

.vm-guide-reveal[data-delay="2"] {
  transition-delay:.16s;
}

.vm-guide-reveal[data-delay="3"] {
  transition-delay:.24s;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width:980px) {

  .vm-guide__shell {
    width:min(100% - 34px,760px);
  }

  .vm-guide__hero {
    min-height:auto;

    padding:78px 0 58px;
  }

  .vm-guide__hero-grid,
  .vm-guide__head,
  .vm-space-layout,
  .vm-height-layout,
  .vm-storage-layout,
  .vm-solid-grid {
    grid-template-columns:1fr;
  }

  .vm-guide__hero-grid {
    gap:35px;
  }

  .vm-guide__hero-visual {
    min-height:380px;
  }

  .vm-guide__quick-grid {
    grid-template-columns:1fr 1fr;
  }

  .vm-guide__quick a:nth-child(3) {
    border-left:0;

    border-top:1px solid rgba(255,255,255,.10);
  }

  .vm-guide__quick a:nth-child(4) {
    border-top:1px solid rgba(255,255,255,.10);
  }

  .vm-guide__head {
    gap:25px;
  }

  .vm-size-grid,
  .vm-headboard-grid {
    grid-template-columns:1fr;
  }

  .vm-space-layout,
  .vm-height-layout,
  .vm-storage-layout,
  .vm-solid-grid {
    gap:38px;
  }

  .vm-check-grid {
    grid-template-columns:1fr;
  }
}


/* =========================================================
   MOBIL
   ========================================================= */

@media (max-width:640px) {

  .vm-guide__shell {
    width:min(100% - 24px,560px);
  }

  .vm-guide__hero {
    padding-top:56px;
  }

  .vm-guide__hero h1 {
    font-size:clamp(44px,14vw,62px);
  }

  .vm-guide__hero-lead {
    margin-top:22px;

    font-size:16px;
  }

  .vm-guide__hero-actions {
    flex-direction:column;
  }

  .vm-guide__btn {
    width:100%;
  }

  .vm-guide__hero-visual {
    min-height:300px;
  }

  .vm-room-plan__stamp {
    width:112px;

    font-size:15px;
  }

  .vm-guide__quick {
    margin-top:-8px;
  }

  .vm-guide__quick-grid {
    grid-template-columns:1fr;
  }

  .vm-guide__quick a + a {
    border-left:0;

    border-top:1px solid rgba(255,255,255,.10);
  }

  .vm-guide__section,
  .vm-check-section {
    padding:86px 0;
  }

  .vm-important-box {
    grid-template-columns:1fr;
  }

  .vm-important-box__number {
    min-width:0;
  }

  .vm-space-visual {
    min-height:330px;
  }

  .vm-height-visual {
    min-height:350px;
  }

  .vm-storage-visual {
    min-height:340px;
  }

  .vm-storage-drawer-single {
    left:13%;
    right:13%;
  }

  .vm-storage-layout:hover
  .vm-storage-drawer-single {
    transform:translateY(62px);
  }

  .vm-solid-art {
    min-height:320px;
  }

  .vm-check {
    grid-template-columns:45px 1fr;

    padding:21px 18px;
  }

  .vm-check__num {
    width:42px;
    height:42px;
  }

  .vm-guide__final {
    padding:90px 0;
  }

  .vm-guide__final-rule {
    font-size:21px;
  }
}