/* ==========================================================================
   APSHA MART — Global CSS layer (v1.0.0, 2026-11-07)
   File: wp-content/themes/apsha-child/assets/css/apsha-global.css

   Colors and the main font come from Elementor V4 global variables
   (--royal-blue, --deep-navy, --black, --white, --silver-gray, --page-bg,
   --font-inter). The hex values below are only fallbacks if those variables
   are not loaded on a page. To change a brand color, change it ONCE in
   Elementor (global variables); do not edit hex values here.

   Approved palette only. No red / green / yellow, no gradients.
   ========================================================================== */

:root {
	--apsha-primary: var(--royal-blue, #1565C0);
	--apsha-navy: var(--deep-navy, #102A43);
	--apsha-text: var(--black, #111111);
	--apsha-white: var(--white, #FFFFFF);
	--apsha-border: var(--silver-gray, #D9D9D9);
	--apsha-bg: var(--page-bg, #F7FAFF);
	--apsha-button-light: var(--button-light, #F4F5FC); /* v1.5.8: Elementor global variable "button-light" */
	--apsha-muted: var(--muted-text, #707070);          /* v1.5.8: Elementor global variable "muted-text" (4.9:1 on white) */

	--apsha-font: var(--font-inter, "Inter"), "Hind Siliguri", sans-serif;

	/* Product Card text styles (v1.5.8) — change them here only; the card CSS uses these tokens.
	   Font family comes from Elementor (--font-inter). Mobile values are below (max-width: 767px). */
	--apsha-card-image-ratio: 4 / 5;
	--apsha-card-brand-size: 12.5px;
	--apsha-card-brand-weight: 400;
	--apsha-card-title-size: 17px;
	--apsha-card-title-weight: 600;
	--apsha-card-price-size: 24px;
	--apsha-card-price-range-size: 20px;
	--apsha-card-price-weight: 700;
	--apsha-card-old-price-size: 16px; /* v1.5.9: 14px → 16px, still smaller than the 24px current price */
	--apsha-card-old-price-weight: 700;
	--apsha-card-badge-size: 12px;
	--apsha-card-badge-weight: 700;
	--apsha-card-button-size: 16px;
	--apsha-card-button-weight: 700;

	/* Product grid columns (v1.5.9) — change the number here only. */
	--apsha-grid-cols-shop: 4;         /* Shop, category and search pages (with the filters sidebar), ≥1280px */
	--apsha-grid-cols-shop-compact: 3; /* Same pages, 1025–1279px (4 columns there = 146–208px cards, prices cut off) */
	--apsha-grid-cols-home: 4;      /* Homepage, 1025–1439px */
	--apsha-grid-cols-home-wide: 5; /* Homepage, ≥1440px */
	--apsha-grid-cols-tablet: 3;    /* Every product grid, 768–1024px */
	--apsha-grid-cols-mobile: 2;    /* Every product grid, ≤767px */

	--apsha-radius-card: 12px;
	--apsha-radius-ui: 8px;
	--apsha-container: 1280px;
	--apsha-gutter: 32px;
	--apsha-tap: 44px;
	--apsha-shadow: 0 6px 18px rgba(16, 42, 67, 0.08); /* Deep Navy at 8% */
}

@media (max-width: 1024px) {
	:root { --apsha-gutter: 24px; }
}

@media (max-width: 767px) {
	:root {
		--apsha-gutter: 16px;
		/* Product Card text styles, mobile (v1.5.8) */
		--apsha-card-brand-size: 11px;
		--apsha-card-title-size: 15px;
		--apsha-card-price-size: 18px;
		--apsha-card-price-range-size: 15px;
		--apsha-card-old-price-size: 13px; /* v1.5.9: 11.5px → 13px, still smaller than the 18px current price */
		--apsha-card-badge-size: 10.5px;
		--apsha-card-button-size: 14px;
	}
}

/* --------------------------------------------------------------------------
   1. Base
   -------------------------------------------------------------------------- */
body {
	font-family: var(--apsha-font);
	color: var(--apsha-text);
	background-color: var(--apsha-white);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--apsha-font);
	color: var(--apsha-navy);
}

a {
	color: var(--apsha-primary);
}

a:hover,
a:active {
	color: var(--apsha-navy);
}

/* Bangla support on Elementor text: keep the Elementor font first,
   add Hind Siliguri as the fallback for Bangla characters. */
.elementor.elementor :is(h1, h2, h3, h4, h5, h6, p, a, span, li, button, label) {
	font-family: var(--font-inter, "Inter"), "Hind Siliguri", sans-serif;
}

/* Visible keyboard focus everywhere */
:focus-visible {
	outline: 3px solid var(--apsha-primary);
	outline-offset: 2px;
}

::selection {
	background-color: var(--apsha-primary);
	color: var(--apsha-white);
}

/* Hello Elementor default header (temporary, until the custom header is built) */
.site-header .site-title a,
.site-header .site-branding .site-title a {
	color: var(--apsha-navy);
}

.site-header .site-description {
	color: var(--apsha-text);
}

/* --------------------------------------------------------------------------
   2. Form fields (WordPress + WooCommerce classic forms)
   -------------------------------------------------------------------------- */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="url"],
textarea,
select,
.woocommerce form .input-text {
	font-family: var(--apsha-font);
	font-size: 15px;
	color: var(--apsha-text);
	background-color: var(--apsha-white);
	border: 1px solid var(--apsha-border);
	border-radius: var(--apsha-radius-ui);
	min-height: var(--apsha-tap);
	padding: 10px 14px;
	transition: border-color 0.15s ease;
}

textarea {
	min-height: 120px;
}

input:focus,
textarea:focus,
select:focus,
.woocommerce form .input-text:focus {
	border-color: var(--apsha-primary);
	outline: 2px solid var(--apsha-primary);
	outline-offset: 1px;
}

label {
	font-weight: 500;
	color: var(--apsha-text);
}

/* --------------------------------------------------------------------------
   3. Buttons (WooCommerce classic)
   -------------------------------------------------------------------------- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--apsha-tap);
	padding: 12px 24px;
	font-family: var(--apsha-font);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--apsha-white);
	background-color: var(--apsha-primary);
	border: 1px solid var(--apsha-primary);
	border-radius: var(--apsha-radius-ui);
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
	color: var(--apsha-white);
	background-color: var(--apsha-navy);
	border-color: var(--apsha-navy);
}

.woocommerce a.button.disabled,
.woocommerce a.button:disabled,
.woocommerce button.button.disabled,
.woocommerce button.button:disabled,
.woocommerce button.button:disabled[disabled],
.woocommerce button.button.alt.disabled {
	color: var(--apsha-text);
	background-color: var(--apsha-border);
	border-color: var(--apsha-border);
	opacity: 0.6;
	cursor: not-allowed;
}

/* WooCommerce block buttons (Cart / Checkout blocks) */
.wc-block-components-button:not(.is-link),
.wp-block-button__link,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
	min-height: var(--apsha-tap);
	font-family: var(--apsha-font);
	font-weight: 600;
	color: var(--apsha-white);
	background-color: var(--apsha-primary);
	border: 1px solid var(--apsha-primary);
	border-radius: var(--apsha-radius-ui);
}

.wc-block-components-button:not(.is-link):hover,
.wp-block-button__link:hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover {
	color: var(--apsha-white);
	background-color: var(--apsha-navy);
	border-color: var(--apsha-navy);
}

/* WooCommerce block inputs */
.wc-block-components-text-input input,
.wc-block-components-textarea,
.wc-block-components-combobox .wc-block-components-combobox-control input,
.wc-blocks-components-select .wc-blocks-components-select__select {
	border-color: var(--apsha-border);
	border-radius: var(--apsha-radius-ui);
}

.wc-block-components-text-input.is-active input,
.wc-block-components-text-input input:focus {
	border-color: var(--apsha-primary);
	box-shadow: 0 0 0 1px var(--apsha-primary);
}

/* --------------------------------------------------------------------------
   4. Prices, badges, stock, ratings (brand colors only)
   -------------------------------------------------------------------------- */
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	font-weight: 700;
	color: var(--apsha-navy);
}

.woocommerce ul.products li.product .price del,
.woocommerce div.product p.price del,
.woocommerce div.product span.price del {
	font-weight: 400;
	color: var(--apsha-text);
	opacity: 0.55;
}

.woocommerce ul.products li.product .price ins,
.woocommerce div.product p.price ins {
	text-decoration: none;
}

.woocommerce span.onsale {
	min-height: 0;
	min-width: 0;
	padding: 4px 10px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--apsha-white);
	background-color: var(--apsha-primary);
	border-radius: 6px;
}

.woocommerce div.product .stock,
.woocommerce .stock.in-stock {
	color: var(--apsha-primary);
}

.woocommerce .stock.out-of-stock {
	color: var(--apsha-navy);
}

.woocommerce .star-rating span::before,
.woocommerce p.stars a {
	color: var(--apsha-navy);
}

/* --------------------------------------------------------------------------
   5. Notices (no extra status colors; navy/blue only — owner approval needed
      before adding any other status color)
   -------------------------------------------------------------------------- */
.woocommerce-message,
.woocommerce-info {
	border-top-color: var(--apsha-primary);
	background-color: var(--apsha-bg);
	color: var(--apsha-text);
}

.woocommerce-message::before,
.woocommerce-info::before {
	color: var(--apsha-primary);
}

.woocommerce-error {
	border-top-color: var(--apsha-navy);
	background-color: var(--apsha-bg);
	color: var(--apsha-text);
}

.woocommerce-error::before {
	color: var(--apsha-navy);
}

/* --------------------------------------------------------------------------
   6. Layout helper for non-Elementor WooCommerce pages
   -------------------------------------------------------------------------- */
.apsha-container {
	width: 100%;
	max-width: var(--apsha-container);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--apsha-gutter);
	padding-right: var(--apsha-gutter);
}