/*
Theme Name: Agron Child
Theme URI: https://example.com/
Description: Motyw potomny dla Agron – dopasowany do wyników WooCommerce
Author: Twoje Imię
Template: agron
Version: 1.0
*/

/* Parent stylesheet is loaded via wp_enqueue_style in functions.php — no @import needed */

/* ═══════════════════════════════════════════════════════════════════════
   AGRON SHOP SIDEBAR — custom hardcoded sidebar for shop/category pages
   ═══════════════════════════════════════════════════════════════════════ */

.agron-shop-sidebar {
	display: flex;
	flex-direction: column;
	gap: 0;
}

/* ── Section base ─────────────────────────────────────────────────── */
.asb-section {
	background: #fff;
	border: 1px solid #e5e9e4;
	border-radius: 10px;
	padding: 18px 20px;
	margin-bottom: 12px;
}

.asb-section:last-child {
	margin-bottom: 0;
}

.asb-section-title {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	color: var(--color-third, #0A2803);
	margin: 0 0 14px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--color-primary, #5B8C51);
	display: inline-block;
}

/* ── Search — override parent theme's global input styles ─────────── */
.asb-search-section {
	padding: 12px 14px;
}

.asb-search-form {
	display: flex;
	align-items: stretch;
	background: #f5f7f4;
	border: 1.5px solid #cdd9cb;
	border-radius: 8px;
	overflow: hidden;
	transition: border-color 0.2s, box-shadow 0.2s;
}

.asb-search-form:focus-within {
	border-color: var(--color-primary, #5B8C51);
	box-shadow: 0 0 0 3px rgba(91,140,81,0.12);
}

/* High-specificity reset to overpower parent theme's global input[type=search] rules */
.agron-shop-sidebar .asb-search-form input[type="search"].asb-search-input,
.agron-shop-sidebar .asb-search-form input.asb-search-input {
	flex: 1;
	min-width: 0;
	width: auto;
	border: none !important;
	border-bottom: none !important;
	outline: none !important;
	background: transparent !important;
	background-color: transparent !important;
	padding: 12px 14px !important;
	margin: 0 !important;
	line-height: 1.4 !important;
	height: auto !important;
	font-size: 14px !important;
	font-family: inherit !important;
	color: var(--color-third, #0A2803) !important;
	font-weight: 400 !important;
	box-shadow: none !important;
	border-radius: 0 !important;
}

.agron-shop-sidebar .asb-search-form input[type="search"].asb-search-input::placeholder,
.agron-shop-sidebar .asb-search-form input.asb-search-input::placeholder {
	color: #9aab97 !important;
	opacity: 1 !important;
}

.asb-search-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-primary, #5B8C51);
	border: none;
	color: #fff;
	width: 46px;
	flex-shrink: 0;
	cursor: pointer;
	transition: background 0.2s;
	border-radius: 0;
}

.asb-search-btn:hover {
	background: var(--color-third, #0A2803);
}

/* ── Brand badges ─────────────────────────────────────────────────── */
.asb-brand-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.asb-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 12px;
	border-radius: 20px;
	border: 1.5px solid #cdd9cb;
	background: #fff;
	color: var(--color-third, #0A2803);
	font-size: 12.5px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.18s ease;
	line-height: 1.3;
	font-family: inherit;
	box-shadow: none;
}

.asb-badge:hover {
	border-color: var(--color-primary, #5B8C51);
	color: var(--color-primary, #5B8C51);
	background: #f2f7f0;
}

.asb-badge.is-active {
	background: var(--color-primary, #5B8C51);
	border-color: var(--color-primary, #5B8C51);
	color: #fff;
}

.asb-badge.is-active:hover {
	background: var(--color-third, #0A2803);
	border-color: var(--color-third, #0A2803);
	color: #fff;
}

.asb-badge-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(0,0,0,0.10);
	border-radius: 10px;
	font-size: 10.5px;
	min-width: 18px;
	padding: 1px 5px;
	line-height: 1.5;
}

.asb-badge.is-active .asb-badge-count {
	background: rgba(255,255,255,0.25);
}

/* ── Categories ───────────────────────────────────────────────────── */
.asb-cat-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.asb-cat-item {
	border-bottom: 1px solid #f0f3ef;
}

.asb-cat-item:last-child {
	border-bottom: none;
}

.asb-cat-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 4px;
}

.asb-cat-link,
.asb-subcat-link {
	display: block;
	padding: 8px 2px;
	font-size: 13.5px;
	color: #3a5237;
	text-decoration: none;
	flex: 1;
	transition: color 0.15s;
	line-height: 1.4;
}

.asb-cat-link:hover,
.asb-subcat-link:hover {
	color: var(--color-primary, #5B8C51);
}

.asb-cat-item.is-current > .asb-cat-row > .asb-cat-link,
.asb-subcat-list li.is-current > .asb-subcat-link {
	color: var(--color-primary, #5B8C51);
	font-weight: 600;
}

.asb-cat-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	padding: 6px;
	cursor: pointer;
	color: #8aaa86;
	border-radius: 4px;
	transition: all 0.2s;
	flex-shrink: 0;
	line-height: 1;
}

.asb-cat-toggle:hover {
	background: #f0f5ef;
	color: var(--color-primary, #5B8C51);
}

.asb-cat-item.is-open > .asb-cat-row > .asb-cat-toggle svg {
	transform: rotate(180deg);
}

.asb-cat-toggle svg {
	transition: transform 0.2s ease;
}

.asb-subcat-list {
	list-style: none;
	margin: 0;
	padding: 2px 0 6px 14px;
}

.asb-subcat-list li {
	border-bottom: none;
}

.asb-subcat-link {
	font-size: 13px;
	padding: 5px 2px;
	color: #5a7557;
}

/* ── Price range — override parent theme global input styles ──────── */
.asb-price-inputs {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	margin-bottom: 12px;
}

.asb-price-field {
	flex: 1;
	min-width: 0;
}

.asb-price-label {
	display: block;
	font-size: 10.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #8aaa86;
	margin-bottom: 5px;
}

.asb-price-input-wrap {
	position: relative;
}

/* High-specificity reset for price inputs */
.agron-shop-sidebar .asb-price-input-wrap input[type="number"].asb-price-input,
.agron-shop-sidebar .asb-price-input-wrap input.asb-price-input {
	width: 100% !important;
	border: 1.5px solid #dde5db !important;
	border-bottom: 1.5px solid #dde5db !important;
	border-radius: 7px !important;
	padding: 8px 28px 8px 10px !important;
	line-height: 1.4 !important;
	height: auto !important;
	font-size: 13.5px !important;
	font-weight: 400 !important;
	color: var(--color-third, #0A2803) !important;
	background: #f9fbf8 !important;
	background-color: #f9fbf8 !important;
	outline: none !important;
	transition: border-color 0.2s, background 0.2s;
	-moz-appearance: textfield !important;
	box-sizing: border-box !important;
	box-shadow: none !important;
}

.agron-shop-sidebar .asb-price-input-wrap input[type="number"].asb-price-input::-webkit-outer-spin-button,
.agron-shop-sidebar .asb-price-input-wrap input[type="number"].asb-price-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
}

.agron-shop-sidebar .asb-price-input-wrap input.asb-price-input:focus,
.agron-shop-sidebar .asb-price-input-wrap input.asb-price-input:hover {
	border-color: var(--color-primary, #5B8C51) !important;
	background: #fff !important;
	background-color: #fff !important;
	color: var(--color-third, #0A2803) !important;
	outline: 0 !important;
}

.asb-price-unit {
	position: absolute;
	right: 9px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 11px;
	color: #9aab97;
	pointer-events: none;
}

.asb-price-dash {
	flex-shrink: 0;
	padding-bottom: 10px;
	color: #b0bfae;
	font-size: 13px;
}

.asb-price-submit {
	width: 100%;
	padding: 10px 14px;
	background: var(--color-primary, #5B8C51);
	color: #fff;
	border: none;
	border-radius: 7px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	cursor: pointer;
	transition: background 0.2s;
	font-family: inherit;
	line-height: 1.4;
}

.asb-price-submit:hover {
	background: var(--color-third, #0A2803);
}

/* ── "Wszystkie marki" link styled as badge ──────────────────────── */
.asb-brand-badges a.asb-badge {
	text-decoration: none;
}

/* ── Reset filters — always visible ─────────────────────────────── */
.asb-reset-section {
	background: #fff8f8;
	border-color: #f0d5d5;
	padding: 12px 16px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.asb-reset-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: #c0392b;
	text-decoration: none;
	font-weight: 500;
	transition: color 0.15s;
}

.asb-reset-link:hover {
	color: #922b21;
}

/* ── Mobile: reduce gap between hero and sidebar ──────────────────── */
/* Reduce gap under hero for shop/category pages on all screen sizes.
   Parent theme sets padding-top:131px on desktop, 90px on mobile. */
.woocommerce-shop #pxl-main {
	padding-block: 32px 80px !important;
}
.woocommerce-shop #pxl-main .container {
	padding-block: 0 !important;
}
@media screen and (max-width: 767px) {
	.woocommerce-shop #pxl-main {
		padding-block: 20px 60px !important;
	}
}

/* ── Mobile: sidebar accordion (toggle button) ────────────────────── */
.asb-mobile-toggle {
	display: none;
}

/* Hide filters panel on mobile by default */
.asb-filters-panel.is-hidden {
	display: none !important;
}

@media screen and (max-width: 991px) {
	.asb-mobile-toggle {
		display: flex;
		align-items: center;
		gap: 8px;
		width: 100%;
		padding: 12px 16px;
		background: #fff;
		border: 1.5px solid #cdd9cb;
		border-radius: 10px;
		font-size: 14px;
		font-weight: 600;
		color: var(--color-third, #0A2803);
		cursor: pointer;
		font-family: inherit;
		transition: background 0.2s, border-color 0.2s;
		margin-bottom: 10px;
	}

	.asb-mobile-toggle:hover,
	.asb-mobile-toggle.is-open {
		background: var(--color-primary, #5B8C51);
		border-color: var(--color-primary, #5B8C51);
		color: #fff;
	}

	.asb-mobile-toggle svg {
		flex-shrink: 0;
	}
}

/* ── Cart totals: fix white text in shipping row ──────────────────── */
/* Parent theme uses color:#fff for shipping row text (designed for dark bg),
   but cart_totals-box has background:#fff — override to visible colors. */
.woocommerce-cart .cart-collaterals .cart_totals .cart_totals-box
    > table.shop_table tbody tr.shipping th,
.woocommerce-cart .cart-collaterals .cart_totals .cart_totals-box
    > table.shop_table tbody tr.shipping td,
.woocommerce-cart .cart-collaterals .cart_totals .cart_totals-box
    > table.shop_table tbody tr.shipping td .woocommerce-shipping-destination,
.woocommerce-cart .cart-collaterals .cart_totals .cart_totals-box
    > table.shop_table tbody tr.shipping td #shipping_method.woocommerce-shipping-methods label,
.woocommerce-cart .cart-collaterals .cart_totals .cart_totals-box
    > table.shop_table tbody tr.shipping td #shipping_method.woocommerce-shipping-methods td label {
    color: var(--color-third, #0A2803) !important;
}
.woocommerce-cart .cart-collaterals .cart_totals .cart_totals-box
    > table.shop_table tbody tr.shipping td .shipping-calculator-button,
.woocommerce-cart .cart-collaterals .cart_totals .cart_totals-box
    > table.shop_table tbody tr.shipping td form.woocommerce-shipping-calculator .shipping-calculator-button {
    color: var(--color-primary, #5B8C51) !important;
}
.woocommerce-cart .cart-collaterals .cart_totals .cart_totals-box
    > table.shop_table tbody tr.shipping td form.woocommerce-shipping-calculator .button {
    border-color: var(--color-primary, #5B8C51) !important;
}

/* ── Checkout: "Wyślij na inny adres" — field spacing ─────────────── */
/* Billing wrapper has flex+gap but shipping wrapper lacks it → fields collapse. */
.woocommerce-checkout .woocommerce form.checkout
    #customer_details .col-2
    .woocommerce-shipping-fields
    .woocommerce-shipping-fields__field-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 24px;
}
.woocommerce-checkout .woocommerce form.checkout
    #customer_details .col-2
    .woocommerce-shipping-fields
    .woocommerce-shipping-fields__field-wrapper > p {
    flex: 0 0 100%;
    margin: 0;
}

/* ── Checkout: gap between last shipping field (city) and additional info ── */
.woocommerce-checkout .woocommerce form.checkout
    #customer_details .col-2
    .woocommerce-additional-fields {
    margin-top: 24px;
}

/* ── Search: no-results state ────────────────────────────────────── */
.agron-no-results {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 60px 24px 80px;
    gap: 16px;
}

.agron-no-results__icon {
    color: var(--color-primary, #5B8C51);
    opacity: .55;
}

.agron-no-results__heading {
    font-size: 26px;
    font-weight: 700;
    color: var(--color-third, #0A2803);
    margin: 0;
}

.agron-no-results__text {
    font-size: 16px;
    color: rgba(64, 74, 61, .7);
    line-height: 1.65;
    margin: 0;
    max-width: 420px;
}

.agron-no-results__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 14px 32px;
    background: var(--color-primary, #5B8C51);
    color: #fff !important;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 60px;
    transition: background .2s, transform .15s;
}

.agron-no-results__btn:hover {
    background: var(--color-third, #0A2803);
    transform: translateY(-1px);
}

/* "Wszystkie produkty" link inside the topbar result count */
.search-all-products-link {
    color: var(--color-primary, #5B8C51);
    text-decoration: none;
    font-weight: 400;
    font-size: 14px;
    transition: color .15s;
}
.search-all-products-link:hover {
    color: var(--color-dark, #0A2803);
    text-decoration: underline;
}

/* ── Mobile-only Koszyk menu item ────────────────────────────────── */
/* Hidden in every nav by default; revealed only inside the mobile sidebar. */
.menu-item-cart-mobile {
    display: none !important;
}
/* Make the sidebar a flex column so cart can sit at the very bottom. */
#pxl-header-mobile .pxl-sidebar-menu .pxl-sidebar-box {
    display: flex !important;
    flex-direction: column;
}
#pxl-header-mobile .pxl-sidebar-menu .pxl-header-nav {
    flex: 1;
    display: flex;
    flex-direction: column;
}
#pxl-header-mobile .pxl-sidebar-menu .pxl-header-nav > ul {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Cart item: pushed to bottom, no border below, centered */
#pxl-header-mobile .pxl-sidebar-menu .menu-item-cart-mobile {
    display: flex !important;
    justify-content: center;
    margin-top: auto !important;
    padding-top: 24px !important;
    border-bottom: none !important;
}
#pxl-header-mobile .pxl-sidebar-menu .menu-item-cart-mobile > a {
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    background: var(--color-primary, #5B8C51);
    color: #fff !important;
    padding: 13px 28px !important;
    border-radius: 60px;
    font-weight: 700 !important;
    font-size: 15px !important;
    transition: background .2s;
}
#pxl-header-mobile .pxl-sidebar-menu .menu-item-cart-mobile > a:hover {
    background: var(--color-third, #0A2803) !important;
}
#pxl-header-mobile .pxl-sidebar-menu .menu-item-cart-mobile > a svg {
    flex-shrink: 0;
}

/* ── Header: full-width nav row on non-homepage pages ─────────────── */
/* 5f63015 is e-con-boxed (1824px max-width) — at >1824px screens this
   centers the nav row, leaving white body-background gaps at the edges. */
body:not(.home) .elementor-element-5f63015 {
	--content-width: 2224px !important;
}
/* f2cff71 = logo container (28px left pad) + 794d8e8 widget (+40px) = 68px gap.
   Reduce to a modest breathing room. */
body:not(.home) .elementor-element-f2cff71 {
	--padding-left: 12px !important;
}
body:not(.home) .elementor-element-794d8e8 > .elementor-widget-container {
	padding-left: 0px !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   SINGLE PRODUCT PAGE — REDESIGN
   ═══════════════════════════════════════════════════════════════════════ */

/* 1. Force full-width content area (woocommerce.php leaves $sidebar undefined,
      so the container never gets the no-sidebar class and pxl-content-area
      would otherwise be capped at 64.35%). */
.single.single-product #pxl-main > .container .pxl-content-area {
    flex: 1 1 100% !important;
    max-width: 100% !important;
}

/* 2. Kill the enormous bottom padding */
.single.single-product #pxl-main {
    padding-block: 40px 80px !important;
}
@media screen and (max-width: 1199px) {
    .single.single-product #pxl-main {
        padding-block: 32px 64px !important;
    }
}
@media screen and (max-width: 767px) {
    .single.single-product #pxl-main {
        padding-block: 24px 48px !important;
    }
}

/* 2. Balanced 50/50 two-column layout instead of fixed-pixel widths */
.single.single-product .product .product-details {
    column-gap: 48px !important;
    justify-content: flex-start !important;
}

.single.single-product .product .product-details .woocommerce-product-gallery {
    flex: 0 1 48% !important;
    max-width: 48% !important;
}
@media screen and (max-width: 991px) {
    .single.single-product .product .product-details .woocommerce-product-gallery {
        flex: 1 0 100% !important;
        max-width: 100% !important;
    }
}

.single.single-product .product .product-details .summary {
    flex: 1 1 48% !important;
    max-width: calc(52% - 48px) !important;
}
@media screen and (max-width: 991px) {
    .single.single-product .product .product-details .summary {
        flex: 1 0 100% !important;
        max-width: 100% !important;
    }
}

/* 3. Reduce the huge gap before tabs */
.single.single-product .product .product-details .woocommerce-tabs {
    margin-top: 56px !important;
}
@media screen and (max-width: 1199px) {
    .single.single-product .product .product-details .woocommerce-tabs {
        margin-top: 40px !important;
    }
}

/* 4. Reduce the 120px hero padding on product pages */
.single.single-product #pxl-post-title > .wrapper {
    padding-block: 36px 28px !important;
}
@media screen and (max-width: 767px) {
    .single.single-product #pxl-post-title > .wrapper {
        padding-block: 24px 20px !important;
    }
}

/* 5. Breadcrumb inside product hero */
#pxl-post-title .pxl-breadcrumb {
    justify-content: center;
    margin-bottom: 10px;
}
#pxl-post-title .woocommerce-breadcrumb {
    display: block;
    text-align: center;
    font-size: 13px;
    font-weight: 500;
    color: rgba(64, 74, 61, .55);
    margin-bottom: 10px;
    letter-spacing: 0.02em;
}
#pxl-post-title .woocommerce-breadcrumb a {
    color: rgba(64, 74, 61, .55);
    text-decoration: none;
    transition: color .15s;
}
#pxl-post-title .woocommerce-breadcrumb a:hover {
    color: var(--color-primary, #5B8C51);
}

/* 5b. Breadcrumb pill */
.elementor-element-4d4568b .elementor-widget-container {
    text-align: center;
}
#pxl-post-title .pxl-breadcrumb {
    display: inline-flex !important;
    width: auto !important;
    background: rgba(15, 25, 15, 0.30);
    border-radius: 20px;
    padding: 4px 14px;
}

/* 5c. Title — background only on the title widget container, width = text only */
.elementor-element-61131ae {
    text-align: center;
}
.elementor-element-61131ae .elementor-widget-container {
    display: inline-block;
    background: rgba(15, 25, 15, 0.30);
    border-radius: 10px;
    padding: 8px 22px;
}
/* 5c. Breadcrumb mobile tweaks */
@media screen and (max-width: 767px) {
    #pxl-post-title .pxl-breadcrumb {
        flex-wrap: nowrap;
        gap: 4px;
        padding: 3px 10px;
        margin-bottom: 12px;
    }
    #pxl-post-title .pxl-breadcrumb li {
        flex-shrink: 0;
        white-space: nowrap;
    }
    #pxl-post-title .pxl-breadcrumb li > a,
    #pxl-post-title .pxl-breadcrumb li > span {
        font-size: 14px !important;
    }
    #pxl-post-title h1.pxl-post-title {
        font-size: 16px !important;
        line-height: 1.3 !important;
        letter-spacing: 0px !important;
    }
    /* On mobile: show Sklep + deepest category only */
    #pxl-post-title .pxl-breadcrumb li {
        display: none;
    }
    #pxl-post-title .pxl-breadcrumb li:nth-child(3),
    #pxl-post-title .pxl-breadcrumb li:nth-child(4),
    #pxl-post-title .pxl-breadcrumb li:nth-last-child(4) {
        display: block;
    }
}

