/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

/* Product archive: Figma sort section inside the filter offcanvas. */
.duskitten-sort {
	margin: 0 -44px 32px;
	padding: 0 44px 32px;
	border-bottom: 1px solid rgba(28, 68, 111, 0.15);
	color: #1c446f;
	font-family: Inter, sans-serif;
}

.duskitten-sort__title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	margin: 0 0 12px;
	padding: 0;
	list-style: none;
	color: #1c446f;
	font-size: 12px;
	font-weight: 500;
	line-height: 1;
	text-transform: uppercase;
	cursor: pointer;
}

.duskitten-sort__title::-webkit-details-marker {
	display: none;
}

.duskitten-sort__chevron {
	width: 6px;
	height: 6px;
	border-top: 1px solid currentColor;
	border-left: 1px solid currentColor;
	transform: rotate(45deg) translateY(2px);
	transition: transform 0.2s ease;
}

.duskitten-sort:not([open]) .duskitten-sort__chevron {
	transform: rotate(225deg) translateY(2px);
}

.duskitten-sort__form {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	margin: 0;
}

.duskitten-sort__option {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	color: #1c446f;
	font-size: 12px;
	font-weight: 400;
	line-height: 1;
	text-transform: uppercase;
	cursor: pointer;
}

.duskitten-sort__option input {
	display: grid;
	width: 14px;
	height: 14px;
	margin: 0;
	padding: 0;
	border: 1px solid #1c446f;
	border-radius: 50%;
	background: transparent;
	appearance: none;
	-webkit-appearance: none;
	place-content: center;
	flex: 0 0 14px;
}

.duskitten-sort__option input::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #1c446f;
	transform: scale(0);
}

.duskitten-sort__option input:checked::before {
	transform: scale(1);
}

.duskitten-sort__option input:focus-visible {
	outline: 1px solid #1c446f;
	outline-offset: 2px;
}

/* Prevent the old horizontal filter experiment from entering the Shop flow. */
body.woocommerce-shop #brxe-sxwtfo {
	display: none;
}

@media (max-width: 767px) {
	.filter-offcanvas .brx-offcanvas-inner {
		flex-wrap: nowrap;
		overflow-x: hidden;
		overflow-y: auto;
	}

	.duskitten-sort {
		margin-right: -20px;
		margin-left: -20px;
		padding-right: 20px;
		padding-left: 20px;
	}

	body.wpc_show_bottom_widget .filter-offcanvas .wpc-filters-widget-content {
		position: static;
		inset: auto;
		display: block;
		height: auto;
		margin: 0;
		padding: 0;
		border-radius: 0;
		background: transparent;
		transform: none;
	}

	body.wpc_show_bottom_widget .filter-offcanvas .wpc-filters-widget-containers-wrapper {
		position: static;
		inset: auto;
		overflow: visible;
	}

	body.wpc_show_bottom_widget .filter-offcanvas .wpc-filters-scroll-container {
		min-height: 0;
		background: transparent;
	}

	body.wpc_show_bottom_widget .filter-offcanvas .wpc-filters-widget-top-container,
	body.wpc_show_bottom_widget .filter-offcanvas .wpc-filters-widget-controls-container,
	body.wpc_show_bottom_widget .filter-offcanvas .wpc-widget-close-container,
	body.wpc_show_bottom_widget .filter-offcanvas .wpc-filters-open-button-container {
		display: none !important;
	}
}

/* ════════════════════════════════════════════════════════════════
   Mobile fixes — home (EN + DE share Bricks element IDs) & about-us
   Added 2026-06-15
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 478px) {
	/* Considered Materials — breathing room before the first paragraph. */
	#brxe-vneimq {
		margin-top: 24px !important;
	}
}

@media (max-width: 767px) {
	/* Turtle mark + its flanking lines must stay on ONE row (was wrapping
	   to 2 inconsistently: 161 + 148 + 161 > container). */
	#brxe-ywadah {
		flex-wrap: nowrap !important;
		align-items: center !important;
	}
	#brxe-ywadah > #brxe-yargge,
	#brxe-ywadah > #brxe-iimers {
		flex: 1 1 0 !important;
		min-width: 0 !important;
		width: auto !important;
	}
	#brxe-ywadah > #brxe-kqhdsg {
		flex: 0 0 auto !important;
	}
}

/* About Us — mobile: paper sits close to the screen edges; photo + date then
   scale to the paper (Figma 230-1833). Was 32+32+8px nested padding each side. */
@media (max-width: 478px) {
	#brxe-akellc { padding-top: 112px !important; padding-left: 14px !important; padding-right: 14px !important; }
	#brxe-nqzvra { padding-left: 0 !important; padding-right: 0 !important; }
	#brxe-enwiis { padding-left: 0 !important; padding-right: 0 !important; }
	#brxe-fusoju { padding-left: 24px !important; padding-right: 24px !important; }
}

/* Size guide — Women/Men sections: 20px was set to prevent content
   touching edges (Figma 230-2030). Global 12px container rule now covers
   this; zero section padding to avoid stacking (20+12=32px). EN/DE share IDs. */
@media (max-width: 478px) {
	#brxe-cdwquu,
	#brxe-risrwv {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
}

/* Our Contribution — section has 120px desktop side padding. On mobile the
   global container rule (≤767px) normalises the inner container to 12px, so
   the section must carry 0 to avoid stacking. Aligned to match all other home
   sections (12px effective edge). EN (25) + DE (1291). */
@media (max-width: 767px) {
	#brxe-oliydq {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	/* German title is longer ("Unser Beitrag für unseren Planeten") — give it the
	   full width so it has room (it now uses the standard H2 mobile size). */
	html[lang="de"] #brxe-kyhghi {
		width: 100% !important;
	}
}

