/* ==========================================================================
   goldenrose.de — visual design layer
   Implements goldenrose-design-audit.md + goldenrose-homepage-blocks.md
   (audit of 2026-09-03).

   Loaded after elementor-frontend and after the Elementor per-post CSS.
   `!important` appears ONLY where an Elementor per-element rule
   (.elementor-129 .elementor-element.elementor-element-xxx) has to be beaten;
   those rules are marked. Everywhere else plain specificity is enough.

   Item codes in comments map 1:1 to the audit documents:
     G*  global chrome        H*  homepage        L*  category / listing
     P-* product page         C*  cart            D*  mini-cart drawer
     B*  homepage blocks      S*  structural
   ========================================================================== */

:root {
	/* Brand ------------------------------------------------------------- */
	--gr-rose:            #C07B7C; /* decorative only — never behind white text */
	--gr-rose-ink:        #A85558; /* AA-safe rose: 4.82:1 on white, 5.12:1 under white */
	--gr-rose-dark:       #8E4548;
	--gr-rose-tint:       #F6EDEC;
	--gr-sand:            #CFAB8A;

	/* Neutrals — warm, so nothing reads as "a different site" (cross-cutting) */
	--gr-ink:             #1C1614;
	--gr-ink-soft:        #6E655F;
	--gr-line:            #E7DEDA;
	--gr-paper:           #FFFFFF;
	--gr-paper-2:         #FBF8F7;
	--gr-black:           #14100F; /* replaces pure #000 in the footer */

	/* One content width for the whole page (S1) ------------------------- */
	--gr-content:         1400px;
	--gr-gutter:          32px;

	/* Spacing scale (S2) ------------------------------------------------ */
	--gr-space-1:         8px;
	--gr-space-2:         16px;
	--gr-space-3:         24px;
	--gr-space-4:         48px;
	--gr-space-5:         80px;
	--gr-space-6:         120px;

	--gr-radius:          4px;
	--gr-shadow:          0 1px 2px rgba(28, 22, 20, .06), 0 8px 24px rgba(28, 22, 20, .07);
}

/* ==========================================================================
   S1 — ONE content width
   The page alternated between 1190 and 1400 with no logic; the newsletter
   band sat 105px off the footer directly below it.
   ========================================================================== */

.elementor-section.elementor-section-boxed > .elementor-container {
	max-width: var(--gr-content) !important;
	padding-left: var(--gr-gutter);
	padding-right: var(--gr-gutter);
}

/* Shoptimizer's own wrapper uses the same number so header, footer,
   archive and Elementor content all share one left edge. */
.col-full,
.shoptimizer-archive .col-full {
	max-width: var(--gr-content);
}

@media (max-width: 782px) {
	:root { --gr-gutter: 20px; }
}

/* ==========================================================================
   S2 — spacing scale
   Four blocks had zero padding, the rest used 16 / 60 / 80 with no grid.
   ========================================================================== */

.elementor-129 > .elementor-section.elementor-top-section.elementor-section-boxed {
	padding-top: var(--gr-space-5) !important;
	padding-bottom: var(--gr-space-5) !important;
}

@media (max-width: 782px) {
	.elementor-129 > .elementor-section.elementor-top-section.elementor-section-boxed {
		padding-top: var(--gr-space-4) !important;
		padding-bottom: var(--gr-space-4) !important;
	}
}

/* ==========================================================================
   G4 / B2 — language switcher
   Five bare flag rectangles wedged between the nav and the icons: no labels,
   no current-language state, no dropdown, 18x12 SVGs upscaled to 25x17 and
   lazy-loaded, so DK and AT were missing on first paint and FI sat off the
   baseline.

   gr-design.js lifts those five <li> out of the primary menu and rebuilds
   them as the single labelled control styled here. Until it runs, the
   original list is hidden rather than shown broken.
   ========================================================================== */

.gr-lang {
	position: relative;
	display: flex;
	align-items: center;
	margin: 0 var(--gr-space-2);
}

.gr-lang__toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 34px;
	padding: 5px 10px;
	background: transparent;
	border: 1px solid var(--gr-line);
	border-radius: var(--gr-radius);
	font: inherit;
	font-size: 13px;
	line-height: 1.2;
	color: var(--gr-ink);
	cursor: pointer;
	white-space: nowrap;
}

.gr-lang__toggle:hover { border-color: var(--gr-ink); }

.gr-lang__toggle:focus-visible {
	outline: 3px solid var(--gr-ink);
	outline-offset: 2px;
}

.gr-lang__toggle::after {
	content: "";
	width: 0;
	height: 0;
	margin-left: 2px;
	border: 4px solid transparent;
	border-top-color: currentColor;
	transform: translateY(2px);
	transition: transform .15s ease;
}

.gr-lang__toggle[aria-expanded="true"]::after {
	transform: translateY(-2px) rotate(180deg);
}

/* Flags ship at their natural 18x12 instead of being upscaled to 25x17. */
.gr-lang__flag {
	width: 18px;
	height: 12px;
	display: block;
	flex: 0 0 18px;
	border-radius: 1px;
	box-shadow: 0 0 0 1px rgba(28, 22, 20, .14);
}

.gr-lang__panel {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	min-width: 190px;
	margin: 0;
	padding: 4px;
	list-style: none;
	background: var(--gr-paper);
	border: 1px solid var(--gr-line);
	border-radius: var(--gr-radius);
	box-shadow: var(--gr-shadow);
	z-index: 1000;
}

.gr-lang__panel[hidden] { display: none; }

.gr-lang__panel a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 10px;
	border-radius: 3px;
	font-size: 13.5px;
	line-height: 1.2;
	color: var(--gr-ink);
	text-decoration: none;
}

.gr-lang__panel a:hover,
.gr-lang__panel a:focus-visible { background: var(--gr-rose-tint); }

.gr-lang__panel [aria-current="true"] {
	font-weight: 700;
}

.gr-lang__panel [aria-current="true"]::after {
	content: "\2713";
	margin-left: auto;
	color: var(--gr-rose-ink);
}

/* Hidden only once the replacement exists, so a JS failure leaves the
   original switcher working. */
.gr-lang-ready li.wpml-ls-menu-item { display: none !important; }

@media (max-width: 992px) {
	.gr-lang { margin: var(--gr-space-2) 0; }
	.gr-lang__panel { left: 0; right: auto; }
}

/* ==========================================================================
   G1 / G2 — announcement bar
   Column one carried two claims and read as a run-on. One claim per column,
   evenly distributed. (The text itself is normalised in PHP.)
   ========================================================================== */

.top-bar .col-full {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	align-items: center;
	gap: var(--gr-space-3);
}

.top-bar-left,
.top-bar-center,
.top-bar-right {
	float: none;
	width: auto;
	text-align: center;
	font-size: 13px;
	line-height: 1.4;
}

.top-bar-left  { text-align: left; }
.top-bar-right { text-align: right; }

.top-bar-right .custom-html-widget > div {
	justify-content: flex-end;
}

.top-bar p { margin: 0; }

/* ==========================================================================
   G5 — sticky header had no border or shadow, so product images scrolled
   straight under it.
   ========================================================================== */

body .header-4-container,
body .sticky-d .site-header,
body.sticky-wrapper-active .header-4-container {
	border-bottom: 1px solid var(--gr-line);
	background: var(--gr-paper);
}

body.sticky-wrapper-active .header-4-container,
body .header-4-container.is-sticky {
	box-shadow: 0 6px 18px rgba(28, 22, 20, .07);
}

/* ==========================================================================
   B4 / H1 / H2 — hero
   The section is now a still image (the YouTube background video is gone —
   see gr-design.php). These rules give it a scrim and lay out the copy that
   the Elementor patch injected.
   ========================================================================== */

.elementor-129 .elementor-element-6fcda3c4 {
	/* Mid-tone from the photograph, so there is never a black block on load. */
	background-color: #E9DFDA !important;
	background-attachment: scroll !important; /* fixed attachment breaks on iOS */
}

