/* ==========================================================================
   BUKFC SHOP — brand color tokens
   Colors sampled from shop.bukfc.com (gold/black brand palette).
   ========================================================================== */
:root {
	--bukfc-gold: #FFDD00;
	--bukfc-gold-dark: #E0C200;
	--bukfc-black: #000000;
	--bukfc-black-soft: #141414;
	--bukfc-white: #FFFFFF;
	--bukfc-gray-border: #2A2A2A;
	--bukfc-gray-text: #B3B3B3;
}

/* ==========================================================================
   PRELOADER — full-page overlay shown while the initial page loads, and
   re-shown when navigating to another page on the site (shop filters,
   pagination, category links, etc. are plain <a href> full-page reloads —
   see header.php for the markup/safety-timeout script and init.js for the
   click-triggered re-show).
   ========================================================================== */
.bukfc-preloader {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--bukfc-black);
	opacity: 1;
	visibility: visible;
	transition: opacity .25s ease, visibility 0s linear 0s;
}
.bukfc-preloader.is-hidden {
	opacity: 0;
	visibility: hidden;
	transition: opacity .25s ease, visibility 0s linear .25s;
}
.bukfc-preloader-spinner {
	width: 48px;
	height: 48px;
	border: 4px solid var(--bukfc-gray-border);
	border-top-color: var(--bukfc-gold);
	border-radius: 50%;
	animation: bukfc-preloader-spin .8s linear infinite;
}
@keyframes bukfc-preloader-spin {
	to {
		transform: rotate(360deg);
	}
}
@media (prefers-reduced-motion: reduce) {
	.bukfc-preloader-spinner {
		animation-duration: 2s;
	}
}

/* ==========================================================================
   Baseline WooCommerce styling on the bukfc palette.
   These are safe defaults for the default WC markup; archive/single
   templates get their own dedicated styles in later phases.
   ========================================================================== */
/* Base theme's `body { color: #333333; }` (assets/scss/main.css) assumed a
   light page background — on our dark/black site that's near-invisible
   dark-gray-on-black text. Plain WordPress pages (page.php — legal pages,
   "Робота в клубі", etc.) don't get a .woocommerce/.woocommerce-page body
   class, so they never picked up the white override below and rendered
   with unreadable text. Set it site-wide as the base, before the more
   specific WooCommerce rule (kept for clarity, now redundant but harmless). */
body {
	color: var(--bukfc-white);
}
.woocommerce,
.woocommerce-page {
	color: var(--bukfc-white);
}

/* WooCommerce's own notice boxes ("no products found", cart/coupon errors,
   "added to cart" messages, account-page confirmations, etc.) default to a
   light gray panel with a colored top border — a11y-friendly on WC's own
   light theme, but it renders as a stray white box on our dark palette.
   Same dark-panel treatment as every other card on the site, semantic
   accent colors kept (green success / red error), gold instead of WC's
   blue for plain "info" notices to match the brand accent. */
.woocommerce-error,
.woocommerce-info,
.woocommerce-message {
	background-color: var(--bukfc-black-soft);
	color: var(--bukfc-white);
	border-top-color: var(--bukfc-gold);
}
.woocommerce-info::before {
	color: var(--bukfc-gold);
}
/* WC core's own bundled icon font (assets/fonts/WooCommerce.woff2) has no
   glyph mapped at U+E028 — the codepoint its own CSS uses for this exact
   icon — so it renders as an empty "tofu" box (confirmed: U+E015/U+E016,
   the message/error icons from the same font, render fine). Swap to the
   theme's own Font Awesome "info-circle" glyph, already loaded elsewhere
   (header search icon), instead of patching the vendored font/CSS. */
.woocommerce-info::before {
	font-family: FontAwesome;
	content: "\f05a";
}
.woocommerce-message {
	border-top-color: #4CAF50;
}
.woocommerce-message::before {
	color: #4CAF50;
}
.woocommerce-error {
	border-top-color: #E05252;
}
.woocommerce-error::before {
	color: #E05252;
}
.woocommerce-error a.button,
.woocommerce-info a.button,
.woocommerce-message a.button {
	background: var(--bukfc-gold);
	color: var(--bukfc-black);
	border-radius: 999px;
}
.woocommerce-error a.button:hover,
.woocommerce-info a.button:hover,
.woocommerce-message a.button:hover {
	background: var(--bukfc-gold-dark);
}
/* WC core floats this button right (`.woocommerce-message .button{float:right}`)
   with no reserved gap, expecting its own plain, compact button label —
   our pill/uppercase button treatment above makes it wide enough that the
   notice text's first line runs straight into it with no gap (seen on
   /my-account/orders' "confirm your email" notice). Flex row instead of
   float gives the button a real gutter and wraps it below the text once
   the box gets too narrow, instead of letting text flow around it. */
.woocommerce-error,
.woocommerce-info,
.woocommerce-message {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px 24px;
}
/* WC core's own icon (`::before`) is `position:absolute; top:1em` — a fixed
   offset from the box's top edge, so it stays pinned near the top and never
   actually centers against the flex row next to it. Barely noticeable on a
   single short line, but once a button (taller, pill-shaped) makes this row
   wrap onto a taller box via align-items:center above, the icon visibly sat
   above-center instead of level with the text/button. top:50% + a
   translateY anchors it at the box's true vertical center instead, however
   tall the box ends up being. */
.woocommerce-error::before,
.woocommerce-info::before,
.woocommerce-message::before {
	top: 50%;
	transform: translateY(-50%);
}
.woocommerce-error .button,
.woocommerce-info .button,
.woocommerce-message .button {
	float: none;
	margin-left: auto;
}

/* Same white-box problem, different component: the WooCommerce Blocks
   checkout/cart (cart-totals, "no payment methods available", etc.) uses
   its own .wc-block-components-notice-banner markup instead of the
   classic .woocommerce-error/-info/-message above, so that fix doesn't
   reach it — found on /checkout's payment-methods notice. */
.wc-block-components-notice-banner {
	background-color: var(--bukfc-black-soft) !important;
	border-color: var(--bukfc-gray-border) !important;
	color: var(--bukfc-white) !important;
}
.wc-block-components-notice-banner .wc-block-components-notice-banner__content .wc-forward {
	color: var(--bukfc-white) !important;
}
.wc-block-components-notice-banner.is-info {
	border-color: var(--bukfc-gold) !important;
}
.wc-block-components-notice-banner.is-info > svg {
	background-color: var(--bukfc-gold) !important;
	fill: var(--bukfc-black) !important;
}
.wc-block-components-notice-banner.is-success {
	border-color: #4CAF50 !important;
}
.wc-block-components-notice-banner.is-success > svg {
	background-color: #4CAF50 !important;
}
.wc-block-components-notice-banner.is-warning,
.wc-block-components-notice-banner.is-error {
	border-color: #E05252 !important;
}
.wc-block-components-notice-banner.is-warning > svg,
.wc-block-components-notice-banner.is-error > svg {
	background-color: #E05252 !important;
}

/* Base theme's `a:hover { text-decoration: underline; }` (main.css) adds an
   underline on top of whatever color change each link already gets on
   hover — every shop-theme.css `*:hover` rule below only changes color, so
   without this reset those links pick up an unintended underline too.
   .footer-club-link is the one exception (permanently underlined, styled
   like a plain URL) and gets its underline restored explicitly below. */
a:hover {
	text-decoration: none;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h3 {
	color: var(--bukfc-white);
}

.woocommerce ul.products li.product .price {
	color: var(--bukfc-gold);
}

.woocommerce span.onsale {
	background: var(--bukfc-gold);
	color: var(--bukfc-black);
	font-weight: 700;
}

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce ul.products li.product a.add_to_cart_button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt {
	background: var(--bukfc-gold) !important;
	color: var(--bukfc-black) !important;
	border: none;
	border-radius: 999px;
	text-transform: uppercase;
	font-weight: 700;
	transition: background-color .3s ease;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce ul.products li.product a.add_to_cart_button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
	background: var(--bukfc-gold-dark) !important;
	color: var(--bukfc-black) !important;
}

/* "Переглянути кошик" appears stacked right under the just-clicked "Додати
   в кошик" button — outline it instead of a second solid gold fill so the
   two don't read as one oversized doubled-up button. Product cards are
   flex columns (li.product { display:flex; flex-direction:column }), whose
   children default to align-self:stretch — the "Додати в кошик" button
   opts out with align-self:flex-start to stay an auto-width pill, but this
   link is injected by WooCommerce's own JS after the fact with no such
   override, so it stretched to the card's full width while the button
   above it stayed content-width. Match the button's sizing instead of
   forcing both to stretch. */
.woocommerce a.added_to_cart {
	display: inline-block;
	align-self: flex-start;
	background: transparent !important;
	color: var(--bukfc-gold) !important;
	border: 1px solid var(--bukfc-gold) !important;
	border-radius: 999px;
	text-transform: uppercase;
	font-weight: 700;
	font-size: 13px;
	text-align: center;
	margin-top: 8px;
	padding: 8px 16px;
}
.woocommerce a.added_to_cart:hover {
	background: var(--bukfc-gold) !important;
	color: var(--bukfc-black) !important;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--bukfc-gold);
	font-size: 24px;
}

.woocommerce nav.woocommerce-pagination ul {
	border-color: var(--bukfc-gray-border);
}

.woocommerce nav.woocommerce-pagination ul li {
	border-right-color: var(--bukfc-gray-border);
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	color: var(--bukfc-white);
	background: var(--bukfc-black-soft);
}

.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li span.current {
	background: var(--bukfc-gold);
	color: var(--bukfc-black);
}

/* ==========================================================================
   SHOP TOPBAR
   ========================================================================== */
html {
	background: var(--bukfc-black);
}
body {
	/* Dark overlay ON TOP of the pattern (not a separate box per block) —
	   without it every block's text sits directly on the busy map lines
	   and is unreadable; this keeps the texture faintly visible everywhere
	   (still "not just flat dark", per the original brand-background ask)
	   while restoring contrast site-wide in one place, instead of
	   reintroducing per-block boxed panels that fight the structural
	   parity work already done against the reference. */
	background: linear-gradient(rgba(0, 0, 0, .68), rgba(0, 0, 0, .68)), var(--bukfc-black) url("../img/brand/bg-pattern.png") no-repeat center top / cover fixed;
}
#wrap {
	background: transparent;
}
.shop-topbar {
	position: sticky;
	top: 0;
	/* Must outrank .mobile_menu_container's z-index:100 (boilerplate mobile
	   nav drawer, global.scss) — position:sticky + z-index here makes this
	   header its OWN stacking context, so the burger button inside it
	   (z-index:101, see shop-theme.css's own .mobile_menu_active .burger
	   rule) can never out-rank an ELEMENT OUTSIDE this header no matter how
	   high its z-index goes; the comparison happens at this header's level
	   first. With z-index:50 < 100, the whole header — burger included —
	   painted BEHIND the open drawer, making the close "X" invisible. */
	z-index: 102;
	background: rgba(0, 0, 0, .92);
	border-bottom: 2px solid var(--bukfc-gold);
	/* Base theme's generic `header { will-change: transform, opacity; }`
	   (assets/scss/main.css) forces this sticky header onto its own
	   compositing layer; combined with the fixed body background that
	   layer stops repainting after a few scroll ticks and the whole bar
	   (and, transitively, the sidebar pinned under it below) visually
	   vanishes even though its box stays correctly laid out at top:0.
	   Reset it so the sticky bar actually repaints while scrolling. */
	will-change: auto;
}
/* .club-nav / .shop-sidebar now run from the very top of the screen
   (top:0, see below) instead of starting under this header — so the
   header itself has to stop short of their 390px-wide column instead of
   spanning edge to edge above them, or its own background (opaque,
   z-index:102 — above the sidebars' 40) would paint over their logo/top
   area. margin-left shrinks a block box's auto width automatically, so
   this alone both moves and narrows the bar correctly. Gated to the same
   1140px breakpoint as the columns' own mobile_hide. */
@media (min-width: 1141px) {
	.shop-topbar {
		margin-left: 390px;
	}
}
.shop-topbar-inner {
	display: flex;
	align-items: center;
	gap: 24px;
	width: 100%;
	padding: 14px 30px;
}
.shop-logo {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}
.shop-logo img {
	max-height: 48px;
	width: auto;
	display: block;
}
.shop-logo-text {
	font-size: 20px;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--bukfc-gold);
	letter-spacing: .5px;
}
.shop-topbar-search {
	flex: 1 1 auto;
	max-width: 420px;
	display: flex;
	position: relative;
}
.shop-topbar-search-input {
	width: 100%;
	height: 40px;
	padding: 0 44px 0 16px;
	border: 1px solid var(--bukfc-gray-border);
	border-radius: 999px;
	background: var(--bukfc-black-soft);
	color: var(--bukfc-white);
	font-size: 16px;
}
.shop-topbar-search-input::placeholder {
	color: var(--bukfc-gray-text);
}
.shop-topbar-search-input:focus {
	outline: none;
	border-color: var(--bukfc-gold);
}
.shop-topbar-search-btn {
	position: absolute;
	right: 4px;
	top: 4px;
	width: 32px;
	height: 32px;
	border: none;
	border-radius: 50%;
	background: var(--bukfc-gold);
	color: var(--bukfc-black);
	cursor: pointer;
}
.shop-topbar-actions {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-left: auto;
	flex-shrink: 0;
}
.header-account-icon,
.header-cart-icon {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	color: var(--bukfc-white);
	background: var(--bukfc-black-soft);
	font-size: 16px;
	transition: background-color .3s ease, color .3s ease;
}
.header-account-icon:hover,
.header-cart-icon:hover {
	background: var(--bukfc-gold);
	color: var(--bukfc-black);
}
.header-cart-icon .cart-count {
	position: absolute;
	top: -4px;
	right: -4px;
	min-width: 20px;
	height: 20px;
	padding: 0 4px;
	border-radius: 999px;
	background: var(--bukfc-gold);
	color: var(--bukfc-black);
	font-size: 12px;
	font-weight: 700;
	line-height: 20px;
	text-align: center;
}
.header-cart-icon:hover .cart-count {
	background: var(--bukfc-black);
	color: var(--bukfc-gold);
}

/* Header account icon dropdown (logged-out visitors) — offers Login and
   Register instead of hard-navigating straight to /my-account/. */
.header-account {
	position: relative;
}
button.header-account-icon {
	border: none;
	cursor: pointer;
}
.header-account-dropdown {
	display: none;
	position: absolute;
	top: calc(100% + 12px);
	right: 0;
	width: 240px;
	background: var(--bukfc-black-soft);
	border: 1px solid var(--bukfc-gray-border);
	border-radius: 8px;
	padding: 16px;
	box-shadow: 0 12px 30px rgba(0, 0, 0, .45);
	z-index: 50;
}
.header-account.is-open .header-account-dropdown {
	display: block;
}
.header-account-dropdown-title {
	color: var(--bukfc-white);
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .3px;
	margin: 0 0 12px;
}
.header-account-dropdown-btn {
	display: block;
	text-align: center;
	text-decoration: none;
	border-radius: 999px;
	padding: 10px 16px;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.header-account-dropdown-btn--primary {
	background: var(--bukfc-gold);
	color: var(--bukfc-black);
}
.header-account-dropdown-btn--primary:hover {
	background: var(--bukfc-gold-dark);
}
.header-account-dropdown-btn--secondary {
	background: transparent;
	color: var(--bukfc-white);
	border: 1px solid var(--bukfc-gray-border);
	margin-top: 8px;
}
.header-account-dropdown-btn--secondary:hover {
	border-color: var(--bukfc-gold);
	color: var(--bukfc-gold);
}

/* Login modal — opened from the header dropdown's "Ввійти" button so a
   returning customer doesn't have to leave the page to log in. */
body.bukfc-modal-open {
	overflow: hidden;
}
.bukfc-modal {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 1000;
}
.bukfc-modal.is-open {
	display: block;
}
.bukfc-modal-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .65);
}
.bukfc-modal-dialog {
	position: relative;
	width: 600px;
	max-width: calc(100% - 32px);
	max-height: 84vh;
	overflow-y: auto;
	margin: 8vh auto 0;
	background: var(--bukfc-black-soft);
	border: 1px solid var(--bukfc-gray-border);
	border-radius: 8px;
}
.bukfc-modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 24px;
	border-bottom: 1px solid var(--bukfc-gray-border);
}
.bukfc-modal-title {
	margin: 0;
	font-size: 22px;
	font-weight: 400;
	color: var(--bukfc-white);
}
.bukfc-modal-close {
	background: none;
	border: none;
	color: var(--bukfc-gray-text);
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	padding: 0;
}
.bukfc-modal-close:hover {
	color: var(--bukfc-gold);
}
.bukfc-modal-body {
	padding: 24px;
}
/* The modal reuses the same .bukfc-account-card markup as the My Account
   page (template-parts/shop/account-login-card.php), but the modal dialog
   already supplies its own background/border/radius, so the card's own
   chrome is stripped here to avoid a nested "box within a box". */
.bukfc-modal-body .bukfc-account-card {
	background: transparent;
	border: none;
	border-radius: 0;
	max-width: none;
}
.bukfc-modal-body .bukfc-account-card form.woocommerce-form {
	padding: 0;
}
/* .bukfc-form-footer's negative side/bottom margins (see the rule further
   down) are sized to cancel out the card form's own 24px padding, stretching
   the footer flush with the card's rounded corners — but the modal zeroes
   that padding out above, so here there's nothing left for the negative
   margin to cancel. It pulled the footer (and the submit button inside it)
   24px past the modal body's own edge instead, clipping the button against
   the dialog's bottom edge. Only the top divider/spacing still applies. */
.bukfc-modal-body .bukfc-form-footer {
	margin: 24px 0 0;
	padding: 16px 0 0;
	border-radius: 0;
}
.bukfc-modal-footer {
	padding: 16px 24px;
	border-top: 1px solid var(--bukfc-gray-border);
	text-align: center;
}
.bukfc-modal-footer a {
	color: var(--bukfc-gold);
}

/* "Товар додано до кошика" modal (assets/js/init.js fills this in after a
   successful add-to-cart) — shop.shakhtar.com's pattern: thumbnail + name +
   line total, a cart count/subtotal summary line, then two actions. */
