/* =====================================================================
   Brina Marketplace — Homepage V2 (Stage 4: surface system)
   Loaded on the front page only, after brina-home-v2.css (Stage 2
   geometry) and brina-product-cards.css (Stage 3 card structure).

   1. Tokens    colour, depth, radius, spacing and type scale. Defined at
                every width so later tablet / phone work can reuse them.
   2. Rules     desktop / laptop only (>= 1201px). Tablet and phone keep
                their Stage 3 appearance until their own stage.

   Hierarchy:  canvas -> module -> card -> image well -> info -> price/promo
   Module types:
     open       heading + cards directly on the canvas (product rails,
                Shop by Department)
     contained  white module surface grouping related tiles (Today's Deals;
                future editorial / category modules: .brina-module)

   Scope and locks: nothing here targets the header (#brx-header), the
   footer (#brx-footer), the hero (#brxe-rrmeoe and descendants) or the
   Trust / Support Strip (#brxe-tmqxli and descendants). The canvas value
   equals the hero section's own background, so the hero is not repainted.
   Bricks writes element styles as #brxe-<id> rules; ":not(#brina-v4)"
   adds one ID of specificity so these rules win without !important.
   ===================================================================== */

/* ---- 1. Tokens ------------------------------------------------------- */

body.home {
	/* Surfaces */
	--brina-canvas: #F4F6F9;          /* page canvas (= hero section background) */
	--brina-surface: #FFFFFF;         /* modules and cards */
	--brina-surface-soft: #F6F7FB;    /* image wells, grouped sub-areas */
	--brina-surface-brand: #F4F1FF;   /* promotional information surface */

	/* Lines */
	--brina-line: #E3E7EF;            /* card / module border */
	--brina-line-strong: #CDD3E0;     /* hover border */
	--brina-line-brand: #DDD6FE;      /* border on brand surfaces */

	/* Text */
	--brina-text: #111827;
	--brina-text-heading: #172033;
	--brina-text-muted: #6B7280;

	/* Accents (existing Brina palette) */
	--brina-accent: #5B4CF0;          /* Brina brand (header --bh-brand) */
	--brina-accent-strong: #4A3BD6;   /* links, hover (header --bh-brand-strong) */
	--brina-navy: #101C3D;            /* header top bar */
	--brina-promo: #C92F55;           /* sale / promotion (header --bh-promo) */
	--brina-promo-strong: #A8244A;
	--brina-promo-soft: #FDEEF2;

	/* Depth */
	--brina-shadow-sm: 0 1px 2px rgba(16, 28, 61, .05);
	--brina-shadow-md: 0 6px 18px rgba(16, 28, 61, .09), 0 1px 3px rgba(16, 28, 61, .06);
	--brina-shadow-module: 0 1px 3px rgba(16, 28, 61, .05), 0 8px 24px rgba(16, 28, 61, .05);
	--brina-focus: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--brina-accent);

	/* Radius */
	--brina-radius-sm: 8px;           /* image wells, buttons, chips */
	--brina-radius-card: 12px;
	--brina-radius-module: 16px;

	/* Spacing scale */
	--brina-space-1: 4px;
	--brina-space-2: 8px;
	--brina-space-3: 12px;
	--brina-space-4: 16px;            /* card gap, heading -> content */
	--brina-space-5: 20px;            /* contained-module padding */
	--brina-space-6: 24px;
	--brina-space-module: 40px;       /* module -> module (Stage 2 value) */

	/* Type scale (Inter, the existing homepage face) */
	--brina-fs-module: 22px;          /* module title */
	--brina-fs-feature: 26px;         /* Today's Deals title */
	--brina-fs-link: 13px;            /* View all / secondary CTA */
	--brina-fs-meta: 11px;            /* brand / context, review meta */
	--brina-fs-title: 13px;           /* product title */
	--brina-fs-price: 15px;           /* current price (standard) */
	--brina-fs-price-deal: 20px;      /* current price (deal) */

	--brina-ease: cubic-bezier(.2, .7, .3, 1);
}

