/* ==========================================================================
   goldenrose.de — REDESIGN LAYER
   Implements goldenrose-de-redesign.html as the site-wide design standard:
   editorial serif display type, a rose/wine/gold palette, near-square
   geometry and a rebuilt homepage.

   Loads AFTER gr-design.css and inherits from it. The first block
   redefines gr-design's own tokens, so the 1,700 lines of cart / PDP /
   drawer work written against those tokens move to the new palette
   without being rewritten. Only what the redesign actually changes in
   shape — type, chrome, cards, homepage — is restated below.

   The logo is deliberately untouched: no rule in this file selects
   .custom-logo, .custom-logo-link or the footer logo image.

   Prefix map:  R0 tokens  R1 type  R2 buttons  R3 utility bar
                R4 header  R5 nav   R6 cards    R7 homepage
                R8 footer  R9 forms R10 responsive
   ========================================================================== */

/* ==========================================================================
   R0 — TOKENS
   The redesign's :root, mapped onto the names gr-design.css already uses.
   ========================================================================== */

:root {
	/* --- superseded: existing rules re-colour themselves through these --- */
	--gr-ink:        #201A1C;
	--gr-ink-soft:   #5C5153;
	--gr-rose:       #B75563;
	--gr-rose-ink:   #B75563; /* 4.67:1 on white — AA for text and buttons */
	--gr-rose-dark:  #98404E; /* 6.61:1 — hover, and small text on tinted grounds */
	--gr-rose-tint:  #F3E4E2;
	--gr-sand:       #B08D57;
	--gr-line:       #E7DDDA;
	--gr-paper:      #FFFFFF;
	--gr-paper-2:    #FCF8F6;
	--gr-black:      #201A1C;
	--gr-radius:     2px;      /* near-square: editorial, not SaaS-card */
	--gr-content:    1320px;
	--gr-shadow:     0 18px 40px -28px rgba(32, 26, 28, .45);

	/* --- added by the redesign ---------------------------------------- */
	--gr-ink-45:     #776E70; /* 4.94:1 on white. The mockup's #8C8385 is 3.68 */
	--gr-wine:       #7C2433;
	--gr-crimson:    #C4162C;
	--gr-blush:      #F3E4E2;
	--gr-blush-deep: #E4C6C4;
	--gr-cream:      #FCF8F6;

	/* Gold splits in three. The mockup uses one #B08D57 for rules AND for
	   text, but as text it is 2.93:1 on cream — unreadable. Rules and
	   borders are exempt from contrast rules, text is not. */
	--gr-gold:       #B08D57; /* decoration: rules, borders, focus, SVG */
	--gr-gold-ink:   #7F612E; /* gold TEXT on white / cream / blush */
	--gr-gold-light: #D2B589; /* gold TEXT on wine / ink */

	--gr-display:    'Bodoni Moda', 'Didot', 'Bodoni MT', Georgia, serif;
	--gr-body:       'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	--gr-eyebrow:    .6875rem;
	--gr-track:      .22em;
}

/* ==========================================================================
   R1 — TYPOGRAPHY
   The theme currently ships `font-family: sans-serif` on every element
   (Kirki never had a font picked), so this is the single most visible
   change on the site.

   Kirki writes that rule as
       body, button, input, select, option, textarea, :root :where(body)
   and the last selector is the one that matters: `:root` is a pseudo-class,
   so it scores (0,1,0) while `:where()` adds nothing. `html body` is only
   (0,0,2) and loses to it — which is why the display face landed on the
   headings but the body copy stayed on the system sans. `:root body` is
   (0,1,1) and clears it without !important.
   ========================================================================== */

:root body,
:root body button,
:root body input,
:root body select,
:root body optgroup,
:root body textarea,
:root body .entry-content,
:root body .elementor-widget-text-editor,
:root body .elementor-widget-heading {
	font-family: var(--gr-body);
	font-weight: 400;
	letter-spacing: 0;
}

:root body {
	color: var(--gr-ink);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Display face. `body h*` (0,0,2) clears Kirki's `h*` (0,0,1); the
   Elementor kit only sets size on h1/h2, never family. */
html body h1,
html body h2,
html body h3,
html body .display,
html body .elementor-heading-title,
html body .woocommerce-loop-product__title,
html body .product_title,
html body .cart-drawer-heading,
html body .section-title,
html body .widget .widget-title,
html body .widget .widgettitle {
	font-family: var(--gr-display);
	font-weight: 400;
	line-height: 1.08;
	letter-spacing: -.01em;
	color: var(--gr-ink);
	text-transform: none;
}

html body h1 { font-size: clamp(2.1rem, 4vw, 3.4rem); }
html body h2 { font-size: clamp(1.7rem, 3vw, 2.6rem); color: var(--gr-ink); }
html body h3 { font-size: clamp(1.25rem, 1.8vw, 1.6rem); }

/* h4-h6 stay in the body face — they label things, they don't announce them. */
html body h4,
html body h5,
html body h6 {
	font-family: var(--gr-body);
	font-weight: 500;
	letter-spacing: .02em;
	line-height: 1.35;
}

/* Product titles are read in a grid, at speed — sans, not Bodoni. */
html body .woocommerce-loop-product__title,
html body .woocommerce-loop-product__title a {
	font-family: var(--gr-body);
	font-size: .9375rem;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: 0;
}

.gr-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--gr-body);
	font-size: var(--gr-eyebrow);
	font-weight: 500;
	letter-spacing: var(--gr-track);
	text-transform: uppercase;
	color: var(--gr-gold-ink);
}

.gr-eyebrow::before {
	content: "";
	width: 34px;
	height: 1px;
	background: var(--gr-gold);
	flex: none;
}

.gr-script {
	font-family: var(--gr-display);
	font-style: italic;
	font-weight: 400;
	color: var(--gr-rose-ink);
}

.gr-lede {
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--gr-ink-soft);
	max-width: 62ch;
}

html body :focus-visible {
	outline: 2px solid var(--gr-gold-ink);
	outline-offset: 3px;
}

/* ==========================================================================
   R2 — BUTTONS
   One shape for every button on the site: 46px, 2px radius, uppercase
   .14em. Covers WooCommerce, Shoptimizer and Elementor in one pass.
   ========================================================================== */

