/*
 * 5DayDeal Discounts — 2026 redesign skin.
 *
 * Every rule is scoped to body.fdd-skin-redesign, so the classic look is
 * untouched when the skin is off and nothing here can leak into the admin,
 * the editor or the rest of the site.
 *
 * Colours are the official brand palette (5daydeal.com/about/brand-assets);
 * the green, the inset "pressed" shadows and the pill shapes match the values
 * already in the child theme's discount SCSS.
 */

body.fdd-skin-redesign {
	--fdd-blue: #0d2149;
	--fdd-blue-mid: #033f63;
	--fdd-blue-light: #1d70a6;
	--fdd-orange: #b54f09;
	--fdd-orange-light: #e4572e;
	--fdd-orange-wash: #fbeae0;
	--fdd-yellow: #eca400;
	--fdd-green: #119118;
	--fdd-ink: #3d3d3d;
	--fdd-muted: #606060;
	--fdd-on-dark: #c9d2e0;
	--fdd-line: #e2e2e2;
	--fdd-line-soft: #ececec;
	--fdd-wash: #f8f9fb;

	--fdd-radius-card: 16px;
	--fdd-radius-panel: 20px;
	--fdd-pill: 999px;

	--fdd-lift: 0 16px 32px -12px rgba(30, 20, 10, 0.18);
	--fdd-panel-shadow: 0 4px 20px -8px rgba(13, 33, 73, 0.12);
	--fdd-pressed: inset 0 0 2px rgba(0, 0, 0, 0.3);
}

/* ------------------------------------------------------------------ *
 * Corrections to the theme's own typography
 * ------------------------------------------------------------------ */

/* Kadence is configured to uppercase headings and buttons sitewide. The
   redesign is sentence case throughout — "Discounts from your favorite
   creative brands", "Get This Deal!" — so it is undone here rather than in the
   customizer, which would change the classic pages too. */
body.fdd-skin-redesign .fdd-hero__heading,
body.fdd-skin-redesign .fdd-hero__cta,
body.fdd-skin-redesign .fdd-section-heading,
body.fdd-skin-redesign .fdd-card__title,
body.fdd-skin-redesign .fdd-card__savings,
body.fdd-skin-redesign .fdd-card__cta,
body.fdd-skin-redesign .fdd-card__cta span,
body.fdd-skin-redesign .fdd-surprise__title,
body.fdd-skin-redesign .fdd-testimonials__heading,
body.fdd-skin-redesign .fdd-testimonials__cta {
	text-transform: none;
}

/* ------------------------------------------------------------------ *
 * Section heading
 * ------------------------------------------------------------------ */

body.fdd-skin-redesign .fdd-section-heading {
	margin: 20px 0 24px;
	font-size: 28px;
	font-weight: 700;
	letter-spacing: -0.5px;
	color: var(--fdd-blue);
}

/* The redesign carries brand logos in the stat strip, so the classic
   scroll-to-a-deal logo wall above the grid would be a second one. */
body.fdd-skin-redesign .discount-logos-wrap {
	display: none;
}

/* ------------------------------------------------------------------ *
 * Grid containers
 * ------------------------------------------------------------------ */

/* The design's content width is 1400px. Kadence is set to 1290, which leaves
   four cards about ten pixels short of fitting — hence three across. */
body.fdd-skin-redesign .content-container {
	max-width: 1400px;
}

/* The classic layout forces flex/block with !important, so these have to
   answer in kind. */
body.fdd-skin-redesign .discount-wrapper,
body.fdd-skin-redesign .discount-wrapper--box {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 24px;
	align-items: stretch;
}

body.fdd-skin-redesign .featured-discounts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 20px;
	padding-bottom: 0;
	margin-bottom: 48px;
	border-bottom: 0;
}

/* Four across once there is room for it. minmax(0, 1fr) rather than 1fr so a
   long unbroken product name cannot push its column past its share. */
