/**
 * DLZF site stylesheet — loads after style.css, full visual layer.
 * Brand: red rgb(255,45,45) + black/white/gray. Real e-commerce look.
 */

/* ================= Global link & focus reset =================
   Overrides _s defaults: blue/purple visited links + dotted outlines. */
a { color: var(--dlzf-ink); }
a:visited { color: var(--dlzf-ink); }
a:hover { color: var(--dlzf-accent); }
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
	outline: none;
}
a:focus-visible,
button:focus-visible {
	outline: 2px solid var(--dlzf-accent);
	outline-offset: 2px;
	border-radius: 2px;
}

/* ================= Tokens ================= */
:root {
	--dlzf-accent: rgb(255, 45, 45);
	--dlzf-accent-dark: rgb(214, 32, 32);
	--dlzf-accent-soft: rgba(255, 45, 45, 0.08);
	--dlzf-ink: #111;
	--dlzf-gray: #666;
	--dlzf-line: #e8e8e8;
	--dlzf-bg-soft: #f7f6f4;
	--dlzf-font: "Helvetica Neue", Helvetica, Arial, "Segoe UI", sans-serif;
	--dlzf-transition: 0.25s ease;
}

/* ================= Base ================= */
body {
	font-family: var(--dlzf-font);
	color: var(--dlzf-ink);
	font-size: 16px;
	line-height: 1.7;
}
/* WP gives the static front page a `page` body class, which collides with
   _s's content rule `.post, .page { margin: 0 0 1.5em }` and leaves a 24px
   white strip under the footer. Kill it on the body element. */
body.page,
body.post {
	margin-bottom: 0;
}
dlzf-h1, h2, h3, h4 { font-weight: 600; line-height: 1.25; }

.dlzf-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
}

/* ================= Header ================= */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: #fff;
	border-bottom: 1px solid var(--dlzf-line);
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02);
}
.dlzf-header-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
	display: flex;
	align-items: center;
	gap: 32px;
	min-height: 72px;
}
.site-branding { flex-shrink: 0; }
.custom-logo {
	display: block;
	width: auto;
	height: 64px;
	width: 64px;
	object-fit: contain;
}
.site-title {
	margin: 0;
	font-size: 22px;
	font-weight: 700;
	letter-spacing: 0.02em;
}
.site-title a { color: var(--dlzf-ink); text-decoration: none; }
.site-description { display: none; }

.main-navigation { flex: 1; }
.main-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 4px;
}
.main-navigation li { position: relative; margin: 0; padding: 0; }
.main-navigation a {
	display: block;
	padding: 10px 14px;
	font-size: 15px;
	font-weight: 500;
	color: var(--dlzf-ink);
	text-decoration: none;
	transition: color var(--dlzf-transition);
}
.main-navigation a:hover,
.main-navigation li.current-menu-item > a,
.main-navigation li.current_page_item > a {
	color: var(--dlzf-accent);
}
/* Dropdown */
.main-navigation ul ul {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 240px;
	background: #fff;
	border: 1px solid var(--dlzf-line);
	border-radius: 4px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
	display: block;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity var(--dlzf-transition), transform var(--dlzf-transition), visibility var(--dlzf-transition);
	padding: 8px 0;
	z-index: 99;
}
.main-navigation ul ul li { width: 100%; }
.main-navigation ul ul a {
	padding: 9px 20px;
	font-size: 14px;
	font-weight: 400;
	white-space: nowrap;
}
.main-navigation ul li:hover > ul,
.main-navigation ul li:focus-within > ul {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.dlzf-header-actions {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-shrink: 0;
}
.dlzf-cart-link {
	position: relative;
	display: inline-flex;
	align-items: center;
	color: var(--dlzf-ink);
	transition: color var(--dlzf-transition);
}
.dlzf-cart-link:hover { color: var(--dlzf-accent); }
.dlzf-cart-count {
	position: absolute;
	top: -7px;
	right: -10px;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	background: var(--dlzf-accent);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	line-height: 17px;
	text-align: center;
	border-radius: 9px;
}
.dlzf-header-cta {
	padding: 9px 20px;
	background: var(--dlzf-accent);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	border-radius: 3px;
	transition: background var(--dlzf-transition);
}
.dlzf-header-cta:hover { background: var(--dlzf-accent-dark); color: #fff; }

/* Hamburger (mobile) */
.menu-toggle {
	display: none;
	background: none;
	border: none;
	padding: 8px;
	cursor: pointer;
	flex-direction: column;
	gap: 5px;
}
.menu-toggle__bar {
	display: block;
	width: 22px;
	height: 2px;
	background: var(--dlzf-ink);
	transition: transform var(--dlzf-transition), opacity var(--dlzf-transition);
}

/* ================= Hero ================= */
.dlzf-hero {
	position: relative;
	min-height: 560px;
	display: flex;
	align-items: center;
	background-size: cover;
	background-position: center right;
}
.dlzf-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.82) 34%, rgba(255,255,255,0.12) 72%, rgba(255,255,255,0) 100%);
}
.dlzf-hero__inner {
	position: relative;
	max-width: 1200px;
	margin: 0 auto;
	padding: 80px 24px;
	width: 100%;
}
.dlzf-hero__kicker {
	margin: 0 0 18px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--dlzf-accent);
}
.dlzf-hero__title {
	margin: 0 0 22px;
	font-size: 52px;
	font-weight: 700;
	line-height: 1.15;
	color: var(--dlzf-ink);
}
.dlzf-hero__sub {
	margin: 0 0 34px;
	max-width: 480px;
	font-size: 18px;
	color: var(--dlzf-gray);
}
.dlzf-hero__actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* ================= Buttons ================= */
.dlzf-btn {
	display: inline-block;
	padding: 14px 34px;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	border-radius: 3px;
	border: 2px solid transparent;
	transition: all var(--dlzf-transition);
	cursor: pointer;
}
.dlzf-btn--primary { background: var(--dlzf-accent); color: #fff; }
.dlzf-btn--primary:hover { background: var(--dlzf-accent-dark); color: #fff; transform: translateY(-1px); }
.dlzf-btn--ghost { background: transparent; color: var(--dlzf-ink); border-color: var(--dlzf-ink); }
.dlzf-btn--ghost:hover { background: var(--dlzf-ink); color: #fff; }
.dlzf-btn--outline { background: transparent; color: var(--dlzf-accent); border-color: var(--dlzf-accent); }
.dlzf-btn--outline:hover { background: var(--dlzf-accent); color: #fff; }
.dlzf-btn--light { background: #fff; color: var(--dlzf-ink); }
.dlzf-btn--light:hover { background: var(--dlzf-accent); color: #fff; }

/* ================= Trust bar ================= */
.dlzf-trustbar {
	background: var(--dlzf-ink);
	color: #fff;
}
.dlzf-trustbar__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 14px 24px;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px 28px;
	font-size: 13.5px;
	font-weight: 500;
	letter-spacing: 0.04em;
}

/* ================= Sections ================= */
.dlzf-section { padding: 64px 0; }
.dlzf-section__title {
	margin: 0 0 12px;
	text-align: center;
	font-size: 34px;
	font-weight: 700;
}
.dlzf-section__title--left { text-align: left; }
.dlzf-section__sub {
	margin: 0 auto 48px;
	max-width: 620px;
	text-align: center;
	color: var(--dlzf-gray);
	font-size: 16.5px;
}
.dlzf-section__more { text-align: center; margin-top: 48px; }

/* ================= Category cards ================= */
.dlzf-cat-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
.dlzf-cat-card {
	display: block;
	background: #fff;
	border: 1px solid var(--dlzf-line);
	border-radius: 4px;
	overflow: hidden;
	text-decoration: none;
	transition: box-shadow var(--dlzf-transition), transform var(--dlzf-transition);
}
.dlzf-cat-card:hover {
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.09);
	transform: translateY(-3px);
}
.dlzf-cat-card__imgwrap {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--dlzf-bg-soft);
}
.dlzf-cat-card__imgwrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.45s ease;
}
.dlzf-cat-card:hover .dlzf-cat-card__imgwrap img { transform: scale(1.05); }
.dlzf-cat-card__body { padding: 18px 22px 20px; }
.dlzf-cat-card__body h3 {
	margin: 0;
	font-size: 16.5px;
	font-weight: 600;
	color: var(--dlzf-ink);
	transition: color var(--dlzf-transition);
}
.dlzf-cat-card:hover .dlzf-cat-card__body h3 { color: var(--dlzf-accent); }
.dlzf-cat-card__count {
	display: block;
	margin-top: 4px;
	font-size: 13px;
	color: var(--dlzf-gray);
}

/* ================= New Arrivals carousel (inside the category section) ================= */
.dlzf-carousel {
	position: relative;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 56px;
}
/* Variant embedded under the category cards: wider than the grid above for
   hierarchy, but card width stays in sync with the category cards (4-up).
   1268 = 1140 viewport (270*4 + 3*20 gap) + 2*64 button gutters. */
.dlzf-carousel--in-cats {
	max-width: 1268px;
	padding: 0 64px;
	margin: 52px auto 0;
}
.dlzf-carousel__heading {
	text-align: center;
	font-size: 20px;
	font-weight: 700;
	color: var(--dlzf-ink);
	margin: 0 0 22px;
}
.dlzf-carousel__viewport { overflow: hidden; }
/* The [products] shortcode wraps the real ul.products in a div.woocommerce;
   both layers must be neutralized or the inner ul re-wraps into rows. */
.dlzf-carousel .dlzf-carousel-track,
.dlzf-carousel .dlzf-carousel-track ul.products {
	display: flex !important;
	flex-wrap: nowrap !important;
	gap: 20px;
	transition: transform 0.45s ease;
	margin: 0 !important;
	padding: 0 !important;
}
/* The ul.products is the track's only flex child. Without an explicit
   flex/basis it is sized by its own (nowrap) content, which lands wider
   than the viewport and slices the 4th card in half ("3.5 cards"). */
.dlzf-carousel .dlzf-carousel-track > ul.products {
	flex: 1 1 0% !important;
	min-width: 0 !important;
}
.dlzf-carousel .dlzf-carousel-track::before,
.dlzf-carousel .dlzf-carousel-track::after,
.dlzf-carousel .dlzf-carousel-track ul.products::before,
.dlzf-carousel .dlzf-carousel-track ul.products::after { content: none !important; display: none !important; }
.dlzf-carousel .dlzf-carousel-track li.product {
	flex: 0 0 calc((100% - 3 * 20px) / 4);
	min-width: 0;
}
.dlzf-carousel__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 42px;
	height: 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border: 1.5px solid var(--dlzf-ink);
	border-radius: 3px;
	color: var(--dlzf-ink);
	cursor: pointer;
	transition: all var(--dlzf-transition);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}
.dlzf-carousel__nav:hover { background: var(--dlzf-accent); border-color: var(--dlzf-accent); color: #fff; }
.dlzf-carousel__nav--prev { left: 0; }
.dlzf-carousel__nav--next { right: 0; }
.dlzf-carousel__nav.is-hidden { opacity: 0.35; cursor: default; pointer-events: none; }

/* ================= Products section (Woo loops) ================= */
.dlzf-products-section { background: var(--dlzf-bg-soft); }
ul.products {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	margin: 0 !important;
	padding: 0 !important;
}
/* Woo 的 clearfix 伪元素在 grid 布局下会占据第一个网格项，必须禁掉 */
ul.products::before,
ul.products::after {
	content: none !important;
	display: none !important;
}
ul.products li.product {
	width: auto !important;
	float: none !important;
	margin: 0 !important;
	background: #fff;
	border: 1px solid var(--dlzf-line);
	border-radius: 4px;
	overflow: hidden;
	transition: box-shadow var(--dlzf-transition), transform var(--dlzf-transition);
	position: relative;
}
ul.products li.product:hover {
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.09);
	transform: translateY(-3px);
}
ul.products li.product img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;      /* fixed square — a rectangular upload can no longer break the grid */
	object-fit: contain;
	background: #fff;
}
/* Card text. The .woocommerce prefix is required: Woo's own
   `.woocommerce ul.products li.product .woocommerce-loop-product__title`
   rule outranks a plain selector and was silently killing our padding.
   The title reserves exactly two lines so the price row and the button
   line up across every card in the same row. */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	box-sizing: content-box;
	min-height: 3em;
	padding: 18px 22px 0;
	font-size: 15.5px !important;
	font-weight: 600;
	line-height: 1.5;
	color: var(--dlzf-ink);
}
.woocommerce ul.products li.product .price {
	padding: 10px 22px 0;
	margin: 0;
}
.woocommerce ul.products li.product .button { margin: 16px 22px 22px !important; }
.woocommerce ul.products li.product .onsale {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	min-width: auto;
	min-height: auto;
	padding: 4px 10px;
	line-height: 1.4;
	border-radius: 3px;
	font-size: 12px;
	font-weight: 600;
}