@media (min-width: 1201px) {

	/* ---- 2. Canvas --------------------------------------------------- */

	/* Homepage body sections share one canvas; Stage 2's module gap
	   drives the vertical rhythm. */
	body.home {
		--brina-home-module-gap: var(--brina-space-module);
	}

	body.home .brina-home-section:not(#brina-v4) {
		background-color: var(--brina-canvas);
	}

	/* ---- 3. Module header (open and contained modules) --------------- */

	body.home .brina-home-container:not(.brina-home-deals):not(#brina-v4) {
		row-gap: var(--brina-space-4);
	}

	body.home .brina-home-container:not(.brina-home-deals):not(#brina-v4) > .brxe-div:first-child {
		align-items: baseline;
		gap: var(--brina-space-4);
	}

	body.home .brina-home-container:not(.brina-home-deals):not(#brina-v4) > .brxe-div:first-child > .brxe-heading {
		font-size: var(--brina-fs-module);
		font-weight: 700;
		line-height: 1.25;
		letter-spacing: -.01em;
		color: var(--brina-text-heading);
	}

	/* "View all": secondary, clearly a link, never louder than the title. */
	body.home .brina-home-container:not(.brina-home-deals):not(#brina-v4) > .brxe-div:first-child > a.brxe-text-basic {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		padding: 4px 2px;
		border-radius: 6px;
		font-size: var(--brina-fs-link);
		font-weight: 600;
		line-height: 1.2;
		color: var(--brina-accent-strong);
		text-decoration: none;
	}

	body.home .brina-home-container:not(.brina-home-deals):not(#brina-v4) > .brxe-div:first-child > a.brxe-text-basic::after {
		content: "\2192" / "";
		transition: transform .16s var(--brina-ease);
	}

	body.home .brina-home-container:not(.brina-home-deals):not(#brina-v4) > .brxe-div:first-child > a.brxe-text-basic:hover {
		text-decoration: underline;
		text-underline-offset: 3px;
	}

	body.home .brina-home-container:not(.brina-home-deals):not(#brina-v4) > .brxe-div:first-child > a.brxe-text-basic:focus-visible {
		outline: none;
		box-shadow: var(--brina-focus);
	}

	/* ---- 4. Shop by Department (open module, navigation cards) ------- */

	body.home .brina-home-dept-grid:not(#brina-v4) > a {
		gap: var(--brina-space-2);
		padding: var(--brina-space-2) var(--brina-space-2) var(--brina-space-3);
		background: var(--brina-surface);
		border: 1px solid var(--brina-line);
		border-radius: var(--brina-radius-card);
		box-shadow: var(--brina-shadow-sm);
		text-decoration: none;
		transition: border-color .16s var(--brina-ease), box-shadow .16s var(--brina-ease), transform .16s var(--brina-ease);
	}

	body.home .brina-home-dept-grid:not(#brina-v4) > a > .brxe-div {
		border-radius: var(--brina-radius-sm);
		background: var(--brina-surface-soft);
	}

	body.home .brina-home-dept-grid:not(#brina-v4) > a img {
		mix-blend-mode: multiply;
	}

	/* The label is the destination: centred, navy, and it takes the
	   brand colour on hover / focus (a navigation card, not a product). */
	body.home .brina-home-dept-grid:not(#brina-v4) > a > .brxe-text-basic {
		margin: auto 0;
		padding: 0 var(--brina-space-1);
		font-size: 14px;
		font-weight: 600;
		line-height: 1.3;
		color: var(--brina-text-heading);
		transition: color .16s var(--brina-ease);
	}

	body.home .brina-home-dept-grid:not(#brina-v4) > a:hover {
		border-color: var(--brina-line-brand);
		box-shadow: var(--brina-shadow-md);
	}

	body.home .brina-home-dept-grid:not(#brina-v4) > a:is(:hover, :focus-visible) > .brxe-text-basic {
		color: var(--brina-accent-strong);
	}

	body.home .brina-home-dept-grid:not(#brina-v4) > a:focus-visible {
		outline: none;
		box-shadow: var(--brina-focus);
	}

	/* ---- 5. Product cards (Stage 3 system, restyled via its tokens) --- */

	body.home .brina-card {
		--brina-card-bg: var(--brina-surface);
		--brina-card-line: var(--brina-line);
		--brina-ink: var(--brina-text);
		--brina-muted: var(--brina-text-muted);
		--brina-price: var(--brina-text);
		--brina-sale: var(--brina-promo);
	}

	/* Image well: a soft, predictable region. Product photos are shot on
	   white; multiply lets the well tone show through their white. */
	body.home .brina-card__media {
		background: var(--brina-surface-soft);
	}

	body.home .brina-card__img {
		mix-blend-mode: multiply;
	}

	body.home .brina-card__badge {
		padding: 3px 7px;
		border-radius: 6px;
		font-size: var(--brina-fs-meta);
		font-weight: 700;
		letter-spacing: .01em;
		background: var(--brina-navy);
	}

	body.home .brina-card__badge--sale {
		background: var(--brina-promo);
	}

	/* Prices: current price in ink, sale price in the promo accent,
	   regular price muted and struck through (Woo semantics unchanged). */
	body.home .brina-card__price {
		color: var(--brina-text);
	}

	body.home .brina-card__price ins,
	body.home .brina-card__price ins .woocommerce-Price-amount {
		color: var(--brina-promo);
	}

	body.home .brina-card__price del {
		font-size: .86em;
		font-weight: 500;
		color: var(--brina-text-muted);
	}

	body.home .brina-card__discount {
		padding: 1px 5px;
		border-radius: 4px;
		font-size: var(--brina-fs-meta);
		font-weight: 700;
		color: var(--brina-promo-strong);
		background: var(--brina-promo-soft);
	}

	/* Standard ------------------------------------------------------- */

	body.home .brina-card--standard {
		border-radius: var(--brina-radius-card);
		box-shadow: var(--brina-shadow-sm);
		transition: border-color .16s var(--brina-ease), box-shadow .16s var(--brina-ease), transform .16s var(--brina-ease);
	}

	body.home .brina-card--standard .brina-card__media {
		margin: 6px 6px 0;
		border-radius: var(--brina-radius-sm);
	}

	body.home .brina-card--standard .brina-card__img {
		padding: 6%;
		object-fit: contain;
	}

	body.home .brina-card--standard .brina-card__body {
		gap: 5px;
		padding: 10px 12px 12px;
	}

	body.home .brina-card--standard .brina-card__brand {
		font-size: var(--brina-fs-meta);
		font-weight: 600;
		letter-spacing: .06em;
		text-transform: uppercase;
		color: var(--brina-text-muted);
	}

	body.home .brina-card--standard .brina-card__title {
		font-size: var(--brina-fs-title);
		font-weight: 500;
		line-height: 1.35;
		color: var(--brina-text);
	}

	body.home .brina-card--standard .brina-card__price {
		padding-top: 2px;
		font-size: var(--brina-fs-price);
	}

	/* In a rail where any card shows a discount chip (it wraps below the
	   price), every price block reserves those two lines and aligns to its
	   top, so current prices share one baseline across the row. */
	body.home .brina-rail:has(.brina-card__discount) .brina-card--standard .brina-card__price {
		min-height: calc(var(--brina-fs-price) * 1.25 + 2px + 2px + var(--brina-fs-meta) * 1.25 + 2px + 2px);
		align-content: flex-start;
	}

	/* Wishlist heart (shared component in brina-product-cards.css): only
	   aligned to the inset image well here; no surface of its own. */
	body.home .brina-card--standard .brina-wishlist {
		top: 8px;
		right: 8px;
	}

	body.home .brina-card--deal .brina-wishlist {
		top: 14px;
		right: 14px;
	}

	/* Hover: border emphasis + a little more depth + a 2px lift. */
	body.home :is(.brina-card--standard, .brina-card--deal):hover {
		border-color: var(--brina-line-strong);
		box-shadow: var(--brina-shadow-md);
	}

	/* Keyboard focus: the card ring comes from the product link only, so
	   focusing the wishlist control shows its own ring, not the card's. */
	body.home .brina-card:focus-within {
		outline: none;
	}

	body.home .brina-card:has(.brina-card__link:focus-visible) {
		outline: 2px solid var(--brina-accent);
		outline-offset: 2px;
	}

	/* Deal ------------------------------------------------------------ */

	body.home .brina-card--deal {
		gap: var(--brina-space-3);
		padding: var(--brina-space-3);
		background: var(--brina-surface);
		border: 1px solid var(--brina-line);
		border-radius: var(--brina-radius-card);
		box-shadow: var(--brina-shadow-sm);
		transition: border-color .16s var(--brina-ease), box-shadow .16s var(--brina-ease), transform .16s var(--brina-ease);
	}

	body.home .brina-card--deal .brina-card__media {
		position: relative;
		border-radius: var(--brina-radius-sm);
	}

	body.home .brina-card--deal .brina-card__img {
		padding: 5%;
	}

	body.home .brina-card--deal .brina-card__badge {
		top: 10px;
		left: 10px;
		padding: 5px 9px;
		border-radius: 999px;
		font-size: 13px;
		line-height: 1;
	}

	body.home .brina-card--deal .brina-card__body {
		gap: 6px;
		padding: 0 var(--brina-space-1) var(--brina-space-1);
	}

	body.home .brina-card--deal .brina-card__title {
		font-size: 14px;
		font-weight: 600;
		color: var(--brina-text);
	}

	body.home .brina-card--deal .brina-card__price {
		font-size: var(--brina-fs-price-deal);
		font-weight: 800;
		letter-spacing: -.01em;
	}

	body.home .brina-card--deal .brina-card__price del {
		font-size: 13px;
		letter-spacing: 0;
	}

	body.home .brina-card--deal .brina-card__savings {
		align-self: flex-start;
		padding: 3px 8px;
		border-radius: 999px;
		font-size: 12px;
		font-weight: 700;
		color: var(--brina-promo-strong);
		background: var(--brina-promo-soft);
	}

	/* Compact --------------------------------------------------------- */

	body.home .brina-card--compact {
		gap: 6px;
	}

	body.home .brina-card--compact .brina-card__media {
		display: flex;
		justify-content: center;
		background: var(--brina-surface);
		border: 1px solid var(--brina-line);
		border-radius: var(--brina-radius-sm);
		transition: border-color .16s var(--brina-ease);
	}

	body.home .brina-card--compact .brina-card__img {
		padding: 6px;
	}

	body.home .brina-card--compact .brina-card__title {
		font-size: 12px;
		font-weight: 500;
		color: var(--brina-text);
	}

	body.home .brina-card--compact .brina-card__price {
		font-size: 13px;
		font-weight: 700;
	}

	body.home .brina-card--compact:hover .brina-card__media {
		border-color: var(--brina-line-strong);
	}

	body.home .brina-card--compact:hover .brina-card__link {
		color: var(--brina-accent-strong);
	}

	/* ---- 6. Today's Deals (contained promotional module) ------------- */

	/* The module surface is drawn behind the deals grid and aligned with
	   the container's content edges (the header / rail edges); its content
	   sits one module padding inside. */
	body.home .brina-home-container.brina-home-deals:not(#brina-v4) {
		position: relative;
		isolation: isolate;
		padding: var(--brina-space-5) calc(var(--brina-home-gutter) + var(--brina-space-5));
		gap: var(--brina-space-4);
	}

	body.home .brina-home-container.brina-home-deals:not(#brina-v4)::before {
		content: "";
		position: absolute;
		inset: 0 var(--brina-home-gutter);
		z-index: -1;
		background: var(--brina-surface);
		border: 1px solid var(--brina-line);
		border-radius: var(--brina-radius-module);
		box-shadow: var(--brina-shadow-module);
		pointer-events: none;
	}

	/* Information tile surface, status and CTA: section 8 (all widths). */
	body.home .brina-home-deals #brxe-ukpuxg:not(#brina-v4) {
		font-size: var(--brina-fs-feature);
		font-weight: 800;
		letter-spacing: -.015em;
		color: var(--brina-text-heading);
	}

	/* With a real countdown, the label stays a quiet caption. */
	body.home .brina-home-deals #brxe-gajevv:has(#brxe-ldrsjy) #brxe-dcwqdy:not(#brina-v4) {
		margin-top: var(--brina-space-2);
		font-size: 14px;
		color: var(--brina-text-muted);
	}

	/* "More deals for you": a soft grouped surface; compact items sit on
	   white wells inside it. */
	body.home .brina-home-deals #brxe-dqwssz:not(#brina-v4) {
		padding: var(--brina-space-4);
		row-gap: var(--brina-space-3);
		background: var(--brina-surface-soft);
		border: 1px solid var(--brina-line);
		border-radius: var(--brina-radius-card);
		box-shadow: none;
	}

	body.home .brina-home-deals #brxe-zwtjpj:not(#brina-v4) {
		font-size: 16px;
		font-weight: 700;
		line-height: 1.25;
		color: var(--brina-text-heading);
	}

	body.home .brina-home-deals #brxe-xjdkky:not(#brina-v4) {
		gap: var(--brina-space-3);
	}

	/* ---- 7. Contained module for future sections (Stage 5/6) --------- */

	/* Opt-in: add "brina-module" to a section's .brina-home-container to
	   get the contained white surface aligned with the other modules. */
	body.home .brina-home-container.brina-module:not(#brina-v4) {
		position: relative;
		isolation: isolate;
		padding: var(--brina-space-5) calc(var(--brina-home-gutter) + var(--brina-space-5));
	}

	body.home .brina-home-container.brina-module:not(#brina-v4)::before {
		content: "";
		position: absolute;
		inset: 0 var(--brina-home-gutter);
		z-index: -1;
		background: var(--brina-surface);
		border: 1px solid var(--brina-line);
		border-radius: var(--brina-radius-module);
		box-shadow: var(--brina-shadow-module);
		pointer-events: none;
	}

	/* Category / collection module (Stage 3 renderer) on the new surface. */
	body.home .brina-catmod {
		background: var(--brina-surface);
		border-color: var(--brina-line);
		border-radius: var(--brina-radius-module);
		box-shadow: var(--brina-shadow-module);
	}

	body.home .brina-catmod__title {
		font-size: 18px;
		color: var(--brina-text-heading);
	}

	body.home .brina-catmod__cta {
		color: var(--brina-accent-strong);
	}
}