/* Mobile menu — underline the current/active page item (desktop already does).
   current-menu-item/aria-current cover post-type pages; .dk-active-link is set
   by JS (functions.php) to also cover the Home custom link + DE pages. */
.mobile-menu-item .current-menu-item > a,
.mobile-menu-item .current_page_item > a,
.mobile-menu-item a[aria-current="page"],
.mobile-menu-item a.dk-active-link {
	text-decoration: underline !important;
	text-underline-offset: 4px !important;
}

/* ════════════════════════════════════════════════════════════════
   Care guide — Figma 242-3078. Narrow centred column, Cormorant
   subheading, navy diamond (◆) bullets. EN (page-id-2450) + DE (3475).
   ════════════════════════════════════════════════════════════════ */
/* All legal / info "document" pages share the same ~640px centred column
   (care guide, withdraw, imprint, terms, privacy, revocation, returns,
   shipping). The body class is added in functions.php. */
.dk-doc-page :has(> .brxe-post-content) {
	width: 100% !important;
	max-width: 640px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	box-sizing: border-box;
}
.dk-doc-page .brxe-post-content {
	width: 100% !important;
	max-width: 100% !important;
	overflow-wrap: anywhere;
	word-break: normal;
}
/* Links in the document body underlined, like the contact inline-link style. */
.dk-doc-page .brxe-post-content a {
	text-decoration: underline !important;
	text-underline-offset: 2px;
}
/* Keep wide content (e.g. legal tables) from overflowing the column. */
.dk-doc-page .brxe-post-content img {
	max-width: 100% !important;
	height: auto;
}
.dk-doc-page .brxe-post-content table {
	display: block;
	width: 100% !important;
	max-width: 100% !important;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	box-sizing: border-box;
}

/* Withdraw from contract — submit button right-aligned (Figma 243-4984). */
.page-id-1101 .form-row-submit,
.page-id-3479 .form-row-submit {
	text-align: right !important;
}
/* Figma puts EMAIL top-left, ORDER NUMBER top-right (plugin renders them the
   other way). Swap the first row's floats. */
.page-id-1101 .eu-owb-form-fields .form-row-order-number,
.page-id-3479 .eu-owb-form-fields .form-row-order-number {
	float: right !important;
	clear: none !important;
}
.page-id-1101 .eu-owb-form-fields .form-row-email,
.page-id-3479 .eu-owb-form-fields .form-row-email {
	float: left !important;
	clear: left !important;
}
@media (max-width: 767px) {
	.dk-doc-page #brx-content {
		overflow-x: hidden;
	}
	.dk-doc-page .brxe-post-content p,
	.dk-doc-page .brxe-post-content li,
	.dk-doc-page .brxe-post-content td,
	.dk-doc-page .brxe-post-content th {
		overflow-wrap: anywhere;
	}
	.dk-doc-page #brx-content h1,
	.dk-doc-page .brxe-post-title {
		max-width: 100% !important;
		white-space: normal !important;
		overflow-wrap: anywhere !important;
		word-break: break-word;
		hyphens: auto;
	}
	.page-id-1101 .eu-owb-form-fields .form-row,
	.page-id-3479 .eu-owb-form-fields .form-row {
		float: none !important;
		clear: both !important;
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box;
	}
	.page-id-1101 .order-withdrawal-request,
	.page-id-3479 .order-withdrawal-request,
	.page-id-1101 .eu-owb-form-fields,
	.page-id-3479 .eu-owb-form-fields {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box;
	}
	.page-id-1101 .order-withdrawal-request input,
	.page-id-1101 .order-withdrawal-request textarea,
	.page-id-1101 .order-withdrawal-request select,
	.page-id-3479 .order-withdrawal-request input,
	.page-id-3479 .order-withdrawal-request textarea,
	.page-id-3479 .order-withdrawal-request select {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box;
	}
	.page-id-1101 .form-row-submit,
	.page-id-3479 .form-row-submit {
		text-align: left !important;
	}
	.page-id-1101 .form-row-submit .button,
	.page-id-3479 .form-row-submit .button {
		width: 100% !important;
		max-width: 100% !important;
		white-space: normal !important;
	}
}
/* "How to care for your DUSKITTEN" → Cormorant serif subheading */
.page-id-2450 .brxe-post-content p strong,
.page-id-3475 .brxe-post-content p strong {
	font-family: 'Cormorant', Georgia, 'Times New Roman', serif !important;
	font-weight: 500 !important;
	font-size: 24px !important;
	letter-spacing: .2px;
}
/* Navy diamond bullets */
.page-id-2450 .brxe-post-content ul,
.page-id-3475 .brxe-post-content ul {
	list-style: none !important;
	padding-left: 0 !important;
	margin-top: 28px !important;
}
.page-id-2450 .brxe-post-content ul li,
.page-id-3475 .brxe-post-content ul li {
	position: relative;
	padding-left: 26px;
	margin-bottom: 16px;
	color: #1C446F;
	line-height: 1.5;
}
.page-id-2450 .brxe-post-content ul li::before,
.page-id-3475 .brxe-post-content ul li::before {
	content: "\25C6";
	position: absolute;
	left: 0;
	top: 0.3em;
	color: #1C446F;
	font-size: 10px;
	line-height: 1;
}

/* Home "Considered Materials" — the two text columns must align to the TOP
   (the container was centring them, so the shorter column sat lower). */
