/* ==========================================================================
   Veluro - WooCommerce styles
   ========================================================================== */

/* ---------- notices ---------- */
.woocommerce-notices-wrapper { max-width: var(--wrap); margin: 24px auto 0; padding: 0 28px; }
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	background: #fff; border: 1px solid var(--line);
	border-left: 4px solid var(--burg);
	border-radius: var(--radius);
	padding: 16px 20px; margin: 0 0 16px;
	list-style: none; font-size: 14.5px;
	display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.woocommerce-error { border-left-color: var(--red); }
.woocommerce-message .button,
.woocommerce-info .button {
	margin-left: auto; background: var(--burg); color: #fff;
	padding: 10px 18px; border-radius: var(--btn-radius);
	font-size: 12.5px; font-weight: 600;
}

/* ---------- shop archive ---------- */
.veluro-shop { padding: 40px 0 20px; }
.veluro-shop-head { text-align: center; margin-bottom: 34px; }
.veluro-shop-head .k {
	font-size: 12px; letter-spacing: .28em; text-transform: uppercase;
	color: var(--gold); margin-bottom: 12px;
}
.veluro-shop-head h1 { font-size: clamp(30px, 4vw, 46px); margin: 0; }
.veluro-shop-head .term-description { color: var(--muted); max-width: 640px; margin: 14px auto 0; }
.veluro-shop-head .line { width: 60px; height: 2px; background: var(--burg); margin: 16px auto 0; }

.woocommerce-breadcrumb {
	font-size: 13px; color: var(--muted); padding: 24px 0 0;
	max-width: var(--wrap); margin: 0 auto;
}
.woocommerce-breadcrumb a { color: var(--muted); }
.woocommerce-breadcrumb a:hover { color: var(--burg); }

.veluro-shop-toolbar {
	display: flex; align-items: center; justify-content: space-between;
	gap: 16px; flex-wrap: wrap;
	border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
	padding: 14px 0; margin-bottom: 30px;
}
.woocommerce-result-count { margin: 0; font-size: 13.5px; color: var(--muted); }
.woocommerce-ordering select,
.veluro-shop-toolbar select {
	border: 1px solid var(--line); background: #fff;
	border-radius: var(--btn-radius); padding: 10px 14px; font-size: 13.5px;
}

/* subcategory chips */
.veluro-subcats { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; justify-content: center; }
.veluro-subcats a {
	border: 1px solid var(--line); background: #fff;
	border-radius: 40px; padding: 10px 18px;
	font-size: 13.5px; font-weight: 600; color: var(--ink);
}
.veluro-subcats a:hover { border-color: var(--burg); color: var(--burg); }

/* category cards inside a product loop */
ul.products li.product-category a { display: block; }
ul.products li.product-category .veluro-cat-media {
	aspect-ratio: 4 / 3; background: #ece4d7; overflow: hidden;
}
ul.products li.product-category h2 {
	font-family: var(--font-head); font-size: 20px; font-weight: 700;
	padding: 18px 20px; margin: 0;
}
ul.products li.product-category .count { color: var(--muted); font-size: 13px; font-weight: 400; }

/* ==========================================================================
   Single product - immersive layout
   ========================================================================== */
.pdp-top {
	max-width: var(--wrap); margin: 0 auto;
	padding: 22px 28px 0;
	display: flex; justify-content: space-between; align-items: center;
	gap: 16px; flex-wrap: wrap;
}
.pdp-top .woocommerce-breadcrumb { padding: 0; }

.pdp-hero { max-width: 1400px; margin: 18px auto 0; padding: 0 20px; }
.pdp-herobg {
	/* Scrim behind the hero copy. Single source of truth: the layered hero paints
	   it as a ::after overlay, the media-library fallback composes it into
	   background-image via var(). Weighted to the bottom third so the photograph
	   stays clean where there is no text.

	   Kept close to the approved mockup's weight (.62 at the foot) so the
	   photograph reads bright. Legibility of the copy comes from its own shadow
	   instead - see .pdp-h1 / .pdp-hk - which sharpens the glyph edges without
	   dimming the image behind them. A scrim heavy enough to carry the text on its
	   own measured fine but looked murky over high-key interiors. */
	--pdp-scrim: linear-gradient(
		180deg,
		rgba(0,0,0,0) 38%,
		rgba(0,0,0,.18) 66%,
		rgba(0,0,0,.62) 100%
	);

	position: relative; border-radius: var(--radius-lg); overflow: hidden;
	min-height: 560px; display: flex; align-items: flex-end;
	color: #fff; background-color: #ded4c6;
	background-size: cover; background-position: center;
}
.pdp-herobg .in { position: relative; padding: clamp(28px, 4vw, 56px); max-width: 760px; }
/* The hero copy carries its own shadow so it stays legible over bright
   photography without needing a scrim heavy enough to dull the image. */