/* Wide desktops: the square "More deals" tile has room for larger
   compact image wells (82px Stage 3 default below 1600px). */
@media (min-width: 1600px) {
	body.home .brina-home-deals #brxe-dqwssz:not(#brina-v4) .brina-card--compact {
		--brina-compact-img: 98px;
	}
}

/* Motion: a 2px lift only when the user has not asked for reduced motion. */
@media (min-width: 1201px) and (prefers-reduced-motion: no-preference) {
	body.home :is(.brina-card--standard, .brina-card--deal):hover,
	body.home .brina-home-dept-grid:not(#brina-v4) > a:hover {
		transform: translateY(-2px);
	}

	body.home .brina-home-container:not(.brina-home-deals):not(#brina-v4) > .brxe-div:first-child > a.brxe-text-basic:hover::after {
		transform: translateX(2px);
	}
}

@media (prefers-reduced-motion: reduce) {
	body.home .brina-card,
	body.home .brina-card *,
	body.home .brina-home-dept-grid > a,
	body.home .brina-home-dept-grid > a * {
		transition: none !important;
	}
}

/* ---- 8. Today's Deals intro card (pre-Stage-7 polish; all widths) ----

   The deals section's visual anchor: a soft blue -> violet -> blush
   gradient with restrained glow and a decorative price-tag mark, the live
   deal-status chip ("N deals live now", written by brina-home-products.php
   from the catalog), a supporting line and the "Shop all deals" CTA.
   Same grid slot and footprint as before; the product cards beside it are
   untouched. Below 1024px the square slot is too small for any readable
   content (pre-existing clip), so the card spans the deals grid as a
   compact banner and the three product tiles share the row beneath. */