@media (min-width: 1200px) {
	body.fdd-skin-redesign .discount-wrapper,
	body.fdd-skin-redesign .discount-wrapper--box,
	body.fdd-skin-redesign .featured-discounts {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (min-width: 900px) and (max-width: 1199px) {
	body.fdd-skin-redesign .discount-wrapper,
	body.fdd-skin-redesign .discount-wrapper--box,
	body.fdd-skin-redesign .featured-discounts {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* ------------------------------------------------------------------ *
 * Neutralising the classic card
 *
 * The classic card is still styled by the child theme's discount SCSS, and
 * those rules apply to the same elements the redesign reuses. Anything the
 * redesign does not want has to be turned off by name — declaring only the
 * properties it does want leaves the rest in force. The save badge is the
 * clearest case: classic rotates the container -30deg at a fixed 200x100 and
 * counter-rotates an absolutely positioned inner span, so a badge that only
 * restyled colour and radius came out as a vertical green wedge with the
 * letters stacked down the card.
 * ------------------------------------------------------------------ */

body.fdd-skin-redesign .fdd-card__badge {
	transform: none;
	left: auto;
	top: auto;
	right: auto;
	bottom: auto;
	width: fit-content;
	height: auto;
	margin: 0;
	text-align: center;
	line-height: 1.3;
}

body.fdd-skin-redesign .fdd-card__badge .discount-item__percent-value {
	position: static;
	transform: none;
	left: auto;
	top: auto;
	display: inline;
	font-size: inherit;
	line-height: inherit;
	text-align: inherit;
	text-transform: none;
}

body.fdd-skin-redesign .fdd-card__badge .discount-item__percent-value small {
	font-size: inherit;
	letter-spacing: normal;
}

/* Classic underlines the title and sets it in Helvetica at 1.25em. */
body.fdd-skin-redesign .fdd-card__title {
	display: block;
	border-bottom: 0;
	font-family: inherit;
}

body.fdd-skin-redesign .fdd-card__subheading {
	padding-top: 0;
	font-family: inherit;
}

body.fdd-skin-redesign .fdd-card__desc {
	margin-top: 0;
}

/* Classic pins the footer to 200px wide, centred, with a 15em minimum on
   desktop — the redesign lays it out across the full card. */
body.fdd-skin-redesign .fdd-card__footer {
	min-width: 0;
	max-width: none;
	left: auto;
	right: auto;
	bottom: auto;
	padding-right: 20px;
	margin: 0;
}

/* Classic's CTA is a full-width uppercase block button with a border, an inset
   highlight and a text shadow. */
body.fdd-skin-redesign .fdd-card__cta {
	margin-top: 0;
	font-family: inherit;
	text-shadow: none;
	box-shadow: none;
}

/* Classic dims the coupon and pushes it down a line. */
body.fdd-skin-redesign .fdd-card__code {
	margin-top: 0;
	opacity: 1;
}

/* ------------------------------------------------------------------ *
 * Card
 * ------------------------------------------------------------------ */

body.fdd-skin-redesign .fdd-card {
	position: relative;
	display: flex;
	flex-direction: column;
	/* .discount-item is @extended onto the theme's .display-flex helper, which
	   centres children on both axes; the card stacks and stretches instead. */
	align-items: stretch;
	justify-content: flex-start;
	width: auto !important;
	max-width: none;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--fdd-line-soft);
	border-radius: var(--fdd-radius-card);
	color: var(--fdd-ink);
	transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.5s;
}

/* Category filtering toggles display, so the shown state has to be flex. */
body.fdd-skin-redesign .discount-wrapper .fdd-card {
	display: none;
}

body.fdd-skin-redesign .discount-wrapper .fdd-card.visible {
	display: flex !important; /* the theme sets block !important on .visible; block loses the column layout that pins the footer */
}

body.fdd-skin-redesign .fdd-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--fdd-lift);
}

body.fdd-skin-redesign .fdd-card.expired {
	opacity: 0.6;
}

body.fdd-skin-redesign .fdd-card__link {
	display: flex;
	flex-direction: column;
	flex: 1;
	color: inherit;
	text-decoration: none;
}

body.fdd-skin-redesign .fdd-card__link:hover,
body.fdd-skin-redesign .fdd-card__link:focus {
	color: inherit;
	text-decoration: none;
}

/* The affiliate logo, between the artwork and the title.
   The design's card has no logo, but on a deals site the brand is half the
   decision and the product shot does not always carry it. Here it reads as a
   brand line above the title rather than competing with the save badge or the
   heart, and it survives any image shape. */
/* The brand band sits under the artwork, centred on white. */
body.fdd-skin-redesign .fdd-card .discount-item__logo {
	order: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: auto;
	height: auto;
	padding: 16px 20px;
	background: #fff;
	text-align: center;
}

body.fdd-skin-redesign .fdd-card .discount-item__logo img {
	position: static;
	width: auto;
	max-width: 100%;
	height: 50px;
	max-height: 50px;
	margin: 0 auto;
	object-fit: contain;
	object-position: center;
	transform: none;
	top: auto;
}

/* The featured card: artwork full-bleed, then the brand as a white disc in a
   column to the left of the title and subtitle only — the description and
   everything under it run the full width.
   Laid out with grid rather than different markup, because Foundry Discounts
   renders a featured deal that also lands in the grid from one cached string,
   so both treatments have to come out of identical HTML. The body is given
   display:contents so its own children join the card's grid; that is what lets
   the logo sit beside the title while the description spans both columns. The
   cost is the body's padding and gap, which no longer apply to hoisted
   children — both are reinstated on the grid below. */
body.fdd-skin-redesign .featured-discounts .fdd-card__link {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-content: start;
	row-gap: 8px;
}

body.fdd-skin-redesign .featured-discounts .fdd-card__body {
	display: contents;
}

/* Rows are stated explicitly. The logo is still the first child in the DOM, so
   auto-placement put it in row 1 and pushed the artwork below it. */
body.fdd-skin-redesign .featured-discounts .fdd-card__media {
	grid-row: 1;
	grid-column: 1 / -1;
	margin: 0 0 12px;
	border-radius: 0;
}

body.fdd-skin-redesign .featured-discounts .fdd-card .discount-item__logo {
	grid-row: 2;
	grid-column: 1;
	/* Its row is as tall as the title block, so without this the disc drifts to
	   the middle of it instead of sitting level with the first line. */
	align-self: start;
	justify-content: center;
	/* Pinned in both directions, and min-width reset, or it comes out an oval:
	   its automatic minimum size sizes it to the logo while the logo's own
	   max-width sizes it to the box, and neither ever settles. */
	box-sizing: border-box;
	width: 60px;
	min-width: 60px;
	max-width: 60px;
	height: 60px;
	min-height: 60px;
	margin: 0 0 0 20px;
	padding: 8px;
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.35);
}

body.fdd-skin-redesign .featured-discounts .fdd-card .discount-item__logo img {
	width: auto;
	height: auto;
	max-width: 44px;
	max-height: 44px;
}

body.fdd-skin-redesign .featured-discounts .fdd-card__head {
	grid-row: 2;
	grid-column: 2;
	padding-right: 20px;
	padding-left: 12px;
}

/* Everything below the title block spans both columns and carries the padding
   the body used to provide. */
body.fdd-skin-redesign .featured-discounts .fdd-card__desc,
body.fdd-skin-redesign .featured-discounts .fdd-card__savings,
body.fdd-skin-redesign .featured-discounts .fdd-card__claims {
	grid-column: 1 / -1;
	/* Margin, not padding: the base description rule carries `padding: 0
	   !important` to beat the classic theme's own !important, so padding here
	   would never land. */
	margin-right: 20px;
	margin-left: 20px;
}

body.fdd-skin-redesign .featured-discounts .fdd-card__desc {
	margin-top: 4px;
	margin-right: 20px;
	margin-left: 20px;
}

/* The last of them has to clear the card's bottom edge, which the body's own
   padding used to do. */
body.fdd-skin-redesign .featured-discounts .fdd-card__link {
	padding-bottom: 8px;
}

/* The badge is inside the media now, so it pins to the artwork's corner
   however tall the logo above it turns out to be. */
body.fdd-skin-redesign .fdd-card__media .fdd-card__badge {
	top: 12px;
	left: 12px;
}

/* ---- media ---- */

/* No fixed ratio: the art sets its own height.
   Cropping it to 16:10 cut the edges off these marketing graphics, and fitting
   it inside a 16:10 box instead just moved the problem — anything wider than
   that ratio sat in a letterbox with white bands above and below. Letting the
   image size itself means no crop and no bands, at the cost of cards whose
   images differ in height, which is how the classic card has always behaved. */
/* Artwork first and full-bleed; the card's own 16px radius and overflow round
   its top corners, so it needs no radius of its own. */
body.fdd-skin-redesign .fdd-card__media {
	order: 1;
	position: relative;
	margin: 0;
	overflow: hidden;
	border-radius: 0;
	background: #fff;
	font-size: 0;
	line-height: 0;
}

body.fdd-skin-redesign .fdd-card__media .discount-item__image,
body.fdd-skin-redesign .fdd-card__media .discount-item__image img {
	width: 100%;
	height: auto;
	max-width: none;
	margin: 0;
	padding: 0;
	display: block;
}

/* Was a dark gradient to keep the badge and heart legible over edge-to-edge
   photographs. Now that art is fitted rather than filled, it would only grey
   the letterboxing, so the badge and heart carry their own contrast instead. */
body.fdd-skin-redesign .fdd-card__scrim {
	display: none;
}

/* ---- body ---- */

body.fdd-skin-redesign .fdd-card__body {
	order: 3;
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 8px;
	width: auto;
	padding: 20px;
	text-align: left;
}

body.fdd-skin-redesign .fdd-card__body .discount-item__heading-wrapper {
	min-height: 0;
}

body.fdd-skin-redesign .fdd-card__title {
	min-height: 0 !important;
	margin: 0;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
	color: inherit;
	text-align: left;
}

