@charset "UTF-8";
/* =========================================================
   VELMORA
   INTERAKTIVNÍ BANNER — JAK VYBRAT SPRÁVNOU POSTEL
   ========================================================= */
/* ---------------------------------------------------------
   MOUNT WRAPPER
   DŮLEŽITÉ: drží banner mimo produktové gridy/carousely
   --------------------------------------------------------- */
.vm-pick-mount {
  display:block !important;
  width:100% !important;
  max-width:none !important;
  clear:both !important;
  float:none !important;
  flex:0 0 100% !important;
  grid-column:1 / -1 !important;
  position:relative;
}
/* =========================================================
   BANNER
   ========================================================= */
.vm-pick-banner {
  --vp-ink:#2f2a24;
  --vp-soft:#655b50;
  --vp-cream:#f7f2eb;
  --vp-cream-dark:#e9dfd2;
  --vp-line:rgba(76,58,39,.15);
  --vp-gold:#9b7954;
  --vp-gold-dark:#74583a;
  --vp-white:#fffdfa;
  --vp-serif:Georgia,"Times New Roman",serif;
  display:block;
  width:min(1240px,calc(100% - 40px));
  margin:70px auto 80px;
  position:relative;
  overflow:hidden;
  border:1px solid var(--vp-line);
  border-radius:28px;
  background:
    radial-gradient(
      circle at 90% 10%,
      rgba(155,121,84,.13),
      transparent 36%
    ),
    linear-gradient(
      120deg,
      #faf7f1 0%,
      #f1e9de 100%
    );
  box-shadow:
    0 28px 75px rgba(55,42,28,.08);
  color:var(--vp-ink);
}
.vm-pick-banner *,
.vm-pick-banner *::before,
.vm-pick-banner *::after {
  box-sizing:border-box;
}
/* jemná textura */
.vm-pick-banner::before {
  content:"";
  position:absolute;
  inset:0;
  opacity:.25;
  pointer-events:none;
  background:
    repeating-linear-gradient(
      7deg,
      transparent 0 30px,
      rgba(95,69,43,.025) 31px 32px
    );
}
/* =========================================================
   HLAVNÍ LAYOUT
   ========================================================= */
.vm-pick-inner {
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:
    minmax(320px,.9fr)
    minmax(480px,1.1fr);
  gap:54px;
  padding:56px;
}
/* =========================================================
   LEVÁ ČÁST
   ========================================================= */
