/* Magazyn Vitadiet — uporządkowany arkusz 3.0.2.
   Zastępuje cały assets/home.css. Zgodny z home.js autoorbit-3.0.
   Przycisk sklepu: ikona + tekst + strzałka. */

/* 1. Podstawa */
body.vdmh-page {
  margin: 0 !important;
  padding: 0;
  background: #0c291f;
}
.vdm {
  --bg: #0c291f;
  --g: #1f4d3a;
  --cream: #f2f4e9;
  --lime: #d9f36a;
  --lav: #c9bdf2;
  background: var(--bg);
  color: var(--cream);
  font: 16px/1.6 Arial, Helvetica, sans-serif;
  isolation: isolate;
}
.vdm * { box-sizing: border-box; }
.vdm a { color: inherit; text-decoration: none; }
.vdm h1, .vdm h2, .vdm p { font-family: inherit; color: inherit; }
.vdm button { font: inherit; }
.vdm [hidden] { display: none !important; }
.vdm a:focus-visible, .vdm button:focus-visible {
  outline: 3px solid var(--lime);
  outline-offset: 5px;
}
.vdm-wrap { width: min(1320px, calc(100% - 80px)); margin: auto; }
.vdm > main { margin: 0; padding: 0; }

/* 2. Nagłówek i przycisk sklepu */
.vdm-header { border-bottom: 1px solid #ffffff20; }
.vdm-nav {
  min-height: 84px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
}
.vdm-logo {
  display: inline-flex;
  align-items: center;
  gap: 15px;
  font-size: 30px;
  letter-spacing: -1.5px;
  font-weight: 800;
  line-height: 1.2;
}
.vdm-logo small {
  font-size: 9px;
  letter-spacing: 1.8px;
  border-left: 1px solid #ffffff60;
  padding-left: 15px;
  font-weight: 400;
}
.vdm-nav nav { display: flex; gap: 30px; font-size: 12px; }
.vdm .vdm-header .vdm-nav > a.vdm-shop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex: 0 0 auto;
  width: auto;
  height: 44px;
  padding: 0 17px;
  margin: 0;
  border: 1px solid #ffffff55;
  border-radius: 999px;
  background: transparent;
  color: var(--cream);
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
  transition: background-color 180ms ease, border-color 180ms ease;
}
.vdm .vdm-header .vdm-shop > svg {
  display: block;
  flex: 0 0 21px;
  width: 21px;
  height: 21px;
  margin: 0;
  padding: 0;
}
.vdm-shop-arrow { margin-left: 5px; }
.vdm .vdm-header .vdm-shop:hover {
  background: var(--g);
  border-color: var(--lime);
}