.cart-modal-item {
	display: flex;
	align-items: center;
	gap: 16px;
}
.cart-modal-item-image {
	flex: 0 0 64px;
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: 4px;
	background: var(--bukfc-black);
	margin-bottom: 0;
}
.cart-modal-item-info {
	flex: 1 1 auto;
	min-width: 0;
}
.cart-modal-item-name {
	color: var(--bukfc-white);
	font-weight: 600;
}
.cart-modal-item-variation {
	color: var(--bukfc-gray-text);
	font-size: 14px;
	margin-top: 2px;
}
.cart-modal-item-variation:empty {
	display: none;
}
.single_add_to_cart_button.loading {
	opacity: .6;
	pointer-events: none;
}
.bukfc-add-to-cart-error {
	color: #E05252;
	font-size: 14px;
	margin: 10px 0 0;
}
.cart-modal-item-total {
	flex: 0 0 auto;
	color: var(--bukfc-gold);
	font-weight: 700;
	white-space: nowrap;
}
.cart-modal-summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid var(--bukfc-gray-border);
	color: var(--bukfc-white);
}
.cart-modal-summary-total {
	font-weight: 700;
}
.cart-modal-footer {
	display: flex;
	gap: 12px;
	text-align: left;
}
.cart-modal-btn {
	flex: 1 1 auto;
	text-align: center;
	padding: 12px 16px;
	border-radius: 999px;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 14px;
	cursor: pointer;
}
.cart-modal-btn-outline {
	background: none;
	border: 1px solid var(--bukfc-gray-border);
	color: var(--bukfc-white);
}
.cart-modal-btn-outline:hover {
	border-color: var(--bukfc-gold);
}
.cart-modal-btn-primary {
	background: var(--bukfc-gold);
	border: 1px solid var(--bukfc-gold);
}
/* .bukfc-modal-footer a{color:gold} (used by the plain-link login modal
   footer) is a class+tag selector, which beats a lone .cart-modal-btn-primary
   class on specificity regardless of source order — the gold text landed
   invisible on this button's own gold background. Match its specificity. */
.cart-modal-footer .cart-modal-btn-primary,
.cart-modal-footer .cart-modal-btn-primary:hover {
	color: var(--bukfc-black);
}
.cart-modal-btn-primary:hover {
	background: var(--bukfc-gold-dark);
	border-color: var(--bukfc-gold-dark);
}

/* ==========================================================================
   SHOP BODY LAYOUT — sidebar + content
   ========================================================================== */
.shop-body {
	display: flex;
	align-items: stretch;
	width: 100%;
}
/* .club-nav and .shop-sidebar are position:fixed (see below) — matching
   shop.shakhtar.com's own left panel exactly (confirmed from its source:
   .ut2-sw-w{position:fixed!important;inset-block-start:0;inset-inline-start:0;
   block-size:100dvh}), not position:sticky. A fixed element is pulled
   completely out of normal flow — nothing else in .shop-body would reserve
   space for it — so the rest of .shop-body's content needs this padding to
   avoid sitting underneath the two fixed columns. Gated to the same 1140px
   breakpoint as the columns' own .mobile_hide (below that they're not
   rendered, so the content needs the full width back). */
@media (min-width: 1141px) {
	.shop-body {
		padding-left: 390px;
	}
}
.club-nav {
	/* Fixed, not sticky: pinned to the viewport itself regardless of how
	   tall the page next to it grows, exactly like the reference — a plain
	   sticky element (the previous approach here) still scrolls out of view
	   once its own containing block's bottom passes the viewport, which
	   doesn't happen with position:fixed. */
	position: fixed;
	top: 0;
	left: 0;
	width: 150px;
	height: 100vh;
	background: var(--bukfc-black);
	border-right: 1px solid var(--bukfc-gray-border);
	text-align: center;
	z-index: 40;
}
.club-nav-inner {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 24px 0 0 0;
	overflow-y: auto;
}
/* Pins the social icons to the bottom of the fixed-height column (shop.
   shakhtar.com's own left column does the same) instead of them just
   sitting right under the nav links with a stretch of empty column below —
   margin-top:auto on the last flex child pushes it as far down as the
   column's own height (above) allows. */
.club-nav-contact {
	margin-top: auto;
	padding: 16px 12px 20px;
	border-top: 1px solid var(--bukfc-gray-border);
}
.club-nav-logo {
	display: inline-flex;
	/* .club-nav-inner is a flex column (for the contact block's bottom-pin
	   below) — .club-nav's own text-align:center no longer reaches this as
	   a flex item, so it needs its own cross-axis centering instead of
	   relying on the (now-irrelevant, for flex items) inherited text-align. */
	align-self: center;
	margin-bottom: 10px;
}
.club-nav-logo img {
	/* Reference (shop.shakhtar.com) runs its crest at ~38% of its sidebar's
	   width (107px in a 280px column) — this column is narrower (150px), so
	   64px keeps a similarly prominent, clearly-visible logo instead of the
	   small 44px icon it was rendering at before. */
	width: 64px;
	height: 64px;
	object-fit: contain;
}
/* Same look as .club-nav-item a below — this link sits outside the <ul>
   (it's not part of the club-wide section list), but should read as one
   more row in that same nav, not a visually distinct little caption. */
.club-nav-home {
	display: block;
	width: 100%;
	padding: 10px 12px;
	color: var(--bukfc-gray-text);
	font-size: 16px;
	text-transform: uppercase;
	letter-spacing: .3px;
}
.club-nav-home:hover {
	color: var(--bukfc-white);
}
.club-nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.club-nav-item a {
	display: block;
	padding: 10px 12px;
	color: var(--bukfc-gray-text);
	font-size: 16px;
	text-transform: uppercase;
	letter-spacing: .3px;
}
.club-nav-item a:hover {
	color: var(--bukfc-white);
}
.club-nav-item.is-active a {
	background: var(--bukfc-gold);
	color: var(--bukfc-black);
	font-weight: 700;
}
/* This column is only 150px wide — the boilerplate's own 40px icon circles
   (.s-link a, main.css) don't fit five across, so this modifier lets the
   row wrap onto a second line instead of overflowing, at a size just a
   touch under the footer's own 40px rather than a much smaller one. */
.club-nav-contact .s-link.s-link--small {
	justify-content: center;
	flex-wrap: wrap;
	row-gap: 10px;
}
.club-nav-contact .s-link.s-link--small a {
	width: 34px;
	height: 34px;
	margin: 0 4px;
}
.club-nav-contact .s-link.s-link--small a:before {
	/*font-size: 16px;*/
	font-size: 20px;
}
.club-nav-contact .s-link.s-link--small a.s-link-icon-svg svg {
	width: 16px;
	height: 16px;
}

.shop-sidebar {
	/* Fixed, same reasoning as .club-nav above — placed right after it. */
	position: fixed;
	top: 0;
	left: 150px;
	width: 240px;
	height: 100vh;
	/*background: rgba(0, 0, 0, .8);*/
	background: rgba(0, 0, 0, 1);
	border-right: 1px solid var(--bukfc-gray-border);
	z-index: 40;
}
.shop-sidebar-inner {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 20px 0 0 0;
	overflow-y: auto;
}
.shop-sidebar-contact {
	/* Pinned to the bottom of the fixed-height column, same as
	   .club-nav-contact next to it — see that rule's comment. */
	margin-top: auto;
	padding: 16px 24px 20px;
	border-top: 1px solid var(--bukfc-gray-border);
	font-size: 17px;
}
.shop-sidebar-contact a {
	color: var(--bukfc-gray-text);
}
.shop-sidebar-contact a:hover {
	color: var(--bukfc-gold);
}
.shop-body #content {
	flex: 1 1 auto;
	min-width: 0;
	padding: 40px;
}

/* ==========================================================================
   SHOP CATEGORY NAV (sidebar + mobile)
   ========================================================================== */
.shop-nav-all {
	display: block;
	padding: 12px 24px;
	color: var(--bukfc-gold);
	font-weight: 700;
	text-transform: uppercase;
	font-size: 17px;
	border-bottom: 1px solid var(--bukfc-gray-border);
}
.shop-nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.shop-nav-item {
	position: relative;
	border-bottom: 1px solid var(--bukfc-gray-border);
}
.shop-nav-link {
	display: block;
	padding: 12px 24px;
	color: var(--bukfc-white);
	font-size: 16px;
	text-transform: uppercase;
	letter-spacing: .2px;
}
/* The mobile drawer's <ul> gets both "shop-nav-list" (this component's own
   class, styled above) AND the boilerplate's "level_a" (footer.php, for its
   border-bottom/hover) — but .level_a > li > a (main.css) also hard-sets
   height:30px/line-height:30px on this very link. With the site's global
   box-sizing:border-box, our own 12px+12px vertical padding above eats
   straight into that fixed 30px box, leaving ~6px for a 16px font — the
   text overflowed the link's actual box (and the row's border-bottom,
   drawn at the un-overflowed 30px mark) instead of growing the row to fit,
   so the divider line visually cut across the middle of the text. */
.mobile_menu_container .level_a > li > a.shop-nav-link {
	height: auto;
	line-height: 1.4;
}
.shop-nav-item.has-children .shop-nav-link {
	padding-right: 44px;
}
.shop-nav-item:hover > .shop-nav-link,
.shop-nav-item.is-open > .shop-nav-link {
	color: var(--bukfc-gold);
}
.shop-nav-toggle {
	position: absolute;
	top: 12px;
	right: 20px;
	width: 20px;
	height: 20px;
	text-align: center;
	line-height: 20px;
	color: var(--bukfc-gray-text);
	cursor: pointer;
}
.shop-nav-sublist {
	display: none;
	list-style: none;
	margin: 0;
	padding: 4px 0 10px;
	background: var(--bukfc-black-soft);
}
.shop-nav-subitem a {
	display: block;
	padding: 8px 24px 8px 36px;
	font-size: 17px;
	color: var(--bukfc-gray-text);
}
.shop-nav-subitem a:hover {
	color: var(--bukfc-gold);
}

/* ==========================================================================
   MOBILE NAV — reuse existing .mobile_menu_container, restyle to palette
   ========================================================================== */
.mobile_menu_container {
	background: var(--bukfc-black) !important;
	/* This drawer is position:fixed, top:0, and pushes its own content down
	   from the fixed top edge with border-top instead of padding (boilerplate
	   choice, global.scss) — sized at 40px for the ORIGINAL short header.
	   .shop-topbar stays visible above the drawer (see the burger comment,
	   @media max-width:1140px below) at its real height — logo row padding
	   14px top/bottom (shop-topbar-inner) + 48px logo + 2px bottom border —
	   so a 40px spacer let the topbar's opaque background paint over the
	   drawer's first ~38px of content (the home link, cut off/ghosted
	   through the topbar's translucent black). Match the real height instead. */
	border-top-width: 80px;
	border-top-color: var(--bukfc-black-soft) !important;
	border-bottom-color: var(--bukfc-black-soft) !important;
	/* overflow-y:scroll (global.scss) makes this fixed, 100vh drawer scroll
	   internally once its content (now taller — every link is its own
	   full-width row) exceeds the viewport, instead of getting clipped or
	   scrolling the page behind it. iOS Safari needs this explicitly too,
	   or the content can feel stuck/rubber-bandy instead of a normal scroll. */
	-webkit-overflow-scrolling: touch;
}
.mobile_menu_container .shop-nav-all {
	color: var(--bukfc-gold);
}
/* Row width (border, active-state gold background) now comes from each row
   spanning the full drawer width — text gets its own breathing room from
   the link's own left/right padding instead, same pattern .shop-nav-link
   below already uses. Previously the whole block had 24px of horizontal
   padding and the links had none, so a row's background/border already
   stopped 24px short of the edges while the text sat with ZERO further
   inset inside that — text (and the "МАГАЗИН" active pill) looked flush
   against its own row, cramped/"cut off" rather than padded. */
.mobile_nav_club {
	padding: 16px 0 0;
	border-bottom: 1px solid var(--bukfc-gray-border);
}
.mobile_nav_club .club-nav-logo {
	display: none;
}
.mobile_nav_club .club-nav-home {
	border-bottom: 1px solid var(--bukfc-gray-border);
	padding: 12px 24px;
}
.mobile_nav_club .club-nav-list {
	display: block;
}
.mobile_nav_club .club-nav-item {
	border-bottom: 1px solid var(--bukfc-gray-border);
}
.mobile_nav_club .club-nav-item:last-child {
	border-bottom: none;
}
.mobile_nav_club .club-nav-item a {
	padding: 12px 24px;
}
/* Social icons now render once, at the true end of the drawer (.mobile_nav_contact
   below, footer.php) — phone first, then social, per request. This is the
   original mid-list copy .club-nav-contact renders as part of
   bukfc_club_site_nav() (shared with the desktop sidebar, where it stays
   bottom-pinned) — just hidden here instead of shown twice. */
.mobile_nav_club .club-nav-contact {
	display: none;
}
.mobile_nav_account {
	padding: 16px 24px;
	border-top: 1px solid var(--bukfc-gray-border);
}
.mobile_nav_account a {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 0;
	color: var(--bukfc-white);
	font-size: 16px;
}
/* Phone + social, in that order — the real end of the mobile drawer. */
.mobile_nav_contact {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	padding: 16px 24px 24px;
	border-top: 1px solid var(--bukfc-gray-border);
}
/* A bit bigger than the footer's own 40px circles (main.css) — this is the
   drawer's own copy, phone-and-social requested slightly larger here. */
.mobile_nav_contact .s-link a {
	width: 48px;
	height: 48px;
}
.mobile_nav_contact .s-link a::before {
	font-size: 24px;
}
.mobile_nav_contact .s-link a.s-link-icon-svg svg {
	width: 24px;
	height: 24px;
}
/* Touch has no real "hover" — tapping a link left it visually stuck in its
   :hover color/background (here and every rule below in this section) until
   something else was tapped, reading as a rendering glitch rather than a
   press state. Every hover effect inside the drawer is neutralized back to
   its own base/resting style; desktop's mouse-driven sidebar hovers (the
   un-prefixed versions of these same rules) are untouched. */
.mobile_menu_container .mobile_nav_account a:hover {
	color: var(--bukfc-white);
}
.mobile_menu_container .club-nav-home:hover,
.mobile_menu_container .club-nav-item a:hover {
	color: var(--bukfc-gray-text);
}
.mobile_menu_container .level_a > li > a:hover {
	background: none;
}
.mobile_menu_container .shop-nav-item:hover > .shop-nav-link {
	color: var(--bukfc-white);
}
.mobile_menu_container .shop-nav-subitem a:hover {
	color: var(--bukfc-gray-text);
}
.mobile_menu_container .footer-phone:hover {
	color: var(--bukfc-white);
}

/* ==========================================================================
   SHOP FOOTER
   ========================================================================== */
.shop-footer {
	background: rgba(0, 0, 0, .92);
	border-top: 2px solid var(--bukfc-gold);
	padding: 40px 0 0;
}
/* .club-nav / .shop-sidebar are position:fixed, permanently pinned to that
   same 0–390px screen region regardless of scroll position — so once the
   footer (outside .shop-body entirely, a sibling after it closes) scrolls
   up into view, its own .wrap (centered, boilerplate main.css: width:1140px;
   margin:0 auto) sat partly underneath the fixed sidebars' opaque
   background instead of beside them, since nothing gave it the same
   left offset .shop-body's own content got. */
@media (min-width: 1141px) {
	.shop-footer {
		padding-left: 390px;
	}
}
.footer-top {
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
	justify-content: space-between;
	padding-bottom: 30px;
}
.footer-logo {
	display: block;
	flex: 0 0 auto;
}
.footer-logo img {
	max-height: 56px;
	width: auto;
}
.footer-logo-text {
	color: var(--bukfc-white);
	font-size: 22px;
	font-weight: 700;
	text-transform: uppercase;
}
.footer-columns {
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
	flex: 1 1 auto;
}
.footer-column {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 180px;
}
.footer-column a {
	color: var(--bukfc-gray-text);
	font-size: 15px;
}
.footer-column a:hover {
	color: var(--bukfc-gold);
}
.footer-contact {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	flex: 0 0 auto;
}
.footer-phone {
	color: var(--bukfc-white);
	font-size: 18px;
	font-weight: 700;
}
.footer-phone:hover {
	color: var(--bukfc-gold);
}
.footer-club-link {
	color: var(--bukfc-gray-text);
	font-size: 14px;
	text-decoration: underline;
}
.footer-club-link:hover {
	color: var(--bukfc-gold);
	text-decoration: underline;
}
/* Boilerplate main.css lays these out as plain inline-block anchors — bare
   inline-blocks align to each other by baseline, not by mid-height, and the
   .fa-* icons vs. the TikTok SVG (see below) don't share the same baseline,
   so the row visibly zig-zagged instead of sitting on one center line. Flex
   + align-items:center centers every icon against its siblings regardless
   of what's inside each anchor. */
.s-link {
	display: flex;
	align-items: center;
}
/* TikTok has no glyph in the theme's bundled Font Awesome 4 build, so
   components/social-icons.php renders it as inline SVG instead of a
   .fa-tiktok class — give it the same circular-button treatment as its
   .s-link a.fa-* siblings (base circle/sizing already comes from .s-link a
   in main.css; this just centers the SVG). */
.s-link a.s-link-icon-svg {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--bukfc-white);
}
/* Boilerplate main.css gives each platform its own brand-color hover
   (.fa-facebook gold, .fa-instagram near-black, .fa-youtube red, no rule at
   all for .fa-telegram) and this file's own TikTok rule used #000 — on this
   site's already-black footer that's invisible, and five different hover
   colors reads as broken/inconsistent rather than "on brand". One shared
   gold hover for every icon here, brand colors dropped entirely. */
.s-link a.fa-facebook:hover,
.s-link a.fa-telegram:hover,
.s-link a.fa-instagram:hover,
.s-link a.fa-youtube:hover,
.s-link a.s-link-icon-svg:hover {
	background: var(--bukfc-gold);
}
.s-link a.fa-facebook:hover::before,
.s-link a.fa-telegram:hover::before,
.s-link a.fa-instagram:hover::before,
.s-link a.fa-youtube:hover::before,
.s-link a.s-link-icon-svg:hover {
	color: var(--bukfc-black);
}
/* Cancels the gold hover circle above for the mobile drawer's own copy of
   these icons (.mobile_nav_contact) — same "no hover on touch" reasoning as
   every other rule in the drawer's hover-neutralizing block further up. Has
   to sit after the rules it's canceling: same specificity either way, so
   source order decides, and this needs to win regardless of which icon. */
