/*
Theme Name: Qedami
Theme URI: https://qedamigebeya.com
Author: Qedami Gebeya
Author URI: https://qedamigebeya.com
Description: Custom classic theme for Qedami Gebeya, an Ethiopian retail, wholesale and distribution marketplace built on WooCommerce.
Version: 0.4.0
Requires at least: 6.4
Tested up to: 6.6
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: qedami
*/

/* Base reset. Component styles live in assets/css and components/*, enqueued in inc/enqueue.php. */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--qg-color-bg);
	color: var(--qg-color-ink);
	font-family: var(--qg-font-body);
	font-size: 1rem;
	line-height: 1.6;
}

img,
svg {
	max-width: 100%;
	display: block;
}

/* Elementor's global Kit CSS sets `body { display: grid; ... }` (a sticky-
   footer layout trick) site-wide. A CSS grid item's default min-width is
   `auto` — i.e. the width of its widest un-shrinkable content — not 0, so
   #qg-main (a direct grid item of <body>, via header.php/footer.php) can
   silently force the whole page wider than the viewport the moment any of
   its content (e.g. the shop toolbar's sort-pill row) has enough min-content
   width. Reset it back to 0 so #qg-main always respects the viewport, same
   as it would under a normal block layout. */
#qg-main {
	min-width: 0;
}

/* Elementor's global Kit CSS also ships a blanket ".elementor-kit-13
   img:hover { opacity: 0; }" — presumably meant for one specific Elementor
   widget's fade effect, but since it targets every <img> tag site-wide, it
   was fading out product photos and the header logo to invisible/white the
   moment the pointer touched them. Same fix as the button box-shadow leak
   above: match it with the body's own theme class to win on specificity
   without !important. */
body.theme-qedami img:hover {
	opacity: 1;
}

a {
	color: inherit;
}

button {
	font-family: inherit;
	appearance: none;
	-webkit-appearance: none;
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	color: inherit;
	cursor: pointer;
}

/* Elementor's global Kit CSS (.elementor-kit-13 button, loaded site-wide
   since Elementor is also active for other pages) gives every <button> a
   drop-shadow by default — a stray dark halo behind icon buttons like
   search/menu that the plain `button` reset above can't beat on
   specificity alone, since Elementor's selector always pairs its kit class
   with the button type. Matching it with the body's own theme class (always
   present) wins the same way without reaching for !important, so a
   genuinely intentional :hover shadow elsewhere (e.g. the single-product
   add-to-cart button) can still override this normally. */
body.theme-qedami button {
	box-shadow: none;
}

.qg-container {
	width: 100%;
	max-width: 1280px;
	margin-inline: auto;
	padding-inline: var(--qg-space-4);
}

.qg-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 10000;
	background: var(--qg-color-ink);
	color: var(--qg-color-paper);
	padding: 0.75em 1.25em;
	border-radius: 0 0 6px 0;
}

.qg-skip-link:focus {
	left: 0;
}

.qg-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}