/* Left-hand scrim: the headline sits over the pale part of the photograph,
   so contrast has to be created rather than hoped for. */
.elementor-129 .elementor-element-6fcda3c4 > .elementor-background-overlay {
	background-image: linear-gradient(
		90deg,
		rgba(255, 255, 255, .92) 0%,
		rgba(255, 255, 255, .78) 34%,
		rgba(255, 255, 255, 0)   62%
	) !important;
	background-color: transparent !important;
	opacity: 1 !important;
}

/* The hero section is full-bleed, so the copy needs the page's own gutter
   to line up with everything below it (S1). */
.elementor-element-c2a33af > .elementor-widget-wrap,
.gr-hero-col > .elementor-widget-wrap {
	max-width: var(--gr-content);
	margin: 0 auto;
	padding: var(--gr-space-5) var(--gr-gutter) !important;
	/* Elementor's widget wrap is a flex ROW that relies on per-element CSS
	   for widths, and these three widgets have none — so without this the
	   headline, subhead and button lay out side by side. */
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
}

.elementor-element-c2a33af > .elementor-widget-wrap > .elementor-element,
.gr-hero-col > .elementor-widget-wrap > .elementor-element {
	width: 100%;
}

/* px, not ch: the widget wrapper's own font-size is ~18px while the headline
   inside it is ~49px, so a ch-based cap here sizes the box to the wrong
   text and breaks the headline mid-word. */
.gr-hero-copy {
	max-width: 640px;
}

.gr-hero-sub {
	max-width: 520px;
}

.gr-hero-copy .elementor-heading-title,
.gr-hero-copy h1 {
	font-size: clamp(30px, 3.4vw, 52px);
	line-height: 1.12;
	letter-spacing: -.01em;
	color: var(--gr-ink);
	margin: 0 0 var(--gr-space-2);
}

.gr-hero-sub p {
	font-size: clamp(15px, 1.25vw, 19px);
	line-height: 1.5;
	color: #4A403B;
	margin: 0 0 var(--gr-space-3);
}

.gr-hero-cta .elementor-button {
	background-color: var(--gr-rose-ink);
	color: #fff;
	border: 0;
	border-radius: var(--gr-radius);
	padding: 15px 30px;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .02em;
}

.gr-hero-cta .elementor-button:hover,
.gr-hero-cta .elementor-button:focus {
	background-color: var(--gr-rose-dark);
	color: #fff;
}

@media (max-width: 782px) {
	.elementor-129 .elementor-element-6fcda3c4 {
		background-position: 72% center !important;
	}
	.gr-hero-copy,
	.gr-hero-sub { max-width: none; }
	.elementor-129 .elementor-element-6fcda3c4 > .elementor-background-overlay {
		background-image: linear-gradient(
			180deg,
			rgba(255, 255, 255, .90) 0%,
			rgba(255, 255, 255, .74) 46%,
			rgba(255, 255, 255, .30) 100%
		) !important;
	}
}

/* ==========================================================================
   B5 / H3 / H4 — FACE / LIPS / EYES tiles
   50px white display type over pale rose photographs with no overlay: the
   contrast wasn't low, it was uncontrolled — it changed with whatever part
   of the photo sat behind the letterform.
   ========================================================================== */

.elementor-129 .elementor-element-4587a40 .elementor-cta__bg-overlay {
	background-image: linear-gradient(
		180deg,
		rgba(20, 16, 15, .10) 0%,
		rgba(20, 16, 15, .48) 62%,
		rgba(20, 16, 15, .68) 100%
	) !important;
	opacity: 1 !important;
}

.elementor-129 .elementor-element-4587a40 .elementor-cta__content {
	padding: var(--gr-space-4) var(--gr-space-3);
	/* H4: the FACE crop ran the bottle row behind the button and cut it
	   mid-bottle. Pulling the content block down clears the product row. */
	justify-content: flex-end;
}

.elementor-129 .elementor-element-4587a40 .elementor-cta__title {
	text-shadow: 0 1px 18px rgba(20, 16, 15, .45);
	margin-bottom: var(--gr-space-2);
}

/* SHOP NOW was a 1px white outline — the weakest possible affordance
   over a busy image. */
.elementor-129 .elementor-element-4587a40 .elementor-cta__button {
	background-color: var(--gr-paper) !important;
	color: var(--gr-ink) !important;
	border: 0 !important;
	border-radius: var(--gr-radius);
	padding: 13px 26px;
	font-weight: 600;
	letter-spacing: .04em;
	box-shadow: 0 2px 14px rgba(20, 16, 15, .25);
}

.elementor-129 .elementor-element-4587a40 .elementor-cta:hover .elementor-cta__button {
	background-color: var(--gr-rose-ink) !important;
	color: #fff !important;
}

/* ==========================================================================
   B6 / H5 — the H1 was the weakest heading on the page (26px at
   line-height 1.0, against 50px tiles and a 65px "4 WERTE").
   The decorative script sat below it; as an eyebrow it belongs above.
   ========================================================================== */

.elementor-129 .elementor-element-d31541f > .elementor-widget-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

/* script "style & beauty" -> above the H1 */
.elementor-129 .elementor-element-ff3747b { order: 1; margin-bottom: var(--gr-space-2) !important; }
.elementor-129 .elementor-element-d6f26c0 { order: 2; }
.elementor-129 .elementor-element-be0c7b1 { order: 3; }
.elementor-129 .elementor-element-b8ed015 { order: 4; width: 100%; }
.elementor-129 .elementor-element-bd3bbda { order: 5; width: 100%; }

.elementor-129 .elementor-element-d6f26c0 .elementor-heading-title {
	font-size: clamp(28px, 3vw, 46px) !important;
	line-height: 1.15 !important;
	max-width: 22ch;
	margin: 0 auto var(--gr-space-3);
	color: var(--gr-ink) !important;
}

.elementor-129 .elementor-element-be0c7b1 {
	max-width: 68ch;
	margin: 0 auto var(--gr-space-4);
}

/* ==========================================================================
   B7 / H6 — six trust badges
   Icon-to-label gap ~60px against a column-to-column gap of ~370px, so the
   pairs didn't read as pairs.
   ========================================================================== */

.elementor-129 .elementor-element-b8ed015 > .elementor-container,
.elementor-129 .elementor-element-bd3bbda > .elementor-container {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--gr-space-3) var(--gr-space-4);
	justify-items: center;
}

.elementor-129 .elementor-element-b8ed015 .elementor-image-box-wrapper,
.elementor-129 .elementor-element-bd3bbda .elementor-image-box-wrapper {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 14px;                                    /* was ~60px */
	text-align: left;
}

.elementor-129 .elementor-element-b8ed015 .elementor-image-box-img,
.elementor-129 .elementor-element-bd3bbda .elementor-image-box-img {
	margin: 0 !important;
	width: 44px;
	flex: 0 0 44px;
}

.elementor-129 .elementor-element-b8ed015 .elementor-image-box-description,
.elementor-129 .elementor-element-bd3bbda .elementor-image-box-description {
	margin: 0;
	font-size: 15px;
	line-height: 1.35;
	color: #4A403B;
}

@media (max-width: 782px) {
	.elementor-129 .elementor-element-b8ed015 > .elementor-container,
	.elementor-129 .elementor-element-bd3bbda > .elementor-container {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--gr-space-2);
	}
}

/* ==========================================================================
   B9 / H8-H10 — "HIGHLIGHTED" product row
   ========================================================================== */

/* H8: dated hairline-flanked, wide-letterspaced English heading. */
.elementor-129 .elementor-element-9b2dcce .elementor-divider__text {
	font-size: clamp(22px, 2.2vw, 32px) !important;
	letter-spacing: .01em !important;
	font-weight: 600 !important;
	color: var(--gr-ink) !important;
	padding: 0 var(--gr-space-3) !important;
}

.elementor-129 .elementor-element-9b2dcce .elementor-divider-separator {
	border-top-color: var(--gr-line) !important;
}

