/*
 * The Dog Food App storefront skin — "Midnight & Cobalt" (v0.3.2).
 * Loaded only on TDFA pages (body.sf-tdfa), and only while the TDFA reskin is switched on.
 *
 * Colour, type and state only. Never sizing, spacing, layout or corner rounding:
 * the live Zuki layout is the agreed benchmark and must come through untouched.
 *
 * Chrome, ink and signal red are taken from the TDFA logo itself; the action colour is
 * cobalt, which is the one hue absent from the catalogue's warm gold-and-tan packaging,
 * so an Add button never competes with a bag. Signal red is held back for sale prices
 * and the mark alone. Warm biscuit paper, periwinkle tints where Zuki uses cyan mist.
 *
 * Every pairing clears WCAG AA: white on cobalt 5.4:1, the button edge against paper
 * 5.1:1, ink on paper 15.5:1, sale red on white 5.6:1.
 *
 * Structure mirrors the Zuki brand snippet selector-for-selector, because that snippet
 * is the map of every hard-coded colour on the live site.
 */

body.sf-tdfa,
body.sf-tdfa.v8 {
	/* ---- TDFA tokens ---- */
	--td-font: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	--td-display: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;

	--td-ink: #1C1C38;
	--td-heading: #242452;
	--td-midnight: #181830;
	--td-slate: #5C5F7E;

	--td-buy: #1B5CF6;
	--td-buy-hover: #1448CC;
	--td-on-buy: #FFFFFF;

	--td-signal: #F0251C;
	--td-sale: #C9202C;

	--td-periwinkle: #8D94DE;      /* tiles; deepened in 0.3.1 to survive the theme's white sheen */
	--td-periwinkle-mid: #8E94D8;
	--td-ice: #ECEDF8;
	--td-paper: #F9F8F4;
	--td-hairline: #E4E2DC;
	--td-line: #8A8CA0;

	--td-biscuit: #D9B36E;
	--td-eucalyptus: #8FB49F;
	--td-blush: #DCA3AA;
	--td-stars: #F2A71B;

	--td-success-bg: #E4F2E8;
	--td-success-icon: #1E7A45;
	--td-warning-bg: #FFF3D1;
	--td-warning-icon: #8A5A00;
	--td-error-bg: #FBE7E6;

	/* ---- the theme's own variables, remapped ---- */
	--f-body: var(--td-font);
	--f-display: var(--td-display);

	--ink: var(--td-ink);
	--ink-2: var(--td-slate);
	--ink-3: var(--td-slate);
	--label: var(--td-slate);

	--bg: var(--td-paper);
	--surface: #FFFFFF;
	--line: var(--td-hairline);
	--line-2: var(--td-line);

	--navy: var(--td-midnight);
	--navy-1: var(--td-midnight);
	--navy-3: #2B2B50;

	--teal: var(--td-midnight);
	--teal-deep: var(--td-midnight);
	--teal-ink: var(--td-ink);
	--teal-mid: var(--td-periwinkle-mid);
	--teal-soft: var(--td-ice);
	--lilac-soft: var(--td-ice);
	--zblue: var(--td-periwinkle-mid);

	--aqua: var(--td-periwinkle);
	--aqua-soft: var(--td-ice);
	--aqua-ink: var(--td-ink);

	--orange: var(--td-buy);
	--orange-hover: var(--td-buy-hover);
	--orange-deep: var(--td-sale);
	--orange-soft: var(--td-error-bg);
	--on-orange: var(--td-on-buy);
	--go: var(--td-buy);

	--sale: var(--td-sale);
	--good: var(--td-success-icon);
	--good-soft: var(--td-success-bg);
	--warn: var(--td-warning-icon);
	--sun: var(--td-stars);

	--chrome: var(--td-midnight);
	--head: var(--td-heading);
	--bar: var(--td-midnight);
}

