/* Reserve scrollbar gutter so viewport width never changes when the scrollbar appears;
   prevents `vw`-based clamp() values from recomputing and shifting layout by ~1px. */
html {
	scrollbar-gutter: stable;
}

:root {
	--dreffiti-ink: #1f1a17;
	--dreffiti-muted: #4d433d;
	--dreffiti-line: rgba(31, 26, 23, 0.12);
	--dreffiti-wash: #f7f1ea;
	/* Deepened from #ca6f47 (2026-10-09): white button text on the old tone was
	   3.6:1; this one is 5.2:1 on white text and 4.7:1 as text on the cream page. */
	--dreffiti-accent: #ad532c;
	--dreffiti-accent-dark: #8b4729;
	--dreffiti-card: #fffdf9;
}

/* XStore hides every Elementor widget (opacity:0/visibility:hidden) until its own JS
   marks it `.etheme-elementor-widget-loaded` — on a cold/slow load (header included)
   this reads as content never appearing until a refresh happens to warm the JS cache.
   Same root cause + fix already proven on tiador.hu: force the visible state via the
   theme's own CSS-var escape hatch instead of waiting on JS. */
body {
	--etheme-element-loading-opacity: 1;
	--etheme-element-loading-visibility: visible;
	--etheme-element-loader-display: none;
}

/* Sticky footer – .dreffiti-site-footer is outside .template-container (wp_footer hook),
   so flex goes on body with .template-container as the growing child.
   body.admin-bar: WordPress adds html { margin-top: 32px } for the admin toolbar,
   which would create a 32px scrollbar — subtract it from min-height. */
body {
	display: flex;
	flex-direction: column;
	min-height: 100dvh;
}

body.admin-bar {
	min-height: calc(100dvh - 32px);
}

@media screen and (max-width: 782px) {
	body.admin-bar {
		min-height: calc(100dvh - 46px);
	}
}

.template-container {
	flex: 1 0 auto;
}

/* XStore's fixed mobile bottom panel (.et-mobile-panel-wrapper, ~68px tall) has no
   built-in body padding to compensate, so it permanently covers the bottom of the
   page content (e.g. the price/description on product pages, the last row of
   category cards). Reserve space for it up to the width where the theme itself
   switches the panel off (block below ~960px, display:none above). */
@media screen and (max-width: 999px) {
	/* Only where the bar is actually printed (XStore leaves it off cart and checkout). */
	body:has(.et-mobile-panel-wrapper) {
		padding-bottom: 68px;
	}
}

.woocommerce a.button:focus-visible,
.woocommerce button.button:focus-visible,
.woocommerce input.button:focus-visible,
.woocommerce .button:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 2px solid #111111;
	outline-offset: 3px;
}

.elementor-widget-theme-post-content p:last-child,
.entry-content p:last-child {
	margin-bottom: 0;
}

/* Single product: the header lives inside .template-container, so spacing must
   start on the product template, not on the page wrapper. */
.single-product .template-container,
.single-product .content-page {
	padding-top: 0 !important;
}

.single-product .elementor-location-single {
	margin-top: calc(clamp(92px, 9vw, 128px) * -1);
	padding-top: clamp(92px, 9vw, 128px);
}

.single-product .elementor-location-single > .elementor-section:first-child {
	padding-top: clamp(92px, 9vw, 128px) !important;
}

/* Product gallery spacing and frame */
.single-product .woocommerce-product-gallery {
	margin-top: 1rem;
}

.single-product .woocommerce-product-gallery__wrapper,
.single-product .woocommerce-product-gallery__image {
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 8px 30px rgba(31, 26, 23, 0.08);
}

/* Ensure product content is visible over header */
.single-product .summary.entry-summary {
	position: relative;
	z-index: 2;
	background: rgba(255, 253, 250, 0.95);
	border-radius: 12px;
	padding: 1.5rem;
	margin-top: 1rem;
}

/* Product title and price contrast */
.single-product .product_title {
	color: var(--dreffiti-ink);
	font-size: clamp(1.8rem, 3.5vw, 2.8rem);
	line-height: 1.1;
	margin-bottom: 0.5rem;
}

.single-product .price {
	color: var(--dreffiti-accent-dark);
	font-size: 1.3rem;
	font-weight: 600;
}

.single-product form.cart {
	display: grid;
	gap: 0.9rem;
}

.single-product form.cart .single_add_to_cart_button {
	min-height: 52px;
	border-radius: 999px;
	font-weight: 700;
	letter-spacing: 0;
}

.dreffiti-product-notes {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem;
	margin-top: 1rem;
}

.dreffiti-product-note {
	display: grid;
	gap: 0.22rem;
	padding: 0.85rem 0.95rem;
	border: 1px solid rgba(31, 26, 23, 0.1);
	border-radius: 12px;
	background: rgba(255, 253, 250, 0.72);
}

.dreffiti-product-note strong {
	color: var(--dreffiti-ink);
	font-size: 0.92rem;
	line-height: 1.25;
}

.dreffiti-product-note span {
	color: #4d433d;
	font-size: 0.84rem;
	line-height: 1.45;
}

body.home {
	background-color: #f9f3ec;
}

.post-type-archive-product .content-page,
.tax-product_cat .content-page {
	background: #f9f3ec;
}

.woocommerce .etheme-product-grid .category-grid,
.woocommerce ul.products li.product {
	border-radius: 16px;
	overflow: hidden;
	background: #fffdf9;
	box-shadow: 0 10px 28px rgba(31, 26, 23, 0.07);
	transition: transform 0.24s ease, box-shadow 0.24s ease;
}

.woocommerce .etheme-product-grid .category-grid:hover,
.woocommerce ul.products li.product:hover {
	transform: translateY(-3px);
	box-shadow: 0 16px 34px rgba(31, 26, 23, 0.11);
}

.woocommerce .etheme-product-grid .category-grid img[src*="woocommerce-placeholder"],
.woocommerce ul.products li.product img[src*="woocommerce-placeholder"] {
	background:
		linear-gradient(135deg, rgba(202, 111, 71, 0.13), rgba(31, 26, 23, 0.05)),
		#f7f1ea;
	padding: 18%;
	object-fit: contain;
}

/* The stock XStore "content-under" + "valign-center" combination on this widget
   fight each other for .categories-mask's position (see project memory) and the
   loser still leaves a plain solid-white bar sitting on the image's top edge —
   disconnected from the photo below it rather than reading as one tile. Own the
   positioning outright: turn image + label into a single integrated card with
   the title sitting in a soft gradient scrim at the bottom of the photo. */
.woocommerce .category-grid > a {
	display: block;
	width: 100%;
}

.woocommerce .category-grid img {
	display: block;
	width: 100%;
	height: auto;
}

.woocommerce .category-grid .categories-mask {
	position: absolute !important;
	top: auto !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	transform: none !important;
	width: auto !important;
	padding: 2.25rem 1.1rem 1rem;
	background: linear-gradient(to top, rgba(31, 26, 23, 0.88) 0%, rgba(31, 26, 23, 0.5) 60%, rgba(31, 26, 23, 0) 100%);
	color: #fffdf9;
	text-align: left;
	text-transform: none;
	letter-spacing: 0;
}

.woocommerce .category-grid .cat-name {
	color: #fffdf9;
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.25;
}

.woocommerce .category-grid mark.count {
	display: inline-flex;
	margin-top: 0.3rem;
	padding: 0.25rem 0.6rem;
	border-radius: 999px;
	background: rgba(255, 253, 249, 0.2);
	color: #fffdf9;
	font-size: 0.78rem;
	font-weight: 700;
}

.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	font-weight: 600;
}

.woocommerce ul.products li.product .button,
.woocommerce-page ul.products li.product .button {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Single product summary column: tighten the oversized default gap between
   "Kosárba teszem" and "Vásárlás most" (theme default is ~15px margin around
   the "VAGY" divider on top of the buttons' own spacing, ~70px total), and
   give the compare/wishlist buttons breathing room — they sat flush (0px
   margin) against the info boxes above and the SKU/categories line below. */
.single-product .elementor-element-548c1e11 .cart {
	row-gap: 6px;
}

.single-product .et-or-wrapper {
	margin: 2px 0 !important;
}

.single-product .single_add_to_cart_button:not(.et-single-buy-now) {
	margin-bottom: 0 !important;
}

.single-product .elementor-element-3a222cc2.elementor-widget,
.single-product .elementor-element-6cc59891.elementor-widget {
	margin-top: 20px !important;
}

.single-product .elementor-element-39a54ce7.elementor-widget {
	margin-top: 20px !important;
}

@media (max-width: 767px) {
	.woocommerce ul.products {
		row-gap: 1.25rem;
	}

	.dreffiti-product-notes {
		grid-template-columns: 1fr;
	}

	.single-product form.cart .single_add_to_cart_button {
		width: 100%;
	}
}

.dreffiti-home {
	background:
		radial-gradient(ellipse 80% 60% at 0% 0%, rgba(202, 111, 71, 0.18), transparent 50%),
		radial-gradient(ellipse 60% 40% at 100% 20%, rgba(202, 111, 71, 0.07), transparent 50%),
		#f9f3ec;
	color: var(--dreffiti-ink);
	padding: clamp(5rem, 7vw, 6rem) 0 5rem;
}

.dreffiti-home a {
	color: inherit;
}

.dreffiti-home__hero,
.dreffiti-home__section {
	width: min(1180px, calc(100% - 32px));
	margin: 0 auto;
}

/* ── Hero: copy on the left, one large painted portrait on the right ── */
.dreffiti-home__hero {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	padding: 1rem 0 0;
	align-items: center;
}

.dreffiti-home__hero-copy {
	min-width: 0;
}

.dreffiti-home h1,
.dreffiti-home h2 {
	margin: 0;
	color: var(--dreffiti-ink);
	line-height: 1.04;
	letter-spacing: -0.025em;
	text-transform: none;
	text-wrap: balance;
}

.dreffiti-site-footer h2 {
	text-transform: none;
}

.dreffiti-home h1 {
	font-size: clamp(2.3rem, 4.4vw, 4.1rem);
	max-width: 15ch;
}

.dreffiti-home h2 {
	font-size: clamp(1.7rem, 2.6vw, 2.4rem);
}

.dreffiti-home__lead {
	max-width: 50ch;
	margin: 1.4rem 0 0;
	color: #3f3630;
	font-size: 1.1rem;
	font-weight: 500;
	line-height: 1.65;
}

/* The hero is deliberately short (its height follows the viewport) so the first
   row of products is already visible without scrolling on a laptop screen. The
   figure is a grid so the image keeps its 4:5 ratio from the height instead of
   stretching to the column width. */
.dreffiti-home__hero-figure {
	display: grid;
	justify-content: end;
	margin: 0;
}

.dreffiti-home__hero-art {
	display: block;
	overflow: hidden;
	height: clamp(300px, 46vh, 440px);
	aspect-ratio: 4 / 5;
	border-radius: 24px;
	background: rgba(202, 111, 71, 0.12);
	box-shadow: 0 24px 60px rgba(31, 26, 23, 0.14);
}

.dreffiti-home__hero-art img,
.dreffiti-home__product-media img,
.dreffiti-home__order-media img,
.dreffiti-home__about-photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dreffiti-home__hero-caption {
	width: 0;
	min-width: 100%;
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 0.85rem;
	color: var(--dreffiti-muted);
	font-size: 0.95rem;
}

.dreffiti-home__hero-caption a {
	color: var(--dreffiti-ink);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: rgba(31, 26, 23, 0.3);
	text-underline-offset: 3px;
}

.dreffiti-home__hero-caption span {
	flex: none;
	color: var(--dreffiti-accent-dark);
	font-weight: 700;
}

.elementor-widget-text-editor {
	color: #453b35;
}

.elementor-widget-text-editor p,
.elementor-image-box-description {
	color: #453b35;
}

.elementor-section:first-of-type .elementor-widget-text-editor {
	color: #3f3630;
	font-weight: 500;
}

/* ── Buttons ── */
.dreffiti-home__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.85rem;
	margin-top: 2rem;
}

.dreffiti-home__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 50px;
	padding: 0.9rem 1.5rem;
	border-radius: 999px;
	font-weight: 600;
	font-size: 0.97rem;
	text-decoration: none;
	border: 1px solid transparent;
	transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
}

.dreffiti-home__button:hover {
	text-decoration: none;
}

.dreffiti-home__button--primary {
	background: var(--dreffiti-accent);
	color: #fff !important;
	box-shadow: 0 8px 24px rgba(202, 111, 71, 0.35);
}

.dreffiti-home__button--primary:visited {
	color: #fff !important;
}

.dreffiti-home__button--primary:hover,
.dreffiti-home__button--primary:focus-visible,
.dreffiti-home__button--primary:active {
	color: #fff !important;
	background: var(--dreffiti-accent-dark);
	border-color: var(--dreffiti-accent-dark);
	box-shadow: 0 8px 22px rgba(139, 71, 41, 0.32);
}

.dreffiti-home__button--secondary {
	background: #fffdfa;
	color: var(--dreffiti-ink);
	border-color: rgba(31, 26, 23, 0.2);
	box-shadow: 0 6px 18px rgba(31, 26, 23, 0.08);
}

.dreffiti-home__button--secondary:visited {
	color: var(--dreffiti-ink) !important;
}

.dreffiti-home__button--secondary:hover,
.dreffiti-home__button--secondary:focus-visible,
.dreffiti-home__button--secondary:active {
	color: var(--dreffiti-ink) !important;
	background: #f7f1ea;
	border-color: rgba(31, 26, 23, 0.35);
	box-shadow: 0 6px 18px rgba(31, 26, 23, 0.12);
}

/* ── Sections ── */
.dreffiti-home__section {
	padding-top: clamp(3.5rem, 7vw, 6rem);
}

.dreffiti-home__section-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.75rem;
}

.dreffiti-home__section--products {
	padding-top: clamp(2.25rem, 4vw, 3.25rem);
}

.dreffiti-home__more,
.dreffiti-home__about-links a {
	color: var(--dreffiti-accent-dark);
	font-weight: 700;
	text-decoration: underline;
	text-decoration-color: rgba(139, 71, 41, 0.35);
	text-underline-offset: 4px;
}

.dreffiti-home__more {
	flex: none;
}

.dreffiti-home__more:hover,
.dreffiti-home__about-links a:hover {
	color: var(--dreffiti-ink);
}

/* ── Products ── */
.dreffiti-home__product-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2rem 1.5rem;
}

.dreffiti-home__product {
	display: block;
	text-decoration: none;
}

.dreffiti-home__product-media {
	display: block;
	overflow: hidden;
	aspect-ratio: 1;
	border-radius: 20px;
	background: var(--dreffiti-card);
	box-shadow: 0 10px 28px rgba(31, 26, 23, 0.07);
}

.dreffiti-home__product-media img {
	transition: transform 0.4s ease;
}

.dreffiti-home__product:hover .dreffiti-home__product-media img {
	transform: scale(1.03);
}

.dreffiti-home__product-body {
	display: grid;
	gap: 0.2rem;
	padding: 1rem 0.25rem 0;
}

.dreffiti-home__product-body strong {
	font-family: "futurab", sans-serif;
	font-size: 1.2rem;
	font-weight: 400;
	line-height: 1.25;
	color: var(--dreffiti-ink);
}

.dreffiti-home__product-price {
	color: var(--dreffiti-ink);
	font-size: 1.02rem;
	font-weight: 700;
}

.dreffiti-home__categories {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin: 2.25rem 0 0;
	color: var(--dreffiti-muted);
}

.dreffiti-home__categories a {
	padding: 0.4rem 0.9rem;
	border-radius: 999px;
	background: rgba(202, 111, 71, 0.1);
	color: var(--dreffiti-accent-dark);
	font-size: 0.95rem;
	font-weight: 600;
	text-decoration: none;
	transition: background 0.15s ease;
}

.dreffiti-home__categories a:hover {
	background: rgba(202, 111, 71, 0.18);
}

/* ── Made-to-order portrait: how it works ── */
.dreffiti-home__order {
	display: grid;
	grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
	gap: clamp(1.75rem, 4vw, 3.5rem);
	align-items: center;
	padding: clamp(1.25rem, 3vw, 2.5rem);
	border-radius: 28px;
	background: var(--dreffiti-card);
	box-shadow: 0 14px 40px rgba(31, 26, 23, 0.06);
}

.dreffiti-home__order--no-image {
	grid-template-columns: 1fr;
}

.dreffiti-home__order-media {
	overflow: hidden;
	aspect-ratio: 4 / 3;
	border-radius: 20px;
}

.dreffiti-home__steps {
	display: grid;
	gap: 1.1rem;
	margin: 1.6rem 0 0;
	padding: 0;
	list-style: none;
	counter-reset: home-step;
}

.dreffiti-home__steps li {
	display: grid;
	grid-template-columns: 36px minmax(0, 1fr);
	column-gap: 0.9rem;
	align-items: start;
}

.dreffiti-home__steps li::before {
	counter-increment: home-step;
	content: counter(home-step);
	grid-row: 1 / span 2;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(202, 111, 71, 0.12);
	color: var(--dreffiti-accent-dark);
	font-weight: 800;
}

.dreffiti-home__steps strong {
	color: var(--dreffiti-ink);
	font-size: 1.05rem;
	line-height: 1.3;
}

.dreffiti-home__steps span {
	color: var(--dreffiti-muted);
	line-height: 1.55;
}

/* ── About ── */
.dreffiti-home__about {
	display: grid;
	grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
	gap: clamp(1.5rem, 4vw, 3.5rem);
	align-items: center;
}

.dreffiti-home__about-photo {
	display: block;
	overflow: hidden;
	aspect-ratio: 1;
	border-radius: 20px;
	box-shadow: 0 14px 34px rgba(31, 26, 23, 0.1);
}