.pdp-hk {
	font-size: 12px; letter-spacing: .28em; text-transform: uppercase;
	margin-bottom: 16px;
	text-shadow: 0 1px 2px rgba(0,0,0,.55), 0 2px 14px rgba(0,0,0,.5);
}
.pdp-h1 {
	font-family: var(--font-head); font-size: clamp(34px, 5vw, 62px);
	font-weight: 700; line-height: 1.02; margin: 0; color: #fff;
	text-shadow: 0 2px 4px rgba(0,0,0,.4), 0 4px 26px rgba(0,0,0,.45);
}
.pdp-htag { text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.pdp-scroll { text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.pdp-htag { font-size: 16px; opacity: .92; margin-top: 16px; max-width: 460px; line-height: 1.5; }
.pdp-scroll {
	position: absolute; right: 40px; bottom: 40px;
	font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; opacity: .9;
}

.pdp-wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 28px; }
.pdp-shop { display: grid; grid-template-columns: 390px minmax(0, 1fr); gap: 56px; padding: 54px 0; }
.pdp-buy { position: sticky; top: 24px; align-self: start; }

.pdp-ey {
	font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
	color: var(--gold); margin-bottom: 10px;
}
.pdp-title { font-family: var(--font-head); font-size: 30px; font-weight: 700; line-height: 1.1; margin: 0; }

/* rating */
.pdp-buy .woocommerce-product-rating { display: flex; align-items: center; gap: 10px; margin: 12px 0; }
.star-rating {
	font-size: 14px; width: 5.4em; height: 1.4em; line-height: 1.4;
	overflow: hidden; position: relative; font-family: star; color: var(--gold);
}
.star-rating::before { content: "\73\73\73\73\73"; float: left; top: 0; left: 0; position: absolute; opacity: .3; }
.star-rating span { overflow: hidden; float: left; top: 0; left: 0; position: absolute; padding-top: 1.5em; }
.star-rating span::before { content: "\53\53\53\53\53"; top: 0; position: absolute; left: 0; }
.woocommerce-review-link { font-size: 13px; color: var(--muted); }

/* price */
.pdp-buy .price {
	display: flex; align-items: baseline; gap: 11px; flex-wrap: wrap;
	margin: 14px 0 4px;
	font-family: var(--font-head); font-size: 30px; font-weight: 700; color: var(--burg);
}
.pdp-buy .price del { font-family: var(--font-body); font-size: 16px; color: var(--muted); font-weight: 400; }
.pdp-buy .price ins { text-decoration: none; }
.pdp-fin { font-size: 13px; color: var(--muted); margin-bottom: 18px; }
.pdp-ask {
	font-family: var(--font-head); font-size: 22px; font-weight: 700;
	color: var(--burg); margin: 14px 0 6px;
}

.pdp-sd { color: var(--muted); line-height: 1.65; font-size: 14.5px; margin-bottom: 22px; }

/* add to cart form */
.pdp-buy form.cart { margin: 0 0 20px; }
.pdp-buy .variations { width: 100%; border-collapse: collapse; margin-bottom: 16px; }
.pdp-buy .variations th,
.pdp-buy .variations td { display: block; width: 100%; text-align: left; padding: 0; }
.pdp-buy .variations th label {
	font-size: 12.5px; font-weight: 600; letter-spacing: .04em;
	margin-bottom: 8px; display: inline-block;
}
.pdp-buy .variations td { margin-bottom: 16px; }
.pdp-buy .variations select {
	width: 100%; border: 1.5px solid var(--line); background: #fff;
	border-radius: var(--btn-radius); padding: 13px 16px; font-size: 14px;
}
.pdp-buy .reset_variations { font-size: 12.5px; color: var(--muted); }

.pdp-buy .quantity { display: inline-flex; align-items: center; border: 1.5px solid var(--line); border-radius: var(--btn-radius); overflow: hidden; }
.pdp-buy .quantity input[type="number"] {
	width: 62px; height: 52px; border: none; text-align: center;
	font-weight: 600; -moz-appearance: textfield; background: #fff;
}
.pdp-buy .quantity input::-webkit-outer-spin-button,
.pdp-buy .quantity input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* The quantity stepper and add-to-cart sit on one row with a gap.
   This used to be written against a .pdp-buyrow wrapper, but nothing ever
   emitted one - WooCommerce's add-to-cart template puts .quantity and the button
   as direct children of form.cart - so the rule never applied and the two
   controls rendered flush against each other. Style the form itself instead.
   Variable products are excluded: their form carries a .variations table that
   must stay in normal flow. */
.pdp-buy form.cart:not(.variations_form) {
	display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap;
}
/*
 * A variable product puts the same two controls one level deeper, inside
 * .woocommerce-variation-add-to-cart, so the rule above cannot reach them. Core
 * floats both and clearfixes with pseudo-elements, and with the row left in
 * normal flow the whole form collapsed to **zero height** - the trust block
 * below it then wrapped alongside the button into the 38px of width left over.
 * Flex the real row and kill the pseudos, exactly as for the simple form.
 */
.pdp-buy .woocommerce-variation-add-to-cart {
	display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap;
}
.pdp-buy .woocommerce-variation-add-to-cart::before,
.pdp-buy .woocommerce-variation-add-to-cart::after,
.pdp-buy .single_variation_wrap::before,
.pdp-buy .single_variation_wrap::after {
	content: none;
	display: none;
}
.pdp-buy .woocommerce-variation-add-to-cart .button { float: none; }
.pdp-buy .single_add_to_cart_button {
	flex: 1; min-width: 200px; min-height: 52px;
	background: var(--burg); color: #fff;
	border-radius: var(--btn-radius); font-weight: 600; font-size: 14.5px;
	display: inline-flex; align-items: center; justify-content: center; gap: 9px;
	padding: 0 22px; border: none;
}
.pdp-buy .single_add_to_cart_button:hover { opacity: .92; }
.pdp-buy .single_add_to_cart_button.disabled { opacity: .5; cursor: not-allowed; }

.pdp-trust {
	display: flex; flex-direction: column; gap: 8px;
	border-top: 1px solid var(--line); padding-top: 16px; margin-top: 4px;
}
.pdp-trust div { display: flex; gap: 9px; align-items: center; font-size: 13px; color: var(--muted); }
.pdp-trust svg { color: var(--burg); flex: none; }
.pdp-meta { margin-top: 14px; font-size: 12px; color: var(--muted); }
.pdp-meta b { color: var(--ink); }
.pdp-meta .sku_wrapper, .pdp-meta .posted_in { display: block; margin-bottom: 4px; }

/* gallery column */
.pdp-gallery { display: flex; flex-direction: column; gap: 16px; margin-bottom: 44px; }
.pdp-gallery .g {
	border-radius: var(--radius); overflow: hidden;
	background: #ece4d7; aspect-ratio: 3 / 2;
}
.pdp-gallery .g img { width: 100%; height: 100%; object-fit: cover; }
.pdp-gallery .g--placeholder { background: linear-gradient(135deg, #ece4d7, #ddd3c4); }

.pdp-sec { margin-bottom: 44px; }
.pdp-sec h3 { font-family: var(--font-head); font-size: 26px; font-weight: 700; margin-bottom: 16px; }
.pdp-sec p { color: var(--muted); line-height: 1.8; font-size: 15px; margin-bottom: 12px; max-width: 640px; }
.pdp-sec table, .shop_attributes {
	width: 100%; border-collapse: collapse; max-width: 640px;
}
.shop_attributes th, .shop_attributes td {
	padding: 11px 4px; border-bottom: 1px solid var(--line);
	font-size: 14.5px; text-align: left;
}
.shop_attributes th { color: var(--muted); width: 42%; font-weight: 400; }
.shop_attributes td { font-weight: 500; }
.shop_attributes td p { margin: 0; color: var(--ink); }

/* materials strip */
.pdp-mat { background: var(--paper); border-top: 1px solid var(--line); }
.pdp-mat .in {
	max-width: var(--wrap); margin: 0 auto; padding: 52px 28px;
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px;
}
.pdp-mi .ic { color: var(--burg); margin-bottom: 12px; display: inline-flex; }
.pdp-mi h4 { font-family: var(--font-head); font-size: 19px; font-weight: 700; margin-bottom: 5px; }
.pdp-mi p { font-size: 13px; color: var(--muted); line-height: 1.55; margin: 0; }

/* lifestyle quote */
.pdp-life {
	position: relative; min-height: 380px;
	display: flex; align-items: center; justify-content: center; text-align: center;
	color: #fff; background: var(--burg);
	background-size: cover; background-position: center;
}
.pdp-life blockquote {
	position: relative; font-family: var(--font-head);
	font-size: clamp(22px, 3vw, 34px); font-weight: 700;
	max-width: 780px; padding: 40px 24px; line-height: 1.3; font-style: italic; margin: 0;
}

/* reviews */
.pdp-reviews { max-width: var(--wrap); margin: 0 auto; padding: 60px 28px; }
#reviews { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 48px; }
#reviews .woocommerce-Reviews-title { font-family: var(--font-head); font-size: 26px; margin-bottom: 18px; }
#reviews .commentlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
#reviews .commentlist li {
	border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; background: #fff;
}
#reviews .comment-text { position: relative; }
#reviews .woocommerce-review__author { font-weight: 600; font-size: 14px; }
#reviews .woocommerce-review__published-date { color: var(--muted); font-size: 12.5px; }
#reviews .description { color: var(--muted); font-size: 14.5px; line-height: 1.6; }
#reviews .comment-reply-title { font-family: var(--font-head); font-size: 22px; font-weight: 700; display: block; margin-bottom: 12px; }
#reviews .comment-form { display: grid; gap: 14px; }
#reviews .comment-form input[type="text"],
#reviews .comment-form input[type="email"],
#reviews .comment-form textarea {
	width: 100%; border: 1px solid var(--line); background: #fff;
	border-radius: var(--btn-radius); padding: 13px 16px; font-size: 14px;
}
#reviews .comment-form .submit {
	background: var(--burg); color: #fff; border: none;
	border-radius: var(--btn-radius); padding: 14px 26px;
	font-weight: 600; font-size: 14px; justify-self: start;
}
#review_form_wrapper { grid-column: 1 / -1; }

