/* ==========================================================================
   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: 'Plus Jakarta Sans', -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; }
/* Bridge the visual gap so pointer users can reach the collection links. */
@media (min-width: 901px) {
	.veluro-nav-list .sub-menu::before {
		content: ""; position: absolute; top: -9px; left: 0; right: 0; height: 9px;
	}
}
.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); }

/* One live category tree, grouped in a scrollable panel (no nested flyouts). */
.veluro-live-categories > .sub-menu {
	width: 330px; max-width: calc(100vw - 32px);
	max-height: min(70vh, 620px); overflow-y: auto; overscroll-behavior-y: contain;
	margin-top: 0;
}
.veluro-live-categories .veluro-category-depth-0 > a { font-weight: 600; }
.veluro-live-categories .veluro-category-depth-1 > a { padding-left: 28px; }
.veluro-live-categories .veluro-category-depth-2 > a { padding-left: 40px; }
.veluro-live-categories .veluro-category-depth-3 > a { padding-left: 52px; }
@media (max-width: 900px) {
	.veluro-live-categories > .sub-menu {
		width: auto; max-width: none; max-height: none; overflow: visible;
	}
}

/* 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 ---------- */
.herofull[hidden], .hero-controls[hidden] { display: none; }
.hero-controls { display: flex; justify-content: center; gap: 12px; padding: 16px 0 0; }
.hero-controls button { border: 1px solid var(--line); border-radius: 30px; padding: 12px 20px; font-size: 12px; color: var(--burg); }
.hero-controls button[aria-pressed="true"] { background: var(--burg); color: var(--cream); border-color: var(--burg); }
.hero-controls button:focus-visible { outline: 2px solid var(--burg); outline-offset: 3px; }
.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, .herofull .hero-title {
	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; }
/* Both desktop banner variants share a wide, centered composition. */
@media (min-width: 901px) {
	.hero .herofull .wrap { width: 100%; max-width: none; }
	.hero .herofull .in { max-width: none; padding: 0; text-align: center; }
	.hero .herofull .hbtns { justify-content: center; }
}

/* ---------- 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 transparent;
	border-radius: var(--radius);
	position: relative; display: flex; flex-direction: column;
	isolation: isolate;
	/* Keep the card geometry fixed; its photo crossfade is the hover feedback. */
}
/* A shadow outline avoids Chromium's dark joins on thin curved borders.
   Keep the transparent border for layout and draw the ring above the photos. */
ul.products li.product::after {
	content: ''; position: absolute; inset: -1px; z-index: 4;
	border-radius: inherit; box-shadow: inset 0 0 0 1px var(--line);
	pointer-events: none;
}
.product .veluro-card-media {
	display: block; position: relative;
	aspect-ratio: 4 / 3; background: #ece4d7; overflow: hidden;
	/* The media owns the clip so crossfade images stay inside
	   the card's inner curve without clipping the outline a second time. */
	border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
}
.product .veluro-card-media img {
	width: 100%; height: 100%; object-fit: cover;
}
.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; }
.cats.cats--launch { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 1fr; height: 440px; }
.cats--launch .cat-t:first-child { grid-row: auto; }
@media (max-width: 600px) {
	.cats.cats--launch { grid-template-columns: 1fr; height: auto; }
	.cats--launch .cat-t { height: 300px; }
}
.cat-t--noimage { background-color: #8d7d70; }
/* Grow only with populated categories that have real arrangement photography. */
.cats.cats--showcase {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-template-rows: none; grid-auto-rows: 320px; height: auto;
}
.cats--showcase .cat-t { height: auto; isolation: isolate; }
.cats--showcase .cat-t:first-child { grid-row: auto; }
.cats--showcase .cat-t__photo { position: absolute; inset: 0; z-index: -2; opacity: 1; }
.cats--showcase .cat-t__photo img { width: 100%; height: 100%; object-fit: cover; }
.cats--showcase [data-cover-product="florio-fotel"] img { object-position: right center; }
.cats--showcase .cat-t::before {
	content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background: linear-gradient(180deg, rgba(0,0,0,.02) 35%, rgba(50,20,25,.78));
}
@media (max-width: 1000px) {
	.cats.cats--showcase { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
	.cats.cats--showcase { grid-template-columns: 1fr; grid-auto-rows: 300px; }
}
.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;
		/* Leave room for the header row and panel padding on short screens. */
		max-height: calc(100vh - 90px);
		max-height: calc(100dvh - 90px);
	}
	nav.main.is-open > * { overflow-y: auto; overscroll-behavior-y: contain; }
	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; }

