/* Varianta 2 detailu Vanilla Bay. Klasický detail zůstává v DOM pro košík. */

body.pdp-vilgain {
  --vgn-black: #2f2119;
  --vgn-black-hover: #4a3022;
  --vgn-black-active: #241810;
  --vgn-gray: #74675c;
  --vgn-gray-04: #f5efe7;
  --vgn-gray-06: #f1e8dc;
  --vgn-gray-08: #ebe0d2;
  --vgn-gray-12: #e6d9ca;
  --vgn-gray-30: #cdbca9;
  --vgn-gray-50: #a6927e;
  --vgn-green: #557940;
  --vgn-green-bg: #eef3e8;
  --vgn-red: #a74436;
  --vgn-yellow: #b7763e;
  --vgn-yellow-bg: #f5eadb;
  --vgn-blue: #805634;
  --vgn-radius: 10px;
  --vgn-radius-lg: 16px;
  --vgn-font: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.vgn {
  display: none;
  font-family: var(--vgn-font);
  color: var(--vgn-black);
  background: #faf6ef;
  -webkit-font-smoothing: antialiased;
}

body.pdp-vilgain .vgn { display: block; }

/* Klasicky detail se schova, ale zustane v DOM kvuli app.js */
body.pdp-vilgain .product-breadcrumb,
body.pdp-vilgain .product-detail,
body.pdp-vilgain .product-reading,
body.pdp-vilgain .product-related,
body.pdp-vilgain .product-buybar { display: none !important; }

/* Sladeni cele stranky - zadne osekane bile pozadi */
html.pdp-vilgain-html,
html:has(body.pdp-vilgain) {
  background: #faf6ef;
}

body.pdp-vilgain {
  background: #faf6ef;
  color: var(--vgn-black);
}

body.pdp-vilgain .site-header {
  border-bottom: 1px solid var(--vgn-gray-12);
  color: var(--vgn-black);
}

body.pdp-vilgain .site-header::before {
  background: rgba(250, 246, 239, 0.96) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

body.pdp-vilgain .desktop-nav a {
  color: var(--vgn-black);
}

body.pdp-vilgain .desktop-nav a:hover {
  color: var(--vgn-black-hover);
}

body.pdp-vilgain .cart-button {
  color: var(--vgn-black);
  border-color: var(--vgn-gray-30);
  background: transparent;
}

body.pdp-vilgain .menu-button .sm-icon-line {
  background: var(--vgn-black);
}

body.pdp-vilgain .page-main.product-page-main {
  width: 100%;
  padding-top: calc(var(--announcement-h, 0px) + var(--header-h, 72px) + 12px);
  padding-bottom: 0;
  padding-inline: 0;
  max-width: none;
  background: #faf6ef;
}

/* Prepinac obou detailu zustava dostupny bez prekryvani obsahu. */
body.pdp-detail-switcher .shop-view-floating-widget {
  position: relative;
  inset: auto;
  display: flex;
  justify-content: flex-end;
  width: 100%;
  max-width: 1320px;
  margin: 0 auto 8px;
  padding: 0 20px;
  transform: none;
  z-index: 1;
}

@media (max-width: 1023px) {
  body.pdp-vilgain .page-main.product-page-main {
    padding-top: calc(var(--announcement-h, 0px) + var(--header-h, 63px) + 16px);
  }
}

/* Paticka v cistem neutralnim provedeni bez useknuti */
body.pdp-vilgain .site-footer {
  background: var(--vgn-gray-04);
  border-top: 1px solid var(--vgn-gray-12);
  color: var(--vgn-black);
  padding-top: 56px;
  margin-top: 0;
}

body.pdp-vilgain .site-footer a {
  color: var(--vgn-gray);
}

body.pdp-vilgain .site-footer a:hover {
  color: var(--vgn-black);
}

body.pdp-vilgain .site-footer p {
  color: var(--vgn-gray);
}

body.pdp-vilgain .footer-bottom {
  border-top: 1px solid var(--vgn-gray-12);
  color: var(--vgn-gray);
}

body.pdp-vilgain .footer-bottom a {
  color: var(--vgn-gray);
}

body.pdp-vilgain .footer-bottom a:hover {
  color: var(--vgn-black);
}

.vgn *, .vgn *::before, .vgn *::after { box-sizing: border-box; }
.vgn a { color: inherit; }
.vgn ul, .vgn ol { list-style: none; margin: 0; padding: 0; }
.vgn button { font-family: inherit; }

.vgn-container { width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 20px; }

/* ---------------------------------------------------------------- mrizka */
.vgn-grid { display: block; margin: 0 0 64px; }

@media (min-width: 1024px) {
  .vgn-grid {
    display: grid;
    grid-template-columns: minmax(0, 620px) minmax(360px, 1fr);
    grid-template-areas: "gallery detail" "content content";
    align-items: start;
    column-gap: clamp(32px, 4vw, 52px);
    max-width: 1180px;
    margin: 24px auto 64px;
  }
  .vgn-gallery-col { grid-area: gallery; }
  .vgn-detail-col  { grid-area: detail; align-self: stretch; }
  .vgn-content-col { grid-area: content; margin-top: 28px; }
}

/* --------------------------------------------------------------- hlavicka */
.vgn-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 0 8px; padding: 12px 0 4px; font-size: 12px; }
.vgn-breadcrumb a { color: var(--vgn-black); text-decoration: none; }
.vgn-breadcrumb a:hover { text-decoration: underline; }
.vgn-crumb-sep { color: var(--vgn-gray-50); }
.vgn-breadcrumb-back { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--vgn-black); text-decoration: none; padding: 12px 0; }
.vgn-breadcrumb-back svg { width: 16px; height: 16px; }

.vgn-title { margin: 0 0 12px; font: 500 clamp(30px, 7vw, 42px)/1.1 "Fraunces", Georgia, serif; letter-spacing: -.035em; }
.vgn-title .vgn-title-light { font-weight: 400; }
@media (min-width: 1024px) { .vgn-title { font-size: clamp(32px, 2.8vw, 44px); } }
.vgn-intro { max-width: 48ch; margin: 0 0 16px; color: var(--vgn-gray); font-size: 15px; line-height: 1.6; }

