/*
Theme Name: Manmoda Child
Theme URI: https://www.manmoda.lt/
Author: Manmoda
Author URI: https://www.manmoda.lt/
Description: Child theme for GeneratePress. Holds Manmoda site-specific customisations (single-product breadcrumb spacing, header dropdown gap, hero width cap, out-of-stock variation button text, HEIC/HEIF upload handling) so parent-theme updates do not overwrite them.
Version: 1.6.1
Requires at least: 5.2
Tested up to: 6.3
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Template: generatepress
Text Domain: manmoda-child
*/

/**
 * 1. Single-product breadcrumb spacing (Elementor single-product template 477946011).
 *
 * Deliberately minimal and scoped to the breadcrumb widget container only,
 * so the product title column and gallery keep their exact positions.
 * Compared to the Elementor defaults (post-477946011.css) only two values
 * change: the top pull is deepened from -50px to -70px, halving the gap
 * above the trail (~40px -> ~20px), and the bottom margin is raised from
 * 25px to 35px for a little more breathing room above the gallery.
 *
 * Note: the parent theme already enqueues this stylesheet after its own
 * (see generate_scripts() in generatepress/inc/general.php), and the `body`
 * prefix keeps these rules ahead of Elementor's generated post CSS on
 * specificity, so load order does not matter.
 */
body .elementor-477946011 .elementor-element.elementor-element-9229d43 > .elementor-widget-container {
	margin: -70px 0 35px 50px;
}

/* --- Tablet (matches Elementor breakpoint max-width: 1024px) --- */
@media (max-width: 1024px) {
	body .elementor-477946011 .elementor-element.elementor-element-9229d43 > .elementor-widget-container {
		margin: -70px 0 10px 20px;
	}
}

/* --- Mobile (matches Elementor breakpoint max-width: 767px) --- */
@media (max-width: 767px) {
	body .elementor-477946011 .elementor-element.elementor-element-9229d43 > .elementor-widget-container {
		margin: -33px 0 0 0;
	}
}

/**
 * 2. Header dropdown gap (Jeg Kit nav menus in the Elementor header).
 *
 * The black-bar tabs (Moteriški, Vyriški, Aksesuarai, ...) each swap in
 * their own submenu row, and every row is a separate Jeg Kit nav widget
 * with its own Elementor post/element ID — scoping this to one widget ID
 * only fixed a single tab. This rule therefore targets every header nav
 * menu via `.elementor-location-header`, so current and future tabs are
 * all covered.
 *
 * The single-product template pulls its content up under the transparent
 * header (margin-top: -374px), so its top border lands ~14px above the menu
 * items' bottom edge. The dropdowns' `top: 100%` therefore left them
 * floating 14px below the header line with page content peeking through.
 * Pulling the first-level dropdown up 13px docks it flush under the line.
 * Overlap (not a gap) keeps the hover bridge intact, so the menu cannot
 * flicker when moving the mouse down into it.
 * Scoped to `> li > .sub-menu` so nested flyouts keep their `top: 100%`,
 * and to desktop (min-width: 1025px) where tablet/mobile switch to the
 * off-canvas menu with in-flow submenus (`position: inherit`, no `top`).
 * `!important` is required: each Elementor post stylesheet sets `top`
 * with a 9-class selector, which a widget-agnostic selector cannot
 * otherwise outrank.
 */
@media (min-width: 1025px) {
	body .elementor-location-header .elementor-element .jeg-elementor-kit.jkit-nav-menu .jkit-menu-wrapper .jkit-menu > li.menu-item-has-children > .sub-menu {
		top: calc(100% - 13px) !important;
	}
}

/**
 * 3. Homepage hero content width cap (Elementor home template 477945053,
 * element 02a22d4).
 *
 * The hero section is full-width with a full-bleed background image, and
 * its inner container had no max-width, so on ultra-wide screens the
 * headline sat ~10px from the viewport edge. Capping the inner container
 * at 1350px — the same width as the other homepage content sections —
 * and centering it keeps the text in line with the rest of the page.
 * Background stays full-bleed; below 1350px viewports this is a no-op,
 * and tablet/mobile column stacking is unaffected.
 *
 * The 100px "MANMODA" headline measures ~602px of ink but each 50% column
 * here is only half the cap, so a too-tight cap (1200px -> 600px columns)
 * let `overflow-wrap: break-word` shatter the word mid-line. 1350px gives
 * 675px columns and fits, and the desktop-only `nowrap` below guarantees
 * the word can never shatter (e.g. on ~1100px windows, where the column
 * would otherwise be narrower than the ink). The right-hand column is
 * empty, so the rare overflow paints harmlessly over background.
 */
