/* =====================================================================
   Brina Marketplace — Homepage phone layout guards (<= 767px)
   Loaded on the front page only. Targets Bricks element IDs on page 32.
   ===================================================================== */

@media (max-width: 767px) {
	/* Service strip (Free Delivery · Easy Returns · Secure Payment · 24/7
	   Support). Its four items are white-space: nowrap and ~658px wide in
	   total, so on phones they spilled past the strip and widened the whole
	   document. Keep the row as designed; let it scroll inside its own box
	   like the header category rail. */
	#brxe-tmqxli {
		overflow-x: auto;
		overflow-y: hidden;
		overscroll-behavior-x: contain;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	#brxe-tmqxli::-webkit-scrollbar {
		display: none;
	}

	/* Hero card. Bricks stores its overflow as "Hiodden" (typo), which
	   browsers drop, so the no-wrap 36px headline escaped the card and
	   widened the document. Apply the clip the setting intended. */
	#brxe-kfsgpp {
		overflow: hidden;
	}
}

/* Phone homepage cleanup (owner, 2026-10-04) — phone only (<= 767px).
   Section #brxe-rrmeoe holds exactly two things: the hero card
   (#brxe-kfsgpp, "Everything you need, all in one place.", Shop Now,
   artwork) and the 4-item trust/support strip (#brxe-tmqxli: Fast & Free
   Shipping · Secure Payments · Easy Returns · Customer Support), both inside
   #brxe-xyleuf > #brxe-sslspi. Hiding the section removes both components
   and the section's own padding: zero height, nothing left in the flow.
   Tablet and desktop never match this query, so the hero, its slider and
   the strip are unchanged there. Markup and scripts are untouched. */
@media (max-width: 767px) {
	#brxe-rrmeoe {
		display: none;
	}
}

/* Phone department card rail (owner, 2026-10-04) — markup from
   inc/brina-home-dept-rail.php (built from the Shop by Department grid).
   Hidden everywhere except phone; on phone it replaces the department
   circles section (#brxe-ziuoef), so the departments appear once. */
.brina-dept-rail {
	display: none;
}

