/* ============================================================================
 * Hempi v2 storefront skin -- recreated from hempi-v-2_0.mp4
 * ============================================================================
 * Loaded only when Settings -> Hempi UI -> "Włącz wygląd Hempi" is on
 * (body.hempi-skin; see includes/storefront-layout.php for the PHP side).
 *
 * The --hempi-* custom properties below have fallback values matching what
 * is CURRENTLY LIVE on hempi.pl. includes/storefront-layout.php overrides
 * them from the settings screen via an inline <style> block printed right
 * after this file, so:
 *   - if you never touch Settings -> Hempi UI, nothing here changes behaviour
 *   - if the settings PHP is ever disabled, these fallbacks keep the skin
 *     looking correct instead of falling back to browser defaults
 *
 * Section map (search for these headings):
 *   1. ROOT VARIABLES + SKIN CONTAINER
 *   1B. TOP HEADER STICKINESS (the logo/menu/cart bar -- NOT the green banner)
 *   2. STICKY GREEN BANNER (the wordmark hero behind the catalog)
 *   3. CATEGORY / ARCHIVE INTRO (H1 + description on category pages)
 *   4. WHITE PANEL PAGES (cart / checkout / account / generic pages)
 *   5. CATALOG GRID -- shared card shell (products + category tiles)
 *   6. CATEGORY TILES (homepage grid: circular photo + name (+count))
 *   7. PRODUCT CARDS (circular photo, title, price, add-to-cart button)
 *   8. SINGLE PRODUCT PAGE
 *   9. "PRODUKTY" DROPDOWN MENU (circular category thumbnails)
 *  10. RESPONSIVE OVERRIDES (tablet / mobile)
 *  11. PHOTOSWIPE LIGHTBOX (product gallery zoom)
 * ============================================================================ */

/* ---------------------------------------------------------------------------
 * 1. ROOT VARIABLES + SKIN CONTAINER
 * -------------------------------------------------------------------------*/
:root {
	/* Sticky banner background. Settings -> Hempi UI -> "Kolor: zielony baner".
	   Sampled from the banner background in hempi-v-2_0.mp4: #318b3d.
	   Fallback here matches what is live today (#2f9a44) -- see
	   includes/storefront-layout.php for how this gets overridden. */
	--hempi-green: #2f9a44;
	/* Buttons / badges / links accent. Settings -> Hempi UI -> "Kolor:
	   przyciski / akcent". Sampled from the "DODAJ DO KOSZYKA" button in the
	   recording: ~#6fae78 (lighter than the banner). Fallback matches live. */
	--hempi-green-accent: #2f9a44;
	/* Body/heading text colour. Settings -> Hempi UI -> "Kolor: tekst (ink)". */
	--hempi-ink: #222;
	--hempi-muted: #f3f3f3;
	/* Measured live by storefront-skin.js (visibleHeader) so the sticky
	   banner starts exactly under whichever header (desktop/mobile) is
	   actually on screen. */
	--hempi-header-h: 80px;
	/* Product-card title line clamp (1 or 2). Settings -> Hempi UI ->
	   "Nazwa produktu na kafelku". */
	--hempi-title-lines: 2;
	/* Desktop sticky-banner height. Settings -> Hempi UI -> "Wysokość
	   banera (desktop)". Mobile/tablet use fixed breakpoint values below,
	   not this variable, because the banner image only reads well at a
	   handful of fixed aspect ratios (see the @media blocks in section 10). */
	--hempi-banner-h: 340px;
	/* Desktop catalog/category grid column count. Settings -> Hempi UI ->
	   "Kolumny siatki produktów (desktop)". */
	--hempi-grid-cols: 4;
}

/* Plain white page background instead of Botiga's default. */
body.hempi-skin {
	background: #fff;
}

/* Hide Botiga's own header-image banner (green-panel-large.png from
   mu-plugins/hempi-mobile-banner.php) -- the v2 skin replaces it with the
   sticky wordmark banner in section 2 below. */
body.hempi-skin .header-image {
	display: none !important;
}

/* Keep the sticky Botiga header opaque/on top of the green banner and
   overlapping catalog cards (both sit at a lower z-index, see below). */
body.hempi-skin .bhfb-header.has-sticky-header,
body.hempi-skin .bhfb-header .bhfb-sticky-header {
	z-index: 200;
	background: #fff;
}

