/**
 * DealEngine front end.
 *
 * A real, enqueued, versioned stylesheet — not a <style> block printed into
 * wp_head, and emphatically not the WordPress Customiser. The site it replaces
 * carried 34KB of Customiser CSS whose every selector existed to force a
 * Datafeedr offer table into a WooCommerce page. CSS that lives in the database
 * cannot be reviewed, diffed, or reverted; this can.
 *
 * Namespaced `de-` throughout, so nothing here can collide with the theme.
 */

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

/*
 * ON :root, NOT ON .de-product / .de-archive.
 *
 * They used to be scoped to those two wrappers, which was fine while the only things we
 * rendered were the product page and the archive. The homepage shortcodes render OUTSIDE
 * both — .de-tiles, .de-brands, .de-codes, .de-search are dropped straight into a Gutenberg
 * page — so every one of them inherited NO tokens at all.
 *
 * A `var()` that resolves to nothing does not fall back to something sensible: the whole
 * declaration becomes invalid at computed-value time and is thrown away. So the homepage
 * rendered with `background: var(--de-accent)` silently deleted, which is why the discount
 * badge came out as a blank white pill, the Search button lost its teal on a navy hero
 * (an invisible button on the most important page), and the category tiles and brand chips
 * lost their borders and their padding. It read as a flat, broken design. Nothing was
 * broken; the colours were simply never defined.
 *
 * Every token is namespaced `--de-`, so :root is safe — it cannot collide with the theme.
 */
:root {
	--de-navy: #0d1b2a;
	--de-navy-2: #142942;   /* the lift inside a dark band, so navy-on-navy still has edges */
	--de-accent: #12b3a0;
	--de-accent-d: #0c8d7e;
	--de-accent-l: #5fd9c9;  /* teal that survives a dark background */
	--de-ink: #16202b;
	--de-muted: #69727e;
	--de-line: #e8ebee;
	--de-soft: #f4f6f8;
	--de-tint: rgba(18, 179, 160, .06);
	--de-card: #fff;
	--de-shadow: 0 1px 2px rgba(13, 27, 42, .06), 0 6px 20px rgba(13, 27, 42, .06);
	--de-shadow-lg: 0 2px 4px rgba(13, 27, 42, .04), 0 14px 40px rgba(13, 27, 42, .10);
}

/* ------------------------------------------------------- theme suppression */

/* The theme renders its own H1 and post meta at full width above our layout.
   We render the title inside the right column, next to the price, so the
   theme's copies are suppressed rather than duplicated. */
.single-rd_product .entry-meta,
.single-rd_product .ast-single-post-meta,
.single-rd_product .post-meta,
.single-rd_product .ast-single-post-order,
.single-rd_product .entry-title,
.single-rd_product .ast-single-entry-banner { display: none !important; }

/* ------------------------------------------------------------ product page */

/* Lifted from 1.25em. The gap under the header read as dead space rather than
   breathing room. Applied to the whole block, not to the gallery alone, so the image
   and the breadcrumb rise together and the two columns stay level. */
.de-product { margin: .45em 0 0; color: var(--de-ink); }

.de-title { font-size: 1.85rem; font-weight: 800; color: var(--de-navy); margin: .1em 0 1.1em; line-height: 1.15; letter-spacing: -.02em; }

/* The trail is a navigation control, not a footnote. At .8rem it read as fine print
   under a 1.85rem title; it now carries enough weight to be seen and clicked. */