body.fdd-skin-redesign .fdd-card__subheading {
	margin: 0;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	color: var(--fdd-muted);
}

body.fdd-skin-redesign .fdd-card__desc {
	flex: 1;
	margin: 0;
	padding: 0 !important;
	font-size: 13px;
	line-height: 1.55;
	color: var(--fdd-muted);
	text-align: left;
}

body.fdd-skin-redesign .fdd-card__desc p:last-child {
	margin-bottom: 0;
}

body.fdd-skin-redesign .fdd-card__savings {
	margin: 0;
	font-size: 12px;
	font-weight: 700;
	color: var(--fdd-green);
}

body.fdd-skin-redesign .fdd-card__claims {
	font-size: 11px;
	font-weight: 600;
	color: var(--fdd-muted);
}

/* ---- save badge ---- */

body.fdd-skin-redesign .fdd-card__badge {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	display: inline-flex;
	width: fit-content;
	padding: 4px 10px;
	border-radius: var(--fdd-pill);
	background: var(--fdd-green);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.3;
	text-shadow: -1px -1px rgba(0, 0, 0, 0.2);
	box-shadow: var(--fdd-pressed);
	transition: transform 0.25s ease;
}

body.fdd-skin-redesign .fdd-card__badge .discount-item__percent-value {
	display: inline;
	font-size: inherit;
}

body.fdd-skin-redesign .fdd-card__badge small {
	font-size: inherit;
	text-transform: uppercase;
}

body.fdd-skin-redesign .fdd-card:hover .badge-ribbon {
	transform: rotate(-6deg) scale(1.1);
}

/* ---- favourite ---- */

body.fdd-skin-redesign .fdd-card__fav {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	border-radius: var(--fdd-pill);
	background: rgba(255, 255, 255, 0.9);
	color: var(--fdd-blue);
	/* Reads against pale artwork now that there is no scrim behind it. */
	box-shadow: 0 1px 4px rgba(13, 33, 73, 0.25);
	cursor: pointer;
	transition: background 0.15s ease, transform 0.15s ease;
}

body.fdd-skin-redesign .fdd-card__fav:hover {
	background: #fff;
	transform: scale(1.08);
}

body.fdd-skin-redesign .fdd-card__fav[aria-pressed="true"] {
	color: var(--fdd-orange-light);
}

body.fdd-skin-redesign .fdd-card__fav[aria-pressed="true"] .fdd-icon--heart {
	fill: currentColor;
}

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

body.fdd-skin-redesign .fdd-card__footer {
	position: static !important;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: auto;
	padding: 0 20px 20px;
	text-align: left;
}

/* The countdown gets the full width of the footer and sits above the code and
   the CTA, rather than competing with them for the same row. */
body.fdd-skin-redesign .fdd-card__expires {
	order: -1;
	flex: 0 0 100%;
	/* Label on its own line with the figures under it, both centred. */
	display: block;
	margin: 0 0 4px;
	text-align: center;
}

body.fdd-skin-redesign .fdd-card__expires-label {
	display: block;
	margin-bottom: 2px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: var(--fdd-muted);
}

body.fdd-skin-redesign .fdd-card__footer .discount-countdown,
body.fdd-skin-redesign .fdd-card__footer .discount-item__exp-date {
	margin: 0;
	font-size: 12px;
	color: var(--fdd-muted);
}

/* The theme sizes the clock to its content and left-aligns it; the auto
   margins centre it under its label. Kept after the reset above. */
body.fdd-skin-redesign .fdd-card__footer .discount-countdown {
	justify-content: center;
	margin: 0 auto;
}

/* ---- CTA with the hover text swap ---- */

body.fdd-skin-redesign .fdd-card__cta {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	min-width: 0;
	max-width: none;
	margin-left: auto;
	padding: 9px 16px;
	overflow: hidden;
	border: 0;
	border-radius: var(--fdd-pill);
	background: var(--fdd-blue);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.15s ease;
}

body.fdd-skin-redesign .fdd-card__cta:hover,
body.fdd-skin-redesign .fdd-card__cta:focus {
	color: #fff;
	text-decoration: none;
}

body.fdd-skin-redesign .fdd-card__cta:active {
	box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.5);
}

/* An invisible copy of the longer label holds the width so the swap does not
   resize the button mid-animation. */
body.fdd-skin-redesign .fdd-card__cta-sizer {
	visibility: hidden;
}

body.fdd-skin-redesign .fdd-card__cta .txt1,
body.fdd-skin-redesign .fdd-card__cta .txt2 {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.22s ease, opacity 0.22s ease;
}

body.fdd-skin-redesign .fdd-card__cta .txt2 {
	transform: translateY(100%);
	opacity: 0;
}

body.fdd-skin-redesign .fdd-card:hover .fdd-card__cta .txt1 {
	transform: translateY(-100%);
	opacity: 0;
}

body.fdd-skin-redesign .fdd-card:hover .fdd-card__cta .txt2 {
	transform: translateY(0);
	opacity: 1;
}

/* ---- coupon code chip ---- */

body.fdd-skin-redesign .fdd-card__code {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	width: auto;
	padding: 5px 10px;
	border: 1px dashed var(--fdd-line);
	border-radius: 6px;
	background: transparent;
	color: var(--fdd-muted);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

body.fdd-skin-redesign .fdd-card__code:hover {
	border-color: var(--fdd-blue);
	color: var(--fdd-blue);
}

/* Which half shows is decided by the hidden attribute in the markup, not
   here — see the note on the chip in class-card.php. This rule only colours
   the confirmation. */
body.fdd-skin-redesign .fdd-card__code.is-copied {
	border-color: var(--fdd-green);
	background: rgba(17, 145, 24, 0.08);
	color: var(--fdd-green);
}

body.fdd-skin-redesign .fdd-card__code-icon {
	display: inline-flex;
	flex-shrink: 0;
}

body.fdd-skin-redesign .fdd-card__nocode {
	font-size: 11px;
	font-weight: 600;
	color: var(--fdd-muted);
	opacity: 0.6;
}

/* ---- edit shortcut (logged-in editors) ---- */

/* Kept as the classic corner fold — a #444 ribbon rotated through the corner
   with a small white pencil — so it reads the same as it always has for
   editors. The theme already styles it and the card's own overflow clips it to
   the rounded corner, so nothing here restyles the box.
   Restyling it was the bug: classic is a 200x100 block rotated 45deg with a
   72px top padding, and an override that reset only width, height and
   background left the rotation and the padding in force — a 100px-tall rotated
   box with the pencil adrift near the bottom of it.
   All this needs is to sit above the badge and the heart. */
body.fdd-skin-redesign .fdd-card .discount-item__edit {
	z-index: 4;
}

/* Only editors ever see the fold, and it lands where the heart sits, so the
   heart steps aside for them. */
body.fdd-skin-redesign .fdd-card:has(.discount-item__edit) .fdd-card__fav {
	right: 56px;
}

/* ------------------------------------------------------------------ *
 * Featured block — same markup, dark treatment
 * ------------------------------------------------------------------ */

body.fdd-skin-redesign .featured-discounts .fdd-card {
	background: var(--fdd-blue);
	border-color: transparent;
	color: #fff;
}

body.fdd-skin-redesign .featured-discounts .fdd-card__title {
	color: #fff;
}

body.fdd-skin-redesign .featured-discounts .fdd-card__desc,
body.fdd-skin-redesign .featured-discounts .fdd-card__subheading,
body.fdd-skin-redesign .featured-discounts .fdd-card__claims,
body.fdd-skin-redesign .featured-discounts .fdd-card__nocode,
body.fdd-skin-redesign .featured-discounts .fdd-card__footer .discount-countdown,
body.fdd-skin-redesign .featured-discounts .fdd-card__footer .discount-item__exp-date {
	color: var(--fdd-on-dark);
}

body.fdd-skin-redesign .featured-discounts .fdd-card__scrim,
body.fdd-skin-redesign .featured-discounts .fdd-card__fav {
	display: none;
}

body.fdd-skin-redesign .featured-discounts .fdd-card__cta {
	background: #fff;
	color: var(--fdd-blue);
	font-weight: 700;
}

body.fdd-skin-redesign .featured-discounts .fdd-card__cta:hover,
body.fdd-skin-redesign .featured-discounts .fdd-card__cta:focus {
	color: var(--fdd-blue);
}

body.fdd-skin-redesign .featured-discounts .fdd-card__cta:active {
	box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.35);
}