body.home .brina-home-deals #brxe-gajevv:not(#brina-v4) {
	isolation: isolate;
	padding: clamp(18px, 7.5%, 28px);
	row-gap: var(--brina-space-3);
	background:
		radial-gradient(90% 70% at 100% 0%, rgba(244, 194, 222, .8) 0%, rgba(244, 194, 222, 0) 62%),
		radial-gradient(85% 65% at 0% 100%, rgba(178, 202, 255, .85) 0%, rgba(178, 202, 255, 0) 64%),
		linear-gradient(150deg, #D3E0FF 0%, #D9D0FF 44%, #E6D5FA 70%, #F6DAEB 100%);
	border: 1px solid rgba(108, 92, 240, .2);
	border-radius: var(--brina-radius-card);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75), 0 12px 28px -18px rgba(76, 60, 200, .45);
}

/* Decorative glow + price-tag mark (no text, not announced). */
body.home .brina-home-deals #brxe-gajevv:not(#brina-v4)::before,
body.home .brina-home-deals #brxe-gajevv:not(#brina-v4)::after {
	content: "";
	position: absolute;
	z-index: -1;
	pointer-events: none;
}

body.home .brina-home-deals #brxe-gajevv:not(#brina-v4)::before {
	right: -18%;
	bottom: -22%;
	width: 72%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(255, 255, 255, .85), rgba(255, 255, 255, .35) 55%, rgba(255, 255, 255, 0));
}

