/* ==========================================================================
   Brina homepage — TABLET premium pass (2026-10-03)
   --------------------------------------------------------------------------
   Scope: homepage only (body.home), tablet only (768–1200.98px — the range
   the homepage sheets already treat as "below desktop / above phone").
   Desktop (≥1201px) and phones (≤767px) are untouched by construction:
   every rule below lives inside the tablet media queries.

   Locked and NOT targeted here: top bar, main header, navigation bar
   (#brx-header), and all desktop/base declarations.

   Tablet system
     • One page edge: 24px for every card and every uncarded heading/grid.
     • Section headings 22px/700 (both homepage heading systems).
     • One product-card width for every product rail:
         clamp(176px, 23vw, 216px) — ≈3¾ cards at 768, 5 at 1200;
       rails scroll sideways with snap instead of shrinking cards.
     • Two steps: T1 portrait 768–1023.98px, T2 landscape 1024–1200.98px.

   Selectors carry an ID-level :not(#brina-tab) (the homepage sheets' own
   idiom) so they win over Bricks element styles and the earlier homepage
   sheets without !important.
   ========================================================================== */

@media (min-width: 768px) and (max-width: 1200.98px) {

	/* ---- Page edge: modules 16px → 24px (aligns with hero / deals / Top Picks) */
	body.home .brina-m .brina-m__container:not(#brina-tab) {
		padding-left: 24px;
		padding-right: 24px;
	}

	/* Uncarded surface sections (Shop by Department, New Arrivals): content
	   moves from 42px to the same 24px edge (section 18px + container 6px). */
	body.home #brxe-ziuoef > .brina-home-container:not(#brina-tab),
	body.home #brxe-lhtqok > .brina-home-container:not(#brina-tab) {
		padding-left: 6px;
		padding-right: 6px;
	}

	/* ---- Section headings: one size for both heading systems */
	body.home .brina-home-container:not(.brina-home-deals) > .brxe-div:first-child > .brxe-heading:not(#brina-tab) {
		font-size: 22px;
	}

	/* "View all" links of the surface sections: comfortable touch target. */
	body.home .brina-home-container:not(.brina-home-deals) > .brxe-div:first-child > a.brxe-text-basic:not(#brina-tab) {
		display: inline-flex;
		align-items: center;
		min-height: 32px;
		font-size: 13px;
	}

	/* ---- Trust strip: readable secondary labels */
	body.home #brxe-tlhjzm .brxe-text-basic:not(#brina-tab) {
		font-size: 13px;
	}

	body.home #brxe-tlhjzm .brxe-text-basic + .brxe-text-basic:not(#brina-tab) {
		font-size: 12px;
		line-height: 1.35;
	}

	/* ---- Product rails (Top Picks, New Arrivals, Recommended, More to Discover)
	   One card width; sideways browsing with snap; no page-level overflow. */
	body.home .brina-home-rail:not(#brina-tab),
	body.home .brina-m .brina-rail:not(#brina-tab) {
		display: grid;
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: clamp(176px, 23vw, 216px);
		gap: 16px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x proximity;
		scroll-padding-inline: 0;
		padding-bottom: 6px;
		-webkit-overflow-scrolling: touch;
	}

	body.home .brina-home-rail > *:not(#brina-tab),
	body.home .brina-m .brina-rail > *:not(#brina-tab) {
		min-width: 0;
		scroll-snap-align: start;
	}

	/* ---- More ways to shop: "Shop by price" full width (its three price tiles
	   across, in a 4:3 frame so they stay proportionate), the two spotlights
	   paired below — no orphaned card, no empty quarter, at every tablet width. */
	body.home .brina-parent-grid:not(#brina-tab) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	body.home .brina-parent-grid > :first-child:not(#brina-tab) {
		grid-column: 1 / -1;
	}

	body.home .brina-parent-card--tiles .brina-mini-tile__media:not(#brina-tab) {
		aspect-ratio: 4 / 3;
	}

	/* ---- Footer (homepage, tablet): 3 link columns + full-width subscribe row */
	body.home #brx-footer #brxe-foigfl:not(#brina-tab) {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		column-gap: 32px;
		row-gap: 36px;
	}

	body.home #brx-footer #brxe-foigfl > *:not(#brina-tab) {
		width: auto;
		min-width: 0;
		max-width: none;
	}

	body.home #brx-footer #brxe-luqkcx:not(#brina-tab) {
		grid-column: 1 / -1;
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(300px, 440px);
		column-gap: 40px;
		row-gap: 6px;
		align-items: start;
	}

	body.home #brx-footer #brxe-luqkcx > #brxe-optasf:not(#brina-tab),
	body.home #brx-footer #brxe-luqkcx > #brxe-qwsilc:not(#brina-tab) {
		grid-column: 1;
		margin-bottom: 0;
	}

	body.home #brx-footer #brxe-luqkcx > #brxe-bysczj:not(#brina-tab) {
		grid-column: 2;
		grid-row: 1 / span 2;
		align-self: center;
	}

	/* Subscribe form on one line in the wide row (same arrangement the
	   approved desktop form uses; text, fields and behaviour unchanged). */
	body.home #brx-footer form#brxe-bysczj:not(#brina-tab) {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: stretch;
	}

	body.home #brx-footer form#brxe-bysczj .form-group:first-child:not(#brina-tab) {
		flex: 1 1 0;
		width: auto;
		min-width: 0;
		padding-bottom: 0;
	}

	body.home #brx-footer form#brxe-bysczj .submit-button-wrapper:not(#brina-tab),
	body.home #brx-footer form#brxe-bysczj .submit-button-wrapper .bricks-button:not(#brina-tab) {
		flex: 0 0 auto;
		width: auto;
	}
}

