/*
 Theme Name:   Woodmart Child
 Description:  Woodmart Child Theme
 Author:       Zyskowni.pl
 Author URI:   https://zyskowni.pl
 Template:     woodmart
 Version:      1.0.0
 Text Domain:  woodmart
*/
@media (min-width: 1300px) {
    .product_list_widget {
        display: flex;
        gap: 20px;
    }
    .product_list_widget>li {
        border-bottom: 0 !important;
    }
}
.widget-product-wrap {
    position: relative;
}
.widget-product-wrap .product-labels {
    position: absolute;
    top: -10px;
    left: -10px;
}
.widget-product-info__tags {
    margin-bottom: 10px;
}
.widget-product-info__tag,
.widget-product-info__tag:hover {
    padding: 5px 9px;
    font-size: 11px;
    color: #f00;
    border: 2px #f00 solid;
    border-radius: 15px;
    font-weight: bold;
}
.widget-product-wrap .add_to_cart_button {
    border-radius: 20px;
    padding: 9px 16px;
    font-weight: 400;
    text-transform: capitalize;
    color: #fff;
    background-color: var(--wd-primary-color);
}
.widget-product-info__properties {
    display: flex;
    flex-direction: column;
    column-gap: 20px;
    row-gap: 10px;
}
@media (min-width: 600px) {
    .widget-product-info__properties {
        flex-direction: row;
    }
}
#review_form .submit {
    padding: 9px 25px;
    border-radius: 25px;
    text-transform: capitalize;
}
/* Mniatura produktu */
.product-short-description {
    font-size: 12px;
    color: var(--color-gray-300);
}
/* Stała proporcja zdjęcia w kafelku produktu (3:4) – kadrowanie cover */
.product-element-top .product-image-link {
    display: block;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    position: relative;
}
.product-element-top .product-image-link > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center top;
}
.product-element-top .wd-product-grid-slider.wd-fill {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.product-element-top .wd-product-grid-slide {
    height: 100%;
    background-size: contain;
    background-position: center top;
}
/* Fix: pasek quantity + dodaj do koszyka na całą szerokość na mobile */
@media (max-width: 1024px) {
    .wd-add-btn.wd-add-btn-replace {
        display: flex;
        width: 100%;
    }
    .wd-add-btn.wd-add-btn-replace .add-to-cart-loop {
        flex: 1;
        width: auto;
    }
    div.wd-product.wd-hover-quick.wd-quantity-overlap .wd-add-btn .product_type_simple:before {
        inset-inline-start: 20px;
        inset-inline-end: auto;
    }
    div.wd-product.wd-hover-quick .wd-add-btn div.quantity {
        inset-inline-start: auto;
        inset-inline-end: 0;
    }
}
/* Widget Śledź swoje zamówienie */
.order-tracking a {
    color: white;
    text-decoration: none;
    font-style: italic;
}
.order-tracking a:hover {
    text-decoration: underline;
}
/* Poprawka położenia liczby produktów w kategorii na sidebarze filtrów */
.widget .product-categories li a {
    flex: 1 !important;
}
.single_add_to_cart_button {
    border-radius: 25px !important;
    padding: 12px 60px !important;
}
.wd-free-progress-bar .progress-bar {
    background-image: none;
}
/* =============================================
   FORMULARZ REKLAMACYJNY – styl Pawssion
   ============================================= */
.reklamacja-form {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 15px;
    font-family: inherit;
}
/* --- Tytuł --- */
.reklamacja-title {
    font-size: 1.4em;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 25px 0;
    padding: 0;
}
/* --- Wiersz formularza (label + input) --- */
.reklamacja-row {
    display: flex;
    align-items: center;
    padding: 18px 0;
    border-bottom: 1px solid #e8e8e8;
    gap: 20px;
}
.reklamacja-row:first-of-type {
    border-top: 1px solid #e8e8e8;
}
.reklamacja-row--full {
    flex-direction: column;
    align-items: stretch;
}
.reklamacja-row--full .reklamacja-label {
    flex: none;
    width: 100%;
    margin-bottom: 12px;
}
.reklamacja-row--full .reklamacja-field {
    width: 100%;
}
.reklamacja-row--full .reklamacja-field .wpcf7-form-control-wrap {
    display: block;
    width: 100%;
}
.reklamacja-row--full textarea,
.reklamacja-row--full .wpcf7-textarea {
    width: 100% !important;
    min-height: 130px;
    display: block;
}
/* --- Etykiety --- */
.reklamacja-label {
    flex: 0 0 240px;
    font-size: 0.95em;
    font-weight: 400;
    color: #333;
    line-height: 1.4;
}
.reklamacja-label .req {
    color: #c8963e;
    margin-left: 1px;
    font-weight: 600;
}
.reklamacja-hint {
    font-size: 0.82em;
    color: #999;
    margin-top: 4px;
    line-height: 1.3;
}
/* --- Pola formularza --- */
.reklamacja-field {
    flex: 1;
    min-width: 0;
}
/* Wszystkie inputy/selecty/textarea */
.reklamacja-form input.rek-input,
.reklamacja-form .rek-input input,
.reklamacja-form select.rek-input,
.reklamacja-form .rek-input select,
.reklamacja-form textarea.rek-input,
.reklamacja-form .rek-input textarea,
.reklamacja-field .wpcf7-form-control:not([type="submit"]):not([type="checkbox"]) {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #d5d5d5;
    border-radius: 8px;
    background: #fff;
    font-size: 0.95em;
    color: #333;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
}
.reklamacja-form input:focus,
.reklamacja-form select:focus,
.reklamacja-form textarea:focus,
.reklamacja-field .wpcf7-form-control:focus {
    border-color: #c8963e;
    box-shadow: 0 0 0 3px rgba(200, 150, 62, 0.1);
}
/* Placeholder */
.reklamacja-form input::placeholder,
.reklamacja-form textarea::placeholder {
    color: #aaa;
    font-weight: 300;
}
/* Select – strzałka */
.reklamacja-field select,
.reklamacja-field .wpcf7-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23999' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px;
    cursor: pointer;
}
/* Textarea */
.reklamacja-form textarea,
.reklamacja-field .wpcf7-textarea {
    min-height: 130px;
    resize: vertical;
    line-height: 1.5;
}
/* Kod pocztowy – węższy */
.reklamacja-form input[name="address_post_code"] {
    max-width: 120px;
}
/* File input */
.reklamacja-field .wpcf7-file {
    padding: 10px 16px;
    border: 1px dashed #d5d5d5;
    border-radius: 8px;
    background: #fafafa;
    width: 100%;
    cursor: pointer;
    font-size: 0.9em;
    color: #666;
}
.reklamacja-field .wpcf7-file:hover {
    border-color: #c8963e;
    background: #fffdf8;
}
/* --- Nagłówki sekcji --- */
.reklamacja-section-header {
    font-size: 1em;
    font-weight: 600;
    color: #1a1a1a;
    padding: 28px 0 12px;
    margin: 0;
    border-bottom: 1px solid #e8e8e8;
}
/* --- Zgoda RODO --- */
.reklamacja-agreement {
    margin: 24px 0 0;
    padding: 16px 0;
    font-size: 0.85em;
    line-height: 1.6;
    color: #666;
}
.reklamacja-agreement .wpcf7-list-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
}
.reklamacja-agreement input[type="checkbox"] {
    flex-shrink: 0;
    margin-top: 4px;
    width: 18px;
    height: 18px;
    accent-color: #c8963e;
    cursor: pointer;
}
.reklamacja-agreement label {
    cursor: pointer;
}
/* --- Przycisk Wyślij --- */
.reklamacja-submit {
    margin: 28px 0 10px;
}
.rek-btn,
.reklamacja-submit input[type="submit"] {
    display: inline-block;
    padding: 14px 48px;
    background-color: #2c2c2c;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 1em;
    font-weight: 500;
    letter-spacing: 0.3px;
    cursor: pointer;
    transition: background-color 0.25s ease, transform 0.15s ease;
}
.rek-btn:hover,
.reklamacja-submit input[type="submit"]:hover {
    background-color: #c8963e;
    transform: translateY(-1px);
}
.rek-btn:active,
.reklamacja-submit input[type="submit"]:active {
    transform: translateY(0);
}
/* --- Walidacja CF7 --- */
.reklamacja-form .wpcf7-not-valid {
    border-color: #e74c3c !important;
    box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.08) !important;
}
.reklamacja-form .wpcf7-not-valid-tip {
    color: #e74c3c;
    font-size: 0.82em;
    margin-top: 5px;
    display: block;
}
.reklamacja-form .wpcf7-response-output {
    border-radius: 8px;
    padding: 14px 20px;
    margin: 20px 0 0;
    font-size: 0.9em;
}
/* Spinner CF7 */
.reklamacja-form .wpcf7-spinner {
    margin-left: 15px;
}
/* --- Responsive --- */
@media (max-width: 768px) {
    .reklamacja-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        padding: 14px 0;
    }
    .reklamacja-label {
        flex: none;
        width: 100%;
        font-size: 0.9em;
    }
    .reklamacja-field {
        width: 100%;
    }
    .reklamacja-form input[name="address_post_code"] {
        max-width: 100%;
    }
    .rek-btn,
    .reklamacja-submit input[type="submit"] {
        width: 100%;
        text-align: center;
    }
}
@media (max-width: 480px) {
    .reklamacja-form {
        padding: 0 10px;
    }
    .reklamacja-row {
        padding: 12px 0;
    }
}
/* .product-labels .onsale.product-label {
    display: none !important;
}
.onsale:not(.custom-sale-badge) {
    display: none !important;
}
.custom-sale-badge {
    background: #32cd32 !important;
    color: #ffffff !important;
    font-weight: bold !important;
    font-size: 13px !important;
    line-height: 1 !important;
    padding: 0.5em 1em !important;
    border-radius: 4px !important;
    min-width: 35px !important;
    text-align: center !important;
    display: inline-block !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    z-index: 20 !important;
}
.product-grid-item .product-labels {
    position: relative !important;
} */

