/*
 * Mobile layout corrections:
 * - Keep Complianz UI compact and non-overlapping.
 * - Widen theme content by reducing side gutters.
 * Loaded last from functions.php.
 */

:root {
  --cmplz-safe-bottom: 0px;
}

@media (max-width: 768px) {
  :root {
    --mobile-gutter: 8px;
    --cmplz-safe-bottom: 96px;
  }

  body.woocommerce .container,
  body.post-type-archive-product .container,
  body.tax-product_cat .container,
  .container,
  .container-wide,
  body.is-woo .container.woo-page-content {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
    padding-inline: var(--mobile-gutter) !important;
  }

  .woo-archive-head {
    padding: 12px !important;
  }

  .site-content,
  body.is-woo .site-content {
    padding-bottom: calc(var(--space-7) + var(--cmplz-safe-bottom, 0px)) !important;
  }

  .single-product .related.products ul.products,
  .single-product .upsells.products ul.products,
  .single-product section.related ul.products,
  .single-product section.upsells ul.products {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  .single-product .related.products ul.products::before,
  .single-product .related.products ul.products::after,
  .single-product .upsells.products ul.products::before,
  .single-product .upsells.products ul.products::after,
  .single-product section.related ul.products::before,
  .single-product section.related ul.products::after,
  .single-product section.upsells ul.products::before,
  .single-product section.upsells ul.products::after {
    content: none !important;
    display: none !important;
  }

  .single-product .related.products ul.products li.product,
  .single-product .upsells.products ul.products li.product,
  .single-product section.related ul.products li.product,
  .single-product section.upsells ul.products li.product {
    float: none !important;
    clear: none !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    height: 100%;
    display: flex !important;
    flex-direction: column;
  }

  .single-product .related.products ul.products li.product.first,
  .single-product .related.products ul.products li.product.last,
  .single-product .upsells.products ul.products li.product.first,
  .single-product .upsells.products ul.products li.product.last,
  .single-product section.related ul.products li.product.first,
  .single-product section.related ul.products li.product.last,
  .single-product section.upsells ul.products li.product.first,
  .single-product section.upsells ul.products li.product.last {
    clear: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .single-product .related.products ul.products li.product .product-thumb,
  .single-product .upsells.products ul.products li.product .product-thumb,
  .single-product section.related ul.products li.product .product-thumb,
  .single-product section.upsells ul.products li.product .product-thumb {
    min-height: 160px !important;
    margin: 0.65rem 0.65rem 0 !important;
  }

  .single-product .related.products ul.products li.product .product-meta,
  .single-product .upsells.products ul.products li.product .product-meta,
  .single-product section.related ul.products li.product .product-meta,
  .single-product section.upsells ul.products li.product .product-meta {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .cmplz-manage-consent,
  #cmplz-manage-consent,
  a.cmplz-manage-consent,
  button.cmplz-manage-consent {
    position: fixed !important;
    left: 12px !important;
    right: auto !important;
    bottom: calc(12px + env(safe-area-inset-bottom)) !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: calc(100vw - 24px) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.35rem !important;
    margin: 0 !important;
    transform: none !important;
    padding: 11px 14px !important;
    height: auto !important;
    min-height: 44px !important;
    min-width: 44px !important;
    max-height: none !important;
    line-height: 1.2 !important;
    font-size: 13px !important;
    white-space: nowrap !important;
    border-radius: 999px !important;
    z-index: 99999 !important;
    box-sizing: border-box !important;
    touch-action: manipulation !important;
  }

  #cmplz-cookiebanner-container,
  .cmplz-cookiebanner-container {
    position: fixed !important;
    left: 10px !important;
    right: 10px !important;
    bottom: calc(12px + env(safe-area-inset-bottom)) !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    transform: none !important;
    box-sizing: border-box !important;
    z-index: 99998 !important;
  }

  #cmplz-cookiebanner-container .cmplz-cookiebanner,
  .cmplz-cookiebanner {
    position: static !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    transform: none !important;
    opacity: 1 !important;
    animation: none !important;
    transition: none !important;
  }

  .cmplz-cookiebanner .cmplz-links,
  .cmplz-cookiebanner .cmplz-buttons,
  .cmplz-cookiebanner .cmplz-footer {
    gap: 8px !important;
  }

  .cmplz-cookiebanner .cmplz-link.cookie-statement,
  .cmplz-cookiebanner .cmplz-link.privacy-statement,
  .cmplz-cookiebanner a.cmplz-link,
  .cmplz-cookiebanner .cmplz-btn,
  .cmplz-cookiebanner button.cmplz-btn {
    min-width: 44px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 12px !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    text-align: center !important;
    box-sizing: border-box !important;
    touch-action: manipulation !important;
  }

  .cmplz-cookiebanner .cmplz-link.cookie-statement,
  .cmplz-cookiebanner .cmplz-link.privacy-statement {
    justify-content: flex-start !important;
    text-align: left !important;
  }

  .cmplz-cookiebanner *,
  .cmplz-manage-consent,
  #cmplz-manage-consent,
  a.cmplz-manage-consent,
  button.cmplz-manage-consent {
    animation: none !important;
    transition: none !important;
  }

  html[data-cmplz-ui-visible="1"] .msn-contact-fab {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

@media (max-width: 420px) {
  :root {
    --mobile-gutter: 6px;
    --cmplz-safe-bottom: 92px;
  }

  .cmplz-manage-consent,
  #cmplz-manage-consent,
  a.cmplz-manage-consent,
  button.cmplz-manage-consent {
    left: 10px !important;
    bottom: calc(10px + env(safe-area-inset-bottom)) !important;
    max-width: calc(100vw - 20px) !important;
    padding: 10px 12px !important;
    font-size: 12px !important;
  }

  #cmplz-cookiebanner-container,
  .cmplz-cookiebanner-container {
    left: 8px !important;
    right: 8px !important;
    bottom: calc(10px + env(safe-area-inset-bottom)) !important;
  }

  .single-product .related.products ul.products,
  .single-product .upsells.products ul.products,
  .single-product section.related ul.products,
  .single-product section.upsells ul.products {
    grid-template-columns: 1fr !important;
  }
}