/**
 * Denno Home — marketplace homepage.
 *
 * Scoped under .denno-home (plus a body class for the header override) so
 * nothing here can leak into shop, product or checkout pages.
 */

/* ---------------------------------------------------------------- tokens */

.denno-home {
	--dn-navy: #14244b;
	--dn-navy-2: #1d3163;
	--dn-blue: #0d6dd7;
	--dn-blue-dark: #0a55a8;
	--dn-blue-soft: #eaf2fd;
	--dn-green: #00a651;
	--dn-green-soft: #e6f6ee;
	--dn-amber: #f5a623;
	--dn-amber-soft: #fdf3e2;
	--dn-flash: #e03e26;

	--dn-ink: #16202f;
	--dn-ink-2: #46536b;
	--dn-muted: #77839a;

	/* Warm neutrals instead of pure white. --dn-cream is the page/section base,
	   --dn-card the surfaces that sit on top of it — still separated enough to
	   read as raised, but without the glare of #fff. */
	--dn-cream: #faf6ef;
	--dn-card: #fffdf8;
	--dn-sand: #f5f0e6;
	--dn-line: #e9e2d5;

	--dn-radius: 10px;
	--dn-radius-sm: 7px;
	--dn-gap: 14px;
	--dn-shadow: 0 1px 2px rgba(20, 36, 75, 0.06), 0 2px 8px rgba(20, 36, 75, 0.05);
	--dn-shadow-lg: 0 10px 30px rgba(20, 36, 75, 0.14);

	color: var(--dn-ink);
	font-size: 14px;
	line-height: 1.45;
	background: var(--dn-cream);
}

/* The Denno masthead replaces the Zota header across the whole site, so this
   is keyed to a body class present on every page. */
body.denno-chrome-active #tbay-header,
body.denno-chrome-active .tbay-mobile-header,
body.denno-chrome-active #tbay-footer {
	display: none !important;
}

/* Zota's fixed mobile toolbar — the blue strip showing back / home / the page
   slug / cart. It duplicates our masthead and leaks the page slug, so it goes
   too. It only exists below 1200px (Bootstrap's xl breakpoint, via the theme's
   d-xl-none class). */
@media (max-width: 1199px) {
	body.denno-chrome-active .topbar-device-mobile {
		display: none !important;
	}

	/* The theme reserves exactly the toolbar's height as padding on the wrapper
	   so content clears the fixed bar. With the bar gone that padding is just an
	   empty 43px gap at the top of every mobile page, so it's reclaimed here.
	   Scoped to this breakpoint because the padding is already 0 at >=1200px. */
	body.denno-chrome-active #wrapper-container {
		padding-top: 0 !important;
	}
}

/* Content padding is only stripped on the homepage template, where the bands
   run edge to edge. Other pages keep the theme's own spacing. */
body.denno-home-tpl .site-content,
body.denno-home-tpl #main-content,
body.denno-home-tpl .page-content {
	padding: 0 !important;
	margin: 0 !important;
}

/* The header wrapper carries the .denno-home class purely so the masthead
   inherits the design tokens.

   display: contents removes the wrapper's own box while keeping it in the
   inheritance chain. That matters: a sticky element can only travel within its
   parent's box, and this wrapper is only as tall as the header itself — so with
   a normal box the masthead unstuck the moment you scrolled past it. Dropping
   the box makes body the containing block, so it sticks down the whole page.
   It also keeps the drawer's z-index working globally rather than trapped in a
   wrapper stacking context. */
.denno-chrome {
	display: contents;
}

.denno-shell {
	width: 100%;
	max-width: 1300px;
	margin: 0 auto;
	padding: 0 16px;
	box-sizing: border-box;
}

.denno-home *,
.denno-home *::before,
.denno-home *::after {
	box-sizing: border-box;
}

/* :where() keeps this at class-level specificity so the component rules below
   still win on colour, while overriding the parent theme's bare `a` styles. */
.denno-home :where(a) {
	text-decoration: none;
	color: inherit;
}

.denno-home img {
	max-width: 100%;
	height: auto;
	display: block;
}