/* H9: "Nude Look Baked Trio Face Powder" wrapped to two lines and dropped
   its price 23px below the other four. No min-height on the title. */
.elementor-129 ul.products li.product,
ul.products li.product {
	display: flex;
	flex-direction: column;
}

/* !important because mu-plugins/gr-audit-fixes.php prints an inline
   min-height:24px on the same selector from wp_head at priority 100, i.e.
   after this file. 2.7em (~40px) satisfies that rule's WCAG 2.2 target-size
   intent as well, so the two do not actually disagree. */
ul.products li.product .woocommerce-loop-product__title,
ul.products li.product h2.woocommerce-loop-product__title {
	min-height: 2.7em !important;
	display: block;
	font-size: 15px;
	line-height: 1.35;
	color: var(--gr-ink);
}

ul.products li.product .price {
	margin-top: auto;
}

/* H10 / L2 / L3: three subject scales and two backgrounds inside one row.
   One frame, one background, one padding ratio, subject scaled to fit. */
ul.products li.product a img,
ul.products li.product .cgkit-product-image img,
ul.products li.product .woocommerce-LoopProduct-link img {
	aspect-ratio: 1 / 1;
	width: 100%;
	height: auto;
	object-fit: contain;
	background: var(--gr-paper-2);
	padding: 6%;
	border-radius: var(--gr-radius);
	/* Cross-cutting: reserve the space so a lazy image never leaves a hole. */
	min-height: 0;
}

/* ==========================================================================
   B10 / H12-H15 — "WAS IST FÜR UNS WICHTIG? / 4 WERTE"
   ========================================================================== */

/* H12 / B10: both headings are white over a background image with no scrim. */
.elementor-129 .elementor-element-65344f1b .elementor-element-74626066 {
	position: relative;
}

.elementor-129 .elementor-element-65344f1b .elementor-element-cd1c97d h5,
.elementor-129 .elementor-element-65344f1b .elementor-element-cd1c97d p {
	color: #fff !important;
	text-shadow: 0 1px 14px rgba(20, 16, 15, .55);
	letter-spacing: .12em;
	font-size: 15px !important;
}

.elementor-129 .elementor-element-2380cbdf .elementor-heading-title {
	text-shadow: 0 2px 20px rgba(20, 16, 15, .45);
	font-size: clamp(34px, 4.4vw, 58px) !important;
}

/* B11 / H17: three elements sat in .elementor-invisible until scrolled into
   view, so on a fast scroll-past a CTA was simply absent. Anything that
   carries a call to action must not depend on an entrance animation. */
.elementor-129 .elementor-element-2380cbdf.elementor-invisible,
.elementor-129 .elementor-element-cd1c97d.elementor-invisible,
.elementor-129 .elementor-element-831bc6d.elementor-invisible,
.elementor-129 .elementor-element-6fcda3c4 .elementor-invisible {
	visibility: visible !important;
	animation: none !important;
	opacity: 1 !important;
}

/* H15: flat white rectangles with ~90px of dead space under the body copy. */
.elementor-129 .elementor-element-782e0450 > .elementor-container {
	align-items: stretch;
	gap: var(--gr-space-3);
}

.elementor-129 .elementor-element-782e0450 > .elementor-container > .elementor-column > .elementor-widget-wrap {
	background: var(--gr-paper);
	border: 1px solid var(--gr-line);
	border-radius: 6px;
	box-shadow: var(--gr-shadow);
	padding: var(--gr-space-3) var(--gr-space-3) var(--gr-space-3) !important;
	align-content: flex-start;
}

/* B10: card eyebrow was rgb(107,116,126) — a cool slate grey in an
   otherwise warm rose palette. Warm grey at the same lightness. */
.elementor-129 .elementor-element-1ae346d7 .elementor-heading-title,
.elementor-129 .elementor-element-3e1b4800 .elementor-heading-title,
.elementor-129 .elementor-element-5bb6d082 .elementor-heading-title,
.elementor-129 .elementor-element-46dbbb1  .elementor-heading-title {
	color: #7A6E67 !important;               /* 4.63:1 on white */
	font-size: 13px !important;
	letter-spacing: .14em;
	margin-bottom: 6px !important;
}

/* H14: every card title broke onto two lines — "Preis und / Qualität",
   "Tierversuche / frei", "Veganes / Sammlung", "Verhinderung / Kinderarbeit".
   30px in a card this narrow cannot hold a two-word headline. */
.elementor-129 .elementor-element-44683037 .elementor-heading-title,
.elementor-129 .elementor-element-401663a3 .elementor-heading-title,
.elementor-129 .elementor-element-1c53721e .elementor-heading-title,
.elementor-129 .elementor-element-b21f929  .elementor-heading-title {
	font-size: 21px !important;
	line-height: 1.25 !important;
	font-weight: 600 !important;
	text-wrap: balance;
	margin-bottom: var(--gr-space-2) !important;
	color: var(--gr-ink) !important;
}

.elementor-129 .elementor-element-782e0450 .elementor-widget-image {
	margin-bottom: var(--gr-space-2) !important;
}

.elementor-129 .elementor-element-782e0450 .elementor-widget-image img {
	width: 64px !important;
	height: auto;
}

.elementor-129 .elementor-element-782e0450 .elementor-widget-text-editor p {
	font-size: 14.5px;
	line-height: 1.55;
	margin-bottom: 0;
}