.dreffiti-home__about-copy p {
	max-width: 58ch;
	margin: 1rem 0 0;
	color: var(--dreffiti-muted);
	font-size: 1.05rem;
	line-height: 1.65;
}

.dreffiti-home__about-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
}

/* ── Buying info: plain columns under one rule, no boxes ── */
.dreffiti-home__trust-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.5rem 2.5rem;
	padding-top: 2rem;
	border-top: 1px solid var(--dreffiti-line);
}

.dreffiti-home__trust-item {
	display: grid;
	align-content: start;
	gap: 0.35rem;
}

.dreffiti-home__trust-item strong {
	color: var(--dreffiti-ink);
	font-size: 1rem;
	line-height: 1.35;
}

.dreffiti-home__trust-item span {
	color: var(--dreffiti-muted);
	font-size: 0.93rem;
	line-height: 1.55;
}

@media (max-width: 1024px) {
	.dreffiti-home__hero,
	.dreffiti-home__order {
		grid-template-columns: 1fr;
	}

	.dreffiti-home__hero-figure {
		justify-content: stretch;
	}

	.dreffiti-home__hero-art {
		height: clamp(220px, 34vh, 320px);
		aspect-ratio: auto;
	}

	.dreffiti-home__hero-art img {
		object-position: 50% 20%;
	}
}

@media (max-width: 767px) {
	.dreffiti-home {
		padding-bottom: 3.5rem;
	}

	.dreffiti-home__hero {
		padding-top: 1.25rem;
	}

	/* On phones the products come straight after the buttons; the product
	   thumbnails carry the imagery there. */
	.dreffiti-home__hero-figure {
		display: none;
	}

	/* Compact rows on phones: thumbnail left, name and price right. */
	.dreffiti-home__product-grid {
		grid-template-columns: 1fr;
		gap: 1rem;
	}

	.dreffiti-home__product {
		display: grid;
		grid-template-columns: 120px minmax(0, 1fr);
		gap: 1rem;
		align-items: center;
	}

	.dreffiti-home__product-media {
		border-radius: 16px;
	}

	.dreffiti-home__product-body {
		padding: 0;
	}

	.dreffiti-home__about,
	.dreffiti-home__trust-grid {
		grid-template-columns: 1fr;
	}

	.dreffiti-home__about-photo {
		max-width: 220px;
	}
}

.elementor-location-footer {
	display: none;
}

.dreffiti-site-footer {
	background: #191513;
	color: #f6efe8;
	margin-top: 3rem;
}

.dreffiti-site-footer__inner {
	width: min(1180px, calc(100% - 32px));
	margin: 0 auto;
	padding: 2.25rem 0 2.6rem;
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(150px, 0.6fr));
	gap: 1.5rem;
}

.dreffiti-site-footer__eyebrow {
	margin: 0 0 0.6rem;
	color: rgba(246, 239, 232, 0.72);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.dreffiti-site-footer h2 {
	margin: 0 0 0.75rem;
	font-size: clamp(1.4rem, 3vw, 2rem);
	color: #fffaf6;
}

.dreffiti-site-footer p {
	margin: 0;
	max-width: 56ch;
	color: rgba(246, 239, 232, 0.78);
}

.dreffiti-site-footer__aside {
	display: block;
	margin-top: 0.4rem;
	font-size: 0.8rem;
	color: rgba(246, 239, 232, 0.55);
	font-style: italic;
}

.dreffiti-site-footer__contact {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
	margin-top: 0.75rem !important;
}

.dreffiti-site-footer__contact a {
	color: #f0b28d;
	text-decoration: none;
	font-weight: 600;
}

.dreffiti-site-footer__contact a:hover {
	text-decoration: underline;
}

.dreffiti-site-footer__links {
	display: grid;
	align-content: start;
	gap: 0.55rem;
}

.dreffiti-site-footer__links a {
	color: #fffaf6;
	text-decoration: none;
}

.dreffiti-site-footer__links a:hover {
	color: #f0b28d;
}

.dreffiti-contact {
	width: min(1120px, calc(100% - 32px));
	margin: 0 auto;
	padding: 0 0 4rem;
	color: #1f1a17;
}

.dreffiti-contact__eyebrow {
	margin: 0 0 0.6rem;
	color: #8b4729;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.dreffiti-contact__text h2,
.dreffiti-contact__map h2 {
	margin: 0 0 0.7rem;
	font-size: 1.4rem;
	text-transform: none;
}

.dreffiti-contact--xstore {
	display: grid;
	gap: clamp(2rem, 4vw, 3rem);
	margin-top: clamp(2rem, 4vw, 3.5rem);
	padding-bottom: clamp(3rem, 6vw, 5rem);
}

.dreffiti-contact__cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.25rem;
	align-items: stretch;
}

.dreffiti-contact__card {
	position: relative;
	display: grid;
	justify-items: center;
	align-content: start;
	gap: 0.75rem;
	min-height: 200px;
	padding: 2rem 1.25rem;
	border: 0;
	border-radius: 20px;
	background: #fffdf9;
	text-align: center;
	overflow: hidden;
	box-shadow: 0 10px 28px rgba(31, 26, 23, 0.07);
	transition: transform 0.24s ease, box-shadow 0.24s ease;
}

.dreffiti-contact__card h2 {
	margin: 0;
	font-size: 1.05rem;
}

.dreffiti-contact__card p {
	margin: 0;
	color: #675c55;
}

.dreffiti-contact__card a,
.dreffiti-contact__text a {
	color: #8b4729;
	font-weight: 700;
	text-decoration: none;
}

.dreffiti-contact__card::after {
	content: "";
	position: absolute;
	inset: auto 1.5rem 1.25rem;
	height: 3px;
	background: var(--dreffiti-accent);
	border-radius: 2px;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.22s ease;
}

.dreffiti-contact__card:hover {
	box-shadow: 0 16px 36px rgba(31, 26, 23, 0.11);
	transform: translateY(-4px);
}

.dreffiti-contact__card:hover::after {
	transform: scaleX(1);
}

/* Icons sit in a soft terracotta-tinted badge — a small daub of colour rather
   than a stroke icon floating alone in white space. Sized on a wrapper span
   rather than the svg itself so box-sizing can't eat into the icon's own area. */
.dreffiti-contact__card-icon {
	display: grid;
	place-items: center;
	width: 60px;
	height: 60px;
	background: radial-gradient(circle at 32% 28%, rgba(202, 111, 71, 0.18), rgba(202, 111, 71, 0.09) 70%);
	border-radius: 50%;
}

.dreffiti-contact__card svg {
	width: 26px;
	height: 26px;
	color: #8b4729;
}

.dreffiti-contact__main {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(320px, 0.9fr);
	align-items: start;
	gap: clamp(1.25rem, 3vw, 2rem);
}

.dreffiti-contact__text,
.dreffiti-contact__map {
	padding: clamp(1.5rem, 3vw, 2.5rem);
	border: 0;
	border-radius: 20px;
	background: #fffdf9;
	box-shadow: 0 14px 34px rgba(31, 26, 23, 0.07);
}

.dreffiti-contact__text {
	position: relative;
	overflow: hidden;
}

.dreffiti-contact__text::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(202, 111, 71, 0.08), rgba(255, 253, 249, 0) 46%);
	pointer-events: none;
}

.dreffiti-contact__text > * {
	position: relative;
	z-index: 1;
}

.dreffiti-contact__text > p {
	max-width: 58ch;
	margin: 0 0 0.5rem;
	color: #675c55;
}

.dreffiti-contact__map {
	display: grid;
	gap: 0.2rem;
	align-content: start;
}

.dreffiti-contact__map > p {
	margin: 0 0 0.25rem;
	color: #675c55;
}

.dreffiti-contact__form-wrap {
	margin-top: 1.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid rgba(31, 26, 23, 0.1);
}

.dreffiti-contact .wpcf7 form {
	display: grid;
	gap: 0.9rem;
}

.dreffiti-contact .wpcf7 p {
	margin: 0;
}

.dreffiti-contact .wpcf7 label {
	display: grid;
	gap: 0.38rem;
	color: #2b241f;
	font-weight: 700;
}