.vm-pick-copy {
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.vm-pick-eyebrow {
  display:flex;
  align-items:center;
  gap:11px;
  margin-bottom:19px;
  color:var(--vp-gold-dark);
  font-size:11px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.vm-pick-eyebrow::before {
  content:"";
  width:34px;
  height:1px;
  flex:0 0 34px;
  background:currentColor;
}
.vm-pick-title {
  max-width:540px;
  margin:0;
  color:#2d2822;
  font-family:var(--vp-serif);
  font-size:clamp(44px,4.3vw,68px);
  font-weight:400;
  line-height:1;
  letter-spacing:-.04em;
}
.vm-pick-lead {
  max-width:530px;
  margin:24px 0 0;
  color:var(--vp-soft);
  font-size:15.5px;
  line-height:1.75;
}
/* =========================================================
   3 BODY
   ========================================================= */
.vm-pick-features {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1px;
  margin-top:29px;
  overflow:hidden;
  border:1px solid var(--vp-line);
  border-radius:15px;
  background:var(--vp-line);
}
.vm-pick-feature {
  min-height:78px;
  padding:16px 18px;
  background:
    rgba(255,255,255,.56);
}
.vm-pick-feature strong {
  display:block;
  margin-bottom:5px;
  color:var(--vp-ink);
  font-family:var(--vp-serif);
  font-size:20px;
  font-weight:400;
}
.vm-pick-feature span {
  color:var(--vp-soft);
  font-size:12px;
  line-height:1.45;
}
/* =========================================================
   CTA
   ========================================================= */
.vm-pick-cta {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  width:max-content;
  min-height:52px;
  margin-top:27px;
  padding:13px 23px;
  border:1px solid var(--vp-ink);
  border-radius:999px;
  background:var(--vp-ink);
  color:#fff !important;
  text-decoration:none !important;
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  transition:
    transform .25s ease,
    box-shadow .25s ease,
    background .25s ease;
}
.vm-pick-cta:hover {
  transform:translateY(-2px);
  background:#453d34;
  box-shadow:
    0 12px 26px rgba(45,38,31,.15);
}
.vm-pick-cta-arrow {
  font-size:19px;
  line-height:1;
}
/* =========================================================
   INTERAKTIVNÍ PANEL
   ========================================================= */
.vm-pick-builder {
  min-width:0;
  padding:24px;
  border:1px solid rgba(72,55,38,.13);
  border-radius:22px;
  background:
    rgba(255,253,250,.75);
  box-shadow:
    0 18px 48px rgba(56,42,28,.06);
  backdrop-filter:blur(8px);
}
.vm-pick-builder-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-bottom:17px;
}
.vm-pick-builder-title {
  color:var(--vp-soft);
  font-size:11px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.vm-pick-builder-badge {
  padding:7px 11px;
  border:1px solid var(--vp-line);
  border-radius:999px;
  color:var(--vp-gold-dark);
  font-size:9.5px;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
}
/* =========================================================
   TABS
   ========================================================= */
.vm-pick-tabs {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:6px;
  padding:5px;
  border-radius:13px;
  background:#eee5da;
}
.vm-pick-tab {
  min-height:43px;
  padding:8px 9px;
  cursor:pointer;
  border:0;
  border-radius:10px;
  background:transparent;
  color:#6d6155;
  font:inherit;
  font-size:12px;
  font-weight:700;
  transition:
    background .2s ease,
    color .2s ease,
    box-shadow .2s ease,
    transform .2s ease;
}
.vm-pick-tab:hover {
  color:var(--vp-ink);
}
.vm-pick-tab.is-active {
  background:#fff;
  color:var(--vp-ink);
  box-shadow:
    0 5px 14px rgba(54,41,28,.08);
}
/* =========================================================
   SCÉNA
   ========================================================= */
.vm-pick-stage {
  position:relative;
  height:330px;
  margin-top:17px;
  overflow:hidden;
  border:1px solid rgba(72,55,38,.11);
  border-radius:17px;
  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(255,255,255,.95),
      transparent 58%
    ),
    linear-gradient(
      180deg,
      #f7f2eb,
      #ece1d4
    );
}
.vm-pick-stage::before {
  content:"";
  position:absolute;
  top:-80px;
  right:-55px;
  width:280px;
  height:360px;
  opacity:.35;
  transform:rotate(22deg);
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.9),
      transparent
    );
}
.vm-pick-floor {
  position:absolute;
  left:0;
  right:0;
  bottom:43px;
  height:1px;
  background:
    rgba(72,55,38,.16);
}
/* =========================================================
   POSTEL
   ========================================================= */
.vm-pick-bed {
  --bed-width:72%;
  --leg-height:32px;
  --frame-bottom:32px;
  --mattress-bottom:66px;
  --head-height:108px;
  position:absolute;
  left:50%;
  bottom:43px;
  width:var(--bed-width);
  height:215px;
  transform:
    translateX(-50%);
  transition:
    width .55s cubic-bezier(.2,.8,.2,1);
}
/* =========================================================
   HLAVNÍ ČELO
   ========================================================= */
.vm-pick-headboard {
  position:absolute;
  left:4%;
  right:4%;
  bottom:var(--frame-bottom);
  height:var(--head-height);
  z-index:1;
  border:
    1px solid rgba(89,64,39,.25);
  border-radius:
    3px 3px 0 0;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(91,62,34,.06) 0 2px,
      transparent 2px 28px
    ),
    linear-gradient(
      90deg,
      #c7a67c,
      #dec29c,
      #c7a67c
    );
  transition:
    height .5s cubic-bezier(.2,.8,.2,1),
    bottom .5s cubic-bezier(.2,.8,.2,1);
}
.vm-pick-headboard::before {
  content:"";
  position:absolute;
  left:-2%;
  right:-2%;
  top:-10px;
  height:20px;
  border:
    1px solid rgba(89,64,39,.20);
  border-radius:3px;
  background:
    linear-gradient(
      90deg,
      #b99368,
      #d0ae84,
      #b99368
    );
}
/* =========================================================
   MATRACE
   ========================================================= */
.vm-pick-mattress {
  position:absolute;
  left:3%;
  right:3%;
  bottom:var(--mattress-bottom);
  height:55px;
  z-index:4;
  border:
    1px solid rgba(65,50,35,.11);
  border-radius:
    11px 11px 5px 5px;
  background:
    linear-gradient(
      180deg,
      #fff,
      #f2ede6
    );
  box-shadow:
    0 7px 16px rgba(53,40,28,.06);
  transition:
    bottom .5s cubic-bezier(.2,.8,.2,1);
}
.vm-pick-mattress::after {
  content:"";
  position:absolute;
  left:16%;
  right:5%;
  top:10px;
  height:29px;
  border-radius:
    50% 10px 10px 45%;
  background:
    linear-gradient(
      180deg,
      rgba(242,235,225,.96),
      rgba(226,215,201,.76)
    );
  transform:
    rotate(1deg);
}
/* =========================================================
   RÁM
   ========================================================= */