@media (max-width: 767px) {
	#brxe-ziuoef {
		display: none;
	}

	/* Same canvas as the homepage sections around it (brina-home-surface.css). */
	.brina-dept-rail {
		display: block;
		margin: 0;
		padding: 16px 0 0;
		background-color: var(--brina-canvas, #F4F6F9);
	}

	/* One swipeable row; the next card always peeks in from the right. */
	.brina-dept-rail__track {
		display: flex;
		gap: 12px;
		margin: 0;
		padding: 0 24px 4px;              /* 24px = the phone content gutter */
		list-style: none;
		overflow-x: auto;
		overflow-y: hidden;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: 24px;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.brina-dept-rail__track::-webkit-scrollbar {
		display: none;
	}

	.brina-dept-rail__item {
		flex: 0 0 auto;
		width: min(64vw, 288px);        /* owner 2026-10-05: was min(74vw, 312px) */
		margin: 0;
		padding: 0;
		scroll-snap-align: start;
	}

	.brina-dept-rail__card {
		position: relative;
		display: block;
		aspect-ratio: 5 / 8;               /* owner 2026-10-05: 480 x 768 reference, scaled */
		overflow: hidden;
		border-radius: 20px;
		background-color: #eceef3;        /* shown only until the photo loads */
		box-shadow: 0 1px 2px rgba(16, 28, 61, 0.06), 0 6px 16px -10px rgba(16, 28, 61, 0.28);
		color: #fff;
		text-decoration: none;
		-webkit-tap-highlight-color: transparent;
	}

	.brina-dept-rail__img {
		display: block;
		width: 100%;
		height: 100%;
		max-width: none;
		margin: 0;
		object-fit: cover;
		object-position: center;
	}

	/* Soft shade at the top only, so the title stays readable on any photo. */
	.brina-dept-rail__card::after {
		content: "";
		position: absolute;
		inset: 0 0 auto;
		height: 42%;
		background: linear-gradient(to bottom, rgba(10, 16, 32, 0.46) 0%, rgba(10, 16, 32, 0.18) 55%, rgba(10, 16, 32, 0) 100%);
		pointer-events: none;
	}

	.brina-dept-rail__title {
		position: absolute;
		top: 16px;
		left: 18px;
		right: 18px;
		z-index: 1;
		font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
		font-size: 22px;
		font-weight: 700;
		line-height: 1.2;
		letter-spacing: -0.01em;
		text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
	}

	.brina-dept-rail__card:focus-visible {
		outline: 3px solid #5b4cf0;
		outline-offset: 3px;
	}
}

/* Phone fragrance discovery bands (owner, 2026-10-04) — phone only.
   Shop fragrance by collection / Shop by scent family / Shop by format
   (article.brina-collection inside .brina-m--collection-grid) become
   full-width colour bands with one horizontally swipeable row of their four
   existing tiles. Colours, tile content (image, label, description, link)
   and tile size are unchanged: each tile keeps the width it had in the old
   2 × 2 grid, (viewport − 84px) / 2 (= 2 × 16px container + 2 × 20px card
   padding + 12px gap), so ~2 tiles plus part of the third are visible.
   Full bleed: the card cancels the container's 16px side padding with
   −16px side margins (grid item → exactly the viewport width; no 100vw, so
   no page overflow). Tablet/desktop never match this query. */
@media (max-width: 767px) {
	body.home .brina-m--collection-grid .brina-collection-grid {
		gap: 16px;
	}

	body.home .brina-m--collection-grid article.brina-collection {
		margin-right: -16px;
		margin-left: -16px;
		padding: 20px 0 18px;
		border-right-width: 0;
		border-left-width: 0;
		border-radius: 0;
		box-shadow: none;
	}

	body.home .brina-m--collection-grid .brina-collection__head {
		padding: 0 24px;
	}

	/* One row; only the row scrolls sideways. */
	body.home .brina-m--collection-grid .brina-collection__tiles {
		display: flex;
		flex-wrap: nowrap;
		gap: 12px;
		margin: 0;
		padding: 2px 24px 4px;
		overflow-x: auto;
		overflow-y: hidden;
		overscroll-behavior-x: contain;
		scroll-snap-type: x proximity;
		scroll-padding-inline: 24px;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	body.home .brina-m--collection-grid .brina-collection__tiles::-webkit-scrollbar {
		display: none;
	}

	body.home .brina-m--collection-grid .brina-collection__tiles > .brina-tile {
		flex: 0 0 calc((100vw - 84px) / 2);
		width: calc((100vw - 84px) / 2);
		min-width: 0;
		scroll-snap-align: start;
	}
}

/* Phone: Today's Deals banner only (owner, 2026-10-04) — phone only.
   Section #brxe-pdlvup > grid #brxe-stqwss holds the banner (#brxe-gajevv)
   and, on a second grid row, the deal product cards (#brxe-kfntah, a
   display:contents shortcode wrapper, so hiding it removes its cards) and
   "More deals for you" (#brxe-dqwssz). Both are hidden; with nothing left in
   it the second grid row (and its 20px row gap) no longer exists. Products,
   queries and the "Shop all deals" link are untouched — presentation only.
   Spacing under the banner: grid margin-bottom 18 -> 0 and section
   padding-bottom 24 -> 8, which with the fragrance section's own 20px top
   padding leaves 28px to the first colour band. */
@media (max-width: 767px) {
	body.home #brxe-kfntah,
	body.home #brxe-dqwssz {
		display: none;
	}

	body.home #brxe-stqwss {
		margin-bottom: 0;
	}

	body.home #brxe-pdlvup {
		padding-bottom: 8px;
	}
}

/* At <= 478px Bricks already hides the content of Top Picks (#brxe-rpsdwv)
   and New Arrivals (#brxe-auhilr) (their "mobile portrait" display: none),
   leaving their sections as empty 10px + 10px padding shells between Today's
   Deals and the fragrance bands. Collapse those empty shells at exactly that
   range; from 479px up their content is visible and unchanged. */