body.fdd-skin-redesign .featured-discounts .fdd-card__code {
	border-color: rgba(255, 255, 255, 0.5);
	color: var(--fdd-on-dark);
}

body.fdd-skin-redesign .featured-discounts .fdd-card__code:hover {
	border-color: #fff;
	color: #fff;
}

/* ------------------------------------------------------------------ *
 * Surprise deal
 * ------------------------------------------------------------------ */

/* The deal underneath. A blur alone never hid it — at 9px the title and the
   whole description were still plainly readable through a 60%-opaque veil, so
   the card gave its own answer away and the veil's own words landed on top of
   the text they were meant to be covering. The veil is opaque now and does the
   concealing; the blur is what makes the reveal feel like one. */
body.fdd-skin-redesign .fdd-card--surprise .fdd-surprise__hidden {
	filter: blur(16px);
	/* Blurring shrinks content away from its own edges and let the card's
	   white show around it. */
	transform: scale(1.04);
	transition: filter 0.45s ease, transform 0.45s ease;
}

body.fdd-skin-redesign .fdd-card--surprise:hover .fdd-surprise__hidden,
body.fdd-skin-redesign .fdd-card--surprise:focus-within .fdd-surprise__hidden {
	filter: blur(0);
	transform: none;
}

body.fdd-skin-redesign .fdd-surprise__veil {
	position: absolute;
	/* The article is the positioned ancestor, so this covers the footer too —
	   its "Get This Deal!" button used to sit half-visible below the veil. */
	inset: 0;
	z-index: 5;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 24px;
	background:
		radial-gradient( circle at 50% 38%, rgba(255, 209, 102, 0.18), transparent 58% ),
		linear-gradient( 160deg, #16306b 0%, var(--fdd-blue) 55%, #0a1a3d 100% );
	color: #fff;
	text-align: center;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

body.fdd-skin-redesign .fdd-card--surprise:hover .fdd-surprise__veil,
body.fdd-skin-redesign .fdd-card--surprise:focus-within .fdd-surprise__veil {
	opacity: 0;
}

body.fdd-skin-redesign .fdd-surprise__sparkle {
	width: 34px;
	height: 34px;
	color: var(--fdd-yellow);
}

body.fdd-skin-redesign .fdd-surprise__title {
	font-size: 19px;
	font-weight: 700;
	letter-spacing: -0.2px;
}

body.fdd-skin-redesign .fdd-surprise__hint {
	padding: 6px 14px;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: var(--fdd-pill);
	font-size: 12px;
	font-weight: 600;
	color: #fff;
}

/* One prompt or the other, never both. */
body.fdd-skin-redesign .fdd-surprise__hint--tap {
	display: none;
}

@media (hover: none) {
	body.fdd-skin-redesign .fdd-surprise__hint--hover {
		display: none;
	}

	body.fdd-skin-redesign .fdd-surprise__hint--tap {
		display: inline-block;
	}
}

/* ------------------------------------------------------------------ *
 * Filter toolbar
 * ------------------------------------------------------------------ */

/* .fdd-toolbar is created by the script, which moves the category row and the
   search panel into one bar. Without JS the two simply stack, still styled. */
body.fdd-skin-redesign .fdd-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 32px;
	padding: 18px 22px;
	background: #fff;
	border: 1px solid var(--fdd-line-soft);
	border-radius: var(--fdd-radius-card);
	box-shadow: var(--fdd-panel-shadow);
}

body.fdd-skin-redesign .fdd-toolbar .discount-filter {
	flex: 1 1 auto;
	margin: 0;
}

/* The bar sat flush against whatever grid section precedes it. On the home
   page the featured block happened to supply the gap; nothing did on a page
   whose featured row is an ordinary grid section. Margin rather than padding,
   so the card itself keeps its own 18px/22px inset. */
body.fdd-skin-redesign .fdd-toolbar {
	margin-top: 48px;
}

/* Pinned right, and still right once a long pill row pushes it onto its own
   line. */
body.fdd-skin-redesign .fdd-toolbar .discount-panel {
	flex: 0 1 280px;
	margin: 0 0 0 auto;
}

body.fdd-skin-redesign .discount-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	justify-content: flex-start;
	border: 0;
}

/* Category pills, and the favourites pill that matches them. */
body.fdd-skin-redesign .discount-filter__link,
body.fdd-skin-redesign .fdd-filter-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	/* Classic stacks the filter as full-width rows below 767px. The redesign's
	   pills stay inline and wrap at every width. */
	width: auto;
	margin: 0;
	padding: 9px 18px;
	border: 1px solid var(--fdd-line);
	border-radius: var(--fdd-pill);
	background: #fff;
	color: var(--fdd-blue);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
}

body.fdd-skin-redesign .discount-filter__link:hover,
body.fdd-skin-redesign .fdd-filter-pill:hover {
	box-shadow: inset 0 0 6px -1px rgba(0, 0, 0, 0.4);
	text-decoration: none;
}

body.fdd-skin-redesign .discount-filter__link.active,
body.fdd-skin-redesign .fdd-filter-pill[aria-pressed="true"] {
	background: var(--fdd-blue);
	border-color: var(--fdd-blue);
	color: #fff;
	box-shadow: inset 0 0 6px -1px rgba(0, 0, 0, 0.4);
}

body.fdd-skin-redesign .fdd-filter-pill[aria-pressed="true"] .fdd-icon--heart {
	fill: currentColor;
}