body.home .brina-home-deals #brxe-gajevv:not(#brina-v4)::after {
	right: 7%;
	bottom: 24%;
	width: min(34%, 118px);
	aspect-ratio: 1;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23FFFFFF' stop-opacity='.95'/%3E%3Cstop offset='1' stop-color='%23FFFFFF' stop-opacity='.55'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M64 10h40a6 6 0 0 1 6 6v40L58 108a8 8 0 0 1-11 0L12 73a8 8 0 0 1 0-11z' fill='url(%23g)' stroke='%237C6CF2' stroke-opacity='.35' stroke-width='2.5' stroke-linejoin='round'/%3E%3Ccircle cx='88' cy='32' r='7' fill='none' stroke='%237C6CF2' stroke-opacity='.45' stroke-width='2.5'/%3E%3Cg fill='none' stroke='%23C92F55' stroke-opacity='.5' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M48 80 72 56'/%3E%3Ccircle cx='50' cy='60' r='4.5'/%3E%3Ccircle cx='70' cy='77' r='4.5'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
	transform: rotate(-8deg);
}

body.home .brina-home-deals #brxe-ukpuxg:not(#brina-v4) {
	letter-spacing: -.015em;
	color: var(--brina-text-heading);
}

/* Status block: deal-status chip + supporting line (no countdown). */
body.home .brina-home-deals #brxe-gajevv:not(:has(#brxe-ldrsjy)) #brxe-dcwqdy:not(#brina-v4) {
	align-self: start;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	width: 100%;
	min-width: 0;
	margin-top: 0;
	font-size: 13px;
	line-height: 1.3;
	white-space: normal;
	color: var(--brina-text-heading);
}

body.home .brina-deals-status {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	max-width: 100%;
	padding: 4px 12px 4px 4px;
	background: rgba(255, 255, 255, .82);
	border: 1px solid rgba(255, 255, 255, .95);
	border-radius: 999px;
	box-shadow: 0 1px 2px rgba(16, 28, 61, .06), 0 4px 12px -6px rgba(76, 60, 200, .3);
	font-weight: 600;
	white-space: nowrap;
}

body.home .brina-deals-status__badge {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: 4px;
	padding: 4px 8px 4px 7px;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--brina-accent) 0%, #8B5CF6 100%);
	font-size: 10.5px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #FFFFFF;
}

body.home .brina-deals-status__badge svg {
	display: block;
	flex: none;
}

body.home .brina-deals-status__text strong {
	font-weight: 800;
	color: var(--brina-accent-strong);
}

body.home .brina-deals-note {
	max-width: 30ch;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.45;
	color: #4B5368;
}

/* "Shop all deals": the card's primary action. */
body.home .brina-home-deals #brxe-mulnqv:not(#brina-v4) {
	align-self: end;
	justify-self: start;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	width: auto;
	padding: 11px 18px;
	border-radius: 999px;
	font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	color: #FFFFFF;
	background: linear-gradient(135deg, var(--brina-accent) 0%, #7B5CF5 100%);
	box-shadow: 0 8px 18px -8px rgba(76, 60, 200, .6);
	text-decoration: none;
	transition: box-shadow .16s var(--brina-ease), filter .16s var(--brina-ease);
}

body.home .brina-home-deals #brxe-mulnqv:not(#brina-v4)::after {
	content: "\2192" / "";
	transition: transform .16s var(--brina-ease);
}

body.home .brina-home-deals #brxe-mulnqv:not(#brina-v4):hover {
	filter: brightness(.92);
	box-shadow: 0 10px 22px -8px rgba(76, 60, 200, .7);
}

body.home .brina-home-deals #brxe-mulnqv:not(#brina-v4):focus-visible {
	outline: none;
	box-shadow: var(--brina-focus);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	body.home .brina-home-deals #brxe-mulnqv:not(#brina-v4):hover::after {
		transform: translateX(2px);
	}
}

@media (prefers-reduced-motion: reduce) {
	body.home .brina-home-deals #brxe-mulnqv:not(#brina-v4),
	body.home .brina-home-deals #brxe-mulnqv:not(#brina-v4)::after {
		transition: none;
	}
}

/* Canvas below 1201px: the same page canvas as desktop, so the lower
   modules no longer sit on the pure-white body. */
@media (max-width: 1200.98px) {
	body.home .brina-home-section:not(#brina-v4) {
		background-color: var(--brina-canvas);
	}
}

/* Laptop-tablet square (1024-1200px, ~230px): tighter type so the
   no-wrap title and chip fit the slot. */
@media (max-width: 1200.98px) {
	body.home .brina-home-deals #brxe-ukpuxg:not(#brina-v4) {
		font-size: 24px;
		font-weight: 800;
	}

	body.home .brina-deals-note {
		font-size: 13px;
	}

	body.home .brina-home-deals #brxe-mulnqv:not(#brina-v4) {
		padding: 10px 16px;
		font-size: 13px;
	}

	/* Small tag beside the CTA, clear of the text. */
	body.home .brina-home-deals #brxe-gajevv:not(#brina-v4)::after {
		right: 14px;
		bottom: 16px;
		width: 46px;
	}
}