/* ================= OEM strip ================= */
.dlzf-oem {
	position: relative;
	min-height: 420px;
	display: flex;
	align-items: center;
	background-size: cover;
	background-position: center;
}
.dlzf-oem__overlay {
	position: absolute;
	inset: 0;
	background: rgba(17, 17, 17, 0.62);
}
.dlzf-oem__inner {
	position: relative;
	max-width: 1200px;
	margin: 0 auto;
	padding: 72px 24px;
	width: 100%;
	color: #fff;
}
.dlzf-oem__inner h2 {
	margin: 0 0 16px;
	font-size: 34px;
	font-weight: 700;
	color: #fff;
}
.dlzf-oem__inner p {
	margin: 0 0 30px;
	max-width: 560px;
	font-size: 17px;
	color: rgba(255, 255, 255, 0.88);
}

/* ================= About teaser ================= */
.dlzf-about-teaser__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 64px;
	align-items: center;
}
.dlzf-about-teaser__text p { color: var(--dlzf-gray); margin: 0 0 18px; }
.dlzf-about-teaser__text .dlzf-btn { margin-top: 10px; }
.dlzf-about-teaser__facts {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}
.dlzf-fact {
	background: var(--dlzf-bg-soft);
	border-radius: 4px;
	padding: 26px 20px;
	text-align: center;
}
.dlzf-fact strong {
	display: block;
	font-size: 34px;
	font-weight: 700;
	color: var(--dlzf-accent);
	line-height: 1.1;
}
.dlzf-fact span {
	display: block;
	margin-top: 6px;
	font-size: 13.5px;
	color: var(--dlzf-gray);
}

/* ================= Footer ================= */
.site-footer {
	background: var(--dlzf-ink);
	color: rgba(255, 255, 255, 0.75);
	margin-top: 0;
}
.dlzf-footer-grid {
	max-width: 1200px;
	margin: 0 auto;
	padding: 64px 24px 48px;
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1.4fr;
	gap: 48px;
}
.dlzf-footer-col--brand { text-align: center; }
.dlzf-footer-logo {
	display: block;
	width: 150px;
	height: 150px;
	object-fit: contain;
	margin: 0 auto 20px;
}
.dlzf-footer-col--brand .dlzf-footer-slogan,
.dlzf-footer-col--brand .dlzf-footer-desc { text-align: center; }
.dlzf-footer-brand {
	margin: 0 0 10px;
	font-size: 19px;
	font-weight: 700;
	color: #fff;
}
.dlzf-footer-slogan {
	margin: 0 0 14px;
	font-size: 13.5px;
	color: var(--dlzf-accent);
	font-weight: 500;
}
.dlzf-footer-desc { margin: 0; font-size: 13.5px; line-height: 1.75; }
.dlzf-footer-heading {
	margin: 0 0 16px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #fff;
}
.dlzf-footer-links {
	list-style: none;
	margin: 0;
	padding: 0;
}
.dlzf-footer-links li { margin-bottom: 10px; font-size: 13.5px; line-height: 1.65; }
.dlzf-footer-links a {
	color: rgba(255, 255, 255, 0.72);
	text-decoration: none;
	transition: color var(--dlzf-transition);
}
.dlzf-footer-links a:hover { color: var(--dlzf-accent); }
.dlzf-footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.dlzf-footer-bottom p {
	max-width: 1200px;
	margin: 0 auto;
	padding: 18px 24px;
	font-size: 12.5px;
	color: rgba(255, 255, 255, 0.45);
}

/* ================= Back to top ================= */
.dlzf-backtop {
	position: fixed;
	right: 28px;
	bottom: 28px;
	width: 44px;
	height: 44px;
	border: none;
	border-radius: 50%;
	background: var(--dlzf-accent);
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition: all var(--dlzf-transition);
	box-shadow: 0 6px 16px rgba(255, 45, 45, 0.35);
	z-index: 90;
}
.dlzf-backtop.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.dlzf-backtop:hover { background: var(--dlzf-accent-dark); }

/* ================= Inner pages ================= */
.site-content { padding: 0; }
.content-area { max-width: 1200px; margin: 0 auto; padding: 56px 24px; width: 100%; }
.site-main { width: 100%; }

/* --- Page hero (inner pages) --- */
.dlzf-page-hero {
	background: var(--dlzf-bg-soft);
	border-bottom: 1px solid var(--dlzf-line);
	padding: 44px 0 48px;
}
/* Banner variant: full-bleed photo with dark overlay, white text */
.dlzf-page-hero--img {
	position: relative;
	/* Fallback tint: the title here is white, so the band must never be left
	   light while the photo is still on its way (slow mobile). */
	background-color: #10161d;
	/* Set from the stylesheet (not inline) so the ≤640px rule below can win. */
	background-image: var(--dlzf-hero-lg);
	background-size: cover;
	background-position: center;
	border-bottom: none;
	padding: 96px 0 104px;
}
/* Phones get the light variant (51 KB instead of 203 KB) via the custom
   properties the PHP hero prints inline; falls back to the large one. */
@media (max-width: 640px) {
	.dlzf-page-hero--img { background-image: var(--dlzf-hero-sm, var(--dlzf-hero-lg)); }
}
.dlzf-page-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(17, 24, 32, 0.78) 0%, rgba(17, 24, 32, 0.45) 60%, rgba(17, 24, 32, 0.25) 100%);
}
.dlzf-page-hero--img .dlzf-page-hero__inner { position: relative; z-index: 1; }
.dlzf-page-hero--img .dlzf-breadcrumb__current,
.dlzf-page-hero--img .dlzf-page-hero__title { color: #fff; }
.dlzf-page-hero--img .dlzf-breadcrumb a { color: rgba(255, 255, 255, 0.75); }
.dlzf-page-hero--img .dlzf-breadcrumb a:hover { color: #fff; }
.dlzf-page-hero--img .dlzf-page-hero__subtitle { color: rgba(255, 255, 255, 0.88); }
.dlzf-page-hero__inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.dlzf-breadcrumb {
	font-size: 13px;
	color: var(--dlzf-gray);
	margin-bottom: 22px;
	display: flex;
	align-items: center;
	gap: 8px;
}
.dlzf-breadcrumb a { color: var(--dlzf-gray); text-decoration: none; transition: color var(--dlzf-transition); }
.dlzf-breadcrumb a:hover { color: var(--dlzf-accent); }
.dlzf-breadcrumb__current { color: var(--dlzf-ink); font-weight: 500; }
.dlzf-page-hero__kicker {
	margin: 0 0 10px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--dlzf-accent);
}
.dlzf-page-hero__title {
	margin: 0 0 14px;
	font-size: 40px;
	font-weight: 700;
	line-height: 1.15;
	color: var(--dlzf-ink);
}
.dlzf-page-hero__subtitle {
	margin: 0;
	max-width: 640px;
	font-size: 17px;
	line-height: 1.65;
	color: var(--dlzf-gray);
}

/* --- Shared section/card primitives --- */
.dlzf-section--soft { background: var(--dlzf-bg-soft); }
.dlzf-card-grid { display: grid; gap: 24px; }
.dlzf-card-grid--4 { grid-template-columns: repeat(4, 1fr); }
.dlzf-card-grid--2 { grid-template-columns: repeat(2, 1fr); }
.dlzf-card {
	background: #fff;
	border: 1px solid var(--dlzf-line);
	border-radius: 4px;
	padding: 26px 24px;
	transition: box-shadow var(--dlzf-transition), transform var(--dlzf-transition);
}
.dlzf-card:hover { box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08); transform: translateY(-3px); }
.dlzf-card h3 { margin: 0 0 10px; font-size: 17px; font-weight: 600; color: var(--dlzf-ink); }
.dlzf-card p { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--dlzf-gray); }

