/* Fun separator is mobile-only — hidden on all larger viewports */
.vs-fun-sep { display: none; }

/* Mobile-only elements in shop filter bar — hidden on desktop */
.m-filter-only { display: none !important; }

/* Trust strip below shop grid — mobile only */
.shop-trust-strip { display: none; }

/* Mobile shop search overlay — hidden by default, shown by JS */
.vs-search-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--bg);
  flex-direction: column;
}
.vs-search-overlay.is-open { display: flex; }
.vss-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding-top: max(env(safe-area-inset-top, 0px), 16px);
}
.vss-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px 12px;
  border-bottom: 1.5px solid var(--border);
}
.vss-search-wrap {
  flex: 1;
  position: relative;
}
.vss-icon {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  pointer-events: none;
}
.vss-input {
  width: 100%;
  background: var(--bg2);
  border: 1.5px solid var(--border);
  border-radius: 50px;
  padding: 11px 18px 11px 42px;
  font-size: 16px;
  color: var(--text);
  font-family: var(--vs-font-body);
  outline: none;
  box-sizing: border-box;
  -webkit-appearance: none;
}
.vss-input:focus { border-color: var(--pink); box-shadow: 0 0 0 3px rgba(232,53,138,.12); }
.vss-close {
  background: none;
  border: none;
  font-family: var(--vs-font-accent);
  font-weight: 700;
  font-size: 14px;
  color: var(--pink);
  cursor: pointer;
  padding: 8px 4px;
  flex-shrink: 0;
  white-space: nowrap;
}
.vss-results {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  -webkit-overflow-scrolling: touch;
}
.vss-hint {
  text-align: center;
  padding: 40px 20px;
  color: var(--muted);
  font-size: 15px;
  font-family: var(--vs-font-body);
}
.vss-item {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 10px;
  border-radius: 14px;
  text-decoration: none;
  color: var(--text);
  transition: background .15s;
}
.vss-item:active { background: var(--bg2); }
.vss-thumb {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--bg2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}
.vss-thumb img { width: 100%; height: 100%; object-fit: cover; }
.vss-text { flex: 1; min-width: 0; }
.vss-title { font-weight: 700; font-size: 14px; line-height: 1.3; margin-bottom: 3px; }
.vss-price { font-size: 13px; color: var(--pink); font-family: var(--vs-font-accent); font-weight: 700; }

/* ═══════════════════════════════════════════════════════
   VS MOBILE — phones only (max-width: 767px)
   Loads AFTER theme.css + woocommerce.css.
   theme.css already has a 768px block — this sharpens it.
   Sections visible: hero · products · programi · predstave · testimonials
   Sections hidden:  ticker · stats · about · game · sretni kutak
   ═══════════════════════════════════════════════════════ */