@media (max-width: 478px) {
	body.home #brxe-ukcnpk,
	body.home #brxe-lhtqok {
		display: none;
	}
}

/* Phone product discovery after Today's Deals (owner, 2026-10-04) — phone only.
   Markup: inc/brina-home-phone-discovery.php, appended after #brxe-pdlvup.
   div.brina-phx > section.brina-phx__section (--group | --large | --rail);
   cards are the shared .brina-card--compact (+ .brina-phx-card). The area
   uses the same page canvas as the sections around it (var(--brina-canvas),
   #F4F6F9, like Today's Deals and the department rail) — no section colour;
   only the white cards / group surface separate from it (1px light border,
   no shadow). Hidden on tablet/desktop; its lazy images never load there. */
.brina-phx {
	display: none;
}

@media (max-width: 767px) {
	body.home .brina-phx {
		--phx-line: #E5E7EC;
		--phx-well: #F7F8FA;
		--phx-ink: #0F172A;
		--phx-muted: #6B7280;
		display: block;
		padding: 20px 16px 12px; /* + deals 8px = 28px under the banner; + fragrance 20px = 32px */
		background: var(--brina-canvas, #F4F6F9);
		font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
	}

	body.home .brina-phx__section + .brina-phx__section {
		margin-top: 32px;
	}

	body.home .brina-phx__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		margin: 0 0 12px;
	}

	body.home .brina-phx__title {
		margin: 0;
		min-width: 0;
		font-family: inherit;
		font-size: 21px;
		font-weight: 800;
		line-height: 1.2;
		letter-spacing: -.015em;
		color: var(--phx-ink);
	}

	body.home .brina-phx__more {
		flex: none;
		display: inline-flex;
		align-items: center;
		gap: 4px;
		min-height: 44px;
		margin: -10px 0;
		font-size: 14px;
		font-weight: 600;
		color: #3B32C4;
		text-decoration: none;
		white-space: nowrap;
	}

	body.home .brina-phx__more:focus-visible {
		outline: 2px solid #5B4CF0;
		outline-offset: 2px;
		border-radius: 6px;
	}

	/* Shared card typography (overrides the 1-line compact defaults). */
	body.home .brina-phx .brina-card {
		--brina-price: var(--phx-ink);
		--brina-muted: var(--phx-muted);
		gap: 0;
		min-width: 0;
	}

	body.home .brina-phx .brina-card__media {
		display: flex;
		align-items: center;
		justify-content: center;
		height: auto;
		background: #FFFFFF;
		border: 0;
		border-radius: 0;
	}

	body.home .brina-phx .brina-card__img {
		width: 100%;
		height: 100%;
		max-width: 100%;
		padding: 8px;
		object-fit: contain;
		mix-blend-mode: multiply;
		box-sizing: border-box;
	}

	body.home .brina-phx .brina-card__body {
		gap: 6px;
	}

	body.home .brina-phx .brina-card__title {
		font-size: 13.5px;
		font-weight: 500;
		line-height: 1.35;
		color: var(--phx-ink);
		-webkit-line-clamp: 2;
		line-clamp: 2;
		min-height: calc(2em * 1.35); /* two lines reserved: neighbours share a height */
	}

	body.home .brina-phx .brina-card__price {
		margin-top: auto;
		font-size: 16px;
		font-weight: 700;
		line-height: 1.25;
		color: var(--phx-ink);
	}

	body.home .brina-phx .brina-card__price del {
		font-size: 13px;
		font-weight: 400;
		color: var(--phx-muted);
	}

	body.home .brina-phx .brina-card__price ins {
		color: #C92F55;
	}

	body.home .brina-phx .brina-card__badge {
		top: 8px;
		left: 8px;
		padding: 4px 7px;
		border-radius: 6px;
		font-size: 11.5px;
		font-weight: 700;
	}

	body.home .brina-phx .brina-wishlist {
		--brina-heart-size: 20px;
		--brina-heart-hit: 40px;
		top: 4px;
		right: 4px;
	}

	body.home .brina-phx .brina-card:focus-within {
		outline: 2px solid #5B4CF0;
		outline-offset: 2px;
	}

	/* A — Picked for you: one quiet white group, 2x2 tiles on soft wells. */
	body.home .brina-phx__group {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 14px 12px;
		padding: 12px;
		background: #FFFFFF;
		border: 1px solid var(--phx-line);
		border-radius: 18px;
	}

	body.home .brina-phx__group .brina-card__media {
		aspect-ratio: 1 / 1;
		background: var(--phx-well);
		border-radius: 12px;
	}

	body.home .brina-phx__group .brina-card__body {
		padding: 8px 2px 0;
	}

	/* B — Consider these: large standalone cards, image-led (10:11). */
	body.home .brina-phx__grid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	body.home .brina-phx__grid .brina-card {
		background: #FFFFFF;
		border: 1px solid var(--phx-line);
		border-radius: 16px;
		overflow: hidden;
	}

	body.home .brina-phx__grid .brina-card__media {
		aspect-ratio: 10 / 11;
	}

	body.home .brina-phx__grid .brina-card__img {
		padding: 12px;
	}

	body.home .brina-phx__grid .brina-card__body {
		padding: 4px 12px 12px;
	}

	/* C — Trending now: native swipe rail, narrower square cards. */
	body.home .brina-phx__rail {
		display: flex;
		gap: 12px;
		margin: 0 -16px;
		padding: 2px 16px 4px;
		overflow-x: auto;
		overflow-y: hidden;
		overscroll-behavior-x: contain;
		scroll-snap-type: x proximity;
		scroll-padding-inline: 16px;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	body.home .brina-phx__rail::-webkit-scrollbar {
		display: none;
	}

	body.home .brina-phx__rail .brina-card {
		flex: 0 0 clamp(120px, 40vw, 220px);
		scroll-snap-align: start;
		background: #FFFFFF;
		border: 1px solid var(--phx-line);
		border-radius: 14px;
		overflow: hidden;
	}

	body.home .brina-phx__rail .brina-card__media {
		aspect-ratio: 1 / 1;
	}

	body.home .brina-phx__rail .brina-card__body {
		padding: 2px 10px 10px;
	}

	body.home .brina-phx__rail .brina-card__price {
		font-size: 15px;
	}
}

/* Phone cleanup (owner, 2026-10-04) — phone only. Two homepage module
   sections ([brina_home_modules], identified by their unique module id):
   "merch" = More ways to shop (Shop by price, Brand spotlight, Category
   spotlight cards — one section) and "more-to-explore" = More to Explore
   directory. Each section carries its own padding, so hiding it leaves no
   gap; tablet/desktop keep both unchanged. */
@media (max-width: 767px) {
	body.home .brina-m[data-brina-module="merch"],
	body.home .brina-m[data-brina-module="more-to-explore"] {
		display: none;
	}
}

/* Phone "Keep exploring" feed (owner, 2026-10-04) — phone only.
   Markup: inc/brina-home-feed.php (last element of #brx-content, directly
   before the footer); batches: assets/js/brina-home-feed.js (footer
   checkpoints: 20 products, then a short spinner at the footer). Page canvas
   behind it (same as the sections above); light white cards, 1px border,
   no shadow. Cards = shared .brina-card--standard (+ .brina-feed-card). */
.brina-feed {
	display: none;
}

@media (max-width: 767px) {
	body.home .brina-feed {
		--feed-line: #E5E7EC;
		--feed-ink: #0F172A;
		--feed-muted: #6B7280;
		--feed-action: #5B4CF0;
		--feed-action-strong: #4A3BDB;
		display: block;
		padding: 28px 16px 32px;
		background: var(--brina-canvas, #F4F6F9);
		font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
	}

	body.home .brina-feed__title {
		margin: 0 0 12px;
		font-family: inherit;
		font-size: 21px;
		font-weight: 800;
		line-height: 1.2;
		letter-spacing: -.015em;
		color: var(--feed-ink);
	}

	body.home .brina-feed__grid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	body.home .brina-feed .brina-card {
		--brina-price: var(--feed-ink);
		--brina-muted: var(--feed-muted);
		--brina-sale: #C92F55;
		min-width: 0;
		gap: 0;
		background: #FFFFFF;
		border: 1px solid var(--feed-line);
		border-radius: 14px;
		box-shadow: none;
		overflow: hidden;
	}

	body.home .brina-feed .brina-card__media {
		display: flex;
		align-items: center;
		justify-content: center;
		aspect-ratio: 1 / 1;
		height: auto;
		background: #FFFFFF;
		border: 0;
		border-radius: 0;
	}

	body.home .brina-feed .brina-card__img {
		width: 100%;
		height: 100%;
		max-width: 100%;
		padding: 10px;
		box-sizing: border-box;
		object-fit: contain;
		mix-blend-mode: multiply;
	}

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

	body.home .brina-feed .brina-card__brand {
		font-size: 11px;
		color: var(--feed-muted);
	}

	body.home .brina-feed .brina-card__title {
		font-size: 13.5px;
		font-weight: 500;
		line-height: 1.35;
		color: var(--feed-ink);
		-webkit-line-clamp: 2;
		line-clamp: 2;
		min-height: calc(2em * 1.35);
		overflow-wrap: break-word; /* whole words; no mid-word breaks */
		word-break: normal;
	}

	body.home .brina-feed .brina-card__rating {
		font-size: 12px;
	}

	body.home .brina-feed .brina-card__price {
		margin-top: auto;
		font-size: 16px;
		font-weight: 700;
		color: var(--feed-ink);
	}

	body.home .brina-feed .brina-card__price del {
		font-size: 13px;
		font-weight: 400;
		color: var(--feed-muted);
	}

	body.home .brina-feed .brina-card__price ins {
		color: #C92F55;
	}

	body.home .brina-feed .brina-card__discount {
		font-size: 12px;
		font-weight: 600;
		color: #C92F55;
	}

	body.home .brina-feed .brina-wishlist {
		--brina-heart-size: 20px;
		--brina-heart-hit: 40px;
		top: 4px;
		right: 4px;
	}

	body.home .brina-feed .brina-card:focus-within {
		outline: 2px solid var(--feed-action);
		outline-offset: 2px;
	}

	/* Action: WooCommerce add-to-cart (simple) or "Select options" (other types). */
	body.home .brina-feed .brina-card__action {
		display: flex;
		align-items: center;
		justify-content: center;
		align-self: stretch;
		min-height: 40px;
		margin-top: 6px;
		padding: 0 10px;
		border: 1px solid var(--feed-action);
		border-radius: 10px;
		background: var(--feed-action);
		color: #FFFFFF;
		font-size: 13.5px;
		font-weight: 600;
		line-height: 1.2;
		text-align: center;
		text-decoration: none;
		white-space: nowrap;
	}

	body.home .brina-feed .brina-card__action:not(.add_to_cart_button) {
		background: #FFFFFF;
		color: var(--feed-action);
	}

	body.home .brina-feed .brina-card__action:hover,
	body.home .brina-feed .brina-card__action:focus-visible {
		text-decoration: none;
		background: var(--feed-action-strong);
		border-color: var(--feed-action-strong);
		color: #FFFFFF;
	}

	body.home .brina-feed .brina-card__action:focus-visible {
		outline: 2px solid var(--feed-ink);
		outline-offset: 2px;
	}

	body.home .brina-feed .brina-card__action.loading {
		opacity: .7;
		pointer-events: none;
	}

	/* WooCommerce adds "View cart" after a successful add. */
	body.home .brina-feed .added_to_cart {
		position: relative;
		z-index: 2;
		align-self: center;
		margin-top: 6px;
		font-size: 12.5px;
		font-weight: 600;
		color: var(--feed-action);
		text-decoration: none;
	}

	/* Loading / end / retry (under the grid, before the footer). */
	body.home .brina-feed__sentinel {
		height: 1px;
	}

	/* Footer checkpoint loader: a reserved 64px slot directly above the
	   footer (always present while more products remain, so showing the
	   spinner moves nothing); removed with the sentinel at the end. */
	body.home .brina-feed__loader {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 64px;
		margin-top: 8px;
	}

	/* Scroll position stays where the customer is: never let the browser's
	   scroll anchoring pick the footer (or the loader slot, removed at the
	   end) as its anchor, which would carry the view down with the footer
	   when a batch is inserted above it. Behaviour only; no visual change. */
	body.home .brina-feed__status,
	body.home #brx-footer {
		overflow-anchor: none;
	}

	body.home .brina-feed__spinner {
		width: 28px;
		height: 28px;
		border: 3px solid rgba(91, 76, 240, .18);
		border-top-color: var(--feed-action);
		border-radius: 50%;
		opacity: 0;
		transition: opacity .15s ease;
	}

	body.home .brina-feed__loader.is-active .brina-feed__spinner {
		opacity: 1;
		animation: brina-feed-spin .7s linear infinite;
	}

	body.home .brina-feed__retry {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
		gap: 4px 12px;
		margin-top: 16px;
		font-size: 13.5px;
		color: var(--feed-muted);
	}

	body.home .brina-feed__retry p {
		margin: 0;
	}

	body.home .brina-feed__retry-btn {
		min-height: 40px;
		padding: 0 16px;
		border: 1px solid var(--feed-action);
		border-radius: 10px;
		background: #FFFFFF;
		color: var(--feed-action);
		font: 600 13.5px/1 Inter, system-ui, sans-serif;
		cursor: pointer;
	}
}

@keyframes brina-feed-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
	body.home .brina-feed__loader.is-active .brina-feed__spinner {
		animation-duration: 1.6s;
	}
}