@media (max-width: 1024px) {
	.elementor-129 .elementor-element-782e0450 > .elementor-container {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.elementor-129 .elementor-element-782e0450 > .elementor-container > .elementor-column {
		width: 100% !important;
	}
}

@media (max-width: 600px) {
	.elementor-129 .elementor-element-782e0450 > .elementor-container {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   B11 / H16 — bronzer + brushstroke
   A white-background product photo laid as a hard-edged rectangle on top of
   a black paint-stroke graphic, unmasked and unblended.
   multiply drops the white ground and leaves the product on the stroke.
   ========================================================================== */

.elementor-129 .elementor-element-f931d8c img {
	mix-blend-mode: multiply;
}

.elementor-129 .elementor-element-831bc6d .elementor-button {
	background-color: var(--gr-rose-ink) !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: var(--gr-radius);
	padding: 14px 28px;
	font-weight: 600;
}

.elementor-129 .elementor-element-831bc6d .elementor-button:hover {
	background-color: var(--gr-rose-dark) !important;
}

/* ==========================================================================
   B12 / B13 / G7 — newsletter band
   Container 1400 at left 260 against a footer of 1190 at left 365; the
   105px jog was the most visible alignment error on the page. S1 fixes the
   width; these fix the band itself.
   ========================================================================== */

.elementor-element-3651601b .elementor-widget-heading .elementor-heading-title {
	font-size: clamp(24px, 2.4vw, 34px) !important;
	line-height: 1.2;
}

/* The submit button was the only black element in a rose-and-beige palette
   until the footer. */
.elementor-element-3651601b input[type="submit"],
.elementor-element-3651601b button[type="submit"],
.elementor-element-3651601b .elementor-button,
.wpcf7-form input[type="submit"] {
	background-color: var(--gr-rose-ink) !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: var(--gr-radius) !important;
	padding: 14px 26px !important;
	font-weight: 600;
}

.elementor-element-3651601b input[type="submit"]:hover,
.elementor-element-3651601b button[type="submit"]:hover {
	background-color: var(--gr-rose-dark) !important;
}

/* Input and button were hard-edged rectangles jammed together with no gap. */
.elementor-element-3651601b form {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gr-space-1);
	align-items: stretch;
}

.elementor-element-3651601b input[type="email"],
.elementor-element-3651601b input[type="text"] {
	flex: 1 1 240px;
	border: 1px solid var(--gr-line) !important;
	border-radius: var(--gr-radius) !important;
	padding: 14px 16px !important;
	min-height: 48px;
}

/* ==========================================================================
   B14 / G8-G10 — footer
   ========================================================================== */

/* Pure #000 was unrelated to the rest of the palette. */
.elementor-element-491c13f,
.site-footer {
	background-color: var(--gr-black) !important;
}

/* G8: columns so narrow that nearly every line wrapped badly, with the
   logo column pushed hard right leaving a gap in the middle. */
.elementor-element-491c13f > .elementor-container {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1.1fr;
	gap: var(--gr-space-4);
	align-items: start;
}

.elementor-element-491c13f > .elementor-container > .elementor-column {
	width: auto !important;
}

@media (max-width: 1024px) {
	.elementor-element-491c13f > .elementor-container {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--gr-space-3);
	}
}

@media (max-width: 600px) {
	.elementor-element-491c13f > .elementor-container {
		grid-template-columns: 1fr;
	}
}

/* Column headings were H4 at 18px/500 — barely distinguishable from the
   16px body beneath them. */
.elementor-element-491c13f h4.elementor-heading-title {
	font-size: 14px !important;
	font-weight: 700 !important;
	letter-spacing: .12em;
	text-transform: uppercase;
	margin-bottom: var(--gr-space-2) !important;
}

.elementor-element-491c13f p,
.elementor-element-491c13f .elementor-icon-list-text {
	font-size: 14.5px;
	line-height: 1.65;
}

/* G9 / B14: literal ">" characters typed in as bullets. The PHP layer strips
   them and marks the item with .gr-chev; this draws a real one. */
.gr-chev {
	position: relative;
	display: block;
	padding-left: 1.05em;
}

.gr-chev::before {
	content: "\203A";                 /* › */
	position: absolute;
	left: 0;
	top: 0;
	opacity: .55;
}

/* The icon-list items carried the same typed ">" and are always list items,
   so they get the marker structurally rather than via a class. */
.elementor-element-491c13f .elementor-icon-list-text {
	position: relative;
	display: inline-block;
	padding-left: 1.05em;
}

.elementor-element-491c13f .elementor-icon-list-text::before {
	content: "\203A";
	position: absolute;
	left: 0;
	top: 0;
	opacity: .55;
}

.elementor-element-491c13f .elementor-icon-list-item > a {
	padding: 3px 0;
}

/* G10: the copyright block was centred under a right-aligned logo while
   every other footer element was left-aligned, at ~11px grey on black. */
.elementor-element-e074bc1 > .elementor-widget-wrap {
	text-align: left !important;
	align-items: flex-start;
}

.elementor-element-6247e13 img {
	max-width: 150px;
	height: auto;
}

.elementor-element-cbddaba,
.elementor-element-cbddaba p {
	text-align: left !important;
	font-size: 13px !important;
	line-height: 1.6;
	color: #B9ADA7 !important;         /* 6.9:1 on #14100F */
}

/* Footer social icons: give them a real target size. */
.elementor-element-491c13f .elementor-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 32px;
	min-height: 32px;
}

/* ==========================================================================
   B15 / G11 — payment badge row
   Ten badges at inconsistent sizes, aspect ratios and backgrounds. One
   height, one alignment, one background.
   ========================================================================== */

.elementor-element-c732ea4 > .elementor-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: var(--gr-space-2);
}

.elementor-element-c732ea4 > .elementor-container > .elementor-column {
	width: auto !important;
	flex: 0 0 auto;
}

.elementor-element-c732ea4 .elementor-widget-wrap {
	padding: 0 !important;
}

.elementor-element-c732ea4 .elementor-icon svg {
	height: 26px !important;
	width: auto !important;
	max-width: 44px;
	display: block;
}

.elementor-element-c732ea4 .elementor-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 36px;
	min-width: 54px;
	padding: 4px 8px;
	background: var(--gr-paper);
	border: 1px solid var(--gr-line);
	border-radius: var(--gr-radius);
}

/* ==========================================================================
   B16 / G6 — cookie pill
   Was an unstyled white rectangle pinned bottom-left, sitting directly on
   top of the FACE tile's SHOP NOW button. Moved and restyled — the
   positioning itself lives in gr-consent.php, this is the chrome.
   ========================================================================== */

.gr-consent-reopen {
	box-shadow: 0 2px 10px rgba(28, 22, 20, .14);
	opacity: .8;
	font-size: 11.5px;
	padding: 6px 12px;
}

.gr-consent-reopen:hover {
	opacity: 1;
}

/* Bottom-right clears the FACE tile's SHOP NOW, but it lands on the cart
   drawer's secondary button instead. The drawer is a modal, so the pill has
   no business being on top of it. */
body.drawer-open .gr-consent-reopen {
	display: none !important;
}

/* ==========================================================================
   B8 / H7 — TikTok block
   Hidden in the Elementor data (one click to restore). This keeps the
   button presentable for as long as it is shown anywhere.
   ========================================================================== */

.gr-tiktok-btn {
	background: var(--gr-ink);
	color: #fff !important;
	border-color: var(--gr-ink) !important;
}

/* ==========================================================================
   L — category / listing
   ========================================================================== */

/* L1: three columns at 1440px, so cells were ~390px wide with the product
   occupying a fraction of them and roughly six products visible per screen
   out of 73.

   Shoptimizer lays the loop out with flexbox and per-item percentage
   widths, which is why a grid-template-columns rule on its own does
   nothing here — the list has to become a grid first.

   L9: the row gap (~170px) was roughly triple the column gutter (~55px), so
   rows read as disconnected. One gap value fixes both. */
/* Scoped to the WooCommerce archives. The homepage "Highlighted" row is an
   Elementor Products widget whose ul also carries .elementor-grid and is
   laid out by Elementor's own grid variables — forcing display:grid on it
   collapses the row to zero width. */
.shoptimizer-archive ul.products:not(.elementor-grid) {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	column-gap: var(--gr-space-3) !important;
	row-gap: var(--gr-space-4) !important;
	margin-left: 0;
	margin-right: 0;
}

@media (min-width: 768px) {
	.shoptimizer-archive ul.products:not(.elementor-grid) {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}
}

@media (min-width: 1200px) {
	.shoptimizer-archive ul.products:not(.elementor-grid) {
		grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	}
}

@media (min-width: 1600px) {
	.shoptimizer-archive ul.products:not(.elementor-grid) {
		grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
	}
}

.shoptimizer-archive ul.products:not(.elementor-grid) li.product {
	width: auto !important;
	max-width: none !important;
	float: none !important;
	margin: 0 !important;
	clear: none !important;
}

/* Related / cross-sell / up-sell lists, mobile only.
 *
 * Below 992px Shoptimizer turns these four lists into a horizontal
 * scroll-snap carousel: the <ul> gets overflow-x:scroll and a negative left
 * margin, and each card is pinned to a fixed 320px via BOTH max-width and
 * min-width. The grid rule above overrides the display with !important but
 * only neutralises max-width, so min-width:320px survived into a ~158px grid
 * track and every card overhung its neighbour by about 138px. That is the
 * partial overlap; the leftover overflow-x:scroll is what let it hide.
 *
 * min-width:0 is also what stops a grid item's automatic minimum size from
 * floating on its content, so a long product title cannot re-widen the track.
 *
 * Deliberately scoped to these four selectors, matching the theme's own
 * carousel rule exactly. Plain shop and category lists never carry the 320px
 * floor, so they are left alone.
 */
