/* =========================================================
   WooCommerce-specific layout: shop, product, cart, checkout,
   my-account. Structural classes match the theme's own template
   overrides in /woocommerce/, so this mostly wires up layout +
   a handful of elements WooCommerce still renders itself
   (notices, select2 country/state dropdowns).
   ========================================================= */

/* WooCommerce's core add-to-cart.js auto-inserts a "View cart" link right after
   the button on success — the mockup shows a popup instead (assets/js/main.js /
   the #es-added-modal markup in footer.php), so this stray link is redundant. */
.added_to_cart.wc-forward { display: none !important; }

/* ---------- notices ---------- */
.woocommerce-error, .woocommerce-message, .woocommerce-info {
	list-style: none; margin: 0 0 24px; padding: 14px 18px; border-radius: var(--es-radius-sm);
	background: var(--es-surface); border-left: 4px solid var(--es-blue); font-size: 14.5px; color: var(--es-text);
	display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.woocommerce-error { border-left-color: var(--es-danger); background: rgba(178, 52, 52, 0.06); }
.woocommerce-message { border-left-color: var(--es-success); background: var(--es-success-bg); }
.woocommerce-error a.button, .woocommerce-message a.button, .woocommerce-info a.button { order: 2; }
.woocommerce-error::before, .woocommerce-message::before, .woocommerce-info::before { display: none; }
/* The row-flex layout above is meant for a single message (+ optional action button)
   side by side. Checkout validation instead fills this same .woocommerce-error with one
   <li> per invalid field — under flex-wrap that became a chaotic multi-column grid of
   short lines instead of a plain list, which is what actually looked "ugly". */
.woocommerce-NoticeGroup-checkout .woocommerce-error { flex-direction: column; align-items: flex-start; }
/* Per-field messages WC's checkout.js injects directly under each input, duplicating
   what's already listed in the summary notice above — removed everywhere. */
.checkout-inline-error-message { display: none !important; }
/* Submitting checkout blocks the whole <form> (form.processing), but checkout.js can
   also independently block the payment and order-review sections inside it at the same
   moment (e.g. a field's change event firing right as "Kupuję i płacę" is clicked) —
   each block() adds its own dimming overlay + spinner, stacking into 2-3 visibly
   overlapping loaders. The outer form-level one is enough; suppress the nested ones. */
.checkout.processing .woocommerce-checkout-payment.blockUI .blockOverlay,
.checkout.processing .woocommerce-checkout-review-order-table.blockUI .blockOverlay {
	display: none;
}

/* ---------- shop layout ---------- */
.es-shop-layout { display: flex; gap: 28px; align-items: flex-start; flex-wrap: wrap; }
.es-shop-sidebar { flex: 1 1 260px; max-width: 280px; display: flex; flex-direction: column; gap: 20px; }
.es-shop-sidebar-box { background: var(--es-white); border-radius: var(--es-radius-lg); padding: 24px; box-shadow: var(--es-shadow-card); }
.es-shop-sidebar-box h3 { font-size: 15px; margin: 0 0 16px; }
.es-cat-list { display: flex; flex-direction: column; gap: 2px; }
.es-cat-list a { padding: 10px 12px; border-radius: 8px; color: #374151; font-size: 14.5px; font-weight: 500; }
.es-cat-list a.is-active { color: var(--es-blue); background: rgba(42, 87, 167, 0.1); font-weight: 700; }
.es-shop-main { flex: 3 1 640px; min-width: 0; }
.es-shop-main-head { margin-bottom: 24px; }
.es-shop-main-head h1, .es-shop-main-head h2 { font-size: 24px; margin: 0 0 8px; }
.es-shop-main-head p { color: var(--es-muted); font-size: 14.5px; line-height: 1.5; margin: 0; max-width: 600px; }
.es-shop-toolbar {
	display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
	padding: 14px 0; border-top: 1px solid var(--es-border); border-bottom: 1px solid var(--es-border); margin-bottom: 24px;
	font-size: 13.5px; color: var(--es-muted);
}
.es-shop-toolbar .woocommerce-ordering select { appearance: none; background: var(--es-white); border: 1px solid var(--es-border); border-radius: 8px; padding: 9px 36px 9px 14px; font-size: 13.5px; color: var(--es-text); }

/* ---------- shop: mobile filter drawer ----------
   Sidebar (categories + brand filter) stays a normal in-flow column on desktop. Under
   960px (same breakpoint the header switches to its hamburger menu at) it becomes a
   fixed off-canvas drawer opened via the "Filtry i kategorie" button, toggled by the
   [data-es-open-filters]/[data-es-close-filters] handlers in assets/js/main.js. */
.es-shop-mobile-filter-bar { display: none; margin-bottom: 20px; }
.es-filter-toggle { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; }
.es-shop-sidebar-head { display: none; }
.es-shop-filters-backdrop {
	position: fixed; inset: 0; background: rgba(20, 24, 32, 0.5); z-index: 250;
	display: none; opacity: 0; transition: opacity 0.25s ease;
}
.es-shop-filters-backdrop.is-open { display: block; opacity: 1; }

@media (max-width: 960px) {
	.es-shop-mobile-filter-bar { display: block; }
	.es-shop-sidebar {
		position: fixed; top: 0; left: 0; z-index: 251; flex: none;
		width: 86%; max-width: 340px; height: 100%; margin: 0; padding: 0; gap: 0;
		overflow-y: auto; background: var(--es-surface); box-shadow: var(--es-shadow-modal);
		transform: translateX(-100%); transition: transform 0.3s ease;
	}
	.es-shop-sidebar.is-open { transform: translateX(0); }
	.es-shop-sidebar-head {
		display: flex; align-items: center; justify-content: space-between; gap: 12px;
		padding: 18px 20px; background: var(--es-white); border-bottom: 1px solid var(--es-border);
		position: sticky; top: 0; z-index: 1;
	}
	.es-shop-sidebar-head span { font-family: var(--font-heading); font-weight: 700; font-size: 16px; }
	.es-shop-sidebar-close { background: none; border: none; font-size: 24px; line-height: 1; cursor: pointer; color: var(--es-muted); padding: 4px; }
	.es-shop-sidebar-box { box-shadow: none; border-radius: 0; padding: 20px; border-bottom: 1px solid var(--es-border); }
	body.es-filters-open-body { overflow: hidden; }
}
/* auto-fill (not auto-fit) so a category with only 1-2 products keeps normal card-sized
   columns instead of the lone card's column stretching to fill the whole row — auto-fill
   keeps the remaining empty tracks in the row rather than collapsing them away. */
.es-product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; }
.es-product-grid .es-card-body form.cart { margin: 0; }

/* Homepage teaser is a fixed 4-item curated row, not a flexible catalog grid — lock it to
   4 columns on desktop so it never grows a 5th (empty) track like auto-fill would at full
   container width. */
.es-product-grid-teaser { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 960px) {
	.es-product-grid-teaser { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
	.es-product-grid-teaser { grid-template-columns: 1fr; }
}

/* Related products is capped at 4 items (see woocommerce-hooks.php), so lock its grid to
   4 columns like the teaser instead of letting auto-fill open a 5th empty track at full
   container width. */
.es-related .es-product-grid { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 960px) {
	.es-related .es-product-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
	.es-related .es-product-grid { grid-template-columns: 1fr; }
}

/* get_price_html() prints del/ins directly into .es-card-price-row — there is no wrapping
   span.price to select, so style the del/ins/.woocommerce-Price-amount elements themselves.
   Mockup shows the current price before the struck-through old price, opposite WooCommerce's
   del-then-ins DOM order, so the visual order is flipped via flex `order`. */
.es-card-price-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.es-card-price-row ins { order: 1; text-decoration: none; }
.es-card-price-row del { order: 2; text-decoration: line-through; }
.es-card-price-row .woocommerce-Price-amount {
	font-family: var(--font-heading); font-weight: 700; font-size: 18px; color: var(--es-text);
}
.es-card-price-row del .woocommerce-Price-amount { font-family: var(--font-body); font-weight: 400; font-size: 13px; color: var(--es-placeholder); }

.es-product-grid .es-card-body .es-btn, .es-related .es-card-body .es-btn {
	padding: 11px; font-size: 13.5px;
}

/* ---------- single product ---------- */
.es-product { padding: 56px 0 72px; }
.es-product-layout { display: flex; gap: 48px; flex-wrap: wrap; }
.es-product-gallery { flex: 1 1 420px; min-width: 0; max-width: 520px; }
.es-product-main-image { position: relative; aspect-ratio: 1/1; background: #FAFBFC; border: 1px solid var(--es-border-light); border-radius: var(--es-radius-xl); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.es-product-main-image .es-badge { position: absolute; top: 14px; left: 14px; z-index: 2; }
.es-product-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 10px; margin-top: 12px; }
.es-product-thumbs button { padding: 0; border: 1px solid var(--es-border-light); border-radius: 8px; aspect-ratio: 1/1; background: #FAFBFC; cursor: pointer; overflow: hidden; }
.es-product-thumbs button.is-active { border-color: var(--es-blue); }
.es-product-thumbs img { width: 100%; height: 100%; object-fit: cover; }

.es-product-info { flex: 1 1 420px; min-width: 0; }
.es-product-info .es-card-sku { font-size: 12.5px; margin-bottom: 10px; }
.es-product-info h1 { font-size: clamp(24px, 3vw, 32px); margin: 0 0 14px; line-height: 1.25; }
/* Same as .es-card-price-row: get_price_html() has no span.price wrapper here either, so
   del/ins/.woocommerce-Price-amount are styled directly. */
.es-price-row { display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.es-price-row ins { order: 1; text-decoration: none; }
.es-price-row del { order: 2; text-decoration: line-through; }
.es-price-row .woocommerce-Price-amount, .es-price-now {
	font-family: var(--font-heading); font-weight: 700; font-size: 32px; color: var(--es-blue);
}
.es-price-row del .woocommerce-Price-amount, .es-price-old {
	font-family: var(--font-body); font-weight: 400; font-size: 16px; color: var(--es-placeholder);
}
.es-discount-badge { order: 3; font-size: 12.5px; font-weight: 700; color: var(--es-danger); background: rgba(178, 52, 52, 0.1); padding: 4px 10px; border-radius: 999px; }
.es-price-vat-note { font-size: 13px; color: var(--es-placeholder); margin-bottom: 24px; }
.es-product-info > .es-short-desc { color: #374151; font-size: 15px; line-height: 1.7; margin: 0 0 24px; }

.es-availability-box { display: flex; flex-direction: column; gap: 12px; padding: 18px 20px; background: var(--es-surface); border-radius: var(--es-radius-lg); margin-bottom: 26px; }
.es-availability-row { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--es-text); }
.es-availability-row svg { flex: 0 0 auto; }
.es-availability-row strong { font-weight: 600; }

.es-add-to-cart-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.es-qty-stepper { display: flex; align-items: center; border: 1px solid var(--es-border); border-radius: 8px; overflow: hidden; }
.es-qty-stepper button { width: 42px; height: 46px; border: none; background: var(--es-white); font-size: 18px; color: var(--es-text); cursor: pointer; }
.es-qty-stepper input { width: 44px; border: none; text-align: center; font-weight: 600; font-size: 15px; -moz-appearance: textfield; }
.es-qty-stepper input::-webkit-outer-spin-button, .es-qty-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.es-add-to-cart-row .es-btn { flex: 1 1 220px; padding: 14px 20px; font-size: 15px; }

.es-product-meta-row { display: flex; gap: 24px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--es-border-light); font-size: 13.5px; color: var(--es-muted); flex-wrap: wrap; }
.es-product-meta-row strong { color: var(--es-text); }

.es-related { padding: 80px 0 96px; }
.es-related h2 { font-size: 24px; margin: 0 0 24px; }

/* ---------- cart ---------- */
.es-cart-section { padding: 56px 0 96px; }
.es-cart-section h1 { font-size: clamp(26px, 3vw, 34px); margin: 0 0 32px; }
.es-cart-layout { display: flex; gap: 32px; align-items: flex-start; flex-wrap: wrap; }
.es-cart-items-col { flex: 3 1 480px; min-width: 0; display: flex; flex-direction: column; }
/* cart.php wraps .es-cart-summary in a plain <div data-es-cart-totals> — THAT div, not
   .es-cart-summary itself, is the actual flex item here, so column sizing must target it
   directly (flex/min-width on .es-cart-summary is inert since its parent isn't the flex
   container). Basis 280 (was 300 via the dead rule) + 3:1 grow narrows the summary and
   widens the items column relative to the mockup's own ratio, per explicit request. */
.es-cart-layout > [data-es-cart-totals] { flex: 1 1 330px; min-width: 310px; }
.es-cart-head-row { display: flex; padding: 0 0 14px; border-bottom: 1px solid var(--es-border); font-size: 12.5px; color: var(--es-placeholder); text-transform: uppercase; letter-spacing: 0.5px; }
.es-cart-head-row span:first-child { flex: 1 1 auto; }
.es-cart-head-qty { width: 130px; text-align: center; }
.es-cart-head-total { width: 110px; text-align: right; }
.es-cart-item-row { display: flex; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--es-border-light); gap: 16px; flex-wrap: wrap; }
.es-cart-item-main { display: flex; align-items: center; gap: 16px; flex: 1 1 220px; min-width: 0; }
.es-cart-item-thumb { width: 64px; height: 64px; border-radius: 10px; background: #FAFBFC; border: 1px solid var(--es-border-light); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; overflow: hidden; }
.es-cart-item-thumb img { width: 100%; height: 100%; object-fit: cover; }
.es-cart-item-name { font-family: var(--font-heading); font-weight: 600; font-size: 14.5px; line-height: 1.35; margin-bottom: 6px; }
.es-cart-item-price { font-size: 13.5px; color: var(--es-muted); }
.es-cart-item-actions { display: flex; align-items: center; gap: 16px; flex: 0 0 auto; margin-left: auto; }
/* Smaller than the single-product page's stepper (42x46) — the mockup uses a compact
   32x36 stepper for cart rows specifically, even though both share the .es-qty-stepper class. */
.es-cart-item-actions .es-qty-stepper button { width: 32px; height: 36px; font-size: 16px; }
.es-cart-item-actions .es-qty-stepper input { width: 34px; font-size: 14px; }
.es-cart-item-total { width: 110px; text-align: right; font-family: var(--font-heading); font-weight: 700; font-size: 15px; }
.es-cart-remove { width: 36px; height: 36px; flex: 0 0 auto; border: none; background: none; color: var(--es-placeholder); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.es-cart-remove:hover { color: var(--es-danger); }
.es-cart-continue { padding-top: 20px; font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }

.es-cart-summary { background: var(--es-surface); border-radius: var(--es-radius-lg); padding: 26px 24px; position: sticky; top: 100px; }
.es-cart-summary h3 { font-size: 16px; margin: 0 0 18px; }
.es-summary-row { display: flex; justify-content: space-between; font-size: 14.5px; color: #374151; margin-bottom: 12px; }
/* bold "wartość produktów" is a cart-only accent; checkout's Produkty/Dostawa rows share
   this same .es-summary-row markup but must stay regular weight (see .es-checkout-totals below) */
.es-cart-summary .es-summary-row:not(.is-muted) span:last-child { font-weight: 600; }
.es-summary-row.is-muted { color: var(--es-muted); margin-bottom: 16px; }
.es-summary-total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 16px; border-top: 1px solid var(--es-border); margin-bottom: 22px; }
.es-summary-total span:first-child { font-size: 15px; font-weight: 600; }
.es-summary-total .amount { font-family: var(--font-heading); font-weight: 700; font-size: 22px; color: var(--es-blue); }

.es-empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 64px 20px; background: var(--es-surface); border-radius: var(--es-radius-xl); }
.es-empty-state .es-empty-icon { width: 84px; height: 84px; border-radius: 999px; background: var(--es-white); display: flex; align-items: center; justify-content: center; margin-bottom: 24px; box-shadow: var(--es-shadow-card); }
.es-empty-state h2 { font-size: 22px; margin: 0 0 10px; }
.es-empty-state p { color: var(--es-muted); font-size: 15px; max-width: 420px; margin: 0 0 28px; line-height: 1.6; }

/* ---------- checkout ---------- */
.es-checkout-layout { display: flex; gap: 32px; align-items: flex-start; flex-wrap: wrap; }
/* checkout.js's submit_error() prepends the validation-error notice group directly into
   <form class="... es-checkout-layout">, which is itself the flex container above — so
   without this, the notice group becomes an unintended third flex item sitting beside
   the two real columns instead of a full-width banner above them. flex: 0 0 100% forces
   it onto its own wrapped row, pushing both columns down to the row below it. */
.es-checkout-layout > .woocommerce-NoticeGroup { flex: 0 0 100%; }
.es-checkout-form-col { flex: 2 1 480px; min-width: 0; }
.es-checkout-form-col h1, .es-checkout-form-col h2 { font-size: clamp(24px, 3vw, 30px); margin: 0 0 26px; }
.es-checkout-summary { flex: 1 1 320px; min-width: 300px; background: var(--es-surface); border-radius: var(--es-radius-lg); padding: 26px 24px; position: sticky; top: 100px; }
.es-checkout-summary h3 { font-size: 16px; margin: 0 0 18px; }
.es-checkout-totals { border-top: 1px solid var(--es-border); padding-top: 18px; }
.es-checkout-totals .es-summary-row span:last-child { font-weight: 400; }

/* select2 (country/state) reskinned to look like a plain .es-input — kept for my-account address
   forms, which still load Select2; the checkout itself dequeues it (single-country store) in
   favour of a plain <select>, styled further down. */
.select2-container .select2-selection--single {
	height: 46px !important; border: 1px solid var(--es-border) !important; border-radius: var(--es-radius-sm) !important;
	display: flex; align-items: center; padding: 0 14px;
}
.select2-container .select2-selection__rendered { padding: 0 !important; font-size: 14.5px; color: var(--es-text); line-height: normal !important; }
.select2-container .select2-selection__arrow { height: 44px !important; }

/* margin: 0 (not just margin-bottom) — .form-row is a <p>, whose browser-default
   margin-top would normally collapse into the previous row's margin-bottom, but
   grid containers (see .woocommerce-billing-fields__field-wrapper below) don't
   collapse margins between items, so that default top margin was stacking on
   top of the 20px bottom margin and roughly doubling the visible gap. */
.woocommerce form .form-row { margin: 0 0 15px; }
.woocommerce form .form-row label { display: block; font-size: 14px; margin-bottom: 8px; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
	width: 100%; padding: 12px 14px; border: 1px solid var(--es-border); border-radius: var(--es-radius-sm); font-size: 14.5px; background: var(--es-white);
}
/* WooCommerce's own JS (not its stylesheet, which is dequeued above) wraps every
   password field in <span class="password-input"> and adds a "show password" toggle
   button — styled entirely by that dequeued woocommerce.css, so it renders as a bare
   bordered box with no icon. Not part of the mockup on any password field; simplest
   is to just hide it rather than reimplement its icon/positioning from scratch. */
.woocommerce form .show-password-input { display: none; }
.woocommerce form .form-row select {
	appearance: none; -webkit-appearance: none; padding-right: 40px; color: var(--es-text); cursor: pointer;
	background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNUM2Nzc5IiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTYgOWw2IDYgNi02Ii8+PC9zdmc+");
	background-repeat: no-repeat; background-position: right 14px center; background-size: 16px 16px;
}
.woocommerce-additional-fields, #order_review { margin-top: 0; }

/* 2-up field rows (first name / last name, postcode / city, NIP / company name) — WooCommerce
   pairs these with form-row-first/form-row-last classes but ships no layout CSS for them once
   its own stylesheet is disabled (see woocommerce_enqueue_styles above). */
.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper,
.es-address-edit-fields,
.es-account-fields {
	display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px;
}
.woocommerce-billing-fields__field-wrapper .form-row-wide,
.woocommerce-shipping-fields__field-wrapper .form-row-wide,
.es-address-edit-fields .form-row-wide,
.es-account-fields .form-row-wide {
	grid-column: 1 / -1;
}
/* Shipping postcode/city specifically: WooCommerce's address-i18n.js re-applies each
   field's "default" locale definition (form-row-wide) on top of the PL-specific override
   whenever the shipping fields re-initialize — e.g. when "Chcę podać inne dane do
   wysyłki" is checked — undoing the form-row-first/last classes set in
   inc/woocommerce-hooks.php and dropping them back to one-per-row. IDs aren't part of
   what that script touches, so pin the grid columns directly instead of via class. */
#shipping_postcode_field { grid-column: 1; }
#shipping_city_field { grid-column: 2; }

/* Custom checkbox/radio skin used across the whole checkout (buyer-type, ship-to-different-address,
   shipping method, payment method, order-notes toggle, terms + privacy consent). */
.woocommerce input[type="checkbox"],
.woocommerce input[type="radio"] {
	appearance: none; -webkit-appearance: none; width: 18px; height: 18px; min-width: 18px;
	border: 2px solid var(--es-placeholder-icon); background: var(--es-white); cursor: pointer; margin: 0; flex: 0 0 auto;
	background-repeat: no-repeat; background-position: center; background-size: 10px 10px;
}
.woocommerce input[type="checkbox"] { border-radius: 4px; }
.woocommerce input[type="radio"] { border-radius: 50%; }
.woocommerce input[type="checkbox"]:checked,
.woocommerce input[type="radio"]:checked {
	border-color: var(--es-blue);
}
.woocommerce input[type="checkbox"]:checked {
	background-color: var(--es-blue);
	background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTMuNSA4LjVsMyAzIDYtNyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyLjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjwvc3ZnPg==");
}
.woocommerce input[type="radio"]:checked {
	box-shadow: inset 0 0 0 4px var(--es-blue);
}

/* "Kupuję jako osoba prywatna" / "Kupuję na firmę" */
.es-buyer-type { display: flex; flex-direction: column; gap: 14px; margin-bottom: 26px; }
.es-radio-card { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.es-radio-card input { margin-top: 2px; }
.es-radio-card-title { display: block; font-weight: 600; font-size: 14.5px; color: var(--es-text); }
.es-radio-card-desc { display: block; font-size: 13px; color: var(--es-muted); }
.es-field-business { display: none; }
#billing_nip_field .optional, #billing_company_field .optional { display: none; }

/* "Chcę dodać uwagi do zamówienia" toggle */
.es-checkbox-row { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14.5px; color: var(--es-text); margin-bottom: 16px; }
.woocommerce-additional-fields__field-wrapper { display: none; }

/* ---------- my account ---------- */
.es-account-shell { padding: 48px 0 96px; background: var(--es-surface); }
.es-account-head { display: flex; align-items: center; gap: 16px; margin-bottom: 32px; flex-wrap: wrap; }
.es-account-avatar { width: 56px; height: 56px; border-radius: 50%; background: var(--es-white); border: 1px solid var(--es-border); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.es-account-head h1 { font-size: 22px; margin: 0 0 4px; }
.es-account-head p { color: var(--es-muted); font-size: 14px; margin: 0; }
.es-account-layout { display: flex; gap: 28px; align-items: flex-start; flex-wrap: wrap; }
.es-account-nav { flex: 1 1 220px; max-width: 260px; min-width: 200px; background: var(--es-white); border: 1px solid var(--es-border); border-radius: var(--es-radius-lg); padding: 12px; display: flex; flex-direction: column; gap: 4px; }
.es-account-nav a { padding: 12px 14px; border-radius: 8px; color: var(--es-text); font-weight: 600; font-size: 14.5px; display: flex; align-items: center; gap: 10px; }
.es-account-nav a.is-active { background: var(--es-surface); color: var(--es-blue); }
.es-account-nav a.es-logout { color: var(--es-danger); }
.es-account-panel { flex: 1 1 480px; min-width: 0; background: var(--es-white); border: 1px solid var(--es-border); border-radius: var(--es-radius-lg); padding: 32px; }
.es-account-panel h2 { font-size: 19px; margin: 0 0 22px; }

.es-order-card { border: 1px solid var(--es-border); border-radius: var(--es-radius-lg); padding: 20px 22px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 16px; }
.es-order-card-id { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; flex-wrap: wrap; }
.es-order-card-id strong { font-family: var(--font-heading); font-weight: 700; font-size: 15px; }
.es-order-card-meta { font-size: 13.5px; color: var(--es-muted); }
.es-order-card-right { display: flex; align-items: center; gap: 20px; }
.es-order-card-total { font-family: var(--font-heading); font-weight: 700; font-size: 16px; color: var(--es-blue); }

.es-status-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
.es-status-completed { background: var(--es-success-bg); color: var(--es-success); }
.es-status-processing, .es-status-shipped { background: rgba(42, 87, 167, 0.1); color: var(--es-blue-dark); }
.es-status-cancelled, .es-status-failed { background: rgba(178, 52, 52, 0.1); color: var(--es-danger); }
.es-status-pending, .es-status-on-hold { background: rgba(90, 99, 115, 0.1); color: var(--es-muted); }

.es-address-card { border: 1px solid var(--es-border); border-radius: var(--es-radius-md); padding: 22px; }
.es-address-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.es-address-card-head h3 { font-size: 15.5px; margin: 0; }
.es-address-card address { font-style: normal; font-size: 14px; line-height: 1.7; color: #374151; }

.es-login-shell { padding: 48px 0 96px; }
.es-login-box { max-width: 420px; margin: 0 auto; border: 1px solid var(--es-border); border-radius: var(--es-radius-lg); padding: 32px 30px; }
.es-login-box h2 { font-size: 18px; margin: 0 0 20px; }
.es-login-box .es-field:last-of-type { margin-bottom: 8px; }
.es-login-foot-link { text-align: center; font-size: 14px; color: var(--es-muted); margin: 0; }

/* ---------- product specs tab (WooCommerce's own attributes table) ---------- */
.woocommerce-product-attributes { width: 100%; max-width: 600px; border-collapse: collapse; }
.woocommerce-product-attributes-item { border-bottom: 1px solid var(--es-border); }
.woocommerce-product-attributes-item__label { padding: 13px 0; font-size: 14.5px; color: var(--es-muted); font-weight: 400; text-align: left; width: 50%; }
.woocommerce-product-attributes-item__value { padding: 13px 0; font-size: 14.5px; color: var(--es-text); font-weight: 600; text-align: right; }
.woocommerce-product-attributes-item__value p { margin: 0; }

/* ---------- checkout: shipping toggle, order-notes, payment gateway list ---------- */
.es-checkout-subheading { font-family: var(--font-heading); font-weight: 700; font-size: 14.5px; margin: 24px 0 14px; }
/* form-checkout.php already prints its own "Dane rozliczeniowe" <h1>; WooCommerce's form-billing.php prints a second, redundant heading right inside it. */
.woocommerce-billing-fields > h3:first-child { display: none; }
/* WooCommerce's own "Proceed to checkout" / place-order buttons print as plain links unless styled directly (mirrors the price-markup issue: theme wrapper classes don't reach WC's own elements). */
a.checkout-button.button, .wc-proceed-to-checkout .checkout-button {
	display: flex; align-items: center; justify-content: center; gap: 8px;
	background: var(--es-blue); color: var(--es-white) !important; font-weight: 700; font-size: 15px;
	padding: 14px; border-radius: var(--es-radius-sm); text-align: center; transition: background 0.3s ease;
}
a.checkout-button.button:hover { background: var(--es-blue-dark); }
/* Mockup ties Ulica + the address-line-2 field together with a tighter 12px gap (vs. the
   usual 20px between distinct fields), and gives the email field extra room (24px) before
   the divider above the "Wysłać na inny adres?" / notes toggles. */
#billing_address_1_field { margin-bottom: 12px; }
#billing_email_field { margin-bottom: 24px; }
.woocommerce-shipping-fields { padding-top: 8px; border-top: 1px solid var(--es-border-light); }
/* WC core wraps this checkbox in a real <h3 id="ship-to-different-address">, so without
   resetting font-family here it inherits the global h1-h6 heading font (Oswald) instead of
   the body font every other checkout label uses — including "Chcę dodać uwagi do
   zamówienia" right below it (.es-checkbox-row), which made the two look mismatched. */
#ship-to-different-address { margin: 8px 0 16px; font-family: var(--font-body); }
/* font-weight normal (not 600) — same weight as the "Chcę dodać uwagi do zamówienia"
   toggle right below it (.es-checkbox-row); the mockup doesn't bold either one. */
#ship-to-different-address label { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14.5px; font-weight: 400; font-family: var(--font-body); }
/* margin-bottom, not just margin-top — this box has no bottom padding/border of its own
   parent to fall back on, so with no bottom margin the "Chcę dodać uwagi do zamówienia"
   checkbox right after it (a sibling section, .woocommerce-additional-fields) had
   nothing but its own 0 top-margin separating it from the box's edge when expanded. */
.woocommerce-shipping-fields .shipping_address { padding: 20px; background: var(--es-surface); border-radius: 10px; margin: 12px 0 16px; }
.woocommerce-additional-fields h3 { font-family: var(--font-heading); font-weight: 700; font-size: 14.5px; margin: 24px 0 14px; }
.woocommerce-additional-fields textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--es-border); border-radius: 8px; font-size: 14.5px; }

/* Shipping method + payment method cards — both use the same bordered-row shape as the mockup:
   radio + label on one line, an optional muted description line below (see
   woocommerce/cart/cart-shipping.php for the shipping-method markup). */
.es-delivery-options ul#shipping_method,
.wc_payment_methods {
	list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-direction: column; gap: 12px;
}
.es-delivery-options ul#shipping_method li,
.wc_payment_methods .wc_payment_method {
	background: var(--es-white); border: 1px solid var(--es-border); border-radius: 8px; padding: 12px 14px;
}
.es-delivery-options ul#shipping_method label {
	font-size: 14px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 10px; margin: 0;
}
.es-delivery-option-desc { display: block; font-size: 12.5px; color: var(--es-muted); padding-left: 28px; margin-top: 4px; }
/* WC core's checkout/payment-method.php puts the radio <input> and <label> as SIBLINGS
   inside the <li> (unlike our own shipping-method markup, which nests the input inside the
   label) — so "radio + label on one line" has to be grouped by flexing the <li> itself,
   not the label. Without this the block-level label (display:flex from a shared rule) was
   dropping to its own line below the inline radio instead of sitting next to it. */
/* row-gap kept small (4px) separately from column-gap (10px, radio-to-label spacing) —
   a single "gap: 10px" would also apply between the wrapped rows below, stacking on top of
   payment_box's own margin-top and doubling the visual space above the description. */
.wc_payment_methods .wc_payment_method { display: flex; flex-wrap: wrap; align-items: center; column-gap: 10px; row-gap: 4px; }
.wc_payment_methods .wc_payment_method > label { flex: 1 1 auto; font-size: 14px; font-weight: 600; cursor: pointer; margin: 0; }
/* flex-basis 100% wraps the description onto its own full-width row below the radio+label
   row; padding-left 28px matches .es-delivery-option-desc's indent under the label text. */
.wc_payment_methods .payment_box { flex: 0 0 100%; padding: 0 0 0 28px; border: none; font-size: 12.5px; color: var(--es-muted); }
.wc_payment_methods .payment_box p { margin: 0; color: inherit; }
/* checkout.js auto-hides the radio input (inline style="display:none") and auto-checks it
   whenever only one payment gateway is enabled — this store currently has just one, which
   made the row look structurally different from the always-multi-option delivery-method
   rows above it. Force it back on so a single gateway still reads as a selectable card. */
.wc_payment_methods input.input-radio { display: inline-block !important; }
.es-checkout-items { margin-bottom: 12px; }

/*
 * Terms + privacy-consent checkboxes, and the grey/disabled place-order button until both
 * are ticked. These two rows are NOT both inside .woocommerce-terms-and-conditions-wrapper:
 * checkout/terms.php closes that wrapper's </div> BEFORE firing
 * woocommerce_checkout_after_terms_and_conditions (the hook the privacy checkbox in
 * inc/woocommerce-hooks.php uses), so the privacy row renders as the wrapper's sibling,
 * not its child. Selectors scoped to ".woocommerce-terms-and-conditions-wrapper …" only
 * ever matched the terms row — the privacy row silently fell back to plain .form-row
 * defaults (different font-size, no checkbox positioning, no de-duplicated margin) even
 * though it looked like the same component. Both selectors below explicitly list both
 * rows — .woocommerce-terms-and-conditions-wrapper (terms) and .es-privacy-consent-row
 * (privacy, via the class added in inc/woocommerce-hooks.php) — so they're styled
 * identically regardless of DOM position.
 */
.woocommerce-terms-and-conditions-wrapper { margin-bottom: 14px; }
.es-privacy-consent-row.form-row { margin-bottom: 22px; }
/* "form .form-row" (20px margin-bottom, further up) outranks a plain 1-2 class selector on
   specificity, so this needs that same "form" element to actually win — otherwise the terms
   row keeps its own 20px margin on top of the 14px gap set above. */
.woocommerce form .woocommerce-terms-and-conditions-wrapper .form-row { margin: 0; }
/*
 * ".woocommerce form .form-row label" (further up) sets display:block at specificity
 * (0,2,2), beating a plain "display:flex" here — so this also needs the "form" element
 * to out-rank it. More importantly: flex was the wrong tool regardless of specificity.
 * WC's terms/privacy label contains <input>, a text <span>, and a trailing "&nbsp;<abbr>*"
 * marker as direct children/text nodes; as flex items each of those gets its own 10px
 * gap, so the "*" floats off as its own top-aligned column instead of trailing the
 * wrapped paragraph — the "rozjechane" misalignment. A classic absolute-positioned
 * checkbox with a padding-left indent lets the span+nbsp+abbr flow as one ordinary
 * wrapped paragraph (asterisk glued to the last word, wrapped lines indented under the
 * first), with only the checkbox pulled out of flow.
 */
.woocommerce form .woocommerce-terms-and-conditions-wrapper label,
.woocommerce form .es-privacy-consent-row label {
	display: block; position: relative; padding-left: 28px; cursor: pointer;
	font-size: 13px; color: var(--es-text); line-height: 1.5; font-weight: 400;
}
.woocommerce form .woocommerce-terms-and-conditions-wrapper label input,
.woocommerce form .es-privacy-consent-row label input {
	position: absolute; left: 0; top: 2px; margin: 0;
}
.woocommerce-terms-and-conditions-wrapper abbr.required,
.es-privacy-consent-row abbr.required { text-decoration: none; }
#place_order.is-disabled { background: var(--es-placeholder-icon); cursor: not-allowed; pointer-events: none; }

/* ---------- my-account: addresses overview (myaccount/my-address.php) ---------- */
.woocommerce-Addresses { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.es-address-card-head a { font-weight: 600; font-size: 13.5px; }
.es-address-card p.es-address-empty { font-size: 14px; color: var(--es-muted); margin: 0; }
.es-address-card p.es-address-buyer-type { font-size: 12px; font-weight: 700; color: var(--es-blue); text-transform: uppercase; letter-spacing: 0.5px; margin: 0 0 10px; }

/* ---------- my-account: back link shared by the order-detail and address-edit pages ---------- */
.es-account-back-link {
	display: inline-flex; align-items: center; gap: 8px; background: none; border: none;
	color: var(--es-blue); font-weight: 600; font-size: 14px; cursor: pointer; padding: 0;
	margin-bottom: 22px; font-family: var(--font-body);
}

/* ---------- my-account: single address edit form (myaccount/form-edit-address.php) ---------- */
.es-address-edit-card h3 { font-size: 15.5px; margin: 0 0 20px; }
.es-address-edit-fields .form-row { margin-bottom: 14px; }
.es-form-actions { display: flex; gap: 10px; margin-top: 4px; }
.es-form-actions .es-btn { flex: 1 1 auto; }

/* ---------- my-account: order detail (myaccount/view-order.php) ---------- */
.es-order-detail-head { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 16px; margin-bottom: 22px; }
.es-order-detail-head h2 { font-size: 19px; margin: 0 0 6px; }
.es-order-detail-head p { color: var(--es-muted); font-size: 13.5px; margin: 0; }
.es-order-detail-items { display: flex; flex-direction: column; gap: 16px; padding: 20px 0; border-top: 1px solid var(--es-border-light); border-bottom: 1px solid var(--es-border-light); margin-bottom: 24px; }
.es-order-detail-item { display: flex; align-items: center; gap: 14px; }
.es-order-detail-item-thumb { width: 52px; height: 52px; border-radius: 10px; background: var(--es-surface); border: 1px solid var(--es-border-light); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; overflow: hidden; }
.es-order-detail-item-thumb img { width: 100%; height: 100%; object-fit: cover; }
.es-order-detail-item-info { flex: 1 1 auto; min-width: 0; }
.es-order-detail-item-name { font-family: var(--font-heading); font-weight: 600; font-size: 14px; line-height: 1.35; margin-bottom: 4px; }
.es-order-detail-item-meta { font-size: 13px; color: var(--es-muted); }
.es-order-detail-item-total { font-family: var(--font-heading); font-weight: 700; font-size: 14.5px; flex: 0 0 auto; }
.es-order-detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; margin-bottom: 24px; }
.es-order-detail-grid h4 { font-size: 13.5px; margin: 0 0 10px; color: var(--es-muted); letter-spacing: 0.5px; }
.es-order-detail-strong { font-size: 14px; margin: 0 0 4px; font-weight: 600; }
.es-order-detail-muted { font-size: 13.5px; color: var(--es-muted); margin: 0; line-height: 1.6; }
.es-order-detail-address { font-style: normal; font-size: 13.5px; color: var(--es-muted); line-height: 1.6; }
.es-order-detail-address strong { color: var(--es-text); }
.es-order-detail-note { margin-bottom: 24px; }
.es-order-detail-note h4 { font-size: 13.5px; margin: 0 0 8px; color: var(--es-muted); letter-spacing: 0.5px; }
.es-order-detail-note p { font-size: 14px; margin: 0; }
.es-order-detail-totals { border-top: 1px solid var(--es-border-light); padding-top: 16px; }
.es-order-detail-total-row { display: flex; justify-content: space-between; font-size: 14.5px; color: #374151; margin-bottom: 16px; }
.es-order-detail-total-row-final { align-items: baseline; padding-top: 16px; border-top: 1px solid var(--es-border-light); margin-bottom: 0; font-size: 15px; font-weight: 600; }
.es-order-detail-total-amount { font-family: var(--font-heading); font-weight: 700; font-size: 22px; color: var(--es-blue); }
.es-order-detail-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 24px; }

/* ---------- my-account: account details view/edit toggle (myaccount/form-edit-account.php) ----------
   All fields live in one real <form> (WooCommerce's save handler only supports a single nonce/action),
   CSS just hides the edit fields behind the read-only summary until .is-editing is toggled (see
   assets/js/main.js's [data-es-account-edit-toggle]/[data-es-account-edit-cancel] handlers). The
   password section is not part of the toggle — the mockup shows it always expanded. */
.es-account-details-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px; }
.es-account-details-head h2 { margin: 0; }
.es-link-btn { background: none; border: none; color: var(--es-blue); font-weight: 600; font-size: 13.5px; cursor: pointer; padding: 0; font-family: var(--font-body); }
.es-account-details-view { margin-bottom: 32px; }
.es-account-details-row { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--es-border-light); font-size: 14px; }
.es-account-details-row:last-child { border-bottom: none; }
.es-account-details-row span { color: var(--es-muted); }
.es-account-fields, .es-account-details-edit-actions { display: none; }
.es-account-details-panel.is-editing .es-account-details-view,
.es-account-details-panel.is-editing [data-es-account-edit-toggle] { display: none; }
.es-account-details-panel.is-editing .es-account-fields { display: grid; margin-bottom: 24px; }
.es-account-details-panel.is-editing .es-account-details-edit-actions { display: flex; gap: 10px; margin-bottom: 32px; }
.es-account-details-edit-actions .es-btn { flex: 1 1 auto; }
.es-account-password-section { border-top: 1px solid var(--es-border-light); padding-top: 28px; }
.es-account-password-section h3 { font-size: 15.5px; margin: 0 0 18px; }
.es-account-password-fields { display: flex; flex-direction: column; gap: 14px; max-width: 380px; }
.es-account-password-fields .form-row { margin: 0; width: 100%; }
.es-account-password-fields button { align-self: flex-start; }

/* order-pay page (WooCommerce's own default checkout/form-pay.php, not themed) still renders its
   order-review table with these core classes. */
.woocommerce-view-order .shop_table, .woocommerce-order-details .shop_table, .woocommerce-table { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
.woocommerce-view-order .shop_table th, .woocommerce-view-order .shop_table td { padding: 12px; border-bottom: 1px solid var(--es-border-light); text-align: left; font-size: 14px; }

@media (max-width: 960px) {
	.es-cart-head-row { display: none; }
	.es-account-layout { flex-direction: column; }
	/* width:100% (not just align-items:stretch on the parent) — with nowrap + unshrinkable
	   children below, align-items:stretch alone still let the nav's cross size grow to fit
	   its own min-content instead of the column's width, blowing the whole page out
	   past the viewport instead of scrolling internally. */
	.es-account-nav { max-width: none; width: 100%; flex-direction: row; overflow-x: auto; -webkit-overflow-scrolling: touch; }
	/* Flex items shrink by default (flex-shrink:1) even inside an overflow-x:auto row, so
	   without this the nav links were squeezed narrower than their text and wrapped
	   ("Szczegóły konta" -> "Szczegóły" / "konta") instead of just scrolling horizontally. */
	.es-account-nav a { flex-shrink: 0; white-space: nowrap; }
	.es-account-panel { padding: 24px 20px; }
}

@media (max-width: 560px) {
	/* 2-up field rows (imię/nazwisko, kod pocztowy/miasto, etc.) don't fit two real inputs
	   side by side once the account panel's own width drops below ~330px net of padding —
	   stack them like form-row-wide already does for the full-width fields. */
	.woocommerce-billing-fields__field-wrapper,
	.woocommerce-shipping-fields__field-wrapper,
	.es-address-edit-fields,
	.es-account-fields {
		grid-template-columns: 1fr;
	}
	#shipping_postcode_field, #shipping_city_field { grid-column: 1; }
}