.mobile_menu_container .s-link a:hover {
	background: none;
}
.mobile_menu_container .s-link a:hover::before,
.mobile_menu_container .s-link a.s-link-icon-svg:hover {
	color: var(--bukfc-white);
}
.footer-partners {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 32px;
	padding: 26px 0;
	border-top: 1px solid rgba(255, 255, 255, .12);
}
.footer-partners img {
	max-height: 36px;
	width: auto;
	filter: grayscale(1);
	opacity: .7;
	transition: opacity .2s ease, filter .2s ease;
}
.footer-partners a:hover img {
	filter: none;
	opacity: 1;
}
.footer-bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	border-top: 1px solid rgba(255, 255, 255, .12);
	padding: 20px 0;
}
.shop-footer .copyright {
	color: var(--bukfc-gray-text);
	font-size: 14px;
	margin: 0;
}
.footer-legal {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}
.footer-legal a {
	color: var(--bukfc-gray-text);
	font-size: 14px;
}
.footer-legal a:hover {
	color: var(--bukfc-gold);
}
@media (max-width: 900px) {
	.footer-top {
		flex-direction: column;
		gap: 26px;
	}
	.footer-bottom {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ==========================================================================
   CATALOG — breadcrumb, filters sidebar, toolbar, product grid
   ========================================================================== */
.woocommerce-breadcrumb {
	font-size: 16px;
	color: var(--bukfc-gray-text);
	margin-bottom: 16px;
}
.woocommerce-breadcrumb a {
	color: var(--bukfc-gray-text);
}
.woocommerce-breadcrumb a:hover {
	color: var(--bukfc-gold);
}
.shop-catalog-title {
	font-size: 28px;
	/* Reference keeps the category H1 itself in normal sentence case even
	   though its left-nav labels are uppercase — don't uppercase the page
	   title, only the nav (see .shop-nav-* / .shop-filters-label). */
	text-transform: none;
	margin-bottom: 20px;
	color: var(--bukfc-white);
}
.shop-catalog {
	display: flex;
	align-items: flex-start;
	gap: 32px;
	/* .shop-catalog is itself a flex item of .shop-body (club-nav + shop-sidebar
	   + this). Without an explicit grow/width it only takes its content's
	   max-content size — on wide-content pages (product grid, product page's
	   fixed-width columns) that happens to fill the row anyway, but on
	   cart/checkout the form content is intrinsically narrower, so it was
	   shrinking to ~400px instead of filling the remaining row. That starved
	   the WC Checkout/Cart blocks' own container queries of width, which
	   silently dropped them into single-column "mobile" mode (order summary
	   collapsed to a top dropdown instead of a right-hand sidebar). */
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
}
.shop-filters {
	flex: 0 0 230px;
	width: 230px;
	/* No boxed panel — reference floats its filter controls (price slider,
	   checkboxes, labels) directly on the page background with no
	   border/background container around them. Still needs its own
	   padding though: it's a flex sibling of .shop-catalog-main, not
	   a descendant, so it doesn't inherit that column's 40px padding —
	   without top padding its content started flush at the very top,
	   well above the H1/breadcrumb in the column next to it; without
	   left padding its content (e.g. the price filter's "500" input)
	   sat flush against .shop-sidebar's border-right with 0px gap,
	   confirmed via getBoundingClientRect. Right stays 0 — the 32px
	   gap on .shop-catalog already separates this from .shop-catalog-main. */
	background: none;
	border-radius: 0;
	/* Left kept modest (not matching .shop-catalog-main's 40px 1:1) —
	   this column is only 230px wide, so the full 40px ate too much of it. */
	padding: 40px 0 40px 20px;
}
@media (max-width: 1140px) {
	.shop-filters {
		/* Same 0px-left-padding bug as the desktop rule above — below
		   1140px .shop-sidebar (the category nav) hides entirely (mobile_hide),
		   so this panel becomes a full-width mobile toggle, and with no
		   left/right padding its content (price inputs, checkboxes) sat
		   flush against the viewport edge, same as .shop-catalog-main would
		   without its own 20px mobile padding. */
		padding: 20px 10px;
	}
}
.shop-filters-block {
	padding-bottom: 20px;
	margin-bottom: 20px;
	border-bottom: 1px solid var(--bukfc-gray-border);
}
.shop-filters-label {
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .5px;
	color: var(--bukfc-gray-text);
	margin-bottom: 16px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--bukfc-gray-border);
}
.shop-filters-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	font-size: 17px;
	text-transform: uppercase;
	letter-spacing: .5px;
	color: var(--bukfc-gold);
	margin-bottom: 14px;
}
/* Active-filter indicator dot next to a group heading when one of its
   options is currently selected. */
.shop-filters-attribute:has(.chosen) .shop-filters-title span::after {
	content: '';
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-left: 8px;
	border-radius: 50%;
	background: var(--bukfc-gold);
	vertical-align: middle;
}
/* +/− accordion toggle on every filter group heading. */
.shop-filters-accordion-toggle {
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 1px solid var(--bukfc-gray-border);
	border-radius: 4px;
	color: var(--bukfc-gray-text);
	font-size: 11px;
	cursor: pointer;
}
.shop-filters-accordion-toggle:hover {
	color: var(--bukfc-gold);
	border-color: var(--bukfc-gold);
}
.shop-filters-block.is-collapsed > *:not(.shop-filters-title) {
	display: none !important;
}
.shop-filters .price_slider_wrapper .ui-slider {
	/* !important: WooCommerce core's own
	   .woocommerce .widget_price_filter .price_slider_wrapper .ui-widget-content
	   rule ships a hardcoded #35224c purple at higher specificity than this
	   selector, so a plain override loses the cascade despite coming later. */
	background: var(--bukfc-gray-border) !important;
	height: 4px;
	border: none;
}
.shop-filters .price_slider_wrapper .ui-slider .ui-slider-range {
	background: var(--bukfc-gold) !important;
}
.shop-filters .price_slider_wrapper .ui-slider .ui-slider-handle {
	background: var(--bukfc-white);
	border: 2px solid var(--bukfc-gold);
	border-radius: 50%;
	width: 14px;
	height: 14px;
	top: -5px;
}
.shop-filters .price_slider_wrapper {
	display: flex;
	flex-direction: column;
}
.shop-filters .price_slider_amount {
	order: -1;
	color: var(--bukfc-gray-text);
	font-size: 16px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: 16px;
}
.shop-filters .price_slider_amount .price_label {
	display: none !important;
}
.shop-filters .price-filter-dash {
	color: var(--bukfc-gray-text);
}
.shop-filters #min_price,
.shop-filters #max_price {
	display: inline-block !important;
	width: 72px;
	background: var(--bukfc-black-soft);
	border: 1px solid var(--bukfc-gray-border);
	border-radius: 4px;
	color: var(--bukfc-white);
	padding: 6px 8px;
	font-size: 16px;
	text-align: center;
}
.shop-filters .price-filter-currency {
	color: var(--bukfc-gray-text);
	font-size: 14px;
}
.shop-filter-search {
	margin-bottom: 12px;
}
.shop-filter-search-input {
	width: 100%;
	background: var(--bukfc-black-soft);
	border: 1px solid var(--bukfc-gray-border);
	border-radius: 4px;
	color: var(--bukfc-white);
	padding: 8px 12px;
	font-size: 14px;
}
.shop-filter-search-input::placeholder {
	color: var(--bukfc-gray-text);
}
.shop-filters ul.wc-layered-nav-list,
.shop-filters .woocommerce-widget-layered-nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.shop-filters ul.wc-layered-nav-list li,
.shop-filters .woocommerce-widget-layered-nav-list li {
	margin-bottom: 8px;
}
.shop-filters ul.wc-layered-nav-list a,
.shop-filters .woocommerce-widget-layered-nav-list a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 17px;
	color: var(--bukfc-gray-text);
}
.shop-filters ul.wc-layered-nav-list a:hover,
.shop-filters .woocommerce-widget-layered-nav-list a:hover {
	color: var(--bukfc-gold);
}
/* Checkbox square in front of every filter option — outlined/unchecked by
   default, solid gold with a white checkmark once WooCommerce marks the
   <li> "chosen" (i.e. that term is in the current filter_{attribute} URL). */
.shop-filters ul.wc-layered-nav-list a::before,
.shop-filters .woocommerce-widget-layered-nav-list a::before {
	content: '';
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--bukfc-gray-text);
	border-radius: 3px;
	background: transparent;
	color: var(--bukfc-black);
	font-size: 12px;
	line-height: 1;
	font-weight: 700;
}
/* Unicode checkmark instead of an SVG/data-URI icon — no external asset or
   data-URI decoding involved, so it can't silently fail to render. */
.shop-filters ul.wc-layered-nav-list li.chosen a::before,
.shop-filters .woocommerce-widget-layered-nav-list li.chosen a::before {
	content: '\2713';
	background: var(--bukfc-gold);
	border-color: var(--bukfc-gold);
}
.shop-filters ul.wc-layered-nav-list li.chosen a,
.shop-filters .woocommerce-widget-layered-nav-list li.chosen a {
	color: var(--bukfc-gold);
}
/* Reference's filter checkboxes show no product-count numbers next to the
   option labels — hide WooCommerce's default "(N)" count instead of
   styling it. */
.shop-filters .wc-layered-nav-list .count,
.shop-filters .woocommerce-widget-layered-nav-list .count {
	display: none;
}

.shop-catalog-main {
	flex: 1 1 auto;
	min-width: 0;
	/* No boxed panel — like .shop-filters, the reference floats the H1,
	   breadcrumb, toolbar and product grid directly on the page background
	   with no border/background container around them. Spacing has to live
	   here, not on an ancestor: `.shop-body #content` (referenced by an
	   earlier version of this comment) never actually matches anything —
	   this theme has no header-shop.php, so get_header('shop') falls back
	   to the default header.php, which wraps the page in #wrap, not
	   #content — confirmed via `grep id="content" header.php` (no match). */
	background: none;
	border-radius: 0;
	padding: 40px;
	/* Product grid and home carousels below need to size off THIS column's
	   real rendered width, not the viewport's — same issue documented on
	   .bukfc-product-main: the site's 150px left nav (hidden <1140px) and,
	   on catalog/search pages, the .shop-filters sidebar next to this
	   column both eat a different amount of space at different viewport
	   widths, so this column's width doesn't track viewport width linearly.
	   Plain @media breakpoints tuned to look right at one width went
	   uncomfortably narrow again at other in-between widths (reported
	   repeatedly on both the home carousels and the catalog grid). */
	container-type: inline-size;
	container-name: shop-main;
}
@media (max-width: 768px) {
	.shop-catalog-main {
		padding: 20px;
	}
}
.shop-active-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-bottom: 20px;
}
.shop-filter-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border: 1px solid var(--bukfc-gold);
	border-radius: 999px;
	color: var(--bukfc-gold);
	font-size: 16px;
}
.shop-filter-chip:hover {
	background: var(--bukfc-gold);
	color: var(--bukfc-black);
}
.shop-filter-chip-remove {
	font-size: 16px;
	line-height: 1;
}
.shop-filter-reset {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--bukfc-gray-text);
	font-size: 16px;
	text-transform: uppercase;
}
.shop-filter-reset:hover {
	color: var(--bukfc-gold);
}
.shop-catalog-toolbar {
	display: flex;
	align-items: center;
	/* flex-start, not space-between: WooCommerce also prints an empty
	   .woocommerce-notices-wrapper into this row (woocommerce_before_shop_loop
	   fires the core "output all notices" hook here because our template
	   doesn't call woocommerce_before_main_content) — with space-between and
	   3 flex items, an empty 0-width first item makes the result-count text
	   the MIDDLE item and space-between shoves it away from the left edge
	   instead of flush-left. margin-left:auto on the right-hand controls
	   below pushes those to the end regardless of how many empty siblings
	   sit in between. */
	justify-content: flex-start;
	flex-wrap: wrap;
	gap: 12px;
	padding-bottom: 16px;
	margin-bottom: 20px;
	border-bottom: 1px solid var(--bukfc-gray-border);
}
.woocommerce-result-count {
	color: var(--bukfc-gray-text);
	font-size: 17px;
	margin: 0 !important;
	/* WooCommerce's own default CSS gives this a bottom padding we never
	   reset (only margin was zeroed) — the extra invisible space under the
	   text made its flex box taller than its neighbors, so align-items:
	   center on .shop-catalog-toolbar visually centered the whole (padded)
	   box instead of the text, making the text itself sit above center. */
	padding: 0;
}
.woocommerce-ordering {
	/* WooCommerce's own default gives this <form> a 16px bottom margin (no
	   top margin) that we never reset — the asymmetric margin box shifted
	   where align-items:center placed the visible border-box, landing it
	   8px above true center relative to "Показати" next to it. A plain
	   reset loses the cascade (same documented WC redundant-CSS gotcha as
	   the tabs/swatches elsewhere in this file), so force it. */
	margin: 0 !important;
}
/* Native <select> dropdown arrows use the browser's own OS-drawn glyph
   (appearance: auto by default) — Chrome renders that glyph flush against
   the box's own padding edge, so a symmetric left/right padding leaves the
   arrow sitting right on the rounded corner instead of with a visual gap
   like the text on the left has. Same fix on every custom-styled select in
   this file: appearance:none + our own SVG chevron + extra padding-right
   reserved for it. */
.woocommerce-ordering select,
.shop-per-page-select {
	background: var(--bukfc-black-soft);
	color: var(--bukfc-white);
	border: 1px solid var(--bukfc-gray-border);
	border-radius: 999px;
	padding: 6px 34px 6px 14px;
	font-size: 17px;
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23B3B3B3' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
}
/* A native <select>'s closed-box width isn't based on its selected option —
   Chrome sizes it (as a flex item, "auto" flex-basis falls back to content
   size) off the WIDEST option in the whole list, so "Сортувати за ціною:
   від нижчої до вищої" (the longest sort option) forced the box to ~370px
   even while showing the short "Релевантність" — on a 375px screen that's
   most of the viewport and, with the rest of the toolbar next to it,
   enough to push the page into horizontal scroll. Options are for the open
   dropdown only; the closed box gets a sane fixed width instead, with an
   ellipsis for whichever option text doesn't fit. */
.woocommerce-ordering select {
	width: 190px;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
/* "Сортувати за" + "Показати" controls, side by side. margin-left:auto
   (not justify-content:space-between on the parent) pushes this to the
   toolbar's right edge regardless of other siblings — see the comment on
   .shop-catalog-toolbar. */
.shop-toolbar-controls {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
	margin-left: auto;
}
.shop-per-page {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--bukfc-gray-text);
	font-size: 17px;
}
/* Grid/list view switcher — shop.shakhtar.com has the equivalent 3 icons at
   this same spot, end of the toolbar row. */
.shop-view-toggle {
	display: flex;
	align-items: center;
	gap: 4px;
	border: 1px solid var(--bukfc-gray-border);
	border-radius: 999px;
	padding: 4px;
}
.shop-view-toggle-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	background: none;
	border: none;
	border-radius: 999px;
	color: var(--bukfc-gray-text);
	font-size: 15px;
	cursor: pointer;
	transition: background .2s ease, color .2s ease;
}
.shop-view-toggle-btn:hover {
	color: var(--bukfc-white);
}
.shop-view-toggle-btn.is-active {
	background: var(--bukfc-gold);
	color: var(--bukfc-black);
}

.woocommerce ul.products {
	display: grid;
	/* 3 per row (not 4) — matches the reference category grid's proportions,
	   which yields larger cards/photos in a comparably-sized content column.
	   Steps down via container queries (see the .shop-catalog-main comment)
	   instead of a fixed count, since the .shop-filters sidebar next to this
	   grid eats a different amount of width at different viewport sizes. */
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}
/* WooCommerce's own CSS gives ul.products a float-clearfix ::before/::after
   (content:" "; display:table) — as grid items those become an invisible
   first cell, pushing every real product into the next column and leaving
   the first grid cell empty. Grid doesn't need float clearing, so drop them. */
.woocommerce ul.products::before,
.woocommerce ul.products::after {
	content: none;
	display: none;
}
.woocommerce ul.products li.product {
	/* Reset WooCommerce's own float-based grid (woocommerce-layout.css sets
	   float:left; width:22.05%; margin:...) so our CSS Grid columns control
	   sizing instead — without this the cards shrink to ~22% of their grid
	   track and look broken/collapsed.
	   width needs !important: WC's own per-column-count override
	   (".woocommerce.columns-3 ul.products li.product{width:30.75%}", and
	   likewise for columns-1/2/5/6) is MORE specific than this selector
	   (it adds a .columns-N class to the chain), so it still wins on cascade
	   order alone once the grid isn't 4-up — see the theme's cascade-
	   specificity gotcha. */
	float: none;
	width: auto !important;
	/* !important for the same reason as width above: woocommerce-layout.css's
	   ".woocommerce-page ul.products li.product" sets margin: 0 3.8% 2.992em 0
	   (its float-grid spacing) at the same specificity as this selector, and
	   apparently wins the cascade tie — its 2.992em bottom margin was stacking
	   ON TOP OF our own grid `gap`, adding ~48px more space between cards
	   than the gap alone (most visible in list view, where gap was cut to
	   10px and this leftover ~48px margin dominated instead). */
	margin: 0 !important;
	position: relative;
	/* shop.shakhtar.com's product tile IS a boxed card (measured live:
	   .ut2-gl__body — white background, a hairline 1px border, square
	   corners, 15px padding on every side, badge sitting flush at the
	   image's own corner because it's absolutely positioned against this
	   card's PADDING edge, not its outer edge). On our dark palette that's
	   the same black-soft panel used elsewhere (MyAccount box, etc). */
	background: var(--bukfc-black-soft);
	border: 1px solid var(--bukfc-gray-border);
	border-radius: 0;
	padding: 15px;
	text-align: left;
	/* Pin the add-to-cart button to the card's bottom edge regardless of
	   title/stock text length above it. The grid/carousel row already
	   stretches every li.product to the same height (CSS Grid and flex rows
	   both default to align-items: stretch), but WITHIN a card the button
	   used to just sit wherever the static content flow left it — 1-line vs
	   2-line titles pushed it to different heights across cards in the same
	   row. Making the card itself a flex column and letting the link (which
	   wraps everything except the button) grow to fill the leftover space
	   pushes the button down to the same bottom edge on every card. */
	display: flex;
	flex-direction: column;
}
.woocommerce ul.products li.product > a.woocommerce-loop-product__link {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}
.woocommerce ul.products li.product > a.shop-card-add-to-cart-text {
	margin-top: auto;
	/* li.product's flex column defaults children to align-items: stretch,
	   which would otherwise force this button to the card's full width —
	   it needs to stay a normal auto-width button, just bottom-pinned. */
	align-self: flex-start;
}
.woocommerce ul.products li.product img {
	border-radius: 0;
	margin-bottom: 12px;
}
/* Fixed-height photo box so the add-to-cart button below has a predictable
   edge to overlap, regardless of each product photo's own aspect ratio.
   Height scaled up from 220px along with the 4→3 column change (wider
   cards), so the photo grows the same way the reference's larger tiles do
   instead of just stretching the same 220px box horizontally. */
.woocommerce ul.products li.product .shop-card-media {
	position: relative;
	height: 300px;
	margin-bottom: 12px;
	overflow: hidden;
	border-radius: 0;
}
.woocommerce ul.products li.product .shop-card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
	margin-bottom: 0;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: 16px;
	text-transform: none;
	margin: 0 0 6px;
}
.woocommerce ul.products li.product .price {
	font-size: 17px;
	font-weight: 700;
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 6px;
}
/* Sale price first (bold), struck-through original price second — reverses
   WooCommerce's own del-then-ins DOM order to match shop.shakhtar.com. */
.woocommerce ul.products li.product .price ins {
	order: 1;
	text-decoration: none;
}
.woocommerce ul.products li.product .price del {
	order: 2;
	color: var(--bukfc-gray-text);
	font-weight: 400;
	margin-right: 0;
}
/* NEW / Sale badges — flush-corner rectangular ribbon pinned to the
   top-left corner of the product image (0 inset, sharp corners), matching
   shop.shakhtar.com's badge system (same shape for both, just different
   text). Card padding is 0 (see li.product above) so top:0/left:0 here
   lands exactly on the photo's own corner, not inset from it. */
