/**
* Theme Name: Udrive Child
* Description: This is a child theme of Udrive, generated by Merlin WP.
* Author: <a href="http://themeforest.net/user/theme-kalia">Theme Kalia</a>
* Template: udrive
* Version: 1.5
*/


/* =========================================================
   MOTOWIOLKA — KATALOG PRODUKTÓW: CLEAN PREMIUM + GLASS
========================================================= */

/* ===== SIATKA PRODUKTÓW ===== */
.woocommerce ul.products {
  display: flex;
  flex-wrap: wrap;
  gap: 35px !important;
  justify-content: center;
  background: #ffffff !important;
}

/* ===== KARTA PRODUKTU ===== */
.woocommerce ul.products li.product {
  background: rgba(255,255,255,0.65);          /* lekki glass */
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  border: 2px solid #F7D900;
  border-radius: 14px;

  padding: 18px;
  text-align: center;

  box-shadow: 0 6px 14px rgba(0,0,0,0.08);
  transition: .25s ease;
}

/* HOVER — LEKKIE UNIESIENIE */
.woocommerce ul.products li.product:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.14);
  border-color: #000000;
}

/* ===== ZDJĘCIA PRODUKTÓW ===== */
.woocommerce ul.products li.product img {
  border-radius: 10px;
  width: 100%;
  height: auto;
  border: 2px solid #F7D900;
  transition: .3s ease;
}

/* Lekkie powiększenie na hover */
.woocommerce ul.products li.product:hover img {
  transform: scale(1.04);
}

/* ===== TYTUŁY PRODUKTÓW ===== */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 1.25rem;
  font-weight: 800;
  color: #000000;
  text-transform: uppercase;
  margin: 15px 0 5px;
  line-height: 1.25;
}

/* ===== CENA ===== */
.woocommerce ul.products li.product .price {
  color: #000000 !important;
  font-weight: 700;
  font-size: 1.15rem;
  margin-bottom: 8px;
}

/* Cena promocyjna */
.woocommerce ul.products li.product .price ins {
  color: #F7D900 !important;
  font-weight: 900;
}

/* Przekreślona */
.woocommerce ul.products li.product .price del {
  opacity: 0.6;
}

/* ===== PRZYCISKI ===== */
.woocommerce ul.products li.product .button {
  background: #F7D900;
  color: #000000;
  font-weight: 800;
  border-radius: 8px;
  padding: 10px 16px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: .2s ease;
  margin-top: 12px;
}

.woocommerce ul.products li.product .button:hover {
  background: #000000;
  color: #F7D900;
}

/* ===== PAGINACJA ===== */
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  background: #ffffff;
  border: 2px solid #F7D900;
  color: #000000;
  border-radius: 8px;
  padding: 10px 14px;
  margin: 0 4px;
  font-weight: 600;
  transition: .2s ease;
}

.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: #F7D900;
  color: #000000;
  transform: scale(1.07);
}

/* ===== SORTOWANIE / LICZNIK ===== */
.woocommerce-result-count,
.woocommerce-ordering select {
  color: #000 !important;
}

.woocommerce-ordering select {
  border: 2px solid #F7D900;
  border-radius: 8px;
  background: #fff;
  padding: 10px;
  font-weight: 600;
}

/* ====================================================================
   MOTOWIOLKA — SINGLE PRODUCT V2 (Fix: Title, Gallery, Meta Position)
==================================================================== */

/* ---------------------------------------------
   1. DUŻY, WYRAŹNY TYTUŁ PRODUKTU
--------------------------------------------- */
.woocommerce div.product .product_title {
    display: block !important;
    font-size: 2.6rem !important;
    font-weight: 900 !important;
    color: #000 !important;
    margin-bottom: 25px !important;
    text-transform: uppercase;
    letter-spacing: .8px;
}

/* ---------------------------------------------
   2. POWIĘKSZENIE GŁÓWNEGO ZDJĘCIA PRODUKTU
--------------------------------------------- */
.woocommerce-product-gallery__wrapper img {
    width: 100% !important;
    max-width: 540px !important; /* zwiększone */
    height: auto !important;
    border-radius: 14px;
    border: 3px solid #F7D900;
    object-fit: cover !important;
}

/* ---------------------------------------------
   3. MINIATURKI – WIĘKSZE I ESTETYCZNE
--------------------------------------------- */
.flex-control-thumbs li {
    width: 100px !important;
    height: 100px !important;
    margin-right: 10px !important;
}

.flex-control-thumbs li img {
    width: 100% !important;
    height: 100% !important;
    border-radius: 10px;
    border: 2px solid #F7D900;
    object-fit: cover;
    transition: .25s ease;
}

.flex-control-thumbs li img:hover {
    transform: scale(1.06);
    border-color: #000;
}

/* ---------------------------------------------
   4. KOLUMNY — WIĘKSZY OBRAZ, ładny layout
--------------------------------------------- */
.woocommerce div.product div.images {
    width: 48% !important;
}

.woocommerce div.product div.summary {
    width: 48% !important;
}

/* ---------------------------------------------
   5. META (KATEGORIE / TAGI) — PRZENIESIENIE NA DÓŁ
--------------------------------------------- */
.product_meta {
    order: 9999 !important; /* przenosi na sam dół */
    margin-top: 35px !important;
}

/* ukrycie meta z góry */
.summary .product_meta {
    display: none !important;
}

/* pokaz meta pod opisem (w panelu zakładek) */
.woocommerce-tabs + .product_meta {
    display: block !important;
}

/* Estetyka meta sekcji na dole */
.woocommerce-tabs + .product_meta {
    background: rgba(247,217,0,0.15);
    border-left: 4px solid #F7D900;
    padding: 15px 20px;
    border-radius: 10px;
    margin-top: 40px !important;
}

.woocommerce-tabs + .product_meta a {
    color: #000 !important;
    font-weight: 700;
}

.woocommerce-tabs + .product_meta span {
    font-weight: 800;
}

/* ---------------------------------------------
   6. SZEROKA, RÓWNA SEKCJA ZDJĘĆ
--------------------------------------------- */
.woocommerce div.product .woocommerce-product-gallery {
    max-width: 100% !important;
}

/* ---------------------------------------------
   7. ODSTĘPY / UX NIE WCISKA SIĘ W PRAWĄ STRONĘ
--------------------------------------------- */
.woocommerce div.product .summary {
    padding-left: 30px !important;
}

/* ---------------------------------------------
   8. Opis produktu (główne H2) — elegancki
--------------------------------------------- */
.woocommerce-Tabs-panel h2 {
    font-size: 1.8rem !important;
    font-weight: 800;
    color: #000;
    margin-bottom: 15px;
    text-transform: uppercase;
}

/* ---------------------------------------------
   9. Mobile Fix – większe zdjęcie & czytelność
--------------------------------------------- */
@media(max-width: 768px) {

    .woocommerce div.product div.images,
    .woocommerce div.product div.summary {
        width: 100% !important;
    }

    .woocommerce div.product div.summary {
        padding-left: 0 !important;
    }

    .woocommerce-product-gallery__wrapper img {
        max-width: 100% !important;
    }

    .flex-control-thumbs li {
        width: 80px !important;
        height: 80px !important;
    }
}