/* related / upsells */
.related, .upsells, .cross-sells { max-width: var(--wrap); margin: 0 auto; padding: 20px 28px 80px; }
.related > h2, .upsells > h2, .cross-sells > h2 {
	font-family: var(--font-head); font-size: 30px; font-weight: 700;
	margin-bottom: 24px; text-align: center;
}

/* sticky add to cart bar */
.pdp-bar {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
	background: #fff; border-top: 1px solid var(--line);
	box-shadow: 0 -6px 24px rgba(0,0,0,.09);
	transform: translateY(120%); transition: transform .3s;
}
.pdp-bar.is-visible { transform: none; }
.pdp-bar .in {
	max-width: var(--wrap); margin: 0 auto; padding: 12px 28px;
	display: flex; align-items: center; gap: 16px;
}
.pdp-bar .th {
	width: 50px; height: 50px; border-radius: 10px; flex: none;
	background: #ece4d7; background-size: cover; background-position: center;
}
.pdp-bar .nm { font-family: var(--font-head); font-weight: 700; font-size: 16px; }
.pdp-bar .pr { color: var(--burg); font-weight: 600; font-size: 14px; }
.pdp-bar .pr del { color: var(--muted); font-weight: 400; font-size: 12.5px; }
.pdp-bar .sp { flex: 1; }
.pdp-bar .add {
	background: var(--burg); color: #fff; border-radius: var(--btn-radius);
	font-weight: 600; font-size: 14px; padding: 13px 26px;
	display: inline-flex; align-items: center; gap: 8px;
}

/* ==========================================================================
   Cart / checkout / account
   ========================================================================== */
.woocommerce-cart .site-content,
.woocommerce-checkout .site-content,
.woocommerce-account .site-content { padding: 40px 0 60px; }

/* `form.` is load-bearing here: `woocommerce-checkout` is also the body class
   WooCommerce sets, so a bare `.woocommerce-checkout` puts this max-width and
   padding on the whole document - which is why the footer sat 28px narrower than
   on every other page. */
.woocommerce-cart-form,
form.woocommerce-checkout,
.woocommerce-account .woocommerce { max-width: var(--wrap); margin: 0 auto; padding: 0 28px; }

