/*
Theme Name: EthioKid Child
Theme URI: https://ethiokid.com/
Description: Upgrade-safe child theme for the EthioKid WooCommerce + Dokan marketplace.
Author: Imad Rehman
Template: hello-elementor
Version: 0.2.1
Text Domain: ethiokid-child
*/

/*
 * Scope (M1): only native WooCommerce and Dokan output that Elementor Site
 * Settings cannot style cleanly, plus one site-wide focus ring (WCAG 2.4.7).
 * Elementor pages, header and footer are styled in Elementor, not here.
 * Colors read the Elementor global color variables first; the hex values are
 * fallbacks only. Values that have no Elementor global are marked.
 * No !important except two rules in section 9, documented there.
 */

/* 1. Tokens ---------------------------------------------------------------- */

/* Constants that do not read Elementor globals. */
:root {
	/* Not Elementor globals: notice tints from the design spec, section 13.1. */
	--ek-success-bg: #DDF8DA;
	--ek-success-line: #9BD49A;
	--ek-info-bg: #DDF4FF;
	--ek-info-line: #9CCDEE;
	--ek-error-bg: #FDECEC;
	--ek-error-line: #E9A3A6;

	--ek-radius: 10px;
	--ek-radius-lg: 16px;
	--ek-gutter: 16px;
	--ek-section: 48px;

	--wc-form-border-radius: var(--ek-radius);
	--wc-form-border-width: 1px;
}

/* Elementor prints the kit's --e-global-color-* on .elementor-kit-N, a class
   on <body>, not on :root. Aliases that read those globals are declared on
   body so they resolve against the kit; on :root they would always fall back
   to the hex. The --wc-* aliases that read these tokens move with them. */
