/*
 * Iconis custom.css
 * ------------------
 * CSS variables mirroring the Global Colors set up in Elementor (Site
 * Settings > Global Colors — see Phase 1 of iconis-elementor-build-guide.md
 * / iconis-global-kit.zip). Elementor's own Global Colors aren't exposed as
 * CSS variables automatically, so this gives you the same palette to
 * reference from any plain CSS you write here or in a future custom plugin,
 * without re-typing hex values.
 *
 * Add page/component-specific overrides below the variables block. Keep this
 * file for real CSS rules only -- anything that's actually PHP logic
 * belongs in functions.php or one of the companion plugins instead.
 */

:root {
	--iconis-brand-blue: #0EA5E9;
	--iconis-brand-teal: #14C79E;
	--iconis-brand-green: #22C55E;
	--iconis-brand-gradient: linear-gradient(90deg, var(--iconis-brand-blue), var(--iconis-brand-teal), var(--iconis-brand-green));

	--iconis-text-dark: #1F2937;
	--iconis-text-gray: #6B7280;
	--iconis-text-light-gray: #9CA3AF;

	--iconis-border: #E5E7EB;
	--iconis-border-light: #EEF0F3;

	--iconis-surface: #FFFFFF;
	--iconis-section-bg: #F7F8FA;

	--iconis-success-green: #16A34A;
	--iconis-success-bg: #DCFCE7;

	--iconis-info-blue-bg: #E0F2FE;
	--iconis-info-blue-text: #0369A1;

	--iconis-sale-amber: #F59E0B;
	--iconis-sale-amber-bg: #FEF3C7;
	--iconis-sale-amber-text: #B45309;

	--iconis-alert-red: #EF4444;

	--iconis-font-heading: "Poppins", sans-serif;
	--iconis-font-body: "Inter", sans-serif;
}

/* Example use — the gradient text effect used on the "inconic" logo and
   headline accents throughout the design. Apply the .iconis-gradient-text
   class from Elementor's "CSS Classes" advanced control on any Heading/Text
   widget to reuse it without retyping the gradient stops each time. */
.iconis-gradient-text {
	background: var(--iconis-brand-gradient);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

/* -----------------------------------------------------------------------
 * Product Card component (Phase 2.5 of the build guide) -- restyles
 * WooCommerce's OWN loop markup (ul.products > li.product), the same
 * markup Elementor Pro's "Products" widget, "Archive Products" widget,
 * "Related Products" widget, and cart cross-sells all render through. One
 * ruleset here styles the card everywhere it appears on the site -- shop
 * archive, homepage Deals/Featured grids, related products, cross-sells --
 * with zero per-widget styling needed.
 *
 * Only targets elements WooCommerce actually outputs by default: badge,
 * image, title, star rating, price, add-to-cart button. It does NOT add a
 * brand-label line or a stock-status pill (the design spec shows both) --
 * neither exists in WooCommerce's default loop markup, so adding them
 * would need a small extra PHP snippet hooked onto
 * woocommerce_before_shop_loop_item_title / a stock-status hook. Say the
 * word if you want that added; skipped here rather than guessing markup
 * that isn't actually there yet. The wishlist heart (top-right, 32px
 * circle) already comes from the Iconis Wishlist plugin -- this block
 * only adds the sale badge, top-left, so the two don't collide.
 * -------------------------------------------------------------------- */

ul.products li.product {
	position: relative;
	background: var(--iconis-surface);
	border: 1px solid var(--iconis-border);
	border-radius: 12px;
	padding: 16px;
	transition: box-shadow .18s ease, transform .18s ease;
}
ul.products li.product:hover {
	box-shadow: 0 14px 28px rgba(31, 41, 55, .10);
	transform: translateY(-3px);
}

/* Sale badge -- WooCommerce outputs <span class="onsale">-13%</span>
   automatically on any product with an active sale price. */
ul.products li.product span.onsale {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 2;
	margin: 0;
	min-height: 0;
	min-width: 0;
	line-height: 1;
	background: var(--iconis-sale-amber);
	color: #FFFFFF;
	font-family: var(--iconis-font-body);
	font-weight: 700;
	font-size: 11.5px;
	padding: 5px 8px;
	border-radius: 6px;
}

ul.products li.product a.woocommerce-loop-product__link {
	display: block;
}
/* !important on height/object-fit and the clamp block below: Elementor
   Pro's Products widget writes its own per-widget CSS for image size and
   title styling, which otherwise wins the cascade over this theme
   stylesheet regardless of load order. Forcing these specific properties
   is what makes the card look the same everywhere without having to
   separately configure the Style tab on every Products/Archive widget
   instance on the site. */
ul.products li.product img {
	height: 150px !important;
	width: 100% !important;
	object-fit: cover !important;
	border-radius: 8px;
	margin-bottom: 10px;
}

ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--iconis-font-body);
	font-size: 13px;
	font-weight: 500;
	color: var(--iconis-text-dark);
	line-height: 1.4;
	margin: 0 0 4px;
	display: -webkit-box !important;
	-webkit-line-clamp: 2 !important;
	-webkit-box-orient: vertical !important;
	overflow: hidden !important;
	/* Fallback in case a future Elementor update forces -webkit-line-clamp
	   back to "none": still caps the box at ~2 lines instead of overflowing
	   into the price row underneath. */
	max-height: 2.8em;
}

