/* =============================================================
   VALHALLA PEPTIDES — Universal Responsive Fixes
   Owner: CC#1 (autonomous QA + responsive sweep)
   Date: 2026-05-24
   Scope: Cross-page responsive overrides, viewport 375 -> 1920

   NOT TOUCHED: header (CC#2), footer brand grid (CC#2), trust-line
   pills (CC#2), homepage hero (Blok B). Append-only respected for
   Blok F/G/H CSS files via SELECTOR ISOLATION (no @import collision).
   ============================================================= */

/* ============ Root viewport safety ============ */
html {
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
}
body {
    overflow-x: hidden;
    min-width: 320px;
}
*, *::before, *::after {
    box-sizing: border-box;
}
img, video, iframe {
    max-width: 100%;
    height: auto;
}

/* ============ CART DRAWER / MINI-CART (legacy + WC Blocks) ============ */
.vp-cart-drawer,
.cart-drawer,
.mini-cart-drawer,
.side-cart,
.wcd-cart-drawer,
.xoo-cp-modal,
.cartflows-mini-cart,
.woocommerce-mini-cart,
.widget_shopping_cart,
.wc-block-mini-cart__drawer {
    box-sizing: border-box;
}

@media (min-width: 769px) {
    .vp-cart-drawer,
    .cart-drawer,
    .mini-cart-drawer,
    .side-cart,
    .wcd-cart-drawer,
    .xoo-cp-modal,
    .cartflows-mini-cart,
    .wc-block-mini-cart__drawer {
        width: 420px !important;
        max-width: 420px !important;
        right: 0 !important;
        left: auto !important;
    }

    .vp-cart-drawer .product-name,
    .cart-drawer .product-name,
    .mini-cart-drawer .product-name,
    .vp-cart-drawer .woocommerce-mini-cart-item a,
    .woocommerce-mini-cart-item .product-title,
    .mini_cart_item a:not(.remove),
    .wc-block-cart-item__product-name {
        white-space: normal !important;
        text-overflow: clip !important;
        overflow: visible !important;
        word-wrap: break-word;
        font-size: 0.875rem !important;
        line-height: 1.4;
    }

    .woocommerce-mini-cart-item img,
    .mini_cart_item img,
    .wc-block-cart-item__image img {
        max-width: 64px !important;
        height: auto;
    }
}