/* ---------------------------------------------------------------------------
 * 1B. TOP HEADER STICKINESS
 * Settings -> Hempi UI -> "Przyklejony górny pasek (nawigacja)".
 *
 * This is the actual <header class="bhfb-header bhfb-desktop ...">
 * (logo/menu/search/cart) -- a different element from the green wordmark
 * banner in section 2. On this site the header is *already* sticky on
 * desktop via Botiga's own theme Customizer (Header Builder -> sticky
 * header -> "Always sticky"), which stamps `.has-sticky-header.sticky-row-all`
 * on it; Botiga's own CSS then does `position: fixed; top: 0;` for that
 * combination (see wp-content/themes/botiga/assets/css/botiga-bhfb.css).
 *
 * Rather than re-implement Botiga's fixed-header CSS (offsets for the
 * padded site layout, admin bar, etc.), the default ON state here simply
 * defers to whatever Botiga's Customizer already does -- zero risk, zero
 * duplicated logic. Turning this OFF in Settings -> Hempi UI adds
 * `hempi-header-sticky-off` to <body> (see storefront-layout.php) and the
 * rule below forces the header back to normal in-flow positioning,
 * overriding Botiga's Customizer setting from this one place without
 * having to go into the Header Builder to change it there.
 * -------------------------------------------------------------------------*/
body.hempi-skin.hempi-header-sticky-off .bhfb-header.has-sticky-header {
	position: static !important;
	top: auto !important;
	left: auto !important;
	width: auto !important;
}

/* Mobile off-canvas menu close (X) button. Theme core default (Botiga's own
   assets/css/botiga-bhfb.css) is a 30x30px hit area holding a 16x16px icon,
   positioned absolute top-right of the panel -- close enough to the top of
   the menu list that it overlaps the "Produkty" category dropdown while
   browsing. Shrunk here (plugin CSS) instead of editing the theme file
   directly, which a Botiga update would overwrite. Position (top/right
   offset) is untouched -- Settings -> Customizer -> Header Builder ->
   Mobile off-canvas still controls that. */
body.hempi-skin .bhfb-mobile_offcanvas .mobile-menu-close {
	width: 22px;
	height: 22px;
}

body.hempi-skin .bhfb-mobile_offcanvas .mobile-menu-close svg {
	width: 11px;
	height: 11px;
}

/* ---------------------------------------------------------------------------
 * 2. STICKY GREEN BANNER
 * Printed by hempi_ui_print_banners() in storefront-layout.php (only when
 * "Sticky banner" is on). It is one <img> (the "Kolor" pickers above do NOT
 * recolour this image -- they recolour buttons/badges/links; the banner's
 * own colour comes from whichever PNG is selected as banner_image_green).
 * -------------------------------------------------------------------------*/
.hempi-sticky-banner {
	display: block;
	position: sticky;
	top: var(--hempi-header-h);
	z-index: 0;
	height: var(--hempi-banner-h, 340px);
	overflow: hidden;
	background: var(--hempi-green);
	cursor: pointer;
}

.hempi-sticky-banner__img {
	display: block;
	width: 100%;
	height: var(--hempi-banner-h, 340px);
	object-fit: contain;
	object-position: center center;
}

/* ---- BANNER SCROLL SWAP ----------------------------------------------
 * Settings -> Hempi UI -> "Zmiana bannera przy przewijaniu" (off by
 * default). Only present when that setting is on -- hempi_ui_print_banners()
 * then prints TWO stacked <img> instead of one, and
 * storefront-skin.js's bindBannerSwap() toggles the --stuck modifier
 * class on `.hempi-sticky-banner--swap` once it detects (via scroll
 * position vs. the sticky `top` offset) that the banner has actually
 * pinned itself under the header. Bidirectional: scrolling back up past
 * that point reverts to the white/initial image. White at rest, green
 * once the banner is actually stuck under the header.
 * ------------------------------------------------------------------- */
.hempi-sticky-banner--swap {
	background: #fff;
	transition: background-color 0.35s ease;
}

.hempi-sticky-banner--swap .hempi-sticky-banner__img {
	position: absolute;
	inset: 0;
	transition: opacity 0.35s ease;
}

.hempi-sticky-banner--swap .hempi-sticky-banner__img--initial {
	opacity: 1;
}

.hempi-sticky-banner--swap .hempi-sticky-banner__img--scrolled {
	opacity: 0;
}

.hempi-sticky-banner--swap.hempi-sticky-banner--stuck {
	background: var(--hempi-green);
}

.hempi-sticky-banner--swap.hempi-sticky-banner--stuck .hempi-sticky-banner__img--initial {
	opacity: 0;
}

.hempi-sticky-banner--swap.hempi-sticky-banner--stuck .hempi-sticky-banner__img--scrolled {
	opacity: 1;
}

