/* =============================================================
   VALHALLA PEPTIDES — Mobile Optimizations (Phase Mobile)
   Owner: Phase Mobile sweep
   Date: 2026-05-25
   Scope: CSS-only responsive fixes for ≤480 / ≤640 / ≤768 / ≤1024px.
   Targets: iPhone SE (375), iPhone Plus (414), iPad portrait (768).

   Loaded by inc/mobile-optimizations.php @ wp_enqueue_scripts
   priority 1000 — cascades AFTER responsive.css (999) and all
   per-module CSS (header/footer/product/etc.). !important is used
   throughout for cascade safety against Elementor / WooCommerce
   default styles.

   NO HTML / NO JS / NO PHP behavior changes — pure CSS overrides.
   ============================================================= */

/* ============================================================
   Fix 1 — Bestsellery grid (HIGHEST IMPACT)
   Before: 1 product / row on mobile → 8 screens of scroll.
   After:  2 / row on ≤640px, compact RUO badge, gold price.
   ============================================================ */
@media (max-width: 640px) {
  /* Real homepage selector: .vp-product-grid inside .vp-featured.
     Spec selectors (.vp-bestsellers-grid, WooCommerce ul.products) kept
     as fallbacks for any archive / category pages. */
  .vp-product-grid,
  .vp-bestsellers-grid,
  .woocommerce ul.products[class*="columns-"],
  ul.products.columns-4 {
    grid-template-columns: 1fr 1fr !important;
    display: grid !important;
    gap: 12px !important;
    padding: 0 12px !important;
    margin: 0 !important;
  }
  .vp-product-grid > .vp-product-card,
  .vp-bestsellers-grid > *,
  .woocommerce ul.products li.product {
    width: 100% !important;
    margin: 0 !important;
    padding: 10px 8px !important;
    float: none !important;
    position: relative !important; /* needed for absolute RUO badge */
  }
  .vp-product-card .vp-product-img-wrap img,
  .woocommerce ul.products li.product img,
  .vp-product-image img {
    aspect-ratio: 1 !important;
    object-fit: cover !important;
    width: 100% !important;
    height: auto !important;
  }
  .vp-product-card .vp-product-name,
  .woocommerce ul.products li.product .woocommerce-loop-product__title,
  .vp-product-title {
    font-size: 13px !important;
    line-height: 1.3 !important;
    margin: 8px 0 4px !important;
  }
  .vp-product-card .vp-product-price,
  .woocommerce ul.products li.product .price,
  .vp-product-price {
    font-size: 15px !important;
    margin-bottom: 8px !important;
    color: #C9A055 !important;
    font-weight: 600 !important;
  }
  .vp-product-card .vp-product-atc,
  .woocommerce ul.products li.product .button,
  .vp-product-atc,
  .vp-bestsellers-grid .button {
    font-size: 11px !important;
    padding: 8px 10px !important;
    width: 100% !important;
  }
  /* RUO badge — top-left corner, compact.
     Real homepage uses .vp-product-ruo; spec selectors kept as fallback. */
  .vp-product-ruo,
  .vp-ruo-badge,
  .product .vp-research-use-only,
  .vp-bestsellers-grid [class*="research"] {
    position: absolute !important;
    top: 6px !important;
    left: 6px !important;
    font-size: 9px !important;
    padding: 2px 6px !important;
    background: rgba(0,0,0,0.6) !important;
    border-radius: 2px !important;
    z-index: 2;
    line-height: 1.3 !important;
  }
}

/* ============================================================
   Fix 2 — "Prečo Valhalla" USP cards
   Stack to 1 column on tablet+ mobile, downsize iconography.
   ============================================================ */
@media (max-width: 768px) {
  .vp-usp-grid,
  .vp-why-cards {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding: 0 16px !important;
  }
  .vp-usp-card {
    padding: 24px 20px !important;
  }
  .vp-usp-card svg {
    width: 40px !important;
    height: 40px !important;
  }
  .vp-usp-card h3 {
    font-size: 20px !important;
    margin-top: 12px !important;
    margin-bottom: 12px !important;
  }
  .vp-usp-card p {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }
}

/* ============================================================
   Fix 3 — Announcement bar
   Smaller font, tighter padding for cramped widths.
   ============================================================ */
@media (max-width: 640px) {
  .vp-announce,
  .vp-announcement-bar {
    font-size: 11px !important;
    padding: 6px 12px !important;
    letter-spacing: 0.5px !important;
    line-height: 1.4 !important;
  }
}

@media (max-width: 380px) {
  .vp-announce,
  .vp-announcement-bar {
    font-size: 10px !important;
  }
}

/* ============================================================
   Fix 4 — Hero typography + padding
   Section pad downscale; H1 from desktop 60+px to 38/30.
   ============================================================ */
@media (max-width: 768px) {
  .vp-hero,
  .vp-page-hero,
  .vp-quiz-hero {
    padding: 40px 20px !important;
    min-height: auto !important;
  }
  .vp-hero h1,
  .vp-page-hero h1,
  .vp-quiz-hero h1 {
    font-size: 38px !important;
    line-height: 1.1 !important;
    letter-spacing: 1px !important;
  }
  .vp-hero-subtitle,
  .vp-page-hero-subtitle {
    font-size: 14px !important;
  }
  .vp-hero-cta,
  .vp-quiz-cta {
    padding: 14px 28px !important;
    font-size: 13px !important;
  }
}

@media (max-width: 480px) {
  .vp-hero h1,
  .vp-page-hero h1,
  .vp-quiz-hero h1 {
    font-size: 30px !important;
  }
}

/* ============================================================
   Fix 5 — Categories grid
   2 cols on tablet/mobile, 1 col on tiny screens (<380px).
   ============================================================ */
@media (max-width: 768px) {
  /* Real homepage selectors: .vp-cat-grid / .vp-cat-item / .vp-cat-icon /
     .vp-cat-name / .vp-cat-overtitle. Spec's .vp-categories-grid /
     .vp-category-card kept as fallback. */
  .vp-cat-grid,
  .vp-categories-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    padding: 0 16px !important;
  }
  .vp-cat-item,
  .vp-category-card {
    padding: 16px 12px !important;
  }
  .vp-cat-icon,
  .vp-cat-icon svg,
  .vp-cat-item svg,
  .vp-category-card svg {
    width: 36px !important;
    height: 36px !important;
  }
  .vp-cat-name,
  .vp-category-title {
    font-size: 12px !important;
    line-height: 1.3 !important;
    margin-top: 8px !important;
  }
  .vp-cat-overtitle,
  .vp-category-overtitle {
    font-size: 9px !important;
    letter-spacing: 1px !important;
  }
}