/* 3. Przyciski i teksty pomocnicze */
.vdm-btn {
  display: inline-flex;
  align-items: center;
  gap: 25px;
  background: var(--lime);
  color: var(--bg) !important;
  border-radius: 30px;
  padding: 15px 23px;
  font-size: 12px;
  font-weight: 700;
}
.vdm .vdm-eyebrow {
  font-size: 9px;
  letter-spacing: 2px;
  font-weight: 700;
  color: var(--lime);
  margin: 0 0 14px;
}
.vdm .vdm-lead {
  font-size: 13px;
  line-height: 1.8;
  color: #b6c9bc;
  max-width: 400px;
  margin: 18px 0;
}
.vdm .vdm-muted { font-size: 14px; color: #adc3b1; }

/* 4. Scena: układ bazowy bez animacji */
.vdm-orbit-section { position: relative; margin: 0; padding: 0; }
.vdm-stage {
  position: relative;
  max-width: 1600px;
  margin: 0 auto;
  isolation: isolate;
  padding: 24px 40px 55px;
  overflow: hidden;
}
.vdm-scene-title { max-width: 1240px; margin: auto; position: relative; z-index: 8; }
.vdm-scene-title h1 {
  font-size: clamp(40px, 4.5vw, 66px);
  line-height: 1.06;
  letter-spacing: -3px;
  margin: 0;
  max-width: 750px;
  font-weight: 700;
}
.vdm-scene-title h1 span { display: block; color: var(--lime); }
.vdm-scene { position: relative; height: 440px; margin-top: 20px; isolation: isolate; }
.vdm-scene::before {
  content: '';
  position: absolute;
  inset: -15% 0;
  background: radial-gradient(ellipse at 50% 40%, #43866465, transparent 60%);
  pointer-events: none;
  z-index: -1;
}
.vdm-halo {
  position: absolute;
  left: 50%; top: 42%;
  transform: translate(-50%, -50%);
  width: 470px; height: 470px;
  border: 1px solid #d9f36a15;
  border-radius: 50%;
  pointer-events: none;
}
.vdm-ring {
  position: absolute;
  left: 50%; top: 48%;
  width: 850px; height: 240px;
  border: 1px solid #d9f36a45;
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(-8deg);
  pointer-events: none;
}
.vdm-ring2 {
  width: 680px; height: 360px;
  border-color: #c9bdf21f;
  transform: translate(-50%, -50%) rotate(20deg);
}
.vdm-space, .vdm-world { position: absolute; inset: 0; }
.vdm-space { perspective: 1600px; perspective-origin: 50% 46%; }
.vdm-world { transform-style: preserve-3d; }
.vdm-capsule-anchor {
  position: absolute;
  left: 50%; top: 42%;
  width: 220px; height: 365px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.vdm-capsule-float {
  width: 100%; height: 100%;
  transform: rotate(24deg);
  filter: drop-shadow(22px 35px 30px #00000066);
}
.vdm[data-animation="1"] .vdm-capsule-float {
  animation: vdmh-levitate 5.8s ease-in-out infinite;
}
.vdm-capsule-float svg { display: block; width: 100%; height: 100%; overflow: visible; }
.vdm-ground {
  position: absolute;
  left: 50%; top: 87%;
  width: 210px; height: 28px;
  background: #00000070;
  border-radius: 50%;
  filter: blur(15px);
  transform: translateX(-50%);
  pointer-events: none;
}
.vdm-particle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  box-shadow: inset -8px -9px 13px #00000035;
}
.vdm-p1 {
  left: 27%; top: 20%; width: 36px; height: 36px;
  background: radial-gradient(circle at 30% 25%, #f1fac0, #bedb4a);
}
.vdm-p2 {
  left: 69%; top: 40%; width: 23px; height: 23px;
  background: radial-gradient(circle at 30% 25%, #eee6ff, #9e87ce);
}

/* 5. Karty artykułów */
.vdm-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin: 10px auto 0;
  max-width: 1240px;
  position: relative;
  z-index: 5;
}
.vdm-orbit-card {
  background: var(--cream);
  color: #173e2d;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid #ffffff70;
  box-shadow: 0 25px 60px #00000040;
  min-width: 0;
}
.vdm-cardlink {
  display: flex !important;
  flex-direction: column;
  height: 100%;
  color: inherit !important;
}
.vdm-cardart {
  height: 175px;
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--lav);
}
.vdm-cardart img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.vdm-letter { font-size: 90px; font-weight: 800; letter-spacing: -8px; line-height: 1; }
.vdm-color-1 { background: var(--lime); }
.vdm-color-2 { background: #b9cec1; }
.vdm-badge {
  position: absolute;
  top: 13px; left: 14px;
  max-width: 78%;
  background: #f2f4e9f0;
  color: #173e2d;
  border-radius: 25px;
  padding: 5px 9px;
  font-size: 8px;
  line-height: 1.4;
  font-weight: 700;
}
.vdm-number {
  position: absolute;
  right: 13px; bottom: 12px;
  font: 9px monospace;
  background: #f2f4e9e0;
  color: #173e2d;
  padding: 4px 7px;
  border-radius: 15px;
}
.vdm-cardcopy { padding: 22px; display: flex; flex-direction: column; align-items: start; flex: 1; }
.vdm-cardcopy h2 {
  font-size: 23px; line-height: 1.2; letter-spacing: -.7px;
  margin: 0 0 12px; font-weight: 700; overflow-wrap: anywhere;
}
.vdm-cardcopy p { font-size: 12px; line-height: 1.7; color: #546b5b; margin: 0 0 18px; }
.vdm-read {
  display: inline-block; margin-top: auto; font-size: 11px; font-weight: 700;
  border-bottom: 1px solid #173e2d50; padding-bottom: 4px;
}

/* 6. Sterowanie */
.vdm-controls { display: none; }
.vdm-control {
  width: 36px; height: 36px; min-height: 36px;
  padding: 0 !important;
  display: grid; place-items: center;
  border: 1px solid #ffffff55; border-radius: 50%;
  background: #163c2c; color: var(--cream); cursor: pointer; line-height: 1;
}
.vdm-control:disabled { opacity: .35; cursor: default; }
.vdm-counter { font: 10px monospace; color: #c5d5c8; min-width: 64px; text-align: center; }
.vdm-track { height: 2px; flex: 1; background: #ffffff25; }
.vdm-track i { height: 100%; display: block; background: var(--lime); width: 0; }
.vdm-instruction { font-size: 8px; letter-spacing: 1px; color: #a6bcad; }
.vdm-empty { text-align: center; padding: 25px 10px 40px; }
.vdm-empty h2 { font-size: 30px; }
.vdm-empty p { font-size: 14px; color: #b6c9bc; }

/* 7. Dalsze sekcje strony */
.vdm-content { padding-top: 80px; padding-bottom: 80px; scroll-margin-top: 20px; }
.vdm-content > h2, .vdm-about h2 {
  font-size: 42px; letter-spacing: -1.7px; line-height: 1.15; margin: 12px 0 32px;
}
.vdm-postgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 35px 25px; }
.vdm-post { min-width: 0; }
.vdm-post .vdm-cardart { height: auto; aspect-ratio: 4/3; border-radius: 20px; }
.vdm-post .vdm-cardcopy { padding: 21px 0 0; }
.vdm-post .vdm-cardcopy p { color: #aec5b6; }
.vdm-post .vdm-read { border-color: #ffffff50; }
.vdm-more { text-align: center; margin-top: 35px; }
.vdm-topics { background: #123424; }
.vdm-topicgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.vdm-topicgrid a {
  border: 1px solid #ffffff25; border-radius: 18px; padding: 24px;
  display: flex; justify-content: space-between; gap: 20px; font-size: 14px;
}
.vdm-topicgrid a:hover { background: #24513b; }
.vdm-about { background: var(--cream); color: var(--g); }
.vdm-about .vdm-eyebrow { color: var(--g); }
.vdm-aboutgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 55px; align-items: center; }
.vdm-about p { font-size: 14px; line-height: 1.8; max-width: 500px; color: #5b7060; }
.vdm-quote {
  padding: 40px; border-radius: 24px; background: var(--lav);
  font-size: 34px; letter-spacing: -1.2px; line-height: 1.25;
}
.vdm-quote small { display: block; font-size: 9px; letter-spacing: 1px; margin-bottom: 25px; }
.vdm-footer { background: #082117; padding: 45px 0 25px; }
.vdm-footer p { font-size: 12px; color: #a6bfae; }
.vdm-footerlinks { display: flex; flex-wrap: wrap; gap: 25px; font-size: 12px; margin-top: 25px; }
.vdm-footnote { font-size: 10px; line-height: 1.8; color: #a6bfae; border-top: 1px solid #ffffff25; padding-top: 20px; margin-top: 30px; }
.vdm-skip { position: fixed; top: -200px; left: 15px; z-index: 100000; background: var(--lime); color: var(--bg) !important; padding: 15px; }
.vdm-skip:focus { top: 15px; }

/* 8. Desktop: przestrzenne karty po uruchomieniu JavaScriptu */
.vdm.vdm-orbit-on .vdm-stage { height: 100svh; min-height: 760px; max-height: 1150px; padding-top: 24px; padding-bottom: 65px; }
.vdm-orbit-on .vdm-scene-title { position: absolute; left: 60px; right: 60px; top: 24px; pointer-events: none; }
.vdm-orbit-on .vdm-scene-title .vdm-btn { pointer-events: auto; padding: 12px 19px; font-size: 11px; }
.vdm-orbit-on .vdm-scene-title h1 { font-size: clamp(38px, 4vw, 58px); max-width: 510px; }
.vdm-orbit-on .vdm-scene-title .vdm-lead { max-width: 280px; font-size: 12px; }
.vdm-orbit-on .vdm-scene { position: absolute; inset: 80px 0 55px; height: auto; margin: 0; isolation: auto; }
.vdm-orbit-on .vdm-capsule-anchor { top: 31%; width: 225px; height: 365px; }
.vdm-orbit-on .vdm-halo { top: 36%; width: 570px; height: 570px; }
.vdm-orbit-on .vdm-ground { top: 57%; }
.vdm-orbit-on .vdm-ring { top: 51%; width: 900px; height: 280px; }
.vdm-orbit-on .vdm-ring2 { width: 740px; height: 410px; }
.vdm-orbit-on .vdm-cards { position: absolute; inset: 0; display: block; margin: 0; max-width: none; transform-style: preserve-3d; z-index: auto; }
.vdm-orbit-on .vdm-orbit-card { position: absolute; left: 50%; top: 59%; width: 350px; transform-origin: 50% 50%; will-change: transform; backface-visibility: hidden; }
.vdm-orbit-on .vdm-cardart { height: 115px; }
.vdm-orbit-on .vdm-cardcopy { padding: 18px 21px; }
.vdm-orbit-on .vdm-cardcopy h2 { font-size: 20px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.vdm-orbit-on .vdm-cardcopy p { font-size: 11px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 14px; }
.vdm-orbit-on .vdm-orbit-card.is-main { border-color: var(--lime); }
.vdm-orbit-on .vdm-controls { display: flex; position: absolute; left: 60px; right: 60px; bottom: 14px; align-items: center; gap: 14px; z-index: 10; }

@keyframes vdmh-levitate {
  0%, 100% { transform: translateY(0) rotate(24deg); }
  50% { transform: translateY(-16px) rotate(27deg); }
}

/* 9. Niższe ekrany komputerów */
@media (min-width: 1000px) and (max-height: 800px) {
  .vdm.vdm-orbit-on .vdm-stage { min-height: 680px; }
  .vdm-orbit-on .vdm-scene-title h1 { font-size: 40px; }
  .vdm-orbit-on .vdm-scene-title .vdm-lead { max-width: 240px; font-size: 11px; }
  .vdm-orbit-on .vdm-capsule-anchor { width: 180px; height: 285px; top: 29%; }
  .vdm-orbit-on .vdm-orbit-card { width: 315px; }
  .vdm-orbit-on .vdm-cardart { height: 95px; }
  .vdm-orbit-on .vdm-cardcopy { padding: 15px 18px; }
  .vdm-orbit-on .vdm-cardcopy h2 { font-size: 19px; }
  .vdm-orbit-on .vdm-cardcopy p { font-size: 10px; }
}

/* 10. Telefon i tablet: kapsułka nad kartą, bez nakładania */
@media (max-width: 999px) {
  .vdm-wrap { width: calc(100% - 40px); }
  .vdm-nav { min-height: 100px; flex-wrap: wrap; padding: 18px 0 15px; gap: 15px; }
  .vdm-logo { font-size: 27px; }
  .vdm-nav nav { order: 3; width: 100%; justify-content: space-between; font-size: 12px; }
  .vdm .vdm-header .vdm-nav > a.vdm-shop { height: 42px; padding: 0 13px; gap: 8px; }
  .vdm-stage { padding: 24px 20px 35px; }
  .vdm-scene-title h1 { font-size: 48px; letter-spacing: -2.5px; }
  .vdm-lead { font-size: 14px; max-width: 500px; }
  .vdm-scene { height: auto; min-height: 330px; padding-top: 330px; margin: 22px auto 12px; width: min(480px, 100%); }
  .vdm-space, .vdm-world { position: static; perspective: none; transform-style: flat; }
  .vdm-capsule-anchor { top: 155px; width: 178px; height: 285px; }
  .vdm-halo { top: 155px; width: 330px; height: 330px; }
  .vdm-ring { top: 205px; width: 430px; height: 140px; }
  .vdm-ring2 { width: 340px; height: 240px; }
  .vdm-ground { top: 285px; width: 160px; }
  .vdm-p1 { left: 12%; top: 95px; width: 27px; height: 27px; }
  .vdm-p2 { left: 84%; top: 180px; width: 18px; height: 18px; }
  .vdm-cards { grid-template-columns: 1fr; max-width: 520px; gap: 24px; margin: 0 auto; position: relative; z-index: 5; }
  .vdm-cardart { height: 185px; }
  .vdm-cardcopy h2 { font-size: 25px; }
  .vdm-cardcopy p { font-size: 13px; }
  .vdm.vdm-mobile-on .vdm-controls { display: flex; justify-content: center; align-items: center; gap: 18px; margin: 20px auto 0; max-width: 520px; }
  .vdm-mobile-on .vdm-track, .vdm-mobile-on .vdm-instruction { display: none; }
  .vdm-postgrid, .vdm-topicgrid { grid-template-columns: 1fr; }
  .vdm-content { padding-top: 55px; padding-bottom: 55px; }
  .vdm-content > h2, .vdm-about h2 { font-size: 34px; }
  .vdm-aboutgrid { grid-template-columns: 1fr; gap: 25px; }
  .vdm-quote { padding: 30px; font-size: 29px; }
  .vdm-postgrid { gap: 35px; }
}
@media (max-width: 360px) {
  .vdm-scene-title h1 { font-size: 40px; }
  .vdm-logo { font-size: 24px; }
  .vdm-logo small { font-size: 8px; }
  .vdm-cardcopy { padding: 20px; }
  .vdm-cardcopy h2 { font-size: 23px; }
}

/* 11. Ograniczenie ruchu */
@media (prefers-reduced-motion: reduce) {
  .vdm *, .vdm *::before, .vdm *::after { animation: none !important; transition: none !important; }
}