/*
 * Apple-Details (VEL-20261028-APPLE-DETAILS, Florian 28.10.2026, live seit 01.11.2026)
 *
 * Feinschliff nach Apples Human Interface Guidelines, ohne Layout, Bilder,
 * Texte oder Farben zu ändern. Velur behält Cormorant/Karla, Ink und Weiß.
 * Regeln:
 * - Buttons, Navigation und Formlabels in Satzschreibung statt gesperrter
 *   Versalien, mindestens 14 px (typography.md › Ensuring legibility).
 * - Eyebrows bleiben Versalien (Brand Book §5), aber mindestens 12 px,
 *   Tracking 0,12 em; Gold-Schrift nur als Gold-Ink (4,9:1 auf Weiß).
 * - UI-Texte ab 13 px, Kleinst-Metadaten ab 12 px; Grau mindestens Muted.
 * - Eine Formensprache: Bedienelemente --vlr-radius-control, Bildflächen
 *   --vlr-radius-media, Chips und Marker --vlr-radius-pill.
 * - Auswahl bleibt die Gold-Ink-Linie auf Weiß (Florian 25.10.2026),
 *   Fokus bleibt das Design-System (--vlr-focus-*).
 *
 * Stand Brand Book 1.3 (§5, §6, §9, §12; Florian 01.11.2026, Live-Go).
 *
 * `html:not(#vlr-apple-details)` hebt die Spezifität einmalig um eine ID,
 * damit die Ebene ältere Komponenten- und Plugin-Regeln ohne Umbau
 * übersteuert; die ID existiert nicht.
 */

/* Startseite: die Abschnitte zwischen vlr-critical-Markern stehen im kritischen CSS
   (autoptimize-custom/config/front-page.php): alles, was auf dem ersten Bildschirm
   stehen kann (Navigation, Knöpfe, Hero, Textlinks, Karussell, Bildflächen, Karten). */