/* Everything after the banner renders above it (z-index) so the catalog can
   be pulled up on top with a negative margin, per page type below. */
body.hempi-skin .content-wrapper,
body.hempi-skin #content,
body.hempi-skin .site-main {
	position: relative;
	z-index: 1;
	background: transparent;
	transition: margin-top 0.35s ease;
}

/* How far each page type overlaps the sticky banner. Shop/category grids
   overlap more (-220px) because the cards themselves have transparent
   padding above their circular photo; single product/cart/checkout/account
   pages overlap less (-160px) because they sit inside an opaque white panel
   (section 4) that would otherwise leave a visible green gap. */
body.hempi-skin.hempi-sticky-banner-on.post-type-archive-product .content-wrapper,
body.hempi-skin.hempi-sticky-banner-on.archive.tax-product_cat .content-wrapper,
body.hempi-skin.hempi-sticky-banner-on.tax-product_tag .content-wrapper {
	margin-top: -220px;
}

body.hempi-skin.hempi-sticky-banner-on.single-product .content-wrapper,
body.hempi-skin.hempi-sticky-banner-on.page:not(.woocommerce-shop) .content-wrapper,
body.hempi-skin.hempi-sticky-banner-on.woocommerce-cart .content-wrapper,
body.hempi-skin.hempi-sticky-banner-on.woocommerce-checkout .content-wrapper,
body.hempi-skin.hempi-sticky-banner-on.woocommerce-account .content-wrapper,
body.hempi-skin.hempi-sticky-banner-on.search .content-wrapper,
body.hempi-skin.hempi-sticky-banner-on.error404 .content-wrapper {
	margin-top: -160px;
}

/* BANNER SCROLL SWAP interaction: the overlap above was designed for a
   banner that's always green -- a sliver of it peeking out above the
   catalog cards looks intentional either way. It does NOT look intentional
   while the banner is showing its white/at-rest logo (section "BANNER
   SCROLL SWAP"): the same overlap then hides the logo behind the catalog
   the instant the page loads, before the visitor has scrolled at all.
   `.hempi-sticky-banner` and `.content-wrapper` are DOM siblings
   (hempi_ui_print_banners() in storefront-layout.php prints the banner
   immediately before it), so this sibling combinator can react directly to
   the `--stuck` class storefront-skin.js's bindBannerSwap() already toggles
   on scroll, no extra JS/body-class needed. Only applies when the `--swap`
   markup is present; the single-image (non-swap) banner keeps the original
   always-on overlap untouched. !important because it has to beat the more
   specific page-type selectors above. */
.hempi-sticky-banner--swap:not(.hempi-sticky-banner--stuck) ~ .content-wrapper {
	margin-top: 0 !important;
}

/* Footer always sits above the sticky banner/catalog stack. */
body.hempi-skin .site-footer,
body.hempi-skin .bhfb-footer {
	position: relative;
	z-index: 2;
	background: #f7f7f7;
}

/* ---------------------------------------------------------------------------
 * 3. CATEGORY / ARCHIVE INTRO
 * Printed by hempi_ui_archive_intro() -- the H1 + term description block
 * shown on product-category/tag pages (never on the shop homepage, which
 * stays title-less directly under the banner, matching the recording).
 * Toggled independently via "Opis kategorii" / "Tytuł kategorii".
 * -------------------------------------------------------------------------*/
.hempi-archive-intro {
	background: #fff;
	border-radius: 8px;
	padding: 20px 24px 8px;
	margin: 0 0 22px;
}

.hempi-archive-intro__title {
	margin: 0 0 10px;
	font-size: clamp(1.45rem, 2.2vw, 2rem);
	font-weight: 600;
	color: var(--hempi-ink);
	line-height: 1.25;
}

.hempi-archive-intro__desc,
.hempi-archive-intro .term-description {
	color: #444;
	font-size: 1rem;
	line-height: 1.55;
	max-width: 48rem;
}

.hempi-archive-intro .term-description p:last-child {
	margin-bottom: 0;
}

header.woocommerce-products-header:empty {
	display: none;
}

body.hempi-hide-product-crumbs.single-product .woocommerce-breadcrumb,
body.hempi-hide-product-crumbs.single-product .botiga-breadcrumb {
	display: none !important;
}

/* ---------------------------------------------------------------------------
 * 4. WHITE PANEL PAGES
 * Cart / checkout / account / generic pages get the same solid white panel
 * treatment as the single-product page (section 8), overlapping the green
 * banner by -160px (section 2) so it reads as one continuous card.
 * -------------------------------------------------------------------------*/
