/* ==========================================================================
   Veluro - main stylesheet
   Burgundy + cream palette, bold EB Garamond headings, rounded frames.
   ========================================================================== */

:root {
	--burg: #6e1f2e;
	--burg2: #84283b;
	--cream: #f7f3ec;
	--paper: #fbf9f4;
	--ink: #231c1a;
	--muted: #7c6f68;
	--gold: #b0894f;
	--line: #e7ded1;
	--red: #a51f2d;
	--dark: #241c1a;
	--radius: 18px;
	--radius-lg: 26px;
	--btn-radius: 10px;
	--wrap: 1280px;
	--font-head: 'EB Garamond', Georgia, 'Times New Roman', serif;
	--font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}

/* ---------- base ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

body {
	margin: 0;
	font-family: var(--font-body);
	color: var(--ink);
	background: var(--paper);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--burg); }

h1, h2, h3, h4, h5, h6, .ser {
	font-family: var(--font-head);
	font-weight: 700;
	line-height: 1.15;
	margin: 0 0 .5em;
	letter-spacing: .004em;
}

p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.2em; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 28px; }
.sec { padding: 64px 0; }
.center-cta { text-align: center; margin-top: 40px; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden; clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%); white-space: nowrap;
}
.skip-link:focus {
	position: fixed; top: 12px; left: 12px; z-index: 999;
	width: auto; height: auto; clip: auto; clip-path: none;
	background: var(--burg); color: #fff; padding: 12px 20px; border-radius: 8px;
}

/* ---------- buttons ---------- */
.btn {
	display: inline-flex; align-items: center; gap: 9px;
	background: var(--burg); color: #fff;
	padding: 15px 30px;
	font-size: 13px; letter-spacing: .06em; font-weight: 600;
	border-radius: var(--btn-radius);
	transition: opacity .2s, background .2s, color .2s;
}
.btn:hover { opacity: .92; color: #fff; }
.btn.o { background: transparent; border: 1.4px solid #fff; color: #fff; }
.btn.o:hover { background: rgba(255,255,255,.12); color: #fff; }
.btn.cream { background: var(--cream); color: var(--burg); }
.btn.cream:hover { color: var(--burg); }
.btn.ghost { background: transparent; border: 1.4px solid var(--burg); color: var(--burg); }
.btn.ghost:hover { background: var(--burg); color: #fff; }

/* ---------- promo marquee ---------- */
.mq {
	background: var(--burg); color: #f3e6d6;
	overflow: hidden; white-space: nowrap;
	font-size: 12.5px; letter-spacing: .05em; padding: 9px 0;
}
.mq .run { display: inline-block; animation: veluro-marquee 40s linear infinite; }
.mq span { margin: 0 22px; }
@keyframes veluro-marquee {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
	.mq .run { animation: none; }
}

/* ---------- header ---------- */
.site-header {
	background: var(--paper);
	border-bottom: 1px solid var(--line);
	position: relative;
}
.htop {
	display: flex; align-items: center; justify-content: space-between;
	padding: 18px 0; gap: 20px;
}
.hleft, .hright {
	flex: 1; display: flex; gap: 20px; align-items: center;
	font-size: 13.5px; color: var(--muted);
}
.hright { justify-content: flex-end; }
.hleft .ic, .hright .ic {
	color: var(--burg);
	display: inline-flex; align-items: center; gap: 7px;
	cursor: pointer; padding: 4px;
}
.hleft .ic:hover, .hright .ic:hover { opacity: .75; }

.veluro-logo { display: inline-block; flex: none; }
.veluro-logo img { height: 34px; width: auto; }
.footer-logo img { height: 30px; }

.veluro-cart-link { position: relative; }
.cart-count {
	background: var(--burg); color: #fff;
	font-size: 11px; font-weight: 700; line-height: 1;
	min-width: 18px; height: 18px; padding: 0 5px;
	border-radius: 20px;
	display: inline-flex; align-items: center; justify-content: center;
}

/* Needs the .hright ancestor to reach (0,2,0) and beat `.hleft .ic, .hright .ic`
   above, which sets display:inline-flex. Written as a bare class this never
   applied, so the burger sat next to the cart on desktop too - beside a nav bar
   that was already fully visible. */
.hright .veluro-menu-toggle { display: none; }

nav.main {
	display: flex; justify-content: center;
	padding: 0 0 16px;
}
.veluro-nav-list {
	display: flex; justify-content: center; flex-wrap: wrap;
	gap: 28px; margin: 0; padding: 0; list-style: none;
	font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
}
.veluro-nav-list li { position: relative; }
.veluro-nav-list a {
	color: #3a302c; padding-bottom: 4px;
	border-bottom: 2px solid transparent; display: inline-block;
}
.veluro-nav-list a:hover,
.veluro-nav-list .current-menu-item > a { border-color: var(--burg); color: var(--burg); }

/* dropdowns */
.veluro-nav-list .sub-menu {
	position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
	background: #fff; border: 1px solid var(--line); border-radius: 12px;
	padding: 10px; margin: 8px 0 0; list-style: none;
	min-width: 230px; box-shadow: 0 18px 40px rgba(35,28,26,.12);
	opacity: 0; visibility: hidden; transition: .18s; z-index: 40;
}
.veluro-nav-list li:hover > .sub-menu,
.veluro-nav-list li:focus-within > .sub-menu { opacity: 1; visibility: visible; }
.veluro-nav-list .sub-menu a {
	display: block; padding: 9px 14px; text-transform: none;
	letter-spacing: 0; font-size: 13.5px; font-weight: 500;
	border: none; border-radius: 8px;
}
.veluro-nav-list .sub-menu a:hover { background: var(--cream); }

/* header search */
.veluro-search { padding: 0 0 18px; }
.veluro-searchform { display: flex; gap: 10px; max-width: 560px; margin: 0 auto; }
.veluro-searchform input[type="search"] {
	flex: 1; border: 1px solid var(--line); background: #fff;
	border-radius: var(--btn-radius); padding: 13px 18px; font-size: 14px;
}
.veluro-searchform input[type="search"]:focus { outline: 2px solid var(--burg); outline-offset: 1px; }
.veluro-searchform button {
	background: var(--burg); color: #fff;
	border-radius: var(--btn-radius); padding: 0 18px;
	display: inline-flex; align-items: center;
}

/* ---------- hero ---------- */
.hero { padding: 26px 0 0; }
.herowrap { margin: 0 auto; padding: 0 24px; }
.herofull {
	position: relative; min-height: 680px;
	display: flex; align-items: center;
	color: #fff; overflow: hidden;
	border-radius: var(--radius-lg);
	background-size: cover; background-position: center;
	background-color: #4a3b36;
}
.herofull--noimage { background-color: var(--burg); }
.herofull .in { position: relative; max-width: 640px; padding: 0 0 0 clamp(28px, 4vw, 64px); }
.herofull .k {
	font-size: 12.5px; letter-spacing: .32em; text-transform: uppercase;
	margin-bottom: 24px; opacity: .9;
}
.herofull h1 {
	font-size: clamp(38px, 5.4vw, 80px);
	font-weight: 700; line-height: 1.02; color: #fff; margin: 0;
}
.herofull .sub {
	font-family: var(--font-head); font-style: italic;
	font-size: clamp(19px, 2vw, 25px); margin: 22px 0 34px; opacity: .95;
}
.hbtns { display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------- trust strip ---------- */
.trust { border-bottom: 1px solid var(--line); margin-top: 30px; }
.trust .wrap {
	display: flex; justify-content: space-around;
	padding: 30px 0; flex-wrap: wrap; gap: 22px;
}
.tb { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.tb .ic { color: var(--burg); display: inline-flex; }
.tb .t {
	font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted);
}

/* ---------- section heading ---------- */
.sh { text-align: center; margin-bottom: 40px; }
.sh .k {
	font-size: 12px; letter-spacing: .28em; text-transform: uppercase;
	color: var(--gold); margin-bottom: 12px;
}
.sh h2 { font-size: clamp(30px, 3.6vw, 44px); font-weight: 700; margin: 0; }
.sh .line { width: 60px; height: 2px; background: var(--burg); margin: 16px auto 0; }

/* ---------- product grid + cards ---------- */
ul.products {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 22px;
	list-style: none; margin: 0; padding: 0;
}
ul.products.columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
ul.products.columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

ul.products li.product {
	background: #fff; border: 1px solid var(--line);
	border-radius: var(--radius); overflow: hidden;
	position: relative; display: flex; flex-direction: column;
	transition: transform .22s, box-shadow .22s;
}
ul.products li.product:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 38px rgba(35,28,26,.10);
}
.product .veluro-card-media {
	display: block; position: relative;
	aspect-ratio: 4 / 3; background: #ece4d7; overflow: hidden;
}
.product .veluro-card-media img {
	width: 100%; height: 100%; object-fit: cover;
	transition: transform .5s ease;
}
ul.products li.product:hover .veluro-card-media img { transform: scale(1.04); }
.product .veluro-card-media--empty::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(135deg, #ece4d7, #ddd3c4);
}
.product .onsale {
	position: absolute; top: 14px; right: 0; z-index: 2;
	background: var(--red); color: #fff;
	font-size: 11px; font-weight: 700; letter-spacing: .08em;
	padding: 6px 12px; border-radius: 8px 0 0 8px;
	text-transform: uppercase;
}
.product .veluro-card-body { padding: 20px; display: flex; flex-direction: column; flex: 1; }
.product .veluro-card-cat {
	font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
	color: var(--gold); margin-bottom: 8px;
}
.product .woocommerce-loop-product__title {
	font-family: var(--font-head); font-size: 20px; font-weight: 700;
	line-height: 1.25; margin: 0 0 12px;
}
.product .price {
	display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap;
	color: var(--burg); font-size: 19px; font-weight: 700; margin-top: auto;
}
.product .price del { color: #b1a89c; font-size: 13px; font-weight: 400; text-decoration: line-through; }
.product .price ins { text-decoration: none; }
.product .veluro-card-ask { font-size: 13.5px; color: var(--muted); margin-top: auto; }
.product .button,
.product .added_to_cart {
	margin-top: 14px; align-self: flex-start;
	background: var(--burg); color: #fff;
	padding: 11px 20px; border-radius: var(--btn-radius);
	font-size: 12.5px; font-weight: 600; letter-spacing: .04em;
	display: inline-flex; align-items: center; gap: 8px;
}
.product .button:hover, .product .added_to_cart:hover { opacity: .9; color: #fff; }

/* ---------- brand story band (full width) ---------- */
.story { background: var(--burg); color: #f3e6d6; }
.story .grid { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.story .im {
	min-height: 560px; background-size: cover; background-position: center;
	background-color: #d8ccbc;
}
.story .im--placeholder { background: linear-gradient(135deg, #ddd3c4, #c9bcab); }
.story .tx {
	padding: 72px clamp(40px, 5vw, 90px);
	display: flex; flex-direction: column; justify-content: center;
}
.story .k {
	font-size: 12px; letter-spacing: .28em; text-transform: uppercase;
	color: #e2b98c; margin-bottom: 18px;
}
.story h2 {
	font-size: clamp(30px, 3.6vw, 46px); font-weight: 700;
	line-height: 1.14; margin-bottom: 22px; max-width: 560px; color: #f3e6d6;
}
.story p { line-height: 1.85; opacity: .9; font-size: 15px; margin-bottom: 16px; max-width: 560px; }
.story .story-cta { align-self: flex-start; margin-top: 10px; }

/* ---------- category mosaic ---------- */
.cats {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	gap: 18px; height: 580px;
}
.cat-t {
	position: relative; border-radius: var(--radius); overflow: hidden;
	display: flex; align-items: flex-end; padding: 28px; color: #fff;
	background-size: cover; background-position: center; background-color: #9c8d80;
	transition: transform .25s;
}
.cat-t:hover { transform: translateY(-3px); color: #fff; }
.cat-t:first-child { grid-row: span 2; }
.cat-t--noimage { background-color: #8d7d70; }
.cat-t h3 { font-size: clamp(22px, 2.4vw, 30px); font-weight: 700; position: relative; margin: 0; color: #fff; }
.cat-t .go {
	position: relative; display: inline-flex; align-items: center; gap: 6px;
	margin-top: 6px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
}

/* ---------- reviews ---------- */
.rv { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.rvc {
	background: #fff; border: 1px solid var(--line);
	border-radius: var(--radius); padding: 32px; text-align: center;
}
.rvc .q { font-family: var(--font-head); font-size: 44px; color: var(--gold); line-height: .6; height: 22px; }
.rvc p { font-family: var(--font-head); font-size: 18px; line-height: 1.5; font-style: italic; margin: 18px 0; }
.rvc .who { font-size: 13px; font-weight: 600; letter-spacing: .04em; }
.rvc .who span { color: var(--muted); font-weight: 400; }

/* ---------- newsletter ---------- */
.news {
	background: var(--burg); color: #f3e6d6;
	border-radius: 24px; padding: clamp(40px, 6vw, 70px); text-align: center;
}
.news h2 { font-size: clamp(28px, 3.4vw, 42px); font-weight: 700; margin-bottom: 12px; color: #f3e6d6; }
.news p { opacity: .88; margin-bottom: 28px; }
.news-form { display: flex; gap: 12px; max-width: 500px; margin: 0 auto; }
.news-form input {
	flex: 1; border: none; border-radius: var(--btn-radius);
	padding: 16px 20px; font-size: 14px;
}
.news .btn { background: var(--gold); }

/* ---------- footer ---------- */
.site-footer { background: var(--dark); color: #cabfb6; padding: 64px 0 28px; margin-top: 60px; }
.fg { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 36px; }
.fg h4 {
	font-family: var(--font-body); font-size: 12px; letter-spacing: .16em;
	text-transform: uppercase; color: #93857b; margin-bottom: 18px; font-weight: 600;
}
.fcol .footer-menu { list-style: none; margin: 0; padding: 0; }
.fcol .footer-menu a { display: block; padding: 6px 0; font-size: 14px; opacity: .85; }
.fcol .footer-menu a:hover { opacity: 1; color: #fff; }
.fabout { opacity: .8; font-size: 14px; line-height: 1.75; max-width: 290px; }
.fphone a { font-family: var(--font-head); font-size: 20px; font-weight: 700; color: #eee8dc; }
.social { display: flex; gap: 10px; margin-top: 20px; }
.social a {
	width: 40px; height: 40px; border-radius: 50%; background: #332a26;
	display: flex; align-items: center; justify-content: center; color: #cabfb6;
}
.social a:hover { background: var(--burg); color: #fff; }
.fbar {
	border-top: 1px solid #372c28; margin-top: 44px; padding-top: 22px;
	font-size: 12.5px; color: #93857b;
	display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
}

/* ---------- blog / pages ---------- */
.veluro-blog, .veluro-page, .veluro-single, .veluro-404 { padding: 54px 0 20px; }
.page-head { text-align: center; margin-bottom: 40px; }
.page-head h1 { font-size: clamp(30px, 4vw, 46px); }
.page-desc, .entry-meta { color: var(--muted); font-size: 13.5px; }
.entry-media { border-radius: var(--radius); overflow: hidden; margin-bottom: 32px; }
.entry-content { max-width: 780px; margin: 0 auto; font-size: 16.5px; line-height: 1.8; }
.entry-content h2, .entry-content h3 { margin-top: 1.6em; }
.entry-content img { border-radius: var(--radius); }
.entry-content blockquote {
	border-left: 3px solid var(--burg); margin: 1.6em 0; padding: 4px 0 4px 24px;
	font-family: var(--font-head); font-style: italic; font-size: 21px;
}
.post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.post-card {
	background: #fff; border: 1px solid var(--line);
	border-radius: var(--radius); overflow: hidden;
	display: flex; flex-direction: column;
}
.post-card__media { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #ece4d7; }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; }
.post-card__placeholder { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, #ece4d7, #ddd3c4); }
.post-card__body { padding: 22px; display: flex; flex-direction: column; flex: 1; }
.post-card__body h2 { font-size: 21px; margin: 8px 0 10px; }
.post-card__body p { font-size: 14.5px; color: var(--muted); }
.readmore {
	margin-top: auto; font-size: 13px; font-weight: 600; color: var(--burg);
	display: inline-flex; align-items: center; gap: 7px;
}
.no-results { text-align: center; padding: 40px 0 60px; }
.veluro-404 { text-align: center; max-width: 620px; }
.veluro-404 p { color: var(--muted); margin-bottom: 24px; }

.pagination, .woocommerce-pagination { margin: 48px 0 10px; display: flex; justify-content: center; }
.pagination .nav-links, .woocommerce-pagination ul {
	display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; border: none;
}
.pagination .page-numbers, .woocommerce-pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 42px; height: 42px; padding: 0 12px;
	border: 1px solid var(--line); border-radius: var(--btn-radius);
	background: #fff; font-size: 14px; font-weight: 600;
}
.woocommerce-pagination li { border: none !important; }
.pagination .page-numbers.current, .woocommerce-pagination .page-numbers.current {
	background: var(--burg); color: #fff; border-color: var(--burg);
}

/* ---------- utilities ---------- */
.hide-sm { display: inline; }
.veluro-page-intro { padding-top: 30px; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1100px) {
	ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
	.wrap { padding: 0 20px; }
	.sec { padding: 48px 0; }
	.herofull { min-height: 520px; }
	.story .grid { grid-template-columns: 1fr; }
	.story .im { min-height: 320px; }
	.story .tx { padding: 44px 28px; }
	.cats { grid-template-columns: 1fr; height: auto; }
	.cat-t { height: 220px; }
	.cat-t:first-child { grid-row: auto; }
	.rv { grid-template-columns: 1fr; }
	.fg { grid-template-columns: 1fr 1fr; gap: 28px; }
	ul.products, ul.products.columns-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.trust .wrap { justify-content: flex-start; gap: 18px 26px; }
	.tb { flex: 1 1 40%; }

	/*
	 * Logo left, every control right - not the desktop's centred wordmark.
	 * Centring is what made the row overflow: both side columns have to be as
	 * wide as the wider one, so at 375px the right-hand cluster is given ~94px
	 * when account + basket + menu need ~100px. That deficit is why the account
	 * icon was dropped here. Anchoring the logo left drops the constraint
	 * instead of the control, and leaves ~70px of slack at 375px and ~15px even
	 * at 320px, so the row is no longer one added pixel from overflowing.
	 */
	.htop { gap: 12px; }
	.hleft, .hright { gap: 12px; min-width: 0; flex: 0 0 auto; }
	.veluro-logo { order: -1; margin-right: auto; }
	.veluro-logo img { height: 28px; }

	/*
	 * Basket count sits on the icon rather than beside it: 21px narrower, and
	 * the pattern every mobile store already uses. The ring is the page colour
	 * so the bubble reads as separate from the glyph it overlaps.
	 */
	.veluro-cart-link .cart-count {
		position: absolute; top: -5px; right: -7px;
		min-width: 16px; height: 16px; padding: 0 4px;
		font-size: 10px;
		border: 2px solid var(--paper);
	}
	/* An empty basket has nothing to count, and a "0" bubble is just noise.
	   Desktop keeps it, where it reads as a counter beside the "Koszyk" label. */
	.cart-count.is-empty { display: none; }

	/* mobile navigation */
	.hright .veluro-menu-toggle { display: inline-flex; }
	.hleft .veluro-search-toggle span { display: none; }
	.hide-sm { display: none; }

	/*
	 * Slide open rather than snap. `display` cannot be transitioned, so the panel
	 * is a one-row grid animating 0fr -> 1fr: that interpolates to the menu's own
	 * height without measuring it in JS or committing to a max-height guess that
	 * breaks when the menu gains an item.
	 *
	 * visibility keeps the links out of the tab order while closed - a zero-height
	 * overflow-hidden element is still focusable.
	 */
	nav.main {
		display: grid;
		/* The base rule's `justify-content: center` survives the switch to grid,
		   where it stops the implicit auto column from stretching - so the list
		   shrink-wrapped to its widest label (134px of a 358px row) and sat
		   centred, with dividers a third of the width they should be. An fr
		   track leaves no free space for centring to act on. */
		grid-template-columns: 1fr;
		grid-template-rows: 0fr;
		opacity: 0;
		visibility: hidden;
		padding: 0;
		overflow: hidden;
		transition:
			grid-template-rows .3s ease,
			opacity .22s ease,
			padding .3s ease,
			visibility .3s;
	}
	nav.main > * { min-height: 0; overflow: hidden; }
	nav.main.is-open {
		grid-template-rows: 1fr;
		opacity: 1;
		visibility: visible;
		padding: 0 0 18px;
	}
	/*
	 * Block, not flex - and this is load-bearing.
	 *
	 * The base rule centres this list horizontally with `justify-content`, which
	 * in a column layout silently becomes *vertical* centring. While the panel's
	 * height animates, its content overflows it, so every frame re-centres that
	 * overflow: the items slid ~25px up, ~23px down and back before settling,
	 * independently of the container growing. That was the rubberbanding.
	 *
	 * Resetting justify-content alone would fix it, but nothing here needs flex
	 * (a column of stretched items with no gap is plain block flow), and block
	 * has no axis to reinterpret when the direction changes. The open is then a
	 * pure clip-reveal: the items never move at all.
	 */
	.veluro-nav-list { display: block; text-align: left; }
	.veluro-nav-list > li { border-bottom: 1px solid var(--line); }
	.veluro-nav-list a { display: block; padding: 14px 4px; border: none; }
	.veluro-nav-list .sub-menu {
		position: static; transform: none; opacity: 1; visibility: visible;
		box-shadow: none; border: none; padding: 0 0 10px 14px; min-width: 0;
	}
}

@media (max-width: 600px) {
	.post-grid { grid-template-columns: 1fr; }
	.fg { grid-template-columns: 1fr; }
	.news-form { flex-direction: column; }
	.hbtns .btn { flex: 1 1 100%; justify-content: center; }
	/* One card per row on phones. Two columns leaves each card around 180px wide,
	   which shrinks the photograph to the point where the upholstery - the thing
	   being sold - stops being readable, and squeezes the swatch row and the
	   sleeping-function badge on top of it. Full width earns that back. */
	ul.products,
	ul.products.columns-2,
	ul.products.columns-3,
	ul.products.columns-4 { grid-template-columns: 1fr; gap: 18px; }
	.product .veluro-card-body { padding: 16px 18px 18px; }
	.product .woocommerce-loop-product__title { font-size: 19px; }

	/* Primary action spans the card on phones.
	   The point is not which side it sits on - within a 335px card the whole row
	   is inside the thumb arc either way - it is that a 174px control left half
	   the card as dead space and made a small target. Full width removes the
	   reach question entirely and roughly doubles the tap area, which is the part
	   that actually affects mis-taps. Text stays left-aligned: centring names and
	   prices would slow down scanning a column of cards. */
	ul.products li.product .button,
	ul.products li.product .added_to_cart {
		display: flex; width: 100%; justify-content: center;
		padding: 14px 20px; font-size: 14px;
	}

	/* Swatch sizing lives at the end of this file, after the .veluro-cw base
	   rules - putting it here would be overridden by them at equal specificity. */
	.fbar { flex-direction: column; }
}

/* ==========================================================================
   Colourway media - shared layers, card swatches, folding demo badge
   ========================================================================== */

/* Crossfade layers. Every media stage holds one or more stacked <picture>
   elements; only the one carrying .is-on is opaque. Swapping colourway appends a
   layer, decodes it off-screen, then trades opacity - so a slot is never blank. */
.veluro-pic {
	position: absolute; inset: 0; display: block;
	opacity: 0; transition: opacity .26s ease;
}
.veluro-pic.is-on { opacity: 1; }
.veluro-pic.is-enter { opacity: 0; }

/* The frame being replaced. It stays fully opaque underneath the incoming layer
   until that has finished fading in, then it is removed. Fading it out at the
   same time would drop combined alpha to ~75% mid-transition and flash the
   backdrop through both layers. */
.veluro-pic.is-under { opacity: 1; transition: none; z-index: 0; }
.veluro-pic.is-on, .veluro-pic.is-enter { z-index: 1; }
.veluro-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (prefers-reduced-motion: reduce) {
	.veluro-pic { transition: none; }
}

/* Off-screen cache warmer. Never visible, never interactive, no layout cost. */
.veluro-warm {
	position: fixed; width: 1px; height: 1px;
	left: -9999px; top: 0; overflow: hidden;
	opacity: 0; pointer-events: none;
}

/* The card stage paints the inline LQIP until the first layer decodes. */
.product .veluro-card-media {
	background-size: cover; background-position: center;
}

/* Folding demo clip, layered over the still. The source animation is shot on the
   same white backdrop as the pack photography, so the fade reads as the sofa
   starting to move rather than as a video replacing a photo. */
.veluro-card-vid {
	position: absolute; inset: 0; z-index: 2;
	width: 100%; height: 100%; object-fit: cover;
	opacity: 0; transition: opacity .24s ease; pointer-events: none;
}
.veluro-card-vid.is-on { opacity: 1; }

/* Sleeping-function badge. Not in the approved mockup - this detail arrived with
   the photography - so it borrows the existing pill vocabulary rather than
   inventing a new one. */
.veluro-sleep {
	position: absolute; left: 14px; bottom: 14px; z-index: 3;
	display: inline-flex; align-items: center; gap: 7px;
	padding: 7px 12px; border-radius: 999px;
	background: rgba(255,255,255,.92); color: var(--ink);
	font-size: 11px; font-weight: 600; letter-spacing: .04em;
	text-transform: uppercase; line-height: 1;
	box-shadow: 0 4px 14px rgba(35,28,26,.16);
	backdrop-filter: blur(6px);
	transition: background .22s, color .22s;
}
.veluro-sleep svg { flex: none; }
ul.products li.product:hover .veluro-sleep { background: var(--burg); color: var(--cream); }
ul.products li.product.is-playing .veluro-sleep { background: var(--burg); color: var(--cream); }

/* Swatch row on the card. Fulfils the fabric dots the mockup drew decoratively,
   now driven by the delivered colourways instead of being hardcoded. */
.veluro-cw { display: flex; flex-wrap: wrap; gap: 7px; margin: 2px 0 12px; }
.veluro-cw .cw {
	width: 20px; height: 20px; padding: 0; border-radius: 50%;
	background: var(--sw, #ddd); border: 1px solid rgba(35,28,26,.18);
	cursor: pointer; position: relative;
	transition: transform .16s, box-shadow .16s;
}
.veluro-cw .cw:hover { transform: scale(1.12); }
.veluro-cw .cw.is-on {
	box-shadow: 0 0 0 2px var(--paper), 0 0 0 3.5px var(--burg);
}
.veluro-cw .cw:focus-visible {
	outline: 2px solid var(--burg); outline-offset: 3px;
}

/* Phone-sized tap targets for the card swatches.
   Must sit after the .veluro-cw base rules above: same specificity, so source
   order decides. At 20px the dots were under the 24x24 minimum target size
   (WCAG 2.2 SC 2.5.8) and awkward to hit accurately with a thumb. */
@media (max-width: 600px) {
	.veluro-cw { gap: 10px; margin: 4px 0 14px; }
	.veluro-cw .cw { width: 30px; height: 30px; }
}

/* ---------- hamburger, morphing to a cross ---------- */

/* State comes from aria-expanded on the button, which main.js already sets, so
   the visual and the accessible state cannot drift apart. */
/* 18px tall to match the 18px icons beside it, which puts the button's tap
   target at 26x26 like theirs. At 14px it came to 28x22 - under WCAG 2.2
   SC 2.5.8's 24x24 minimum, and the only control in the row that was. */
.veluro-burger {
	position: relative;
	display: inline-block;
	width: 20px; height: 18px;
}
.veluro-burger i {
	position: absolute; left: 0;
	width: 100%; height: 2px;
	background: currentColor;
	border-radius: 2px;
	transition: transform .28s ease, top .28s ease, opacity .16s ease;
}
.veluro-burger i:nth-child(1) { top: 0; }
.veluro-burger i:nth-child(2) { top: 8px; }
.veluro-burger i:nth-child(3) { top: 16px; }

/* Bars converge on the middle, then rotate - so it reads as folding shut rather
   than one icon being swapped for another. */
.veluro-menu-toggle[aria-expanded="true"] .veluro-burger i:nth-child(1) {
	top: 8px; transform: rotate(45deg);
}
.veluro-menu-toggle[aria-expanded="true"] .veluro-burger i:nth-child(2) {
	opacity: 0; transform: scaleX(.4);
}
.veluro-menu-toggle[aria-expanded="true"] .veluro-burger i:nth-child(3) {
	top: 8px; transform: rotate(-45deg);
}

@media (prefers-reduced-motion: reduce) {
	.veluro-burger i { transition: none; }
	nav.main { transition: none; }
}

/* Narrow phones, 360px Galaxy-class and down. Four controls plus the wordmark
   still fit with ~12px to spare at 320px on these numbers.

   The icons' 4px padding is deliberately *not* trimmed here any more. It was,
   back when the row was overflowing, but that took the tap targets to 22px -
   under WCAG 2.2 SC 2.5.8's 24x24 minimum. Buying width from the wordmark is
   the cheaper trade. */
@media (max-width: 420px) {
	.wrap { padding: 0 16px; }
	.htop { gap: 10px; }
	.hleft, .hright { gap: 10px; }
	.veluro-logo img { height: 25px; }
}