.vgn-head-mobile { display: block; }
.vgn-head-desktop { display: none; }
@media (min-width: 1024px) {
  .vgn-head-mobile { display: none; }
  .vgn-head-desktop { display: block; }
}

/* --------------------------------------------------------------- galerie */
.vgn-gallery {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  margin: 0 -20px 12px;
  padding: 0 20px;
  gap: 10px;
  scrollbar-width: none;
}
.vgn-gallery::-webkit-scrollbar { display: none; }
.vgn-gallery > li { flex: 0 0 86%; scroll-snap-align: center; display: flex; min-width: 0; }
.vgn-gallery.is-single > li { flex-basis: 100%; }
.vgn-gallery-item {
  width: 100%;
  background: #efe7dc;
  border-radius: var(--vgn-radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  cursor: zoom-in;
  border: 0;
  overflow: hidden;
  position: relative;
}
.vgn-gallery-item.is-packshot {
  padding: 16px;
}
.vgn-gallery-item.is-packshot img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
  display: block;
}
.vgn-lusk .vgn-gallery-item.is-packshot::after {
  content: '';
  position: absolute;
  left: 9%;
  top: 9%;
  width: 42%;
  height: 28%;
  background: #efe7dc;
  pointer-events: none;
}
.vgn-gallery-item.is-photo {
  padding: 0;
}
.vgn-gallery-item.is-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: normal;
  display: block;
}
.vgn-gallery-caption {
  position: absolute;
  left: 12px;
  bottom: 12px;
  max-width: calc(100% - 24px);
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(250, 246, 239, .92);
  color: var(--vgn-black);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  pointer-events: none;
}
.vgn-gallery-thumbs { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 10px; scrollbar-width: none; }
.vgn-gallery-thumbs::-webkit-scrollbar { display: none; }
/* Na mobilu staci ukazatel posunu, na desktopu je videt cela mozaika. */
@media (max-width: 1023px) { .vgn-gallery-thumbs { display: none; } }
.vgn-gallery-thumb { flex: 0 0 58px; width: 58px; height: 58px; padding: 3px; border: 1px solid var(--vgn-gray-30); border-radius: 8px; background: #fff; cursor: pointer; }
.vgn-gallery-thumb.is-active { border-color: var(--vgn-black); box-shadow: 0 0 0 1px var(--vgn-black); }
.vgn-gallery-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; border-radius: 4px; }

.vgn-gallery-progress { height: 3px; background: var(--vgn-gray-12); border-radius: 99px; margin: 0 0 24px; overflow: hidden; }
.vgn-gallery-progress span { display: block; height: 100%; background: var(--vgn-gray-50); border-radius: 99px; transition: transform .18s ease, width .18s ease; }