.shop_table {
	width: 100%; border-collapse: collapse; background: #fff;
	border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
}
.shop_table th, .shop_table td {
	padding: 16px; border-bottom: 1px solid var(--line); text-align: left; font-size: 14.5px;
}
.shop_table th { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.shop_table img { width: 64px; border-radius: 10px; }
.cart_totals h2, .cross-sells h2 { font-family: var(--font-head); font-size: 26px; font-weight: 700; }

.woocommerce .button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button {
	background: var(--burg); color: #fff; border: none;
	border-radius: var(--btn-radius); padding: 14px 26px;
	font-size: 13.5px; font-weight: 600; letter-spacing: .03em;
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.woocommerce .button:hover { opacity: .92; color: #fff; }
.woocommerce .button.alt, .woocommerce .checkout-button { background: var(--burg); }
.woocommerce .cart .button[name="update_cart"] { background: transparent; border: 1.4px solid var(--burg); color: var(--burg); }

.woocommerce form .form-row { display: flex; flex-direction: column; margin-bottom: 16px; }
.woocommerce form .form-row label { font-size: 13px; font-weight: 600; margin-bottom: 7px; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.select2-container .select2-selection--single {
	border: 1px solid var(--line); background: #fff;
	border-radius: var(--btn-radius); padding: 13px 16px; font-size: 14px; height: auto;
}
.woocommerce-checkout #payment { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.woocommerce-checkout #payment ul.payment_methods { list-style: none; margin: 0 0 16px; padding: 0; }
.woocommerce-checkout #payment div.form-row { padding: 0; }

.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; }
.woocommerce-MyAccount-navigation a { display: block; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.woocommerce-MyAccount-navigation .is-active a { color: var(--burg); font-weight: 600; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1000px) {
	.pdp-shop { grid-template-columns: 1fr; gap: 32px; }
	.pdp-buy { position: static; }
	#reviews { grid-template-columns: 1fr; gap: 28px; }
}

@media (max-width: 900px) {
	.pdp-herobg { min-height: 400px; }
	.pdp-scroll { display: none; }
	.pdp-mat .in { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
	.pdp-bar .nm, .pdp-bar .pr { font-size: 13px; }
	.pdp-bar .in { padding: 10px 16px; gap: 10px; }
	.shop_table thead { display: none; }
	.shop_table tr { display: block; border-bottom: 1px solid var(--line); }
	.shop_table td { display: flex; justify-content: space-between; border: none; padding: 10px 14px; }
	.shop_table td::before { content: attr(data-title); font-weight: 600; color: var(--muted); }

	/*
	 * ...except the product cell, which carries no data-title because its
	 * content is the whole line. The label was still generated (empty) and was
	 * still a flex item, so `space-between` handed it all the slack and indented
	 * the thumbnail 53px into a cell that had nothing to put there. Blocking the
	 * cell gives the line the full width - which is where the room for a bigger
	 * photograph comes from. Both declarations are needed: killing only the
	 * pseudo leaves the line shrink-wrapped, and blocking only the cell leaves
	 * an empty label occupying a line box.
	 */
	.veluro-review td.product-name::before { content: none; }
	.veluro-review td.product-name { display: block; }

	/* Stacked table, so there are no columns for colspan to span. Block the
	   shipping cell so its data-title heading sits above the options rather than
	   beside them, which is what the generic `space-between` rule above would
	   otherwise do to it. */
	.veluro-review tr.shipping > td { display: block; }
}

@media (max-width: 600px) {
	.pdp-mat .in { grid-template-columns: 1fr; }
	.pdp-bar .th { display: none; }
	.pdp-bar .add { padding: 12px 18px; font-size: 13px; }
}

/* quantity stepper buttons injected by main.js */
.veluro-qty-btn {
	width: 42px; height: 52px; background: #fff;
	font-size: 18px; color: var(--ink); line-height: 1;
	display: inline-flex; align-items: center; justify-content: center;
}
.veluro-qty-btn:hover { background: var(--cream); }

/* ==========================================================================
   Colourway picker, swappable gallery, folding demo, high-res viewer
   ========================================================================== */

/* --- picker in the sticky buy panel ------------------------------------- */
.pdp-cw { margin: 20px 0 22px; }
.pdp-cw-h {
	display: flex; align-items: baseline; gap: 8px;
	font-size: 13px; margin-bottom: 10px;
}
.pdp-cw-h .lb { color: var(--muted); text-transform: uppercase; letter-spacing: .12em; font-size: 11px; }
.pdp-cw-h .nm { font-weight: 600; color: var(--ink); }
.pdp-cw-sw { display: flex; flex-wrap: wrap; gap: 10px; }
.pdp-cw-sw .cw {
	width: 30px; height: 30px; padding: 0; border-radius: 50%;
	background: var(--sw, #ddd); border: 1px solid rgba(35,28,26,.18);
	cursor: pointer; transition: transform .16s, box-shadow .16s;
}
.pdp-cw-sw .cw:hover { transform: scale(1.09); }
.pdp-cw-sw .cw.is-on { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--burg); }
.pdp-cw-sw .cw:focus-visible { outline: 2px solid var(--burg); outline-offset: 3px; }

/* --- swappable gallery --------------------------------------------------- */
.pdp-gallery.is-swappable .g {
	position: relative;
	background-size: cover; background-position: center;
}
.pdp-gallery.is-swappable .g.is-empty { opacity: .35; }

.pdp-gallery .g-zoom {
	position: absolute; top: 12px; right: 12px; z-index: 3;
	width: 38px; height: 38px; border-radius: 50%; border: none;
	background: rgba(255,255,255,.9); color: var(--ink);
	display: inline-flex; align-items: center; justify-content: center;
	cursor: pointer; opacity: 0; transform: translateY(-4px);
	transition: opacity .2s, transform .2s, background .2s;
	box-shadow: 0 4px 14px rgba(35,28,26,.16);
}
.pdp-gallery .g:hover .g-zoom,
.pdp-gallery .g-zoom:focus-visible { opacity: 1; transform: none; }
.pdp-gallery .g-zoom:hover { background: var(--burg); color: var(--cream); }

/* --- folding demo -------------------------------------------------------- */
.pdp-fold { margin-bottom: 44px; }
.pdp-fold-copy { margin-bottom: 18px; }
.pdp-fold-k {
	font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
	color: var(--gold); margin-bottom: 8px;
}
.pdp-fold h3 {
	font-family: var(--font-head); font-size: 26px; font-weight: 700;
	margin: 0 0 8px;
}
.pdp-fold p { color: var(--muted); line-height: 1.8; font-size: 15px; max-width: 560px; margin: 0; }

.pdp-fold-stage {
	position: relative; overflow: hidden;
	border-radius: var(--radius); background: #f2ede4;
}
.pdp-fold-stage video { width: 100%; height: 100%; display: block; object-fit: cover; }

.pdp-fold-play {
	position: absolute; inset: 0; z-index: 2;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 12px; border: none; cursor: pointer;
	background: linear-gradient(rgba(36,28,26,.16), rgba(36,28,26,.34));
	color: #fff; transition: opacity .25s;
}
.pdp-fold-play .ic {
	width: 62px; height: 62px; border-radius: 50%;
	background: rgba(255,255,255,.94); color: var(--burg);
	display: inline-flex; align-items: center; justify-content: center;
	box-shadow: 0 8px 26px rgba(35,28,26,.28);
	transition: transform .2s;
}
.pdp-fold-play .tx {
	font-size: 12px; letter-spacing: .16em; text-transform: uppercase; font-weight: 600;
}
.pdp-fold-play:hover .ic { transform: scale(1.07); }
.pdp-fold-stage.is-playing .pdp-fold-play { opacity: 0; pointer-events: none; }

/* --- high-resolution viewer ---------------------------------------------- */
html.veluro-lb-open { overflow: hidden; }

.veluro-lb {
	position: fixed; inset: 0; z-index: 200;
	background: rgba(24,18,17,.94);
	display: flex; align-items: center; justify-content: center;
	opacity: 0; visibility: hidden; transition: opacity .24s, visibility .24s;
}
.veluro-lb.is-open { opacity: 1; visibility: visible; }

.veluro-lb-stage {
	position: relative; width: min(94vw, 1600px); height: min(88vh, 1100px);
	--ox: 50%; --oy: 50%;
}
.veluro-lb-stage .veluro-pic { position: absolute; inset: 0; }
.veluro-lb-stage .veluro-pic img {
	width: 100%; height: 100%; object-fit: contain;
	transition: transform .3s ease;
}
.veluro-lb-stage.is-zoomed { cursor: zoom-out; }
.veluro-lb-stage.is-zoomed .veluro-pic img {
	transform: scale(2.2); transform-origin: var(--ox) var(--oy);
}
.veluro-lb-stage:not(.is-zoomed) { cursor: zoom-in; }

.veluro-lb-x, .veluro-lb-nav {
	position: absolute; z-index: 3; border: none; cursor: pointer;
	background: rgba(255,255,255,.12); color: #fff;
	border-radius: 50%; transition: background .2s;
}
.veluro-lb-x:hover, .veluro-lb-nav:hover { background: rgba(255,255,255,.26); }
.veluro-lb-x {
	top: 22px; right: 24px; width: 44px; height: 44px; font-size: 26px; line-height: 1;
}
.veluro-lb-nav {
	top: 50%; transform: translateY(-50%);
	width: 52px; height: 52px; font-size: 30px; line-height: 1;
}
.veluro-lb-prev { left: 20px; }
.veluro-lb-next { right: 20px; }

.veluro-lb-hint {
	position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
	color: rgba(255,255,255,.62); font-size: 11px;
	letter-spacing: .16em; text-transform: uppercase;
	transition: opacity .2s;
}
.veluro-lb-stage.is-zoomed ~ .veluro-lb-hint { opacity: 0; }

@media (max-width: 900px) {
	.veluro-lb-nav { width: 42px; height: 42px; font-size: 24px; }
	.veluro-lb-prev { left: 8px; }
	.veluro-lb-next { right: 8px; }
	.veluro-lb-stage { width: 96vw; height: 74vh; }
	.pdp-fold h3 { font-size: 22px; }
	.pdp-fold-play .ic { width: 52px; height: 52px; }
}

/* ==========================================================================
   Neutralise WooCommerce core's float layout
   ========================================================================== */

/* woocommerce-layout.css lays the loop out with floats and percentage widths
   (22.05% at columns-4, 48% on small screens). ul.products is a CSS grid here,
   so those percentages resolve against each card's own grid cell and collapse
   every card to a ~63px sliver. The grid owns sizing; strip the float model.
   Without this the shop archive is unusable - it only looks correct in the
   offline harness, which never loads WooCommerce's own stylesheets. */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
.woocommerce ul.products[class*="columns-"] li.product,
.woocommerce-page ul.products[class*="columns-"] li.product {
	width: auto;
	float: none;
	clear: none;
	margin: 0;
}

/* Same story for the archive wrapper's clearing behaviour. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after { content: none; }

/* --- hero as layered image ---------------------------------------------- */

/* When photography is available the hero paints a real <picture> instead of a
   background, so it can negotiate AVIF and crossfade with the colourway. The
   gradient that used to be the first background-image layer becomes an overlay,
   and the copy sits above both. */
.pdp-herobg.has-layers > .veluro-pic { z-index: 0; }
.pdp-herobg.has-layers::after {
	content: ""; position: absolute; inset: 0; z-index: 2;
	pointer-events: none;
	background: var(--pdp-scrim);
}
.pdp-herobg.has-layers .in,
.pdp-herobg.has-layers .pdp-scroll { position: relative; z-index: 3; }

/* --- beating WooCommerce's own button specificity ------------------------ */

/*
 * WooCommerce paints its buttons with
 *   .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt
 * The :where() contributes nothing, but the bare `button` element does, so that
 * lands at (0,3,1). The theme's `.woocommerce .button.alt` is (0,3,0) and loses
 * by a single element selector no matter which stylesheet is printed last -
 * which is why add-to-cart rendered in WooCommerce purple.
 *
 * These mirror core's selector shape to tie at (0,3,1) and win on source order,
 * which now holds because inc/woocommerce.php declares core's handles as
 * dependencies. Match the shape if you add more button rules.
 */
.woocommerce button.button,
.woocommerce a.button,
.woocommerce input.button,
.woocommerce button.button.alt,
.woocommerce a.button.alt,
.woocommerce input.button.alt,
.woocommerce a.checkout-button.button {
	background: var(--burg);
	color: #fff;
	border-radius: var(--btn-radius);
	font-weight: 600;
}
.woocommerce button.button:hover,
.woocommerce a.button:hover,
.woocommerce input.button:hover,
.woocommerce button.button.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce input.button.alt:hover {
	background: var(--burg2);
	color: #fff;
}
.woocommerce button.button:disabled,
.woocommerce button.button.alt:disabled { background: var(--burg); opacity: .55; }

/* The product page button keeps its own sizing on top of the colour above. */
.woocommerce div.product .pdp-buy button.single_add_to_cart_button {
	flex: 1; min-width: 200px; min-height: 52px;
	background: var(--burg); color: #fff;
	display: inline-flex; align-items: center; justify-content: center; gap: 9px;
	padding: 0 22px; border: none; font-size: 14.5px;
}

/* --- more WooCommerce float layout, on the single product ---------------- */

/*
 * Same story as the loop: woocommerce-layout.css floats the single-product
 * columns with `div.summary { float: right; width: 48% }` (and 48% for
 * div.images). The PDP is a CSS grid, so 48% resolves against the 390px grid
 * column and the buy panel collapses to 187px - too narrow for the 200px
 * add-to-cart, which wraps below the quantity box and leaves a dead gap beside
 * it. Same specificity as core's rule; we win on source order.
 */
/*
 * The `#content` variants matter: core ships both
 *   .woocommerce div.product div.summary            (0,3,2)
 *   .woocommerce #content div.product div.summary   (1,3,2)
 * and the theme's markup sits inside #content, so only the ID-bearing rule
 * actually applies here. An override without the ID cannot win at any load
 * order. Mirror all four shapes.
 */
.woocommerce div.product div.summary,
.woocommerce div.product div.images,
.woocommerce-page div.product div.summary,
.woocommerce-page div.product div.images,
.woocommerce #content div.product div.summary,
.woocommerce #content div.product div.images,
.woocommerce-page #content div.product div.summary,
.woocommerce-page #content div.product div.images {
	float: none;
	width: auto;
	margin: 0;
}

/* Same reasoning for the loop, which core also floats via a #content variant. */
.woocommerce #content ul.products li.product,
.woocommerce-page #content ul.products li.product {
	float: none;
	width: auto;
	margin: 0;
}

/* Core clearfixes form.cart with ::before/::after set to content:" ";display:table.
   In our flex row those become real flex items: an empty one before the quantity
   box and another after the button. That is the phantom 10px indent on the
   quantity box and the dead 24px at the end of the row. Needs core's own
   selector shape (including the #content variant) to actually win. */
.woocommerce div.product form.cart::before,
.woocommerce div.product form.cart::after,
.woocommerce #content div.product form.cart::before,
.woocommerce #content div.product form.cart::after {
	content: none;
	display: none;
}

/* Its float and margin on the quantity box are redundant once the row is flex,
   and the stray 4px fights the gap. */
.woocommerce div.product form.cart .quantity {
	float: none;
	margin: 0;
}

/*
 * Disabled buttons. Core reaches (0,5,1) with
 * `button.button.alt:disabled[disabled]`, so a plain `:disabled` override at
 * (0,4,1) loses and the button flashes WooCommerce purple mid-request. Match the
 * shape to tie, and win on order.
 */
.woocommerce button.button:disabled,
.woocommerce button.button:disabled[disabled],
.woocommerce button.button.alt:disabled,
.woocommerce button.button.alt:disabled[disabled] {
	background: var(--burg);
	color: #fff;
	opacity: .55;
}

/* In-flight state: styled, not disabled, so no :disabled rule can repaint it. */
.single_add_to_cart_button.is-busy { opacity: .65; pointer-events: none; }

/* ==========================================================================
   Cart / checkout layout
   ========================================================================== */

/* .entry-content is capped at 780px for readable prose. That is right for a page
   of text and wrong for a cart table, so let the shop screens use the full wrap. */
.woocommerce-cart .entry-content,
.woocommerce-checkout .entry-content,
.woocommerce-account .entry-content {
	max-width: none;
	font-size: 15px;
	line-height: 1.6;
}

/* These already sit inside .wrap, so the inner max-width and padding would
   double up. Resetting the margin matters as much as the width: the original
   rule set `margin: 0 auto`, and auto margins on a grid item beat `stretch` -
   the form shrink-wrapped to its table and sat centred in a half-empty column. */
.woocommerce-cart .woocommerce-cart-form,
.woocommerce-checkout .woocommerce-checkout,
.woocommerce-account .woocommerce {
	max-width: none;
	margin: 0;
	/* Keep the horizontal inset: .wrap.veluro-page only pads vertically, so this
	   28px is the only thing holding the content off the viewport edge. */
	padding: 0 28px;
}

/* Cart: table left, summary right. */
.woocommerce-cart .woocommerce {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 360px;
	gap: 44px;
	align-items: start;
}
.woocommerce-cart .woocommerce-notices-wrapper { grid-column: 1 / -1; }
.woocommerce-cart .cart-collaterals { width: auto; float: none; }
.woocommerce-cart .cart-collaterals .cart_totals { width: auto; float: none; }
.woocommerce-cart .cross-sells { grid-column: 1 / -1; }

.cart_totals table.shop_table { background: #fff; }
.cart_totals h2 { margin-bottom: 14px; }
.woocommerce-cart .wc-proceed-to-checkout { margin-top: 18px; }
.woocommerce-cart .wc-proceed-to-checkout .checkout-button {
	display: flex; width: 100%; justify-content: center; padding: 16px 26px; font-size: 14.5px;
}

/* Coupon row reads as one control rather than two stray fields. */
.woocommerce-cart .coupon { display: flex; gap: 10px; flex-wrap: wrap; }
.woocommerce-cart .coupon .input-text {
	border: 1px solid var(--line); border-radius: var(--btn-radius);
	padding: 13px 16px; font-size: 14px; min-width: 190px;
}

/* Checkout: details left, order review right. */
.woocommerce-checkout form.checkout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 420px;
	column-gap: 48px;
	align-items: start;
}
.woocommerce-checkout form.checkout #customer_details { grid-column: 1; }
.woocommerce-checkout form.checkout .veluro-summary { grid-column: 2; }

/* Core's heading is replaced by the one inside .veluro-summary. */
.woocommerce-checkout form.checkout #order_review_heading { display: none; }
.veluro-summary-h {
	font-family: var(--font-head); font-size: 22px; font-weight: 700;
	margin: 0 0 14px;
}
.veluro-summary { position: sticky; top: 24px; }
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout h3 { font-family: var(--font-head); font-size: 22px; font-weight: 700; }
.woocommerce-checkout #payment ul.payment_methods li { margin-bottom: 10px; }
.woocommerce-checkout #payment label { font-weight: 600; }
.woocommerce-checkout #payment .payment_box {
	background: var(--paper); border-radius: 12px; padding: 14px 16px;
	font-size: 13.5px; color: var(--muted); margin: 8px 0 0;
}
.woocommerce-checkout #place_order { width: 100%; padding: 17px 26px; font-size: 15px; }

/* Cart line-item thumbnails come from the media manifest, so they arrive as the
   stacked <picture> the gallery uses. In a table cell it must sit in flow, and
   the sizing has to out-specify core's `.woocommerce-cart table.cart img
   { width: 32px }` - (0,2,2), so a plain two-class selector loses. */
.shop_table .product-thumbnail .veluro-pic,
.veluro-pic.veluro-flat {
	position: static; opacity: 1; display: block; width: 72px;
}
.woocommerce-cart table.cart td.product-thumbnail img,
.woocommerce table.shop_table td.product-thumbnail img {
	width: 72px; height: 54px; object-fit: cover; border-radius: 10px; display: block;
}

@media (max-width: 900px) {
	.woocommerce-cart .woocommerce,
	.woocommerce-checkout form.checkout { grid-template-columns: 1fr; gap: 30px; }
	/* .veluro-summary must be reset here too. It was added after this rule, and
	   its `grid-column: 2` survived the collapse to a single column - which does
	   not clamp it, it creates an *implicit* second track, so the whole order
	   summary sat off the right edge of every phone. Nothing scrolled to reveal
	   it either, so the checkout simply had no visible total or pay button. */
	.woocommerce-checkout form.checkout #customer_details,
	.woocommerce-checkout form.checkout #order_review_heading,
	.woocommerce-checkout form.checkout .veluro-summary,
	.woocommerce-checkout form.checkout #order_review { grid-column: 1; grid-row: auto; }
	/* Sticky is pointless once it is a single column, and it pins the summary
	   mid-scroll against the fields above it. */
	.veluro-summary { position: static; }

	/*
	 * Drop the 28px inset added above. Its comment is true only over 900px:
	 * `.veluro-page`'s `padding: 54px 0 20px` shorthand zeroes `.wrap`'s
	 * horizontal padding, so up there the 28px really is the only thing holding
	 * content off the edge - but the `.wrap` rules inside the 900px and 420px
	 * media blocks come later in main.css and win below those widths, so the two
	 * insets double up to 44px a side on a 320px screen. The order line needs
	 * that back: its stepper (117px) and remove button (30px) are fixed, so the
	 * padding comes straight out of the photograph's width.
	 */
	.woocommerce-cart .woocommerce-cart-form,
	.woocommerce-checkout .woocommerce-checkout,
	.woocommerce-account .woocommerce { padding-left: 0; padding-right: 0; }
}

/* Core styles the gateway description box as `#payment div.payment_box` -
   (1,2,2) with the id and two elements - so a selector without the `div` loses
   and it keeps WooCommerce's lilac. */
.woocommerce-checkout #payment div.payment_box,
.woocommerce #payment div.payment_box {
	background: var(--paper);
	color: var(--muted);
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 14px 16px;
	font-size: 13.5px;
	margin: 8px 0 0;
}
.woocommerce-checkout #payment div.payment_box::before,
.woocommerce #payment div.payment_box::before { display: none; }