@media (max-width: 768px) {
    .vp-cart-drawer,
    .cart-drawer,
    .mini-cart-drawer,
    .side-cart,
    .wcd-cart-drawer,
    .xoo-cp-modal,
    .cartflows-mini-cart,
    .wc-block-mini-cart__drawer {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ============ Generic container widths ============ */
@media (max-width: 1024px) {
    .container,
    .elementor-container,
    .woocommerce .container,
    .wc-block-grid,
    .wp-block-woocommerce-cart,
    .wp-block-woocommerce-checkout {
        max-width: 100% !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}

/* ============ Touch targets (WCAG 2.5.5) ============ */
@media (max-width: 1024px) {
    button:not(.vp-header-btn):not(.vp-hamburger),
    .button,
    .btn,
    a.btn,
    input[type="submit"],
    input[type="button"],
    .woocommerce a.button,
    .woocommerce button.button,
    .wc-block-components-button,
    .wc-block-components-button__text {
        min-height: 44px;
        min-width: 44px;
        padding: 0.75rem 1.25rem;
        font-size: 0.95rem;
    }
}

/* ============ WooCommerce archive (kategoria) responsive ============ */
@media (max-width: 1024px) {
    .woocommerce ul.products,
    ul.products.columns-3,
    ul.products.columns-4 {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
    }
    .woocommerce ul.products li.product {
        width: 100% !important;
        float: none !important;
        margin: 0 !important;
    }
}

@media (max-width: 480px) {
    .woocommerce ul.products,
    ul.products.columns-3,
    ul.products.columns-4 {
        grid-template-columns: 1fr !important;
    }
}

/* ============ Product card responsive ============ */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2 {
    font-size: 1rem !important;
    line-height: 1.3 !important;
    min-height: 2.6em;
    margin: 0.5rem 0;
}

.woocommerce ul.products li.product .price {
    font-size: 1.1rem !important;
}

/* ============ Single product responsive
   (NEDOTYKA .vp-feature-pill, .vp-trust-line, .vp-pp-labtn — CC#2 zona)
   ============ */
@media (max-width: 1024px) {
    .single-product .woocommerce-product-gallery,
    .single-product .product .images {
        width: 100% !important;
        float: none !important;
        margin-bottom: 2rem;
    }
    .single-product .summary,
    .single-product .product .summary {
        width: 100% !important;
        float: none !important;
        margin: 0 !important;
    }
}

/* vp-pp-table from single-product.php — make cells stack on small mobile */
@media (max-width: 480px) {
    .vp-pp-table td {
        padding: 10px 12px !important;
        font-size: 12px !important;
    }
}

/* ============ Cart page (legacy WC + WC Blocks) responsive ============ */
@media (max-width: 1024px) {
    /* Legacy shortcode cart */
    .woocommerce-cart-form .shop_table {
        display: block;
    }
    .woocommerce-cart-form .shop_table thead {
        display: none;
    }
    .woocommerce-cart-form .shop_table tr {
        display: block;
        margin-bottom: 1.5rem;
        padding: 1rem;
        border: 1px solid rgba(212, 175, 55, 0.15);
        border-radius: 4px;
    }
    .woocommerce-cart-form .shop_table td {
        display: flex;
        justify-content: space-between;
        padding: 0.5rem 0;
        text-align: right;
        border: 0;
    }
    .woocommerce-cart-form .shop_table td::before {
        content: attr(data-title);
        font-weight: 600;
        color: #D4AF37;
        margin-right: 1rem;
    }
    .woocommerce-cart-form .shop_table td.product-remove,
    .woocommerce-cart-form .shop_table td.product-thumbnail {
        justify-content: flex-start;
    }
    .woocommerce-cart-form .shop_table td.product-thumbnail::before {
        display: none;
    }

    .cart-collaterals,
    .cart-collaterals .cart_totals {
        width: 100% !important;
        float: none !important;
    }

    /* WC Blocks (Gutenberg) cart */
    .wp-block-woocommerce-cart {
        display: block !important;
    }
    .wp-block-woocommerce-cart .wc-block-cart__main,
    .wp-block-woocommerce-cart .wc-block-cart__sidebar {
        width: 100% !important;
        flex: 1 1 100% !important;
        max-width: 100% !important;
    }
}

/* ============ Checkout responsive (legacy + WC Blocks) ============ */
@media (max-width: 1024px) {
    .woocommerce-checkout #customer_details {
        width: 100% !important;
        float: none !important;
    }
    .woocommerce-checkout #order_review,
    .woocommerce-checkout #order_review_heading {
        width: 100% !important;
        float: none !important;
        margin-top: 2rem;
    }
    .woocommerce form .form-row {
        width: 100% !important;
        float: none !important;
        margin: 0 0 1rem 0 !important;
    }
    .woocommerce form .form-row input,
    .woocommerce form .form-row select,
    .woocommerce form .form-row textarea {
        min-height: 44px;
        font-size: 16px !important;
        padding: 0.75rem;
        width: 100% !important;
    }

    /* WC Blocks checkout */
    .wc-block-checkout,
    .wp-block-woocommerce-checkout {
        display: block !important;
    }
    .wc-block-checkout__main,
    .wc-block-checkout__sidebar,
    .wp-block-woocommerce-checkout-fields-block,
    .wp-block-woocommerce-checkout-totals-block {
        width: 100% !important;
        flex: 1 1 100% !important;
        max-width: 100% !important;
    }
    .wc-block-components-text-input input,
    .wc-block-components-text-input select,
    .wc-block-components-text-input textarea {
        min-height: 44px;
        font-size: 16px !important;
    }
}

/* ============ My Account responsive ============ */
@media (max-width: 1024px) {
    .woocommerce-account .woocommerce-MyAccount-navigation,
    .vp-account-sidebar {
        width: 100% !important;
        float: none !important;
        position: static !important;
        margin-bottom: 2rem;
    }
    .woocommerce-account .woocommerce-MyAccount-navigation ul {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem;
        list-style: none;
        padding: 0;
    }
    .woocommerce-account .woocommerce-MyAccount-navigation li {
        margin: 0;
    }
    .woocommerce-account .woocommerce-MyAccount-content,
    .vp-account-content {
        width: 100% !important;
        float: none !important;
    }
}

@media (max-width: 480px) {
    .woocommerce-account .woocommerce-MyAccount-navigation ul {
        grid-template-columns: 1fr !important;
    }
}

/* ============ Page content (O nas, Kontakt, etc.) responsive ============ */
@media (max-width: 768px) {
    .vp-page-contact-grid,
    .vp-page-shipping-grid,
    .vp-page-about-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
}

/* ============ FAQ accordion mobile ============ */
@media (max-width: 768px) {
    .vp-faq-question {
        font-size: 1rem !important;
        padding: 1rem !important;
    }
    .vp-faq-answer {
        font-size: 0.9rem !important;
        padding: 1rem !important;
    }
}

/* ============ B2B form (pre-kliniky-laboratoria) ============ */
@media (max-width: 1024px) {
    .vp-b2b-form,
    .vp-b2b-form .form-row {
        width: 100% !important;
        max-width: 100% !important;
    }
    .vp-b2b-form input,
    .vp-b2b-form select,
    .vp-b2b-form textarea {
        font-size: 16px !important;
        min-height: 44px;
        width: 100% !important;
    }
    .vp-b2b-form textarea {
        min-height: 100px;
    }
}

/* ============ Tables overflow safety ============ */
@media (max-width: 768px) {
    table:not(.vp-no-stack):not(.shop_table):not(.vp-pp-table) {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}

/* ============ Search modal mobile ============ */
@media (max-width: 768px) {
    .vp-search-modal {
        padding: 1rem !important;
    }
    .vp-search-modal input[type="search"] {
        font-size: 16px !important;
        min-height: 48px;
    }
  .vp-search-chip { min-height: 36px; padding: 8px 14px; }
  .vp-search-list--popular .vp-search-item-link { min-height: 56px; }
}

/* ============ Cookie banner mobile (APPEND only — not editing cookies.css) ============ */
@media (max-width: 480px) {
    #vpCookieBanner,
    .vp-cookie-banner {
        padding: 1rem !important;
        max-height: 80vh;
        overflow-y: auto;
    }
    .vp-cookie-banner-actions,
    .vp-cookie-actions {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }
    .vp-cookie-banner-actions button,
    .vp-cookie-actions button {
        width: 100% !important;
    }
}

/* ============ Age gate mobile ============ */
@media (max-width: 480px) {
    .vp-age-gate-content,
    .vp-age-gate__content {
        padding: 1.5rem !important;
        font-size: 0.95rem;
    }
    .vp-age-gate-actions,
    .vp-age-gate__actions {
        flex-direction: column;
        gap: 0.75rem;
    }
    .vp-age-gate-actions button,
    .vp-age-gate__actions button {
        width: 100% !important;
    }
}

/* ============ Footer responsive (NEDOTYKA brand grid — CC#2 zona) ============ */
@media (max-width: 768px) {
    .vp-footer-cols,
    .vp-footer-grid {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
        text-align: center;
    }
    .vp-company-info {
        text-align: center;
    }
}

/* ============ Forms — universal input rules mobile ============ */
@media (max-width: 1024px) {
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="password"],
    input[type="number"],
    input[type="search"],
    select,
    textarea {
        font-size: 16px !important;
        min-height: 44px;
    }
    textarea {
        min-height: 88px;
    }
}

/* ============ Calculator (peptidova-kalkulacka) responsive ============ */
@media (max-width: 768px) {
    .vp-calc,
    .vp-calc-wrap,
    .vp-calc-grid {
        grid-template-columns: 1fr !important;
        max-width: 100% !important;
        padding: 1rem !important;
    }
    .vp-calc input,
    .vp-calc select {
        width: 100% !important;
        font-size: 16px !important;
        min-height: 44px;
    }
}

/* ============ Blog (home.php) responsive ============ */
@media (max-width: 768px) {
    .vp-blog-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }
    .vp-blog-card img {
        width: 100% !important;
        height: auto !important;
    }
}

/* ============ COA listing responsive ============ */
@media (max-width: 768px) {
    .vp-coa-grid,
    .vp-coa-list {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    .vp-coa-card {
        padding: 1rem !important;
    }
}

/* ============ Print styles ============ */
@media print {
    .vp-cookie-banner,
    .vp-age-gate,
    .vp-cart-drawer,
    .vp-mobile-drawer,
    .vp-search-modal,
    .vp-announce,
    header.vp-header,
    .vp-footer {
        display: none !important;
    }
    body {
        color: #000 !important;
        background: #fff !important;
    }
}