html body .button,
html body button.button,
html body input[type="submit"],
html body .woocommerce a.button,
html body .woocommerce button.button,
html body .woocommerce input.button,
html body .woocommerce #respond input#submit,
html body .elementor-button,
html body .wp-block-button__link,
html body .wc-block-components-button,
html body .gr-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 0 26px;
	border: 1px solid transparent;
	border-radius: var(--gr-radius);
	background: var(--gr-rose-ink);
	color: #fff;
	font-family: var(--gr-body);
	font-size: .8125rem;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	line-height: 1.2;
	text-align: center;
	white-space: nowrap;
	text-decoration: none;
	transition: background .18s ease, color .18s ease, border-color .18s ease;
}

html body .button:hover,
html body button.button:hover,
html body input[type="submit"]:hover,
html body .woocommerce a.button:hover,
html body .woocommerce button.button:hover,
html body .woocommerce input.button:hover,
html body .elementor-button:hover,
html body .wp-block-button__link:hover,
html body .wc-block-components-button:hover,
html body .gr-btn:hover {
	background: var(--gr-rose-dark);
	color: #fff;
}

/* Ink — the primary commerce action (add to cart, checkout). Rose is the
   brand; ink is the one that has to win a glance against product photography. */
html body .gr-btn--ink,
html body .single_add_to_cart_button,
html body .woocommerce button.button.alt,
html body .woocommerce a.button.alt,
html body .checkout-button,
html body .wc-block-components-button:not([disabled]) {
	background: var(--gr-ink);
	color: #fff;
	border-color: var(--gr-ink);
}

html body .gr-btn--ink:hover,
html body .single_add_to_cart_button:hover,
html body .woocommerce button.button.alt:hover,
html body .woocommerce a.button.alt:hover,
html body .checkout-button:hover,
html body .wc-block-components-button:not([disabled]):hover {
	background: #000;
	color: #fff;
	border-color: #000;
}

html body .gr-btn--ghost {
	background: transparent;
	color: var(--gr-ink);
	border-color: currentColor;
}

html body .gr-btn--ghost:hover {
	background: var(--gr-ink);
	border-color: var(--gr-ink);
	color: #fff;
}

html body .gr-btn--ghost-light {
	background: transparent;
	color: #fff;
	border-color: rgba(255, 255, 255, .8);
}

html body .gr-btn--ghost-light:hover {
	background: #fff;
	color: var(--gr-ink);
	border-color: #fff;
}

/* The underlined "see all" link that ends every section head. */
.gr-more {
	display: inline-block;
	font-size: .8125rem;
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--gr-ink);
	border-bottom: 1px solid var(--gr-gold);
	padding-bottom: 3px;
	white-space: nowrap;
}

.gr-more:hover { color: var(--gr-rose-dark); border-color: var(--gr-rose-dark); }

/* ==========================================================================
   R3 — UTILITY BAR
   Was a pale strip that read as chrome noise. The redesign gives it the
   deep wine ground, which also anchors the top of every page.
   ========================================================================== */

html body .topbar-wrapper,
html body .top-bar {
	background: var(--gr-wine);
	color: #fff;
	border: 0;
}

html body .topbar-wrapper {
	max-width: none;
	padding: 0;
}

html body .top-bar > .col-full {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 38px;
	max-width: var(--gr-content);
	padding-inline: var(--gr-gutter);
}

html body .top-bar .widget,
html body .top-bar .textwidget,
html body .top-bar p {
	margin: 0;
	padding: 0;
	font-size: .75rem;
	line-height: 1.4;
	letter-spacing: .03em;
	color: rgba(255, 255, 255, .92);
}

html body .top-bar a { color: #fff; }

/* ==========================================================================
   R4 — HEADER
   Three-column grid: brand, a search field that is now the widest thing
   in the row, then the account / cart tools.
   The logo itself is not styled here — only the box it sits in.
   ========================================================================== */

html body .header-4-container {
	background: #fff;
	border-bottom: 1px solid var(--gr-line);
	box-shadow: none;
}

/* #masthead must NOT carry the rule. In header-4 it is only the logo
   column of a single-row header, so a border-bottom on it drew a 292px
   grey stub that stopped in mid-air just right of the logo. The full-width
   line belongs to .header-4-container above. */
html body #masthead.site-header {
	background: #fff;
	border-bottom: 0;
	box-shadow: none;
}

html body .main-header.col-full {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: clamp(20px, 4vw, 56px);
	max-width: var(--gr-content);
	padding-block: 16px;
}

html body .site-branding {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 0;
}

/* --- search ------------------------------------------------------------- */

html body .site-search.type-outline {
	width: 100%;
	max-width: none;
	margin: 0;
}

html body .site-search .woocommerce-product-search {
	position: relative;
	display: flex;
	align-items: center;
}

html body .site-search .search-field,
html body .site-search input[type="search"] {
	width: 100%;
	height: 46px;
	padding: 0 104px 0 44px;
	border: 1px solid var(--gr-line);
	border-radius: var(--gr-radius);
	background: var(--gr-cream);
	font-family: var(--gr-body);
	font-size: .9375rem;
	color: var(--gr-ink);
	box-shadow: none;
	transition: border-color .18s ease, background .18s ease;
}

html body .site-search .search-field::placeholder { color: var(--gr-ink-45); }

html body .site-search .search-field:focus {
	outline: none;
	border-color: var(--gr-gold);
	background: #fff;
}

/* Magnifier drawn in CSS so no icon font or extra request is needed. */
html body .site-search .woocommerce-product-search::before {
	content: "";
	position: absolute;
	left: 15px;
	width: 17px;
	height: 17px;
	pointer-events: none;
	z-index: 2;
	background: var(--gr-ink-45);
	-webkit-mask: var(--gr-icon-search) center / contain no-repeat;
	mask: var(--gr-icon-search) center / contain no-repeat;
}

html body .site-search button[type="submit"] {
	position: absolute;
	right: 6px;
	min-height: 34px;
	height: 34px;
	padding: 0 14px;
	background: var(--gr-ink);
	color: #fff;
	border-radius: var(--gr-radius);
	font-size: .6875rem;
	letter-spacing: .12em;
	text-transform: uppercase;
}