@media (max-width: 992px) {

	.related.products ul.products,
	.upsells.products ul.products,
	.cross-sells ul.products,
	.mobile-scroll ul.products {
		/* The theme widens the list to calc(100% + 1.95em) and pulls it left
		   15px so the carousel can bleed past the container edge. A grid has
		   to stay inside its container, or the last column hangs off-screen. */
		width: 100% !important;
		overflow-x: visible !important;
		scroll-snap-type: none !important;
		margin-left: 0 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	.related.products ul.products li.product,
	.upsells.products ul.products li.product,
	.cross-sells ul.products li.product,
	.mobile-scroll ul.products li.product {
		min-width: 0 !important;
		max-width: none !important;
		scroll-snap-align: none !important;
	}
}

/* L7: the breadcrumb sat below the H1 and description on the archive but
   above the H1 on the PDP. Above, in both. */
.shoptimizer-archive .archive-header .col-full {
	display: flex;
	flex-direction: column;
}

.shoptimizer-archive .woocommerce-breadcrumb { order: -1; margin-bottom: var(--gr-space-2); }

/* L6: the category description is the meta description verbatim — three
   lines of grey keyword copy above the fold. Capped, and it expands on
   hover/focus so nothing is hidden from a reader or a crawler. */
.shoptimizer-archive .term-description {
	max-width: 72ch;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--gr-ink-soft);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.shoptimizer-archive .term-description:hover,
.shoptimizer-archive .term-description:focus-within {
	-webkit-line-clamp: unset;
	overflow: visible;
}

/* ==========================================================================
   P — product page
   ========================================================================== */

/* P-2 / P-3: the seven swatches were ~55px photographs of the entire closed
   palette, so all seven read as the same beige-brown rectangle. Until the
   shade imagery is reshot, the shade NUMBER is what tells 01 from 05 —
   which is also how the shop names them. */
.cgkit-attribute-swatches li.cgkit-attribute-swatch {
	position: relative;
	margin: 0 10px 26px 0 !important;
}

.cgkit-attribute-swatches li.cgkit-attribute-swatch[data-cgkit-tooltip]::after {
	content: attr(data-cgkit-tooltip);
	position: absolute;
	left: 0;
	right: 0;
	bottom: -19px;
	text-align: center;
	font-size: 11px;
	line-height: 1.2;
	color: var(--gr-ink-soft);
	letter-spacing: .02em;
	pointer-events: none;
}

.cgkit-attribute-swatches .cgkit-swatch {
	border: 1px solid var(--gr-line);
	border-radius: var(--gr-radius);
	overflow: hidden;
	padding: 0;
	background: var(--gr-paper-2);
	transition: box-shadow .12s ease, border-color .12s ease;
}

.cgkit-attribute-swatches .cgkit-swatch img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* There was no visible selected state at all. */
.cgkit-attribute-swatches .cgkit-swatch-selected,
.cgkit-attribute-swatches .cgkit-swatch[aria-pressed="true"],
.cgkit-attribute-swatches li.cgkit-as-selected .cgkit-swatch {
	border-color: var(--gr-rose-ink);
	box-shadow: 0 0 0 2px var(--gr-rose-ink);
}

.cgkit-attribute-swatches li.cgkit-attribute-swatch:has(.cgkit-swatch-selected)::after {
	color: var(--gr-ink);
	font-weight: 700;
}

.cgkit-attribute-swatches .cgkit-swatch:focus-visible {
	outline: 3px solid var(--gr-ink);
	outline-offset: 2px;
}

/* P-3: the label position was occupied by the empty state, so the control
   appeared to be called "Colour: no selection". */
.cgkit-chosen-attribute.no-selection {
	font-style: italic;
	font-weight: 400;
	color: var(--gr-ink-soft);
}

.cgkit-chosen-attribute:not(.no-selection) {
	font-weight: 700;
	color: var(--gr-ink);
}

/* P-4: the button is pale rose with white text and reads as broken. It is
   disabled pending a shade selection, and nothing said so. */
.gr-atc-hint {
	margin: 0 0 8px;
	font-size: 13.5px;
	line-height: 1.4;
	color: var(--gr-rose-ink);
}

.gr-atc-hint[hidden] { display: none; }

.single_add_to_cart_button.disabled,
.single_add_to_cart_button:disabled {
	cursor: not-allowed;
	opacity: .8;
}

/* P-5: the main image floated in a large bordered box with the product
   filling maybe 60% of it. */
.single-product div.product .woocommerce-product-gallery__image img {
	background: var(--gr-paper-2);
	border-radius: 6px;
}

.single-product div.product .woocommerce-product-gallery {
	border: 0;
}

/* P-6: below the main image the gallery became a 2-up mosaic of mismatched
   crops. One frame, one ratio. */
.single-product .woocommerce-product-gallery__image img,
.single-product .cgkit-product-gallery img {
	aspect-ratio: 1 / 1;
	object-fit: contain;
	width: 100%;
	height: auto;
}

/* P-7: the image column ended while the buy column continued, orphaning the
   short description ~200px below the buy box. */
.single-product div.product .summary {
	align-self: start;
}

.single-product div.product .summary > * + * {
	margin-top: var(--gr-space-2);
}

/* P-9: unlabelled circular prev/next arrows floating at the far right of
   the H1 row (aria-labels are added in PHP; this makes them look deliberate). */
.shoptimizer-product-prevnext > a {
	border: 1px solid var(--gr-line);
	border-radius: 50%;
	color: var(--gr-ink-soft);
}

/* P-10: the price had no visual weight relative to the H1. */
.single-product div.product .summary p.price,
.single-product div.product .summary .price,
.single-product .cgkit-as-variation-price .price {
	font-size: 26px;
	font-weight: 700;
	color: var(--gr-ink);
	line-height: 1.2;
}

.single-product .summary .gr-price-note {
	font-size: 13px;
	font-weight: 400;
	color: var(--gr-ink-soft);
}

/* ==========================================================================
   C — cart page (WooCommerce Cart block)
   ========================================================================== */

/* C1: ~5 seconds of grey skeleton before line items and the total appear.
   A branded skeleton reads as loading rather than as broken. */
.wp-block-woocommerce-cart.is-loading {
	min-height: 60vh;
}

.wp-block-woocommerce-cart.is-loading::before {
	content: "";
	display: block;
	height: 320px;
	border-radius: 6px;
	background: linear-gradient(100deg, var(--gr-paper-2) 30%, var(--gr-rose-tint) 50%, var(--gr-paper-2) 70%);
	background-size: 200% 100%;
	animation: gr-shimmer 1.4s ease-in-out infinite;
}

@keyframes gr-shimmer {
	from { background-position: 160% 0; }
	to   { background-position: -60% 0; }
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-woocommerce-cart.is-loading::before { animation: none; }
}

/* C6: ~40px thumbnails on a cosmetics cart is where order errors come from. */
.wc-block-cart-item__image img,
.wc-block-components-order-summary-item__image img {
	width: 84px !important;
	height: 84px !important;
	object-fit: contain;
	background: var(--gr-paper-2);
	border-radius: var(--gr-radius);
	padding: 4px;
}

/* C9: product names were low-contrast rose links. */
.wc-block-components-product-name {
	color: var(--gr-ink) !important;
	font-weight: 600;
	text-decoration: none;
}

.wc-block-components-product-name:hover {
	color: var(--gr-rose-ink) !important;
	text-decoration: underline;
}

/* C6: the shade was text-only, set small and grey. */
.wc-block-components-product-details__farbe,
.wc-block-components-product-details {
	font-size: 13.5px;
	color: #4A403B;
}

.wc-block-components-product-details__name {
	font-weight: 600;
}

/* C10: hairline-bordered steppers with small hit targets. */
.wc-block-components-quantity-selector {
	border: 1px solid var(--gr-line);
	border-radius: var(--gr-radius);
	min-height: 44px;
}

.wc-block-components-quantity-selector__button {
	min-width: 40px;
	min-height: 42px;
	font-size: 18px;
	color: var(--gr-ink);
}

/* C12: "Weiter zur Kasse" was white on dusty rose. */
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.wp-block-woocommerce-cart .wc-block-cart__submit-container a {
	background-color: var(--gr-rose-ink) !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: var(--gr-radius) !important;
	min-height: 52px;
	font-weight: 600;
	font-size: 16px;
}

/* C11: at 1440px the cart filled the top third and left a large void. */
.wp-block-woocommerce-cart {
	max-width: var(--gr-content);
	margin-inline: auto;
	padding-bottom: var(--gr-space-4);
}

/* C4 / C7 / C8 — the free-shipping bar and the VAT line injected by
   gr-design.js / gr-design.php. */
.gr-freeship {
	margin: var(--gr-space-2) 0;
	padding: 12px 14px;
	background: var(--gr-rose-tint);
	border: 1px solid #EBDCDA;
	border-radius: var(--gr-radius);
	font-size: 13.5px;
	line-height: 1.45;
	color: #4A403B;
}

.gr-freeship__msg strong { color: var(--gr-ink); }

.gr-freeship__track {
	margin-top: 8px;
	height: 6px;
	border-radius: 3px;
	background: #EADCDA;
	overflow: hidden;
}

.gr-freeship__bar {
	display: block;
	height: 100%;
	width: 0;
	border-radius: 3px;
	background: var(--gr-rose-ink);
	transition: width .35s ease;
}

.gr-freeship--reached {
	background: #EEF6F1;
	border-color: #D5E8DD;
}

.gr-freeship--reached .gr-freeship__bar { background: #2A7A52; }

.gr-tax-note {
	margin: 6px 0 0;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--gr-ink-soft);
}

.gr-tax-note a { color: inherit; text-decoration: underline; }

/* ==========================================================================
   D — mini-cart drawer
   "The worst-designed component on the site, and it sits directly on the
   path to checkout." Every control in it was an unstyled default.

   IMPORTANT for anyone editing this: the drawer is Shoptimizer's shell
   (.shoptimizer-mini-cart-wrap) filled by the WooCommerce cart widget, but
   the widget's template is overridden by Elementor Pro
   (pro-elements/modules/woocommerce/wc-templates/cart/mini-cart.php).
   So the markup is .elementor-menu-cart__* — NOT WooCommerce's
   .woocommerce-mini-cart-item — and Elementor's template fires only
   woocommerce_before_mini_cart_contents and woocommerce_mini_cart_contents.
   ========================================================================== */

/* D15: the drawer's left edge had no shadow and the scrim barely dimmed the
   page, so a white panel abutted white page content. */
/* Only while open. Parked off-canvas just past the right edge, the shadow
   reached ~65px into the page and greyed the right side of every product
   page on phones (mobile test 2026-09-23). Shoptimizer sets body.drawer-open. */
body.drawer-open .shoptimizer-mini-cart-wrap {
	box-shadow: -18px 0 48px rgba(28, 22, 20, .18);
}

.menu-overlay.is-active,
.shoptimizer-cart-drawer-open .menu-overlay,
body.cart-drawer-open .menu-overlay {
	background: rgba(20, 16, 15, .45);
}

/* D12: no drawer header — the panel opened straight onto a product photo,
   with a bare x floating in the corner unaligned with any content edge. */
.shoptimizer-mini-cart-wrap .cart-drawer-heading {
	display: flex;
	align-items: center;
	min-height: 56px;
	padding: 0 20px;
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .02em;
	color: var(--gr-ink);
	border-bottom: 1px solid var(--gr-line);
	background: var(--gr-paper);
}

.shoptimizer-mini-cart-wrap .close-drawer {
	top: 12px;
	right: 14px;
	width: 32px;
	height: 32px;
	color: var(--gr-ink);
}

/* D4 / D16: the footer was not sticky and got clipped — the subtotal and
   both buttons only appeared after scrolling the item list and sat flush
   against the bottom edge, while the x stayed pinned. Pin both. */
.shoptimizer-mini-cart-wrap .widget_shopping_cart_content {
	display: flex;
	flex-direction: column;
	min-height: 0;
	height: 100%;
	padding-bottom: 8px;
}

.shoptimizer-mini-cart-wrap .elementor-menu-cart__products {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	margin: 0;
	padding: 0;
}

.shoptimizer-mini-cart-wrap .elementor-menu-cart__subtotal,
.shoptimizer-mini-cart-wrap .elementor-menu-cart__footer-buttons {
	flex: 0 0 auto;
	background: var(--gr-paper);
}

/* The item count is printed inside the AJAX fragment (the heading above is
   part of the cached page), so it sits at the top of the scroll area and is
   pinned there. */
.shoptimizer-mini-cart-wrap .gr-drawer-count {
	position: sticky;
	top: 0;
	z-index: 2;
	margin: 0;
	padding: 10px 0 8px;
	background: var(--gr-paper);
	font-size: 12.5px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--gr-ink-soft);
}

