/*
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;
}
/* ---- product cards: even heights -----------------------------------
   Product titles run anywhere from 2 to 6 lines, so every card was a
   different height and the prices / add-to-cart buttons never lined up
   (measured spread on the shop grid: 138px on mobile). Clamping the
   title to a fixed number of lines and pushing the price row to the
   bottom makes every card the same height. */
.product-wrapper .product-title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
	min-height: calc(3 * 1.4em);
}
.product-wrapper .product-content {
	display: flex;
	flex-direction: column;
	height: 100%;
}
.product-wrapper .content-wrapper {
	display: flex;
	flex-direction: column;
	flex: 1;
}
.product-wrapper .product-meta {
	min-height: 34px;          /* "2-day delivery" / stock line is not on every product */
}
.product-wrapper .product-price-cart {
	margin-top: auto;          /* price + cart always sit on the baseline */
}

/* `.products` is a flex row with `align-items: flex-start`, so cards in the
   same row kept their own height - one with a star rating and a sale price
   stood 49px taller than its neighbour. Stretching the row and letting the
   wrapper fill it makes the price/cart line up.
   Do NOT put `height: 100%` on `.product` itself: a percentage height
   against the auto-height container cancels the stretch and the spread
   comes straight back. */
.products:not(.list-style) {
	align-items: stretch;
}
.products:not(.list-style) > .product > .product-wrapper {
	height: 100%;
}

@media (max-width: 767px) {
	.product-wrapper .product-title {
		-webkit-line-clamp: 2;
		min-height: calc(2 * 1.4em);
	}
	.product-wrapper .product-meta {
		min-height: 0;
	}
}

/* ---- product thumbnails: one fixed box, nothing cut ----------------
   The theme cropped every product photo into a 450x450 square, so tall
   photos lost their top and bottom and photos narrower than 450px kept
   their own width - the grid ended up with images of different widths,
   several visibly chopped. The crop is now off (see functions.php), and
   this gives every thumbnail an identical box with the whole photo
   centred inside it, letterboxed rather than cropped.

   The box is a square (aspect-ratio) rather than a fixed pixel height, so
   it scales with the column and needs no per-breakpoint values. The photo
   fills the box on its longer edge - the catalogue runs from 0.18 to 3.59
   aspect ratio, and an earlier `max-height: 105px` cap inside a 130px box
   left every mobile photo short of the box and sized differently. */
.product-wrapper .thumbnail-wrapper {
	display: block;
	height: auto;
	aspect-ratio: 1 / 1;
	overflow: hidden;
}
/* The theme renders two different card markups: most products are
   `a > img`, but any product with more than one image is wrapped in a
   hover slider - `a > .product-card > img.hover-slider-init` (those are
   the little dots under the photo). `.product-card` is height:auto, so a
   percentage max-height on the image resolved against nothing and those
   photos ran to 337px inside a 130px box while the rest sat at 100px.
   That was the real "choti bari" - the box has to be handed down through
   `.product-card` as well. */
.product-wrapper .thumbnail-wrapper a,
.product-wrapper .thumbnail-wrapper > a > .product-card {
	display: block;
	width: 100%;
	height: 100%;
}
/* Safari < 15 has no aspect-ratio; fall back to the old fixed box there
   so the photo still gets a bounded, uniform container. */
@supports not (aspect-ratio: 1 / 1) {
	.product-wrapper .thumbnail-wrapper { height: 220px; }
	@media (max-width: 991px) { .product-wrapper .thumbnail-wrapper { height: 170px; } }
	@media (max-width: 767px) { .product-wrapper .thumbnail-wrapper { height: 173px; } }
}
/* Only the product photo itself - NOT the little icons the theme puts
   inside this same wrapper (wishlist, compare, quick view and the featured
   star). Those live deeper in .product-buttons, and an unscoped
   `.thumbnail-wrapper img` rule outranked the theme's own 17px sizing and
   blew the star up to its full 50px. */
.product-wrapper .thumbnail-wrapper > a > img,
.product-wrapper .thumbnail-wrapper > img,
.product-wrapper .thumbnail-wrapper > .product-card > img,
.product-wrapper .thumbnail-wrapper > a > .product-card > img {
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	object-fit: contain;
	object-position: center;
	margin: 0;
}

/* ---- keep the grid rules off the horizontal "list" layout ----------
   Modules like "Latest Deals" render with `.products.list-style`, where the
   photo sits beside the text instead of above it. Forcing the column-flex
   and the square box on that layout stretched its thumbnails to 208px
   and 266px instead of leaving them alone. */
.products.list-style .product-wrapper .product-content,
.products.list-style .product-wrapper .content-wrapper {
	display: block;
	height: auto;
}
.products.list-style .product-wrapper .thumbnail-wrapper {
	height: auto;
	aspect-ratio: auto;
	display: block;
}
.products.list-style .product-wrapper .thumbnail-wrapper a,
.products.list-style .product-wrapper .thumbnail-wrapper > a > .product-card {
	height: auto;
}
/* ...but the photo still needs a ceiling, or on a narrow screen the
   list layout stacks and the image grows to 500px+ */
.products.list-style .product-wrapper .thumbnail-wrapper > a > img,
.products.list-style .product-wrapper .thumbnail-wrapper > img,
.products.list-style .product-wrapper .thumbnail-wrapper > a > .product-card > img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 170px;
	object-fit: contain;
}
@media (max-width: 767px) {
	.products.list-style .product-wrapper .thumbnail-wrapper > a > img,
	.products.list-style .product-wrapper .thumbnail-wrapper > img,
	.products.list-style .product-wrapper .thumbnail-wrapper > a > .product-card > img {
		height: auto;
		max-height: 110px;
	}
}
.products.list-style .product-wrapper .product-title {
	-webkit-line-clamp: initial;
	min-height: 0;
	display: block;
}
.products.list-style .product-wrapper .product-meta {
	min-height: 0;
}