/* Woo positions an icon font glyph absolutely inside its notices. The theme lays
   them out as flex rows, so the glyph lands on top of the first word - that is
   the clipped letter on "Masz kupon?". The notices read fine without it. */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { content: none; display: none; }

/* The billing/shipping pair lives in .col2-set inside #customer_details, not as
   direct children of it - gridding #customer_details itself puts the additional
   fields block into the second column and drops the shipping panel out of view.
   Grid the .col2-set and unfloat its halves. */
/*
 * Billing and shipping stack in one column rather than sitting side by side.
 * Three columns across a checkout read as a wall of fields; this way the left
 * column is one continuous "who and where", and the right column is one
 * continuous "what and how much". The ship-to-different-address checkbox lands
 * directly under the billing address and WooCommerce's own JS unfolds the extra
 * fields beneath it when ticked.
 */
.woocommerce-checkout .col2-set { display: block; }
.woocommerce-checkout .col2-set .col-2 { margin-top: 26px; }

/* Core clearfixes .col2-set the same way it does form.cart. As grid items those
   pseudo-elements take real tracks: ::before claimed track 1, which pushed
   billing into track 2 and shipping down to row 2. Third place this pattern has
   bitten - assume any Woo container you turn into grid or flex is clearfixed. */
.woocommerce .col2-set::before,
.woocommerce .col2-set::after,
.woocommerce-page .col2-set::before,
.woocommerce-page .col2-set::after { content: none; display: none; }