/* ==========================================================================
   T1 — portrait tablet (768–1023.98px)
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1023.98px) {

	/* Shop by Department: centred 4 + 3 with larger circles and labels. */
	body.home #brxe-ziuoef .brina-home-dept-grid > a > .brxe-div:not(#brina-tab) {
		width: min(136px, 100%);
	}

	body.home #brxe-ziuoef .brina-home-dept-grid > a > .brxe-text-basic:not(#brina-tab) {
		font-size: 15px;
	}

	/* Today's Deals: banner, then the two featured deals side by side, then
	   "More deals for you" as a full-width row of four readable items. */
	body.home .brina-home-container.brina-home-deals:not(#brina-tab) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: 12px;                              /* cards → "More deals" (was 20px) */
	}

	/* Keeps banner → featured cards at the original 20px (12px gap + 8px). */
	body.home .brina-home-deals > #brxe-gajevv:not(#brina-tab) {
		margin-bottom: 8px;
	}

	/* Featured deal cards: image area scales with the width instead of
	   growing into a tall square (image stays fully visible, contained). */
	body.home .brina-home-deals .brina-card--deal:not(#brina-tab) {
		aspect-ratio: auto;
	}

	body.home .brina-home-deals .brina-card--deal .brina-card__media:not(#brina-tab) {
		flex: 0 0 auto;
		height: clamp(170px, 22vw, 220px);
	}

	body.home .brina-home-deals .brina-card--deal .brina-card__img:not(#brina-tab) {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}

	/* The Bricks element is a square (aspect-ratio 1/1, height 100%) with a
	   2-row inner grid; as a full-width row it sizes to its content. */
	body.home .brina-home-deals > #brxe-dqwssz:not(#brina-tab) {
		grid-column: 1 / -1;
		height: auto;
		aspect-ratio: auto;
	}

	body.home .brina-home-deals > #brxe-dqwssz > .brx-grid:not(#brina-tab) {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		grid-template-rows: none;
		column-gap: 16px;
	}

	body.home .brina-home-deals > #brxe-dqwssz .brina-card--compact:not(#brina-tab) {
		--brina-compact-img: 72px;
	}

	/* Discovery: three full-width bands, four tiles across each. */
	body.home .brina-collection-grid:not(#brina-tab) {
		grid-template-columns: minmax(0, 1fr);
	}

	body.home .brina-collection-grid .brina-collection__tiles:not(#brina-tab) {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	/* Shop by brand: centred 4 + 3. */
	body.home .brina-brands:not(#brina-tab) {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 12px;
	}

	body.home .brina-brands > *:not(#brina-tab) {
		flex: 0 0 calc((100% - 36px) / 4);
		min-width: 0;
	}

	/* Personalised brands (2026-10-04): tablet shows the visitor's top 4 of
	   the server-ranked list (up to 7 are rendered for desktop). */
	body.home .brina-brands > li:nth-child(n+5):not(#brina-tab) {
		display: none;
	}
}

/* ==========================================================================
   T2 — landscape tablet / small laptop (1024–1200.98px)
   ========================================================================== */
