/* DeeToo homepage sections */

.dth-head, .dth-cats, .dth-trust, .dth-flash, .dth-brands,
.dth-why, .dth-revs, .dth-news, .dth-ig, .dth-needs {
	--dt-orange: #f4511e;
	--dt-orange-dark: #d93d0c;
	--dt-ink: #16181d;
	--dt-muted: #6b7280;
	--dt-line: #e6e7eb;
	--dt-soft: #f7f8fa;
	--dt-dark: #14161a;
	box-sizing: border-box;
	color: var(--dt-ink);
}
.dth-head *, .dth-cats *, .dth-trust *, .dth-flash *, .dth-brands *,
.dth-why *, .dth-revs *, .dth-news *, .dth-ig *, .dth-needs * { box-sizing: border-box; }

/* ---------- Section heading ---------- */
.dth-head {
	display: flex; align-items: flex-end; justify-content: space-between;
	gap: 16px; flex-wrap: wrap; margin-bottom: 18px;
}
.dth-head__t {
	margin: 0; font-size: 21px; font-weight: 700; line-height: 1.2;
	display: flex; align-items: center; gap: 8px;
}
.dth-head__t::after {
	content: ""; display: block; width: 34px; height: 3px;
	background: var(--dt-orange); border-radius: 2px; margin-left: 2px;
}
.dth-head__s { margin: 6px 0 0; font-size: 12.5px; color: var(--dt-muted); }
.dth-viewall { font-size: 13px; font-weight: 600; color: var(--dt-orange); text-decoration: none; white-space: nowrap; }
.dth-viewall:hover { color: var(--dt-orange-dark); }
.dth-fire, .dth-crown { font-size: 18px; }

/* ---------- Shop by category ---------- */
.dth-cats { display: grid; grid-template-columns: repeat(8, minmax(0,1fr)); gap: 14px; }
.dth-cat {
	display: flex; flex-direction: column; align-items: center; gap: 8px;
	text-align: center; text-decoration: none; color: var(--dt-ink);
}
.dth-cat__img {
	width: 96px; height: 96px; border-radius: 50%;
	background: var(--dt-soft); border: 1px solid var(--dt-line);
	display: grid; place-items: center; overflow: hidden;
	transition: border-color .16s ease, transform .16s ease;
}
.dth-cat:hover .dth-cat__img { border-color: var(--dt-orange); transform: translateY(-3px); }
.dth-cat__img img { width: 74%; height: 74%; object-fit: contain; }
.dth-cat__n { font-size: 12.5px; font-weight: 600; line-height: 1.25; }
.dth-cat__s { font-size: 10.5px; color: var(--dt-muted); line-height: 1.25; }

/* ---------- Trust bar ---------- */
/* ---------- Trust bar ----------

   Each promise is an icon in a tinted tile beside a two-line label, the cells
   separated by hairlines. The rules are drawn by the 1px grid gap showing the
   container's own background through, so they stay correct at 5, 3, 2 or 1
   column without a single nth-child rule.                                    */

.dth-trust {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 1px; background: var(--dt-line);
	border: 1px solid var(--dt-line); border-radius: 14px; overflow: hidden;
	box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 10px 26px rgba(16,24,40,.05);
}
.dth-trust li {
	display: flex; align-items: center; gap: 13px;
	padding: 18px 16px; background: #fff; min-width: 0;
}
.dth-trust__i {
	flex: 0 0 auto; width: 42px; height: 42px;
	display: grid; place-items: center;
	border-radius: 11px; line-height: 0;
	background: #fff2ec; border: 1px solid #ffddcd;
	color: var(--dt-orange);
	transition: background .3s var(--dt-ease, ease), color .3s var(--dt-ease, ease),
	            border-color .3s var(--dt-ease, ease);
}
.dth-trust li:hover .dth-trust__i {
	background: var(--dt-orange); border-color: var(--dt-orange); color: #fff;
}
.dth-trust__t { min-width: 0; }
.dth-trust strong {
	display: block; font-size: 13px; font-weight: 700;
	color: var(--dt-ink); letter-spacing: -.1px; line-height: 1.3;
}
.dth-trust em {
	display: block; font-style: normal; font-size: 11.5px;
	color: var(--dt-muted); margin-top: 2px; line-height: 1.35;
}

