/*!
Theme Name: EaseShopToday
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: easeshoptoday
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

EaseShopToday is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
:root {
	--bg: #f5f6f7;
	--card-radius: 18px;
	--shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
	/* BRAND COLORS (from your logo) */
	--brand-primary: #0A4A78;
	--brand-secondary: #3EC6C4;
	--brand-accent: #F6A623;
}

body {
	background: var(--bg);
	font-family: "Poppins", sans-serif;
	color: #222;
}

a {
	text-decoration: none;
}

/* Header */
/* --- Modern Clean Header --- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 1000;
	background: rgba(255, 255, 255, 0.85);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
	transition: box-shadow .2s ease;
}

/* Add shadow on scroll (optional with JS) */
.site-header.scrolled {
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

/* Logo */
.navbar-brand img {
	height: 70px;
	width: auto;
	object-fit: contain;
	transition: transform .2s ease;
}

.navbar-brand:hover img {
	transform: translateY(-2px);
}

/* Navigation Menu */
.menu-list .nav-link {
	padding: .65rem 1rem;
	font-weight: 500;
	color: #233;
	border-radius: 8px;
	transition: background .2s ease, color .2s ease;
}

.menu-list .nav-link:hover,
.menu-list .nav-link:focus {
	background: rgba(10, 74, 120, 0.06);
	color: var(--brand-primary);
}

.menu-list .nav-link.active {
	color: var(--brand-primary);
	font-weight: 600;
	position: relative;
}

.menu-list .nav-link.active::after {
	content: "";
	position: absolute;
	left: 18%;
	right: 18%;
	height: 3px;
	bottom: -6px;
	background: linear-gradient(90deg, var(--brand-primary), var(--brand-secondary));
	border-radius: 5px;
}

/* Mobile Menu */
.navbar-toggler {
	border: none;
	font-size: 1.3rem;
}

.navbar-toggler:focus {
	outline: none;
}

/* Mobile menu — improved full-width panel + spacing */
@media (max-width: 991.98px) {

	/* Make the collapsed nav act like a panel that spans content (not a small floating box) */
	.navbar-collapse {
		background: #fff;
		margin-top: 0.6rem;
		margin-left: 0;
		margin-right: 0;
		padding: 0.5rem 0;
		border-radius: 12px;
		box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
	}

	/* Remove heavy inset; make links full width and comfortable to tap */
	.menu-list .nav-link {
		display: block;
		width: 100%;
		padding: 16px 20px;
		color: #2b3a42;
		font-size: 1.03rem;
		border-radius: 0;
		margin: 0;
		background: transparent;
	}

	/* subtle separators between items */
	.menu-list .nav-item+.nav-item .nav-link {
		border-top: 1px solid rgba(15, 23, 42, 0.04);
	}

	/* active style: left accent bar + gradient underline for personality */
	.menu-list .nav-link.active {
		color: var(--brand-primary);
		font-weight: 600;
		background: linear-gradient(90deg, rgba(62, 198, 196, 0.04), rgba(10, 74, 120, 0.02));
		position: relative;
	}

	.menu-list .nav-link.active::before {
		content: "";
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		width: 4px;
		background: linear-gradient(180deg, var(--brand-primary), var(--brand-accent));
		border-top-left-radius: 6px;
		border-bottom-left-radius: 6px;
	}

	.menu-list .nav-link.active::after {
		content: "";
		height: 3px;
		width: 40%;
		background: linear-gradient(90deg, var(--brand-primary), var(--brand-secondary));
		position: absolute;
		bottom: 6px;
		left: 20px;
		border-radius: 4px;
	}

	/* make toggler slightly larger and right aligned */
	.navbar-toggler {
		border: 1px solid rgba(15, 23, 42, 0.06);
		border-radius: 10px;
		padding: 6px 10px;
		font-size: 1.05rem;
	}

	/* make logo slightly smaller on very small screens so it and toggler fit nicely */
	.navbar-brand img {
		height: 50px;
	}

	/* keep container padding consistent */
	.container {
		padding-left: 12px;
		padding-right: 12px;
	}
}

/* Search */
.search-input {
	border-radius: 12px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
	border: 0;
}

.input-group-text {
	background: #fff;
	border: 0;
	border-radius: 12px 0 0 12px;
	color: var(--brand-primary);
}

/* Cards */
.product-card {
	background: #fff;
	border-radius: var(--card-radius);
	overflow: hidden;
	box-shadow: var(--shadow);
	transition: transform .20s ease !important;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.product-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 14px 40px rgba(0, 0, 0, 0.12);
}

.card-body {
	padding: 15px;
	display: flex;
	flex-direction: column;
}

.product-title {
	font-size: 1rem;
	font-weight: 600;
	margin-bottom: 6px;
	color: var(--brand-primary);
	min-height: 36px;
	height: 38px;
	overflow: hidden;
}

.product-desc {
	color: #545b63;
	font-size: 14px;
	min-height: 38px;
}

@media (min-width: 768px) {
	.product-desc {
		height: 40px;
		overflow: hidden;
	}
}

@media (max-width:576px) {
	.product-desc {   
    min-height: 24px;
    height: 40px;
    overflow: hidden;
	}
}

/* Overlay carousel wrapper for badge */
.carousel-overlay {
	position: relative;
	border-top-left-radius: var(--card-radius);
	border-top-right-radius: var(--card-radius);
	overflow: hidden;
}

.product-image-wrap {
    position: relative;    
    overflow: hidden;
}

.product-image-wrap::after {
    content: "";
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: -4px;
    height: 10px;
    background: radial-gradient(
        ellipse at center,
        rgba(0, 0, 0, 0.16) 0%,
        rgba(0, 0, 0, 0.08) 40%,
        rgba(0, 0, 0, 0.03) 65%,
        rgba(0, 0, 0, 0) 75%
    );
    pointer-events: none;
}


.product-image-wrap img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	padding: 10px 10px 0 10px;
	height: 200px;
}

