@charset "UTF-8";

/*
	Theme Name: Ustone Child Theme
	Theme URI: https://themeforest.net/user/gloriathemes
	Description: Ustone Child Theme
	Author: Gloria Themes
	Author URI: https://gloriathemes.com/
	Template: ustone
	License: GNU General Public License v2 or later
	License URI: http://www.gnu.org/licenses/gpl-2.0.html
	Text Domain: ustone
	Version: 1.0.0
*/
/* Editorial product grid: let the banner row span the full grid width.
   Without this the row shrink-wraps to the image's intrinsic width and
   leaves the right side of the box empty. */
.product-grid[data-editorial-grid] .grid-row {
	width: 100%;
}

/* The theme only sets this width above 1024px, so on tablet the banner
   shrink-wraps and leaves the right of the box empty. Fill at every width. */
.product-grid[data-editorial-grid] .grid-categories {
	width: 100%;
}

/* Category banners over card artwork: the images are busy and bright, so
   darken them and force white copy. Add a section id here to include it. */
.elementor-element-ebfff94 .banner .banner-media,
.elementor-element-4516af5 .banner .banner-media {
	position: relative;
}

.elementor-element-ebfff94 .banner .banner-media::after,
.elementor-element-4516af5 .banner .banner-media::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	transition: background 0.3s ease;
}

/* Three-up banners: copy sits low, so fade downwards. */
.elementor-element-ebfff94 .banner .banner-media::after {
	background: linear-gradient(rgba(2, 10, 25, 0.30), rgba(2, 10, 25, 0.58));
}

.elementor-element-ebfff94 .banner:hover .banner-media::after {
	background: linear-gradient(rgba(2, 10, 25, 0.42), rgba(2, 10, 25, 0.68));
}

/* Wide banner: copy sits in the left third, so fade left to right and let
   the card artwork stay visible on the right. */
.elementor-element-4516af5 .banner .banner-media::after {
	background: linear-gradient(to right,
		rgba(2, 10, 25, 0.78) 0%,
		rgba(2, 10, 25, 0.66) 25%,
		rgba(2, 10, 25, 0.34) 50%,
		rgba(2, 10, 25, 0.10) 72%,
		rgba(2, 10, 25, 0) 88%);
}

.elementor-element-4516af5 .banner:hover .banner-media::after {
	background: linear-gradient(to right,
		rgba(2, 10, 25, 0.86) 0%,
		rgba(2, 10, 25, 0.74) 25%,
		rgba(2, 10, 25, 0.44) 50%,
		rgba(2, 10, 25, 0.16) 72%,
		rgba(2, 10, 25, 0) 90%);
}

.elementor-element-ebfff94 .banner .entry-subtitle,
.elementor-element-ebfff94 .banner .entry-title,
.elementor-element-ebfff94 .banner p,
.elementor-element-ebfff94 .banner .banner-action a,
.elementor-element-4516af5 .banner .entry-subtitle,
.elementor-element-4516af5 .banner .entry-title,
.elementor-element-4516af5 .banner p,
.elementor-element-4516af5 .banner .banner-action a,
.elementor-element-7679019 .banner .entry-subtitle,
.elementor-element-7679019 .banner .entry-title,
.elementor-element-7679019 .banner p,
.elementor-element-7679019 .banner .banner-action a {
	color: #FFFFFF !important;
}

/* The theme's .opacity-50 utility is !important, so match it to stop the
   eyebrow label rendering as grey instead of white. */
.elementor-element-ebfff94 .banner .entry-subtitle,
.elementor-element-4516af5 .banner .entry-subtitle,
.elementor-element-7679019 .banner .entry-subtitle {
	opacity: 0.9 !important;
}

/* =========================================================
   Feature section (a4a466a)
   Image left, copy right. No panel, no boxes, white
   background, Pokemon palette, compact height.
   ========================================================= */
/* Vertical padding only. Setting the shorthand here wipes out the
   container's side gutter and the copy runs to the screen edge. */
.elementor-element-a4a466a {
	background: transparent !important;
	padding-block: 44px !important;
}

.elementor-element-a4a466a > .e-con-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(20px, 3vw, 44px);
	padding: 0 !important;
	background: none !important;
	box-shadow: none;
	border-radius: 0;
}

.elementor-element-a4a466a .elementor-element-2206f2e {
	flex: 1 1 460px;
	min-width: 0;
}

.elementor-element-a4a466a .elementor-element-e0c4e1f {
	flex: 1 1 380px;
	min-width: 0;
	/* Elementor puts a 56px gap between the header and the feature list,
	   which reads as dead space. Spacing is set on the list instead. */
	gap: 0 !important;
}

/* The PNG is already transparent. No shadow or filter here, or it
   renders as a grey slab behind the cards on the white page. */
.elementor-element-a4a466a .elementor-element-b17a746 img {
	width: 100%;
	height: auto;
	display: block;
}