body.fdd-skin-redesign .fdd-filter-pill__count {
	padding: 0 6px;
	border-radius: var(--fdd-pill);
	background: rgba(13, 33, 73, 0.1);
	font-size: 11px;
}

body.fdd-skin-redesign .fdd-filter-pill[aria-pressed="true"] .fdd-filter-pill__count {
	background: rgba(255, 255, 255, 0.2);
}

/* Desktop: the whole toolbar on one line. The pills are trimmed a little and
   the search given a fixed, narrower share, because at full size the seven
   category pills plus a 280px field overrun the bar and the search wraps
   underneath. */
@media (min-width: 1200px) {
	body.fdd-skin-redesign .fdd-toolbar {
		flex-wrap: nowrap;
	}

	body.fdd-skin-redesign .fdd-toolbar .discount-filter {
		flex: 1 1 auto;
		flex-wrap: nowrap;
		min-width: 0;
		gap: 8px;
	}

	body.fdd-skin-redesign .discount-filter__link,
	body.fdd-skin-redesign .fdd-filter-pill {
		padding: 8px 13px;
		gap: 5px;
		white-space: nowrap;
	}

	body.fdd-skin-redesign .fdd-toolbar .discount-panel {
		flex: 0 0 240px;
		min-width: 0;
	}

	body.fdd-skin-redesign .discount-search-wrapper {
		min-width: 0;
	}
}

/* The layout-toggle icons have no place in the redesign's single grid. */
body.fdd-skin-redesign .discount-view {
	display: none;
}

/* ---- search field in the toolbar ---- */

/* The search sits in a Bootstrap row/column. Left to shrink-to-fit, the hint
   line under the field sets the column's width and spills back across the
   category pills, so the whole chain is pinned to the panel's own width. */
body.fdd-skin-redesign .discount-panel .row,
body.fdd-skin-redesign .discount-panel [class*="col-md"],
body.fdd-skin-redesign .discount-panel .discount-search {
	width: 100%;
	min-width: 0;
	margin: 0;
	padding: 0;
	float: none;
}

body.fdd-skin-redesign .discount-search-wrapper {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 240px;
	padding: 10px 18px;
	border: 1.5px solid transparent;
	border-radius: var(--fdd-pill);
	background: #f3f3f3;
}

body.fdd-skin-redesign .discount-search__field {
	flex: 1;
	min-width: 0;
	height: auto;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	color: var(--fdd-ink);
	font-size: 14px;
}

body.fdd-skin-redesign .discount-search__field:focus {
	outline: none;
	box-shadow: none;
}

body.fdd-skin-redesign .discount-search-wrapper:focus-within {
	border-color: var(--fdd-blue);
	background: #fff;
}

body.fdd-skin-redesign .discount-search__icon,
body.fdd-skin-redesign .discount-search__close {
	display: inline-flex;
	align-items: center;
	padding: 0;
	border: 0;
	background: none;
	color: var(--fdd-muted);
}

body.fdd-skin-redesign .discount-infobox {
	width: 100%;
	margin-top: 8px;
	font-size: 12px;
	line-height: 1.4;
	text-align: right;
	color: var(--fdd-muted);
}

/* ------------------------------------------------------------------ *
 * Sub-category pills
 *
 * A secondary row under the hero, for the specialities inside the page's
 * categories. Deliberately lighter than the main filter pills — smaller,
 * no icon, a count instead — so the toolbar further down still reads as
 * the primary control and this as a shortcut into it.
 * ------------------------------------------------------------------ */

body.fdd-skin-redesign .fdd-subcats {
	padding: 0 0 8px;
}

/* Once the script has moved the row onto the grid it is a control, not a
   signpost, so it sits tight above the cards it filters. */
body.fdd-skin-redesign .fdd-subcats--placed {
	margin-top: -12px;
	padding-bottom: 20px;
}

body.fdd-skin-redesign .fdd-subcats__heading {
	margin: 0 0 14px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--fdd-muted);
}

body.fdd-skin-redesign .fdd-subcats__row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* Overrides the .discount-filter__link sizing these anchors inherit so the
   grid's own click handler still owns them. */
