/* =====================================================================
   Brina Marketplace — Homepage V2 (Stage 6: merchandising layer)
   Styles for the Stage 6 module types rendered by
   inc/brina-home-merchandising.php. Loaded on the front page after
   brina-home-modules.css and built only from the Stage 4 tokens.

     .brina-parent-grid        2–4 parent cards side by side
     .brina-parent-card        large card: header + 2–4 children + CTA
       --tiles                 children are destination mini tiles
       --products              children are shared compact product cards
     .brina-mini-tile          destination tile (image + label + link)
     .brina-card--mini         compact product card inside a parent card
     .brina-directory          "More to Explore" grouped link directory
     .brina-editorial--light   light variant of the Stage 5 editorial band

   Product rails ("Recommended for You", "More to Discover") reuse
   .brina-home-rail; "Best Sellers" reuses the Stage 5 feature layout.
   Desktop / laptop (>= 1201px) is the designed scope; below it a simple
   baseline keeps modules usable. Nothing here targets the header,
   footer, hero or Trust / Support Strip. ":not(#brina-v6)" adds one ID of
   specificity where Stage 4 rules must be overridden.
   ===================================================================== */

/* ---- Parent-card grid ------------------------------------------------- */

.brina-parent-grid {
	display: grid;
	grid-template-columns: repeat(var(--brina-parent-count, 3), minmax(0, 1fr));
	gap: var(--brina-space-4, 16px);
	align-items: stretch;
}

/* ---- Parent card ------------------------------------------------------ */