@media (max-width: 380px) {
  .vp-cat-grid,
  .vp-categories-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   Fix 6 — Footer
   Centered single-column stack, compact brand logo, legal line.
   ============================================================ */
@media (max-width: 768px) {
  /* Logo: real selectors are .vp-footer-logo / .vp-footer-brand img.
     Spec's .vp-logo / .vp-footer-columns / .vp-footer-grid kept as fallback;
     real columns wrapper is .vp-footer-inner. */
  .vp-footer-logo,
  .vp-footer-logo img,
  .vp-footer img.vp-logo,
  .vp-footer .vp-footer-brand img {
    width: 80px !important;
    height: auto !important;
    margin: 0 auto 20px !important;
    display: block !important;
  }
  .vp-footer-inner,
  .vp-footer-columns,
  .vp-footer-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    text-align: center !important;
  }
  .vp-footer-col {
    text-align: center !important;
  }
  .vp-footer-legal,
  .vp-footer-legal-text,
  .vp-footer-copy,
  .vp-footer-bottom {
    font-size: 11px !important;
    padding: 16px !important;
    line-height: 1.5 !important;
  }
}

/* ============================================================
   Fix 7 — Newsletter section
   Hide on mobile to reclaim vertical real estate.
   ============================================================ */
@media (max-width: 768px) {
  .vp-newsletter-section,
  .vp-newsletter,
  #newsletter,
  [class*="newsletter"][class*="section"] {
    display: none !important;
  }
}

/* ============================================================
   Fix 8 — General section padding reductions
   Trim desktop 80–120px section pads to 40px on mobile.
   ============================================================ */