.shop-card-badges {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
}
.shop-card-badge {
	display: inline-block;
	padding: 6px 16px;
	border-radius: 0;
	background: var(--bukfc-gold);
	color: var(--bukfc-black);
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	line-height: 1.4;
	white-space: nowrap;
}
/* Stock-status line between the title and the price. */
.woocommerce ul.products li.product .shop-card-stock {
	font-size: 13px;
	font-weight: 600;
	margin: 0 0 6px;
}
.shop-card-add-to-cart {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 40px !important;
	height: 40px;
	padding: 0 !important;
	font-size: 17px;
	/* Overlaps the bottom-right corner of .shop-card-media — half over the
	   photo, half over the dark info panel — instead of sitting in its own
	   row below the price. WooCommerce core's own ".woocommerce a.button"
	   rule (2 classes) otherwise beats this single-class selector and
	   forces position:relative, so this needs !important (see the theme's
	   cascade-specificity gotcha). */
	position: absolute !important;
	right: 16px;
	top: 200px;
	bottom: auto;
	margin-top: 0;
	z-index: 3;
}
/* Carousel cards (homepage Новинки/Sale, category banners, cross-sell on
   the product page) use a normal text button instead of the catalog
   grid's icon-only circle — matches shop.shakhtar.com. */
.shop-card-add-to-cart-text {
	display: inline-block !important;
	width: auto !important;
	margin-top: 10px;
	padding: 10px 20px !important;
	font-size: 15px !important;
}
@media (max-width: 768px) {
	.shop-card-add-to-cart-text {
		padding: 6px 14px !important;
		font-size: 14px !important;
	}
}

/* ==========================================================================
   LIST VIEW — .shop-view-toggle switches ul.products to this mode
   (assets/js/init.js toggles the class + remembers it in localStorage).
   Each card becomes a single full-width horizontal row: fixed-size photo
   on the left, everything else stacked to its right, button at the end.
   ========================================================================== */
.woocommerce ul.products.is-list-view {
	grid-template-columns: 1fr;
	/* The base 24px (ul.products, above) is a column/row gap for a multi-up
	   grid — as a single-column stack of full-width rows here, that same
	   24px reads as an oversized gap between rows. */
	gap: 10px;
}
.woocommerce ul.products.is-list-view li.product {
	flex-direction: row;
	align-items: center;
	gap: 20px;
}
/* The link wraps media + title + stock + price as flat siblings (no extra
   wrapper markup to hook into — see content-product.php/the woocommerce_*
   hooks in include/woocommerce.php). A plain flex row would lay all five
   out side by side on one line instead of "photo | stacked text", so this
   uses a 2-column CSS grid instead: the photo is one item spanning all 3
   text rows (grid-row: 1/4), each text row gets a fixed-height track
   (minmax(0, 1fr) inside a container height matching the photo) so every
   card's text block is the same height and vertically centered next to the
   photo — instead of the row's height (and the empty space below the text)
   varying per card depending on how much text each product has. */
.woocommerce ul.products.is-list-view li.product > a.woocommerce-loop-product__link {
	display: grid;
	grid-template-columns: 160px 1fr;
	grid-template-rows: repeat(3, minmax(0, 1fr));
	column-gap: 20px;
	align-items: center;
	height: 160px;
	min-width: 0;
}
.woocommerce ul.products.is-list-view li.product .shop-card-media {
	grid-column: 1;
	grid-row: 1 / 4;
	width: 160px;
	height: 160px;
	margin-bottom: 0;
}
.woocommerce ul.products.is-list-view li.product .woocommerce-loop-product__title {
	grid-column: 2;
	grid-row: 1;
	margin: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.woocommerce ul.products.is-list-view li.product .shop-card-stock {
	grid-column: 2;
	grid-row: 2;
	margin: 0;
}
.woocommerce ul.products.is-list-view li.product .price {
	grid-column: 2;
	grid-row: 3;
}
.woocommerce ul.products.is-list-view li.product > a.shop-card-add-to-cart-text {
	margin-top: 0;
	align-self: center;
}
@media (max-width: 600px) {
	.woocommerce ul.products.is-list-view li.product {
		flex-direction: column;
		align-items: flex-start;
	}
	.woocommerce ul.products.is-list-view li.product > a.woocommerce-loop-product__link {
		grid-template-columns: 100%;
		grid-template-rows: 160px repeat(3, auto);
		height: auto;
		row-gap: 6px;
		width: 100%;
	}
	.woocommerce ul.products.is-list-view li.product .shop-card-media {
		grid-column: 1;
		grid-row: 1;
		width: 100%;
	}
	/* The desktop rules above (grid-column: 2, for the 160px-photo + text
	   layout) never got reset here — with grid-template-columns now a single
	   100% track but these three still claiming column 2, grid quietly
	   generated an implicit second column sized to fit the title's own
	   (ellipsis-truncated, so narrow) content and pushed all three of them
	   into it, off the right edge of the single visible column — which is
	   exactly what was forcing the page into horizontal scroll on mobile. */
	.woocommerce ul.products.is-list-view li.product .woocommerce-loop-product__title {
		grid-column: 1;
		grid-row: 2;
	}
	.woocommerce ul.products.is-list-view li.product .shop-card-stock {
		grid-column: 1;
		grid-row: 3;
	}
	.woocommerce ul.products.is-list-view li.product .price {
		grid-column: 1;
		grid-row: 4;
	}
}

/* ==========================================================================
   RESPONSIVE — collapse sidebar into the mobile burger nav
   ========================================================================== */
@media (max-width: 1140px) {
	/* The boilerplate .burger button is position:absolute (leftover from a
	   header with nothing else in the top-right corner) — in our topbar it
	   collides with the account/cart icons. Put it back in the flex flow. */
	.shop-topbar-inner .burger {
		position: static;
		flex-shrink: 0;
		margin-left: 6px;
	}
	/* The boilerplate's own .mobile_menu_active .burger{position:fixed} sets
	   no top/right of its own, so it falls back to the CSS "static position"
	   algorithm for a flex item pulled out of flow — in this flex header
	   that landed the icon a few pixels left of its in-flow spot, visually
	   overlapping the cart icon right next to it. We don't need position:fixed
	   at all: .shop-topbar below is already position:sticky with z-index:102
	   (see its own comment), which outranks the drawer (z-index:100) as a
	   stacking context, so the burger stays visible above the drawer while
	   staying position:static and correctly placed in the flex row. */
	/* Same specificity as main.css's own ".burger.is-active .burger-icon
	   { background-color: transparent }" (the rule that hides the middle
	   bar so only the two rotated ::before/::after lines are left forming
	   an X) — loading after it in the cascade, this used to win outright and
	   force the middle bar white even while active, so it stayed visible
	   alongside the two diagonal lines: a 6-line asterisk/"snowflake"
	   instead of a clean X. Scoped to :not(.is-active) so the middle bar
	   is free to go transparent on open; ::before/::after (the X's own two
	   lines) still need forcing to white unconditionally, active or not. */
	.shop-topbar-inner .burger:not(.is-active) .burger-icon,
	.shop-topbar-inner .burger .burger-icon::before,
	.shop-topbar-inner .burger .burger-icon::after {
		background-color: var(--bukfc-white);
	}
	.shop-body {
		display: block;
	}
	.shop-body #content {
		padding: 20px;
	}
	.shop-topbar-search {
		max-width: none;
	}
	.shop-catalog {
		display: block;
	}
	.shop-filters-toggle {
		display: flex;
		align-items: center;
		gap: 8px;
		width: 100%;
		margin-bottom: 16px;
		padding: 12px 16px;
		background: var(--bukfc-black-soft);
		border: 1px solid var(--bukfc-gray-border);
		border-radius: 6px;
		color: var(--bukfc-white);
		font-size: 17px;
		text-transform: uppercase;
		cursor: pointer;
	}
	.shop-filters {
		display: none;
		width: 100%;
		margin-bottom: 24px;
	}
	.shop-filters.is-open {
		display: block;
	}
}

/* Catalog grid column count — tracks .shop-catalog-main's real width (see
   its container-type comment), not the viewport, so it steps down whether
   the squeeze comes from the site nav, the filters sidebar, or both.
   800px (was 660px): with the two fixed nav columns (390px) AND the price
   filter sidebar (230px + 32px gap) both eating into a 1440px viewport,
   this container is only ~788px wide — comfortably above the old 660px
   threshold, so it stayed at 3 columns and each card came out too narrow
   to look right. Raised so that exact common case (a 1440px screen, on a
   category page with the filters sidebar showing) lands on 2 columns. */