#brxe-vygxan {
	align-items: flex-start !important;
}
/* Below ~918px the two columns wrap to one column. The container uses
   space-between (so on desktop the columns sit under the divider lines), which
   left-aligns a single wrapped column. Centre them once wrapped so they line up
   with the centred intro above, instead of hugging the left edge. */
@media (max-width: 918px) {
	#brxe-vygxan {
		justify-content: center !important;
	}
}

/* Mobile type scale (per design): content H1 = 40px, content H2 = 28px.
   Scoped to #brx-content so the footer/header headings (e.g. the 14px footer
   "Fragments" H2) are NOT affected. "Our Contribution" was an H3 → changed to
   H2 in the page content, so it inherits the H2 size and matches the other
   section headings. */
@media (max-width: 767px) {
	#brx-content h1 {
		font-size: 40px !important;
		line-height: 1.15 !important;
	}
	#brx-content h2 {
		font-size: 28px !important;
		line-height: 1.3 !important;
	}
}

/* Footer "Withdraw contract" button — at tablet widths the 3-column footer row
   crushed the Customer Care column (~144px), wrapping the button to 2-3 lines.
   Keep the label on one line, and stack the footer columns below tablet so the
   button column is full-width. EN + DE share the footer element IDs. */
.button-outlined .brxe-text-link {
	white-space: nowrap !important;
}
@media (max-width: 991px) {
	#brxe-wtoyqb {
		flex-direction: column !important;
	}
}

/* Withdraw from contract — match the testpage email input while keeping labels. */
.page-id-1101 .order-withdrawal-request .input-text,
.page-id-3479 .order-withdrawal-request .input-text {
	height: 44px !important;
	min-height: 44px !important;
	padding: 12px 16px !important;
	border: 1px solid rgba(0, 0, 0, 0) !important;
	border-radius: 0 !important;
	background-color: #f6f8f9 !important;
	box-shadow: none !important;
	color: #1c446f !important;
	font-family: Inter, sans-serif !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	line-height: 18px !important;
	letter-spacing: -0.12px !important;
	text-transform: uppercase !important;
}
.page-id-1101 .order-withdrawal-request label,
.page-id-3479 .order-withdrawal-request label {
	display: block !important;
	margin-bottom: 5px !important;
}
@media (max-width: 767px) {
	.page-id-1101 .eu-owb-form-fields .form-row:not(.form-row-email-repeat),
	.page-id-3479 .eu-owb-form-fields .form-row:not(.form-row-email-repeat) {
		margin-bottom: 12px !important;
	}
	.page-id-1101 .eu-owb-form-fields .form-row-submit,
	.page-id-3479 .eu-owb-form-fields .form-row-submit,
	.page-id-1101 .order-withdrawal-request .form-row-submit,
	.page-id-3479 .order-withdrawal-request .form-row-submit {
		margin-top: 12px !important;
	}
}

/* About Us — final mobile overrides from Figma 230-1833. Keep these after
   Bricks page rules by using body.page-id specificity. EN 2125 + DE 3458. */
@media (max-width: 478px) {
	body.page-id-2125 #brxe-akellc,
	body.page-id-3458 #brxe-akellc {
		padding-top: 112px !important;
		padding-left: 14px !important;
		padding-right: 14px !important;
	}
	body.page-id-2125 #brxe-nqzvra,
	body.page-id-3458 #brxe-nqzvra,
	body.page-id-2125 #brxe-enwiis,
	body.page-id-3458 #brxe-enwiis {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	body.page-id-2125 #brxe-fusoju,
	body.page-id-3458 #brxe-fusoju {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}
	body.page-id-2125 #brxe-fusoju .image-line,
	body.page-id-3458 #brxe-fusoju .image-line {
		left: 15px !important;
		width: calc(100% - 30px) !important;
		max-width: calc(100% - 30px) !important;
		transform: none !important;
	}
	body.page-id-2125 #brxe-xxypwh,
	body.page-id-3458 #brxe-xxypwh {
		display: none !important;
	}
	body.page-id-2125 #brxe-ergxfk,
	body.page-id-3458 #brxe-ergxfk {
		height: 54px !important;
		min-height: 54px !important;
		padding: 0 20px !important;
		overflow: visible !important;
		align-items: center !important;
		justify-content: flex-end !important;
	}
	body.page-id-2125 #brxe-zoiqtz,
	body.page-id-3458 #brxe-zoiqtz {
		width: 314px !important;
		height: 54px !important;
		min-height: 54px !important;
		overflow: visible !important;
		align-items: center !important;
		justify-content: flex-end !important;
		column-gap: 10px !important;
	}
	body.page-id-2125 #brxe-sfwyey,
	body.page-id-3458 #brxe-sfwyey {
		font-size: 12px !important;
		line-height: .92 !important;
	}
	body.page-id-2125 #brxe-qxxkuz,
	body.page-id-3458 #brxe-qxxkuz {
		content: url("/wp-content/uploads/2026/05/waves-light.png") !important;
		width: 135px !important;
		height: 30px !important;
		max-width: none !important;
		object-fit: contain !important;
		overflow: visible !important;
	}
}

/* Campaign collection pages — keep mobile menu/search identical to the home
   overlay. Campaign CSS switches the overlay to a pale tint and strips input
   padding, so restore the shared header menu treatment here. */