.dreffiti-contact .wpcf7 input:not([type="submit"]):not([type="file"]),
.dreffiti-contact .wpcf7 textarea {
	width: 100%;
	padding: 0.65rem 0.85rem;
	border: 1px solid rgba(31, 26, 23, 0.16);
	border-radius: 10px;
	background: #fffdfa;
	color: #1f1a17;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.dreffiti-contact .wpcf7 input:not([type="submit"]):focus,
.dreffiti-contact .wpcf7 textarea:focus {
	border-color: rgba(139, 71, 41, 0.72);
	box-shadow: 0 0 0 3px rgba(202, 111, 71, 0.14);
	outline: 0;
}

.dreffiti-contact .wpcf7 textarea {
	min-height: 132px;
	resize: vertical;
}

.dreffiti-contact .wpcf7 input[type="submit"] {
	min-height: 46px;
	padding: 0.85rem 1.25rem;
	border: 0;
	border-radius: 10px;
	background: #1f1a17;
	color: #fffdf9;
	font-weight: 800;
	cursor: pointer;
	transition: background 0.18s ease, transform 0.18s ease;
}

.dreffiti-contact .wpcf7 input[type="submit"]:hover {
	background: #8b4729;
	transform: translateY(-1px);
}

/* Referenciafotó block: a quiet, separate group so it doesn't read as just
   another required text field — same one-accent restraint as the rest of the
   redesign, no extra motifs. */
.dreffiti-form-files {
	display: grid;
	gap: 0.7rem;
	padding-top: 0.6rem;
	border-top: 1px solid rgba(31, 26, 23, 0.1);
}

.dreffiti-form-files__hint {
	margin: 0;
	color: var(--dreffiti-muted);
	font-size: 0.92rem;
	font-weight: 400;
}

.dreffiti-contact .wpcf7 input[type="file"] {
	width: 100%;
	font-size: 0.92rem;
	color: var(--dreffiti-muted);
}

.dreffiti-contact .wpcf7 input[type="file"]::file-selector-button {
	margin-right: 0.85rem;
	padding: 0.55rem 1rem;
	border: 0;
	border-radius: 999px;
	background: rgba(202, 111, 71, 0.12);
	color: var(--dreffiti-accent-dark);
	font-weight: 700;
	font-size: 0.88rem;
	cursor: pointer;
	transition: background 0.15s ease;
}

.dreffiti-contact .wpcf7 input[type="file"]::file-selector-button:hover {
	background: rgba(202, 111, 71, 0.2);
}

.dreffiti-contact__process {
	display: grid;
	gap: 0.8rem;
	margin: 1.1rem 0 1.35rem;
	padding: 0;
	list-style: none;
	counter-reset: contact-step;
}

.dreffiti-contact__process li {
	position: relative;
	display: grid;
	grid-template-columns: 34px minmax(0, 1fr);
	gap: 0.75rem;
	align-items: start;
	color: #554b45;
}

.dreffiti-contact__process li::before {
	counter-increment: contact-step;
	content: counter(contact-step);
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: #f7f1ea;
	color: #8b4729;
	font-weight: 800;
}

.dreffiti-contact__note {
	padding: 1rem;
	border-left: 3px solid var(--dreffiti-accent);
	background: #f7f1ea;
}

@media (prefers-reduced-motion: no-preference) {
	.dreffiti-contact__card,
	.dreffiti-contact__text,
	.dreffiti-contact__map {
		animation: dreffiti-contact-rise 0.55s ease both;
	}

	.dreffiti-contact__card:nth-child(2) {
		animation-delay: 0.08s;
	}

	.dreffiti-contact__card:nth-child(3) {
		animation-delay: 0.16s;
	}

	.dreffiti-contact__text {
		animation-delay: 0.12s;
	}

	.dreffiti-contact__map {
		animation-delay: 0.2s;
	}
}

@keyframes dreffiti-contact-rise {
	from {
		opacity: 0;
		transform: translateY(18px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (max-width: 767px) {
	.dreffiti-site-footer__inner {
		grid-template-columns: 1fr;
	}

	.dreffiti-contact__cards,
	.dreffiti-contact__main {
		grid-template-columns: 1fr;
	}

	.dreffiti-contact__card {
		min-height: 0;
	}

}

/* Category intro copy (the term-description widget) sits full-width above the
   sidebar+grid row — give it real reading measure and breathing room instead of
   bare text touching the page edges. */
.woocommerce .term-description {
	max-width: 72ch;
	margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
	padding: 0 0.25rem;
	color: var(--dreffiti-muted);
	font-size: 1.05rem;
	line-height: 1.6;
}

/* No card/box on purpose — this continues straight on from the category
   description above it, in the same plain-text register, not a separate UI
   widget bolted onto the page. */
.dreffiti-empty-category {
	max-width: 72ch;
	padding: 0 0.25rem;
	color: var(--dreffiti-muted);
	font-size: 1.05rem;
	line-height: 1.6;
}

.dreffiti-empty-category p {
	margin: 0 0 0.85rem;
}

.dreffiti-empty-category p:last-child {
	margin-bottom: 0;
}

.dreffiti-empty-category__lead {
	color: var(--dreffiti-ink);
	font-weight: 700;
}

.dreffiti-empty-category a {
	display: inline-block;
	margin: 0.15rem 0.3rem 0.15rem 0;
	padding: 0.3rem 0.75rem;
	border-radius: 999px;
	background: rgba(202, 111, 71, 0.09);
	color: var(--dreffiti-accent-dark);
	font-weight: 600;
	font-size: 0.95rem;
	text-decoration: none;
	transition: background 0.15s ease;
}

.dreffiti-empty-category a:hover {
	background: rgba(202, 111, 71, 0.16);
}

.dreffiti-empty-category p:last-child a {
	padding: 0;
	background: transparent;
	font-size: inherit;
	text-decoration: underline;
}

.dreffiti-empty-category p:last-child a:hover {
	background: transparent;
}

/* Rólam page */

.elementor-element-4f83fe6 img {
	border-radius: 20px;
	box-shadow: 0 14px 34px rgba(31, 26, 23, 0.1);
}

.elementor-element-631bd7a .elementor-widget-text-editor p {
	max-width: 62ch;
	line-height: 1.7;
}

.dreffiti-about-heading {
	margin: 0.5rem 0 0.9rem;
	font-size: 1.3rem;
	text-transform: none;
}

.dreffiti-about-list {
	display: grid;
	gap: 0.6rem;
	margin: 0 0 1.4rem;
	padding: 0;
	list-style: none;
	max-width: 62ch;
}

.dreffiti-about-list li {
	position: relative;
	padding-left: 1.4rem;
	line-height: 1.6;
}

.dreffiti-about-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--dreffiti-accent);
}

.dreffiti-about-cta {
	font-weight: 700;
}

.dreffiti-about-features {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.5rem 1.25rem;
	margin-top: 1.75rem;
	padding-top: 1.75rem;
	border-top: 1px solid var(--dreffiti-line);
}

.dreffiti-about-feature {
	display: flex;
	align-items: flex-start;
	gap: 0.85rem;
}

.dreffiti-about-feature__icon {
	display: grid;
	flex: none;
	place-items: center;
	width: 46px;
	height: 46px;
	color: var(--dreffiti-accent-dark);
	background: radial-gradient(circle at 32% 28%, rgba(202, 111, 71, 0.16), rgba(202, 111, 71, 0.09) 70%);
	border-radius: 50%;
}

.dreffiti-about-feature__icon svg {
	width: 20px;
	height: 20px;
}

.dreffiti-about-feature strong {
	display: block;
	margin-bottom: 0.2rem;
	color: var(--dreffiti-ink);
	font-size: 0.98rem;
}

.dreffiti-about-feature span {
	color: var(--dreffiti-muted);
	font-size: 0.88rem;
	line-height: 1.4;
}

@media (max-width: 767px) {
	.dreffiti-about-features {
		grid-template-columns: 1fr;
	}
}

/* Single product page */

/* XStore's swatch "selected/hover" border color reads from this theme-wide
   variable, which was left at its bland default (#888) — ties the material/size
   picker into the brand accent instead of a generic gray, used site-wide by
   WooCommerce swatches so this one variable does the job cleanly. */
body {
	--et_main-color: var(--dreffiti-accent);
}

/* The "Buy now" button hardcodes a stock-green (#339438) via its own CSS
   variables — clashes with the whole cream/terracotta palette. Recolor to the
   brand accent so it reads as a deliberate second CTA, not a leftover plugin default. */
body {
	--single-buy-now-button-background-color: var(--dreffiti-accent);
	--single-buy-now-button-background-color-hover: var(--dreffiti-accent-dark);
}

.woocommerce-product-gallery__image img {
	border-radius: 20px;
	box-shadow: 0 14px 34px rgba(31, 26, 23, 0.1);
}

/* ── Site-wide typography consistency (2026-10-08 design review) ── */

/* FUTURAB.TTF (the display face) has no glyphs for the Hungarian double-acute
   letters ő/ű/Ő/Ű, so every heading containing one ("Szűrés", "Süthető…",
   "készülő") rendered that single letter in a fallback font. Patch only those
   four code points with a 1.7 kB Jost Bold subset (Jost is drawn after Futura);
   the browser falls through to this face per character via unicode-range. */
@font-face {
	font-family: "FUTURAB";
	src: url("../fonts/jost-bold-hu.woff") format("woff");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0150-0151, U+0170-0171;
}

/* The Elementor kit still carries its stock Roboto globals, and three templates
   ask for "Muli" (the old name of Mulish, which is not loaded under that name),
   so body copy on Rólam / Kapcsolat / Webshop fell back to Arial or Roboto while
   the rest of the site is set in Mulish. Point everything at the one body face. */
body.elementor-kit-6 {
	--e-global-typography-primary-font-family: "Mulish";
	--e-global-typography-secondary-font-family: "Mulish";
	--e-global-typography-text-font-family: "Mulish";
	--e-global-typography-accent-font-family: "Mulish";
}

.elementor-widget-text-editor {
	font-family: "Mulish", sans-serif !important;
}

.elementor-element-631bd7a .elementor-widget-text-editor p,
.elementor-element-631bd7a .elementor-widget-text-editor li {
	font-weight: 400;
}

/* XStore capitalises every heading and product title by default ("3D Nyomtatott
   Ló Szobor", "Személyes Átvétel"). Hungarian uses sentence case; show titles
   exactly as they were typed. */
body h1,
body h2,
body h3,
body h4,
body h5,
body h6,
body .products-title,
body .widget-title,
body .content-product .product-title a,
body .product_list_widget li .product-title a,
body table.cart .product-details .product-title {
	text-transform: none;
}

/* Rólam / Kapcsolat page titles were set in a pale peach (#F1B189) that has
   ~1.7:1 contrast on the cream header; match the ink used by the Webshop and
   homepage titles. */
.elementor-widget-heading h1.elementor-heading-title {
	color: var(--dreffiti-ink) !important;
}

/* Rólam: the portrait was vertically centred against a much taller text column,
   leaving a blank block above it. Start both columns from the same top edge. */
.elementor-element-c71d88c > .elementor-widget-wrap {
	align-content: flex-start !important;
	align-items: flex-start !important;
}

/* ── Buttons: one primary style everywhere ── */

/* Kapcsolat submit and XStore's stock square black ".btn" (empty cart etc.)
   now share the terracotta pill used by the homepage and product CTAs. */
.dreffiti-contact .wpcf7 input[type="submit"],
.cart-empty a.btn,
.woocommerce .return-to-shop a.btn {
	min-height: 50px;
	padding: 0.9rem 1.6rem;
	border: 0;
	border-radius: 999px;
	background: var(--dreffiti-accent);
	color: #fff;
	font-family: "Mulish", sans-serif;
	font-size: 0.97rem;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	height: auto;
	line-height: 1.2;
}

.cart-empty a.btn {
	display: inline-flex;
	align-items: center;
}

.dreffiti-contact .wpcf7 input[type="submit"]:hover,
.cart-empty a.btn:hover,
.woocommerce .return-to-shop a.btn:hover {
	background: var(--dreffiti-accent-dark);
	color: #fff;
}

.cart-empty h1 {
	font-size: clamp(1.5rem, 2.6vw, 2rem);
}

/* ── Single product: palette + description block ── */

/* The summary section sat on a neutral grey (#F7F7F7) that belongs to no other
   page; use the site's cream wash. */
.elementor-5308 .elementor-element.elementor-element-16a7b2fb:not(.elementor-motion-effects-element-type-background) {
	background-color: #f9f3ec !important;
}

/* The description tabs ran edge to edge (15px from the viewport on a 1440px
   screen) under a ~1140px summary. Align them to the same content width and
   keep the copy at a readable measure. */
.elementor-5308 .elementor-element.elementor-element-6483d4ca > .elementor-container {
	max-width: 1170px;
}

.single-product .woocommerce-tabs .woocommerce-Tabs-panel > p,
.single-product .woocommerce-tabs .woocommerce-Tabs-panel > ul {
	max-width: 72ch;
}

@media (max-width: 767px) {
	/* The vertical "folder" tab layout squeezed the description into a ~220px
	   column next to a lone "Leírás" tab. Stack the tab above its panel. */
	.single-product .woocommerce-tabs.vertical {
		flex-direction: column;
	}

	.single-product .woocommerce-tabs.vertical > .tabs {
		width: auto;
		flex-direction: row;
	}

	.single-product .woocommerce-tabs.vertical > .woocommerce-Tabs-panel {
		width: 100%;
		padding: 1.25rem 1.1rem;
	}
}

/* ── Category archives ── */

/* The shared archive template prints the generic shop intro under the title; on
   a category the term's own description follows right below, so the generic
   line is redundant there (the title itself is swapped to the category name in
   dreffiti_cleanup_frontend_output()). */
.tax-product_cat .elementor-element-6b626972,
.tax-product_tag .elementor-element-6b626972 {
	display: none;
}

/* The search field sat flush against the empty-category message. */
.dreffiti-empty-category + .woocommerce-product-search {
	margin-top: 1.75rem;
}

/* ── Keep the content above the fold ── */

/* The title bands on Webshop / category / Rólam / Kapcsolat had 70-80px of empty
   padding under the title plus a 30px margin, pushing the actual content down. */
.elementor-5305 .elementor-element.elementor-element-3a2e17d5,
.elementor-4415 .elementor-element.elementor-element-0400de5,
.elementor-4416 .elementor-element.elementor-element-27ef590 {
	padding-bottom: 1.25rem !important;
}

.elementor-5305 .elementor-element.elementor-element-3a2e17d5 {
	margin-bottom: 1.5rem !important;
}

@media (max-width: 767px) {
	.elementor-5305 .elementor-element.elementor-element-3a2e17d5,
	.elementor-4415 .elementor-element.elementor-element-0400de5,
	.elementor-4416 .elementor-element.elementor-element-27ef590 {
		padding-top: 68px !important;
	}

	/* Product page on phones: ~125px of empty band sat between the header and
	   the photo (section padding + an 80px column margin). With that gone the
	   photo starts right under the header and "Kosárba teszem" lands above the
	   fixed bottom nav on a short product, so the old 7rem push-down on
	   form.cart (2026-08-25) is no longer needed and was removed. */
	.single-product .elementor-location-single > .elementor-section:first-child {
		padding-top: 64px !important;
	}

	.single-product .elementor-location-single > .elementor-section:first-child .elementor-widget-wrap {
		margin-top: 0 !important;
	}
}

/* ── Webshop / category product cards: same language as the homepage cards ── */
.etheme-product-grid .etheme-product-grid-item {
	text-align: left;
}

.etheme-product-grid .etheme-product-grid-image {
	border-radius: 20px;
	box-shadow: 0 10px 28px rgba(31, 26, 23, 0.07);
}

.etheme-product-grid .etheme-product-grid-title {
	margin-top: 0.15rem;
	font-size: 1.15rem;
	line-height: 1.25;
}

.etheme-product-grid .etheme-product-grid-item .price {
	color: var(--dreffiti-ink);
	font-weight: 700;
}

.etheme-product-grid .etheme-product-grid-item,
.etheme-product-grid .etheme-product-grid-content,
.etheme-product-grid .etheme-product-grid-categories {
	text-align: left !important;
}

.etheme-product-grid .etheme-product-grid-content {
	padding-left: 0.25rem;
	padding-right: 0.25rem;
}

/* The floating filter toggle (sidebar off-canvas, shown below desktop width) is
   fixed at mid-left of the screen, where it sat on top of the first letters of
   the category description. Park it in the bottom-left corner, above the
   fixed mobile nav. */
.post-type-archive-product .etheme-elementor-off-canvas__toggle.elementor-hidden-desktop,
.tax-product_cat .etheme-elementor-off-canvas__toggle.elementor-hidden-desktop,
.tax-product_tag .etheme-elementor-off-canvas__toggle.elementor-hidden-desktop {
	top: auto !important;
	bottom: 84px;
}

/* ══ Kosár / Pénztár / Fiókom / 404 (approved by the owner from a preview, 2026-10-09) ══
   These XStore-default pages were the only ones still in the stock black/square
   look. Styling only: nothing here changes how cart or checkout work. */

/* ── Page title band: same cream band and sentence-case title as the other pages ── */
.page-heading {
	margin-bottom: 2.5rem;
	padding: 104px 0 1.5rem !important;
	background: #f9f3ec !important;
}

.page-heading h1.title {
	font-size: clamp(2rem, 3.2vw, 2.75rem);
	line-height: 1.1;
	text-transform: none;
	color: var(--dreffiti-ink);
}

.page-heading .breadcrumbs {
	text-transform: none;
	font-size: 0.92rem;
}

/* ── Headings and table labels: no forced capitals ── */
h3.step-title,
.cart-totals-title,
.woocommerce-account .woocommerce > h2,
.woocommerce-account .woocommerce h2,
table.cart thead th,
.order-total th,
.order-total td,
.page-404 h1 {
	text-transform: none;
}

h3.step-title,
.cart-totals-title,
.woocommerce-account .woocommerce h2 {
	font-size: 1.3rem;
}

/* ── Summary boxes: soft card instead of the 2px black frame ── */
.cart_totals,
.order-review {
	border: 0 !important;
	border-radius: 20px;
	background: var(--dreffiti-card);
	box-shadow: 0 14px 34px rgba(31, 26, 23, 0.08);
}

/* ── Buttons: terracotta pill for the main step, outlined pill for the rest ── */
.checkout-button,
#place_order,
.woocommerce-form-login__submit,
.woocommerce-form-register__submit,
.coupon .btn,
.checkout_coupon .button,
.page-404 .dreffiti-404-shoplink {
	min-height: 50px;
	height: auto;
	padding: 0.85rem 1.6rem;
	border: 0 !important;
	border-radius: 999px !important;
	background: var(--dreffiti-accent) !important;
	color: #fff !important;
	font-family: "Mulish", sans-serif;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.2;
	text-transform: none;
	transition: background 0.18s ease;
}

.checkout-button:hover,
#place_order:hover,
.woocommerce-form-login__submit:hover,
.coupon .btn:hover,
.page-404 .dreffiti-404-shoplink:hover {
	background: var(--dreffiti-accent-dark) !important;
}

.checkout-button,
.return-shop {
	display: flex;
	align-items: center;
	justify-content: center;
}

.coupon .btn {
	min-height: 46px;
	padding: 0 1.2rem;
	font-size: 0.92rem;
}

.return-shop,
.clear-cart {
	min-height: 46px;
	height: auto;
	padding: 0.7rem 1.4rem;
	border: 1px solid rgba(31, 26, 23, 0.22) !important;
	border-radius: 999px !important;
	background: transparent !important;
	color: var(--dreffiti-ink) !important;
	font-family: "Mulish", sans-serif;
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
}

.return-shop:hover,
.clear-cart:hover {
	border-color: rgba(31, 26, 23, 0.45) !important;
	background: #f7f1ea !important;
}

/* ── Fields ── */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.coupon .input-text,
.page-404 input[type="text"] {
	min-height: 46px;
	border-color: rgba(31, 26, 23, 0.2);
	border-radius: 10px;
	font-size: 1rem;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.coupon .input-text:focus {
	border-color: rgba(139, 71, 41, 0.72);
	box-shadow: 0 0 0 3px rgba(202, 111, 71, 0.16);
	outline: 0;
}

/* Checkout: only Hungary is selectable and the county is optional, so neither
   field asks the customer anything. (Still submitted with its preset value.) */
#billing_country_field,
#billing_state_field,
#shipping_country_field,
#shipping_state_field {
	display: none !important;
}

/* No product has a SKU; the column and line only ever say "N/A". */
table.cart .product-sku,
.single-product .sku_wrapper {
	display: none !important;
}

/* Notices */
.woocommerce-message {
	border: 0;
	border-radius: 12px;
	background: #e9f1e7;
	color: var(--dreffiti-ink);
}

.woocommerce-message a,
.woocommerce-message::before {
	color: var(--dreffiti-ink);
}

/* ── 404 ── */
.page-404 h2.largest {
	background: none;
	color: var(--dreffiti-accent);
	-webkit-text-fill-color: currentColor;
}

.page-404 .dreffiti-404-shoplink {
	display: inline-flex;
	align-items: center;
	margin-top: 1.25rem;
	text-decoration: none;
}

/* Checkout fields use a different wrapper than the account form. */
.form-row .input-text,
form.checkout textarea.input-text {
	min-height: 46px !important;
	border-color: rgba(31, 26, 23, 0.2) !important;
	border-radius: 10px !important;
	font-size: 1rem;
}

.form-row .input-text:focus {
	border-color: rgba(139, 71, 41, 0.72) !important;
	box-shadow: 0 0 0 3px rgba(202, 111, 71, 0.16);
	outline: 0;
}

/* Coupon: field and button side by side instead of the button sitting on the field. */
.coupon {
	display: flex;
	gap: 0.5rem;
	align-items: stretch;
}

.coupon .input-text {
	flex: 1 1 auto;
	min-width: 0;
	width: auto !important;
}

.coupon .btn {
	position: static !important;
	flex: none;
	width: auto !important;
}

/* ── Contrast and tap targets (2026-10-09, from the PageSpeed accessibility audit) ── */

/* Category line on shop cards and the product-page price were theme grey (#888,
   3.2:1 on cream). */
.etheme-product-grid .etheme-product-grid-categories,
.etheme-product-grid .etheme-product-grid-categories a {
	color: var(--dreffiti-muted) !important;
}

/* Elementor's price widget sets its own colour with higher specificity. */
.single-product .elementor-widget-container > p.price,
.single-product .elementor-widget-container > p.price .amount,
.single-product .elementor-widget-container > p.price bdi,
.single-product .elementor-widget-container > p.price .woocommerce-Price-currencySymbol {
	color: var(--dreffiti-ink) !important;
}

.single-product .product_meta .detail-content {
	color: var(--dreffiti-ink);
}

/* Card links were ~18px tall text links; give fingers a bit more to hit. */
.etheme-product-grid .etheme-product-grid-categories a {
	display: inline-block;
	padding: 0.3rem 0;
}

.etheme-product-grid .etheme-product-grid-title a {
	display: block;
	padding: 0.25rem 0;
}

/* ── Search results, wishlist, remaining stock-theme corners (2026-10-09) ── */

/* Search results reuse the shop template; its generic intro line does not apply. */
.search .elementor-element-6b626972 {
	display: none;
}

/* Account / wishlist titles are forced to capitals by a more specific theme rule. */
.page-heading h1.title,
.page-heading h1.title span {
	text-transform: none !important;
}

.cart-empty h1,
.empty-wishlist-block h1 {
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	text-transform: none;
}

/* Same primary button as the empty cart. */
.empty-wishlist-block a.btn {
	display: inline-flex;
	align-items: center;
	min-height: 50px;
	height: auto;
	padding: 0.9rem 1.6rem;
	border: 0;
	border-radius: 999px;
	background: var(--dreffiti-accent);
	color: #fff;
	font-family: "Mulish", sans-serif;
	font-size: 0.97rem;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.2;
	text-transform: none;
}

.empty-wishlist-block a.btn:hover {
	background: var(--dreffiti-accent-dark);
	color: #fff;
}

/* The sort dropdown cut its own label off ("Alapértelme…"). */
.filter-wrap select.orderby,
.woocommerce-ordering select.orderby {
	min-width: 280px;
	max-width: none;
}

@media (max-width: 767px) {
	.filter-wrap select.orderby,
	.woocommerce-ordering select.orderby {
		min-width: min(270px, calc(100vw - 32px));
	}
}

/* ══ Mobile pass (2026-10-09) ══
   Measured on a 390px phone profile. Note for anyone adding styles here: XStore
   sets the root font size to 13px on small screens, so every `rem` value in this
   file renders ~19% smaller on phones than on desktop. Sizes below are in px on
   purpose. */

/* Prices must never break in the middle ("1 / 990 Ft"). */
.woocommerce-Price-amount {
	white-space: nowrap;
}

/* WooCommerce moves keyboard focus to notices; the default outline drew a heavy
   black frame around them. */
.woocommerce-message:focus,
.woocommerce-info:focus,
.woocommerce-error:focus {
	outline: none;
}

/* Coupon row: let the field shrink so the button is not pushed out of the row. */
.coupon .input-text {
	flex: 1 1 0 !important;
	width: 0 !important;
}

.coupon .btn {
	min-width: 64px;
}

@media (max-width: 999px) {
	/* Bottom bar: five items at a fixed 20% + their own padding added up to more
	   than the screen, so the last one ("Több") hung off the right edge. */
	.et-mobile-panel-wrapper .et_column {
		flex: 1 1 0 !important;
		min-width: 0;
		max-width: 20%;
		padding-left: 2px;
		padding-right: 2px;
	}

	.et-mobile-panel-wrapper .et_column .text-nowrap {
		display: block;
		overflow: hidden;
		font-size: 11.5px;
		text-overflow: ellipsis;
	}
}

@media (max-width: 767px) {
	/* iOS Safari zooms the page when a focused field's text is under 16px.
	   Checkout, login, coupon, search, quantity and contact fields were 13-15px. */
	input[type="text"],
	input[type="email"],
	input[type="tel"],
	input[type="password"],
	input[type="search"],
	input[type="number"],
	input[type="url"],
	textarea,
	select,
	.woocommerce form .form-row input.input-text,
	.woocommerce form .form-row textarea,
	.dreffiti-contact .wpcf7 input:not([type="submit"]):not([type="file"]),
	.dreffiti-contact .wpcf7 textarea {
		font-size: 16px !important;
	}

	/* Text that had dropped to 10-12px. */
	.single-product .single_add_to_cart_button,
	.single-product .single_add_to_cart_button .button-text,
	.single-product .et-single-buy-now .button-text {
		font-size: 14px;
	}

	.dreffiti-product-note strong {
		font-size: 14.5px;
	}

	.dreffiti-product-note span {
		font-size: 13.5px;
	}

	.single-product .st-custom-attribute {
		font-size: 13px;
	}

	.dreffiti-home__trust-item strong {
		font-size: 15.5px;
	}

	.dreffiti-home__trust-item span,
	.dreffiti-about-feature span {
		font-size: 14px;
	}

	.dreffiti-about-feature strong {
		font-size: 15.5px;
	}

	.dreffiti-home__categories a,
	.dreffiti-empty-category a {
		font-size: 14px;
	}

	.dreffiti-site-footer__eyebrow {
		font-size: 11.5px;
	}

	.dreffiti-site-footer__aside {
		font-size: 12.5px;
	}

	.page-heading .breadcrumbs,
	.page-heading .breadcrumbs a {
		font-size: 13px;
	}

	.return-shop,
	.clear-cart,
	.clear-cart .button-text {
		font-size: 14.5px !important;
	}

	/* Tap targets */
	.dreffiti-site-footer__links {
		gap: 0;
	}

	.dreffiti-site-footer__links a {
		padding: 9px 0;
	}

	.dreffiti-home__more {
		padding: 10px 0;
	}

	.dreffiti-home__categories a,
	.dreffiti-empty-category p:not(:last-child) a {
		padding: 9px 14px;
	}

	.filter-wrap select,
	.woocommerce-ordering select,
	select.et-per-page-select {
		min-height: 44px;
	}

	table.cart .remove-item,
	.shipping-calculator-button,
	.showcoupon {
		display: inline-block;
		padding: 10px 0;
	}

	/* Shipping choices: full-width rows with the whole label tappable, instead of
	   a right-aligned column where long labels wrapped under a 13px radio. */
	/* A table row cannot simply be turned into a block (it collapses to the first
	   column's width), so the totals section itself becomes a block and its rows
	   flex: label left, value right, shipping options stacked full width. */
	.cart_totals table.shop_table,
	.order-review table.shop_table,
	.cart_totals table.shop_table :is(tbody, tfoot):has(> tr.woocommerce-shipping-totals),
	.order-review table.shop_table :is(tbody, tfoot):has(> tr.woocommerce-shipping-totals) {
		display: block;
		width: 100%;
	}

	.cart_totals table.shop_table :is(tbody, tfoot):has(> tr.woocommerce-shipping-totals) > tr,
	.order-review table.shop_table :is(tbody, tfoot):has(> tr.woocommerce-shipping-totals) > tr {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: 12px;
	}

	.cart_totals table.shop_table tr.woocommerce-shipping-totals,
	.order-review table.shop_table tr.woocommerce-shipping-totals {
		display: block !important;
	}

	.cart_totals tr.woocommerce-shipping-totals > th,
	.cart_totals tr.woocommerce-shipping-totals > td,
	.order-review tr.woocommerce-shipping-totals > th,
	.order-review tr.woocommerce-shipping-totals > td {
		display: block;
		width: 100%;
		padding-left: 0;
		text-align: left;
	}

	#shipping_method {
		text-align: left;
	}

	#shipping_method li {
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 6px 0;
		text-align: left;
	}

	#shipping_method li input[type="radio"] {
		flex: none;
		width: 20px;
		height: 20px;
		margin: 0;
	}

	#shipping_method li label {
		flex: 1;
		margin: 0;
		padding: 6px 0;
	}

	.woocommerce-form__input-checkbox,
	#ship-to-different-address-checkbox {
		width: 20px;
		height: 20px;
		vertical-align: middle;
	}

	/* The floating back-to-top button sat on top of the right end of the buy
	   buttons; the fixed bottom bar already gives quick navigation on phones. */
	#back-top {
		display: none !important;
	}
}

