/*
Theme Name:   Excelimpex
 Theme URI:    http://excelimpex.local/
 Description:  Excelimpex storefront theme
 Author:       KlbTheme
 Author URI:   http://themeforest.net/user/KlbTheme
 Template:     machic
 Version:      1.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  machic-child
*/
/* ------------------------------------------------------------------
   Excelimpex customisations
   ------------------------------------------------------------------ */

/* The theme ships the top bar with a `border-disable` class. Put the
   separator line back, the way the reference storefront has it. */
.site-header .header-top,
.site-header .header-top.border-disable {
	border-bottom: 1px solid #e5e7eb;
}

/* Promo banners now sit under the product grid, so give them air
   above the footer newsletter. */
.shop-content .shop-banner-top {
	margin-top: 40px;
}
.shop-content .shop-banner-bottom {
	margin-bottom: 10px;
}

/* ---- responsive hardening -------------------------------------------
   The theme's own grid is responsive; these rules only stop imported
   content (policy pages, pasted HTML) from forcing a horizontal scroll. */

/* never let media overflow its column */
img, video, iframe, embed, object {
	max-width: 100%;
	height: auto;
}

/* long URLs / unbroken strings in imported policy copy */
.entry-content,
.elementor-widget-text-editor,
.wp-block-table td,
.wp-block-table th {
	overflow-wrap: break-word;
	word-wrap: break-word;
}

/* tables from the imported policy pages scroll instead of breaking layout */
.wp-block-table,
.entry-content table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.wp-block-table table,
.entry-content table {
	min-width: 100%;
}
@media (max-width: 767px) {
	.wp-block-table table.has-fixed-layout {
		table-layout: auto;
	}
	/* stack the three product columns on About Us */
	.shop-content .shop-banner-bottom .col {
		margin-bottom: 16px;
	}
}

/* keep the page from ever scrolling sideways */
html, body {
	max-width: 100%;
	overflow-x: hidden;
}

/* ---- page content alignment -----------------------------------------
   page.php wraps default-template pages in `.col-lg-10.offset-lg-1`,
   a 10/12 reading column. The header, and every Elementor page, use the
   full 12 columns — so those pages looked indented against the rest of
   the site. Line the content up with the site container. */
@media (min-width: 992px) {
	.klb-page .row > .col-lg-10.offset-lg-1 {
		flex: 0 0 100%;
		max-width: 100%;
		margin-left: 0;
	}
}

/* ---- button system --------------------------------------------------
   The theme shipped three different button colours (navy #041E42,
   blue #0070DC and green add-to-cart icons). Unify them:

     rest   → navy  #021523  with white text
     hover  → brand yellow #ffbd27 with navy text

   Yellow is kept for the hover/active state rather than the resting
   state on purpose: white-on-yellow fails contrast (~1.9:1) whereas
   navy-on-yellow is ~11:1, and a single accent colour on *every*
   button would flatten the visual hierarchy. */

:root {
	--ex-navy:        #021523;
	--ex-navy-soft:   #0b2740;
	--ex-yellow:      #ffbd27;
	--ex-yellow-deep: #f0ac10;

	/* The theme drives its buttons from its own design tokens, so retheme
	   those rather than fighting selector specificity. The shop button was
	   green (#00a046) — off-brand against the navy/yellow palette. */
	--color-shop-button:        #021523;
	--color-shop-button-active: #ffbd27;
}

/* solid buttons */
.btn,
.btn-primary,
.btn.small.rounded,
button.btn,
input[type="submit"],
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce .single_add_to_cart_button,
.woocommerce #respond input#submit {
	background-color: var(--ex-navy);
	border-color: var(--ex-navy);
	color: #fff;
	transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.btn:hover, .btn:focus-visible,
.btn-primary:hover, .btn-primary:focus-visible,
.btn.small.rounded:hover,
button.btn:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce .single_add_to_cart_button:hover,
.woocommerce #respond input#submit:hover {
	background-color: var(--ex-yellow);
	border-color: var(--ex-yellow);
	color: var(--ex-navy);
}