@media (max-width: 991px) {
	body.campaign-lp #brxe-yjfzpd {
		background-color: rgba(0, 0, 0, 0.25) !important;
		backdrop-filter: blur(100px) !important;
	}
	body.campaign-lp #brxe-oyhzpe,
	body.campaign-lp #brxe-avtzcl,
	body.campaign-lp #brxe-pjgcqq,
	body.campaign-lp #brxe-qdxdwe,
	body.campaign-lp #brxe-mjlnsa,
	body.campaign-lp #brxe-qdxdwe a,
	body.campaign-lp #brxe-mjlnsa a {
		color: #fff !important;
	}
	body.campaign-lp #brxe-avtzcl,
	body.campaign-lp #brxe-avtzcl svg,
	body.campaign-lp #brxe-pjgcqq,
	body.campaign-lp #brxe-pjgcqq svg,
	body.campaign-lp #brxe-qdxdwe,
	body.campaign-lp #brxe-mjlnsa {
		fill: #fff !important;
		stroke: #fff !important;
	}
	body.campaign-lp #brxe-pjgcqq input[type="search"],
	body.page-template-page-campaign #brxe-pjgcqq input[type="search"] {
		padding: 0 20px !important;
		border: 1px solid rgba(255, 255, 255, 0.25) !important;
		background-color: transparent !important;
		color: #fff !important;
	}
	body.campaign-lp #brxe-pjgcqq.brxe-search input[type="search"],
	body.page-template-page-campaign #brxe-pjgcqq.brxe-search input[type="search"] {
		border-color: rgba(255, 255, 255, 0.25) !important;
	}
	body.campaign-lp #brx-header #brxe-pjgcqq input[type="search"]::placeholder,
	body.page-template-page-campaign #brx-header #brxe-pjgcqq input[type="search"]::placeholder {
		color: rgba(255, 255, 255, 0.46) !important;   /* match the home/hero faded white, not full #fff */
		opacity: 0.85 !important;
	}
	/* page-campaign.php template: Bricks JS never adds .hero-mode to the
	   header (no Bricks hero section), so #brxe-zwvavt placeholder falls
	   back to --brand-blue (#1C446F) against the dark menu overlay.
	   Match the .hero-mode white used on the home page. */
	body.page-template-page-campaign #brxe-zwvavt input::placeholder {
		color: rgba(255, 255, 255, 0.46) !important;   /* match the home/hero faded white, not full #fff */
		opacity: 0.85 !important;
	}
}

/* dk-doc-page: push first section below the 80px sticky header. */
.dk-doc-page #brx-content > section:first-child {
	padding-top: 80px !important;
}

/* Hide search (icon + input) from mobile offcanvas burger menu */
@media (max-width: 991px) {
	/* mobile offcanvas search: hidden only in prelaunch now (inc/prelaunch.php) */
}

/* Archive page: constrain image wrapper to viewport on small screens.
   Bricks inline has max-width:100% but parent flex sizing can exceed viewport;
   calc(100vw - 24px) mirrors the 12px side padding on #brxe-arcsec at ≤700px. */
@media (max-width: 430px) {
	#brxe-arcimw {
		max-width: calc(100vw - 24px) !important;
	}
}

/* Doc pages: Bricks adds margin-top:124px on desktop first section — on mobile
   this stacks with our 80px padding-top → 204px total gap. Zero the margin. */
@media (max-width: 767px) {
	.dk-doc-page #brx-content > section:first-child {
		margin-top: 0 !important;
	}
}

/* Footer "Withdraw contract" button: hug its label instead of stretching to the
   full column width. When the footer columns stack at <=991px (tablet/mobile)
   the Customer Care column goes full-width and the bordered button stretched
   edge-to-edge; align-self + fit-content keeps it content-sized like the Figma. */
.button-outlined {
	align-self: flex-start !important;
	width: fit-content !important;
	max-width: 100% !important;
}

/* Footer info/legal pages: a consistent 30px gap between the 80px header and the
   page heading on mobile (80px clears the header, +30 = the gap). Applies to all
   dk-doc-page pages; the FAQ matches via its own 110px in the page CSS. */
@media (max-width: 767px) {
	.dk-doc-page #brx-content > section:first-child { padding-top: 110px !important; }
}

/* iOS Safari auto-zooms when a focused input's font-size is < 16px. The withdraw
   form fields render at 12px (design), which made the screen zoom in on iPhone when
   tapping a field. Bump them to 16px on touch widths to stop the zoom; desktop keeps
   the 12px design. Pages: /widerrufsrecht/ (DE 3479) and the EN equivalent (1101). */
@media (max-width: 767px) {
	.page-id-1101 .order-withdrawal-request input,
	.page-id-1101 .order-withdrawal-request select,
	.page-id-1101 .order-withdrawal-request textarea,
	.page-id-1101 .order-withdrawal-request .input-text,
	.page-id-3479 .order-withdrawal-request input,
	.page-id-3479 .order-withdrawal-request select,
	.page-id-3479 .order-withdrawal-request textarea,
	.page-id-3479 .order-withdrawal-request .input-text {
		font-size: 16px !important;
	}
}

/* ════════════════════════════════════════════════════════════════
   Mobile content padding — global 12px left/right on all pages.
   Bricks sets section containers to 32px desktop (no mobile
   override set), which inherited to mobile. Sections using the
   mobile-padding-lr class carried 20px on the section itself.
   Both normalised to 12px effective edge at ≤767px.
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
	/* Containers whose section has no side padding (most pages): 32px → 12px */
	#brx-content .brxe-section:not(.mobile-padding-lr) > .brxe-container {
		padding-left: 12px !important;
		padding-right: 12px !important;
	}
	/* Sections that carry the padding themselves (mobile-padding-lr): 20px → 12px */
	#brx-content .mobile-padding-lr.brxe-section {
		padding-left: 12px !important;
		padding-right: 12px !important;
	}
	/* Their child containers must stay at 0 so padding doesn't stack */
	#brx-content .mobile-padding-lr > .brxe-container {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
}