.order-total,
.order-total th,
.order-total td,
.order-total strong,
.order-total span {
	text-transform: none !important;
}

/* ── "Added to cart" confirmation (assets/js/dreffiti-cart-toast.js) ── */
/* Top of the screen, under the header: at the bottom it landed on the dark
   footer (dark on dark) whenever the page was scrolled to the end. The light
   hairline keeps its edge visible on any background. */
.dreffiti-toast {
	position: fixed;
	top: 96px;
	right: 20px;
	z-index: 10000;
	border: 1px solid rgba(255, 250, 246, 0.22);
	display: flex;
	align-items: center;
	gap: 14px;
	max-width: min(420px, calc(100vw - 32px));
	padding: 14px 14px 14px 18px;
	border-radius: 16px;
	background: var(--dreffiti-ink);
	color: #fffaf6;
	box-shadow: 0 14px 40px rgba(31, 26, 23, 0.28);
	font-family: "Mulish", sans-serif;
	font-size: 15px;
	line-height: 1.4;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.dreffiti-toast.is-visible {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.dreffiti-toast__text {
	flex: 1;
	margin: 0;
	color: inherit;
}

.dreffiti-toast__link {
	flex: none;
	padding: 9px 14px;
	border-radius: 999px;
	background: #fffaf6;
	color: var(--dreffiti-ink) !important;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}

.dreffiti-toast__close {
	flex: none;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

.dreffiti-toast__close:focus-visible,
.dreffiti-toast__link:focus-visible {
	outline: 2px solid #f0b28d;
	outline-offset: 2px;
}

@media (max-width: 999px) {
	/* Under the mobile header; message on top, action underneath. */
	.dreffiti-toast {
		top: 72px;
		right: 16px;
		left: 16px;
		display: grid;
		grid-template-columns: 1fr auto;
		gap: 10px 12px;
		max-width: none;
	}

	.dreffiti-toast__link {
		grid-column: 1 / -1;
		grid-row: 2;
		justify-self: start;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dreffiti-toast {
		transform: none;
		transition: none;
	}
}

/* ── Checkout errors: readable, not a solid red slab ── */
.woocommerce-error {
	border: 0;
	border-left: 4px solid #b3261e;
	border-radius: 12px;
	background: #fbeceb;
	color: var(--dreffiti-ink);
}

.woocommerce-error li,
.woocommerce-error a,
.woocommerce-error::before {
	color: var(--dreffiti-ink) !important;
}

.woocommerce-error:focus {
	outline: none;
}

.woocommerce form .checkout-inline-error-message,
.checkout-inline-error-message {
	margin: 6px 0 0;
	color: #b3261e !important;
	font-size: 14px;
	font-weight: 600;
}

/* ══ 2026-10-09 (evening): compare removed, next steps before the footer, small polish ══ */

/* Compare: three one-off handmade pieces are not something visitors compare
   spec by spec; the button only competed with the buy buttons. (Owner agreed.) */
.single-product .elementor-element-3a222cc2,
.xstore-compare,
.single-compare {
	display: none !important;
}

/* Block rendered by dreffiti_render_prefooter(). */
.dreffiti-more {
	width: min(1180px, calc(100% - 32px));
	margin: clamp(2.5rem, 5vw, 4rem) auto 0;
}

.dreffiti-more h2 {
	margin: 0;
	color: var(--dreffiti-ink);
	font-size: clamp(1.5rem, 2.4vw, 2rem);
	line-height: 1.15;
	text-transform: none;
}

.dreffiti-more__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.dreffiti-more__all {
	flex: none;
	color: var(--dreffiti-accent-dark);
	font-weight: 700;
	text-decoration: underline;
	text-decoration-color: rgba(139, 71, 41, 0.35);
	text-underline-offset: 4px;
}

.dreffiti-more__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2rem 1.5rem;
}

.dreffiti-more--order {
	display: grid;
	justify-items: center;
	gap: 0.9rem;
	padding: clamp(1.75rem, 4vw, 3rem) clamp(1.25rem, 4vw, 3rem);
	border-radius: 24px;
	background: #f9f3ec;
	text-align: center;
}

.dreffiti-more--order p {
	max-width: 52ch;
	margin: 0;
	color: var(--dreffiti-muted);
	font-size: 17px;
	line-height: 1.6;
}

.dreffiti-more--order .dreffiti-home__button {
	margin-top: 0.4rem;
}

@media (max-width: 767px) {
	.dreffiti-more__grid {
		grid-template-columns: 1fr;
		gap: 1rem;
	}

	.dreffiti-more__all {
		padding: 10px 0;
	}
}

/* Simple products: the quantity stepper floated alone, centred above a full-width
   button. Put it beside "Kosárba teszem", as on products with options. */
.single-product form.cart:not(.variations_form) {
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	column-gap: 14px;
}

.single-product form.cart:not(.variations_form) > .quantity {
	width: auto;
	margin: 0;
}

.single-product form.cart:not(.variations_form) > .et-or-wrapper,
.single-product form.cart:not(.variations_form) > .et-single-buy-now,
.single-product form.cart:not(.variations_form) > :not(.quantity):not(.single_add_to_cart_button) {
	grid-column: 1 / -1;
}

/* Gallery thumbnails were the only square-cornered images on the product page. */
.single-product .thumbnails-list .thumbnail-item img {
	border-radius: 10px;
}

/* With a handful of products, "items per page" and the grid/list switch do
   nothing useful; sorting stays. */
.products-per-page,
.etheme-elementor-grid-list-switcher {
	display: none !important;
}

/* Search popup: brand buttons instead of the stock black blocks, rounded tiles. */
.etheme-search-form-button-wrapper button,
.etheme-search-form-button-wrapper .btn,
.etheme-modal-popup-inner a.btn.black {
	border: 0 !important;
	border-radius: 999px !important;
	background: var(--dreffiti-accent) !important;
	color: #fff !important;
	font-family: "Mulish", sans-serif;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
}

.etheme-search-form-button-wrapper button:hover,
.etheme-modal-popup-inner a.btn.black:hover {
	background: var(--dreffiti-accent-dark) !important;
}

.etheme-modal-popup-inner a.btn.black {
	height: auto;
	min-height: 48px;
	padding: 0.8rem 1.6rem;
	display: inline-flex;
	align-items: center;
	font-size: 15px;
}

.etheme-search-tags-title {
	text-transform: none;
}

.etheme-modal-popup-inner .category-grid {
	border-radius: 16px;
	overflow: hidden;
}

/* ── Accent colour only where it means something (owner feedback, 2026-10-09) ──
   The theme-wide --et_main-color override (set for swatches) also coloured
   dropdown values, every sidebar link and the unselected shipping options
   terracotta, which read as "link" or "disabled" rather than as normal text. */
select,
.woocommerce-ordering select,
.variations select,
.select2-container--default .select2-selection--single .select2-selection__rendered {
	color: var(--dreffiti-ink) !important;
}

.sidebar-widget ul li a,
.sidebar-widget ul li a span,
.sidebar-widget label {
	color: var(--dreffiti-ink) !important;
}

.sidebar-widget ul li a:hover,
.sidebar-widget ul li a:hover span,
.sidebar-widget ul li.current-cat > a,
.sidebar-widget ul li.chosen > a {
	color: var(--dreffiti-accent) !important;
}

.sidebar-widget ul li.current-cat > a {
	font-weight: 700;
}

/* Shipping options: all in normal text colour, the chosen one emphasised. */
#shipping_method label,
#shipping_method label .amount {
	color: var(--dreffiti-ink) !important;
}

#shipping_method input:checked + label {
	font-weight: 700;
}

/* After WooCommerce refreshes the totals by AJAX (e.g. on changing the shipping
   method) the box comes back with its stock <h2>, in capitals again. */
.cart_totals > h2,
.cart_totals h2 {
	font-size: 1.3rem;
	text-transform: none;
}

/* Keyboard focus ring in the site's own dark terracotta instead of pure black. */
.woocommerce a.button:focus-visible,
.woocommerce button.button:focus-visible,
.woocommerce input.button:focus-visible,
.woocommerce .button:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline-color: var(--dreffiti-accent-dark);
}

/* ── Product description (owner: "this part isn't pretty either", 2026-10-09) ──
   With a single tab, XStore's "folder" tab UI is a lone boxed "LEÍRÁS" label next
   to a grey-framed panel. When there is only one tab, drop the tab chrome: the
   label becomes a heading and the text sits in one soft card, like the cards on
   Kapcsolat. Products that ever get a second tab keep the normal tab layout. */
.single-product .woocommerce-tabs:has(> .tabs > .et-woocommerce-tab:only-child) {
	display: grid;
	grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
	gap: 16px clamp(24px, 4vw, 56px);
	align-items: start;
	padding: clamp(24px, 3.5vw, 44px);
	border-radius: 24px;
	background: var(--dreffiti-card);
	box-shadow: 0 14px 34px rgba(31, 26, 23, 0.07);
}

.single-product .woocommerce-tabs:has(> .tabs > .et-woocommerce-tab:only-child) > .tabs {
	display: block;
	width: auto;
}

.single-product .woocommerce-tabs:has(> .tabs > .et-woocommerce-tab:only-child) .et-woocommerce-tab {
	display: block;
	width: auto;
	border: 0 !important;
	background: none !important;
}

.single-product .woocommerce-tabs:has(> .tabs > .et-woocommerce-tab:only-child) .et-woocommerce-tab a {
	display: block;
	padding: 0;
	color: var(--dreffiti-ink);
	font-family: "futurab", sans-serif;
	font-size: 26px;
	line-height: 1.15;
	text-transform: none;
	pointer-events: none;
}

.single-product .woocommerce-tabs:has(> .tabs > .et-woocommerce-tab:only-child) > .woocommerce-Tabs-panel {
	width: auto;
	padding: 0 !important;
	border: 0 !important;
}

.single-product .woocommerce-tabs .woocommerce-Tabs-panel > p,
.single-product .woocommerce-tabs .woocommerce-Tabs-panel > ul {
	max-width: 68ch;
	color: var(--dreffiti-muted);
	font-size: 17px;
	line-height: 1.7;
}

.single-product .woocommerce-tabs .woocommerce-Tabs-panel > :last-child {
	margin-bottom: 0;
}

.single-product .woocommerce-tabs .woocommerce-Tabs-panel > h3 {
	margin: 28px 0 12px;
	font-size: 20px;
	text-transform: none;
}

.single-product .woocommerce-tabs .woocommerce-Tabs-panel > p strong {
	color: var(--dreffiti-ink);
}

@media (max-width: 767px) {
	.single-product .woocommerce-tabs:has(> .tabs > .et-woocommerce-tab:only-child) {
		grid-template-columns: 1fr;
		border-radius: 20px;
	}

	.single-product .woocommerce-tabs:has(> .tabs > .et-woocommerce-tab:only-child) > .woocommerce-Tabs-panel {
		width: 100%;
	}

	.single-product .woocommerce-tabs:has(> .tabs > .et-woocommerce-tab:only-child) .et-woocommerce-tab a {
		font-size: 23px;
	}
}

/* The wrapper's clearfix pseudo-elements would otherwise become grid items and
   push the heading and the text into the wrong columns. */
.single-product .woocommerce-tabs:has(> .tabs > .et-woocommerce-tab:only-child)::before,
.single-product .woocommerce-tabs:has(> .tabs > .et-woocommerce-tab:only-child)::after,
.single-product .woocommerce-tabs:has(> .tabs > .et-woocommerce-tab:only-child) > .tabs::before,
.single-product .woocommerce-tabs:has(> .tabs > .et-woocommerce-tab:only-child) > .tabs::after,
.single-product .woocommerce-tabs:has(> .tabs > .et-woocommerce-tab:only-child) .et-woocommerce-tab::before,
.single-product .woocommerce-tabs:has(> .tabs > .et-woocommerce-tab:only-child) .et-woocommerce-tab::after {
	content: none !important;
	display: none !important;
}

.single-product .woocommerce-tabs:has(> .tabs > .et-woocommerce-tab:only-child) > .tabs {
	grid-column: 1;
	border: 0 !important;
}

.single-product .woocommerce-tabs:has(> .tabs > .et-woocommerce-tab:only-child) > .woocommerce-Tabs-panel {
	grid-column: 2;
}

@media (max-width: 767px) {
	.single-product .woocommerce-tabs:has(> .tabs > .et-woocommerce-tab:only-child) > .tabs,
	.single-product .woocommerce-tabs:has(> .tabs > .et-woocommerce-tab:only-child) > .woocommerce-Tabs-panel {
		grid-column: 1;
	}
}

/* ── Form labels (owner: "the checkout labels are rather faint") ──
   Theme default was a light grey at regular weight. */
.woocommerce form .form-row label,
.woocommerce-form-row label,
.woocommerce-form-login label,
.woocommerce-checkout .form-row label {
	color: var(--dreffiti-ink);
	font-weight: 600;
}

.woocommerce form .form-row label .optional {
	color: var(--dreffiti-muted);
	font-weight: 400;
}

.woocommerce form .form-row label .required {
	color: #b3261e;
	text-decoration: none;
}

.woocommerce form .form-row label.woocommerce-form__label-for-checkbox,
.woocommerce form .form-row label.checkbox {
	font-weight: 500;
}

/* Row labels in the cart / order summary and the short product text were the
   same faint grey. */
.cart_totals th,
.order-review th,
.order-review .cart-subtotal th,
.woocommerce-checkout-review-order-table th {
	color: var(--dreffiti-muted);
}

.woocommerce form .form-row ::placeholder {
	color: #8a7f78;
}

/* ── Cart panel that slides in from the header ── */
.etheme-elementor-off-canvas__main {
	max-width: calc(100vw - 48px);
	box-sizing: border-box;
}

.etheme-elementor-off-canvas__main a.button.wc-forward {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	height: auto;
	padding: 0.7rem 1.2rem;
	border: 1px solid rgba(31, 26, 23, 0.22) !important;
	border-radius: 999px !important;
	background: transparent !important;
	color: var(--dreffiti-ink) !important;
	font-family: "Mulish", sans-serif;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.2;
	text-transform: none;
}

.etheme-elementor-off-canvas__main a.button.btn-checkout {
	border-color: transparent !important;
	background: var(--dreffiti-accent) !important;
	color: #fff !important;
}

.etheme-elementor-off-canvas__main a.button.btn-checkout:hover {
	background: var(--dreffiti-accent-dark) !important;
}

.etheme-elementor-off-canvas__main a.button.wc-forward:not(.btn-checkout):hover {
	background: #f7f1ea !important;
}

/* Product names were cut off after ~20 characters. */
.etheme-elementor-off-canvas__main .product-title,
.etheme-elementor-off-canvas__main .product-title a,
.etheme-elementor-off-canvas__main .woocommerce-mini-cart-item a:not(.remove) {
	overflow: visible;
	white-space: normal;
	text-overflow: clip;
}

.etheme-elementor-off-canvas__main .woocommerce-mini-cart-item img {
	border-radius: 10px;
}

.etheme-elementor-off-canvas__main .woocommerce-mini-cart__total,
.etheme-elementor-off-canvas__main .woocommerce-mini-cart__total strong,
.etheme-elementor-off-canvas__main .cart-popup-footer,
.etheme-elementor-off-canvas__main .etheme-elementor-off-canvas__head {
	text-transform: none;
}