/* vlr-critical:start */
html:not(#vlr-apple-details) body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* 1 · Navigation */
html:not(#vlr-apple-details) .velur-mm__link,
html:not(#vlr-apple-details) .velur-mm__link span {
	text-transform: none;
	letter-spacing: 0.005em;
	font-size: 14px;
	font-weight: 500;
}

/* 2 · Buttons */
html:not(#vlr-apple-details) :is(.vlr-button:not(.vlr-button--text, .vlr-button--tertiary), .hp-btn, .hp-hero-btn, .single_add_to_cart_button, .outlined-btn-after-buy-btn, .vc-btn, .vma-btn, .vr-btn, .vr-btn-primary, .vr-btn-secondary, .btn-solid, .vd-cta-alt, .blog-load-more-btn, .apply-filters, .vc-coupon button, .vlr-lower-advice-button) {
	border-radius: var(--vlr-radius-control) !important;
	text-transform: none !important;
	letter-spacing: 0.005em !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	transition:
		background-color var(--vlr-motion-fast) var(--vlr-ease),
		border-color var(--vlr-motion-fast) var(--vlr-ease),
		color var(--vlr-motion-fast) var(--vlr-ease),
		transform var(--vlr-motion-fast) var(--vlr-ease);
}

html:not(#vlr-apple-details) :is(.vlr-button--primary, .hp-btn, .hp-hero-btn, .single_add_to_cart_button, .outlined-btn-after-buy-btn, .vc-btn, .vma-btn, .vr-btn-primary, .btn-solid):active {
	transform: scale(0.985);
}

/* Online-Status im Beratungsknopf der PDP: lesbar statt 9–10 px. */
html:not(#vlr-apple-details) #fragen .vlr-lower-advice-status__text {
	font-size: 12px;
	letter-spacing: 0;
}

html:not(#vlr-apple-details) :is(.single_add_to_cart_button, .outlined-btn-after-buy-btn) {
	min-height: 54px;
	font-size: 16px !important;
}

html:not(#vlr-apple-details) .vlr-filter-reset {
	border-radius: var(--vlr-radius-control) !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	font-size: 14px !important;
	font-weight: 500 !important;
}

html:not(#vlr-apple-details) .vma-prospect-link {
	border-radius: var(--vlr-radius-control) !important;
}

/* Hero: Hauptaktion deckend weiß mit Ink-Schrift (Florian 28.10.2026: schlecht lesbar), 17:1. */
html:not(#vlr-apple-details) .hp-hero-btn {
	background: var(--vlr-white) !important;
	color: var(--vlr-ink) !important;
	border-color: var(--vlr-white) !important;
}

html:not(#vlr-apple-details) .hp-hero-btn:hover {
	background: var(--vlr-mist) !important;
}

html:not(#vlr-apple-details) .hp-hero-link {
	text-transform: none;
	letter-spacing: 0.005em;
	font-size: 15px;
	font-weight: 600;
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
	border-bottom-color: var(--vlr-white) !important;
}

html:not(#vlr-apple-details) .hp-hero-eyebrow {
	font-size: 13px;
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
}

html:not(#vlr-apple-details) :is(.hp-hero-press, .hp-hero-press span) {
	font-size: 12px;
}

/* 3 · Textlinks */
html:not(#vlr-apple-details) .hp-tlink {
	text-transform: none;
	letter-spacing: 0;
	font-size: 15px;
	font-weight: 500;
}

html:not(#vlr-apple-details) .hp-tlink :is(svg, span:last-child) {
	transition: transform var(--vlr-motion-fast) var(--vlr-ease);
}

html:not(#vlr-apple-details) .hp-tlink:hover :is(svg, span:last-child) {
	transform: translateX(3px);
}

html:not(#vlr-apple-details) :is(.btn-read-more, .v-textlink, .quiet-link, .vma-prospect-link, .vc-seo-toggle) {
	text-transform: none !important;
	letter-spacing: 0 !important;
	font-size: 14px !important;
	font-weight: 600;
}

/* 4 · Karussell-Pfeile: runde Flächen, 44 px bleiben */
html:not(#vlr-apple-details) .hp-car-btn {
	border: 0;
	border-radius: 50%;
	background: var(--vlr-mist);
	transition: background-color var(--vlr-motion-fast) var(--vlr-ease);
}

html:not(#vlr-apple-details) .hp-car-btn:hover {
	background: var(--vlr-line);
}

/* PLP-Kundenmomente und Empfehlungen behalten Linie und Hover, nur die Form wird rund. */
html:not(#vlr-apple-details) :is(.v-moments-controls button, .prod-nav-btn) {
	border-radius: 50%;
}

/* Atelierfilm-Schalter auf dem Video wie die übrigen Bedienelemente. */
html:not(#vlr-apple-details) #atelier .vlr-atelier-toggle {
	border-radius: var(--vlr-radius-control);
}

/* 5 · Bildflächen */
html:not(#vlr-apple-details) :is(.hp-pcard__media, .hp-kol__media, .hp-dia__media, .hp-process__media, .product-image-wrap, .post-thumbnail, .post-img-wrapp, .vr-product-card-img, .vd-media, .vd-diagram-photo),
html:not(#vlr-apple-details) .product-item .velur-plp-picture,
html:not(#vlr-apple-details) .product-item a > div:first-child,
html:not(#vlr-apple-details) .vr-image-section img {
	border-radius: var(--vlr-radius-media);
	overflow: hidden;
	isolation: isolate;
}

/* Startseite (Kollektionen, Werkstatt, Momente), Kollektionsseite, PLP-Werkstattkachel
   und Kundenmomente, PDP-Momente und Atelierfilm, Megamenü-Kacheln: dieselbe Bildecke. */
html:not(#vlr-apple-details) :is(.vh-collection-image, .vh-atelier, .vh-moment-grid figure, .vlr-workshop-tile__media, .v-moment, .velur-mm__tile, .vlr.hub .hub-photo),
html:not(#vlr-apple-details) #momente .card,
html:not(#vlr-apple-details) #atelier .atelier-photo {
	border-radius: var(--vlr-radius-media);
	overflow: hidden;
	isolation: isolate;
}

/* Die Werkstattkachel trägt selbst den dunklen Grund. */
html:not(#vlr-apple-details) :is(.vlr-workshop-tile, .vlr-jewelry-gift__image) {
	border-radius: var(--vlr-radius-media);
}

/* Empfehlungen: die Schmuck-PDP-Vorlage setzt die Bildecke per !important auf 0. */
html:not(#vlr-apple-details) .recommendation-carousel .product img {
	border-radius: var(--vlr-radius-media) !important;
}

html:not(#vlr-apple-details) :is(.hp-pcard__media, .hp-kol__media) img,
html:not(#vlr-apple-details) .product-item .velur-plp-picture img {
	transition: transform var(--vlr-motion-slow) var(--vlr-ease);
}

html:not(#vlr-apple-details) :is(.hp-pcard, .hp-kol__tile):hover :is(.hp-pcard__media, .hp-kol__media) img,
html:not(#vlr-apple-details) .product-item:hover .velur-plp-picture img {
	transform: scale(1.025);
}

/* Mobil läuft die Galerie randlos: dort keine Ecken. */
@media (max-width: 767px) {
	html:not(#vlr-apple-details) .product-image-wrap {
		border-radius: 0;
	}
}

html:not(#vlr-apple-details) :is(.vr-product-card, .vr-link-card, .vr-tip-box, .vr-answer-box, .vr-highlight-box, .vr-contact-card, .vd-qcard) {
	border-radius: var(--vlr-radius-media) !important;
}

/* 6 · Marker */
html:not(#vlr-apple-details) .hp-pcard__tag {
	border-radius: var(--vlr-radius-pill);
	text-transform: none;
	letter-spacing: 0;
	font-size: 12px;
	line-height: 1;
	padding: 6px 10px;
}

html:not(#vlr-apple-details) .awl-product-label {
	border: 0 !important;
	border-radius: var(--vlr-radius-pill) !important;
	background: rgba(255, 255, 255, 0.86) !important;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	padding: 6px 11px !important;
}

html:not(#vlr-apple-details) .awl-product-label,
html:not(#vlr-apple-details) .awl-product-label * {
	text-transform: none !important;
	letter-spacing: 0 !important;
	font-size: 12px !important;
	font-weight: 600 !important;
}

html:not(#vlr-apple-details) :is(.acc-badge, .var-btn__badge) {
	border-radius: var(--vlr-radius-pill) !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	padding: 3px 8px !important;
}

/* 7 · Produktkarten */
html:not(#vlr-apple-details) .hp-pcard__body {
	padding-top: 16px;
}

html:not(#vlr-apple-details) :is(.hp-pcard__meta, .product-item .product-label) {
	font-size: 13px;
	letter-spacing: 0;
	color: var(--vlr-muted);
}

/* Die Listen-Untertitel schneiden ohne Auslassungspunkte ab: unter 375 px wie bisher 12 px. */
@media (max-width: 374px) {
	html:not(#vlr-apple-details) .product-item .product-label {
		font-size: 12px;
	}
}

html:not(#vlr-apple-details) .product-item .product-title {
	margin-top: 6px;
}

html:not(#vlr-apple-details) .product-item .price {
	font-weight: 500;
}

html:not(#vlr-apple-details) .product-item .price em {
	color: var(--vlr-muted) !important;
}

/* vlr-critical:end */

/* 8 · Kategorie-Werkzeugleiste */
html:not(#vlr-apple-details) :is(.vlr-main-v4-chip, button.show-filter.vlr-main-plp-control, .vlr-main-plp-toolbar select) {
	border-radius: var(--vlr-radius-pill) !important;
	min-height: 40px;
	padding-left: 16px;
	padding-right: 16px;
}

/* Ruhezustand mit Line statt Ink; aktive und offene Chips behalten ihre Auswahlkontur. */
html:not(#vlr-apple-details) :is(.vlr-main-v4-chip:not(.is-active, [aria-expanded="true"]), button.show-filter.vlr-main-plp-control, .vlr-main-plp-toolbar select) {
	border: 1px solid var(--vlr-line) !important;
}

html:not(#vlr-apple-details) :is(.vlr-main-v4-chip:not(.is-active, [aria-expanded="true"]), button.show-filter.vlr-main-plp-control):hover {
	border-color: var(--vlr-ink) !important;
}

/* Aufgeklappte Auswahl (Steinform, Karat, Sortierung), Optionen, Steingrößen
   im Filter und gesetzte Filter in derselben Formensprache wie die Chips. */
html:not(#vlr-apple-details) .vlr-main-v4-panel {
	border-radius: var(--vlr-radius-media);
}

html:not(#vlr-apple-details) :is(.vlr-main-v4-shape, .vlr-main-v4-option, .vlr-carat-group, .vlr-main-plp-shape-list a) {
	border-radius: var(--vlr-radius-control) !important;
}

html:not(#vlr-apple-details) .vlr-main-v4-tag {
	border-radius: var(--vlr-radius-pill) !important;
}

/* Schmuck-Kategorien: Filter bleibt Textknopf, nur in Satzschreibung. */
html:not(#vlr-apple-details) button.show-filter:not(.vlr-main-plp-control) span {
	text-transform: none !important;
	letter-spacing: 0 !important;
	font-size: 13px !important;
}

html:not(#vlr-apple-details) .vlr-main-v4-price :is(button, span, b),
html:not(#vlr-apple-details) :is(.vlr-main-v4-count, .vlr-focus-price-desktop, .vlr-focus-price-desktop b) {
	font-size: 13px !important;
	letter-spacing: 0 !important;
}

html:not(#vlr-apple-details) .vlr-filter-panel :is(label, .filter-label) {
	font-size: 14px !important;
}

/* Stil-Auswahl als Segment-Steuerung, nur wo die Textnavigation sichtbar ist. */
@media (min-width: 1025px) {
	html:not(#vlr-apple-details) .vlr-focus-styles {
		display: inline-flex;
		flex: 0 0 auto !important;
		gap: 2px;
		width: auto !important;
		max-width: 100%;
		padding: 3px;
		overflow-x: auto;
		scrollbar-width: none;
		background: var(--vlr-mist);
		border-radius: var(--vlr-radius-pill);
	}

	html:not(#vlr-apple-details) .vlr-focus-styles::-webkit-scrollbar {
		display: none;
	}

	html:not(#vlr-apple-details) .vlr-focus-styles .vlr-main-v4-style {
		display: inline-flex;
		flex: 0 0 auto;
		align-items: center;
		min-height: 44px;
		padding: 0 16px;
		white-space: nowrap;
		color: var(--vlr-muted);
		text-decoration: none;
		border: 1px solid transparent;
		border-radius: var(--vlr-radius-pill);
		box-shadow: none;
		transition:
			background-color var(--vlr-motion-fast) var(--vlr-ease),
			border-color var(--vlr-motion-fast) var(--vlr-ease),
			color var(--vlr-motion-fast) var(--vlr-ease);
	}

	html:not(#vlr-apple-details) .vlr-focus-styles .vlr-main-v4-style::before,
	html:not(#vlr-apple-details) .vlr-focus-styles .vlr-main-v4-style::after {
		display: none;
	}

	html:not(#vlr-apple-details) .vlr-focus-styles .vlr-main-v4-style:hover {
		color: var(--vlr-ink);
	}

	html:not(#vlr-apple-details) .vlr-focus-styles .vlr-main-v4-style[aria-current="page"] {
		color: var(--vlr-ink);
		font-weight: var(--vlr-select-weight);
		background: var(--vlr-select-surface);
		border-color: var(--vlr-select-border);
	}
}

/* 9 · Produktseite: Konfigurator */
html:not(#vlr-apple-details) .acc-header {
	min-height: 56px;
}

html:not(#vlr-apple-details) .acc-header .label-name {
	display: inline-block;
	min-width: 84px;
	text-transform: none;
	letter-spacing: 0;
	font-size: 13px;
	font-weight: 500;
	color: var(--vlr-muted);
}

html:not(#vlr-apple-details) .acc-header :is(.wd-attr-selected, .vlr-dc-value) {
	font-size: 15px;
	font-weight: 600;
	color: var(--vlr-ink);
}

html:not(#vlr-apple-details) .acc-header .attr-edit {
	font-size: 13px;
	color: var(--vlr-ink);
	text-decoration: underline;
	text-decoration-color: var(--vlr-line);
	text-underline-offset: 3px;
}

html:not(#vlr-apple-details) :is(.ring-size-header .label-name, .selected-option, .vlr-policy-copy) {
	text-transform: none;
	letter-spacing: 0;
	font-size: 13px !important;
}

html:not(#vlr-apple-details) .ring-size-header .label-name {
	color: var(--vlr-muted);
}

html:not(#vlr-apple-details) :is(.variations select, .single_variation_wrap select, select#pa_groesse) {
	border-radius: var(--vlr-radius-control) !important;
	min-height: 48px;
}

/* Text-Optionen (Karat, Größe …) wie die Auswahlfelder; Farbkreise bleiben rund.
   Die Konfigurator-Regeln setzen 2 px mit `#row-… !important`, daher zwei
   (nicht existierende) IDs. */
html:not(#vlr-apple-details):not(#vlr-apple-details-row) .variations_form .button-variable-item {
	border-radius: var(--vlr-radius-control) !important;
}

html:not(#vlr-apple-details) .vlr-promises__title {
	font-size: 14px;
	font-weight: 600;
}

html:not(#vlr-apple-details) .vlr-promises__text {
	font-size: 13px;
	line-height: 1.45;
}

html:not(#vlr-apple-details) .wd-accordion-title {
	min-height: 64px;
}

html:not(#vlr-apple-details) .wd-accordion-title :is(.vlr-ring-specifications__tab-title, .wd-accordion-title-text, span) {
	font-size: 16px;
	font-weight: 500;
}

html:not(#vlr-apple-details) .vlr-tryon-entry__trigger {
	font-size: 14px;
}

/* 10 · Breadcrumbs */
html:not(#vlr-apple-details) :is(.vlr-main-plp-breadcrumb, .velur-breadcrumb, [class*="velur-breadcrumb"]) :is(a, span, li, ol) {
	font-size: 13px !important;
}

html:not(#vlr-apple-details) :is(.velur-breadcrumb-current, .velur-breadcrumb-current *) {
	color: var(--vlr-muted) !important;
}

/* 11 · Eyebrows: Versalien bleiben, lesbar */
/* vlr-critical:start */
html:not(#vlr-apple-details) :is(.vma-login-eyebrow, .vm-blog-hero__eyebrow, .vr-hero-label, .vr-label, .eyebrow, .vjr-eyebrow, .vlr-jewelry-why__eyebrow, .section-eyebrow, .vd-quote-eyebrow, .hp-craft__label, .hp-shapes__title, .v-kicker, .video-label, .vlr-filter-panel-eyebrow, .vr-section-label, .vr-tip-box-label, .vr-trust-label, .vr-product-card-label) {
	font-size: 12px !important;
	letter-spacing: 0.12em !important;
}
/* vlr-critical:end */

html:not(#vlr-apple-details) :is(.vma-login-eyebrow, .vm-blog-hero__eyebrow, .vr-hero-label, .vr-label) {
	color: var(--vlr-gold-ink) !important;
}

/* 12 · Formulare (Konto, Checkout, Gutschein, Suche) */
html:not(#vlr-apple-details) :is(.cfw-floatable-label, .vma-field label, form label[for]) {
	text-transform: none !important;
	letter-spacing: 0 !important;
}

html:not(#vlr-apple-details) :is(.cfw-floatable-label, .optional) {
	text-transform: none !important;
	font-size: 12px !important;
}

html:not(#vlr-apple-details) .vma-field label {
	font-size: 13px !important;
	font-weight: 600;
}

html:not(#vlr-apple-details) main :is(input[type="text"], input[type="email"], input[type="tel"], input[type="search"], input[type="number"], input[type="password"], textarea, select),
html:not(#vlr-apple-details) .vr-faq-search input {
	border-radius: var(--vlr-radius-control) !important;
}

html:not(#vlr-apple-details) :is(.vma-login-hint, .vlr-business-checkout__intro, .vc-row-note, .vc-delivery-short, .vc-remove, .vc-tax) {
	font-size: 13px !important;
}

/* 13 · Warenkorb */
html:not(#vlr-apple-details) .vc-card:not(.vc-items) {
	border-radius: var(--vlr-radius-media) !important;
}

html:not(#vlr-apple-details) :is(.vc-thumb, .woocommerce-mini-cart .cart-item-image) {
	border-radius: var(--vlr-radius-control);
	overflow: hidden;
}

/* 14 · Footer */
html:not(#vlr-apple-details) :is(.velur-footer__heading, .velur-footer__accordion summary) {
	text-transform: none !important;
	letter-spacing: 0 !important;
	font-family: var(--vlr-font-ui) !important;
	font-weight: 600 !important;
}

html:not(#vlr-apple-details) .velur-footer__heading {
	font-size: 14px !important;
}

html:not(#vlr-apple-details) .velur-footer__accordion summary {
	font-size: 15px !important;
}

html:not(#vlr-apple-details) .velur-footer a {
	font-size: 14px;
}

html:not(#vlr-apple-details) .velur-footer p {
	font-size: 13px;
}

html:not(#vlr-apple-details) :is(.velur-footer__trust-link, .velur-footer__stars) {
	font-size: 13px !important;
}

html:not(#vlr-apple-details) .velur-footer :is(p, a, span):not(.velur-footer__heading) {
	color: rgba(255, 255, 255, 0.74);
}

html:not(#vlr-apple-details) .velur-footer a:hover {
	color: var(--vlr-white);
}

@media (max-width: 767px) {
	html:not(#vlr-apple-details) .velur-footer li a {
		display: inline-block;
		padding: 7px 0;
	}
}

/* vlr-critical:start */
@media (max-width: 767px) {
	html:not(#vlr-apple-details) .hp-hero-link {
		border-radius: var(--vlr-radius-control) !important;
	}
}
/* vlr-critical:end */

/* 15 · Metadaten, Blog, FAQ, Diamanten */
html:not(#vlr-apple-details) :is(.updated, time, .vr-toc-count, .vr-faq-cat__count, .counter, .photo-number, .photo-caption, .velur-360-carousel-thumb-label, .v-quote-attribution) {
	font-size: 12.5px !important;
	letter-spacing: 0 !important;
}

html:not(#vlr-apple-details) .updated {
	text-transform: none !important;
	color: var(--vlr-muted) !important;
}

html:not(#vlr-apple-details) :is(.vr-faq-feedback__label, .vr-trust-item, .vd-callout) {
	font-size: 13px !important;
}

html:not(#vlr-apple-details) :is(.vd-scale small, .vd-qcard small, .vd-callout small) {
	font-size: 12px !important;
}

html:not(#vlr-apple-details) :is(.vr-faq-item summary h3, .vr-faq-question) {
	font-size: 16px !important;
	font-weight: 500 !important;
	letter-spacing: 0 !important;
}

html:not(#vlr-apple-details) .vr-faq-item summary {
	min-height: 56px;
}

html:not(#vlr-apple-details) .vr-faq-toc a {
	border-radius: var(--vlr-radius-pill) !important;
}

/* Die Listenregel gibt jedem Kapitel außer dem letzten 10 px Abstand unten;
   gestreckt rutschte das letzte Kapitel 5 px tiefer. */
html:not(#vlr-apple-details) .vr-faq-toc ul {
	align-items: flex-start;
}

/* 16 · Checkout: steht in mu-plugins/velur-checkout-display/checkout-display.css,
   weil CheckoutWC die Theme-Stylesheets auf der Kassenseite entfernt. */