/* Photo card: image on top, text below */
.dlzf-photo-card {
	background: #fff;
	border: 1px solid var(--dlzf-line);
	border-radius: 4px;
	overflow: hidden;
	transition: box-shadow var(--dlzf-transition), transform var(--dlzf-transition);
}
.dlzf-photo-card:hover { box-shadow: 0 12px 28px rgba(0, 0, 0, 0.09); transform: translateY(-3px); }
.dlzf-photo-card__img { aspect-ratio: 4 / 3; overflow: hidden; background: var(--dlzf-bg-soft); }
.dlzf-photo-card__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.45s ease;
}
.dlzf-photo-card:hover .dlzf-photo-card__img img { transform: scale(1.04); }
.dlzf-photo-card__body { padding: 20px 22px 24px; }
.dlzf-photo-card__body h3 { margin: 0 0 8px; font-size: 16.5px; font-weight: 600; color: var(--dlzf-ink); }
.dlzf-photo-card__body p { margin: 0; font-size: 14px; line-height: 1.65; color: var(--dlzf-gray); }

/* --- About: story (text | photo) + facts strip --- */
.dlzf-story-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: 56px;
	align-items: center;
}
.dlzf-story-grid__text .entry-content { margin-top: 8px; }
.dlzf-story-grid__text .entry-content p { font-size: 15.5px; line-height: 1.8; color: var(--dlzf-gray); }
.dlzf-story-grid__photo { margin: 0; }
.dlzf-story-grid__photo img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 4px;
	display: block;
	border: 1px solid var(--dlzf-line);
}
.dlzf-story-grid__photo figcaption {
	margin-top: 10px;
	font-size: 13px;
	color: var(--dlzf-gray);
	text-align: center;
}
.dlzf-story-facts {
	margin-top: 56px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}
.dlzf-story-facts__item {
	background: var(--dlzf-bg-soft);
	border-radius: 4px;
	padding: 26px 22px;
	text-align: center;
}
.dlzf-story-facts__item strong {
	display: block;
	font-size: 34px;
	font-weight: 700;
	color: var(--dlzf-accent);
	line-height: 1.1;
}
.dlzf-story-facts__item span {
	display: block;
	margin-top: 6px;
	font-size: 13.5px;
	color: var(--dlzf-gray);
}

/* --- About: office cards --- */
.dlzf-office-card {
	background: var(--dlzf-bg-soft);
	border: 1px solid var(--dlzf-line);
	border-radius: 4px;
	padding: 30px 28px;
	transition: border-color var(--dlzf-transition), box-shadow var(--dlzf-transition);
}
.dlzf-office-card:hover { border-color: var(--dlzf-accent); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06); }
.dlzf-office-card__city { margin: 0 0 2px; font-size: 21px; font-weight: 700; color: var(--dlzf-ink); }
.dlzf-office-card__role {
	margin: 0 0 16px;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--dlzf-accent);
}
.dlzf-office-card__line { margin: 0 0 8px; font-size: 14.5px; line-height: 1.7; color: var(--dlzf-gray); }
.dlzf-office-card__line a { color: var(--dlzf-ink); font-weight: 600; text-decoration: none; }
.dlzf-office-card__line a:hover { color: var(--dlzf-accent); }
.dlzf-office-card__tel-label,
.dlzf-contact-info-card__tel-label {
	display: inline-block;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--dlzf-ink);
	margin-right: 6px;
}

/* --- OEM: offer rows --- */
.dlzf-offer-list {
	border-top: 1px solid var(--dlzf-line);
}
.dlzf-offer-row {
	display: grid;
	grid-template-columns: 300px 1fr;
	gap: 32px;
	padding: 26px 6px;
	border-bottom: 1px solid var(--dlzf-line);
	align-items: baseline;
	transition: background var(--dlzf-transition);
}
.dlzf-offer-row:hover { background: var(--dlzf-bg-soft); }
.dlzf-offer-row h3 {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
	color: var(--dlzf-ink);
	position: relative;
	padding-left: 18px;
}
.dlzf-offer-row h3::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.5em;
	width: 8px;
	height: 8px;
	background: var(--dlzf-accent);
	border-radius: 2px;
}
.dlzf-offer-row p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--dlzf-gray); }

/* --- OEM: process flow --- */
.dlzf-flow {
	list-style: none;
	margin: 32px 0 8px;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	row-gap: 20px;
	align-items: center;
}
.dlzf-flow__step {
	background: #fff;
	border: 1px solid var(--dlzf-line);
	border-radius: 4px;
	padding: 14px 22px;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--dlzf-ink);
	white-space: nowrap;
}
.dlzf-flow__step--arrow { margin-right: 42px; position: relative; }
.dlzf-flow__step--arrow::after {
	content: "";
	position: absolute;
	right: -30px;
	top: 50%;
	width: 18px;
	height: 1.5px;
	background: var(--dlzf-accent);
}
.dlzf-flow__step--arrow::before {
	content: "";
	position: absolute;
	right: -30px;
	top: 50%;
	transform: translateY(-50%);
	border-left: 8px solid var(--dlzf-accent);
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
}

/* --- OEM: markets / scope cards --- */
.dlzf-scope-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 28px;
}
.dlzf-scope-card {
	background: var(--dlzf-ink);
	color: rgba(255, 255, 255, 0.85);
	border-radius: 4px;
	padding: 34px 36px 32px;
}
.dlzf-scope-card__title {
	margin: 0 0 12px;
	font-size: 20px;
	font-weight: 700;
	color: #fff;
	display: inline-block;
	border-bottom: 2px solid var(--dlzf-accent);
	padding-bottom: 8px;
}
.dlzf-scope-card p { margin: 0; font-size: 15.5px; line-height: 1.75; }
.dlzf-scope-card--accent {
	background: var(--dlzf-accent);
	color: rgba(255, 255, 255, 0.92);
}
.dlzf-scope-card--accent .dlzf-scope-card__title { border-bottom-color: rgba(255, 255, 255, 0.7); }

/* --- OEM: form wrap --- */
.dlzf-form-wrap { max-width: 860px; }

