/* ============================================================
   4CleanPaws — Globalny CSS dopasowujący WooCommerce
   (koszyk, kasa, powiadomienia) do stylu reszty sklepu.
   ============================================================ */

/* ---------- 1. Import czcionek (Fraunces + Nunito Sans) ---------- */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Nunito+Sans:wght@400;600;700;800&display=swap');

/* ---------- 2. Zmienne kolorów (spójne z resztą sklepu) ---------- */
:root{
  --4cp-bg: #FAF8F4;
  --4cp-bg-alt: #F4EEE7;
  --4cp-ink: #2F2F2F;
  --4cp-accent: #A97A5C;
  --4cp-accent-dark: #8A6247;
  --4cp-sage: #A9B79A;
  --4cp-text-muted: #6B6B6B;
  --4cp-white: #FFFFFF;
  --4cp-shadow: 0 8px 24px rgba(47,47,47,0.08);
  --4cp-radius-lg: 24px;
  --4cp-radius-md: 16px;
}

/* ---------- 3. Typografia globalna ---------- */
body,
.woocommerce,
.woocommerce table,
.woocommerce input,
.woocommerce select,
.woocommerce textarea {
  font-family: 'Nunito Sans', sans-serif;
  color: var(--4cp-ink);
}

.woocommerce h1, .woocommerce h2, .woocommerce h3,
.woocommerce-checkout h3, .woocommerce-cart h2 {
  font-family: 'Fraunces', 'Nunito Sans', serif;
  font-weight: 600;
  color: var(--4cp-ink);
}

/* ---------- 4. Przyciski (koszyk, kasa, "Dodaj do koszyka") ---------- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce-checkout #payment #place_order,
.woocommerce a.add_to_cart_button {
  background-color: var(--4cp-accent) !important;
  color: var(--4cp-white) !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 14px 30px !important;
  font-family: 'Nunito Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  box-shadow: var(--4cp-shadow) !important;
  transition: transform .15s ease, background-color .15s ease !important;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce-checkout #payment #place_order:hover,
.woocommerce a.add_to_cart_button:hover {
  background-color: var(--4cp-accent-dark) !important;
  transform: translateY(-2px);
}

/* Drugorzędne przyciski (np. "Aktualizuj koszyk") */
.woocommerce button[name="update_cart"],
.woocommerce a.button.wp-element-button:not(.checkout-button) {
  background-color: var(--4cp-bg-alt) !important;
  color: var(--4cp-ink) !important;
  box-shadow: none !important;
  border: 1px solid rgba(22,66,60,0.15) !important;
}

/* ---------- 5. Tabela koszyka i podsumowania zamówienia ---------- */
.woocommerce table.cart,
.woocommerce table.shop_table,
.woocommerce-checkout-review-order-table {
  border: none !important;
  background: var(--4cp-white);
  border-radius: var(--4cp-radius-md);
  box-shadow: var(--4cp-shadow);
  overflow: hidden;
}

.woocommerce table.cart th,
.woocommerce table.shop_table th {
  background: var(--4cp-bg-alt) !important;
  color: var(--4cp-ink) !important;
  font-family: 'Nunito Sans', sans-serif;
  font-weight: 700;
  border: none !important;
}

.woocommerce table.cart td,
.woocommerce table.shop_table td {
  border-top: 1px solid var(--4cp-bg-alt) !important;
  border-bottom: none !important;
}

/* Suma do zapłaty — wyróżniona akcentem */
.woocommerce .order-total .amount,
.woocommerce-checkout-review-order-table .order-total .woocommerce-Price-amount {
  color: var(--4cp-accent-dark) !important;
  font-weight: 800 !important;
  font-size: 1.15rem;
}

/* ---------- 6. Formularz na stronie kasy ---------- */
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row textarea,
.woocommerce-billing-fields input,
.woocommerce-shipping-fields input {
  background: var(--4cp-bg-alt) !important;
  border: 1px solid rgba(22,66,60,0.15) !important;
  border-radius: 14px !important;
  padding: 12px 16px !important;
  font-family: 'Nunito Sans', sans-serif !important;
}