.vm-pick-frame {
  position:absolute;
  left:0;
  right:0;
  bottom:var(--frame-bottom);
  height:36px;
  z-index:5;
  border:
    1px solid rgba(84,61,38,.24);
  border-radius:4px;
  background:
    repeating-linear-gradient(
      3deg,
      rgba(93,64,35,.045) 0 2px,
      transparent 2px 18px
    ),
    linear-gradient(
      90deg,
      #b89165,
      #d4b38b,
      #b99266
    );
  transition:
    bottom .5s cubic-bezier(.2,.8,.2,1);
}
/* =========================================================
   NOHY
   ========================================================= */
.vm-pick-leg {
  position:absolute;
  bottom:0;
  width:18px;
  height:var(--leg-height);
  z-index:3;
  background:#ac8156;
  transition:
    height .5s cubic-bezier(.2,.8,.2,1);
}
.vm-pick-leg--left {
  left:6%;
}
.vm-pick-leg--right {
  right:6%;
}
/* =========================================================
   MĚŘENÍ ŠÍŘKY
   ========================================================= */
.vm-pick-measure {
  position:absolute;
  left:50%;
  bottom:17px;
  width:72%;
  height:1px;
  transform:
    translateX(-50%);
  background:
    var(--vp-gold);
  transition:
    width .55s cubic-bezier(.2,.8,.2,1);
}
.vm-pick-measure::before,
.vm-pick-measure::after {
  content:"";
  position:absolute;
  top:-5px;
  width:1px;
  height:11px;
  background:
    var(--vp-gold);
}
.vm-pick-measure::before {
  left:0;
}
.vm-pick-measure::after {
  right:0;
}
.vm-pick-measure span {
  position:absolute;
  left:50%;
  bottom:8px;
  transform:
    translateX(-50%);
  padding:2px 7px;
  white-space:nowrap;
  border-radius:4px;
  background:
    rgba(245,239,231,.94);
  color:
    var(--vp-gold-dark);
  font-family:
    var(--vp-serif);
  font-size:16px;
}
/* =========================================================
   CONTROLS
   ========================================================= */
.vm-pick-controls {
  margin-top:17px;
}
.vm-pick-panel {
  display:none;
}
.vm-pick-panel.is-active {
  display:block;
}
.vm-pick-options {
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}
.vm-pick-option {
  min-width:54px;
  min-height:38px;
  padding:8px 12px;
  cursor:pointer;
  border:
    1px solid var(--vp-line);
  border-radius:999px;
  background:#fff;
  color:var(--vp-soft);
  font:inherit;
  font-size:12px;
  font-weight:700;
  transition:
    background .2s ease,
    color .2s ease,
    border-color .2s ease,
    transform .2s ease;
}
.vm-pick-option:hover {
  transform:
    translateY(-1px);
  border-color:
    rgba(118,89,58,.38);
  color:
    var(--vp-ink);
}
.vm-pick-option.is-active {
  border-color:
    var(--vp-ink);
  background:
    var(--vp-ink);
  color:#fff;
}
/* =========================================================
   POPISEK
   ========================================================= */
.vm-pick-caption {
  min-height:49px;
  margin-top:14px;
  padding-top:13px;
  border-top:
    1px solid var(--vp-line);
  color:
    var(--vp-soft);
  font-size:12.5px;
  line-height:1.55;
}
.vm-pick-caption strong {
  color:
    var(--vp-ink);
}
/* =========================================================
   TABLET
   ========================================================= */
@media (max-width:1000px) {
  .vm-pick-banner {
    width:
      min(760px,calc(100% - 30px));
    margin:
      58px auto 66px;
  }
  .vm-pick-inner {
    grid-template-columns:1fr;
    gap:40px;
    padding:42px;
  }
  .vm-pick-copy {
    align-items:center;
    text-align:center;
  }
  .vm-pick-eyebrow {
    justify-content:center;
  }
  .vm-pick-title,
  .vm-pick-lead {
    max-width:650px;
  }
  .vm-pick-features {
    width:100%;
    max-width:620px;
  }
  .vm-pick-builder {
    width:100%;
  }
}
/* =========================================================
   MOBIL
   ========================================================= */