@media (min-width: 1024px) and (max-width: 1200.98px) {

	/* Wider screens: a flatter frame keeps the full-width price card proportionate. */
	body.home .brina-parent-card--tiles .brina-mini-tile__media:not(#brina-tab) {
		aspect-ratio: 16 / 10;
	}

	/* Discovery: the three collections side by side (2×2 tiles each). */
	body.home .brina-collection-grid:not(#brina-tab) {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	/* Shop by brand: the visitor's top 4 in one row. */
	body.home .brina-brands:not(#brina-tab) {
		grid-template-columns: repeat(var(--brina-brand-cols-compact, 4), minmax(0, 1fr));
	}

	body.home .brina-brands > li:nth-child(n+5):not(#brina-tab) {
		display: none;
	}

	/* More to Explore: four columns. */
	body.home .brina-directory:not(#brina-tab) {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* ==========================================================================
   HERO V2 — tablet only (768–1200.98px), homepage only
   --------------------------------------------------------------------------
   Bricks (page 32): section #brxe-rrmeoe › container #brxe-xyleuf ›
   column #brxe-sslspi › banner #brxe-kfsgpp ( text #brxe-pbqaby | visual
   #brxe-uvikcb › slider #brxe-ddiycj ). Trust strip #brxe-tmqxli is NOT
   targeted. Content, links, slides and markup are unchanged.

   Look (owner-approved direction): a dark hero in the tablet HEADER colour
   family (#071a2b → #233444, brina-global-header.css). The text sits in a
   denser left zone (::before, curved top-right/bottom-right transition),
   with one slim gold accent (::after). The right product zone is the
   header's lighter tone with a lighter blue stage: the product photos have
   near-white studio backgrounds, so they are multiplied onto that stage
   (painted per slide — Splide transforms isolate the slides).
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1200.98px) {

	/* Air between the navbar and the hero; no forced container height. */
	body.home #brxe-rrmeoe:not(#brina-tab) {
		padding-top: 16px;
	}

	body.home #brxe-xyleuf:not(#brina-tab) {
		min-height: 0;
	}

	/* The column and banner take the full content width explicitly (the
	   slider does not contribute intrinsic width). */
	body.home #brxe-sslspi:not(#brina-tab) {
		flex: 1 1 auto;
		width: 100%;
		min-width: 0;
	}

	/* ---- Hero surface */
	body.home #brxe-kfsgpp:not(#brina-tab) {
		--hero-text: 46%;                           /* text-zone share */
		--hero-gold: #c9a45c;
		position: relative;
		isolation: isolate;
		display: flex;
		align-items: stretch;
		width: 100%;
		height: auto;
		min-height: clamp(340px, 19.5vw + 190px, 420px);
		margin-bottom: 6px;
		overflow: hidden;
		border: 1px solid rgba(7, 26, 43, 0.85);
		border-radius: 20px;
		background-color: #233444;
		background-image: linear-gradient(90deg, #11253a 0%, #233444 34%, #233444 100%);
		box-shadow:
			0 1px 2px rgba(7, 26, 43, 0.12),
			0 24px 44px -28px rgba(7, 26, 43, 0.55);
	}

	/* Left zone: the header's deep end, with a curved right edge — the
	   lighter base shows through at its top-right and bottom-right. It stops
	   short of the product zone, so it never meets the slider edge. */
	body.home #brxe-kfsgpp:not(#brina-tab)::before {
		content: "";
		position: absolute;
		z-index: 0;
		top: 0;
		bottom: 0;
		left: 0;
		width: calc(var(--hero-text) - 6px);
		background: linear-gradient(165deg, #0c2034 0%, #071a2b 70%);
		border-radius: 0 clamp(80px, 11vw, 132px) clamp(80px, 11vw, 132px) 0 / 0 50% 50% 0;
		pointer-events: none;
	}

	/* Gold accent: one slim vertical line inside the left edge. */
	body.home #brxe-kfsgpp:not(#brina-tab)::after {
		content: "";
		position: absolute;
		z-index: 2;
		top: 24%;
		bottom: 24%;
		left: clamp(18px, 2.2vw, 24px);
		width: 2px;
		border-radius: 2px;
		background: linear-gradient(180deg, rgba(201, 164, 92, 0) 0%, var(--hero-gold) 18%, var(--hero-gold) 82%, rgba(201, 164, 92, 0) 100%);
		pointer-events: none;
	}

	/* ---- Text zone: explicit share of the hero, content never leaves it */
	body.home #brxe-pbqaby:not(#brina-tab) {
		position: relative;
		z-index: 1;
		flex: 0 0 var(--hero-text);
		box-sizing: border-box;
		width: var(--hero-text);
		max-width: var(--hero-text);
		min-width: 0;
		height: auto;
		align-self: stretch;
		justify-content: center;
		gap: 14px;
		padding: clamp(28px, 3.6vw, 44px) clamp(16px, 2.2vw, 28px) clamp(28px, 3.6vw, 44px) clamp(38px, 4.4vw, 48px);
		background: transparent;
	}

	/* Eyebrow: clean uppercase label — no line, dash or icon before it. */
	body.home #brxe-voiraq:not(#brina-tab) {
		display: block;
		align-self: flex-start;
		padding: 0;
		background: transparent;
		border-radius: 0;
		color: #c9d3ea;
		font-size: 12px;
		font-weight: 700;
		line-height: 1.2;
		letter-spacing: 0.16em;
		text-transform: uppercase;
	}

	body.home #brxe-voiraq:not(#brina-tab)::before {
		content: none;
	}

	body.home #brxe-qeqcqc:not(#brina-tab) {
		gap: 0;
		max-width: 100%;
		min-width: 0;
	}

	/* Heading: both lines one size; "Everything you need," (≈10.1em at this
	   tracking) always fits one line inside the zone at every width. */
	body.home #brxe-xestfq:not(#brina-tab),
	body.home #brxe-vgrgwt:not(#brina-tab) {
		max-width: 100%;
		margin: 0;
		padding: 0;
		font-size: clamp(26px, 3.59vw - 1.57px, 34px);
		font-weight: 800;
		line-height: 1.12;
		letter-spacing: -0.015em;
		overflow-wrap: normal;
		text-wrap: balance;
	}

	body.home #brxe-xestfq:not(#brina-tab) {
		color: #f4f6fa;
	}

	body.home #brxe-vgrgwt:not(#brina-tab) {
		color: #b3c1ff;                             /* Brina blue-lavender */
	}

	body.home #brxe-wcxmsq:not(#brina-tab) {
		max-width: 30ch;
		margin: 2px 0 0;
		padding: 0;
		color: #c2cad9;
		font-size: 15px;
		line-height: 1.55;
		font-weight: 500;
	}

	/* CTA: compact Brina indigo, brighter than the hero; same link. */
	body.home #brxe-hiqzhr:not(#brina-tab) {
		align-self: flex-start;
		min-height: 44px;
		margin-top: 6px;
		padding: 0 20px;
		border-radius: 10px;
		box-shadow: 0 10px 22px -12px rgba(91, 61, 245, 0.85);
		transition: background-color 0.15s ease, box-shadow 0.15s ease;
	}

	body.home #brxe-hiqzhr:not(#brina-tab):hover {
		background-color: #6a50ff;
		box-shadow: 0 12px 24px -12px rgba(106, 80, 255, 0.9);
	}

	body.home #brxe-hiqzhr:not(#brina-tab):focus-visible {
		outline: 2px solid #f4f6fa;
		outline-offset: 3px;
	}

	/* ---- Product zone (fills the rest) */
	body.home #brxe-uvikcb:not(#brina-tab) {
		position: relative;
		z-index: 1;
		flex: 1 1 0;
		min-width: 0;
		height: auto;
		align-self: stretch;
		padding: 0;
		background: transparent;
	}

	/* The slider is a layer filling the product zone, so the hero's height
	   comes from its min-height and the text — not from the slider. */
	body.home #brxe-ddiycj:not(#brina-tab) {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		background-color: transparent; /* Bricks slider background #f7f8fa */
	}

	body.home #brxe-ddiycj:not(#brina-tab) .splide__track,
	body.home #brxe-ddiycj:not(#brina-tab) .splide__list {
		height: 100%;
	}

	/* Splide writes an inline "height: 50vh" on every slide from JS; an inline
	   style can only be overridden with !important (tablet scope only).
	   Stage: the header's light tone (#233444) at the edge, rising to a
	   lighter blue field where the products sit. */
	body.home #brxe-ddiycj:not(#brina-tab) .splide__slide {
		height: 100% !important;
		background-color: #233444;
		background-image:
			linear-gradient(90deg, #233444 0%, rgba(35, 52, 68, 0) 16%, rgba(35, 52, 68, 0) 92%, #233444 100%),
			radial-gradient(ellipse 66% 64% at 53% 50%, #c9d0e4 0%, #bfc7dd 54%, #9ba6c0 67%, #66758f 79%, #3a4a61 90%, #233444 100%);
	}

	body.home #brxe-ddiycj:not(#brina-tab) .splide__slide img {
		box-sizing: border-box;
		width: 100%;
		height: 100%;
		padding: 6% 7% 11%;
		object-fit: contain;
		mix-blend-mode: multiply;
		/* Feather the photo's own studio edge into the stage (no rectangle). */
		-webkit-mask-image: radial-gradient(closest-side, #000 82%, transparent 100%);
		mask-image: radial-gradient(closest-side, #000 82%, transparent 100%);
		-webkit-mask-origin: content-box;
		mask-origin: content-box;
		-webkit-mask-clip: content-box;
		mask-clip: content-box;
		-webkit-mask-size: 100% 100%;
		mask-size: 100% 100%;
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
	}

	/* Carousel dots: same count/behaviour, light on the dark edge. */
	body.home #brxe-ddiycj:not(#brina-tab) .splide__pagination__page {
		width: 8px;
		height: 8px;
		margin: 0 4px;
		background-color: rgba(241, 244, 250, 0.38);
		opacity: 1;
	}

	body.home #brxe-ddiycj:not(#brina-tab) .splide__pagination__page.is-active {
		background-color: #f4f6fa;
	}

	body.home #brxe-ddiycj:not(#brina-tab) .splide__pagination__page:focus-visible {
		outline: 2px solid #f4f6fa;
		outline-offset: 2px;
	}

	/* ---- Shop by Department: all seven on one row, smaller circles.
	   One grid column per department; long labels wrap inside their own
	   column. Circle: 78px at 768 → 96px at 1024 → 104px cap. */
	body.home #brxe-ziuoef .brina-home-dept-grid:not(#brina-tab) {
		display: grid;
		grid-template-columns: repeat(7, minmax(0, 1fr));
		align-items: start;
		justify-content: stretch;
		gap: 0 clamp(10px, 1.5vw, 16px);
		padding-bottom: 6px;                        /* Bricks 16px → tighter Departments → Today's Deals (gap 50 → 40px) */
	}

	body.home #brxe-ziuoef .brina-home-dept-grid:not(#brina-tab) > a {
		flex: none;
		width: auto;
		max-width: none;
		min-width: 0;
		gap: 10px;
	}

	body.home #brxe-ziuoef .brina-home-dept-grid > a > .brxe-div:not(#brina-tab) {
		width: clamp(78px, 7.03vw + 24px, 104px);
	}

	body.home #brxe-ziuoef .brina-home-dept-grid > a > .brxe-text-basic:not(#brina-tab) {
		max-width: 100%;
		font-size: clamp(13px, 0.39vw + 10px, 14px);
		line-height: 1.3;
		overflow-wrap: break-word;
		text-wrap: balance;
	}
}