/* ---------- type ---------- */
body.sf-tdfa { font-family: var(--td-font); color: var(--td-ink); }
body.sf-tdfa :where(h1, h2, h3, h4, h5, h6, button, input, select, textarea, .btn, .button) { font-family: var(--td-font); }
body.sf-tdfa :where(h1, h2, h3) { font-family: var(--td-display); color: var(--td-heading); font-weight: 700; }
body.sf-tdfa .hx h1, body.sf-tdfa .hx h2, body.sf-tdfa [class*="hx"] :where(h1, h2) { font-weight: 800; letter-spacing: -.02em; }
body.sf-tdfa h1.product_title { font-weight: 800; letter-spacing: -.015em; }
body.sf-tdfa .price.num, body.sf-tdfa .zk-price, body.sf-tdfa .woocommerce-Price-amount, body.sf-tdfa .amount { font-family: var(--td-display); font-weight: 700; font-variant-numeric: tabular-nums; }
body.sf-tdfa .nlink, body.sf-tdfa #mainnav a, body.sf-tdfa #mainnav button { font-weight: 700; }
body.sf-tdfa .crumbs, body.sf-tdfa .woocommerce-breadcrumb, body.sf-tdfa .crumbs a { color: var(--td-slate); }
body.sf-tdfa .crumbs > :last-child { color: var(--td-ink); font-weight: 500; }
body.sf-tdfa a.link, body.sf-tdfa .link { color: var(--td-ink); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- header, nav, footer ---------- */
body.sf-tdfa header.top, body.sf-tdfa .top { background: var(--td-midnight); }
body.sf-tdfa .hdeliv, body.sf-tdfa .zk-ndeliv { background: var(--td-ice); color: var(--td-ink); }
body.sf-tdfa .hsearch { color: var(--td-slate); }
body.sf-tdfa .bonepill { background: var(--td-buy) !important; color: var(--td-on-buy) !important; box-shadow: none; }
body.sf-tdfa #foot, body.sf-tdfa footer#foot { background: var(--td-midnight); color: #FFFFFF; }
body.sf-tdfa #foot a, body.sf-tdfa #foot .brandcol { color: #FFFFFF; }

/* ---------- buttons ---------- */
body.sf-tdfa .button, body.sf-tdfa .btn, body.sf-tdfa .single_add_to_cart_button,
body.sf-tdfa .checkout-button, body.sf-tdfa .add_to_cart_button, body.sf-tdfa .wc-block-components-button { font-family: var(--td-font); font-weight: 700; }
body.sf-tdfa .single_add_to_cart_button:not([class*="ghost"]), body.sf-tdfa .checkout-button,
body.sf-tdfa .btn-go, body.sf-tdfa .zk-mpromo-go,
body.sf-tdfa a.button.alt, body.sf-tdfa button.button.alt {
	background: var(--td-buy) !important;
	background-image: none !important;
	color: var(--td-on-buy) !important;
}
body.sf-tdfa .single_add_to_cart_button:hover, body.sf-tdfa .checkout-button:hover,
body.sf-tdfa a.button.alt:hover, body.sf-tdfa button.button.alt:hover { background: var(--td-buy-hover) !important; }
body.sf-tdfa .single_add_to_cart_button[style*="255, 255, 255"], body.sf-tdfa .btn-ghost,
body.sf-tdfa .btn.ghost, body.sf-tdfa .button.ghost {
	background: #FFFFFF !important; color: var(--td-ink) !important;
	box-shadow: inset 0 0 0 1.5px var(--td-ink); border-color: var(--td-ink) !important;
}
/* Product-card Add. Cobalt clears 5.4:1 against a white card on its own, so it needs no rim. */
body.sf-tdfa button.add8, body.sf-tdfa .add8 {
	background: var(--td-buy) !important;
	background-image: none !important;
	color: var(--td-on-buy) !important;
	box-shadow: 0 8px 18px -6px rgba(27, 92, 246, .40) !important;
	font-weight: 700 !important;
	border: 0 !important;
}
body.sf-tdfa button.add8:hover, body.sf-tdfa .add8:hover { background: var(--td-buy-hover) !important; }
body.sf-tdfa .add8.added { background: var(--td-midnight) !important; color: #FFFFFF !important; }
body.sf-tdfa .add8.soon { background: #FFFFFF !important; color: var(--td-slate) !important; box-shadow: inset 0 0 0 1px var(--td-hairline) !important; }

/* ---------- cards, tiles ---------- */
body.sf-tdfa article.card, body.sf-tdfa .card.c8 { border-color: var(--td-hairline); }
body.sf-tdfa .heart { border-color: var(--td-line) !important; color: var(--td-ink); }
body.sf-tdfa .heart.on { background: var(--td-sale) !important; border-color: var(--td-sale) !important; color: #FFFFFF; }
body.sf-tdfa .star-rating, body.sf-tdfa .star-rating span, body.sf-tdfa .star-rating::before,
body.sf-tdfa .rating, body.sf-tdfa .stars { color: var(--td-stars); }

/* ---------- controls ---------- */
body.sf-tdfa .qchip, body.sf-tdfa .chip, body.sf-tdfa .filters-btn { border-color: var(--td-line) !important; color: var(--td-ink); font-weight: 700; }
body.sf-tdfa .qchip.on, body.sf-tdfa .qchip.is-on, body.sf-tdfa .qchip[aria-pressed="true"], body.sf-tdfa .chip.on { background: var(--td-ink) !important; border-color: var(--td-ink) !important; color: #FFFFFF !important; }
body.sf-tdfa .sel, body.sf-tdfa select, body.sf-tdfa input[type="text"], body.sf-tdfa input[type="email"],
body.sf-tdfa input[type="tel"], body.sf-tdfa input[type="number"], body.sf-tdfa input[type="search"],
body.sf-tdfa input[type="password"], body.sf-tdfa textarea { border-color: var(--td-line); }
body.sf-tdfa .zk-qty, body.sf-tdfa .quantity.qty { border-color: var(--td-line) !important; }
body.sf-tdfa .bopt, body.sf-tdfa [class*="size"] button, body.sf-tdfa .zk-var button { border-color: var(--td-line) !important; }
body.sf-tdfa .bopt.on, body.sf-tdfa [class*="size"] button.on, body.sf-tdfa .zk-var button.on { border-color: var(--td-ink) !important; box-shadow: inset 0 0 0 1px var(--td-ink) !important; background: var(--td-ice) !important; }
body.sf-tdfa .page-numbers:not(ul) { border-color: var(--td-line) !important; color: var(--td-ink); }
body.sf-tdfa .page-numbers.current { background: var(--td-ink) !important; border-color: var(--td-ink) !important; color: #FFFFFF !important; }
body.sf-tdfa input[type="checkbox"], body.sf-tdfa input[type="radio"] { accent-color: var(--td-ink); }
body.sf-tdfa details summary { color: var(--td-heading); font-weight: 700; }
body.sf-tdfa .tog8 input:checked + i { background: var(--td-midnight) !important; }

/* ---------- messages ---------- */
body.sf-tdfa .woocommerce-message, body.sf-tdfa .wc-block-components-notice-banner.is-success { background: var(--td-success-bg); color: var(--td-ink); border-color: var(--td-success-icon); }
body.sf-tdfa .woocommerce-info, body.sf-tdfa .wc-block-components-notice-banner.is-info { background: var(--td-ice); color: var(--td-ink); border-color: var(--td-midnight); }
body.sf-tdfa .woocommerce-error, body.sf-tdfa .wc-block-components-notice-banner.is-error { background: var(--td-error-bg); color: var(--td-ink); border-color: var(--td-sale); }

/* ---------- chat launcher ---------- */
body.sf-tdfa .tdfa-chat-launcher, body.sf-tdfa .chatfab { background: var(--td-midnight) !important; color: #FFFFFF !important; }

/* ---------- focus ---------- */
body.sf-tdfa :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid var(--td-ink); outline-offset: 3px; }
body.sf-tdfa .top :is(a, button):focus-visible, body.sf-tdfa #foot :is(a, button):focus-visible { outline-color: #FFFFFF; }

/* ---------- logo on the midnight chrome ---------- */
body.sf-tdfa header.top .logo img { height: 34px; width: auto; }
body.sf-tdfa.sf-tdfa-autowhite header.top .logo img[data-tdfa-logo],
body.sf-tdfa.sf-tdfa-autowhite footer .brandcol img[data-tdfa-logo] { filter: brightness(0) invert(1); }
.tdfa-wordmark { font-family: var(--td-display); font-weight: 800; font-size: 20px; letter-spacing: -.02em; white-space: nowrap; color: #fff; }
@media (min-width: 760px) { .tdfa-wordmark { font-size: 24px; } }

/* ---------- priority block: beats the theme's own "html body … !important" patches ---------- */
html body.sf-tdfa footer#foot:not(#td-none) { background: var(--td-midnight) !important; }
html body.sf-tdfa #foot .legal:not(#td-none), html body.sf-tdfa #foot .legal *, html body.sf-tdfa #foot .paybar .lbl, html body.sf-tdfa #foot .zk-vat { color: #FFFFFF !important; }
html body.sf-tdfa nav#mainnav.main:not(#td-none), html body.sf-tdfa #mainnav .zk-mpills a:not(#td-none) { background: var(--td-ice) !important; }
html body.sf-tdfa #top nav#mainnav.main:not(#td-none) { background-color: var(--td-ice) !important; }
html body.sf-tdfa #hdeliv.hdeliv:not(#td-none) { background: var(--td-ice) !important; }
html body.sf-tdfa #hdeliv.hdeliv:not(#td-none)::after { background: var(--td-ice) !important; }
html body.sf-tdfa #hdeliv.hdeliv:not(#td-none) small { color: var(--td-ink) !important; }
html body.sf-tdfa #hdeliv.hdeliv:not(#td-none) > svg:first-child { background: var(--td-ink) !important; color: #FFFFFF !important; }
html body.sf-tdfa #hdeliv.hdeliv:not(#td-none) > svg:last-child, html body.sf-tdfa #hdeliv.hdeliv:not(#td-none) > svg:last-child * { color: var(--td-ink) !important; }
html body.sf-tdfa #hdeliv.hdeliv:not(#td-none)[data-area=""] b[data-where] { color: var(--td-sale) !important; }
html body.sf-tdfa #mainnav .nlink:not(#td-none) svg, html body.sf-tdfa #mainnav .nlink:not(#td-none) svg * { color: var(--td-ink) !important; }
html body.sf-tdfa #mainnav a.nlink[href*="special" i]:not(#td-none) svg, html body.sf-tdfa #mainnav a.nlink[href*="special" i]:not(#td-none) svg * { color: var(--td-sale) !important; }
html body.sf-tdfa button.add8:not(#td-none) { background: var(--td-buy) !important; background-image: none !important; color: var(--td-on-buy) !important; }
html body.sf-tdfa button.add8:not(#td-none):hover { background: var(--td-buy-hover) !important; }
html body.sf-tdfa #foot:not(#td-none) svg:not(.soc svg) { color: var(--td-periwinkle) !important; }
html body.sf-tdfa #app .roundel:not(#td-none) { color: var(--td-sale) !important; }
html body.sf-tdfa summary:not(#td-none) > svg, html body.sf-tdfa .zk-mlink:not(#td-none) svg { color: var(--td-ink) !important; }
html body.sf-tdfa #toast.toast:not(#td-none) { background: var(--td-midnight) !important; color: #FFFFFF !important; }
html body.sf-tdfa .zk-pchips2 .zk-chip.auto:not(#td-none) { background: var(--td-ice) !important; color: var(--td-ink) !important; border-color: transparent !important; }
html body.sf-tdfa form.cart .single_add_to_cart_button:not(#td-none):not(#td-n2),
html body.sf-tdfa .checkout-button:not(#td-none):not(#td-n2) { background: var(--td-buy) !important; background-image: none !important; color: var(--td-on-buy) !important; }
html body.sf-tdfa form.cart .single_add_to_cart_button:not(#td-none):not(#td-n2):hover { background: var(--td-buy-hover) !important; }
html body.sf-tdfa form.jgtb-add-to-subscription .single_add_to_cart_button:not(#td-none):not(#td-n2) { background: #FFFFFF !important; background-image: none !important; color: var(--td-ink) !important; border-color: var(--td-ink) !important; box-shadow: none !important; }
html body.sf-tdfa #navCart.navcart:not(#td-none) small { background: #FFFFFF !important; color: var(--td-ink) !important; }
html body.sf-tdfa .navcart:not(#td-none), html body.sf-tdfa .cart8:not(#td-none) { background: var(--td-buy) !important; background-image: none !important; color: var(--td-on-buy) !important; box-shadow: 0 4px 12px rgba(27, 92, 246, .32) !important; }
html body.sf-tdfa .zk-sortbtn:not(#td-none) { border-color: var(--td-line) !important; }
html body.sf-tdfa .zk-sortbtn:not(#td-none) svg { color: var(--td-ink) !important; }
html body.sf-tdfa .zk-about:not(#td-none) p, html body.sf-tdfa .zk-prose:not(#td-none) p { color: var(--td-ink) !important; }
html body.sf-tdfa .trustline:not(#td-none) svg { color: var(--td-periwinkle-mid) !important; }
html body.sf-tdfa .zk-cart-bar:not(#td-none) { background: var(--td-midnight) !important; }
html body.sf-tdfa .zk-bucks-note:not(#td-none) b { color: var(--td-ink) !important; }
html body.sf-tdfa .required:not(#td-none) { color: var(--td-sale) !important; }
html body.sf-tdfa .custom_point_checkout:not(#td-none) small { color: var(--td-slate) !important; }
html body.sf-tdfa #cbadge.badge:not(#td-none) { background: #FFFFFF !important; color: var(--td-ink) !important; }
html body.sf-tdfa #cartBtn.cart8:not(#td-none), html body.sf-tdfa #cartBtn.cart8:not(#td-none) svg { color: var(--td-on-buy) !important; }
html body.sf-tdfa #hdelivM.hdeliv:not(#td-none) { background: var(--td-ice) !important; border-color: var(--td-periwinkle) !important; }
html body.sf-tdfa #hdelivM.hdeliv:not(#td-none) b { color: var(--td-ink) !important; }
html body.sf-tdfa #hdelivM.hdeliv:not(#td-none) > svg:first-child { background: var(--td-ink) !important; color: #FFFFFF !important; }
html body.sf-tdfa #hdelivM.hdeliv:not(#td-none) > svg:last-child { color: var(--td-ink) !important; }
html body.sf-tdfa #foot .soc.soc-chat:not(#td-none) { background: var(--td-buy) !important; color: var(--td-on-buy) !important; }
html body.sf-tdfa .sizes .size:not(#td-none) .bv { background: var(--td-success-bg) !important; color: var(--td-ink) !important; }
html body.sf-tdfa .zk-autonudge:not(#td-none) { background: var(--td-success-bg) !important; color: var(--td-ink) !important; }
html body.sf-tdfa .zk-autonudge:not(#td-none) svg { color: var(--td-success-icon) !important; }
html body.sf-tdfa .infocard:not(#td-none) i { background: var(--td-success-bg) !important; color: var(--td-success-icon) !important; }
html body.sf-tdfa #place_order:not(#td-none) { background: var(--td-buy) !important; color: var(--td-on-buy) !important; }
html body.sf-tdfa .hx-dots button.on:not(#td-none) { background: var(--td-ink) !important; }
html body.sf-tdfa .zk-t2-tx small:not(#td-none), html body.sf-tdfa .zk-mhead:not(#td-none), html body.sf-tdfa .pcard small:not(#td-none) { color: var(--td-slate) !important; }
html body.sf-tdfa .eyb8:not(#td-none) { color: var(--td-ink) !important; }
html body.sf-tdfa .pcard .now:not(#td-none) { color: var(--td-sale) !important; }
html body.sf-tdfa .gst:not(#td-none) { color: var(--td-stars) !important; }
html body.sf-tdfa #search .sbar input:not(#td-none) { box-shadow: 0 0 0 3px rgba(175, 180, 232, .45) !important; }
html body.sf-tdfa #search .sbar input:focus:not(#td-none) { box-shadow: 0 0 0 3px var(--td-periwinkle) !important; }
html body.sf-tdfa #search.overlay:not(#td-none) { background: rgba(24, 24, 48, .60) !important; }

/* ---------- the signature move: hero fields go dark where Zuki goes candy ---------- */
html body.sf-tdfa .hx .hx-slide:not(#td-none) { background: var(--td-midnight) !important; --td-pair: var(--td-buy); }
html body.sf-tdfa .hx .hx-slide.s-hills:not(#td-none) { background: #1E1E3C !important; }
html body.sf-tdfa .hx .hx-slide.s-auto:not(#td-none) { background: #181830 !important; }
html body.sf-tdfa .hx .hx-slide.s-today:not(#td-none) { background: #141428 !important; }
html body.sf-tdfa .hx .hx-slide:not(#td-none):not(#td-n2) .tx,
html body.sf-tdfa .hx .hx-slide:not(#td-none):not(#td-n2) .tx * { color: #FFFFFF !important; }
html body.sf-tdfa .hx .hx-slide:not(#td-none):not(#td-n2) .tx small,
html body.sf-tdfa .hx .hx-slide:not(#td-none):not(#td-n2) .tx p { color: #B9BDE4 !important; }
html body.sf-tdfa .hx .hx-slide:not(#td-none):not(#td-n2) .go { background: var(--td-buy) !important; background-image: none !important; color: var(--td-on-buy) !important; }
html body.sf-tdfa .hx .hx-slide:not(#td-none):not(#td-n2) .go * { color: var(--td-on-buy) !important; }
html body.sf-tdfa a.spons:not(#td-none) { background: #1E1E3C !important; --td-pair: var(--td-buy); }
html body.sf-tdfa a.spons:not(#td-none) * { color: #FFFFFF !important; }
html body.sf-tdfa a.spons:not(#td-none) .go, html body.sf-tdfa a.spons:not(#td-none) [class*="btn"], html body.sf-tdfa a.spons:not(#td-none) [class*="cta"] { background: var(--td-buy) !important; background-image: none !important; color: var(--td-on-buy) !important; }
html body.sf-tdfa a.spons:not(#td-none) .go *, html body.sf-tdfa a.spons:not(#td-none) [class*="btn"] *, html body.sf-tdfa a.spons:not(#td-none) [class*="cta"] * { color: var(--td-on-buy) !important; }

/* Category bands keep their rhythm, in the muted TDFA set with midnight CTAs. */
html body.sf-tdfa a.tban[href*="tick-flea"]:not(#td-none) { background: var(--td-eucalyptus) !important; --td-pair: var(--td-midnight); }
html body.sf-tdfa a.tban[href*="dry-dog-food"]:not(#td-none) { background: var(--td-biscuit) !important; --td-pair: var(--td-midnight); }
html body.sf-tdfa a.tban[href*="dog-treats"]:not(#td-none) { background: var(--td-periwinkle) !important; --td-pair: var(--td-midnight); }
html body.sf-tdfa a.tban[href$="/cats/"]:not(#td-none) { background: var(--td-blush) !important; --td-pair: var(--td-midnight); }
html body.sf-tdfa a.tban:not(#td-none), html body.sf-tdfa a.tban:not(#td-none) .tx, html body.sf-tdfa a.tban:not(#td-none) .tx b, html body.sf-tdfa a.tban:not(#td-none) .tx span { color: var(--td-ink) !important; }
html body.sf-tdfa a.tban:not(#td-none) .cta8 { background: var(--td-pair, var(--td-midnight)) !important; color: #FFFFFF !important; }
html body.sf-tdfa a.tban.zt2:not(#td-none):not(#td-n2) { --zt2-f: var(--td-eucalyptus) !important; }
html body.sf-tdfa a.tban.zt2:not(#td-none):not(#td-n2).zt2--bags { --zt2-f: var(--td-biscuit) !important; }
html body.sf-tdfa a.tban.zt2:not(#td-none):not(#td-n2).zt2--chew { --zt2-f: var(--td-periwinkle) !important; }
html body.sf-tdfa a.tban.zt2:not(#td-none):not(#td-n2).zt2--cat { --zt2-f: var(--td-blush) !important; }
html body.sf-tdfa .hero2:not(#td-none), html body.sf-tdfa .s-today:not(#td-none) { background: var(--td-midnight) !important; color: #FFFFFF !important; }
html body.sf-tdfa .slide.s-orange:not(#td-none), html body.sf-tdfa .autoband:not(#td-none), html body.sf-tdfa .catband:not(#td-none) { background: var(--td-midnight) !important; color: #FFFFFF !important; }
html body.sf-tdfa .catband h1:not(#td-none), html body.sf-tdfa .catband h2, html body.sf-tdfa .catband p,
html body.sf-tdfa .autoband h1, html body.sf-tdfa .autoband h2, html body.sf-tdfa .autoband p { color: #FFFFFF !important; }
html body.sf-tdfa .t8-save:not(#td-none), html body.sf-tdfa .qc-d:not(#td-none), html body.sf-tdfa .hx8 .roundel:not(#td-none) { background: var(--td-sale) !important; color: #FFFFFF !important; }
html body.sf-tdfa .resc8:not(#td-none) { background: var(--td-warning-bg) !important; }
html body.sf-tdfa .resc8:not(#td-none) small, html body.sf-tdfa .resc8:not(#td-none) .go { color: var(--td-warning-icon) !important; }

/* Muted tile fields: Zuki's deeper-muted set becomes the TDFA set. Colour only. */
html body.sf-tdfa [style*="--bx:#B7C5E2" i]:not(#td-none):not(#td-n2) { --bx: var(--td-periwinkle) !important; --bxa: var(--td-ink) !important; }
html body.sf-tdfa [style*="--bx:#A9CFD8" i]:not(#td-none):not(#td-n2) { --bx: var(--td-periwinkle) !important; --bxa: var(--td-ink) !important; }
html body.sf-tdfa [style*="--bx:#A7CCC4" i]:not(#td-none):not(#td-n2) { --bx: var(--td-eucalyptus) !important; --bxa: var(--td-ink) !important; }
html body.sf-tdfa [style*="--bx:#E6BDB6" i]:not(#td-none):not(#td-n2) { --bx: var(--td-blush) !important; --bxa: var(--td-ink) !important; }
html body.sf-tdfa [style*="--bx:#B2CDA5" i]:not(#td-none):not(#td-n2) { --bx: var(--td-eucalyptus) !important; --bxa: var(--td-ink) !important; }
html body.sf-tdfa [style*="--bx:#E2B58F" i]:not(#td-none):not(#td-n2) { --bx: var(--td-biscuit) !important; --bxa: var(--td-ink) !important; }
html body.sf-tdfa [style*="--bx:#E3C78A" i]:not(#td-none):not(#td-n2) { --bx: var(--td-biscuit) !important; --bxa: var(--td-ink) !important; }
html body.sf-tdfa [style*="--bx:#BBB8DE" i]:not(#td-none):not(#td-n2) { --bx: var(--td-periwinkle) !important; --bxa: var(--td-ink) !important; }
html body.sf-tdfa [style*="--bx:#DDB3C4" i]:not(#td-none):not(#td-n2) { --bx: var(--td-blush) !important; --bxa: var(--td-ink) !important; }
html body.sf-tdfa [style*="--bx:#BCC9D6" i]:not(#td-none):not(#td-n2) { --bx: var(--td-periwinkle) !important; --bxa: var(--td-ink) !important; }
html body.sf-tdfa a.qtile.zk-qt[style*="--bx:"]:not(#td-none):not(#td-n2) b,
html body.sf-tdfa a.zk-t2[style*="--bx:"]:not(#td-none):not(#td-n2) b,
html body.sf-tdfa .zk-brt[style*="--bx:"]:not(#td-none):not(#td-n2) b,
html body.sf-tdfa .zk-sc[style*="--bx:"]:not(#td-none):not(#td-n2) b,
html body.sf-tdfa a.zk-mt[style*="--bx:"]:not(#td-none):not(#td-n2) b { color: var(--td-ink) !important; }
html body.sf-tdfa #app a.qtile.zk-qt.zk-qt-ic[href*="/specials/"]:not(#td-none):not(#td-n2) { background: var(--td-blush) !important; }
html body.sf-tdfa #app a.qtile.zk-qt.zk-qt-ic[href*="/subscriptions/"]:not(#td-none):not(#td-n2) { background: var(--td-periwinkle) !important; }
html body.sf-tdfa #app a.qtile.zk-qt.zk-qt-ic:not(#td-none):not(#td-n2) b { color: var(--td-ink) !important; }
/* Mega-menu tile fields */
html body.sf-tdfa .mega.zk-t2-mega:not(#td-none):not(#td-n2) .zk-mtiles > li > a.zk-mt:not(#td-n3) { --fld: var(--td-periwinkle) !important; }
html body.sf-tdfa .mega.zk-t2-mega:not(#td-none):not(#td-n2) .zk-mtiles > li > a.zk-mt:not(#td-n3)[href*="treats"] { --fld: var(--td-biscuit) !important; }
html body.sf-tdfa .mega.zk-t2-mega:not(#td-none):not(#td-n2) .zk-mtiles > li > a.zk-mt:not(#td-n3)[href*="wet-"] { --fld: var(--td-eucalyptus) !important; }
html body.sf-tdfa .mega.zk-t2-mega:not(#td-none):not(#td-n2) .zk-mtiles > li > a.zk-mt:not(#td-n3)[href*="litter"] { --fld: var(--td-blush) !important; }

/* Non-Zuki-theme fallback (Astra/Elementor on older environments) */
body.sf-tdfa:not(.v8) a { color: inherit; }
body.sf-tdfa:not(.v8) .elementor-button,
body.sf-tdfa:not(.v8) .button.alt,
body.sf-tdfa:not(.v8) button.single_add_to_cart_button { background: var(--td-buy) !important; color: var(--td-on-buy) !important; border-color: var(--td-buy) !important; }

/* ---------------------------------------------------------------------------
 * v0.2.8 — tiles and hero CTA.
 *
 * The quick-shop tiles are rendered in the browser, so the server-side recolour
 * engine never sees them: their inline --bx keeps Zuki's original pastels while
 * the brand snippet's href-targeted rules push the muted set, and the painted
 * background comes from Zuki's bright rainbow (marigold, grass, lavender) which
 * the engine deliberately leaves alone so star ratings stay gold. All of it has
 * to be settled in CSS, which applies whenever the DOM is built.
 * ------------------------------------------------------------------------- */

/* Every tile paints from its own --bx, with a dark label. */
html body.sf-tdfa a.qtile:not(#td-none):not(#td-n2),
html body.sf-tdfa a.zk-qt:not(#td-none):not(#td-n2),
html body.sf-tdfa a.zk-t2:not(#td-none):not(#td-n2),
html body.sf-tdfa .zk-brt:not(#td-none):not(#td-n2),
html body.sf-tdfa .zk-sc:not(#td-none):not(#td-n2) { background-color: var(--bx, var(--td-periwinkle)) !important; }
html body.sf-tdfa a.qtile:not(#td-none):not(#td-n2) b,
html body.sf-tdfa a.qtile:not(#td-none):not(#td-n2) span,
html body.sf-tdfa a.zk-qt:not(#td-none):not(#td-n2) b,
html body.sf-tdfa a.zk-qt:not(#td-none):not(#td-n2) span { color: var(--td-ink) !important; }

/* Zuki's ORIGINAL pastel --bx values (what the browser-rendered tiles carry inline). */
html body.sf-tdfa [style*="--bx:#DCEBFF" i]:not(#td-none),
html body.sf-tdfa [style*="--bx:#DDF6FC" i]:not(#td-none),
html body.sf-tdfa [style*="--bx:#D7F7FF" i]:not(#td-none),
html body.sf-tdfa [style*="--bx:#E3F1F7" i]:not(#td-none),
html body.sf-tdfa [style*="--bx:#D7F0F7" i]:not(#td-none),
html body.sf-tdfa [style*="--bx:#E6ECF3" i]:not(#td-none),
html body.sf-tdfa [style*="--bx:#E2F2F7" i]:not(#td-none),
html body.sf-tdfa [style*="--bx:#ECE6FB" i]:not(#td-none),
html body.sf-tdfa [style*="--bx:#E9E4FA" i]:not(#td-none) { --bx: var(--td-periwinkle) !important; --bxa: var(--td-ink) !important; }
html body.sf-tdfa [style*="--bx:#E2F2EF" i]:not(#td-none),
html body.sf-tdfa [style*="--bx:#E7F7E6" i]:not(#td-none),
html body.sf-tdfa [style*="--bx:#DDF3E8" i]:not(#td-none),
html body.sf-tdfa [style*="--bx:#E0F5E4" i]:not(#td-none) { --bx: var(--td-eucalyptus) !important; --bxa: var(--td-ink) !important; }
html body.sf-tdfa [style*="--bx:#FFF0D9" i]:not(#td-none),
html body.sf-tdfa [style*="--bx:#FFF1DA" i]:not(#td-none),
html body.sf-tdfa [style*="--bx:#FFE6D4" i]:not(#td-none),
html body.sf-tdfa [style*="--bx:#FFF3C9" i]:not(#td-none),
html body.sf-tdfa [style*="--bx:#FFF6CC" i]:not(#td-none) { --bx: var(--td-biscuit) !important; --bxa: var(--td-ink) !important; }
html body.sf-tdfa [style*="--bx:#FFE5E3" i]:not(#td-none),
html body.sf-tdfa [style*="--bx:#FDE4E0" i]:not(#td-none),
html body.sf-tdfa [style*="--bx:#FFE1DD" i]:not(#td-none),
html body.sf-tdfa [style*="--bx:#FFE3DF" i]:not(#td-none),
html body.sf-tdfa [style*="--bx:#FFE6F1" i]:not(#td-none),
html body.sf-tdfa [style*="--bx:#FFE4EE" i]:not(#td-none) { --bx: var(--td-blush) !important; --bxa: var(--td-ink) !important; }

/* Zuki's muted --bx set (what the brand snippet's rules push). */
html body.sf-tdfa [style*="--bx:#B7C5E2" i]:not(#td-none),
html body.sf-tdfa [style*="--bx:#BCC9D6" i]:not(#td-none),
html body.sf-tdfa [style*="--bx:#BBB8DE" i]:not(#td-none) { --bx: var(--td-periwinkle) !important; --bxa: var(--td-ink) !important; }
html body.sf-tdfa [style*="--bx:#E3C78A" i]:not(#td-none),
html body.sf-tdfa [style*="--bx:#E2B58F" i]:not(#td-none) { --bx: var(--td-biscuit) !important; --bxa: var(--td-ink) !important; }
html body.sf-tdfa [style*="--bx:#DDB3C4" i]:not(#td-none) { --bx: var(--td-blush) !important; --bxa: var(--td-ink) !important; }

/* The href-targeted tiles the brand snippet pins by hand. */
html body.sf-tdfa #app a.qtile.zk-qt[href*="hills-science-plan"]:not(#td-none):not(#td-n2) { --bx: var(--td-biscuit) !important; background-color: var(--td-biscuit) !important; }
html body.sf-tdfa #app a.qtile.zk-qt[href*="dry-dog-food"]:not(#td-none):not(#td-n2) { --bx: var(--td-periwinkle) !important; background-color: var(--td-periwinkle) !important; }
html body.sf-tdfa #app a.qtile.zk-qt[href*="dry-cat-food"]:not(#td-none):not(#td-n2) { --bx: var(--td-blush) !important; background-color: var(--td-blush) !important; }
html body.sf-tdfa #app a.qtile.zk-qt[href*="dog-treats"]:not(#td-none):not(#td-n2) { --bx: var(--td-biscuit) !important; background-color: var(--td-biscuit) !important; }
html body.sf-tdfa #app a.qtile.zk-qt[href*="tick-flea"]:not(#td-none):not(#td-n2) { --bx: var(--td-eucalyptus) !important; background-color: var(--td-eucalyptus) !important; }
html body.sf-tdfa #app a.qtile.zk-qt[href*="litter-hygiene"]:not(#td-none):not(#td-n2) { --bx: var(--td-periwinkle) !important; background-color: var(--td-periwinkle) !important; }
html body.sf-tdfa #app a.qtile.zk-qt[href*="specials"]:not(#td-none):not(#td-n2) { --bx: var(--td-blush) !important; background-color: var(--td-blush) !important; }
html body.sf-tdfa #app a.qtile.zk-qt[href*="subscriptions"]:not(#td-none):not(#td-n2) { --bx: var(--td-eucalyptus) !important; background-color: var(--td-eucalyptus) !important; }

/* Mega-menu tile fields: Zuki's rainbow --fld, which the engine leaves alone. */
html body.sf-tdfa .zk-mtiles a.zk-mt:not(#td-none):not(#td-n2):not(#td-n3) { --fld: var(--td-periwinkle) !important; }
html body.sf-tdfa .zk-mtiles a.zk-mt[href*="treats"]:not(#td-none):not(#td-n2):not(#td-n3) { --fld: var(--td-biscuit) !important; }
html body.sf-tdfa .zk-mtiles a.zk-mt[href*="wet-"]:not(#td-none):not(#td-n2):not(#td-n3) { --fld: var(--td-eucalyptus) !important; }
html body.sf-tdfa .zk-mtiles a.zk-mt[href*="litter"]:not(#td-none):not(#td-n2):not(#td-n3),
html body.sf-tdfa .zk-mtiles a.zk-mt[href*="grooming"]:not(#td-none):not(#td-n2):not(#td-n3) { --fld: var(--td-blush) !important; }

/* Hero CTA: cobalt, matching every other buy action on the site. */
html body.sf-tdfa .hx .hx-slide .go:not(#td-none):not(#td-n2):not(#td-n3),
html body.sf-tdfa a.spons .go:not(#td-none):not(#td-n2):not(#td-n3),
html body.sf-tdfa .hx-slide [class*="cta"]:not(#td-none):not(#td-n2):not(#td-n3) {
	background: var(--td-buy) !important;
	background-image: none !important;
	color: #FFFFFF !important;
}
html body.sf-tdfa .hx .hx-slide .go:not(#td-none):not(#td-n2):not(#td-n3) *,
html body.sf-tdfa a.spons .go:not(#td-none):not(#td-n2):not(#td-n3) * { color: #FFFFFF !important; }

/* The engine now maps Zuki's rainbow, so the gold details are pinned back here. */
html body.sf-tdfa .star-rating:not(#td-none):not(#td-n2):not(#td-n3),
html body.sf-tdfa .star-rating:not(#td-none):not(#td-n2):not(#td-n3) span,
html body.sf-tdfa .star-rating:not(#td-none):not(#td-n2):not(#td-n3)::before,
html body.sf-tdfa .rating:not(#td-none):not(#td-n2):not(#td-n3),
html body.sf-tdfa .stars:not(#td-none):not(#td-n2):not(#td-n3),
html body.sf-tdfa .gst:not(#td-none):not(#td-n2):not(#td-n3) { color: var(--td-stars) !important; }