/* ── Checkout: coupon line and payment note (owner: "can't this be nicer?") ── */

/* The coupon prompt was a loose line of text above the form. Make it one quiet,
   self-contained chip; when opened, the field and button sit right under it at
   a sensible width instead of stretching across the page. */
.woocommerce-form-coupon-toggle .woocommerce-info {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 8px;
	margin: 0 0 18px;
	padding: 11px 18px;
	border: 0;
	border-radius: 999px;
	background: #f9f3ec;
	color: var(--dreffiti-muted);
	font-size: 15px;
	line-height: 1.4;
}

.woocommerce-form-coupon-toggle .woocommerce-info::before {
	content: none;
}

.woocommerce-form-coupon-toggle .woocommerce-info a.showcoupon {
	color: var(--dreffiti-ink);
	font-weight: 700;
	text-decoration: underline;
	text-decoration-color: rgba(31, 26, 23, 0.3);
	text-underline-offset: 3px;
}

.etheme-elementor-cart-checkout-page-coupon .checkout_coupon {
	gap: 10px;
	align-items: stretch;
	max-width: 520px;
	margin: 0 0 26px;
}

.etheme-elementor-cart-checkout-page-coupon .checkout_coupon .form-row {
	width: auto;
	margin: 0;
	padding: 0;
	float: none;
}

.etheme-elementor-cart-checkout-page-coupon .checkout_coupon .form-row-first {
	flex: 1 1 auto;
}

.etheme-elementor-cart-checkout-page-coupon .checkout_coupon .button {
	min-height: 46px;
	height: 100%;
	padding: 0 22px;
	border: 0;
	border-radius: 999px;
	background: var(--dreffiti-ink);
	color: #fff;
	font-family: "Mulish", sans-serif;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
}

.etheme-elementor-cart-checkout-page-coupon .checkout_coupon .button:hover {
	background: var(--dreffiti-accent-dark);
}

/* Payment: with a single method the name and its note were two right-aligned
   lines floating above the button. Give them a small panel of their own. */
#payment .wc_payment_methods {
	margin: 0 0 18px;
	padding: 0;
	list-style: none;
}

#payment .wc_payment_methods li {
	padding: 14px 16px;
	border-radius: 12px;
	background: #f9f3ec;
	text-align: left;
}

#payment .wc_payment_methods li + li {
	margin-top: 8px;
}

#payment .wc_payment_methods li > label {
	display: block;
	margin: 0;
	color: var(--dreffiti-ink);
	font-weight: 700;
}

#payment .wc_payment_methods .payment_box {
	margin: 4px 0 0;
	padding: 0;
	background: none;
	text-align: left;
}

#payment .wc_payment_methods .payment_box p {
	margin: 0;
	color: var(--dreffiti-muted);
	font-size: 14.5px;
	line-height: 1.5;
}

/* Order confirmation page: same sentence-case headings as everywhere else. */
.woocommerce-order h2,
.woocommerce-order .woocommerce-order-details__title,
.woocommerce-order .woocommerce-column__title,
.woocommerce-order .woocommerce-thankyou-order-received {
	text-transform: none;
}

/* The chip's wrapper is a flex container, which stretched it across the page. */
.etheme-elementor-cart-checkout-page-coupon .woocommerce-form-coupon-toggle {
	display: block;
	margin: 0;
	padding: 0;
	border: 0;
}

.woocommerce-form-coupon-toggle .woocommerce-info {
	display: inline-flex;
	width: auto;
	max-width: 100%;
}

.woocommerce-form-coupon-toggle .woocommerce-info a.showcoupon {
	color: var(--dreffiti-ink) !important;
}

.etheme-elementor-cart-checkout-page-coupon .checkout_coupon {
	margin-top: 0;
}

#payment .wc_payment_methods li > label,
#payment .wc_payment_methods li {
	text-align: left !important;
}

#payment .wc_payment_methods li > label {
	justify-content: flex-start;
}

.etheme-elementor-cart-checkout-page-coupon .checkout_coupon {
	margin-top: 12px;
}

@media (max-width: 767px) {
	.woocommerce-form-coupon-toggle .woocommerce-info {
		padding: 9px 16px;
		line-height: 1.3;
	}
}

/* ══ Foxpost pickup point: map picker (assets/js/dreffiti-foxpost-map.js) ══ */

/* The pickup-point row needs the full width of the summary, not the narrow value
   column. A table row cannot just be made a block, so (as on phones) the totals
   section becomes a block with flex rows whenever that row is present. */
.cart_totals table.shop_table:has(tr.csp-review-order),
.order-review table.shop_table:has(tr.csp-review-order),
.cart_totals table.shop_table :is(tbody, tfoot):has(> tr.csp-review-order),
.order-review table.shop_table :is(tbody, tfoot):has(> tr.csp-review-order) {
	display: block;
	width: 100%;
}

.cart_totals table.shop_table :is(tbody, tfoot):has(> tr.csp-review-order) > tr,
.order-review table.shop_table :is(tbody, tfoot):has(> tr.csp-review-order) > tr {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}

.cart_totals table.shop_table tr.csp-review-order,
.order-review table.shop_table tr.csp-review-order {
	display: block !important;
	padding: 14px 16px;
	border-radius: 14px;
	background: #f9f3ec;
}

tr.csp-review-order > th,
tr.csp-review-order > td {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	text-align: left;
}

tr.csp-review-order > th {
	margin-bottom: 8px;
	color: var(--dreffiti-ink);
	font-weight: 700;
}

tr.csp-review-order > td::before {
	content: none !important;
}

/* The plugin's own prompt is replaced by the button + "or pick from the list". */
.dreffiti-foxmap-cell > label {
	display: none;
}

.dreffiti-foxmap {
	display: grid;
	gap: 10px;
	margin-bottom: 8px;
}

.dreffiti-foxmap__open {
	min-height: 48px;
	padding: 10px 20px;
	border: 0;
	border-radius: 999px;
	background: var(--dreffiti-ink);
	color: #fffaf6;
	font-family: "Mulish", sans-serif;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.18s ease;
}

.dreffiti-foxmap__open:hover {
	background: var(--dreffiti-accent-dark);
}

.dreffiti-foxmap__or {
	color: var(--dreffiti-muted);
	font-size: 14px;
}

/* Chosen point */
.csp-review-order-selected-info {
	display: grid;
	gap: 2px;
	line-height: 1.45;
}

.csp-review-order-selected-info strong {
	color: var(--dreffiti-ink);
}

.csp-review-order-selected-info span {
	color: var(--dreffiti-muted);
}

.csp-review-order-selected-info a {
	justify-self: start;
	margin-top: 4px;
	color: var(--dreffiti-accent-dark);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Modal */
.dreffiti-foxmap-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(31, 26, 23, 0.55);
}

.dreffiti-foxmap-modal.is-open {
	display: flex;
}

.dreffiti-foxmap-modal__box {
	display: flex;
	flex-direction: column;
	width: min(1100px, 100%);
	height: min(820px, 100%);
	overflow: hidden;
	border-radius: 20px;
	background: #fff;
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
}

.dreffiti-foxmap-modal__head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 12px 12px 20px;
	border-bottom: 1px solid var(--dreffiti-line);
	color: var(--dreffiti-ink);
	font-family: "Mulish", sans-serif;
	font-size: 16px;
}

.dreffiti-foxmap-modal__note {
	flex: 1;
	color: #b3261e;
	font-size: 14px;
	font-weight: 600;
}

.dreffiti-foxmap-modal__close {
	flex: none;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #f7f1ea;
	color: var(--dreffiti-ink);
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
}

.dreffiti-foxmap-modal__frame {
	flex: 1;
	width: 100%;
	border: 0;
}

html.dreffiti-foxmap-lock {
	overflow: hidden;
}

@media (max-width: 767px) {
	.dreffiti-foxmap-modal {
		padding: 0;
	}

	.dreffiti-foxmap-modal__box {
		width: 100%;
		height: 100%;
		border-radius: 0;
	}
}

tr.csp-review-order > td,
tr.csp-review-order > td * {
	text-align: left !important;
}

.dreffiti-foxmap__open {
	letter-spacing: 0;
	text-transform: none;
}

/* The plugin prints "name: address - link" with a bare " - " text node between
   the parts; zero the container's font size so only the real elements show. */
.csp-review-order-selected-info {
	font-size: 0;
}

.csp-review-order-selected-info strong,
.csp-review-order-selected-info span,
.csp-review-order-selected-info a {
	font-size: 15px;
}

tr.csp-review-order > td .dreffiti-foxmap__open {
	text-align: center !important;
}

/* The second-level headings that used to be duplicate <h1>s (404, empty cart,
   empty wishlist) keep the size they had. */
.page-404 h2:not(.largest),
.cart-empty h2,
.empty-wishlist-block h2 {
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	text-transform: none;
}

/* ══ Owner feedback, 2026-10-09 late: coupon on the cart page, breadcrumb,
   matching toasts, buy block spacing ══ */

/* Coupon: rounded field next to a square terracotta "OK" block. Both coupon
   buttons (cart + checkout) are now the dark secondary pill, so terracotta
   stays reserved for the step that moves the order forward. */
.coupon .btn,
.coupon input.btn,
.etheme-elementor-cart-checkout-page-coupon .checkout_coupon .button {
	min-width: 110px;
	border: 0 !important;
	border-radius: 999px !important;
	background: var(--dreffiti-ink) !important;
	color: #fffaf6 !important;
	font-family: "Mulish", sans-serif;
	font-size: 15px !important;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none !important;
}

.coupon .btn:hover,
.coupon input.btn:hover,
.etheme-elementor-cart-checkout-page-coupon .checkout_coupon .button:hover {
	background: var(--dreffiti-accent-dark) !important;
}

.coupon .input-text {
	border-radius: 999px !important;
	padding-left: 20px !important;
}

/* Breadcrumb above page titles: terracotta on cream at a small size was weak. */
.page-heading .breadcrumbs,
.page-heading .breadcrumbs a,
.page-heading .breadcrumbs .delimeter,
.page-heading .breadcrumbs .current {
	color: var(--dreffiti-muted) !important;
}

.page-heading .breadcrumbs a:hover {
	color: var(--dreffiti-ink) !important;
	text-decoration: underline;
}

/* One toast style for "added to wishlist" (XStore's .et-notify) and "added to
   cart" (ours): white card, thumbnail, text link, same place under the header. */
.dreffiti-toast,
.et-notify.pos-fixed {
	top: 96px !important;
	right: 20px !important;
	bottom: auto !important;
	left: auto;
	width: min(400px, calc(100vw - 32px));
	max-width: none;
	padding: 14px 44px 14px 14px !important;
	border: 1px solid var(--dreffiti-line) !important;
	border-radius: 16px !important;
	background: #fff !important;
	color: var(--dreffiti-ink) !important;
	box-shadow: 0 14px 40px rgba(31, 26, 23, 0.16) !important;
	font-family: "Mulish", sans-serif;
	font-size: 15px !important;
	line-height: 1.45;
}

.dreffiti-toast {
	display: flex;
	align-items: center;
	gap: 14px;
}

.dreffiti-toast__thumb,
.et-notify.pos-fixed img {
	flex: none;
	width: 72px;
	height: 72px;
	border-radius: 10px;
	object-fit: cover;
}

.dreffiti-toast__body {
	display: grid;
	gap: 6px;
	min-width: 0;
}

.dreffiti-toast__text {
	color: var(--dreffiti-muted);
}

.dreffiti-toast__text strong,
.et-notify.pos-fixed .et-notify-info strong,
.et-notify.pos-fixed .et-notify-info b {
	color: var(--dreffiti-ink);
}

.dreffiti-toast__link,
.et-notify.pos-fixed .et-notify-button {
	justify-self: start;
	padding: 0;
	border-radius: 0;
	background: none;
	color: var(--dreffiti-ink) !important;
	font-size: 15px;
	font-weight: 700;
	text-decoration: underline;
	text-decoration-color: rgba(31, 26, 23, 0.35);
	text-underline-offset: 3px;
	white-space: normal;
}

.dreffiti-toast__close {
	position: absolute;
	top: 6px;
	right: 6px;
	color: var(--dreffiti-muted);
}

@media (max-width: 999px) {
	.dreffiti-toast,
	.et-notify.pos-fixed {
		top: 72px !important;
		right: 16px !important;
		left: 16px !important;
		width: auto;
	}

	.dreffiti-toast {
		display: flex;
		grid-template-columns: none;
	}

	.dreffiti-toast__link {
		grid-column: auto;
		grid-row: auto;
	}
}

/* Buy block on product pages: stepper and button were different heights and
   top-aligned, "VAGY" was squeezed between the two buttons, and the buttons
   stopped short of the divider's right end. One grid for both product types. */
.single-product .woocommerce-variation-add-to-cart,
.single-product form.cart:not(.variations_form) {
	display: grid !important;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 14px !important;
}

.single-product .woocommerce-variation-add-to-cart > .quantity,
.single-product form.cart:not(.variations_form) > .quantity {
	margin: 0 !important;
}

.single-product .woocommerce-variation-add-to-cart > .single_add_to_cart_button,
.single-product form.cart:not(.variations_form) > .single_add_to_cart_button {
	width: 100%;
	min-height: 54px;
	margin: 0 !important;
	font-size: 16px;
	letter-spacing: 0;
	text-transform: none;
}

.single-product .woocommerce-variation-add-to-cart > .single_add_to_cart_button .button-text,
.single-product form.cart:not(.variations_form) > .single_add_to_cart_button .button-text {
	font-size: 16px;
	text-transform: none;
}

.single-product .woocommerce-variation-add-to-cart > .et-or-wrapper,
.single-product .woocommerce-variation-add-to-cart > .et-single-buy-now,
.single-product form.cart:not(.variations_form) > .et-or-wrapper,
.single-product form.cart:not(.variations_form) > .et-single-buy-now {
	grid-column: 1 / -1;
}

.single-product form.cart .et-or-wrapper {
	margin: 0 !important;
	color: var(--dreffiti-muted);
	font-size: 13px;
	text-transform: none;
}

/* Stepper: one rounded control, shared by the product page (as tall as the
   button beside it) and the cart / checkout tables (compact). */
.single-product form.cart .quantity .quantity-wrapper,
.shop_table .quantity .quantity-wrapper {
	--dreffiti-stepper-height: 54px;
	--dreffiti-stepper-button: 42px;
	display: inline-flex;
	align-items: stretch;
	height: var(--dreffiti-stepper-height);
	overflow: hidden;
	border: 1px solid rgba(31, 26, 23, 0.2);
	border-radius: 999px;
	background: var(--dreffiti-card);
}

.shop_table .quantity .quantity-wrapper {
	--dreffiti-stepper-height: 44px;
	--dreffiti-stepper-button: 38px;
	max-width: none;
	/* The +/- icons are sized in em off this; same base as the product page. */
	font-size: 16px;
}

.shop_table .quantity .quantity-wrapper .minus,
.shop_table .quantity .quantity-wrapper .plus {
	font-size: 0.55em;
}

.shop_table .quantity {
	height: auto;
}

/* Cart row: unit price and row total sit on the stepper's centre line (they
   were top-aligned text next to a 44px control). */
.woocommerce-cart-form td.product-price,
.woocommerce-cart-form td.product-subtotal {
	line-height: 44px;
}

/* Amounts in cart / checkout / order tables took the accent colour through
   XStore's --et_main-color; prices are ink like on the product page, the
   accent stays for the button that advances the order. */
.shop_table .amount {
	color: var(--dreffiti-ink);
}

.single-product form.cart .quantity .quantity-wrapper .minus,
.single-product form.cart .quantity .quantity-wrapper .plus,
.shop_table .quantity .quantity-wrapper .minus,
.shop_table .quantity .quantity-wrapper .plus {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: var(--dreffiti-stepper-button) !important;
	height: 100%;
	padding: 0;
	border: 0 !important;
	color: var(--dreffiti-ink) !important;
	cursor: pointer;
}

.single-product form.cart .quantity .quantity-wrapper .minus svg,
.single-product form.cart .quantity .quantity-wrapper .plus svg,
.shop_table .quantity .quantity-wrapper .minus svg,
.shop_table .quantity .quantity-wrapper .plus svg {
	fill: currentColor;
}

.single-product form.cart .quantity .quantity-wrapper input.qty,
.shop_table .quantity .quantity-wrapper input.qty {
	flex: 0 0 auto;
	width: 40px !important;
	height: 100%;
	padding: 0;
	border: 0 !important;
	background: transparent;
	color: var(--dreffiti-ink);
	font-size: 16px !important;
	font-weight: 700;
	text-align: center;
}

@media (max-width: 767px) {
	.single-product .woocommerce-variation-add-to-cart > .single_add_to_cart_button,
	.single-product form.cart:not(.variations_form) > .single_add_to_cart_button,
	.single-product .woocommerce-variation-add-to-cart > .single_add_to_cart_button .button-text,
	.single-product form.cart:not(.variations_form) > .single_add_to_cart_button .button-text {
		font-size: 15px;
	}
}

.et-notify.pos-fixed {
	margin: 0 !important;
}

/* ── Search popup bar (owner: "rounded button on a square background looks odd") ──
   The whole bar is one pill now: category select, field and button share the
   rounded outline, with the button inset a few pixels. */
.etheme-search-input-form-wrapper {
	align-items: center;
	height: 56px;
	padding: 5px;
	overflow: hidden;
	border: 1px solid rgba(31, 26, 23, 0.2) !important;
	border-radius: 999px !important;
	background: #fff;
}

.etheme-search-input-form-wrapper:focus-within {
	border-color: rgba(139, 71, 41, 0.72) !important;
	box-shadow: 0 0 0 3px rgba(202, 111, 71, 0.16);
}