/* One row on every desktop. grid-auto-flow:column keeps it to a single line
   whatever the item count, so five promises never break 3 + 2 with a dead cell
   in the corner. */
.dth-trust { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-template-columns: none; }

@media (max-width: 760px)  { .dth-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px)  {
	.dth-trust { grid-template-columns: 1fr; }
	.dth-trust li { padding: 15px 16px; }
	.dth-trust__i { width: 38px; height: 38px; border-radius: 10px; }
}

/* ---------- Flash sale banner ----------

   The whole section header is the client's artwork. Its middle third is drawn
   empty on purpose (the quiet band runs from 42% to 68% of the width), and the
   live countdown is laid into that gap.

   Sizes are given twice: a plain px value first, then the same thing in cqw so
   the panel scales with the artwork instead of drifting out of the gap. A
   browser without container queries drops the second and keeps a sane fixed
   size. Below 700px the panel stops floating and becomes a bar under the art,
   because the banner is 7.5:1 and there is no room to sit inside it.        */

.dth-fbanner {
	position: relative; display: block; overflow: hidden;
	border-radius: 14px; margin-bottom: 18px;
	background: #0b0b0d; text-decoration: none; line-height: 0;
	container-type: inline-size;
}
.dth-fbanner__art { width: 100%; height: auto; display: block; aspect-ratio: 2100 / 280; }
.dth-fbanner picture { display: block; line-height: 0; }

.dth-fbanner__panel {
	position: absolute; top: 50%; left: 55%; transform: translate(-50%, -50%);
	width: 24%;
	display: flex; flex-direction: column; align-items: center;
	gap: 6px; gap: .62cqw;
	line-height: 1.1; text-align: center;
}
.dth-fbanner__lbl {
	font-weight: 800; color: #ffb59a;
	text-transform: uppercase; letter-spacing: .18em;
	font-size: 9px; font-size: clamp(7px, .62cqw, 13px);
}

.dth-clock--banner { display: flex; align-items: flex-start; justify-content: center; gap: 4px; gap: .42cqw; }
.dth-clock--banner > span {
	display: flex; flex-direction: column; align-items: center;
	background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.35);
	border-radius: 6px; border-radius: .5cqw;
	padding: 4px 7px; padding: .4cqw .8cqw;
	min-width: 32px; min-width: 3.2cqw;
}
.dth-clock--banner b {
	font-weight: 800; color: #16181d; line-height: 1;
	font-variant-numeric: tabular-nums;
	font-size: 16px; font-size: clamp(12px, 1.5cqw, 32px);
}
.dth-clock--banner em {
	font-style: normal; font-weight: 700; color: #6b7280;
	letter-spacing: .1em; margin-top: 2px;
	font-size: 7px; font-size: clamp(6px, .52cqw, 11px);
}
.dth-clock--banner i {
	font-style: normal; font-weight: 800; color: #fff; line-height: 1;
	padding-top: 5px; padding-top: .5cqw;
	font-size: 14px; font-size: clamp(10px, 1.2cqw, 26px);
}

.dth-fbanner__btn {
	display: inline-flex; align-items: center; white-space: nowrap;
	background: var(--dt-orange); color: #fff; font-weight: 800;
	border-radius: 999px;
	gap: 5px; gap: .5cqw;
	font-size: 11px; font-size: clamp(9px, .95cqw, 19px);
	padding: 6px 14px; padding: .62cqw 1.5cqw;
	transition: background .35s cubic-bezier(.22,1,.36,1);
}
.dth-fbanner__btn svg { width: 1em; height: 1em; }
.dth-fbanner:hover .dth-fbanner__btn { background: var(--dt-orange-dark); }