/* Below 1024px: full-width banner above the three product tiles. */
@media (max-width: 1023.98px) {
	body.home .brina-home-container.brina-home-deals:not(#brina-v4) {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	body.home .brina-home-deals #brxe-gajevv:not(#brina-v4) {
		grid-column: 1 / -1;
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-rows: none;
		grid-auto-rows: auto;
		align-items: center;
		column-gap: var(--brina-space-6);
		row-gap: 10px;
		height: auto;
		aspect-ratio: auto;
		padding: 22px 24px;
	}

	body.home .brina-home-deals #brxe-gajevv:not(#brina-v4) > * {
		grid-column: 1;
	}

	body.home .brina-home-deals #brxe-gajevv:not(#brina-v4) > #brxe-mulnqv {
		grid-column: 2;
		grid-row: 1 / span 3;
		align-self: center;
	}

	body.home .brina-home-deals #brxe-gajevv:not(#brina-v4)::before {
		right: -6%;
		bottom: -120%;
		width: 42%;
	}

	/* Tag sits just left of the CTA column. */
	body.home .brina-home-deals #brxe-gajevv:not(#brina-v4)::after {
		right: 196px;
		bottom: auto;
		top: 50%;
		width: 80px;
		transform: translateY(-50%) rotate(-8deg);
	}

	body.home .brina-deals-note {
		max-width: 44ch;
	}
}

/* Narrow banner: no room for the tag between text and CTA. */
@media (min-width: 600px) and (max-width: 767.98px) {
	body.home .brina-home-deals #brxe-gajevv:not(#brina-v4)::after {
		display: none;
	}
}

/* Phones: stack the CTA under the status block. */
@media (max-width: 599.98px) {
	body.home .brina-home-deals #brxe-gajevv:not(#brina-v4) {
		grid-template-columns: minmax(0, 1fr);
		padding: 18px;
	}

	body.home .brina-home-deals #brxe-gajevv:not(#brina-v4) > #brxe-mulnqv {
		grid-column: 1;
		grid-row: auto;
		justify-self: start;
		margin-top: 4px;
	}

	body.home .brina-home-deals #brxe-ukpuxg:not(#brina-v4) {
		font-size: 22px;
	}

	body.home .brina-home-deals #brxe-gajevv:not(#brina-v4)::after {
		right: 14px;
		top: 16px;
		width: 60px;
		transform: rotate(-8deg);
	}
}

/* ---- Top Picks feature card --------------------------------------------
   Owner request (2026-09-29): Top Picks only (Bricks section #brxe-ukcnpk).
   The approved deep navy → indigo/violet gradient is one rounded feature
   card aligned with the homepage content boundaries (same inset ::before
   technique as the Deals / module surfaces), and the product cards sit
   inside it with an embedded surface treatment. Colour values, heading and
   "View all" colours are unchanged from the approved band. From 479px up
   only: at ≤478px (Bricks mobile_portrait) the existing layout hides the
   section's content, so nothing is painted there. */
@media (min-width: 479px) {
	body.home #brxe-ukcnpk:not(#brina-v4) > .brina-home-container {
		position: relative;
		isolation: isolate;
	}

	body.home #brxe-ukcnpk:not(#brina-v4) > .brina-home-container::before {
		content: "";
		position: absolute;
		z-index: -1;
		background-color: #141B45;
		background-image: linear-gradient(115deg, #101C3D 0%, #1A1D52 55%, #291F63 100%);
		pointer-events: none;
	}

	body.home #brxe-ukcnpk:not(#brina-v4) .brina-home-container > .brxe-div:first-child > .brxe-heading {
		color: #FFFFFF;
	}

	body.home #brxe-ukcnpk:not(#brina-v4) .brina-home-container > .brxe-div:first-child > a.brxe-text-basic {
		color: #CFC9FF;
	}

	body.home #brxe-ukcnpk:not(#brina-v4) .brina-home-container > .brxe-div:first-child > a.brxe-text-basic:focus-visible {
		outline: none;
		box-shadow: 0 0 0 2px #101C3D, 0 0 0 4px #CFC9FF;
	}

	/* Embedded product cards: softened off-white surface, a faint light
	   edge and a restrained shadow tuned for the dark parent. Colours
	   and shadow only: size, radius, border width and content unchanged. */
	body.home #brxe-ukcnpk:not(#brina-v4) .brina-card--standard {
		--brina-card-bg: #FAFAFD;
		--brina-card-line: rgba(207, 201, 255, .55);
		box-shadow: 0 1px 2px rgba(4, 8, 26, .28), 0 8px 18px -10px rgba(4, 8, 26, .6);
	}
}

/* Tablet / small tablet: card inset = the Deals cards' 24px edge; the
   container's existing 24px padding leaves 18px inside, so product cards
   keep their exact size and position. */
@media (min-width: 479px) and (max-width: 1200px) {
	body.home #brxe-ukcnpk:not(#brina-v4) > .brina-home-container {
		padding-top: 16px;
		padding-bottom: 18px;
	}

	body.home #brxe-ukcnpk:not(#brina-v4) > .brina-home-container::before {
		inset: 0 6px;
		border-radius: var(--brina-radius-card);
	}
}

/* Desktop: card inset = the Deals / module surface edge (gutter); 16px
   inside it the rail starts, so the 7 visible cards narrow slightly. */
@media (min-width: 1201px) {
	body.home #brxe-ukcnpk:not(#brina-v4) > .brina-home-container {
		padding: 18px calc(var(--brina-home-gutter) + 16px) 20px;
	}

	body.home #brxe-ukcnpk:not(#brina-v4) > .brina-home-container::before {
		inset: 0 var(--brina-home-gutter);
		border-radius: var(--brina-radius-module);
	}

	body.home #brxe-ukcnpk:not(#brina-v4) .brina-card--standard:hover {
		border-color: rgba(207, 201, 255, .9);
		box-shadow: 0 2px 4px rgba(4, 8, 26, .3), 0 14px 26px -10px rgba(4, 8, 26, .7);
	}
}