/* D5: ~230px product images, so each line item took ~320px and three items
   filled about 960px. The drawer was mostly photographs. Row layout:
   image left, name and price right, controls right. */
.shoptimizer-mini-cart-wrap .elementor-menu-cart__product {
	display: grid;
	grid-template-columns: 84px minmax(0, 1fr) 32px;
	grid-template-areas:
		"img name  remove"
		"img price price";
	column-gap: 14px;
	row-gap: 8px;
	align-items: start;
	padding: 16px 0;
	margin: 0;
	border: 0;
	/* D6: no separator between the last item and the subtotal — it read as
	   part of the last product rather than as the cart total. */
	border-bottom: 1px solid var(--gr-line);
}

.shoptimizer-mini-cart-wrap .elementor-menu-cart__product-image {
	grid-area: img;
	width: 84px;
}

.shoptimizer-mini-cart-wrap .elementor-menu-cart__product-image img {
	width: 84px;
	height: 84px;
	object-fit: contain;
	background: var(--gr-paper-2);
	border-radius: var(--gr-radius);
	padding: 4px;
	margin: 0;
}

/* D8: product names were pale dusty rose on white — the least legible text
   in the panel was the only thing identifying what you're buying — while
   the price below rendered darker and heavier. Inverted back. */
.shoptimizer-mini-cart-wrap .elementor-menu-cart__product-name {
	grid-area: name;
	margin: 0;
	padding: 0;
	font-size: 14.5px;
	line-height: 1.35;
}

.shoptimizer-mini-cart-wrap .elementor-menu-cart__product-name a {
	font-weight: 600;
	color: var(--gr-ink);
	text-decoration: none;
}

.shoptimizer-mini-cart-wrap .elementor-menu-cart__product-name a:hover {
	color: var(--gr-rose-ink);
	text-decoration: underline;
}

/* D11: "Glitter Glow Eyeshadow - 2" mashed the shade into the title with a
   hyphen; the cart page renders it properly as "Farbe: 2" on its own line. */
.shoptimizer-mini-cart-wrap .gr-mini-variation,
.shoptimizer-mini-cart-wrap .elementor-menu-cart__product-name .variation {
	display: block;
	margin-top: 3px;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.4;
	color: #4A403B;
}

.shoptimizer-mini-cart-wrap .elementor-menu-cart__product-price {
	grid-area: price;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0;
	padding: 0;
}

/* D10: the line showed the unit price at any quantity, so only the subtotal
   reconciled and the arithmetic looked wrong (C4 on the cart page). */
.shoptimizer-mini-cart-wrap .gr-line-total {
	text-align: right;
	font-size: 14.5px;
	font-weight: 700;
	color: var(--gr-ink);
	white-space: nowrap;
}

.shoptimizer-mini-cart-wrap .gr-line-unit {
	display: block;
	font-size: 12px;
	font-weight: 400;
	color: var(--gr-ink-soft);
}

/* D10: Shoptimizer's stepper had small hit targets. */
.shoptimizer-mini-cart-wrap .shoptimizer-custom-quantity-mini-cart {
	border: 1px solid var(--gr-line);
	border-radius: var(--gr-radius);
	min-height: 38px;
}

.shoptimizer-mini-cart-wrap .shoptimizer-custom-quantity-mini-cart_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	min-height: 36px;
	color: var(--gr-ink);
	cursor: pointer;
}

.shoptimizer-mini-cart-wrap .shoptimizer-custom-quantity-mini-cart_button svg {
	width: 12px;
	height: 12px;
}

/* D9: no remove control — deleting an item meant clicking minus until it
   disappeared. Elementor prints two remove links with no text (one for its
   own JS, one for WooCommerce's fragments); show one and give it a glyph. */