/* Heading in Pokemon blue with a short yellow rule beneath. */
.elementor-element-a4a466a .module-header .entry-title {
	color: #0C55A5 !important;
	font-size: clamp(24px, 2.5vw, 34px) !important;
	line-height: 1.16 !important;
	letter-spacing: -0.015em;
	margin-bottom: 12px !important;
}

.elementor-element-a4a466a .module-header .entry-title::after {
	content: "";
	display: block;
	width: 54px;
	height: 4px;
	margin-top: 12px;
	border-radius: 2px;
	background: #FFCB05;
}

.elementor-element-a4a466a .entry-description,
.elementor-element-a4a466a .entry-description p {
	color: #4B5563 !important;
	font-size: 15px;
	line-height: 1.62;
	margin: 0;
}

/* Features as a single compact list beside the artwork. */
.elementor-element-a4a466a .elementor-element-59c630c {
	display: flex !important;
	flex-direction: column;
	gap: 9px;
	margin-top: 26px;
}

.elementor-element-a4a466a .elementor-element-59c630c > .elementor-widget {
	margin: 0 !important;
	width: auto !important;
	padding: 0;
}

.elementor-element-a4a466a .iconbox {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

/* Bare check marks in Pokemon red, no tinted chip behind them. */
.elementor-element-a4a466a .iconbox-icon svg rect {
	fill: transparent !important;
}

.elementor-element-a4a466a .iconbox-icon svg path {
	stroke: #EE1515 !important;
	stroke-width: 2.6 !important;
}

.elementor-element-a4a466a .iconbox-detail .entry-title {
	color: #1F2937 !important;
	font-size: 14px !important;
	line-height: 1.5 !important;
	font-weight: 500 !important;
	margin: 0 !important;
}

@media (max-width: 767px) {
	.elementor-element-a4a466a {
		padding-block: 28px !important;
	}

	.elementor-element-a4a466a .elementor-element-2206f2e {
		flex-basis: 100%;
	}
}

/* =========================================================
   Mobile: two products per row instead of one, on every
   product grid (shop, category archives, widgets).
   The theme's .grid-cols-1 utility has no !important, so a
   body-scoped selector is enough to win.
   ========================================================= */
@media (max-width: 767px) {
	body .products.grid.grid-cols-1,
	body .products-elementor .products.grid-cols-1,
	body div.products.grid-cols-1 {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	/* Cards are half as wide now, so stop the text overflowing. */
	.product .product-title,
	.product .product-title a {
		font-size: 12px !important;
		line-height: 1.3 !important;
		word-break: break-word !important;
		overflow-wrap: break-word !important;
	}

	.product .price,
	.product .woocommerce-Price-amount {
		font-size: 11px !important;
		white-space: normal !important;
		word-break: break-word !important;
	}

	.product .product-category {
		font-size: 10px !important;
	}
}

/* =========================================================
   Footer: the theme ships ~440px of row padding, which left
   it very tall for the amount of content. Trim it and close
   the empty fifth widget column.
   ========================================================= */
.footer .footer-row.footer-contact {
	padding-block: 28px !important;
}

.footer .footer-row.footer-newsletter {
	padding-block: 32px !important;
}

.footer .footer-row.footer-widgets {
	padding-block: 36px !important;
}

.footer .footer-row.footer-socials {
	padding-block: 22px !important;
}

.footer .footer-row.footer-copyright {
	padding-top: 18px !important;
	padding-bottom: 26px !important;
}

/* Only four widget columns are populated; the grid reserves five. */
.footer .footer-widgets .footer-inner {
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

@media (max-width: 767px) {
	.footer .footer-widgets .footer-inner {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

/* Popular Categories: the mobile grid is two up, so a seventh tile
   is left stranded on its own row. Show six on mobile. */
@media (max-width: 767px) {
	.elementor-element-e2217a3 .grid > .category-box:nth-child(n+7) {
		display: none;
	}
}

/* Waving Pikachu mascot, sitting on the copyright bar at the right.
   Root-relative URL so it survives the http/https switch. */
.footer .footer-row.footer-copyright {
	position: relative;
}

.footer .footer-row.footer-copyright::before {
	content: "";
	position: absolute;
	right: 14px;
	bottom: 100%;
	width: 110px;
	height: 163px;
	background: url("/wp-content/uploads/2026/08/pikachu-waving.webp") center bottom / contain no-repeat;
	pointer-events: none;
	z-index: 2;
}

/* Keep the app buttons clear of the mascot. */
.footer .footer-row.footer-socials .footer-inner {
	padding-right: 132px;
}

@media (max-width: 767px) {
	.footer .footer-row.footer-copyright::before {
		width: 74px;
		height: 110px;
		right: 8px;
	}

	.footer .footer-row.footer-socials .footer-inner {
		padding-right: 86px;
	}
}