@container shop-main (max-width: 800px) {
	.woocommerce ul.products {
		grid-template-columns: repeat(2, 1fr);
	}
}
@container shop-main (max-width: 420px) {
	.woocommerce ul.products {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   SINGLE PRODUCT PAGE
   ========================================================================== */
.shop-product-page .woocommerce-breadcrumb {
	margin-bottom: 20px;
}
/* Two columns for the whole product page (not just the gallery/price row):
   .bukfc-product-gallery + .bukfc-product-main (tabs + related/upsell
   products) form the left column; .summary is the short buy-box card next
   to it, spanning both rows so it ends after the add-to-cart row,
   same as shop.shakhtar.com. Grid (not flex) so the mobile breakpoint below
   can reorder .summary ahead of .bukfc-product-main — the buy box needs to
   land right under the photo on a phone, not after the whole description/
   related-products block, even though gallery+main are one visual column
   on desktop. */
.bukfc-product-columns {
	display: grid;
	grid-template-columns: 1fr 400px;
	grid-template-areas:
		"gallery summary"
		"main    summary";
	align-items: start;
	gap: 40px;
}
.bukfc-product-gallery {
	grid-area: gallery;
	min-width: 0;
}
.bukfc-product-main {
	grid-area: main;
	min-width: 0;
	/* The related-products carousel below needs to size itself off this
	   column's actual width, not the viewport's — .bukfc-product-columns'
	   fixed 400px summary track and the site's 150px left sidebar eat a
	   different amount of space at different viewport widths (the sidebar
	   itself disappears below 1140px), so this column's width doesn't
	   track viewport width linearly. A plain @media breakpoint tuned to
	   look right at one width (e.g. a full-desktop screenshot) went
	   uncomfortably narrow again at common in-between laptop widths
	   (~1150–1600px) where the sidebar is still showing but the column
	   hasn't caught up yet. */
	container-type: inline-size;
	container-name: bukfc-product-main;
}
.woocommerce div.product .woocommerce-product-gallery__image img {
	width: 100%;
	height: auto;
}
.woocommerce div.product div.images {
	/* Measured on shop.shakhtar.com: the gallery column sits at a fixed,
	   contained size (~600px) next to the buy-box, not stretched across
	   whatever width .bukfc-product-gallery's grid track happens to have
	   (1fr — wide, since .bukfc-product-main's full-width tabs/related rows
	   share that same track below it), so without a cap the photo blew up
	   to fill the whole thing. */
	width: 100%;
	max-width: 600px;
	float: none;
	position: relative;
}
/* Ribbon/teardrop tag (sharp top-left corner, rounded elsewhere) matching
   the reference's discount badge shape, instead of a symmetric pill. */
.woocommerce div.product div.images span.onsale {
	position: absolute;
	top: 16px;
	left: 16px;
	z-index: 2;
	border-radius: 0 13px 13px 13px;
	padding: 6px 14px;
}
/* Center the actual photo inside the gallery box instead of letting it sit
   flush left (portrait product photos are narrower than the 460px box).
   Note: .woocommerce-product-gallery__wrapper/__image are the flexslider
   track — they carry their own width:%/transform math for multi-image
   galleries, so centering must stay on the <img> itself (margin:auto),
   never display:flex/width:100% on those two, or the slider breaks and
   shoves the active photo off-screen. */
.woocommerce div.product .woocommerce-product-gallery__image img {
	display: block;
	margin: 0 auto;
}
/* Buy box stays pinned while scrolling past the description/related
   products below it (shop.shakhtar.com does the same). */
.woocommerce div.product div.summary {
	grid-area: summary;
	max-width: 400px;
	min-width: 300px;
	position: sticky;
	top: 90px;
	align-self: start;
}
/* Title row: full-width, above the image/summary split (shop.shakhtar.com
   puts the title + SKU here rather than inside the narrow price panel). */
.bukfc-product-title-row {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 20px;
	margin-bottom: 10px;
}
.bukfc-product-title-row .product_title {
	margin-bottom: 0;
}
.bukfc-product-meta-col {
	flex: 0 0 auto;
	text-align: right;
	white-space: nowrap;
}
.bukfc-product-sku {
	color: var(--bukfc-gray-text);
	font-size: 17px;
}
.bukfc-product-stock {
	font-size: 17px;
	font-weight: 600;
	margin: 4px 0 14px;
}
.bukfc-product-stock.is-in-stock {
	color: #4CAF50;
}
.bukfc-product-stock.is-out-of-stock {
	color: #E05252;
}
.bukfc-product-savings {
	display: inline-block;
	background: var(--bukfc-black-soft);
	border: 1px solid var(--bukfc-gray-border);
	color: var(--bukfc-gold);
	font-size: 17px;
	font-weight: 600;
	padding: 6px 14px;
	border-radius: 999px;
	margin: 6px 0 4px;
}
/* Tabs, shop-by-player and related/upsell products all live inside
   .bukfc-product-main now, so they naturally stack at the left column's
   width — no full-width breakout needed. */
.bukfc-product-main > .related.products,
.bukfc-product-main > .upsells.products {
	margin-top: 20px;
	margin-bottom: 40px;
}
.bukfc-product-main > .related.products > h2,
.bukfc-product-main > .upsells.products > h2 {
	margin-bottom: 20px;
}
/* Related products: one card per view, always. This carousel lives in
   .bukfc-product-main — the product page's narrower LEFT column, not the
   full viewport — so even a 3-per-view desktop rule (tried first) kept
   landing on ~150-170px-wide cards at plenty of real container widths
   (547px measured live still isn't "wide" for a 3-way split), with a
   fixed 300px-tall photo above a button too narrow for its own label,
   wrapping to 2 lines. Simplest fix that can't land in a bad spot at any
   width: always one full-width card, arrows page through the rest. */
.bukfc-related-carousel .home-carousel-track > li.product {
	flex: 0 0 100%;
	max-width: 100%;
}
/* Fixed height:300px (base .shop-card-media rule, tuned for the catalog
   grid's fairly consistent card width) swung from a squat crop to a very
   tall one now that this card can be anywhere from ~300px to 700px+ wide.
   aspect-ratio keeps the photo proportionate — and visibly smaller — at
   whatever width the card actually ends up. */
.woocommerce .bukfc-related-carousel .shop-card-media {
	/* !important: the base .shop-card-media rule (.woocommerce ul.products
	   li.product .shop-card-media) out-specifies this selector on class
	   count alone (4 classes + 2 elements vs. 3 + 0) — its fixed height:300px
	   otherwise keeps winning and silently cancels aspect-ratio below (a
	   fixed height leaves nothing for aspect-ratio to size). */
	height: auto !important;
	aspect-ratio: 1 / 1;
}
.bukfc-related-carousel .add_to_cart_button {
	/* !important for the same reason as .shop-card-media above — the base
	   button rule (shop-theme.css, near the top) is both more specific and
	   already forced with !important of its own on the properties it sets,
	   though not on padding/font-size; those two still need it here since
	   the base selector list out-specifies this one regardless. */
	padding: 8px 18px !important;
	font-size: 13px !important;
}
.woocommerce div.product .woocommerce-product-gallery__image {
	background: var(--bukfc-black-soft);
	border: 1px solid var(--bukfc-gray-border);
	border-radius: 8px;
	overflow: hidden;
}
.woocommerce div.product ol.flex-control-thumbs {
	margin: 12px 0 0;
}
.woocommerce div.product .flex-control-thumbs li img {
	border: 1px solid var(--bukfc-gray-border);
	border-radius: 4px;
	opacity: .7;
}
.woocommerce div.product .flex-control-thumbs li img.flex-active {
	border-color: var(--bukfc-gold);
	opacity: 1;
}
.woocommerce div.product .product_title {
	font-size: 32px;
	text-transform: uppercase;
	margin-bottom: 10px;
}
.woocommerce div.product p.price ins {
	text-decoration: none;
}
.woocommerce div.product .woocommerce-product-details__short-description {
	color: var(--bukfc-gray-text);
	margin: 14px 0;
}
.woocommerce div.product table.variations {
	/* WooCommerce's own ".woocommerce div.product form.cart .variations"
	   (woocommerce.css) has 3 class-level selectors (.woocommerce, .cart,
	   .variations) to this rule's 2 (.woocommerce, .variations — "table" is
	   a type selector, not a class) and so wins on specificity alone despite
	   being the more generic rule — its margin-bottom:1em (=16px) silently
	   overrode every margin-bottom value tried here, coincidentally
	   rendering as the exact same 16px as this rule's own top margin, which
	   is what made it look like a duplicate/caching problem while debugging
	   rather than a losing cascade battle. */
	margin: 16px 0 44px !important;
}
.woocommerce div.product table.variations label {
	color: var(--bukfc-gray-text);
	font-size: 16px;
	text-transform: uppercase;
}
/* WooCommerce's own markup is a <table>: each attribute ("Колір", "Тип"…)
   is a row with the label in one cell and the swatches in the cell next to
   it, side by side — with tall swatch cells (88px color photos, text
   swatches wrapping onto 2 lines) that put the label awkwardly beside the
   middle of a whole grid of options instead of introducing it from above,
   and let a wide attribute (many colors) push the row wider than the column
   it shares with price/qty. Every attribute row does this, not just one —
   un-table it so each row stacks label-then-swatches vertically instead. */
.woocommerce div.product table.variations,
.woocommerce div.product table.variations tbody,
.woocommerce div.product table.variations tr {
	display: block;
	width: 100%;
}
.woocommerce div.product table.variations th.label,
.woocommerce div.product table.variations td.value {
	display: block;
	width: 100%;
	/* <th> has a browser-default text-align:center (unlike <td>, which
	   defaults to left) — nothing here ever overrode it, so the label sat
	   centered above a left-aligned row of swatches instead of lining up
	   with them. */
	text-align: left;
}
.woocommerce div.product table.variations tr + tr {
	margin-top: 20px;
}
.woocommerce div.product table.variations th.label {
	margin-bottom: 10px;
}
/* Still not truly centered after the fixes above: WooCommerce's own
   .reset_variations ("Скинути"/clear) link is visibility:hidden (not
   display:none) until a variation is actually selected, so it still
   occupies layout space in the LAST attribute row's td the whole time —
   vertical-align:middle was centering the label against that taller
   swatches+hidden-link stack, not against the swatch buttons alone, so
   the label sat visibly below their true center. Take the link out of
   flow entirely so row height/centering is driven purely by the swatches,
   in every state (hidden or visible). */
.woocommerce div.product table.variations td.value {
	position: relative;
}
.woocommerce div.product table.variations .reset_variations {
	position: absolute;
	left: 0;
	top: 100%;
	margin-top: 6px;
}
.woocommerce div.product table.variations select {
	background: var(--bukfc-black-soft);
	color: var(--bukfc-white);
	border: 1px solid var(--bukfc-gray-border);
	border-radius: 999px;
	padding: 8px 36px 8px 16px;
	min-width: 160px;
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23B3B3B3' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
}
.bukfc-visually-hidden {
	display: none !important;
}
.variation-swatches {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.variation-swatch {
	background: var(--bukfc-black-soft);
	border: 1px solid var(--bukfc-gray-border);
	cursor: pointer;
	transition: border-color .2s ease, opacity .2s ease;
}
.variation-swatch.is-active {
	border-color: var(--bukfc-gold);
}
/* Border-color already had a transition set up, but nothing ever changed it
   on hover, so hovering an option gave no feedback at all before a value
   was picked. */
.variation-swatch:hover:not(.is-active):not(.is-disabled) {
	border-color: var(--bukfc-gold);
}
.variation-swatch.is-disabled {
	opacity: .3;
	cursor: not-allowed;
}
/* Unavailable text swatches (sizes) are also crossed out so they read as "gone",
   not just dimmed. */
.variation-swatch-text.is-disabled {
	text-decoration: line-through;
}
/* Breathing room between the selected variation's price/stock line and the
   quantity + "Додати в кошик" row (they used to touch). */
.woocommerce div.product .woocommerce-variation-price,
.woocommerce div.product .woocommerce-variation-availability {
	margin-bottom: 16px;
}
.woocommerce div.product .woocommerce-variation-price:empty,
.woocommerce div.product .woocommerce-variation-availability:empty {
	margin-bottom: 0;
}
/* 88x88px / radius 8px matches the reference's own measured photo-swatch
   size (was 48x48/radius 6px — noticeably smaller and lighter-weight). */
.variation-swatch-color {
	display: flex;
	flex-direction: column;
	width: 88px;
	height: auto;
	padding: 0;
	border-radius: 8px;
	overflow: hidden;
	font-size: 16px;
	color: var(--bukfc-white);
}
.variation-swatch-color img {
	width: 100%;
	height: 88px;
	object-fit: cover;
	display: block;
}
/* Caption under the photo — the colour name must be readable without hovering. */
.variation-swatch-label {
	display: block;
	padding: 4px 3px 6px;
	font-size: 13px;
	line-height: 1.2;
	text-align: center;
	/* Never split inside a word: a closing quote must not drop to its own line. */
	word-break: normal;
	overflow-wrap: normal;
	hyphens: none;
	text-wrap: balance;
}
/* The photo thumbnails all start with a gold-ish look, so the selected one has to
   stand out clearly: thicker border, gold caption, and a filled caption bar. */
.variation-swatch-color.is-active {
	border-width: 2px;
	box-shadow: 0 0 0 1px var(--bukfc-gold);
}
.variation-swatch-color.is-active .variation-swatch-label {
	background: var(--bukfc-gold);
	color: var(--bukfc-black);
	font-weight: 700;
}
.variation-chosen-value {
	color: var(--bukfc-gold);
	font-weight: 700;
}
/* 50x50px square minimum, radius 8px — same shape language as the color
   swatch above it instead of a pill, matching the reference's size buttons
   (was a variable-width 999px pill). Kept as min-width/min-height rather than
   a fixed width/height so attribute values that aren't short size codes
   (e.g. a "Тип" attribute with values like "Команда чемпіони") wrap and grow
   the button instead of silently overflowing its box (overflow was visible,
   with no truncation, so long labels spilled outside the 50x50 square and
   overlapped the qty/add-to-cart controls next to it). */
.variation-swatch-text {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 50px;
	min-height: 50px;
	height: auto;
	padding: 4px 8px;
	border-radius: 8px;
	color: var(--bukfc-white);
	font-size: 14px;
	line-height: 1.2;
	text-align: center;
	word-break: break-word;
}
.variation-swatch-text.is-active {
	background: var(--bukfc-gold);
	color: var(--bukfc-black);
	font-weight: 700;
}
.woocommerce div.product .single_add_to_cart_button {
	padding: 12px 40px !important;
	font-size: 16px;
}
.woocommerce div.product form.cart .quantity {
	margin-right: 10px;
}
.woocommerce div.product form.cart .quantity .qty {
	height: 46px;
	width: 60px;
	background: var(--bukfc-black-soft);
	border: 1px solid var(--bukfc-gray-border);
	color: var(--bukfc-white);
	text-align: center;
	border-radius: 4px;
}

/* Sponsor picker + personalization */
.product-option-block {
	padding: 16px 0;
	border-top: 1px solid var(--bukfc-gray-border);
}
.product-option-title {
	font-size: 17px;
	text-transform: uppercase;
	letter-spacing: .5px;
	color: var(--bukfc-white);
	margin-bottom: 12px;
	display: flex;
	align-items: center;
	gap: 8px;
}
.product-option-surcharge {
	color: var(--bukfc-gold);
	font-size: 16px;
	font-weight: 700;
}
.product-sponsor-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.product-sponsor-option {
	position: relative;
	cursor: pointer;
}
.product-sponsor-option input {
	position: absolute;
	opacity: 0;
}
.product-sponsor-option span {
	display: inline-block;
	padding: 8px 16px;
	border: 1px solid var(--bukfc-gray-border);
	border-radius: 999px;
	font-size: 16px;
	color: var(--bukfc-gray-text);
	transition: all .2s ease;
}
.product-sponsor-option input:checked + span {
	background: var(--bukfc-gold);
	border-color: var(--bukfc-gold);
	color: var(--bukfc-black);
	font-weight: 700;
}
.product-personalization-fields {
	display: flex;
	gap: 10px;
}
.product-personalize-name,
.product-personalize-number {
	background: var(--bukfc-black-soft);
	border: 1px solid var(--bukfc-gray-border);
	color: var(--bukfc-white);
	border-radius: 4px;
	padding: 10px 14px;
	font-size: 17px;
}
.product-personalize-name {
	flex: 1 1 auto;
}
.product-personalize-number {
	width: 70px;
	text-align: center;
}
.product-personalize-preview {
	margin-top: 12px;
	padding: 14px;
	background: var(--bukfc-black-soft);
	border: 1px dashed var(--bukfc-gray-border);
	border-radius: 6px;
	text-align: center;
	min-height: 20px;
}
.product-personalize-preview-name {
	display: inline-block;
	font-weight: 700;
	letter-spacing: 1px;
	color: var(--bukfc-white);
	margin-right: 10px;
}
.product-personalize-preview-number {
	display: inline-block;
	font-weight: 700;
	color: var(--bukfc-gold);
	font-size: 18px;
}

/* Shop by player */
.product-players-block {
	margin-top: 30px;
	padding-top: 24px;
	border-top: 1px solid var(--bukfc-gray-border);
}
.product-players-title {
	font-size: 17px;
	text-transform: uppercase;
	color: var(--bukfc-gold);
	margin-bottom: 14px;
}
.product-players-list {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}
.product-player-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 110px;
	text-align: center;
	color: var(--bukfc-white);
}
.product-player-card img {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid var(--bukfc-gray-border);
	margin-bottom: 8px;
}
.product-player-card:hover img {
	border-color: var(--bukfc-gold);
}
.product-player-name {
	font-size: 16px;
	font-weight: 700;
}
.product-player-name em {
	color: var(--bukfc-gold);
	font-style: normal;
	margin-left: 4px;
}
.product-player-position {
	font-size: 17px;
	color: var(--bukfc-gray-text);
}

/* Player archive header */
.player-archive-header {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-bottom: 24px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--bukfc-gray-border);
}
.player-archive-photo {
	width: 90px;
	height: 90px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid var(--bukfc-gold);
}
.player-archive-number {
	display: block;
	color: var(--bukfc-gold);
	font-size: 22px;
	font-weight: 700;
}
.player-archive-position {
	display: block;
	color: var(--bukfc-gray-text);
	font-size: 17px;
}

/* Product data tabs (Опис / Характеристики / Відгуки).
   WC ships its own pill/box tab skin (background, border, corner pseudo-
   elements) redundantly in three separate core stylesheets, so plain
   same-specificity overrides lose the cascade in practice — reset with
   !important instead, same pragmatic fix used for the variation swatches. */
.woocommerce-tabs ul.tabs {
	display: flex !important;
	gap: 24px !important;
	list-style: none !important;
	margin: 40px 0 0 !important;
	padding: 0 0 12px !important;
	border-bottom: 1px solid var(--bukfc-gray-border) !important;
}
.woocommerce-tabs ul.tabs li,
.woocommerce-tabs ul.tabs li.active {
	margin: 0 !important;
	padding: 0 !important;
	background: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	color: var(--bukfc-gray-text) !important;
}
.woocommerce-tabs ul.tabs li::before,
.woocommerce-tabs ul.tabs li::after,
.woocommerce div.product .woocommerce-tabs ul.tabs li::before {
	content: none !important;
	display: none !important;
}
.woocommerce-tabs ul.tabs li a {
	display: inline-block !important;
	padding: 0 0 12px !important;
	color: var(--bukfc-gray-text) !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	text-transform: uppercase !important;
	letter-spacing: .3px !important;
	text-shadow: none !important;
}
.woocommerce-tabs ul.tabs li a:hover {
	color: var(--bukfc-white) !important;
}
.woocommerce-tabs ul.tabs li.active a {
	color: var(--bukfc-gold) !important;
	box-shadow: inset 0 -2px 0 var(--bukfc-gold) !important;
}
.woocommerce-tabs .panel {
	padding: 24px 0 !important;
	color: var(--bukfc-gray-text) !important;
	background: none !important;
	border: 0 !important;
}
.woocommerce-tabs .panel h2 {
	color: var(--bukfc-white) !important;
	font-size: 18px !important;
	margin: 0 0 12px !important;
}
/* Characteristics tab. Structure matches the reference (shop.shakhtar.com):
   a 2-column grid of label/dotted-leader/value rows, no table borders, no
   bullets — just this site's own dark/gold palette instead of the
   reference's white-background/black-text version of the same layout. */
.woocommerce-tabs .bukfc-specs-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px 48px;
}
@media (max-width: 600px) {
	.woocommerce-tabs .bukfc-specs-list {
		grid-template-columns: 1fr;
	}
}
.woocommerce-tabs .bukfc-specs-list li {
	display: flex;
	align-items: baseline;
	margin: 0;
	padding: 7px 0;
	font-size: 15px;
	border-bottom: 1px solid var(--bukfc-gray-border);
}
.woocommerce-tabs .bukfc-specs-list .woocommerce-product-attributes-item__label {
	color: var(--bukfc-gray-text) !important;
	font-weight: 400;
	flex-shrink: 0;
	white-space: nowrap;
}
/* The dotted "receipt style" leader connecting label to value — an empty
   flex-grow span with only a dotted bottom border, so it stretches to fill
   whatever gap this specific row's label/value combination leaves, instead
   of a fixed-width gap that's too wide for short values and too narrow for
   long ones. */
.woocommerce-tabs .bukfc-specs-list .woocommerce-product-attributes-item__leader {
	flex: 1 1 auto;
	margin: 0 10px 4px;
	border-bottom: 1px dotted var(--bukfc-gray-border);
	min-width: 12px;
}
.woocommerce-tabs .bukfc-specs-list .woocommerce-product-attributes-item__value {
	color: var(--bukfc-white);
	font-weight: 500;
	text-align: right;
}
.woocommerce-tabs .bukfc-specs-list .woocommerce-product-attributes-item__value p {
	margin: 0;
}
/* Taxonomy-based attributes (Колір, Розмір…) render their values as <a>
   tags linking to the attribute's own archive — inheriting this site's
   global link color (gold) instead of this list's own white value color. */
.woocommerce-tabs .bukfc-specs-list .woocommerce-product-attributes-item__value a {
	color: inherit;
	text-decoration: none;
}
.bukfc-size-guide-table {
	width: 100%;
	border-collapse: collapse;
}
.bukfc-size-guide-table th,
.bukfc-size-guide-table td {
	padding: 10px 14px;
	border: 1px solid var(--bukfc-gray-border);
	text-align: center;
	font-size: 17px;
}
.bukfc-size-guide-table th {
	background: var(--bukfc-black-soft);
	color: var(--bukfc-gold);
	text-transform: uppercase;
	font-size: 17px;
}

/* Product page: size guide / help accordion under the Add to cart button
   (shakhtar puts these here, as collapsed rows, not as description tabs) */
.product-accordion {
	margin-top: 20px;
	border-top: 1px solid var(--bukfc-gray-border);
}
.product-accordion-item {
	border-bottom: 1px solid var(--bukfc-gray-border);
}
.product-accordion-toggle {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 14px 4px;
	background: none;
	border: 0;
	color: var(--bukfc-white);
	font-size: 16px;
	text-align: left;
	cursor: pointer;
}
.product-accordion-toggle i:first-child {
	color: var(--bukfc-gold);
	width: 16px;
}
.product-accordion-toggle span {
	flex: 1;
}
.product-accordion-chevron {
	color: var(--bukfc-gray-text);
	font-size: 16px;
	transition: transform .2s ease;
}
.product-accordion-item.is-open .product-accordion-chevron {
	transform: rotate(180deg);
	color: var(--bukfc-gold);
}
.product-accordion-panel {
	display: none;
	padding: 0 4px 18px;
	color: var(--bukfc-gray-text);
	font-size: 17px;
}
.product-accordion-item.is-open .product-accordion-panel {
	display: block;
}
.product-accordion-panel .bukfc-size-guide-table {
	margin-top: 4px;
}
.product-accordion-panel a {
	color: var(--bukfc-gold);
}

@media (max-width: 768px) {
	/* Single stacked column, reordered to gallery → buy box → description/
	   related — .summary (price/size/"Додати в кошик") has to come right
	   after the photo, not after the whole description + related-products
	   block below it, or a phone visitor has to scroll past all of that
	   just to see the price or add the product to their cart. */
	.bukfc-product-columns {
		grid-template-columns: 1fr;
		grid-template-areas:
			"gallery"
			"summary"
			"main";
	}
	.woocommerce div.product div.images,
	.woocommerce div.product div.summary,
	.bukfc-product-main {
		max-width: 100%;
		width: 100%;
	}
	/* The buy box's sticky pin only makes sense next to a taller scrolling
	   left column; stacked full-width on mobile it would otherwise overlap
	   the description/tabs content scrolling underneath it. */
	.woocommerce div.product div.summary {
		position: static;
		top: auto;
	}
}

/* ==========================================================================
   CART & CHECKOUT (WooCommerce Blocks)
   The pattern background makes the block markup's plain text unreadable
   without a solid panel behind it, so every step/section gets a card.
   ========================================================================== */
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout {
	color: var(--bukfc-white);
	padding: 20px 0 60px;
}
/* Checkout address-style forms (shipping/billing address AND the Nova
   Poshta city/branch fields, which reuse this same component) — WC only
   gives a field its own full row when nothing else fits next to it, and
   otherwise halves first_name/last_name to sit side by side with just
   12px between them. That produced two different row rhythms on the same
   form (each field's own margin-top for full-width rows vs. the row's
   flex gap for the halved ones) and only some rows are wide enough to
   read as "full width" at a glance. Force one row per field and drive ALL
   spacing off a single gap so it's identical everywhere. */
.wc-block-components-address-form {
	/* WC's own container-query rule (.wc-block-checkout__shipping-fields
	   .wc-block-components-address-form etc.) is two classes deep, beating
	   this single-class selector on specificity regardless of !important
	   on the other properties — gap specifically needs its own !important
	   or WC's "gap: 0 12px" silently wins and every row above measures 0. */
	display: flex !important;
	flex-direction: column !important;
	flex-wrap: nowrap !important;
	gap: 26px !important;
}
.wc-block-components-address-form > * {
	flex: 1 1 100% !important;
	width: 100% !important;
	margin-top: 0 !important;
}
@media (max-width: 1140px) {
	div.woocommerce-account {
		padding-left: 20px;
		padding-right: 20px;
	}
}
/* Cart/checkout blocks are now wrapped in .shop-catalog-main (see
   page-cart.php / page-checkout.php), which already supplies its own
   horizontal padding — the blocks themselves only need vertical spacing. */

.wc-block-components-checkout-step__title,
.wc-block-cart__totals-title,
.wc-block-components-checkout-order-summary__title-text {
	color: var(--bukfc-gold) !important;
	text-transform: uppercase;
	font-size: 17px;
	letter-spacing: .3px;
}

body table.wc-block-cart-items,
.wc-block-components-sidebar .wc-block-components-panel,
.wc-block-components-totals-wrapper,
.wc-block-checkout__sidebar .wc-block-components-order-summary,
.wc-block-checkout__payment-method,
.wc-block-cart__submit-container {
	background: var(--bukfc-black-soft) !important;
	border: 1px solid var(--bukfc-gray-border);
	border-radius: 8px;
	padding: 20px;
	margin-bottom: 20px;
}
/* Checkout steps ("1 Контактна інформація" etc.) — flat on the page
   background instead of their own boxed card; only the sidebar/payment
   panels above keep the card treatment. */
.wc-block-components-checkout-step {
	background: none !important;
	border: none;
	padding: 0;
	margin-bottom: 32px;
}
/* WooCommerce's own cart.css sets background:initial !important on the
   table cells too — match its specificity so our panel color actually wins. */
body table.wc-block-cart-items td,
body table.wc-block-cart-items th {
	background: transparent !important;
}
/* This card's own padding:20px above is silently dropped on all four sides
   — per spec, border-collapse:collapse (set by WooCommerce's own cart.css)
   forces a <table>'s padding to compute as 0, so the product image and the
   "Загалом" price column were flush against the card's left/right edges
   with no inset at all, and the price text was overflowing right past the
   border. Put the missing inset back on the actual first/last-column cells
   instead, where border-collapse doesn't apply. */
body table.wc-block-cart-items thead th:first-child,
body table.wc-block-cart-items tbody td:first-child {
	padding-left: 20px !important;
}
body table.wc-block-cart-items thead th:last-child,
body table.wc-block-cart-items tbody td:last-child {
	padding-right: 20px !important;
}
body table.wc-block-cart-items thead th {
	padding-top: 20px !important;
}
body table.wc-block-cart-items tbody tr:last-child td {
	padding-bottom: 20px !important;
}

.wc-block-components-checkout-step__container-content {
	background: transparent;
}

/* Cart sidebar: "ПІДСУМКИ КОШИКА" (title), the coupon field and every
   totals row (subtotal/fee/discount/shipping/taxes) are separate
   WooCommerce Blocks pieces that all carry the shared card selectors
   above (.wc-block-components-totals-wrapper / .wc-block-components-panel)
   — each one got its own full bordered box: the title floated with no box
   at all (misaligned against the boxes below it), and the coupon field
   ended up in a box nested inside another box. Give the block that wraps
   all of them together ONE card instead, and strip the individual nested
   ones back to plain content. */