@media (min-width: 1024px) {
  .vgn-gallery {
    gap: 0;
    margin: 0 0 12px;
    padding: 0;
  }
  .vgn-gallery > li { flex: 0 0 100%; }
  .vgn-gallery-item {
    height: clamp(340px, calc(100svh - 280px), 480px);
    aspect-ratio: auto;
  }
  .vgn-gallery-item.is-packshot { padding: clamp(24px, 4vw, 48px); }
  .vgn-gallery-item.is-packshot img { max-width: 380px; max-height: 380px; }
  .vgn-lusk .vgn-gallery-item.is-packshot::after { display: none; }
  .vgn-gallery-item.is-photo { background: #fff; }
  .vgn-gallery-item.is-photo img { object-fit: contain; }
  .vgn-gallery-progress { display: none; }

  /* Potravinove produkty: tri skutecne obrazove plochy misto slideru a prazdneho sloupce. */
  .vgn-editorial .vgn-gallery {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    overflow: visible;
    scroll-snap-type: none;
    margin: 0;
  }
  .vgn-editorial .vgn-gallery > li {
    display: block;
    min-width: 0;
    scroll-snap-align: none;
  }
  .vgn-editorial .vgn-gallery-item {
    height: auto;
    aspect-ratio: 1;
    border-radius: 12px;
  }
  .vgn-editorial .vgn-gallery-item.is-photo { background: #f7f7f5; }
  .vgn-editorial .vgn-gallery-item.is-photo img { object-fit: cover; }
  .vgn-lusk .vgn-editorial .vgn-gallery-item.is-packshot img { max-width: 500px; max-height: 500px; }
  .vgn-editorial .vgn-gallery-thumbs { display: none; }
}

@media (min-width: 1024px) and (max-width: 1180px) {
  .vgn-grid { grid-template-columns: minmax(0, 1fr) 360px; column-gap: 28px; margin-top: 16px; }
}

/* --------------------------------------------------- pravy sloupec (buy) */
.vgn-sticky { position: static; }
@media (min-width: 1024px) {
  .vgn-sticky { position: sticky; top: calc(var(--announcement-h, 0px) + var(--header-h, 72px) + 16px); }
  .vgn-editorial .vgn-sticky {
    top: min(
      calc(var(--announcement-h, 0px) + var(--header-h, 72px) + 16px),
      calc(100svh - var(--vgn-panel-height, 790px) - 16px)
    );
  }
}

.vgn-variants { margin: 0; }
.vgn-variants-title { margin: 0 0 10px; font-size: 13px; font-weight: 500; color: var(--vgn-gray); }

/* Balení je jeden přehledný seznam, ne skupina samostatných produktových karet. */
.vgn-radiocolumn-wrap { border-top: 1px solid var(--vgn-gray-12); border-bottom: 1px solid var(--vgn-gray-12); }
.vgn-radiocolumn {
  position: relative;
  display: grid;
  grid-template-columns: 17px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 56px;
  padding: 7px 5px 7px 12px;
  text-align: left;
  background: transparent;
  border: 0;
  color: var(--vgn-black);
  cursor: pointer;
  transition: background-color .15s ease;
}
.vgn-radiocolumn + .vgn-radiocolumn { border-top: 1px solid var(--vgn-gray-12); }
.vgn-radiocolumn::before { content: ''; position: absolute; inset: 7px auto 7px 0; width: 2px; background: transparent; border-radius: 2px; }
.vgn-radiocolumn.is-selected::before { background: #a66c45; }
.vgn-radiocolumn:hover:not(:disabled) { background: rgba(164, 111, 69, .055); }
.vgn-radiocolumn.is-disabled { opacity: .45; cursor: not-allowed; }
.vgn-radiocolumn-marker { width: 17px; height: 17px; border: 1.5px solid #a99787; border-radius: 50%; display: grid; place-items: center; }
.vgn-radiocolumn-marker::after { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--vgn-black); transform: scale(0); transition: transform .15s ease; }
.vgn-radiocolumn.is-selected .vgn-radiocolumn-marker { border-color: var(--vgn-black); }
.vgn-radiocolumn.is-selected .vgn-radiocolumn-marker::after { transform: scale(1); }
.vgn-radiocolumn-name { font-size: 15px; font-weight: 600; line-height: 1.25; }
.vgn-radiocolumn-side { text-align: right; white-space: nowrap; }
.vgn-radiocolumn-price { font-size: 15px; font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; }
.vgn-radiocolumn-unit { display: block; margin-top: 3px; font-size: 11px; font-weight: 400; color: var(--vgn-gray); font-variant-numeric: tabular-nums; }

@media (max-width: 1023px) {
  .vgn-radiocolumn { min-height: 64px; padding-block: 9px; }
}


/* cena */
.vgn-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 22px 0 0; }
.vgn-price-main { font-size: 30px; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.vgn-price-meta { font-size: 13px; color: var(--vgn-gray); font-variant-numeric: tabular-nums; }
.vgn-price-meta[hidden] { display: none; }

/* mnozstvi */
.vgn-qty:empty { display: none; }
.vgn-qty { margin-top: 18px; }
.vgn-qty .vgn-variants-title { display: flex; justify-content: space-between; gap: 12px; }
.vgn-qty-hint { font-size: 12px; color: var(--vgn-green); font-weight: 500; }
.vgn-qty-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.vgn-qty-chips[data-count="2"], .vgn-qty-chips[data-count="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 480px) { .vgn-qty-chips[data-count="6"] { grid-template-columns: repeat(6, minmax(0, 1fr)); } .vgn-qty-chips[data-count="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.vgn-qty-chip {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 52px; padding: 6px 4px;
  background: #fff; border: 1px solid var(--vgn-gray-12); border-radius: 10px;
  color: var(--vgn-black); cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.vgn-qty-chip:hover { border-color: var(--vgn-gray-50); }
.vgn-qty-chip.is-selected { border-color: var(--vgn-black); box-shadow: 0 0 0 1px var(--vgn-black); }
.vgn-qty-count { font-size: 14px; font-weight: 600; white-space: nowrap; }
.vgn-qty-save { font-size: 11px; font-weight: 600; color: var(--vgn-green); white-space: nowrap; }
.vgn-qty-chip:first-child .vgn-qty-save { color: var(--vgn-gray-50); font-weight: 500; }

/* krokovac pred vlozenim */
.vgn-stepper { display: flex; align-items: stretch; flex: 0 0 auto; border: 1px solid var(--vgn-gray-30); border-radius: 12px; background: #fff; overflow: hidden; }
.vgn-stepper[hidden] { display: none; }
.vgn-stepper button { width: 40px; border: 0; background: transparent; color: var(--vgn-black); font: 500 20px/1 var(--vgn-font); cursor: pointer; }
.vgn-stepper button:hover:not(:disabled) { background: var(--vgn-gray-04); }
.vgn-stepper button:disabled { color: var(--vgn-gray-30); cursor: not-allowed; }
.vgn-stepper output { display: grid; place-items: center; min-width: 28px; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* koupit */
.vgn-buy { display: flex; align-items: stretch; justify-content: flex-start; gap: 8px; margin: 16px 0 20px; }
.vgn-cart-action {
  display: flex;
  align-items: stretch;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 52px;
  overflow: hidden;
  border-radius: 12px;
  background: var(--vgn-black);
}
.vgn-buy-step {
  flex: 0 0 46px;
  width: 46px;
  min-height: 52px;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: #fffaf4;
  font-family: inherit;
  font-size: 22px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: background-color .12s ease;
}
.vgn-buy-step[hidden] { display: none !important; }
.vgn-buy-step:hover:not(:disabled) { background: rgba(255,255,255,.12); }
.vgn-buy-step:disabled { opacity: .35; cursor: not-allowed; }
.vgn-buy-cart {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 52px;
  padding: 6px 10px;
  background: transparent;
  color: #fff;
  border: 0;
  border-radius: 0;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .12s ease;
}
.vgn-buy-cart [data-vgn-cart-quantity] { display: block; margin-top: 2px; font-size: 11px; font-weight: 500; opacity: .8; }
.vgn-buy-cart:hover { background: rgba(255,255,255,.1); }
.vgn-buy-cart:active { background: rgba(0,0,0,.12); }
.vgn-buy-cart:disabled { background: var(--vgn-gray-30); color: #fff; cursor: not-allowed; }
.vgn-favorite {
  display: grid;
  place-items: center;
  flex: 0 0 52px;
  width: 52px;
  min-height: 52px;
  border: 0;
  border-radius: 12px;
  background: #f3ece2;
  color: var(--vgn-black);
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease;
}
.vgn-favorite:hover { background: #e9ddce; }
.vgn-favorite.is-saved { background: #eedcd5; color: #8d3b31; }
.vgn-favorite.is-saved svg { fill: currentColor; }
.vgn-favorite svg { width: 21px; height: 21px; }

/* kupon / doprava zdarma */
.vgn-coupon {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 11px 11px 11px 15px;
  background: var(--vgn-yellow-bg);
  border: 1px dashed transparent;
  border-radius: var(--vgn-radius-lg);
  text-decoration: none;
  transition: border-color .12s ease;
}
.vgn-coupon:hover { border-color: var(--vgn-yellow); }
.vgn-coupon-content { flex: 1 1 auto; min-width: 0; }
.vgn-coupon-title { font-size: 13px; font-weight: 600; line-height: 1.3; }
.vgn-coupon-header { display: block; font-size: 11px; color: var(--vgn-gray); }
.vgn-coupon-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 12px;
  background: #fff;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 600;
}
.vgn-coupon-btn svg { width: 12px; height: 12px; }

/* informacni radky */
.vgn-info { margin-top: 24px; }
.vgn-info-row { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; line-height: 1.6; margin-bottom: 8px; }
.vgn-info-row svg { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 3px; color: var(--vgn-gray); }
.vgn-info-row > span > span[aria-hidden] { color: var(--vgn-gray-50); font-size: 12px; }
.vgn-dot { width: 10px; height: 10px; margin-top: 8px; border-radius: 50%; background: var(--vgn-green); flex: 0 0 auto; }
.vgn-info-row.is-out .vgn-dot { background: var(--vgn-red); }
.vgn-info-row strong { font-weight: 600; }
.vgn-info-dotted { border-bottom: 1px dotted var(--vgn-gray-50); font-weight: 600; text-decoration: none; }

/* stitky - svisly checklist */
.vgn-tags { display: grid; gap: 8px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--vgn-gray-12); }
.vgn-tag { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.45; }
.vgn-tag svg { flex: 0 0 auto; width: 18px; height: 18px; padding: 3px; margin-top: 1px; border-radius: 50%; background: var(--vgn-green-bg); color: var(--vgn-green); }

/* ------------------------------------------------------------------ zalozky */
.vgn-tabs { margin-top: 32px; }
.vgn-tabs-nav {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 24px;
  overflow-x: auto;
  padding: 0 0 16px;
  border-bottom: 1px solid var(--vgn-gray-12);
  scrollbar-width: none;
}
.vgn-tabs-nav::-webkit-scrollbar { display: none; }
@media (min-width: 1024px) { .vgn-tabs-nav { justify-content: flex-start; gap: 32px; } }
.vgn-tab-btn {
  position: relative;
  flex: 0 0 auto;
  padding: 8px 0;
  background: none;
  border: 0;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--vgn-gray);
  cursor: pointer;
  white-space: nowrap;
  transition: color .12s ease;
}
.vgn-tab-btn:hover { color: var(--vgn-black); }
.vgn-tab-btn.is-active { color: var(--vgn-black); }
.vgn-tab-btn.is-active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -17px;
  height: 2px;
  background: var(--vgn-black);
}

.vgn-tab-panel { display: none; padding-top: 32px; max-width: 780px; }
.vgn-tab-panel.is-active { display: block; }
.vgn-tab-panel h2 { margin: 0 0 16px; font: 500 28px/1.2 "Fraunces", Georgia, serif; letter-spacing: -.02em; }
@media (min-width: 1024px) { .vgn-tab-panel h2 { font-size: 36px; } }
.vgn-tab-panel h3 { margin: 32px 0 12px; font-size: 18px; font-weight: 800; }
.vgn-tab-panel p { margin: 16px 0; font-size: 16px; line-height: 1.8; }
.vgn-tab-panel strong { font-weight: 700; }
.vgn-tab-panel a { color: var(--vgn-blue); }

.vgn-table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 14px; }
.vgn-table th, .vgn-table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--vgn-gray-12); vertical-align: top; }
.vgn-table th { width: 40%; font-weight: 600; background: var(--vgn-gray-04); }
.vgn-table tr:last-child th, .vgn-table tr:last-child td { border-bottom: 0; }

.vgn-note { margin-top: 24px; padding: 16px; background: var(--vgn-gray-06); border-radius: var(--vgn-radius-lg); font-size: 13px; line-height: 1.7; color: var(--vgn-gray); }

.vgn-guide-link {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 24px;
  padding: 12px;
  background: var(--vgn-gray-06);
  border-radius: var(--vgn-radius-lg);
  text-decoration: none;
}
.vgn-guide-link img { width: 72px; height: 72px; object-fit: cover; border-radius: var(--vgn-radius); }
.vgn-guide-kicker { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--vgn-gray); }
.vgn-guide-title { display: block; margin-top: 2px; font-size: 15px; font-weight: 700; }
.vgn-guide-text { margin-top: 2px; font-size: 13px; color: var(--vgn-gray); }

/* --------------------------------------------------- doporucene produkty */
.vgn-section { padding-bottom: 56px; }
.vgn-section-title { margin: 0 0 24px; font: 500 28px/1.2 "Fraunces", Georgia, serif; letter-spacing: -.02em; }
@media (min-width: 1024px) { .vgn-section-title { font-size: 36px; } }
.vgn-cards {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 60%;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  margin: 0;
  padding: 0 20px 8px 0;
  scrollbar-width: none;
}
.vgn-cards::-webkit-scrollbar { display: none; }
@media (min-width: 768px) { .vgn-cards { grid-auto-columns: 30%; } }
@media (min-width: 1024px) { .vgn-cards { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-columns: auto; overflow: visible; margin: 0; padding: 0; } }
.vgn-card { scroll-snap-align: start; display: flex; flex-direction: column; }
.vgn-card-link { display: flex; flex-direction: column; flex: 1 1 auto; text-decoration: none; }
.vgn-card-media { position: relative; overflow: hidden; }
.vgn-card[data-category="lusky"] .vgn-card-media::after { content: ''; position: absolute; left: 8%; top: 8%; width: 46%; height: 30%; background: var(--vgn-gray-06); pointer-events: none; }
.vgn-card-media img { transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.vgn-card:hover .vgn-card-media img { transform: scale(1.04); }
.vgn-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 10px; }
.vgn .vgn-card-btn { display: grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--vgn-black); color: #fff; font: 600 17px/1 var(--vgn-font); text-decoration: none; cursor: pointer; transition: background-color .15s ease, transform .15s ease; }
.vgn-card-btn:hover { background: var(--vgn-black-hover); transform: translateY(-1px); }
.vgn-card-btn:disabled { background: var(--vgn-gray-30); cursor: not-allowed; }
.vgn-card-media { background: var(--vgn-gray-06); border-radius: var(--vgn-radius-lg); aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; padding: 16px; margin-bottom: 12px; }
.vgn-card-media img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.vgn-card:hover .vgn-card-title { text-decoration: underline; }
.vgn-card-title { font-size: 14px; font-weight: 600; line-height: 1.4; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.vgn-card-desc { margin-top: 4px; font-size: 12px; color: var(--vgn-gray); line-height: 1.5; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.vgn-card-price { font-size: 14px; font-weight: 700; }

/* ------------------------------------------------- mobilni lepiva lista */
.vgn-mobilebar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 15px calc(10px + env(safe-area-inset-bottom));
  background: #fff;
  border-top: 1px solid var(--vgn-gray-12);
  box-shadow: 0 -4px 20px rgba(48, 50, 51, .08);
  transform: translateY(110%);
  transition: transform .2s ease;
}
.vgn-mobilebar.is-visible { transform: translateY(0); }
.vgn-mobilebar-text { flex: 1 1 auto; min-width: 0; }
.vgn-mobilebar-label { display: block; font-size: 11px; color: var(--vgn-gray); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vgn-mobilebar-price { font-size: 16px; font-weight: 700; }
.vgn-mobilebar-actions { display: flex; flex: 0 0 auto; align-items: stretch; gap: 6px; }
.vgn-mobilebar .vgn-cart-action { flex: 0 0 156px; min-height: 46px; }
.vgn-mobilebar .vgn-buy-step { flex-basis: 36px; width: 36px; min-height: 46px; font-size: 19px; }
.vgn-mobilebar .vgn-buy-cart { min-height: 46px; padding: 4px 6px; font-size: 12px; }
.vgn-mobilebar .vgn-buy-cart [data-vgn-cart-quantity] { font-size: 10px; }
.vgn-mobilebar .vgn-favorite { flex-basis: 46px; width: 46px; min-height: 46px; }
@media (min-width: 1024px) { .vgn-mobilebar { display: none; } }
.vgn-mobilebar .vgn-stepper { display: none; }
@media (max-width: 1023px) {
  /* Paticka ma rezervu pod lepivou listu. */
  body.pdp-vilgain .site-footer { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
  /* Chat se na mobilu neprekryva s nakupem: ukaze se az nad lepivou listou. */
  body.pdp-vilgain:not(:has(.vgn-mobilebar.is-visible)) .vb-chat:has(.vb-chat-panel[hidden]) { visibility: hidden; pointer-events: none; }
  body.pdp-vilgain:has(.vgn-mobilebar.is-visible) .vb-chat { bottom: calc(84px + env(safe-area-inset-bottom)); }
}

/* ---------------------------------------------------------- lightbox fotky */
.vgn-lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(48, 50, 51, .85);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}
.vgn-lightbox.is-open { opacity: 1; pointer-events: auto; }
.vgn-lightbox img { max-width: min(900px, 100%); max-height: 100%; object-fit: contain; background: #fff; border-radius: var(--vgn-radius-lg); padding: 24px; }
.vgn-lightbox-close {
  position: absolute; top: 16px; right: 16px;
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border: 0; border-radius: var(--vgn-radius);
  font-size: 22px; line-height: 1; cursor: pointer;
}

.vgn :is(button, a):focus-visible { outline: 2px solid #8e5a38; outline-offset: 3px; }

@media (max-width: 1023px) {
  .vgn-grid { margin-bottom: 48px; }
  .vgn-detail-col { margin-top: 8px; }
  .vgn-content-col { margin-top: 40px; }
  .vgn-section { padding-bottom: 48px; }
  .vgn-tabs-nav { gap: 20px; }
}

@media (max-width: 380px) {
  .vgn-container { padding-inline: 16px; }
  .vgn-gallery { margin-inline: -16px; padding-inline: 16px; }
  .vgn-mobilebar { gap: 6px; padding-inline: 10px; }
  .vgn-mobilebar .vgn-cart-action { flex-basis: 140px; }
  .vgn-mobilebar .vgn-buy-step { flex-basis: 32px; width: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .vgn *, .vgn *::before, .vgn *::after { transition: none !important; }
}

/* ==================================================================
   Obsah produktu bez zalozek: prehledne sekce pod sebou.
   ================================================================== */
.vgn-content { max-width: 780px; padding-top: 8px; border-top: 1px solid var(--vgn-gray-12); }
.vgn-block { margin-top: 36px; }
.vgn-block h2 { margin: 0 0 14px; font: 500 24px/1.2 "Fraunces", Georgia, serif; letter-spacing: -.02em; }
@media (min-width: 1024px) { .vgn-block h2 { font-size: 28px; } }
.vgn-block p { margin: 0; font-size: 16px; line-height: 1.7; }

.vgn-benefits { display: grid; gap: 12px; }
@media (min-width: 720px) { .vgn-benefits { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } }
.vgn-benefits li {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 14px 16px;
  background: #fff; border: 1px solid var(--vgn-gray-12); border-radius: var(--vgn-radius-lg);
  font-size: 15px; font-weight: 500; line-height: 1.45;
}
@media (min-width: 720px) { .vgn-benefits li { flex-direction: column; gap: 10px; padding: 18px; } }
.vgn-benefits svg { flex: 0 0 auto; width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: var(--vgn-green-bg); color: var(--vgn-green); }

.vgn-dosage {
  display: flex; flex-direction: column; gap: 4px;
  margin-top: 24px; padding: 18px 20px;
  background: var(--vgn-yellow-bg); border-radius: var(--vgn-radius-lg);
}
.vgn-dosage-label { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--vgn-yellow); }
.vgn-dosage strong { font: 500 22px/1.3 "Fraunces", Georgia, serif; }

.vgn-steps { display: grid; gap: 10px; counter-reset: vgn-step; }
.vgn-steps li {
  position: relative; counter-increment: vgn-step;
  min-height: 32px; padding: 4px 0 0 46px;
  font-size: 16px; line-height: 1.55;
}
.vgn-steps li::before {
  content: counter(vgn-step);
  position: absolute; left: 0; top: 0;
  display: grid; place-items: center; width: 32px; height: 32px;
  border-radius: 50%; background: var(--vgn-black); color: #fff;
  font: 700 14px/1 var(--vgn-font);
}

.vgn-uses { display: flex; flex-wrap: wrap; gap: 8px; }
.vgn-uses li { padding: 8px 14px; background: var(--vgn-gray-06); border-radius: 999px; font-size: 14px; font-weight: 500; }

.vgn-content .vgn-guide-link { margin-top: 36px; }
.vgn-content .vgn-table { margin: 0; }
.vgn-content .vgn-table th { width: 34%; }

.vgn-fulltext { margin-top: 32px; border-top: 1px solid var(--vgn-gray-12); border-bottom: 1px solid var(--vgn-gray-12); }
.vgn-fulltext summary {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 56px; cursor: pointer; list-style: none;
  font-size: 15px; font-weight: 600;
}
.vgn-fulltext summary::-webkit-details-marker { display: none; }
.vgn-fulltext summary::after { content: '+'; font-size: 22px; font-weight: 400; transition: transform .2s ease; }
.vgn-fulltext[open] summary::after { transform: rotate(45deg); }
.vgn-fulltext p { margin: 0 0 14px; font-size: 15px; line-height: 1.75; color: var(--vgn-gray); }
.vgn-fulltext .vgn-supplier { margin-bottom: 20px; font-size: 13px; }

/* Desktop: obsah pres celou sirku, pod prehledem dva sloupce. */
.vgn-content { max-width: none; }
@media (min-width: 1024px) {
  .vgn-content-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(32px, 4vw, 68px); align-items: start; }
  .vgn-content-cols.is-single { grid-template-columns: minmax(0, 780px); }
  .vgn-content-side .vgn-fulltext { margin-top: 28px; }
}
@media (max-width: 1023px) {
  .vgn-benefits, .vgn-dosage, .vgn-content-cols { max-width: 780px; }
}

.vgn-dosage-note { margin-top: 4px; font-size: 13px; color: var(--vgn-gray); }
/* Obsah balicku: jeden kompaktni seznam misto karet. */
.vgn-benefits.is-list { display: block; background: #fff; border: 1px solid var(--vgn-gray-12); border-radius: var(--vgn-radius-lg); }
.vgn-benefits.is-list li { flex-direction: row; align-items: center; padding: 12px 16px; background: none; border: 0; border-radius: 0; }
.vgn-benefits.is-list li + li { border-top: 1px solid var(--vgn-gray-12); }
@media (min-width: 720px) { .vgn-benefits.is-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .vgn-benefits.is-list li + li { border-top: 0; } .vgn-benefits.is-list li:nth-child(n+3) { border-top: 1px solid var(--vgn-gray-12); } }
/* Dva i tri body se na desktopu rozlozi rovnomerne. */
@media (min-width: 720px) { .vgn-benefits:not(.is-list) { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } }

/* ==================================================================
   Sjednoceni detailu (2026-09-23)
   ================================================================== */

/* Stitek nad nazvem stejne jako na kartach v katalogu. */
.vgn-proof {
  padding: 5px 11px;
  border-radius: 999px;
  font: 600 12px/1.2 var(--vgn-font);
  letter-spacing: 0;
  text-transform: none;
}

/* Vsechny nadpisy sekci stejne velke. */
.vgn-block h2,
.vgn-section-title { margin: 0 0 16px; font: 500 26px/1.2 "Fraunces", Georgia, serif; letter-spacing: -.02em; }
@media (min-width: 1024px) {
  .vgn-block h2,
  .vgn-section-title { font-size: 30px; }
}
.vgn-section { padding-top: 16px; }

/* Ve zkratce: klidny pas bez karet. */
.vgn-keyfacts {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--vgn-gray-12);
  border-bottom: 1px solid var(--vgn-gray-12);
}
.vgn-keyfact {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 0;
  font-size: 16px;
  line-height: 1.5;
}
.vgn-keyfact + .vgn-keyfact { border-top: 1px solid var(--vgn-gray-12); }
.vgn-keyfact > svg {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  padding: 6px;
  border-radius: 50%;
  background: var(--vgn-green-bg);
  color: var(--vgn-green);
}
.vgn-keyfact.is-dosage > svg { background: var(--vgn-yellow-bg); color: var(--vgn-yellow); }
.vgn-keyfact-label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--vgn-yellow); }
.vgn-keyfact strong { display: block; margin-top: 2px; font-weight: 600; }
.vgn-keyfact-note { display: block; margin-top: 2px; font-size: 13px; color: var(--vgn-gray); }
@media (min-width: 720px) {
  .vgn-keyfacts { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
  .vgn-keyfact { padding: 20px 24px 20px 0; }
  .vgn-keyfact + .vgn-keyfact { border-top: 0; border-left: 1px solid var(--vgn-gray-12); padding-left: 24px; }
}

/* Sekce pod sebou s rovnomernymi mezerami. */
.vgn-content { padding-top: 4px; }
.vgn-block { margin-top: 40px; }
.vgn-content .vgn-guide-link { margin-top: 32px; }
@media (min-width: 1024px) { .vgn-content-cols .vgn-block:first-child { margin-top: 40px; } }
.vgn-content { border-top: 0; }

/* ==================================================================
   Znackove ikony: kvet vanilky z loga misto obecnych fajfek.
   ================================================================== */
.vgn-keyfact > svg {
  width: 26px;
  height: 26px;
  padding: 0;
  margin-top: -1px;
  border-radius: 0;
  background: none;
  color: #b7763e;
  fill: currentColor;
  --vgn-flower-center: #faf6ef;
}
.vgn-keyfact.is-dosage > svg { background: none; color: #b7763e; fill: currentColor; stroke: none; }
.vgn-tag svg { fill: #b7763e; background: none; padding: 0; width: 16px; height: 16px; --vgn-flower-center: #faf6ef; }

/* Obsah balicku ve stejnem pasu, jen po radcich. */
.vgn-keyfacts.is-contents { grid-template-columns: minmax(0, 1fr); }
.vgn-keyfacts.is-contents .vgn-keyfact { padding: 14px 0; }
@media (min-width: 720px) {
  .vgn-keyfacts.is-contents { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
  .vgn-keyfacts.is-contents .vgn-keyfact { padding: 14px 0; border-left: 0; }
  .vgn-keyfacts.is-contents .vgn-keyfact + .vgn-keyfact { border-top: 0; padding-left: 0; }
  .vgn-keyfacts.is-contents .vgn-keyfact:nth-child(n+3) { border-top: 1px solid var(--vgn-gray-12); }
}

/* Karticka navodu: vsude stejna, bez nahodnych fotek. */
.vgn-content .vgn-guide-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid var(--vgn-gray-12);
  background: #fff;
  transition: border-color .15s ease;
}
.vgn-content .vgn-guide-link:hover { border-color: var(--vgn-gray-50); }
.vgn-guide-icon { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; background: var(--vgn-yellow-bg); }
.vgn-guide-icon svg { width: 24px; height: 24px; fill: #b7763e; --vgn-flower-center: var(--vgn-yellow-bg); }
.vgn-guide-body { flex: 1 1 auto; min-width: 0; }
.vgn-guide-arrow { flex: 0 0 auto; font-size: 18px; color: var(--vgn-gray); transition: transform .2s ease; }
.vgn-guide-link:hover .vgn-guide-arrow { transform: translateX(3px); }

.vgn-supplier.is-standalone { margin: 20px 0 0; font-size: 13px; color: var(--vgn-gray); }

/* Znak Vanilla Bay z loga jako odrazka; lzicka ve stejnem stylu. */
.vgn-emblem { display: block; flex: 0 0 26px; width: 26px; height: 26px; margin-top: -1px; }
.vgn-keyfact > svg.vgn-emblem, .vgn-keyfact.is-dosage > svg.vgn-emblem { fill: initial; stroke: none; color: inherit; padding: 0; background: none; }
.vgn-tag .vgn-emblem { flex-basis: 18px; width: 18px; height: 18px; margin: 0; }
.vgn-guide-icon { background: none; }
.vgn-guide-icon .vgn-emblem { width: 40px; height: 40px; flex-basis: 40px; }

/* Doporucene produkty: karta je odkaz, bez sipky; na mobilu dve vedle sebe. */
.vgn-card-title { text-decoration: none; }
.vgn-card:hover .vgn-card-title { text-decoration: none; }
@media (hover: hover) { .vgn-card-link:hover .vgn-card-title { text-decoration: underline; text-underline-offset: 3px; } }
.vgn-card, .vgn-card a { -webkit-tap-highlight-color: transparent; }
.vgn .vgn-card-btn { width: 34px; height: 34px; flex-basis: 34px; font-size: 18px; }
@media (max-width: 767px) {
  .vgn-cards { grid-auto-columns: calc((100% - 12px) / 2); gap: 12px; padding-right: 0; }
  .vgn-card-media { padding: 10px; margin-bottom: 10px; border-radius: 12px; }
  .vgn-card-title { font-size: 13.5px; line-height: 1.3; }
  .vgn-card-desc { display: none; }
  .vgn-card-foot { padding-top: 6px; }
  .vgn-card-price { font-size: 13.5px; }
  .vgn .vgn-card-btn { width: 30px; height: 30px; flex-basis: 30px; font-size: 16px; }
}

/* Prvni sekce obsahu nema vlastni odstup; mezeru nad ni dela jen sloupec. */
.vgn-content > .vgn-block:first-child { margin-top: 0; }
.vgn-content { padding-top: 0; }
@media (max-width: 1023px) { .vgn-content-col { margin-top: 44px; } }
@media (min-width: 1024px) { .vgn-content-col { margin-top: 56px; } }

/* Pridavani do kosiku: okamzita odezva. */
.vgn-buy-cart.is-adding { opacity: .75; cursor: progress; }
.vgn-buy-cart.is-adding { position: relative; }
.vgn-buy-cart.is-adding::after { content: ""; position: absolute; right: 18px; top: calc(50% - 8px); width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: vgn-spin .7s linear infinite; }
@keyframes vgn-spin { to { transform: rotate(360deg); } }

@media (min-width: 1024px) and (max-width: 1180px) {
  .vgn-head-desktop .vgn-intro { margin-bottom: 12px; line-height: 1.5; }
  .vgn-qty { margin-top: 14px; }
  .vgn-price { margin-top: 16px; }
  .vgn-buy { margin-top: 12px; }
}

/* Produkty na bilem pozadi (originalni fotky) – galerie i doporucene. */
.vgn-gallery-item { background: #fff; box-shadow: inset 0 0 0 1px #efe6d9; }
.vgn-gallery-item.is-packshot img { mix-blend-mode: normal; }
.vgn-lusk .vgn-gallery-item.is-packshot::after { background: #fff; }
.vgn-card-media { background: #fff; box-shadow: inset 0 0 0 1px #efe6d9; }
.vgn-card-media img { mix-blend-mode: normal; }
.vgn-card[data-category="lusky"] .vgn-card-media::after { background: #fff; }


/* ==================================================================
   Detail produktu – jeden globalni rozvrh pro vsechny produkty
   (2026-09-26): fotky vlevo pod sebou se posouvaji, pravy panel
   s variantami, cenou a tlacitkem do kosiku pri scrollu stoji.
   Obsah (ve zkratce, pouziti, slozeni) je pod tim pres celou sirku.
   ================================================================== */
@media (min-width: 1024px) {
  .vgn-grid {
    grid-template-columns: minmax(0, 620px) minmax(360px, 1fr);
    grid-template-areas: "gallery detail";
    align-items: start;
    column-gap: clamp(40px, 4.5vw, 64px);
    max-width: 1180px;
    margin: 24px auto 0;
  }
  .vgn-grid .vgn-detail-col { align-self: stretch; }
  /* Panel stoji pod hlavickou; kdyz je vyssi nez okno, dojede
     nejdriv na svuj konec a pak stoji (tlacitko je vzdy videt). */
  .vgn .vgn-sticky,
  .vgn-editorial .vgn-sticky { position: static; top: auto; }
  .vgn.is-pinned .vgn-sticky {
    position: sticky;
    top: calc(var(--announcement-h, 0px) + var(--header-h, 72px) + 20px);
  }
  /* Kompaktni nakupni cast: mnozstvi v jedne rade, info ve dvou sloupcich. */
  .vgn .vgn-qty-chips { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .vgn .vgn-info { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; margin-top: 20px; }
  .vgn .vgn-info-row { margin: 0; font-size: 13.5px; line-height: 1.45; }
  .vgn .vgn-info-row svg { margin-top: 1px; }

  /* Galerie: fotky pod sebou, hlavni ctverec, dalsi na sirku. */
  .vgn .vgn-gallery {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    overflow: visible;
    scroll-snap-type: none;
    margin: 0;
    padding: 0;
  }
  .vgn .vgn-gallery > li { display: block; min-width: 0; scroll-snap-align: none; }
  /* hlavni fotka pres celou sirku, dalsi mensi po dvou vedle sebe */
  .vgn .vgn-gallery > li:first-child { grid-column: 1 / -1; }
  .vgn .vgn-gallery-item { height: auto; aspect-ratio: 1; border-radius: 14px; }
  .vgn .vgn-gallery > li:first-child .vgn-gallery-item { aspect-ratio: 1 / .9; }
  .vgn .vgn-gallery > li:last-child:nth-child(even) { grid-column: 1 / -1; }
  .vgn .vgn-gallery > li:last-child:nth-child(even) .vgn-gallery-item { aspect-ratio: 2 / 1; }
  .vgn .vgn-gallery > li:not(:first-child) .vgn-gallery-item.is-packshot { padding: 24px; }
  .vgn .vgn-gallery-item.is-packshot { padding: 48px; box-shadow: inset 0 0 0 1px #efe6d9; }
  .vgn .vgn-gallery-item.is-packshot img { max-width: none; max-height: none; }
  .vgn .vgn-gallery-item.is-photo { background: #f7f7f5; box-shadow: none; }
  .vgn .vgn-gallery-item.is-photo img { object-fit: cover; }
  .vgn .vgn-gallery-thumbs,
  .vgn .vgn-gallery-progress { display: none; }

  /* Hodne velikosti baleni: dva sloupce, at se panel vejde do okna. */
  .vgn-radiocolumn-wrap[data-count="4"],
  .vgn-radiocolumn-wrap[data-count="5"],
  .vgn-radiocolumn-wrap[data-count="6"],
  .vgn-radiocolumn-wrap[data-count="7"],
  .vgn-radiocolumn-wrap[data-count="8"] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
  .vgn-radiocolumn-wrap[data-count="4"] .vgn-radiocolumn,
  .vgn-radiocolumn-wrap[data-count="5"] .vgn-radiocolumn,
  .vgn-radiocolumn-wrap[data-count="6"] .vgn-radiocolumn,
  .vgn-radiocolumn-wrap[data-count="7"] .vgn-radiocolumn,
  .vgn-radiocolumn-wrap[data-count="8"] .vgn-radiocolumn { min-height: 54px; gap: 10px; border-top: 0; border-bottom: 1px solid var(--vgn-gray-12); }
  .vgn-radiocolumn-wrap[data-count] .vgn-radiocolumn:nth-last-child(-n+2):nth-child(odd),
  .vgn-radiocolumn-wrap[data-count] .vgn-radiocolumn:nth-last-child(-n+2):nth-child(odd) ~ .vgn-radiocolumn { border-bottom: 0; }

  /* Obsah pod galerii a panelem, pres celou sirku. */
  .vgn-container > .vgn-content-col { max-width: 1180px; margin: 72px auto 72px; }
  .vgn > .vgn-section.vgn-container { max-width: 1220px; }
}
@media (min-width: 1024px) and (max-width: 1180px) {
  .vgn-grid { grid-template-columns: minmax(0, 1fr) 380px; column-gap: 32px; }
}
@media (max-width: 1023px) {
  .vgn-grid { margin-bottom: 0; }
  .vgn-container > .vgn-content-col { margin: 44px 0 48px; }
}

/* Kompaktni panel, aby se vesel i do nizsiho okna (notebook se zvetsenim). */
@media (min-width: 1024px) {
  .vgn-radiocolumn-wrap[data-count="5"],
  .vgn-radiocolumn-wrap[data-count="6"],
  .vgn-radiocolumn-wrap[data-count="7"],
  .vgn-radiocolumn-wrap[data-count="8"] { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 14px; border-bottom: 0; }
  .vgn-radiocolumn-wrap[data-count="5"] .vgn-radiocolumn,
  .vgn-radiocolumn-wrap[data-count="6"] .vgn-radiocolumn,
  .vgn-radiocolumn-wrap[data-count="7"] .vgn-radiocolumn,
  .vgn-radiocolumn-wrap[data-count="8"] .vgn-radiocolumn { min-height: 46px; padding: 6px 2px 6px 10px; gap: 8px; border-bottom: 1px solid var(--vgn-gray-12) !important; }
  .vgn-radiocolumn-wrap[data-count="5"] .vgn-radiocolumn-unit,
  .vgn-radiocolumn-wrap[data-count="6"] .vgn-radiocolumn-unit,
  .vgn-radiocolumn-wrap[data-count="7"] .vgn-radiocolumn-unit,
  .vgn-radiocolumn-wrap[data-count="8"] .vgn-radiocolumn-unit { display: none; }
  .vgn .vgn-info { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 16px; }
  .vgn .vgn-info-row { font-size: 13px; }
  .vgn .vgn-info-row:nth-child(2) span { white-space: nowrap; }
}