@media (max-width: 700px) {
	/* Phones get their own composition (4:3) with a frame drawn into the art at
	   x 14.6%-85.3%, y 32.8%-50.3%. The countdown is laid inside that frame.
	   Sizes are in cqw against the banner width so the digits keep filling the
	   frame from a 320px phone up to the 700px breakpoint. */
	.dth-fbanner__art { aspect-ratio: 1448 / 1086; }

	.dth-fbanner__panel {
		top: 41.5%; left: 50%; transform: translate(-50%, -50%);
		width: 68%;
		flex-direction: row; justify-content: center; align-items: flex-start;
		gap: 0; padding: 0;
	}

	/* No room for either inside the frame, and the whole banner is tappable. */
	.dth-fbanner__lbl,
	.dth-fbanner__btn { display: none; }

	.dth-clock--banner { gap: 5px; gap: 1.5cqw; width: 100%; }
	.dth-clock--banner > span {
		border-radius: 5px; border-radius: 1.4cqw;
		padding: 4px 11px; padding: 1cqw 3.4cqw;
		min-width: 0; flex: 0 1 auto;
	}
	.dth-clock--banner b { font-size: 18px; font-size: clamp(14px, 5.4cqw, 34px); }
	.dth-clock--banner em { font-size: 8px; font-size: clamp(6px, 2.2cqw, 14px); margin-top: 1px; }
	.dth-clock--banner i {
		color: #ff8a4c;
		font-size: 15px; font-size: clamp(12px, 4.4cqw, 28px);
		padding-top: 4px; padding-top: 1.1cqw;
	}
}
}

/* Homepage strips size to the CARD, not to a fixed column count: the reference
   card needs ~230px for its two feature chips to sit on one line. Six across
   only happens once the viewport is genuinely wide enough. */
.dth-grid--6 { grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)) !important; }
.dth-grid--5 { grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)) !important; }

/* ---------- Shop by need ---------- */
.dth-needs { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 14px; }
.dth-need {
	position: relative; display: block; border-radius: 12px; overflow: hidden;
	text-decoration: none; min-height: 150px; background: var(--dt-dark);
}
/* The tiles carry real product photography now, so the artwork is held back
   only enough to keep the label legible: most of the dimming is done by a
   bottom-weighted gradient rather than by flattening the whole image. */