body.fdd-skin-redesign .fdd-subcats .discount-filter__link.fdd-subcat {
	padding: 7px 14px;
	gap: 8px;
	border-color: var(--fdd-line-soft);
	background: var(--fdd-wash, #f7f8fa);
	font-size: 13px;
	font-weight: 600;
}

body.fdd-skin-redesign .fdd-subcats .discount-filter__link.fdd-subcat > .fdd-icon {
	flex: 0 0 auto;
	opacity: 0.55;
	transition: opacity 0.15s ease;
}

body.fdd-skin-redesign .fdd-subcats .discount-filter__link.fdd-subcat:hover > .fdd-icon,
body.fdd-skin-redesign .fdd-subcats .discount-filter__link.fdd-subcat.active > .fdd-icon {
	opacity: 1;
}

body.fdd-skin-redesign .fdd-subcats .discount-filter__link.fdd-subcat.active {
	background: var(--fdd-blue);
	border-color: var(--fdd-blue);
	color: #fff;
}

/* Ten pills wrapping at phone width is ten stacked rows — taller than the
   hero it is meant to summarise. One swipeable row instead; the scroller is
   contained, so the page itself still never scrolls sideways. */
@media (max-width: 719px) {
	body.fdd-skin-redesign .fdd-subcats__row {
		flex-wrap: nowrap;
		overflow-x: auto;
		scroll-snap-type: x proximity;
		/* Bleed to the screen edges so the row visibly runs off, rather than
		   stopping short and looking like it simply fits. */
		margin: 0 -20px;
		padding: 2px 20px 10px;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	body.fdd-skin-redesign .fdd-subcats__row::-webkit-scrollbar {
		display: none;
	}

	body.fdd-skin-redesign .fdd-subcats .discount-filter__link.fdd-subcat {
		flex: 0 0 auto;
		scroll-snap-align: start;
	}
}

body.fdd-skin-redesign .fdd-subcat__count {
	padding: 0 6px;
	border-radius: var(--fdd-pill);
	background: rgba(13, 33, 73, 0.08);
	font-size: 11px;
	font-weight: 700;
}

body.fdd-skin-redesign .fdd-subcat.active .fdd-subcat__count {
	background: rgba(255, 255, 255, 0.2);
}

/* The active-pill check the classic skin inserts would sit where the icon
   would be; these pills have none, so it only adds a jump. */
body.fdd-skin-redesign .fdd-subcat:hover::before,
body.fdd-skin-redesign .fdd-subcat.active::before {
	content: none;
}

/* ------------------------------------------------------------------ *
 * Hero
 * ------------------------------------------------------------------ */

body.fdd-skin-redesign .fdd-hero {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 56px;
	align-items: center;
	padding: 72px 0 56px;
}

body.fdd-skin-redesign .fdd-hero--text {
	grid-template-columns: 1fr;
	max-width: 780px;
}

body.fdd-skin-redesign .fdd-hero__eyebrow {
	display: inline-block;
	margin-bottom: 20px;
	padding: 6px 12px;
	border-radius: var(--fdd-pill);
	background: var(--fdd-orange-wash);
	color: var(--fdd-orange);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
}

body.fdd-skin-redesign .fdd-hero__heading {
	margin: 0 0 20px;
	font-size: 52px;
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -1px;
	color: var(--fdd-blue);
}

/* The heading's typed second line, for a hero that uses [5dd_hero rotate=""].
 * Its own block so the static half reads as a label above it, and so the
 * phrase swapping underneath never reflows the copy below. The theme's typing
 * effect reserves the width of the longest phrase; the min-height keeps the
 * line from collapsing in the gap between phrases. */
body.fdd-skin-redesign .fdd-hero__rotate {
	display: block;
	min-height: 1.08em;
	color: var(--fdd-orange);
	/* One line, always. At the heading's own size the longest phrase is a few
	 * pixels wider than the column, so it wrapped for part of every cycle and
	 * shoved the paragraph below it down and back. Smaller than the static line
	 * reads as deliberate — and the vw ceiling keeps it inside a phone's column
	 * too, where em alone would still overflow. */
	font-size: min(0.8em, 6vw);
	white-space: nowrap;
}

body.fdd-skin-redesign .fdd-hero__rotate .typed-cursor {
	font-weight: 400;
	color: var(--fdd-orange);
	opacity: 0.6;
}

body.fdd-skin-redesign .fdd-hero__sub {
	max-width: 520px;
	margin: 0 0 28px;
	font-size: 18px;
	line-height: 1.6;
	color: var(--fdd-muted);
}

body.fdd-skin-redesign .fdd-hero__cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 28px;
	border-radius: var(--fdd-pill);
	background: var(--fdd-blue);
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	transition: background 0.15s ease;
}

body.fdd-skin-redesign .fdd-hero__cta:hover,
body.fdd-skin-redesign .fdd-hero__cta:focus {
	background: var(--fdd-blue-mid);
	color: #fff;
	text-decoration: none;
}

body.fdd-skin-redesign .fdd-hero__note {
	max-width: 480px;
	margin-top: 28px;
	font-size: 12px;
	color: var(--fdd-muted);
}

body.fdd-skin-redesign .fdd-hero__media {
	position: relative;
	overflow: hidden;
	border-radius: var(--fdd-radius-panel);
	aspect-ratio: 4 / 3;
}

body.fdd-skin-redesign .fdd-hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ------------------------------------------------------------------ *
 * Header
 *
 * Kadence's header is site-wide and the classic pages still need it as it
 * is, so on redesign pages it steps aside for this one.
 * ------------------------------------------------------------------ */

body.fdd-skin-redesign #masthead,
body.fdd-skin-redesign .site-header {
	display: none;
}

/* The theme opens the content area 48px below the site header; on the skin
   the header IS the first thing on the page, so it meets the top edge. */
body.fdd-skin-redesign .content-area {
	margin-top: 0;
}

/* Full-bleed rule, 1400px of content. The section sits inside the entry
   content, so it has to break out of that column to reach the viewport edges. */
body.fdd-skin-redesign .fdd-header {
	margin-left: calc( 50% - 50vw );
	margin-right: calc( 50% - 50vw );
	width: 100vw;
	max-width: 100vw;
	border-bottom: 1px solid var(--fdd-line);
	background: #fff;
}

body.fdd-skin-redesign .fdd-header__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	max-width: 1400px;
	margin: 0 auto;
	padding: 28px 32px;
}

body.fdd-skin-redesign .fdd-header__logo {
	display: flex;
	align-items: center;
	line-height: 0;
}

body.fdd-skin-redesign .fdd-header__logo {
	flex: 0 0 auto;
	width: 150px;
	height: 36px;
}

/* The theme sizes .custom-logo itself, so the box is pinned here and the
   image made to fill it. */
body.fdd-skin-redesign .fdd-header__logo img {
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	max-height: 100% !important;
	object-fit: contain;
	object-position: left center;
}

body.fdd-skin-redesign .fdd-header__wordmark {
	font-size: 20px;
	font-weight: 700;
	color: var(--fdd-blue);
}

body.fdd-skin-redesign .fdd-header__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 28px;
}

body.fdd-skin-redesign .fdd-header__navlink {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 14px;
	font-weight: 500;
	color: var(--fdd-muted);
	text-decoration: none;
	text-transform: none;
}

/* The category's own icon, the same one its filter pill carries further down.
 * Lighter than the label so the row still reads as words first, and it takes
 * the link's colour on hover along with them. */
body.fdd-skin-redesign .fdd-header__navlink > .fdd-icon {
	flex: 0 0 auto;
	opacity: 0.65;
	transition: opacity 0.15s ease;
}

body.fdd-skin-redesign .fdd-header__navlink:hover > .fdd-icon,
body.fdd-skin-redesign .fdd-header__navlink:focus-visible > .fdd-icon {
	opacity: 1;
}

body.fdd-skin-redesign .fdd-header__navlink::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -4px;
	width: 0;
	height: 2px;
	background: var(--fdd-orange-light);
	transition: width 0.2s ease;
}

body.fdd-skin-redesign .fdd-header__navlink:hover::after,
body.fdd-skin-redesign .fdd-header__navlink:focus-visible::after {
	width: 100%;
}

/* Desktop: logo, nav and search on one line.
 *
 * The row needed 1324px and the viewport is usually 1280, so the search
 * wrapped under the logo on the commonest laptop width — two header rows and
 * a 60px taller page on almost every desktop visit. The six nav labels are
 * what costs the room ("Physical Products" alone is 144px), and they are not
 * ours to shorten, so the space comes off the spacing around them instead:
 * a tighter nav gap, a slightly smaller logo and a narrower search field.
 * That brings the row down to ~1210px, so it holds at 1280 with room spare.
 *
 * Scoped above the 959px breakpoint, where the nav drops to its own full
 * width row and none of this applies.
 */
@media (min-width: 960px) {
	body.fdd-skin-redesign .fdd-header__inner {
		gap: 20px;
		padding-right: 28px;
		padding-left: 28px;
	}

	body.fdd-skin-redesign .fdd-header__logo {
		width: 140px;
	}

	body.fdd-skin-redesign .fdd-header__nav {
		gap: 18px;
		flex-wrap: nowrap;
	}

	body.fdd-skin-redesign .fdd-header__navlink {
		gap: 6px;
		white-space: nowrap;
	}

	body.fdd-skin-redesign .fdd-header__search {
		min-width: 190px;
	}
}

body.fdd-skin-redesign .fdd-header__search {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 220px;
	padding: 10px 18px;
	border: 1.5px solid var(--fdd-blue);
	border-radius: var(--fdd-pill);
	background: #fff;
	box-shadow: 0 2px 6px rgba(13, 33, 73, 0.08);
	color: var(--fdd-blue);
}