body .elementor-477945053 .elementor-element.elementor-element-02a22d4 > .elementor-container {
	max-width: 1350px;
	margin-left: auto;
	margin-right: auto;
}

@media (min-width: 1025px) {
	body .elementor-477945053 .elementor-element.elementor-element-02a22d4 h1 {
		white-space: nowrap;
	}
}

/**
 * 4. Product images: uniform boxes, contain, white background (global).
 *
 * JetWoo product images rendered at their natural aspect ratio
 * (`object-fit: fill`, height auto), so portrait shots made tall boxes and
 * landscape shots short ones — titles, prices and buttons started at
 * different heights in every row ("Populiariausios prekės", category
 * grids, related products, ...). Every grid gets identical 3:4 boxes
 * (the ratio of the site's own 600x800 product photography) with the full
 * image fitted inside (`contain`, never cropped) on white.
 * `aspect-ratio` (not a fixed px height) keeps boxes proportional to each
 * grid's column width, so the 440px category images render pixel-identical
 * to before while the small homepage thumbs align. `display: block`
 * removes the inline-image baseline strut under each picture.
 * The second rule switches standard Woo loops off the Customizer's
 * `cover` treatment to the same `contain` + white language (their 350px
 * height is kept); the `body` prefix outranks that rule (0,3,5 vs 0,3,4).
 */
body .jet-woo-products .jet-woo-product-thumbnail img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: contain;
	background-color: #fff;
	display: block;
}

body .woocommerce ul.products li.product a img {
	object-fit: contain;
	background-color: #fff;
}

/**
 * 5. Product card hover: image zoom + title underline (global).
 *
 * Hovering a card scales its image to 1.06 with a short transition and
 * underlines the title. `overflow: hidden` on the thumbnail wrapper keeps
 * the zoomed image clipped to the white box from section 4. The same
 * treatment is mirrored onto standard Woo loops (their sizes come from
 * section 4 / the Customizer). `prefers-reduced-motion` disables the zoom.
 */
body .jet-woo-products .jet-woo-product-thumbnail {
	overflow: hidden;
}

body .jet-woo-products .jet-woo-product-thumbnail img {
	transition: transform .35s ease;
}

body .jet-woo-products__item:hover .jet-woo-product-thumbnail img {
	transform: scale(1.06);
}

body .jet-woo-products__item:hover .jet-woo-product-title {
	text-decoration: underline;
	text-underline-offset: 3px;
}

body .woocommerce ul.products li.product a.woocommerce-loop-product__link {
	overflow: hidden;
	display: block;
}

body .woocommerce ul.products li.product a img {
	transition: transform .35s ease;
}

body .woocommerce ul.products li.product:hover a img {
	transform: scale(1.06);
}

body .woocommerce ul.products li.product:hover .woocommerce-loop-product__title {
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	body .jet-woo-products .jet-woo-product-thumbnail img,
	body .woocommerce ul.products li.product a img {
		transition: none;
	}

	body .jet-woo-products__item:hover .jet-woo-product-thumbnail img,
	body .woocommerce ul.products li.product:hover a img {
		transform: none;
	}
}

/**
 * 6. "Recommends" badge on product cards (see functions.php).
 *
 * Dusty-mauve pill like the reference, top-left over the image, below the
 * sale badge when one is present (the visible sale badge is 114x44px, so
 * 54px clears it with an 8px gap). `pointer-events: none` keeps clicks and
 * hover-zoom passing through to the card. `white-space: nowrap` keeps the
 * two-word label on one line.
 */
body .manmoda-badge {
	position: absolute;
	left: 10px;
	top: 10px;
	z-index: 6;
	background-color: #8e7a83;
	color: #fff;
	font-family: "Jost", sans-serif;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .5px;
	line-height: 1.4;
	padding: 6px 12px;
	border-radius: 4px;
	white-space: nowrap;
	pointer-events: none;
}

body .jet-woo-product-thumbnail:has(.jet-woo-product-badge__sale) .manmoda-badge,
body .woocommerce ul.products li.product:has(span.onsale) .manmoda-badge {
	top: 54px;
}