.etheme-search-input-form-wrapper .etheme-search-form-select {
	flex: none;
	width: auto;
	min-width: 190px;
	height: 100%;
	padding: 0 34px 0 18px;
	border: 0 !important;
	border-right: 1px solid var(--dreffiti-line) !important;
	border-radius: 999px 0 0 999px;
	background-color: transparent;
	font-size: 15px;
}

.etheme-search-input-form-wrapper .etheme-search-input-wrapper,
.etheme-search-input-form-wrapper .etheme-search-form-input {
	height: 100%;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	outline: 0;
}

.etheme-search-input-form-wrapper .etheme-search-form-input {
	font-size: 16px;
}

.etheme-search-input-form-wrapper .etheme-search-form-button-wrapper {
	flex: none;
	height: 100%;
}

.etheme-search-input-form-wrapper .etheme-search-form-submit {
	height: 100%;
	padding: 0 22px !important;
	font-size: 15px;
}

.etheme-search-input-form-wrapper .etheme-search-form-submit .button-text {
	font-size: 15px;
}

/* Suggested terms: same pill chips as elsewhere instead of grey rectangles. */
.etheme-search-tags a {
	padding: 7px 14px;
	border-radius: 999px;
	background: #f9f3ec;
	color: var(--dreffiti-accent-dark);
	font-size: 14.5px;
	font-weight: 600;
}

.etheme-search-tags a:hover {
	background: rgba(202, 111, 71, 0.18);
}

@media (max-width: 767px) {
	.etheme-search-input-form-wrapper .etheme-search-form-select {
		min-width: 0;
		max-width: 120px;
	}

	.etheme-search-input-form-wrapper .etheme-search-form-submit .button-text {
		display: none;
	}

	.etheme-search-input-form-wrapper .etheme-search-form-submit {
		padding: 0 16px !important;
	}
}

/* ── Slide-in panels (cart, wishlist): every button in the site's two styles ──
   The wishlist panel's "add all to cart" had no .wc-forward class, and the empty
   state uses a.btn, so both fell back to the theme's square blocks. */
.etheme-elementor-off-canvas__main a.button,
.etheme-elementor-off-canvas__main a.btn {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	height: auto;
	padding: 0.7rem 1.2rem;
	border: 1px solid rgba(31, 26, 23, 0.22) !important;
	border-radius: 999px !important;
	background: transparent !important;
	color: var(--dreffiti-ink) !important;
	font-family: "Mulish", sans-serif;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.2;
	text-transform: none;
}

.etheme-elementor-off-canvas__main a.button.btn-checkout,
.etheme-elementor-off-canvas__main a.btn {
	border-color: transparent !important;
	background: var(--dreffiti-accent) !important;
	color: #fff !important;
}

.etheme-elementor-off-canvas__main a.button.btn-checkout:hover,
.etheme-elementor-off-canvas__main a.btn:hover {
	background: var(--dreffiti-accent-dark) !important;
}

.etheme-elementor-off-canvas__main a.btn {
	display: inline-flex;
	width: auto;
	margin-top: 10px;
}

.etheme-elementor-off-canvas__main .mini-cart-buttons {
	display: grid;
	gap: 10px;
}

.etheme-elementor-off-canvas__main .mini-cart-buttons a.button {
	margin: 0;
}

/* ── Wishlist page with items: the last page still in the stock black/square look ── */
.xstore-wishlist-table thead th {
	color: var(--dreffiti-ink);
	font-weight: 700;
	text-transform: none;
}

.xstore-wishlist-table .xstore-wishlist-image img {
	border-radius: 10px;
}

.xstore-wishlist-form a.button,
.xstore-wishlist-form a.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	height: auto;
	padding: 0.65rem 1.3rem;
	border: 1px solid rgba(31, 26, 23, 0.22) !important;
	border-radius: 999px !important;
	background: transparent !important;
	color: var(--dreffiti-ink) !important;
	font-family: "Mulish", sans-serif;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.2;
	text-transform: none;
}

/* Row-level and bulk "apply": dark secondary pill. */
.xstore-wishlist-form a.button.add_to_cart_button,
.xstore-wishlist-form a.btn.xstore-wishlist-actions {
	border-color: transparent !important;
	background: var(--dreffiti-ink) !important;
	color: #fffaf6 !important;
}

/* "Add everything to the cart": the page's one primary action. */
.xstore-wishlist-form a.btn.add-all-products {
	border-color: transparent !important;
	background: var(--dreffiti-accent) !important;
	color: #fff !important;
}

.xstore-wishlist-form a.button.add_to_cart_button:hover,
.xstore-wishlist-form a.btn.xstore-wishlist-actions:hover,
.xstore-wishlist-form a.btn.add-all-products:hover {
	background: var(--dreffiti-accent-dark) !important;
}

/* Icon-only buttons (quick view, remove) stay round. */
.xstore-wishlist-form .actions-buttons a.btn,
.xstore-wishlist-form .actions-buttons a.xstore-wishlist-icon,
.xstore-wishlist-form .actions-buttons > a:not(.button) {
	width: 46px;
	min-width: 46px;
	padding: 0;
}

.xstore-wishlist-form .xstore-wishlist-apply-actions select {
	min-height: 46px;
	border-radius: 999px;
	padding-left: 18px;
}

.xstore-wishlist-form .xstore-wishlist-apply-actions,
.xstore-wishlist-form .actions-buttons {
	gap: 8px;
}

.xstore-wishlist-table .xstore-wishlist-action small,
.xstore-wishlist-table .xstore-wishlist-action .date,
.xstore-wishlist-table .xstore-wishlist-action span:not(.woocommerce-Price-amount) {
	color: var(--dreffiti-muted);
}

/* Label spans inside the dark/terracotta wishlist buttons carry their own colour. */
.xstore-wishlist-form a.button.add_to_cart_button *,
.xstore-wishlist-form a.btn.xstore-wishlist-actions *,
.xstore-wishlist-form a.btn.add-all-products * {
	color: inherit !important;
}

.xstore-wishlist-form a.button.add_to_cart_button {
	color: #fffaf6 !important;
	opacity: 1;
}

.xstore-wishlist-form .actions-buttons > * {
	border-radius: 999px !important;
}

/* XStore's "ask for an estimate" on the wishlist page opens a popup that was
   never set up (it shows the theme's placeholder instructions). The template
   prints the button unconditionally, so it is hidden here. */
.xstore-wishlist-form a.et-call-popup {
	display: none !important;
}

/* Mobile header: the logo was centred between a 78px menu button and a 51px cart
   icon, so it sat ~13px right of the screen's centre. Give both sides the same
   share of the row; the logo then lands on the true centre. */
@media (max-width: 1024px) {
	.elementor-location-header .elementor-element-1c052e27,
	.elementor-location-header .elementor-element-3b721982 {
		flex: 1 1 0 !important;
		width: auto !important;
		min-width: 0;
	}

	.elementor-location-header .elementor-element-3b721982 {
		display: flex;
		justify-content: flex-end;
	}

	.elementor-location-header .elementor-element-4c8a498a {
		flex: 0 0 auto !important;
		width: auto !important;
	}
}

/* Desktop header: same story — the menu + search on the left are ~60px wider
   than wishlist + cart on the right, so a logo centred in the leftover space sat
   ~30px right of the page centre. Pin it to the row's true centre instead. */
@media (min-width: 1025px) {
	.elementor-location-header .e-con-inner:has(> .elementor-element-4c8a498a) {
		position: relative;
		min-height: 72px;
	}

	.elementor-location-header .elementor-element-4c8a498a {
		position: absolute !important;
		top: 50%;
		left: 50%;
		width: auto !important;
		transform: translate(-50%, -50%);
	}

	.elementor-location-header .elementor-element-74326882 {
		margin-left: auto !important;
	}
}

/* ══ Optimisation pass, 2026-10-09/10 ══ */

/* Mulish, self-hosted as a variable font (weights 200-1000 in one file per
   subset). Before this the theme declared only the 400 weight (from Google's
   servers), so every semi-bold and bold on the site was a browser-synthesised
   fake bold, and each visit made a third-party request to fonts.gstatic.com. */