body.hempi-skin.page:not(.woocommerce-shop) .site-main,
body.hempi-skin.woocommerce-cart .site-main,
body.hempi-skin.woocommerce-checkout .site-main,
body.hempi-skin.woocommerce-account .site-main,
body.hempi-skin.search .site-main,
body.hempi-skin.error404 .site-main {
	background: #fff !important;
	border-radius: 8px;
	padding: 22px 28px 40px;
}

body.hempi-skin.page:not(.woocommerce-shop) .entry-header,
body.hempi-skin.woocommerce-cart .entry-header,
body.hempi-skin.woocommerce-checkout .entry-header,
body.hempi-skin.woocommerce-account .entry-header {
	margin: 0 0 18px;
	padding: 0 0 12px;
	border-bottom: 1px solid rgba(47, 154, 68, 0.16);
}

body.hempi-skin.page:not(.woocommerce-shop) .entry-header .entry-title,
body.hempi-skin.woocommerce-cart .entry-header .entry-title,
body.hempi-skin.woocommerce-checkout .entry-header .entry-title,
body.hempi-skin.woocommerce-account .entry-header .entry-title,
body.hempi-skin.page:not(.woocommerce-shop) h1.entry-title {
	margin: 0;
	font-size: clamp(1.45rem, 2.2vw, 2rem);
	font-weight: 600;
	color: var(--hempi-ink);
	line-height: 1.25;
	letter-spacing: -0.02em;
}

body.hempi-skin.page:not(.woocommerce-shop) .entry-content,
body.hempi-skin.woocommerce-cart .entry-content,
body.hempi-skin.woocommerce-checkout .entry-content {
	color: #333;
}

body.hempi-skin.page .entry-content a,
body.hempi-skin.woocommerce-account .entry-content a {
	color: var(--hempi-green-accent);
}

body.hempi-skin.woocommerce-cart table.shop_table,
body.hempi-skin.woocommerce-checkout .woocommerce-checkout,
body.hempi-skin .cart-collaterals,
body.hempi-skin .woocommerce-checkout-review-order,
body.hempi-skin.woocommerce-account .woocommerce-MyAccount-navigation,
body.hempi-skin.woocommerce-account .woocommerce-MyAccount-content {
	background: #f6f6f6;
	border-radius: 10px;
}

body.hempi-skin.woocommerce-account .woocommerce-MyAccount-navigation,
body.hempi-skin.woocommerce-account .woocommerce-MyAccount-content {
	padding: 16px 18px;
}

/* Cart/checkout/account CTA buttons ("Kontynuuj", "Złóż zamówienie", ...) --
   same accent colour as the catalog add-to-cart buttons. */
body.hempi-skin .woocommerce-checkout-review-order .button,
body.hempi-skin .checkout-button,
body.hempi-skin #place_order,
body.hempi-skin.woocommerce-cart .actions .button,
body.hempi-skin.woocommerce-account .button {
	background: var(--hempi-green-accent) !important;
	border-color: var(--hempi-green-accent) !important;
	color: #fff !important;
	text-transform: uppercase;
	border-radius: 4px !important;
	font-weight: 700;
}

/* ---------------------------------------------------------------------------
 * 5. CATALOG GRID -- shared card shell
 * Applies to BOTH product cards (section 7) and category tiles (section 6):
 * WooCommerce renders both as <li class="product"> inside the same
 * <ul class="products">, so the shared shell (grid, card background,
 * padding, flex column layout) lives here and the two sections below only
 * override what's actually different between a product and a category tile.
 * -------------------------------------------------------------------------*/
body.hempi-skin ul.products {
	display: grid !important;
	grid-template-columns: repeat(var(--hempi-grid-cols, 4), minmax(0, 1fr));
	gap: 18px;
}

body.hempi-skin ul.products::before,
body.hempi-skin ul.products::after {
	display: none !important;
}

body.hempi-skin ul.products li.product {
	width: auto !important;
	float: none !important;
	margin: 0 !important;
	background: #f4f4f4;
	border-radius: 18px;
	padding: 16px 14px 18px;
	box-shadow: none;
	border: 0;
	text-align: center;
	display: flex;
	flex-direction: column;
	position: relative;
}

body.hempi-skin ul.products li.product .loop-image-wrap {
	position: relative;
	background: transparent;
	border-radius: 0;
	overflow: visible;
	flex: 0 0 auto;
}