/* Hero — landscape tablet (992–1200): wider product zone (text 43%),
   larger type. */
@media (min-width: 992px) and (max-width: 1200.98px) {
	body.home #brxe-kfsgpp:not(#brina-tab) {
		--hero-text: 43%;
	}

	body.home #brxe-xestfq:not(#brina-tab),
	body.home #brxe-vgrgwt:not(#brina-tab) {
		font-size: clamp(32px, 3.37vw - 1.4px, 38px);
	}
}

/* ==========================================================================
   HERO UNIFIED — tablet only (768–1200.98px), homepage only (2026-10-03)
   --------------------------------------------------------------------------
   Owner refinement of HERO V2: one dark surface edge to edge, no product
   slides on tablet, an abstract right-side composition, and no trust strip.

   • The approved LEFT treatment (linear-gradient(165deg, #0c2034 0%,
     #071a2b 70%) on #071a2b) now paints the whole banner; the separate
     curved left panel (::before) is retired, so there is no dark/light
     division. Text, gold line (::after) and spacing are untouched.
   • The slider #brxe-ddiycj (same slides/dots/Splide config) is shown as a
     floating off-white product card inside the right zone (added later
     the same day at the owner's request).
   • Right zone #brxe-uvikcb: CSS only — blue/violet atmospheric light
     (background), concentric contour arcs with one small gold point
     (::before), one soft glass disc (::after). No images, no text.
   • Trust strip #brxe-tmqxli: display none on tablet (no layout space).
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1200.98px) {

	/* ---- One surface: the approved left gradient across the full hero */
	body.home #brxe-kfsgpp:not(#brina-tab) {
		background-color: #071a2b;
		background-image: linear-gradient(165deg, #0c2034 0%, #071a2b 70%);
	}

	/* Left zone: its approved gradient now IS the hero surface (above), so
	   the separate curved panel is retired — no seam, no dark/light split. */
	body.home #brxe-kfsgpp:not(#brina-tab)::before {
		content: none;
	}

	/* ---- Product card (owner addition): the existing Splide slider
	   #brxe-ddiycj becomes a floating light card centred in the right zone,
	   with dark hero visible on all four sides. Same slides, same Splide
	   options (loop, autoplay 20s, dots); only its box is restyled. */
	body.home #brxe-ddiycj:not(#brina-tab) {
		z-index: 1;
		inset: clamp(16px, 5.5%, 22px);             /* slim dark frame (~18–22px) */
		width: auto;
		height: auto;
		overflow: hidden;
		border: 1px solid rgba(255, 255, 255, 0.55);
		border-radius: 16px;
		background-color: #f6f7fb;
		box-shadow: 0 18px 36px -24px rgba(2, 10, 20, 0.8);
	}

	/* Slides: the card's own off-white (replaces the V2 dark/blue stage). */
	body.home #brxe-ddiycj:not(#brina-tab) .splide__slide {
		background: #f6f7fb;
	}

	/* Image: whole composition visible, never touching the card edge; the
	   photos' near-white studio ground (246–255) multiplies into the card,
	   and a soft 5% edge feather hides the photo rectangle. */
	body.home #brxe-ddiycj:not(#brina-tab) .splide__slide img {
		padding: 7% 8% 13%;
		object-fit: contain;
		mix-blend-mode: multiply;
		-webkit-mask-image:
			linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%),
			linear-gradient(180deg, transparent 0, #000 5%, #000 95%, transparent 100%);
		mask-image:
			linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%),
			linear-gradient(180deg, transparent 0, #000 5%, #000 95%, transparent 100%);
		-webkit-mask-composite: source-in;
		mask-composite: intersect;
	}

	/* Dots: inside the card, compact; neutral inactive, Brina blue active. */
	body.home #brxe-ddiycj:not(#brina-tab) .splide__pagination {
		bottom: 8px;
		padding: 0;
	}

	body.home #brxe-ddiycj:not(#brina-tab) .splide__pagination__page {
		width: 6px;
		height: 6px;
		margin: 0 3px;
		background-color: rgba(15, 23, 42, 0.2);
	}

	body.home #brxe-ddiycj:not(#brina-tab) .splide__pagination__page.is-active {
		background-color: #5b3df5;
		transform: none;
	}

	body.home #brxe-ddiycj:not(#brina-tab) .splide__pagination__page:focus-visible {
		outline: 2px solid #5b3df5;
		outline-offset: 2px;
	}

	/* ---- Right zone: atmospheric light. Below the text layer (z 0 < 1),
	   so nothing here can ever sit over the copy. */
	body.home #brxe-uvikcb:not(#brina-tab) {
		z-index: 0;
		background-color: transparent;
		background-image:
			radial-gradient(ellipse 58% 64% at 60% 44%, rgba(92, 110, 222, 0.30) 0%, rgba(92, 110, 222, 0.11) 46%, rgba(92, 110, 222, 0) 74%),
			radial-gradient(ellipse 46% 52% at 92% 92%, rgba(122, 92, 232, 0.24) 0%, rgba(122, 92, 232, 0) 72%),
			radial-gradient(ellipse 38% 40% at 96% 4%, rgba(120, 150, 255, 0.12) 0%, rgba(120, 150, 255, 0) 70%);
	}

	/* Contour arcs: four concentric 1px rings centred low-right, clipped by
	   the hero edge; one small gold point sits on the second ring, low-left. */
	body.home #brxe-uvikcb:not(#brina-tab)::before {
		content: "";
		position: absolute;
		z-index: 0;
		top: 60%;
		left: 74%;
		height: 172%;
		width: auto;
		aspect-ratio: 1 / 1;
		transform: translate(-50%, -50%);
		border-radius: 50%;
		background-image:
			radial-gradient(circle at 13.35% 63.35%, rgba(214, 180, 112, 0.95) 0, rgba(201, 164, 92, 0.9) 2.5px, rgba(201, 164, 92, 0.22) 4px, rgba(201, 164, 92, 0) 10px),
			radial-gradient(circle closest-side, rgba(179, 193, 255, 0) calc(100% - 1.25px), rgba(179, 193, 255, 0.10) calc(100% - 0.75px), rgba(179, 193, 255, 0.10) 100%, rgba(179, 193, 255, 0) 100%),
			radial-gradient(circle closest-side, rgba(179, 193, 255, 0) calc(78% - 1.25px), rgba(179, 193, 255, 0.16) calc(78% - 0.5px), rgba(179, 193, 255, 0.16) 78%, rgba(179, 193, 255, 0) calc(78% + 0.5px)),
			radial-gradient(circle closest-side, rgba(179, 193, 255, 0) calc(56% - 1.25px), rgba(179, 193, 255, 0.20) calc(56% - 0.5px), rgba(179, 193, 255, 0.20) 56%, rgba(179, 193, 255, 0) calc(56% + 0.5px)),
			radial-gradient(circle closest-side, rgba(179, 193, 255, 0) calc(34% - 1.25px), rgba(179, 193, 255, 0.14) calc(34% - 0.5px), rgba(179, 193, 255, 0.14) 34%, rgba(179, 193, 255, 0) calc(34% + 0.5px));
		pointer-events: none;
	}

	/* Glass disc: a soft translucent surface lit from the top-left, with a
	   hairline rim — depth without a card or a light panel. */
	body.home #brxe-uvikcb:not(#brina-tab)::after {
		content: "";
		position: absolute;
		z-index: 0;
		top: 40%;
		left: 56%;
		height: 64%;
		width: auto;
		aspect-ratio: 1 / 1;
		transform: translate(-50%, -50%);
		border: 1px solid rgba(200, 212, 255, 0.16);
		border-radius: 50%;
		background-image:
			radial-gradient(circle at 30% 26%, rgba(196, 208, 255, 0.20) 0%, rgba(196, 208, 255, 0) 46%),
			linear-gradient(150deg, rgba(132, 148, 255, 0.20) 0%, rgba(91, 61, 245, 0.08) 52%, rgba(7, 26, 43, 0) 100%);
		box-shadow:
			inset 0 1px 0 rgba(255, 255, 255, 0.07),
			0 34px 60px -34px rgba(2, 10, 20, 0.75);
		pointer-events: none;
	}

	/* ---- Trust strip: removed on tablet (no box, no margin, no gap) */
	body.home #brxe-tmqxli:not(#brina-tab) {
		display: none;
	}
}

