/* =============================================================
   VALHALLA — Mobile / UX fixes  (2026-06-01)
   Additive overrides, loaded LAST (inc/mobile-fixes.php @ prio 9999),
   so these win over header.css / responsive.css / mobile-optimizations.css.

   Scope (all surgical, no structural changes):
     1. Announce bar: full text on mobile (was nowrap+ellipsis → truncated)
     2. Announce bar: sticky on desktop (sits above the sticky header)
     3. Trust badges: stable single column on mobile (no 2-col flash)
     4. Mobile menu drawer: internal scroll for long category submenu
     5. Footer: compact on mobile
     6. Product cards: equal height + price/CTA pinned to bottom (symmetry)
   ============================================================= */

/* ---- 1. Announce bar — show the WHOLE text on mobile ---- */
@media (max-width: 1024px) {
  .vp-announce {
    white-space: normal !important;
    text-overflow: clip !important;
    overflow: visible !important;
    height: auto !important;
    line-height: 1.35 !important;
    font-size: 10px !important;
    letter-spacing: 1.5px !important;
    padding: 7px 14px !important;
  }
}

/* ---- 2. Announce bar — sticky on desktop, header docks beneath it ----
   `overflow-x:hidden` on html/body (anti horizontal-scroll) silently breaks
   position:sticky. `overflow-x:clip` clips the same way WITHOUT creating a
   scroll container, so sticky works again (also revives the sticky header). */