/* --- Contact: form + info layout --- */
.dlzf-contact-layout {
	display: grid;
	grid-template-columns: 1.5fr 1fr;
	gap: 56px;
	align-items: stretch;
}
.dlzf-contact-layout__info {
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.dlzf-contact-layout__lead { margin: 4px 0 26px; font-size: 15.5px; line-height: 1.7; color: var(--dlzf-gray); }
.dlzf-contact-info-card {
	background: var(--dlzf-ink);
	color: #fff;
	border-radius: 4px;
	padding: 30px 28px;
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.dlzf-contact-info-note { margin-top: auto; }
.dlzf-contact-info-card__city {
	margin: 0 0 12px;
	font-size: 18px;
	font-weight: 700;
	color: #fff;
	border-bottom: 2px solid var(--dlzf-accent);
	display: inline-block;
	padding-bottom: 8px;
}
.dlzf-contact-info-card__line { margin: 0 0 8px; font-size: 14px; line-height: 1.7; color: rgba(255, 255, 255, 0.85); }
.dlzf-contact-info-card__line a { color: #fff; font-weight: 600; text-decoration: none; }
.dlzf-contact-info-card__line a:hover { color: var(--dlzf-accent); }
.dlzf-contact-info-note {
	background: var(--dlzf-accent-soft);
	border-left: 3px solid var(--dlzf-accent);
	border-radius: 0 4px 4px 0;
	padding: 20px 22px;
}
.dlzf-contact-info-note h3 { margin: 0 0 8px; font-size: 15px; font-weight: 600; color: var(--dlzf-ink); }
.dlzf-contact-info-note p { margin: 0; font-size: 13.5px; line-height: 1.7; color: var(--dlzf-gray); }

/* --- CTA strip (about / reusable) --- */
.dlzf-cta-strip { background: var(--dlzf-ink); padding: 56px 0; }
.dlzf-cta-strip__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
}
.dlzf-cta-strip h2 { margin: 0 0 8px; font-size: 28px; font-weight: 700; color: #fff; }
.dlzf-cta-strip p { margin: 0; font-size: 15.5px; color: rgba(255, 255, 255, 0.8); }

/* --- Shop: category pill bar --- */
.dlzf-shop-bar {
	background: var(--dlzf-bg-soft);
	border-bottom: 1px solid var(--dlzf-line);
	padding: 18px 0;
}
.dlzf-shop-bar__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	align-items: center;
}
.dlzf-shop-bar__label {
	width: 100%;
	text-align: center;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--dlzf-gray);
}
.dlzf-shop-pill {
	display: inline-block;
	padding: 9px 22px;
	border: 1.5px solid var(--dlzf-ink);
	border-radius: 3px;
	background: transparent;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--dlzf-ink);
	text-decoration: none;
	transition: all var(--dlzf-transition);
}
.dlzf-shop-pill:hover,
.dlzf-shop-pill.is-active { background: var(--dlzf-accent); border-color: var(--dlzf-accent); color: #fff; }

/* Shop loop cleanup: hide ordering dropdown, tidy result count */
.woocommerce .woocommerce-ordering { display: none; }
.woocommerce .woocommerce-result-count { color: var(--dlzf-gray); font-size: 14px; margin-bottom: 28px; }

/* Category pill filter: loading state. The wrapper (not ul.products — that is
   a grid container, where a pseudo-element would become a grid item) carries
   both the dim and the spinner. */
.woocommerce-main.is-dlzf-grid-loading {
	position: relative;
	opacity: 0.45;
	transition: opacity var(--dlzf-transition);
}
.woocommerce-main.is-dlzf-grid-loading::after {
	content: "";
	position: absolute;
	top: 64px;
	left: 50%;
	width: 26px;
	height: 26px;
	margin-left: -13px;
	border: 3px solid rgba(0, 0, 0, 0.12);
	border-top-color: var(--dlzf-accent);
	border-radius: 50%;
	animation: dlzf-spin 0.7s linear infinite;
}

/* Product cards: equal-height with button pinned to the bottom */
ul.products li.product { display: flex; flex-direction: column; }
ul.products li.product .woocommerce-loop-product__link {
	display: flex;
	flex-direction: column;
	flex: 1 0 auto;
}
ul.products li.product .woocommerce-loop-product__title { flex: 0 0 auto; }
ul.products li.product .price { flex: 0 0 auto; }
ul.products li.product .button {
	align-self: flex-start;
	flex: 0 0 auto;
	text-align: center;
}
.woocommerce ul.products li.product .button {
	display: inline-block;
	width: auto;
	padding: 10px 22px !important;
	font-size: 14px;
	line-height: 1.5;
}
.woocommerce ul.products li.product .button:hover { color: #fff; }

/* Shop pagination centered */
.woocommerce nav.woocommerce-pagination ul {
	border: none;
}
.woocommerce nav.woocommerce-pagination ul li {
	border: 1px solid var(--dlzf-line);
	margin: 0 4px;
	border-radius: 3px;
	overflow: hidden;
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	min-width: 40px;
	padding: 9px 14px;
	border: none;
	color: var(--dlzf-ink);
}
.woocommerce nav.woocommerce-pagination ul li span.current {
	background: var(--dlzf-accent);
	color: #fff;
}
.woocommerce nav.woocommerce-pagination ul li a:hover { background: var(--dlzf-bg-soft); color: var(--dlzf-accent); }

.page-title, .entry-title { font-size: 34px; font-weight: 700; margin: 0 0 28px; }
.entry-content h2 { font-size: 26px; margin: 40px 0 16px; }
.entry-content h3 { font-size: 19px; margin: 28px 0 12px; }
.entry-content a { color: var(--dlzf-accent); }
.entry-content blockquote {
	border-left: 3px solid var(--dlzf-accent);
	padding: 8px 0 8px 22px;
	margin: 28px 0;
	color: var(--dlzf-gray);
	font-size: 18px;
}

/* Shop / archive toolbar */
.woocommerce-products-header__title { font-size: 34px; font-weight: 700; }
.woocommerce-notices-wrapper .woocommerce-message { border-top-color: var(--dlzf-accent); }
.woocommerce .woocommerce-breadcrumb { color: #999; font-size: 13px; margin-bottom: 24px; }
.woocommerce .woocommerce-breadcrumb a { color: var(--dlzf-gray); }
.woocommerce .woocommerce-breadcrumb a:hover { color: var(--dlzf-accent); }

/* Single product */
.woocommerce div.product { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 48px; margin: 40px 0 0; align-items: stretch; }
.woocommerce #content div.product div.images,
.woocommerce-page #content div.product div.images,
.woocommerce div.product div.images,
.woocommerce-page div.product div.images,
.woocommerce #content div.product div.summary,
.woocommerce-page #content div.product div.summary,
.woocommerce div.product div.summary,
.woocommerce-page div.product div.summary { float: none; width: 100%; }
/* Gallery column: flex column stretching to the row height (== summary card),
   main image area eats the free space, thumbs pin to the bottom edge. */
.woocommerce div.product .woocommerce-product-gallery {
	align-self: stretch;
	display: flex;
	flex-direction: column;
	height: auto;
}
/* Main image is a fixed 1:1 frame: any upload is letterboxed inside it, so a
   rectangular image can never change the column height or the layout.
   height: auto !important is required: flexslider pins an inline height on
   the viewport and never updates it again, so only aspect-ratio keeps the
   frame square after a resize / orientation change. */
.woocommerce div.product div.images .flex-viewport { overflow: hidden; width: 100%; flex: 0 0 auto; aspect-ratio: 1 / 1; min-height: 0; height: auto !important; }
/* Products with only one image render no slider at all — there the wrapper
   itself is the frame, so it needs the same square ratio. */
.woocommerce div.product .woocommerce-product-gallery:not(:has(.flex-viewport)) .woocommerce-product-gallery__wrapper {
	aspect-ratio: 1 / 1;
	flex: 0 0 auto;
	height: auto;
}
.woocommerce div.product div.images .woocommerce-product-gallery__wrapper { transition: transform 0.45s ease; height: 100%; }
.woocommerce div.product div.images .woocommerce-product-gallery__image { width: 100%; height: 100%; display: block; }
.woocommerce div.product div.images .woocommerce-product-gallery__image:nth-child(n+2) { width: 100%; height: 100%; display: block; }
.woocommerce div.product div.images .woocommerce-product-gallery__wrapper {
	border: 1px solid var(--dlzf-line);
	border-radius: 4px;
	overflow: hidden;
	background: #fff;
}
/* WooCommerce wraps every gallery picture in an <a>. Without a definite height
   on that anchor the img's own height: 100% resolves to auto, so the upload
   grows to its intrinsic ratio (a 600x799 shot renders 720px tall inside the
   540px square frame) and the frame — overflow: hidden — cuts the bottom off
   instead of letterboxing it. The anchor has to carry the frame height for
   object-fit: contain to do its job. */
.woocommerce div.product div.images .woocommerce-product-gallery__image > a {
	display: block;
	width: 100%;
	height: 100%;
}
.woocommerce div.product div.images .woocommerce-product-gallery__image img {
	width: 100%;
	height: 100%;
	max-height: 100%;
	object-fit: contain;
	display: block;
	margin: 0 auto;
}
.woocommerce div.product div.images .flex-control-thumbs {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 12px;
	margin-top: 14px;
	flex: 0 0 auto;
}
.woocommerce div.product div.images .flex-control-thumbs li { width: auto; float: none; }
.woocommerce div.product div.images .flex-control-thumbs img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border: 2px solid transparent;
	border-radius: 3px;
	opacity: 0.65;
	transition: all var(--dlzf-transition);
	cursor: pointer;
}
.woocommerce div.product div.images .flex-control-thumbs img.flex-active,
.woocommerce div.product div.images .flex-control-thumbs img:hover { opacity: 1; border-color: var(--dlzf-accent); }
/* Single-image products have no flexslider, so no thumbs are generated.
   The thumbnail strip is always shown — it matches the 7-column thumb grid. */
.woocommerce div.product .dlzf-solo-thumbs {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 12px;
	margin-top: 14px;
	flex: 0 0 auto;
}
.woocommerce div.product .dlzf-solo-thumbs img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border: 2px solid var(--dlzf-accent);
	border-radius: 3px;
	background: #fff;
	display: block;
}
/* WooCommerce's own full-screen trigger stays hidden: the click-to-enlarge
   viewer is custom (see the gallery block at the end of this file). */
.woocommerce div.product .woocommerce-product-gallery__trigger { display: none !important; }
.woocommerce div.product .summary {
	background: #fff;
	border: 1px solid var(--dlzf-line);
	border-radius: 4px;
	padding: 32px 34px 34px;
	align-self: stretch;
	margin-top: 0;
}
.woocommerce div.product .product_title { font-size: 28px; font-weight: 700; margin: 0 0 6px; line-height: 1.25; }
.woocommerce div.product .woocommerce-product-rating { display: none; }
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	display: block;
	color: var(--dlzf-accent);
	font-size: 26px !important;
	font-weight: 700;
	padding: 14px 0;
	margin: 0 0 14px;
	border-top: 1px solid var(--dlzf-line);
	border-bottom: 1px solid var(--dlzf-line);
}
.woocommerce div.product div.woocommerce-product-details__short-description {
	font-size: 15px;
	line-height: 1.75;
	color: var(--dlzf-gray);
	margin: 0 0 22px;
}
.woocommerce div.product form.cart {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 18px;
	padding: 18px 0;
	border-top: 1px solid var(--dlzf-line);
	border-bottom: 1px solid var(--dlzf-line);
}
.woocommerce div.product form.cart div.quantity { margin: 0; }
.woocommerce div.product form.cart .button { flex: 1; padding: 13px 32px !important; font-size: 15px !important; }
.woocommerce div.product .product_meta {
	padding-top: 16px;
	font-size: 13.5px;
	color: var(--dlzf-gray);
}
.woocommerce div.product .product_meta > span { display: block; margin-bottom: 6px; }
.woocommerce div.product .product_meta a { color: var(--dlzf-ink); font-weight: 500; }
.woocommerce div.product .product_meta a:hover { color: var(--dlzf-accent); }

/* Single product: tabs section below */
.woocommerce div.product .woocommerce-tabs { grid-column: 1 / -1; clear: both; margin-top: 48px; padding-top: 36px; border-top: 1px solid var(--dlzf-line); }
/* Reviews removed site-wide; only Description remains — hide the tab nav,
   show the panel content directly. */
