/*
 * AMUI Layout Fixes dla Astra + WooCommerce
 * Przeniesione z Dodatkowego CSS do pluginu.
 * Ten plik ładuje się PO głównym CSS, więc nadpisuje style motywu/Astry/WooCommerce.
 */

/* ===== 1. GLOBALNE TŁO – jedna warstwa za całą stroną ===== */

:root {
  --amui-bg: #ffffff;
}

html,
body {
  min-height: 100%;
  height: auto;
  background: #ffffff !important;
}

body {
  min-height: 100%;
  position: relative;
  background: transparent !important;
}

body.woocommerce,
body.woocommerce-page,
body.archive.tax-product_cat,
body.post-type-archive-product,
body.tax-product_tag {
  background: transparent !important;
  background-color: transparent !important;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: #ffffff;
}

/* ===== 2. ASTRA – kontenery bez własnego, białego tła ===== */

.site,
#page,
.ast-container,
.site-content,
.ast-separate-container,
.ast-plain-container,
.ast-page-builder-template,
.ast-single-post,
.ast-archive-post,
.ast-woocommerce-container,
.ast-separate-container .ast-article-single,
.ast-separate-container .ast-article-post {
  background: transparent !important;
  background-color: transparent !important;
}

/* ===== 3. GÓRA I DÓŁ – nagłówek i stopka też przepuszczają tło ===== */

.site-header,
.main-header-bar,
.ast-primary-header-bar,
.site-footer,
.ast-footer-bar,
.ast-builder-grid-row-container,
.ast-header-break-point .main-header-bar,
.ast-header-break-point .ast-primary-header-bar {
  background: transparent !important;
  background-color: transparent !important;
}

/* ===== 4. Astra/Woo: miniatury produktu w jednej linii ===== */

.woocommerce div.product div.images .flex-control-thumbs {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  gap: 8px;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 6px;
}

.woocommerce div.product div.images .flex-control-thumbs li {
  flex: 0 0 auto !important;
  float: none !important;
  width: auto !important;
  margin: 0 !important;
}

.woocommerce div.product div.images .flex-control-thumbs li img {
  width: 80px;
  height: auto;
  display: block;
}

/* Stały rozmiar miniatur */
.woocommerce div.product div.images .flex-control-thumbs li {
  width: 80px !important;
  height: 80px !important;
  flex: 0 0 80px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #ffffff;
  border-radius: 10px;
}

/* Obrazek zawsze tej samej wielkości w kafelku */
.woocommerce div.product div.images .flex-control-thumbs li img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
  display: block;
}

/* ===== 5. RAMKA głównego zdjęcia – kwadrat 1:1 jak marketplace ===== */

.woocommerce.single-product div.product div.images .woocommerce-product-gallery,
.woocommerce.single-product div.product div.images .woocommerce-product-gallery .flex-viewport,
.woocommerce.single-product div.product div.images .woocommerce-product-gallery__wrapper,
.woocommerce.single-product div.product div.images .woocommerce-product-gallery__image,
.woocommerce.single-product div.product div.images figure.woocommerce-product-gallery__image {
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
}

/* Limit wysokości na małych ekranach */
.woocommerce.single-product div.product div.images .woocommerce-product-gallery .flex-viewport {
  max-height: 70vh;
}

/* Wyśrodkuj obraz w kwadracie */
.woocommerce.single-product div.product div.images .woocommerce-product-gallery__image,
.woocommerce.single-product div.product div.images figure.woocommerce-product-gallery__image {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #ffffff !important;
}

/* Obrazek ma się zmieścić w kwadracie bez przycinania */
.woocommerce.single-product div.product div.images .woocommerce-product-gallery__image img,
.woocommerce.single-product div.product div.images figure.woocommerce-product-gallery__image img,
.woocommerce.single-product div.product div.images img.wp-post-image {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
}

/* Ukryj produkty powiązane na karcie produktu */
.related.products {
  display: none !important;
}

/* ===== 6. LISTA PRODUKTÓW – stałe miniatury + responsywność ===== */

/* Obrazek w siatce zawsze jako kwadrat i ten sam rozmiar w obrębie kafelka */
.woocommerce ul.products li.product a img {
  width: 100% !important;
  aspect-ratio: 1 / 1;
  height: auto !important;
  object-fit: contain;
  background: #ffffff;
}

/* Desktop / tablet: 4 kolumny */
@media (min-width: 992px) {
  .woocommerce ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 28px !important;
  }

  .woocommerce ul.products li.product {
    width: auto !important;
    margin: 0 !important;
  }
}

/* Mobile: 2 kolumny + mniejsze odstępy */
@media (max-width: 991px) {
  .woocommerce ul.products {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }

  .woocommerce ul.products li.product {
    width: auto !important;
    margin: 0 !important;
  }
}

/* Bardzo małe ekrany: 1 kolumna */
@media (max-width: 420px) {
  .woocommerce ul.products {
    grid-template-columns: 1fr !important;
  }
}

/* ===== 7. Lista produktów: ukryj kategorię pod miniaturą ===== */

.woocommerce ul.products li.product .woocommerce-loop-product__category,
.woocommerce ul.products li.product .ast-woo-product-category,
.woocommerce ul.products li.product .posted_in,
.woocommerce ul.products li.product .product-category {
  display: none !important;
}

/* ===== 8. Karta produktu: ukryj kategorie i metadane produktu ===== */

.woocommerce.single-product .entry-summary .product_meta,
.woocommerce.single-product .entry-summary .posted_in,
.woocommerce.single-product .entry-summary .posted_in a,
.woocommerce.single-product .entry-summary .ast-woo-product-category,
.woocommerce.single-product .entry-summary .ast-single-product-category,
.woocommerce.single-product .ast-single-product-category,
.woocommerce.single-product .ast-woo-product-category {
  display: none !important;
}

/* Ukryj linię „Kategoria: ...” obok SKU */
.woocommerce.single-product .product_meta .posted_in,
.woocommerce.single-product .product_meta .posted_in * {
  display: none !important;
}

/* Ukryj link kategorii wstawiony nad tytułem, zaraz po breadcrumb */
.woocommerce.single-product .woocommerce-breadcrumb + a,
.woocommerce.single-product .woocommerce-breadcrumb + span,
.woocommerce.single-product .woocommerce-breadcrumb + div {
  display: none !important;
}