/*
 * FRONTEND-A11Y-001: text colours that were below WCAG AA (4.5:1) on cream/white, same hue, only darker.
 * Text only: backgrounds, borders, buttons and the dark (ink) sections keep the exact brand colours.
 * #d32f0f is the brand coral darkened to 4.56:1 on cream and 5.02:1 on white. #c42a0e is for coral text on the pale coral tag (4.7:1).
 */
:root {
	--ck-coral-text: #d32f0f;
	--ck-coral-tag: #c42a0e;
	--ck-muted-text: #6a6864;
}

/* Home (customkaro-home.css) */
html body .ck-home .ck-eyebrow,
html body .ck-home .ck-link,
html body .ck-home .ck-mini:not(.ck-mini--coral) .ck-mini__price,
html body .ck-home .woocommerce-Price-amount,
html body .ck-home .woocommerce-Price-currencySymbol {
	color: var(--ck-coral-text) !important;
}
html body .ck-home .ck-header .ck-logo__text span {
	color: var(--ck-coral-text) !important;
}
/* The same labels on the dark sections keep the exact brand coral (it is already above 4.5:1 on ink). */
html body .ck-home :is(.ck-hero, .ck-marquee, .ck-how, .ck-footer, .ck-cart) :is(.ck-eyebrow, .ck-link, .ck-mini__price) {
	color: var(--ck-coral) !important;
}
html body .ck-home .ck-tag {
	color: var(--ck-coral-tag) !important;
}
html body .ck-home .ck-quote figcaption span {
	color: rgba(26, 24, 22, 0.66) !important;
}
html body .ck-home .ck-slider__count {
	color: var(--ck-muted-text) !important;
}

/* Design pages built from the Lovable templates (Tailwind classes), light backgrounds only. No html/body prefix: these pages draw inside a shadow root, where only the plain selector matches. */
.text-coral {
	color: var(--ck-coral-text) !important;
}
/* Links inside a policy page's text (the text block carries [&_a]:text-coral): the e-mail link was 3.4:1 on cream. */
.\[\&_a\]\:text-coral a {
	color: var(--ck-coral-text) !important;
}
footer .text-coral,
:is(.bg-ink, [class*="bg-ink"], .bg-coral) .text-coral {
	color: #f2422d !important;
}
:is(.text-ink\/40, .text-ink\/50, .text-ink\/60) {
	color: rgba(26, 24, 22, 0.66) !important;
}

/* Order tracking page: the eyebrow label (coral on cream, 3.3:1) */
html body .qikink-tracking-eyebrow {
	color: var(--ck-coral-text) !important;
}

/* Product page (qikink-catalog-shop.css) */
html body .qikink-pdp__breadcrumbs a,
html body .qikink-pdp__breadcrumbs-current,
html body .qikink-pdp__price-note,
html body .qikink-pdp__pd-text {
	color: var(--ck-muted-text) !important;
}
html body .qikink-pdp__pd-label,
html body .qikink-pdp__related-price {
	color: var(--ck-coral-text) !important;
}
/* 1.4.400: the line prices in the checkout order summary are 14px text: the AA coral (5:1 on white), not the decorative one (3.7:1). */
html body.ck-shop-page :is(.wc-block-components-order-summary-item__individual-prices, .wc-block-components-order-summary-item__total-price) :is(.wc-block-formatted-money-amount, .wc-block-components-product-price__value, .price) {
	color: var(--ck-coral-text) !important;
}

/* Text for screen readers only (used for the logo link name). Plain selector: it is also used inside the design pages' shadow root. */
.ck-sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
	border: 0 !important;
}
/* My account / login card: the coral "Karo" in the wordmark on white (3.7:1) */
html body .ck-login-card .ck-login-word span { color: #d32f0f; }

/* 1.4.414: "Skip to content": off-screen until it takes keyboard focus, then a pill at the top left above everything. */
.ck-skip-link { position: absolute; left: 8px; top: -60px; z-index: 100100; padding: 10px 16px; border-radius: 999px; background: var(--ck-ink, #1a1816); color: var(--ck-cream, #f6f4ec); font: 600 14px/1.2 Hind, system-ui, sans-serif; text-decoration: none; }
.ck-skip-link:focus { top: 8px; outline: 3px solid var(--ck-coral, #f04a2a); outline-offset: 2px; }