.woocommerce-checkout .form-row label {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--4cp-ink);
}

/* Sekcja wyboru metody płatności */
.woocommerce-checkout #payment {
  background: var(--4cp-bg-alt) !important;
  border-radius: var(--4cp-radius-md) !important;
  border: none !important;
}

.woocommerce-checkout #payment ul.payment_methods {
  border-bottom: 1px solid rgba(22,66,60,0.1) !important;
}

/* ---------- 7. Komunikaty (błędy, potwierdzenia, info) ---------- */
.woocommerce-message,
.woocommerce-info {
  background: var(--4cp-bg-alt) !important;
  border-top-color: var(--4cp-sage) !important;
  color: var(--4cp-ink) !important;
  border-radius: var(--4cp-radius-md);
}

.woocommerce-error {
  background: #FFF3F0 !important;
  border-top-color: var(--4cp-accent-dark) !important;
  color: var(--4cp-ink) !important;
  border-radius: var(--4cp-radius-md);
}

/* ---------- 8. Ceny w całym sklepie (listy produktów, karty) ---------- */
.woocommerce .price .woocommerce-Price-amount,
.woocommerce ul.products li.product .price {
  color: var(--4cp-accent-dark) !important;
  font-weight: 700;
}

/* ---------- 9. Ikony/liczniki koszyka w menu (jeśli motyw je pokazuje) ---------- */
.woocommerce-cart-form,
.cart-contents .count {
  color: var(--4cp-accent-dark) !important;
}
/* ============================================================
   4CleanPaws — CSS dopasowany SPECYFICZNIE pod motyw Storefront
   (darmowy motyw WooCommerce od Automattic).
   ============================================================ */

/* ---------- 1. Nagłówek strony (#masthead) ---------- */
#masthead.site-header {
  background: var(--4cp-bg) !important;
  border-bottom: 1px solid rgba(47,47,47,0.08) !important;
  box-shadow: none !important;
}

/* Nazwa sklepu, jeśli używasz tekstu zamiast logo-obrazka */
.site-branding .site-title a {
  font-family: 'Fraunces', serif !important;
  font-weight: 700 !important;
  color: var(--4cp-ink) !important;
  font-size: 1.6rem !important;
}

.site-branding .site-description {
  color: var(--4cp-accent-dark) !important;
  font-family: 'Nunito Sans', sans-serif !important;
  font-size: 0.85rem !important;
}

/* ---------- 2. Menu główne ---------- */
.main-navigation,
.storefront-primary-navigation {
  background: var(--4cp-bg) !important;
}

.main-navigation ul.menu > li > a,
.main-navigation ul.nav-menu > li > a {
  font-family: 'Nunito Sans', sans-serif !important;
  font-weight: 700 !important;
  color: var(--4cp-ink) !important;
}

.main-navigation ul.menu > li > a:hover,
.main-navigation ul.menu > li.current-menu-item > a,
.main-navigation ul.menu > li.current_page_item > a {
  color: var(--4cp-accent-dark) !important;
}

/* Podmenu (rozwijane) */
.main-navigation ul.menu ul.sub-menu,
.main-navigation ul.menu ul.children {
  background: var(--4cp-white) !important;
  border: 1px solid rgba(47,47,47,0.08) !important;
  box-shadow: var(--4cp-shadow) !important;
}

/* ---------- 3. Ikona koszyka w nagłówku + mini-koszyk ---------- */
.site-header-cart a.cart-contents {
  color: var(--4cp-ink) !important;
  font-family: 'Nunito Sans', sans-serif !important;
  font-weight: 700 !important;
}

.site-header-cart .cart-contents .amount {
  color: var(--4cp-accent-dark) !important;
}

/* Rozwijany mini-koszyk (dropdown po najechaniu na ikonę koszyka) */
.site-header-cart .widget_shopping_cart,
.woocommerce.widget_shopping_cart {
  background: var(--4cp-white) !important;
  border-radius: 16px !important;
  box-shadow: var(--4cp-shadow) !important;
  border: none !important;
}

.woocommerce.widget_shopping_cart .total .amount {
  color: var(--4cp-accent-dark) !important;
  font-weight: 800 !important;
}