@media (max-width: 768px) {
  section,
  .vp-section,
  .vp-page-section {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
  .vp-container,
  .vp-max-w,
  .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  h2.vp-section-title,
  .vp-section h2,
  .vp-page-section h2 {
    font-size: 28px !important;
    margin-bottom: 24px !important;
  }
}

@media (max-width: 480px) {
  h2.vp-section-title,
  .vp-section h2 {
    font-size: 24px !important;
  }
}

/* ============================================================
   Fix 9 — Header mobile (logo + icons)
   Compact header padding, smaller logo, balanced icon gaps.
   ============================================================ */
@media (max-width: 768px) {
  .vp-header,
  .vp-header-top {
    padding: 12px 16px !important;
  }
  .vp-header-logo img,
  .vp-logo-img,
  .vp-logo img {
    height: 40px !important;
    width: auto !important;
  }
  .vp-header-icons,
  .vp-header-right {
    gap: 14px !important;
  }
  .vp-search-toggle,
  .vp-cart-link,
  .vp-account-link,
  .vp-header-btn {
    font-size: 14px !important;
  }
}

/* ============================================================
   Fix 10 — Touch target enforcement
   WCAG 2.5.5 / iOS HIG minimum 44×44 for any tappable control.
   ============================================================ */
@media (max-width: 768px) {
  button,
  .button,
  a.button,
  input[type="submit"],
  input[type="button"],
  .vp-btn,
  [role="button"] {
    min-height: 44px !important;
    min-width: 44px !important;
  }
}

/* ============================================================
   Fix 11 — Cookie banner (P0 ÚOOÚ + mobile size)
   Site uses the custom .vp-cookie-banner (NOT Complianz UI —
   Complianz plugin only generates the cookie policy + blocks
   3rd-party scripts pre-consent). Selectors target the live DOM.

   Compliance: EDPB / ÚOOÚ §109(8) — Accept and Reject must have
   equal ease-of-use. Current ghost vs solid is borderline; both
   buttons here get the same solid gold fill, padding, weight.

   Mobile size: bottom-fixed full-width, max-height 40vh with
   overflow-y scroll; buttons go side-by-side at ≥360px (was 480)
   so iPhone SE 375 fits two buttons in a row → banner ~40% shorter.

   Color: #D4AF37 (theme canonical) — NOT spec's #C9A055.
   Site-wide gold token reconciliation deferred to Phase 5.
   ============================================================ */

/* Equal prominence — both buttons solid gold, same size/weight */
.vp-cookie-banner .vp-cookie-btn,
.vp-cookie-banner .vp-cookie-btn-primary,
.vp-cookie-banner .vp-cookie-btn-ghost,
.vp-cookie-settings-actions .vp-cookie-btn,
.vp-cookie-settings-actions .vp-cookie-btn-primary,
.vp-cookie-settings-actions .vp-cookie-btn-ghost {
  background: #D4AF37 !important;
  color: #0A0A0A !important;
  border: 1px solid #D4AF37 !important;
  font-weight: 600 !important;
  min-height: 44px !important;
  padding: 11px 18px !important;
  flex: 1 1 auto !important;
  white-space: normal !important; /* allow Slovak long text to wrap inside 169px buttons */
  line-height: 1.25 !important;
}

.vp-cookie-banner .vp-cookie-btn:hover,
.vp-cookie-banner .vp-cookie-btn:focus,
.vp-cookie-settings-actions .vp-cookie-btn:hover,
.vp-cookie-settings-actions .vp-cookie-btn:focus {
  background: #E8C766 !important;
  border-color: #E8C766 !important;
  color: #0A0A0A !important;
}

/* Buttons go side-by-side starting at 360px (was 480) so iPhone SE
   gets row layout and banner height drops. */
@media (min-width: 360px) {
  .vp-cookie-banner .vp-cookie-actions {
    flex-direction: row !important;
    gap: 8px !important;
  }
  .vp-cookie-banner .vp-cookie-actions .vp-cookie-btn {
    flex: 1 1 0 !important;
  }
}

/* Mobile (≤768px): full-width bottom-pinned, capped at 40vh, scrollable */
@media (max-width: 768px) {
  .vp-cookie-banner {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    width: auto !important;
    max-width: none !important;
    max-height: 40vh !important;
    overflow-y: auto !important;
    padding: 14px 16px !important;
    border-radius: 8px 8px 0 0 !important;
    background: #0A0A0A !important;
    border: 0 !important;
    border-top: 1px solid #D4AF37 !important;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.6) !important;
  }
  .vp-cookie-heading {
    font-size: 12px !important;
    margin-bottom: 6px !important;
  }
  .vp-cookie-text {
    font-size: 12.5px !important;
    line-height: 1.45 !important;
    margin-bottom: 10px !important;
  }
  .vp-cookie-links {
    font-size: 11.5px !important;
    margin-bottom: 12px !important;
  }
  .vp-cookie-banner .vp-cookie-btn {
    padding: 10px 14px !important;
    font-size: 11px !important;
  }
}

/* Tiny mobile (≤380): further trim line-height + padding */
@media (max-width: 380px) {
  .vp-cookie-banner {
    padding: 12px 14px !important;
    max-height: 45vh !important; /* slight relief on shortest screens */
  }
  .vp-cookie-text {
    font-size: 12px !important;
  }
}

/* ============================================================
   PHASE MOBILE V2 — Full-site responsive sweep (2026-05-25)
   ALL rules below are wrapped in @media — desktop untouched.
   Targets: 360 (S9), 393 (iPhone 14), 430 (iPhone Pro Max), 768 (tablet)
   ============================================================ */

/* ============================================================
   V2 Fix 0 — DISABLE BODY ZOOM ON MOBILE (ROOT CAUSE)
   style.css §83: :root { --vp-scale: 1.2 } + body { zoom: var(--vp-scale) }
   This 1.2× zoom causes 360px viewport to render as 432px effective width,
   producing horizontal scroll on EVERY page. Mobile must use 1.0 scale.
   ============================================================ */
@media (max-width: 1024px) {
  :root {
    --vp-scale: 1 !important;
  }
  body {
    zoom: 1 !important;
  }
}

/* ============================================================
   V2 Fix 1 — Global horizontal overflow clamp (≤1024px)
   Solution: belt-and-suspenders. Clip body overflow + reset flex min-width.
   ============================================================ */
@media (max-width: 1024px) {
  html,
  body {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* All major page containers can't exceed viewport */
  .vp-header,
  .vp-announce,
  .vp-footer,
  .vp-page-wrap,
  .vp-container,
  .vp-page-section,
  main,
  #content {
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }

  /* Reset default min-width:auto on flex children so they may shrink */
  .vp-header-top,
  .vp-header-top > *,
  .vp-header-left,
  .vp-header-center,
  .vp-header-right,
  .vp-footer-inner > *,
  .vp-tier-picker > *,
  .vp-variants > * {
    min-width: 0 !important;
  }
}

/* ============================================================
   V2 Fix 2 — Header right cluster (cart + hamburger overflow)
   At ≤480px the right cluster overflows parent (cart icon + hamburger
   + optional account = 175px wide). Tighten gaps and force shrink.
   ============================================================ */
@media (max-width: 480px) {
  .vp-header-right {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    flex-shrink: 1 !important;
    min-width: 0 !important;
  }
  /* WCAG 2.5.5 — bumped from 36px to 44px to meet AA touch target */
  .vp-header-right .vp-header-btn,
  .vp-header-right .vp-cart-link,
  .vp-header-right .vp-account-link {
    padding: 8px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .vp-cart-count {
    font-size: 10px !important;
    padding: 1px 5px !important;
    top: 6px !important;
    right: 6px !important;
  }
}

@media (max-width: 380px) {
  .vp-header-top {
    padding-left: 8px !important;
    padding-right: 8px !important;
    gap: 6px !important;
  }
  .vp-logo-img,
  .vp-header-center img {
    height: 28px !important;
    max-width: 110px !important;
  }
}

/* ============================================================
   V2 Fix 3 — WooCommerce cart (mobile stacking)
   Cart items stack vertically with thumb left, content right.
   ============================================================ */
@media (max-width: 768px) {
  .woocommerce-cart .woocommerce,
  .woocommerce-cart-form,
  .wc-block-cart {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Hide table headers on mobile, stack rows */
  .woocommerce-cart table.shop_table thead {
    display: none !important;
  }
  .woocommerce-cart table.shop_table,
  .woocommerce-cart table.shop_table tbody,
  .woocommerce-cart table.shop_table tr {
    display: block !important;
    width: 100% !important;
  }
  .woocommerce-cart table.shop_table tr.cart_item {
    display: grid !important;
    grid-template-columns: 80px 1fr !important;
    gap: 8px 12px !important;
    padding: 14px 12px !important;
    border-bottom: 1px solid rgba(212, 175, 55, 0.18) !important;
    margin-bottom: 0 !important;
  }
  .woocommerce-cart table.shop_table td {
    display: block !important;
    width: auto !important;
    padding: 4px 0 !important;
    border: 0 !important;
    text-align: left !important;
  }
  .woocommerce-cart table.shop_table td.product-thumbnail {
    grid-column: 1;
    grid-row: 1 / span 4;
    padding: 0 !important;
  }
  .woocommerce-cart table.shop_table td.product-thumbnail img {
    width: 80px !important;
    height: 80px !important;
    object-fit: cover !important;
    margin: 0 !important;
  }
  .woocommerce-cart table.shop_table td.product-name,
  .woocommerce-cart table.shop_table td.product-price,
  .woocommerce-cart table.shop_table td.product-quantity,
  .woocommerce-cart table.shop_table td.product-subtotal,
  .woocommerce-cart table.shop_table td.product-remove {
    grid-column: 2;
    font-size: 13px !important;
  }
  .woocommerce-cart table.shop_table td.product-name a {
    font-size: 14px !important;
    font-weight: 600 !important;
  }
  .woocommerce-cart table.shop_table td.product-quantity .quantity input {
    width: 60px !important;
    min-height: 36px !important;
  }
  .woocommerce-cart table.shop_table td.product-remove a {
    font-size: 11px !important;
    color: #c14747 !important;
  }

  /* Cart totals — full width, no float */
  .woocommerce-cart .cart_totals,
  .woocommerce-cart .cart-collaterals {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin-top: 24px !important;
  }
  .woocommerce-cart .wc-proceed-to-checkout {
    padding: 0 !important;
  }
  .woocommerce-cart .checkout-button {
    width: 100% !important;
    text-align: center !important;
    font-size: 14px !important;
    padding: 14px !important;
  }

  /* Coupon row stacks */
  .woocommerce-cart .coupon {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
  }
  .woocommerce-cart .coupon input,
  .woocommerce-cart .coupon button {
    width: 100% !important;
  }

  /* Update cart + continue shopping side-by-side full-width */
  .woocommerce-cart .actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
  }
  .woocommerce-cart .actions button {
    width: 100% !important;
  }
}

/* ============================================================
   V2 Fix 4 — WooCommerce checkout
   ============================================================ */
@media (max-width: 768px) {
  .woocommerce-checkout form.checkout {
    display: block !important;
    width: 100% !important;
  }
  .woocommerce-checkout .col2-set,
  .woocommerce-checkout .col2-set .col-1,
  .woocommerce-checkout .col2-set .col-2 {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin: 0 0 20px !important;
    padding: 0 !important;
  }
  .woocommerce-checkout #customer_details,
  .woocommerce-checkout #order_review_heading,
  .woocommerce-checkout #order_review {
    width: 100% !important;
    float: none !important;
  }
  .woocommerce-checkout form .form-row {
    width: 100% !important;
    float: none !important;
    margin-bottom: 12px !important;
  }
  .woocommerce-checkout form .form-row-first,
  .woocommerce-checkout form .form-row-last {
    width: 100% !important;
  }
  .woocommerce-checkout form .form-row input.input-text,
  .woocommerce-checkout form .form-row textarea,
  .woocommerce-checkout form .form-row select,
  .woocommerce-checkout form .select2-container {
    width: 100% !important;
    box-sizing: border-box !important;
    min-height: 44px !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
  }
  .woocommerce-checkout #order_review table.shop_table {
    width: 100% !important;
    font-size: 13px !important;
  }
  .woocommerce-checkout #payment {
    width: 100% !important;
  }
  .woocommerce-checkout #place_order {
    width: 100% !important;
    padding: 16px !important;
    font-size: 14px !important;
  }
}