.wp-block-woocommerce-cart-order-summary-block {
	background: var(--bukfc-black-soft) !important;
	border: 1px solid var(--bukfc-gray-border);
	border-radius: 8px;
	padding: 20px;
	margin-bottom: 20px;
}
.wp-block-woocommerce-cart-order-summary-block .wc-block-components-totals-wrapper,
.wp-block-woocommerce-cart-order-summary-block .wc-block-components-panel {
	background: none !important;
	border: none;
	border-radius: 0;
	padding: 0;
	margin: 0 0 12px;
}
.wp-block-woocommerce-cart-order-summary-block .wc-block-cart__totals-title {
	padding: 0 0 12px;
	margin: 0;
}

/* Same double-boxing on the checkout sidebar as the cart fix above: the
   order-summary panel, the coupon form, and (since we relocated the Place
   Order button into this sidebar — see the button-in-sidebar comment
   further down) the actions block each carry the shared card selectors,
   so each got its own full bordered box stacked on top of the next
   instead of one unified card. */
.wp-block-woocommerce-checkout-totals-block {
	/* Unlike the cart's equivalent block, WC's own CSS has a later
	   `.wp-block-woocommerce-checkout-totals-block{padding:0;width:100%}`
	   for the stacked/mobile layout that otherwise wins the cascade at
	   equal specificity — !important to actually keep the card's inset,
	   or every row (coupon, totals, "Загалом") sits flush against the
	   card's own border with only the title indented above them. */
	background: var(--bukfc-black-soft) !important;
	border: 1px solid var(--bukfc-gray-border);
	border-radius: 8px;
	padding: 20px !important;
	margin-bottom: 20px;
}
.wp-block-woocommerce-checkout-totals-block .wc-block-components-totals-wrapper,
.wp-block-woocommerce-checkout-totals-block .wc-block-components-panel,
.wp-block-woocommerce-checkout-totals-block .wc-block-components-order-summary,
.wp-block-woocommerce-checkout-totals-block .wp-block-woocommerce-checkout-order-summary-block,
.wp-block-woocommerce-checkout-totals-block .wp-block-woocommerce-checkout-order-summary-totals-block,
.wp-block-woocommerce-checkout-totals-block .wc-block-checkout__actions {
	/* !important: WC's own CSS sets some of these same properties (e.g. a
	   1px border on .wp-block-woocommerce-checkout-order-summary-block, and
	   padding-left/right:16px on .wc-block-components-panel specifically
	   for the coupon form) at this exact selector depth, so plain values
	   here lose the cascade on source order alone. Without it, each of
	   these nested pieces kept its own leftover mini-box (border, or just
	   the side padding meant to inset content away from a border that no
	   longer exists) instead of reading as one flat section of the card. */
	background: none !important;
	border: none !important;
	border-radius: 0 !important;
	padding: 0 !important;
	margin: 0 0 12px !important;
}
.wp-block-woocommerce-checkout-totals-block .wc-block-components-checkout-order-summary__title {
	padding: 0 0 12px;
	margin: 0;
}

.wc-block-cart-item,
.wc-block-components-order-summary-item {
	border-bottom-color: var(--bukfc-gray-border) !important;
	color: var(--bukfc-white);
}
/* Empty-cart upsell ("Новинки" product grid) — a plain WooCommerce core
   Gutenberg block, untouched until now. Its heading sat flush against the
   product grid below it (0px gap, WC gives the grid no margin-top at all),
   and the grid itself is hard-coded to 4 columns with no WC-core responsive
   breakpoint for that exact column count (unlike 2/3/5/6, which do have
   one) — so it never narrowed down at smaller widths like every other
   product grid on this site does. */
.wp-block-woocommerce-empty-cart-block .wc-block-grid {
	margin-top: 24px;
}
/* This block's <img> only gets its box from HTML width/height="300"
   attributes, with no aspect-ratio/object-fit backing it up — every current
   product photo happens to have a square crop, so it renders fine today, but
   nothing stops a future product whose image has no square crop yet (or a
   portrait/model photo) from rendering at its own native proportions instead
   of matching its siblings' size, breaking the grid the way it did here. */
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-image,
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-image img {
	aspect-ratio: 1 / 1;
	width: 100%;
	height: auto;
	object-fit: cover;
}
/* The above alone wasn't enough: .wc-block-grid__product-link (the <a>
   wrapping the image) is display:inline-block with no width set, so it
   shrink-wraps to whatever size its own content naturally renders at —
   and since each product's image resolves a DIFFERENT natural size from
   srcset before percentage widths have anything stable to resolve against,
   every product ended up with its own link width (300px, 347px, …) instead
   of all matching the shared column width, which is what actually produced
   the size mismatch (not the image's own aspect ratio, which was already
   correct — the BOX it sat in differed per product). Force it to stretch
   to the full column width so every product's image box starts from the
   same base before the square/cover rule above ever applies. */
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-link {
	display: block;
	width: 100%;
}
@container shop-main (max-width: 660px) {
	.wp-block-woocommerce-empty-cart-block .wc-block-grid.has-4-columns .wc-block-grid__product {
		flex: 1 0 50% !important;
		max-width: 50% !important;
	}
}
@container shop-main (max-width: 380px) {
	.wp-block-woocommerce-empty-cart-block .wc-block-grid.has-4-columns .wc-block-grid__product {
		flex: 1 0 100% !important;
		max-width: 100% !important;
	}
}

.wp-block-heading.wc-block-cart__empty-cart__title{
	margin-bottom: 100px;
}
@container shop-main (max-width: 1024px) {
	.wp-block-heading.wc-block-cart__empty-cart__title{
		margin-bottom: 50px;
	}
}
/* Quantity badge (the small circle on the product thumbnail's corner) — WC
   gives it a white background AND relies on inheriting a dark page-text
   color for the number, which our own white body text color overrides, so
   the "2" rendered white-on-white and was never visible. */
.wc-block-components-order-summary-item__quantity {
	color: var(--bukfc-black) !important;
}
/* "Зберегти X ₴" sale-savings badge on cart/checkout line items — separate
   from the "ЗНИЖКА -N%" ribbon on catalog cards (kept), this one just
   restates the discount already shown by the struck-through price right
   next to it, so it's redundant clutter here. */
.wc-block-components-sale-badge {
	display: none !important;
}

/* Reference puts the remove ("x") control next to the product title; the
   block markup nests it inside .wc-block-cart-item__quantity instead (next
   to the +/- stepper). Rather than fight React's DOM (it re-renders this
   subtree on every qty change, so JS-moved nodes would just get reset), lay
   .wc-block-cart-item__wrap out as a grid and use display:contents on the
   quantity wrapper to lift the remove-link and the stepper up into it as
   independent grid items, so they can be positioned without moving them in
   the actual DOM. */
/* !important throughout this block: WC's own cart.css targets the same
   elements via table.wc-block-cart-items .wc-block-cart-items__row ... ,
   which ties or beats our plain-class specificity and, being enqueued after
   shop-theme.css, wins the tie — so a plain override here is silently
   ignored (see KNOWN GOTCHAS). */
.wc-block-cart-item__wrap {
	display: grid !important;
	grid-template-columns: 1fr auto;
	column-gap: 12px;
}
.wc-block-cart-item__wrap > .wc-block-components-product-name {
	grid-column: 1;
	grid-row: 1;
}
.wc-block-cart-item__wrap > .wc-block-cart-item__prices {
	grid-column: 1 / -1;
	grid-row: 2;
}
.wc-block-cart-item__wrap > .wc-block-components-product-metadata {
	grid-column: 1 / -1;
	grid-row: 3;
}
.wc-block-cart-item__wrap > .wc-block-cart-item__quantity {
	display: contents !important;
}
.wc-block-cart-item__wrap .wc-block-components-quantity-selector {
	grid-column: 1 / -1;
	grid-row: 4;
	margin-top: 8px;
}
.wc-block-cart-item__wrap .wc-block-cart-item__remove-link {
	grid-column: 2;
	grid-row: 1;
	justify-self: end;
	align-self: start;
	color: var(--bukfc-gray-text);
	width: auto !important;
	height: auto !important;
}
.wc-block-cart-item__wrap .wc-block-cart-item__remove-link:hover {
	color: var(--bukfc-gold);
}

.wc-block-components-product-name {
	color: var(--bukfc-white) !important;
}

.wc-block-components-text-input input,
.wc-block-components-text-input textarea,
.wc-block-components-combobox-control input,
select.wc-block-components-country-input {
	background: var(--bukfc-white) !important;
	color: var(--bukfc-black) !important;
	border-radius: 4px;
}
/* .wc-block-components-select-input (Nova Poshta city/branch, "Область")
   is a taller wrapper around its own inner .wc-blocks-components-select
   __container, which is the actual visible rounded box — painting the
   outer wrapper white too made it bleed past the rounded box's own top
   edge as a flat-cornered white sliver (the outer wrapper is a few px
   taller, to leave room for the label before it shrinks). Paint the real
   box instead and leave the wrapper transparent. */
.wc-block-components-select-input {
	background: transparent !important;
}
.wc-block-components-select-input .wc-blocks-components-select__container {
	background: var(--bukfc-white) !important;
	color: var(--bukfc-black) !important;
	border-radius: 4px;
}
/* Nova Poshta city/branch (morkva UA Shipping) swaps the native select for
   jQuery Select2 — its own default .select2-container renders at 46px
   while every other field (text inputs, the plain country/state select)
   is 50px, so these two sat 4px shorter in the same row of fields. */
.select2-container,
.select2-container .select2-selection--single {
	height: 50px !important;
}
/* Floating labels (both the plain text inputs and this select component)
   inherit the page's white text color, so on their white field background
   — every state, since WC never floats this one outside the box — they
   were invisible: no placeholder-like hint of what to type, and the
   "unused" reserved space above the value read as the text being
   off-center rather than a label spot. */
.wc-block-components-text-input label,
.wc-blocks-components-select__label {
	color: var(--bukfc-gray-text) !important;
}

/* Quantity stepper — reference is a fully rounded pill (100x40, border-radius
   40px, light-grey fill, flat +/- glyphs, no visible input border), ours was
   a near-square 4px-radius white box. */
.wc-block-components-quantity-selector {
	background: rgb(246, 246, 246) !important;
	border-radius: 40px !important;
	border: none !important;
	width: 100px !important;
	height: 40px !important;
	overflow: hidden;
}
.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button,
.wc-block-components-quantity-selector .wc-block-components-quantity-selector__input {
	background: transparent !important;
	color: var(--bukfc-black) !important;
	border: none !important;
}
.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button {
	box-shadow: none !important;
}

.wc-block-components-totals-item,
.wc-block-components-totals-item__label,
.wc-block-components-totals-item__value {
	color: var(--bukfc-white);
}

/* Place-order button lives in the order-summary sidebar (see page-checkout.php
   comment + the "woocommerce/checkout-actions-block" placement in the
   Checkout page's block content), matching the reference's button-in-sidebar
   pattern instead of stock WooCommerce's button-under-payment-methods one.
   The Actions block has "lock":{"remove":true,"move":true} in its own
   block.json, and WooCommerce's checkout app self-heals that lock: whenever
   it doesn't find the Actions block inside .wc-block-checkout__main's own
   <form>, it silently re-inserts a second, default (no-price) copy of the
   button there — so moving the block still leaves a plain, priceless
   duplicate button sitting under the payment methods in the main column.
   Our real, working, price-showing button is the one in the sidebar
   (.wc-block-checkout__sidebar); hide only the self-healed duplicate. */
.wc-block-checkout__main .wc-block-checkout__actions {
	display: none !important;
}
/* Same button relocation, mobile fallout: WC's own responsive CSS stacks
   .wc-block-checkout__sidebar ABOVE .wc-block-checkout__main below its
   ~700px container breakpoint (`order:0` vs `order:1`) — fine normally,
   since the sidebar there is just a compact totals/coupon card. But since
   we moved the real Place Order button INTO that sidebar (above), the
   whole card — including the "Підтвердити замовлення" button — now
   renders ABOVE the contact/address/shipping form on mobile, so a visitor
   sees a clickable submit button before they've entered any details.
   WC also renders a second, redundant order-summary "fill" alongside that
   relocated button (its own built-in mobile recap-before-submit), which
   duplicates the sidebar's own totals right next to it now that both live
   in the same place. Flip the stack order on mobile so the form comes
   first and the summary+button still land right before it, and drop the
   now-redundant fill since the sidebar's real totals sit right there. */
@media (max-width: 768px) {
	.wc-block-checkout__sidebar {
		order: 2 !important;
	}
	.wc-block-checkout__main {
		order: 1 !important;
	}
}
.checkout-order-summary-block-fill-wrapper {
	display: none !important;
}

.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
	background: var(--bukfc-gold) !important;
	color: var(--bukfc-black) !important;
	border: none !important;
	border-radius: 999px !important;
	text-transform: uppercase;
	font-weight: 700 !important;
	/* WC's own default is 18px/30px padding around 13px text — a lot of
	   empty pill around a small label, made worse once the label wraps to
	   two lines at narrower widths (padding stays the same, so the pill
	   just gets taller and taller). Bigger text, tighter padding reads as
	   one deliberately-sized button instead. */
	padding: 16px 24px !important;
	font-size: 16px !important;
}

.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover {
	background: var(--bukfc-gold-dark) !important;
}
/* Drop the "· 1 000 ₴" price readout WC appends to this button — the
   total is already shown right above it in the summary card, so the
   button was just repeating it while stretching itself wider/taller to
   fit both the label and the price side by side. */
.wc-block-components-checkout-place-order-button__separator,
.wc-block-components-checkout-place-order-button__price {
	display: none !important;
}

.wc-block-components-notice-banner {
	border-radius: 6px;
}

.wc-block-components-checkbox .wc-block-components-checkbox__label {
	color: var(--bukfc-white);
}

/* Cart/checkout page heading — breadcrumb + H1 above the block (see
   page-cart.php / page-checkout.php). Reuses the same 28px title treatment
   as the product-page breadcrumb/H1 pair. */
.shop-cart-page .shop-catalog-title,
.shop-checkout-page .shop-catalog-title {
	margin-bottom: 24px;
}

/* Order received ("Дякуємо. Ваше замовлення було отримано.") page — this
   content (order-overview summary strip, order table, billing/shipping
   addresses) ships with no layout CSS of its own in this theme, and what
   WooCommerce core itself contributes (woocommerce.css's `ul.order_details`
   / `ul.order_details li` — the markup carries both that legacy class and
   `.woocommerce-order-overview`) is built for its own classic float layout:
   `float:left`, a 2em `padding-right` + dashed `border-right` as the
   divider between items, `margin:0 0 3em`. That core rule's selector
   (`.woocommerce ul.order_details li`, 2 classes + 2 elements) out-specifies
   a plain `.woocommerce-order-overview li`, so it was winning the padding/
   border/float tug-of-war even after this section's rules below — hence
   selectors here repeat the `.woocommerce ul.order_details` chain to
   out-specify it cleanly instead of reaching for `!important`. */
.woocommerce ul.order_details.woocommerce-order-overview {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	row-gap: 12px;
	list-style: none;
	margin: 0 0 32px;
	padding: 20px 24px;
	background: var(--bukfc-black-soft);
	border: 1px solid var(--bukfc-gray-border);
	border-radius: 8px;
}
/* Elastic equal-width columns (flex-basis 0, grow+shrink 1) rather than a
   hardcoded `flex-basis:25%` — with 4 items that still lands on exactly a
   quarter each, but stays immune to the 25%-fixed-basis approach's failure
   mode: zero rounding slack with `flex-shrink:0` meant the sub-pixel width
   of 4×25% came out a hair over 100% and wrapped the last item to its own
   row. */
.woocommerce ul.order_details.woocommerce-order-overview li {
	float: none;
	display: block;
	list-style: none;
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
	padding: 0;
	border-right: none;
	line-height: normal;
	text-align: center;
	color: var(--bukfc-gray-text);
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .02em;
}
.woocommerce ul.order_details.woocommerce-order-overview li strong {
	display: block;
	width: 100%;
	margin-top: 4px;
	color: var(--bukfc-white);
	font-size: 16px;
	text-transform: none;
	letter-spacing: normal;
}
.woocommerce-customer-details {
	margin-top: 40px;
}
.woocommerce-customer-details .woocommerce-column__title {
	margin: 0 0 12px;
	font-size: 18px;
	font-weight: 400;
	color: var(--bukfc-white);
}
.woocommerce-customer-details address {
	font-style: normal;
	line-height: 1.7;
	color: var(--bukfc-gray-text);
}
.woocommerce-customer-details address .woocommerce-customer-details--phone,
.woocommerce-customer-details address .woocommerce-customer-details--email {
	margin: 12px 0 0;
}
/* Beats woocommerce-layout.css's float-based `.col2-set .col-1/.col-2{width:47%}`
   on specificity (extra `.woocommerce` ancestor class) — same gap either
   way, but flex lets each column's content set its own height instead of
   the two floats' mismatched heights leaving a ragged bottom edge. */
.woocommerce .woocommerce-columns--addresses.col2-set {
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
}
.woocommerce .woocommerce-columns--addresses.col2-set .col-1,
.woocommerce .woocommerce-columns--addresses.col2-set .col-2 {
	float: none;
	width: auto;
	flex: 1 1 320px;
}

/* Checkout steps — numbered circular badges ("1 Контактна інформація" etc.)
   grouping each form section, matching the reference's step treatment.
   Counted with :has() rather than nth-of-type so the title-less order-notes
   step (no .wc-block-components-checkout-step__title) doesn't get a number. */
.wc-block-components-checkout-step:has(.wc-block-components-checkout-step__title) {
	counter-increment: bukfc-checkout-step;
	position: relative;
}
.wc-block-checkout__form {
	counter-reset: bukfc-checkout-step;
}
.wc-block-components-checkout-step__heading {
	display: flex;
	align-items: center;
	gap: 12px;
}
.wc-block-components-checkout-step:has(.wc-block-components-checkout-step__title) .wc-block-components-checkout-step__heading::before {
	content: counter(bukfc-checkout-step);
	flex: 0 0 28px;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--bukfc-gold);
	color: var(--bukfc-black);
	font-size: 14px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Cart bottom actions — "Продовжити покупки" / "Очистити кошик" pill
   buttons, in addition to the sidebar's checkout button (see page-cart.php). */
.shop-cart-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 24px;
}
.shop-pill-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 40px;
	padding: 0 24px;
	border-radius: 40px;
	background: rgb(235, 235, 235);
	color: var(--bukfc-black);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	border: none;
	cursor: pointer;
}
.shop-pill-btn:hover {
	background: var(--bukfc-gray-border);
	color: var(--bukfc-black);
}

/* ==========================================================================
   MY ACCOUNT (classic WooCommerce templates — no Gutenberg blocks here)
   ========================================================================== */
/* Scoped to div.woocommerce-account, not body.woocommerce-account — WooCommerce
   puts that same class on both <body> (account pages) and this wrapper div;
   an unscoped selector was making <body> a flex container by accident. */
