/*
 * Product cards: separate rounded cards (decision 2026-10-26, replaces the hairline grid of the F2 mockup). One white
 * surface without borders or rules (redesign 2026-10-26): the photo, the name and the price rail share it. 2 columns,
 * 3 from 540 px of container width, 4 from 860 px. Container queries, so the same card fits the full-width home shelf
 * and the shop column beside filters. No glass here: backdrop blur on dozens of cards costs too much on phones.
 */
/* Not on the shop collection: containment would trap the fixed filter drawer (the shop column is the container there). */
.bm-collection:not(.bm-shop) { container-type: inline-size; }
.bm-collection .bm-cards.wc-block-product-template {
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .625rem;
	margin: 0; padding: 0; list-style: none;
}
@container (min-width: 540px) { .bm-collection .bm-cards.wc-block-product-template { gap: var(--wp--preset--spacing--40); grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container (min-width: 860px) { .bm-collection .bm-cards.wc-block-product-template { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Home shelves (bm-collection--5): 10 products, 5 in a row from 1100 px (decision 2026-10-26). Narrower, the cards that
   would start an unfinished row are hidden: 9 in 3 columns, 8 in 4; 2 columns show all 10. */
@container (min-width: 1100px) { .bm-collection--5 .bm-cards.wc-block-product-template { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@container (min-width: 540px) and (max-width: 859.98px) { .bm-collection--5 .bm-cards > .wc-block-product:nth-child(n+10) { display: none; } }
@container (min-width: 860px) and (max-width: 1099.98px) { .bm-collection--5 .bm-cards > .wc-block-product:nth-child(n+9) { display: none; } }

.bm-cards > .wc-block-product {
	--bm-rail-x: var(--wp--preset--spacing--40); /* side inset of the price rail: the heart and the cart line up on it */
	position: relative; display: grid; grid-template-rows: auto auto 1fr; margin: 0; padding: 0; overflow: hidden;
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--paper); box-shadow: var(--wp--custom--shadow--card);
	transition: box-shadow var(--wp--custom--speed) var(--wp--custom--ease);
}
.bm-cards > .wc-block-product:hover { box-shadow: var(--wp--custom--shadow--raised); }
/* Cards in one row share the grid's rows (photo, name, price rail), so a three-line name moves the shelf edge of the
   whole row, not of its own card. Browsers without subgrid keep the per-card rows above. */
@supports (grid-template-rows: subgrid) {
	.bm-cards > .wc-block-product { grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; }
}
.bm-cards > .wc-block-product > * { margin: 0; }
.bm-cards > .wc-block-product:has(.bm-card__title a:focus-visible) { outline: 3px solid var(--wp--preset--color--ink); outline-offset: 2px; z-index: 2; }

/* Heart (bm/wishlist-button) over the photo's top right corner; out of the card's grid rows. 44 px like the cart
   button, on the same distance from the card's right edge, so the two circles stand in one vertical line. */
.bm-cards > .wc-block-product > .bm-card__wish {
	position: absolute; z-index: 3; top: calc(var(--wp--preset--spacing--30) + .375rem); right: var(--bm-rail-x);
	width: 44px; height: 44px;
}
/* Stock label (bm/stock-status) over the top left corner, its top on the heart's top edge; the sale badge goes under it.
   Left offset minus the pill's left padding: the dot stands on the text edge of the name, unit price and price. */
.bm-cards > .wc-block-product > .bm-card__stock {
	position: absolute; z-index: 3; top: calc(var(--wp--preset--spacing--30) + .375rem); left: calc(var(--wp--preset--spacing--40) - .5rem);
	height: 26px; padding: 0 .625rem 0 .5rem; border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--paper); font-size: .6875rem; line-height: 1; white-space: nowrap;
}

.bm-card__media { padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40) 0; }
.bm-card__media img { aspect-ratio: 1; width: 100%; height: auto; object-fit: contain !important; }
.bm-card__media .wc-block-components-product-image__inner-container { inset: 3rem auto auto .75rem; }

/* Name sized in rem, under the body text (decisions 2026-10-26: 0.875 / 1rem, then 0.8125 / 0.9375rem read too big). */
.bm-card__title {
	padding: .375rem var(--wp--preset--spacing--40) .5rem;
	font-weight: 600; font-size: .75rem; line-height: 1.25; letter-spacing: 0;
	text-wrap: pretty;
}
.bm-card__title a {
	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
	min-height: calc(2 * 1.25em); text-decoration: none;
}
.bm-card__title a::after { content: ''; position: absolute; inset: 0; } /* whole card is the link */
.bm-card__title a:hover { text-decoration: underline; text-underline-offset: .15em; }
.bm-card__title a:focus-visible { outline: none; }

/* Price rail: the price and the round cart button as the last row at the bottom of the card, the notes (unit price,
   Omnibus, deposit) right above them in rows 1-4. The rails of a card row share a subgrid row and pack to its end, so
   the slack goes under the name and the prices of the whole row stand on one line. Row gap 0: empty rows would still
   get it. */
.bm-card__rail {
	display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: repeat(5, auto); align-content: end; gap: 0 .5rem;
	padding: .25rem var(--bm-rail-x) .75rem;
}
@container (max-width: 539.98px) {
	.bm-card__media, .bm-card__title { padding-inline: .625rem; }
	/* Phone cards: "Ostatnie sztuki" ran under the heart; smaller label, and never past the heart's left edge. */
	.bm-cards > .wc-block-product > .bm-card__stock {
		left: .25rem; top: calc(var(--wp--preset--spacing--30) + .375rem); height: 22px; gap: .25rem;
		max-width: calc(100% - .25rem - var(--bm-rail-x) - 44px - 4px);
		padding: 0 .4375rem 0 .375rem; font-size: .625rem; letter-spacing: -.01em;
	}
	.bm-cards > .wc-block-product > .bm-card__stock::before { width: 6px; height: 6px; }
	.bm-cards > .wc-block-product { --bm-rail-x: .625rem; }
}
/* Price on the card: the promotional tag runs out to the card's left edge. Overrides woocommerce-product-price.css
   for cards only. */
.bm-card__rail .wc-block-components-product-price > .woocommerce-Price-amount { padding: .125em 0; }
.bm-card__rail .wp-block-woocommerce-product-price ins {
	margin-left: calc(-1 * var(--bm-rail-x)); padding: .3em .6em .25em var(--bm-rail-x); border-radius: 0 6px 6px 0;
}
/* No struck regular price: the previous price on the card is the Omnibus reference (bm/omnibus-price, struck, right
   above the tag), the price the law measures a reduction from. */
.bm-card__rail .wp-block-woocommerce-product-price del { display: none; }
/* "Taniej o …" from the tag's left edge, like a second label on the shelf price. */
.bm-card__rail.bm-card__rail > .bm-card__saving {
	margin-left: calc(-1 * var(--bm-rail-x)); padding-left: var(--bm-rail-x); border-radius: 0 4px 4px 0;
}
/* Doubled class: the group's flow layout gives every child after the first a 24 px block gap. */
.bm-card__rail.bm-card__rail > * { grid-column: 1 / -1; margin: 0 0 .25rem; }
.bm-card__rail.bm-card__rail > .bm-card__price { grid-area: -2 / 1; align-self: end; margin: 0; }
.bm-card__rail.bm-card__rail > .bm-card__add { grid-area: -2 / 2; align-self: end; margin: 0; }
.bm-card__rail .bm-unit-price, .bm-card__rail .bm-deposit-note {
	font-size: .75rem; line-height: 1.3; color: var(--wp--preset--color--ink-soft);
	font-variant-numeric: tabular-nums;
}
/* Omnibus note: legal small print, kept compact. */
.bm-card__rail .bm-omnibus {
	font-size: .6875rem; line-height: 1.25; color: var(--wp--preset--color--ink-soft);
	font-variant-numeric: tabular-nums;
}
.bm-card__rail .bm-omnibus strong { color: var(--wp--preset--color--ink); font-weight: 600; }

@container (min-width: 860px) {
	.bm-card__title { font-size: .875rem; }
}

/* Hero deals (patterns/home-hero.php): the three biggest discounts as big white price cards, fanned out like tags
   pinned to a board. The biggest discount (first in the query) stands in the middle, larger and raised; the discount is
   a round crimson stamp on the card's corner and the price an orange "cenówka" bar along its foot (2026-11-04: the
   old shelf showed small photos over a grey shelf line). The whole card is the link (the title's ::after). */
.bm-shelf { position: relative; isolation: isolate; container-type: inline-size; }
.bm-shelf .bm-shelf__items.wc-block-product-template {
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.18fr) minmax(0, 1fr); align-items: center;
	gap: clamp(.5rem, 3.2cqi, 1.75rem); margin: 0; padding: 2.75rem .5rem 1.5rem; list-style: none;
}
.bm-shelf .wc-block-product {
	--bm-tilt: 0deg; --bm-lift: 0px;
	position: relative; display: flex; flex-direction: column; width: auto !important; max-width: none; margin: 0; text-align: left;
	background: var(--wp--preset--color--paper); border-radius: 20px;
	box-shadow: 0 1px 0 rgb(255 255 255 / .7) inset, 0 0 0 1px rgb(35 31 32 / .06), 0 26px 44px -22px rgb(142 1 34 / .42);
	transform: translateY(var(--bm-lift)) rotate(var(--bm-tilt)); transform-origin: 50% 100%;
	transition: transform .35s cubic-bezier(.16, 1, .3, 1), box-shadow .35s;
}
.bm-shelf .wc-block-product > * { margin: 0; }
/* Biggest discount in the middle; the other two lean away from it. */
.bm-shelf .wc-block-product:nth-child(1) { order: 2; z-index: 2; --bm-lift: -.75rem; }
.bm-shelf .wc-block-product:nth-child(2) { order: 1; --bm-tilt: -3deg; }
.bm-shelf .wc-block-product:nth-child(3) { order: 3; --bm-tilt: 3deg; }
.bm-shelf .wc-block-product:hover { --bm-lift: -.5rem; z-index: 3; box-shadow: 0 1px 0 rgb(255 255 255 / .7) inset, 0 0 0 1px rgb(35 31 32 / .06), 0 34px 52px -22px rgb(142 1 34 / .5); }
.bm-shelf .wc-block-product:nth-child(1):hover { --bm-lift: -1.25rem; }
.bm-shelf .wc-block-product:focus-within { outline: 3px solid var(--wp--preset--color--accent); outline-offset: 4px; }
.bm-shelf .wc-block-product :focus-visible { outline: none; }

/* Photo: the card's upper part. Static positioning so the stamp is placed against the card, outside the photo clip. */
.bm-shelf .bm-shelf__media.bm-shelf__media { position: static; width: 100%; padding: 14% 10% 0; overflow: visible; }
.bm-shelf .bm-shelf__media > a { position: static; display: block; overflow: hidden; border-radius: 12px; }
.bm-shelf__media img {
	aspect-ratio: 1; width: 100%; height: auto; object-fit: contain !important;
	transition: transform .5s cubic-bezier(.16, 1, .3, 1);
}
.bm-shelf .wc-block-product:hover .bm-shelf__media img { transform: scale(1.06); }

/* Discount stamp: a crimson disc inside a white ring of Ukrainian cross-stitch (img/hero/ornament-ring.svg), pinned
   slightly turned on the card's top edge at the right: half above the card, so it neither hides the photo nor reaches
   the next card (2026-11-04, after review). */
.bm-shelf .bm-shelf__media .wc-block-components-product-image__inner-container.wc-block-components-product-image__inner-container {
	position: absolute; inset: -1.6rem .6rem auto auto; z-index: 4; width: auto; height: auto; pointer-events: none;
}
/* WooCommerce places the badge absolutely and gives its text a white plate: here it sits in the container above. */
.bm-shelf .bm-shelf__media .wc-block-components-product-sale-badge.wc-block-components-product-sale-badge { position: static; inset: auto; margin: 0; }
.bm-shelf .wc-block-components-product-sale-badge__text { padding: 0; background: none; color: inherit; line-height: 1; }
.bm-shelf .wp-block-woocommerce-product-sale-badge .wc-block-components-product-sale-badge {
	display: grid; place-items: center; width: clamp(3.25rem, 11.5cqi, 4.5rem); aspect-ratio: 1; padding: 0;
	border-radius: 50%; color: #fff;
	background:
		radial-gradient(circle closest-side, var(--wp--preset--color--crimson) 0 72%, transparent calc(72% + .5px)),
		url("../../img/hero/ornament-ring.svg") center / 100% 100% no-repeat,
		#fff;
	font-size: clamp(.75rem, 2.4cqi, .9375rem); font-weight: 900; letter-spacing: -.03em;
	box-shadow: 0 10px 20px -8px rgb(142 1 34 / .6);
	rotate: -10deg;
}
.bm-shelf .wp-block-woocommerce-product-sale-badge .wc-block-components-product-sale-badge::before { content: none; }
.bm-shelf .wc-block-product:nth-child(1) .wc-block-components-product-sale-badge { width: clamp(3.75rem, 13.5cqi, 5.25rem); font-size: clamp(.8125rem, 2.8cqi, 1.125rem); }

/* Name: two lines at most, so the three price bars keep one rhythm. */
.bm-shelf__name {
	padding: .75rem 8% 0; min-height: calc(2 * 1.3em + .75rem);
	font-size: var(--wp--preset--font-size--xs); font-weight: 600; line-height: 1.3; letter-spacing: 0;
}
.bm-shelf__name a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-decoration: none; color: inherit; }
.bm-shelf__name a::after { content: ''; position: absolute; inset: 0; z-index: 5; border-radius: inherit; }

/* Price: an orange bar across the card's foot, new price big, the previous one struck through beside it. */
.bm-shelf .bm-shelf__price.bm-shelf__price { margin: .75rem 0 0; padding: .65rem 8% .7rem; border-radius: 0 0 20px 20px; background: var(--wp--preset--color--orange); }
.bm-shelf__price .wc-block-components-product-price { justify-content: flex-start; align-items: baseline; gap: .1rem .5rem; color: var(--wp--preset--color--night); }
.bm-shelf__price ins, .bm-shelf__price .wc-block-components-product-price > .woocommerce-Price-amount {
	padding: 0 !important; background: none !important; color: var(--wp--preset--color--night) !important;
	font-size: clamp(1.25rem, 5.4cqi, 2.25rem) !important;
}
.bm-shelf .wc-block-product:nth-child(1) .bm-shelf__price ins { font-size: clamp(1.5rem, 6.6cqi, 2.75rem) !important; }
.bm-shelf__price del { color: rgb(35 31 32 / .72); font-size: clamp(.75rem, 2.2cqi, .875rem); font-weight: 700; }
@container (max-width: 520px) { .bm-shelf__price del { display: none; } }

/* Entrance: the cards are dealt onto the page after the headline, then the stamps hit. One moment, transforms only. */
@media (prefers-reduced-motion: no-preference) {
	/* backwards, not both: a finished animation that keeps filling would override the hover transition (the lift jumped). */
	.bm-shelf .wc-block-product { animation: bm-deal .9s cubic-bezier(.16, 1, .3, 1) backwards; }
	.bm-shelf .wc-block-product:nth-child(2) { animation-delay: .22s; }
	.bm-shelf .wc-block-product:nth-child(1) { animation-delay: .32s; }
	.bm-shelf .wc-block-product:nth-child(3) { animation-delay: .42s; }
	.bm-shelf .wc-block-components-product-sale-badge { animation: bm-stamp .5s cubic-bezier(.34, 1.56, .64, 1) both; }
	.bm-shelf .wc-block-product:nth-child(2) .wc-block-components-product-sale-badge { animation-delay: .78s; }
	.bm-shelf .wc-block-product:nth-child(1) .wc-block-components-product-sale-badge { animation-delay: .88s; }
	.bm-shelf .wc-block-product:nth-child(3) .wc-block-components-product-sale-badge { animation-delay: .98s; }
}
@keyframes bm-deal { from { opacity: 0; transform: translateY(48px) rotate(calc(var(--bm-tilt) * 3)) scale(.92); } }
@keyframes bm-stamp { from { opacity: 0; scale: 1.9; rotate: -30deg; } }
@media (prefers-reduced-motion: reduce) {
	.bm-shelf .wc-block-product, .bm-shelf__media img { transition: none; }
	.bm-shelf .wc-block-product:hover .bm-shelf__media img { transform: none; }
}
@media (forced-colors: active) { .bm-shelf .wc-block-product { border: 1px solid CanvasText; } }

/* Phone: no fan, smaller corners, the stamp sits inside the card's edge. */
@media (max-width: 639.98px) {
	.bm-shelf .bm-shelf__items.wc-block-product-template { padding-inline: .25rem; }
	.bm-shelf .wc-block-product { --bm-tilt: 0deg !important; border-radius: 14px; }
	.bm-shelf .bm-shelf__price.bm-shelf__price { border-radius: 0 0 14px 14px; padding-inline: .5rem; }
	.bm-shelf__name { padding-inline: .5rem; }
	.bm-shelf .bm-shelf__media .wc-block-components-product-image__inner-container.wc-block-components-product-image__inner-container { inset: -1.1rem .25rem auto auto; }
	.bm-shelf .wp-block-woocommerce-product-sale-badge .wc-block-components-product-sale-badge { width: 2.75rem; font-size: .625rem; }
	.bm-shelf .wc-block-product:nth-child(1) .wc-block-components-product-sale-badge { width: 3rem; font-size: .6875rem; }
}
@media (min-width: 960px) { .bm-shelf__name { font-size: var(--wp--preset--font-size--sm); } }