/* About page (EN 2125, DE 3458) ≤478px: section #brxe-akellc carries 14px
   intentionally. Per-container overrides (0, 0, 24px) were overridden by the
   global rule (specificity 1,3,0 beats 1,1,1). Using (2,0,0) selectors to restore. */
@media (max-width: 478px) {
	#brx-content #brxe-nqzvra,
	#brx-content #brxe-enwiis {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	#brx-content #brxe-fusoju {
		padding-left: 24px !important;
		padding-right: 24px !important;
	}
}

/* ══ Mobile paragraph size normalisation ───────────────────────────────
   Bricks elements define their own font-size (size-guide: 12px,
   FAQ contact text: 16px), causing inconsistent p rendering site-wide.
   Normalise all body p to 15px at ≤767px.
   Exception: .cormorant-teaser pull-quotes (about page) get their
   28px from the parent div — restore via inherit so they stay large. */
@media (max-width: 767px) {
	#brx-content p { font-size: 15px !important; }
	#brx-content .cormorant-teaser p { font-size: inherit !important; }
}

/* Mobile menu search row: .mobile-menu-item applies 56px padding both sides to align
   nav items. Left pad reserves space for the absolute-pos search icon; right pad has
   no equivalent purpose — it clips the input short. Remove it so the form fills the
   full offcanvas inner content width. */
@media (max-width: 991px) {
    #brxe-avtzcl {
        padding-right: 0 !important;
    }
}

/* Search results product grid: #brxe-cizamh uses repeat(4, 1fr) with no mobile
   override, so it stays 4 columns and overflows at 390px. Match the shop grid
   (.brxe-zgudla): 2 columns at ≤767px with 4px gap. */
@media (max-width: 767px) {
    #brxe-cizamh {
        grid-template-columns: repeat(2, 1fr) !important;
        grid-gap: 4px !important;
    }
}

/* Mobile search clear button — injected by JS (wp_footer hook in functions.php)
   because Bricks suppresses ::-webkit-search-cancel-button via appearance:none
   in @layer bricks and there is no per-element way to restore it cleanly. */
@media (max-width: 991px) {
    #search-input-pjgcqq {
        padding-right: 28px !important;
    }
    .search-clear-btn {
        display: none;
        position: absolute;
        right: 8px;
        top: 50%;
        transform: translateY(-50%);
        background: none;
        border: none;
        cursor: pointer;
        font-size: 22px;
        line-height: 1;
        padding: 2px 4px;
        color: inherit;
        opacity: 0.6;
        align-items: center;
        justify-content: center;
    }
    .search-clear-btn:active { opacity: 1; }
}
/* Home "From The Chapter" product grid — mobile:
   1. One product per row — ofjhrg cards use flex-grow:1 which gives 2+1 layout;
      force 100% basis so each card wraps to its own row.
   2. Title/price always visible — on desktop .product-description has opacity:0
      and reveals on :hover, but touch screens have no hover state. */
@media (max-width: 767px) {
    #brxe-ymncns > .brxe-ofjhrg {
        flex-basis: 100% !important;
    }
    .brxe-ofjhrg .product-description {
        opacity: 1 !important;
        transition: none !important;
    }
    .brxe-ofjhrg .product-image {
        transition: none !important;
    }
}

/* Account icon (#brxe-onbzuz) uses Google Material Symbols viewBox "0 -960 960 960"
   which has ~30% optical padding around the actual glyph. At the same 28px as the
   cart/wishlist icons the person silhouette looks visually smaller. Scale to 30px so
   the optical weight matches the other header icons on mobile. */
@media (max-width: 991px) {
    #brxe-onbzuz {
        width: 30px !important;
        height: 30px !important;
    }
}

/* Home categories grid — mobile: oexvjx has flex-wrap:wrap set by Bricks but
   cards still render 3-per-row because flex-basis/flex-grow distribute them
   across the 366px container. Force 1 card per row and reduce image height
   from 800px (desktop full-bleed) to 350px for stacked layout. Title overlay
   is position:absolute so it stays visible at any card height. */
@media (max-width: 767px) {
    #brxe-oexvjx > .brxe-qbuvmk {
        flex-basis: 100% !important;
    }
    #brxe-oexvjx .brxe-afmwdc {
        height: 350px !important;
    }
}

/* Size guide Men section: Bricks sets margin-top:100px for desktop breathing
   room between Women and Men sections. On mobile this creates a disproportionate
   gap — Women heading has 0px above it while Men has 100px. Reduce to 48px to
   match mobile visual rhythm. Cannot change in Bricks (no per-breakpoint margin
   set; this overrides the single inherited value). */
@media (max-width: 767px) {
    #brxe-risrwv {
        margin-top: 48px !important;
    }
}

/* Product size-guide offcanvas — Bricks gives the sidebar inner a 500px
   min-width. On phones the right-aligned panel becomes wider than the viewport,
   clipping the title, first table column, and the expanded "How to measure" body. */