.woocommerce div.product .woocommerce-tabs ul.tabs { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs::before { border-bottom: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: transparent;
	border: none;
	border-bottom: 2px solid transparent;
	margin: 0 0 -2px;
	border-radius: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	padding: 12px 20px;
	font-size: 15px;
	font-weight: 600;
	color: var(--dlzf-gray);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
	background: transparent;
	border-bottom-color: var(--dlzf-accent);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--dlzf-accent); }
.woocommerce div.product .woocommerce-Tabs-panel {
	font-size: 15px;
	line-height: 1.8;
	color: var(--dlzf-gray);
	margin-bottom: 40px;
}
.woocommerce div.product .woocommerce-Tabs-panel h2:first-of-type { font-size: 22px; margin: 0 0 14px; color: var(--dlzf-ink); }

/* Related products */
.woocommerce .related.products {
	clear: both;
	background: var(--dlzf-bg-soft);
	margin: 56px -24px 0;
	padding: 56px 24px 64px;
}
.woocommerce .related.products > h2 {
	text-align: center;
	font-size: 28px;
	font-weight: 700;
	margin: 0 0 10px;
}
.woocommerce div.product .related.products { grid-column: 1 / -1; }
.woocommerce .related.products ul.products { margin-top: 32px; }

/* Button styles (kept from the earlier pass; title/price rules live in the
   single-product section above to avoid duplicate definitions). */
.woocommerce div.product form.cart .button,
.woocommerce a.button, .woocommerce button.button,
.woocommerce input.button, .woocommerce #respond input#submit,
/* .alt variants must be listed explicitly: WooCommerce styles .button.alt with
   background #7f54b3, which out-specifies the plain .button rules above and
   left the checkout "Place order" button purple. */
.woocommerce a.button.alt, .woocommerce button.button.alt,
.woocommerce input.button.alt, .woocommerce #respond input#submit.alt {
	background: var(--dlzf-accent);
	color: #fff;
	border: none;
	border-radius: 3px;
	font-weight: 600;
	padding: 12px 28px;
	transition: background var(--dlzf-transition), color var(--dlzf-transition), opacity var(--dlzf-transition);
}
.woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce input.button:hover, .woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
	background: var(--dlzf-accent-dark);
	color: #fff;
}
/* Loading / disabled / added states must stay red-bg white-text.
   (Woo defaults give them color:inherit → black text on our red bg.) */
.woocommerce a.button.loading,
.woocommerce button.button.loading,
.woocommerce input.button.loading,
.woocommerce #respond input#submit.loading,
.woocommerce a.button.disabled,
.woocommerce button.button.disabled,
.woocommerce input.button.disabled,
.woocommerce a.button:disabled,
.woocommerce button.button:disabled,
.woocommerce input.button:disabled,
.woocommerce a.button.added,
.woocommerce button.button.added,
.woocommerce input.button.added {
	background: var(--dlzf-accent);
	color: #fff !important;
}
.woocommerce a.button.loading:hover,
.woocommerce button.button.loading:hover,
.woocommerce input.button.loading:hover { background: var(--dlzf-accent); color: #fff !important; }
.woocommerce span.onsale {
	background: var(--dlzf-accent);
	min-height: auto;
	min-width: auto;
	padding: 5px 12px;
	line-height: 1.4;
	border-radius: 3px;
	font-weight: 600;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
	border-radius: 0;
}
.woocommerce .quantity .qty { border: 1px solid var(--dlzf-line); border-radius: 3px; padding: 8px; }

/* ================= Cart / checkout ================= */
.dlzf-woo-page { max-width: 1200px; margin: 0 auto; padding: 48px 24px 72px; }
.dlzf-woo-page .woocommerce-notices-wrapper .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error {
	border-top-color: var(--dlzf-accent);
	border-radius: 4px;
	box-shadow: none;
	padding: 16px 20px;
	margin-bottom: 28px;
	list-style: none;
}
.dlzf-woo-page .woocommerce-message .button,
.woocommerce .woocommerce-info .button {
	float: right;
	margin: -6px -4px 0 12px;
}
/* WooCommerce gives the notice bars a ::before glyph (content "\e028" rendered
   in the WooCommerce icon font). This theme never loads that font, so the
   character falls back to a stray box. Drop the glyph and reclaim the space. */
.woocommerce .woocommerce-message { padding: 16px 20px; }
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { content: none !important; }
.woocommerce table.shop_table {
	border: 1px solid var(--dlzf-line);
	border-radius: 4px;
	border-collapse: separate;
	border-spacing: 0;
	width: 100%;
	background: #fff;
}
.woocommerce table.shop_table th {
	background: var(--dlzf-bg-soft);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--dlzf-gray);
	padding: 14px 16px;
	border-bottom: 1px solid var(--dlzf-line);
	text-align: left;
}
.woocommerce table.shop_table td {
	border-top: 1px solid var(--dlzf-line);
	padding: 18px 16px;
	vertical-align: middle;
}
.woocommerce table.shop_table img {
	width: 72px;
	height: 72px;
	object-fit: cover;
	border-radius: 4px;
	border: 1px solid var(--dlzf-line);
	display: block;
}
.woocommerce table.shop_table .product-name a {
	color: var(--dlzf-ink);
	font-weight: 600;
	text-decoration: none;
}
.woocommerce table.shop_table .product-name a:hover { color: var(--dlzf-accent); }
.woocommerce table.shop_table .product-price,
.woocommerce table.shop_table .product-subtotal { color: var(--dlzf-gray); }
.woocommerce table.shop_table .amount { color: var(--dlzf-accent); font-weight: 600; }
.woocommerce table.shop_table td.actions { padding: 20px 16px; }
/* Coupon / voucher feature removed site-wide — see inc/dlzf-cart.php. */
.woocommerce table.shop_table td.actions .button { padding: 10px 20px !important; font-size: 14px !important; }
/* Quantity input on cart rows */
.woocommerce table.shop_table .quantity .qty {
	width: 74px;
	text-align: center;
	padding: 9px 6px;
}
.woocommerce table.shop_table tdf,
.woocommerce table.shop_table tfoot th,
.woocommerce table.shop_table tfoot td { border-top: 1px solid var(--dlzf-line); }
.woocommerce table.shop_table tfoot td { text-align: right; color: var(--dlzf-ink); }
/* Cart grid: table left, totals right */
.woocommerce-cart .woocommerce {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
	gap: 40px;
	align-items: start;
}
.woocommerce-cart .woocommerce > .woocommerce-notices-wrapper,
.woocommerce-cart .woocommerce > .woocommerce-message { grid-column: 1 / -1; }
.woocommerce-cart form.woocommerce-cart-form { min-width: 0; }
.woocommerce-cart .cart-collaterals {
	width: 100%;
	margin-top: 0;
}
.woocommerce-cart .cart-collaterals .cart_totals {
	width: 100%;
	float: none;
	background: #fff;
	border: 1px solid var(--dlzf-line);
	border-radius: 4px;
	padding: 26px 26px 28px;
}
.woocommerce-cart .cart-collaterals .cart_totals h2 {
	font-size: 19px;
	font-weight: 700;
	margin: 0 0 16px;
	color: var(--dlzf-ink);
}
.woocommerce-cart .cart-collaterals .cart_totals table.shop_table {
	border: none;
	border-top: 1px solid var(--dlzf-line);
	border-radius: 0;
	background: transparent;
}
.woocommerce-cart .cart-collaterals .cart_totals table.shop_table th {
	background: transparent;
	border: none;
	padding: 10px 0;
	text-transform: none;
	letter-spacing: 0;
	font-size: 14.5px;
	color: var(--dlzf-gray);
	width: 45%;
}
.woocommerce-cart .cart-collaterals .cart_totals table.shop_table td {
	border: none;
	padding: 10px 0;
	text-align: right;
}
.woocommerce-cart .cart-collaterals .cart_totals .wc-proceed-to-checkout {
	padding: 0;
	margin-top: 18px;
}
.woocommerce-cart .cart-collaterals .cart_totals .wc-proceed-to-checkout .button {
	width: 100%;
	text-align: center;
	padding: 14px 28px !important;
	font-size: 15px !important;
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
	background: var(--dlzf-accent) !important;
	color: #fff !important;
	border-radius: 3px !important;
	font-weight: 600 !important;
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover { background: var(--dlzf-accent-dark) !important; }
/* Cross-sells under the table */
.woocommerce-cart .cross-sells { grid-column: 1 / -1; }
.woocommerce-cart .cross-sells > h2 { font-size: 24px; font-weight: 700; margin: 8px 0 18px; }
/* Cart empty state */
.woocommerce-cart .cart-empty {
	text-align: center;
	padding: 48px 0 8px;
	font-size: 18px;
	color: var(--dlzf-gray);
}
.woocommerce-cart .return-to-shop { text-align: center; }

/* Cart updates are automatic now (see inc/dlzf-cart.php), so the manual
   "Update cart" row is dead weight. WooCommerce hardcodes that button in
   cart/cart.php with no filter to remove it, and the same cell carries the
   `woocommerce-cart-nonce` hidden field the update needs — so hide the row
   instead of the button: display:none still submits hidden inputs. */
.woocommerce-cart-form td.actions { display: none; }

/* ================= Add-to-cart feedback =================
   WooCommerce renders its spinner as `.loading::after` — an absolutely
   positioned glyph at right:1em that relies on `.loading` adding
   `padding-right: 2.618em` for the room. The loop button padding below is
   forced with !important, so that reserved space never exists and the glyph
   lands on top of the label. Instead of fighting it, the theme owns the
   states: the glyph is dropped and an inline spinner sits beside the text. */
.woocommerce a.button.loading::after,
.woocommerce button.button.loading::after,
.woocommerce input.button.loading::after,
.woocommerce #respond input#submit.loading::after {
	content: none !important;
	display: none !important;
}
.woocommerce a.button.is-dlzf-loading,
.woocommerce button.button.is-dlzf-loading,
.woocommerce input.button.is-dlzf-loading,
.woocommerce ul.products li.product a.button.is-dlzf-loading {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	opacity: 0.85;              /* readable, unlike Woo's 0.25 fade */
	pointer-events: none;
	cursor: default;
}
.woocommerce a.button.is-dlzf-done,
.woocommerce button.button.is-dlzf-done,
.woocommerce ul.products li.product a.button.is-dlzf-done {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: var(--dlzf-accent-dark);
	color: #fff !important;
}
.woocommerce a.button.is-dlzf-error,
.woocommerce button.button.is-dlzf-error,
.woocommerce ul.products li.product a.button.is-dlzf-error {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: #6b7280;
	color: #fff !important;
}
.dlzf-btn-label { display: inline-block; }
.woocommerce a.button.is-dlzf-done .dlzf-btn-label::after,
.woocommerce button.button.is-dlzf-done .dlzf-btn-label::after {
	content: "\2713";
	margin-left: 6px;
}
.dlzf-btn-spinner {
	display: inline-block;
	flex: 0 0 auto;
	width: 13px;
	height: 13px;
	border: 2px solid rgba(255, 255, 255, 0.45);
	border-top-color: #fff;
	border-radius: 50%;
	animation: dlzf-spin 0.7s linear infinite;
}
@keyframes dlzf-spin {
	to { transform: rotate(360deg); }
}
.dlfz-cart-notice {
	margin: 10px 0 0;
	font-size: 13.5px;
	color: var(--dlzf-gray);
}
.dlfz-cart-notice a { color: var(--dlzf-accent); font-weight: 600; text-decoration: none; }
.dlfz-cart-notice a:hover { text-decoration: underline; }