/* UWAGA: ta sama reguła jest zdublowana w Customizer -> Dodatkowy CSS.
   Nie szkodzi, ale warto usunąć jedną z kopii.
   To ona sprawia, że pasek koszyka kotwiczy się do dołu CAŁEJ karty,
   a nie do dołu obszaru zdjęcia. */
li.product, .product-inner, .wd-product { position: relative; }
.moj-promo-badge {
    position: absolute; top: 10px; right: 10px; z-index: 20;
    background: #e74c3c; color: #fff;
    padding: 4px 10px; border-radius: 4px;
    font-size: 12px; font-weight: 600; line-height: 1;
    pointer-events: none;
}
.moj-promo-bar {
    padding: 12px 16px; border-radius: 6px;
    margin-bottom: 20px; font-size: 15px; font-weight: 600;
}
.moj-promo-bar--ok   { background: #eafaf0; color: #1e7e46; border: 1px solid #b7e4c7; }
.moj-promo-bar--info { background: #fff8e6; color: #8a6100; border: 1px solid #ffe0a3; }
@media (max-width: 1024px) {
    .moj-promo-badge {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
        z-index: 50 !important;
    }
    li.product, .wd-product, .product-wrapper, .product-element-top {
        overflow: visible !important;
    }
}

/* =============================================
   KAFELKI PRODUKTÓW W PĘTLI ARCHIWUM
   Naprawa wyglądu po aktualizacji motywu (28.08.2026)

   Zasady tej sekcji:
   1. Zero !important i zero "html body".
   2. Liczba klas w selektorach jest dobrana punktowo tak,
      by przebić reguły z woodmart/css/parts/*.css — te pliki
      ładują się PO tym arkuszu, więc przy remisie specyficzności
      wygrywa motyw. NIE SKRACAJ tych selektorów.
      Konkretnie przebijamy:
        .products-bordered-grid.elements-grid      (woo-opt-bordered-product.css)
        .wd-product.wd-hover-quick .wd-add-btn     (woo-product-loop-quick.css)
   3. Kotwicą jest sama karta (.wd-product...product-grid-item), a NIE
      kontener siatki. Dzięki temu te same kafelki wyglądają identycznie
      w archiwum (.elements-grid) i w karuzelach na stronie głównej,
      gdzie karta siedzi w .wd-carousel-item. Nie zawężaj tego z powrotem
      do ".elements-grid >".
      Nie ma tu też ani słowa o .products-bordered-grid, więc opcja
      "Ramka produktów" w widgecie Elementora (wd_archive_products,
      element 6585643, szablon 814) może być włączona lub wyłączona.
   4. Podział: wygląd jest wspólny, w media queries siedzi wyłącznie
      to, co się realnie różni — desktop wysuwa pasek na hover,
      mobile pokazuje go na stałe i rezerwuje na niego miejsce.
   ============================================= */

/* --- Wspólne dla wszystkich szerokości --- */
.wd-products.wd-grid-g.elements-grid {
    gap: 20px;
    border-inline-start: 0;
}
.wd-products .wd-product.wd-hover-quick.product-grid-item {
    border: 0;
    border-radius: 12px;
    padding: 16px;
    background: #fff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .08);
}

/* Jedyna reguła paska wspólna dla obu trybów — czysty kolor, zero layoutu.
   Motyw trzyma .8 poza media query, przez co pasek prześwitywał. */
.wd-product.wd-hover-quick .wd-add-btn.wd-add-btn-replace {
    opacity: 1;
}

/* --- Desktop: pasek wysuwa się z wnętrza karty na hover --- */
@media (min-width: 1025px) {

    /* Przycięcie paska do krawędzi karty. Tylko tutaj, bo blok
       @media (max-width:1024px) wyżej wymusza overflow:visible
       dla .moj-promo-badge — te dwie reguły nie mogą się spotkać. */
    .wd-products .wd-product.wd-hover-quick.product-grid-item {
        overflow: hidden;
        transition: box-shadow .25s ease, transform .25s ease;
    }
    .wd-products .wd-product.wd-hover-quick.product-grid-item:hover {
        box-shadow: 0 6px 20px rgba(0, 0, 0, .13);
        transform: translateY(-2px);
    }

    /* UWAGA: cały layout paska jest celowo TYLKO tutaj.
       Na mobile motyw buduje go zupełnie inaczej — przycisk to ikona
       40x40, etykieta .wd-action-text jest ukryta, a licznik sztuk jest
       pozycjonowany absolutnie (inset-inline-start: 40px). Flexbox
       narzucony globalnie rozjeżdżał ten układ. Nie wynoś tego bloku. */
    .wd-product.wd-hover-quick .wd-add-btn.wd-add-btn-replace {
        inset-inline: 0;
        bottom: 0;
        width: auto;
        border-radius: 0;
        background: var(--wd-primary-color, #c89f5e);
        display: flex;
        align-items: stretch;
        overflow: hidden;
        transform: translateY(100%);
        transition: transform .3s cubic-bezier(.22, .61, .36, 1);
    }
    .wd-product.wd-hover-quick:hover .wd-add-btn.wd-add-btn-replace {
        transform: translateY(0);
    }

    .wd-product.wd-hover-quick.wd-quantity-overlap .wd-add-btn div.quantity {
        background: rgba(0, 0, 0, .14);
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        height: 100%;
        margin: 0;
        border-radius: 0;
    }
    .wd-product.wd-hover-quick .wd-add-btn .quantity input,
    .wd-product.wd-hover-quick .wd-add-btn .quantity .btn {
        background: transparent;
        color: #fff;
        border: 0;
        box-shadow: none;
        height: 100%;
    }
    .wd-product.wd-hover-quick .wd-add-btn .add-to-cart-loop {
        background: transparent;
        color: #fff;
        flex: 1 1 auto;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 0;
        font-weight: 600;
        transition: background .2s ease;
    }
    .wd-product.wd-hover-quick .wd-add-btn .add-to-cart-loop:hover {
        background: rgba(0, 0, 0, .12);
    }
}

/* --- Mobile: pasek stoi na stałe, my dokładamy miejsce i wykończenie --- */
@media (max-width: 1024px) {

    /* Motyw sam robi tu transform:none + visibility:visible, więc pasek
       stoi na stałe i na stałe przykrywałby cenę. Dolny zapas = wysokość
       paska (motyw daje przyciskowi 40px) + oddech. */
    .wd-products .wd-product.wd-hover-quick.product-grid-item {
        padding-bottom: calc(16px + 40px);
    }

    /* Karta ma tu overflow:visible (przez regułę .moj-promo-badge),
       więc pasek zaokrągla dolne rogi sam. */
    .wd-product.wd-hover-quick .wd-add-btn.wd-add-btn-replace {
        background: var(--wd-primary-color, #c89f5e);
        border-end-start-radius: 12px;
        border-end-end-radius: 12px;
    }

    /* Licznik sztuk jako ciemniejszy segment — tak jak na desktopie.
       Uwaga: tutaj licznik jest pozycjonowany ABSOLUTNIE przez motyw
       (szerokość 80px, dosunięty do prawej), więc żadnego flexboxa. */
    .wd-product.wd-hover-quick .wd-add-btn .quantity {
        background: rgba(0, 0, 0, .14);
    }
    .wd-product.wd-hover-quick .wd-add-btn .quantity input,
    .wd-product.wd-hover-quick .wd-add-btn .quantity .btn {
        background: transparent;
        color: #fff;
        border: 0;
        box-shadow: none;
    }

    /* Ikona koszyka to pseudoelement ::before z woodmart-font. Domyślnie
       wisi przy lewej krawędzi, bo motyw daje jej padding-inline 0 80px,
       a Twoja reguła wyżej pinuje ją na inset-inline-start: 20px.
       Zerujemy jedno i drugie — centrowaniem zajmie się flexbox motywu.

       Dwa przypadki, bo licznik bywa ukryty (np. gdy w magazynie
       została jedna sztuka — motyw dokłada wtedy klasę .hidden):
       bez widocznego licznika ikona centruje się na całej szerokości,
       z licznikiem zostawiamy mu 80px po prawej.

       padding-inline: 0 jest powtórzone w OBU regułach i to nie pomyłka.
       Motyw ma osobną regułę dla wariantu z widocznym licznikiem:
         .wd-product.wd-hover-quick.wd-quantity-overlap .wd-add-btn
           .quantity:not(.hidden) + .product_type_simple::before
           { padding-inline-end: 80px }        (7 klas, woo-product-loop-quick.css)
       Reguła ogólna niżej ma 6 klas, więc tamtej nie przebija — padding
       trzeba wyzerować również w wariancie z licznikiem (8 klas). */
    .wd-product.wd-hover-quick.wd-quantity-overlap .wd-add-btn .product_type_simple.add-to-cart-loop::before {
        inset-inline: 0;
        width: auto;
        padding-inline: 0;
    }
    .wd-product.wd-hover-quick.wd-quantity-overlap .wd-add-btn .quantity:not(.hidden) + .product_type_simple.add-to-cart-loop::before {
        inset-inline-end: 80px;
        padding-inline: 0;   /* powtórzone celowo — patrz komentarz wyżej */
    }
}