/* ======================================================================
   Homepage polish (2026-09-30): exactly four owner-requested changes.
   CSS only; markup, data, links and order are unchanged. Selectors carry
   an ID-level :not() so they win over the Bricks element styles and the
   later-loading homepage sheets without editing them.
   ====================================================================== */

/* ---- 1. Shop by Department: circular image tiles ----------------------
   Bricks section #brxe-ziuoef, grid .brina-home-dept-grid, tiles a.brxe-block
   (image wrapper .brxe-div + label .brxe-text-basic). The white card look
   is removed; the image wrapper becomes a TRUE circle (aspect-ratio 1/1,
   radius 50%, overflow clipped) with the existing image covering it from
   the centre (object-fit: cover — no distortion; the current assets are
   square or near-square; the images' existing Bricks zoom framing is kept),
   and the unchanged label sits below. At ≤478px
   the existing layout hides this section, so nothing applies there. */
@media (min-width: 479px) {
	body.home #brxe-ziuoef .brina-home-dept-grid > a:not(#brina-v7) {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		gap: 10px;
		height: auto;
		min-height: 0;
		aspect-ratio: auto;
		padding: 4px 2px 6px;
		background: transparent;
		border: 0;
		border-radius: var(--brina-radius-card, 12px);
		box-shadow: none;
		transform: none;
		text-align: center;
		text-decoration: none;
	}

	body.home #brxe-ziuoef .brina-home-dept-grid > a:not(#brina-v7) > .brxe-div {
		flex: 0 0 auto;
		width: min(86%, 164px);
		height: auto;
		aspect-ratio: 1 / 1;
		margin: 0 auto;
		padding: 0;
		overflow: hidden;
		background: var(--brina-surface-soft, #F6F7FB);
		border: 1px solid var(--brina-line, #E3E7EF);
		border-radius: 50%;
		box-shadow: 0 1px 2px rgba(16, 28, 61, .06);
		transition: border-color .16s var(--brina-ease, ease), box-shadow .16s var(--brina-ease, ease);
	}

	body.home #brxe-ziuoef .brina-home-dept-grid > a:not(#brina-v7) > .brxe-div img {
		display: block;
		width: 100%;
		height: 100%;
		max-width: none;
		object-fit: cover;
		object-position: 50% 50%;
		border-radius: 0;
		mix-blend-mode: multiply;
		transition: scale .2s var(--brina-ease, ease);
	}

	body.home #brxe-ziuoef .brina-home-dept-grid > a:not(#brina-v7) > .brxe-text-basic {
		margin: 0;
		padding: 0 2px;
		text-align: center;
	}

	/* Hover: the circle gets a faint brand edge + soft depth; no movement of
	   the tile (the image scales inside its clipped circle). */
	body.home #brxe-ziuoef .brina-home-dept-grid > a:not(#brina-v7):hover {
		transform: none;
		box-shadow: none;
	}

	body.home #brxe-ziuoef .brina-home-dept-grid > a:not(#brina-v7):hover > .brxe-div {
		border-color: var(--brina-line-brand, #DDD6FE);
		box-shadow: 0 6px 16px rgba(16, 28, 61, .10);
	}

	/* Keyboard focus: the ring follows the circle. */
	body.home #brxe-ziuoef .brina-home-dept-grid > a:not(#brina-v7):focus-visible {
		outline: none;
		box-shadow: none;
	}

	body.home #brxe-ziuoef .brina-home-dept-grid > a:not(#brina-v7):focus-visible > .brxe-div {
		box-shadow: var(--brina-focus, 0 0 0 2px #FFF, 0 0 0 4px #5B4CF0);
	}
}

@media (min-width: 479px) and (hover: hover) and (prefers-reduced-motion: no-preference) {
	/* 'scale' composes with the image's existing Bricks zoom transform
	   (kept as the current framing) instead of replacing it. */
	body.home #brxe-ziuoef .brina-home-dept-grid > a:not(#brina-v7):hover > .brxe-div img {
		scale: 1.03;
	}
}

/* Tablet: seven circles in one row would be tiny, so the row becomes a
   balanced, centred 4 + 3 arrangement with larger circles. Desktop (≥1024px)
   keeps the existing single row of seven. */
@media (min-width: 479px) and (max-width: 1023.98px) {
	body.home #brxe-ziuoef .brina-home-dept-grid:not(#brina-v7) {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: flex-start;
		gap: 16px 12px;
	}

	body.home #brxe-ziuoef .brina-home-dept-grid:not(#brina-v7) > a {
		flex: 0 0 calc((100% - 36px) / 4);
		max-width: calc((100% - 36px) / 4);
	}

	body.home #brxe-ziuoef .brina-home-dept-grid > a:not(#brina-v7) > .brxe-div {
		width: min(80%, 116px);
	}
}

/* Small tablets: three per row keeps the circles comfortably large. */
@media (min-width: 479px) and (max-width: 599.98px) {
	body.home #brxe-ziuoef .brina-home-dept-grid:not(#brina-v7) > a {
		flex-basis: calc((100% - 24px) / 3);
		max-width: calc((100% - 24px) / 3);
	}
}

/* ---- 2. Best Sellers: very light blue parent surface ------------------
   Only the outer container (section .brina-m--page-feature > .brina-module);
   the product cards inside are untouched. Desktop re-tints the existing
   inset module surface (::before); below desktop, where the cards sat on
   the page canvas, the same surface is drawn behind the unchanged content
   (inset into the section's own padding, so nothing moves). */
body.home .brina-m--page-feature > .brina-home-container.brina-module:not(#brina-v7) {
	position: relative;
	isolation: isolate;
}