@media (max-width: 576px) {

    .product-image-wrap {
        position: relative;
/*         height: 240px; */
        display: flex;
        align-items: center;
        justify-content: center;
        background: #fff;
        overflow: visible; /* IMPORTANT */
    }

    .product-image-wrap img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

    /* Bottom shadow (mobile safe) */
    .product-image-wrap::after {
        content: "";
        position: absolute;
        left: 18px;
        right: 18px;
        bottom: 6px;        /* negative mat rakho on mobile */
        height: 10px;
        background: radial-gradient(
            ellipse at center,
            rgba(0, 0, 0, 0.14) 0%,
            rgba(0, 0, 0, 0.07) 45%,
            rgba(0, 0, 0, 0.03) 65%,
            rgba(0, 0, 0, 0) 75%
        );
        pointer-events: none;
    }

}


/* category badge overlay on image bottom-right */
.category-badge {
	position: absolute;
	right: 12px;
	bottom: 12px;
	z-index: 20;
	background: #0000008e;
	color: #fff;
	padding: 6px 10px;
	border-radius: 999px;
	font-size: .7rem;
	font-weight: 300;
	box-shadow: 0 6px 16px rgba(10, 74, 120, 0.12);
}

/* move indicators up a little so they won't be covered by badge */
.carousel .carousel-indicators {
	bottom: 10px;
}

.read-buy-btn {
    display: flex;
    gap: 10px;
}

.read-buy-btn .btn {
    flex: 1;                 /* equal width */
    height: 44px;            /* fixed height */
    display: flex;
    align-items: center;     /* vertical center */
    justify-content: center; /* horizontal center */
    white-space: nowrap;
    font-size: 14px;
    border-radius: 10px;
}

/* .btn-custom-read {
    background: #f1f3f5;
    color: #111;
}

.btn-custom-read:hover {
    background: var(--brand-accent);
    color: #fff;
} */

.btn-custom-read {
   background: #3fa6a8;
   color: #fff;
}

.btn-custom-read:hover {
    background: var(--brand-primary);
    color: #fff;
}

.btn-custom-buy {
    background: #000;
    color: #fff;
}

.btn-custom-buy:hover {
    background: var(--brand-primary);
    color: #fff;
}

.read-buy-btn i {
    font-size: 14px;
    line-height: 1;
}