@media (min-width: 1025px) {
  html, body { overflow-x: clip !important; }
  .vp-announce {
    position: sticky !important;
    top: 0;
    z-index: 1000;               /* above the sticky header (z-index 999) */
    box-sizing: border-box;
    height: 32px;                /* slimmed 2026-06-07 (was 42px) → header offset must match */
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .vp-header {
    top: 32px;                   /* == announce-bar height, no gap / no overlap */
  }
}

/* ---- 3. Trust badges — one clean column on phones (kills 2-col flash) ---- */
@media (max-width: 600px) {
  .vp-trust {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 12px !important;
  }
  .vp-trust-item {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* ---- 4. Mobile menu drawer — let it scroll internally ----
   body lock used `touch-action:none`, which blocked touch-scroll INSIDE the
   drawer once the "Kúpiť peptidy" submenu expanded. Re-enable touch on the
   body and contain the scroll within the drawer. */
body.vp-mobile-menu-open {
  touch-action: auto !important;
}
.vp-mobile-drawer {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
@media (max-width: 1024px) {
  .vp-mobile-drawer {
    overflow-y: auto !important;
    height: 100vh;
    height: 100dvh !important;        /* dvh → correct height under iOS URL bar */
    max-height: 100dvh;
  }
  /* The drawer is a flex column: head (fixed) · nav (flex:1) · foot (fixed).
     When the "Kúpiť peptidy" submenu expands, the NAV section overflows — so
     IT must be the scroll container, otherwise items are clipped/unreachable. */
  .vp-mobile-nav {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    min-height: 0;
    /* safe-area so the last items clear the iOS gesture bar */
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
  }
  /* heading-font swap reaches the drawer logo too (was hard-coded Cormorant) */
  .vp-mobile-logo { font-family: var(--vp-font-heading) !important; }
}

/* ---- 5. Footer — reorganised (columns · contact/social/pay · divider · legal · band) ---- */
.vp-footer-inner {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 32px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 48px 24px 26px !important;
}
.vp-footer-col h4 {
  font-family: var(--vp-font-heading);
  color: #D4AF37;
  font-size: 13px; letter-spacing: 2px; text-transform: uppercase;
  margin: 0 0 14px !important;
}
.vp-footer-col a {
  display: block; color: #C9C2B0; text-decoration: none;
  font-size: 14px; padding: 6px 0; transition: color .2s ease;
}
.vp-footer-col a:hover { color: #E8C766; }

.vp-footer-mid {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 24px; max-width: 1100px; margin: 0 auto; padding: 8px 24px 24px;
}
.vp-footer-mid .vp-footer-brand { display: flex; flex-direction: column; gap: 10px; }
.vp-footer-brand-contact { color: #9A9486; font-size: 13px; line-height: 1.6; margin: 0; }
.vp-footer-brand-contact a { color: #D4AF37; text-decoration: none; }
.vp-footer-connect { display: flex; flex-direction: column; gap: 14px; align-items: flex-end; }
.vp-footer-social { display: flex; gap: 12px; }
.vp-footer-social a {
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #D4AF37; border: 1px solid rgba(212,175,55,.3);
  transition: background .2s ease, color .2s ease;
}
.vp-footer-social a:hover { background: #D4AF37; color: #0E0E0E; }
.vp-footer-pay { display: flex; gap: 8px; flex-wrap: wrap; }
.vp-pay-badge {
  font-size: 11px; letter-spacing: .5px; color: #C9C2B0;
  border: 1px solid rgba(212,175,55,.25); border-radius: 4px;
  padding: 5px 10px; background: rgba(212,175,55,.05);
}

.vp-footer-bottom {
  border-top: 1px solid rgba(212,175,55,.18);
  max-width: 1100px; margin: 0 auto; padding: 18px 24px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
}
.vp-footer-copy { color: #8A8472; font-size: 12px; margin: 0; }
.vp-footer-legal-links { display: flex; flex-wrap: wrap; gap: 18px; }
.vp-footer-legal-links a { color: #8A8472; font-size: 12px; text-decoration: none; transition: color .2s ease; }
.vp-footer-legal-links a:hover { color: #D4AF37; }

/* Full-width compliance band — visually separated, always the very last element */
.vp-footer-legal-band {
  background: #080808;
  border-top: 1px solid rgba(212,175,55,.14);
  text-align: center;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
}
.vp-footer-legal-band span {
  font-family: var(--vp-font-body);
  font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: #6E685C;
}

/* Mobile: everything in ONE column, band full-width last */
@media (max-width: 768px) {
  .vp-footer-inner {
    grid-template-columns: 1fr !important;
    gap: 4px !important; padding: 30px 20px 12px !important;
  }
  .vp-footer-col { border-bottom: 1px solid rgba(212,175,55,.10); padding: 12px 0; }
  .vp-footer-col:last-child { border-bottom: 0; }
  .vp-footer-col h4 { font-size: 12px; margin-bottom: 8px !important; }
  .vp-footer-col a { font-size: 14px; padding: 5px 0; }
  .vp-footer-mid { flex-direction: column; align-items: center; text-align: center; padding: 8px 20px 22px; }
  .vp-footer-mid .vp-footer-brand { align-items: center; }
  .vp-footer-connect { align-items: center; }
  .vp-footer-logo { max-width: 150px; height: auto; }
  .vp-footer-bottom { flex-direction: column; text-align: center; gap: 10px; padding: 16px 20px; }
  .vp-footer-legal-links { justify-content: center; gap: 14px; }
}

/* ---- 6. Product cards — symmetric, price/CTA aligned at the bottom ---- */
.vp-product-card {
  display: flex !important;
  flex-direction: column;
  height: 100%;
}
.vp-product-info {
  display: flex !important;
  flex-direction: column;
  flex: 1 1 auto;
}
.vp-product-name {
  /* clamp to 2 lines so every card's title block is the same height */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
}
.vp-product-price-row {
  margin-top: auto !important;   /* pin price + button to the bottom edge */
}
/* equal-height rows in the shop grid */
.vp-products-grid,
ul.products,
.vp-product-card-grid {
  align-items: stretch;
}

/* ---- 7. Manifesto page (/nas-pristup/) — long-form enhancements ---- */
.vp-manifesto-lead {
  font-size: 19px !important;
  line-height: 1.7 !important;
  color: #d8cdbb !important;
  margin-bottom: 26px !important;
}
.vp-manifesto h2 {
  margin-top: 56px !important;
  padding-top: 28px;
  border-top: 1px solid rgba(201,160,101,.14);
}
.vp-manifesto ul { list-style: none; margin-left: 0 !important; }
.vp-manifesto ul li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 14px !important;
}
.vp-manifesto ul li::before {
  content: "✦";
  position: absolute; left: 0; top: 1px;
  color: #C9A065; font-size: 12px;
}
.vp-manifesto-sign {
  margin-top: 48px !important;
  padding-top: 24px;
  border-top: 1px solid rgba(201,160,101,.18);
  font-family: var(--vp-font-heading);
  font-size: 17px;
  color: #EAE0D0 !important;
}
.vp-manifesto-rev { font-size: 12px !important; color: #6E685C !important; margin-top: 10px !important; }
@media (max-width: 640px) {
  .vp-manifesto-lead { font-size: 17px !important; }
  .vp-manifesto h2 { margin-top: 40px !important; }
}

/* ═══ NEWSLETTER (functional signup) ═══ */
.vp-newsletter {
  padding: clamp(56px, 8vh, 88px) 20px;
  text-align: center;
  background:
    radial-gradient(640px 320px at 50% 0%, rgba(212,175,55,.07), transparent 60%),
    linear-gradient(180deg, #0c0c0e 0%, #0a0a0a 100%);
  border-top: 1px solid rgba(212,175,55,.10);
}
.vp-newsletter-inner { max-width: 560px; margin: 0 auto; }
.vp-newsletter-title {
  font-family: var(--vp-font-heading, 'Fraunces', serif);
  font-weight: 600;
  font-size: clamp(26px, 4vw, 38px);
  color: #EFE7D6;
  margin: 6px 0 12px;
  line-height: 1.15;
}
.vp-newsletter-sub {
  color: #a59f90;
  font-size: clamp(14px, 1.5vw, 16px);
  line-height: 1.65;
  margin: 0 auto 26px;
  max-width: 480px;
}
.vp-newsletter-form { margin: 0 auto; }
.vp-newsletter-row {
  display: flex;
  gap: 10px;
  max-width: 440px;
  margin: 0 auto;
}
.vp-newsletter-input {
  flex: 1;
  min-width: 0;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(212,175,55,.30);
  border-radius: 6px;
  padding: 14px 16px;
  color: #EFE7D6;
  font-size: 15px;
  outline: none;
  transition: border-color .2s, background .2s;
}
.vp-newsletter-input::placeholder { color: #6E685C; }
.vp-newsletter-input:focus {
  border-color: rgba(212,175,55,.65);
  background: rgba(255,255,255,.05);
}
.vp-newsletter-btn {
  flex: 0 0 auto;
  background: linear-gradient(135deg, #EAC974, #D4AF37);
  color: #120d04;
  border: none;
  border-radius: 6px;
  padding: 14px 26px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .15s, box-shadow .2s, filter .2s;
}
.vp-newsletter-btn:hover { transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 8px 20px -12px rgba(212,175,55,.7); }
.vp-newsletter-btn:disabled { opacity: .6; cursor: default; transform: none; }
.vp-newsletter-msg { font-size: 14px; margin: 14px 0 0; min-height: 1em; }
.vp-newsletter-msg.is-ok { color: #7BC47F; }
.vp-newsletter-msg.is-error { color: #E0876F; }
.vp-newsletter-note { font-size: 11.5px; color: #6E685C; margin: 14px auto 0; max-width: 420px; line-height: 1.5; }
@media (max-width: 560px) {
  .vp-newsletter-row { flex-direction: column; }
  .vp-newsletter-btn { padding: 14px 20px; }
}

/* =============================================================
   ROUND 6 (2026-06-04) — iPhone 16 Pro / Safari mobile fixes
   Loaded LAST (@9999) → wins over style.css / responsive.css /
   mobile-optimizations.css. All scoped to mobile media queries,
   so DESKTOP IS UNTOUCHED. Root causes verified live @390px.
   ============================================================= */

/* ---- 8. KILL the gold "Research Use Only" panel over product images ----
   ROOT CAUSE: the custom archive uses woocommerce_product_loop_start(false)
   → there is NO `ul.products` wrapper, so the corner-pill constraint in
   homepage.css (`.woocommerce ul.products li.product .vp-product-ruo`)
   NEVER matches. The badge therefore keeps top/left (mobile-optimizations
   .css:78) AND right/bottom (style.css:1551) → all four insets set → the
   absolutely-positioned span stretches to fill the 220px wrap (206×206),
   and mobile-optimizations.css:1556 paints it solid gold (.95) → the badge
   becomes a gold panel hiding the photo. (Image files are fine.)
   FIX: reset to a small dark corner pill. `.vp-product-card .vp-product-ruo`
   (specificity 0,2,0) out-specifies the offending 0,1,0 rules and loads
   later, so it wins without !important wars. */
@media (max-width: 1024px) {
  .vp-product-card .vp-product-ruo {
    top: 6px !important;
    left: 6px !important;
    right: auto !important;            /* stop the horizontal stretch */
    bottom: auto !important;           /* stop the vertical stretch   */
    width: auto !important;
    height: auto !important;
    display: inline-block !important;
    max-width: calc(100% - 12px);
    background: rgba(0, 0, 0, 0.55) !important;   /* subtle dark, NOT gold */
    color: rgba(245, 240, 232, 0.72) !important;
    font-size: 9px !important;
    font-weight: 500 !important;
    letter-spacing: 0.06em !important;
    padding: 2px 6px !important;
    border-radius: 2px !important;
    line-height: 1.3 !important;
    z-index: 2;
    pointer-events: none;              /* never intercept taps on the card */
  }
}

/* ---- 9. Product card: stack PRICE above a FULL-WIDTH CTA on phones ----
   ROOT CAUSE: .vp-product-price-row stays a horizontal flex row
   (justify-content:space-between); the button is content-width (~48px) so
   "Do košíka" clips to "DO K" and "Vybrať" wraps to "VYB RAŤ".
   FIX: stack the row vertically → price on top, full-width button below.
   Scoped ≤600px so the tablet 2-up row is untouched. */
@media (max-width: 600px) {
  .vp-product-price-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  .vp-product-price {
    font-size: 16px !important;
    color: var(--vp-gold, #D4AF37) !important;
    line-height: 1.2 !important;
  }
  .vp-product-atc {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: center !important;
    white-space: nowrap !important;
    padding: 10px 8px !important;
    font-size: 10px !important;
    letter-spacing: 1.5px !important;
    line-height: 1.2 !important;
  }

  /* ---- 10. 2-column grid robustness (keep 2 cols, kill overflow) ----
     Ensure every child can shrink inside the ~160px column so nothing
     pushes the card wider than its track. */
  .vp-product-card {
    box-sizing: border-box !important;
    width: 100% !important;
  }
  .vp-product-card * { min-width: 0; }
  .vp-product-info { padding: 12px 12px !important; }
}

/* ---- 11. Product image presentation on mobile ----
   Opaque wrap bg (was rgba(10,10,10,.5) → could bleed on tinted sections);
   contain so vials are never cropped (images are square, so visually same). */
@media (max-width: 768px) {
  .vp-product-card .vp-product-img-wrap {
    background: #0f0f0f !important;
  }
  .vp-product-card .vp-product-img-wrap img {
    object-fit: contain !important;
  }
}

/* ---- 12. Category cards — no overflow on phones ----
   ROOT CAUSE: mobile-optimizations.css:189 forces .vp-cat-grid to
   `1fr 1fr` from 381–768px, but each .vp-cat-item (icon + text flex row)
   has a wide min-content → the two tracks blow out (231px+215px) and the
   right column lands past the viewport (e.g. right:491 @430px), masked only
   by the overflow-x:hidden safety net. These icon+text rows are designed
   to be full-width list rows on phones → force a single column ≤600px and
   let children shrink. Long genitive SK names then wrap cleanly. */
@media (max-width: 600px) {
  .vp-categories .vp-cat-grid,
  .vp-cat-grid {
    grid-template-columns: 1fr !important;   /* single column = zero overflow */
    padding: 0 16px !important;
  }
  .vp-categories .vp-cat-item {
    padding: 18px 16px !important;
    gap: 16px !important;
    min-width: 0;
  }
  .vp-categories .vp-cat-icon {
    width: 48px !important;
    height: 48px !important;
    flex-shrink: 0;
  }
  .vp-categories .vp-cat-text { min-width: 0; }
  .vp-categories .vp-cat-name {
    font-size: 16px !important;
    letter-spacing: 0.03em !important;
    overflow-wrap: anywhere;
  }
}

/* ---- 13. Mobile drawer — light hardening (already functional) ----
   The drawer has padding:0 (spacing lives on its flex children head·nav·foot),
   so notch clearance belongs on the HEAD, not the drawer. Keep the head's
   existing 22px baseline and grow it by the iOS safe-area inset. pan-y on the
   scroll container as belt-and-braces over body{touch-action:auto}. */
@media (max-width: 1024px) {
  .vp-mobile-drawer-head {
    padding-top: max(22px, env(safe-area-inset-top, 0px)) !important;
  }
  .vp-mobile-drawer-foot {
    padding-bottom: max(16px, env(safe-area-inset-bottom, 0px));
  }
  .vp-mobile-nav {
    touch-action: pan-y;
  }
}

/* ---- 14. Content pages (O nás, legal) — visual rhythm so long copy isn't a
   wall of text: gold accent on each H2, subtle divider between sections, and a
   stronger lead. Applies to all .vp-page-* content pages consistently. ---- */
.vp-page-h2 {
  position: relative;
  padding-top: 22px;
  margin-top: 6px;
}
.vp-page-h2::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 48px; height: 2px;
  background: linear-gradient(90deg, #EAC974, #D4AF37);
  border-radius: 2px;
}
.vp-page-section + .vp-page-section {
  border-top: 1px solid rgba(212,175,55,.10);
}
.vp-page-lead {
  border-left: 3px solid rgba(212,175,55,.5);
  padding-left: 18px;
  color: #d6cdbb !important;
}

/* =============================================================
   §15 — Perf/UX 2026-06-07
   Compact header on laptops/desktop, condense-on-scroll, and a
   global back-to-top button. Mobile (<769px) header is unchanged.
   (functions.php locked → all overrides here, @prio 9999 wins over
    header.css:248 which pins .vp-logo-img to a fixed 110px ≥769px.)
   NOTE: global `zoom:1.2` (style.css:85) still scales these +20%.
   ============================================================= */
@media (min-width: 769px) {
  /* A1 — scale the wordmark with the viewport instead of a fixed 110px so it
     stops eating ~1/3 of short laptop screens; stays full on big monitors. */
  .vp-header-center img,
  .vp-logo-img {
    height: clamp(40px, 4.2vw, 72px) !important;
    max-width: clamp(190px, 30vw, 360px) !important;
  }
  .vp-header-top {
    min-height: 0 !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
  .vp-nav { padding-bottom: 10px; }

  /* A2 — condense on scroll: header.js toggles .vp-scrolled on #vpHeader past
     120px. The announce bar stays (slim 32px) so the sticky offset is stable. */
  .vp-header { transition: top .25s ease; }
  .vp-header-top { transition: padding .25s ease; }
  .vp-logo-img  { transition: height .25s ease; }
  .vp-nav       { transition: padding .25s ease; }
  .vp-scrolled .vp-logo-img   { height: clamp(30px, 2.6vw, 40px) !important; }
  .vp-scrolled .vp-header-top { padding-top: 5px !important; padding-bottom: 5px !important; }
  .vp-scrolled .vp-nav        { padding-bottom: 6px; }
}

/* A3 — global back-to-top button. header.js injects this as .vp-btt on every
   page EXCEPT pages that already ship one (#vp-pp-btt on product PDPs), so
   there is never a double button. Visual matches the existing .vp-pp-btt. */
.vp-btt {
  position: fixed; bottom: 80px; right: 20px;
  width: 40px; height: 40px;
  background: #141414; border: 1px solid #2a2a2a; color: #e0e0e0;
  border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  z-index: 9985; opacity: 0; transform: translateY(8px);
  transition: opacity .3s, transform .3s, border-color .2s, color .2s;
  pointer-events: none;
}
.vp-btt.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
.vp-btt:hover { border-color: #C9A055; color: #C9A055; }
.vp-btt svg { width: 18px; height: 18px; stroke: currentColor; fill: none; }
@media (max-width: 600px) {
  .vp-btt { bottom: 70px; right: 14px; width: 36px; height: 36px; }
}