/* ---------- 4. Pasek wyszukiwania w nagłówku ---------- */
.site-header .product-search-field,
.site-header input.search-field {
  background: var(--4cp-bg-alt) !important;
  border: 1px solid rgba(47,47,47,0.1) !important;
  border-radius: 14px !important;
}

/* ---------- 5. Sekcja hero (jeśli motyw/wtyczka Storefront Hero jest aktywna) ---------- */
.storefront-hero {
  background: var(--4cp-bg) !important;
}

.storefront-hero__title {
  font-family: 'Fraunces', serif !important;
  color: var(--4cp-ink) !important;
}

/* ---------- 6. Strona sklepu / lista produktów ---------- */
.woocommerce ul.products li.product {
  background: var(--4cp-white);
  border-radius: 16px;
  padding: 16px;
  box-shadow: var(--4cp-shadow);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: 'Nunito Sans', sans-serif !important;
  font-weight: 700 !important;
  color: var(--4cp-ink) !important;
}

.woocommerce ul.products li.product .star-rating {
  color: var(--4cp-accent) !important;
}

/* Etykieta "Nowość" / "Promocja" (onsale) */
.woocommerce span.onsale {
  background: var(--4cp-accent) !important;
  color: var(--4cp-white) !important;
  border-radius: 999px !important;
}

/* ---------- 7. Stopka ---------- */
.site-footer,
.site-footer .col-full {
  background: var(--4cp-bg-alt) !important;
  color: var(--4cp-ink) !important;
}

.site-footer .widget-title {
  font-family: 'Fraunces', serif !important;
  color: var(--4cp-ink) !important;
}

.site-footer a {
  color: var(--4cp-accent-dark) !important;
}

.site-info {
  background: var(--4cp-bg-alt) !important;
  color: var(--4cp-ink) !important;
  border-top: 1px solid rgba(47,47,47,0.08) !important;
}

/* ---------- 8. Drobiazgi: focus/scrollbar dopasowane do marki ---------- */
a:focus, button:focus, input:focus {
  outline-color: var(--4cp-accent) !important;
}

/* ---------- Dodatkowe zabezpieczenie: wymuś ukrycie paska bocznego ---------- */
body.woocommerce-page #secondary,
body.woocommerce-cart #secondary,
body.woocommerce-checkout #secondary,
body.woocommerce-account #secondary,
body.page-template-template-simple #secondary,
body.page-template-template-homepage #secondary {
    display: none !important;
}

body.woocommerce-page #primary,
body.woocommerce-cart #primary,
body.woocommerce-checkout #primary,
body.woocommerce-account #primary,
body.page-template-template-simple #primary,
body.page-template-template-homepage #primary {
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
}

/* ============================================================
   Poprawki wyglądu strony koszyka (i innych stron WooCommerce)
   ============================================================ */

body.woocommerce-page #primary .content-area,
body.woocommerce-cart #primary,
body.woocommerce-checkout #primary,
body.woocommerce-account #primary {
    max-width: 1120px !important;
    margin: 0 auto !important;
    padding: 0 24px !important;
    float: none !important;
}

body.woocommerce-page .page-title,
body.woocommerce-page .entry-title {
    padding: 40px 0 20px !important;
    font-size: clamp(1.8rem, 3vw, 2.4rem) !important;
}

.woocommerce-cart-form,
.cart-empty.woocommerce-info {
    text-align: center;
    background: var(--4cp-bg-alt);
    border-radius: 20px;
    padding: 50px 24px !important;
    margin: 20px 0 !important;
    list-style: none !important;
}
.cart-empty.woocommerce-info::before {
    display: block;
    margin: 0 auto 16px;
}
.woocommerce-cart .return-to-shop .button {
    margin-top: 16px;
}

.cart-empty + .cross-sells,
body.woocommerce-cart .cross-sells,
body.woocommerce-cart h2 {
    text-align: center;
}
.cross-sells ul.products {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 24px;
    margin-top: 24px;
}

.woocommerce-page .edit-link,
body.woocommerce-page > a[href*="post.php"] {
    display: none !important;
}