/* ==========================================================================
   HERO RIGHT COLUMN SIMPLIFICATION — tablet only (768–1200.98px),
   homepage only (2026-10-04, owner request)
   --------------------------------------------------------------------------
   The right zone #brxe-uvikcb becomes clean negative space on the hero's
   existing dark surface and its soft atmospheric light (background kept).
   • Slider card #brxe-ddiycj (card, image, dots) is hidden. It is absolutely
     positioned on tablet, so the column keeps its footprint.
   • Contour rings + gold point (::before) and glass disc (::after) removed.
   Left column #brxe-pbqaby, hero shell and gold line are untouched.
   Desktop (≥1201) and phone (≤767) still show the slider.
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1200.98px) {

	body.home #brxe-ddiycj:not(#brina-tab) {
		display: none;
	}

	body.home #brxe-uvikcb:not(#brina-tab)::before,
	body.home #brxe-uvikcb:not(#brina-tab)::after {
		content: none;
	}
}

/* ==========================================================================
   HERO HEIGHT + RIGHT-SIDE ATMOSPHERE — tablet only (768–1200.98px),
   homepage only (2026-10-04, owner request)
   --------------------------------------------------------------------------
   • Hero min-height +48px: clamp(340px, 19.5vw + 190px, 420px) →
     clamp(388px, 19.5vw + 238px, 468px). The left column is already
     vertically centred (justify-content: center), so its content only
     re-centres; nothing in it is restyled.
   • Right zone #brxe-uvikcb: the blue/violet light now reaches farther right
     and into the bottom-right corner (background, fades to 0 well inside
     the zone's left edge → no seam).
   • Faint white mist: uvikcb::before, low-opacity blurred radials.
   • uvikcb::after stays empty (reserved for the fashion cutout once a
     proper transparent asset is supplied). Slider #brxe-ddiycj stays hidden.
   Layers: hero surface → uvikcb glow (bg) → mist (::before) → text (z 1).
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1200.98px) {

	body.home #brxe-kfsgpp:not(#brina-tab) {
		min-height: clamp(388px, 19.5vw + 238px, 468px);
	}

	body.home #brxe-uvikcb:not(#brina-tab) {
		background-image:
			radial-gradient(ellipse 60% 66% at 62% 46%, rgba(92, 110, 222, 0.30) 0%, rgba(92, 110, 222, 0.12) 46%, rgba(92, 110, 222, 0) 74%),
			radial-gradient(ellipse 78% 92% at 100% 100%, rgba(122, 92, 232, 0.34) 0%, rgba(122, 92, 232, 0.15) 42%, rgba(122, 92, 232, 0) 76%),
			radial-gradient(ellipse 44% 46% at 98% 2%, rgba(120, 150, 255, 0.12) 0%, rgba(120, 150, 255, 0) 70%);
	}

	/* White mist: soft diffused light, never a shape. Blur radius stays well
	   inside the zone; the hero's overflow + radius clip the corner. */
	body.home #brxe-uvikcb:not(#brina-tab)::before {
		content: "";
		position: absolute;
		z-index: 0;
		inset: 6% 2% 0 14%;
		width: auto;
		height: auto;
		aspect-ratio: auto;
		transform: none;
		border: 0;
		border-radius: 0;
		background-image:
			radial-gradient(ellipse 46% 40% at 50% 42%, rgba(236, 240, 255, 0.075) 0%, rgba(236, 240, 255, 0.03) 50%, rgba(236, 240, 255, 0) 100%),
			radial-gradient(ellipse 42% 34% at 78% 78%, rgba(244, 240, 255, 0.07) 0%, rgba(244, 240, 255, 0.025) 55%, rgba(244, 240, 255, 0) 100%),
			radial-gradient(ellipse 30% 22% at 30% 70%, rgba(255, 255, 255, 0.035) 0%, rgba(255, 255, 255, 0) 100%);
		filter: blur(14px);
		pointer-events: none;
	}
}