@media (min-width: 767px) and (max-width: 1200px) {
	.col-12.col-md-3.card-wrap {
		width: 50%;
	}
}

/* result/no-results */
#noResults {
	display: none;
	padding: 28px 0;
	color: #6c757d;
	text-align: center;
}

/* Result count hidden initially */
#resultCountDesktop,
#resultCountMobile {
	display: none;
	color: #6c757d;
	font-weight: 500;
}

/* Mobile layout tweaks: ensure category + result aligned on mobile */
@media (max-width:767.98px) {
	.category-row {
		display: flex;
		align-items: center;
		gap: .5rem;
		justify-content: space-between;
		margin-top: .6rem;
	}

	.category-row .form-select {
		flex: 1;
	}

	.category-row .result-count-wrap {
		white-space: nowrap;
		margin-left: 8px;
	}
}

aside#secondary {
	display: none;
}

.badge {
	background: #eef2f7;
	color: #1f2937;
	padding: 7px 12px;
	border-radius: 999px;
	font-size: 13px;
}

.post-buy-now-btn a {
	width: 100% !important;
}

.current-menu-item a {
	color: #0a4a78 !important;
	font-weight: 600;
	position: relative;
}

/* footer */

.site-footer {
	background: #f6f7f8;
	padding: 100px 20px 20px 20px;	
}

/* Row layout */
.footer-row {
	max-width: 1180px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
}

/* Copyright left */
.copy {
	font-size: 14px;
	color: #6b7280;
	margin: 0;
}

/* Social icons right */
.social {
	display: flex;
	gap: 10px;
}

/* Buttons */
.social-btn {
	width: 35px;
	height: 35px;
	border-radius: 5px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	color: #fff;
	transition: 0.25s ease;
	text-decoration: none;
}

/* Brand colors */
.fb {
	background: #1877F2;
}

.ig {
	background: radial-gradient(circle at 30% 30%, #F58529, #DD2A7B, #8134AF, #515BD4);
}

.tw {
	background: #000;
}

.yt {
	background: #FF0000;
}

.whats {
	background: #4ac659;
}

/* Hover effect */
.social-btn:hover {
	background: #fff;
	transform: translateY(-3px);
	border: 1px solid #ccc;
}

/* Hover icon colors */
.fb:hover i {
	color: #1877F2;
}

.ig:hover i {
	color: #DD2A7B;
}

.tw:hover i {
	color: #000;
}

.yt:hover i {
	color: #FF0000;
}

.whats:hover i {
	color: #4ac659;
}

.social-btn i {
	color: #fff;
	transition: 0.25s ease;
}

/* Responsive (center stacked) */
@media (max-width: 600px) {
	.footer-row {
		flex-direction: column;
		text-align: center;
	}
	.site-footer {		
		padding: 30px 20px 20px 20px;		
	}
}

.affiliate-disclosure {  
  padding-top: 14px;
  border-top: 1px solid #e5e5e5;
  text-align: center;
}

.affiliate-disclosure p {
  margin: 0;
  font-size: 13px;
  color: #777;
  line-height: 1.6;
}

/* Share Button */

.share-box {  
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 14px;
}

.share-label {
  color: #666;
  margin-right: 6px;
}

.share-btn {
  padding: 6px 12px;
  border-radius: 4px;
  text-decoration: none;
  color: #fff;
  font-size: 13px;
  transition: opacity 0.2s ease;
}

.share-btn:hover {
  opacity: 0.85;
}

.share-btn.whatsapp { background: #25D366; }
.share-btn.facebook { background: #1877F2; }
.share-btn.x { background: #000000; }
.share-btn.copy { background: #555; }

#backToTop {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: #ff9800;
  color: #000;
  font-size: 20px;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
  z-index: 9999;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

#backToTop:hover {
  transform: translateY(-3px);
  background: #e68900;
}

#page-loader {
  position: sticky;
  top: 0;
  height: 3px;
  width: 0%;
  z-index: 99999;
  background: #43a3a9;
  transition: width 0.25s ease-out, opacity 0.3s ease;
  opacity: 0;
  pointer-events: none;
}


@media (max-width:767px) {
	#page-loader {
		display: none;
	}
}