/* ==========================================================================
   messe-display — legacy-body compatibility
   For pages whose BODY is still the legacy markup (cart, checkout, account,
   auth) but whose header/footer are the new md-* components.
   Only two jobs: stop the two stylesheets fighting, and bring the legacy form
   controls onto the new type scale.
   ========================================================================== */

/* styling.css sets `body { line-height: 1 }`; the md- chrome needs normal
   leading. Scoped to the chrome so the legacy body is untouched. */
.md-header, .md-footer { line-height: 1.5; }

/* The legacy sheet floats .bigCnt and friends. The new header/footer are flex
   and must not be dragged into that flow. */
.md-header, .md-footer, .md-header *, .md-footer * { float: none; }

/* styling.css applies `* { outline: none }`, which kills keyboard focus rings
   site-wide. Put them back for the chrome and for form controls. */
.md-header a:focus-visible,
.md-footer a:focus-visible,
.md-header button:focus-visible,
.md-footer button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible { outline: 2px solid var(--md-purple); outline-offset: 2px; }

/* The legacy pages used a full-width fixed header; the new one is sticky and
   76px tall, so remove the old spacer classes that reserved room for it. */
.bigCntHeaderTopSpacer, .logoTop { display: none !important; }

/* Legacy content sat under a fixed header; with the sticky md-header it needs
   a little breathing room instead. */
.bigCnt:first-of-type { margin-top: 24px; }

/* styling.css raises the base font-size inside the header, which inflated the
   nav from 555px to 878px and squeezed the logo. Pin the chrome's own type.
   NOTE: these are two-class selectors (0,2,0) and therefore out-rank the
   single-class mobile rules in base.css — so every size set here must be
   re-stated in the mobile blocks below, or the header overflows on phones. */
.md-header, .md-footer { font-family: var(--md-font); font-size: 15px; }
.md-header .md-nav-link { font-size: 14px; line-height: 16.9px; }
.md-header .md-wordmark { font-size: 32px; line-height: 40.3px; }
.md-header .md-lang { font-size: 14px; line-height: 18.2px; }
.md-footer .md-footer-link { font-size: 15px; line-height: 22px; }
.md-footer .md-footer-head { font-size: 18px; line-height: 18px; }

@media (max-width: 759px) {
	.md-header .md-wordmark { font-size: 20px; line-height: 26px; }
	/* base.css collapses the language label to a globe on mobile via
	   `.md-lang { font-size: 0 }` (0,1,0). The pin above is (0,2,0) and was
	   winning, leaving a 53px "Deutsch" that pushed the header 18px past the
	   viewport at 320. Re-state it here. */
	.md-header .md-lang { font-size: 0; line-height: 0; }
}
@media (max-width: 400px) {
	.md-header .md-wordmark { font-size: 18px; line-height: 24px; }
}

/* The legacy sheet zeroes list padding globally; the footer columns rely on
   their own spacing, which is already set — just make sure nothing indents. */
.md-footer__col ul { margin: 0; padding: 0; list-style: none; }

/* ==========================================================================
   Form controls — checkboxes, radios, password reveal
   --------------------------------------------------------------------------
   styling.css hides the real input at left:-9999px and hand-draws the control
   on the sibling label's ::before / ::after. The ::before is a rotated-border
   "tick", and for `.selectOptionProfileBuilderCntINS` it also carries
   `background: #292a2e !important`, which fills that 5x11 box solid instead of
   leaving it as two borders — so a ticked checkbox rendered as a black slab.
   The radio had the opposite problem: a 14px dot inside a 20px ring leaves a
   2px gap, reading as one filled blob.

   Rather than re-tune the hack we drop ::before entirely and draw the whole
   control on ::after, with the tick/dot as a background image.

   ⚠ SPECIFICITY: styling.css is linked first (linksNew.php), this file second
   (md-chrome-head.php), so source order is on our side — but its selectors
   reach (0,3,2) and several of the properties we need are !important there.
   Repeating the attribute selector lifts ours to (0,4,2) without touching any
   markup. Do not "simplify" it back to a single [type=...].
   ========================================================================== */

/* Drop the hand-drawn tick / inner dot. */
[type="checkbox"][type="checkbox"][type="checkbox"] + label::before,
[type="radio"][type="radio"][type="radio"] + label::before {
	content: none !important;
}

/* The label is the positioning context for the control. styling.css gives it
   `overflow: hidden` and a 20px line-height, so a 20px box offset 2px from the
   top had its last 2px clipped — the tick looked cut off along the bottom. */
[type="checkbox"][type="checkbox"][type="checkbox"] + label,
[type="radio"][type="radio"][type="radio"] + label {
	overflow: visible !important;
	min-height: 24px !important;
	line-height: 24px !important;
}

/* The control itself. */
[type="checkbox"][type="checkbox"][type="checkbox"] + label::after,
[type="radio"][type="radio"][type="radio"] + label::after {
	content: '' !important;
	position: absolute !important;
	top: 2px !important;
	left: 0 !important;
	right: auto !important;
	width: 20px !important;
	height: 20px !important;
	box-sizing: border-box !important;
	border: 1px solid var(--md-grey) !important;
	background-color: var(--md-white) !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	background-size: 13px 13px !important;
	transform: none !important;
	z-index: 0 !important;
	transition: background-color .15s ease, border-color .15s ease !important;
}
[type="checkbox"][type="checkbox"][type="checkbox"] + label::after { border-radius: var(--md-r-4) !important; }
[type="radio"][type="radio"][type="radio"] + label::after       { border-radius: 50% !important; }