/* A gentler reveal on product cards, in both hover directions. */
.veluro-card-media > .veluro-pic { transition: opacity .4s ease-in-out; }

/* 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,
	.veluro-card-media > .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;
}

/* 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. Informational only: the tile's hover reveals the room
   scene (client decision, September 2026), and the film plays on the product
   page. */
.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.is-hover .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; }
}

/* ==========================================================================
   Contact page (page-templates/kontakt.php)
   ========================================================================== */

/* ---- hero: headline left, burgundy quick-contact card right ---- */
.contact-hero { background: var(--cream); border-bottom: 1px solid var(--line); }
.contact-hero__in {
	display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr);
	gap: clamp(28px, 5vw, 72px); align-items: center;
	padding-top: clamp(44px, 6vw, 80px); padding-bottom: clamp(44px, 6vw, 80px);
}
.contact-hero .k, .contact-quick .k, .contact-card .k {
	font-size: 12px; letter-spacing: .28em; text-transform: uppercase; color: var(--gold);
}
.contact-hero .k { margin-bottom: 14px; }
.contact-hero h1 { font-size: clamp(36px, 4.6vw, 60px); margin-bottom: 18px; max-width: 13ch; }
.contact-lead { font-size: 17px; line-height: 1.75; color: var(--muted); max-width: 520px; }
.contact-lead p:last-child { margin-bottom: 0; }
.contact-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.contact-quick {
	background: var(--burg); color: #f3e6d6;
	border-radius: var(--radius-lg); padding: clamp(28px, 3.4vw, 40px);
	box-shadow: 0 24px 60px rgba(110, 31, 46, .22);
}
.contact-quick .k { color: rgba(243, 230, 214, .7); margin-bottom: 18px; }
.contact-quick .phone {
	display: block; font-family: var(--font-head); font-weight: 700;
	font-size: clamp(28px, 3vw, 38px); line-height: 1.1; color: #fff;
}
.contact-quick .phone:hover { color: var(--gold); }
.contact-quick .hours { margin: 18px 0 0; white-space: pre-line; line-height: 1.7; opacity: .88; font-size: 14.5px; }

/* ---- form beside the contact cards ---- */
/* Seller identity stays visible above the form, including on small screens. */
.contact-company {
	display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr);
	gap: 32px; align-items: start; padding-block: 30px;
	border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.contact-company > div { min-width: 0; }