body.home .brina-m--page-feature > .brina-home-container.brina-module:not(#brina-v7)::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: -12px 4px;
	background: linear-gradient(165deg, #E7F1FB 0%, #EEF5FC 55%, #F3F8FD 100%);
	border: 1px solid #D5E3F1;
	border-radius: var(--brina-radius-module, 16px);
	box-shadow: 0 1px 3px rgba(16, 28, 61, .04);
	pointer-events: none;
}

@media (min-width: 1201px) {
	body.home .brina-m--page-feature > .brina-home-container.brina-module:not(#brina-v7)::before {
		inset: 0 var(--brina-home-gutter, 20px);
	}
}

/* ---- 3. Shop by brand: one coordinated muted pastel per tile ----------
   Named brands get their assigned tint (by their brand URL); any other or
   future brand falls back to the same 8-tone cycle by position. Text colour,
   size, layout and hover behaviour are unchanged (hover keeps the tint). */
body.home .brina-brands > li:nth-child(8n+1) > .brina-brand-tile:not(#brina-v7) { --brina-brand-tint: #F3EBDC; --brina-brand-edge: #E3D7C1; }
body.home .brina-brands > li:nth-child(8n+2) > .brina-brand-tile:not(#brina-v7) { --brina-brand-tint: #ECE7FA; --brina-brand-edge: #D9D0F2; }
body.home .brina-brands > li:nth-child(8n+3) > .brina-brand-tile:not(#brina-v7) { --brina-brand-tint: #F9E8EC; --brina-brand-edge: #ECD2D9; }
body.home .brina-brands > li:nth-child(8n+4) > .brina-brand-tile:not(#brina-v7) { --brina-brand-tint: #E3EDF9; --brina-brand-edge: #CCDCF0; }
body.home .brina-brands > li:nth-child(8n+5) > .brina-brand-tile:not(#brina-v7) { --brina-brand-tint: #E6F0E4; --brina-brand-edge: #CEDFCB; }
body.home .brina-brands > li:nth-child(8n+6) > .brina-brand-tile:not(#brina-v7) { --brina-brand-tint: #F8E8DD; --brina-brand-edge: #EAD3C3; }
body.home .brina-brands > li:nth-child(8n+7) > .brina-brand-tile:not(#brina-v7) { --brina-brand-tint: #E0F1EF; --brina-brand-edge: #C7E1DE; }
body.home .brina-brands > li:nth-child(8n+8) > .brina-brand-tile:not(#brina-v7) { --brina-brand-tint: #F2E6F2; --brina-brand-edge: #E1CFE1; }

body.home .brina-brands .brina-brand-tile[href*="/brand/louis-vuitton/"]:not(#brina-v7)       { --brina-brand-tint: #F3EBDC; --brina-brand-edge: #E3D7C1; } /* warm sand */
body.home .brina-brands .brina-brand-tile[href*="/brand/yves-saint-laurent/"]:not(#brina-v7) { --brina-brand-tint: #ECE7FA; --brina-brand-edge: #D9D0F2; } /* pale lavender */
body.home .brina-brands .brina-brand-tile[href*="/brand/chanel/"]:not(#brina-v7)             { --brina-brand-tint: #F9E8EC; --brina-brand-edge: #ECD2D9; } /* soft blush */
body.home .brina-brands .brina-brand-tile[href*="/brand/dior/"]:not(#brina-v7)               { --brina-brand-tint: #E3EDF9; --brina-brand-edge: #CCDCF0; } /* powder blue */
body.home .brina-brands .brina-brand-tile[href*="/brand/gucci/"]:not(#brina-v7)              { --brina-brand-tint: #E6F0E4; --brina-brand-edge: #CEDFCB; } /* muted sage */
body.home .brina-brands .brina-brand-tile[href*="/brand/tom-ford/"]:not(#brina-v7)           { --brina-brand-tint: #F8E8DD; --brina-brand-edge: #EAD3C3; } /* dusty peach */
body.home .brina-brands .brina-brand-tile[href*="/brand/versace/"]:not(#brina-v7)            { --brina-brand-tint: #E0F1EF; --brina-brand-edge: #C7E1DE; } /* mist teal */
body.home .brina-brands .brina-brand-tile[href*="/brand/valentino/"]:not(#brina-v7)          { --brina-brand-tint: #F2E6F2; --brina-brand-edge: #E1CFE1; } /* pale mauve */

body.home .brina-brands .brina-brand-tile:not(#brina-v7) {
	background: var(--brina-brand-tint, var(--brina-surface-soft, #F6F7FB));
	border-color: var(--brina-brand-edge, var(--brina-line, #E3E7EF));
}

body.home .brina-brands .brina-brand-tile:not(#brina-v7):hover {
	border-color: var(--brina-line-brand, #DDD6FE);
}

/* ---- 4. Save what you love: same violet / soft blue / pink character,
   a little richer. Only the background layers and edge get stronger. */
body.home .brina-m--editorial .brina-editorial--light:not(#brina-v7) {
	background:
		radial-gradient(90% 140% at 100% 0%, rgba(91, 76, 240, .18) 0%, rgba(91, 76, 240, 0) 62%),
		radial-gradient(70% 120% at 0% 100%, rgba(214, 120, 196, .10) 0%, rgba(214, 120, 196, 0) 60%),
		radial-gradient(60% 90% at 35% 0%, rgba(110, 140, 240, .08) 0%, rgba(110, 140, 240, 0) 60%),
		#EEE8FF;
	border-color: #D2C8FC;
}