.de-crumbs { font-size: .92rem; color: var(--de-muted); margin: 0 0 1em; display: flex; flex-wrap: wrap; align-items: center; gap: .1em; line-height: 1.3; font-weight: 600; }
.de-crumbs a { color: var(--de-muted); text-decoration: none !important; box-shadow: none !important; border-bottom: 0 !important; }
.de-crumbs a:hover { color: var(--de-accent-d); }
.de-crumbs a:last-child { color: var(--de-ink); font-weight: 700; }
.de-crumb-sep { color: #c3c9cf; margin: 0 .3em; }

.de-layout { display: flex; flex-wrap: wrap; gap: 2.5em; align-items: flex-start; }
.de-col-gallery { flex: 1 1 340px; min-width: 280px; position: sticky; top: 1.5em; }
.de-col-main { flex: 1 1 400px; min-width: 300px; }

/* gallery */

/*
 * NO BOX AROUND THE PRODUCT IMAGE. The feed images are cut-outs on white, so a white
 * panel with a border draws a frame around nothing and makes the boot look like a
 * thumbnail in a grid rather than the subject of the page. The square is kept — it
 * holds the layout steady while images of different aspect ratios load — but it is
 * invisible.
 */
.de-gallery-main { aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; background: transparent; border: 0; padding: 2%; box-sizing: border-box; overflow: hidden; }
.de-col-gallery, .de-gallery, .de-gallery-main, .de-gallery-main img { box-shadow: none !important; border: 0 !important; }
/* A small radius, so a product shot with a light or off-white ground does not meet the
   page on a hard 90-degree corner. Just enough to soften; not enough to look like a
   card, which is the thing we just took away. */
.de-gallery-main img { width: 100%; height: 100%; object-fit: contain; object-position: center; border-radius: 10px; }
.de-gallery-empty { opacity: .5; }
.de-gallery-thumbs { display: flex; flex-wrap: wrap; gap: .55em; margin-top: .7em; }
/* WHITE, not grey. The product images are cut-outs on white; on a grey tile the contained
   image left grey letterbox bars around it, and on a small thumb that grey dominated — the
   "greyed out" look. White matches the images' own background, so the bars vanish and the
   product reads edge to edge. */
/* ABSOLUTE POSITIONING, not flex + height:100%. The thumb is a <button>, and a percentage
   height on a child inside a flex button does not resolve — the browser computes it as 0 and
   the image renders blank, while the identical CSS works on the main image because that is a
   <div>. inset:0 gives the image the box's dimensions outright, no percentage to resolve, so
   it fills whatever the source's shape (contain keeps it whole; the white ground matches the
   product cut-outs so there is no grey letterbox). */
.de-thumb { position: relative; padding: 0; border: 1px solid var(--de-line); border-radius: 10px; background: #fff; cursor: pointer; width: 76px; height: 76px; box-sizing: border-box; overflow: hidden; transition: border-color .15s, box-shadow .15s; }
.de-thumb:hover { border-color: var(--de-accent); }
.de-thumb.is-active { border-color: var(--de-accent); box-shadow: 0 0 0 2px var(--de-accent); }
.de-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 6%; box-sizing: border-box; }

/* deals panel */

/* The 1.75em under the deals panel, on top of the disclosure's own margin, opened a
   gap that read as a break in the page rather than a change of subject. */
.de-deals { margin: 0 0 1em; }
.de-deals-title { font-size: 1.4rem; font-weight: 800; color: var(--de-navy); margin: 0 0 1em; padding-bottom: .7em; border-bottom: 1px solid var(--de-line); line-height: 1.1; letter-spacing: -.01em; }

/*
 * EIGHT PER ROW, ALL THE SAME WIDTH.
 *
 * The pills used to be content-width, so "UK 5.5" was wider than "UK 1" — and the
 * moment a ninth size wrapped, the second row was a different shape from the first
 * and the whole control looked crooked.
 *
 * A fixed pill width makes every row align, however many sizes a product has. The
 * max-width caps the row at eight: 8 x 5.2em + 7 gaps fits, a ninth does not, so it
 * wraps to a second row that lines up exactly under the first.
 */
.de-size-selector { display: none; }
.de-js .de-size-selector { display: flex; flex-wrap: wrap; gap: .55em; margin: 0 0 1.2em; max-width: 46em; }
.de-size-btn { border: 1.5px solid var(--de-line); background: #fff; color: var(--de-ink); border-radius: 11px; padding: .62em 0; cursor: pointer; font-size: .92rem; font-weight: 700; width: 5.2em; min-width: 0; line-height: 1; transition: all .12s; }
.de-size-btn:hover { border-color: var(--de-accent); color: var(--de-accent-d); }
/* Teal, not navy. The selected size is the same act of choosing as the "Cheapest"
   badge and the best-offer border — one accent doing one job, rather than a second
   dark colour competing with the buy button for attention. */
.de-size-btn.is-active { background: var(--de-accent); border-color: var(--de-accent); color: #fff; box-shadow: 0 3px 10px rgba(18, 179, 160, .35); }
.de-js .de-size-panel.de-hidden { display: none; }

/* offers */

/*
 * The theme indents lists inside the content area (.entry-content ul { margin-left }),
 * which is more specific than a bare `.de-offers`, so the offer cards sat ~20px right
 * of the size pills above them and the column read as crooked. Scoped under .de-product
 * to out-specify it without reaching for !important.
 */
.de-product .de-offers,
.de-offers { list-style: none; margin: 0; padding: 0; }
/*
 * Logo | price | button. The logo column used to take 1.4fr of flexible space despite
 * the chip being a fixed 132px, so the price was pushed off-centre and the row looked
 * lopsided. The logo column is now fixed to the chip, the price takes the middle and
 * centres in it, and the button sits right. Three columns, three jobs.
 */
.de-offer { display: grid; grid-template-columns: 148px 1fr minmax(158px, auto); align-items: center; gap: 1.2em; padding: 1.05em 1.35em; border: 1.5px solid var(--de-line); border-radius: 16px; margin-bottom: .8em; position: relative; background: #fff; transition: box-shadow .15s, border-color .15s, transform .15s; }
.de-offer:last-child { margin-bottom: 0; }
.de-offer:hover { box-shadow: 0 8px 24px rgba(13, 27, 42, .1); transform: translateY(-1px); border-color: #d3d9df; }
.de-offer-best { border: 2px solid var(--de-accent); background: linear-gradient(0deg, var(--de-tint), var(--de-tint)), #fff; box-shadow: 0 6px 22px rgba(18, 179, 160, .15); margin-top: .6em; }

.de-offer-retailer { display: flex; align-items: center; min-width: 0; }

/*
 * THE LOGO CHIP.
 *
 * Every retailer logo sits in an IDENTICAL box and is contained inside it, so a
 * wide wordmark and a squat emblem occupy the same footprint and the column
 * aligns. The old rule was `height:54px; max-width:175px; width:auto`, which gave
 * each logo a different width and left the column ragged.
 *
 * The white ground is deliberate, not decoration: retailers supply JPEGs with a
 * baked-in white background, which would otherwise show as a white rectangle on
 * the tinted "Cheapest" row — the one row that most needs to look considered. A
 * chip makes any asset work: JPEG or PNG, dark logo or light.
 */
.de-retailer-logo {
	width: 132px;
	height: 44px;
	object-fit: contain;
	object-position: center;
	display: block;
	background: #fff;
	padding: 5px 8px;
	box-sizing: border-box;
	border: 1px solid var(--de-line);
	border-radius: 9px;
}
.de-retailer { font-weight: 800; font-size: 1.08rem; color: var(--de-ink); line-height: 1.05; }
.de-retailer-name { font-size: .7rem; font-weight: 700; color: var(--de-muted); text-transform: uppercase; letter-spacing: .05em; }

/*
 * Three things sit in this row — logo, price, button — and they were three different
 * weights: a 44px logo chip, a 1.55rem price, and a .76rem button. The price shouted
 * over both of its neighbours. Pulled down and the button pushed up, so the row reads
 * as one considered line rather than a price with two accessories.
 */
.de-price { display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.15; white-space: nowrap; }
.de-price strong { font-size: 1.3rem; font-weight: 800; color: var(--de-accent-d); letter-spacing: -.015em; }
.de-price s { color: var(--de-muted); font-weight: 600; font-size: .78rem; margin-bottom: .1em; }

.de-best-tag { position: absolute; top: -.72em; left: 1.3em; background: var(--de-accent); color: #fff; font-size: .6rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; padding: .34em .78em; border-radius: 999px; box-shadow: 0 3px 9px rgba(12, 141, 126, .4); }

.de-buy { background: var(--de-navy); color: #fff; padding: .95em 1.7em; border-radius: 11px; text-decoration: none; font-weight: 800; white-space: nowrap; text-transform: uppercase; font-size: .82rem; letter-spacing: .05em; text-align: center; transition: transform .12s, background .12s, box-shadow .12s; }
.de-buy:hover { background: #132638; color: #fff; transform: translateY(-1px); box-shadow: 0 8px 18px rgba(13, 27, 42, .24); }
.de-offer-best .de-buy { background: var(--de-accent); }
.de-offer-best .de-buy:hover { background: var(--de-accent-d); box-shadow: 0 8px 18px rgba(18, 179, 160, .34); }
.de-buy-disabled { background: #cfd4d8; pointer-events: none; transform: none; box-shadow: none; }

/* out of stock — the retailer is still shown, just plainly unbuyable */
.de-offer-oos { opacity: .62; }
.de-offer-oos:hover { box-shadow: none; transform: none; border-color: var(--de-line); }
.de-offer-oos .de-price strong { color: var(--de-muted); }
.de-offer-oos .de-retailer-logo { filter: grayscale(1); }

.de-updated { color: var(--de-muted); font-size: .78rem; text-align: right; margin: .9em 0 0; font-weight: 600; }
.de-disclosure { color: var(--de-muted); font-size: .78rem; margin: .6em 0 0; line-height: 1.5; }
.de-no-offers { color: var(--de-muted); margin: .5em 0; }

/* info */
.de-info { background: var(--de-card); border: 1px solid var(--de-line); border-radius: 18px; box-shadow: var(--de-shadow); padding: 1.25em 1.5em 1.4em; }
.de-info-title { font-size: .78rem; text-transform: uppercase; letter-spacing: .07em; color: var(--de-muted); font-weight: 800; margin: 0 0 .5em; }
.de-info-row { display: flex; justify-content: space-between; gap: 1em; padding: .7em .75em; margin: 0 -.75em; border-radius: 8px; transition: background .12s; }
.de-info-row:nth-child(even) { background: var(--de-soft); }
.de-info-row:hover { background: var(--de-tint); }
.de-info-k { font-weight: 700; color: var(--de-ink); }
.de-info-v { color: var(--de-muted); text-align: right; font-weight: 500; }

/* related */
.de-related { margin-top: 3em; border-top: 1px solid var(--de-line); padding-top: 2em; }
.de-related h2 { font-size: 1.4rem; font-weight: 800; color: var(--de-navy); margin: 0 0 1.1em; }
.de-related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 1.5em; }
.de-related-item { display: block; text-decoration: none; color: inherit; }
.de-related-img { display: flex; align-items: center; justify-content: center; background: var(--de-soft); border: 1px solid var(--de-line); border-radius: 14px; overflow: hidden; aspect-ratio: 1/1; padding: 10%; box-sizing: border-box; transition: box-shadow .15s, transform .15s; }
.de-related-item:hover .de-related-img { box-shadow: var(--de-shadow); transform: translateY(-2px); }
.de-related-img img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; }
.de-related-title { display: block; font-weight: 700; font-size: .92rem; color: var(--de-ink); margin: .75em 0 .25em; line-height: 1.35; }
.de-related-price { display: block; color: var(--de-accent-d); font-weight: 800; font-size: .86rem; }

@media (max-width: 600px) {
	.de-col-gallery { position: static; }
	.de-offer { grid-template-columns: 1fr auto; gap: .6em .9em; }
	.de-buy { grid-column: 1/-1; width: 100%; padding: .85em; }
	.de-from-price { font-size: 1.6rem; }
	.de-size-btn { width: 4.8em; padding: .7em 0; }
}

/* ----------------------------------------------------------------- archive */

.de-archive { max-width: 1200px; margin: 0 auto; padding: 1em 0; }
.de-arch-head { margin: 0 0 1.25em; }
.de-arch-title { font-size: 2rem; font-weight: 800; color: var(--de-navy); margin: 0; letter-spacing: -.02em; }
.de-arch-count { color: var(--de-muted); font-size: .9rem; font-weight: 600; margin: .35em 0 0; }
.de-arch-desc { color: var(--de-muted); margin: .4em 0 0; }

.de-arch-filters { display: flex; flex-wrap: wrap; gap: 1em; align-items: center; background: var(--de-soft); border: 1px solid var(--de-line); border-radius: 12px; padding: .9em 1.15em; margin: 0 0 1.75em; }
.de-arch-filters label { font-weight: 700; color: var(--de-ink); font-size: .9rem; display: flex; gap: .5em; align-items: center; }
.de-arch-filters select { padding: .5em .7em; border: 1px solid var(--de-line); border-radius: 8px; font-weight: 500; color: var(--de-ink); background: #fff; }
.de-arch-check { cursor: pointer; }
.de-arch-check input { margin-right: .1em; vertical-align: middle; }
.de-arch-clear { color: var(--de-accent-d); font-weight: 700; text-decoration: none; font-size: .85rem; margin-left: auto; }

.de-arch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1.75em; }

.de-card { display: block; text-decoration: none; color: inherit; }
.de-card-img { position: relative; display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid var(--de-line); border-radius: 14px; aspect-ratio: 1/1; padding: 6%; box-sizing: border-box; transition: box-shadow .15s, transform .15s; }
.de-card:hover .de-card-img { box-shadow: 0 10px 28px rgba(13, 27, 42, .12); transform: translateY(-3px); border-color: #d9dee3; }
.de-card-img img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; }
.de-card-badge { position: absolute; top: .6em; left: .6em; background: var(--de-accent); color: #fff; font-size: .7rem; font-weight: 800; letter-spacing: .02em; padding: .28em .6em; border-radius: 999px; box-shadow: 0 2px 6px rgba(12, 141, 126, .35); }
.de-card-title { display: block; font-weight: 700; color: var(--de-ink); font-size: .95rem; line-height: 1.35; margin: .8em 0 .35em; }
.de-card:hover .de-card-title { color: var(--de-accent-d); }
.de-card-price { display: block; color: var(--de-muted); font-size: .9rem; }
.de-card-price strong { color: var(--de-ink); font-weight: 800; font-size: 1.05rem; }
/* line-through with !important AND extra specificity. The rule that kills the theme's link
   underlines — a.de-card * { text-decoration:none !important } — has the same (0,1,1)
   specificity as a plain `.de-card-price s`, both !important, so source order decided it and
   the underline-killer (later in the file) won: the strike never showed. `a.de-card ... s`
   is (0,2,2) and wins outright, wherever it sits. Without it "£64.99" reads as a second,
   equal price instead of the crossed-out original. */
a.de-card .de-card-price s,
.de-price s { text-decoration: line-through !important; }
.de-card-price s { color: var(--de-muted); font-weight: 500; margin-left: .15em; }

.de-arch-pager { margin: 2.5em 0 0; display: flex; justify-content: center; gap: .4em; }
.de-arch-pager .page-numbers { padding: .5em .85em; border: 1px solid var(--de-line); border-radius: 8px; text-decoration: none; color: var(--de-ink); font-weight: 600; }
.de-arch-pager .page-numbers.current { background: var(--de-navy); color: #fff; border-color: var(--de-navy); }
.de-arch-empty { color: var(--de-muted); padding: 2em 0; }

/* ---------------------------------------------------------------- homepage
 *
 * The sections the homepage shortcodes render. They are laid out here and nowhere
 * else — the page itself is Gutenberg blocks the user rearranges, so any styling
 * baked into the page content would be styling they have to maintain by hand.
 */

/* Column counts, shared by the product grid, the tiles and the codes. Two breakpoints
   only: a 4-up grid becomes 2-up on a tablet and 1-up on a phone. */
.de-cols-2 { grid-template-columns: repeat(2, 1fr); }
.de-cols-3 { grid-template-columns: repeat(3, 1fr); }
.de-cols-4 { grid-template-columns: repeat(4, 1fr); }
.de-cols-5 { grid-template-columns: repeat(5, 1fr); }
.de-cols-6 { grid-template-columns: repeat(6, 1fr); }

.de-more { margin: 1.75em 0 0; text-align: center; }
.de-more-link { display: inline-block; border: 1.5px solid var(--de-line); border-radius: 11px; padding: .8em 2em; font-weight: 800; font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; color: var(--de-ink); text-decoration: none !important; transition: all .12s; }
.de-more-link:hover { border-color: var(--de-accent); color: var(--de-accent-d); }

/* category tiles */
.de-tiles { display: grid; gap: 1.25em; }
.de-tile { display: flex; flex-direction: column; gap: .3em; padding: 1.6em 1.5em; background: var(--de-card); border: 1.5px solid var(--de-line); border-radius: 18px; text-decoration: none !important; color: inherit; transition: box-shadow .15s, transform .15s, border-color .15s; }
.de-tile:hover { border-color: var(--de-accent); box-shadow: var(--de-shadow); transform: translateY(-3px); }
.de-tile-name { font-size: 1.15rem; font-weight: 800; color: var(--de-navy); letter-spacing: -.01em; }
.de-tile-desc { color: var(--de-muted); font-size: .9rem; line-height: 1.45; }
.de-tile-count { margin-top: .5em; font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--de-accent-d); }

/* brand list */
.de-brands { display: flex; flex-wrap: wrap; gap: .6em; }
.de-brand { display: inline-flex; align-items: center; gap: .55em; padding: .6em 1.05em; background: #fff; border: 1.5px solid var(--de-line); border-radius: 999px; text-decoration: none !important; transition: all .12s; }
.de-brand:hover { border-color: var(--de-accent); box-shadow: 0 4px 12px rgba(13, 27, 42, .07); }
.de-brand-name { font-weight: 700; font-size: .92rem; color: var(--de-ink); }
.de-brand-count { font-size: .72rem; font-weight: 800; color: var(--de-muted); background: var(--de-soft); border-radius: 999px; padding: .15em .5em; }
.de-brand:hover .de-brand-name { color: var(--de-accent-d); }

/* retailer logo strip — the same white chip as the offer table, so a logo that reads
   correctly on a product page reads correctly here. */
.de-retailers { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1em 1.5em; }
.de-retailers .de-retailer { display: inline-flex; }
.de-retailers img { width: 132px; height: 44px; object-fit: contain; object-position: center; background: #fff; padding: 5px 8px; border: 1px solid var(--de-line); border-radius: 9px; box-sizing: border-box; }
.de-retailers.is-grey img { filter: grayscale(1); opacity: .75; transition: filter .2s, opacity .2s; }
.de-retailers.is-grey img:hover { filter: none; opacity: 1; }

/* discount codes */
.de-codes { display: grid; gap: 1.25em; }
.de-code { display: flex; flex-direction: column; align-items: flex-start; gap: .55em; padding: 1.4em; background: var(--de-card); border: 1.5px solid var(--de-line); border-radius: 18px; }
.de-code-retailer { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--de-muted); }
.de-code-title { font-weight: 800; color: var(--de-navy); font-size: 1.02rem; line-height: 1.35; }
/* The code itself is the thing being collected — it reads as something to copy. */
.de-code-value { align-self: stretch; text-align: center; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 700; letter-spacing: .08em; color: var(--de-accent-d); background: var(--de-tint); border: 1.5px dashed var(--de-accent); border-radius: 10px; padding: .6em .8em; }
.de-code-value.is-auto { font-family: inherit; letter-spacing: 0; font-weight: 700; color: var(--de-muted); background: var(--de-soft); border-style: solid; border-color: var(--de-line); }
.de-code-expires { font-size: .78rem; font-weight: 700; color: var(--de-muted); }
.de-code-go { align-self: stretch; text-align: center; margin-top: auto; background: var(--de-navy); color: #fff; padding: .8em 1.2em; border-radius: 11px; text-decoration: none !important; font-weight: 800; text-transform: uppercase; font-size: .78rem; letter-spacing: .05em; transition: background .12s; }
.de-code-go:hover { background: var(--de-accent); color: #fff; }

/* hero search */
.de-search { display: flex; gap: .5em; max-width: 34em; margin: 0 0 1em; }
.de-search input[type="search"] { flex: 1; min-width: 0; padding: .95em 1.15em; border: 0; border-radius: 11px; font-size: 1rem; background: #fff; color: var(--de-ink); }
.de-search button { background: var(--de-accent); color: #fff; border: 0; border-radius: 11px; padding: .95em 1.8em; font-weight: 800; text-transform: uppercase; font-size: .82rem; letter-spacing: .05em; cursor: pointer; transition: background .12s; }
.de-search button:hover { background: var(--de-accent-d); }

@media (max-width: 900px) {
	.de-cols-3, .de-cols-4, .de-cols-5, .de-cols-6 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
	.de-cols-2, .de-cols-3, .de-cols-4, .de-cols-5, .de-cols-6 { grid-template-columns: 1fr; }
	.de-search { flex-direction: column; }
}

/* how we compare — the "what we do" section. The numbers in it are read from the
   catalogue at render time, so they cannot rot. */
.de-how { display: flex; flex-direction: column; gap: 2.25em; }
.de-how-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5em; }
.de-how-step { display: flex; flex-direction: column; gap: .15em; padding: 1.6em 1.6em 1.7em; background: var(--de-card); border: 1.5px solid var(--de-line); border-radius: 18px; }
.de-how-n { font-size: 2.3rem; font-weight: 800; color: var(--de-accent-d); line-height: 1; letter-spacing: -.03em; }
.de-how-k { font-size: .76rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--de-muted); }
.de-how-body { color: var(--de-ink); font-size: .95rem; line-height: 1.55; margin: .8em 0 0; }
.de-how-note { color: var(--de-muted); font-size: .82rem; line-height: 1.55; margin: 0; text-align: center; max-width: 46em; margin-inline: auto; }

@media (max-width: 900px) {
	.de-how-steps { grid-template-columns: 1fr; }
}

/* buying guides */
.de-guides { display: grid; gap: 1.5em; }
.de-guide { display: flex; flex-direction: column; background: var(--de-card); border: 1.5px solid var(--de-line); border-radius: 18px; overflow: hidden; text-decoration: none !important; color: inherit; transition: box-shadow .15s, transform .15s, border-color .15s; }
.de-guide:hover { border-color: var(--de-accent); box-shadow: var(--de-shadow); transform: translateY(-3px); }
.de-guide-img { display: block; aspect-ratio: 16/9; background: var(--de-soft); overflow: hidden; }
.de-guide-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.de-guide-body { display: flex; flex-direction: column; gap: .45em; padding: 1.3em 1.4em 1.5em; flex: 1; }
.de-guide-title { font-weight: 800; color: var(--de-navy); font-size: 1.05rem; line-height: 1.35; letter-spacing: -.01em; }
.de-guide-excerpt { color: var(--de-muted); font-size: .9rem; line-height: 1.5; }
.de-guide-more { margin-top: auto; padding-top: .6em; font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--de-accent-d); }

/* a heading a shortcode owns, so it can hide with its own section */
.de-sec-title { font-size: 1.7rem; font-weight: 800; color: var(--de-navy); letter-spacing: -.02em; margin: 0 0 1em; text-align: center; }

/* A section that owns its own background, so it can vanish completely.
   A Group block wrapped around a shortcode cannot know the shortcode rendered
   nothing -- it draws its padding and its grey anyway, leaving an empty band. */
.de-band { background: var(--de-soft); border: 1px solid var(--de-line); border-radius: 22px; padding: 2.6em 2.2em 2.8em; }

@media (max-width: 600px) {
	.de-band { padding: 1.8em 1.2em 2em; border-radius: 16px; }
}

/* =====================================================================
 * HOMEPAGE: DEPTH
 *
 * The first build was white cards on a white page separated by hairline greys —
 * technically correct, visually flat, and nothing anchored the eye. The product
 * page gets away with restraint because the product image and the offer table
 * carry it. A landing page has to build the layers itself.
 *
 * Three grounds, alternating: white → tinted → DARK. The dark band is the whole
 * trick; without one, "premium" reads as "unfinished".
 * ===================================================================== */

/* The theme underlines every link in .entry-content (0,1,1). A bare `.de-card`
   is (0,1,0) and loses even when our stylesheet loads last — so match on
   element+class and win on source order, rather than reaching for !important. */
a.de-card,
a.de-tile,
a.de-brand,
a.de-guide,
a.de-more-link,
a.de-code-go,
a.de-card *,
a.de-tile *,
a.de-guide * { text-decoration: none !important; }
/* NB: no `border-bottom: 0` here. It was meant to strip a theme's underline-via-border, but
   Astra underlines with text-decoration (already killed above) — and border-bottom:0 on these
   <a> elements out-specified their REAL borders and sliced the bottom edge off the category
   pills, the guide cards and the "See all" button. text-decoration:none is the whole job. */

/* --- category tiles: the page's colour, and its first real layer ------------ */

.de-tiles { gap: 1.4em; }

.de-tile {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	min-height: 172px;
	justify-content: flex-end;
	gap: .2em;
	padding: 1.8em;
	border: 0;
	color: #fff;
	background: linear-gradient(158deg, var(--de-navy) 0%, #1b3a5c 100%);
	box-shadow: var(--de-shadow);
}

/* A different ground per tile, so the row reads as three places rather than one
   repeated card. Ordered darkest-first: Boots is the biggest category and earns
   the heaviest weight. */
.de-tile:nth-child(1) { background: linear-gradient(158deg, #0d1b2a 0%, #1d3a57 100%); }
.de-tile:nth-child(2) { background: linear-gradient(158deg, #0c8d7e 0%, #12b3a0 100%); }
.de-tile:nth-child(3) { background: linear-gradient(158deg, #1c3247 0%, #2c5877 100%); }

/* A soft teal bloom in the corner: depth without an image to load. */
.de-tile::after {
	content: "";
	position: absolute;
	right: -22%;
	bottom: -34%;
	width: 190px;
	height: 190px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(95, 217, 201, .30), rgba(95, 217, 201, 0) 68%);
	z-index: -1;
}
.de-tile:nth-child(2)::after { background: radial-gradient(circle, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 68%); }

.de-tile:hover { transform: translateY(-4px); box-shadow: var(--de-shadow-lg); border-color: transparent; }
.de-tile-name { color: #fff; font-size: 1.32rem; }
.de-tile-desc { color: rgba(255, 255, 255, .78); }
.de-tile-count { color: var(--de-accent-l); margin-top: .35em; }
.de-tile:nth-child(2) .de-tile-count { color: #fff; }

/* --- product cards: sit them ON the page rather than in it ------------------ */

.de-card-img { box-shadow: var(--de-shadow); border-color: transparent; }
.de-card:hover .de-card-img { box-shadow: var(--de-shadow-lg); }
.de-card-badge { background: var(--de-accent); color: #fff; }

/* --- how we compare: THE dark band ----------------------------------------- */

.de-how {
	background: linear-gradient(162deg, #0d1b2a 0%, #16324d 100%);
	border-radius: 26px;
	padding: 3.2em 2.8em 2.6em;
	color: #fff;
	box-shadow: var(--de-shadow-lg);
}
.de-how-step { background: rgba(255, 255, 255, .055); border: 1px solid rgba(255, 255, 255, .10); border-radius: 16px; }
.de-how-n { color: var(--de-accent-l); }
.de-how-k { color: #8d9dae; }
.de-how-body { color: #c5d0dc; }
.de-how-note { color: #8d9dae; }

/* The white logo chips were designed for a white page. On the dark band they
   become the brightest thing in it — which is exactly right: the retailers ARE
   the claim. */
.de-how .de-retailers { padding-top: .4em; }
.de-how .de-retailers.is-grey img { filter: none; opacity: 1; }

/* --- brands: give the chips a body ----------------------------------------- */

.de-brands { justify-content: center; gap: .7em; }
.de-brand { box-shadow: 0 1px 2px rgba(13, 27, 42, .05); padding: .72em 1.2em; }
.de-brand:hover { transform: translateY(-2px); box-shadow: var(--de-shadow); }
.de-brand-count { background: var(--de-tint); color: var(--de-accent-d); }

/* --- guides ---------------------------------------------------------------- */

.de-guide { box-shadow: var(--de-shadow); }
.de-guide:hover { box-shadow: var(--de-shadow-lg); }

/* --- the "See all" button, matched to the product page's ------------------- */

.de-more-link { background: var(--de-navy); border-color: var(--de-navy); color: #fff; }
.de-more-link:hover { background: var(--de-accent); border-color: var(--de-accent); color: #fff; }

/* --- how it works: a process, not a stat board ----------------------------- */

.de-how-step { position: relative; padding-top: 1.5em; }
/* The step number is a marker, not a headline. It was 2.3rem and read as the point of the
   card; the point of the card is the verb underneath it. */
.de-how-n { font-size: .82rem; font-weight: 800; letter-spacing: .14em; color: var(--de-accent-l); opacity: .75; line-height: 1; }
.de-how-k { font-size: 1.16rem; font-weight: 800; text-transform: none; letter-spacing: -.01em; color: #fff; margin-top: .5em; }
.de-how-body { color: #b7c3d0; font-size: .94rem; line-height: 1.55; margin-top: .45em; }

/* Heading + subheading INSIDE the card, so the title is not a line stranded on white above
   the navy panel. White heading, muted subtitle, centred over the three steps. */
.de-how-head { text-align: center; margin-bottom: .3em; }
.de-how-title { font-size: 1.7rem; font-weight: 800; color: #fff; letter-spacing: -.02em; line-height: 1.15; margin: 0; }
.de-how-sub { color: #93a2b3; font-size: .95rem; line-height: 1.55; margin: .55em auto 0; max-width: 54ch; }

/* The numbers, demoted to one line of proof under the three claims. */
.de-how-proof { display: flex; flex-wrap: wrap; justify-content: center; gap: .6em 2.2em; margin: 0; padding-top: .4em; }
.de-how-proof span { color: #8d9dae; font-size: .84rem; font-weight: 600; letter-spacing: .01em; }
.de-how-proof strong { color: #fff; font-weight: 800; font-size: 1.02rem; margin-right: .3em; font-variant-numeric: tabular-nums; }

@media (max-width: 600px) {
	.de-how-proof { gap: .4em 1.2em; }
}

.de-how-more { text-align: center; margin: 0; color: var(--de-accent-l); font-size: .8rem; font-weight: 700; letter-spacing: .04em; }

/* --- the email band, above the footer, on every page ----------------------- */

.de-signup {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.5em 3em;
	max-width: 1200px;
	margin: 0 auto;
	padding: 2.4em 2.6em;
	background: linear-gradient(162deg, #0d1b2a 0%, #16324d 100%);
	border-radius: 22px;
	box-shadow: var(--de-shadow-lg);
}
.de-signup-copy { flex: 1 1 320px; }
.de-signup-title { display: block; font-size: 1.5rem; font-weight: 800; color: #fff; letter-spacing: -.02em; line-height: 1.15; }
.de-signup-body { color: #a9b6c4; font-size: .93rem; line-height: 1.55; margin: .45em 0 0; max-width: 42ch; }
.de-signup-form { flex: 1 1 340px; }

/* WPForms ships its own layout. Reach into it rather than around it, so the form reads as
   part of the band instead of a plugin dropped into it. Name + Email share a row, consent
   sits under them, the button closes it — the fields are addressed by the css classes the
   form config gives them (de-f-name / de-f-email / de-f-consent), so nothing here depends
   on WPForms' field numbering. */
.de-signup-form .wpforms-container { margin: 0; }
.de-signup-form .wpforms-field-label,
.de-signup-form .wpforms-field-sublabel,
.de-signup-form .wpforms-head-container,
.de-signup-form .wpforms-required-label { display: none !important; }

.de-signup-form form { display: flex; flex-wrap: wrap; gap: .6em; align-items: flex-start; }
.de-signup-form .wpforms-field-container { display: flex; flex-wrap: wrap; gap: .6em; width: 100%; }

.de-signup-form .wpforms-field { padding: 0 !important; margin: 0 !important; }
/* Name and Email share the top row; everything else is full width. */
.de-signup-form .de-f-name,
.de-signup-form .de-f-email { flex: 1 1 calc(50% - .3em); min-width: 160px; }
.de-signup-form .de-f-consent { flex: 1 1 100%; }
/* Anything that is not one of our three fields is WPForms' hidden anti-spam honeypot —
   take it out of the layout entirely so it cannot claim a slot. */
.de-signup-form .wpforms-field:not(.de-f-name):not(.de-f-email):not(.de-f-consent) { display: none !important; }

.de-signup-form input[type="email"],
.de-signup-form input[type="text"] {
	width: 100% !important;
	max-width: none !important;
	padding: .85em 1.1em !important;
	border: 0 !important;
	border-radius: 11px !important;
	font-size: .95rem !important;
	background: #fff !important;
	color: var(--de-ink) !important;
	box-sizing: border-box;
}

/* consent — a small, legible tick on a dark ground */
.de-signup-form .de-f-consent ul { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.de-signup-form .de-f-consent li { display: flex; align-items: flex-start; gap: .5em; margin: 0 !important; }
.de-signup-form .de-f-consent input[type="checkbox"] { width: 1.05em; height: 1.05em; margin: .15em 0 0; flex: 0 0 auto; accent-color: var(--de-accent); cursor: pointer; }
.de-signup-form .de-f-consent .wpforms-field-label-inline { color: #93a2b3; font-size: .78rem; line-height: 1.4; font-weight: 500; cursor: pointer; margin: 0; }

.de-signup-form .wpforms-submit-container { padding: 0 !important; margin: 0 !important; width: 100%; }
.de-signup-form button[type="submit"] {
	background: var(--de-accent) !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 11px !important;
	padding: .85em 2em !important;
	font-weight: 800 !important;
	text-transform: uppercase;
	font-size: .82rem !important;
	letter-spacing: .05em;
	cursor: pointer;
	transition: background .12s;
}
.de-signup-form button[type="submit"]:hover { background: var(--de-accent-d) !important; }

/* validation + confirmation, legible on the dark band */
.de-signup-form .wpforms-error { color: #ff9d78 !important; font-size: .72rem !important; margin-top: .25em !important; }
.de-signup-form .wpforms-confirmation-container-full { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); color: #fff; border-radius: 12px; padding: 1em 1.2em; margin: 0; }

@media (max-width: 900px) {
	.de-signup { padding: 1.9em 1.5em; border-radius: 16px; }
}

/* --- the hero search bar --------------------------------------------------- */

/*
 * LEFT, NOT CENTRED.
 *
 * WordPress's constrained layout gives every direct child of the cover
 * `margin-left:auto; margin-right:auto`. The headline and the paragraph are full-width so
 * that does nothing to them — but the search form has a max-width, so the auto margins
 * centred it, and the hero ended up with a left-aligned headline over a centred search box.
 * It read as a mistake because it was one.
 *
 * `.wp-block-cover .de-search` (0,2,0) out-ranks the layout rule without !important.
 */
.wp-block-cover .de-search { margin-left: 0; margin-right: auto; }

/* Hero scale. This is the primary action on the page — the 15px page-button size is right
   for a "See all" and mean for the thing the whole hero exists to offer. */
.wp-block-cover .de-search { max-width: 38em; gap: .6em; }
.wp-block-cover .de-search input[type="search"] { padding: 1.15em 1.35em; font-size: 1.02rem; border-radius: 12px; box-shadow: 0 6px 24px rgba(13, 27, 42, .18); }
.wp-block-cover .de-search button { padding: 1.15em 2.2em; font-size: .86rem; border-radius: 12px; box-shadow: 0 6px 24px rgba(12, 141, 126, .3); }

@media (max-width: 600px) {
	.wp-block-cover .de-search { max-width: none; }
}

/* =====================================================================
 * TIGHTEN
 *
 * Everything was breathing at the scale of a long-form article: 1.75em card
 * gutters, 3em section titles, a dark band with 3.2em of inner padding. On a page
 * whose job is to route people onto products in two clicks, that reads as sparse
 * rather than generous — the eye travels further than the content justifies and
 * the page feels emptier than it is.
 * ===================================================================== */

.de-arch-grid { gap: 1.4em 1.3em; }
.de-tiles { gap: 1.1em; }
.de-guides { gap: 1.2em; }
.de-codes { gap: 1.1em; }

.de-tile { min-height: 152px; padding: 1.5em 1.6em; }
.de-card-title { margin: .6em 0 .25em; }
.de-more { margin: 1.3em 0 0; }
.de-guide-body { padding: 1.1em 1.2em 1.25em; gap: .35em; }

.de-how { padding: 2.5em 2.2em 2.1em; gap: 1.7em; }
.de-how-steps { gap: 1.1em; }
.de-how-step { padding: 1.3em 1.35em 1.4em; }
.de-band { padding: 2em 1.8em 2.2em; }

/* --- shop by brand: a mark, not a word ------------------------------------- */

/*
 * Six outlined pills of grey type is the weakest block on the page, and it cannot be
 * rescued by styling — the problem is the content. A brand IS its mark: people find the
 * Gilbert G faster than they can read six words looking for it.
 *
 * With a logo (set on the brand's term edit screen) the chip is the SAME white plate the
 * offer table and the retailer strip use, so a mark that reads correctly on a product page
 * reads correctly here. Without one it falls back to type — but type with real weight,
 * rather than the near-invisible outline it was.
 */
.de-brands { gap: .85em; }

.de-brand {
	padding: .85em 1.5em;
	border: 1.5px solid var(--de-line);
	border-radius: 14px;
	background: #fff;
	box-shadow: var(--de-shadow);
	transition: transform .14s, box-shadow .14s, border-color .14s;
}
.de-brand:hover { transform: translateY(-3px); box-shadow: var(--de-shadow-lg); border-color: var(--de-accent); }

.de-brand-name { font-size: 1rem; font-weight: 800; color: var(--de-navy); letter-spacing: -.01em; }

/* The logo chip: one box, every brand, whatever the source image's aspect ratio. */
.de-brand.has-logo { padding: .7em 1.1em; }
.de-brand-logo { display: block; width: 116px; height: 38px; object-fit: contain; object-position: center; }

/* --- the email band: part of the footer, not a card on top of it ----------- */

/*
 * It was a dark rounded card, sitting on the footer's light-grey "above" row, floating over
 * the dark footer below — three colours in the last 300px of the page, and it read as a
 * widget someone had dropped in. The row now takes the footer's own colour (see
 * apply-brand-style.php) and the band stops drawing itself: no gradient, no radius, no
 * shadow. It IS the top of the footer.
 */
.de-signup {
	background: none;
	border-radius: 0;
	box-shadow: none;
	padding: 2.6em 1.5em;
	border-bottom: 1px solid rgba(255, 255, 255, .09);
	gap: 1.2em 3em;
}
.de-signup-title { font-size: 1.35rem; }
.de-signup-body { color: #93a2b3; font-size: .89rem; margin-top: .35em; }

/* --- the brand strip, under the hero --------------------------------------- */

/*
 * The first question a visitor has is not "what's on sale" — it is "do they even carry my
 * brand?". A quiet band of marks under the headline answers it before they scroll, which is
 * why this sits above the fold and the "Shop by brand" chips do not need to exist twice.
 *
 * Understated on purpose. It must not compete with the hero it sits beneath: greyscale,
 * small, no cards, no borders. It comes to life on hover, which is the only moment it is
 * being used as navigation rather than as reassurance.
 */
.de-brand-strip { display: flex; flex-direction: column; align-items: center; gap: 1em; }

.de-brand-strip-label {
	font-size: .7rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: var(--de-muted);
}

.de-brand-strip-marks { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1em 2.6em; }

.de-brand-mark { display: inline-flex; align-items: center; text-decoration: none !important; opacity: .55; filter: grayscale(1); transition: opacity .18s, filter .18s, transform .18s; }
.de-brand-mark:hover { opacity: 1; filter: none; transform: translateY(-2px); }
.de-brand-mark img { width: 104px; height: 34px; object-fit: contain; object-position: center; display: block; }

/* The fallback while a brand has no artwork. A wordmark set in the site's own type is a
   legitimate design choice, not a placeholder — so it is styled as one. */
.de-brand-mark span { font-size: 1rem; font-weight: 800; color: var(--de-navy); letter-spacing: -.01em; white-space: nowrap; }
.de-brand-mark:hover span { color: var(--de-accent-d); }

@media (max-width: 600px) {
	.de-brand-strip-marks { gap: .9em 1.6em; }
	.de-brand-mark img { width: 84px; height: 28px; }
}

/* =====================================================================
 * THE HERO, AND THE FOOTER'S TOP ROW
 *
 * Both were being left to somebody else's stylesheet, and in both cases that
 * stylesheet never turned up.
 * ===================================================================== */

/*
 * THE COVER'S CONTENT MUST SIT ON THE SAME GRID AS THE PAGE.
 *
 * `"layout":{"type":"constrained","contentSize":"1200px"}` in the block comment does
 * NOTHING on its own. WordPress applies constrained layout through a class
 * (`is-layout-constrained`) plus a generated `wp-container-*` rule, and both are written
 * into the markup BY THE EDITOR at save time. This page's markup was authored by hand, so
 * neither exists — the attribute sat in the comment looking correct and had no effect
 * whatsoever, which is why the headline ran to the viewport edge while every section below
 * it stopped at 1200px.
 *
 * Constrain it here instead. It cannot fail to apply, and it does not depend on the page
 * being re-saved in the editor to take effect.
 *
 * 1200px is not a guess: it is Astra's own `site-content-width`, which is what the tiles,
 * the deals grid and the guides all align to.
 */
.wp-block-cover__inner-container {
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: 20px;
	box-sizing: border-box;
	width: 100%;
}

/*
 * HERO TYPE SCALES WITH THE SCREEN.
 *
 * The headline and subtitle were authored with INLINE font sizes (52px / 21px) chosen for
 * desktop, and an inline style applies at every width — so on a phone the headline ran at
 * full desktop size and overflowed. clamp() scales it fluidly with the viewport: unchanged on
 * desktop (it caps at the authored size), proportionate on tablet and mobile. The sizes are
 * inline block styles, so !important is the only thing that can beat them.
 */
.wp-block-cover__inner-container h1.wp-block-heading {
	font-size: clamp(1.75rem, 5.4vw, 52px) !important;
	line-height: 1.1 !important;
}
.wp-block-cover__inner-container > p {
	font-size: clamp(1rem, 2.1vw, 21px) !important;
}

/*
 * THE FOOTER'S TOP ROW, WHICH HOLDS THE EMAIL BAND.
 *
 * Astra's footer builder has an `hba-footer-bg-obj-responsive` setting; it is set to the
 * footer's colour and Astra never emits a rule for it — grep the rendered page and there is
 * no `.site-above-footer-wrap` background anywhere. So the band kept its white ground, and
 * because the band's own heading is white, "Never pay full price" was rendering white on
 * white and was simply invisible.
 *
 * Own it. The row is the top of the footer, so it takes the footer's colour from our
 * tokens, and the whole thing stops depending on a theme setting that does not work.
 */
.site-above-footer-wrap {
	background-color: var(--de-ink);
	padding: 0;
}
.site-above-footer-wrap .ast-builder-grid-row { padding: 0; }
.site-above-footer-wrap .site-footer-section { padding: 0; }

/* --- the brand strip, set as type ------------------------------------------
 *
 * Manufacturer marks are not ours to reproduce (see logos="no" in the shortcode), so the
 * strip is typographic by design rather than by default. That means it has to look like a
 * decision: greyscale-and-faded is right for a logo lockup and wrong for words, which just
 * read as disabled links.
 */
.de-brand-strip-marks { gap: .7em .9em; }
.de-brand-strip-marks .de-brand-mark {
	opacity: 1;
	filter: none;
	padding: .55em 1.15em;
	background: #fff;
	border: 1.5px solid var(--de-line);
	border-radius: 999px;
	box-shadow: 0 1px 2px rgba(13, 27, 42, .05);
	transition: transform .14s, box-shadow .14s, border-color .14s, background .14s;
}
.de-brand-strip-marks .de-brand-mark span {
	font-size: .95rem;
	font-weight: 800;
	letter-spacing: -.01em;
	color: var(--de-navy);
	transition: color .14s;
}
.de-brand-strip-marks .de-brand-mark:hover {
	transform: translateY(-2px);
	border-color: var(--de-accent);
	box-shadow: 0 6px 16px rgba(13, 27, 42, .1);
}
.de-brand-strip-marks .de-brand-mark:hover span { color: var(--de-accent-d); }
/* the eyebrow above it, lifted out of grey so the whole block reads as intentional */
.de-brand-strip-label { color: var(--de-accent-d); }

/* =====================================================================
 * FACETS: A RAIL ON DESKTOP, A DRAWER ON A PHONE — ONE PIECE OF MARKUP
 *
 * A <details>, not a JavaScript drawer. On desktop CSS forces it open and hides
 * the <summary>, so it is simply a left rail. On a phone the same element is a
 * "Filter & sort" button that opens a panel. No script, no library, keyboard
 * accessible for free, and it degrades to an open panel if the CSS never arrives
 * — rather than trapping every control behind a class that never toggles.
 *
 * The row-above-the-grid it replaces was the mobile-safe default: it worked, but
 * it capped the facets at whatever fits on one line, which is why Category and
 * Size had nowhere to go.
 * ===================================================================== */

.de-arch-body { display: grid; grid-template-columns: 1fr; gap: 1.6em; align-items: start; }

.de-facets { margin: 0 0 1.4em; }

.de-facets-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .6em;
	cursor: pointer;
	list-style: none;
	padding: .95em 1.2em;
	background: #fff;
	border: 1.5px solid var(--de-line);
	border-radius: 12px;
	font-weight: 800;
	color: var(--de-navy);
	box-shadow: var(--de-shadow);
}
.de-facets-toggle::-webkit-details-marker { display: none; }
.de-facets-toggle::after { content: "▾"; color: var(--de-muted); font-size: .85em; transition: transform .15s; }
.de-facets[open] > .de-facets-toggle::after { transform: rotate(180deg); }

/* A dot, not a count — the visitor can see what is on the moment the panel opens,
   and a number here would be a second thing to keep in sync with the panel. */
.de-facets-on { width: 8px; height: 8px; border-radius: 50%; background: var(--de-accent); margin-left: auto; margin-right: .3em; }

.de-arch-filters {
	display: flex;
	flex-direction: column;
	gap: 1em;
	align-items: stretch;
	background: var(--de-soft);
	border: 1px solid var(--de-line);
	border-radius: 14px;
	padding: 1.15em 1.2em 1.3em;
	margin: .7em 0 0;
}

.de-facet { display: flex; flex-direction: column; gap: .4em; font-weight: 700; color: var(--de-ink); font-size: .9rem; }
.de-facet-label { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--de-muted); }
.de-arch-filters select {
	width: 100%;
	padding: .7em .8em;
	border: 1.5px solid var(--de-line);
	border-radius: 10px;
	background: #fff;
	color: var(--de-ink);
	font-weight: 600;
	font-size: .92rem;
}
.de-arch-filters select:focus { outline: none; border-color: var(--de-accent); box-shadow: 0 0 0 3px var(--de-tint); }

.de-arch-check { display: flex; align-items: center; gap: .5em; font-weight: 700; font-size: .9rem; color: var(--de-ink); cursor: pointer; padding-top: .2em; }
.de-arch-clear { color: var(--de-accent-d); font-weight: 800; text-decoration: none; font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; margin: 0; }
.de-arch-apply { width: 100%; background: var(--de-navy); color: #fff; border: 0; border-radius: 10px; padding: .8em; font-weight: 800; cursor: pointer; }

/* ---- desktop: filters as a bar across the top ---- */
@media (min-width: 1000px) {
	/* A left rail with only a handful of short filters left the space above the grid blank.
	   On desktop the filters run ACROSS THE TOP instead; the grid then takes the full width
	   below. Mobile is untouched — there the same markup is still the "Filter & sort" drawer. */
	.de-arch-body { grid-template-columns: 1fr; gap: 1.4em; }

	/* Force the <details> open and take the button away. The UA hides the content of a closed
	   <details>; out-specify it rather than requiring the attribute, so it is never collapsed
	   on a screen with room for it. */
	.de-facets > .de-facets-toggle { display: none; }
	.de-facets:not([open]) > *:not(summary) { display: block; }
	.de-facets { margin: 0; }

	/* The filters lay out in a horizontal row; each stays label-over-select, sized to content. */
	.de-arch-filters { flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: .9em 1.3em; margin: 0; }
	.de-arch-filters select { width: auto; min-width: 150px; }
	.de-facet { flex: 0 0 auto; }
	.de-arch-check { padding: 0 0 .55em; }
	.de-arch-clear { margin: 0 0 .7em auto; } /* pushed to the far right of the bar */

	/* Full width reclaimed from the rail, so the grid goes wider. */
	.de-arch-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 1400px) {
	.de-arch-grid { grid-template-columns: repeat(5, 1fr); }
}

/* -------------------------------------------------------- [de_compare] model-vs-model
 * A live comparison embedded in an ordinary post. Prose is the author's; these are the
 * facts, rendered at view time so a hand-edited post still shows tonight's prices. */
.de-compare { margin: 1.6em 0; }
.de-compare-heads { display: grid; grid-template-columns: 1fr 1fr; gap: 1em; }
.de-compare-head { border: 1.5px solid var(--de-line); border-radius: 16px; background: #fff; padding: 1.1em 1.1em 1.2em; text-align: center; display: flex; flex-direction: column; align-items: center; }
.de-compare-img { display: block; width: 100%; max-width: 190px; aspect-ratio: 1 / 1; margin: 0 auto .5em; }
.de-compare-img img { width: 100%; height: 100%; object-fit: contain; }
.de-compare-name { font-size: 1.05rem; font-weight: 800; line-height: 1.2; margin: .1em 0 .55em; color: var(--de-navy); }
.de-compare-name a { color: inherit; text-decoration: none !important; box-shadow: none !important; border-bottom: 0 !important; }
.de-compare-name a:hover { color: var(--de-accent-d); }
.de-compare-lead { margin: 0 0 .8em; line-height: 1.2; }
.de-compare-lead strong { font-size: 1.35rem; font-weight: 800; color: var(--de-accent-d); letter-spacing: -.015em; }
.de-compare-lead s { color: var(--de-muted); font-weight: 600; font-size: .82rem; margin-right: .15em; }
.de-compare-pct { display: inline-block; background: var(--de-accent); color: #fff; font-size: .72rem; font-weight: 800; padding: .12em .5em; border-radius: 999px; vertical-align: middle; margin-left: .2em; }
.de-compare-low { display: block; font-size: .72rem; font-weight: 800; color: var(--de-accent-d); text-transform: uppercase; letter-spacing: .04em; margin-top: .35em; }
.de-compare-oos { color: var(--de-muted); font-weight: 700; font-size: .95rem; }
.de-compare-head .de-buy { margin-top: auto; }
.de-compare-specs { width: 100%; border-collapse: collapse; margin: 1.1em 0 .4em; font-size: .95rem; }
.de-compare-specs th[scope="row"] { text-align: left; font-weight: 700; color: var(--de-muted); padding: .6em .8em; border-bottom: 1px solid var(--de-line); width: 34%; }
.de-compare-specs td { text-align: center; font-weight: 700; color: var(--de-ink); padding: .6em .8em; border-bottom: 1px solid var(--de-line); border-left: 1px solid var(--de-line); }
.de-compare-specs tr:first-child th, .de-compare-specs tr:first-child td { font-size: 1.02rem; }
.de-compare-updated { font-size: .82rem; color: var(--de-muted); text-align: center; margin: .3em 0 0; font-style: italic; }
.de-compare-error { border: 1px solid #e6b800; background: #fffbe6; color: #6b5900; padding: .7em .9em; border-radius: 8px; font-size: .9rem; }
@media (max-width: 560px) {
	.de-compare-heads { grid-template-columns: 1fr 1fr; gap: .6em; }
	.de-compare-head { padding: .8em .6em .9em; }
	.de-compare-lead strong { font-size: 1.1rem; }
	.de-compare-specs { font-size: .86rem; }
	.de-compare-specs th[scope="row"], .de-compare-specs td { padding: .5em .4em; }
}

/* Affiliate disclosure on generated articles — clear but unobtrusive (ASA: upfront). */
.de-disclosure { font-size: .82rem; color: var(--de-muted); background: var(--de-bg, #f7f9fa); border: 1px solid var(--de-line); border-radius: 8px; padding: .6em .9em; margin: 0 0 1.2em; line-height: 1.5; }
.de-offer-list { list-style: none; margin: 1.2em 0; padding: 0; }

/* ------------------------------------------------ generated content articles
 * Premium editorial styling, scoped to .de-article (the engine wraps only the
 * posts it drafted), so it never touches other posts or the theme. */
.de-article { max-width: 720px; margin-inline: auto; color: var(--de-ink); font-size: 1.08rem; line-height: 1.72; }
.de-article p { margin: 0 0 1.2em; }
.de-article > p:first-of-type:not(.de-disclosure) { font-size: 1.2rem; line-height: 1.6; color: var(--de-ink); }
.de-article h2 { font-size: clamp(1.42rem, 1.1rem + 1.1vw, 1.7rem); font-weight: 800; color: var(--de-navy); letter-spacing: -.02em; line-height: 1.18; margin: 1.9em 0 .55em; text-wrap: balance; }
.de-article h3 { font-size: 1.2rem; font-weight: 700; color: var(--de-navy); letter-spacing: -.01em; margin: 1.5em 0 .35em; }
.de-article strong { color: var(--de-navy); font-weight: 700; }
.de-article a:not(.de-buy):not(.de-card) { color: var(--de-accent-d); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; transition: color .12s; }
.de-article a:not(.de-buy):not(.de-card):hover { color: var(--de-navy); }
.de-article ul, .de-article ol { margin: 0 0 1.2em; padding-left: 1.3em; }
.de-article li { margin: .38em 0; }
.de-article li::marker { color: var(--de-accent); }

/* Affiliate disclosure — refined, an accent rule rather than a plain grey box. */
.de-article .de-disclosure { font-size: .85rem; line-height: 1.55; color: var(--de-muted); background: var(--de-tint, #f2fbf9); border: 1px solid var(--de-line); border-left: 3px solid var(--de-accent); border-radius: 8px; padding: .75em 1em; margin: 0 0 1.7em; }
.de-article .de-disclosure em { font-style: normal; }

/* Breathing room for the live components embedded in an article. */
.de-article .de-compare, .de-article .de-offer-list, .de-article [class*="de-deals"], .de-article [class*="de-grid"], .de-article .de-cards { margin-block: 1.7em; }

/* A quiet divider before the FAQ reads more finished than a bare heading. */
.de-article h2:last-of-type { }
@media (max-width: 782px) {
	.de-article { font-size: 1.04rem; }
	.de-article > p:first-of-type:not(.de-disclosure) { font-size: 1.12rem; }
}

/* ------------------------------------------------------------- mega menu
 * A catalogue-driven nav bar under the site header. Override any of this from
 * Appearance -> Customize -> Additional CSS. */
.de-mega { background: #fff; border-bottom: 1px solid var(--de-line); position: relative; z-index: 60; font-size: .95rem; }
.de-mega-inner { max-width: 1240px; margin: 0 auto; padding: 0 22px; }
.de-mega-bar { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
.de-mega-item { position: relative; }
.de-mega-top { display: inline-flex; align-items: center; gap: .35em; padding: 1.05em 1.05em; color: var(--de-navy); font-weight: 700; letter-spacing: -.01em; text-decoration: none !important; box-shadow: none !important; border-bottom: 0 !important; }
.de-mega-item:hover > .de-mega-top, .de-mega-top:focus { color: var(--de-accent-d); }
.de-has-panel > .de-mega-top { padding-right: .2em; }

.de-mega-caret { border: 0; background: none; cursor: pointer; padding: 1.05em .8em 1.05em .3em; line-height: 0; color: var(--de-muted); }
.de-mega-caret::before { content: ""; display: inline-block; width: .48em; height: .48em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-.05em, -.12em); transition: transform .15s; }
.de-mega-item:hover .de-mega-caret::before { transform: rotate(-135deg) translate(-.05em, -.05em); color: var(--de-accent-d); }

/* Desktop dropdown panel */
.de-mega-panel { position: absolute; top: 100%; left: 0; min-width: 300px; background: #fff; border: 1px solid var(--de-line); border-top: 2px solid var(--de-accent); border-radius: 0 0 14px 14px; box-shadow: 0 18px 44px rgba(13,27,42,.13); padding: 1.4em 1.6em 1.5em; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .14s ease, transform .14s ease, visibility .14s; }
.de-mega-item:hover > .de-mega-panel, .de-mega-item:focus-within > .de-mega-panel { opacity: 1; visibility: visible; transform: none; }
.de-mega-cols { display: flex; gap: 2.6em; }
.de-mega-col { display: flex; flex-direction: column; gap: .1em; min-width: 130px; }
.de-mega-h { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; color: var(--de-muted); margin-bottom: .7em; }
.de-mega-col a { color: var(--de-ink); text-decoration: none !important; box-shadow: none !important; border-bottom: 0 !important; padding: .3em 0; font-weight: 600; white-space: nowrap; }
.de-mega-col a:hover { color: var(--de-accent-d); }
.de-mega-all { display: inline-block; margin-top: 1.2em; color: var(--de-accent-d); font-weight: 800; font-size: .84rem; text-transform: uppercase; letter-spacing: .04em; text-decoration: none !important; box-shadow: none !important; border-bottom: 0 !important; }
.de-mega-all:hover { text-decoration: underline !important; }

/* Mobile: a "Shop" toggle + accordion panels */
.de-mega-burger { display: none; }
@media (max-width: 999px) {
	.de-mega-inner { padding: 0; }
	.de-mega-burger { display: flex; width: 100%; align-items: center; justify-content: space-between; background: var(--ast-global-color-2, #16202b); color: #fff; border: 0; padding: .95em 22px; font-weight: 800; font-size: .98rem; cursor: pointer; }
	.de-mega-burger::after { content: "\25BE"; transition: transform .15s; }
	.de-mega.is-open .de-mega-burger::after { transform: rotate(180deg); }
	.de-mega-bar { display: none; flex-direction: column; }
	.de-mega.is-open .de-mega-bar { display: flex; }
	.de-mega-item { border-bottom: 1px solid var(--de-line); display: flex; flex-wrap: wrap; align-items: center; }
	.de-mega-top { flex: 1; padding: .95em 22px; }
	.de-mega-caret { padding: .95em 22px; }
	.de-mega-item.is-expanded .de-mega-caret::before { transform: rotate(-135deg) translate(-.05em, -.05em); }
	.de-mega-panel { position: static; opacity: 1; visibility: visible; transform: none; display: none; width: 100%; box-shadow: none; border: 0; border-radius: 0; background: var(--de-soft, #f7f9fa); padding: .5em 22px 1.1em 34px; }
	.de-mega-item.is-expanded > .de-mega-panel { display: block; }
	.de-mega-cols { flex-direction: column; gap: 1.2em; }
	.de-mega-all { margin-top: 1em; }
}
.de-mega-foot { display: flex; flex-wrap: wrap; gap: .5em 1.5em; margin-top: 1.3em; padding-top: 1em; border-top: 1px solid var(--de-line); }
.de-mega-foot .de-mega-all { margin-top: 0; }
.de-mega-all.is-deal { color: #d64b3e; }
@media (max-width: 999px) { .de-mega-foot { margin-top: .8em; padding-top: .8em; padding-left: 34px; } }

/* ---- mega menu: matched to the navy Astra header (uses the theme's global colours) ---- */
.de-mega { --mega-navy: var(--ast-global-color-2, #16202b); --mega-accent: var(--de-accent, #12b3a0); background: transparent; border-bottom: 0; }
.de-mega-top { color: rgba(255,255,255,.9); font-size: 1.06rem; font-weight: 600; }
.de-mega-item:hover > .de-mega-top, .de-mega-top:focus { color: var(--mega-accent); }
.de-mega-caret::before { color: rgba(255,255,255,.6); }
.de-mega-item:hover .de-mega-caret::before { color: var(--mega-accent); }

.de-mega-panel { background: var(--mega-navy); border: 1px solid rgba(255,255,255,.13); border-top: 2px solid var(--mega-accent); box-shadow: 0 22px 50px rgba(0,0,0,.4); max-width: min(760px, calc(100vw - 24px)); }
.de-mega-cols { flex-wrap: wrap; }
.de-mega-h { color: rgba(255,255,255,.5); }
.de-mega-col a { color: rgba(255,255,255,.86); }
.de-mega-col a:hover { color: var(--mega-accent); }
.de-mega-all { color: var(--mega-accent); }
.de-mega-all.is-deal { color: #ff8f7f; }
.de-mega-foot { border-top-color: rgba(255,255,255,.13); }

/* Flip right-side panels so a centred/right item's panel never spills off the page. */
.de-mega-item.de-flip > .de-mega-panel { left: auto; right: 0; }

@media (max-width: 999px) {
	.de-mega.is-open .de-mega-bar { background: var(--mega-navy); }
	.de-mega-item { border-bottom-color: rgba(255,255,255,.12); }
	.de-mega-panel { background: rgba(255,255,255,.05); }
}

/* Dropdown spans the MENU BAR width (not each item), so columns stay horizontal — a wide
 * rectangle bounded by the menu — and a white line marks where it drops from. */
.de-mega-bar { position: relative; }
.de-mega-item { position: static; }
.de-mega-panel { left: 0; right: 0; width: auto; min-width: 0; max-width: none; border-top: 1px solid rgba(255,255,255,.55); }
.de-mega-cols { flex-wrap: wrap; gap: 1.5em 2.4em; }
.de-mega-item.de-flip > .de-mega-panel { left: 0; right: 0; }

/* Solid navy panel (beats any theme background rule) + all shop-by columns on one line,
 * sharing the panel width so they stay within the menu and never reach the logo/search. */
.de-mega .de-mega-panel { background-color: var(--ast-global-color-2, #16202b); }
.de-mega-cols { flex-wrap: nowrap; gap: 1.3em; }
.de-mega-col { flex: 1 1 0; min-width: 0; }
.de-mega-col a { white-space: normal; }
@media (max-width: 999px) {
	.de-mega-cols { flex-direction: column; }
	.de-mega-col { flex: none; }
}

/* Widen the dropdown ~25% beyond the menu bar on each side (centred), so columns have room and
 * labels stop breaking; and hide the line under the parent bar by matching it to the background. */
.de-mega-panel, .de-mega-item.de-flip > .de-mega-panel { left: -25%; right: -25%; }

/* Force the panel SOLID navy = the header. An opaque background-color was still rendering
 * see-through, so beat any theme rule with !important and kill every translucency vector
 * (filter/backdrop-filter), and ensure the shown state is fully opaque. */
.de-mega .de-mega-panel { border-top: 0; background-color: var(--ast-global-color-2, #16202b) !important; backdrop-filter: none !important; filter: none !important; }
.de-mega-item:hover > .de-mega-panel, .de-mega-item:focus-within > .de-mega-panel, .de-mega-item.is-expanded > .de-mega-panel { opacity: 1 !important; }

/* Now the panel is wider, let columns take their natural width (not forced-narrow) and keep each
 * label on one line; space them out across the panel. */
.de-mega-cols { gap: 1.7em; justify-content: space-between; }
.de-mega-col { flex: 0 0 auto; }
.de-mega-col a { white-space: nowrap; }
@media (max-width: 999px) {
	.de-mega-cols { justify-content: flex-start; }
	.de-mega-col a { white-space: normal; }
}

/* -------------------------------------------------- [de_category_picks]
   Photo-led category tiles. A retailer tile says "buy this"; these say "here is the
   category, here is the cheapest we found, and here is how many shops we checked" —
   the colour panel and the big product shot do the selling, the strip underneath
   does the comparing. */
.de-catpicks { display: grid; gap: 1.6em; margin: 0 0 1.2em; }
.de-catpicks.de-cols-2 { grid-template-columns: repeat(2, 1fr); }
.de-catpicks.de-cols-3 { grid-template-columns: repeat(3, 1fr); }
.de-catpicks.de-cols-4 { grid-template-columns: repeat(4, 1fr); }

.de-catpick { display: flex; flex-direction: column; }

/* The colour panel + hero shot */
.de-catpick-media {
	position: relative; display: block; border-radius: 20px; overflow: hidden;
	aspect-ratio: 4 / 3; text-decoration: none;
	transition: transform .18s ease, box-shadow .18s ease;
}
.de-catpick-media:hover { transform: translateY(-3px); box-shadow: 0 22px 44px -24px rgba(13, 27, 42, .55); }
.de-tint-navy { background: radial-gradient(120% 100% at 20% 0%, #1d3a57 0%, #0d1b2a 70%); }
.de-tint-teal { background: radial-gradient(120% 100% at 20% 0%, #14b3a0 0%, #077f72 72%); }
.de-tint-deep { background: radial-gradient(120% 100% at 80% 0%, #24506f 0%, #10263a 72%); }

.de-catpick-hero {
	position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%);
	width: 62%; aspect-ratio: 1 / 1;
	background: #fff; border-radius: 16px; padding: 8%;
	display: flex; align-items: center; justify-content: center;
	box-shadow: 0 18px 34px -14px rgba(0, 0, 0, .45);
	transition: transform .18s ease;
}
.de-catpick-hero img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.de-catpick-media:hover .de-catpick-hero { transform: translate(-50%, -50%) scale(1.035); }

.de-catpick-label {
	position: absolute; left: 1.1em; bottom: .9em;
	font-size: 1.22em; font-weight: 800; letter-spacing: -.02em; color: #fff;
	text-shadow: 0 2px 12px rgba(0, 0, 0, .4);
}
.de-catpick-badge {
	position: absolute; right: .9em; top: .9em;
	background: rgba(255, 255, 255, .95); color: var(--de-navy);
	font-size: .78em; font-weight: 700; padding: .38em .7em; border-radius: 999px;
	box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .5);
}
.de-catpick-badge b { color: var(--de-accent-d); }

.de-catpick-meta {
	margin: .7em 0 .2em; font-size: .82em; font-weight: 600; color: var(--de-muted);
}

/* The three products, compact under the panel */
.de-catpick-items { display: flex; flex-direction: column; }
.de-catpick-item {
	display: flex; align-items: center; gap: .7em;
	padding: .55em 0; border-top: 1px solid var(--de-line);
	text-decoration: none; color: inherit;
}
.de-catpick-item:hover .de-catpick-name { color: var(--de-accent-d); }
.de-catpick-thumb {
	flex: 0 0 auto; width: 42px; height: 42px; border-radius: 8px;
	background: #fff; border: 1px solid var(--de-line);
	display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.de-catpick-thumb img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.de-catpick-text { display: flex; flex-direction: column; min-width: 0; gap: 0; }
.de-catpick-brand { font-size: .66em; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--de-muted); }
.de-catpick-name {
	font-size: .86em; font-weight: 600; color: var(--de-navy); line-height: 1.2;
	display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.de-catpick-price { font-size: .8em; color: var(--de-muted); }
.de-catpick-price b { color: var(--de-accent-d); font-weight: 700; }

.de-catpick-more {
	margin-top: auto; padding-top: .8em;
	font-size: .88em; font-weight: 700; color: var(--de-accent-d); text-decoration: none;
}
.de-catpick-more::after { content: " \2192"; }
.de-catpick-more:hover { text-decoration: underline; }

@media (max-width: 900px) { .de-catpicks.de-cols-3, .de-catpicks.de-cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .de-catpicks { grid-template-columns: 1fr !important; } }

/* Prepared panel art: products cut out and composed on the brand teal, full bleed. */
.de-catpick-art { position: absolute; inset: 0; display: block; }
.de-catpick-art img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s ease; }
.de-catpick-media:hover .de-catpick-art img { transform: scale(1.035); }
/* Keeps the label readable over whatever the artwork does at the bottom. */
.de-catpick-media::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 45%;
	background: linear-gradient(180deg, rgba(6, 60, 53, 0) 0%, rgba(6, 45, 40, .55) 100%);
	pointer-events: none;
}
.de-catpick-label, .de-catpick-badge { z-index: 2; }

/* -------------------------------------------------- category card: big CTA variant */
.de-tint-white { background: #fff; border: 2px solid var(--de-accent); }
.de-tint-white .de-catpick-label { color: var(--de-navy); text-shadow: none; }
.de-tint-white .de-catpick-media::after { display: none; }
.de-tint-white .de-catpick-badge { background: var(--de-navy); color: #fff; }
.de-tint-white .de-catpick-badge b { color: #fff; }

.de-catpick-cta {
	display: block; margin-top: .7em;
	font-size: 1.05em; font-weight: 800; letter-spacing: -.01em;
	color: var(--de-navy); text-decoration: none;
}
.de-catpick-cta::after { content: " \2192"; color: var(--de-accent-d); }
.de-catpick-cta:hover { color: var(--de-accent-d); }

/* -------------------------------------------------- Rugby Hub article cards */
.de-hub { max-width: 1120px; margin: 0 auto; padding-bottom: 3.75em; }
.de-articles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5em; align-items: stretch; }
.de-articles.de-cols-2 { grid-template-columns: repeat(2, 1fr); }
.de-articles.de-cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .de-articles, .de-articles.de-cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .de-articles, .de-articles.de-cols-2, .de-articles.de-cols-4 { grid-template-columns: 1fr; } }
.de-article-card { display: flex; flex-direction: column; height: 100%; box-sizing: border-box; background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%); border: 1px solid #eef1f4; border-radius: 16px; box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 6px 14px -6px rgba(16, 24, 40, .10), 0 18px 40px -14px rgba(16, 24, 40, .12); padding: 1.75em 1.85em; text-decoration: none !important; color: inherit; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.de-article-card * { text-decoration: none !important; }
.de-article-card:hover { transform: translateY(-5px); box-shadow: 0 2px 4px rgba(16, 24, 40, .05), 0 16px 30px -10px rgba(16, 24, 40, .14), 0 34px 66px -18px rgba(16, 24, 40, .20); border-color: #e4e8ec; }
.de-article-body { display: flex; flex-direction: column; gap: .5em; flex: 1; }
.de-article-cluster { align-self: flex-start; font-size: .66em; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--de-accent-d, #0c8d7e); background: #ecfaf7; padding: .4em .72em; border-radius: 7px; }
.de-article-title { font-weight: 800; font-size: 1.26em; line-height: 1.28; letter-spacing: -.015em; color: var(--de-navy, #0d1b2a); transition: color .15s ease; }
.de-article-card:hover .de-article-title { color: var(--de-accent-d, #0c8d7e); }
.de-article-excerpt { font-size: .93em; color: var(--de-muted, #69727e); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.de-article-more { margin-top: auto; padding-top: 1.15em; font-weight: 700; font-size: .78em; text-transform: uppercase; letter-spacing: .07em; color: var(--de-accent-d, #0d7a6e); }
.de-article-more::after { content: " \2192"; transition: margin-left .15s ease; }
.de-article-card:hover .de-article-more::after { margin-left: .3em; }
.de-hub-cluster { margin: 2.6em 0 1.1em; font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; color: var(--de-navy, #0d1b2a); padding-bottom: .55em; border-bottom: 1px solid #edf0f2; }
.de-hub > .de-hub-cluster:first-child { margin-top: .2em; }
.de-articles-heading { text-align: center; }
.de-articles-more { text-align: center; margin-top: 1.5em; }
.de-articles-more a { font-weight: 700; color: var(--de-navy, #0d1b2a); text-decoration: none; }
.de-articles-more a::after { content: " \2192"; color: var(--de-accent-d, #0d7a6e); }

/* -------------------------------------------------- [de_trust]
   Not a delivery promise — the four things that make a price worth trusting. */
.de-trust { display: grid; gap: 1em; margin: 0 auto; max-width: 1100px; }
.de-trust-4 { grid-template-columns: repeat(4, 1fr); }
.de-trust-3 { grid-template-columns: repeat(3, 1fr); }
.de-trust-2 { grid-template-columns: repeat(2, 1fr); }
.de-trust-item { display: flex; align-items: center; gap: .65em; justify-content: center; text-align: left; }
.de-trust-text { font-size: .92em; font-weight: 600; color: var(--de-navy); line-height: 1.3; }
.de-trust-icon {
	flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
	background: var(--de-tint); border: 1.5px solid var(--de-accent);
	position: relative;
}
.de-trust-icon::before {
	content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-45deg);
	width: 12px; height: 6px; border-left: 2.5px solid var(--de-accent-d); border-bottom: 2.5px solid var(--de-accent-d);
}
@media (max-width: 860px) { .de-trust-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) {
	.de-trust-wrap { display: flex; justify-content: center; }
	.de-trust {
		display: grid !important;
		grid-template-columns: max-content !important;
		max-width: 100%; margin: 0; gap: .8em;
	}
	.de-trust-item { justify-content: flex-start; }
}

/* -------------------------------------------------- [de_signup theme="teal"]
   The default block is a navy card with grey body text and a TEAL button — correct on a dark
   band, wrong on a teal one, where the button turns invisible and the greys go muddy.
   This variant drops the card entirely and re-colours for teal. */
.de-signup-teal {
	/* A teal pill sitting ON the navy footer — not a flat band. The generous radius is what
	   separates it from the footer around it and makes it read as its own block. */
	background: linear-gradient(158deg, #17bda9 0%, #0a9382 100%);
	border-radius: 28px;
	box-shadow: 0 22px 48px -26px rgba(0, 0, 0, .55);
	padding: 2.4em 2.8em;
}
.de-signup-teal .de-signup-title { color: #fff; font-size: 2.05rem; line-height: 1.1; }
.de-signup-teal .de-signup-body { color: var(--de-navy); font-size: 1.06rem; line-height: 1.5; margin-top: .55em; max-width: 34ch; }

/* Inputs: solid white on teal, navy text, no washed-out borders */
.de-signup-teal .de-signup-form input[type="email"],
.de-signup-teal .de-signup-form input[type="text"] {
	background: #fff !important;
	color: var(--de-navy) !important;
	border: 1px solid rgba(13, 27, 42, .12) !important;
}
.de-signup-teal .de-signup-form input::placeholder { color: #7c8b99 !important; opacity: 1; }

/* Consent text has to be readable, not a grey whisper */
.de-signup-teal .de-signup-form .de-f-consent .wpforms-field-label-inline { color: #fff; }
.de-signup-teal .de-signup-form .de-f-consent input[type="checkbox"] { accent-color: var(--de-navy); }

/* Navy button: the one colour guaranteed to read on teal */
.de-signup-teal .de-signup-form button[type="submit"] {
	background: var(--de-navy) !important;
	color: #fff !important;
}
.de-signup-teal .de-signup-form button[type="submit"]:hover { background: #16324d !important; }

.de-signup-teal .de-signup-form .wpforms-error { color: #2d0f0a !important; font-weight: 600; }
.de-signup-teal .de-signup-form .wpforms-confirmation-container-full {
	background: rgba(255, 255, 255, .16);
	border-color: rgba(255, 255, 255, .3);
	color: #fff;
}