.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 { width: auto; float: none; }

/* The "send somewhere else" toggle reads as a checkbox row, not a heading. */
.woocommerce-checkout #ship-to-different-address {
	font-family: var(--font-body); font-size: 14.5px; font-weight: 600;
	margin: 0 0 6px;
}
.woocommerce-checkout #ship-to-different-address label {
	display: flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 600;
}
.woocommerce-checkout #ship-to-different-address input[type="checkbox"] {
	width: 18px; height: 18px; accent-color: var(--burg); margin: 0;
}
.woocommerce-checkout .shipping_address { padding-top: 16px; }
.woocommerce-checkout #customer_details h3 { margin: 0 0 14px; }
.woocommerce-checkout .woocommerce-additional-fields { margin-top: 26px; }

/* ==========================================================================
   Editable order review (checkout doubles as the cart)
   ========================================================================== */

/*
 * Variable products: the swatch row is the colour control, so WooCommerce's own
 * dropdown and its reset link are hidden.
 *
 * Both are gated on `.veluro-bound`, which media.js adds only once it has
 * actually wired the swatches to the form. Hiding them unconditionally would
 * make a variable product unbuyable the moment that JS fails or a product gets
 * variations without a media manifest to draw swatches from.
 */
.woocommerce div.product form.variations_form.veluro-bound table.variations,
.woocommerce div.product form.variations_form.veluro-bound .reset_variations {
	display: none;
}
/* Core lays the single-variation block out with margins meant to sit under the
   dropdown that is no longer there. */