/* ==========================================================================
   HERO HEIGHT + LEFT CONTENT SCALE — tablet only (768–1200.98px),
   homepage only (2026-10-04, owner request)
   --------------------------------------------------------------------------
   • Hero min-height +24px: clamp(388px, 19.5vw + 238px, 468px) →
     clamp(412px, 19.5vw + 262px, 492px). Right-zone glow and mist are
     percentage-based, so they follow the new bottom edge.
   • Text column wider (46% → 51% portrait, 43% → 48% landscape); the right
     zone keeps ≥ 49% / 52% for the coming product image. Left padding (and
     so the content's left edge) unchanged; right padding slimmer.
   • Same type, weights, colours, wording and button style — only sizes and
     spacing scale up. "Everything you need," stays on one line with
     ≥ 13px spare at every width (≈ 10.43em wide).
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1200.98px) {

	body.home #brxe-kfsgpp:not(#brina-tab) {
		--hero-text: 51%;
		min-height: clamp(412px, 19.5vw + 262px, 492px);
	}

	body.home #brxe-pbqaby:not(#brina-tab) {
		gap: 18px;
		padding-right: clamp(12px, 1.6vw, 20px);
	}

	body.home #brxe-voiraq:not(#brina-tab) {
		font-size: clamp(13px, 0.45vw + 9.5px, 14.5px);
	}

	body.home #brxe-xestfq:not(#brina-tab),
	body.home #brxe-vgrgwt:not(#brina-tab) {
		font-size: clamp(29px, 3.88vw - 0.8px, 38px);
	}

	body.home #brxe-wcxmsq:not(#brina-tab) {
		max-width: 34ch;
		margin-top: 10px;
		font-size: clamp(16px, 0.45vw + 12.5px, 17px);
	}

	body.home #brxe-hiqzhr:not(#brina-tab) {
		min-height: 50px;
		margin-top: 8px;
		padding: 0 26px;
		font-size: 15px;
	}
}

@media (min-width: 992px) and (max-width: 1200.98px) {

	body.home #brxe-kfsgpp:not(#brina-tab) {
		--hero-text: 48%;
	}

	body.home #brxe-pbqaby:not(#brina-tab) {
		gap: 20px;
	}

	body.home #brxe-xestfq:not(#brina-tab),
	body.home #brxe-vgrgwt:not(#brina-tab) {
		font-size: clamp(36px, 3.37vw + 2.6px, 42px);
	}

	body.home #brxe-hiqzhr:not(#brina-tab) {
		min-height: 52px;
		padding: 0 28px;
		font-size: 16px;
	}
}

/* ==========================================================================
   HERO VERTICAL SPACING POLISH + ACCENT LINE — tablet only
   (768–1200.98px), homepage only (2026-10-04, owner request)
   --------------------------------------------------------------------------
   Spacing only — no font, width, height or colour change. Each step is
   tuned on its own. Column gap 18/20 (eyebrow → wrapper) stays; the
   headline, description and button share wrapper #brxe-qeqcqc (gap 0),
   so their steps are margins:
     eyebrow → headline      18 → 28px   (992+: 20 → 30)   margin-bottom 10
     headline → description  10 → 22px   (992+: 10 → 24)   margin-top
     description → button     8 → 28px   (992+:  8 → 30)   margin-top
   The group stays centred by the existing justify-content: center.
   Gold accent line (kfsgpp::after): top/bottom 24% → 21%, i.e. slightly
   longer; colour, 2px width and left position unchanged.
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1200.98px) {

	body.home #brxe-voiraq:not(#brina-tab) {
		margin-bottom: 10px;
	}

	body.home #brxe-wcxmsq:not(#brina-tab) {
		margin-top: 22px;
	}

	body.home #brxe-hiqzhr:not(#brina-tab) {
		margin-top: 28px;
	}

	body.home #brxe-kfsgpp:not(#brina-tab)::after {
		top: 21%;
		bottom: 21%;
	}
}

@media (min-width: 992px) and (max-width: 1200.98px) {

	body.home #brxe-wcxmsq:not(#brina-tab) {
		margin-top: 24px;
	}

	body.home #brxe-hiqzhr:not(#brina-tab) {
		margin-top: 30px;
	}
}

/* ==========================================================================
   HERO FASHION IMAGE — tablet only (768–1200.98px), homepage only
   (2026-10-04, owner-provided asset: uploads/2026/10/Hero-image-1.webp,
   attachment 4051, 1536×1024 WebP with alpha)
   --------------------------------------------------------------------------
   Painted on the right zone's free layer #brxe-uvikcb::after — no markup.
   It exists only inside these tablet media queries, so desktop and phone
   never render it, and browsers never fetch it there (background images
   in non-matching media rules are not requested).
   Box: inset inside the right zone; image contained (3:2), centred a touch
   below middle, never crossing into the text column. Layers: glow (bg) →
   mist (::before) → image (::after) → text column (z 1, sibling).
   Hero height, text, gold line, gradient and mist are untouched.
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1200.98px) {

	body.home #brxe-uvikcb:not(#brina-tab)::after {
		content: "";
		position: absolute;
		z-index: 0;
		top: 8%;
		right: clamp(14px, 2.4vw, 28px);
		bottom: 8%;
		left: clamp(6px, 1vw, 12px);
		width: auto;
		height: auto;
		aspect-ratio: auto;
		transform: none;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		background-color: transparent;
		background-image: url("/wp-content/uploads/2026/10/Hero-image-1-768x512.webp");
		background-image: image-set(
			url("/wp-content/uploads/2026/10/Hero-image-1-768x512.webp") 1x,
			url("/wp-content/uploads/2026/10/Hero-image-1-1024x683.webp") 2x
		);
		background-repeat: no-repeat;
		background-size: contain;
		background-position: 50% 56%;
		filter: drop-shadow(0 14px 22px rgba(2, 8, 18, 0.35));
		pointer-events: none;
	}
}

@media (min-width: 992px) and (max-width: 1200.98px) {

	body.home #brxe-uvikcb:not(#brina-tab)::after {
		background-image: url("/wp-content/uploads/2026/10/Hero-image-1-1024x683.webp");
		background-image: image-set(
			url("/wp-content/uploads/2026/10/Hero-image-1-1024x683.webp") 1x,
			url("/wp-content/uploads/2026/10/Hero-image-1.webp") 2x
		);
	}
}

/* ==========================================================================
   MORE WAYS TO SHOP — INNER CARDS SCALE + GAPS — tablet only
   (768–1200.98px), homepage only (2026-10-04, owner request)
   --------------------------------------------------------------------------
   Outer parent cards (Shop by price / Brand Spotlight / Category Spotlight)
   keep their exact size: the 24px of height and 12px of width taken out of
   their padding (20 → 14) and inner gaps (16 → 10) are handed to the inner
   cards, and the gap between inner cards tightens (12 → 8).
   • Spotlight product cards: image well 150 → 174px; image inset 6% → 3%.
   • Price tiles: image well = its previous height + 24px, computed from the
     tile row's own width (container query units); older browsers keep the
     existing aspect-ratio frame. Image inset 8% → 5%.
   Typography, content, links, wishlist and the 2/2/3 layouts unchanged.
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1200.98px) {

	body.home .brina-parent-card:not(#brina-tab) {
		gap: 10px;
		padding: 14px;
	}

	body.home .brina-parent-card__grid:not(#brina-tab) {
		gap: 8px;
	}

	/* Spotlights: two larger product cards */
	body.home .brina-m .brina-parent-card .brina-card--mini:not(#brina-tab) {
		--brina-compact-img: 174px;
	}

	body.home .brina-m .brina-parent-card .brina-card--mini:not(#brina-tab) .brina-card__img {
		padding: 3%;
	}

	/* Shop by price: three larger tiles. Old well height (4:3 of the old
	   tile width (G − 36) / 3, G = row width now) + 24px. */
	body.home .brina-parent-card--tiles .brina-parent-card__grid:not(#brina-tab) {
		container-type: inline-size;
	}

	body.home .brina-parent-card--tiles .brina-mini-tile__media:not(#brina-tab) {
		height: calc((100cqw - 36px) / 4 + 24px);
	}

	body.home .brina-parent-card--tiles .brina-mini-tile__img:not(#brina-tab) {
		padding: 5%;
	}
}