[type="checkbox"][type="checkbox"][type="checkbox"] + label:hover::after,
[type="radio"][type="radio"][type="radio"] + label:hover::after {
	border-color: var(--md-purple) !important;
}

/* Checked — brand purple box with a white tick / white ring with a purple dot. */
[type="checkbox"][type="checkbox"][type="checkbox"]:checked + label::after {
	border-color: var(--md-purple) !important;
	background-color: var(--md-purple) !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.4l3.3 3.3L13 5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}
[type="radio"][type="radio"][type="radio"]:checked + label::after {
	border-color: var(--md-purple) !important;
	background-color: var(--md-white) !important;
	background-image: radial-gradient(circle at 50% 50%, var(--md-purple) 0 5px, transparent 5px) !important;
	background-size: 100% 100% !important;
}

[type="checkbox"][type="checkbox"][type="checkbox"]:focus-visible + label::after,
[type="radio"][type="radio"][type="radio"]:focus-visible + label::after {
	outline: 2px solid var(--md-purple) !important;
	outline-offset: 2px !important;
}
[type="checkbox"][type="checkbox"][type="checkbox"]:disabled + label::after,
[type="radio"][type="radio"][type="radio"]:disabled + label::after {
	opacity: .45 !important;
}

/* --------------------------------------------------------------------------
   Password reveal. The legacy rule pins a 40x40 PNG at `top:27px; right:0`,
   which assumes one exact label height and drifts off the field otherwise, and
   ships a heavy black raster. Anchor it to the bottom of the field instead —
   `.inputFieldsNew` is position:relative and the input (38px + 2px border) is
   its last in-flow child — and draw the eye inline in the theme ink colour.
   -------------------------------------------------------------------------- */
.makePassReadable {
	top: auto !important;
	bottom: 0 !important;
	right: 0 !important;
	width: 42px !important;
	height: 40px !important;
	background-size: 20px 20px !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1A1A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.8 12S5.9 4.9 12 4.9 22.2 12 22.2 12 18.1 19.1 12 19.1 1.8 12 1.8 12z'/%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3C/svg%3E") !important;
	opacity: .55;
	transition: opacity .15s ease;
}
.makePassReadable:hover { opacity: 1; }
.makePassReadableActive {
	top: auto !important;
	opacity: 1;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23342155' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.9 5.2A9.6 9.6 0 0 1 12 4.9c6.1 0 10.2 7.1 10.2 7.1a18 18 0 0 1-2.7 3.6M6.3 6.4A18 18 0 0 0 1.8 12S5.9 19.1 12 19.1a9.4 9.4 0 0 0 4-.9'/%3E%3Cpath d='M9.8 9.8a3.2 3.2 0 0 0 4.5 4.5'/%3E%3Cpath d='M2.5 2.5l19 19'/%3E%3C/svg%3E") !important;
}
/* `.textFields` / `.textareaFields` carry `width: calc(100% - 22px)`, written
   when the box model was content-box so the 10+10 padding and 1+1 border would
   be added back. base.css sets a global `box-sizing: border-box`, so that 22px
   is now subtracted twice: every text input renders 22px narrower than the
   `.selectBox` next to it (visible as ragged right edges down the checkout
   address form), and it is what left the reveal button hanging off the field. */
.textFields, .textareaFields { width: 100% !important; }

/* The reveal sits inside the field, so keep the text clear of it. */
.inputFieldsNewPassword .textFields { padding-right: 46px !important; }

/* ==========================================================================
   Buttons — the legacy CTAs still carried the old jewellery palette
   (#f0eee4 beige on black text). Map them onto the design system: brand
   purple, white label, the 10px radius and the uppercase/tracked type used by
   `.md-btn` on the redesigned pages.
   ========================================================================== */
.updateCartBtn,
.continueBtnUp,
.submitContactForm,
.continueBtnUpOnCart,
.submitOrderBtn,
.continueShoppingBtn,
.addToCartBtnOnProduct,
.signInBtn,
.reOrderFormBtnIn {
	background-color: var(--md-purple) !important;
	color: var(--md-white) !important;
	border: none !important;
	border-radius: var(--md-r-10) !important;
	font-family: var(--md-font) !important;
	font-weight: 700 !important;
	letter-spacing: 1.05px !important;
	text-transform: uppercase !important;
	transition: opacity .18s ease !important;
}
.updateCartBtn:hover,
.continueBtnUp:hover,
.submitContactForm:hover,
.continueBtnUpOnCart:hover,
.submitOrderBtn:hover,
.continueShoppingBtn:hover,
.addToCartBtnOnProduct:hover,
.signInBtn:hover,
.reOrderFormBtnIn:hover { opacity: .85 !important; }

/* The trailing chevron is an icon-font ::after — inherit the new label colour. */
.continueBtnUpOnCart::after,
.submitOrderBtn::after { color: var(--md-white) !important; }