.dth-need img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .85; }
.dth-need__c {
	position: absolute; inset: 0; padding: 14px;
	display: flex; flex-direction: column; justify-content: flex-end; gap: 3px;
	background: linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.35) 55%, rgba(0,0,0,.88) 100%);
}
.dth-need__n { font-size: 13.5px; font-weight: 700; color: #fff; line-height: 1.25; }
.dth-need__s { font-size: 10.5px; color: #cfd3da; }
.dth-need__a {
	position: absolute; top: 12px; left: 12px;
	width: 28px; height: 28px; border-radius: 50%;
	background: var(--dt-orange); color: #fff; display: grid; place-items: center;
}

/* ---------- Brands: infinite marquee ----------

   .dth-brands is the clipping viewport (overflow hidden, full width). Inside,
   .dth-brands__track holds two identical .dth-brands__set copies side by side
   and slides left by exactly 50% of its own width — since both halves are
   pixel-identical, the moment the first set has scrolled fully out of view the
   second is sitting exactly where the first started, so the loop is seamless
   with no jump or reset.

   Speed is held constant in actual px/second (not a fixed animation-duration)
   by deetoo.js, which measures one set's rendered width and sets
   --dth-marquee-duration accordingly — so the crawl speed does not change if a
   brand is added or removed, or at a breakpoint where tiles resize. The
   fallback duration below only applies before JS runs, or if it never does. */

.dth-brands {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
	        mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
}
.dth-brands__track {
	display: flex; width: max-content;
	animation: dth-marquee var(--dth-marquee-duration, 34s) linear infinite;
}
.dth-brands__set { display: flex; gap: 12px; padding-right: 12px; flex: 0 0 auto; }

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

/* Paused off-screen (deetoo.js) to save the compositor a job nobody sees, and
   on hover so a visitor can actually read a logo before it slides past. */
.dth-brands.is-paused .dth-brands__track { animation-play-state: paused; }
@media (hover: hover) {
	.dth-brands:hover .dth-brands__track { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
	.dth-brands__track { animation: none; }
	/* The filler copy is not needed if nothing is scrolling to it. */
	.dth-brands__set[aria-hidden] { display: none; }
}

.dth-brand {
	display: grid; place-items: center; min-height: 74px; width: 168px; padding: 12px;
	background: #fff; border: 1px solid var(--dt-line); border-radius: 10px;
	text-decoration: none; transition: border-color .16s ease, box-shadow .16s ease;
}
.dth-brand:hover { border-color: var(--dt-orange); box-shadow: 0 6px 16px rgba(0,0,0,.07); }
.dth-brand__n { font-size: 14px; font-weight: 700; color: var(--dt-ink); letter-spacing: -.2px; }

/* ---------- Why choose ---------- */
.dth-why__t { margin: 0 0 18px; }
.dth-why { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.dth-why {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 14px;
}
.dth-why li { display: flex; align-items: center; gap: 11px; }
.dth-why__i {
	width: 38px; height: 38px; flex: 0 0 auto;
	display: grid; place-items: center; border-radius: 9px;
	background: var(--dt-soft); color: var(--dt-ink);
}
.dth-why strong { display: block; font-size: 12.5px; font-weight: 700; }
.dth-why em { display: block; font-style: normal; font-size: 11px; color: var(--dt-muted); }

/* ---------- Testimonials ---------- */
.dth-revs { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 14px; }
.dth-rev {
	background: #fff; border: 1px solid var(--dt-line); border-radius: 12px;
	padding: 16px; display: flex; flex-direction: column; gap: 8px;
}
.dth-rev header { display: flex; align-items: center; gap: 10px; }
.dth-rev header img { border-radius: 50%; width: 38px; height: 38px; }
.dth-rev header strong { display: block; font-size: 12.5px; }
.dth-rev header em { display: block; font-style: normal; font-size: 10.5px; color: var(--dt-muted); }
.dth-rev p { margin: 0; font-size: 12.5px; line-height: 1.55; color: #374151; }
.dth-rev__p { font-size: 11px; color: var(--dt-muted); margin-top: auto; }

.dth-empty {
	padding: 34px; text-align: center;
	background: var(--dt-soft); border: 1px dashed var(--dt-line); border-radius: 12px;
}
.dth-empty p { margin: 0 0 5px; font-size: 14px; font-weight: 600; }
.dth-empty__s { font-size: 12.5px !important; font-weight: 400 !important; color: var(--dt-muted); }

/* ---------- Instagram ---------- */
.dth-ig {
	display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
	background: var(--dt-dark); border-radius: 12px; padding: 16px 18px;
}
.dth-ig__l { display: flex; align-items: center; gap: 11px; color: #fff; }
.dth-ig__i { color: var(--dt-orange); line-height: 0; }
.dth-ig__l strong { display: block; font-size: 13px; }
.dth-ig__l em { display: block; font-style: normal; font-size: 11px; color: #a8adb7; }
.dth-ig__row { display: flex; gap: 8px; flex: 1 1 auto; overflow: hidden; }
.dth-ig__row a { flex: 0 0 auto; line-height: 0; }
.dth-ig__row img { width: 54px; height: 54px; object-fit: contain; border-radius: 8px; background: #22252c; }
.dth-ig__btn {
	background: var(--dt-orange); color: #fff; text-decoration: none;
	padding: 9px 20px; border-radius: 7px; font-size: 12.5px; font-weight: 600; white-space: nowrap;
}
.dth-ig__btn:hover { background: var(--dt-orange-dark); color: #fff; }

/* ---------- Newsletter ---------- */
.dth-news {
	display: flex; align-items: center; justify-content: space-between;
	gap: 20px; flex-wrap: wrap;
	background: var(--dt-orange); border-radius: 12px; padding: 18px 22px;
}
.dth-news__txt { display: flex; align-items: center; gap: 12px; color: #fff; }
.dth-news__i {
	width: 38px; height: 38px; display: grid; place-items: center;
	background: rgba(255,255,255,.18); border-radius: 9px; color: #fff; flex: 0 0 auto;
}
.dth-news__txt strong { display: block; font-size: 15px; }
.dth-news__txt em { display: block; font-style: normal; font-size: 12px; opacity: .9; }
.dth-news__form { display: flex; gap: 8px; flex: 0 1 460px; }
.dth-news__form input {
	flex: 1 1 auto; height: 44px; padding: 0 14px;
	border: none; border-radius: 8px; font-size: 13px; background: #fff; color: var(--dt-ink);
}
.dth-news__form input:focus { outline: 2px solid rgba(255,255,255,.6); }
.dth-news__form button {
	height: 44px; padding: 0 22px; border: none; border-radius: 8px;
	background: var(--dt-dark); color: #fff; font-size: 13px; font-weight: 600;
	cursor: pointer; font-family: inherit; white-space: nowrap;
}
.dth-news__form button:hover { background: #000; }

/* ---------- Responsive ---------- */
/* Small desktops keep the single-row sections on one row: the wrapping only
   starts once the viewport is genuinely tablet-sized. */
@media (max-width: 1200px) {
	.dth-cats { grid-template-columns: repeat(4, minmax(0,1fr)); }
	.dth-needs { grid-template-columns: repeat(3, minmax(0,1fr)); }
	.dth-revs { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 900px) {
	.dth-why { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0,1fr)); }
	/* Four promises, so 2 x 2 rather than 3 + 1. */
	.dth-trust { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 780px) {
	.dth-cats { grid-template-columns: repeat(3, minmax(0,1fr)); }
	.dth-grid--6, .dth-grid--5 { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
	.dth-card-narrow { }
	.dth-needs, .dth-revs { grid-template-columns: repeat(2, minmax(0,1fr)); }
	.dth-why { grid-template-columns: repeat(2, minmax(0,1fr)); }
	.dth-news__form { flex-basis: 100%; }
	.dth-ig__row { display: none; }
}
@media (max-width: 480px) {
	.dth-cats { grid-template-columns: repeat(2, minmax(0,1fr)); }
	.dth-head__t { font-size: 18px; }
	.dth-why { grid-template-columns: 1fr; }
}

/* ---------- Hero ---------- */
.dth-hero { color: #fff; padding: 34px 0 6px; }
.dth-hero__eyebrow {
	display: inline-block; font-size: 11px; font-weight: 700;
	letter-spacing: .16em; color: #f4511e; margin-bottom: 12px;
}
.dth-hero__h1 { margin: 0 0 14px; font-size: clamp(30px, 4vw, 46px); font-weight: 800; line-height: 1.1; color: #fff; }
.dth-hero__h1 span { color: #f4511e; }
.dth-hero__sub { margin: 0; font-size: 15px; line-height: 1.6; color: #cfd3da; max-width: 460px; }

.dth-hero__usps {
	list-style: none; margin: 20px 0 0; padding: 18px 0 0;
	border-top: 1px solid rgba(255,255,255,.12);
	display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px;
}
.dth-hero__usps li { display: flex; align-items: center; gap: 10px; }
.dth-hero__ui { color: #f4511e; flex: 0 0 auto; line-height: 0; }
.dth-hero__usps strong { display: block; font-size: 12.5px; font-weight: 700; color: #fff; }
.dth-hero__usps em { display: block; font-style: normal; font-size: 10.5px; color: #a8adb7; }

/* The hero section sits flush under the header. */
#dth-hero-sec .elementor-widget-image img { border-radius: 14px; }

@media (max-width: 780px) {
	.dth-hero__usps { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* Brand logos: SVG wordmarks, or client-uploaded artwork when present. */
.dth-brand__svg { display: block; width: 100%; max-width: 132px; line-height: 0; }
.dth-brand__svg svg { width: 100%; height: auto; display: block; }
/* Percentage width so a mark with its own coloured plate (POCO) keeps a margin
   inside the tile instead of running to the border. */
.dth-brand__img { max-width: 76%; max-height: 34px; width: auto; height: auto; object-fit: contain; display: block; }
.dth-brand__ltr { font-size: 17px; font-weight: 800; color: var(--dt-ink); }
.dth-brand { padding: 14px 16px; }

/* ---------- Single-row rails ----------
   Category and product strips stay on ONE line at every width. Overflow
   scrolls horizontally with arrows instead of wrapping to a second row. */
.dth-rail { position: relative; }
.dth-rail__track {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-behavior: smooth;
	scroll-snap-type: x proximity;
	padding: 4px 2px 8px;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.dth-rail__track::-webkit-scrollbar { display: none; }

/* Product cards in a rail: fixed width so the row never squeezes them. */
.dth-rail__track > .dt-card {
	flex: 0 0 232px;
	width: 232px;
	scroll-snap-align: start;
}

/* Category tiles in a rail. */
.dth-rail--cats .dth-rail__track { gap: 14px; }
.dth-rail--cats .dth-rail__track > .dth-cat {
	flex: 0 0 auto;
	width: 140px;
	scroll-snap-align: start;
}

.dth-rail__nav {
	position: absolute; top: 42%; transform: translateY(-50%); z-index: 5;
	width: 36px; height: 36px; display: grid; place-items: center;
	background: #fff; border: 1px solid var(--dt-line); border-radius: 50%;
	color: var(--dt-ink); cursor: pointer; padding: 0;
	box-shadow: 0 3px 14px rgba(0,0,0,.13);
	transition: color .15s ease, border-color .15s ease;
}
.dth-rail__nav:hover { color: var(--dt-orange); border-color: var(--dt-orange); }
.dth-rail__nav--prev { left: -14px; }
.dth-rail__nav--next { right: -14px; }
.dth-rail__nav[hidden] { display: none; }

@media (max-width: 1400px) {
	.dth-rail__nav--prev { left: -6px; }
	.dth-rail__nav--next { right: -6px; }
}
@media (max-width: 640px) {
	.dth-rail__track > .dt-card { flex-basis: 200px; width: 200px; }
	.dth-rail--cats .dth-rail__track > .dth-cat { width: 118px; }
	.dth-rail__nav { display: none; }
	.dth-rail__track { scroll-snap-type: x mandatory; }
}

/* ---------- Fixed-column rails ----------
   Desktop uses a real grid so every strip is exactly one row at the requested
   column count. Narrow screens fall back to the scrolling flex rail. */
.dth-rail--6 .dth-rail__track,
.dth-rail--5 .dth-rail__track,
.dth-rail--cats .dth-rail__track {
	display: grid;
	overflow: visible;
	padding-bottom: 4px;
}
.dth-rail--6 .dth-rail__track { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.dth-rail--5 .dth-rail__track { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.dth-rail--cats .dth-rail__track { grid-template-columns: repeat(8, minmax(0, 1fr)); }

/* In grid mode the cards fill their column instead of a fixed width. */
.dth-rail--6 .dth-rail__track > .dt-card,
.dth-rail--5 .dth-rail__track > .dt-card,
.dth-rail--cats .dth-rail__track > .dth-cat {
	flex: initial;
	width: auto;
}

/* Arrows are only for the scrolling fallback. */
.dth-rail--6 .dth-rail__nav,
.dth-rail--5 .dth-rail__nav,
.dth-rail--cats .dth-rail__nav { display: none; }

/* Small desktops keep the designed six (and five) across rather than dropping to
   four or turning into a scroller. Cards get narrow, so their two buttons stack
   below 1300px instead of sitting side by side. */
@media (min-width: 1000px) and (max-width: 1300px) {
	.dth-rail__track > .dt-card .dt-card__actions,
	.dtc-grid > .dt-card .dt-card__actions,
	.dt-grid > .dt-card .dt-card__actions { flex-direction: column; }
	.dth-rail__track > .dt-card,
	.dtc-grid > .dt-card { padding: 10px; }
}

@media (max-width: 999px) {
	.dth-rail--6 .dth-rail__track,
	.dth-rail--5 .dth-rail__track,
	.dth-rail--cats .dth-rail__track {
		display: flex;
		overflow-x: auto;
		padding-bottom: 8px;
	}
	.dth-rail--6 .dth-rail__track > .dt-card,
	.dth-rail--5 .dth-rail__track > .dt-card { flex: 0 0 224px; width: 224px; }
	.dth-rail--cats .dth-rail__track > .dth-cat { flex: 0 0 auto; width: 128px; }
	.dth-rail--6 .dth-rail__nav,
	.dth-rail--5 .dth-rail__nav,
	.dth-rail--cats .dth-rail__nav { display: grid; }
}
@media (max-width: 999px) {
	.dth-rail--6 .dth-rail__nav,
	.dth-rail--5 .dth-rail__nav,
	.dth-rail--cats .dth-rail__nav { display: none; }
}

/* ---------- Phones: products in a 2-up grid ----------

   A horizontal rail on a phone always cuts the second card off at the screen
   edge and hides the rest behind a swipe most people never make. Every product
   strip becomes a real two-column grid instead, matching the collection pages.

   Category tiles are the deliberate exception — that row is meant to stay on
   one line, so it keeps scrolling.

   These selectors carry one more class than the rail rules above so they win
   without !important.                                                        */

@media (max-width: 640px) {
	.dth-rail:not(.dth-rail--cats) .dth-rail__track {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
		overflow: visible;
		scroll-snap-type: none;
		padding: 2px 0 0;
	}
	.dth-rail:not(.dth-rail--cats) .dth-rail__track > .dt-card {
		flex: initial;
		width: auto;
		scroll-snap-align: none;
	}
	.dth-rail:not(.dth-rail--cats) .dth-rail__nav { display: none; }
}

/* Supplied category artwork already carries its own ring and background, so
   drop our grey disc and let the image fill the tile. */
.dth-cat__img.has-img {
	background: transparent;
	border: none;
	width: 116px;
	height: 116px;
}
.dth-cat__img.has-img img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: 50%;
}
.dth-cat:hover .dth-cat__img.has-img { transform: translateY(-3px); }

/* Client-placed combo banner runs edge to edge.
   The section's side padding is zeroed in the page tree; Elementor still
   centres the image inline, so stretch the widget and the image itself. */
#dth-combo-banner .elementor-widget-image,
#dth-combo-banner .elementor-widget-image .elementor-widget-container,
#dth-combo-banner .elementor-widget-image figure,
#dth-combo-banner .elementor-widget-image a { width: 100%; max-width: 100%; margin: 0; }

#dth-combo-banner .elementor-widget-image img {
	width: 100%;
	max-width: 100%;
	height: auto;
	display: block;
	border-radius: 0;
}

/* ---------- Help bar ----------
   The WhatsApp prompt above the Instagram strip. One row on desktop: the offer
   on the left, the reassurance chips on the right. */

.dth-help {
	display: flex; align-items: center; justify-content: space-between;
	gap: 20px; flex-wrap: wrap;
	background: linear-gradient(100deg, #ffe4d6 0%, #ffd9c6 100%);
	border-radius: 12px; padding: 16px 20px;
}
.dth-help__lead { display: flex; align-items: center; gap: 14px; min-width: 0; flex: 1 1 460px; }
.dth-help__ico {
	flex: 0 0 auto; width: 46px; height: 46px; display: grid; place-items: center;
	border-radius: 11px; line-height: 0; background: var(--dt-orange); color: #fff;
}
.dth-help__txt { min-width: 0; }
.dth-help__txt strong { display: block; font-size: 15px; font-weight: 800; letter-spacing: -.2px; color: var(--dt-ink); }
.dth-help__txt em { display: block; font-style: normal; font-size: 12.5px; color: #6b4a3c; margin-top: 2px; }

.dth-help__btn {
	flex: 0 0 auto;
	display: inline-flex; align-items: center; gap: 8px;
	background: #25d366; color: #fff; text-decoration: none;
	font-size: 13px; font-weight: 700; padding: 11px 18px; border-radius: 999px;
	transition: background .3s cubic-bezier(.22,1,.36,1);
}
.dth-help__btn:hover { background: #1da851; color: #fff; }

.dth-help__chips {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-auto-flow: column; grid-auto-columns: max-content;
	gap: 22px; align-items: center;
}
.dth-help__chips li {
	display: flex; align-items: center; gap: 7px;
	font-size: 12.5px; font-weight: 700; color: var(--dt-ink); white-space: nowrap;
}
.dth-help__chips span { line-height: 0; color: var(--dt-orange); }

@media (max-width: 1100px) {
	.dth-help__chips { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px 20px; }
}
@media (max-width: 760px) {
	.dth-help__lead { flex-wrap: wrap; }
	.dth-help__btn { width: 100%; justify-content: center; }
}

/* ---------- Mobile polish ---------- */

@media (max-width: 640px) {
	/* Same rule as the collection pages: long subtitles get the icon above
	   centred text, short ones keep the icon beside them. */
	.dth-why { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.dth-why li { flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 15px 10px; }
	.dth-why li:last-child:nth-child(odd) { grid-column: 1 / -1; }
	.dth-trust li:last-child:nth-child(odd) { grid-column: 1 / -1; }
	.dth-needs > *:last-child:nth-child(odd) { grid-column: 1 / -1; }
	.dth-why strong { font-size: 12px; }
	.dth-why em { font-size: 10.5px; }

	/* The tiles only have to hold a wordmark, so they do not need desktop
	   height. Width shrinks with them, or the marquee just spends more time
	   scrolling past empty tile padding. */
	.dth-brand { min-height: 58px; width: 132px; padding: 10px 12px; }
	.dth-brand__img { max-height: 26px; }

	/* Stats read as one quiet block rather than three loose lines. */
	.dt-stats { display: grid; grid-template-columns: 1fr; gap: 0; }
	.dt-stats .dt-stat { padding: 12px 2px; border-top: 1px solid var(--dt-line); }
	.dt-stats .dt-stat:first-child { border-top: 0; }

	.dth-help { padding: 14px 16px; gap: 14px; }
	.dth-help__txt strong { font-size: 14px; }
}


/* ---------- Pinned reasons ----------
   The extra height is what the sticky child scrolls against. Desktop only:
   below this width the row is a plain block, because pinning on a short
   viewport swallows the whole screen. */

/* Only reserve the extra scroll height when pinning can actually engage.
   Without this guard a browser that cannot pin would render the row at its
   natural height inside a 185vh box — a screenful of empty space. */
@media (min-width: 1000px) {
	html.dt-can-pin .dth-whypin { min-height: 185vh; }
}

/* Once deetoo.js drives the marquee it owns the transform outright; leaving
   the CSS animation running would fight it for the same property. */
.dth-brands.is-js .dth-brands__track { animation: none !important; }
/* DeeToo: show eight category tiles on desktop and slide the remaining tiles.
 * Paste this block at the very END of: custom plugin > assets > home.css
 */

@media (min-width: 1000px) {
	.dth-rail--cats .dth-rail__track {
		display: flex;
		gap: 14px;
		overflow-x: auto;
		overflow-y: hidden;
		padding: 4px 2px 8px;
		scroll-behavior: smooth;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}

	.dth-rail--cats .dth-rail__track::-webkit-scrollbar {
		display: none;
	}

	.dth-rail--cats .dth-rail__track > .dth-cat {
		flex: 0 0 calc((100% - 98px) / 8);
		width: calc((100% - 98px) / 8);
		scroll-snap-align: start;
	}

	.dth-rail--cats .dth-rail__nav {
		display: grid;
	}
}

/* Tablet and mobile: natural finger swipe. */
@media (max-width: 999px) {
	.dth-rail--cats .dth-rail__track {
		display: flex;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
	}

	.dth-rail--cats .dth-rail__track > .dth-cat {
		flex: 0 0 128px;
		width: 128px;
		scroll-snap-align: start;
	}

	.dth-rail--cats .dth-rail__nav {
		display: none;
	}
}