.shoptimizer-mini-cart-wrap .elementor-menu-cart__product-remove {
	grid-area: remove;
	justify-self: end;
}

.shoptimizer-mini-cart-wrap .elementor-menu-cart__product-remove .remove_from_cart_button {
	display: none;
}

.shoptimizer-mini-cart-wrap .elementor-menu-cart__product-remove .elementor_remove_from_cart_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: static;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	color: var(--gr-ink-soft);
	background: transparent;
	text-decoration: none;
	font-size: 0;
}

.shoptimizer-mini-cart-wrap .elementor-menu-cart__product-remove .elementor_remove_from_cart_button::before {
	content: "\00D7";
	font-size: 20px;
	line-height: 1;
}

.shoptimizer-mini-cart-wrap .elementor-menu-cart__product-remove .elementor_remove_from_cart_button:hover {
	background: var(--gr-rose-tint);
	color: var(--gr-rose-ink);
}

/* D6 / D7: the subtotal sat ~12px under the last stepper with no rule, and
   the LABEL was bold while the AMOUNT was regular weight. Reversed. */
.shoptimizer-mini-cart-wrap .elementor-menu-cart__subtotal {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	border-top: 1px solid var(--gr-line);
	margin: 0;
	padding: 16px 0 10px;
	font-size: 14px;
	text-align: left;
}

.shoptimizer-mini-cart-wrap .elementor-menu-cart__subtotal strong {
	font-weight: 400;
	color: var(--gr-ink-soft);
}

.shoptimizer-mini-cart-wrap .elementor-menu-cart__subtotal .woocommerce-Price-amount {
	font-size: 20px;
	font-weight: 700;
	color: var(--gr-ink);
}

/* D1 / D2 / D3: both buttons were neutral slate grey defaults, the same
   weight and treatment, and "Kasse" — the checkout button — was the
   NARROWER of the two. Checkout is now the filled, full-width, brand-
   coloured primary; "Warenkorb anzeigen" is the quiet secondary beneath it.
   (The labels themselves are corrected in gr-design.php.) */
.shoptimizer-mini-cart-wrap .elementor-menu-cart__footer-buttons {
	display: flex;
	flex-direction: column-reverse;   /* checkout first, visually */
	gap: 8px;
	margin: 0;
	padding: 4px 0 14px;
}

.shoptimizer-mini-cart-wrap .elementor-menu-cart__footer-buttons .elementor-button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 50px;
	margin: 0;
	border-radius: var(--gr-radius);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .01em;
	text-decoration: none;
}

.shoptimizer-mini-cart-wrap .elementor-button--checkout {
	background-color: var(--gr-rose-ink);
	color: #fff;
	border: 0;
}

.shoptimizer-mini-cart-wrap .elementor-button--checkout:hover,
.shoptimizer-mini-cart-wrap .elementor-button--checkout:focus {
	background-color: var(--gr-rose-dark);
	color: #fff;
}

.shoptimizer-mini-cart-wrap .elementor-button--view-cart {
	background: transparent;
	color: var(--gr-ink);
	border: 1px solid var(--gr-line);
	min-height: 44px;
	font-weight: 500;
}

.shoptimizer-mini-cart-wrap .elementor-button--view-cart:hover {
	border-color: var(--gr-ink);
	color: var(--gr-ink);
}

/* D13 / D14: the free-shipping bar and the VAT line. */
.shoptimizer-mini-cart-wrap .gr-freeship {
	margin: 12px 0 4px;
}

.shoptimizer-mini-cart-wrap .gr-tax-note {
	margin: 12px 0 0;
}

/* ==========================================================================
   Cross-cutting — loading placeholders
   Hero -> black. Swatches -> blank boxes. Archive cells -> empty. Cart ->
   skeleton. Every template showed a broken-looking state before it showed
   the real one. One fix, repeated: reserve the space and tint it.
   ========================================================================== */

img[loading="lazy"] {
	background-color: var(--gr-paper-2);
}

ul.products li.product a > img {
	background-color: var(--gr-paper-2);
}

.cgkit-attribute-swatches .cgkit-swatch img[loading] {
	background-color: var(--gr-rose-tint);
}

/* ==========================================================================
   Mobile — §8 of the audit could not check this. 390px first.
   ========================================================================== */

@media (max-width: 480px) {
	.top-bar .col-full {
		grid-template-columns: 1fr;
		gap: 4px;
		text-align: center;
	}

	.top-bar-left,
	.top-bar-right { text-align: center; }

	.top-bar-right .custom-html-widget > div { justify-content: center; }

	.elementor-129 .elementor-element-4587a40 .elementor-cta__title {
		font-size: 34px !important;
	}

	.shoptimizer-mini-cart-wrap li.woocommerce-mini-cart-item {
		grid-template-columns: 68px 1fr auto;
	}

	.shoptimizer-mini-cart-wrap li.woocommerce-mini-cart-item img {
		width: 68px !important;
		height: 68px !important;
	}

	ul.products li.product .woocommerce-loop-product__title {
		min-height: 3.4em;
		font-size: 14px;
	}
}


/* ---------------------------------------------------------------------------
   Mobile/tablet layout fixes — goldenrose.de, 2026-09-08
   Append to wp-content/plugins/gr-fixes/assets/gr-design.css
   --------------------------------------------------------------------------- */

/* 1 — Product pages were 394–612 px wide on a 375 px phone.
   Shoptimizer sets .woocommerce-breadcrumb { white-space:nowrap }, and the
   flex column L7 puts on .archive-header .col-full lets that crumb size to
   its own content instead of the column, so a long crumb widens the whole
   document and the phone zooms the page out. */
.shoptimizer-archive .archive-header .col-full > * {
	align-self: stretch;
	min-width: 0;
	max-width: 100%;
}

/* On the PDP the theme's own .single-product .woocommerce-breadcrumb rule
   (max-width: 1170px, centred) outranks the one above, so it needs the
   longer selector to lose. */
.single-product .archive-header .col-full > .woocommerce-breadcrumb {
	max-width: 100%;
}

/* 2 — Prices sat up to 27 px apart inside one row: the VAT/shipping suffix
   shares the line with the amount, so a wider price leaves less room and the
   suffix wraps to three lines instead of two. Own line = equal height. */
ul.products li.product .woocommerce-price-suffix,
.products article.card .woocommerce-price-suffix {
	display: block;
	width: 100%;
}

/* 3 — The category eyebrow ran one to three lines, so product names in the
   same row started at different heights (35 px apart on the homepage). */
.products article.card .card__cat,
ul.products li.product .product__categories {
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* 4 — The sort control was clipped to "Nach Beliebtheit sorti" on phones:
   .shoptimizer-sorting puts the result count and the select side by side and
   the select only got 149–155 px. Stack them below 480 px. */
@media (max-width: 480px) {
	.shoptimizer-sorting {
		display: block;
	}
	.shoptimizer-sorting .woocommerce-result-count,
	.shoptimizer-sorting .woocommerce-ordering {
		display: block;
		width: 100%;
		max-width: none;
		float: none;
	}
	.shoptimizer-sorting .woocommerce-ordering { margin-top: 8px; }
	.shoptimizer-sorting .woocommerce-ordering select {
		width: 100%;
		max-width: none;
	}
}

/* 5 — Checkout: Elementor's .e-checkout__column keeps a 344 px minimum
   inside a 285 px grid container, so /zur-kasse/ scrolls sideways by 14 px
   on a 375 px phone. */
@media (max-width: 600px) {
	.e-checkout__container { grid-template-columns: 1fr; }
	.e-checkout__container > .e-checkout__column {
		min-width: 0;
		width: 100%;
	}

	/* Elementor's own section padding is 16px 30px, which left the name
	   field 223 px of a 375 px screen. */
	.elementor-widget-woocommerce-checkout-page { --sections-padding: 16px 14px; }
}

/* 6 — Cart cross-sells ("Neu im Shop") keep the 300 px thumbnail at its
   intrinsic size, so the picture never fills its cell. */
.wc-block-grid__products .wc-block-grid__product-image,
.wc-block-grid__products .wc-block-grid__product-image img {
	display: block;
	width: 100%;
	height: auto;
}


/* ==========================================================================
   Classic checkout (.de/.uk/.dk): Elementor's checkout widget was never styled,
   so its defaults showed -- a cyan (#5bc0de) "Zahlungspflichtig bestellen" and
   cyan links -- while the block checkout on .at/.fi is brand rose (mobile test
   2026-09-23). The button colour is a literal in Elementor's CSS behind two IDs
   (#payment #place_order), hence the html body prefix; links and borders read
   the widget's CSS variables. #B75563 is the rose the block checkout shows.
   ========================================================================== */
html body .elementor-widget-woocommerce-checkout-page {
	--links-normal-color: #B75563;
	--links-hover-color: #8E4548;
	--purchase-button-hover-border-color: #8E4548;
	--forms-buttons-border-color: #B75563;
}

html body .elementor-widget-woocommerce-checkout-page .woocommerce-checkout #payment #place_order {
	background-color: #B75563;
	border-color: #B75563;
}