div.woocommerce-account {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	padding: 20px 0 60px;
}
.woocommerce-MyAccount-navigation {
	flex: 0 0 220px;
	background: var(--bukfc-black-soft);
	border: 1px solid var(--bukfc-gray-border);
	border-radius: 8px;
	padding: 10px 0;
}
.woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.woocommerce-MyAccount-navigation li {
	border-bottom: 1px solid var(--bukfc-gray-border);
}
.woocommerce-MyAccount-navigation li:last-child {
	border-bottom: none;
}
.woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 10px 18px;
	color: var(--bukfc-white);
	font-size: 17px;
	text-transform: uppercase;
}
.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation li a:hover {
	color: var(--bukfc-gold);
}
.woocommerce-MyAccount-content {
	flex: 1 1 480px;
	background: var(--bukfc-black-soft);
	border: 1px solid var(--bukfc-gray-border);
	border-radius: 8px;
	padding: 24px;
	color: var(--bukfc-white);
}
.woocommerce-MyAccount-content a {
	color: var(--bukfc-gold);
}
.woocommerce-ResetPassword {
	background: var(--bukfc-black-soft);
	border: 1px solid var(--bukfc-gray-border);
	border-radius: 8px;
	padding: 24px;
}
/* WC core floats "New password" / "Re-enter new password" (and the lost-
   password request form's lone email field) at 47% width side by side
   (.form-row-first/.form-row-last, woocommerce-layout.css) — fine for a
   wide two-column checkout form, but here it left this single-column card
   half-empty and made the lone lost-password field look squeezed. Stack
   them full-width instead. */
form.woocommerce-ResetPassword .form-row-first,
form.woocommerce-ResetPassword .form-row-last {
	width: 100%;
	float: none;
}
/* WC core gives every .form-row only a 6px bottom margin
   (woocommerce.css: .form-row{padding:3px;margin:0 0 6px}) — fine for its
   own light, compact default theme, but on our larger dark-panel fields
   (address forms, account details) it reads as almost no gap at all, most
   noticeably right before the submit button which then looks glued to the
   field above it. */
.woocommerce form .form-row {
	margin-bottom: 26px;
}
.woocommerce-MyAccount-content form > p:last-child {
	margin-top: 8px;
}
/* Account Details' "Password change" section is a plain <fieldset><legend>
   (woocommerce/myaccount/form-edit-account.php) — browsers draw their own
   default border/padding/legend styling on fieldset with nothing here to
   reset it, so a stray box outline showed up around just this one section,
   unlike every other field on the page. */
.woocommerce-EditAccountForm fieldset {
	border: none;
	margin: 0;
	padding: 0;
}
.woocommerce-EditAccountForm fieldset legend {
	padding: 0;
	margin-bottom: 20px;
	font-size: 18px;
	color: var(--bukfc-white);
}
.woocommerce form .form-row label {
	color: var(--bukfc-gray-text);
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce-MyAccount-content input.input-text,
.woocommerce-MyAccount-content textarea {
	background-color: var(--bukfc-white);
	color: var(--bukfc-black);
	border: 1px solid var(--bukfc-gray-border);
	border-radius: 4px;
	padding: 8px 12px;
}
/* Restore WooCommerce's own right-side clearance for the show/hide password
   eye icon it injects into `.password-input` wrappers — the generic
   input-text padding above (same specificity, loaded after WC's CSS) was
   overwriting it, so typed password text rendered underneath the icon. */
.woocommerce form .password-input input.input-text[type="password"] {
	padding-right: 2.5rem;
}
.woocommerce-MyAccount-content select {
	background-color: var(--bukfc-white);
	color: var(--bukfc-black);
	border: 1px solid var(--bukfc-gray-border);
	border-radius: 4px;
	padding: 8px 32px 8px 12px;
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23000000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
}
div.woocommerce-account .col-1,
div.woocommerce-account .col-2 {
	float: none;
	width: 100%;
}

/* Login/Register columns — WooCommerce core only floats .u-column1/.u-column2
   left/right (48% width each), it never equalizes their height. Left as
   float-based, the login card (shorter form) and register card (taller form)
   end at different heights, e.g. ~407px vs ~541px measured on this page —
   a visible ragged edge between the two side-by-side cards. Flexing the row
   and stretching each card to the row's height fixes that without touching
   WooCommerce's column widths. */
#customer_login {
	display: flex;
	align-items: stretch;
	gap: 32px;
}
#customer_login .u-column1,
#customer_login .u-column2 {
	float: none;
	width: auto;
	flex: 1 1 0;
}
#customer_login .bukfc-account-card {
	display: flex;
	flex-direction: column;
	height: 100%;
}
#customer_login .bukfc-account-card form.woocommerce-form {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}
/* Pushes the remember-me/submit footer band to the bottom of the stretched
   login card instead of leaving it directly under the password field with
   empty space below — ID+class specificity overrides just the margin-top
   longhand from the shorthand below without touching the modal's footer
   (.bukfc-modal-body .bukfc-form-footer), which isn't inside a flex row. */
#customer_login .bukfc-form-footer {
	margin-top: auto;
}
/* Below 768px (same breakpoint the product page uses to stack its own
   two-column layout) the login/register row has no room left — two 48%-wide
   cards squeeze into ~170px each on a phone, wrapping every label and
   clipping the submit button off the bottom of the viewport. Stack instead. */
@media (max-width: 768px) {
	#customer_login {
		flex-direction: column;
	}
	#customer_login .bukfc-account-card {
		height: auto;
	}
}

/* Login/Register cards — title + divider live INSIDE the card (bounded,
   self-contained unit), matching the reference's modal card treatment. */
/* No max-width here: on the My Account page the login/register cards sit in
   an equal-width flex row (#customer_login .u-column1/.u-column2, flex:1 1 0
   above) — a fixed cap left each card stranded on the left of its (much
   wider) column, with a huge dead gap of bare background to its right. Let
   the card fill its column so the pair reads as ~45/45% of the row instead.
   The login modal already sets its own sizing via the dialog width, so it's
   unaffected either way. */
.bukfc-account-card {
	background: var(--bukfc-black-soft);
	border: 1px solid var(--bukfc-gray-border);
	border-radius: 8px;
	overflow: hidden;
}
.bukfc-account-card-title {
	margin: 0;
	padding: 20px 24px;
	border-bottom: 1px solid var(--bukfc-gray-border);
	font-size: 24px;
	font-weight: 400;
	color: var(--bukfc-white);
}
.bukfc-account-card form.woocommerce-form {
	/* WC core styles form.login/form.register with their own box
	   (border:1px solid + margin:2em 0 + padding:20px) meant for the
	   form sitting bare on the page — redundant once it's already inside
	   our own card chrome, and on the dark palette that 20%-opacity
	   border shows up as a stray rounded rectangle around just the two
	   fields, most visible in the login modal where nothing else competes
	   with it. */
	padding: 24px;
	border: none;
	margin: 0;
}
/* "Lost your password?" sits inline with the Password label instead of
   below the submit button, matching the reference's field-level placement. */
.bukfc-password-row-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}
.bukfc-password-row-head .woocommerce-LostPassword {
	margin: 0;
	font-size: 13px;
	color: var(--bukfc-gray-text);
	white-space: nowrap;
}
.bukfc-password-row-head .woocommerce-LostPassword a,
.bukfc-password-row-head .woocommerce-LostPassword {
	color: var(--bukfc-gray-text);
}
.bukfc-password-row-head a:hover {
	color: var(--bukfc-gold);
}
/* Remember-me + submit footer band, checkbox on the left and the submit
   button on the right (the DOM order already puts the checkbox first, this
   only supplies the layout). Was a light-gray strip — every other card
   footer on the site (.bukfc-modal-footer, .cart-modal-summary) is instead
   a plain dark band separated by a hairline border, so match that instead
   of standing out as the one light element on an otherwise all-dark site. */
.bukfc-form-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	background: none;
	border-top: 1px solid var(--bukfc-gray-border);
	margin: 24px -24px -24px;
	/* .bukfc-account-card (this footer's parent, both here and in the login
	   modal) is border-radius:8px + overflow:hidden — this footer's negative
	   margin stretches it flush with the card's own edges, so its default
	   square corners sat exactly on top of the card's rounded ones and got
	   clipped by them, slicing the corner off the submit button that lives
	   in this footer's bottom-right. Round to match instead. */
	border-radius: 0 0 8px 8px;
	padding: 16px 24px;
}
.bukfc-form-footer .woocommerce-form-login__rememberme {
	color: var(--bukfc-white);
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
}
.bukfc-form-footer .woocommerce-form-login__submit {
	font-size: 14px !important;
	font-weight: 400 !important;
	height: 40px;
	padding: 0 24px;
}

/* ==========================================================================
   HOMEPAGE — hero slider + Новинки/Sale tabs
   ========================================================================== */
.home-style {
	padding: 0 !important;
	max-width: none !important;
}
.home-hero {
	position: relative;
	height: 520px;
	overflow: hidden;
}
.home-hero-slides {
	position: relative;
	height: 100%;
}
.home-hero-slide {
	position: absolute;
	inset: 0;
	background: var(--bukfc-black-soft) center / cover no-repeat;
	opacity: 0;
	transition: opacity .6s ease;
	display: flex;
	align-items: center;
}
.home-hero-slide::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(0, 0, 0, .85) 0%, rgba(0, 0, 0, .4) 55%, rgba(0, 0, 0, .1) 100%);
}
.home-hero-slide.is-active {
	opacity: 1;
	z-index: 1;
}
.home-hero-slide-inner {
	position: relative;
	z-index: 2;
	width: 100%;
	padding: 0 84px;
}
.home-hero-subtitle {
	display: inline-block;
	color: var(--bukfc-gold);
	text-transform: uppercase;
	font-size: 17px;
	letter-spacing: 1px;
	margin-bottom: 10px;
}
.home-hero-title {
	color: var(--bukfc-white);
	font-size: 44px;
	text-transform: uppercase;
	max-width: 600px;
	margin-bottom: 24px;
	line-height: 1.15;
}
.home-hero-btn {
	display: inline-block;
	background: var(--bukfc-gold);
	color: var(--bukfc-black);
	padding: 14px 34px;
	border-radius: 999px;
	text-transform: uppercase;
	font-weight: 700;
	font-size: 17px;
}
.home-hero-btn:hover {
	background: var(--bukfc-gold-dark);
}
.home-hero-dots {
	position: absolute;
	z-index: 3;
	bottom: 24px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 8px;
}
.home-hero-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	border: none;
	background: rgba(255, 255, 255, .4);
	cursor: pointer;
	padding: 0;
}
.home-hero-dot.is-active {
	background: var(--bukfc-gold);
}

.home-products {
	padding: 60px 0;
}
.home-products-tabs {
	display: flex;
	gap: 30px;
	border-bottom: 1px solid var(--bukfc-gray-border);
	margin-bottom: 30px;
}
.home-products-tab {
	background: none;
	border: none;
	color: var(--bukfc-gray-text);
	font-size: 18px;
	text-transform: uppercase;
	padding: 0 0 14px;
	cursor: pointer;
	border-bottom: 2px solid transparent;
}
.home-products-tab.is-active {
	color: var(--bukfc-gold);
	border-bottom-color: var(--bukfc-gold);
}
.home-products-panel {
	display: none;
}
.home-products-panel.is-active {
	display: block;
}
/* Product carousel: single-row, arrow-navigated, auto-rotating (shakhtar
   shows every product row — Новинки/Sale and each category block — this
   way, ~5 cards visible at a time, instead of a static multi-row grid). */
.home-carousel {
	position: relative;
}
.home-carousel-viewport {
	overflow: hidden;
}
.home-products-grid.products.home-carousel-track {
	display: flex;
	gap: 24px;
	margin: 0;
	transition: transform .45s ease;
	will-change: transform;
}
.home-carousel-track > li.product {
	flex: 0 0 calc((100% - 24px * 4) / 5);
	max-width: calc((100% - 24px * 4) / 5);
}
/* It's a carousel either way (arrows page through whatever doesn't fit),
   so there's no reason to cram the same 5 cards into a shrinking row —
   step the per-view count down one at a time (see the @container blocks
   below) instead of jumping straight from 5 to 3 to 1, so a card is never
   squeezed narrower than it needs to be. Container queries (against
   .shop-catalog-main, see its container-type comment), not @media: this
   carousel sits in the same column that goes narrow at in-between viewport
   widths without the viewport itself being narrow. */
.home-carousel-arrow {
	position: absolute;
	top: 40%;
	transform: translateY(-50%);
	z-index: 2;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid var(--bukfc-gray-border);
	background: var(--bukfc-black-soft);
	color: var(--bukfc-white);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	cursor: pointer;
	transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.home-carousel-arrow:hover {
	background: var(--bukfc-gold);
	border-color: var(--bukfc-gold);
	color: var(--bukfc-black);
}
.home-carousel-prev {
	left: -22px;
}
.home-carousel-next {
	right: -22px;
}
.home-carousel.is-static .home-carousel-arrow,
.home-carousel.at-start .home-carousel-prev,
.home-carousel.at-end .home-carousel-next {
	opacity: .35;
	pointer-events: none;
}
.home-carousel.is-static .home-carousel-arrow {
	display: none;
}
.home-products-empty {
	color: var(--bukfc-gray-text);
}
.home-page-content {
	padding: 0 40px 60px;
	color: var(--bukfc-white);
}

/* Shop front page: repeated "static category banner + product slider"
   blocks below Новинки/Sale (shakhtar stacks several of these down their
   homepage — training, balls, back-to-school, sneakers). */
.home-category-block {
	/* No horizontal padding of its own — .home-category-banner below breaks
	   out to full width, so this side padding would only have fought it. */
	padding: 0 0 60px;
}
/* Full-bleed: breaks out of .shop-catalog-main's own 40px/20px padding
   (shop-theme.css, the .shop-catalog-main rule) to span the full content
   column edge to edge, same width as the fixed sidebar next to it — a
   plain block here just sits inset by that padding like everything else
   on the page. .home-hero (the slider above it) gets the same treatment;
   "banners" reads as both on a page that otherwise never breaks its own
   padding. */
.home-hero,
.home-category-banner {
	margin-left: -40px;
	margin-right: -40px;
	width: calc(100% + 80px);
}
.home-category-banner {
	position: relative;
	display: block;
	height: 320px;
	background: var(--bukfc-black-soft) center / cover no-repeat;
	overflow: hidden;
	margin-bottom: 30px;
	transition: opacity .2s ease;
}
.home-category-banner:hover {
	opacity: .92;
}
@media (max-width: 768px) {
	.home-hero,
	.home-category-banner {
		margin-left: -20px;
		margin-right: -20px;
		width: calc(100% + 40px);
	}
}

/* "Про компанію" SEO text block above the footer */
.home-about {
	padding: 0 40px 60px;
	max-width: 900px;
}
.home-about-title {
	color: var(--bukfc-white);
	font-size: 26px;
	text-transform: uppercase;
	margin: 0 0 8px;
}
.home-about-subtitle {
	color: var(--bukfc-gray-text);
	font-size: 17px;
	font-weight: 400;
	margin: 0 0 16px;
}
.home-about-content {
	color: var(--bukfc-gray-text);
	font-size: 15px;
	line-height: 1.7;
	max-height: 84px;
	overflow: hidden;
	position: relative;
}
.home-about-content p {
	margin: 0 0 14px;
}
.home-about-toggle {
	display: inline-block;
	background: none;
	border: none;
	color: var(--bukfc-gold);
	font-weight: 700;
	text-transform: uppercase;
	font-size: 14px;
	padding: 14px 0 0;
	cursor: pointer;
}
.home-about-toggle:hover {
	color: var(--bukfc-gold-dark);
}

/* ==========================================================================
   "Про компанію" standalone page — image + caption in a left column, body
   copy in a right column. Matches shop.bukfc.com/about/, measured live:
   the caption under the photo is 22px/centered (vs the body copy's plain
   18px/left-aligned), which is what actually separates it visually there —
   not a different template, just a bigger, centered, standalone line. */
.about-page-hero {
	display: flex;
	gap: 40px;
	align-items: flex-start;
	margin-bottom: 32px;
}
.about-page-media {
	flex: 0 0 360px;
	max-width: 360px;
}
.about-page-media img {
	width: 100%;
	border-radius: 8px;
	display: block;
	margin-bottom: 0;
}
.about-page-caption {
	text-align: center;
	font-size: 22px;
	margin: 16px 0 0;
}
.about-page-body {
	flex: 1 1 auto;
	min-width: 0;
}
@media (max-width: 780px) {
	.about-page-hero {
		flex-direction: column;
	}
	.about-page-media {
		max-width: 100%;
		flex-basis: auto;
	}
}

@media (max-width: 900px) {
	.home-hero {
		height: 420px;
	}
	.home-hero-title {
		font-size: 30px;
	}
	.home-category-banner {
		height: 240px;
	}
}
@media (max-width: 480px) {
	.home-hero-slide-inner {
		padding: 0 24px;
	}
	.home-carousel-prev {
		left: -14px;
	}
	.home-carousel-next {
		right: -14px;
	}
	.home-carousel-arrow {
		width: 36px;
		height: 36px;
		font-size: 16px;
	}
	.home-category-block {
		padding: 0 0 40px;
	}
	.home-about {
		padding: 0 16px 40px;
	}
}
/* Carousel per-view count — container queries against .shop-catalog-main's
   real width (see its container-type comment), not the viewport, so a
   persistent left nav or a squeezed column doesn't leave 5 cards crammed
   into a viewport that only looks wide. */
@container shop-main (max-width: 995px) {
	.home-carousel-track > li.product {
		flex: 0 0 calc((100% - 24px * 3) / 4);
		max-width: calc((100% - 24px * 3) / 4);
	}
}
@container shop-main (max-width: 791px) {
	.home-carousel-track > li.product {
		flex: 0 0 calc((100% - 24px * 2) / 3);
		max-width: calc((100% - 24px * 2) / 3);
	}
}
@container shop-main (max-width: 587px) {
	/* Below tablet width, a rigid 2-up grid squeezes each card into ~150-180px —
	   just wide enough for a portrait, cramped-looking card (title wraps to
	   2-3 lines, price/button stack tall). A ~14% peek of the next card
	   (tried first) just cropped its image mid-frame with a hard edge —
	   reads as a rendering glitch, not an intentional carousel hint. One
	   full-width card per view instead; the arrows are still there to page. */
	.home-carousel-track > li.product {
		flex: 0 0 100%;
		max-width: 100%;
	}
}

/* ==========================================================================
   404 PAGE
   ========================================================================== */
.shop-404 {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 80px 20px 100px;
}
.shop-404-code {
	font-size: 140px;
	font-weight: 800;
	line-height: 1;
	color: var(--bukfc-gold);
	text-shadow: 0 0 40px rgba(255, 221, 0, .25);
}
.shop-404-title {
	font-size: 28px;
	text-transform: uppercase;
	margin: 8px 0 12px;
}
.shop-404-text {
	color: var(--bukfc-gray-text);
	max-width: 440px;
	margin: 0 0 32px;
}
.shop-404-search {
	width: 100%;
	max-width: 420px;
	margin-bottom: 32px;
}
.shop-404-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
}
.shop-404-btn-outline {
	background: none;
	border: 1px solid var(--bukfc-gray-border);
	color: var(--bukfc-white);
}
.shop-404-btn-outline:hover {
	background: var(--bukfc-black-soft);
	border-color: var(--bukfc-gold);
}
@media (max-width: 600px) {
	.shop-404-code {
		font-size: 90px;
	}
}