@media (max-width: 767px) {
    #brxe-xtcdlu,
    #brxe-xtcdlu .brx-offcanvas-inner,
    #brxe-qwrhwo {
        width: 100vw !important;
        max-width: 100vw !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
    #brxe-qwrhwo {
        height: 100dvh !important;
        max-height: 100dvh !important;
        padding: 44px 12px 96px !important;
        flex-wrap: nowrap !important;
        align-content: flex-start !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    #brxe-aqmgud,
    #brxe-ctodvn,
    #brxe-qvomnz,
    #brxe-bibatg,
    #brxe-ovqepg,
    #brxe-qwrhwo .brxe-mfvhlx,
    #brxe-qwrhwo .brxe-rddbxo,
    #brxe-qwrhwo .brxe-vloxss,
    #brxe-qwrhwo .brxe-vqvpfe,
    #brxe-qwrhwo .brxe-dhjbra,
    #brxe-qwrhwo .brxe-sbworl {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
    #brxe-qwrhwo table {
        width: 100% !important;
        table-layout: fixed !important;
    }
    #brxe-qwrhwo th,
    #brxe-qwrhwo td {
        overflow-wrap: anywhere;
        word-break: normal;
    }
    #brxe-qwrhwo .accordion-content {
        padding: 16px 12px !important;
    }
    #brxe-qwrhwo .accordion-content div:has(> img) {
        flex-direction: column !important;
        align-items: flex-start !important;
        row-gap: 16px !important;
        column-gap: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
    #brxe-qwrhwo .accordion-content div:has(> img) > img {
        width: auto !important;
        max-height: 280px !important;
        max-width: 100% !important;
        height: auto !important;
        margin-right: auto !important;
        margin-left: auto !important;
        align-self: center;
    }
    #brxe-qwrhwo .accordion-content div:has(> img) > div {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex-basis: auto !important;
    }
}

/* Benefits icons grid — brxe-irsyly has hardcoded 159px column widths, tuned
   for exactly 390px. At any other mobile width (e.g. 375px overflows, 430px
   leaves 40px+ empty on the right). Use 1fr so each column takes an equal share
   of the available container width instead of a fixed pixel value. */
@media (max-width: 767px) {
    #brxe-irsyly {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Shop product grid — brxe-zgudla uses hardcoded 181px columns, which only
   align correctly at exactly 390px. At 430px the right gap becomes ~52px vs
   12px on the left. 1fr distributes evenly across whatever width is available. */
@media (max-width: 767px) {
    .brxe-zgudla {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Shop page filter row — mobile:
   brxe-irwsac (FILTERS button) is only 15px tall on mobile — too small to tap.
   Add vertical padding so the touch target is ~44px.
   brxe-uvktcx section needs bottom padding to separate the row from the
   product grid below it (gap is 0px currently). */
@media (max-width: 767px) {
    .brxe-irwsac {
        padding-top: 14px !important;
        padding-bottom: 14px !important;
    }
    #brxe-uvktcx {
        padding-bottom: 16px !important;
    }
}

/* Shop page — mobile single-row filter bar.
   Women/Men tabs (#brxe-sfoqke) and the FILTERS button (#brxe-uvktcx) are two
   separate fixed sections. To put them on ONE row, both sit at top:80 (right
   below the 80px header). The filters section is transparent with
   pointer-events:none so the tabs' white bg + the Women/Men taps work through
   it; only the FILTERS button re-enables pointer-events. JS (functions.php)
   sets the exact tops + the product grid padding-top. */
@media (max-width: 767px) {
    #brxe-sfoqke,
    #brxe-uvktcx {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 300 !important;
    }
    #brxe-sfoqke {
        top: 80px !important;
        background: #fff !important;
        border-bottom: 1px solid rgba(0,0,0,0.08) !important;
        z-index: 301 !important;
    }
    #brxe-uvktcx {
        top: 80px !important;
        height: 53px !important;
        min-height: 53px !important;
        background: transparent !important;
        pointer-events: none !important;
        border-bottom: 0 !important;
        padding-bottom: 0 !important;
        z-index: 302 !important;
    }
    #brxe-uvktcx > .brxe-container {
        height: 53px !important;
        min-height: 53px !important;
        align-items: center !important;
        padding-bottom: 0 !important;
    }
    #brxe-uvktcx .brxe-irwsac {
        pointer-events: auto !important;
    }
    #brxe-wamvkx {
        padding-top: 53px !important;
    }
}

/* Shop product card — secondary (hover) image must never show on mobile.
   On desktop it fades in on :hover via opacity; on touch there is no hover,
   but a tap fires a brief hover-state that can make the secondary image flash
   or persist (especially after browser back-navigation). */
@media (max-width: 767px) {
    .product-image-hover .secondary-image {
        display: none !important;
    }
}

/* Filter sidebar panel — "Filters" title and close button must not scroll.
   The sidebar (.brxe-lezjtw) has position:fixed + overflow:auto AND a CSS
   transform (Bricks toggle), which means both position:absolute and
   position:fixed children are captured as its containing block and scroll
   with the panel content.
   Fix: title becomes position:sticky so it sticks within the scroll container;
   close button (.brxe-jpvith) gets z-index:11 to stay above the sticky title's
   white background; JS (priority 105) applies translateY(scrollTop) to counter
   the scroll drift on the close button. */
@media (max-width: 767px) {
    .brxe-lezjtw {
        padding-top: 0 !important;
    }
    .brxe-lezjtw .brxe-ldcywm {
        position: sticky !important;
        top: 0 !important;
        z-index: 10 !important;
        background: #fff !important;
        align-self: stretch !important;
        margin-left: -20px !important;
        margin-right: -20px !important;
        padding: 28px 20px 16px !important;
        margin-bottom: 16px !important;
        border-bottom: 1px solid rgba(0,0,0,0.08) !important;
    }
    .brxe-lezjtw .brxe-jpvith {
        z-index: 11 !important;
    }
}

/* Filter sidebar — equal section spacing and 44px minimum tap targets.
   Sort By section had pb:32 + mb:32 = 64px extra space vs 32px between filter
   sections. Chip wrappers were 26px; sort option labels were 19px. */