/* 5. Gallery image aspect-ratio fix — prevents tall/short images from squishing */
.single.single-product .product .product-details .woocommerce-product-gallery .woocommerce-product-gallery__wrapper a img {
    object-fit: contain;
    width: 100%;
    height: auto;
    max-height: 520px;
}

/* 6. Single-image gallery: let it breathe with consistent padding */
.single.single-product .product .product-details .woocommerce-product-gallery.woocommerce-gallery-single {
    padding: 32px !important;
    border-radius: 16px !important;
}

/* 7. Price: make it stand out more */
.single.single-product .product .product-details .summary .price {
    font-size: 28px !important;
}

/* Price label "Cena brutto" */
.single.single-product .product .product-details .summary .product-price-label {
    margin: 0 0 2px;
    line-height: 1;
}
.single.single-product .product .product-details .summary .ppl-cena {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(64, 74, 61, 0.65);
}
.single.single-product .product .product-details .summary .ppl-brutto {
    font-size: 11px;
    font-weight: 400;
    color: rgba(64, 74, 61, 0.45);
    letter-spacing: 0.04em;
}

@media screen and (max-width: 767px) {
    .single.single-product .product .product-details .summary .price {
        font-size: 22px !important;
        text-align: right;
    }
    .single.single-product .product .product-details .summary .product-price-label {
        text-align: right;
    }
    /* Quantity + add-to-cart: centered, more gap between them */
    .single.single-product .product .product-details .summary form.cart {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }
    .single.single-product .product .product-details .summary form.cart .quantity {
        width: auto;
    }
    .single.single-product .product .product-details .summary form.cart .single_add_to_cart_button {
        width: auto;
    }
}

/* 9. Cart sidebar — prevent overflow on very narrow screens */
@media screen and (max-width: 380px) {
    #pxl-cart-sidebar .pxl-widget-cart-sidebar {
        width: 100vw !important;
    }
}

/* 8. Short description readability */
.single.single-product .product .product-details .summary .woocommerce-product-details__short-description {
    font-size: 15px;
    line-height: 1.7;
    color: rgba(64, 74, 61, .85);
}