/* ============================================================
   V2 Fix 5 — Account / Login form (My Account page)
   Inputs were unstyled/narrow — make them full-width with proper height.
   ============================================================ */
@media (max-width: 768px) {
  .woocommerce-account .woocommerce,
  .woocommerce-account .u-columns {
    width: 100% !important;
    max-width: 100% !important;
  }
  .woocommerce-account .u-column1,
  .woocommerce-account .u-column2,
  .woocommerce form.login,
  .woocommerce form.register,
  .woocommerce form.lost_reset_password {
    width: 100% !important;
    float: none !important;
    box-sizing: border-box !important;
    padding: 20px !important;
  }
  .woocommerce form .form-row {
    width: 100% !important;
    margin-bottom: 14px !important;
  }
  .woocommerce form input.input-text,
  .woocommerce form .input-text {
    width: 100% !important;
    box-sizing: border-box !important;
    min-height: 44px !important;
    padding: 10px 14px !important;
    background: rgba(0,0,0,0.4) !important;
    border: 1px solid rgba(212, 175, 55, 0.3) !important;
    color: #f5f5f5 !important;
    font-size: 14px !important;
    border-radius: 4px !important;
  }
  .woocommerce form input.input-text:focus,
  .woocommerce form .input-text:focus {
    border-color: #D4AF37 !important;
    outline: none !important;
  }
  .woocommerce form button[type="submit"],
  .woocommerce-MyAccount-navigation ul li a {
    width: 100% !important;
    text-align: left !important;
  }
  .woocommerce form button[type="submit"] {
    text-align: center !important;
    min-height: 48px !important;
    margin-top: 8px !important;
  }

  /* Account dashboard tabs stack vertically */
  .woocommerce-account .woocommerce-MyAccount-navigation {
    width: 100% !important;
    float: none !important;
    margin-bottom: 20px !important;
  }
  .woocommerce-account .woocommerce-MyAccount-content {
    width: 100% !important;
    float: none !important;
  }
}

/* ============================================================
   V2 Fix 6 — Generic forms (contact, B2B, comments)
   ============================================================ */
@media (max-width: 768px) {
  .wpcf7-form,
  .vp-b2b-form,
  .vp-contact-form,
  form#commentform {
    width: 100% !important;
    max-width: 100% !important;
  }
  .wpcf7-form p,
  .vp-form-row,
  .comment-form-author,
  .comment-form-email,
  .comment-form-comment,
  .comment-form-url {
    width: 100% !important;
    margin-bottom: 14px !important;
  }
  .wpcf7-form input[type="text"],
  .wpcf7-form input[type="email"],
  .wpcf7-form input[type="tel"],
  .wpcf7-form input[type="url"],
  .wpcf7-form input[type="number"],
  .wpcf7-form textarea,
  .wpcf7-form select,
  .vp-b2b-form input,
  .vp-b2b-form textarea,
  .vp-b2b-form select,
  form#commentform input,
  form#commentform textarea {
    width: 100% !important;
    box-sizing: border-box !important;
    min-height: 44px !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
  }
  .wpcf7-form textarea,
  .vp-b2b-form textarea,
  form#commentform textarea {
    min-height: 100px !important;
  }
  .wpcf7-form input[type="submit"],
  .vp-b2b-form button[type="submit"],
  form#commentform input[type="submit"] {
    width: 100% !important;
    min-height: 48px !important;
  }
}

/* ============================================================
   V2 Fix 7 — Single product page (WooCommerce)
   Stack gallery above summary, fix variant/tier buttons.
   ============================================================ */
