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

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

/* P-8: the Trustpilot block is a screenshot in a bordered box. It cannot be
   fixed in CSS, but it can stop shouting. */
.single-product .gr-trustpilot-shot img {
	max-width: 360px;
	height: auto;
}

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