.woocommerce div.product form.variations_form.veluro-bound .single_variation_wrap { margin: 0; }
/* Every colourway currently costs the same, so the buy panel's price at the top
   already states it and repeating it under the swatches is just noise. **Revisit
   this if variations are ever priced separately** - at that point the top price
   becomes a range and this block is the only thing showing the selected one. */
.woocommerce div.product form.variations_form.veluro-bound .woocommerce-variation-price { display: none; }
.woocommerce div.product form.variations_form.veluro-bound .woocommerce-variation-availability { margin-bottom: 10px; }

.veluro-review { background: #fff; }
.veluro-review thead th {
	font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
	color: var(--muted); font-weight: 600;
}
.veluro-review td, .veluro-review th { vertical-align: middle; }
.veluro-review .product-total { text-align: right; white-space: nowrap; font-weight: 600; }

/*
 * Shipping row: one full-width cell, label above the options.
 *
 * The cells otherwise inherit the widths the *product* rows establish - a wide
 * first column for the thumbnail, name and stepper, opposite a narrow one sized
 * for a price. That gave the word "Przesyłka" 271px of a 420px summary and left
 * the delivery methods 147px, so every option wrapped onto two or three lines.
 * The columns cannot be tuned to suit both, because the product cell's
 * min-content sets the floor for column one.
 *
 * Escaping the table with CSS alone does not work, and the near misses are worth
 * recording: `display: flex` on the `tr` makes it shrink-to-fit inside the
 * anonymous box the table wraps it in (315px of 420px), `display: block` does
 * the same (303px), and hiding the `th` leaves a single cell that still occupies
 * only column one. All three leave the row's 1px dividers ending ~116px short of
 * every other row's - visibly ragged in a bordered box.
 *
 * So the `td` is given colspan="2" in review-order.php and the `th` is dropped
 * here, with the label reinstated from the cell's own data-title. The longest
 * option needs 235px and now has ~396px.
 */
/* The cell must stay a table-cell for colspan to mean anything - giving it
   `display: block` here is exactly what makes it shrink-to-fit again. It is
   blocked only in the stacked mobile table below, where columns no longer
   exist. */
.veluro-review tr.shipping > th { display: none; }
.veluro-review tr.shipping > td::before {
	content: attr(data-title);
	display: block; margin-bottom: 8px;
	font-size: 12px; font-weight: 700; letter-spacing: .1em;
	text-transform: uppercase; color: var(--muted);
}
.veluro-review tr.shipping #shipping_method { margin: 0; padding: 0; list-style: none; }
.veluro-review tr.shipping #shipping_method li { margin: 0 0 7px; }
.veluro-review tr.shipping #shipping_method li:last-child { margin-bottom: 0; }
.veluro-review tr.shipping #shipping_method label {
	display: inline-flex; align-items: baseline; gap: 8px; cursor: pointer;
}
.veluro-review tr.shipping #shipping_method input[type="radio"] { flex: none; accent-color: var(--burg); }

.veluro-line { display: flex; align-items: center; gap: 14px; }
.veluro-line-media { flex: none; width: 72px; }
.veluro-line-media img,
.veluro-line-media .veluro-pic {
	position: static; opacity: 1; display: block;
	width: 72px; height: 54px; object-fit: cover; border-radius: 10px;
}
.veluro-line-body { flex: 1 1 auto; min-width: 0; }
.veluro-line-name {
	display: block; font-weight: 600; font-size: 14.5px; margin-bottom: 8px;
}
.veluro-line-name a { color: var(--ink); }
.veluro-line-name a:hover { color: var(--burg); }
.veluro-line-qty-fixed { font-size: 13px; color: var(--muted); }

/* Compact version of the product page stepper. */
.veluro-line-qty {
	display: inline-flex; align-items: center;
	border: 1.5px solid var(--line); border-radius: var(--btn-radius); overflow: hidden;
}
.veluro-line-qty input {
	width: 44px; height: 34px; border: none; text-align: center;
	font-weight: 600; font-size: 14px; background: #fff;
	-moz-appearance: textfield;
}
.veluro-line-qty input::-webkit-outer-spin-button,
.veluro-line-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.veluro-line-qty .veluro-qty-btn {
	width: 32px; height: 34px; border: none; background: transparent;
	font-size: 16px; color: var(--ink); cursor: pointer; line-height: 1;
}
.veluro-line-qty .veluro-qty-btn:hover { background: var(--cream); }

.veluro-line-remove {
	flex: none; width: 30px; height: 30px; border: none; background: transparent;
	color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer;
	border-radius: 50%;
}
.veluro-line-remove:hover { background: var(--cream); color: var(--red); }

/* A line waiting on the server dims but stays readable and keeps its height,
   so the panel never jumps while totals recalculate. */
.veluro-review tr.is-busy { opacity: .5; pointer-events: none; }

/* --- coupon, always open, in the summary column -------------------------- */
.veluro-coupon {
	border-top: 1px solid var(--line);
	padding: 20px 0 4px; margin-top: 4px;
}
.veluro-coupon-lb {
	display: block; font-size: 11px; letter-spacing: .12em;
	text-transform: uppercase; color: var(--muted); font-weight: 600; margin-bottom: 9px;
}
.veluro-coupon-row { display: flex; gap: 10px; flex-wrap: wrap; }
.veluro-coupon-row .input-text {
	flex: 1 1 150px; min-width: 0;
	border: 1px solid var(--line); background: #fff;
	border-radius: var(--btn-radius); padding: 12px 14px; font-size: 14px;
}
.veluro-coupon-row .btn { flex: none; padding: 12px 20px; }
.veluro-coupon-msg { font-size: 13px; margin: 10px 0 0; color: var(--burg); }
.veluro-coupon-msg:empty { display: none; }
.veluro-coupon-msg.is-error { color: var(--red); }

.veluro-coupon-list { list-style: none; margin: 12px 0 0; padding: 0; }
.veluro-coupon-list li {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	background: var(--paper); border-radius: 10px; padding: 9px 12px;
	font-size: 13.5px; font-weight: 600; margin-bottom: 8px;
}
.veluro-coupon-list button {
	border: none; background: transparent; color: var(--muted);
	font-size: 12.5px; cursor: pointer; text-decoration: underline;
}
.veluro-coupon-list button:hover { color: var(--red); }

/*
 * Bigger, not smaller. This used to shrink the thumbnail to 56px, from when the
 * summary was a cramped right-hand column; below 900px it is now full-bleed and
 * the row has room to spare, so the photograph is the thing that should take it.
 *
 * Sized against the viewport rather than at a breakpoint because the only hard
 * constraint is the stepper, which is a fixed 117px: at 320px the line can spare
 * 93px for the image and at 390px it can spare 163px, so a single fixed value is
 * either timid on one end or crowded on the other. The clamp keeps ~13px of
 * slack at the narrowest width and stops growing at 108px, past which the photo
 * starts to out-weigh the name beside it.
 *
 * 4:3 via aspect-ratio, matching the catalogue crop, so the height follows on
 * its own. The derivatives are served at the 760px card rung, so even 108px is
 * oversampled sevenfold - there is no sharpness cost to this.
 *
 * Must stay after the base .veluro-line-media rules: identical specificity, so
 * source order is what decides. Same trap as the phone swatch sizing in main.css.
 */
