/*
 * FRONTEND-BTNCENTER-001: one shared rule set that centres text in buttons, pills and badges.
 *
 * Why the text looked off-centre: the design's body font (Hind) puts its capital letters about 0.11em ABOVE the middle of its
 * line box, so with equal top/bottom padding every all-caps or short label sat ~1.5px high; and letter-spaced labels carry one
 * trailing letter-space after the last letter, which pushes the visible text ~half that spacing to the left.
 *
 * Fix (no per-element nudges): each padding tier moves the same amount of padding from bottom to top of the text
 * (--ck-lift, in em so it scales with the label's font-size). Heights stay exactly as before. Trailing letter-spacing is
 * compensated with a text-indent equal to the letter-spacing. This file is loaded inside the design's shadow root and on shop pages.
 *
 * Tiers below are the paddings the design's buttons/badges actually use: 2px (.ck-tag), 4px (badges), 6px, 8px (nav/filter
 * pills), 10px, 12px (buttons). Fixed-height buttons with no vertical padding (.qikink-pdp__pill) shift with padding-top.
 */
:root,
:host {
	--ck-lift: 0.11em;
}

/* 2px tier */
.ck-tag {
	padding-top: calc(2px + var(--ck-lift));
	padding-bottom: calc(2px - var(--ck-lift));
}

/* 4px tier: badges / chips */
:is(a, button, span)[class*="rounded-full"][class~="py-1"],
.ck-footer__badges > span,
.ck-pill,
.qikink-pdp__badge.qikink-pdp__badge {
	padding-top: calc(4px + var(--ck-lift));
	padding-bottom: calc(4px - var(--ck-lift));
}

/* 6px tier */
:is(a, button, span)[class*="rounded-full"][class~="py-1.5"] {
	padding-top: calc(6px + var(--ck-lift));
	padding-bottom: calc(6px - var(--ck-lift));
}

/* 8px tier: header cart, filter pills */
:is(a, button, span)[class*="rounded-full"][class~="py-2"],
.ck-cart {
	padding-top: calc(8px + var(--ck-lift));
	padding-bottom: calc(8px - var(--ck-lift));
}

/* 10px tier */
:is(a, button, span)[class*="rounded-full"][class~="py-2.5"] {
	padding-top: calc(10px + var(--ck-lift));
	padding-bottom: calc(10px - var(--ck-lift));
}

/* 12px tier: main buttons */
:is(a, button, span)[class*="rounded-full"][class~="py-3"],
.ck-btn,
body.ck-shop-page .qikink-pdp__design-now.qikink-pdp__design-now,
body.ck-shop-page .qikink-pdp__bulk-cta.qikink-pdp__bulk-cta {
	padding-top: calc(12px + var(--ck-lift));
	padding-bottom: calc(12px - var(--ck-lift));
}

/* fixed-height pills (PDP option pills): the label is centred by the button, so only the lift is added on top */
body.ck-shop-page .qikink-pdp__pill.qikink-pdp__pill {
	padding-top: calc(2 * var(--ck-lift));
	padding-bottom: 0;
}

/* text-indent only works on block containers: letter-spaced inline pills become inline-blocks (same baseline, same size) */
span[class*="rounded-full"][class*="tracking-"] { display: inline-block; }

/* trailing letter-spacing: the last letter is followed by one letter-space; an equal text-indent in front of the first letter
   makes the visible letters sit in the middle of the padding box (the pill grows by that one letter-space, at most 2px) */
[class~="tracking-widest"] { text-indent: 0.1em; }
[class~="tracking-wider"] { text-indent: 0.05em; }
[class~="tracking-wide"],
.ck-footer__badges > span,
.ck-tag { text-indent: 0.025em; }
[class*="tracking-[0.2em]"],
.ck-pill,
.qikink-pdp__badge.qikink-pdp__badge { text-indent: 0.2em; }
body.ck-shop-page .qikink-pdp__pill.qikink-pdp__pill { text-indent: 0.01em; }

/* PDP (/custom-product/) main buttons: same size as the design's "Start your design" / "Ask about bulk pricing" (14px text, 12px/24px padding) */
body.ck-shop-page .qikink-pdp__design-now.qikink-pdp__design-now,
body.ck-shop-page .qikink-pdp__bulk-cta.qikink-pdp__bulk-cta {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding-left: 24px;
	padding-right: 24px;
	font-size: 14px;
	line-height: 20px;
}

/* WooCommerce / theme buttons on shop pages (Track, Update, Login ...): the theme adds an empty ::after arrow box that pushes the
   label ~2.5px left, and they use 10px vertical padding. Same lift as the tiers above. */
body.ck-shop-page :is(.woocommerce button.button, .woocommerce a.button, .woocommerce input.button, .woocommerce-Button, .woocommerce-form button[type="submit"]):not(.wc-forward)::after {
	content: none;
	display: none;
}
body.ck-shop-page :is(.woocommerce button.button, .woocommerce a.button, .woocommerce-Button, .woocommerce-form button[type="submit"]) {
	padding-top: calc(10px + var(--ck-lift));
	padding-bottom: calc(10px - var(--ck-lift));
}

/* FRONTEND-BADGE-001: /custom-product/ category badge is 25px tall like the design's badge (11px text on a 17px line + 4px padding top and bottom; it was 19px with an 11px line). */
body.ck-shop-page .qikink-pdp__badge.qikink-pdp__badge {
	line-height: 17px;
}