/* ---------------------------------------------------------------------------
 * 6. CATEGORY TILES (homepage grid)
 * <li class="product-category"> variant of the shared card shell above:
 * circular category photo, name, and (optionally) a product count -- e.g.
 * "Sauna(9)" in the recording.
 * -------------------------------------------------------------------------*/
body.hempi-skin ul.products li.product-category a {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	width: 100%;
	margin: 0;
	aspect-ratio: auto;
	border-radius: 0;
	background: transparent;
	overflow: visible;
}

body.hempi-skin ul.products li.product-category a img {
	width: 86% !important;
	height: auto !important;
	max-width: none !important;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 50%;
	background: #fff;
	margin: 4px auto 8px;
}

body.hempi-skin ul.products li.product-category .woocommerce-loop-category__title {
	position: static !important;
	background: none !important;
	color: var(--hempi-ink);
	padding: 4px 10px 0;
	margin: 0;
	font-size: 0.98rem;
	font-weight: 600;
	line-height: 1.3;
	width: 100%;
}

/* Product count badge ("(n)"). Hidden by default -- matches what is live
   today. Turn on Settings -> Hempi UI -> "Liczba produktów w kategorii" to
   show it inline after the name with no gap and the same colour/weight as
   the title, matching "For Pets(6)" / "Sauna(9)" in the recording. The
   theme/WooCommerce markup already wraps the count in "(...)" itself, so we
   only need to un-hide + inline it, not add parentheses ourselves. */
body.hempi-skin ul.products li.product-category mark.count,
body.hempi-skin ul.products li.product-category .count {
	display: none;
}

body.hempi-skin.hempi-show-cat-counts ul.products li.product-category .woocommerce-loop-category__title {
	/* Shrink to fit "Name(6)" as one inline unit instead of stretching the
	   title full-width (default above); the parent `a` is already a
	   centered flex column, so this just needs to stop being block-level. */
	display: inline-flex;
	width: auto;
	max-width: 100%;
}

body.hempi-skin.hempi-show-cat-counts ul.products li.product-category mark.count,
body.hempi-skin.hempi-show-cat-counts ul.products li.product-category .count {
	display: inline;
	background: none;
	color: var(--hempi-ink);
	font-size: inherit;
	font-weight: inherit;
	font-family: inherit;
	margin: 0;
	padding: 0;
}

/* ---------------------------------------------------------------------------
 * 7. PRODUCT CARDS
 * <li class="product"> (not a category) variant of the shared shell in
 * section 5: circular product photo, sale badge, title, price, and the
 * full-width "WYBIERZ OPCJE" / "DODAJ DO KOSZYKA" button.
 * -------------------------------------------------------------------------*/
body.hempi-skin ul.products li.product:not(.product-category) .loop-image-wrap a.woocommerce-LoopProduct-link {
	display: block;
	width: 86%;
	margin: 4px auto 10px;
	aspect-ratio: auto;
	border-radius: 0;
	background: transparent;
	overflow: visible;
	position: relative;
}

body.hempi-skin ul.products li.product:not(.product-category) .loop-image-wrap a.woocommerce-LoopProduct-link img,
body.hempi-skin ul.products li.product:not(.product-category) img {
	width: 100% !important;
	height: auto !important;
	max-width: none !important;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	border-radius: 50%;
	background: #fff;
	display: block;
}

/* "Promocja" sale badge -- lifted in front of the circular photo (see
   liftSaleBadges() in storefront-skin.js, which moves the badge element
   earlier in the DOM so this absolute positioning stacks correctly). */
body.hempi-skin ul.products li.product .onsale {
	position: absolute !important;
	z-index: 30 !important;
	left: 10% !important;
	top: 8% !important;
	right: auto !important;
	background: var(--hempi-green-accent) !important;
	color: #fff !important;
	border-radius: 999px;
	text-transform: uppercase;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.03em;
	padding: 5px 12px !important;
	line-height: 1.2;
	box-shadow: 0 2px 8px rgba(28, 42, 30, 0.18);
	pointer-events: none;
}

/* Title stacked above price (Botiga's default layout2 template puts them in
   a 7/5 column row side-by-side -- the recording shows them stacked, full
   width, centered, so we override the row/column layout entirely). */
body.hempi-skin ul.products li.product:not(.product-category) > .row {
	display: flex !important;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 12px;
	width: 100%;
	margin: 10px 0 14px !important;
	flex: 0 0 auto;
}

body.hempi-skin ul.products li.product:not(.product-category) > .row > [class*="col-"] {
	width: 100% !important;
	max-width: 100% !important;
	flex: 0 0 auto !important;
	padding: 0 6px !important;
	text-align: center !important;
	float: none !important;
}