ul.products li.product .star-rating {
	font-size: 11.5px;
	color: var(--iconis-sale-amber);
	margin: 0 0 6px;
}
ul.products li.product .star-rating::before {
	color: var(--iconis-border);
}
ul.products li.product .star-rating span::before {
	color: var(--iconis-sale-amber);
}

ul.products li.product .price {
	display: block;
	font-family: var(--iconis-font-heading);
	margin: 0 0 10px;
}
ul.products li.product .price ins {
	text-decoration: none;
	font-weight: 600;
	font-size: 15.5px;
	color: var(--iconis-success-green);
	margin-right: 6px;
}
ul.products li.product .price del {
	font-weight: 400;
	font-size: 12px;
	color: var(--iconis-text-light-gray);
}
/* Products with no sale price render just one plain number, no <ins>/<del>. */
ul.products li.product .price:not(:has(ins)) {
	font-weight: 600;
	font-size: 15.5px;
	color: var(--iconis-text-dark);
}

ul.products li.product a.button,
ul.products li.product a.add_to_cart_button,
ul.products li.product a.ajax_add_to_cart {
	display: block;
	width: 100%;
	text-align: center;
	background: var(--iconis-brand-gradient);
	color: #FFFFFF !important;
	font-family: var(--iconis-font-body);
	font-weight: 600;
	font-size: 13px;
	border-radius: 8px;
	padding: 12px 0;
	margin: 0;
	box-shadow: none;
	text-decoration: none;
	transition: opacity .15s ease;
}
ul.products li.product a.button:hover,
ul.products li.product a.add_to_cart_button:hover,
ul.products li.product a.ajax_add_to_cart:hover {
	opacity: .9;
	background: var(--iconis-brand-gradient);
	color: #FFFFFF !important;
}

/* "Deals of the Day" variant -- Phase 5.3 of the build guide calls for an
   outline button that fills solid on hover in this one row specifically.
   Add the CSS class "iconis-deals-products" to that Products widget's
   Advanced > CSS Classes field to opt this grid into the variant; every
   other grid on the site keeps the solid gradient button above. */
ul.products.iconis-deals-products li.product a.button,
ul.products.iconis-deals-products li.product a.add_to_cart_button,
ul.products.iconis-deals-products li.product a.ajax_add_to_cart {
	background: transparent;
	border: 1.5px solid var(--iconis-brand-teal);
	color: var(--iconis-brand-teal) !important;
	padding: 10.5px 0;
}
ul.products.iconis-deals-products li.product a.button:hover,
ul.products.iconis-deals-products li.product a.add_to_cart_button:hover,
ul.products.iconis-deals-products li.product a.ajax_add_to_cart:hover {
	background: var(--iconis-brand-gradient);
	border-color: transparent;
	color: #FFFFFF !important;
	opacity: 1;
}