body {
	--ek-primary: var(--e-global-color-primary, #00733A);
	--ek-primary-hover: var(--e-global-color-196e450, #005C2E);
	--ek-ink: var(--e-global-color-secondary, #252525);
	--ek-muted: var(--e-global-color-262bde4, #5C5C5C);
	--ek-cream: var(--e-global-color-80de7cc, #FFF8E8);
	--ek-line: var(--e-global-color-57a0c74, #E7E0D2);
	--ek-line-strong: var(--e-global-color-376a45b, #8C8576);
	--ek-focus: var(--e-global-color-bb8300b, #078FE8);
	--ek-sale: var(--e-global-color-aae6fe5, #C8101C);
	--ek-white: var(--e-global-color-db5e562, #FFFFFF);

	/* WooCommerce core variables, so native rules pick up the tokens. */
	--wc-primary: var(--ek-primary);
	--wc-primary-text: var(--ek-white);
	--wc-red: var(--ek-sale);
	--wc-highlight: var(--ek-ink);
	--wc-highligh-text: var(--ek-white);
	--wc-subtext: var(--ek-muted);
	--wc-form-border-color: var(--ek-line-strong);
}

@media (min-width: 768px) {
	:root {
		--ek-gutter: 24px;
		--ek-section: 64px;
	}
}

@media (min-width: 1025px) {
	:root {
		--ek-gutter: 40px;
		--ek-section: 80px;
	}
}

/* 2. Focus ring (site-wide) ----------------------------------------------- */
/* Site Settings has no focus control for links and buttons. The ring sits
   2px off the element, so it lands on the page surface, never on a green fill.
   The [type] selectors match Hello Elementor's reset specificity. */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[type="button"]:focus-visible,
[type="submit"]:focus-visible {
	outline: 2px solid var(--ek-focus);
	outline-offset: 2px;
}

/* 3. Native WooCommerce page frame (Shop, archives, single product) ------- */
/* These screens use Hello's .site-main, not Elementor containers. Match the
   Elementor content width (1200px) and the page gutters. */

body.woocommerce .site-main {
	max-width: calc(1200px + 2 * var(--ek-gutter));
	padding-inline: var(--ek-gutter);
	padding-block: var(--ek-section);
}

.woocommerce-products-header__title.page-title {
	margin: 0 0 24px;
	color: var(--ek-ink);
	font-size: var(--e-global-typography-6437b0a-font-size, 44px);
	font-weight: 800;
	line-height: 1.15;
}

.woocommerce .woocommerce-breadcrumb {
	margin-bottom: 16px;
	color: var(--ek-muted);
	font-size: 14px;
}

.woocommerce .woocommerce-breadcrumb a {
	color: var(--ek-ink);
	text-decoration: underline;
}

.woocommerce .woocommerce-result-count {
	color: var(--ek-muted);
	font-size: 14px;
}

.woocommerce .woocommerce-ordering select {
	max-width: 240px;
}

@media (max-width: 767px) {
	.woocommerce .woocommerce-result-count,
	.woocommerce .woocommerce-ordering {
		float: none;
	}

	.woocommerce .woocommerce-ordering select {
		max-width: none;
		width: 100%;
	}
}

/* 4. Product grid on archives (2 / 3 / 4 columns) -------------------------- */
/* Archives only. The Elementor Products widget on Home keeps its own column
   controls. */

.archive.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px 16px;
}

.archive.woocommerce ul.products::before,
.archive.woocommerce ul.products::after {
	content: none;
}

.archive.woocommerce ul.products[class*="columns-"] li.product {
	width: auto;
	margin: 0;
	float: none;
	clear: none;
}

@media (min-width: 768px) {
	.archive.woocommerce ul.products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 32px 24px;
	}
}

@media (min-width: 1025px) {
	.archive.woocommerce ul.products {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* 5. Product card and category tile (Shop and Home widgets) --------------- */

.woocommerce ul.products li.product {
	display: flex;
	flex-direction: column;
	text-align: left;
}

.woocommerce ul.products li.product a img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	margin: 0 0 12px;
	border-radius: var(--ek-radius);
	background-color: var(--ek-cream);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .woocommerce-loop-category__title {
	display: -webkit-box;
	overflow: hidden;
	padding: 0;
	margin: 0 0 8px;
	color: var(--ek-ink);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.35;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.woocommerce ul.products li.product a:hover .woocommerce-loop-product__title,
.woocommerce ul.products li.product a:hover .woocommerce-loop-category__title {
	text-decoration: underline;
}

.woocommerce ul.products li.product-category mark.count {
	display: none;
}

.woocommerce ul.products li.product .price {
	margin-bottom: 12px;
	color: var(--ek-ink);
	font-size: 16px;
	font-weight: 800;
}

.woocommerce ul.products li.product .price del {
	color: var(--ek-muted);
	font-size: 14px;
	font-weight: 400;
	opacity: 1;
}

.woocommerce ul.products li.product .price ins {
	color: var(--ek-sale);
	text-decoration: none;
}

.woocommerce ul.products li.product .button {
	width: 100%;
	margin-top: auto;
	font-size: 14px;
}

.woocommerce ul.products li.product .added_to_cart {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--ek-primary);
	text-decoration: underline;
}

.woocommerce span.onsale,
.woocommerce ul.products li.product .onsale {
	top: 8px;
	right: auto;
	left: 8px;
	min-width: 0;
	min-height: 24px;
	margin: 0;
	padding: 0 10px;
	border-radius: 999px;
	background-color: var(--ek-sale);
	color: var(--ek-white);
	font-size: 12px;
	font-weight: 800;
	line-height: 24px;
}

/* 6. Buttons --------------------------------------------------------------- */
/* Default native button = secondary (outline). .alt, checkout and account
   submit buttons = primary. Matches the Elementor Site Settings button. */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 10px 20px;
	border: 1px solid var(--ek-ink);
	border-radius: var(--ek-radius);
	background-color: transparent;
	color: var(--ek-ink);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
	background-color: var(--ek-cream);
	color: var(--ek-ink);
}

.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce button.woocommerce-form-login__submit,
.woocommerce button.woocommerce-form-register__submit {
	min-height: 48px;
	border-color: var(--ek-primary);
	background-color: var(--ek-primary);
	color: var(--ek-white);
}

.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce button.woocommerce-form-login__submit:hover,
.woocommerce button.woocommerce-form-register__submit:hover {
	border-color: var(--ek-primary-hover);
	background-color: var(--ek-primary-hover);
	color: var(--ek-white);
}

.woocommerce a.checkout-button,
.woocommerce #place_order {
	width: 100%;
	min-height: 52px;
}

/* 7. Fields, labels, errors, tables, notices ------------------------------- */
/* Same values as Site Settings > Form Fields, so native and Elementor forms
   match whichever stylesheet wins. */

.woocommerce form .form-row label {
	margin-bottom: 6px;
	color: var(--ek-ink);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
}

.woocommerce form .form-row .input-text,
.woocommerce form .form-row select {
	min-height: 48px;
	padding: 12px 14px;
	border: 1px solid var(--ek-line-strong);
	border-radius: var(--ek-radius);
	background-color: var(--ek-white);
	color: var(--ek-ink);
	font-size: 16px;
	line-height: 1.4;
}

.woocommerce form .form-row textarea.input-text {
	min-height: 144px;
	resize: vertical;
}

.woocommerce form .form-row .input-text:hover,
.woocommerce form .form-row select:hover {
	border-color: var(--ek-ink);
}

.woocommerce form .form-row.woocommerce-invalid .input-text,
.woocommerce form .form-row.woocommerce-invalid select {
	border-width: 2px;
	border-color: var(--ek-sale);
}

/* Woo's inline error text already says what is wrong; this only sets weight. */
.woocommerce form .form-row .checkout-inline-error-message {
	color: var(--ek-sale);
	font-size: 14px;
	font-weight: 700;
}

.woocommerce .quantity .qty {
	width: 72px;
	min-height: 44px;
	border-radius: 6px;
}

.woocommerce-cart table.cart td.actions .coupon .input-text {
	min-height: 44px;
	border-color: var(--ek-line-strong);
	border-radius: var(--ek-radius);
}

/* Woo sets outline: 0 on the coupon field; restore the ring. */
.woocommerce-cart table.cart td.actions .coupon .input-text:focus-visible {
	outline: 2px solid var(--ek-focus);
	outline-offset: 2px;
}

.select2-container--default .select2-selection--single {
	height: 48px;
	border: 1px solid var(--ek-line-strong);
	border-radius: var(--ek-radius);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
	padding-left: 14px;
	color: var(--ek-ink);
	line-height: 46px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
	right: 8px;
	height: 46px;
}

.select2-container--default.select2-container--focus .select2-selection--single {
	outline: 2px solid var(--ek-focus);
	outline-offset: 2px;
}

.woocommerce form.login,
.woocommerce form.register,
.woocommerce form.checkout_coupon {
	padding: 24px;
	border: 1px solid var(--ek-line);
	border-radius: var(--ek-radius-lg);
}

.woocommerce table.shop_table {
	border-color: var(--ek-line);
	border-radius: var(--ek-radius);
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	padding: 16px;
	border-color: var(--ek-line);
}

.woocommerce table.shop_table th {
	font-size: 14px;
	font-weight: 800;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	padding: 14px 16px 14px 48px;
	border: 1px solid var(--ek-success-line);
	border-radius: var(--ek-radius);
	background-color: var(--ek-success-bg);
	color: var(--ek-ink);
	font-size: 15px;
}

.woocommerce-info {
	border-color: var(--ek-info-line);
	background-color: var(--ek-info-bg);
}

.woocommerce-error {
	border-color: var(--ek-error-line);
	background-color: var(--ek-error-bg);
}

/* Keep Woo's icon (the notice never relies on color alone); recolor it. */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
	top: 14px;
	left: 16px;
	color: var(--ek-ink);
}

/* 8. Pagination (Shop) ----------------------------------------------------- */

.woocommerce nav.woocommerce-pagination ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-top: 48px;
	border: 0;
}

.woocommerce nav.woocommerce-pagination ul li {
	float: none;
	overflow: visible;
	border: 0;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 12px;
	border: 1px solid var(--ek-line);
	border-radius: var(--ek-radius);
	color: var(--ek-ink);
	font-size: 16px;
	font-weight: 700;
}

.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li a:focus {
	background-color: var(--ek-cream);
	color: var(--ek-ink);
}

.woocommerce nav.woocommerce-pagination ul li span.current {
	border-color: var(--ek-ink);
	background-color: var(--ek-ink);
	color: var(--ek-white);
}

/* 9. Dokan vendor onboarding form ([dokan-vendor-onboarding-registration]) - */
/* Dokan's vendor-onboarding.css sets its own font, padding, black uppercase
   buttons, outline:none on focus and low-contrast link colors. Selectors
   below are one level more specific than Dokan's, so no !important is needed
   except for the shop URL message (Dokan sets that color with !important). */

body .dokan-vendor-onboarding {
	max-width: none;
	padding: 0;
	font-family: inherit;
}

.dokan-vendor-onboarding .dokan-login-section h2,
.dokan-vendor-onboarding .dokan-registration-section h2 {
	margin-bottom: 24px;
	color: var(--ek-ink);
	font-size: var(--e-global-typography-04a3d3d-font-size, 32px);
	font-weight: 800;
	line-height: 1.2;
}

.dokan-vendor-onboarding .dokan-login-section label,
.dokan-vendor-onboarding .dokan-registration-section label {
	margin-bottom: 6px;
	color: var(--ek-ink);
	font-size: 14px;
	font-weight: 700;
}

.dokan-vendor-onboarding .dokan-login-section input[type="text"],
.dokan-vendor-onboarding .dokan-login-section input[type="password"],
.dokan-vendor-onboarding .dokan-login-section input[type="email"],
.dokan-vendor-onboarding .dokan-registration-section input[type="text"],
.dokan-vendor-onboarding .dokan-registration-section input[type="password"],
.dokan-vendor-onboarding .dokan-registration-section input[type="email"],
.dokan-vendor-onboarding .dokan-registration-section input[type="tel"],
.dokan-vendor-onboarding .dokan-registration-section input[type="url"],
.dokan-vendor-onboarding .dokan-registration-section select,
.dokan-vendor-onboarding .dokan-registration-section textarea {
	min-height: 48px;
	padding: 12px 14px;
	border: 1px solid var(--ek-line-strong);
	border-radius: var(--ek-radius);
	color: var(--ek-ink);
	font-size: 16px;
}

.dokan-vendor-onboarding .dokan-login-section input[type="text"]:focus,
.dokan-vendor-onboarding .dokan-login-section input[type="password"]:focus,
.dokan-vendor-onboarding .dokan-login-section input[type="email"]:focus,
.dokan-vendor-onboarding .dokan-registration-section input:focus,
.dokan-vendor-onboarding .dokan-registration-section select:focus,
.dokan-vendor-onboarding .dokan-registration-section textarea:focus {
	border-color: var(--ek-ink);
	outline: 2px solid var(--ek-focus);
	outline-offset: 2px;
}

.dokan-vendor-onboarding .dokan-login-section button[type="submit"],
.dokan-vendor-onboarding .dokan-login-section .button,
.dokan-vendor-onboarding .dokan-registration-section button[type="submit"],
.dokan-vendor-onboarding .dokan-registration-section .dokan-btn {
	min-height: 48px;
	padding: 12px 24px;
	border-radius: var(--ek-radius);
	background-color: var(--ek-primary);
	color: var(--ek-white);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
}

.dokan-vendor-onboarding .dokan-login-section button[type="submit"]:hover,
.dokan-vendor-onboarding .dokan-login-section .button:hover,
.dokan-vendor-onboarding .dokan-registration-section button[type="submit"]:hover,
.dokan-vendor-onboarding .dokan-registration-section .dokan-btn:hover {
	background-color: var(--ek-primary-hover);
}

.dokan-vendor-onboarding .dokan-login-section .lost_password a {
	color: var(--ek-primary);
	text-decoration: underline;
}

.dokan-vendor-onboarding .dokan-registration-section .help-block,
.dokan-vendor-onboarding .dokan-registration-section .description {
	color: var(--ek-muted);
	font-size: 14px;
}

/* Shop URL availability message. Dokan sets #28a745 / #dc3545 with
   !important; #28a745 is 3.1:1 on white and fails AA for this 14px text.
   !important is the only way to override a plugin !important. Dokan's message
   is text ("Available" / "Not Available"), so it never relies on color alone. */
.dokan-vendor-onboarding #url-alart-mgs.text-success {
	color: var(--ek-primary) !important;
	font-weight: 700;
}

.dokan-vendor-onboarding #url-alart-mgs.text-danger {
	color: var(--ek-sale) !important;
	font-weight: 700;
}