@media (max-width: 767px) {

  /* ══ 1. HIDE SECTIONS ══════════════════════════════════ */

  .ticker-wrap,
  .stats-wrap,
  .about-bg,
  .game-bg,
  .happy-bg {
    display: none !important;
  }


  /* ══ 1b. FUN SEPARATOR (hero → products) ═══════════════ */

  .vs-fun-sep {
    display: block;
    background: linear-gradient(90deg, #8B35D6 0%, #E8358A 55%, #F97316 100%);
    position: relative;
    z-index: 2;
    margin: 0;
    padding: 10px 0 0;
    overflow: hidden;
  }
  .vs-fun-sep::after {
    content: '';
    display: block;
    width: 140%;
    height: 32px;
    background: var(--bg);
    border-radius: 50%;
    margin: 4px 0 0 -20%;
  }
  .vs-sep-inner {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 4px 20px 6px;
  }
  .vs-sep-inner span {
    font-size: 22px;
    display: inline-block;
    animation: vs-sep-float 2.8s ease-in-out infinite;
  }
  .vs-sep-inner span:nth-child(1) { animation-delay: 0s; }
  .vs-sep-inner span:nth-child(2) { animation-delay: 0.28s; }
  .vs-sep-inner span:nth-child(3) { animation-delay: 0.56s; }
  .vs-sep-inner span:nth-child(4) { animation-delay: 0.84s; }
  .vs-sep-inner span:nth-child(5) { animation-delay: 1.12s; }
  .vs-sep-inner span:nth-child(6) { animation-delay: 1.4s; }
  .vs-sep-inner span:nth-child(7) { animation-delay: 1.68s; }
  @keyframes vs-sep-float {
    0%, 100% { transform: translateY(0) scale(1); }
    50%      { transform: translateY(-5px) scale(1.18); }
  }


/* ══ 2. GLOBAL SPACING ════════════════════════════════ */

  .section-inner {
    padding: 44px 12px !important;
  }


  /* ══ 3. HERO OUTER ════════════════════════════════════ */

  .hero {
    padding-top: 76px !important;
    padding-bottom: 80px !important;
    min-height: 0 !important;
  }
  .hero-inner {
    padding: 0 20px !important;
    gap: 24px !important;
    grid-template-columns: 1fr !important;
  }

  /* ── Book visual floats above the copy ── */
  .hero-visual {
    order: -1;
    display: flex !important;
    justify-content: center;
    margin: 0 auto;
    width: 100%;
    overflow: visible;
  }


  /* ══ 4. HERO BOOK — ~80% of screen height, near full-width ══ */

  /* Scene auto-sizes to contain the book + card overflows */
  .book-scene {
    width: 100% !important;
    max-width: 100% !important;
    height: calc((100vw - 92px) * 1.43 + 55px) !important;
    perspective: 900px !important;
    position: relative;
    overflow: visible !important;
  }

  /* Book: ~15% smaller than full-width, 46px equal gutters both sides */
  .book {
    width: calc(100vw - 92px) !important;
    height: calc((100vw - 92px) * 1.43) !important;
    left: 26px !important;
    top: 28px !important;
    transform: rotateY(-8deg) rotateX(2deg) !important;
    filter: drop-shadow(0 22px 48px rgba(139,53,214,.50))
            drop-shadow(0 6px 14px rgba(30,10,46,.28)) !important;
  }
  .book-title    { font-size: clamp(14px, 4.2vw, 18px) !important; bottom: 52px !important; }
  .book-subtitle { font-size: clamp(8px, 2.5vw, 11px)  !important; bottom: 36px !important; }
  .book-author   { font-size: clamp(10px, 3vw, 13px)   !important; bottom: 14px !important; }
  .book-badge    { width: clamp(48px, 13vw, 60px) !important; height: clamp(48px, 13vw, 60px) !important;
                   font-size: clamp(9px, 2.5vw, 11px) !important; top: 14px !important; right: 14px !important; }
  .book-stars    { font-size: clamp(10px, 3vw, 13px) !important; top: 14px !important; }
  .book-glow     { filter: blur(18px) !important; opacity: .28 !important; }

  /* Rings add visual noise on small screen */
  .ha-ring, .ha-ring2 { display: none !important; }

  /* ─── bc-bottom → TOP-LEFT corner of book ─── */
  .bc-bottom {
    top: 12px !important;
    left: 12px !important;
    right: auto !important;
    bottom: auto !important;
    width: clamp(110px, 30vw, 136px) !important;
    transform: rotate(-3deg) !important;
    animation: vs-m-float-tl 6s ease-in-out infinite .8s !important;
    padding: 10px 13px !important;
    z-index: 3 !important;
  }
  @keyframes vs-m-float-tl {
    0%, 100% { transform: rotate(-3deg) translateY(0); }
    50%      { transform: rotate(-3deg) translateY(-8px); }
  }

  /* ─── bc-right → LOWER-RIGHT border of book ─── */
  .bc-right {
    right: 12px !important;
    left: auto !important;
    bottom: 22px !important;
    top: auto !important;
    transform: rotate(2deg) !important;
    animation: vs-m-float-rm 5s ease-in-out infinite !important;
    padding: 10px 13px !important;
    z-index: 3 !important;
  }
  @keyframes vs-m-float-rm {
    0%, 100% { transform: rotate(2deg) translateY(0); }
    50%      { transform: rotate(2deg) translateY(-9px); }
  }

  .bcard-icon  { font-size: 20px; margin-bottom: 3px; }
  .bcard-label { font-size: 9px; }
  .bcard-val   { font-size: 14px; }


  /* ══ 5. HERO COPY — title + shop CTA + trust pills + program CTAs ══ */

  .hero-content {
    display: flex !important;
    flex-direction: column;
    gap: 10px;
  }
  .hero h1 {
    font-size: clamp(26px, 7.5vw, 34px) !important;
    line-height: 1.14;
    order: 1;
    margin: 0;
  }
  .hero-content > p {
    font-size: 14px !important;
    line-height: 1.6;
    margin: 0;
    order: 2;
  }

  /* Unwrap hero-btns so we can individually order the 3 CTAs */
  .hero-btns {
    display: contents !important;
  }

  /* Shop CTA first */
  .hero-cta-shop {
    order: 3 !important;
    width: 100% !important;
    min-height: 50px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex: none !important;
  }

  /* Trust pills right after shop button */
  .hero-trust {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
    overflow: visible !important;
    order: 4 !important;
  }
  .trust-pill {
    flex: none !important;
    width: auto !important;
    white-space: normal !important;
    text-align: center;
    font-size: 9.5px !important;
    padding: 8px 5px !important;
    border-radius: 10px !important;
    line-height: 1.35;
    display: block !important;
  }

  /* Programs + Shows CTAs after trust pills */
  .hero-cta-programs {
    order: 5 !important;
    width: 100% !important;
    min-height: 50px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex: none !important;
  }
  .hero-cta-shows {
    order: 6 !important;
    width: 100% !important;
    min-height: 50px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex: none !important;
  }

  /* Hide eyebrow on mobile */
  .hero-eyebrow {
    display: none !important;
  }


  /* ══ 6. PRODUCTS TEASER — 2-col, nearly full-width ═══ */

  .prods-bg .section-inner {
    padding: 44px 12px !important;
  }
  .prods-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 0 4px;
  }
  .prods-header .btn-outline {
    width: 100%;
    text-align: center;
    justify-content: center;
  }

  /* 2-col grid — shop archive (NOT the home teaser, which is a slider below) */
  .products.prod-grid:not(.home-prod-grid),
  .products.prod-grid.columns-3:not(.home-prod-grid),
  .products.prod-grid.columns-4:not(.home-prod-grid) {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  /* Home products teaser — one row, horizontal slider (like predstave/programi) */
  .prods-bg .section-inner { overflow: hidden; padding-right: 0 !important; }
  .home-prod-grid {
    display: flex !important;
    flex-direction: row !important;
    grid-template-columns: none !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    gap: 12px !important;
    padding: 4px 12px 14px !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    -webkit-mask-image: linear-gradient(to right, #000 88%, transparent 100%);
            mask-image: linear-gradient(to right, #000 88%, transparent 100%);
  }
  .home-prod-grid::-webkit-scrollbar { display: none; }
  .home-prod-grid .shop-card {
    flex: 0 0 64vw !important;
    max-width: 250px !important;
    min-width: 0 !important;
    width: auto !important;
    scroll-snap-align: start !important;
  }

  .shop-card .card-img {
    aspect-ratio: 4 / 5;
    height: auto;
  }
  .shop-card .card-emoji {
    font-size: 36px;
  }
  .shop-card .card-body {
    padding: 9px 9px 0;
    gap: 3px;
  }
  .shop-card .card-body h3,
  .shop-card .woocommerce-loop-product__title {
    font-size: 12px;
    line-height: 1.3;
  }
  .shop-card .card-body p {
    font-size: 11px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
    line-height: 1.4;
  }
  .shop-card .card-meta { display: none; }
  .shop-card .card-footer {
    gap: 5px;
    margin-top: auto;
    padding-top: 7px;
    padding-bottom: 9px;        /* equal to card-body left/right padding */
  }
  .shop-card .price-block .price-now,
  .shop-card .price-block .price-now bdi,
  .shop-card .price-block .woocommerce-Price-amount {
    font-size: 20px;
  }
  .shop-card .cart-add-btn {
    font-size: 11px;
    padding: 8px 8px;
    border-radius: 8px;
    gap: 3px;
    white-space: nowrap;
  }
  .shop-card:active {
    transform: scale(0.97);
    transition: transform .12s ease;
  }


  /* ══ 7. PREDSTAVE + PROGRAMI — horizontal scroll ════ */

  .shows-bg .section-inner,
  .progs-cards-section .section-inner {
    overflow: hidden;
    padding-right: 0 !important;
  }
  .shows-bg .shows-grid,
  .progs-cards-section .shows-grid {
    display: flex !important;
    flex-direction: row;
    overflow-x: auto;
    gap: 12px;
    margin-left: -12px;
    padding-left: 12px;
    padding-right: 20px;
    padding-bottom: 16px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    grid-template-columns: unset !important;
  }
  .shows-bg .shows-grid::-webkit-scrollbar,
  .progs-cards-section .shows-grid::-webkit-scrollbar { display: none; }

  .shows-bg .show-card,
  .progs-cards-section .show-card {
    flex: 0 0 72vw !important;
    max-width: 245px;
    scroll-snap-align: start;
    min-width: 0;
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .shows-bg .show-card:active,
  .progs-cards-section .show-card:active {
    transform: scale(0.98) !important;
    transition: transform .12s ease;
  }
  .shows-bg .show-thumb,
  .progs-cards-section .show-thumb {
    aspect-ratio: 4 / 3 !important;
    height: auto !important;
  }
  .show-body { padding: 13px 15px 15px; }
  .show-body h3 { font-size: 14px; margin-bottom: 5px; }
  .show-body p {
    font-size: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .shows-bg > .section-inner > div[style*="text-align"],
  .shows-cta-row {
    display: none !important;
  }

  /* Right-edge fade hints at more content to swipe */
  .shows-bg .section-inner,
  .progs-cards-section .section-inner {
    -webkit-mask-image: linear-gradient(to right, #000 82%, transparent 100%);
    mask-image: linear-gradient(to right, #000 82%, transparent 100%);
  }


  /* ══ 8. TESTIMONIALS — horizontal scroll strip ════════ */

  .testimonials-section .section-inner {
    padding: 44px 0 44px 12px !important;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, #000 82%, transparent 100%);
    mask-image: linear-gradient(to right, #000 82%, transparent 100%);
  }
  .t-arrow { display: none !important; }
  .t-dots  { display: none !important; }

  /* Unwrap the carousel — make viewport the scroll container */
  .testimonials-carousel {
    padding: 0 !important;
    max-width: 100% !important;
    margin-top: 24px !important;
    overflow: hidden;
  }
  .testimonials-viewport {
    overflow-x: auto !important;
    overflow-y: visible !important;
    border-radius: 0 !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
  }
  .testimonials-viewport::-webkit-scrollbar { display: none; }

  /* Track becomes a horizontal flex row */
  .testimonials-track {
    display: flex !important;
    flex-direction: row !important;
    position: static !important;
    min-height: auto !important;
    gap: 12px !important;
    padding: 4px 20px 16px 4px !important;
    width: max-content;
  }

  /* Every slide always visible, fixed card width */
  .testimonial-slide {
    position: relative !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
    flex: 0 0 80vw !important;
    max-width: 300px;
    scroll-snap-align: start;
    inset: auto !important;
    padding: 22px 20px 18px !important;
    gap: 14px !important;
    min-height: auto !important;
  }
  .testimonial-slide.is-active {
    position: relative !important;
  }

  .t-quote { font-size: 14px !important; line-height: 1.6; }
  .t-quote-mark { font-size: 52px !important; margin-bottom: -10px !important; }
  .t-avatar { width: 36px !important; height: 36px !important; font-size: 15px !important; min-width: 36px !important; }
  .t-author { font-size: 13px !important; }
  .t-role   { font-size: 11px !important; }
  .t-meta   { padding-top: 12px !important; }


  /* ══ 9. FOOTER ═══════════════════════════════════════ */

  .site-footer .footer-inner {
    padding: 40px 20px calc(24px + env(safe-area-inset-bottom)) !important;
  }

  /* Brand: full-width top row. Nav cols: 2 side-by-side. Contact: full-width left. */
  .footer-top {
    grid-template-columns: 1fr 1fr !important;
    gap: 24px 16px !important;
  }
  .footer-top .footer-brand {
    grid-column: 1 / -1;
  }

  /* Logo at half width on mobile */
  .footer-brand img {
    width: 50% !important;
    max-width: 170px !important;
    height: auto !important;
  }

  /* Tagline larger */
  .footer-brand > p {
    font-size: 15px !important;
    line-height: 1.65 !important;
    margin-top: 12px !important;
  }

  /* Contact: full-width, left-aligned */
  .footer-top .footer-col.footer-contact {
    grid-column: 1 / -1;
    text-align: left !important;
  }
  .footer-contact p,
  .footer-contact a {
    text-align: left !important;
  }

  /* Credit link styling */
  .footer-credit-link {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid rgba(0,0,0,.15);
    transition: color .2s;
  }
  .footer-credit-link:hover { color: var(--pink); border-bottom-color: var(--pink); }

  .footer-bottom { flex-direction: column; text-align: center; gap: 8px; }


  /* ══ 10b. SHOP ARCHIVE PAGE ══════════════════════════ */

  /* Hero: keep only animated icons, hide text + trust row */
  .shop-hero h1,
  .shop-hero p,
  .shop-hero .trust-row { display: none !important; }

  .shop-hero {
    min-height: 0 !important;
    padding: 84px 20px 80px !important;
  }
  .hero-icons { margin-bottom: 0 !important; }

  /* Filter bar pulls up over the hero wave */
  .filter-wrap {
    position: relative;
    z-index: 10;
    margin-top: -28px !important;
    border-radius: 20px 20px 0 0;
  }

  /* Hide desktop filter elements */
  .filter-label { display: none !important; }
  .filter-btn   { display: none !important; }
  .search-wrap  { display: none !important; }
  .vs-shop-sort { display: none !important; }

  /* Hide results bar entirely */
  .results-bar { display: none !important; }

  /* Mobile filter inner — tight single row */
  .filter-inner {
    padding: 0 12px !important;
    gap: 7px !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
  }

  /* Show mobile-only filter elements — block as base; flex for button/toggle */
  .m-filter-only { display: block !important; }

  /* Category select */
  .filter-cat-select.m-filter-only {
    flex: 1 1 0;
    min-width: 0;
    appearance: none;
    -webkit-appearance: none;
    background: var(--card-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%23E8358A' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 11px center no-repeat;
    border: 1.5px solid var(--border);
    border-radius: 50px;
    padding: 9px 30px 9px 14px;
    font-size: 13px;
    font-family: var(--vs-font-body);
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    outline: none;
    transition: border-color .25s;
    -webkit-tap-highlight-color: transparent;
  }
  .filter-cat-select.m-filter-only:focus { border-color: var(--pink); }

  /* Search button */
  .filter-search-btn.m-filter-only {
    display: flex !important;
    flex-shrink: 0;
    align-items: center;
    gap: 5px;
    background: var(--card-bg);
    border: 1.5px solid var(--border);
    border-radius: 50px;
    padding: 9px 14px;
    font-size: 13px;
    font-family: var(--vs-font-body);
    font-weight: 600;
    color: var(--text2);
    cursor: pointer;
    transition: border-color .2s, color .2s;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
  }
  .filter-search-btn.m-filter-only:active { border-color: var(--pink); color: var(--pink); }

  /* Mobile view toggle */
  .m-view-toggle.m-filter-only {
    display: flex !important;
    flex-shrink: 0;
    gap: 3px;
  }
  .m-view-toggle .view-btn {
    background: var(--card-bg);
    border: 1.5px solid var(--border);
    border-radius: 9px;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    cursor: pointer;
    color: var(--text2);
    transition: all .2s var(--ease);
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0;
  }
  .m-view-toggle .view-btn.active {
    background: var(--grad);
    color: #fff;
    border-color: transparent;
  }

  /* Trust strip — one row, below product grid */
  .shop-trust-strip {
    display: flex !important;
    justify-content: space-around;
    align-items: flex-start;
    padding: 16px 12px;
    background: var(--card-bg);
    border-top: 1.5px solid var(--border);
    border-bottom: 1.5px solid var(--border);
    margin: 0;
    gap: 4px;
  }
  .trust-strip-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    font-family: var(--vs-font-accent);
    color: var(--text2);
    text-align: center;
    flex: 1;
    line-height: 1.3;
  }
  .trust-strip-item span { font-size: 22px; }

  /* Shop layout padding tighter on mobile */
  .shop-layout {
    padding: 18px 12px 40px !important;
  }


  /* ══ 10c. NEWSLETTER — animated sky on mobile ════════ */

  .newsletter {
    background: linear-gradient(180deg, #7EC8E3 0%, #B2DFF5 45%, #D8F1FF 100%) !important;
    padding: 50px 20px 60px !important;
    overflow: hidden;
  }
  /* Remove desktop dark overlay */
  .newsletter::before { background: none !important; }
  /* Animated cloud drifting across sky */
  .newsletter::after {
    content: '';
    position: absolute;
    width: 180px;
    height: 55px;
    background: rgba(255,255,255,.75);
    border-radius: 50%;
    top: 18px;
    left: -200px;
    box-shadow:
      70px 0 0 18px rgba(255,255,255,.7),
      -50px 5px 0 12px rgba(255,255,255,.55),
      140px -8px 0 24px rgba(255,255,255,.65);
    animation: nl-cloud-drift 22s linear infinite;
    pointer-events: none;
    z-index: 0;
  }
  @keyframes nl-cloud-drift {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(100vw + 400px)); }
  }

  /* Dark text on light sky background */
  .newsletter-inner { position: relative; z-index: 1; }
  .newsletter h2 { color: #1E0A2E !important; }
  .newsletter p  { color: #2D1A4A !important; }
  .nl-badge {
    background: rgba(139,53,214,.14) !important;
    color: #6B22B8 !important;
    border-color: rgba(139,53,214,.3) !important;
  }
  .nl-input {
    background: rgba(255,255,255,.88) !important;
    border-color: rgba(139,53,214,.3) !important;
    color: #1E0A2E !important;
  }
  .nl-input::placeholder { color: #8B7AA0 !important; }
  /* Keep gradient button as-is */


  /* ══ 10d. CART PAGE (košarica) ═══════════════════════ */

  .woocommerce-cart .site-main {
    padding: 80px 14px 40px !important;
  }

  /* Single column — cart items left, totals below */
  .cart-layout {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* Totals card — remove sticky, stack naturally */
  .cart_totals,
  .cart-summary {
    position: static !important;
    top: auto !important;
  }

  /* Cart item cards — tighter thumb + slightly less padding */
  .cart-item-card {
    padding: 14px !important;
    gap: 12px !important;
    grid-template-columns: 72px 1fr !important;
  }
  .cart-item-thumb img,
  .cart-item-thumb-img {
    width: 72px !important;
    height: 72px !important;
  }
  .cart-item-title { font-size: 14px !important; }
  .cart-item-foot  { gap: 10px !important; }

  /* Cart actions — stack vertically, full-width */
  .cart-actions {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  /* Coupon: pill-shaped combo input+button */
  .cart-actions .coupon {
    display: flex !important;
    max-width: 100% !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    border-radius: 14px !important;
    border: 1.5px solid var(--border) !important;
    overflow: hidden !important;
    background: var(--card-bg) !important;
  }
  .cart-actions .coupon #coupon_code {
    flex: 1 !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    height: 50px !important;
    padding: 12px 16px !important;
    font-size: 15px !important;
    color: var(--text) !important;
    outline: none !important;
  }
  .cart-actions .coupon .button[name="apply_coupon"] {
    flex-shrink: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    height: 50px !important;
    padding: 0 18px !important;
    background: var(--grad) !important;
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    white-space: nowrap !important;
    cursor: pointer !important;
  }
  .cart-actions .vs-update-cart {
    display: none !important;
  }
  .cart-continue {
    margin-left: 0 !important;
    text-align: center !important;
    display: block !important;
    padding: 8px 0 !important;
    width: 100% !important;
  }


  /* ══ 10e. CHECKOUT PAGE (blagajna) ═══════════════════ */

  /* Classic shortcode checkout — page padding */
  .woocommerce-checkout .site-main {
    padding: 80px 14px 40px !important;
  }

  /* Classic checkout — 1-col layout, customer details + order review stacked */
  form.checkout {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  form.checkout #customer_details {
    padding: 20px 16px !important;
  }
  form.checkout .woocommerce-checkout-review-order {
    position: static !important;
    top: auto !important;
  }

  /* WC form rows — full-width (by default they float at 47% each) */
  .woocommerce form .form-row-first,
  .woocommerce form .form-row-last,
  .woocommerce-page form .form-row-first,
  .woocommerce-page form .form-row-last {
    float: none !important;
    width: 100% !important;
    padding: 0 !important;
  }

  /* Block checkout — tighten side padding */
  .vs-flow-content {
    padding: 14px 12px 48px !important;
  }
  .vs-flow-content .wp-block-woocommerce-checkout-contact-information-block,
  .vs-flow-content .wp-block-woocommerce-checkout-shipping-address-block,
  .vs-flow-content .wp-block-woocommerce-checkout-billing-address-block,
  .vs-flow-content .wp-block-woocommerce-checkout-shipping-method-block,
  .vs-flow-content .wp-block-woocommerce-checkout-payment-block,
  .vs-flow-content .wp-block-woocommerce-checkout-order-note-block,
  .vs-flow-content .wp-block-woocommerce-checkout-totals-block,
  .vs-flow-content .wp-block-woocommerce-checkout-order-summary-block,
  .vs-flow-content .wp-block-woocommerce-cart-order-summary-block {
    padding: 18px 14px !important;
  }

  /* Flow bar — clear fixed header on mobile */
  .vs-flow-bar { margin-top: 60px !important; }
  /* Help link takes too much space on narrow phones */
  .vs-flow-help { display: none !important; }


  /* ══ 10f. CART — empty state + block cart items ══════ */

  /* Classic empty cart — 130px top = huge gap after the hero */
  .cart-empty,
  .woocommerce-cart .cart-empty {
    padding: 24px 20px 40px !important;
  }
  .cart-empty .empty-icon { font-size: 64px !important; }
  .cart-empty h2 { font-size: 26px !important; }

  /* Block empty cart — same fix */
  .wp-block-woocommerce-empty-cart-block {
    padding: 32px 14px 40px !important;
  }

  /* Block cart items: <table>/<tr> → card grid on mobile */
  .wc-block-cart-items,
  .wc-block-cart-items > tbody {
    display: block !important;
    width: 100% !important;
  }
  .wc-block-cart-items .wc-block-cart-items__row {
    display: grid !important;
    grid-template-columns: 72px 1fr !important;
    grid-template-rows: auto auto !important;
    gap: 4px 12px !important;
    align-items: start !important;
    padding: 14px !important;
    margin-bottom: 10px !important;
  }
  .wc-block-cart-items td.wc-block-cart-item__image {
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;
    padding: 0 !important;
    border: none !important;
  }
  .wc-block-cart-items td.wc-block-cart-item__product {
    grid-column: 2 !important;
    grid-row: 1 !important;
    padding: 0 !important;
    border: none !important;
  }
  .wc-block-cart-items td.wc-block-cart-item__quantity,
  .wc-block-cart-items td.wc-block-cart-item__total {
    grid-column: 2 !important;
    padding: 0 !important;
    border: none !important;
  }
  /* Image smaller on mobile */
  .wc-block-cart-item__image img,
  .wc-block-cart-items td.wc-block-cart-item__image img {
    width: 72px !important;
    height: 72px !important;
  }
  /* Totals sidebar card — tighter padding */
  .wc-block-components-totals-wrapper,
  .wp-block-woocommerce-cart-order-summary-block {
    padding: 20px 16px !important;
  }

  /* ── Block CART layout (.wp-block-woocommerce-filled-cart-block uses flex, not sidebar-layout).
     Stack items + totals vertically on mobile. */
  .wp-block-woocommerce-filled-cart-block {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }
  .wp-block-woocommerce-cart-items-block,
  .wp-block-woocommerce-cart-totals-block {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex: 1 0 100% !important;
  }

  /* ── Block CHECKOUT sidebar layout — force 1 col, including all WC data-attr variants. */
  .wc-block-components-sidebar-layout,
  .wc-block-components-sidebar-layout.wc-block-checkout,
  .wc-block-components-sidebar-layout[data-large],
  .wc-block-components-sidebar-layout[data-medium],
  .wc-block-components-sidebar-layout[data-small],
  .wp-block-woocommerce-checkout .wc-block-components-sidebar-layout {
    grid-template-columns: 1fr !important;
    grid-template-areas: 'main' 'sidebar' !important;
    row-gap: 16px !important;
  }
  .wc-block-components-sidebar-layout .wc-block-components-sidebar,
  .wc-block-components-sidebar-layout > .wc-block-components-sidebar {
    position: static !important;
    top: auto !important;
  }


  /* ══ 11. SINGLE PRODUCT PAGE ════════════════════════ */

  /* Breadcrumb — clear fixed nav, 10px side gutter */
  .single-product .vs-breadcrumbs {
    padding-top: var(--vs-nav-clear) !important;
    padding-bottom: 4px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  /* Outer container — no horizontal padding (gallery bleeds edge-to-edge) */
  .single-product div.product {
    padding: 0 0 56px !important;
  }

  /* 2-col grid → single column, gallery on top */
  .product-layout {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    margin-bottom: 0 !important;
    padding: 10px !important;
  }

  /* Gallery wrap — bleed to screen edges */
  .single-product .vs-gallery-wrap {
    margin: 0 !important;
    overflow: hidden !important;
  }

  /* Main image — true edge-to-edge, no side radius, keep bottom soft */
  .gallery-main {
    border-radius: 0 0 24px 24px !important;
    aspect-ratio: 1 !important;
  }

  /* Main image fade-swap transition (used by JS thumb swap + swipe) */
  .gallery-main img,
  .gallery-main #vsMainImg {
    transition: opacity .18s ease, transform .22s ease !important;
  }

  /* Thumbs — swipeable horizontal strip, padded back to page gutter */
  .gallery-thumbs {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 8px !important;
    margin-top: 10px !important;
    padding: 4px 14px 14px !important;
    grid-template-columns: none !important;
  }
  .gallery-thumbs::-webkit-scrollbar { display: none !important; }
  button.gallery-thumb,
  .gallery-thumb {
    flex: 0 0 68px !important;
    width: 68px !important;
    min-width: 68px !important;
    height: 68px !important;
    border-radius: 10px !important;
    transition: transform .15s var(--spring), box-shadow .15s !important;
  }
  button.gallery-thumb.active,
  .gallery-thumb.active {
    box-shadow: 0 0 0 3px var(--pink) !important;
    transform: scale(1.05) !important;
  }

  /* Summary — card with white bg, 10px side margins, floats below gallery */
  .single-product .entry-summary {
    background: var(--card-bg) !important;
    border-radius: 20px !important;
    box-shadow: 0 2px 20px rgba(139,53,214,.07) !important;
    /* margin: 8px 10px 0 !important; */
    padding: 20px 10px 16px !important;
  }

  /* Product title */
  .product_title,
  .product_title.entry-title {
    font-size: clamp(22px, 7vw, 28px) !important;
    line-height: 1.2 !important;
    margin-bottom: 8px !important;
  }

  /* Price */
  .summary .price .woocommerce-Price-amount,
  .single-product .price .woocommerce-Price-amount {
    font-size: 30px !important;
  }
  .summary .price del .woocommerce-Price-amount,
  .single-product .price del .woocommerce-Price-amount {
    font-size: 15px !important;
  }

  /* Short description panel */
  .woocommerce-product-details__short-description {
    font-size: 14px !important;
    padding: 12px 16px 12px 42px !important;
    border-radius: 12px !important;
    margin-bottom: 16px !important;
  }
  .woocommerce-product-details__short-description::before {
    top: 12px !important;
    left: 14px !important;
    font-size: 16px !important;
  }

  /* Meta chips */
  .product-meta-chips {
    gap: 6px !important;
    margin-bottom: 16px !important;
  }
  .meta-chip {
    font-size: 11px !important;
    padding: 5px 12px !important;
  }

  /* ATC row: qty stays compact, button fills remaining space */
  .cart {
    flex-wrap: nowrap !important;
    gap: 10px !important;
    margin-bottom: 16px !important;
  }
  .quantity { flex-shrink: 0 !important; }
  .woocommerce form.cart .single_add_to_cart_button,
  .single_add_to_cart_button {
    flex: 1 1 auto !important;
    justify-content: center !important;
    min-width: 0 !important;
    padding: 14px 18px !important;
    font-size: 15px !important;
    white-space: nowrap !important;
  }

  /* Secondary action buttons */
  .product-actions {
    gap: 8px !important;
    margin-bottom: 16px !important;
  }
  .action-btn {
    flex: 1 !important;
    justify-content: center !important;
    padding: 10px 8px !important;
    font-size: 12px !important;
    border-radius: 50px !important;
  }

  /* Trust badges — 2-col stays, tighter */
  .trust-badges {
    gap: 8px !important;
    margin-bottom: 16px !important;
  }
  .trust-badge {
    padding: 10px 12px !important;
    border-radius: 12px !important;
    gap: 8px !important;
  }
  .trust-badge .tb-icon { font-size: 20px !important; }
  .trust-badge .tb-text { font-size: 11px !important; }
  .trust-badge .tb-text strong { font-size: 12px !important; }

  /* Product meta (SKU / categories) */
  .product_meta { font-size: 12px !important; }

  /* Sticky ATC bar — explicit constraints, prevents off-screen overflow */
  .sticky-atc {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    overflow: hidden !important;
    padding: 10px 10px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    gap: 8px !important;
  }
  .sticky-atc-thumb { width: 38px !important; height: 38px !important; flex-shrink: 0 !important; }
  .sticky-atc-info { flex: 1 !important; min-width: 0 !important; overflow: hidden !important; }
  .sticky-atc-title { font-size: 12px !important; }
  .sticky-atc-price { font-size: 11px !important; }
  .sticky-atc .btn-primary {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    min-width: 0 !important;
    max-width: 160px !important;
    padding: 10px 14px !important;
    font-size: 13px !important;
  }

  /* Tabs wrapper — 10px gutter matching page layout */
  .woocommerce-tabs,
  .tabs-wrap {
    padding: 0 10px 40px !important;
    margin-top: 12px !important;
  }

  /* Tab nav — pill chips, horizontal scroll */
  .woocommerce-tabs ul.tabs,
  .tabs-nav {
    display: flex !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 8px !important;
    margin-bottom: 16px !important;
    border-bottom: none !important;
    padding-bottom: 0 !important;
  }
  .woocommerce-tabs ul.tabs::-webkit-scrollbar { display: none !important; }

  /* Each tab item: remove default WC background/border */
  .woocommerce-tabs ul.tabs li,
  .tabs-nav li {
    background: transparent !important;
    border: none !important;
    margin: 0 !important;
  }

  /* Tab link: pill chip */
  .woocommerce-tabs ul.tabs li a,
  .tab-btn {
    display: inline-flex !important;
    align-items: center !important;
    background: var(--bg2) !important;
    border: 1.5px solid var(--border) !important;
    border-radius: 50px !important;
    padding: 8px 16px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--text2) !important;
    white-space: nowrap !important;
    transition: all .2s var(--ease) !important;
    text-decoration: none !important;
  }
  .woocommerce-tabs ul.tabs li a::before { display: none !important; }
  .woocommerce-tabs ul.tabs li a::after  { display: none !important; }

  /* Active tab: gradient pill */
  .woocommerce-tabs ul.tabs li.active a,
  .woocommerce-tabs ul.tabs li.active a:focus,
  .tab-btn.active {
    background: var(--grad) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(232,53,138,.3) !important;
  }

  /* Tab panel: card with matching gutter background */
  .woocommerce-Tabs-panel,
  .tab-panel {
    background: var(--card-bg) !important;
    border-radius: 18px !important;
    padding: 20px 16px !important;
    border: 1.5px solid var(--border) !important;
  }

  /* Hide the WC "Opis" heading inside the description/Recenzije panel */
  .woocommerce-Tabs-panel--description h2,
  #tab-description h2 { display: none !important; }

  /* Hide "Dodatne informacije" heading inside Specifikacije panel */
  .woocommerce-Tabs-panel--additional_information h2,
  #tab-additional_information h2 { display: none !important; }

  /* Product reviews (WC commentlist — inside Recenzije tab) */
  .commentlist {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    padding: 0 !important;
    margin: 0 0 16px !important;
    list-style: none !important;
  }
  .commentlist li.review { list-style: none !important; }

  /* Review card — premium floating card */
  .commentlist .comment_container {
    display: block !important;
    background: var(--card-bg) !important;
    border: 1.5px solid var(--border) !important;
    border-radius: 16px !important;
    padding: 0 !important;
    box-shadow: 0 2px 16px rgba(139,53,214,.06) !important;
    overflow: hidden !important;
    position: relative !important;
  }
  /* Gradient top accent bar */
  .commentlist .comment_container::before {
    content: '' !important;
    display: block !important;
    height: 3px !important;
    background: var(--grad) !important;
    border-radius: 0 !important;
  }

  /* Avatar — hide WC gravatar, use initials circle via CSS */
  .commentlist .comment_container img.avatar {
    display: none !important;
  }

  /* Inner comment-text container */
  .commentlist .comment_container .comment-text {
    padding: 14px 16px 16px !important;
  }

  /* Star rating */
  .commentlist .star-rating {
    font-size: 14px !important;
    margin-bottom: 10px !important;
    float: none !important;
  }

  /* Meta row: author + date */
  .commentlist p.meta,
  .commentlist .woocommerce-review__author {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--text) !important;
    margin-bottom: 4px !important;
    display: block !important;
  }
  .commentlist .woocommerce-review__dash { display: none !important; }
  .commentlist time.woocommerce-review__published-date {
    display: block !important;
    font-size: 11px !important;
    color: var(--muted) !important;
    margin-bottom: 10px !important;
  }

  /* Review text */
  .commentlist .description p {
    font-size: 14px !important;
    line-height: 1.65 !important;
    color: var(--text2) !important;
    margin: 0 !important;
  }

  /* "Verified owner" badge */
  .commentlist .woocommerce-review__verified {
    display: inline-flex !important;
    align-items: center !important;
    font-size: 11px !important;
    color: var(--mint, #34D9B5) !important;
    font-weight: 700 !important;
    margin-bottom: 8px !important;
  }

  /* Reviews form inside tab — tighter */
  #review_form_wrapper,
  #review_form {
    margin-top: 16px !important;
    padding-top: 16px !important;
    border-top: 1.5px solid var(--border) !important;
  }
  #review_form .comment-form-rating { margin-bottom: 12px !important; }

  /* Legacy vs-product-reviews section (used as backup wrapper) */
  .vs-product-reviews {
    padding: 32px 0 !important;
    margin-top: 24px !important;
  }
  .vs-product-reviews-inner { padding: 0 10px !important; }
  .vs-reviews-head {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
    margin-bottom: 20px !important;
  }
  .vs-reviews-head h2 { font-size: 22px !important; margin-top: 0 !important; }
  .vs-reviews-summary { padding: 8px 16px !important; }
  .vs-testimonial-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .vs-testimonial {
    padding: 20px !important;
    min-height: auto !important;
    gap: 14px !important;
  }
  .vs-testimonial-text { font-size: 14px !important; }
  .vs-testimonial-quote { font-size: 64px !important; }

  /* Related / upsell — horizontal scroll slider (same pattern as homepage shows) */
  .single-product div.product > .related.products,
  .single-product div.product > .upsells.products {
    padding: 0 !important;
    margin-top: 32px !important;
    overflow: hidden !important;
  }
  .related.products > h2,
  .upsells.products > h2 {
    font-size: 20px !important;
    margin-bottom: 14px !important;
    padding: 0 10px !important;
  }
  /* Override prod-grid — 2×2 grid, 10px side gutter */
  /* .products.prod-grid selector needed for 0,4,0 specificity to beat woocommerce.css base rule */
  .related.products .products.prod-grid,
  .upsells.products .products.prod-grid,
  .related.products .prod-grid,
  .upsells.products .prod-grid,
  .related.products ul.products,
  .upsells.products ul.products {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    overflow-x: visible !important;
    gap: 10px !important;
    scroll-snap-type: none !important;
    -webkit-overflow-scrolling: auto !important;
    padding: 4px 10px 16px !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
  /* Each card: fill column */
  .related.products .prod-grid .shop-card,
  .upsells.products .prod-grid .shop-card,
  .related.products ul.products > li.product,
  .upsells.products ul.products > li.product {
    flex: unset !important;
    max-width: none !important;
    width: 100% !important;
    scroll-snap-align: none !important;
    min-width: 0 !important;
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .related.products .prod-grid .shop-card:active,
  .upsells.products .prod-grid .shop-card:active {
    transform: scale(0.97) !important;
  }


  /* ══ 12. CART PREMIUM POLISH ═════════════════════════ */

  /* Flow bar — breathes above sticky nav */
  .woocommerce-cart .vs-flow-bar,
  .woocommerce-checkout .vs-flow-bar {
    margin-top: 56px !important;
  }

  /* Block cart: product name */
  .wc-block-cart-item__product .wc-block-components-product-name,
  .wc-block-cart-item__product-name a {
    font-size: 14px !important;
    line-height: 1.3 !important;
  }
  .wc-block-components-product-price .wc-block-components-formatted-money-amount {
    font-size: 14px !important;
  }

  /* Block cart: quantity stepper compact */
  .wc-block-components-quantity-stepper {
    height: 36px !important;
    border-radius: 10px !important;
  }
  .wc-block-components-quantity-stepper__button {
    width: 32px !important;
    min-width: 32px !important;
  }
  .wc-block-components-quantity-stepper input[type="number"] {
    width: 38px !important;
    font-size: 14px !important;
  }

  /* Remove link — pill style, small */
  .wc-block-cart-item__remove-link {
    font-size: 11px !important;
    padding: 3px 8px !important;
    margin-top: 4px !important;
    display: inline-flex !important;
    border-radius: 50px !important;
  }

  /* Cart order summary cards: tighter */
  .wc-block-components-order-summary-item {
    padding: 12px 0 !important;
  }
  .wc-block-components-totals-item {
    font-size: 14px !important;
  }
  .wc-block-components-totals-item.wc-block-components-totals-footer-item {
    font-size: 16px !important;
    padding-top: 12px !important;
  }

  /* Coupon form */
  .wc-block-components-totals-coupon__content {
    gap: 8px !important;
  }
  .wc-block-components-totals-coupon__content input {
    height: 44px !important;
    font-size: 14px !important;
    border-radius: 10px !important;
  }
  .wc-block-components-totals-coupon__content button {
    height: 44px !important;
    padding: 0 16px !important;
    font-size: 14px !important;
    border-radius: 10px !important;
    white-space: nowrap !important;
  }

  /* Proceed to checkout button — large, full-width */
  .wp-block-woocommerce-proceed-to-checkout-block a,
  .wc-block-cart__submit-container a {
    display: flex !important;
    justify-content: center !important;
    min-height: 52px !important;
    font-size: 16px !important;
    border-radius: 16px !important;
    padding: 14px 24px !important;
    width: 100% !important;
  }

  /* Express payment block (Apple Pay etc) */
  .wc-block-components-express-payment-continue-rule {
    margin: 12px 0 !important;
    font-size: 12px !important;
  }


  /* ══ 13. CHECKOUT PREMIUM POLISH ════════════════════ */

  /* Checkout steps — card-like, breathing room */
  .wc-block-components-checkout-step {
    padding: 16px 14px !important;
    border-radius: 16px !important;
    margin-bottom: 10px !important;
  }
  .wc-block-components-checkout-step__heading-content {
    font-size: 15px !important;
  }
  .wc-block-components-checkout-step__description {
    font-size: 13px !important;
  }

  /* Form inputs — touch-friendly height */
  .wc-block-components-text-input input,
  .wc-block-components-select select,
  .wc-block-components-country-input input {
    height: 48px !important;
    font-size: 15px !important;
    border-radius: 12px !important;
    padding: 12px 14px !important;
  }
  .wc-block-components-text-input label,
  .wc-block-components-select label {
    font-size: 13px !important;
  }

  /* Two-col form rows → single col */
  .wc-block-components-address-form .wc-block-components-form-step-field-first-name,
  .wc-block-components-address-form .wc-block-components-form-step-field-last-name {
    width: 100% !important;
    flex: 1 0 100% !important;
  }

  /* Submit / place order button */
  .wc-block-components-checkout-place-order-button {
    width: 100% !important;
    min-height: 54px !important;
    font-size: 16px !important;
    border-radius: 16px !important;
    padding: 16px 24px !important;
  }

  /* Payment methods */
  .wc-block-components-payment-method-label__img {
    max-height: 20px !important;
  }
  .wc-block-components-radio-control .wc-block-components-radio-control-option__label {
    font-size: 14px !important;
  }

  /* Order summary inside checkout sidebar */
  .wc-block-components-order-summary-item__image img {
    width: 48px !important;
    height: 48px !important;
    border-radius: 8px !important;
  }
  .wc-block-components-order-summary-item__full-description {
    font-size: 13px !important;
  }

  /* Privacy / terms text */
  .wc-block-components-checkout-place-order__privacy-policy,
  .wc-block-checkout__terms {
    font-size: 12px !important;
    line-height: 1.5 !important;
  }


  /* ══ 14. PREMIUM MICRO-INTERACTIONS ═════════════════ */

  .show-card,
  .shop-card,
  .prog-card {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  .single-product .gallery-main {
    -webkit-tap-highlight-color: transparent;
  }
  .btn-primary:active,
  .btn-outline:active,
  .cart-add-btn:active {
    transform: scale(0.96) !important;
    transition: transform .1s ease !important;
  }
  .single_add_to_cart_button:active {
    transform: scale(0.97) !important;
    transition: transform .1s ease !important;
  }
  .gallery-thumb:active {
    transform: scale(0.94) !important;
    transition: transform .1s ease !important;
  }
  .wishlist-btn:active {
    transform: scale(1.3) !important;
    transition: transform .15s var(--spring) !important;
  }

}

/* Swipe hint: hidden on desktop */
.vs-swipe-hint { display: none; }

@keyframes vs-sh-fade {
	0%, 100% { opacity: 0; }
	12%, 82%  { opacity: 1; }
}

@keyframes vs-sh-wiggle {
	0%   { transform: translateX(0); }
	22%  { transform: translateX(-16px); }
	48%  { transform: translateX(16px); }
	68%  { transform: translateX(-8px); }
	82%  { transform: translateX(8px); }
	93%  { transform: translateX(0); }
	100% { transform: translateX(0); }
}

/* ════════════════════════════════════════════════════
   HERO SLIDER — mobile CSS grid stack
   All slides in same grid cell → height = max(slides) → no jump
   Transitions: cross-fade, both slides visible simultaneously
   Zone 1 (240px)   : image / illustration
   Zone 2 (auto)    : eyebrow + title
   Zone 3 (mt:auto) : CTA button above city landscape
   ════════════════════════════════════════════════════ */
@media (max-width: 767px) {

	/* Hero: auto height */
	.hero {
		min-height: 0 !important;
		overflow: hidden !important;
	}

	/* Slider: CSS grid, content-height, clips internal overflow */
	.vs-hero-slider {
		display: grid !important;
		grid-template-columns: 1fr !important;
		height: auto !important;
		min-height: 0 !important;
		flex: 0 0 auto !important;
		padding: 0 !important;
		overflow: hidden !important;
	}

	/* All slides: same grid cell, always in layout flow (prevents height jump) */
	.vs-slide {
		grid-row: 1 !important;
		grid-column: 1 !important;
		position: relative !important;
		top: auto !important;
		right: auto !important;
		bottom: auto !important;
		left: auto !important;
		height: auto !important;
		display: flex !important;
		flex-direction: column !important;
		align-items: stretch !important;
		background: transparent !important;
		overflow: hidden !important;
		visibility: hidden !important;
		pointer-events: none !important;
	}

	/* Show active, entering, exiting slides */
	.vs-slide--active,
	.vs-slide--entering,
	.vs-slide--exiting {
		visibility: visible !important;
	}
	.vs-slide--active { pointer-events: auto !important; }

	/* Remove tinted gradient overlays */
	.vs-slide::before { display: none !important; }

	/* ── EXIT: per-element stagger (high anim-i exits first) ── */
	@keyframes vs-mob-exit-up {
		from { opacity: 1; transform: translateY(0); }
		to   { opacity: 0; transform: translateY(-10px); }
	}
	@keyframes vs-mob-exit-fade {
		from { opacity: 1; }
		to   { opacity: 0; }
	}
	@keyframes vs-mob-exit-down {
		from { opacity: 1; transform: translateY(0); }
		to   { opacity: 0; transform: translateY(14px); }
	}
	@keyframes vs-mob-exit-photo {
		from { opacity: 1; transform: scale(1) translateY(0); }
		to   { opacity: 0; transform: scale(0.88) translateY(-6px); }
	}
	/* Default: drift up; delay = (4 - anim-i) * 45ms so last-in exits first */
	.vs-slide--exiting [data-anim] {
		animation: vs-mob-exit-up 280ms ease-in both !important;
		animation-delay: calc((4 - var(--anim-i, 0)) * 45ms) !important;
	}
	/* Button exits downward (reverse of its enter direction) */
	.vs-slide--exiting .hero-btns,
	.vs-slide--exiting .vs-slide-content > a.btn-primary {
		animation: vs-mob-exit-down 260ms ease-in both !important;
		animation-delay: 0ms !important;
	}
	/* Tamara portrait exits from tilted resting position */
	.vs-slide--exiting .vs-s1-photo {
		animation: vs-mob-exit-photo 280ms ease-in both !important;
		animation-delay: calc((4 - 0) * 45ms) !important;
	}
	/* Rainbow arc: fade only — has translateX(-50%) static transform, avoid overriding it */
	.vs-slide--exiting .vs-rainbow-arc-wrap {
		animation: vs-mob-exit-fade 280ms ease-in both !important;
		animation-delay: calc((4 - var(--anim-i, 0)) * 45ms) !important;
	}

	/* ── ENTER: unique per-element animations ── */
	@keyframes vs-mob-enter-fade {
		from { opacity: 0; }
		to   { opacity: 1; }
	}
	@keyframes vs-mob-enter-eyebrow {
		0%   { opacity: 0; transform: translateY(-16px) scale(0.85); }
		70%  { transform: translateY(2px) scale(1.03); }
		100% { opacity: 1; transform: translateY(0) scale(1); }
	}
	@keyframes vs-mob-enter-title {
		from { opacity: 0; transform: translateY(18px); filter: blur(4px); }
		to   { opacity: 1; transform: translateY(0); filter: blur(0); }
	}
	@keyframes vs-mob-enter-btn {
		0%   { opacity: 0; transform: translateY(22px); }
		65%  { transform: translateY(-3px); }
		100% { opacity: 1; transform: translateY(0); }
	}
	@keyframes vs-mob-enter-photo {
		from { opacity: 0; transform: scale(0.88) translateY(8px); }
		to   { opacity: 1; transform: scale(1) translateY(0); }
	}
	@keyframes vs-mob-enter-visual {
		from { opacity: 0; transform: scale(0.9) translateY(10px); }
		to   { opacity: 1; transform: scale(1) translateY(0); }
	}
	/* Fallback for any [data-anim] not targeted below */
	.vs-hero-slider .vs-slide--entering [data-anim] {
		animation: vs-mob-enter-fade 500ms ease both !important;
		animation-delay: calc(var(--anim-i, 0) * 60ms + 30ms) !important;
	}
	/* Eyebrow: bounces down from top */
	.vs-hero-slider .vs-slide--entering .hero-eyebrow {
		animation: vs-mob-enter-eyebrow 400ms cubic-bezier(0.34, 1.56, 0.64, 1) both !important;
		animation-delay: calc(var(--anim-i, 0) * 60ms + 30ms) !important;
	}
	/* Title: blurs and slides up */
	.vs-hero-slider .vs-slide--entering .vs-slide-h1,
	.vs-hero-slider .vs-slide--entering .vs-slide-h2 {
		animation: vs-mob-enter-title 480ms cubic-bezier(0.22, 1, 0.36, 1) both !important;
		animation-delay: calc(var(--anim-i, 0) * 60ms + 30ms) !important;
	}
	/* Button: bounces up from below */
	.vs-hero-slider .vs-slide--entering .hero-btns,
	.vs-hero-slider .vs-slide--entering .vs-slide-content > a.btn-primary {
		animation: vs-mob-enter-btn 420ms cubic-bezier(0.34, 1.3, 0.64, 1) both !important;
		animation-delay: calc(var(--anim-i, 0) * 60ms + 30ms) !important;
	}
	/* Tamara portrait: sweeps in from straight to tilted off-canvas */
	.vs-hero-slider .vs-slide--entering .vs-s1-photo {
		animation: vs-mob-enter-photo 720ms cubic-bezier(0.34, 1.15, 0.64, 1) both !important;
		animation-delay: 30ms !important;
	}
	/* Illustration kids + icons: gentle scale-up (rainbow uses fade to avoid transform conflict) */
	.vs-hero-slider .vs-slide--entering .vs-kid,
	.vs-hero-slider .vs-slide--entering .vs-fi {
		animation: vs-mob-enter-visual 500ms cubic-bezier(0.34, 1.2, 0.64, 1) both !important;
		animation-delay: calc(var(--anim-i, 0) * 60ms + 30ms) !important;
	}
	/* Book visual zone */
	.vs-hero-slider .vs-slide--entering .vs-slide-visual {
		animation: vs-mob-enter-visual 650ms cubic-bezier(0.34, 1.1, 0.64, 1) both !important;
		animation-delay: 30ms !important;
	}

	/* Slide inner: flex column, no grid */
	.vs-slide-inner,
	.vs-slide-inner--tamara {
		display: flex !important;
		flex-direction: column !important;
		grid-template-columns: unset !important;
		height: auto !important;
		min-height: 0 !important;
		padding: 16px 20px 0 !important;
		gap: 14px !important;
		align-items: stretch !important;
		background: transparent !important;
	}

	/* ── Zone 1: Visual — 240px fixed, equal margins via parent padding ── */
	.vs-slide-visual,
	.vs-s0-illus,
	.vs-s1-photo {
		order: 1 !important;
		flex: 0 0 240px !important;
		height: 240px !important;
		min-height: 0 !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		overflow: hidden !important;
		position: relative !important;
		background: transparent !important;
		border-radius: 14px !important;
	}

	/* ── Zone 2+3: Content — no horizontal padding (shared via parent) ── */
	.vs-slide-content {
		order: 2 !important;
		flex: 1 1 auto !important;
		height: auto !important;
		min-height: 0 !important;
		display: flex !important;
		flex-direction: column !important;
		justify-content: flex-start !important;
		align-items: center !important;
		text-align: center !important;
		padding: 0 0 20px !important;
		gap: 10px !important;
	}

	/* ── Hide non-essential elements ── */
	.hero-trust              { display: none !important; }
	.hero-btns .btn-outline  { display: none !important; }
	.founder-chip            { display: none !important; }
	.vs-s2-meta              { display: none !important; }
	.vs-s2-author            { display: none !important; }
	.vs-slide-content > p    { display: none !important; }

	/* ── Eyebrow: order 1, force display (overrides display:none from earlier block) ── */
	.hero-eyebrow {
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		order: 1 !important;
		font-size: 11px !important;
		margin-bottom: 0 !important;
		padding: 4px 10px !important;
		flex-shrink: 0 !important;
	}

	/* ── Title: order 2 ── */
	.vs-slide-h1 {
		order: 2 !important;
		font-size: clamp(26px, 8vw, 40px) !important;
		line-height: 1.1 !important;
		margin: 0 !important;
		flex-shrink: 0 !important;
	}
	.vs-slide-h2 {
		order: 2 !important;
		font-size: clamp(22px, 6.5vw, 34px) !important;
		line-height: 1.15 !important;
		margin: 0 !important;
		flex-shrink: 0 !important;
	}

	/* ── Zone 3: CTA, order 3, pinned via margin-top:auto — sits above city ── */
	.hero-btns {
		order: 3 !important;
		display: flex !important;
		flex-direction: column !important;
		align-items: stretch !important;
		width: 100% !important;
		margin-top: auto !important;
		gap: 0 !important;
	}
	.hero-btns .btn-primary,
	.vs-slide-content > a.btn-primary {
		width: 100% !important;
		box-sizing: border-box !important;
		text-align: center !important;
		padding: 14px 20px !important;
	}
	.vs-slide-content > a.btn-primary {
		order: 3 !important;
		align-self: stretch !important;
		margin-top: auto !important;
	}

	/* ══ SLIDE 0 — no visual zone; background fills; content centred ══ */
	.vs-blob--1,
	.vs-blob--2,
	.vs-blob--3 { display: none !important; }

	.vs-slide[data-slide="0"] .vs-s0-illus { display: none !important; }

	.vs-slide[data-slide="0"] .vs-slide-content {
		justify-content: center !important;
		text-align: center !important;
		align-items: center !important;
		padding-top: 32px !important;
		padding-bottom: 32px !important;
	}

	.vs-s0-illus {
		border-radius: 0 !important;
		overflow: visible !important;
	}

	/* Slide 0 customizer photo — PNG transparency preserved */
	.vs-s0-img {
		width: 100% !important;
		height: 100% !important;
		object-fit: contain !important;
		object-position: center bottom !important;
	}

	/* ── Scene illustration additions (mobile only) ── */
	@keyframes vs-sun-spin {
		from { transform: rotate(0deg); }
		to   { transform: rotate(360deg); }
	}
	.vs-scene-sun {
		display: block !important;
		top: 12px !important;
		right: 20px !important;
		font-size: 44px !important;
		line-height: 1 !important;
		z-index: 2 !important;
		animation: vs-sun-spin 25s linear infinite !important;
	}
	.vs-scene-tree--1 {
		display: block !important;
		bottom: 0 !important;
		left: 2px !important;
		font-size: 50px !important;
		line-height: 1 !important;
		z-index: 1 !important;
	}
	.vs-scene-tree--2 {
		display: block !important;
		bottom: 0 !important;
		right: 2px !important;
		font-size: 44px !important;
		line-height: 1 !important;
		z-index: 1 !important;
	}

	/* ══ SLIDE 1 — Tamara: horizontal split (photo left, text right) ══ */
	.vs-slide-inner--tamara {
		flex-direction: row !important;
		align-items: flex-start !important;
		gap: 14px !important;
		padding: 16px 16px 0 !important;
	}
	.vs-s1-photo {
		flex: 0 0 120px !important;
		height: 162px !important;
		width: 120px !important;
		order: 1 !important;
		align-self: flex-start !important;
		transform: none !important;
		border-radius: 12px !important;
		border: none !important;
		box-shadow: 0 16px 36px rgba(139, 53, 214, 0.28) !important;
	}
	.vs-slide[data-slide="1"] .vs-slide-content {
		order: 2 !important;
		text-align: left !important;
		align-items: flex-start !important;
		flex: 1 1 auto !important;
		padding: 0 0 20px !important;
	}
	.vs-slide[data-slide="1"] .hero-eyebrow {
		justify-content: flex-start !important;
	}
	.vs-slide[data-slide="1"] .vs-slide-h2 {
		font-size: clamp(18px, 5.5vw, 26px) !important;
	}
	.vs-s1-img {
		width: 100% !important;
		height: 100% !important;
		transform: none !important;
		border-radius: 14px !important;
		border: none !important;
		box-shadow: none !important;
		object-fit: cover !important;
		object-position: center top !important;
	}
	.vs-s1-photo::before { display: none !important; }
	.vs-s1-photo-placeholder {
		width: 100% !important;
		height: 100% !important;
		max-width: 100% !important;
		border-radius: 14px !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		font-size: 90px !important;
	}
	/* Extra breathing room around title on Tamara slide */
	.vs-slide[data-slide="1"] .vs-slide-h2 {
		padding-top: 6px !important;
		padding-bottom: 4px !important;
	}

	/* ══ SLIDE 2 — portrait cover card ══ */
	.vs-slide[data-slide="2"] .vs-slide-visual {
		flex: 0 0 auto !important;
		height: auto !important;
		min-height: 0 !important;
		overflow: visible !important;
		border-radius: 0 !important;
		align-items: center !important;
		justify-content: center !important;
		padding: 8px 0 !important;
	}
	.vs-s2-cover {
		width: 130px !important;
		height: 175px !important;
		border-radius: 12px !important;
	}
	.vs-s2-cover-badge {
		font-size: 8px !important;
		padding: 4px 8px !important;
	}

	/* ── Arrows: hidden on mobile ── */
	.vs-slider-controls,
	.vs-slider-arrow { display: none !important; }

	/* ── Swipe hint — lower portion of visual zone ── */
	.vs-swipe-hint {
		display: block !important;
		position: absolute !important;
		top: 190px !important;
		left: 50% !important;
		transform: translateX(-50%) !important;
		z-index: 30 !important;
		pointer-events: none !important;
		white-space: nowrap !important;
		animation: vs-sh-fade 4s ease-in-out 1.8s both !important;
	}
	.vs-sh-icon {
		display: flex !important;
		align-items: center !important;
		gap: 8px !important;
		background: rgba(255, 255, 255, 0.92) !important;
		backdrop-filter: blur(8px) !important;
		-webkit-backdrop-filter: blur(8px) !important;
		border-radius: 50px !important;
		padding: 7px 18px !important;
		font-size: 13px !important;
		font-weight: 600 !important;
		color: #333 !important;
		letter-spacing: 0.02em !important;
		box-shadow: 0 2px 16px rgba(0, 0, 0, 0.18) !important;
		animation: vs-sh-wiggle 4s ease-in-out 1.8s both !important;
	}
	.vs-sh-l,
	.vs-sh-r {
		font-size: 16px !important;
		font-weight: 700 !important;
		color: var(--pink, #E8358A) !important;
	}

}

/* ════════════════════════════════════════════════════
   HERO SLIDER — mobile cleanup for 4 slides
   ════════════════════════════════════════════════════ */
@media (max-width: 767px) {
	.hero.vs-hero .vs-hero-slider {
		padding-bottom: 70px !important;
	}

	.hero.vs-hero .vs-slide-inner,
	.hero.vs-hero .vs-slide[data-slide="0"] .vs-slide-inner,
	.hero.vs-hero .vs-slide[data-slide="1"] .vs-slide-inner,
	.hero.vs-hero .vs-slide[data-slide="2"] .vs-slide-inner {
		display: grid !important;
		grid-template-columns: 1fr !important;
		padding: 18px 20px 0 !important;
		gap: 20px !important;
		align-items: start !important;
	}

	.hero.vs-hero .vs-slide-content {
		order: 1 !important;
		align-items: flex-start !important;
		text-align: left !important;
		padding: 0 0 16px !important;
		gap: 12px !important;
	}

	.hero.vs-hero .vs-slide-visual,
	.hero.vs-hero .vs-s1-photo,
	.hero.vs-hero .vs-s0-illus {
		order: 2 !important;
		flex: 0 0 auto !important;
		height: auto !important;
		min-height: 0 !important;
		border-radius: 20px !important;
	}

	.hero.vs-hero .vs-slide[data-slide="1"] .vs-s1-photo {
		order: 1 !important;
	}

	.hero.vs-hero .vs-slide[data-slide="1"] .vs-slide-content {
		order: 2 !important;
	}

	.hero.vs-hero .hero-eyebrow {
		display: inline-flex !important;
		justify-content: flex-start !important;
		padding: 7px 12px !important;
		font-size: 11px !important;
	}

	.hero.vs-hero .vs-slide-h1 {
		font-size: clamp(42px, 11vw, 62px) !important;
		margin: 0 !important;
	}

	.hero.vs-hero .vs-slide-h2 {
		font-size: clamp(30px, 8.4vw, 42px) !important;
		margin: 0 !important;
	}

	.hero.vs-hero .vs-slide-content > p {
		display: block !important;
		font-size: 16px !important;
		line-height: 1.65 !important;
	}

	.hero.vs-hero .hero-btns {
		display: flex !important;
		flex-direction: column !important;
		align-items: stretch !important;
		width: 100% !important;
		gap: 10px !important;
		margin-top: 4px !important;
	}

	.hero.vs-hero .hero-btns .btn-outline,
	.hero.vs-hero .hero-btns .btn-primary,
	.hero.vs-hero .vs-slide-content > a.btn-primary {
		display: inline-flex !important;
		width: 100% !important;
		justify-content: center !important;
	}

	.hero.vs-hero .hero-trust {
		display: flex !important;
		gap: 8px !important;
	}

	.hero.vs-hero .founder-chip {
		display: flex !important;
	}

	.hero.vs-hero .vs-s2-meta,
	.hero.vs-hero .vs-s2-author {
		display: block !important;
	}

	.hero.vs-hero .vs-media-card,
	.hero.vs-hero .vs-media-card--photo {
		width: 100% !important;
		min-height: 280px !important;
		transform: none !important;
	}

	.hero.vs-hero .vs-media-card--photo {
		max-width: 100% !important;
	}

	.hero.vs-hero .vs-media-card--book {
		min-height: 320px !important;
	}

	.hero.vs-hero .vs-media-card--fallback {
		min-height: 320px !important;
		padding: 16px !important;
	}

	.hero.vs-hero .vs-fallback-panel {
		padding: 20px !important;
	}

	.hero.vs-hero .vs-fallback-panel strong {
		font-size: 24px !important;
	}

	.hero.vs-hero .vs-media-card-book-copy {
		left: 18px !important;
		right: 18px !important;
		bottom: 86px !important;
	}

	.hero.vs-hero .vs-media-card-book-copy strong {
		font-size: 26px !important;
	}

	.hero.vs-hero .vs-slider-controls {
		display: flex !important;
		bottom: 16px !important;
		width: auto !important;
		gap: 12px !important;
	}

	.hero.vs-hero .vs-slider-arrow {
		display: none !important;
	}

	.hero.vs-hero .vs-slider-dots {
		display: flex !important;
	}

	.hero.vs-hero .vs-swipe-hint {
		top: auto !important;
		bottom: 44px !important;
	}
}

/* ════════════════════════════════════════════════════
   HERO SLIDER — final mobile reset
   ════════════════════════════════════════════════════ */
@media (max-width: 767px) {
	.hero.vs-hero {
		min-height: 0 !important;
	}

	.hero.vs-hero .vs-hero-slider {
		display: grid !important;
		grid-template-columns: 1fr !important;
		min-height: clamp(680px, calc(100svh - 88px), 860px) !important;
		height: auto !important;
		padding-bottom: 0 !important;
		overflow: hidden !important;
	}

	.hero.vs-hero .vs-slide {
		grid-area: 1 / 1 !important;
		position: relative !important;
		inset: auto !important;
		height: auto !important;
		visibility: hidden !important;
		opacity: 0 !important;
		pointer-events: none !important;
		overflow: hidden !important;
	}

	.hero.vs-hero .vs-slide--active,
	.hero.vs-hero .vs-slide--entering,
	.hero.vs-hero .vs-slide--exiting {
		visibility: visible !important;
		opacity: 1 !important;
	}

	.hero.vs-hero .vs-slide-inner,
	.hero.vs-hero .vs-slide[data-slide="0"] .vs-slide-inner,
	.hero.vs-hero .vs-slide[data-slide="1"] .vs-slide-inner,
	.hero.vs-hero .vs-slide[data-slide="2"] .vs-slide-inner {
		display: grid !important;
		grid-template-columns: 1fr !important;
		grid-template-rows: auto auto !important;
		min-height: clamp(680px, calc(100svh - 88px), 860px) !important;
		padding: 20px 20px 28px !important;
		gap: 18px !important;
		align-content: start !important;
		align-items: start !important;
	}

	.hero.vs-hero .vs-slide-visual,
	.hero.vs-hero .vs-s1-photo,
	.hero.vs-hero .vs-s0-illus {
		order: 1 !important;
		display: flex !important;
		align-items: stretch !important;
		justify-content: stretch !important;
		height: 280px !important;
		min-height: 280px !important;
		border-radius: 24px !important;
		overflow: hidden !important;
	}

	.hero.vs-hero .vs-slide-content {
		order: 2 !important;
		display: flex !important;
		flex-direction: column !important;
		align-items: flex-start !important;
		text-align: left !important;
		gap: 14px !important;
		padding: 0 !important;
		min-height: 0 !important;
	}

	.hero.vs-hero .vs-media-card,
	.hero.vs-hero .vs-media-card--photo,
	.hero.vs-hero .vs-media-card--founder,
	.hero.vs-hero .vs-media-card--book,
	.hero.vs-hero .vs-media-card--fallback {
		width: 100% !important;
		max-width: none !important;
		height: 100% !important;
		min-height: 280px !important;
		border-radius: 24px !important;
		transform: none !important;
		box-shadow: 0 22px 48px rgba(30, 10, 46, 0.12) !important;
	}

	.hero.vs-hero .vs-media-card--founder {
		background: transparent !important;
		border-color: transparent !important;
		box-shadow: none !important;
	}

	.hero.vs-hero .vs-s0-img,
	.hero.vs-hero .vs-media-card-img,
	.hero.vs-hero .vs-s1-img {
		width: 100% !important;
		height: 100% !important;
		object-fit: cover !important;
		object-position: center !important;
	}

	.hero.vs-hero .vs-s1-img {
		object-fit: contain !important;
		object-position: center bottom !important;
		border-radius: 0 !important;
		filter: drop-shadow(0 14px 22px rgba(30, 10, 46, 0.12)) !important;
	}

	.hero.vs-hero .vs-media-card--founder::before {
		inset: auto 8% 0 8% !important;
		height: 16% !important;
		filter: blur(10px) !important;
	}

	.hero.vs-hero .vs-media-card--book {
		width: min(100%, 280px) !important;
		margin-inline: auto !important;
		border-radius: 16px 20px 20px 16px !important;
		box-shadow: 0 22px 44px rgba(30, 10, 46, 0.16), 10px 8px 0 rgba(255, 255, 255, 0.64) !important;
		transform: perspective(1200px) rotateY(-12deg) !important;
		overflow: visible !important;
	}

	.hero.vs-hero .vs-media-card--book::after {
		left: -10px !important;
		width: 14px !important;
	}

	.hero.vs-hero .vs-slide[data-slide="0"] .vs-slide-h1 {
		font-size: clamp(36px, 10vw, 52px) !important;
		line-height: 1.02 !important;
		max-width: 10ch !important;
	}

	.hero.vs-hero .vs-slide-h2 {
		font-size: clamp(28px, 8vw, 38px) !important;
		line-height: 1.06 !important;
		margin: 0 !important;
	}

	.hero.vs-hero .hero-eyebrow {
		display: inline-flex !important;
		justify-content: flex-start !important;
		padding: 7px 12px !important;
		font-size: 10px !important;
		letter-spacing: 0.08em !important;
	}

	.hero.vs-hero .vs-slide-content > p {
		display: block !important;
		font-size: 15px !important;
		line-height: 1.62 !important;
		max-width: 34ch !important;
		margin: 0 !important;
	}

	.hero.vs-hero .hero-btns {
		display: flex !important;
		flex-direction: column !important;
		align-items: stretch !important;
		width: 100% !important;
		gap: 10px !important;
		margin-top: 2px !important;
	}

	.hero.vs-hero .hero-btns .btn-primary,
	.hero.vs-hero .hero-btns .btn-outline,
	.hero.vs-hero .vs-slide-content > a.btn-primary {
		display: inline-flex !important;
		width: 100% !important;
		justify-content: center !important;
	}

	.hero.vs-hero .hero-trust,
	.hero.vs-hero .founder-chip,
	.hero.vs-hero .vs-s2-meta,
	.hero.vs-hero .vs-s2-author {
		display: flex !important;
	}

	.hero.vs-hero .hero-trust {
		flex-wrap: wrap !important;
		gap: 8px !important;
	}

	.hero.vs-hero .founder-chip {
		align-items: center !important;
		gap: 8px !important;
	}

	.hero.vs-hero .vs-media-card-overlay {
		left: 16px !important;
		right: 16px !important;
		bottom: 16px !important;
		gap: 8px !important;
	}

	.hero.vs-hero .vs-media-pill {
		font-size: 10px !important;
		padding: 8px 12px !important;
	}

	.hero.vs-hero .vs-media-card-book-copy {
		left: 16px !important;
		right: 16px !important;
		bottom: 72px !important;
	}

	.hero.vs-hero .vs-media-card-book-copy strong {
		font-size: 24px !important;
	}

	.hero.vs-hero .vs-media-card--fallback {
		padding: 16px !important;
	}

	.hero.vs-hero .vs-fallback-panel {
		padding: 18px !important;
	}

	.hero.vs-hero .vs-fallback-panel strong {
		font-size: 24px !important;
	}

	.hero.vs-hero .vs-slider-controls,
	.hero.vs-hero .vs-slider-arrow,
	.hero.vs-hero .vs-slider-dots,
	.hero.vs-hero .vs-swipe-hint {
		display: none !important;
	}
}

@media (max-width: 960px) {
	.page-hero--editorial {
		padding: 92px 24px 18px !important;
	}

	body.vs-generic-page .site-nav,
	body.vs-generic-page .site-header.is-sticky .site-nav {
		-webkit-backdrop-filter: none !important;
		backdrop-filter: none !important;
	}

	.page-hero--editorial .page-hero-content {
		max-width: none !important;
	}

	.page-hero--editorial h1 {
		max-width: 12ch !important;
		font-size: clamp(30px, 10vw, 46px) !important;
		line-height: 1 !important;
	}

	.page-hero--about h1,
	.page-hero--about p,
	.page-hero--about .hero-eyebrow {
		text-align: center !important;
	}

	.vs-page-shell {
		padding: 22px 24px 72px !important;
		border-radius: 26px !important;
		backdrop-filter: none !important;
	}

	.vs-page-intro-text {
		font-size: 18px !important;
		line-height: 1.7 !important;
		max-width: none !important;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}

	.vs-page-featured {
		float: none !important;
		width: 100% !important;
		margin: 0 !important;
		border-radius: 24px !important;
		box-shadow: 0 24px 50px rgba(30, 10, 46, 0.12) !important;
		margin-bottom: 22px !important;
	}

	.vs-page-featured img {
		aspect-ratio: 4 / 3 !important;
	}

	body.vs-page-about .vs-page-body {
		max-width: none !important;
	}

	.vs-page-body > *,
	.vs-page-body h2,
	.vs-page-body h3,
	.vs-page-body h4,
	.vs-page-body ul,
	.vs-page-body ol,
	.vs-page-body blockquote,
	.vs-page-body .wp-block-image,
	.vs-page-body .wp-block-gallery,
	.vs-page-body .wp-block-columns,
	.vs-page-body .wp-block-table,
	.vs-page-body .page-links {
		max-width: none !important;
	}

	.vs-page-body > p:first-child,
	.vs-page-article p,
	.vs-page-article li {
		font-size: 16px !important;
		line-height: 1.75 !important;
	}

	.vs-page-article h2 {
		font-size: clamp(28px, 8vw, 36px) !important;
	}

	.vs-page-article h3 {
		font-size: clamp(20px, 6vw, 26px) !important;
	}

	.vs-page-article blockquote {
		padding: 22px 22px !important;
		border-radius: 22px !important;
	}
}

@media (max-width: 960px) {
	body.vs-page-about .page-hero--about {
		padding: 104px 22px 40px !important;
	}

	body.vs-page-about .page-hero--about h1 {
		max-width: none !important;
		font-size: 46px !important;
		line-height: 1 !important;
		letter-spacing: 0 !important;
	}

	body.vs-page-about .page-hero--about p {
		max-width: 32rem !important;
		font-size: 17px !important;
		line-height: 1.68 !important;
	}

	body.vs-page-about .vs-page-shell {
		padding: 32px 22px 76px !important;
	}

	body.vs-page-about .vs-page-featured {
		float: none !important;
		width: min(100%, 340px) !important;
		margin: 0 auto 28px !important;
		border-radius: 16px !important;
	}

	body.vs-page-about .vs-page-featured img {
		aspect-ratio: 4 / 5 !important;
	}

	body.vs-page-about .vs-page-body > p:first-child,
	body.vs-page-about .vs-page-article p,
	body.vs-page-about .vs-page-article li {
		font-size: 16px !important;
		line-height: 1.76 !important;
	}

	body.vs-page-about .vs-page-article blockquote {
		margin-top: 30px !important;
		border-radius: 14px !important;
	}

	body.vs-page-about .vs-about-layout {
		display: flex !important;
		flex-direction: column !important;
		gap: 30px !important;
		max-width: none !important;
	}

	body.vs-page-about .vs-about-media {
		order: 0 !important;
		position: static !important;
		width: min(100%, 340px) !important;
		margin: 0 auto !important;
	}

	body.vs-page-about .vs-page-copy {
		order: 1 !important;
		max-width: none !important;
		padding-top: 0 !important;
	}

	body.vs-page-about .vs-about-caption {
		text-align: center !important;
	}

	body.vs-page-about .vs-about-caption strong {
		font-size: 22px !important;
	}

	body.vs-page-legal .page-hero--legal {
		padding: 104px 22px 28px !important;
	}

	body.vs-page-legal .page-hero--legal h1 {
		max-width: none !important;
		font-size: 36px !important;
		line-height: 1.08 !important;
		letter-spacing: 0 !important;
		text-align: left !important;
	}

	body.vs-page-legal .vs-page-shell {
		padding: 34px 22px 76px !important;
	}

	body.vs-page-legal .vs-page-article h2,
	body.vs-page-legal .vs-page-article h3 {
		font-size: 20px !important;
		line-height: 1.3 !important;
	}

	body.vs-page-legal .vs-page-article p,
	body.vs-page-legal .vs-page-article li {
		font-size: 16px !important;
		line-height: 1.72 !important;
	}

	body.vs-page-legal .vs-page-article blockquote {
		border-radius: 8px !important;
		padding: 18px 20px !important;
	}

	.site-footer .footer-brand img {
		width: 50% !important;
		max-width: 170px !important;
		height: auto !important;
	}

	.hero.vs-hero .vs-media-card--book {
		width: min(76vw, 280px) !important;
		height: auto !important;
		min-height: 0 !important;
		aspect-ratio: 3 / 4.35 !important;
	}

	.hero.vs-hero .vs-media-card-book-image {
		position: relative !important;
		display: block !important;
		width: 100% !important;
		height: 100% !important;
		aspect-ratio: 3 / 4.35 !important;
		object-fit: contain !important;
		object-position: center !important;
	}

	.hero.vs-hero .vs-media-card-book-copy,
	.hero.vs-hero .vs-media-card--book .vs-media-card-overlay {
		display: none !important;
	}
}

/* Homepage game intro alignment on mobile. */
@media (max-width: 960px) {
	.game-bg .section-header,
	.game-bg .section-tag,
	.game-bg .section-title,
	.game-bg .section-sub {
		text-align: center !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}

	.game-bg .section-sub {
		max-width: 34rem !important;
	}
}

/* O nama legal/contact details on mobile. */
@media (max-width: 960px) {
	.vs-about-legal {
		margin-top: 42px !important;
		padding: 24px 18px !important;
		border-radius: 26px !important;
	}

	.vs-about-legal::before {
		inset: 10px !important;
		border-radius: 20px !important;
	}

	.vs-about-legal-head {
		display: grid !important;
		gap: 18px !important;
		margin-bottom: 22px !important;
	}

	.vs-about-legal h2 {
		max-width: 13ch !important;
		font-size: clamp(32px, 10vw, 44px) !important;
	}

	.vs-about-legal-actions {
		justify-content: flex-start !important;
	}

	.vs-about-legal-actions a {
		flex: 1 1 auto !important;
	}

	.vs-about-legal-grid {
		grid-template-columns: 1fr !important;
		gap: 14px !important;
	}

	.vs-about-legal-card {
		border-radius: 20px !important;
	}

	.vs-about-legal-card summary {
		padding: 16px !important;
		font-size: 17px !important;
	}

	.vs-about-legal-list {
		padding: 0 12px 14px !important;
	}

	.vs-about-legal-row {
		grid-template-columns: 1fr auto !important;
		align-items: start !important;
		gap: 8px 12px !important;
		padding: 14px !important;
	}

	.vs-about-legal-label {
		grid-column: 1 / -1 !important;
	}

	.vs-about-legal-value {
		font-size: 15px !important;
	}

	.vs-copy-btn {
		width: 30px !important;
		height: 30px !important;
		min-height: 30px !important;
		padding: 0 !important;
		font-size: 14px !important;
	}

	.vs-about-legal-image {
		margin-top: 18px !important;
		border-radius: 20px !important;
	}

	.vs-about-legal-img {
		max-height: none !important;
		aspect-ratio: 4 / 3 !important;
	}
}

/* Absolute final mobile reset: plain hero images only. */
@media (max-width: 960px) {
	.hero.vs-hero .vs-slide::before,
	.hero.vs-hero .vs-slide[data-slide="0"]::before,
	.hero.vs-hero .vs-slide[data-slide="1"]::before,
	.hero.vs-hero .vs-slide[data-slide="2"]::before,
	.hero.vs-hero .vs-media-card::before,
	.hero.vs-hero .vs-media-card::after,
	.hero.vs-hero .vs-media-card--photo::before,
	.hero.vs-hero .vs-media-card--photo::after,
	.hero.vs-hero .vs-media-card--founder::before,
	.hero.vs-hero .vs-media-card--founder::after,
	.hero.vs-hero .vs-media-card--book::before,
	.hero.vs-hero .vs-media-card--book::after {
		content: none !important;
		display: none !important;
		background: none !important;
		box-shadow: none !important;
		filter: none !important;
		opacity: 0 !important;
	}

	.hero.vs-hero .vs-slide-visual [data-anim],
	.hero.vs-hero .vs-media-card,
	.hero.vs-hero .vs-media-card--photo,
	.hero.vs-hero .vs-media-card--founder,
	.hero.vs-hero .vs-media-card--book {
		background: transparent !important;
		border: 0 !important;
		box-shadow: none !important;
		filter: none !important;
		transform: none !important;
		animation: none !important;
		transition: none !important;
		will-change: auto !important;
	}

	.hero.vs-hero .vs-media-card,
	.hero.vs-hero .vs-media-card--photo,
	.hero.vs-hero .vs-media-card--founder {
		width: min(82vw, 340px) !important;
		max-width: min(82vw, 340px) !important;
		height: auto !important;
		min-height: 0 !important;
		padding: 0 !important;
		overflow: visible !important;
	}

	.hero.vs-hero .vs-media-card--book {
		width: min(64vw, 250px) !important;
		max-width: min(64vw, 250px) !important;
		height: auto !important;
		min-height: 0 !important;
		aspect-ratio: auto !important;
		padding: 0 !important;
		overflow: visible !important;
	}

	.hero.vs-hero .vs-s0-img,
	.hero.vs-hero .vs-s1-img,
	.hero.vs-hero .vs-media-card-book-image {
		position: relative !important;
		inset: auto !important;
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		aspect-ratio: auto !important;
		object-fit: contain !important;
		object-position: center !important;
		background: transparent !important;
		border: 0 !important;
		box-shadow: none !important;
		filter: none !important;
		transform: none !important;
		animation: none !important;
		transition: none !important;
		backface-visibility: visible !important;
	}

	.hero.vs-hero .vs-s0-img,
	.hero.vs-hero .vs-s1-img {
		border-radius: 22px !important;
	}

	.hero.vs-hero .vs-media-card-book-image {
		border-radius: 0 !important;
	}

	.hero.vs-hero .vs-media-card-overlay,
	.hero.vs-hero .vs-s2-cover-badge,
	.hero.vs-hero .vs-media-card-book-copy {
		display: none !important;
	}
}

/* Hero media reset on mobile: no image effects, no holder decoration. */
@media (max-width: 960px) {
	.hero.vs-hero .vs-slide::before,
	.hero.vs-hero .vs-slide[data-slide="0"]::before,
	.hero.vs-hero .vs-slide[data-slide="1"]::before,
	.hero.vs-hero .vs-slide[data-slide="2"]::before {
		content: none !important;
		display: none !important;
		background: none !important;
		opacity: 0 !important;
	}

	.hero.vs-hero .vs-slide-visual [data-anim],
	.hero.vs-hero .vs-media-card,
	.hero.vs-hero .vs-media-card--photo,
	.hero.vs-hero .vs-media-card--founder,
	.hero.vs-hero .vs-media-card--book,
	.hero.vs-hero .vs-media-card--fallback {
		animation: none !important;
		transition: none !important;
		transform: none !important;
		filter: none !important;
		will-change: auto !important;
	}

	.hero.vs-hero .vs-media-card,
	.hero.vs-hero .vs-media-card--photo,
	.hero.vs-hero .vs-media-card--founder,
	.hero.vs-hero .vs-media-card--book {
		width: min(82vw, 340px) !important;
		max-width: min(82vw, 340px) !important;
		height: auto !important;
		min-height: 0 !important;
		aspect-ratio: auto !important;
		background: transparent !important;
		border: 0 !important;
		box-shadow: none !important;
		overflow: visible !important;
		padding: 0 !important;
	}

	.hero.vs-hero .vs-media-card--book {
		width: min(64vw, 250px) !important;
		max-width: min(64vw, 250px) !important;
	}

	.hero.vs-hero .vs-media-card::before,
	.hero.vs-hero .vs-media-card::after,
	.hero.vs-hero .vs-media-card--photo::before,
	.hero.vs-hero .vs-media-card--photo::after,
	.hero.vs-hero .vs-media-card--founder::before,
	.hero.vs-hero .vs-media-card--founder::after,
	.hero.vs-hero .vs-media-card--book::before,
	.hero.vs-hero .vs-media-card--book::after {
		content: none !important;
		display: none !important;
		background: none !important;
		box-shadow: none !important;
		filter: none !important;
	}

	.hero.vs-hero .vs-s0-img,
	.hero.vs-hero .vs-s1-img,
	.hero.vs-hero .vs-media-card-book-image {
		position: relative !important;
		inset: auto !important;
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		aspect-ratio: auto !important;
		object-fit: contain !important;
		object-position: center !important;
		background: transparent !important;
		border: 0 !important;
		box-shadow: none !important;
		filter: none !important;
		transform: none !important;
		animation: none !important;
		transition: none !important;
		backface-visibility: visible !important;
	}

	.hero.vs-hero .vs-s0-img,
	.hero.vs-hero .vs-s1-img {
		border-radius: 22px !important;
	}

	.hero.vs-hero .vs-media-card-book-image {
		border-radius: 0 !important;
	}

	.hero.vs-hero .vs-media-card-overlay,
	.hero.vs-hero .vs-s2-cover-badge,
	.hero.vs-hero .vs-media-card-book-copy {
		display: none !important;
	}
}

/* Final mobile hero cleanup: plain, stable hero images. */
@media (max-width: 960px) {
	.hero.vs-hero .vs-slide::before,
	.hero.vs-hero .vs-slide[data-slide="0"]::before,
	.hero.vs-hero .vs-slide[data-slide="1"]::before,
	.hero.vs-hero .vs-slide[data-slide="2"]::before {
		content: none !important;
		display: none !important;
		background: none !important;
		opacity: 0 !important;
	}

	.hero.vs-hero .vs-media-card--founder {
		width: min(82vw, 340px) !important;
		min-height: 0 !important;
		height: auto !important;
		padding: 0 !important;
		border-radius: 0 !important;
		background: transparent !important;
		border: 0 !important;
		box-shadow: none !important;
		filter: none !important;
		transform: none !important;
		animation: none !important;
		transition: none !important;
	}

	.hero.vs-hero .vs-media-card--founder::before {
		content: none !important;
		display: none !important;
		background: none !important;
		filter: none !important;
	}

	.hero.vs-hero .vs-media-card--founder::after {
		content: none !important;
		display: none !important;
		background: none !important;
		filter: none !important;
	}

	.hero.vs-hero .vs-media-card--founder .vs-s1-img {
		position: relative !important;
		z-index: 1 !important;
		width: 100% !important;
		height: auto !important;
		object-fit: contain !important;
		object-position: center bottom !important;
		filter: none !important;
		transform: none !important;
	}

	.hero.vs-hero .vs-slide[data-slide="2"] .vs-slide-visual {
		perspective: none !important;
	}

	.hero.vs-hero .vs-media-card--book {
		width: min(64vw, 250px) !important;
		height: auto !important;
		min-height: 0 !important;
		aspect-ratio: auto !important;
		border-radius: 0 !important;
		background: transparent !important;
		box-shadow: none !important;
		filter: none !important;
		transform: none !important;
		transform-origin: center !important;
		transform-style: flat !important;
		animation: none !important;
		transition: none !important;
		will-change: auto !important;
	}

	.hero.vs-hero .vs-media-card--book::before {
		content: none !important;
		display: none !important;
		background: none !important;
		box-shadow: none !important;
		filter: none !important;
	}

	.hero.vs-hero .vs-media-card--book::after {
		content: none !important;
		display: none !important;
		background: none !important;
		box-shadow: none !important;
		filter: none !important;
		transform: none !important;
	}

	.hero.vs-hero .vs-media-card-book-image {
		position: relative !important;
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		aspect-ratio: auto !important;
		object-fit: contain !important;
		object-position: center !important;
		border-radius: 0 !important;
		background: transparent !important;
		box-shadow: none !important;
		filter: none !important;
		z-index: 1 !important;
		animation: none !important;
		transition: none !important;
		backface-visibility: visible !important;
		transform: none !important;
	}

	.hero.vs-hero .vs-media-card--book .vs-s2-cover-badge,
	.hero.vs-hero .vs-media-card--book .vs-media-card-book-copy,
	.hero.vs-hero .vs-media-card--book .vs-media-card-overlay {
		display: none !important;
	}
}

/* ════════════════════════════════════════════════════════════════════════
   HERO SLIDE MEDIA — unified book-ratio images on MOBILE (≤767px)
   Mirrors the desktop treatment: every slide image shares the "Znaj i ti imaš
   SJAJ" book-cover ratio (903:1024), small book-like radius, modern 3D shadow.
   Last block in mobile.css so it overrides the earlier mobile hero resets.
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
	/* Slide 0 illustration/photo must show so its image is styled like the rest. */
	.hero.vs-hero .vs-slide[data-slide="0"] .vs-s0-illus { display: flex !important; }

	/* Stack visual below content on every slide; transparent, shadow-safe frame. */
	.hero.vs-hero .vs-slide-inner--tamara { flex-direction: column !important; }

	.hero.vs-hero .vs-slide-visual,
	.hero.vs-hero .vs-s0-illus,
	.hero.vs-hero .vs-s1-photo {
		order: 2 !important;
		flex: 0 0 auto !important;
		width: 100% !important;
		height: auto !important;
		min-height: 0 !important;
		max-width: none !important;
		overflow: visible !important;
		background: transparent !important;
		border: 0 !important;
		border-radius: 0 !important;
		box-shadow: none !important;
		padding: 6px 0 10px !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
	}

	.hero.vs-hero .vs-s0-img,
	.hero.vs-hero .vs-s1-img,
	.hero.vs-hero .vs-media-card-book-image {
		position: relative !important;
		inset: auto !important;
		display: block !important;
		width: 100% !important;
		max-width: 300px !important;
		height: auto !important;
		aspect-ratio: 903 / 1024 !important;   /* book cover — source of truth */
		object-fit: cover !important;
		object-position: center !important;
		border-radius: 6px !important;          /* small, like a real book cover */
		background: #fff !important;
		margin: 0 auto !important;
		box-shadow:
			0 1px 2px rgba(30, 10, 46, .14),
			0 8px 16px rgba(30, 10, 46, .12),
			0 20px 38px rgba(30, 10, 46, .14),
			0 34px 60px -6px rgba(139, 53, 214, .22) !important;
		transform: none !important;
		filter: none !important;
	}

	[data-theme="dark"] .hero.vs-hero .vs-s0-img,
	[data-theme="dark"] .hero.vs-hero .vs-s1-img,
	[data-theme="dark"] .hero.vs-hero .vs-media-card-book-image {
		background: #1a0e2a !important;
		box-shadow:
			0 1px 2px rgba(4, 3, 8, .4),
			0 10px 22px rgba(4, 3, 8, .34),
			0 24px 44px rgba(4, 3, 8, .36),
			0 40px 70px -6px rgba(139, 53, 214, .30) !important;
	}
}

/* ══════════════════════════════════════════════════════════════════
   HOMEPAGE HERO — mobile sweep. Desktop untouched.
   All 4 slides render identically, top → bottom:
     IMAGE (top-aligned, uniform box) → TITLE → INTRO TEXT → BUTTONS.
   This is the LAST block in the file, so it wins every earlier
   phone rule that styled the hero differently per slide.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

	/* ── Slide shell: single clean column, image lifted to the top with
	      minimal clearance under the floating nav pill (~70px tall). ── */
	.hero.vs-hero {
		padding-top: 70px !important;   /* just clears the fixed nav pill */
	}
	.hero.vs-hero .vs-hero-slider {
		min-height: 0 !important;
		height: auto !important;
	}
	.hero.vs-hero .vs-slide {
		height: auto !important;
		min-height: 0 !important;
	}
	.hero.vs-hero .vs-slide-inner,
	.hero.vs-hero .vs-slide-inner--tamara,
	.hero.vs-hero .vs-slide[data-slide="0"] .vs-slide-inner,
	.hero.vs-hero .vs-slide[data-slide="1"] .vs-slide-inner,
	.hero.vs-hero .vs-slide[data-slide="2"] .vs-slide-inner,
	.hero.vs-hero .vs-slide[data-slide="3"] .vs-slide-inner {
		display: flex !important;
		flex-direction: column !important;
		align-items: stretch !important;
		justify-content: flex-start !important;
		gap: 12px !important;
		padding: 4px 16px 18px !important;   /* minimal top, equal sides */
		min-height: 0 !important;
		height: auto !important;
	}

	/* ── 1. IMAGE — first, top-aligned, ONE uniform square for all 4 slides.
	      Sized by viewport height so image + title + text + buttons + the city
	      illustration all fit within ~80–90vh (content never runs past the city). ── */
	.hero.vs-hero .vs-slide-visual,
	.hero.vs-hero .vs-s0-illus,
	.hero.vs-hero .vs-s1-photo {
		order: -1 !important;
		width: auto !important;
		max-width: 86vw !important;
		height: min(38vh, 70vw) !important;   /* uniform square, viewport-bound */
		min-height: 0 !important;
		aspect-ratio: 1 / 1 !important;
		margin: 0 auto !important;
		align-self: center !important;
		padding: 0 !important;
		border-radius: 20px !important;
		overflow: hidden !important;
		background: transparent !important;
		border: 0 !important;
		box-shadow: none !important;
		display: flex !important;
		align-items: stretch !important;
		justify-content: stretch !important;
	}

	/* Neutralise every per-slide media-card (book perspective, founder frame,
	   fallback panel) so the image fills the box the same way everywhere. */
	.hero.vs-hero .vs-media-card,
	.hero.vs-hero .vs-media-card--photo,
	.hero.vs-hero .vs-media-card--founder,
	.hero.vs-hero .vs-media-card--book,
	.hero.vs-hero .vs-media-card--fallback {
		width: 100% !important;
		height: 100% !important;
		max-width: none !important;
		min-height: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		border-radius: 20px !important;
		background: transparent !important;
		box-shadow: none !important;
		transform: none !important;   /* kill book rotateY / tilt */
		overflow: hidden !important;
	}

	.hero.vs-hero .vs-s0-img,
	.hero.vs-hero .vs-s1-img,
	.hero.vs-hero .vs-media-card-img,
	.hero.vs-hero .vs-media-card-book-image {
		width: 100% !important;
		height: 100% !important;
		max-width: none !important;
		aspect-ratio: auto !important;
		object-fit: cover !important;
		object-position: center !important;
		border-radius: 20px !important;
		margin: 0 !important;
		transform: none !important;
		filter: none !important;
		box-shadow: none !important;
		background: transparent !important;
	}

	/* Strip on-image decorations (rating pills, book spine, NOVA badge,
	   copy overlay) — the image box stays clean. */
	.hero.vs-hero .vs-media-card::before,
	.hero.vs-hero .vs-media-card::after,
	.hero.vs-hero .vs-media-card--photo::before,
	.hero.vs-hero .vs-media-card--photo::after,
	.hero.vs-hero .vs-media-card--founder::before,
	.hero.vs-hero .vs-media-card--founder::after,
	.hero.vs-hero .vs-media-card--book::before,
	.hero.vs-hero .vs-media-card--book::after,
	.hero.vs-hero .vs-media-card-overlay,
	.hero.vs-hero .vs-media-card-book-copy,
	.hero.vs-hero .vs-media-card-kicker,
	.hero.vs-hero .vs-s2-cover-badge { display: none !important; }

	/* ── 2. TITLE — directly below the image, compact so the slide fits. ── */
	.hero.vs-hero .vs-slide-content {
		order: 2 !important;
		display: flex !important;
		flex-direction: column !important;
		align-items: flex-start !important;
		text-align: left !important;
		gap: 8px !important;
		padding: 0 !important;
		width: 100% !important;
		min-height: 0 !important;
	}
	.hero.vs-hero .hero-eyebrow {
		order: 0 !important;
		margin: 0 !important;
	}
	/* Titles identical across slides (slide 2's h2 matches slide 1's h1). */
	.hero.vs-hero .vs-slide-h1,
	.hero.vs-hero .vs-slide-h2,
	.hero.vs-hero .vs-slide[data-slide="0"] .vs-slide-h1 {
		margin: 0 !important;
		text-align: left !important;
		font-size: clamp(24px, 7vw, 32px) !important;
		line-height: 1.08 !important;
		max-width: none !important;
	}

	/* ── 3. INTRO TEXT — clamped to 2 lines so the slide never overruns. ── */
	.hero.vs-hero .vs-slide-content > p {
		display: -webkit-box !important;
		-webkit-line-clamp: 2 !important;
		-webkit-box-orient: vertical !important;
		overflow: hidden !important;
		font-size: 13.5px !important;
		line-height: 1.5 !important;
		max-width: none !important;
		width: 100% !important;
		margin: 0 !important;
	}

	/* Secondary bits that break the clean 4-part rhythm — hide on mobile. */
	.hero.vs-hero .founder-chip,
	.hero.vs-hero .vs-s2-meta,
	.hero.vs-hero .vs-s2-author,
	.hero.vs-hero .vs-slide-price { display: none !important; }

	/* Keep the trust-pill strip off (🚀 / ⭐ / 💜). */
	.hero.vs-hero .hero-trust { display: none !important; }

	/* ── 4. BUTTONS — one row, max 3 equal columns, wrap beyond 3. ── */
	.hero.vs-hero .hero-btns {
		order: 3 !important;
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: wrap !important;
		align-items: stretch !important;
		justify-content: flex-start !important;
		gap: 8px !important;
		width: 100% !important;
		margin: 2px 0 0 !important;
	}
	.hero.vs-hero .hero-btns > a,
	.hero.vs-hero .hero-btns .btn-primary,
	.hero.vs-hero .hero-btns .btn-outline {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		text-align: center !important;
		flex: 1 1 calc(33.333% - 6px) !important;
		min-width: 0 !important;
		width: auto !important;
		max-width: none !important;
		padding: 11px 6px !important;
		font-size: 12.5px !important;
		line-height: 1.15 !important;
	}

	/* Single-button slides (Tamara, Knjiga) — lone CTA stays full width. */
	.hero.vs-hero .vs-slide-content > a.btn-primary {
		order: 3 !important;
		display: inline-flex !important;
		justify-content: center !important;
		width: 100% !important;
	}

	/* Founder photo (Tamara) + book cover: show the WHOLE image (contain),
	   not a cropped band — cover was hiding Tamara entirely. */
	.hero.vs-hero .vs-s1-img,
	.hero.vs-hero .vs-media-card-book-image {
		object-fit: contain !important;
		object-position: center !important;
	}

	/* ── Section CTAs ("Svi programi" / "Sve predstave") at 2/3 width. ── */
	.section-cta { display: flex !important; justify-content: center !important; }
	.section-cta > .btn-outline,
	.section-cta > .btn-primary {
		width: 66% !important;
		max-width: 66% !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}

	/* ════════════════════════════════════════════════════════════════
	   SLIDE 2 (Tamara) formatted EXACTLY like slide 1 (source of truth):
	   same cover fill (rounds the box corners like the others), same box,
	   same border radius. [data-slide="1"] out-specifies the earlier 4-class
	   founder rules; sits last so it wins.
	   ════════════════════════════════════════════════════════════════ */
	.hero.vs-hero .vs-slide[data-slide="1"] .vs-media-card--founder {
		display: block !important;
		width: 100% !important;
		height: 100% !important;
		min-height: 0 !important;
		margin: 0 !important;
		background: transparent !important;
		border-radius: 20px !important;
		overflow: hidden !important;
	}
	.hero.vs-hero .vs-slide[data-slide="1"] .vs-media-card--founder .vs-s1-img,
	.hero.vs-hero .vs-slide[data-slide="1"] .vs-s1-img {
		position: relative !important;
		inset: auto !important;
		display: block !important;
		width: 100% !important;
		height: 100% !important;
		max-width: 100% !important;
		object-fit: cover !important;          /* same as slide 1 */
		object-position: center !important;
		border-radius: 20px !important;
		filter: none !important;
		transform: none !important;
	}
	/* If no photo is set in the Customizer, the 👩 placeholder still fills. */
	.hero.vs-hero .vs-slide[data-slide="1"] .vs-s1-photo-placeholder {
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		width: 100% !important;
		height: 100% !important;
		font-size: 84px !important;
	}

	/* Same loading/entrance animation on EVERY slide's image (slide 2's
	   portrait was using a different, bouncier keyframe than 1/3/4). */
	.vs-hero-slider .vs-slide--entering .vs-slide-visual,
	.vs-hero-slider .vs-slide--entering .vs-s0-illus,
	.vs-hero-slider .vs-slide--entering .vs-s1-photo {
		animation: vs-mob-enter-visual 650ms cubic-bezier(0.34, 1.1, 0.64, 1) both !important;
		animation-delay: 30ms !important;
	}

	/* [stupci] shortcode always collapses to a single column on phones. */
	.vs-columns { column-count: 1 !important; }

	/* ── "Gdje smo sve bili" venues — stack image over the accordion ── */
	.venues-section { padding: 8px 16px 48px !important; }
	.venues-inner { grid-template-columns: 1fr !important; gap: 20px !important; }
	.venues-media { position: static !important; }
	.venues-media img { max-height: 300px !important; }
	.venues-title { margin: 0 0 16px !important; }
	.venue-summary { padding: 15px 16px !important; font-size: 15px !important; }
	.venue-list { padding: 12px 18px 16px 34px !important; }
	.venue-item[open] .venue-list { columns: 1 !important; }
}