.brina-parent-card {
	display: flex;
	flex-direction: column;
	gap: var(--brina-space-4, 16px);
	min-width: 0;
	padding: var(--brina-space-5, 20px);
	background: var(--brina-surface, #FFF);
	border: 1px solid var(--brina-line, #E3E7EF);
	border-radius: var(--brina-radius-module, 16px);
	box-shadow: var(--brina-shadow-module, none);
}

.brina-parent-card__header {
	min-width: 0;
}

.brina-parent-card__eyebrow {
	margin: 0 0 4px;
	font-size: var(--brina-fs-meta, 11px);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--brina-accent-strong, #4A3BD6);
}

.brina-parent-card__title {
	margin: 0;
	overflow: hidden;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -.005em;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: var(--brina-text-heading, #172033);
}

.brina-parent-card__text {
	margin: 4px 0 0;
	font-size: 13px;
	line-height: 1.4;
	color: var(--brina-text-muted, #6B7280);
}

.brina-parent-card__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-auto-rows: 1fr;
	gap: var(--brina-space-3, 12px);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Three children sit in one row; two or four use the 2-column grid. */
.brina-parent-card__grid[data-count="3"] {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.brina-parent-card__grid > li {
	display: flex;
	min-width: 0;
	margin: 0;
}

.brina-parent-card__cta {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	gap: 6px;
	margin-top: auto;
	padding: 4px 2px;
	border-radius: 6px;
	font-size: var(--brina-fs-link, 13px);
	font-weight: 600;
	line-height: 1.2;
	color: var(--brina-accent-strong, #4A3BD6);
	text-decoration: none;
}

.brina-parent-card__cta::after {
	content: "\2192" / "";
	transition: transform .16s var(--brina-ease, ease);
}

.brina-parent-card__cta:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---- Best Sellers (Stage 5 feature layout, fed by the page allocation) -- */
/* With only 1–2 supporting cards they stack in one column instead of
   stretching into two tall, mostly empty tiles. */

.brina-m--page-feature .brina-feature__grid:not(:has(> :nth-child(3))) {
	grid-template-columns: minmax(0, 1fr);
}

/* Stacked supporting cards read horizontally: image well left, details right. */
body.home .brina-m--page-feature .brina-feature__grid:not(:has(> :nth-child(3))) > .brina-card--support:not(#brina-v6) {
	flex-direction: row;
	align-items: stretch;
	gap: var(--brina-space-4, 16px);
}

body.home .brina-m--page-feature .brina-feature__grid:not(:has(> :nth-child(3))) > .brina-card--support:not(#brina-v6) .brina-card__media {
	flex: 0 0 44%;
	min-height: 150px;
}

body.home .brina-m--page-feature .brina-feature__grid:not(:has(> :nth-child(3))) > .brina-card--support:not(#brina-v6) .brina-card__body {
	justify-content: center;
	gap: var(--brina-space-2, 8px);
	padding-right: 40px; /* clear of the wishlist heart */
}

body.home .brina-m--page-feature .brina-feature__grid:not(:has(> :nth-child(3))) > .brina-card--support:not(#brina-v6) .brina-card__title {
	font-size: 15px;
	font-weight: 600;
}

body.home .brina-m--page-feature .brina-feature__grid:not(:has(> :nth-child(3))) > .brina-card--support:not(#brina-v6) .brina-card__price {
	margin-top: 0;
	font-size: 17px;
}

/* ---- Destination mini tile -------------------------------------------- */

.brina-mini-tile__link {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: var(--brina-space-2, 8px);
	min-width: 0;
	border-radius: var(--brina-radius-sm, 8px);
	color: var(--brina-text-heading, #172033);
	text-decoration: none;
}

.brina-mini-tile__media {
	display: block;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	background: var(--brina-surface-soft, #F6F7FB);
	border: 1px solid transparent;
	border-radius: var(--brina-radius-sm, 8px);
	transition: border-color .16s var(--brina-ease, ease);
}

.brina-mini-tile__img {
	display: block;
	width: 100%;
	height: 100%;
	padding: 8%;
	object-fit: contain;
	mix-blend-mode: multiply;
	transition: transform .2s var(--brina-ease, ease);
}

.brina-mini-tile__label {
	overflow: hidden;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
	white-space: nowrap;
	text-overflow: ellipsis;
	transition: color .16s var(--brina-ease, ease);
}

.brina-mini-tile__link:hover .brina-mini-tile__media {
	border-color: var(--brina-line-brand, #DDD6FE);
}

.brina-mini-tile__link:is(:hover, :focus-visible) .brina-mini-tile__label {
	color: var(--brina-accent-strong, #4A3BD6);
}

/* ---- Compact product card inside a parent card ------------------------ */
/* Shared renderer (variant "compact"), on a soft image well so the white
   parent card reads as one surface. Scoped under body.home .brina-m to win
   over the Stage 4 compact rules. */

body.home .brina-m .brina-card--mini:not(#brina-v6) {
	--brina-compact-img: 150px;
	flex: 1 1 auto;
	gap: var(--brina-space-2, 8px);
	border-radius: var(--brina-radius-sm, 8px);
}

body.home .brina-m .brina-card--mini:not(#brina-v6) .brina-card__media {
	height: var(--brina-compact-img);
	background: var(--brina-surface-soft, #F6F7FB);
	border: 1px solid transparent;
	border-radius: var(--brina-radius-sm, 8px);
}

body.home .brina-m .brina-card--mini:not(#brina-v6) .brina-card__img {
	width: 100%;
	padding: 6%;
	mix-blend-mode: multiply;
	transition: transform .2s var(--brina-ease, ease);
}

body.home .brina-m .brina-card--mini:not(#brina-v6) .brina-card__title {
	-webkit-line-clamp: 2;
	line-clamp: 2;
	min-height: calc(2em * 1.3);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.3;
}

body.home .brina-m .brina-card--mini:not(#brina-v6) .brina-card__price {
	font-size: 14px;
	font-weight: 700;
}

body.home .brina-m .brina-card--mini:not(#brina-v6) .brina-wishlist {
	top: 4px;
	right: 4px;
}

body.home .brina-m .brina-card--mini:not(#brina-v6):hover .brina-card__media {
	border-color: var(--brina-line-brand, #DDD6FE);
}

/* ---- "More to Explore" directory -------------------------------------- */

.brina-directory {
	display: grid;
	grid-template-columns: repeat(var(--brina-directory-cols, 4), minmax(0, 1fr));
	gap: var(--brina-space-5, 20px) var(--brina-space-6, 24px);
	padding: var(--brina-space-6, 24px) 28px;
	background: var(--brina-surface, #FFF);
	border: 1px solid var(--brina-line, #E3E7EF);
	border-radius: var(--brina-radius-module, 16px);
}

.brina-directory__group {
	min-width: 0;
}

.brina-directory__title {
	margin: 0 0 10px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--brina-line, #E3E7EF);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--brina-text-heading, #172033);
}

.brina-directory__list {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.brina-directory__list > li {
	min-width: 0;
	margin: 0;
}

.brina-directory__link {
	display: inline-block;
	max-width: 100%;
	padding: 4px 2px;
	overflow: hidden;
	border-radius: 6px;
	font-size: 14px;
	line-height: 1.35;
	white-space: nowrap;
	text-overflow: ellipsis;
	vertical-align: top;
	color: var(--brina-text, #111827);
	text-decoration: none;
	transition: color .16s var(--brina-ease, ease);
}

.brina-directory__link:hover {
	color: var(--brina-accent-strong, #4A3BD6);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---- Editorial: light variant ----------------------------------------- */

.brina-editorial--light {
	background:
		radial-gradient(90% 140% at 100% 0%, rgba(91, 76, 240, .10) 0%, rgba(91, 76, 240, 0) 60%),
		var(--brina-surface-brand, #F4F1FF);
	border: 1px solid var(--brina-line-brand, #DDD6FE);
	color: var(--brina-text, #111827);
}

.brina-editorial--light .brina-editorial__eyebrow {
	color: var(--brina-accent-strong, #4A3BD6);
}

.brina-editorial--light .brina-editorial__title {
	color: var(--brina-text-heading, #172033);
}

.brina-editorial--light .brina-editorial__text {
	color: #4B5563;
}

.brina-editorial--light .brina-editorial__cta {
	color: #FFFFFF;
	background: var(--brina-accent, #5B4CF0);
}

.brina-editorial--light .brina-editorial__cta:hover {
	background: var(--brina-accent-strong, #4A3BD6);
}

.brina-editorial--light .brina-editorial__cta:focus-visible {
	outline: none;
	box-shadow: var(--brina-focus, 0 0 0 2px #FFF, 0 0 0 4px #5B4CF0);
}

.brina-editorial--light .brina-editorial__visual svg {
	max-height: 160px;
}

/* ---- Focus ------------------------------------------------------------ */

.brina-parent-card__cta:focus-visible,
.brina-mini-tile__link:focus-visible,
.brina-directory__link:focus-visible {
	outline: none;
	box-shadow: var(--brina-focus, 0 0 0 2px #FFF, 0 0 0 4px #5B4CF0);
}

/* ---- Desktop / laptop (>= 1201px) ------------------------------------- */

@media (min-width: 1201px) and (max-width: 1439.98px) {
	body.home .brina-m .brina-card--mini:not(#brina-v6) {
		--brina-compact-img: 124px;
	}

	.brina-parent-card {
		padding: var(--brina-space-4, 16px);
	}
}

@media (min-width: 1600px) {
	body.home .brina-m .brina-card--mini:not(#brina-v6) {
		--brina-compact-img: 170px;
	}

	.brina-directory {
		padding: 28px 36px;
	}
}

/* ---- Below desktop: usable baseline (not the tablet / phone design) --- */

@media (max-width: 1200.98px) {
	.brina-parent-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.brina-directory {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		padding: 20px;
	}
}

@media (max-width: 767.98px) {
	.brina-parent-grid,
	.brina-directory {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---- Motion ----------------------------------------------------------- */

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.brina-mini-tile__link:hover .brina-mini-tile__img,
	body.home .brina-m .brina-card--mini:hover .brina-card__img {
		transform: scale(1.03);
	}

	.brina-parent-card__cta:hover::after {
		transform: translateX(2px);
	}
}


/* ---- "More ways to shop": cool feature-card family (2026-09-30) ----------
   Owner request: the three parent cards (article.brina-parent-card
   [data-merch=price | brand | category], hook added in
   brina_parent_card()) get muted slate / indigo / ocean-teal layered
   surfaces with a more restrained original artwork than the fragrance
   cards. Background layers only (contained, click-through, no assets).
   Structure, sizes, spacing, radius, tiles, products, images, links and
   typography are unchanged; text that sits directly on the dark card uses
   soft light tones, the light image wells keep their surface. */
body.home .brina-parent-card[data-merch] {
	--brina-text-heading: #F3F6FB;
	--brina-text: #F6F8FC;
	--brina-text-muted: #D6DEEC;
	--brina-promo: #FFC9D3;
	border-color: rgba(255, 255, 255, .08);
	background-repeat: no-repeat;
	background-position: right -4px top 0, 0 0, 0 0, 0 0;
	background-size: min(58%, 270px) auto, 100% 100%, 100% 100%, 100% 100%;
}

/* Shop by price: soft slate-blue, faint radial light, geometric arcs. */
body.home .brina-parent-card[data-merch="price"] {
	background-color: #22344D;
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 160' fill='none'%3E%3Cg stroke='%23fff' stroke-width='1.1' stroke-linecap='round'%3E%3Cpath d='M220 2a150 150 0 0 0-150 150' stroke-opacity='.10'/%3E%3Cpath d='M220 30a122 122 0 0 0-122 122' stroke-opacity='.08'/%3E%3Cpath d='M220 58a94 94 0 0 0-94 94' stroke-opacity='.07'/%3E%3C/g%3E%3Ccircle cx='176' cy='44' r='22' fill='%23fff' fill-opacity='.04'/%3E%3C/svg%3E"),
		radial-gradient(58% 50% at 96% 4%, rgba(150, 182, 226, .22), rgba(150, 182, 226, 0) 70%),
		radial-gradient(65% 55% at 0% 100%, rgba(8, 14, 26, .38), rgba(8, 14, 26, 0) 70%),
		linear-gradient(140deg, #1A2638 0%, #22344D 45%, #2B4462 80%, #263D58 100%);
}

/* Brand spotlight: dusty indigo / muted navy, a soft spotlight. */
body.home .brina-parent-card[data-merch="brand"] {
	background-color: #232A58;
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 160' fill='none'%3E%3Cpath d='M150 0h34l56 160H78Z' fill='%23fff' fill-opacity='.035'/%3E%3Cg stroke='%23fff' stroke-opacity='.11' stroke-width='1.1' stroke-linejoin='round'%3E%3Cpath d='M176 40l16 16-16 16-16-16Z'/%3E%3Cpath d='M196 86l10 10-10 10-10-10Z'/%3E%3C/g%3E%3C/svg%3E"),
		radial-gradient(42% 70% at 80% -8%, rgba(176, 182, 244, .26), rgba(176, 182, 244, 0) 72%),
		radial-gradient(65% 55% at 0% 100%, rgba(10, 10, 30, .38), rgba(10, 10, 30, 0) 70%),
		linear-gradient(145deg, #181C3F 0%, #222A57 45%, #2C356C 80%, #262F60 100%);
}

/* Category spotlight: muted ocean blue / blue-teal, directional light. */
body.home .brina-parent-card[data-merch="category"] {
	background-color: #193B4C;
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 160' fill='none'%3E%3Ccircle cx='160' cy='56' r='48' fill='%23fff' fill-opacity='.045'/%3E%3Ccircle cx='198' cy='96' r='36' fill='%23fff' fill-opacity='.04'/%3E%3Ccircle cx='126' cy='104' r='26' stroke='%23fff' stroke-opacity='.11' stroke-width='1.1'/%3E%3C/svg%3E"),
		radial-gradient(58% 50% at 98% 0%, rgba(150, 196, 226, .18), rgba(150, 196, 226, 0) 70%),
		radial-gradient(65% 60% at 4% 100%, rgba(104, 178, 190, .18), rgba(104, 178, 190, 0) 70%),
		linear-gradient(140deg, #11293A 0%, #183A4C 45%, #1F4C5C 80%, #1B4353 100%);
}

body.home .brina-parent-card[data-merch] .brina-parent-card__eyebrow {
	color: #CBD6F6;
}

body.home .brina-parent-card[data-merch] .brina-parent-card__cta,
body.home .brina-parent-card[data-merch] .brina-mini-tile__link:is(:hover, :focus-visible) .brina-mini-tile__label {
	color: #E0E8FC;
}

/* Product text on the dark card (the shared renderer sets its tokens on the
   card itself below desktop; the discount chip keeps its own light chip). */
body.home .brina-parent-card[data-merch] .brina-card--mini:not(#brina-v6) {
	--brina-ink: #E9EEF7;
	--brina-price: #F6F8FC;
	--brina-muted: #CCD5E4;
	--brina-sale: #FFC9D3;
}

/* Light image wells one layer above the art. */
body.home .brina-parent-card[data-merch] .brina-mini-tile__media,
body.home .brina-parent-card[data-merch] .brina-card--mini:not(#brina-v6) .brina-card__media {
	border-color: rgba(255, 255, 255, .55);
	box-shadow: 0 1px 2px rgba(6, 10, 22, .20), 0 8px 18px -12px rgba(6, 10, 22, .60);
}

body.home .brina-parent-card[data-merch] .brina-mini-tile__link:hover .brina-mini-tile__media,
body.home .brina-parent-card[data-merch] .brina-card--mini:not(#brina-v6):hover .brina-card__media {
	border-color: var(--brina-line-brand, #DDD6FE);
}