@font-face {
	font-family: "Mulish";
	src: url("../fonts/mulish-var-latin-ext.woff2") format("woff2");
	font-weight: 200 1000;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Mulish";
	src: url("../fonts/mulish-var-latin.woff2") format("woff2");
	font-weight: 200 1000;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Entrance animations off. Elementor hides animated sections
   (.elementor-invisible) until its script runs, and the Kapcsolat cards started
   at opacity 0; both delayed the largest paint by 1-2 s on phones (and the
   Elementor one was the cause of the "blank until refresh" bug after in-page
   navigation). Content is simply there from the first paint. */
.elementor-invisible {
	visibility: visible !important;
}

.elementor-element.animated,
.elementor-widget.animated,
.dreffiti-contact__card,
.dreffiti-contact__text,
.dreffiti-contact__map {
	animation: none !important;
	opacity: 1 !important;
}

/* Contrast leftovers from the audit. */
/* The "vagy" separator: XStore dims it with opacity .7, which drops it under AA. */
.single-product form.cart .et-or-wrapper,
.single-product form.cart .et-or-wrapper span {
	color: var(--dreffiti-muted) !important;
	opacity: 1 !important;
}

/* Disabled buy buttons (no option chosen yet) were the normal colours at reduced
   opacity, i.e. white text at ~3:1. Give the disabled state its own readable pair. */
.single-product .single_add_to_cart_button.disabled,
.single-product .single_add_to_cart_button.wc-variation-selection-needed,
.single-product .single_add_to_cart_button:disabled {
	border-color: transparent !important;
	background: #ded5cd !important;
	color: var(--dreffiti-muted) !important;
	opacity: 1 !important;
	cursor: not-allowed;
}

.single-product .single_add_to_cart_button.disabled *,
.single-product .single_add_to_cart_button.wc-variation-selection-needed *,
.single-product .single_add_to_cart_button:disabled * {
	color: inherit !important;
	fill: currentColor;
}

/* Section headings inside the product description are <h2> now (were <h3>
   directly under the page's <h1>). */
.single-product .woocommerce-tabs .woocommerce-Tabs-panel > h2 {
	margin: 28px 0 12px;
	font-size: 20px;
	text-transform: none;
}

/* Mobile side menu: the search button's icon was dark on terracotta (~3:1), the
   placeholder mid-grey and the inactive tab at 50% opacity. */
.etheme-elementor-mobile-menu-search .etheme-search-form-submit,
.etheme-elementor-mobile-menu-search .etheme-search-form-submit i {
	color: #fff !important;
}

.etheme-elementor-mobile-menu-search .etheme-search-form-input::placeholder {
	color: var(--dreffiti-muted);
	opacity: 1;
}

.etheme-elementor-mobile-menu-element .et_b-tabs .et-tab {
	color: var(--dreffiti-muted);
	opacity: 1;
}

.etheme-elementor-mobile-menu-element .et_b-tabs .et-tab.active {
	color: var(--dreffiti-ink);
	font-weight: 700;
}

/* Kapcsolat: one multi-select photo picker (dreffiti-contact-files.js) in place
   of the separate "Fotó 1…N" fields, which stay in the form, hidden, and carry
   the files. Without JavaScript the plain fields remain visible. */
/* Hide everything CF7 rendered for the plain fields (labels plus the <p>/<br>
   wrappers its auto-formatting adds), keeping only the hint and the picker. */
.dreffiti-form-files.is-enhanced > :not(.dreffiti-form-files__hint):not(.dreffiti-photos) {
	display: none !important;
}

.dreffiti-photos {
	display: grid;
	gap: 10px;
}

.dreffiti-photos__add {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	justify-self: start;
	min-height: 44px;
	margin: 0;
	padding: 0 20px;
	border: 1px dashed rgba(139, 71, 41, 0.45);
	border-radius: 999px;
	background: rgba(202, 111, 71, 0.08);
	color: var(--dreffiti-accent-dark) !important;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.15s ease;
}

.dreffiti-photos__add:hover {
	background: rgba(202, 111, 71, 0.16);
}

.dreffiti-photos__add input {
	position: absolute;
	width: 1px !important;
	height: 1px;
	overflow: hidden;
	opacity: 0;
	clip-path: inset(50%);
}

.dreffiti-photos__add:focus-within {
	outline: 2px solid var(--dreffiti-accent);
	outline-offset: 2px;
}

.dreffiti-photos.is-full .dreffiti-photos__add {
	display: none !important;
}

.dreffiti-photos__status {
	margin: 0;
	color: var(--dreffiti-muted);
	font-size: 14px;
}

.dreffiti-photos__status:empty {
	display: none;
}

.dreffiti-photos__list {
	display: grid;
	gap: 8px;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
}

.dreffiti-photos__list:empty {
	display: none;
}

.dreffiti-photos__item {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 6px 6px 6px 6px;
	border: 1px solid rgba(31, 26, 23, 0.1);
	border-radius: 14px;
	background: #fff;
}

.dreffiti-photos__item img {
	flex: 0 0 48px;
	width: 48px;
	height: 48px;
	border-radius: 10px;
	object-fit: cover;
}

.dreffiti-photos__name {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	color: var(--dreffiti-ink);
	font-size: 14px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dreffiti-photos__remove {
	flex: 0 0 44px;
	width: 44px;
	height: 44px;
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--dreffiti-muted);
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
}

.dreffiti-photos__remove:hover {
	background: rgba(31, 26, 23, 0.06);
	color: var(--dreffiti-ink);
}

/* Long file names must truncate, not push the card wider than the form: grid
   tracks default to min-content, so pin every level to the available width. */
.dreffiti-form-files,
.dreffiti-photos,
.dreffiti-photos__list {
	grid-template-columns: minmax(0, 1fr);
	min-width: 0;
}

.dreffiti-photos__item {
	min-width: 0;
	max-width: 100%;
}

.dreffiti-form-files.is-enhanced {
	gap: 12px;
}

.dreffiti-photos__list {
	margin-top: 4px !important;
}

/* Sidebar widget titles are <h2> now (were <h4>); keep the small-title look. */
.sidebar-widget h2.widget-title,
.widget h2.widget-title {
	margin-bottom: 14px;
	font-size: 18px;
	line-height: 1.3;
}

/* Small tap targets found on phones: footer links and the "remember me" box. */
@media (max-width: 767px) {
	.dreffiti-site-footer a {
		display: inline-block;
		padding-block: 6px;
	}
}

.woocommerce-form-login .woocommerce-form__input-checkbox {
	width: 20px;
	height: 20px;
	accent-color: var(--dreffiti-accent);
}

/* Safety net: when "Leírás" is the only tab it is shown as a plain card, so its
   text must never depend on the tab script having run. */
.single-product .woocommerce-tabs:has(> .tabs > .et-woocommerce-tab:only-child) > .woocommerce-Tabs-panel {
	display: block !important;
}

/* Radios and checkboxes in the brand colour instead of the browser's blue. */
input[type="radio"],
input[type="checkbox"] {
	accent-color: var(--dreffiti-accent);
}

/* Product options (Alapanyag / Méret): label above the control, pill choices and
   a rounded select with proper tap height, matching the buy buttons below.
   Before: 31px-high square uppercase chips at 11px and a 34px square select. */
.single-product form.cart table.variations,
.single-product form.cart table.variations tbody {
	display: block;
	width: 100%;
	margin: 0 0 6px;
	border: 0;
}

.single-product form.cart table.variations tr {
	display: block;
	margin: 0 0 16px;
	padding: 0;
	border: 0;
}

.single-product form.cart table.variations th.label,
.single-product form.cart table.variations td.value {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	text-align: left;
}

.single-product form.cart table.variations th.label {
	margin-bottom: 8px;
}

.single-product form.cart table.variations th.label label {
	margin: 0;
	color: var(--dreffiti-ink);
	font-size: 15px;
	font-weight: 700;
}

.single-product form.cart table.variations .st-swatch-preview {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
}

.single-product form.cart table.variations .st-swatch-preview li.type-label {
	display: block;
	width: auto;
	height: auto;
	margin: 0 !important;
	padding: 0;
	border: 0 !important;
	border-radius: 999px !important;
	background: none;
}

.single-product form.cart table.variations .st-swatch-preview li.type-label .st-custom-attribute {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 88px;
	min-height: 44px;
	height: auto;
	padding: 0 20px;
	border: 1.5px solid rgba(31, 26, 23, 0.22);
	border-radius: 999px;
	background: #fff;
	color: var(--dreffiti-ink);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	text-transform: none;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.single-product form.cart table.variations .st-swatch-preview li.type-label.selected .st-custom-attribute,
.single-product form.cart table.variations .st-swatch-preview li.type-label .st-custom-attribute.selected {
	border-color: var(--dreffiti-accent);
	background: rgba(173, 83, 44, 0.1);
	color: var(--dreffiti-accent-dark);
}

.single-product form.cart table.variations .st-swatch-preview li.type-label.sten-li-disabled .st-custom-attribute,
.single-product form.cart table.variations .st-swatch-preview li.type-label .st-custom-attribute.sten-disabled {
	border-style: dashed;
	background: transparent;
	color: #6f655f;
}

.single-product form.cart table.variations td.value select {
	width: 100%;
	max-width: 420px;
	min-height: 48px;
	height: auto;
	padding: 0 44px 0 18px;
	border: 1.5px solid rgba(31, 26, 23, 0.22);
	border-radius: 999px;
	background-color: #fff;
	color: var(--dreffiti-ink);
	font-size: 16px;
}

.single-product form.cart table.variations .reset_variations {
	display: inline-block;
	margin: 8px 0 0;
	padding: 6px 0;
	color: var(--dreffiti-muted);
	font-size: 14px;
	text-decoration: underline;
}

/* The selected option name XStore prints under the label repeats the chip. */
.single-product form.cart table.variations th.label .et-attr-selected,
.single-product form.cart table.variations th.label > span {
	display: none;
}

/* Unavailable option chip: XStore overlays a white box and a diagonal line on
   it, which hid the label. Keep it a readable dashed pill instead (it stays
   clickable, choosing it resets the other option). */
.single-product form.cart table.variations .st-swatch-preview li.sten-li-disabled .st-custom-attribute::before,
.single-product form.cart table.variations .st-swatch-preview li.sten-li-disabled .st-custom-attribute::after,
.single-product form.cart table.variations .st-swatch-preview li.type-label::after {
	display: none !important;
}

.single-product form.cart table.variations .st-swatch-preview li.sten-li-disabled .st-custom-attribute {
	border: 1.5px dashed rgba(31, 26, 23, 0.3);
	opacity: 1;
}

.single-product form.cart table.variations td.value select {
	margin: 0 !important;
}

/* Keyboard focus. The theme removes outlines everywhere, so tabbing through the
   site showed no position at all. :focus-visible only appears for keyboard use,
   mouse and touch users see no change. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible,
.st-custom-attribute:focus-visible {
	outline: 2px solid var(--dreffiti-accent) !important;
	outline-offset: 3px !important;
	border-radius: 6px;
}

.dreffiti-site-footer a:focus-visible,
.dreffiti-more a:focus-visible {
	outline-color: #f3c9b4 !important;
}

button:focus-visible,
.button:focus-visible,
.btn:focus-visible,
.elementor-button:focus-visible,
input[type="submit"]:focus-visible,
input[type="text"]:focus-visible,
input[type="email"]:focus-visible,
input[type="tel"]:focus-visible,
input[type="search"]:focus-visible,
input[type="password"]:focus-visible,
select:focus-visible,
textarea:focus-visible {
	border-radius: inherit;
}

[data-skip-target]:focus {
	outline: none;
}

.dreffiti-skip-link {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 100000;
	padding: 12px 18px;
	border-radius: 999px;
	background: var(--dreffiti-ink);
	color: #fff !important;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	transform: translateY(-200%);
}

.dreffiti-skip-link:focus {
	transform: none;
}

/* Visitors who ask their system for less motion get no transitions or
   smooth scrolling. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* Category intro text: body-size copy at a comfortable line length, with real
   lists and links (it was small grey text with bare line breaks). */
.term-description {
	max-width: 68ch;
	color: var(--dreffiti-muted);
	font-size: 16px;
	line-height: 1.65;
}

.term-description p {
	margin: 0 0 12px;
}

.term-description > :last-child {
	margin-bottom: 0;
}

.term-description ul {
	margin: 0 0 12px;
	padding-left: 20px;
	list-style: disc;
}

.term-description li {
	margin: 0 0 6px;
}

.term-description li::marker {
	color: var(--dreffiti-accent);
}

.term-description strong {
	color: var(--dreffiti-ink);
}

.term-description a {
	color: var(--dreffiti-accent-dark);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ...and make it win over the Elementor widget's own size, lined up with the
   page title above it. */
.elementor-location-archive .term-description,
.elementor-location-archive .term-description p,
.elementor-location-archive .term-description li {
	font-size: 16px !important;
	line-height: 1.65 !important;
}

.elementor-location-archive .term-description {
	margin-left: 12px;
}

@media (max-width: 1024px) {
	.elementor-location-archive .term-description {
		margin: 0 20px;
	}
}


/* ══ Consistency pass (2026-10-10) ══
   Found by comparing the same component across every page type on a phone,
   not page by page: each rule below removes a second version of something
   that already had a settled style elsewhere. Sizes are px on purpose (XStore's
   13px root on phones shrinks rem). */

/* Sort dropdown and the stock search fields (empty category / empty search /
   404) were the last square 1px-grey controls; same pill as the product
   option select and the coupon field. */
.filter-wrap select.orderby,
.woocommerce-ordering select.orderby,
.woocommerce-product-search input.search-field,
.widget_search form input[type="text"],
.widget_search form input[type="search"] {
	height: 48px;
	min-height: 48px;
	padding-left: 18px;
	border: 1px solid rgba(31, 26, 23, 0.22);
	border-radius: 999px;
	background-color: #fff;
	color: var(--dreffiti-ink);
}

.woocommerce-product-search button,
.widget_search form button {
	top: 0;
	right: 4px;
	width: 48px;
	height: 48px;
}

/* Product page wishlist link sat in a white box on the cream panel. */
.single-product .elementor-element .xstore-wishlist.elementor-button {
	padding-right: 4px;
	padding-left: 4px;
	background: transparent;
}

/* Empty category / empty search text was a size smaller than the category
   intro right above it. */
.dreffiti-empty-category,
.dreffiti-empty-search {
	font-size: 16px;
	line-height: 1.6;
}

/* One page-title size for every title band. They were 22 / 26 / 44px on phones
   and 24 / 38 / 44px on desktop depending on which template drew the band. */
.page-heading h1.title,
.page-heading h1.title span,
.elementor-widget-heading h1.elementor-heading-title:not(.product_title) {
	font-size: clamp(32px, 4.4vw, 44px) !important;
	line-height: 1.12 !important;
}

.woocommerce-product-search {
	max-width: 440px;
}

@media (max-width: 767px) {
	/* One button text size (they ranged from 12.6px to 15px). */
	.dreffiti-home__button,
	.dreffiti-contact .wpcf7 input[type="submit"],
	.cart-empty a.btn,
	.woocommerce .return-to-shop a.btn,
	.empty-wishlist-block a.btn,
	.checkout-button,
	#place_order,
	.woocommerce-form-login__submit,
	.single-product .single_add_to_cart_button,
	.single-product .single_add_to_cart_button .button-text,
	.single-product .et-single-buy-now .button-text,
	.return-shop,
	.clear-cart,
	.clear-cart .button-text {
		font-size: 15px !important;
	}

	/* Kapcsolat fields were 34px tall; same 46px as checkout and login. */
	.dreffiti-contact .wpcf7 input:not([type="submit"]):not([type="file"]) {
		min-height: 46px;
		padding: 10px 14px;
	}

	/* Category intro and the text under it share one left edge. */
	.elementor-location-archive .term-description {
		margin: 0 5px;
	}

	.dreffiti-home__product-price {
		font-size: 15px;
	}

	.elementor-5305 .woocommerce-ordering,
	.elementor-5305 .woocommerce-ordering select.orderby {
		width: calc(100vw - 30px - 60px);
		min-width: 0;
		max-width: none;
	}
}

@media (max-width: 1024px) {
	/* The shop section's 60px bottom margin stacked with the callout's own
	   top margin into a ~110px empty band under the last product. */
	.elementor-5305 .elementor-element.elementor-element-5371872b {
		margin-bottom: 8px !important;
	}

	/* Filter button: it floated over the left edge of the content (product
	   prices, category chips). Below desktop width it now sits in the toolbar row,
	   right of the sort dropdown. Its column comes after the product list in the
	   markup, so the column is moved first and the button overlaps the row
	   below it by its own height. */
	.elementor-5305 .elementor-top-column:has(.etheme-elementor-off-canvas__toggle.elementor-hidden-desktop) {
		order: -1;
	}

	.elementor-5305 .elementor-top-column:has(.etheme-elementor-off-canvas__toggle.elementor-hidden-desktop) > .elementor-widget-wrap {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}

	.elementor-5305 .etheme-elementor-off-canvas__toggle_wrapper:has(> .etheme-elementor-off-canvas__toggle.elementor-hidden-desktop) {
		justify-content: flex-end;
		height: 0;
	}

	.elementor-5305 .etheme-elementor-off-canvas__toggle.elementor-hidden-desktop {
		position: relative !important;
		top: 40px !important;
		bottom: auto !important;
		left: auto !important;
		z-index: 2;
		width: 48px;
		height: 48px;
		transform: none !important;
	}

	.elementor-5305 .etheme-elementor-off-canvas__toggle.elementor-hidden-desktop .etheme-elementor-off-canvas__toggle_button {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 48px;
		height: 48px;
		min-width: 0;
		padding: 0 !important;
		border: 1px solid rgba(31, 26, 23, 0.22) !important;
		border-radius: 50% !important;
		background: #fff !important;
		color: var(--dreffiti-ink);
		box-shadow: none !important;
	}

	/* Subcategory links in the filter panel were 13px with 30px rows. */
	.etheme-elementor-off-canvas__main .sidebar-widget ul ul li a {
		padding-top: 5px;
		padding-bottom: 5px;
		font-size: 14.5px;
	}

	/* Nothing to filter on an empty category or an empty search. */
	body:has(.dreffiti-empty-category, .dreffiti-empty-search) .etheme-elementor-off-canvas__toggle.elementor-hidden-desktop {
		display: none;
	}
}

/* ── Slide-in panels and the phone header: sentence case like the rest of the
   site (menu links, tabs, panel titles and "Összesen" were forced to capitals
   by the theme). ── */
body .etheme-elementor-off-canvas__toggle .elementor-button,
.etheme-elementor-off-canvas__main .et-tab,
.etheme-elementor-off-canvas__main .elementor-item,
.etheme-elementor-off-canvas__main .etheme-elementor-off-canvas__toggle,
.etheme-elementor-off-canvas_content-head-label,
.etheme-elementor-off-canvas .cart-widget-subtotal .small-h,
.et-mini-content-head .et-element-label {
	text-transform: none !important;
}

.etheme-elementor-off-canvas__main .elementor-item,
.etheme-elementor-off-canvas__main .etheme-elementor-off-canvas__toggle {
	font-size: 16px;
}

.etheme-elementor-off-canvas__main .et-tab,
.etheme-elementor-off-canvas .cart-widget-subtotal .small-h {
	font-size: 15px;
}

/* Panel titles (Kosár / Kívánságlista) in the display face, like the filter
   panel's headings. */
.etheme-elementor-off-canvas_content-head-label {
	font-family: "futurab", sans-serif;
	font-size: 18px;
	text-decoration: none;
}

/* ── Title bands on Webshop / category / Rólam / Kapcsolat: centred on desktop
   too, like Kosár / Pénztár / Fiókom (they were centred on phones only; the
   second 50% column of each band is empty). ── */
@media (min-width: 768px) {
	.elementor-element-36beccb0 > .elementor-container > .elementor-column:first-child,
	.elementor-element-e7a1616 > .elementor-container > .elementor-column:first-child,
	.elementor-element-542fef2 > .elementor-container > .elementor-column:first-child {
		width: 100%;
		text-align: center;
	}

	.elementor-element-36beccb0 > .elementor-container > .elementor-column:last-child:not(:first-child),
	.elementor-element-e7a1616 > .elementor-container > .elementor-column:last-child:not(:first-child),
	.elementor-element-542fef2 > .elementor-container > .elementor-column:last-child:not(:first-child) {
		display: none;
	}

	.elementor-element-36beccb0 .elementor-widget-container,
	.elementor-element-e7a1616 .elementor-widget-container,
	.elementor-element-542fef2 .elementor-widget-container {
		text-align: center;
	}
}

/* Shop cards on tablets are wider than the 300px thumbnail, which left white
   bars beside the photo inside the card. */
.etheme-product-grid .etheme-product-grid-image img {
	width: 100%;
	height: auto;
}

/* Phone bottom bar icons (2026-10-10): XStore's stock glyphs are five different
   drawing styles (the storefront is far denser than the rest) and "Több" carries
   a pulsing notification dot that reads as a misplaced fourth dot. One 1.5px
   outline set instead, drawn as masks so they keep following the text colour. */
@media (max-width: 999px) {
	.et-mobile-panel .with-dot > a .et_b-icon::before,
	.et-mobile-panel .with-dot > a .et_b-icon::after {
		content: none;
	}

	.et-mobile-panel .et_column > a .et-svg:not(.et-close) {
		display: block;
		width: 24px;
		height: 24px;
		background-color: currentColor;
		-webkit-mask: var(--dreffiti-bar-icon) center / contain no-repeat;
		mask: var(--dreffiti-bar-icon) center / contain no-repeat;
	}

	.et-mobile-panel .et_column > a .et-svg:not(.et-close) svg {
		display: none;
	}

	.et-mobile-panel .et_b_mobile-panel-home {
		--dreffiti-bar-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 10.6 12 3.5l8.5 7.1V19.5a1 1 0 0 1-1 1h-4.75v-6h-5.5v6H4.5a1 1 0 0 1-1-1z'/%3E%3C/svg%3E");
	}

	.et-mobile-panel .et_b_mobile-panel-shop {
		--dreffiti-bar-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9.25 4.6 4h14.8L21 9.25'/%3E%3Cpath d='M3 9.25a3 3 0 0 0 6 0 3 3 0 0 0 6 0 3 3 0 0 0 6 0'/%3E%3Cpath d='M4.5 11.9v8.6h15v-8.6'/%3E%3Cpath d='M9.75 20.5v-4.75h4.5v4.75'/%3E%3C/svg%3E");
	}

	.et-mobile-panel .et_b_mobile-panel-custom {
		--dreffiti-bar-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5.25' width='18' height='13.5' rx='1.5'/%3E%3Cpath d='m3.5 7.25 8.5 6 8.5-6'/%3E%3C/svg%3E");
	}

	.et-mobile-panel .et_b_mobile-panel-wishlist {
		--dreffiti-bar-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20.25 4.3 12.5a4.75 4.75 0 0 1 6.7-6.75l1 1 1-1a4.75 4.75 0 0 1 6.7 6.75z'/%3E%3C/svg%3E");
	}

	.et-mobile-panel .et_b_mobile-panel-more_toggle {
		--dreffiti-bar-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Ccircle cx='5' cy='12' r='1.6'/%3E%3Ccircle cx='12' cy='12' r='1.6'/%3E%3Ccircle cx='19' cy='12' r='1.6'/%3E%3C/svg%3E");
	}
}

@media (max-width: 999px) {
	/* Current page in the bar: the theme marked it with nothing visible. */
	.et-mobile-panel .et_column.active > a {
		color: var(--dreffiti-accent) !important;
	}

	/* An empty wishlist showed a grey "0" bubble on the heart. */
	.et-mobile-panel .et-quantity.count-0 {
		display: none !important;
	}

	/* Close glyph in the same 24px box as the icon it replaces, so the "Több"
	   label does not jump when the sheet opens. */
	.et-mobile-panel .et_column > a .et-svg.et-close {
		width: 24px;
		height: 24px;
		align-items: center;
		justify-content: center;
	}

	/* "Több" sheet: same sentence case and size as the slide-in menu; the stock
	   three-ring glyph in its heading is dropped. */
	.et-mobile-panel .et-mini-content .menu .item-link {
		font-size: 16px !important;
		text-transform: none !important;
	}

	.et-mobile-panel .et-mini-content-head .et_b-icon {
		display: none !important;
	}
}

/* ── Wishlist page on phones (2026-10-10) ──
   The stock table kept its desktop bulk tools on a 390px screen: a checkbox
   column, a "Kosárba / Alkalmaz" select row and, under it, an indented "add all"
   button. Each row already has its own add and remove buttons, so the phone view
   is a plain list with one full-width primary action. Applies up to 991px, where
   the theme switches the table to this compact form (.mob-hide). */
@media (max-width: 991px) {
	.xstore-wishlist-table thead,
	.xstore-wishlist-table .xstore-wishlist-checkbox,
	.xstore-wishlist-form .xstore-wishlist-apply-actions {
		display: none !important;
	}

	.xstore-wishlist-table tbody td {
		padding-top: 16px !important;
		padding-bottom: 16px !important;
		vertical-align: middle;
	}

	.xstore-wishlist-table td.xstore-wishlist-product {
		padding-left: 0 !important;
	}

	.xstore-wishlist-table td.xstore-wishlist-action {
		padding-right: 0 !important;
	}

	.xstore-wishlist-table .xstore-wishlist-image img {
		width: 64px;
		height: 64px;
		object-fit: cover;
	}

	.xstore-wishlist-table .xstore-wishlist-details .product-title {
		display: block;
		color: var(--dreffiti-ink);
		font-size: 16px;
		font-weight: 600;
		line-height: 1.3;
	}

	.xstore-wishlist-table .xstore-wishlist-details .mobile-price {
		display: block;
		margin-top: 4px;
		font-size: 15px;
	}

	.xstore-wishlist-table .xstore-wishlist-details .mobile-price .amount {
		color: var(--dreffiti-ink);
	}

	.xstore-wishlist-form .form-actions,
	.xstore-wishlist-form .form-actions > .flex,
	.xstore-wishlist-form .form-actions > .flex > div:not(.xstore-wishlist-apply-actions) {
		display: block !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	.xstore-wishlist-form a.btn.add-all-products {
		display: flex !important;
		width: 100%;
		min-height: 50px;
		margin: 20px 0 0 !important;
	}
}

/* Wishlist table stepper (desktop column): the markup is nested the other way
   round here (.quantity-wrapper > .quantity, <i> icons), so the shared stepper
   rules above do not match. Same compact pill as in the cart table. */
.xstore-wishlist-table .quantity-wrapper > .quantity {
	display: inline-flex;
	align-items: stretch;
	height: 44px;
	overflow: hidden;
	border: 1px solid rgba(31, 26, 23, 0.2);
	border-radius: 999px;
	background: #fff;
}

.xstore-wishlist-table .quantity-wrapper {
	height: auto;
}

.xstore-wishlist-table .quantity-wrapper > .quantity .minus,
.xstore-wishlist-table .quantity-wrapper > .quantity .plus {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 38px !important;
	height: auto;
	border: 0 !important;
	background: transparent;
	color: var(--dreffiti-ink) !important;
}

.xstore-wishlist-table .quantity-wrapper > .quantity .et-icon {
	color: inherit;
}

.xstore-wishlist-table .quantity-wrapper > .quantity input.qty {
	width: 40px !important;
	height: auto;
	border: 0 !important;
	background: transparent;
	color: var(--dreffiti-ink);
	font-size: 16px;
	font-weight: 700;
	text-align: center;
}

/* Compact wishlist rows: a variable product's button opens the product page
   (a size has to be picked there), but showed the same bag as "add to cart".
   It gets an arrow and the outlined look of a link instead. */
@media (max-width: 991px) {
	.xstore-wishlist-form .actions-buttons a.button.product_type_variable {
		border-color: rgba(31, 26, 23, 0.22) !important;
		background: transparent !important;
		color: var(--dreffiti-ink) !important;
	}

	.xstore-wishlist-form .actions-buttons a.button.product_type_variable svg {
		display: none;
	}

	.xstore-wishlist-form .actions-buttons a.button.product_type_variable::before {
		content: "";
		width: 20px;
		height: 20px;
		background-color: currentColor;
		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	}
}

/* Footer: legal links in one quiet row under the columns. */
.dreffiti-site-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	grid-column: 1 / -1;
	padding-top: 1.25rem;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	font-size: 14px;
}

.dreffiti-site-footer__legal a {
	color: rgba(255, 255, 255, 0.78);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.dreffiti-site-footer__legal a:hover,
.dreffiti-site-footer__legal a:focus-visible {
	color: #fff;
}

/* Checkout: terms checkbox and its text on one line-box, not wrapped under it. */
.woocommerce-terms-and-conditions-wrapper .validate-required label.checkbox {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 16px;
	font-weight: 400;
}

.woocommerce-terms-and-conditions-wrapper .validate-required label.checkbox input[type="checkbox"] {
	flex: 0 0 auto;
	margin: 4px 0 0;
}

.woocommerce-terms-and-conditions-wrapper .validate-required label.checkbox a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Footer: Facebook and Instagram under the contact line. */
.dreffiti-site-footer__social {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	margin-top: 0.9rem !important;
}

.dreffiti-site-footer__social a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 32px;
	color: #fffaf6;
	text-decoration: none;
}

.dreffiti-site-footer__social a:hover span,
.dreffiti-site-footer__social a:focus-visible span {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Contact page: the same two links under the intro. */
.dreffiti-contact__social a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ── "Munkáim" reference gallery ([dreffiti_portfolio]) ── */
.dreffiti-portfolio__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 28px;
}

.dreffiti-portfolio__filters button {
	min-height: 44px;
	padding: 0 16px;
	border: 1px solid rgba(31, 26, 23, 0.22);
	border-radius: 999px;
	background: transparent;
	color: var(--dreffiti-ink);
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.dreffiti-portfolio__filters button:hover {
	border-color: var(--dreffiti-accent);
	color: var(--dreffiti-accent);
}

.dreffiti-portfolio__filters button.is-active {
	border-color: var(--dreffiti-ink);
	background: var(--dreffiti-ink);
	color: #fffaf6;
}

/* Without the script: plain columns. With it (.is-masonry): a grid whose cells
   span 4px rows, which reads left to right and lets filtered photos glide. */
.dreffiti-portfolio__grid {
	column-count: 2;
	column-gap: 12px;
}

.dreffiti-portfolio__item {
	display: block;
	margin: 0 0 12px;
	break-inside: avoid;
	border-radius: 10px;
	overflow: hidden;
	background: var(--dreffiti-wash);
}

.dreffiti-portfolio__item[hidden] {
	display: none;
}

.dreffiti-portfolio__item img {
	display: block;
	width: 100%;
	height: auto;
	transition: transform 0.35s ease;
}

.dreffiti-portfolio__item:hover img {
	transform: scale(1.04);
}

.dreffiti-portfolio__item:focus-visible {
	outline: 3px solid var(--dreffiti-accent);
	outline-offset: 2px;
}

.dreffiti-portfolio.is-masonry .dreffiti-portfolio__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-auto-rows: 4px;
	gap: 0 12px;
	column-count: auto;
}

.dreffiti-portfolio.is-masonry .dreffiti-portfolio__item {
	margin: 0 0 12px;
}

.dreffiti-portfolio.is-masonry .dreffiti-portfolio__item img {
	height: 100%;
	object-fit: cover;
}

@media (min-width: 700px) {
	.dreffiti-portfolio__grid {
		column-count: 3;
		column-gap: 16px;
	}

	.dreffiti-portfolio.is-masonry .dreffiti-portfolio__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 0 16px;
	}

	.dreffiti-portfolio__item,
	.dreffiti-portfolio.is-masonry .dreffiti-portfolio__item {
		margin-bottom: 16px;
	}
}

@media (min-width: 1100px) {
	.dreffiti-portfolio__grid {
		column-count: 4;
	}

	.dreffiti-portfolio.is-masonry .dreffiti-portfolio__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (prefers-reduced-motion: reduce) {
	.dreffiti-portfolio__item img {
		transition: none;
	}

	.dreffiti-portfolio__item:hover img {
		transform: none;
	}
}

/* Text pages built from blocks (Munkáim intro, GYIK): comfortable measure. */
.dreffiti-faq details {
	border-bottom: 1px solid var(--dreffiti-line);
}

.dreffiti-faq summary {
	padding: 16px 28px 16px 0;
	color: var(--dreffiti-ink);
	font-size: 17px;
	font-weight: 700;
	cursor: pointer;
}

.dreffiti-faq details p {
	margin: 0 0 18px;
	max-width: 68ch;
}

/* FAQ rows: own chevron instead of the browser's triangle, and a short reveal. */
.dreffiti-faq summary {
	position: relative;
	list-style: none;
}

.dreffiti-faq summary::-webkit-details-marker {
	display: none;
}

.dreffiti-faq summary::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 6px;
	width: 10px;
	height: 10px;
	margin-top: -8px;
	border-right: 2px solid var(--dreffiti-ink);
	border-bottom: 2px solid var(--dreffiti-ink);
	transform: rotate(45deg);
	transition: transform 0.2s ease;
}

.dreffiti-faq details[open]:not([data-closing]) summary::after {
	margin-top: -2px;
	transform: rotate(-135deg);
}

.dreffiti-faq summary:hover {
	color: var(--dreffiti-accent);
}

/* The answer slides open and shut (script in dreffiti_render_faq_script());
   it is clipped while its height animates. */
.dreffiti-faq details > p {
	overflow: hidden;
}

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

/* Product gallery: the theme's spacer between the main photo and the thumbnail
   strip collapses to 0, so the strip touched the photo's rounded bottom edge and
   sat 5px to its left. */
.single-product .swiper-entry.images-wrapper > .swiper-control-bottom {
	margin-top: 12px;
}

.single-product .swiper-entry.images-wrapper .thumbnails-list {
	margin-left: 0;
	margin-right: 0;
}

/* XStore slides the phone bottom bar away (class "outside") within about 100px
   of the page end so it does not cover the footer. The page already reserves the
   bar's height below the footer, so hiding it only left an empty white strip and
   no navigation at the bottom. Keep it in place. */
@media (max-width: 999px) {
	.et-mobile-panel-wrapper.outside {
		transform: none !important;
		opacity: 1 !important;
		visibility: visible !important;
	}
}

/* Photo viewer (Elementor's lightbox, used by the Munkáim gallery): a darker
   backdrop so the page behind does not compete with the artwork. */
.elementor-lightbox.dialog-type-lightbox {
	background-color: rgba(24, 20, 18, 0.92) !important;
}

/* Made-to-order products: earlier work and FAQ links under the buy block. */
.dreffiti-product-refs {
	margin-top: 0.75rem;
	padding: 0.85rem 0.95rem;
	border: 1px solid rgba(31, 26, 23, 0.1);
	border-radius: 12px;
	background: rgba(255, 253, 250, 0.72);
}

.dreffiti-product-refs strong {
	display: block;
	margin-bottom: 10px;
	color: var(--dreffiti-ink);
	font-size: 15px;
}

.dreffiti-product-refs__thumbs {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px;
	margin-bottom: 12px;
}

.dreffiti-product-refs__thumbs img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 10px;
}

.dreffiti-product-refs p {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 20px;
	margin: 0;
	font-size: 15px;
}

.dreffiti-product-refs p a {
	color: var(--dreffiti-accent);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ── Rólam: exhibitions under the portrait, closing buttons, full-width
   feature strip (2026-10-12) ──
   The left column held only the portrait next to a text column three times
   its height. The exhibitions list (widget e5a1b20) now sits under the photo,
   the feature strip (section f3b7c14) spans both columns. */
.dreffiti-about-exhibitions {
	margin-top: 36px;
	padding: 30px 32px 26px;
	background: var(--dreffiti-wash);
	border-radius: 20px;
	color: var(--dreffiti-muted);
}

.dreffiti-about-exhibitions .dreffiti-about-heading {
	margin-top: 0;
	margin-bottom: 18px;
}

/* Section headings inside the story had the same 20px above them as an
   ordinary paragraph break, so the sections ran together. */
.elementor-element-d3e0806 .dreffiti-about-heading {
	margin-top: 44px;
	margin-bottom: 16px;
}

.elementor-element-d3e0806 .dreffiti-about-list {
	margin-bottom: 26px;
}

.elementor-4415 .elementor-element.elementor-element-673ff78 {
	margin-top: 60px;
}

@media (min-width: 1025px) {
	.elementor-4415 .elementor-element.elementor-element-c71d88c > .elementor-element-populated.elementor-element-populated {
		margin-right: 30px;
	}

	.elementor-4415 .elementor-element.elementor-element-631bd7a > .elementor-element-populated.elementor-element-populated {
		margin-left: 30px;
	}
}

.dreffiti-about-timeline {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: 18px;
	margin: 0;
	font-size: 16px;
	line-height: 1.5;
}

.dreffiti-about-timeline dt {
	grid-column: 1;
	margin: 0;
	color: var(--dreffiti-ink);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.dreffiti-about-timeline dd {
	grid-column: 2;
	margin: 0;
	padding-bottom: 6px;
}

.dreffiti-about-timeline dt:not(:first-child),
.dreffiti-about-timeline dt:not(:first-child) + dd {
	margin-top: 6px;
	padding-top: 12px;
	border-top: 1px solid var(--dreffiti-line);
}

.dreffiti-about-next {
	margin-top: 28px;
	padding-top: 36px;
	border-top: 1px solid var(--dreffiti-line);
}

.dreffiti-about-next .dreffiti-about-cta {
	margin: 0;
}

.dreffiti-about-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 24px;
}

/* A plain link inside the page text looked exactly like the text around it. */
.elementor-4415 .elementor-widget-text-editor p > a:not([class]) {
	color: var(--dreffiti-accent);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.elementor-4415 .elementor-element.elementor-element-f3b7c14 {
	margin-top: 80px;
}

.elementor-element-f3b7c14 .dreffiti-about-features {
	margin-top: 0;
	padding-top: 40px;
}

@media (min-width: 1025px) {
	.elementor-element-f3b7c14 .dreffiti-about-features {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	/* Phones: portrait, story, exhibitions, closing buttons. The exhibitions
	   widget lives in the first column, so the columns are dissolved and the
	   widgets ordered directly. */
	.elementor-element-673ff78 > .elementor-container {
		flex-direction: column;
		flex-wrap: nowrap;
	}

	.elementor-element-673ff78 > .elementor-container > .elementor-column,
	.elementor-element-673ff78 > .elementor-container > .elementor-column > .elementor-widget-wrap {
		display: contents;
	}

	.elementor-element-673ff78 .elementor-element-4f83fe6 {
		order: 1;
	}

	.elementor-4415 .elementor-element.elementor-element-673ff78 {
		margin-top: 28px;
	}

	.elementor-element-673ff78 .elementor-element-d3e0806 {
		order: 2;
		margin-top: 32px;
	}

	.elementor-element-d3e0806 .dreffiti-about-heading {
		margin-top: 40px;
	}

	.elementor-element-673ff78 .elementor-element-e5a1b20 {
		order: 3;
	}

	.elementor-element-673ff78 .elementor-element-b8c2f47 {
		order: 4;
		margin-top: 20px;
	}

	.dreffiti-about-exhibitions {
		margin-top: 24px;
		padding: 24px 20px 20px;
	}

	.dreffiti-about-heading {
		font-size: 20px;
	}

	.dreffiti-about-list li {
		font-size: 16px;
	}

	.dreffiti-about-actions .dreffiti-home__button {
		flex: 1 1 100%;
	}

	.elementor-4415 .elementor-element.elementor-element-f3b7c14 {
		margin-top: 52px;
	}

	.elementor-element-f3b7c14 .dreffiti-about-features {
		padding-top: 32px;
	}
}

/* Plain links inside the text of ordinary pages (Munkáim, GYIK, legal pages)
   were ink on grey with no underline, i.e. indistinguishable from the text.
   Same treatment as the Rólam text links. WooCommerce pages are left alone. */
body.page:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) .content-page .content :is(p, li, dd) > a:not([class]):not(.woocommerce a):not(.elementor a) {
	color: var(--dreffiti-accent);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ── Review round 2026-10-12: homepage proof strip, larger hero art, one
   body size, closing blocks on Munkáim / GYIK ── */

/* Earlier works: one row of six square thumbnails, three per row on phones. */
.dreffiti-home__works {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 14px;
}

.dreffiti-home__works a {
	display: block;
	overflow: hidden;
	aspect-ratio: 1;
	border-radius: 16px;
	background: rgba(202, 111, 71, 0.1);
}

.dreffiti-home__works img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.25s ease;
}

.dreffiti-home__works a:hover img {
	transform: scale(1.04);
}

.dreffiti-home__order-faq {
	margin: 18px 0 0;
}

/* Closing "what next" block (Munkáim, GYIK). */
.dreffiti-next-step {
	margin-top: 56px;
	padding: 32px 34px;
	border-radius: 20px;
	background: var(--dreffiti-wash);
}

.dreffiti-next-step h2 {
	margin: 0 0 8px;
	font-size: 24px;
	line-height: 1.2;
	text-transform: none;
}

.dreffiti-next-step p {
	max-width: 60ch;
	margin: 0;
	color: var(--dreffiti-muted);
	font-size: 16px;
	line-height: 1.6;
}

/* Munkáim: the two intro lines ran the full 1140px width. */
.page-id-5694 .content-page .content > p {
	max-width: 68ch;
}

@media (min-width: 768px) {
	/* The painting is the product: a square frame of the same height shows a
	   quarter more of it without pushing the products down. */
	.dreffiti-home__hero-art {
		aspect-ratio: 1;
	}

	.dreffiti-home__hero-art img {
		object-position: 50% 22%;
	}

	/* Homepage body text was 13-15px here (rem on XStore's 14px root) while
	   every other page reads at 16px. */
	.dreffiti-home__lead {
		font-size: 17px;
	}

	.dreffiti-home__about-copy p,
	.dreffiti-home__steps span {
		font-size: 16px;
	}

	.dreffiti-home__steps strong {
		font-size: 16.5px;
	}

	.dreffiti-home__trust-item strong {
		font-size: 16px;
	}

	.dreffiti-home__trust-item span,
	.dreffiti-home__hero-caption,
	.dreffiti-home__categories,
	.dreffiti-home__categories a {
		font-size: 14.5px;
	}

	.dreffiti-home__more,
	.dreffiti-home__about-links a,
	.dreffiti-home__button {
		font-size: 15px;
	}
}

@media (max-width: 767px) {
	.dreffiti-home__works {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 10px;
	}

	.dreffiti-home__works a {
		border-radius: 12px;
	}

	.dreffiti-next-step {
		margin-top: 40px;
		padding: 24px 20px;
	}

	.dreffiti-next-step h2 {
		font-size: 21px;
	}
}

/* Christmas ordering deadline (homepage portrait block, made-to-order products). */
.dreffiti-deadline {
	margin: 14px 0 0;
	padding: 12px 16px;
	border-left: 3px solid var(--dreffiti-accent);
	border-radius: 0 12px 12px 0;
	background: rgba(173, 83, 44, 0.08);
	color: var(--dreffiti-ink);
	font-size: 15.5px;
	line-height: 1.5;
}

.single-product .dreffiti-deadline {
	margin: 0 0 18px;
}

/* Shop paused (see shop-paused.php): the notice reuses the deadline callout, and
   every shop entry point in the Elementor header and the phone bottom bar goes. */
.dreffiti-pause {
	margin: 14px 0 0;
	padding: 12px 16px;
	border-left: 3px solid var(--dreffiti-accent);
	border-radius: 0 12px 12px 0;
	background: rgba(173, 83, 44, 0.08);
	color: var(--dreffiti-ink);
	font-size: 15.5px;
	line-height: 1.5;
}

.dreffiti-home__hero-copy .dreffiti-pause {
	margin: 22px 0;
}

/* Header widgets: search 3ac3f530, wishlist 74326882, cart 3b721982; the phone
   menu's account / wishlist / search rows; the bottom bar's shop and wishlist. */
body.dreffiti-shop-paused .elementor-element-3ac3f530,
body.dreffiti-shop-paused .elementor-element-74326882,
body.dreffiti-shop-paused .etheme-elementor-mobile-menu-account,
body.dreffiti-shop-paused .etheme-elementor-mobile-menu-wishlist,
body.dreffiti-shop-paused .etheme-elementor-mobile-menu-search,
body.dreffiti-shop-paused .et_b_mobile-panel-shop,
body.dreffiti-shop-paused .et_b_mobile-panel-wishlist {
	display: none !important;
}

/* The cart widget is the right-hand spacer that keeps the logo centred on phones
   and tablets, so it stays in the layout there and only turns invisible. */
body.dreffiti-shop-paused .elementor-element-3b721982 {
	visibility: hidden;
	pointer-events: none;
}

@media (min-width: 1025px) {
	body.dreffiti-shop-paused .elementor-element-3b721982 {
		display: none;
	}
}

/* Phone menu: the "Kategóriák" tab lists product categories; with one tab left the
   tab bar itself is redundant. */
body.dreffiti-shop-paused .et_b-tabs,
body.dreffiti-shop-paused .et_b-tab-content[data-tab-name="wp_menu_extra"] {
	display: none !important;
}