@media (max-width:640px) {
  .vm-pick-banner {
    width:
      calc(100% - 20px);
    margin:
      42px auto 52px;
    border-radius:20px;
  }
  .vm-pick-inner {
    gap:28px;
    padding:
      27px 16px 18px;
  }
  .vm-pick-title {
    font-size:42px;
  }
  .vm-pick-lead {
    margin-top:18px;
    font-size:14.5px;
  }
  .vm-pick-features {
    grid-template-columns:
      1fr 1fr;
    margin-top:23px;
  }
  .vm-pick-feature {
    min-height:72px;
    padding:13px;
  }
  .vm-pick-feature strong {
    font-size:18px;
  }
  .vm-pick-cta {
    width:100%;
    margin-top:21px;
  }
  .vm-pick-builder {
    padding:13px;
    border-radius:17px;
  }
  .vm-pick-builder-badge {
    display:none;
  }
  .vm-pick-tabs {
    display:flex;
    gap:5px;
    overflow-x:auto;
    scrollbar-width:none;
  }
  .vm-pick-tabs::-webkit-scrollbar {
    display:none;
  }
  .vm-pick-tab {
    flex:1 0 auto;
    min-width:80px;
    padding:
      8px 14px;
  }
  .vm-pick-stage {
    height:275px;
  }
  .vm-pick-bed {
    height:190px;
  }
  .vm-pick-options {
    gap:6px;
  }
  .vm-pick-option {
    flex:1 1 auto;
    min-width:47px;
    padding:
      8px 9px;
  }
  .vm-pick-caption {
    min-height:68px;
  }
}
/* =========================================================
   MALÉ MOBILY
   ========================================================= */
@media (max-width:390px) {
  .vm-pick-title {
    font-size:37px;
  }
  .vm-pick-features {
    grid-template-columns:1fr;
  }
  .vm-pick-stage {
    height:250px;
  }
}
/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion:reduce) {
  .vm-pick-banner *,
  .vm-pick-banner *::before,
  .vm-pick-banner *::after {
    transition:none !important;
  }
}
/* Verze 3 – delší matrace a vždy viditelné čelo. */
.vm-pick-inner { grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); }
.vm-pick-feature:last-child { grid-column:1 / -1; }
.vm-pick-stage { height:330px; }
.vm-pick-bed { --head-height:48px; --mattress-depth:110px; height:calc(100% - 43px); }
.vm-pick-mattress {
  height:var(--mattress-depth);
  clip-path:polygon(9% 0,91% 0,100% 100%,0 100%);
  border-radius:12px 12px 5px 5px;
}
.vm-pick-mattress::after { top:18%; height:68%; left:15%; right:10%; }
.vm-pick-headboard {
  left:11%; right:11%;
  bottom:calc(var(--mattress-bottom) + var(--mattress-depth) - 5px);
  height:var(--head-height);
}
.vm-pick-headboard::before { top:0; height:10px; }
.vm-pick-tab:focus-visible, .vm-pick-option:focus-visible, .vm-pick-cta:focus-visible {
  outline:2px solid var(--vp-gold-dark); outline-offset:3px;
}
.vm-pick-panel[hidden] { display:none !important; }
@media (max-width:1000px) {
  .vm-pick-inner { grid-template-columns:minmax(0,1fr); }
}
@media (max-width:640px) {
  .vm-pick-tabs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); overflow:visible; }
  .vm-pick-tab { min-width:0; padding:8px 4px; }
  .vm-pick-stage { height:330px; }
  .vm-pick-bed { height:calc(100% - 43px); }
  .vm-pick-panel[data-vp-panel="size"] .vm-pick-options {
    display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:7px;
  }
  .vm-pick-panel[data-vp-panel="size"] .vm-pick-option {
    grid-column:span 2; min-width:0; width:100%; padding:8px 2px;
  }
  .vm-pick-panel[data-vp-panel="size"] .vm-pick-option:nth-child(5) { grid-column:2 / span 2; }
  .vm-pick-option { min-height:40px; }
}

/* V4: Banner je soucast Novinek, ovladani slideru zustava u produktu. */
#content .vm-pick-news-holder > .vm-pick-mount {
  position:relative; z-index:1; order:100; pointer-events:auto;
}
#content .vm-pick-news-holder > .product-slider-navigation {
  top:var(--vm-pick-nav-top) !important;
  bottom:auto !important;
}
.vm-pick-banner button { pointer-events:auto; touch-action:manipulation; }