html body .elementor-widget-woocommerce-checkout-page .woocommerce-checkout #payment #place_order:hover {
	background-color: #8E4548;
	border-color: #8E4548;
}


/* ==========================================================================
   Mobile test 2026-09-24 (iPhone 15 / SE, Galaxy S24; all five storefronts)
   ========================================================================== */

/* iOS Safari zooms the page into any field set below 16px when it is tapped,
   and leaves it zoomed. Classic checkout (.de/.uk/.dk) fields were 14px,
   login/register and the product quantity 15px, the block cart quantity
   12.9px, the sort select 12px. The block checkout on .at/.fi was already 16px.
   !important because several of those sizes are themselves !important. */
@media (max-width: 1024px) {
	html body :is(input[type="text"], input[type="email"], input[type="tel"],
		input[type="search"], input[type="password"], input[type="number"],
		input[type="url"], input[type="date"], input:not([type]), select, textarea) {
		font-size: 16px !important;
	}
}

@media (max-width: 600px) {
	/* Classic checkout: the form sat 60px in from each side of the screen --
	   theme gutter 15 + Elementor container 20 + column 10 + box 15 -- leaving
	   the fields 68% of an iPhone SE. The container and column padding go. */
	html body.woocommerce-checkout .elementor-section > .elementor-container {
		padding-left: 0;
		padding-right: 0;
	}
	html body.woocommerce-checkout .elementor-column > .elementor-widget-wrap.elementor-element-populated {
		padding-left: 0;
		padding-right: 0;
	}

	/* Order summary: a fixed table layout split the box 50/50 and the name
	   cell kept 40px of right padding, so product names were 53px wide and
	   "Nail Expert 4 In 1 Compete Care" ran to five lines. The price column
	   now takes only what the price needs. */
	html body.woocommerce-checkout .woocommerce-checkout-review-order-table {
		table-layout: auto;
	}
	html body.woocommerce-checkout .woocommerce-checkout-review-order-table td.product-name {
		padding-right: 12px;
	}
	html body.woocommerce-checkout .woocommerce-checkout-review-order-table td.product-total {
		width: 1%;
		white-space: nowrap;
	}
	/* ...but the totals share that column, and the VAT note under the total
	   ("beinhaltet €1,36 MwSt.; Schätzwert für Deutschland") needs room. */
	html body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot td {
		min-width: 8.5em;
	}
	/* Shipping row: Shoptimizer stacks its two cells as blocks at 200% of the
	   first column, which assumes the fixed 50/50 split above. With the auto
	   layout the first column is wider than half, so the row ran 90px past the
	   screen and the shipping price ("Standardversand: €9,95") was cut off.
	   Back to two ordinary cells: label left, method and price right. */
	html body.woocommerce-checkout .woocommerce-checkout-review-order-table tr.shipping th,
	html body.woocommerce-checkout .woocommerce-checkout-review-order-table tr.shipping td {
		display: table-cell;
		width: auto;
		vertical-align: top;
	}
	/* #order_review: the theme's own th rule carries the id */
	html body.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table tr.shipping th {
		padding-bottom: 1em;
		border-right: 0;
		border-bottom: 1px solid #e2e2e2;
	}
	html body.woocommerce-checkout .woocommerce-checkout-review-order-table tr.shipping td {
		text-align: right;
		border-left: 0;
	}
	/* price on its own line under the method name, on every storefront */
	html body.woocommerce-checkout .woocommerce-checkout-review-order-table tr.shipping td .woocommerce-Price-amount {
		display: block;
		float: none;
	}
}

/* Product cards: the category links above the name ("Lippen, Lippenstift")
   were 14px-tall targets sitting side by side. Vertical padding makes them
   24px without changing the one-line eyebrow; the paragraph gets the same
   padding so its overflow:hidden (the ellipsis) does not clip the target. */
@media (max-width: 1024px) {
	ul.products li.product .product__categories { padding-block: 5px; }
	ul.products li.product .product__categories a { padding-block: 5px; }
}

/* Sort select on phones: 19px tall and styled as plain text, so it neither
   read as a control nor made a usable target. */
@media (max-width: 480px) {
	.shoptimizer-sorting .woocommerce-ordering select {
		min-height: 44px;
		padding-left: 12px;
		padding-right: 36px;
		border: 1px solid #E7DDDA;
		border-radius: 2px;
		background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23201A1C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 16px 16px;
		-webkit-appearance: none;
		appearance: none;
		color: #201A1C;
	}
}

/* Remaining targets under 24px on phones (mobile test 2026-09-24, second
   pass). Padding only: the text and its position stay where they are. */
@media (max-width: 1024px) {
	/* Breadcrumb links were 17px tall. The crumb clips its own overflow
	   (one-line ellipsis), so it carries the same padding as its links. */
	.woocommerce-breadcrumb { padding-block: 4px; }
	.woocommerce-breadcrumb a { padding-block: 4px; }

	/* Block cart: "Gutscheine hinzufügen" toggle 18px, product names 18px. */
	.wc-block-cart .wc-block-components-totals-coupon .wc-block-components-panel__button {
		padding-top: 10px;
		padding-bottom: 10px;
	}
	a.wc-block-components-product-name {
		display: inline-block;
		padding-block: 3px;
	}

	/* Login / register: the eye button in the password field was 25x18. An
	   invisible layer widens what a finger can hit; the icon is ::after.
	   Not on the checkout: the layer is placed against the eye, and the classic
	   Elementor checkout leaves its eye unpositioned (and without an icon), so
	   there the layer covered the whole checkout once "Ein Konto erstellen?"
	   was ticked and caught every tap, "Zahlungspflichtig bestellen" included. */
	.woocommerce form:not(.checkout) .show-password-input::before {
		content: "";
		position: absolute;
		inset: -10px -8px;
	}

	/* Checkbox and radio rows: the labels are the targets and were 21px. */
	label.woocommerce-form-login__rememberme,
	.woocommerce-account-fields label {
		padding-block: 3px;
	}
	/* Elementor zeroes this label's padding behind .e-checkout__container #payment. */
	html body .e-checkout__container #payment .payment_methods > .wc_payment_method > label {
		padding-top: 3px;
		padding-bottom: 3px;
	}
}

/* =====================================================================
 * Audit 2026-10-20 (round 2): legibility and tap targets on phones.
 * Product-card category links were 10px, eyebrows
 * 11px; the footer social links were 19px tall tap targets.
 * ================================================================== */
html body ul.products li.product .product__categories,
html body ul.products li.product .product__categories a {
	font-size: 12px;
}
html body .t-eyebrow,
html body .card__cat,
html body .gr-news__eyebrow {
	font-size: 12px;
}
html body .gr-footer a[href*="instagram.com"],
html body .gr-footer a[href*="facebook.com"] {
	display: inline-block;
	padding: 6px 0;
}
html body p.gr-atc-hint {
	color: #8a2f3d;
}