@media (max-width: 768px) {
  .single-product div.product,
  .vp-single-product {
    display: block !important;
    width: 100% !important;
  }
  .single-product .woocommerce-product-gallery,
  .vp-product-gallery {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin: 0 0 20px !important;
  }
  .single-product .summary.entry-summary,
  .vp-product-summary {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin: 0 !important;
  }
  .single-product .vp-tier-picker,
  .single-product .vp-variants,
  .vp-product-tiers {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .single-product .vp-tier-btn,
  .single-product .vp-variant-btn {
    flex: 1 1 calc(50% - 4px) !important;
    min-height: 44px !important;
    padding: 10px !important;
    font-size: 13px !important;
  }
  .single-product .single_add_to_cart_button,
  .single-product .vp-add-to-cart {
    width: 100% !important;
    min-height: 48px !important;
    font-size: 14px !important;
  }
  .single-product .quantity input.qty {
    width: 70px !important;
    min-height: 44px !important;
    text-align: center !important;
  }
  /* Tabs stack */
  .single-product .woocommerce-tabs ul.tabs {
    display: flex !important;
    flex-direction: column !important;
    border: 0 !important;
  }
  .single-product .woocommerce-tabs ul.tabs li {
    width: 100% !important;
    margin: 0 0 4px !important;
    border-radius: 0 !important;
  }
  /* Related products grid */
  .single-product .related.products ul.products,
  .single-product .vp-related-products {
    grid-template-columns: 1fr 1fr !important;
    display: grid !important;
    gap: 12px !important;
  }
  /* Sticky ATC bar safety */
  .vp-sticky-atc,
  .vp-product-sticky {
    padding: 10px 12px !important;
    gap: 8px !important;
  }
}

@media (max-width: 480px) {
  .single-product .related.products ul.products {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* ============================================================
   V2 Fix 8 — Shop archive (peptidy/, categories)
   Force 2-col grid + remove WC default float layout.
   ============================================================ */
@media (max-width: 768px) {
  .woocommerce ul.products,
  .post-type-archive-product ul.products,
  .tax-product_cat ul.products {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    padding: 0 12px !important;
    margin: 0 !important;
    list-style: none !important;
  }
  .woocommerce ul.products li.product {
    width: 100% !important;
    margin: 0 !important;
    padding: 10px 8px !important;
    float: none !important;
    clear: none !important;
    box-sizing: border-box !important;
  }
  /* Shop sidebar / filters */
  .woocommerce-page .sidebar,
  .woocommerce .widget-area {
    width: 100% !important;
    float: none !important;
    margin-bottom: 20px !important;
  }
  /* Shop result count + ordering — stack */
  .woocommerce .woocommerce-result-count,
  .woocommerce .woocommerce-ordering {
    width: 100% !important;
    float: none !important;
    margin: 0 0 12px !important;
  }
  .woocommerce .woocommerce-ordering select {
    width: 100% !important;
    min-height: 44px !important;
  }
}

/* ============================================================
   V2 Fix 9 — FAQ accordions (full-width safe)
   ============================================================ */
@media (max-width: 768px) {
  .vp-faq-item,
  .vp-accordion-item {
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .vp-faq-q,
  .vp-accordion-header,
  button.vp-faq-toggle {
    width: 100% !important;
    text-align: left !important;
    padding: 14px 16px !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    box-sizing: border-box !important;
    word-wrap: break-word !important;
    overflow-wrap: anywhere !important;
    white-space: normal !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }
  .vp-faq-caret,
  .vp-accordion-icon {
    flex-shrink: 0 !important;
    margin-top: 2px !important;
  }
  .vp-faq-a,
  .vp-accordion-content {
    padding: 0 16px 14px !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }
}

/* ============================================================
   V2 Fix 10 — Calculator page
   ============================================================ */
@media (max-width: 768px) {
  .vp-calc-card,
  .vp-calculator-wrap {
    padding: 20px 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .vp-calc-form,
  .vp-calculator-form {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    width: 100% !important;
  }
  .vp-calc-form input,
  .vp-calc-form select,
  .vp-calculator-form input,
  .vp-calculator-form select {
    width: 100% !important;
    box-sizing: border-box !important;
    min-height: 44px !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
  }
  .vp-calc-result,
  .vp-calculator-result {
    width: 100% !important;
    margin-top: 16px !important;
    padding: 16px !important;
  }
  /* Calculator dosing pair row stacks */
  .vp-calc-row,
  .vp-calc-pair {
    flex-direction: column !important;
    width: 100% !important;
  }
}

/* ============================================================
   V2 Fix 11 — B2B page form + content blocks
   ============================================================ */
@media (max-width: 768px) {
  .vp-b2b-hero,
  .vp-b2b-content,
  .vp-b2b-wrap {
    padding: 24px 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .vp-b2b-grid,
  .vp-b2b-benefits {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .vp-b2b-card {
    padding: 20px !important;
  }
}

/* ============================================================
   V2 Fix 12 — Contact page (info blocks + form)
   ============================================================ */
@media (max-width: 768px) {
  .vp-contact-wrap,
  .vp-contact-grid {
    display: block !important;
    width: 100% !important;
  }
  .vp-contact-info,
  .vp-contact-form {
    width: 100% !important;
    margin: 0 0 24px !important;
    padding: 20px 16px !important;
    box-sizing: border-box !important;
  }
  .vp-contact-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
  }
}

/* ============================================================
   V2 Fix 13 — Long-form content pages (VOP, GDPR, shipping, COA)
   Reading container + headings + lists.
   ============================================================ */
@media (max-width: 768px) {
  .vp-legal-wrap,
  .vp-page-content,
  .entry-content {
    padding: 20px 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .vp-page-content h1,
  .entry-content h1 {
    font-size: 26px !important;
    line-height: 1.2 !important;
  }
  .vp-page-content h2,
  .entry-content h2 {
    font-size: 20px !important;
    line-height: 1.25 !important;
    margin-top: 24px !important;
  }
  .vp-page-content h3,
  .entry-content h3 {
    font-size: 17px !important;
    margin-top: 18px !important;
  }
  .vp-page-content p,
  .entry-content p,
  .vp-page-content li,
  .entry-content li {
    font-size: 14px !important;
    line-height: 1.6 !important;
  }
  .vp-page-content ul,
  .vp-page-content ol,
  .entry-content ul,
  .entry-content ol {
    padding-left: 20px !important;
  }
  /* Tables on legal pages — horizontal scroll wrapper */
  .vp-page-content table,
  .entry-content table {
    display: block !important;
    overflow-x: auto !important;
    max-width: 100% !important;
    font-size: 12px !important;
  }
  /* Pre/code blocks — wrap */
  .vp-page-content pre,
  .entry-content pre {
    white-space: pre-wrap !important;
    word-wrap: break-word !important;
    font-size: 12px !important;
  }
}

/* ============================================================
   V2 Fix 14 — Quiz (re-confirm stack & sizing)
   ============================================================ */
@media (max-width: 768px) {
  .vp-quiz-wrap,
  .vp-quiz-container {
    padding: 20px 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .vp-quiz-options,
  .vp-quiz-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .vp-quiz-opt,
  .vp-quiz-option {
    min-height: 56px !important;
    padding: 14px 16px !important;
    font-size: 14px !important;
    text-align: left !important;
  }
  .vp-quiz-nav,
  .vp-quiz-actions {
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
  }
  .vp-quiz-nav button,
  .vp-quiz-actions button {
    width: 100% !important;
  }
  .vp-quiz-result-card,
  .vp-quiz-result {
    flex-direction: column !important;
    text-align: center !important;
  }
}

/* ============================================================
   V2 Fix 15 — Word-break safety for long Slovak words / URLs
   Prevents headings/links from creating overflow.
   ============================================================ */
@media (max-width: 768px) {
  h1, h2, h3, h4, h5, h6,
  .vp-hero h1, .vp-hero h2,
  a, p, li, span, td, th {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }
  /* Long unbreakable strings (URLs, emails, hashes) */
  a[href^="http"],
  a[href^="mailto"],
  code, pre, kbd {
    overflow-wrap: anywhere !important;
  }
  /* Images — never escape parent */
  img,
  picture,
  video,
  iframe {
    max-width: 100% !important;
    height: auto !important;
  }
  /* Fixed-width legacy iframes (maps, embeds) */
  iframe[width] {
    width: 100% !important;
  }
}

/* ============================================================
   V2 Fix 16 — Cookie banner: smaller footprint @ ≤480px
   Current 40vh still blocks above-the-fold. Trim to 32vh + smaller text.
   ============================================================ */
@media (max-width: 480px) {
  .vp-cookie-banner {
    max-height: 32vh !important;
    padding: 12px 14px !important;
  }
  .vp-cookie-heading {
    font-size: 11px !important;
    margin-bottom: 4px !important;
  }
  .vp-cookie-text {
    font-size: 12px !important;
    line-height: 1.4 !important;
    margin-bottom: 8px !important;
  }
  .vp-cookie-links {
    font-size: 11px !important;
    margin-bottom: 10px !important;
  }
  .vp-cookie-banner .vp-cookie-btn {
    min-height: 42px !important;
    padding: 9px 12px !important;
    font-size: 11px !important;
  }
}

/* ============================================================
   V2 Fix 17 — Footer link grid (compact spacing on phone)
   ============================================================ */
@media (max-width: 480px) {
  .vp-footer-col h4,
  .vp-footer-col h5 {
    font-size: 12px !important;
    letter-spacing: 1.5px !important;
    margin-bottom: 10px !important;
  }
  .vp-footer-col a,
  .vp-footer-col li {
    font-size: 13px !important;
    line-height: 1.8 !important;
  }
  .vp-footer-bottom {
    padding: 14px 12px !important;
    font-size: 10.5px !important;
  }
}

/* ============================================================
   PHASE MOBILE V3 — Conversion polish (2026-05-25 night sweep)
   Cookie banner mobile redesign, sticky ATC, hero CTA, trust signals
   ============================================================ */

/* ============================================================
   V3 Fix 1 — Cookie banner mobile redesign (CRITICAL)
   Old: 32vh max-height, blocks above-the-fold, dual equal buttons
   New: <20vh, slide-up animation, single primary CTA, small reject link
   Goal: minimal viewport intrusion for Meta Ads conversion paths
   ============================================================ */
@media (max-width: 768px) {
  /* Slide-up from bottom with smooth animation */
  .vp-cookie-banner {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 22vh !important;
    overflow-y: auto !important;
    padding: 12px 14px 14px !important;
    background: linear-gradient(180deg, #0F0F0F 0%, #050505 100%) !important;
    border: 0 !important;
    border-top: 1px solid #D4AF37 !important;
    box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.7) !important;
    border-radius: 12px 12px 0 0 !important;
    transform: translateY(100%);
    animation: vpCookieSlideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1) 0.5s forwards;
    z-index: 9998 !important;
  }
  @keyframes vpCookieSlideUp {
    to { transform: translateY(0); }
  }

  /* Compact heading */
  .vp-cookie-banner .vp-cookie-heading {
    font-size: 12px !important;
    margin: 0 0 4px !important;
    color: #D4AF37 !important;
    letter-spacing: 0.5px !important;
  }

  /* Tight text */
  .vp-cookie-banner .vp-cookie-text {
    font-size: 11.5px !important;
    line-height: 1.35 !important;
    margin: 0 0 8px !important;
    color: #D4D4D4 !important;
  }

  /* Inline links row */
  .vp-cookie-banner .vp-cookie-links {
    font-size: 10.5px !important;
    margin: 0 0 8px !important;
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
    color: #8A8076 !important;
  }
  .vp-cookie-banner .vp-cookie-link {
    font-size: 10.5px !important;
    color: #C9A055 !important;
    text-decoration: underline !important;
    padding: 0 !important;
    min-height: 0 !important;
    background: transparent !important;
    border: 0 !important;
  }
  .vp-cookie-banner .vp-cookie-sep { color: #4A4036 !important; }

  /* Buttons row — Accept primary fills, Reject inline ghost */
  .vp-cookie-banner .vp-cookie-actions {
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    align-items: stretch !important;
  }
  .vp-cookie-banner .vp-cookie-btn-primary {
    flex: 2 1 0 !important;
    background: #D4AF37 !important;
    color: #0A0A0A !important;
    border: 1px solid #D4AF37 !important;
    font-weight: 700 !important;
    min-height: 42px !important;
    padding: 10px !important;
    font-size: 12px !important;
    letter-spacing: 0.5px !important;
    border-radius: 6px !important;
    text-transform: uppercase !important;
  }
  .vp-cookie-banner .vp-cookie-btn-ghost {
    flex: 1 1 0 !important;
    background: transparent !important;
    color: #C9A055 !important;
    border: 1px solid rgba(212, 175, 55, 0.35) !important;
    font-weight: 500 !important;
    min-height: 42px !important;
    padding: 10px 8px !important;
    font-size: 11px !important;
    border-radius: 6px !important;
  }
}

/* Tiny phones — shrink further */
@media (max-width: 380px) {
  .vp-cookie-banner {
    max-height: 26vh !important;
    padding: 10px 12px 12px !important;
  }
  .vp-cookie-banner .vp-cookie-text { font-size: 11px !important; }
  .vp-cookie-banner .vp-cookie-btn-primary { font-size: 11px !important; }
  .vp-cookie-banner .vp-cookie-btn-ghost { font-size: 10.5px !important; }
}

/* ============================================================
   V3 Fix 2a — Sticky ATC + cookie banner coexistence (REVISED)
   UX agent flagged: sticky bar floating at bottom 187px looked broken.
   Fix: while cookie banner is visible, HIDE sticky entirely (translateY off).
   Once user dismisses cookies (body.vp-cookie-active removed), sticky shows.
   ============================================================ */
@media (max-width: 768px) {
  body.vp-cookie-active .vp-pp-sticky.show {
    transform: translateY(100%) !important;
    transition: transform 0.3s ease !important;
  }
  body:not(.vp-cookie-active) .vp-pp-sticky.show {
    bottom: 0 !important;
    transform: translateY(0) !important;
    padding-bottom: max(8px, env(safe-area-inset-bottom)) !important;
  }
  /* Back-to-top FAB stays above cookie banner when visible */
  body.vp-cookie-active .vp-pp-btt.show {
    bottom: calc(24vh + 16px) !important;
    transition: bottom 0.3s ease !important;
  }
}

/* ============================================================
   V3 Fix 2 — Sticky ATC bar (mobile bottom, conversion lift)
   When user scrolls past the main ATC button, mini sticky bar appears
   at bottom of viewport above cookie banner with price + "Pridať".
   ============================================================ */
@media (max-width: 768px) {
  .vp-sticky-atc,
  .vp-product-sticky-bar,
  .vpp-sticky-bar {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9990 !important;
    background: rgba(10, 10, 10, 0.97) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border-top: 1px solid #D4AF37 !important;
    padding: 10px 14px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.4) !important;
    transform: translateY(100%);
    transition: transform 0.3s ease;
  }
  .vp-sticky-atc.is-visible,
  .vp-product-sticky-bar.is-visible,
  .vpp-sticky-bar.is-visible,
  .vp-sticky-atc.show,
  .vp-sticky-atc[data-visible="true"] {
    transform: translateY(0);
  }
  .vp-sticky-atc .vp-sticky-info,
  .vp-sticky-atc .vp-sticky-title {
    flex: 1 1 0;
    min-width: 0;
    font-size: 13px !important;
    color: #F5F5F5 !important;
  }
  .vp-sticky-atc .vp-sticky-price {
    font-size: 15px !important;
    color: #D4AF37 !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
  }
  .vp-sticky-atc button,
  .vp-sticky-atc .vpp-sticky-btn {
    flex-shrink: 0 !important;
    background: #D4AF37 !important;
    color: #0A0A0A !important;
    border: 0 !important;
    min-height: 42px !important;
    padding: 10px 18px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    border-radius: 6px !important;
    text-transform: uppercase !important;
  }

  /* Add bottom padding to body when sticky ATC is active so it doesn't
     cover footer / last content */
  body.single-product {
    padding-bottom: 60px !important;
  }
}

/* ============================================================
   V3 Fix 3 — Above-the-fold hero CTA prominence
   Make primary CTAs visually punchy at 360-430px viewports.
   ============================================================ */
@media (max-width: 768px) {
  /* Primary hero CTA — full-width, gold, large tap */
  .vp-hero-cta,
  .vp-hero a.vp-btn-primary,
  .vp-page-hero .vp-btn-primary,
  .vp-cta-primary,
  a.vp-cta {
    display: block !important;
    width: 100% !important;
    max-width: 320px !important;
    margin: 16px auto 0 !important;
    background: linear-gradient(180deg, #E8C766 0%, #D4AF37 100%) !important;
    color: #0A0A0A !important;
    border: 0 !important;
    min-height: 52px !important;
    padding: 14px 24px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    border-radius: 6px !important;
    text-align: center !important;
    text-decoration: none !important;
    box-shadow: 0 6px 20px rgba(212, 175, 55, 0.25) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  }
  .vp-hero-cta:active,
  .vp-cta-primary:active {
    transform: scale(0.98) !important;
  }

  /* Secondary CTA — subtle outline */
  .vp-hero-cta-secondary,
  .vp-btn-secondary,
  .vp-cta-secondary {
    display: block !important;
    width: 100% !important;
    max-width: 320px !important;
    margin: 10px auto 0 !important;
    background: transparent !important;
    color: #D4AF37 !important;
    border: 1px solid rgba(212, 175, 55, 0.5) !important;
    min-height: 48px !important;
    padding: 12px 20px !important;
    font-size: 13px !important;
    letter-spacing: 0.5px !important;
    border-radius: 6px !important;
    text-align: center !important;
    text-decoration: none !important;
  }
}

/* ============================================================
   V3 Fix 4 — Trust badges + RUO badges visibility on mobile
   Make trust signals (Doprava zdarma, COA dostupné, RUO) more prominent
   ============================================================ */
@media (max-width: 768px) {
  /* Announce bar = top trust signal — emphasize it */
  .vp-announce,
  .vp-announcement-bar {
    background: linear-gradient(90deg, #1a1408 0%, #0A0A0A 100%) !important;
    border-bottom: 1px solid rgba(212, 175, 55, 0.3) !important;
    color: #D4AF37 !important;
    font-weight: 600 !important;
  }

  /* RUO badges on products — slightly larger, clearer */
  .vp-product-ruo,
  .vp-ruo-badge {
    font-size: 9.5px !important;
    padding: 3px 7px !important;
    letter-spacing: 1px !important;
    font-weight: 600 !important;
    background: rgba(212, 175, 55, 0.95) !important;
    color: #0A0A0A !important;
    border-radius: 2px !important;
  }

  /* Trust row near hero */
  .vp-trust-row,
  .vp-trust-badges,
  .vp-page-trust {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 12px 16px !important;
    font-size: 11px !important;
    letter-spacing: 0.5px !important;
  }
  .vp-trust-badge,
  .vp-trust-item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 11px !important;
  }
}

/* ============================================================
   V3 Fix 5 — Sticky header hide-on-scroll-down for content space
   Optional micro-interaction: header slides up when user scrolls down,
   reappears on scroll up. Saves screen real estate during content reads.
   Only active if header has data-scroll-hide attribute set by JS.
   ============================================================ */
@media (max-width: 768px) {
  .vp-header.is-hidden-scroll {
    transform: translateY(-100%);
    transition: transform 0.3s ease;
  }
  .vp-header {
    transition: transform 0.3s ease;
  }
}

/* ============================================================
   V3 Fix 6 — Image loading optimizations (Cumulative Layout Shift)
   Reserve aspect-ratio for images so they don't reflow on load.
   ============================================================ */
@media (max-width: 768px) {
  /* Product card images get fixed aspect ratio */
  .vp-product-card .vp-product-image,
  .vp-product-card .vp-product-img-wrap,
  .woocommerce ul.products li.product .attachment-woocommerce_thumbnail {
    aspect-ratio: 1 / 1 !important;
    overflow: hidden !important;
    background: rgba(10, 10, 10, 0.5) !important;
  }

  /* Hero images */
  .vp-hero-image,
  .vp-page-hero img {
    aspect-ratio: 16 / 9 !important;
    object-fit: cover !important;
  }

  /* Lazy-load fade-in (when loading="lazy" used) */
  img[loading="lazy"] {
    transition: opacity 0.3s ease;
  }
  img[loading="lazy"]:not([data-loaded]) {
    opacity: 0.7;
  }
}

/* ============================================================
   V3 Fix 7 — Tap target enforcement on inline links
   Make sure every link in nav / lists is at least 36px tall
   ============================================================ */
@media (max-width: 768px) {
  .vp-mobile-nav-link,
  .vp-mobile-submenu a,
  .vp-footer-col a,
  .vp-nav-link {
    min-height: 36px !important;
    display: flex !important;
    align-items: center !important;
  }
}

/* ============================================================
   PHASE MOBILE V3 PART 2 — UX audit fixes (2026-05-25 night sweep #2)
   Findings from mobile UX heuristic audit (30 items)
   ============================================================ */

/* ============================================================
   V3.2 Fix A — Touch target enforcement WCAG 2.5.5
   UX#8,9,10,11: header logo 175x15, account 36x30, cart 40x40,
   hamburger 0x0 (mega-toggle) — all sub-44px tap targets
   ============================================================ */
@media (max-width: 1024px) {
  .vp-mobile-logo {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 44px !important;
    padding: 12px 8px !important;
  }
  .vp-header-btn,
  .vp-account-link,
  .vp-cart-link,
  .vp-search-toggle {
    min-width: 44px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .vp-mega-toggle {
    width: 44px !important;
    height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  /* Cart badge offset adjustment after enlarging cart icon */
  .vp-cart-link .vp-cart-count {
    top: 4px !important;
    right: 4px !important;
  }
}

/* ============================================================
   V3.2 Fix B — Variation pill active contrast (UX#12)
   Light gold on translucent gold = 1.52× — fail
   Solid gold bg + dark text for active state
   ============================================================ */
@media (max-width: 1024px) {
  .vp-pp-vbtn,
  .vpp-var-btn {
    border: 1px solid rgba(212, 175, 55, 0.35) !important;
    color: #D4AF37 !important;
    background: transparent !important;
  }
  .vp-pp-vbtn.active,
  .vp-pp-vbtn[aria-pressed="true"],
  .vpp-var-btn.active,
  .vpp-var-btn[aria-pressed="true"] {
    background: #D4AF37 !important;
    color: #0A0A0A !important;
    border-color: #D4AF37 !important;
    font-weight: 700 !important;
  }

  /* Bulk-buy tile active state (UX#18) */
  .vp-pp-bulk-tile.is-active,
  .vp-pp-bulk-tile[aria-pressed="true"] {
    border: 2px solid #D4AF37 !important;
    background: rgba(212, 175, 55, 0.08) !important;
    box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.4) !important;
  }
  .vp-pp-bulk-tile.is-active .vp-pp-bulk-check,
  .vp-pp-bulk-tile[aria-pressed="true"] .vp-pp-bulk-check {
    font-size: 22px !important;
  }
}

/* ============================================================
   V3.2 Fix C — Calculator legal disclaimer contrast (UX#16)
   Gold on near-invisible gold tint = 1.00× — fail
   ============================================================ */
.vp-calc-disclaimer,
.vp-calculator-disclaimer,
.vp-calc-card .vp-calc-warning {
  color: #E8C98A !important;
  background: rgba(201, 168, 76, 0.06) !important;
  border-left: 3px solid #D4AF37 !important;
  padding: 12px 14px !important;
}

/* ============================================================
   V3.2 Fix D — Footer copyright contrast (UX#13)
   Was rgb(68,68,68) on #0A0A0A = 2.03× (fails AA 4.5×)
   ============================================================ */
.vp-footer-copy,
.vp-footer-legal,
.vp-footer-legal-text,
.vp-footer-bottom small {
  color: rgba(255, 255, 255, 0.6) !important;
}

/* ============================================================
   V3.2 Fix E — Login "Zapamätať si ma" checkbox (UX#19)
   Default white square breaks dark theme
   ============================================================ */
.woocommerce-form-login__rememberme input[type="checkbox"],
form.login input[type="checkbox"],
form.register input[type="checkbox"],
form.lost_reset_password input[type="checkbox"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 22px !important;
  height: 22px !important;
  border: 2px solid #D4AF37 !important;
  background: transparent !important;
  border-radius: 4px !important;
  vertical-align: middle !important;
  cursor: pointer !important;
  margin-right: 8px !important;
  position: relative !important;
  display: inline-block !important;
}
.woocommerce-form-login__rememberme input[type="checkbox"]:checked,
form.login input[type="checkbox"]:checked {
  background: #D4AF37 !important;
}
.woocommerce-form-login__rememberme input[type="checkbox"]:checked::after,
form.login input[type="checkbox"]:checked::after {
  content: '✓' !important;
  color: #0A0A0A !important;
  font-weight: 700 !important;
  display: block !important;
  text-align: center !important;
  line-height: 18px !important;
  font-size: 14px !important;
}

/* ============================================================
   V3.2 Fix F — Skip link color + WCAG compliance (UX#28)
   Was magenta rgb(204,51,102) at 3.99× — fails AA
   ============================================================ */
.skip-link.screen-reader-text:focus,
.skip-link:focus {
  background: #0A0A0A !important;
  color: #D4AF37 !important;
  border: 2px solid #D4AF37 !important;
  padding: 12px 20px !important;
  z-index: 100000 !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

/* ============================================================
   V3.2 Fix G — Global :focus-visible indicators (UX#27)
   Required for WCAG 2.4.7 — keyboard nav focus visibility
   ============================================================ */
.button:focus-visible,
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.vp-btn:focus-visible,
.vp-pp-vbtn:focus-visible {
  outline: 2px solid #D4AF37 !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.25) !important;
}

/* ============================================================
   V3.2 Fix H — Top promo strip nowrap (UX#22)
   Wraps to 2 lines on 393px wasting vertical space
   ============================================================ */
@media (max-width: 768px) {
  .vp-announce,
  .vp-top-promo,
  .vp-announcement-bar {
    font-size: 11px !important;
    padding: 6px 12px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.4 !important;
  }
}

/* ============================================================
   V3.2 Fix I — Related products title wrap (UX#23)
   Allow 3 lines instead of truncating mid-word
   ============================================================ */
@media (max-width: 768px) {
  .related .product .woocommerce-loop-product__title,
  .vp-related-products .vp-product-title,
  .vp-related-products .vp-product-name {
    -webkit-line-clamp: 3 !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
}

/* ============================================================
   V3.2 Fix J — B2B card body text contrast (UX#17)
   Was muted gray on dark card — readability for B2B long copy
   ============================================================ */
.vp-b2b-card p,
.vp-b2b-card li,
.vp-b2b-content p {
  color: rgba(255, 255, 255, 0.82) !important;
}

/* ============================================================
   V3.2 Fix K — Footer copyright + legal text alignment
   ============================================================ */
@media (max-width: 480px) {
  .vp-footer-bottom {
    color: rgba(255, 255, 255, 0.6) !important;
  }
  .vp-footer-bottom a {
    color: rgba(255, 255, 255, 0.75) !important;
  }
}