/*
 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 had 0 side padding on mobile so the
   headings, tables and diagrams touched the screen edges. Match the title
   section's 20px (Figma 230-2030). EN (3102) + DE (3481) share IDs. */
@media (max-width: 478px) {
	#brxe-cdwquu,
	#brxe-risrwv {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}
}

/* Our Contribution — section had 120px side padding on mobile, crushing the
   container to ~260px (title wrapped, body too narrow). Give it normal gutters
   so the title fits one line and the text is wide. EN (25) + DE (1291). */
@media (max-width: 478px) {
	#brxe-oliydq {
		padding-left: 20px !important;
		padding-right: 20px !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"] {
		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"] {
		border-color: rgba(255, 255, 255, 0.25) !important;
	}
	body.campaign-lp #brxe-pjgcqq input[type="search"]::placeholder {
		color: #fff !important;
		opacity: 1 !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) {
	#brxe-avtzcl { display: none !important; }
}

/* 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;
	}
}