/**
Theme Name: teescode
Author: Umar Sindhu
Author URI: https://sindhusolutions.com
Description: Umar Sindhu—a passionate Full-Stack Developer with over a decade of experience crafting seamless and user-centric web solutions. From developing custom WordPress themes and plugins to optimizing websites for lightning-fast performance, I thrive on turning ideas into impactful digital experiences.
My expertise spans across modern tools and technologies like React, Next.js, TypeScript, Bootstrap, Nest.js, MySQL and more. I specialize in creating bespoke solutions, including advanced custom fields, REST API integrations, and payment gateways like Stripe, PayPal, and Square. Recently, I’ve been diving into Shopify development and exploring WebSockets for real-time applications.
I’m also a creative thinker who loves designing for diverse niches—whether it’s a corporate site, an eCommerce platform, or a dynamic portfolio. Currently, I’m on a mission to expand my horizons as a cloud engineer, combining my development skills with the power of cloud and DevOps tools.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: teescode
Template: astra
*/

.ast-theme-transparent-header .ast-above-header, .ast-theme-transparent-header .ast-above-header.ast-above-header-bar {
    background-color: #393C40 !important;
}
.ast-theme-transparent-header .ast-above-header, .ast-theme-transparent-header .ast-above-header.ast-above-header-bar .uagb-icon-list__label {
	color: #fff !important;
}
.ast-search-icon {
	pointer-events:none;
	position: absolute;
    right: 0;
}
.ast-search-icon .ast-icon.icon-search svg {
    height: 1em;
    width: .9em;
    margin-top: 3px;
    margin-right: 11px;
	fill: #aeaeae;
}
.custom-search {
	display: flex;
	align-items: center;
}
.custom-search .search-form {
    position: relative;
    left: 0;
    width: 330px;
	border-radius: 10px;
}
.custom-search .search-form input {
	border-radius: 10px;
}
.custom-search .search-form input:focus {
	border:0 !important;
}
.ast-header-break-point .main-header-bar-navigation, .ast-header-break-point .ast-nav-menu .sub-menu {
    line-height: 4;
}
.hero-img img {
	object-position: bottom;
}
.home .hero-slider .swiper-button-prev, .home .hero-slider .swiper-button-next  {
    display: none;
}
.empty-category-notice {
    text-align: center;
    padding: 60px 20px;
    margin: 40px 0;
    background-color: #f8f8f8;
    border-radius: 4px;
}

.empty-category-message {
    font-size: 1.4em;
    color: #555;
}

.empty-category-message strong {
    color: #000;
    font-weight: 700;
}
.woocommerce-js .variations select, .woocommerce-js .woocommerce-ordering select {
    padding: .5em;
    border: 1px solid #bebebe;
    border-radius: 6px;
}
.woocommerce-js ul.products li.product, .woocommerce-page ul.products li.product {
    border: 1px solid #e9e9e98f;
    box-shadow: 0px 0px 9px 0px #e9e9e961;
    border-radius: 8px;
    overflow: hidden;
}
.onsale-card {
	cursor: default;
	background-color: #000000;
	color: #fff;
	position: absolute;
    top: 1.5em;
    left: 1.5em;
    width: fit-content;
    border-radius: 20px;
    padding: 0.4em 0.8em;
    font-size: .87em;
    font-weight: 500;
    line-height: normal;
    letter-spacing: normal;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.15);
	transform: rotate(-20deg);
	z-index: 5;
}
.ast-onsale-card {
	display:none;
}
.woocommerce-js ul.products li.product a img, .woocommerce-page ul.products li.product a img {
    padding: 15px 0 0 0;
}
.woocommerce-js ul.products li.product .button, .woocommerce-page ul.products li.product .button { width: 95%; }

/*
 * CSS for WooCommerce Product Image Hover Effect
 *
 * This styling creates a smooth transition when hovering over product
 * images in the shop grid. The main image fades out, and the first
 * gallery image (set as a background via JavaScript) fades in.
 */

/* Main wrapper for the product image, added by PHP */
.woocommerce-main-image-wrapper {
    position: relative; /* Essential for positioning the pseudo-element correctly */
    overflow: hidden; /* Hides any content that overflows during transitions */
    display: block; /* Ensures the wrapper takes up the necessary space */
    /* Define the CSS variable for the background image.
     * It's initially 'none' and set dynamically by JavaScript. */
    --hover-bg-image: none;
}

/* Styles for the primary product image */
.woocommerce-main-image-wrapper img.wp-post-image {
    transition: opacity 0.7s ease-in-out; /* Smooth fade for the main image */
    backface-visibility: hidden; /* Helps prevent flickering in some browsers during transition */
    display: block; /* Ensure image takes up full space */
    width: 100%; /* Ensure image fills its container */
    height: auto; /* Maintain aspect ratio */
}

/* When the wrapper has the 'hovered' class (added by JS), hide the main image */
.woocommerce-main-image-wrapper.hovered img.wp-post-image {
    opacity: 0; /* Fades out the main image */
}

/* Pseudo-element to display the hover image */
.woocommerce-main-image-wrapper::before {
    content: ''; /* Required for pseudo-elements */
    position: absolute; /* Position it directly over the main image */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* Use the CSS variable to set the background image */
    background-image: var(--hover-bg-image);
    background-size: cover; /* Adjust as needed: 'cover', 'contain', '100% 100%' */
    background-position: center center; /* Center the background image */
    background-repeat: no-repeat; /* Prevent repeating the image */
    
    opacity: 0; /* Initially hidden */
    transition: opacity 0.3s ease-in-out; /* Smooth fade for the hover image */
    z-index: 1; /* Ensure it appears above the main image */
}

/* When the wrapper has the 'hovered' class, show the pseudo-element */
.woocommerce-main-image-wrapper.hovered::before {
    opacity: 1; /* Fades in the hover image */
}

.woocommerce-terms-and-conditions-link {
    text-decoration: underline;
    text-transform: capitalize;
}

@media only screen and (max-width: 767px) {
    .top-header-text {
     display: flex;
     align-items: center;
     justify-content: center;
     flex-direction: column;
    }
    .top-header-text .top-header-separator {
        display: none;
    }
    .top-header-text a {
        text-decoration: underline;
        font-weight: bold;
    }
	.ast-mobile-header-content {
		position: absolute;
		width: 100%;
		top: 67px;
		z-index: 5;
	}
	.custom-search {
	    position: absolute;
	    right: 25px;
	}
	.main-header-menu {
		background-color: #f5f5f5 !important;
		box-shadow: 0px 15px 16px 1px #00000030;
	}
	.hero-img {
		position: absolute !important;
		top: 46px;
		right: -111px;
	}
	.hero-img img {
		mask-size: contain !important;
		-webkit-mask-size: contain !important;
	}
}