@media (min-width: 1024px) and (max-width: 1200.98px) {

	/* Landscape: the old frame was 16:10 → old height (G − 36) × 5 / 24. */
	body.home .brina-parent-card--tiles .brina-mini-tile__media:not(#brina-tab) {
		height: calc((100cqw - 36px) * 5 / 24 + 24px);
	}
}

/* ==========================================================================
   DISCOVERY COLLECTIONS — TILE HEIGHT REFINEMENT — portrait tablet only
   (768–1023.98px), homepage only (2026-10-04, owner request)
   --------------------------------------------------------------------------
   Shop fragrance by collection / Shop by scent family / Shop by format:
   at this range each is a full-width band of four tiles
   (.brina-collection-grid › article.brina-collection › ul.brina-collection
   __tiles › li.brina-tile › .brina-tile__media). The tile image frame goes
   from 5:4 to 10:9, so the tiles — and therefore the three bands — grow
   slightly taller with no added padding. Width, 4 columns, gaps, radius,
   text and image fit (contain, 7% inset) are unchanged.
   The landscape range (1024–1200.98) uses a different 3 × (2 × 2) layout
   and is not changed here.
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1023.98px) {

	body.home .brina-collection-grid .brina-tile__media:not(#brina-tab) {
		aspect-ratio: 10 / 9;
	}
}

/* ==========================================================================
   MORE DEALS FOR YOU — CARD HEIGHT + IMAGE SCALE — portrait tablet only
   (768–1023.98px), homepage only (2026-10-04, owner request)
   --------------------------------------------------------------------------
   Here "More deals for you" (#brxe-dqwssz) is a full-width row of four
   compact cards; their image well was capped at 72px (the
   --brina-compact-img rule in the T1 block), so square product photos
   rendered at 72 × 72 inside ~160px-wide cards. The well now scales with
   the viewport (128px at 768 → ~163px at 991; photos stay square,
   contained, left-aligned as before and clear of the wishlist heart), and
   the image → title gap opens 4 → 8px. The panel grows only by the taller
   cards. Four columns, widths, gaps, text and the 1024–1200 2 × 2 tile are
   unchanged.
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1023.98px) {

	body.home .brina-home-deals > #brxe-dqwssz .brina-card--compact:not(#brina-tab) {
		--brina-compact-img: clamp(128px, 15.7vw + 7.4px, 164px);
		gap: 8px;
	}
}