/* Header badge pop when the count changes */
.dlfz-cart-count.is-bump { animation: dlzf-badge-pop 0.45s ease; }
@keyframes dlzf-badge-pop {
	0% { transform: scale(1); }
	35% { transform: scale(1.45); }
	100% { transform: scale(1); }
}
/* My account / checkout generic tidy */
.woocommerce-account .woocommerce h2,
.woocommerce-checkout h3 {
	font-size: 20px;
	font-weight: 700;
	color: var(--dlzf-ink);
}

/* ================= Checkout =================
   WooCommerce's classic checkout leans on floats in a media query that never
   takes effect here, so everything stacked full-bleed: the address column ran
   the full width, the right column held nothing but a lone "Order notes" box,
   and the order table sat underneath it out of alignment. Grid makes the
   two-column layout deterministic and keeps both sides filled. */
.woocommerce-checkout form.checkout {
	display: grid;
	grid-template-columns: minmax(0, 1.45fr) minmax(360px, 1fr);
	column-gap: 44px;
	align-items: start;
}
/* Row 1 is reserved for WooCommerce's notice group, so the two columns always
   start on the same line. Both columns sit in one row — no row spanning, which
   is what previously inflated the header row and left a 160px hole between
   "Your order" and the card it labels. */
.woocommerce-checkout form.checkout > .woocommerce-NoticeGroup { grid-column: 1 / -1; }
.woocommerce-checkout form.checkout > #customer_details {
	grid-column: 1;
	grid-row: 2;
	width: 100%;
	float: none;
	margin-bottom: 0;
}
.woocommerce-checkout form.checkout > #order_review {
	grid-column: 2;
	grid-row: 2;
	width: 100%;
	float: none;
	clear: none;
	background: #fff;
	border: 1px solid var(--dlzf-line);
	border-radius: 4px;
	padding: 24px 26px 26px;
}
/* WooCommerce prints "Your order" as a sibling of the card; dlzf.js moves it
   inside (it has no home in a two-column grid — a lone item in its own row
   gets pushed around by the taller address column). Until the move happens it
   must not sit in the grid at all. */
.woocommerce-checkout form.checkout > #order_review_heading { display: none; }
.woocommerce-checkout #order_review > #order_review_heading {
	display: block;
	margin: 0 0 18px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--dlzf-line);
}
/* Inside the field column the two groups stack: "Order notes" is a single
   input and looked stranded as a half-width column next to the address form. */
.woocommerce-checkout #customer_details .col2-set { display: block; }
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 {
	width: 100%;
	float: none;
}
.woocommerce-checkout #customer_details .col-2 { margin-top: 6px; }
.woocommerce-checkout #customer_details h3 {
	padding-bottom: 14px;
	margin: 0 0 18px;
	border-bottom: 1px solid var(--dlzf-line);
}

/* Order review table lives inside the card, so it loses its own frame */
.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table {
	border: none;
	border-radius: 0;
	margin: 0;
	background: transparent;
}
.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table th {
	background: transparent;
	border-bottom: 1px solid var(--dlzf-line);
	padding: 10px 0;
}
.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table td {
	border-top: 1px solid var(--dlzf-line);
	padding: 12px 0;
}
.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table tfoot td {
	text-align: right;
}

/* Payment block. WooCommerce paints #payment rgba(129,110,153,.14) with a
   purple #7f54b3 .alt button, neither of which is on brand. */
.woocommerce-checkout #payment {
	background: transparent;
	border-radius: 0;
	margin-top: 6px;
}
.woocommerce-checkout #payment ul.payment_methods {
	padding: 18px 0 20px;
	border-bottom: 1px solid var(--dlzf-line);
}
.woocommerce-checkout #payment div.form-row { padding: 20px 0 0; }
.woocommerce-checkout #payment .woocommerce-info {
	margin: 0;
	padding: 15px 18px;
	background: var(--dlzf-bg-soft);
	border-top: 1px solid var(--dlzf-line);
	border-radius: 3px;
	font-size: 14px;
	line-height: 1.6;
}
.woocommerce-checkout .woocommerce-privacy-policy-text {
	font-size: 13px;
	line-height: 1.6;
	color: var(--dlzf-gray);
}
/* ID-level so it beats WooCommerce's .button.alt background. */
.woocommerce-checkout #payment #place_order {
	display: block;
	float: none;
	width: 100%;
	margin: 0;
	padding: 15px 28px;
	font-size: 15px;
	font-weight: 600;
	background: var(--dlzf-accent);
	color: #fff;
	border-radius: 3px;
}
.woocommerce-checkout #payment #place_order:hover { background: var(--dlzf-accent-dark); }

@media (max-width: 1024px) {
	.woocommerce-checkout form.checkout {
		grid-template-columns: 100%;
		row-gap: 30px;
	}
	.woocommerce-checkout form.checkout > #customer_details,
	.woocommerce-checkout form.checkout > #order_review {
		grid-column: 1;
		grid-row: auto;
	}
}

/* My account nav */
.woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; }
.woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 10px 14px;
	color: var(--dlzf-ink);
	text-decoration: none;
	border-left: 2px solid transparent;
}
.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation li a:hover {
	border-left-color: var(--dlzf-accent);
	color: var(--dlzf-accent);
	background: var(--dlzf-accent-soft);
}

/* ================= Contact form (kept, refined) ================= */
.dlzf-form-notice--ok {
	border-left: 4px solid var(--dlzf-accent);
	background: var(--dlzf-accent-soft);
	padding: 18px 22px;
	margin-bottom: 28px;
	border-radius: 0 4px 4px 0;
}
.dlzf-form-notice--ok p { margin: 0 0 6px; }
.dlzf-contact-form .dlzf-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
.dlzf-contact-form .dlzf-field { margin: 0 0 20px; }
.dlzf-contact-form .dlzf-field--full { grid-column: 1 / -1; }
.dlzf-contact-form label { display: block; font-weight: 600; margin-bottom: 7px; font-size: 14px; }
.dlzf-contact-form input[type=text], .dlzf-contact-form input[type=email],
.dlzf-contact-form textarea {
	width: 100%;
	border: 1px solid var(--dlzf-line);
	border-radius: 3px;
	padding: 12px 14px;
	font-size: 15px;
	background: #fff;
	transition: border-color var(--dlzf-transition);
}
.dlzf-contact-form input:focus, .dlzf-contact-form textarea:focus {
	outline: none;
	border-color: var(--dlzf-accent);
	box-shadow: 0 0 0 3px var(--dlzf-accent-soft);
}
.dlzf-field--honeypot { position: absolute; left: -9999px; height: 0; overflow: hidden; }

/* Category grid shortcode (fallback pages) */
.dlzf-category-grid {
	list-style: none; margin: 32px 0; padding: 0;
	display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
}
.dlzf-category-grid__item a {
	display: block; padding: 18px 20px; border: 1px solid var(--dlzf-line);
	border-radius: 4px; color: var(--dlzf-ink); text-decoration: none;
	font-weight: 600; font-size: 15px; transition: border-color var(--dlzf-transition);
}
.dlzf-category-grid__item a:hover { border-color: var(--dlzf-accent); color: var(--dlzf-accent); }
.dlzf-category-grid__desc { display: block; margin-top: 6px; font-weight: 400; font-size: 13px; color: var(--dlzf-gray); }