@media (max-width: 767px) {
    .brxe-lezjtw .duskitten-sort {
        padding-bottom: 16px !important;
        margin-bottom: 0 !important;
    }
    .brxe-lezjtw .brxe-srtby1 {
        padding-bottom: 12px !important;
    }
    .brxe-lezjtw .wpc-filter-label-wrapper {
        min-height: 44px !important;
        padding-top: 13px !important;
        padding-bottom: 13px !important;
        box-sizing: border-box !important;
        align-items: center !important;
    }
    .brxe-lezjtw .duskitten-sort__option {
        min-height: 44px !important;
    }
}

/* ════════════════════════════════════════════════════════════════
   Mobile padding — full-width sections double-padding fix.
   Sections with the global "full-width" class (e.g. product page
   #brxe-nyvada) carry 32px horizontal padding on the SECTION itself.
   The global container rule (above) sets their inner .brxe-container
   to 12px, so the two stack → content sat at 44px from the edge.
   Zero the section's own L/R padding; the container's 12px provides
   the edge spacing. Class-based so it covers EN + DE product templates. */
@media (max-width: 767px) {
	#brx-content .brxe-section.full-width {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
}

/* Header account icon — visual size match.
   The "person" (my-account) SVG uses the same 26x28 box + Material viewBox as
   the wishlist heart, but its glyph path is drawn smaller (~15px vs ~20px), so
   it looked smaller/misaligned next to the bag and wishlist icons. Scale the
   glyph up to match. Targeted by href (not generated ID) so it survives Bricks
   rebuilds; covers closed header + expanded-menu icon row. */
@media (max-width: 991px) {
	#brx-header .icon-container[href*="my-account"] svg {
		transform: scale(1.32);
		transform-origin: center;
	}
}

/* ════════════════════════════════════════════════════════════════
   Mobile header + offcanvas search — Figma 321-7881 / 321-7912.
   Task 1: closed header right cluster shows search + bag only (hide
   account + wishlist there; account still shows in the offcanvas).
   A mobile search icon is injected by JS (functions.php) and opens the
   offcanvas. Tasks 2-4: offcanvas search becomes an underline field
   (bottom border only) spanning full width, magnifier left, "SEARCH"
   uppercase placeholder. Border uses currentColor so it follows the
   design rule (white on home/hero, blue on the rest). ════════════════ */
@media (max-width: 991px) {
	#brx-header .toggle-search .icon-container[href*="my-account"],
	#brx-header .toggle-search .icon-container[href*="wishlist"] { display: none !important; }
	a.dk-mobile-search { display: flex !important; }

	#brxe-avtzcl { gap: 16px !important; align-items: center !important; }
	#brxe-avtzcl .brxe-search { flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; }
	#brxe-avtzcl .bricks-search-form { width: 100% !important; position: relative; }
	#brxe-avtzcl input[type="search"] {
		border: 0 !important;
		border-bottom: 1px solid currentColor !important;
		border-radius: 0 !important;
		background: transparent !important;
		padding: 4px 28px 8px 0 !important;
		width: 100% !important;
		text-transform: uppercase !important;
		letter-spacing: -0.14px !important;
		outline: none !important;
	}
	#brxe-avtzcl input[type="search"]:focus { outline: none !important; box-shadow: none !important; }
	#brxe-avtzcl input[type="search"]::placeholder { text-transform: uppercase; opacity: 0.85; }
	#brxe-avtzcl .search-clear-btn { right: 0 !important; }
}

/* SEO: suppress WooCommerce native Reviews heading — custom H2 in template [mujhap] is used instead */
.woocommerce-Reviews-title { display: none; }

/* ── Search results page — Figma 321:8438 ──────────────────────────────────── */

/* Section: margin-top removed via Bricks data; guard against any cached inline */
#brxe-27e277 { margin-top: 0 !important; }

/* Title container: pt-145 pb-64 px-64 — override already set in Bricks data,
   this guard covers any edge case where global class specificity wins */
#brxe-1e8119 { padding: 145px 64px 64px !important; }

/* Search heading: Cormorant SemiBold 24px, uppercase, brand blue */
#brxe-onxsqx {
	font-family: 'Cormorant', Georgia, serif !important;
	font-weight: 600 !important;
	font-size: 24px !important;
	text-transform: uppercase !important;
	color: var(--brand-blue) !important;
	line-height: 1 !important;
	letter-spacing: 0 !important;
}

/* Result count below heading */
.dk-search-count {
	font-family: 'Inter', sans-serif;
	font-weight: 400;
	font-size: 12px;
	text-transform: uppercase;
	color: var(--brand-blue);
	line-height: 1;
}

/* Product grid: 4px column gap, 20px row gap — override Bricks 20px uniform gap */
#brxe-cizamh {
	column-gap: 4px !important;
	row-gap: 20px !important;
}

/* ── No search results — Figma 321:8887 ────────────────────────────────────── */

/* Span all 4 grid columns so the no-results block isn't squeezed into one cell */
#brxe-6ab6ce { grid-column: 1 / -1; }

/* Container: column flex, 12px gap, align left edge with heading (qcnxzf=32px + 32px = 64px) */
#brxe-bc183d {
	display: flex !important;
	flex-direction: column !important;
	gap: 12px !important;
	padding-left: 32px !important;
	padding-bottom: 64px !important;
}

/* "Try searching with another keyword or" — Inter Regular 12px uppercase */
#brxe-a3eff2 {
	font-family: 'Inter', sans-serif !important;
	font-size: 12px !important;
	font-weight: 400 !important;
	color: var(--brand-blue) !important;
	text-transform: uppercase !important;
	line-height: 1 !important;
	letter-spacing: 0 !important;
}