/* Phone horizontal page-drift lock (owner, 2026-10-04) — phone homepage only.
   Audit: at 390/360/320 no element widens the document (scrollWidth =
   clientWidth, also after the feed loads); every intentional rail already
   scrolls inside itself with overscroll-behavior-x: contain. What was not
   locked is the root itself: html/body had overflow-x: visible,
   overscroll-behavior-x: auto and touch-action: auto, so a diagonal swipe
   could rubber-band / stretch the whole page sideways, and any device-only
   overflow (one wide element) would widen the document.
   - overflow-x: clip on html + body: content can never make the document
     wider than the viewport. clip creates no scroll container, so the
     sticky header and the page's vertical scrolling are unaffected.
   - overscroll-behavior-x: none on html + body: no sideways bounce/stretch
     of the page, and nothing chains from a rail's end to the page.
   - touch-action: pan-y pinch-zoom on the page (zoom stays available).
     Touch-action is resolved up to the nearest scroll container, so the
     rails (their own scroll containers) keep their horizontal swipe; they
     are given pan-x pan-y explicitly so vertical scrolling that starts on a
     rail stays natural. No JavaScript, no preventDefault. */
@media (max-width: 767px) {
	html:has(body.home),
	body.home {
		max-width: 100%;
		overflow-x: hidden; /* fallback for browsers without overflow: clip */
		overflow-x: clip;
		overscroll-behavior-x: none;
		touch-action: pan-y pinch-zoom;
	}

	body.home .brina-phone-chips,
	body.home .brina-dept-rail__track,
	body.home .brina-phx__rail,
	body.home .brina-collection__tiles,
	body.home .brina-rail {
		touch-action: pan-x pan-y pinch-zoom;
	}
}

/* Personalised Shop by brand (owner, 2026-10-04) — phone: the visitor's top
   4 brands of the server-ranked list (inc/brina-brand-affinity.php renders
   up to 7 for desktop), in the existing 2-column grid = 2 × 2. */
@media (max-width: 767px) {
	body.home .brina-brands > li:nth-child(n+5) {
		display: none;
	}
}