/* ================= Responsive ================= */
@media (max-width: 1024px) {
	.dlzf-cat-grid, ul.products { grid-template-columns: repeat(3, 1fr); }
	.dlzf-about-teaser__grid { grid-template-columns: 1fr; gap: 40px; }
	.dlzf-footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
	.dlzf-card-grid--4 { grid-template-columns: repeat(2, 1fr); }
	.dlzf-story-grid { grid-template-columns: 1fr; gap: 36px; }
	.dlzf-story-facts { grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 40px; }
	.woocommerce-cart .woocommerce { grid-template-columns: 1fr; gap: 36px; }
	.woocommerce table.shop_table { display: block; overflow-x: auto; }
	.dlzf-contact-layout { grid-template-columns: 1fr; gap: 44px; }
	.dlzf-offer-row { grid-template-columns: 1fr; gap: 8px; }
	.dlzf-carousel { padding: 0 48px; }
	.dlzf-carousel--in-cats { max-width: none; padding: 0 52px; }
	.dlzf-carousel .dlzf-carousel-track li.product { flex-basis: calc((100% - 2 * 20px) / 3); }
	.dlzf-flow__step--arrow { margin-right: 34px; }
	.dlzf-flow__step--arrow::after { right: -26px; width: 14px; }
	.dlzf-flow__step--arrow::before { right: -26px; }
}
@media (max-width: 768px) {
	.dlzf-hero { min-height: 480px; background-position: center; }
	/* The desktop veil runs left-to-right and leaves the photo's right half
	   bare; on a phone that dropped the headline straight onto the image. */
	.dlzf-hero::before {
		background: linear-gradient(180deg, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.88) 58%, rgba(255,255,255,0.74) 100%);
	}
	.dlzf-hero__title { font-size: 38px; }
	.dlzf-section { padding: 48px 0; }
	.dlzf-section__title { font-size: 28px; }
	.dlzf-section__sub { margin: 0 auto 30px; }
	.dlzf-section__more { margin-top: 32px; }

	/* ---------- Mobile nav drawer ---------- */
	.menu-toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		min-width: 44px;
		min-height: 44px;
		padding: 10px 11px;
		margin: -8px 0;
	}
	.dlzf-nav-wrap {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: #fff;
		border-bottom: 1px solid var(--dlzf-line);
		box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
		display: none;
		max-height: calc(100vh - 60px);
		overflow-y: auto;
	}
	.dlzf-nav-wrap.is-open { display: block; }
	.main-navigation ul { display: block; flex-direction: column; gap: 0; padding: 12px 0; }
	.main-navigation a { padding: 13px 24px; }
	.main-navigation ul ul {
		position: static;
		/* _s floats the flyout (`.main-navigation ul ul { float:left }`). Left
		   un-overridden, the open submenu leaves the flow: its parent <li> keeps
		   its 52px height and the following items (Custom & OEM, Contact Us)
		   wrap around the float and land beside the submenu instead of under it. */
		float: none;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border: none;
		min-width: 0;
		padding: 0 0 0 18px;
		display: none;
	}
	/* _s pins submenu links to a 200px flyout width. */
	.main-navigation ul ul a { width: auto; }
	/* _s ships `.main-navigation.toggled ul { display:block }`, and that
	   selector also matches every nested <ul>: opening the drawer unfolded all
	   eight sub-items at once and they overlapped the links below them. Pin the
	   submenus shut; only the tapped branch opens (.focus is set on touchstart
	   by navigation.js). :hover is deliberately not used here — on touch the
	   hover state sticks after a tap and the submenu could not be closed. */
	.main-navigation.toggled ul ul { display: none; }
	.main-navigation.toggled ul li.focus > ul { display: block; }
	.main-navigation ul li.focus > a::after { transform: rotate(225deg) translateY(-2px); }
	.main-navigation li.menu-item-has-children > a::after {
		content: "";
		display: inline-block;
		width: 7px;
		height: 7px;
		margin-left: 8px;
		border-right: 1.5px solid currentColor;
		border-bottom: 1.5px solid currentColor;
		transform: rotate(45deg) translateY(-3px);
		transition: transform var(--dlzf-transition);
	}
	.dlzf-header-cta { display: none; }
	.custom-logo { height: 42px; width: 42px; }
	.dlzf-header-inner { gap: 16px; min-height: 60px; padding: 0 16px; }
	/* The hamburger belongs at the trailing edge of the bar. .main-navigation
	   is flex:1 on desktop, which parked the button right next to the logo.
	   width:auto is mandatory here: _s sets `.main-navigation { width:100% }`,
	   and with a content-sized flex-basis that 100% wins and the nav balloons
	   to 362px, shoving the cart icon off-screen. */
	.main-navigation { flex: 0 0 auto; width: auto; margin-left: auto; }
	.dlzf-header-actions { margin-left: 0; }
	/* Turn the 20px cart glyph into a 40px touch target without moving it. */
	.dlzf-cart-link { padding: 10px; margin: -10px; }
	.dlzf-cart-link .dlzf-cart-count { top: 3px; right: 0; }
	/* Hamburger → X across the whole mobile range (previously <640 only, so
	   nothing happened on 641–768px wide phones). */
	.menu-toggle.is-open .menu-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
	.menu-toggle.is-open .menu-toggle__bar:nth-child(2) { opacity: 0; }
	.menu-toggle.is-open .menu-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

	/* ---------- Shop pill bar: one swipeable row ----------
	   Wrapped, the nine pills stacked up to ~395px tall and pushed the grid
	   below the fold. */
	.dlzf-shop-bar { padding: 12px 0; }
	.dlzf-shop-bar__inner {
		flex-wrap: nowrap;
		justify-content: flex-start;
		overflow-x: auto;
		gap: 8px;
		padding: 0 16px 4px;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.dlzf-shop-bar__inner::-webkit-scrollbar { display: none; }
	.dlzf-shop-pill { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 36px; padding: 8px 16px; font-size: 13px; }

	/* ---------- Product cards ----------
	   The 22px side padding is sized for a 4-up desktop card. In the 2-up
	   mobile grid it left ~94px of content width and wrapped the button. */
	/* !important is required: the desktop rule sets font-size:15.5px !important. */
	.woocommerce ul.products li.product .woocommerce-loop-product__title { padding: 12px 12px 0; font-size: 14.5px !important; }
	.woocommerce ul.products li.product .price { padding: 8px 12px 0; font-size: 14px; }
	.woocommerce ul.products li.product .button { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; margin: 10px 12px 14px !important; padding: 9px 14px !important; font-size: 13px; }

	/* ---------- Carousel ----------
	   The flex track needs a real 100% base: without it the percentage
	   flex-basis resolves against the content width and every slide blows up
	   to ~550px, far wider than the 390px viewport. */
	.dlzf-carousel .dlzf-carousel-track,
	.dlzf-carousel .dlzf-carousel-track ul.products { min-width: 0; }
	.dlzf-carousel .dlzf-carousel-track ul.products { width: 100%; }

	/* ---------- Section rhythm ---------- */
	.dlzf-page-hero--img { padding: 72px 0 78px; }
	.dlzf-cta-strip { padding: 42px 0; }
	.dlzf-oem__inner { padding: 52px 24px; }
	.dlzf-oem__inner h2 { font-size: 26px; }
	.dlzf-oem__inner p { font-size: 15.5px; }
	/* Two scope cards side by side left ~83px of text per card. */
	.dlzf-scope-grid { grid-template-columns: 1fr; gap: 18px; }
	.dlzf-scope-card { padding: 26px 22px; }
	.dlzf-story-facts__item { padding: 20px 12px; }
	.dlzf-office-card { padding: 24px 20px; }
	.dlzf-contact-info-card { padding: 22px 18px; }
	.dlzf-cat-card__body { padding: 14px 14px 16px; }
	.dlzf-cat-card__body h3 { font-size: 15px; }
	.dlzf-footer-logo { width: 110px; height: 110px; }
	/* 15px-tall inline links are a poor thumb target; give them a real box. */
	.dlzf-footer-links a { display: inline-block; padding: 4px 0; }

	/* ---------- Single product ---------- */
	.woocommerce div.product .summary { padding: 22px 18px 24px; }
	.woocommerce div.product .product_title { font-size: 22px; }
	.woocommerce div.product p.price,
	.woocommerce div.product span.price { font-size: 22px !important; padding: 12px 0; }
	/* Seven 31px thumbs are unusable as tap targets. */
	.woocommerce div.product div.images .flex-control-thumbs,
	.woocommerce div.product .dlzf-solo-thumbs { grid-template-columns: repeat(5, 1fr); gap: 8px; }
	.woocommerce div.product .woocommerce-tabs { margin-top: 32px; padding-top: 24px; }
	.woocommerce .related.products { margin: 40px -24px 0; padding: 40px 24px 44px; }
	.woocommerce .related.products > h2 { font-size: 22px; }

	/* ---------- Cart / checkout ---------- */
	.dlzf-woo-page { padding: 32px 24px 56px; }
	/* WooCommerce reserves 3.5em of padding for the notice glyph; the theme's
	   tighter padding dropped the icon on top of the first word. */
	.woocommerce-message,
	.woocommerce-info,
	.woocommerce-error { padding: 16px 20px !important; }
	.woocommerce table.shop_table th,
	.woocommerce table.shop_table td { padding-left: 12px; padding-right: 12px; }
	.woocommerce table.shop_table img { width: 56px; height: 56px; }
	.woocommerce table.shop_table .quantity .qty { width: 62px; }
	.woocommerce-cart .cart-collaterals .cart_totals { padding: 20px 18px 22px; }
	.woocommerce-checkout form.checkout > #order_review { padding: 20px 18px 22px; }
	/* WooCommerce keeps first/last name at 47% each — 138px per field on a
	   390px screen. Stack them. */
	.woocommerce form .form-row-first,
	.woocommerce form .form-row-last { width: 100%; float: none; }
	.woocommerce-checkout #payment div.form-row { padding: 16px 0 0; }
}
@media (max-width: 640px) {
	.dlzf-section { padding: 38px 0; }
	.dlzf-header-inner { gap: 12px; padding: 0 14px; }
	.dlzf-cat-grid, ul.products { grid-template-columns: repeat(2, 1fr); gap: 14px; }
	.dlzf-contact-form .dlzf-form-grid { grid-template-columns: 1fr; }
	.dlzf-footer-grid { grid-template-columns: 1fr; gap: 32px; padding: 48px 24px 36px; }
	.dlzf-footer-logo { width: 96px; height: 96px; }
	.dlzf-hero { min-height: 440px; }
	.dlzf-hero__inner { padding: 56px 20px; }
	.dlzf-hero__title { font-size: 31px; }
	.dlzf-page-hero { padding: 34px 0 38px; }
	.dlzf-page-hero--img { padding: 64px 0 68px; }
	.dlzf-page-hero__title { font-size: 30px; }
	.dlzf-page-hero__subtitle { font-size: 15.5px; }
	.dlzf-card-grid--4, .dlzf-card-grid--2 { grid-template-columns: 1fr; }
	.dlzf-carousel { padding: 0 40px; }
	.dlzf-carousel--in-cats { padding: 0 46px; }
	.dlzf-carousel__heading { font-size: 18px; }
	.dlzf-carousel .dlzf-carousel-track { gap: 14px; }
	.dlzf-carousel .dlzf-carousel-track li.product { flex-basis: calc((100% - 14px) / 2); }
	.dlzf-carousel__nav { width: 36px; height: 36px; }
	/* Tighter card padding again: at 320px the 2-up card is only ~129px wide. */
	.woocommerce ul.products li.product .woocommerce-loop-product__title { padding: 10px 10px 0; font-size: 13.5px !important; }
	.woocommerce ul.products li.product .price { padding: 6px 10px 0; }
	.woocommerce ul.products li.product .button { margin: 8px 10px 12px !important; padding: 8px 12px !important; font-size: 12.5px; }
	.dlzf-shop-pill { padding: 7px 13px; font-size: 12.5px; }
	.woocommerce div.product { grid-template-columns: minmax(0, 1fr); gap: 32px; }
	.woocommerce div.product .summary { padding: 18px 14px 20px; }
	.woocommerce div.product .woocommerce-product-gallery { position: static; align-self: auto; }
	.woocommerce div.product div.images .flex-viewport { flex: 0 0 auto; }
	/* No height: auto / max-height: 420px here on purpose: that let a tall
	   upload outgrow the square frame, which then clipped its bottom edge. The
	   picture fills the frame at every breakpoint and is letterboxed. */
	.woocommerce div.product div.images .woocommerce-product-gallery__image a { height: 100%; }
	.dlzf-flow { flex-direction: column; align-items: stretch; }
	.dlzf-flow__step { white-space: normal; }
	.dlzf-flow__step--arrow { margin-right: 0; margin-bottom: 26px; }
	.dlzf-flow__step--arrow::after { right: auto; left: 24px; top: auto; bottom: -22px; width: 1.5px; height: 14px; }
	.dlzf-flow__step--arrow::before { right: auto; left: 20px; top: auto; bottom: -22px; transform: none; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 8px solid var(--dlzf-accent); border-bottom: none; }
	.dlzf-cta-strip__inner { flex-direction: column; align-items: flex-start; }
	.dlzf-hero__sub { font-size: 16px; }
	.dlzf-trustbar__inner { justify-content: center; font-size: 12.5px; }
	.dlzf-fact strong { font-size: 27px; }
}
@media (prefers-reduced-motion: reduce) {
	* { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ================= Scroll-in reveal ================= */
.dlzf-reveal {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}
.dlzf-reveal.is-inview { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.dlzf-reveal { opacity: 1; transform: none; }
}

/* =====================================================================
   Single product gallery — hover magnification + click-to-enlarge viewer
   Driven by js/dlzf-gallery.js, loaded on product pages only.
   ===================================================================== */

/* The magnifier button is absolutely positioned inside the gallery, and the
   ≤640px block above resets the gallery to position:static — re-assert it
   (source order wins at equal specificity). --dlzf-hover-zoom is the single
   knob for how far the hover effect magnifies. */
.woocommerce div.product .woocommerce-product-gallery {
	position: relative;
	--dlzf-hover-zoom: 1.6;
}

/* Hover magnification is a uniform transform and nothing else: the frame's 1:1
   ratio and object-fit: contain stay untouched, so the shot can never stretch.
   (The old lens overlay pinned width AND height on its own <img>, so the global
   img { max-width: 100% } reset clamped the width while the height stayed at
   1.6x — a squeezed picture. A scale() cannot do that.) */
.woocommerce div.product .woocommerce-product-gallery.is-dlzf-zoomable .woocommerce-product-gallery__image img {
	transform-origin: 50% 50%;
	transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.woocommerce div.product .woocommerce-product-gallery.is-dlzf-zoomable .woocommerce-product-gallery__image img.is-dlzf-zoomed {
	transform: scale(var(--dlzf-hover-zoom, 1.6));
	will-change: transform;
}

/* Both the picture and the magnifier button open the viewer. */
.woocommerce div.product .woocommerce-product-gallery.is-dlzf-zoomable .woocommerce-product-gallery__image,
.woocommerce div.product .woocommerce-product-gallery.is-dlzf-zoomable .woocommerce-product-gallery__image a,
.woocommerce div.product .woocommerce-product-gallery.is-dlzf-zoomable .woocommerce-product-gallery__image img {
	cursor: zoom-in;
}

.woocommerce div.product .dlzf-gallery-open {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 4;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(17, 17, 17, 0.5);
	color: #fff;
	cursor: pointer;
	transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.woocommerce div.product .dlzf-gallery-open:hover,
.woocommerce div.product .dlzf-gallery-open:focus-visible {
	background: var(--dlzf-accent);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}
.woocommerce div.product .dlzf-gallery-open:hover { transform: scale(1.06); }
.woocommerce div.product .dlzf-gallery-open:focus-visible { outline: 2px solid var(--dlzf-accent); outline-offset: 3px; }

.dlzf-gallery-open svg,
.dlzf-lightbox svg {
	display: block;
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ------------------------------- Lightbox ------------------------------- */
/* Scrolling is frozen on <html>, not <body>: a scroll container on the body
   would re-anchor the sticky site header while the viewer is open. */
html.dlzf-lightbox-open { overflow: hidden; }

.dlzf-lightbox {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(9, 9, 11, 0.94);
	opacity: 0;
	visibility: hidden;
	touch-action: none;
	overscroll-behavior: contain;
	-webkit-tap-highlight-color: transparent;
	transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}
.dlzf-lightbox.is-open {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.3s ease, visibility 0s;
}

/* The empty space around the picture belongs to the backdrop: it carries the
   close action, and the figure lets pointer events fall through to it so only
   the picture itself answers to zoom / pan / swipe. */
.dlzf-lightbox__backdrop { position: absolute; inset: 0; }

.dlzf-lightbox__figure {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	padding: 74px 86px;
	pointer-events: none;
	transform: scale(0.94);
	transition: transform 0.38s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.dlzf-lightbox.is-open .dlzf-lightbox__figure { transform: scale(1); }

.dlzf-lightbox__img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	min-width: 0;
	min-height: 0;
	object-fit: contain;
	background: #fff;
	box-shadow: 0 26px 70px rgba(0, 0, 0, 0.5);
	pointer-events: auto;
	cursor: zoom-in;
	user-select: none;
	-webkit-user-drag: none;
	transform-origin: 50% 50%;
	transition: opacity 0.28s ease;
}
/* Only programmatic zooms (click, wheel, double-tap) animate; a drag or a
   pinch must track the finger with no lag. */
.dlzf-lightbox__img.is-smooth { transition: transform 0.26s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.28s ease; }
.dlzf-lightbox__img.is-switching { opacity: 0; }
.dlzf-lightbox__img.is-zoomed { cursor: grab; }
.dlzf-lightbox__img.is-zoomed:active { cursor: grabbing; }

.dlzf-lightbox__btn {
	position: absolute;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 50%;
	background: rgba(24, 24, 28, 0.55);
	color: #fff;
	cursor: pointer;
	transition: background 0.25s ease, border-color 0.25s ease;
}
.dlzf-lightbox__btn:hover { background: var(--dlzf-accent); border-color: var(--dlzf-accent); }
.dlzf-lightbox__btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.dlzf-lightbox__close { top: 18px; right: 18px; }
.dlzf-lightbox__nav { top: 50%; transform: translateY(-50%); }
.dlzf-lightbox__nav--prev { left: 18px; }
.dlzf-lightbox__nav--next { right: 18px; }

.dlzf-lightbox__counter {
	position: absolute;
	left: 50%;
	bottom: 20px;
	z-index: 2;
	margin: 0;
	transform: translateX(-50%);
	color: rgba(255, 255, 255, 0.9);
	font-size: 13px;
	letter-spacing: 0.06em;
	pointer-events: none;
}
.dlzf-lightbox__hint {
	position: absolute;
	right: 22px;
	bottom: 21px;
	z-index: 2;
	margin: 0;
	color: rgba(255, 255, 255, 0.55);
	font-size: 12px;
	pointer-events: none;
}
.dlzf-lightbox__hint--mobile { display: none; }

/* A single image has nothing to page through. */
.dlzf-lightbox.is-single .dlzf-lightbox__nav,
.dlzf-lightbox.is-single .dlzf-lightbox__counter { display: none; }

/* Touch devices get the gesture wording instead of the keyboard one. */
@media (hover: none) {
	.dlzf-lightbox__hint--desktop { display: none; }
	.dlzf-lightbox__hint--mobile { display: inline; }
}

@media (max-width: 640px) {
	.woocommerce div.product .dlzf-gallery-open { top: 10px; right: 10px; width: 38px; height: 38px; }
	.dlzf-lightbox__figure { padding: 62px 54px 78px; }
	.dlzf-lightbox__btn { width: 42px; height: 42px; }
	.dlzf-lightbox__close { top: 10px; right: 10px; }
	.dlzf-lightbox__nav--prev { left: 6px; }
	.dlzf-lightbox__nav--next { right: 6px; }
	/* Centred above the counter rather than hidden: on a phone the gesture
	   wording is the only way to discover double-tap / swipe. */
	.dlzf-lightbox__hint { left: 0; right: 0; bottom: 40px; text-align: center; }
	.dlzf-lightbox__counter { bottom: 16px; }
}