/* ==========================================================================
   My Account > Orders — stacked (mobile) table row-label overlap.
   WooCommerce's responsive table (woocommerce-smallscreen.css) turns each
   <td> into display:block and draws its row label via a FLOATED ::before
   pseudo-element (content: attr(data-title)). A td with float:left as its
   ONLY content (e.g. the custom "Накладна" tracking-number column from the
   morkva shipping plugin, which is empty until a tracking number is set)
   never establishes a block-formatting context to contain that float, so
   the td's own box collapses to near-zero height — the label text still
   paints at full size but spills downward, overlapping the very next
   stacked row's label ("Дії:"). overflow:hidden forces the td to contain
   its floated child regardless of whether it has real text content. */
@media (max-width: 768px) {
	.woocommerce table.shop_table_responsive tr td {
		overflow: hidden;
	}
}

/* ==========================================================================
   QA FIXES (front-end layout/UX pass)
   B-07 B-15 B-16 B-19 B-20 B-21 B-22 B-31 B-40 B-41 B-45 B-46 + mobile grid
   ========================================================================== */

/* Utility for the visually hidden home <h1> (B-39) */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* B-46: visible keyboard focus (search keeps its own border-colour focus) */
a:focus-visible,
button:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--bukfc-gold);
	outline-offset: 2px;
}
.shop-topbar-search-input:focus-visible {
	outline: 2px solid var(--bukfc-gold);
	outline-offset: 2px;
}

/* B-15: hero slide image is a real <img> now (object-fit instead of a
   stretched background) */
.home-hero-picture,
.home-hero-img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
}
.home-hero-img {
	object-fit: cover;
	object-position: center 30%;
}
.home-hero-slide::before {
	z-index: 1;
}
.home-hero-arrow {
	position: absolute;
	z-index: 3;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid var(--bukfc-gray-border);
	background: rgba(0, 0, 0, .55);
	color: var(--bukfc-white);
	font-size: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0;
	transition: background .2s ease, color .2s ease;
}
.home-hero-arrow:hover {
	background: var(--bukfc-gold);
	color: var(--bukfc-black);
	border-color: var(--bukfc-gold);
}
.home-hero-prev {
	left: 16px;
}
.home-hero-next {
	right: 16px;
}
/* B-22: 24x24 hit area around the 10px visible dot */
.home-hero-dot {
	width: 24px;
	height: 24px;
	padding: 7px;
	background-clip: content-box;
	box-sizing: border-box;
}
.home-hero-dots {
	gap: 0;
	bottom: 14px;
}
@media (max-width: 600px) {
	.home-hero-arrow {
		width: 36px;
		height: 36px;
		font-size: 16px;
	}
	.home-hero-prev {
		left: 8px;
	}
	.home-hero-next {
		right: 8px;
	}
	.home-hero-slide-inner {
		padding: 0 64px;
	}
}

/* B-16: category banner with name + CTA */
.home-category-banner-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 30%;
}
.home-category-banner::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(90deg, rgba(0, 0, 0, .75) 0%, rgba(0, 0, 0, .3) 60%, rgba(0, 0, 0, 0) 100%);
}
.home-category-banner-text {
	position: absolute;
	z-index: 2;
	left: 60px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	max-width: calc(100% - 120px);
}
.home-category-banner-title {
	color: var(--bukfc-white);
	font-size: 36px;
	font-weight: 700;
	line-height: 1.15;
	text-transform: uppercase;
}
.home-category-banner-cta {
	display: inline-block;
	background: var(--bukfc-gold);
	color: var(--bukfc-black);
	padding: 12px 28px;
	border-radius: 999px;
	text-transform: uppercase;
	font-weight: 700;
	font-size: 16px;
}
.home-category-banner:hover .home-category-banner-cta {
	background: var(--bukfc-gold-dark);
}
@media (max-width: 768px) {
	.home-category-banner-text {
		left: 24px;
		max-width: calc(100% - 48px);
	}
	.home-category-banner-title {
		font-size: 24px;
	}
	.home-category-banner-cta {
		padding: 10px 22px;
		font-size: 14px;
	}
}

/* B-31: current category in the sidebar/drawer. "Всі товари" is gold by
   default; on a category page it goes neutral so only the category lights up. */
body.tax-product_cat .shop-nav-all {
	color: var(--bukfc-white);
}
.shop-nav-item.is-current > .shop-nav-link {
	color: var(--bukfc-gold);
	font-weight: 700;
	box-shadow: inset 3px 0 0 var(--bukfc-gold);
}

/* B-19: related products — 4-5 cards per view on desktop, measured against
   the product column (container query), fewer as it narrows. */
.bukfc-related-carousel .home-carousel-track > li.product {
	flex: 0 0 calc((100% - 24px * 4) / 5);
	max-width: calc((100% - 24px * 4) / 5);
}
@container bukfc-product-main (max-width: 999px) {
	.bukfc-related-carousel .home-carousel-track > li.product {
		flex: 0 0 calc((100% - 24px * 3) / 4);
		max-width: calc((100% - 24px * 3) / 4);
	}
}
@container bukfc-product-main (max-width: 759px) {
	.bukfc-related-carousel .home-carousel-track > li.product {
		flex: 0 0 calc((100% - 24px * 2) / 3);
		max-width: calc((100% - 24px * 2) / 3);
	}
}
@container bukfc-product-main (max-width: 519px) {
	.bukfc-related-carousel .home-carousel-track > li.product {
		flex: 0 0 calc((100% - 24px) / 2);
		max-width: calc((100% - 24px) / 2);
	}
}
@container bukfc-product-main (max-width: 359px) {
	.bukfc-related-carousel .home-carousel-track > li.product {
		flex: 0 0 100%;
		max-width: 100%;
	}
}
/* B-40: arrows sat -22px outside the viewport and pushed the page wider */
@media (max-width: 1140px) {
	.bukfc-related-carousel .home-carousel-prev {
		left: 4px;
	}
	.bukfc-related-carousel .home-carousel-next {
		right: 4px;
	}
}
/* Narrow cards: keep the add-to-cart label from overflowing */
.bukfc-related-carousel .shop-card-add-to-cart-text {
	max-width: 100%;
}

/* B-40: never let a stray overflowing child create a horizontal scrollbar */
html,
body {
	overflow-x: clip;
}

/* B-41: keep the socials/phone visible on short screens — links scroll,
   the contact block stays pinned to the bottom of the fixed column. */
.club-nav-contact,
.shop-sidebar-contact {
	position: sticky;
	bottom: 0;
	background: var(--bukfc-black);
}
@media (min-width: 1141px) and (max-height: 760px) {
	.club-nav-inner {
		padding-top: 12px;
	}
	.club-nav-logo img {
		width: 48px;
		height: 48px;
	}
	.club-nav-home,
	.club-nav-item a {
		padding-top: 6px;
		padding-bottom: 6px;
	}
	.club-nav-contact {
		padding: 10px 8px 12px;
	}
	.shop-nav-link {
		padding-top: 9px;
		padding-bottom: 9px;
	}
}

/* B-45: WordPress admin bar (32px desktop / 46px <=782px) overlapped the
   fixed sidebars and the sticky header. It is absolute (scrolls away)
   below 600px, so no offset there. */
.admin-bar .shop-topbar {
	top: 32px;
}
.admin-bar .club-nav,
.admin-bar .shop-sidebar {
	top: 32px;
	height: calc(100vh - 32px);
}
@media (max-width: 782px) {
	.admin-bar .shop-topbar {
		top: 46px;
	}
}
@media (max-width: 600px) {
	.admin-bar .shop-topbar {
		top: 0;
	}
}

/* B-21 / B-07 / B-22: compact one-row sticky header on tablets/phones */
@media (max-width: 1140px) {
	.shop-topbar-inner {
		gap: 8px;
		padding: 8px 12px;
		flex-wrap: nowrap;
	}
	.shop-logo img {
		max-height: 40px;
	}
	.shop-logo-text {
		font-size: 16px;
	}
	.shop-topbar-search {
		flex: 1 1 0;
		min-width: 0;
		max-width: none;
	}
	.shop-topbar-search-input {
		height: 40px;
		padding: 0 40px 0 12px;
		min-width: 0;
	}
	.shop-topbar-actions {
		gap: 6px;
		margin-left: 0;
	}
	.header-account-icon,
	.header-cart-icon {
		width: 40px;
		height: 40px;
	}
	/* 40x40 tap area around the 18px burger lines */
	.shop-topbar-inner .burger {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		margin-left: 0;
	}
	/* Drawer starts right under the (now ~60px) header with a little air,
	   instead of 80px of dead space / being covered by it. */
	.mobile_menu_container {
		border-top-width: 66px;
	}
	.admin-bar .mobile_menu_container {
		top: 32px;
		height: calc(100vh - 32px);
	}
}
@media (max-width: 782px) {
	.admin-bar .mobile_menu_container {
		top: 46px;
		height: calc(100vh - 46px);
	}
}
@media (max-width: 600px) {
	.admin-bar .mobile_menu_container {
		top: 0;
		height: 100vh;
	}
}
@media (max-width: 480px) {
	.shop-topbar-inner {
		padding: 8px 8px;
		gap: 6px;
	}
	.shop-logo img {
		max-height: 36px;
		max-width: 64px;
		object-fit: contain;
	}
	.shop-topbar-search-input {
		font-size: 14px;
	}
	.shop-topbar-search-btn {
		width: 30px;
		height: 30px;
		top: 5px;
	}
	.header-account-icon,
	.header-cart-icon {
		width: 36px;
		height: 36px;
	}
	.shop-topbar-inner .burger {
		width: 36px;
		height: 36px;
	}
}

/* B-22: footer links / chips — at least 24px tall hit area */
.footer-column a,
.footer-phone,
.footer-club-link {
	display: inline-block;
	min-height: 24px;
	padding: 3px 0;
	line-height: 1.4;
}
.shop-filter-chip,
.shop-filter-reset {
	min-height: 28px;
}

/* Catalog: 2-column product grid on phones (was 1 column below 420px) */
@container shop-main (max-width: 420px) {
	.woocommerce ul.products {
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
	}
	.woocommerce ul.products li.product {
		padding: 8px;
	}
}

/* B-20: cart items table must fit 320px */
@media (max-width: 480px) {
	.wp-block-woocommerce-cart,
	.wp-block-woocommerce-cart .wc-block-cart {
		max-width: 100%;
		overflow-x: hidden;
	}
	body table.wc-block-cart-items {
		width: 100%;
		max-width: 100%;
		table-layout: fixed;
		padding: 0;
	}
	body table.wc-block-cart-items thead th:first-child,
	body table.wc-block-cart-items tbody td:first-child {
		padding-left: 8px !important;
	}
	body table.wc-block-cart-items thead th:last-child,
	body table.wc-block-cart-items tbody td:last-child {
		padding-right: 8px !important;
	}
	body table.wc-block-cart-items .wc-block-cart-item__image {
		width: 64px;
	}
	body table.wc-block-cart-items .wc-block-cart-item__total {
		width: 76px;
		word-break: break-word;
	}
	body table.wc-block-cart-items .wc-block-cart-item__product,
	body table.wc-block-cart-items .wc-block-components-product-name {
		min-width: 0;
		overflow-wrap: anywhere;
	}
}

/* WooCommerce notices render inside the flex toolbar: give them their own full-width row
   so the result count and sorting wrap below instead of sitting beside the notice. */
.shop-catalog-toolbar > .woocommerce-notices-wrapper,
.shop-catalog-toolbar > .woocommerce-message,
.shop-catalog-toolbar > .woocommerce-info,
.shop-catalog-toolbar > .woocommerce-error {
	flex: 0 0 100%;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}
.shop-catalog-toolbar > .woocommerce-notices-wrapper:empty {
	display: none;
}

/* Text pages (offer, delivery, about…): headings get their own spacing instead of relying on
   blank lines typed into the page content. */
.shop-page-content > h2,
.shop-page-content > h3,
.shop-page-content > h4 {
	margin-top: 1.6em;
	margin-bottom: .5em;
}
.shop-page-content > h1 + h2,
.shop-page-content > h1 + h3,
.shop-page-content > h1 + h4 {
	margin-top: 0;
}
.shop-page-content > ul,
.shop-page-content > ol {
	margin-bottom: 1em;
}

/* Mobile menu open: the page behind must not scroll and the header must stay visible.
   (init.js pins the body at the current scroll position and adds .bukfc-scroll-locked.) */
@media (max-width: 1140px) {
	body.bukfc-scroll-locked {
		position: fixed;
		left: 0;
		right: 0;
		width: 100%;
		overflow: hidden;
	}
	/* The sticky header scrolls away with the pinned body; keep it on screen and keep its
	   place in the layout so nothing jumps. */
	body.bukfc-scroll-locked .shop-topbar {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
	}
	body.bukfc-scroll-locked #wrap {
		padding-top: var(--bukfc-header-h, 0);
	}
	/* The dimming overlay belongs to the screen, not to the (scrolled) document. */
	body.mobile_menu_active:before {
		position: fixed;
		top: 0;
		left: 0;
	}
	.mobile_menu_container {
		overscroll-behavior: contain;
	}
}

/* ==========================================================================
   SINGLE PRODUCT: contained layout + tidy gallery
   ========================================================================== */
/* Keep the product page in a centred container so the photo and the buy box do not drift
   apart (huge empty gap) on wide screens. */
.shop-product-page .woocommerce-breadcrumb,
.shop-product-page div.product {
	max-width: 1600px;
	margin-left: auto;
	margin-right: auto;
}
.bukfc-product-columns {
	grid-template-columns: minmax(0, 800px) minmax(420px, 560px);
	justify-content: space-between;
	gap: 48px;
}
.woocommerce div.product div.summary {
	max-width: 560px;
	width: 100%;
}
.woocommerce div.product div.images {
	max-width: 800px;
}
/* Main photo: square frame with rounded corners. */
.woocommerce div.product .woocommerce-product-gallery__image {
	border-radius: 12px;
}
.woocommerce div.product .woocommerce-product-gallery__image img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
}
/* Thumbnails: even grid with gaps, square, rounded; active one gets the gold frame. */
.woocommerce div.product ol.flex-control-thumbs {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 12px;
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
}
.woocommerce div.product div.images ol.flex-control-thumbs li,
.woocommerce div.product .woocommerce-product-gallery ol.flex-control-thumbs li {
	float: none !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
}
.woocommerce div.product .flex-control-thumbs li img {
	display: block;
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border: 2px solid var(--bukfc-gray-border);
	border-radius: 8px;
	opacity: .75;
	cursor: pointer;
	transition: opacity .2s ease, border-color .2s ease;
}
.woocommerce div.product .flex-control-thumbs li img:hover {
	opacity: 1;
	border-color: var(--bukfc-gray-text);
}
.woocommerce div.product .flex-control-thumbs li img.flex-active {
	border-color: var(--bukfc-gold);
	opacity: 1;
}
@media (max-width: 1500px) {
	.bukfc-product-columns {
		grid-template-columns: minmax(0, 1fr) 420px;
	}
}
@media (max-width: 1140px) {
	.bukfc-product-columns {
		grid-template-columns: minmax(0, 1fr) 360px;
		gap: 32px;
	}
	.woocommerce div.product div.summary {
		max-width: 360px;
	}
}
@media (max-width: 768px) {
	.bukfc-product-columns {
		grid-template-columns: 1fr;
		gap: 24px;
	}
	.woocommerce div.product div.summary {
		max-width: 100%;
	}
	.woocommerce div.product ol.flex-control-thumbs {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 8px;
	}
}

/* Cart bottom actions in the site's button style: gold primary + outlined secondary. */
.shop-cart-actions .shop-pill-btn {
	height: auto;
	padding: 12px 28px;
	border-radius: 999px;
	font-size: 15px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .3px;
	transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.shop-cart-actions .shop-pill-btn--continue {
	background: var(--bukfc-gold);
	color: var(--bukfc-black);
	border: 2px solid var(--bukfc-gold);
}
.shop-cart-actions .shop-pill-btn--continue:hover {
	background: var(--bukfc-gold-dark);
	border-color: var(--bukfc-gold-dark);
	color: var(--bukfc-black);
}
.shop-cart-actions .shop-pill-btn--clear {
	background: transparent;
	color: var(--bukfc-white);
	border: 2px solid var(--bukfc-gray-border);
}
.shop-cart-actions .shop-pill-btn--clear:hover {
	background: transparent;
	border-color: var(--bukfc-gold);
	color: var(--bukfc-gold);
}
.shop-cart-actions .shop-pill-btn:focus-visible {
	outline: 2px solid var(--bukfc-gold);
	outline-offset: 3px;
}

/* Pagination: breathing room between the product grid and the page numbers (and the footer below). */
.woocommerce nav.woocommerce-pagination {
	margin: 40px 0 24px;
	text-align: center;
}

/* Pagination in the site's style: separate rounded buttons with gaps, gold current page,
   gold outline on hover, comfortable tap size. */
.woocommerce nav.woocommerce-pagination ul {
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	border: 0;
	margin: 0;
	padding: 0;
}
.woocommerce nav.woocommerce-pagination ul li {
	float: none;
	border: 0;
	margin: 0;
	overflow: visible;
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 46px;
	height: 46px;
	padding: 0 14px;
	box-sizing: border-box;
	background: var(--bukfc-black-soft);
	color: var(--bukfc-white);
	border: 1px solid var(--bukfc-gray-border);
	border-radius: 999px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li a:focus-visible {
	background: transparent;
	border-color: var(--bukfc-gold);
	color: var(--bukfc-gold);
}
.woocommerce nav.woocommerce-pagination ul li span.current {
	background: var(--bukfc-gold);
	border-color: var(--bukfc-gold);
	color: var(--bukfc-black);
}
.woocommerce nav.woocommerce-pagination ul li .prev,
.woocommerce nav.woocommerce-pagination ul li .next {
	font-size: 20px;
}
.woocommerce nav.woocommerce-pagination ul li .dots {
	background: transparent;
	border-color: transparent;
}
@media (max-width: 480px) {
	.woocommerce nav.woocommerce-pagination ul {
		gap: 8px;
	}
	.woocommerce nav.woocommerce-pagination ul li a,
	.woocommerce nav.woocommerce-pagination ul li span {
		min-width: 42px;
		height: 42px;
		padding: 0 10px;
	}
}

/* Contacts: Telegram link with its icon; label, icon and handle share one vertical centre. */
.bukfc-contact-telegram-line {
	display: flex;
	align-items: center;
	gap: 8px;
}
.bukfc-contact-telegram {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	line-height: 24px;
}
.bukfc-contact-telegram .fa {
	color: var(--bukfc-gold);
	font-size: 22px;
	line-height: 1;
}