body.fdd-skin-redesign .fdd-header__field {
	flex: 1;
	min-width: 0;
	height: auto;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	color: var(--fdd-ink);
	font-size: 14px;
}

body.fdd-skin-redesign .fdd-header__field:focus {
	outline: none;
	box-shadow: none;
}

/* ------------------------------------------------------------------ *
 * Hero brand card: swapping logo cloud over the search pill
 * ------------------------------------------------------------------ */

body.fdd-skin-redesign .fdd-brandcard {
	display: flex;
	flex-direction: column;
	gap: 20px;
	align-self: start;
	padding: 32px;
	background: var(--fdd-wash);
	border: 1px solid var(--fdd-line-soft);
	border-radius: var(--fdd-radius-panel);
}

body.fdd-skin-redesign .fdd-brandcard__eyebrow {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--fdd-muted);
}

/* One panel around the whole cloud rather than a box per logo — the cells are
   just positions within it. max-height is the collapse target and only needs to
   clear the natural height of three rows. */
body.fdd-skin-redesign .fdd-logocloud {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 4px;
	padding: 12px;
	background: #fff;
	border: 1px solid #e6e8ec;
	border-radius: 10px;
	max-height: 360px;
	opacity: 1;
	overflow: hidden;
	transition: max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease,
		padding 0.45s ease, border-width 0.45s ease, margin 0.45s ease;
}

/* Opening the search hands its space to the field. */
body.fdd-skin-redesign .fdd-logocloud.is-collapsed {
	max-height: 0;
	padding-top: 0;
	padding-bottom: 0;
	border-top-width: 0;
	border-bottom-width: 0;
	margin-bottom: -20px;
	opacity: 0;
}

body.fdd-skin-redesign .fdd-logocloud__cell {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 66px;
	padding: 4px;
	overflow: hidden;
	border-radius: 8px;
	transition: background 0.15s ease, transform 0.15s ease;
}

/* No border to light up any more, so hovering lifts the logo and gives it a
   faint ground instead. */
body.fdd-skin-redesign .fdd-logocloud__cell:hover {
	background: #f2f4f8;
	transform: translateY(-2px);
}

body.fdd-skin-redesign .fdd-logocloud__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

/* Drawn at 50px tall and centred. A logo wide enough to hit the cell's width
   first lands shorter than that — the alternative is stretching or cropping
   it, which is worse. */
body.fdd-skin-redesign .fdd-logocloud__inner img {
	width: auto;
	max-width: 100%;
	height: 50px;
	max-height: 100%;
	margin: 0 auto;
	object-fit: contain;
}

body.fdd-skin-redesign .fdd-logocloud__inner.is-swapping {
	animation: fdd-logo-swap 0.55s ease;
}

@keyframes fdd-logo-swap {
	0% {
		opacity: 0;
		filter: blur(6px);
		transform: scale(0.94);
	}
	100% {
		opacity: 1;
		filter: blur(0);
		transform: scale(1);
	}
}

/* ---- the pill itself ---- */

body.fdd-skin-redesign .fdd-pill {
	display: flex;
	align-items: center;
	width: 100%;
	height: 48px;
	padding: 0 20px;
	overflow: hidden;
	white-space: nowrap;
	box-sizing: border-box;
	border: 1.5px solid transparent;
	border-radius: var(--fdd-pill);
	background: var(--fdd-blue);
	color: #fff;
	cursor: pointer;
	transition: background 0.45s ease, color 0.3s ease, border-color 0.3s ease;
}

body.fdd-skin-redesign .fdd-pill.is-open {
	background: #fff;
	border-color: var(--fdd-blue);
	color: var(--fdd-blue);
	cursor: text;
}

body.fdd-skin-redesign .fdd-pill__trigger,
body.fdd-skin-redesign .fdd-pill__field {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1;
	min-width: 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	cursor: inherit;
}

body.fdd-skin-redesign .fdd-pill__label {
	font-size: 14px;
	font-weight: 700;
}

body.fdd-skin-redesign .fdd-pill__input {
	flex: 1;
	min-width: 0;
	height: auto;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	color: inherit;
	font-family: inherit;
	font-size: 14px;
}

body.fdd-skin-redesign .fdd-pill__input:focus {
	outline: none;
	box-shadow: none;
}

/* The pill ships its own clear button, and type="search" makes the browser
   draw one too — two crosses side by side the moment anything is typed. Ours
   stays, because it also collapses the pill back to its label; the native one
   only empties the field. The header's field keeps its native cross: it has no
   button of its own, and the 'search' event that control fires is what clears
   the grid there. */
body.fdd-skin-redesign .fdd-pill__input::-webkit-search-cancel-button,
body.fdd-skin-redesign .fdd-pill__input::-webkit-search-decoration {
	-webkit-appearance: none;
	appearance: none;
}

body.fdd-skin-redesign .fdd-pill__close {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
}

/* ------------------------------------------------------------------ *
 * Stats bar
 * ------------------------------------------------------------------ */

body.fdd-skin-redesign .fdd-stats {
	padding: 20px 0;
	border-top: 1px solid var(--fdd-line);
	border-bottom: 1px solid var(--fdd-line);
}

body.fdd-skin-redesign .fdd-stats__row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
	text-align: center;
}

/* The middle column is divided from its neighbours rather than boxed. */
body.fdd-skin-redesign .fdd-stats__item:nth-child(2) {
	border-left: 1px solid var(--fdd-line);
	border-right: 1px solid var(--fdd-line);
}

body.fdd-skin-redesign .fdd-stats__figure {
	display: block;
	font-size: 36px;
	font-weight: 700;
	letter-spacing: -1px;
	line-height: 1.1;
	color: var(--fdd-blue);
	/* The count-up changes the digits every frame; fixed-width figures stop
	   the number jittering as it runs. */
	font-variant-numeric: tabular-nums;
}

body.fdd-skin-redesign .fdd-stats__label {
	display: block;
	margin-top: 6px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--fdd-muted);
}

body.fdd-skin-redesign .fdd-stats__footnote {
	margin: 0;
	font-size: 12px;
	text-align: center;
	color: var(--fdd-muted);
}

/* ------------------------------------------------------------------ *
 * Testimonials
 * ------------------------------------------------------------------ */

body.fdd-skin-redesign .fdd-testimonials {
	margin: 32px 0 30px;
	padding: 56px 40px;
	background: var(--fdd-wash);
	border: 1px solid var(--fdd-line-soft);
	border-radius: var(--fdd-radius-panel);
	text-align: center;
}

body.fdd-skin-redesign .fdd-testimonials__heading {
	margin: 0 0 12px;
	font-size: 26px;
	font-weight: 700;
	color: var(--fdd-blue);
}

body.fdd-skin-redesign .fdd-testimonials__text {
	margin: 0 0 20px;
	font-size: 15px;
	color: var(--fdd-muted);
}