.denno-icon {
	display: block;
	flex: 0 0 auto;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* ---------------------------------------------------------------- bands */

/* Full-bleed colour sections. Each band paints edge to edge; .denno-shell
   inside keeps the content aligned to the grid.
   Each tinted band carries a soft off-centre accent glow so it reads as lit
   rather than as a flat wash, plus hairline rules to separate it crisply from
   the white bands either side. */
.denno-band {
	position: relative;
	padding: 30px 0;
}

.denno-band--hero {
	background:
		radial-gradient(920px 440px at 76% -12%, rgba(13, 109, 215, 0.09), transparent 66%),
		radial-gradient(680px 320px at 4% 10%, rgba(0, 166, 81, 0.06), transparent 68%),
		linear-gradient(180deg, #f3efe6 0%, #faf6ef 100%);
	padding-top: 22px;
	border-bottom: 1px solid #ece5d8;
}

.denno-band--plain {
	background: var(--dn-cream);
}

/* Warm sand rather than a cool blue wash — a blue tint next to cream reads as
   two different colour temperatures fighting each other. */
.denno-band--tint {
	background:
		radial-gradient(1000px 360px at 14% 0%, rgba(181, 132, 40, 0.09), transparent 70%),
		linear-gradient(180deg, #f4eee1 0%, #faf6ef 100%);
	border-top: 1px solid #ece4d4;
	border-bottom: 1px solid #ece4d4;
}

.denno-band--mint {
	background:
		radial-gradient(1000px 360px at 86% 0%, rgba(0, 166, 81, 0.09), transparent 70%),
		linear-gradient(180deg, #eef6ec 0%, #f8faf4 100%);
	border-top: 1px solid #dfead9;
	border-bottom: 1px solid #dfead9;
}

/* Saturated blue band behind the circular category discs, with a faint dot
   texture so the large flat area has some life to it. */
.denno-band--sky {
	background:
		radial-gradient(rgba(255, 255, 255, 0.55) 1.4px, transparent 1.5px),
		radial-gradient(760px 300px at 50% -18%, rgba(255, 253, 248, 0.8), transparent 68%),
		linear-gradient(180deg, #d3e3f7 0%, #e2ecf8 100%);
	background-size: 24px 24px, auto, auto;
	padding: 34px 0 38px;
	border-top: 1px solid #c5d9ef;
	border-bottom: 1px solid #c5d9ef;
}

.denno-band--flash {
	background:
		radial-gradient(820px 280px at 10% -10%, rgba(224, 62, 38, 0.13), transparent 66%),
		linear-gradient(180deg, #fbeae3 0%, var(--dn-cream) 76%);
	border-top: 1px solid #f2dbd0;
}

.denno-band--navy {
	background:
		radial-gradient(780px 340px at 80% -20%, rgba(13, 109, 215, 0.4), transparent 64%),
		radial-gradient(600px 300px at 8% 120%, rgba(0, 166, 81, 0.22), transparent 62%),
		var(--dn-navy);
	padding: 34px 0;
}

/* ------------------------------------------------------------- masthead */

/* Light masthead rather than a second navy slab: keeps the header simple and
   lets the logo and search carry the weight. Sticks to the top on scroll. */
.denno-masthead {
	background: var(--dn-card);
	position: sticky;
	top: 0;
	z-index: 60;
	border-bottom: 1px solid var(--dn-line);
	box-shadow: 0 2px 12px rgba(20, 36, 75, 0.06);
}

.denno-masthead__inner {
	display: flex;
	align-items: center;
	gap: 22px;
	padding-top: 12px;
	padding-bottom: 12px;
}

/* Logo */

/* Image only, sized large — no wordmark beside it. */
.denno-logo {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
}

.denno-logo img {
	height: 72px;
	width: auto;
	max-width: 190px;
	object-fit: contain;
}

.denno-logo__fallback {
	font-size: 20px;
	font-weight: 800;
	color: var(--dn-navy);
	letter-spacing: -0.4px;
}

/* Search */

/* No max-width: the search absorbs whatever space the logo and actions don't
   use, so the row always spans the full shell. Capping it left the surplus
   stranded after the actions — 349px of dead space at 1440px — which pulled the
   whole header to the left. The shell's own 1300px cap keeps it sane on wide
   screens. */
.denno-search {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	background: var(--dn-sand);
	border: 1.5px solid var(--dn-line);
	border-radius: 999px;
	overflow: hidden;
	min-width: 0;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.denno-search:focus-within {
	border-color: var(--dn-blue);
	background: var(--dn-card);
}

.denno-search__icon {
	display: flex;
	padding: 0 4px 0 16px;
	color: var(--dn-muted);
}

.denno-search__field {
	flex: 1 1 auto;
	border: 0;
	background: transparent;
	padding: 0 10px;
	height: 44px;
	font-size: 14px;
	color: var(--dn-ink);
	outline: none;
	min-width: 0;
}

.denno-search__field::placeholder {
	color: #9aa5ba;
}

.denno-search__btn {
	flex: 0 0 auto;
	border: 0;
	background: var(--dn-blue);
	color: #fff;
	font-weight: 700;
	font-size: 14px;
	height: 44px;
	padding: 0 28px;
	cursor: pointer;
	transition: background 0.15s ease;
}

.denno-search__btn:hover {
	background: var(--dn-blue-dark);
}

/* Account / wishlist / cart */

/* margin-left: auto pins the actions to the right edge, so if the search ever
   can't grow, the surplus lands between search and actions rather than
   stranding after them. */
.denno-actions {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 4px;
	margin-left: auto;
}

.denno-actions__item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 9px 12px;
	border-radius: var(--dn-radius-sm);
	color: var(--dn-ink-2);
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
	transition: background 0.15s ease, color 0.15s ease;
}

.denno-actions__item:hover {
	background: var(--dn-blue-soft);
	color: var(--dn-blue);
}

.denno-actions__cartwrap {
	position: relative;
	display: flex;
}

.denno-actions__count {
	position: absolute;
	top: -7px;
	right: -9px;
	background: var(--dn-blue);
	color: #fff;
	font-size: 10.5px;
	font-weight: 700;
	min-width: 18px;
	height: 18px;
	border-radius: 9px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 5px;
	border: 2px solid var(--dn-card);
}

/* Burger (mobile only) */

.denno-burger {
	display: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 0;
	background: transparent;
	color: var(--dn-navy);
	cursor: pointer;
	padding: 0;
}

/* -------------------------------------------------------------- catrail */

/* Continuously scrolling marquee. The set is duplicated in markup, so
   translating the track by exactly -50% loops seamlessly. */
.denno-catrail {
	border-top: 1px solid var(--dn-line);
	background: var(--dn-navy);
	overflow: hidden;
	position: relative;
}

/* Soft fades at both edges so links enter and leave rather than pop. */
.denno-catrail::before,
.denno-catrail::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: 56px;
	z-index: 2;
	pointer-events: none;
}

.denno-catrail::before {
	left: 0;
	background: linear-gradient(90deg, var(--dn-navy), transparent);
}

.denno-catrail::after {
	right: 0;
	background: linear-gradient(270deg, var(--dn-navy), transparent);
}

.denno-catrail__track {
	display: flex;
	width: max-content;
	animation: denno-marquee 42s linear infinite;
}

.denno-catrail:hover .denno-catrail__track,
.denno-catrail:focus-within .denno-catrail__track {
	animation-play-state: paused;
}

@keyframes denno-marquee {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-50%);
	}
}

.denno-catrail__set {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
}

.denno-catrail__link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: #cfdaf0;
	font-size: 13px;
	font-weight: 600;
	padding: 13px 20px;
	white-space: nowrap;
	transition: color 0.15s ease;
}

.denno-catrail__link .denno-icon {
	opacity: 0.75;
}

.denno-catrail__link:hover {
	color: #fff;
}

.denno-catrail__link--all {
	color: #6ee7a8;
	font-weight: 700;
}

/* ----------------------------------------------------------------- hero */

/* Three equal-height columns. The previous build let the category list run
   taller than the carousel, leaving a large empty gap; `stretch` plus a fixed
   hero height keeps all three flush. */
.denno-hero {
	display: grid;
	grid-template-columns: 252px 1fr;
	gap: var(--dn-gap);
	align-items: stretch;
	min-height: 460px;
}

/* Category sidebar */

.denno-hero__side {
	background: var(--dn-card);
	border-radius: var(--dn-radius);
	box-shadow: var(--dn-shadow);
	padding: 6px 0 8px;
	display: flex;
	flex-direction: column;
	overflow: visible;
}

.denno-hero__sidehead {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 10px 16px 12px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.7px;
	text-transform: uppercase;
	color: var(--dn-navy);
	border-bottom: 1px solid var(--dn-line);
}

.denno-catlist {
	margin: 0;
	padding: 4px 0 0;
	list-style: none;
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
}

.denno-catlist__item {
	position: relative;
}

.denno-catlist__item > a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 7px 16px;
	font-size: 13.5px;
	font-weight: 500;
	color: var(--dn-ink-2);
	transition: background 0.12s ease, color 0.12s ease;
}

.denno-catlist__item > a:hover {
	background: var(--dn-blue-soft);
	color: var(--dn-blue);
}

.denno-catlist__ico {
	display: flex;
	color: var(--dn-muted);
	transition: color 0.12s ease;
}

.denno-catlist__item > a:hover .denno-catlist__ico {
	color: var(--dn-blue);
}

.denno-catlist__name {
	flex: 1 1 auto;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.denno-catlist__arrow {
	display: flex;
	color: #b6c0d2;
}

/* Flyout submenu */

.denno-flyout {
	position: absolute;
	top: -6px;
	left: 100%;
	min-width: 250px;
	background: var(--dn-card);
	border-radius: var(--dn-radius);
	box-shadow: var(--dn-shadow-lg);
	padding: 10px;
	display: none;
	z-index: 40;
}

.denno-catlist__item:hover > .denno-flyout,
.denno-catlist__item:focus-within > .denno-flyout {
	display: block;
}

.denno-flyout__link {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	padding: 8px 11px;
	border-radius: 6px;
	font-size: 13px;
	color: var(--dn-ink-2);
}

.denno-flyout__link:hover {
	background: var(--dn-blue-soft);
	color: var(--dn-blue);
}

.denno-flyout__link em {
	font-style: normal;
	font-size: 11px;
	font-weight: 700;
	color: var(--dn-muted);
	background: var(--dn-sand);
	border-radius: 10px;
	padding: 1px 7px;
}

/* Carousel */

.denno-carousel {
	position: relative;
	border-radius: var(--dn-radius);
	overflow: hidden;
	box-shadow: var(--dn-shadow);
	min-height: 430px;
}

.denno-carousel__track {
	position: relative;
	width: 100%;
	height: 100%;
	min-height: inherit;
}

.denno-slide {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	padding: 40px 48px;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.55s ease;
	overflow: hidden;
	background: var(--dn-navy);
}

.denno-slide.is-active {
	opacity: 1;
	visibility: visible;
}

/* Designed campaign artwork: fills the panel edge to edge, nothing over it.
   This is how the reference marketplace runs its hero, and it is the intended
   final state once real banners exist. */
.denno-slide--banner {
	padding: 0;
	background: none;
}

.denno-slide__banner {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* ---- Composed fallback, used until artwork is supplied ----
   Flat, saturated colour fields. The previous build stacked a blurred photo,
   a dark veil and a light beam, which muddied into a dull wash; a single clean
   colour with one soft accent shape reads far sharper. */
.denno-slide:not(.denno-slide--banner)::before {
	content: "";
	position: absolute;
	top: -34%;
	right: -8%;
	width: 60%;
	height: 168%;
	border-radius: 46%;
	background: rgba(255, 255, 255, 0.09);
	pointer-events: none;
}

/* One saturated colour family per slide. The amber is the tone that works, so
   it leads — slide 1 is Laptops — and the rest are pitched at the same
   intensity in clearly different families. The earlier set was three
   near-identical dark blues, which is why it read as flat and samey. */

/* 1 — amber into gold (Laptops) */
.denno-slide:nth-child(1) {
	background: linear-gradient(135deg, #b5540a 0%, #f5a623 100%);
}

/* 2 — royal blue into azure */
.denno-slide:nth-child(2) {
	background: linear-gradient(135deg, #0a4fb5 0%, #29a3f7 100%);
}

/* 3 — deep emerald into vivid green */
.denno-slide:nth-child(3) {
	background: linear-gradient(135deg, #04704a 0%, #12c46f 100%);
}

/* 4 — violet into orchid */
.denno-slide:nth-child(4) {
	background: linear-gradient(135deg, #4a1d95 0%, #9061f9 100%);
}

/* 5 — deep teal into cyan */
.denno-slide:nth-child(5) {
	background: linear-gradient(135deg, #075e6b 0%, #12b5c4 100%);
}

.denno-slide__copy {
	position: relative;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	max-width: 52%;
	color: #fff;
}

.denno-slide__eyebrow {
	font-size: 12.5px;
	font-weight: 800;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.88);
}

.denno-slide__title {
	font-size: clamp(30px, 3.9vw, 54px);
	font-weight: 800;
	line-height: 1.03;
	letter-spacing: -1.3px;
}

.denno-slide__text {
	font-size: 15px;
	color: rgba(255, 255, 255, 0.86);
	max-width: 32ch;
}

.denno-slide__cta {
	display: inline-flex;
	align-items: center;
	margin-top: 6px;
	background: var(--dn-card);
	color: var(--dn-navy);
	font-weight: 800;
	font-size: 13.5px;
	padding: 13px 30px;
	border-radius: 999px;
	transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.denno-slide:hover .denno-slide__cta {
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
}

/* The white disc behind the product. Catalogue photos are white-background
   JPEGs, which would otherwise read as a rectangle pasted onto the panel.

   The element *is* the disc and clips its own contents, rather than painting a
   circle behind a free-floating image. A landscape photo sized to a share of
   the square has corners at share x 0.707 of the half-width, so at 74% they sat
   at 0.523 — outside the circle's 0.5 radius — and spilled past the edge. The
   clip makes that impossible for any aspect ratio; the smaller inset keeps a
   clean margin of white around the product. Box shadows paint outside the
   element's own box, so `overflow: hidden` does not clip it. */
.denno-slide__media {
	position: relative;
	z-index: 2;
	margin-left: auto;
	margin-right: 2%;
	width: 40%;
	aspect-ratio: 1 / 1;
	max-height: 84%;
	display: grid;
	place-items: center;
	border-radius: 50%;
	overflow: hidden;
	background: var(--dn-card);
	box-shadow: 0 26px 60px rgba(0, 0, 0, 0.34);
}

.denno-slide__media img {
	position: relative;
	z-index: 1;
	width: 68%;
	height: 68%;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.denno-carousel__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 38px;
	height: 38px;
	display: grid;
	place-items: center;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.9);
	color: var(--dn-navy);
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.2s ease, background 0.15s ease;
	z-index: 5;
}

.denno-carousel:hover .denno-carousel__nav,
.denno-carousel__nav:focus-visible {
	opacity: 1;
}

.denno-carousel__nav:hover {
	background: #fff;
}

.denno-carousel__nav--prev {
	left: 14px;
}

.denno-carousel__nav--prev .denno-icon {
	transform: rotate(180deg);
}

.denno-carousel__nav--next {
	right: 14px;
}

/* Centred between the feature chips and the SHOP NOW button. */
.denno-carousel__dots {
	position: absolute;
	bottom: 28px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 7px;
	z-index: 6;
}

.denno-carousel__dots button {
	width: 9px;
	height: 9px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.4);
	cursor: pointer;
	transition: background 0.2s ease, width 0.2s ease;
}

.denno-carousel__dots button.is-active {
	background: #fff;
	width: 24px;
	border-radius: 5px;
}

/* --------------------------------------------------- section chrome */

.denno-rail,
.denno-block {
	background: var(--dn-card);
	border-radius: var(--dn-radius);
	box-shadow: var(--dn-shadow);
	overflow: hidden;
}

.denno-rail__head,
.denno-block__head {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 15px 18px;
	border-bottom: 1px solid var(--dn-line);
}

.denno-rail__title,
.denno-block__title {
	margin: 0;
	font-size: 18px;
	font-weight: 800;
	color: var(--dn-ink);
	letter-spacing: -0.3px;
}

.denno-rail__tools {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 9px;
}

.denno-rail__more,
.denno-block__more {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	color: var(--dn-blue);
	font-weight: 700;
	font-size: 13px;
	white-space: nowrap;
}

.denno-block__more {
	margin-left: auto;
}

.denno-rail__more:hover,
.denno-block__more:hover {
	text-decoration: underline;
}

.denno-rail__nav {
	width: 30px;
	height: 30px;
	display: grid;
	place-items: center;
	border: 1px solid var(--dn-line);
	background: var(--dn-card);
	border-radius: 50%;
	color: var(--dn-ink-2);
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.denno-rail__nav--prev .denno-icon {
	transform: rotate(180deg);
}

.denno-rail__nav:hover {
	background: var(--dn-blue);
	border-color: var(--dn-blue);
	color: #fff;
}

/* Flash-sale treatment */

.denno-rail--flash .denno-rail__head {
	background: linear-gradient(90deg, var(--dn-flash) 0%, #b8301c 100%);
	border-bottom: 0;
}

.denno-rail--flash .denno-rail__title {
	color: #fff;
	display: flex;
	align-items: center;
	gap: 8px;
}

.denno-rail--flash .denno-rail__more {
	color: #fff;
}

.denno-rail--flash .denno-rail__nav {
	background: rgba(255, 255, 255, 0.16);
	border-color: rgba(255, 255, 255, 0.4);
	color: #fff;
}

.denno-rail--flash .denno-rail__nav:hover {
	background: #fff;
	color: var(--dn-flash);
}

.denno-countdown {
	display: flex;
	align-items: center;
	gap: 5px;
	color: #fff;
	font-size: 13px;
}

.denno-countdown__label {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-right: 4px;
	opacity: 0.95;
}

.denno-countdown__box {
	background: rgba(0, 0, 0, 0.3);
	border-radius: 5px;
	padding: 4px 8px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	min-width: 30px;
	text-align: center;
}

.denno-countdown__sep {
	font-weight: 700;
	opacity: 0.7;
}

/* ----------------------------------------------------- rails and grids */

.denno-rail__track {
	display: flex;
	overflow-x: auto;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.denno-rail__track::-webkit-scrollbar {
	display: none;
}

.denno-rail__track .denno-card {
	flex: 0 0 auto;
	width: 200px;
	scroll-snap-align: start;
}

.denno-block__body {
	display: flex;
}

.denno-grid {
	flex: 1 1 auto;
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	min-width: 0;
}

/* ----------------------------------------------------------- product card */

.denno-card {
	position: relative;
	background: var(--dn-card);
	padding: 14px 12px 16px;
	border-right: 1px solid var(--dn-line);
	border-bottom: 1px solid var(--dn-line);
	display: flex;
	flex-direction: column;
	transition: box-shadow 0.16s ease, transform 0.16s ease;
	min-width: 0;
}

.denno-card:hover {
	box-shadow: var(--dn-shadow-lg);
	transform: translateY(-3px);
	z-index: 2;
	border-radius: var(--dn-radius-sm);
}

.denno-card__link {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

.denno-card__media {
	position: relative;
	aspect-ratio: 1 / 1;
	display: grid;
	place-items: center;
	overflow: hidden;
	border-radius: var(--dn-radius-sm);
	/* Products without photography fall back to the Woo placeholder; a soft
	   tile behind it reads as intentional rather than broken. */
	background: var(--dn-sand);
}

.denno-card__media img,
.denno-card__img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	object-fit: contain;
	mix-blend-mode: multiply;
	transition: transform 0.28s ease;
}

.denno-card:hover .denno-card__media img {
	transform: scale(1.06);
}

.denno-card__badge {
	position: absolute;
	top: 7px;
	left: 7px;
	background: var(--dn-green);
	color: #fff;
	font-size: 11px;
	font-weight: 800;
	padding: 3px 8px;
	border-radius: 999px;
}

.denno-card__oos {
	position: absolute;
	inset: auto 0 0 0;
	background: rgba(22, 32, 47, 0.82);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	text-align: center;
	padding: 5px 0;
}

.denno-card__title {
	margin: 0;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.36;
	color: var(--dn-ink-2);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.72em;
}

.denno-card:hover .denno-card__title {
	color: var(--dn-blue);
}

.denno-card__price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 7px;
}

.denno-card__now {
	font-size: 15.5px;
	font-weight: 800;
	color: var(--dn-ink);
}

.denno-card__now .woocommerce-Price-amount {
	color: inherit;
}

.denno-card__was {
	font-size: 12px;
	color: var(--dn-muted);
	text-decoration: line-through;
}

.denno-card__rating {
	display: flex;
	align-items: center;
	gap: 6px;
}

/* Star rating: grey row with a gold row clipped over it. */
.denno-stars {
	position: relative;
	display: inline-block;
	line-height: 0;
	flex: 0 0 auto;
}

.denno-stars__base,
.denno-stars__fill {
	display: flex;
	gap: 1px;
}

.denno-stars__base {
	color: #ddd5c6;
}

.denno-stars__fill {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	color: #f5b400;
}

.denno-stars__fill .denno-icon {
	flex: 0 0 auto;
}

.denno-card__reviews {
	font-size: 11px;
	color: var(--dn-muted);
}

/* Flash-sale stock bar */

.denno-stockbar {
	margin-top: 10px;
}

.denno-stockbar__track {
	height: 5px;
	background: var(--dn-sand);
	border-radius: 3px;
	overflow: hidden;
}

.denno-stockbar__fill {
	display: block;
	height: 100%;
	background: linear-gradient(90deg, var(--dn-flash), #f77b62);
	border-radius: 3px;
}

.denno-stockbar__label {
	display: block;
	margin-top: 5px;
	font-size: 11px;
	font-weight: 700;
	color: var(--dn-flash);
}

/* ------------------------------------------------------------- cattiles */

/* Plain block: no card chrome, so the band colour shows through. */
.denno-block--plain {
	background: transparent;
	box-shadow: none;
}

.denno-block--plain .denno-block__head {
	border-bottom: 0;
	padding-left: 0;
	padding-right: 0;
}

/* Circular product discs on a colour band, in the style of the reference
   marketplace: white disc, brand accent wedge behind it, label underneath. */
.denno-cattiles {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 22px 14px;
}

.denno-cattile {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	text-align: center;
}

.denno-cattile__disc {
	position: relative;
	width: 124px;
	max-width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	display: grid;
	place-items: center;
	overflow: hidden;
	margin-bottom: 8px;
	background: var(--dn-card);
	box-shadow: 0 4px 14px rgba(20, 36, 75, 0.1);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

/* The diagonal accent wedge sitting behind the product cut-out. */
.denno-cattile__disc::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(115deg, transparent 0 34%, var(--dn-green) 34% 66%, transparent 66% 100%);
	opacity: 0.9;
}

.denno-cattile:nth-child(3n + 2) .denno-cattile__disc::before {
	background: linear-gradient(115deg, transparent 0 34%, var(--dn-blue) 34% 66%, transparent 66% 100%);
}

.denno-cattile:nth-child(3n + 3) .denno-cattile__disc::before {
	background: linear-gradient(115deg, transparent 0 34%, var(--dn-amber) 34% 66%, transparent 66% 100%);
}

/* 68%, not 74%: the disc clips to a circle, so a landscape photo at 74% had its
   corners cropped by the circle edge. Same geometry as the hero disc. */
.denno-cattile__disc img {
	position: relative;
	z-index: 1;
	width: 68%;
	height: 68%;
	object-fit: contain;
	mix-blend-mode: multiply;
	transition: transform 0.25s ease;
}


.denno-cattile__icon {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	color: var(--dn-navy);
}

.denno-cattile:hover .denno-cattile__disc {
	transform: translateY(-4px);
	box-shadow: 0 12px 28px rgba(20, 36, 75, 0.2);
}

/* Held to 1.04: a bigger hover scale pushes the corners back past the circle
   edge and the image visibly clips again. */
.denno-cattile:hover .denno-cattile__disc img {
	transform: scale(1.04);
}

.denno-cattile strong {
	font-size: 13.5px;
	font-weight: 700;
	color: var(--dn-ink);
	line-height: 1.25;
}

.denno-cattile em {
	font-style: normal;
	font-size: 11.5px;
	color: var(--dn-muted);
}

/* ---------------------------------------------------------------- trust */

.denno-trust {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--dn-gap);
}

.denno-trust__item {
	display: flex;
	align-items: center;
	gap: 13px;
	padding: 4px;
}

.denno-trust__icon {
	flex: 0 0 auto;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
}

.denno-trust__item strong {
	display: block;
	font-size: 14px;
	font-weight: 700;
	color: #fff;
}

.denno-trust__item em {
	display: block;
	font-style: normal;
	font-size: 12px;
	color: #a9b8d6;
	margin-top: 2px;
}

/* --------------------------------------------------------------- drawer */

.denno-drawer {
	position: fixed;
	inset: 0;
	z-index: 200;
	background: rgba(20, 36, 75, 0.55);
}

.denno-drawer[hidden] {
	display: none;
}

.denno-drawer__panel {
	width: min(86vw, 335px);
	height: 100%;
	background: var(--dn-card);
	overflow-y: auto;
	animation: denno-slide-in 0.22s ease;
}

@keyframes denno-slide-in {
	from {
		transform: translateX(-100%);
	}
}

.denno-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 15px 16px;
	background: var(--dn-navy);
	color: #fff;
	position: sticky;
	top: 0;
}

.denno-drawer__close {
	display: grid;
	place-items: center;
	border: 0;
	background: transparent;
	color: #fff;
	cursor: pointer;
	padding: 2px;
}

.denno-drawer__list,
.denno-drawer__list ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.denno-drawer__list > li > a {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 13px 16px;
	font-weight: 600;
	font-size: 14px;
	color: var(--dn-ink);
	border-bottom: 1px solid var(--dn-line);
}

.denno-drawer__list > li > a .denno-icon {
	color: var(--dn-blue);
}

.denno-drawer__list ul a {
	display: block;
	padding: 9px 16px 9px 46px;
	font-size: 13px;
	color: var(--dn-ink-2);
	border-bottom: 1px solid #f3eee3;
}

/* ----------------------------------------------------------- site footer */

.denno-sitefooter {
	background:
		radial-gradient(760px 320px at 82% -30%, rgba(13, 109, 215, 0.32), transparent 62%),
		radial-gradient(560px 280px at 6% 130%, rgba(0, 166, 81, 0.18), transparent 60%),
		var(--dn-navy);
	color: #c3cfe6;
	font-size: 13.5px;
	/* On the homepage the navy trust strip sits directly above this, and the two
	   dark areas otherwise merge into one undifferentiated block. */
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.denno-sitefooter__top {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
	gap: 34px;
	padding-top: 44px;
	padding-bottom: 40px;
}

/* Brand column */

.denno-flogo {
	display: inline-flex;
	margin-bottom: 14px;
}

/* The logo artwork has its own dark navy background, so on a navy footer it
   all but disappears. A light tile behind it keeps it legible. */
.denno-flogo img {
	height: 62px;
	width: auto;
	max-width: 170px;
	object-fit: contain;
	background: var(--dn-card);
	border-radius: 10px;
	padding: 6px;
}

.denno-fblurb {
	margin: 0;
	max-width: 34ch;
	line-height: 1.6;
	color: #aebbd6;
}

.denno-fsocial {
	display: flex;
	gap: 9px;
	margin-top: 18px;
}

.denno-fsocial a {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
	transition: background 0.15s ease, transform 0.15s ease;
}

.denno-fsocial a:hover {
	background: var(--dn-blue);
	transform: translateY(-2px);
}

/* Link columns */

.denno-fcol__head {
	margin: 0 0 16px;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: #fff;
}

.denno-flist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 10px;
}

.denno-flist a {
	color: #b6c3dc;
	transition: color 0.15s ease, padding-left 0.15s ease;
}

.denno-flist a:hover {
	color: #fff;
	padding-left: 4px;
}

/* Contact column */

.denno-fcontact {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 13px;
}

.denno-fcontact li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	color: #b6c3dc;
}

.denno-fcontact .denno-icon {
	color: var(--dn-green);
	margin-top: 1px;
}

.denno-fcontact a:hover {
	color: #fff;
}

/* Bottom bar */

.denno-sitefooter__bar {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	background: rgba(0, 0, 0, 0.18);
}

.denno-sitefooter__barinner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	flex-wrap: wrap;
	padding-top: 16px;
	padding-bottom: 16px;
}

.denno-fcopy {
	margin: 0;
	font-size: 12.5px;
	color: #9fb0cf;
}

.denno-fpay {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}

.denno-fpay li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 11.5px;
	font-weight: 700;
	color: #cbd7ec;
	background: rgba(255, 255, 255, 0.08);
	border-radius: 5px;
	padding: 5px 10px;
}

.denno-fpay .denno-icon {
	color: var(--dn-green);
}

/* ----------------------------------------------------------- responsive */

@media (max-width: 1200px) {
	.denno-hero {
		grid-template-columns: 224px 1fr;
		min-height: 420px;
	}

	.denno-grid,
	.denno-cattiles {
		grid-template-columns: repeat(5, 1fr);
	}

	.denno-cattile__disc {
		width: 110px;
	}
}

@media (max-width: 992px) {
	.denno-hero {
		grid-template-columns: 1fr;
		min-height: 0;
	}

	.denno-hero__side {
		display: none;
	}

	.denno-carousel {
		min-height: 0;
		aspect-ratio: 16 / 7;
	}

	.denno-grid,
	.denno-cattiles {
		grid-template-columns: repeat(4, 1fr);
	}

	.denno-sitefooter__top {
		grid-template-columns: 1fr 1fr;
		gap: 30px;
	}
}

@media (max-width: 782px) {
	.denno-burger {
		display: flex;
	}

	.denno-masthead__inner {
		flex-wrap: wrap;
		gap: 12px;
	}

	.denno-search {
		order: 5;
		flex-basis: 100%;
	}

	.denno-logo {
		margin-right: auto;
	}

	.denno-actions__text {
		display: none;
	}

	.denno-actions__item {
		padding: 8px;
	}

	.denno-band {
		padding: 18px 0;
	}

	.denno-slide {
		padding: 24px 26px;
	}

	.denno-slide__copy {
		max-width: 60%;
	}

	.denno-slide__cta {
		padding: 11px 24px;
		font-size: 12.5px;
	}

	.denno-logo img {
		height: 52px;
	}

	.denno-grid,
	.denno-cattiles {
		grid-template-columns: repeat(3, 1fr);
	}

	.denno-cattile__disc {
		width: 96px;
	}

	.denno-trust {
		grid-template-columns: repeat(2, 1fr);
	}

	.denno-rail__head,
	.denno-block__head {
		flex-wrap: wrap;
		gap: 10px;
	}

	.denno-rail__nav {
		display: none;
	}
}

@media (max-width: 520px) {
	.denno-grid,
	.denno-cattiles {
		grid-template-columns: repeat(2, 1fr);
	}

	.denno-rail__track .denno-card {
		width: 158px;
	}

	.denno-carousel {
		aspect-ratio: 4 / 3;
	}

	.denno-sitefooter__top {
		grid-template-columns: 1fr;
		gap: 26px;
		padding-top: 32px;
		padding-bottom: 28px;
	}

	.denno-sitefooter__barinner {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}

	/* Keep the disc crisp on small screens — it used to be faded behind the
	   copy, which now just reads as a washed-out blob. */
	.denno-slide__media {
		width: 34%;
		margin-right: 0;
		align-self: flex-start;
		margin-top: 4%;
	}

	.denno-slide__copy {
		max-width: 62%;
	}

	.denno-carousel__dots {
		bottom: 14px;
	}

	.denno-cattiles {
		grid-template-columns: repeat(3, 1fr);
		gap: 16px 8px;
	}

	.denno-cattile__disc {
		width: 88px;
	}

	.denno-cattile strong {
		font-size: 12px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.denno-catrail__track {
		animation: none;
	}

	.denno-home *,
	.denno-home *::before,
	.denno-home *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}

	.denno-rail__track {
		scroll-behavior: auto;
	}
}