/* Product title -- clamped to 1 or 2 lines via --hempi-title-lines, set from
   Settings -> Hempi UI -> "Nazwa produktu na kafelku". */
body.hempi-skin ul.products li.product:not(.product-category) .botiga-wc-loop-product__title,
body.hempi-skin ul.products li.product:not(.product-category) .woocommerce-loop-product__title {
	font-size: 0.95rem;
	font-weight: 500;
	color: var(--hempi-ink);
	margin: 0;
	padding: 0;
	line-height: 1.35;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--hempi-title-lines, 2);
	line-clamp: var(--hempi-title-lines, 2);
	overflow: hidden;
	min-height: 0;
	max-height: calc(1.35em * var(--hempi-title-lines, 2));
	white-space: normal;
}

body.hempi-skin ul.products li.product:not(.product-category) .price {
	display: block !important;
	width: 100%;
	color: var(--hempi-ink);
	font-weight: 600;
	margin: 0;
	padding: 0;
	font-size: 0.95rem;
	line-height: 1.35;
	text-align: center;
}

body.hempi-skin ul.products li.product:not(.product-category) .price ins {
	text-decoration: none;
	background: none;
}

/* "WYBIERZ OPCJE" / "DODAJ DO KOSZYKA" -- full-width accent button. */
body.hempi-skin ul.products li.product .button,
body.hempi-skin ul.products li.product a.button,
body.hempi-skin ul.products li.product .add_to_cart_button {
	display: block !important;
	width: 100%;
	background: var(--hempi-green-accent) !important;
	border: 0 !important;
	color: #fff !important;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 0.78rem;
	font-weight: 700;
	border-radius: 4px !important;
	padding: 12px 8px !important;
	margin-top: auto;
}

body.hempi-skin ul.products li.product .button:hover,
body.hempi-skin ul.products li.product a.button:hover {
	/* Auto-darken on hover regardless of the chosen accent colour, instead
	   of a second hardcoded hex, so custom colours from the settings screen
	   always get a sensible hover state. */
	filter: brightness(0.88);
	color: #fff !important;
}

/* Botiga's "Szybki podgląd" (Quick View) hover overlay on the card image. */
body.hempi-skin .botiga-quick-view {
	left: 50% !important;
	right: auto !important;
	transform: translateX(-50%);
	width: calc(100% - 28px);
	/* Plain fallback first (older browsers ignore the unsupported color-mix()
	   line below and keep this one instead of ending up with no background). */
	background: rgba(47, 154, 68, 0.92) !important;
	background: color-mix(in srgb, var(--hempi-green-accent) 92%, transparent) !important;
	color: #fff !important;
	border-radius: 4px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 12px;
	font-weight: 700;
	padding: 10px 8px !important;
	z-index: 12;
}

body.hempi-skin .botiga-quick-view-label {
	color: #fff !important;
}

/* ---------------------------------------------------------------------------
 * 8. SINGLE PRODUCT PAGE
 * Solid white panel over the sticky banner (same treatment as section 4),
 * circular gallery thumbnails, and the accent "DODAJ DO KOSZYKA" button.
 * -------------------------------------------------------------------------*/
body.hempi-skin.single-product div.product {
	background: #fff !important;
	padding: 8px 8px 28px;
	border-radius: 8px;
}

body.hempi-skin.single-product .product-gallery-summary {
	background: #fff !important;
	border-radius: 8px;
	padding: 20px 24px 28px;
}

body.hempi-skin.single-product .woocommerce-product-gallery,
body.hempi-skin.single-product .summary.entry-summary {
	background: #fff;
}

body.hempi-skin.single-product .product_title {
	font-size: 1.7rem;
	font-weight: 600;
	color: var(--hempi-ink);
}

body.hempi-skin.single-product .summary .price {
	font-size: 1.35rem;
	font-weight: 700;
	color: var(--hempi-ink);
}

body.hempi-skin.single-product .single_add_to_cart_button.button {
	background: var(--hempi-green-accent) !important;
	border-color: var(--hempi-green-accent) !important;
	color: #fff !important;
	text-transform: uppercase;
	border-radius: 4px !important;
	padding: 12px 28px !important;
	font-weight: 700;
}