body.fdd-skin-redesign .fdd-testimonials__cta {
	padding-bottom: 2px;
	border-bottom: 2px solid var(--fdd-orange-light);
	font-size: 15px;
	font-weight: 700;
	color: var(--fdd-blue);
	text-decoration: none;
}

/* ------------------------------------------------------------------ *
 * Header nav and footer links
 * ------------------------------------------------------------------ */

body.fdd-skin-redesign .header-navigation .menu-item > a {
	position: relative;
}

body.fdd-skin-redesign .header-navigation .menu-item > a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -4px;
	width: 0;
	height: 2px;
	background: var(--fdd-orange-light);
	transition: width 0.2s ease;
}

body.fdd-skin-redesign .header-navigation .menu-item > a:hover::after,
body.fdd-skin-redesign .header-navigation .menu-item.current-menu-item > a::after {
	width: 100%;
}

body.fdd-skin-redesign .site-footer a {
	transition: color 0.15s ease;
}

/* ------------------------------------------------------------------ *
 * Confetti
 * ------------------------------------------------------------------ */

.fdd-confetti {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
	pointer-events: none;
	will-change: transform, opacity;
}

.fdd-confetti--round {
	border-radius: 50%;
}

@keyframes fdd-confetti-fall {
	0% {
		transform: translate(0, 0) rotate(var(--r0));
		opacity: 1;
	}
	22% {
		transform: translate(var(--x0), var(--y0)) rotate(var(--r0));
		opacity: 1;
		animation-timing-function: cubic-bezier(0.55, 0.06, 0.68, 0.19);
	}
	85% {
		opacity: 1;
	}
	100% {
		transform: translate(var(--x1), var(--y1)) rotate(var(--r1));
		opacity: 0;
	}
}

/* ------------------------------------------------------------------ *
 * Focus and motion
 * ------------------------------------------------------------------ */

body.fdd-skin-redesign a:focus-visible,
body.fdd-skin-redesign button:focus-visible,
body.fdd-skin-redesign input:focus-visible {
	outline: 2px solid var(--fdd-blue-light);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	body.fdd-skin-redesign .fdd-card,
	body.fdd-skin-redesign .fdd-card__badge,
	body.fdd-skin-redesign .fdd-card__cta .txt1,
	body.fdd-skin-redesign .fdd-card__cta .txt2,
	body.fdd-skin-redesign .fdd-pill,
	body.fdd-skin-redesign .fdd-logocloud,
	body.fdd-skin-redesign .fdd-surprise__hidden,
	body.fdd-skin-redesign .fdd-surprise__veil {
		transition-duration: 0.01ms;
	}

	body.fdd-skin-redesign .fdd-card:hover {
		transform: none;
	}

	body.fdd-skin-redesign .fdd-card:hover .badge-ribbon {
		transform: none;
	}
}

/* ------------------------------------------------------------------ *
 * Narrow screens
 * ------------------------------------------------------------------ */

@media (max-width: 959px) {
	body.fdd-skin-redesign .fdd-hero {
		grid-template-columns: 1fr;
		gap: 32px;
		padding: 40px 0 32px;
	}

	body.fdd-skin-redesign .fdd-hero__heading {
		font-size: 34px;
		letter-spacing: -0.5px;
	}

	body.fdd-skin-redesign .fdd-brandcard {
		padding: 24px;
	}

	body.fdd-skin-redesign .fdd-logocloud {
		padding: 8px;
	}

	body.fdd-skin-redesign .fdd-logocloud__cell {
		height: 52px;
	}

	/* Side borders read as clutter once the stats stack. */
	body.fdd-skin-redesign .fdd-stats__row {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	body.fdd-skin-redesign .fdd-stats__item:nth-child(2) {
		border-left: 0;
		border-right: 0;
		border-top: 1px solid var(--fdd-line);
		border-bottom: 1px solid var(--fdd-line);
		padding: 24px 0;
	}

	body.fdd-skin-redesign .fdd-header__inner {
		gap: 16px;
		padding: 20px;
	}

	body.fdd-skin-redesign .fdd-header__nav {
		order: 3;
		flex-basis: 100%;
		gap: 16px;
	}

	body.fdd-skin-redesign .fdd-header__search {
		min-width: 0;
		flex: 1;
	}

	body.fdd-skin-redesign .fdd-testimonials {
		padding: 40px 20px;
	}

	body.fdd-skin-redesign .discount-wrapper,
	body.fdd-skin-redesign .discount-wrapper--box,
	body.fdd-skin-redesign .featured-discounts {
		gap: 16px;
	}
}

/* ------------------------------------------------------------------ *
 * States driven by the script
 * ------------------------------------------------------------------ */

/* Layered on top of the category filter rather than replacing it, so the two
   compose: "Saved" narrows whatever the category filter is already showing. */
body.fdd-skin-redesign .discount-wrapper.fdd-fav-only .fdd-card.visible:not(.is-favourite) {
	display: none;
}

/* The pill swaps its trigger for a text field; both are laid out with flex,
   which would otherwise beat the hidden attribute. */
body.fdd-skin-redesign .fdd-pill__trigger[hidden],
body.fdd-skin-redesign .fdd-pill__field[hidden],
body.fdd-skin-redesign .fdd-filter-pill[hidden] {
	display: none !important;
}

/* Tapped-open surprise card on touch screens, where there is no hover. */
body.fdd-skin-redesign .fdd-card--surprise.is-revealed .fdd-surprise__hidden {
	filter: blur(0);
	transform: none;
}

body.fdd-skin-redesign .fdd-card--surprise.is-revealed .fdd-surprise__veil {
	opacity: 0;
}

/* ------------------------------------------------------------------ *
 * Category pill: swap the icon for the check, never show both
 *
 * The classic skin marks a chosen pill by *inserting* a circle-check
 * ::before. The redesign already gives every pill its own category icon,
 * so on hover the two stacked up and shoved the label along — a visible
 * jump across the whole row. Here the check takes the icon's place in the
 * flex row at exactly its size, so the pill never changes width.
 * ------------------------------------------------------------------ */
body.fdd-skin-redesign .discount-filter__link:not(.fdd-subcat):hover > .fdd-icon,
body.fdd-skin-redesign .discount-filter__link:not(.fdd-subcat).active > .fdd-icon {
	display: none;
}

body.fdd-skin-redesign .discount-filter__link:not(.fdd-subcat):hover::before,
body.fdd-skin-redesign .discount-filter__link:not(.fdd-subcat).active::before {
	flex: 0 0 auto;
	width: 15px;
	height: 15px;
	margin: 0;
	vertical-align: baseline;
}

/* ------------------------------------------------------------------ *
 * Close the gap above the header
 *
 * Kadence's "content-vertical-padding-show" setting puts a 48px top margin
 * on .content-area. On a normal page that is breathing room under the site
 * header; here the skin's own header is the first thing in the content, so
 * the margin reads as a large empty band above the logo.
 * ------------------------------------------------------------------ */
body.fdd-skin-redesign .content-area {
	margin-top: 0;
}