.contact-company .k { font-size: 10px; letter-spacing: .16em; color: var(--burg); margin: 0 0 12px; }
.contact-company h2 { font-family: var(--font-body); font-size: 17px; font-weight: 600; line-height: 1.65; margin: 0; }
.contact-company address { font-style: normal; font-size: 15px; line-height: 1.8; white-space: pre-line; }
.contact-company__nip { margin: 10px 0 0; font-size: 14px; line-height: 1.7; }
.contact-company__nip span { font-weight: 600; }
.contact-company__links a { display: flex; align-items: center; gap: 10px; font-size: 14px; line-height: 1.7; padding: 4px 0; }
.contact-company__links svg { flex: none; color: var(--burg); }
.contact-company__links span { min-width: 0; overflow-wrap: anywhere; }
.contact-company__links a:hover { color: var(--burg); }
.contact-company__links a:focus-visible { outline: 2px solid var(--burg); outline-offset: 4px; }
@media (max-width: 900px) {
	.contact-company { grid-template-columns: 1fr 1fr; gap: 24px; }
	.contact-company__identity { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
	.contact-company { grid-template-columns: 1fr; padding-block: 26px; gap: 24px; }
	.contact-company h2 { font-size: 16px; }
	.contact-company__links a { min-height: 40px; }
}

.contact-grid {
	display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
	gap: clamp(28px, 4vw, 56px); align-items: start;
}
.contact-form-wrap {
	background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
	padding: clamp(26px, 3.6vw, 48px); scroll-margin-top: 90px;
}
.contact-form-wrap h2 { font-size: clamp(26px, 3vw, 36px); margin-bottom: 8px; }
.contact-form-intro { color: var(--muted); margin-bottom: 26px; line-height: 1.7; }

.cf-alert {
	display: flex; gap: 12px; align-items: flex-start;
	border-radius: var(--btn-radius); padding: 14px 18px; margin-bottom: 22px;
	font-size: 14.5px; line-height: 1.5;
}
.cf-alert svg { flex: none; margin-top: 2px; }
.cf-alert--ok { background: #eef5ec; color: #2f5d3a; border: 1px solid #cfe3cf; }
.cf-alert--err { background: #fbeeee; color: var(--red); border: 1px solid #f0cfd0; }
.cf-product {
	display: flex; align-items: center; gap: 10px;
	background: var(--cream); border-radius: var(--btn-radius);
	padding: 12px 16px; margin: 0 0 20px; font-size: 14px;
}
.cf-product svg { color: var(--burg); flex: none; }
.cf-product a { color: var(--burg); }

.cf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.cf-field { margin: 0; display: flex; flex-direction: column; gap: 7px; }
.cf-field--full { grid-column: 1 / -1; }
.cf-field label {
	font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
}
.cf-field .req { color: var(--burg); }
.cf-field .opt { color: var(--muted); font-weight: 400; text-transform: none; letter-spacing: 0; }
.cf-field input, .cf-field select, .cf-field textarea {
	width: 100%; border: 1px solid var(--line); border-radius: var(--btn-radius);
	background: var(--paper); padding: 14px 16px; font-size: 15px;
	transition: border-color .2s, box-shadow .2s, background .2s;
}
.cf-field textarea { min-height: 160px; resize: vertical; line-height: 1.6; }
.cf-field input::placeholder, .cf-field textarea::placeholder { color: #a99c94; }
.cf-field input:focus, .cf-field select:focus, .cf-field textarea:focus {
	outline: none; border-color: var(--burg); background: #fff;
	box-shadow: 0 0 0 3px rgba(110, 31, 46, .12);
}
.cf-field select {
	appearance: none; -webkit-appearance: none; padding-right: 42px; cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e1f2e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 14px center;
}
.cf-field.is-error input, .cf-field.is-error select, .cf-field.is-error textarea { border-color: var(--red); }
.cf-err { display: block; font-size: 12.5px; color: var(--red); margin-top: 4px; }

.cf-consent {
	grid-column: 1 / -1; display: flex; gap: 12px; align-items: flex-start;
	font-size: 13.5px; line-height: 1.55; color: var(--muted);
}
.cf-consent input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--burg); flex: none; }
.cf-consent a { color: var(--burg); text-decoration: underline; text-underline-offset: 2px; }
.cf-consent.is-error label { color: var(--red); }

.cf-actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 6px; }
.cf-actions .btn { padding: 16px 32px; }
.cf-actions .hint { font-size: 13px; color: var(--muted); }

/* Honeypot: off-canvas, not display:none, so a bot's autofill still lands in it. */
.cf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; margin: 0; }

.contact-side { display: grid; gap: 14px; }
.contact-card {
	display: flex; gap: 16px; align-items: flex-start;
	background: var(--cream); border-radius: var(--radius); padding: 22px 24px;
}
.contact-card .ic {
	flex: none; width: 44px; height: 44px; border-radius: 50%;
	background: #fff; color: var(--burg);
	display: inline-flex; align-items: center; justify-content: center;
	box-shadow: 0 6px 16px rgba(35, 28, 26, .08);
}
.contact-card .k { font-size: 11px; letter-spacing: .2em; margin-bottom: 6px; }
.contact-card .v { font-family: var(--font-head); font-size: 21px; font-weight: 700; line-height: 1.3; white-space: pre-line; }
.contact-card .v a:hover { color: var(--burg); }
.contact-card .s { font-size: 13.5px; color: var(--muted); margin-top: 6px; line-height: 1.55; }
/* The phone card carries the hotline hours: a label line, then the hours as typed. */
.contact-card__hours { margin-top: 10px; }
.contact-card__hours .lbl {
	display: block; font-size: 11px; font-weight: 600; letter-spacing: .12em;
	text-transform: uppercase; color: var(--ink); margin-bottom: 3px;
}
.contact-card__hours .hrs { display: block; white-space: pre-line; color: var(--ink); font-size: 14px; }