body.hempi-skin.single-product .flex-control-thumbs li img,
body.hempi-skin.single-product .woocommerce-product-gallery .flex-control-thumbs li,
body.hempi-skin .botiga-quick-view-popup .flex-control-thumbs li img,
body.hempi-skin .botiga-quick-view-popup .woocommerce-product-gallery .flex-control-thumbs li {
	/* Quick View opens its own gallery on top of whatever page is behind it
	   (catalog/category/search/...), so `body` never gets `.single-product`
	   there -- the `.single-product` selector above alone left Quick View's
	   thumbnail strip square/default while the real single-product page's
	   was circular. Added 2026-09-03 for consistency between the two. */
	border-radius: 50%;
}

body.hempi-skin.single-product section.related,
body.hempi-skin.single-product section.upsells {
	background: transparent;
}

body.hempi-skin.single-product section.related > h2,
body.hempi-skin.single-product section.upsells > h2 {
	color: var(--hempi-ink);
	font-weight: 600;
}

/* Quick View popup (catalog "Szybki podgląd") re-uses the single-product
   button styling above. */
body.hempi-skin .botiga-quick-view-popup-content {
	border-radius: 8px;
	overflow: hidden;
	background: #fff;
}

body.hempi-skin .botiga-quick-view-popup .single_add_to_cart_button {
	background: var(--hempi-green-accent) !important;
	border-color: var(--hempi-green-accent) !important;
	text-transform: uppercase;
	border-radius: 4px !important;
}

/* ---------------------------------------------------------------------------
 * 9. "PRODUKTY" DROPDOWN MENU
 * hempi_ui_sync_product_dropdown() + hempi_ui_menu_item_title() in
 * storefront-layout.php keep this list in sync with live WooCommerce
 * categories (read-only -- see the file header note about not touching
 * taxonomies) and attach each category's thumbnail as `hempi_cat_thumb`;
 * this section only styles the resulting markup.
 * -------------------------------------------------------------------------*/
body.hempi-skin .main-navigation .sub-menu,
body.hempi-skin .botiga-offcanvas-menu .sub-menu {
	min-width: 260px;
	padding: 10px 8px !important;
}

body.hempi-skin .hempi-menu-cat > a.botiga-dropdown-link,
body.hempi-skin .hempi-menu-cat > a {
	display: flex !important;
	align-items: center;
	gap: 12px;
	padding: 7px 12px !important;
	line-height: 1.25;
	white-space: nowrap;
}

body.hempi-skin .hempi-menu-thumb {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	overflow: hidden;
	flex: 0 0 40px;
	background: #fff;
	box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--hempi-green);
}

body.hempi-skin .hempi-menu-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 50%;
}

body.hempi-skin .hempi-menu-thumb--letter {
	background: var(--hempi-green);
	color: #fff;
	font-weight: 700;
	font-size: 0.95rem;
}

body.hempi-skin .hempi-menu-label {
	flex: 1 1 auto;
	min-width: 0;
}

/* ---------------------------------------------------------------------------
 * 10. RESPONSIVE OVERRIDES (tablet / mobile)
 * Grid columns collapse regardless of the desktop --hempi-grid-cols setting
 * (a 4-6 column desktop grid never reads well below 1024px). Banner height
 * also switches to fixed breakpoint values rather than following
 * --hempi-banner-h, because the wordmark PNG only reads cleanly at a few
 * tested aspect ratios -- see DOCUMENTATION.md "Banner source image" note.
 * -------------------------------------------------------------------------*/
@media (max-width: 1024px) {
	body.hempi-skin ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.hempi-sticky-banner,
	.hempi-sticky-banner__img {
		height: 220px;
	}

	body.hempi-skin.hempi-sticky-banner-on.post-type-archive-product .content-wrapper,
	body.hempi-skin.hempi-sticky-banner-on.archive.tax-product_cat .content-wrapper,
	body.hempi-skin.hempi-sticky-banner-on.tax-product_tag .content-wrapper {
		margin-top: -140px;
	}

	body.hempi-skin.hempi-sticky-banner-on.single-product .content-wrapper,
	body.hempi-skin.hempi-sticky-banner-on.page:not(.woocommerce-shop) .content-wrapper,
	body.hempi-skin.hempi-sticky-banner-on.woocommerce-cart .content-wrapper,
	body.hempi-skin.hempi-sticky-banner-on.woocommerce-checkout .content-wrapper,
	body.hempi-skin.hempi-sticky-banner-on.woocommerce-account .content-wrapper {
		margin-top: -100px;
	}

	body.hempi-skin.page:not(.woocommerce-shop) .site-main,
	body.hempi-skin.woocommerce-cart .site-main,
	body.hempi-skin.woocommerce-checkout .site-main,
	body.hempi-skin.woocommerce-account .site-main {
		padding: 16px 16px 28px;
	}

	body.hempi-skin .hempi-menu-thumb {
		width: 36px;
		height: 36px;
		flex-basis: 36px;
	}
}