/* "Start Shopping" — border-bottom underline style; override jblqpa's 12px/24px padding */
#brxe-48f3fd {
	padding: 0 !important;
	border: none !important;
	background: none !important;
	display: inline-flex !important;
	align-items: flex-end !important;
	width: fit-content !important;
}
#brxe-48f3fd a, #brxe-48f3fd a:visited {
	font-family: 'Inter', sans-serif !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	color: var(--brand-blue) !important;
	text-transform: uppercase !important;
	text-decoration: none !important;
	letter-spacing: -0.14px !important;
	line-height: 1 !important;
	border-bottom: 1px solid var(--brand-blue) !important;
	padding-bottom: 4px !important;
	display: inline-block !important;
}
#brxe-48f3fd a:hover {
	opacity: 0.7 !important;
}

/* Search icon: always show outlined, never filled */
#brxe-washkn { display: none !important; }
#brxe-byuehk { display: flex !important; }

/* Search active state — Figma 321:9228 */
#brxe-zwvavt { width: 297px; }
#brxe-ejwmvh { column-gap: 16px !important; }

/* Search active — keep header blurred regardless of hero/scroll state */
header.search-active .bg-blur {
	backdrop-filter: blur(50px) !important;
	background-color: rgba(255, 255, 255, 0.75) !important;
}
header.search-active.hero-mode .bg-blur {
	background-color: rgba(0, 0, 0, 0.08) !important;
}

/* Search autocomplete dropdown — Figma 321:9432 */
#dk-search-suggestions {
	position: absolute;
	display: none;
	flex-direction: column;
	gap: 4px;
	padding-top: 32px;
	z-index: 9999;
}

.dk-suggestion {
	display: flex;
	align-items: center;
	padding: 4px 0;
	color: white;
	font-family: 'Inter', sans-serif;
	font-weight: 400;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: -0.14px;
	line-height: normal;
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
}

.dk-suggestion .dk-sug-dim {
	color: rgba(255, 255, 255, 0.46);
}

.dk-suggestion:hover { opacity: 0.8; }

/* Non-hero pages: dark text */
header:not(.hero-mode) .dk-suggestion { color: var(--brand-blue); }
header:not(.hero-mode) .dk-suggestion .dk-sug-dim { color: rgba(28, 68, 111, 0.46); }

/* Category tabs — archive page (Women / Men / Accessories) */
.dk-category-tabs {
	display: flex;
	gap: 40px;
}

.dk-tab {
	font-family: 'Inter', sans-serif;
	font-size: 14px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: -0.14px;
	line-height: 1;
	color: rgba(28, 68, 111, 0.46);
	text-decoration: none;
	padding-bottom: 6px;
	border-bottom: 1px solid transparent;
	transition: color 0.2s, border-color 0.2s;
}

.dk-tab.dk-tab-active {
	color: var(--brand-blue);
	border-bottom-color: var(--brand-blue);
}

.dk-tab:hover {
	color: var(--brand-blue);
}

/* Hide filter row and WPC category filter */
#brxe-oaiazi { display: none !important; }
.wpc-filters-section.wpc-filter-product_cat { display: none !important; }

/* Sticky category tabs — desktop */
@media (min-width: 992px) {
	#brxe-dktabsect {
		position: sticky;
		z-index: 200;
		background-color: #fff;
	}
	#brxe-dktabcont {
		padding-top: 16px !important;
		padding-bottom: 16px !important;
	}
}

/* ── Shop / Archive — Figma 323:9742 ───────────────────────────── */

/* Tabs: Cormorant SemiBold 22px with bg fill for active (replaces underline style) */
.dk-category-tabs { gap: 8px; }

.dk-tab {
	font-family: 'Cormorant', serif;
	font-weight: 600;
	font-size: 22px;
	line-height: 1;
	letter-spacing: 0;
	color: var(--brand-blue);
	text-decoration: none;
	text-transform: none;
	padding: 8px 12px;
	background: transparent;
	border-bottom: none !important;
	opacity: 1 !important;
	transition: background-color 0.15s;
}
.dk-tab.dk-tab-active { background-color: #F6F8F9; }
.dk-tab:hover { background-color: #F6F8F9; color: var(--brand-blue); }

/* Show filter row — override previous hide, keep chips hidden */
#brxe-oaiazi { display: flex !important; }
#brxe-ntuxxt { display: none !important; }
/* Right-align the Filters toggle */
#brxe-oaiazi .brxe-twwamz { justify-content: flex-end !important; }

/* Product grid: 32px sides, 4px column-gap, 20px row-gap */
#brxe-wrukzw {
	padding-left: 32px !important;
	padding-right: 32px !important;
	padding-bottom: 64px !important;
	display: block !important;
	grid-template-columns: unset !important;
}
/* Scope to WooCommerce pages — footer benefits bar on home page shares this ID */
.woocommerce-page #brxe-irsyly,
.woocommerce-archive #brxe-irsyly {
	padding: 0 !important;
	column-gap: 4px !important;
	row-gap: 20px !important;
	grid-gap: unset !important;
}
/* Footer benefits bar — Figma: 148px top padding */
#brxe-ldnnby #brxe-irsyly {
	padding-top: 148px !important;
}

/* ── Wishlist icon — hover only ───────────────────────────────── */
.brxe-lvmgvy {
	opacity: 0;
	transition: opacity 0.2s ease;
}
.brxe-ykxnjm:hover .brxe-lvmgvy {
	opacity: 1;
}
a.wishlist-add,
a.wishlist-remove {
	background-repeat: no-repeat;
}

/* ── Filter loading state ─────────────────────────────────────── */
.the-filter-loop {
	transition: opacity 0.15s ease;
}
.the-filter-loop.dk-filtering {
	opacity: 0.35;
	pointer-events: none;
}