@media (max-width: 900px) {
	.veluro-line { gap: 12px; }
	.veluro-line-media,
	.veluro-line-media img,
	.veluro-line-media .veluro-pic { width: clamp(76px, 25vw, 108px); }
	.veluro-line-media img,
	.veluro-line-media .veluro-pic { height: auto; aspect-ratio: 4 / 3; }
}

/* ==========================================================================
   Add-to-cart confirmation (toast)
   ========================================================================== */

/*
 * A toast rather than a dialog. Adding to a basket is routine, and a modal makes
 * the visitor dismiss something every single time - which is worse than no
 * confirmation at all once they have added a third item. This states what
 * happened, offers the one onward step, and leaves by itself.
 *
 * Top-right so it reads as coming from the basket icon, and clear of the product
 * page's fixed bottom bar.
 */
.veluro-toast {
	position: fixed; top: 96px; right: 20px; z-index: 260;
	width: min(360px, calc(100vw - 40px));
	display: flex; align-items: center; gap: 13px;
	background: #fff; border: 1px solid var(--line);
	border-radius: var(--radius); padding: 14px;
	box-shadow: 0 16px 44px rgba(35,28,26,.18);
	opacity: 0; visibility: hidden;
	transform: translateY(-10px);
	transition: opacity .22s ease, transform .22s ease, visibility .22s;
}
.veluro-toast.is-open { opacity: 1; visibility: visible; transform: none; }

.veluro-toast-media {
	flex: none; width: 62px; aspect-ratio: 4 / 3;
	border-radius: 10px; overflow: hidden; background: #ece4d7;
}
.veluro-toast-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.veluro-toast-media.is-empty { background: linear-gradient(135deg, #ece4d7, #ddd3c4); }

.veluro-toast-body { flex: 1 1 auto; min-width: 0; }
.veluro-toast-h {
	display: flex; align-items: center; gap: 7px;
	font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
	font-weight: 600; color: var(--burg); margin-bottom: 3px;
}
.veluro-toast-h .tick {
	width: 15px; height: 15px; border-radius: 50%; flex: none;
	background: var(--burg); position: relative;
}
.veluro-toast-h .tick::after {
	content: ""; position: absolute; left: 4.5px; top: 3px;
	width: 4px; height: 7px; border: solid #fff;
	border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.veluro-toast-nm {
	display: block; font-weight: 600; font-size: 14px; color: var(--ink);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.veluro-toast-cta {
	display: inline-block; margin-top: 4px;
	font-size: 12.5px; font-weight: 600; color: var(--burg);
	text-decoration: underline; text-underline-offset: 3px;
}
.veluro-toast-x {
	flex: none; align-self: flex-start;
	width: 26px; height: 26px; border: none; background: transparent;
	color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer;
	border-radius: 50%;
}
.veluro-toast-x:hover { background: var(--cream); color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
	.veluro-toast { transition: none; transform: none; }
}
@media (max-width: 600px) {
	.veluro-toast { top: auto; bottom: 84px; right: 12px; left: 12px; width: auto; }
}

/*
 * WooCommerce appends a "Zobacz koszyk" link after a loop button once its AJAX
 * finishes, which grows the card and shunts the grid. The toast already carries
 * that link, so the appended one is redundant - hide it rather than let the row
 * of cards resize under the pointer.
 */
ul.products li.product .added_to_cart { display: none; }

/* ==========================================================================
   Pagination and sale badge - reclaiming them from core
   ========================================================================== */

/*
 * main.css already describes both of these the way the design wants them, but at
 * (0,1,1) and (0,2,0) they never applied: core reaches (0,2,4) for pagination
 * cells and (0,4,2) for the badge. Same story as the loop float and the buttons -
 * mirror core's selector shape and win on load order.
 *
 * Pagination came out as floated, border-joined cells with no gaps; the badge
 * came out as WooCommerce's green circle hung half outside the card corner.
 */

.woocommerce nav.woocommerce-pagination,
.woocommerce-page nav.woocommerce-pagination {
	margin: 44px 0 8px; text-align: center;
}
.woocommerce nav.woocommerce-pagination ul,
.woocommerce-page nav.woocommerce-pagination ul {
	display: flex; justify-content: center; flex-wrap: wrap; gap: 8px;
	border: none; margin: 0; padding: 0; white-space: normal;
}
.woocommerce nav.woocommerce-pagination ul li,
.woocommerce-page nav.woocommerce-pagination ul li {
	display: block; float: none; border: none;
	margin: 0; padding: 0; overflow: visible;
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span,
.woocommerce-page nav.woocommerce-pagination ul li a,
.woocommerce-page nav.woocommerce-pagination ul li span {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 42px; height: 42px; padding: 0 12px; margin: 0;
	border: 1px solid var(--line); border-radius: var(--btn-radius);
	background: #fff; color: var(--ink);
	font-size: 14px; font-weight: 600; line-height: 1;
	transition: border-color .18s, color .18s;
}
.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li a:focus,
.woocommerce-page nav.woocommerce-pagination ul li a:hover {
	background: #fff; border-color: var(--burg); color: var(--burg);
}
.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a.current,
.woocommerce-page nav.woocommerce-pagination ul li span.current {
	background: var(--burg); color: #fff; border-color: var(--burg);
}

/* Sale badge: the design's burgundy tab tucked into the corner, not core's
   green circle. min-width/min-height and border-radius all need resetting -
   core makes it a 3.236em circle. */
.woocommerce ul.products li.product .onsale,
.woocommerce-page ul.products li.product .onsale,
.woocommerce span.onsale {
	position: absolute; top: 14px; right: 0; left: auto; bottom: auto;
	z-index: 2; margin: 0;
	background: var(--red); color: #fff;
	min-width: 0; min-height: 0;
	padding: 6px 12px; border-radius: 8px 0 0 8px;
	font-size: 11px; font-weight: 700; letter-spacing: .08em; line-height: 1.5;
	text-transform: uppercase;
}

/* ==========================================================================
   Touch reachability
   ========================================================================== */

/*
 * The gallery's zoom control is revealed on hover, which never happens on a
 * touch screen - so the high-res viewer was unreachable on phones and tablets.
 * Show it permanently where there is no hover, and give it a full 44px target.
 */
@media (hover: none) {
	.pdp-gallery .g-zoom {
		opacity: 1; transform: none;
		width: 44px; height: 44px;
		background: rgba(255,255,255,.94);
	}
}

/* The sticky bar's action already sits bottom-right, in the natural thumb arc.
   Give it a bit more room on narrow screens rather than letting the product
   name squeeze it. */
@media (max-width: 600px) {
	.pdp-bar .add { min-width: 168px; padding: 13px 18px; }
	.pdp-bar .th { display: none; }
}