@media (max-width: 575px) {
	body.hempi-skin ul.products {
		grid-template-columns: 1fr;
	}
}

/* ---------------------------------------------------------------------------
 * 11. PHOTOSWIPE LIGHTBOX (product gallery zoom)
 * Pairs with the PhotoSwipe option overrides in storefront-layout.php
 * (woocommerce_single_product_photoswipe_options filter) and the drag/close
 * behaviour patched in storefront-skin.js. Strips every default PhotoSwipe
 * control and replaces it with a single always-visible circular close (X)
 * button, and keeps the viewer pinned full-screen so a vertical drag can't
 * make the photo "jump" before closing.
 * -------------------------------------------------------------------------*/
body.hempi-skin .pswp {
	z-index: 100050 !important;
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	width: 100% !important;
	height: 100% !important;
	overflow: hidden !important;
}

body.hempi-skin .pswp__bg {
	background: rgba(20, 24, 22, 0.94) !important;
}

body.hempi-skin .pswp__scroll-wrap,
body.hempi-skin .pswp__container {
	top: 0 !important;
	height: 100% !important;
}

body.hempi-skin .pswp__item {
	overflow: hidden;
}

body.hempi-skin .pswp__img {
	object-fit: contain;
	max-height: 100vh;
}

/* Left/right carousel arrows -- Settings -> Hempi UI -> "Strzałki karuzeli
   zdjęć", on by default. PhotoSwipe always renders these (arrowEl:true in
   both storefront-layout.php and storefront-skin.js); this class is what
   actually hides them when the setting is off. */
body.hempi-skin.hempi-gallery-arrows-off .pswp__button--arrow--left,
body.hempi-skin.hempi-gallery-arrows-off .pswp__button--arrow--right {
	display: none !important;
}

/* Quick View zoom trigger -- Settings -> Hempi UI -> "Lupa (powiększenie) w
   Szybkim podglądzie", OFF by default (see hempi-quickview-zoom-off in
   storefront-layout.php for why). Hides the magnifying-glass button that
   WooCommerce's gallery JS prepends into the image, scoped to the Quick View
   popup only -- the single product page's own gallery is untouched. The
   actual click is also blocked in JS (blockQuickViewZoom() in
   storefront-skin.js); this CSS just keeps a dead-looking button from
   showing in the first place. */
body.hempi-skin.hempi-quickview-zoom-off .botiga-quick-view-popup .woocommerce-product-gallery__trigger {
	display: none !important;
}

body.hempi-skin .pswp__button--zoom,
body.hempi-skin .pswp__button--fs,
body.hempi-skin .pswp__button--share,
body.hempi-skin .pswp__counter,
body.hempi-skin .pswp__caption,
body.hempi-skin .pswp__preloader,
body.hempi-skin .pswp__share-modal {
	display: none !important;
}

body.hempi-skin .pswp__top-bar {
	background: none !important;
	height: 0 !important;
	overflow: visible !important;
	pointer-events: none;
}

body.hempi-skin .pswp__ui,
body.hempi-skin .pswp__ui--idle,
body.hempi-skin .pswp__ui--hidden,
body.hempi-skin .pswp__ui--idle .pswp__top-bar,
body.hempi-skin .pswp__ui--hidden .pswp__top-bar {
	opacity: 1 !important;
	visibility: visible !important;
}

body.hempi-skin .pswp__button--close {
	pointer-events: auto !important;
	position: fixed !important;
	top: 18px !important;
	right: 18px !important;
	left: auto !important;
	float: none !important;
	z-index: 100060 !important;
	width: 44px !important;
	height: 44px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: #fff !important;
	background-image: none !important;
	opacity: 1 !important;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.28) !important;
	cursor: pointer;
}

body.hempi-skin .pswp__button--close:hover,
body.hempi-skin .pswp__button--close:focus {
	opacity: 1 !important;
	background: #f3f3f3 !important;
	background-image: none !important;
}

body.hempi-skin .pswp__button--close::before,
body.hempi-skin .pswp__button--close::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 18px;
	height: 2px;
	background: #222;
	border-radius: 1px;
}

body.hempi-skin .pswp__button--close::before {
	transform: translate(-50%, -50%) rotate(45deg);
}

body.hempi-skin .pswp__button--close::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}

@media (max-width: 575px) {
	body.hempi-skin .pswp__button--close {
		top: 12px !important;
		right: 12px !important;
	}
}