.contact-social {
	display: flex; align-items: center; justify-content: space-between; gap: 14px;
	padding: 20px 24px; border: 1px solid var(--line); border-radius: var(--radius);
	font-size: 14px; font-weight: 600;
}
.contact-social .social { display: flex; gap: 10px; margin: 0; }
.contact-social .social a {
	width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line);
	display: inline-flex; align-items: center; justify-content: center;
	color: var(--ink); background: #fff; transition: background .2s, color .2s, border-color .2s;
}
.contact-social .social a:hover { background: var(--burg); border-color: var(--burg); color: #fff; }

/* ---- FAQ ---- */
.contact-faq { padding-top: 0; }
.faq { max-width: 820px; margin: 0 auto; border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
	list-style: none; cursor: pointer;
	display: flex; justify-content: space-between; align-items: center; gap: 20px;
	padding: 22px 4px; font-family: var(--font-head); font-size: 20px; font-weight: 700;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--burg); }
.faq-item summary svg { flex: none; color: var(--burg); transition: transform .25s; }
.faq-item[open] summary svg { transform: rotate(90deg); }
.faq-a { padding: 0 4px 22px; color: var(--muted); line-height: 1.75; max-width: 680px; }
.faq-a p { margin: 0; }
.faq-a a { color: var(--burg); text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 900px) {
	.contact-hero__in, .contact-grid, .cf-grid { grid-template-columns: 1fr; }
	.contact-hero h1 { max-width: none; }
	.contact-form-wrap { padding: 24px 20px; }
	.faq-item summary { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
	.faq-item summary svg { transition: none; }
}

/* ==========================================================================
   Desktop header: logo left, menu inline beside it, actions right
   ==========================================================================
   Chosen by the client from four propositions (September 2026). Below 900px the
   mobile header takes over untouched. `display: contents` promotes .htop's
   children into .wrap's flex row, so the logo, the menu and the actions become
   siblings on one line without restructuring header.php. These rules sit at the
   end of the file on purpose: they override the base header rules on source
   order alone, so nothing here needs a body class or extra specificity. */

@media (min-width: 901px) {
	.site-header .wrap {
		display: flex; align-items: center; flex-wrap: wrap;
		gap: 0 22px; padding-top: 14px; padding-bottom: 14px;
	}
	.htop { display: contents; }
	.veluro-logo { order: 1; }
	nav.main {
		order: 2; flex: 1 1 auto; min-width: 0; padding: 0; justify-content: flex-start;
	}
	.veluro-nav-list {
		justify-content: flex-start; flex-wrap: nowrap; gap: 20px; font-size: 12.5px;
	}
	/* One row has to hold logo, seven menu items, search and the account cluster.
	   The two text labels are what tip it over - dropping them keeps everything on
	   the line instead of wrapping the actions underneath. */
	.hide-sm { display: none; }
	.hleft .veluro-search-toggle span { display: none; }
	.hleft { order: 3; flex: 0 0 auto; }
	.hright { order: 4; flex: 0 0 auto; }
	/* The search panel is a sibling too, so it has to be told to take its own
	   line rather than squeeze into the row. */
	.veluro-search { order: 5; flex: 1 0 100%; padding-top: 14px; }
	/* The nav link carries `padding-bottom: 4px` plus a 2px bottom border for the
	   hover underline, and nothing on top - so its *box* centres against the logo
	   while its *glyphs* sit 3px high. Matching the 6px on top makes the box
	   symmetric around the text without moving the underline. */
	.veluro-nav-list a { padding-top: 6px; }
}

/* Between 901px and 1100px the row cannot hold the logo, seven menu items and
   both action clusters - at 985px the basket wrapped under the logo. Keep the
   logo and the actions on row one and give the menu its own row beneath, still
   left-aligned, which is the same arrangement one row shorter. */
@media (min-width: 901px) and (max-width: 1100px) {
	nav.main { order: 5; flex: 1 0 100%; padding-top: 10px; }
	.hleft { margin-left: auto; }
	.veluro-search { order: 6; }
}