/* product-card icon buttons (add to cart / wishlist / compare / quick view) */
.product-button .button,
.woocommerce ul.products li.product .add_to_cart_button,
.woocommerce ul.products li.product .button,
.klb-wishlist-button, .klb-compare-button, .klb-quickview-button {
	color: var(--ex-navy);
	border-color: #e0e5ea;
	background-color: #fff;
	transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.product-button .button:hover,
.woocommerce ul.products li.product .add_to_cart_button:hover,
.woocommerce ul.products li.product .button:hover,
.klb-wishlist-button:hover, .klb-compare-button:hover, .klb-quickview-button:hover {
	background-color: var(--ex-yellow);
	border-color: var(--ex-yellow);
	color: var(--ex-navy);
}

/* the yellow newsletter button was already on-brand — deepen it on hover
   so it still gives feedback */
.mc4wp-form input[type="submit"],
.footer-subscribe input[type="submit"] {
	background-color: var(--ex-yellow);
	border-color: var(--ex-yellow);
	color: var(--ex-navy);
}
.mc4wp-form input[type="submit"]:hover,
.footer-subscribe input[type="submit"]:hover {
	background-color: var(--ex-yellow-deep);
	border-color: var(--ex-yellow-deep);
	color: var(--ex-navy);
}

/* Logo sizing. The mark now carries cart detail, so it needs a little more
   height than a plain wordmark to stay legible. Four instances exist:
   desktop header, footer, mobile header and the off-canvas panel. */
.site-header .site-brand img,
.site-header .site-brand a > img {
	height: 58px;
	max-height: 58px;
	width: auto;
	max-width: none;
}
.site-footer .site-brand img,
footer .site-brand img {
	height: 48px;
	max-height: 48px;
	width: auto;
	max-width: none;
}
.header-mobile .site-brand img {
	height: 40px;
	max-height: 40px;
	width: auto;
	max-width: none;
}
/* any remaining instance (off-canvas / sticky) gets a sensible floor */
.site-brand img {
	min-height: 38px;
	width: auto;
}

/* product-card add-to-cart: the theme ships it green, which is off-brand */
.product-price-cart .add_to_cart_button,
.product-price-cart .button,
.product-content .add_to_cart_button {
	color: var(--ex-navy);
	border-color: #e0e5ea;
	background-color: #fff;
	transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.product-price-cart .add_to_cart_button i,
.product-price-cart .button i,
.product-content .add_to_cart_button i {
	color: inherit;
}
.product-price-cart .add_to_cart_button:hover,
.product-price-cart .button:hover,
.product-content .add_to_cart_button:hover {
	background-color: var(--ex-yellow);
	border-color: var(--ex-yellow);
	color: var(--ex-navy);
}

/* The theme hard-codes a pale grey-green add-to-cart hover at
   `.products .product-price-cart .add_to_cart_button:hover` (specificity
   0,3,0), which outranked the rule above. Match that specificity so the
   hover lands on brand yellow. */
.products .product-price-cart .add_to_cart_button:hover,
.products .product-price-cart .add_to_cart_button:focus-visible,
.products .product-price-cart .button:hover {
	background-color: var(--ex-yellow);
	border-color: var(--ex-yellow);
	color: var(--ex-navy);
}
.products .product-price-cart .add_to_cart_button:hover i,
.products .product-price-cart .button:hover i {
	color: var(--ex-navy);
}

/* `.btn.link` is a tertiary text link ("View All →"), not a solid button —
   keep it unfilled, but bring it onto the palette (it was #0070dc blue,
   the last colour outside the navy/yellow system). */
.btn.link,
a.btn.link,
.site-module .module-header .btn.link {
	background-color: transparent;
	border-color: transparent;
	color: var(--ex-navy);
}
.btn.link:hover,
a.btn.link:hover,
.btn.link:focus-visible,
.site-module .module-header .btn.link:hover,
.site-module .module-header .btn.link:focus-visible {
	background-color: transparent;
	border-color: transparent;
	color: var(--ex-yellow-deep);
}

/* the category-tiles module scopes its own link colour too */
.module-category-list .category-detail > .btn.link {
	color: var(--ex-navy);
}
.module-category-list .category-detail > .btn.link:hover,
.module-category-list .category-detail > .btn.link:focus-visible {
	color: var(--ex-yellow-deep);
}

/* ---- product card hover -------------------------------------------
   On hover the card expands to show the product's short description.
   For the imported catalogue that field holds a raw scraped spec dump
   ("Brand … Model Name … Form Factor …"), which reads as broken text.
   The panel contains nothing else, so hide it on the cards. The short
   description still shows on the single product page, where it belongs. */
.product-wrapper .product-footer,
.product-wrapper .product-footer-details {
	display: none !important;
}