html body .site-search button[type="submit"]:hover { background: #000; }

/* --- account + cart ------------------------------------------------------ */

html body .shoptimizer-myaccount a,
html body .shoptimizer-cart .cart-contents {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 8px 10px;
	border-radius: var(--gr-radius);
	color: var(--gr-ink);
	font-family: var(--gr-body);
	font-size: .8125rem;
	font-weight: 400;
	letter-spacing: .02em;
	text-transform: none;
	transition: background .18s ease;
}

html body .shoptimizer-myaccount a:hover,
html body .shoptimizer-cart .cart-contents:hover { background: var(--gr-blush); }

html body .shoptimizer-cart .cart-contents svg { stroke-width: 1.6; }

html body .shoptimizer-cart .mini-count {
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	background: var(--gr-rose-ink);
	color: #fff;
	border-radius: 99px;
	font-size: .625rem;
	font-weight: 500;
	letter-spacing: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ==========================================================================
   R5 — NAVIGATION
   Uppercase .14em, and the active/hover state is a gold underline rather
   than the theme's colour swap.
   ========================================================================== */

/* .col-full-nav is two completely different things either side of 992px,
   so every rule for it has to be scoped.
   
   >= 993px — header-4 is a SINGLE row: .header-4-inner is a flex row
   holding #masthead (the logo) and .col-full-nav (menu + search + account
   + cart) side by side. Here .col-full-nav is a ~300px flex item, not a
   band, so a background and border-top/bottom on it drew a stray 300px
   rule through the middle of the header. The header's underline comes from
   .header-4-container in R4, which really is full width.
   
   <= 992px — the same element becomes the slide-in menu drawer:
   position:fixed, 300px wide, full height, z-index 102. Making it
   transparent there left the drawer with no ground of its own, so the page
   underneath showed straight through and the category list rendered on top
   of the page's own headings. It needs to stay opaque. */
@media (min-width: 993px) {
	html body .col-full-nav {
		background: transparent;
		border: 0;
		box-shadow: none;
	}
}

@media (max-width: 992px) {
	html body .col-full-nav {
		background: #fff;
		border: 0;
		box-shadow: 0 0 40px -8px rgba(32, 26, 28, .35);
	}
}

html body .menu-primary-menu-container > ul > li > a,
html body .menu-primary-menu-container > ul > li.nolink > span {
	font-family: var(--gr-body);
	font-size: .8125rem;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--gr-ink);
	padding-block: 14px;
	border-bottom: 2px solid transparent;
	transition: border-color .18s ease, color .18s ease;
}

html body .menu-primary-menu-container > ul > li > a:hover,
html body .menu-primary-menu-container > ul > li.current-menu-item > a,
html body .menu-primary-menu-container > ul > li.current-menu-ancestor > a {
	border-bottom-color: var(--gr-gold);
	color: var(--gr-ink);
}

html body .main-navigation ul.menu ul li > a {
	font-family: var(--gr-body);
	font-size: .875rem;
	letter-spacing: .01em;
	text-transform: none;
	color: var(--gr-ink-soft);
}

html body .main-navigation ul.menu ul li > a:hover { color: var(--gr-rose-dark); }

html body .sub-menu-wrapper {
	border: 1px solid var(--gr-line);
	border-radius: var(--gr-radius);
	box-shadow: var(--gr-shadow);
}

/* The theme prints the SALE links with an inline #d9534f. Same idea,
   the redesign's crimson, and 6:1 rather than 3.3:1 on white. */
html body .main-navigation span[style*="d9534f"] { color: var(--gr-crimson) !important; }

/* ==========================================================================
   R6 — PRODUCT CARDS
   A bordered, square-cornered card. Add-to-cart slides up over the image
   on hover, and is always present for keyboard users via :focus-within.
   ========================================================================== */

html body ul.products li.product {
	display: flex;
	flex-direction: column;
	height: 100%; /* grid items were sizing to content, so a row of cards
	                 with different title lengths ended on five different
	                 baselines */
	align-self: stretch;
	background: #fff;
	border: 1px solid var(--gr-line);
	border-radius: var(--gr-radius);
	overflow: hidden;
	padding: 0;
	text-align: left;
	transition: border-color .2s ease, box-shadow .2s ease;
}

html body ul.products li.product:hover {
	border-color: var(--gr-blush-deep);
	box-shadow: var(--gr-shadow);
}

html body ul.products li.product .woocommerce-image__wrapper {
	position: relative;
	background: var(--gr-cream);
	margin: 0;
	border-bottom: 1px solid var(--gr-line);
}

html body ul.products li.product .woocommerce-card__header {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 16px 16px 18px;
	text-align: left;
}

html body ul.products li.product .woocommerce-loop-product__title { margin: 0 0 auto; }

html body ul.products li.product .woocommerce-loop-product__title a { color: var(--gr-ink); }

html body ul.products li.product .woocommerce-loop-product__title a:hover { color: var(--gr-rose-dark); }

html body ul.products li.product .price {
	display: block;
	font-family: var(--gr-body);
	font-size: 1.0625rem;
	font-weight: 500;
	letter-spacing: .01em;
	color: var(--gr-ink);
}

html body ul.products li.product .price del { color: var(--gr-ink-45); font-weight: 400; font-size: .8125rem; }
html body ul.products li.product .price ins { text-decoration: none; color: var(--gr-crimson); }

html body ul.products li.product .gr-price-note {
	display: block;
	margin-top: 2px;
	font-size: .6875rem;
	font-weight: 400;
	color: var(--gr-ink-45);
	letter-spacing: 0;
}

/* Add to cart.
   Shoptimizer reveals this button on hover with no space reserved for it,
   so hovering a card grew it and shoved the whole grid row down. The
   redesign shows it on hover too, but docked over the image where it costs
   no height. The button is a sibling of the title rather than a child of
   the image wrapper, so it cannot be docked with CSS alone — instead the
   space is reserved permanently and only the paint is toggled. Same
   appearance, no reflow. */
html body ul.products li.product .button,
html body ul.products li.product .add_to_cart_button,
html body ul.products li.product .product_type_variable,
html body ul.products li.product .added_to_cart {
	display: flex;
	margin-top: 14px;
	width: 100%;
	min-height: 40px;
	padding: 0 14px;
	/* Ink for all of them. "Benachrichtigen lassen" is a plain .button with
	   no .add_to_cart_button class, so it was falling through to the rose
	   base and sat next to ink add-to-cart buttons in the same grid. */
	background: var(--gr-ink);
	color: #fff;
	border-radius: var(--gr-radius);
	font-size: .6875rem;
	letter-spacing: .14em;
	opacity: 0;
	transition: opacity .2s ease, background .18s ease;
}

html body ul.products li.product:hover .button,
html body ul.products li.product:focus-within .button,
html body ul.products li.product:hover .add_to_cart_button,
html body ul.products li.product:focus-within .add_to_cart_button,
html body ul.products li.product:hover .product_type_variable,
html body ul.products li.product:focus-within .product_type_variable,
html body ul.products li.product .added_to_cart { opacity: 1; }

html body ul.products li.product .button:hover,
html body ul.products li.product .add_to_cart_button:hover,
html body ul.products li.product .product_type_variable:hover { background: #000; }

/* Touch has no hover, so there the buttons are simply always visible. */
@media (hover: none), (pointer: coarse) {
	html body ul.products li.product .button,
	html body ul.products li.product .add_to_cart_button,
	html body ul.products li.product .product_type_variable { opacity: 1; }
}

/* Keeps price and button on one baseline across a row of mixed products. */
html body ul.products li.product .price { margin-top: auto; padding-top: 12px; }

/* Card buttons carry longer labels than the mockup's "In den Warenkorb" —
   "Benachrichtigen lassen" at .14em tracking is wider than a card, and
   nowrap clipped it to "BENACHRICHTIGEN LAS". Inside a card the label
   wraps and sets a little tighter; elsewhere the button keeps its
   full-size treatment. */
html body ul.products li.product .button,
html body ul.products li.product .add_to_cart_button,
html body ul.products li.product .product_type_variable,
html body ul.products li.product .product_type_simple {
	white-space: normal;
	padding: 8px 12px;
	min-height: 40px; /* the 46px default left notify buttons taller than
	                     add-to-cart ones, so cards in a row ended 9px apart */
	font-size: .6875rem;
	letter-spacing: .1em;
	line-height: 1.3;
	text-align: center;
	max-width: 100%;
	min-width: 0;

	/* Break at the space, not inside the word — the label was landing as
	   "BENACHRICHTI / GEN LASSEN" on a two-up mobile grid. */
	overflow-wrap: normal;
	word-break: normal;
	hyphens: manual;
}

/* Every card button — notify included — stays hidden until the card is
   hovered or focused, so a resting grid is just image, name and price.
   Shoptimizer already reveals them unconditionally below 992px, and the
   (hover: none) rule further down covers pointer-coarse devices above it,
   so nothing is unreachable by touch. */

/* Out of stock. Shoptimizer lays this out as a translucent white band
   across the foot of the image, which reads as a rendering fault rather
   than a status. The redesign has a vocabulary for this already — the
   flag chip — so it becomes one, in the top-right so it never collides
   with the sale flag in the top-left. */
html body ul.products li.product .product-out-of-stock {
	position: absolute;
	inset: 12px 12px auto auto;
	width: auto;
	padding: 4px 9px;
	background: var(--gr-ink);
	color: #fff;
	border-radius: var(--gr-radius);
	font-family: var(--gr-body);
	font-size: .625rem;
	font-weight: 500;
	letter-spacing: .14em;
	line-height: 1.4;
	text-transform: uppercase;
	text-align: center;
	z-index: 3;
}

html body ul.products li.product .product-out-of-stock em {
	font-style: normal;
	color: inherit;
}

html body ul.products li.product .onsale,
html body .woocommerce span.onsale {
	background: var(--gr-crimson);
	color: #fff;
	border-radius: 0;
	font-family: var(--gr-body);
	font-size: .625rem;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	padding: 4px 9px;
	min-height: 0;
	min-width: 0;
	line-height: 1.4;
}

/* ==========================================================================
   R7 — HOMEPAGE
   Everything below is rendered by gr-redesign.php, so the class names are
   ours and nothing here can collide with the theme or with Elementor.
   ========================================================================== */

.grr-home {
	--gr-gutter: clamp(20px, 4vw, 48px);
	font-family: var(--gr-body);
}

.grr-wrap {
	max-width: var(--gr-content);
	margin-inline: auto;
	padding-inline: var(--gr-gutter);
}

.grr-section { padding-block: clamp(56px, 6.5vw, 104px); }
.grr-section--tight { padding-block: clamp(40px, 4vw, 64px); }
.grr-section--cream { background: var(--gr-cream); }

.grr-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: clamp(28px, 3vw, 44px);
}

.grr-home .grr-head h2 {
	font-family: var(--gr-display);
	font-size: clamp(1.9rem, 3.2vw, 2.9rem);
	line-height: 1.04;
	margin: 0;
}

.grr-head p {
	margin: 6px 0 0;
	color: var(--gr-ink-45);
	font-size: .9375rem;
}

/* --- hero ---------------------------------------------------------------- */

.grr-hero { background: var(--gr-cream); }

.grr-hero__grid {
	display: grid;
	grid-template-columns: 1.62fr 1fr;
	gap: 6px;
}

.grr-panel {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: flex-end;
	isolation: isolate;
}

.grr-panel__body {
	position: relative;
	z-index: 2;
	padding: clamp(28px, 3.4vw, 56px);
	max-width: 640px;

	/* A flex item's min-width is auto, so "dermatologisch" set at 38px was
	   pushing the panel wider than the viewport and putting the whole page
	   into horizontal scroll on narrow screens. */
	min-width: 0;
	flex: 1 1 auto;
}

.grr-home .grr-panel h1,
.grr-home .grr-panel h2,
.grr-home .grr-head h2,
.grr-home .grr-story h2,
.grr-home .grr-band__text h2 {
	/* German compounds are long enough that hyphens:auto starts breaking
	   them inside a 70px Bodoni headline — "Hypoallergene Kosmetik, der-
	   matologisch getestet" is correct German and still reads as a typo at
	   display size. Every word fits the measure on its own, so wrapping on
	   word boundaries is enough here; hyphenation is kept in reserve for
	   the narrowest screens, where a long word really can outrun the line. */
	overflow-wrap: break-word;
	hyphens: manual;
}

@media (max-width: 520px) {
	.grr-home .grr-panel h1,
	.grr-home .grr-panel h2,
	.grr-home .grr-head h2,
	.grr-home .grr-story h2,
	.grr-home .grr-band__text h2 { hyphens: auto; }
}

.grr-home .grr-panel h1,
.grr-home .grr-panel h2 {
	font-family: var(--gr-display);
	font-weight: 400;
	line-height: 1.04;
	letter-spacing: -.01em;
	margin: 0;
}

.grr-home .grr-panel h1 { font-size: clamp(2.4rem, 5vw, 4.4rem); max-width: 13ch; }
.grr-home .grr-panel h2 { font-size: clamp(1.7rem, 3vw, 2.7rem); max-width: 12ch; }

.grr-panel p {
	margin: 14px 0 0;
	font-size: 1rem;
	line-height: 1.65;
	max-width: 46ch;
	color: var(--gr-ink-soft);
}

.grr-panel .gr-btn { margin-top: 26px; }
.grr-panel .gr-eyebrow { margin-bottom: 18px; }

.grr-hero__main {
	min-height: clamp(420px, 46vw, 560px);
	background: linear-gradient(105deg, #F7EAE8 0%, #F3E0DE 46%, #E9CCCA 100%);
}

.grr-hero__side {
	display: grid;
	grid-template-rows: 1fr 1fr;
	gap: 6px;
}

.grr-promo {
	min-height: clamp(180px, 21vw, 277px);
	color: #fff;
}

.grr-promo p { color: rgba(255, 255, 255, .88); }
.grr-promo .gr-eyebrow { color: var(--gr-gold-light); }
.grr-promo .gr-btn { margin-top: 22px; }
.grr-promo .gr-eyebrow::before { background: rgba(255, 255, 255, .6); }
.grr-home .grr-promo h2 { color: #fff; }

.grr-promo--a { background: linear-gradient(140deg, #C4767F 0%, #A24E5C 100%); }
.grr-promo--b { background: linear-gradient(140deg, #A81E32 0%, #7C2433 100%); }

/* The promo art is a real product shot on a white studio ground, so the
   white heading over it needs a scrim or it drops to ~1.5:1 wherever the
   bottle is. It has to clear the photo entirely by the halfway mark,
   though — carried any further it lays 45% black over a white packshot
   and the product turns grey. */
.grr-promo::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(100deg, rgba(32, 26, 28, .78) 0%, rgba(32, 26, 28, .58) 28%, rgba(32, 26, 28, 0) 56%);
	pointer-events: none;
}

/* Hero artwork: real product photography, cut out on the gradient. */
.grr-hero__art {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	overflow: hidden;
}

.grr-hero__art img {
	position: absolute;
	right: 4%;
	bottom: 0;
	max-height: 92%;
	width: auto;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.grr-promo .grr-hero__art img {
	right: -4%;
	bottom: -6%;
	max-height: 108%;
	opacity: .92;
}

/* The mockup's abstract swatch composition, kept for panels with no photo. */
.grr-swatch {
	position: absolute;
	border-radius: 50% 46% 52% 48% / 48% 52% 46% 54%;
	opacity: .92;
}

.grr-swatch--1 { width: 34%; padding-top: 34%; right: 4%;  top: 8%;  background: radial-gradient(circle at 32% 30%, #D98A92, #B04F5C); }
.grr-swatch--2 { width: 22%; padding-top: 22%; right: 26%; top: 44%; background: radial-gradient(circle at 35% 30%, #E7B7A6, #C67F6C); }
.grr-swatch--3 { width: 15%; padding-top: 15%; right: 9%;  top: 58%; background: radial-gradient(circle at 35% 30%, #8E3341, #5E1F2A); }
.grr-swatch--4 { width: 11%; padding-top: 11%; right: 34%; top: 20%; background: radial-gradient(circle at 35% 30%, #EBD3B4, #C9A96A); }

@media (prefers-reduced-motion: no-preference) {
	.grr-hero__main .grr-panel__body { animation: grr-rise .7s cubic-bezier(.2, .7, .3, 1) both; }
	.grr-swatch { animation: grr-bloom .9s cubic-bezier(.2, .7, .3, 1) both; }
	.grr-swatch--1 { animation-delay: .05s; }
	.grr-swatch--2 { animation-delay: .14s; }
	.grr-swatch--3 { animation-delay: .23s; }
	.grr-swatch--4 { animation-delay: .32s; }
}

@keyframes grr-rise  { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes grr-bloom { from { opacity: 0; transform: scale(.86); }       to { opacity: .92; transform: none; } }

/* --- USP strip ----------------------------------------------------------- */

.grr-usp { border-bottom: 1px solid var(--gr-line); background: #fff; }

.grr-usp ul {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	margin: 0;
	padding: 0;
	list-style: none;
}

.grr-usp li {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 11px;
	padding: 18px 12px;
	border-right: 1px solid var(--gr-line);
	text-align: left;
}

.grr-usp li:last-child { border-right: 0; }

.grr-usp img {
	width: 34px;
	height: 34px;
	flex: none;
	object-fit: contain;
}

.grr-usp span {
	font-size: .8125rem;
	line-height: 1.35;
	letter-spacing: .02em;
	color: var(--gr-ink-soft);
}

/* --- category tiles ------------------------------------------------------ */

.grr-cats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(10px, 1.4vw, 20px);
}

.grr-cat {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 148px;
	padding: 22px 24px;
	background: var(--gr-blush);
	border-radius: var(--gr-radius);
	overflow: hidden;
	color: var(--gr-ink);
	transition: transform .22s ease;
}

@media (prefers-reduced-motion: no-preference) {
	.grr-cat:hover { transform: translateY(-3px); }
}

.grr-home .grr-cat h3 {
	position: relative;
	z-index: 2;
	margin: 0;
	font-family: var(--gr-body);
	font-size: .9375rem;
	font-weight: 500;
	letter-spacing: .18em;
	text-transform: uppercase;
}

.grr-cat small {
	display: block;
	margin-top: 6px;
	font-size: .75rem;
	font-weight: 400;
	letter-spacing: .02em;
	text-transform: none;
	color: var(--gr-ink-soft);
}

.grr-cat__art {
	width: 116px;
	height: 116px;
	flex: none;
	position: relative;
	z-index: 2;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.grr-cat:nth-child(2) { background: #EFE3DA; }
.grr-cat:nth-child(3) { background: #E9E4E5; }
.grr-cat:nth-child(4) { background: #EDE7DC; }
.grr-cat:nth-child(5) { background: #F0E1E4; }
.grr-cat:nth-child(6) { background: #E6E5E0; }

/* --- product row --------------------------------------------------------- */

/* gr-design.css sizes the archive grid with
   `.shoptimizer-archive ul.products:not(.elementor-grid)`, and every rule in
   that block is !important — it has to beat Elementor's products widget.
   The homepage body carries .shoptimizer-archive too, so the row came out
   4-up with a stranded fifth card. Same specificity, later in the cascade,
   and !important to meet !important: the homepage row goes 5-up as the
   redesign specifies while the archive keeps gr-design's density. */
.grr-home ul.products:not(.elementor-grid) {
	display: grid !important;
	grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
	column-gap: clamp(10px, 1.2vw, 18px) !important;
	row-gap: clamp(10px, 1.2vw, 18px) !important;
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.grr-home ul.products::before,
.grr-home ul.products::after { content: none; }

.grr-home ul.products li.product {
	width: auto;
	margin: 0;
	float: none;
	clear: none;
}

/* --- editorial band ------------------------------------------------------ */

.grr-band {
	display: grid;
	grid-template-columns: 1fr 1fr;
	background: var(--gr-blush-deep);
}

.grr-band__text {
	padding: clamp(40px, 5vw, 84px) clamp(24px, 4vw, 72px);
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.grr-home .grr-band__text h2 {
	font-family: var(--gr-display);
	font-size: clamp(1.9rem, 3.2vw, 2.9rem);
	line-height: 1.04;
	margin: 8px 0 0;
}

.grr-band__text p { color: #4A3A3C; max-width: 40ch; }

.grr-band__art {
	position: relative;
	min-height: clamp(300px, 32vw, 440px);
	background: linear-gradient(150deg, #C4767F, #8E3341);
	overflow: hidden;
}

.grr-band__art img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 62% 38%; /* the model's eyes, not the empty left third */
}

.grr-band__frame {
	position: absolute;
	inset: 14% 18%;
	border: 1px solid rgba(255, 255, 255, .55);
	background: linear-gradient(160deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .03));
}

/* --- story + values ------------------------------------------------------ */

.grr-story { background: var(--gr-cream); text-align: center; }
.grr-story .gr-script { font-size: 1.75rem; display: block; margin-bottom: 10px; }
.grr-story .gr-lede { margin: 18px auto 0; text-align: center; }

.grr-home .grr-story h2 {
	font-family: var(--gr-display);
	font-size: clamp(1.9rem, 3.2vw, 2.9rem);
	line-height: 1.06;
	margin: 0;
	max-width: 22ch;
	margin-inline: auto;
}

.grr-values {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	margin-top: clamp(36px, 4vw, 60px);
	background: var(--gr-line);
	border: 1px solid var(--gr-line);
}

.grr-value {
	background: var(--gr-cream);
	padding: 24px 22px;
	display: flex;
	align-items: center;
	gap: 14px;
	text-align: left;
}

.grr-value img { width: 44px; height: 44px; flex: none; object-fit: contain; }
.grr-value b { display: block; font-weight: 500; font-size: .9375rem; }
.grr-value small { color: var(--gr-ink-45); font-size: .8125rem; line-height: 1.5; }

/* --- reviews (renders only when the shop actually has reviews) ------------ */

.grr-reviews { background: var(--gr-wine); color: #fff; }
.grr-home .grr-reviews h2 { color: #fff; }
.grr-reviews .grr-head p { color: rgba(255, 255, 255, .78); }
.grr-reviews .gr-more { color: #fff; border-color: var(--gr-gold-light); }

.grr-review-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(12px, 1.4vw, 20px);
}

.grr-review {
	background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(255, 255, 255, .16);
	padding: 24px;
	border-radius: var(--gr-radius);
}

.grr-home .grr-review h3 {
	font-family: var(--gr-body);
	font-size: 1rem;
	font-weight: 500;
	color: #fff;
	margin: 14px 0 8px;
}

.grr-review p { margin: 0; font-size: .9375rem; line-height: 1.6; color: rgba(255, 255, 255, .85); }
.grr-review footer { margin-top: 16px; font-size: .75rem; letter-spacing: .06em; color: rgba(255, 255, 255, .68); }

.grr-stars { display: inline-flex; gap: 2px; color: var(--gr-gold-light); }
.grr-stars svg { width: 14px; height: 14px; }

/* --- journal (renders only when posts exist) ----------------------------- */

.grr-posts {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(12px, 1.5vw, 22px);
}

.grr-post {
	display: flex;
	flex-direction: column;
	gap: 14px;
	color: var(--gr-ink);
}

.grr-post__art {
	aspect-ratio: 4 / 3;
	border-radius: var(--gr-radius);
	background: var(--gr-blush);
	overflow: hidden;
}

.grr-post__art img { width: 100%; height: 100%; object-fit: cover; }

.grr-post:nth-child(2) .grr-post__art { background: #EFE3DA; }
.grr-post:nth-child(3) .grr-post__art { background: #E9E4E5; }
.grr-post:nth-child(4) .grr-post__art { background: #F0E1E4; }

.grr-home .grr-post h3 {
	font-family: var(--gr-display);
	font-size: 1.0625rem;
	line-height: 1.4;
	margin: 0;
}

.grr-post:hover h3 { color: var(--gr-rose-dark); }

/* ==========================================================================
   R8 — NEWSLETTER + FOOTER
   Both are an Elementor Theme Builder template (post 392), and the
   newsletter form is a live Elementor Pro form wired to the site's own
   mailing list. Restyled rather than rebuilt so that form keeps working.
   ========================================================================== */

/* --- newsletter band ----------------------------------------------------- */

html body .gr-newsletter-band,
html body .elementor-392 .elementor-section:has(.elementor-form) {
	background: var(--gr-blush);
}

html body .elementor-392 .elementor-form,
html body .elementor-392 .elementor-form-fields-wrapper {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	align-items: flex-start;
	width: 100%;
}

/* Elementor sizes these groups with elementor-col-66 / -33 percentages.
   The uppercase .14em button label is wider than 33% of a half-column
   footer, so the submit button hung 18px off the right edge of the
   document and put every page into horizontal scroll. Let the field
   flex and the button size to its own label instead. */
html body .elementor-392 .elementor-form .elementor-field-group {
	flex: 1 1 220px;
	width: auto;
	max-width: none;
	min-width: 0;
	padding: 0;
}

html body .elementor-392 .elementor-form .e-form__buttons { flex: 0 0 auto; }

html body .elementor-392 .elementor-form .elementor-button {
	width: auto;
	padding: 0 20px;
}

html body .elementor-392 .elementor-form .elementor-field-textual,
html body .elementor-392 input[type="email"] {
	height: 52px;
	padding: 0 18px;
	border: 1px solid var(--gr-blush-deep);
	border-radius: var(--gr-radius);
	background: #fff;
	font-family: var(--gr-body);
	font-size: .9375rem;
	color: var(--gr-ink);
}

html body .elementor-392 input[type="email"]::placeholder { color: var(--gr-ink-45); }

html body .elementor-392 input[type="email"]:focus {
	outline: none;
	border-color: var(--gr-gold);
	box-shadow: none;
}

html body .elementor-392 .elementor-form .elementor-button { min-height: 52px; }

/* --- footer -------------------------------------------------------------- */

html body .site-footer,
html body footer.site-footer,
html body .elementor-location-footer {
	background: var(--gr-ink);
	color: rgba(255, 255, 255, .78); /* 8.9:1 on --gr-ink */
	font-family: var(--gr-body);
}

html body .elementor-location-footer h1,
html body .elementor-location-footer h2,
html body .elementor-location-footer h3,
html body .elementor-location-footer h4,
html body .elementor-location-footer h5,
html body .elementor-location-footer .elementor-heading-title {
	font-family: var(--gr-body);
	font-size: .75rem;
	font-weight: 500;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: #fff;
	margin-bottom: 4px;
}

html body .elementor-location-footer p,
html body .elementor-location-footer li,
html body .elementor-location-footer .elementor-icon-list-text {
	font-size: .875rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, .78);
}

html body .elementor-location-footer a { color: rgba(255, 255, 255, .78); }
html body .elementor-location-footer a:hover { color: #fff; }

/* The small uppercase label above is right for the footer's column
   headings, but the newsletter band is a headline, not a column — the
   redesign sets it in the display face. It is the only footer section
   that contains a form, which is enough to tell them apart. */
html body .elementor-location-footer section:has(.elementor-form) .elementor-heading-title,
html body .elementor-location-footer .e-con:has(.elementor-form) .elementor-heading-title {
	font-family: var(--gr-display);
	font-size: clamp(1.7rem, 3vw, 2.6rem);
	font-weight: 400;
	letter-spacing: -.01em;
	line-height: 1.06;
	text-transform: none;
	margin-bottom: 10px;
}

html body .elementor-location-footer .elementor-divider-separator {
	border-top-color: rgba(255, 255, 255, .14);
}

/* The footer logo is a JPEG (gr-logo.jpg) — white mark on a #000000 plate,
   and a JPEG cannot be transparent. Against the footer's warm ink that
   plate read as a black square stuck to the page. `screen` composites pure
   black to exactly the backdrop and leaves white at white, so the plate
   disappears and the mark is untouched — the file itself is not modified.
   Guarded on the footer's own dark ground, where the maths holds. */
html body .elementor-location-footer img[src*="gr-logo"],
html body .site-footer img[src*="gr-logo"] {
	mix-blend-mode: screen;
}

/* Payment badges: white chips on the dark ground, as in the redesign. */
html body .gr-pay__list {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	align-items: center;
}

html body .gr-pay__item {
	height: 26px;
	min-width: 40px;
	padding: 0 8px;
	background: #fff;
	border-radius: 3px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: .5625rem;
	font-weight: 600;
	letter-spacing: .02em;
	color: #20242C;
}

/* ==========================================================================
   R9 — FORMS
   One field shape across search, checkout, account and comments.
   ========================================================================== */

html body input[type="text"],
html body input[type="email"],
html body input[type="tel"],
html body input[type="url"],
html body input[type="password"],
html body input[type="number"],
html body input[type="search"],
html body textarea,
html body select,
html body .woocommerce form .form-row input.input-text,
html body .woocommerce form .form-row textarea,
html body .select2-container--default .select2-selection--single {
	border: 1px solid var(--gr-line);
	border-radius: var(--gr-radius);
	background: #fff;
	font-family: var(--gr-body);
	font-size: .9375rem;
	color: var(--gr-ink);
	box-shadow: none;
}

html body input[type="text"]:focus,
html body input[type="email"]:focus,
html body input[type="tel"]:focus,
html body input[type="password"]:focus,
html body input[type="number"]:focus,
html body input[type="search"]:focus,
html body textarea:focus,
html body select:focus {
	border-color: var(--gr-gold);
	outline: 2px solid transparent;
	outline-offset: 0;
	box-shadow: 0 0 0 3px rgba(176, 141, 87, .22);
}

html body label,
html body .woocommerce form .form-row label {
	font-family: var(--gr-body);
	font-size: .8125rem;
	font-weight: 500;
	letter-spacing: .02em;
	color: var(--gr-ink-soft);
}

/* ==========================================================================
   Listing + product page — carry the new geometry through
   ========================================================================== */

html body .shoptimizer-archive .col-full,
html body .site-main > .col-full,
html body .col-full { max-width: var(--gr-content); }

html body .woocommerce-products-header__title,
html body .page-title,
html body .entry-title,
html body h1.product_title {
	font-family: var(--gr-display);
	font-weight: 400;
	letter-spacing: -.01em;
	line-height: 1.06;
}

html body .term-description,
html body .woocommerce-products-header p { color: var(--gr-ink-soft); }

html body .woocommerce-breadcrumb,
html body .woocommerce-breadcrumb a {
	font-size: .75rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--gr-ink-45);
}

html body .woocommerce-breadcrumb a:hover { color: var(--gr-rose-dark); }

html body .summary .price,
html body .summary .price .amount {
	font-family: var(--gr-body);
	font-weight: 500;
	letter-spacing: .01em;
	color: var(--gr-ink);
}

/* Variation colour swatches.
   CommerceKit sizes the button 40x40 with 4px of padding; gr-design adds a
   1px border. Under border-box that leaves a 30px content box for a 32px
   dot, so every swatch spilled a pixel past its own frame on all four
   sides. 3px of padding makes the dot fit its box exactly. The selector
   has to out-specify the plugin's own, hence the full chain. */
html body .summary .cgkit-attribute-swatches .cgkit-attribute-swatch.cgkit-color .cgkit-swatch {
	padding: 3px;
	overflow: hidden;
}

/* The shade number under each swatch.
 *
 * gr-design.css prints it by overriding CommerceKit's tooltip ::after —
 * the shade images are all the same beige rectangle, so the number is the
 * only thing telling 01 from 05. It sets content, left/right and bottom,
 * but CommerceKit built that same ::after as the tooltip's little triangle:
 *
 *     [data-cgkit-tooltip]:after { content:''; display:none;
 *       width:0; height:0; border-width:6px 6px 0; border-top-color:#000 }
 *
 * and gr-design overrides none of display, width, height or border. So the
 * number inherited a 0x0 box with 6px borders — 12px wide — and hovering a
 * swatch produced a black caret with "0" above "2" stacked underneath it,
 * one character per line. It was also display:none until hover, so the
 * permanent label it was meant to be never appeared at all.
 *
 * Undo the arrow geometry and the label works as intended. */
html body .cgkit-attribute-swatches li.cgkit-attribute-swatch[data-cgkit-tooltip]::after {
	display: block;
	width: auto;
	height: auto;
	border: 0;
	margin: 0;
	inset: auto 0 -19px 0;
	white-space: nowrap;
	background: none;
}

/* The black hover bubble is the other half of that tooltip. With the number
   permanently under the swatch it says nothing new, and it is positioned
   above the row — where it landed on top of the "Farbe:" label and covered
   the chosen value. */
html body .cgkit-attribute-swatches li.cgkit-attribute-swatch[data-cgkit-tooltip]::before {
	content: none;
}

/* The chosen shade was distinguishable only by a slightly darker hairline.
   Gold ring, and a real focus ring for keyboard users. */
html body .cgkit-attribute-swatches .cgkit-swatch-selected,
html body .cgkit-attribute-swatches .cgkit-swatch[aria-pressed="true"],
html body .cgkit-attribute-swatches .cgkit-swatch.selected,
html body .cgkit-attribute-swatches .cgkit-swatch[aria-checked="true"],
html body .cgkit-attribute-swatches li.cgkit-as-selected .cgkit-swatch {
	border-color: var(--gr-gold);
	box-shadow: 0 0 0 2px var(--gr-gold);
}

html body .cgkit-attribute-swatches .cgkit-swatch:hover { border-color: var(--gr-ink-45); }

/* Mini-cart drawer, cart and checkout keep gr-design.css's layout work and
   pick up the new palette through the tokens; only geometry is restated. */
html body .shoptimizer-mini-cart-wrap,
html body .shoptimizer-mini-cart-wrap .button,
html body .woocommerce-cart .cart_totals,
html body .wc-block-components-panel { border-radius: var(--gr-radius); }

html body .cart-drawer-heading {
	font-family: var(--gr-display);
	font-size: 1.4rem;
	letter-spacing: -.01em;
}

/* ==========================================================================
   R10 — RESPONSIVE
   Breakpoints are the redesign's: 1180 / 1024 / 760 / 520.
   ========================================================================== */

@media (max-width: 1180px) {
	.grr-home ul.products:not(.elementor-grid) { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
	.grr-usp ul { grid-template-columns: repeat(3, 1fr); }
	.grr-usp li:nth-child(3n) { border-right: 0; }
	.grr-usp li:nth-child(n + 4) { border-top: 1px solid var(--gr-line); }
	.grr-posts { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 992px) {
	/* Shoptimizer absolutely positions the burger at left:15px inside
	   .site-branding and relies on the branding's own left padding to clear
	   it. Zeroing that padding above put the burger straight through the
	   logo. The bars and the MENU label are positioned against the button,
	   so the button has to stay absolute — the branding gets its room back
	   instead. */
	html body .site-branding { padding-left: 84px; }
}

@media (max-width: 1024px) {
	html body .main-header.col-full {
		grid-template-columns: auto 1fr auto;
		gap: 16px;
	}

	html body .site-search.type-outline {
		order: 3;
		grid-column: 1 / -1;
	}

	.grr-hero__grid { grid-template-columns: 1fr; }
	.grr-hero__side { grid-template-columns: 1fr 1fr; grid-template-rows: none; }
	.grr-cats { grid-template-columns: repeat(2, 1fr); }
	.grr-values { grid-template-columns: repeat(2, 1fr); }
	.grr-band { grid-template-columns: 1fr; }
	.grr-band__art { order: -1; }
}

@media (max-width: 760px) {
	.grr-home ul.products:not(.elementor-grid) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
	.grr-review-grid { grid-template-columns: 1fr; }

	.grr-head {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}

	html body .shoptimizer-myaccount a span,
	html body .shoptimizer-cart .cart-contents .amount { display: none; }

	/* Below this width the panel is full-bleed, so the artwork sits under
	   the copy instead of beside it. At full strength the swatches took the
	   hero paragraph down to roughly 2:1 in places. */
	.grr-hero__art img { opacity: .32; right: -8%; }
	.grr-swatch { opacity: .25; }
	.grr-hero__main .grr-panel__body { max-width: none; }

	@keyframes grr-bloom { from { opacity: 0; transform: scale(.86); } to { opacity: .25; transform: none; } }
}

@media (max-width: 520px) {
	.grr-cats,
	.grr-values,
	.grr-posts { grid-template-columns: 1fr; }

	.grr-usp ul { grid-template-columns: repeat(2, 1fr); }
	.grr-usp li:nth-child(2n) { border-right: 0; }
	.grr-usp li:nth-child(n + 3) { border-top: 1px solid var(--gr-line); }

	.grr-hero__side { grid-template-columns: 1fr; }

	/* Two-up cards are 161px wide here, and "Nicht auf Lager" as a chip took
	   125px of that — back to looking like the band it replaced. At this
	   size it becomes a deliberate full-card status strip instead. */
	html body ul.products li.product .product-out-of-stock {
		inset: 8px 8px auto 8px;
		padding: 3px 6px;
		letter-spacing: .06em;
	}

	/* A two-up card leaves ~127px of button, and "BENACHRICHTIGEN" is the
	   longest single word any card label has to hold on one line. Tracking
	   and padding come in until it fits with room to spare. */
	html body ul.products li.product .button,
	html body ul.products li.product .add_to_cart_button,
	html body ul.products li.product .product_type_variable,
	html body ul.products li.product .product_type_simple {
		font-size: .625rem;
		letter-spacing: .04em;
		padding: 8px 6px;
	}
	.grr-home ul.products:not(.elementor-grid) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; column-gap: 10px !important; row-gap: 10px !important; }
}