/** Shopify CDN: Minification failed

Line 1688:0 All "@import" rules must come first
Line 2451:1 Unexpected "/"
Line 3130:0 All "@import" rules must come first
Line 3684:4 Unexpected "/"
Line 3701:0 All "@import" rules must come first

**/
/* Import Lexend Deca */
@import url("https://fonts.googleapis.com/css2?family=Lexend+Deca&display=swap");

/* Apply only to text, not icons */
body,
p,
span,
h1,
h2,
h3,
h4,
h5,
h6,
a,
li {
	font-family: "Lexend Deca", sans-serif !important;
}

@media (max-width: 768px) {
	.custom-card {
		position: relative;
		width: 100% !important; /* full width le har mobile pe */
		height: 190px; /* agar fixed height chahiye */
		border-radius: 15px;
		overflow: hidden;
	}
}
@media (max-width: 468px) {
	/* Common Card Styles */
	.custom-card {
		position: relative;
		width: 330px;
		height: 190px;
		border-radius: 15px;
		overflow: hidden;
	}
}

.cps-action-icons {
	position: absolute;
	top: -4px;
	right: -2px;
	background: white;
	border-radius: 12px;
	box-shadow: var(--cps-shadow);
	display: flex;
	flex-direction: column;
	gap: 1px !important;
	padding: 15px;
	z-index: 10;
	opacity: 0;
	transform: translateY(-10px);
	transition:
		opacity 0.3s ease,
		transform 0.3s ease;
}

@media (min-width: 1024px) {
	.maian-content-area {
		/* 60px = the fixed icon rail's actual width, so gutters come out even.
		   Kept in sync with .brand-slider-section below — the category and
		   sub-category pages must line up with the homepage. */
		margin-left: 60px;
	}
	.cps-extra-info-panel {
		top: 100%;
		/* margin-top: 30px !important; */
	}
}
body {
	background: #f6f6f6;
}

.swiper-slide-hero img {
	max-height: 460px;
	height: fit-content;
}

.hero-give-away {
	min-height: 270px;
}

.custom-card-container {
	display: flex;
	gap: 20px;
}

.custom-card-container {
	display: flex;
	gap: 20px;
}

.custom-card-container {
	display: flex;
	gap: 20px;
}

/* Common Card Styles */
/* .custom-card {
  position: relative;
  width: 342px;
  height: 190px;
  border-radius: 15px;
  overflow: hidden;
} */

/* Background Wrapper for Hover Effect */
.custom-card-bg {
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	transition: transform 0.4s ease-in-out;
}

/* Unique Backgrounds */
.custom-games .custom-card-bg {
	background-image: url("Games-Entertainment.jpg");
}

.custom-accessories .custom-card-bg {
	background-image: url("Accessories-and-Gadgets1.jpg");
}

/* Hover Zoom Effect (Only Background) */
.custom-card:hover .custom-card-bg {
	transform: scale(1.1);
}

/* Overlay (Surrounds the content) */
.custom-card-overlay {
	position: absolute;
	width: 90%;
	height: 85%;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;

	background: rgba(255, 255, 255, 0.8);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	text-align: center;
	border-radius: 1rem;
	-webkit-backdrop-filter: blur(8px);
	/* backdrop-filter: blur(8px); */
	transition: background 0.3s ease-in-out;
	padding-left: 23px;
}

@media (max-width: 1024px) {
	.custom-card-overlay {
		align-items: center;
		padding-left: 0px;
	}
}

/* @media (min-width: 0px) and (max-width: 767px) {
	.custom-card-overlay {
		align-items: center;
		padding-left: 0px;
	}
} */

/* Reduce overlay opacity on hover */
.custom-card:hover .custom-card-overlay {
	background: rgba(255, 255, 255, 0.8);
}

/* Button Style */
.custom-shop-btn {
	background: white;
	border: none;
	padding: 8px 16px;
	border-radius: 5px;
	font-size: 14px;
	cursor: pointer;
	font-weight: bold;
	transition: background 0.3s ease-in-out;
}

.custom-shop-btn:hover {
	background: #ddd;
}

/* category style here */

/* Title Style */
.custom-title {
	font-size: 15px;
	font-weight: 400;
	color: #rgb(50, 50, 50);
	margin-bottom: 12px;
}

/* category circle style here  */

.card {
	text-align: center;
	/* margin: 10px; */
	cursor: pointer;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.circle {
	width: 189px;
	height: 189px;
	/* background: linear-gradient(to right, #00c6ff, #0072ff); */
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
	overflow: hidden;
}

.circle img {
	width: 210px;
	height: auto;
	transition: transform 0.3s ease-in-out;
}

.circle:hover img {
	transform: scale(1.1);
}

.text {
	padding: 10px;
}

.text h3 {
	margin: 0;
	line-height: 1.4;
	color: #333;
	font-size: 16px;
	font-weight: 400;
	font-family: "Poppins";
}

.text p {
	margin: 5px 0;
	font-size: 16px;
	color: #777;
}

.title-of-category {
	font-size: 28px;
	font-weight: 500;
	color: black;
	line-height: 3;
	font-family: "Poppins";
}
.hover-zoom {
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	transition: transform 0.4s ease-in-out;
}

.hover-zoom:hover {
	transform: scale(1.1);
}
.product-circle {
	/* padding-left: 30px; 
    margin-right: 10px;
    /* padding-top: 30px; 
    padding-bottom: 30px; */
}
@media (max-width: 768px) {
	.card {
		min-width: 160px;
		margin: 5px;
	}

	.circle {
		width: 155px;
		height: 155px;
	}

	.circle img {
		width: 155px;
	}

	.text h3 {
		font-size: small;
	}

	.text p {
		font-size: 14px;
	}
}

/* sliders here  */
.custom-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	/* width: 100%;/ */
}

.custom-btn {
	background-color: #5da4c7;
	color: #fff;
	border-radius: 38px;
	padding: 14px 22px;
	font-size: 12px;
	font-weight: 700;
	text-decoration: none;
	border: none;
}
.custom-btn:hover {
	background-color: #c89f2e;
}

/* tab style start here */
.tab-container {
	max-width: 1800px;
	width: 100%;
	padding-left: 20px;
	padding-right: 17px;
}

.tabs {
	display: flex;
	justify-content: center;
	margin-bottom: 10px;
}
@media (max-width: 768px) {
	.tabs {
		display: flex;
		justify-content: flex-start;
		margin-bottom: 10px;
	}
}
/* .tab-content {
  padding: 20px;
}
 */
.tab-pane {
	display: none;
}

.tab-pane.active {
	display: block;
}

/* Individual product card */
.product-card {
	background: white;
	border-radius: 10px;
	padding: 15px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	position: relative;
	transition: transform 0.3s ease-in-out;
}

/* Product image */
.product-image img {
	width: 100%;
	border-radius: 10px;
}

/* Discount badge */
.discount-badge {
	position: absolute;
	top: 0px;
	/* left: 1px; */
	right: 1px;
	background: rgb(219, 174, 50);
	color: white;
	padding: 5px 10px;
	border-radius: 10px;
	font-size: 12px;
	font-weight: 500;
	z-index: 100;
}

/* Product details */
.product-info {
	margin-top: 10px;
	display: flex;
	flex-direction: column;
}

.product-info h3 {
	font-size: 16px;
	margin: 5px 0;
}

.category {
	color: gray;
	font-size: 14px;
}

.rating {
	color: #ffc107;
}

/* Price */
.price {
	display: flex;
	align-items: center;
	gap: 5px;
}

.original-price {
	text-decoration: line-through;
	color: gray;
}

.discounted-price {
	color: #dbae32;
	font-weight: 500;
}

/* Colors */
.colors {
	display: flex;
	gap: 5px;
	margin-top: 5px;
}

.color-circle {
	width: 15px;
	height: 15px;
	border-radius: 50%;
	display: inline-block;
	border: 1px solid #ccc;
}

.sku {
	font-size: 12px;
	color: gray;
	margin-top: 5px;
}

/* Action Icons */
.action-icons {
	position: absolute;
	top: 3px;
	right: 3px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	background: white;
	text-align: center;
	width: 50px;
	height: 180px;
	padding: 15px;
	border-radius: 10px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
	opacity: 0;
	visibility: hidden;
	transition:
		opacity 0.3s ease-in-out,
		visibility 0.3s ease-in-out;
}

/* Show action icons on hover */
.product-card:hover .action-icons {
	opacity: 1;
	visibility: visible;
}

/* Icon styles */
.action-icons i {
	font-size: 20px;
	margin-bottom: 10px;
	color: #333;
	cursor: pointer;
	transition:
		color 0.2s ease-in-out,
		transform 0.2s ease-in-out;
}

.action-icons i:hover {
	color: #c89f2e;
	transform: scale(1.2);
}

.product-card {
	position: relative;
	background: white;
	border-radius: 10px;
	padding: 15px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	position: relative;
	overflow: hidden;
	transition:
		transform 0.3s ease-in-out,
		box-shadow 0.3s ease-in-out,
		height 0.3s ease-in-out;
}

/* Only expand if the card has extra info */
.product-card.has-extra-info:hover {
	height: 750px; /* Expands only if extra info exists */
	/* z-index: 100; */
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
	transform: scale(1.05);
}

/* Initially hidden extra info */
.extra-info {
	opacity: 0;
	visibility: hidden;
	height: 0;
	overflow: hidden;
	transition:
		opacity 0.3s ease-in-out,
		height 0.3s ease-in-out,
		visibility 0.3s ease-in-out;
}

/* Show extra info only on hover if it exists */
.product-card.has-extra-info:hover .extra-info {
	opacity: 1;
	visibility: visible;
	height: auto;
}

/* Optional: Smooth entry animation */
.extra-info p {
	transform: translateY(10px);
	opacity: 0;
	transition:
		transform 0.3s ease-in-out,
		opacity 0.3s ease-in-out;
}

.product-card.has-extra-info:hover .extra-info p {
	transform: translateY(0);
	opacity: 1;
}

.slider-container-main {
	/* margin-top: 22px; */
}

.tabs {
	display: flex;
	gap: 10px;
	/* padding: 10px 0; */
	font-size: 16px;
	font-weight: 400;
}

.tab-button {
	background: none;
	border: none;
	font-size: 16px;
	/* Adjust font size */
	font-weight: 600;
	/* Adjust font weight */
	color: #333;
	/* Default text color */
	cursor: pointer;
	transition: all 0.3s ease;
	position: relative;
	padding-bottom: 5px;
}

.tab-button::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 0;
	height: 2px;
	background-color: #c89f2e;
	transition: all 0.3s ease;
	transform: translateX(-50%);
}

.tab-button:hover {
	color: #c89f2e;
	/* Hover color change to blue */
	transform: translateY(-2px);
	/* Lift effect */
	/* text-shadow: 0 2px 4px rgba(0, 102, 204, 0.2); */
	/* Soft blue shadow */
}

.tab-button:hover::after {
	width: 100%;
	/* Underline grows from center */
}

.tab-button:active {
	transform: translateY(0) scale(0.98);
	/* Click feedback */
}

.tab-button.active {
	font-weight: 600;
	/* Make active tab bold */
	color: #c89f2e;
	/* Adjust active tab color */
	transform: translateY(0);
}

.tab-button.active::after {
	width: 100%;
	height: 3px;
	/* More prominent underline */
	background-color: #c89f2e;
	/* Active underline color */
}

.mobile-section-slider {
	width: 100%;
	margin-left: auto;
	display: grid;
	grid-template-columns: 25% 75%;
	/* Defines the two-column layout */
}

.slider-container-mobile {
	align-items: center;
	display: flex;
	justify-content: center;
}

/* card design  */
.unique-card {
	position: relative;
	width: 380px;
	height: 600px;
	border-radius: 10px;
	margin: 15px;
	overflow: hidden;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	transition: transform 0.3s ease-in-out;
}

.unique-card:hover .unique-card-img {
	transform: scale(1.1);
}

.unique-card-img {
	position: absolute;
	width: 100%;
	height: 100%;
	background: url("assets/On-Page Images-20250316T080846Z-001/Home Page Images/Mobile-Phones-.jpg")
		center/cover;
	transition: transform 0.3s ease-in-out;
}

.unique-card-img::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.3);
}

.unique-card-content {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	color: white;
	z-index: 2;
}

.unique-card-content h2 {
	font-size: 22px;
	margin-bottom: 10px;
	color: white;
}

.unique-card-content p {
	font-size: 14px;
	margin-bottom: 20px;
}

.unique-card-content a {
	text-decoration: none;
	background: #ffc107;
	/* padding: 10px 20px; */
	border-radius: 35px;
	color: black;
	font-weight: bold;
	display: inline-block;
}

/* Styles for Apple Best Products Section */
.apple-product-swiper {
	max-width: 100%;
	overflow: hidden;
}

.apple-product-swiper .swiper-wrapper {
	display: flex;
	flex-wrap: nowrap;
	/* Prevents wrapping */
	transition: transform 0.3s ease-in-out;
}

.appleSwiper .swiper-slide {
	max-width: 250px;
	width: 100%;
}

.product-card {
	margin-top: 15px;
	margin-bottom: 15px;
}

.apple-product-card {
	max-width: 250px;
	background: white;
	border-radius: 12px;
	padding: 15px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	display: flex;
	align-items: center;
	gap: 15px;
	height: auto;
}

.apple-product-image img {
	width: 70px;
	border-radius: 8px;
}

.apple-product-info {
	flex: 1;
	text-align: left;
}

.apple-product-info h3 {
	font-size: 16px;
	margin: 0;
	font-weight: bold;
}

.apple-rating {
	font-size: 14px;
	color: #ccc;
	margin: 5px 0;
}

.apple-price {
	color: orange;
	font-weight: bold;
	font-size: 14px;
	display: flex;
	flex-direction: column;
}

/* Custom Swiper button styles for Apple Best Products */
.apple-swiper-nav-next,
.apple-swiper-nav-prev {
	color: #00b7ff;
	background: white;
	border-radius: 50%;
	width: 40px;
	height: 40px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.apple-swiper-nav-next:after,
.apple-swiper-nav-prev:after {
	font-size: 16px;
}

.apple-product-swiper .swiper-slide {
	flex-shrink: 0;
	/* Prevents slide expansion */
	width: auto;
	/* Let Swiper control it */
	max-width: 270px;
	/* Ensures it doesn't grow */
}

.apple-best-products {
	/* margin-top: 90px; */
	background-color: transparent;
	background-image: radial-gradient(
		at bottom right,
		#55a0b873 34%,
		#dbae3273 100%
	);
}

.wearables {
	/* padding-left:20px; */
}

.tablets {
	/* padding-left: 20px; */
	padding-right: 0px;
}

.games {
	margin-top: 60px;
}

.accessories-gadgets {
	margin-top: 30px;
}

.gadgets-section-slider {
	margin-top: 30px;
	width: 100%;
	margin-left: auto;
	display: grid;
	grid-template-columns: 75% 25%;
	/* Defines the two-column layout */
}

/* laptop slider start here */
.laptop-card-slider-container {
	margin-top: 60px;
	width: 100%;
	overflow: hidden;
	position: relative;
}

.laptop-card-slider-swiper {
	padding: 30px 28px !important;
}

.laptop-card-slider-wrapper {
	display: flex;
	flex-wrap: nowrap;
}

.laptop-card-slider-card {
	position: relative;
	border-radius: 12px;
	padding: 20px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: white;
	border-radius: 10px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	/* width: 340px; */
	height: 155px;
	transition: background-size 0.5s ease-in-out;
}

.laptop-card-slider-card:hover {
	background-size: 110%;
	transition: transform 0.6s ease-in-out;
}

.laptop-card-slider-view-button {
	background: white;
	color: black;
	border: none;
	padding: 8px 15px;
	border-radius: 5px;
	font-size: 14px;
	cursor: pointer;
	font-weight: bold;
}

/* Background Images */
.laptop-card-slider-dell {
	background-image: url("assets/On-Page Images-20250316T080846Z-001/Home Page Images/Dell-.jpg");
}

.laptop-card-slider-hp {
	background-image: url("assets/On-Page Images-20250316T080846Z-001/Home Page Images/HP-.jpg");
}

.laptop-card-slider-lenovo {
	background-image: url("assets/On-Page Images-20250316T080846Z-001/Home Page Images/Lenovo-.jpg");
}

.laptop-card-slider-samsung {
	background-image: url("assets/On-Page Images-20250316T080846Z-001/Home Page Images/Samsung-.jpg");
}

/* Blog Section Start Here */
.blog-section {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px;
}

/* Blog Card */
.blog-card {
	width: 100%;
	/* max-width: 380px; */
	background: white;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	transition: box-shadow 0.3s ease-in-out;
	cursor: pointer;
}

.blog-card:hover {
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

/* Blog Image */
.blog-image {
	width: 100%;
	height: 200px;
	position: relative;
}

.blog-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease-in-out;
}

.blog-card:hover .blog-image img {
	transform: scale(1.1);
	/* Zoom effect */
}

/* Blog Overlay */
.blog-overlay {
	position: absolute;
	bottom: 10px;
	left: 10px;
	color: white;
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: bold;
}

.blog-overlay i {
	background: white;
	color: black;
	border-radius: 50%;
	padding: 5px;
}

/* Blog Icons */
.blog-icons {
	position: absolute;
	bottom: 10px;
	right: 10px;
	display: flex;
	gap: 10px;
	color: white;
}

.blog-icons i {
	cursor: pointer;
	font-size: 16px;
}

/* Blog Details */
.blog-details {
	padding: 15px;
}

.blog-category {
	color: #0096ff;
	font-size: 14px;
	font-weight: bold;
}

.blog-title {
	font-size: 17px;
	font-weight: 500;
	margin: 12px 0;
}

/* Continue Reading */
.continue-reading {
	color: #ffae00;
	font-weight: bold;
	font-size: 14px;
	display: inline-block;
	cursor: pointer;
	text-decoration: none;
}

.continue-reading:hover {
	text-decoration: underline;
}

/* Responsive Adjustments */
@media (max-width: 1024px) {
	.blog-section {
		justify-content: center;
	}
}

@media (max-width: 768px) {
	.blog-card {
		max-width: 100%;
	}
}

@media (max-width: 480px) {
	.blog-section {
		flex-direction: column;
		align-items: center;
	}

	.blog-card {
		width: 90%;
	}
}

/* Laptop slider container */
.laptop-card-slider-container {
	margin-top: 0px;
	width: 100%;
	overflow: hidden;
	position: relative;
}

.laptop-card-slider-swiper {
	padding: 20px 0;
}

.laptop-card-slider-wrapper {
	display: flex;
	flex-wrap: nowrap;
}

/* Card Styles */
.laptop-card-slider-card {
	height: 155px;
	position: relative;
	/* width: 295px !important; */
	width: 20% !important;
	/* height: 170px; */
	border-radius: 10px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding-left: 20px;
	color: white;
	cursor: pointer;
}

/* Image inside card */
.laptop-card-slider-img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease; /* smooth zoom */
	z-index: 0;
}

/* Overlay */
.laptop-card-slider-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.52);
	border-radius: 10px;
	transition: background-color 0.3s ease-in-out;
	z-index: 1;
}

/* Hover — zoom only image & darken overlay */
.laptop-card-slider-card:hover .laptop-card-slider-img {
	transform: scale(1.1);
}
.laptop-card-slider-card:hover::before {
	background-color: rgba(0, 0, 0, 0.72);
}

/* Text & button above overlay */
.laptop-card-slider-card > div {
	position: relative;
	z-index: 2;
}

.laptop-card-slider-card h3 {
	margin: 0 0 10px;
	font-size: 20px;
	font-weight: 500;
}

.laptop-card-slider-view-button {
	font-size: 12px;
	background: white;
	color: black;
	padding: 8px 16px;
	border: none;
	border-radius: 6px;
	font-weight: 500;
	cursor: pointer;
	transition:
		background 0.3s ease-in-out,
		color 0.3s ease-in-out;
}

/* Background Images */
.laptop-card-slider-dell {
	background-image: url("Dell-.jpg");
}

.laptop-card-slider-hp {
	background-image: url("HP-.jpg");
}

.laptop-card-slider-lenovo {
	background-image: url("Lenovo-.jpg");
}

.laptop-card-slider-samsung {
	background-image: url("Samsung-.jpg");
}

/* blod style */
.blog {
	margin-top: 60px;
}

/* Blog Section Start Here */
.blog-section {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px;
}

/* Blog Card */
.blog-card {
	width: 100%;
	max-width: 460px;
	background: white;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	transition: box-shadow 0.3s ease-in-out;
	cursor: pointer;
}

.blog-card:hover {
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

/* Blog Image */
.blog-image {
	width: 100%;
	height: 200px;
	position: relative;
}

.blog-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease-in-out;
}

.blog-card:hover .blog-image img {
	transform: scale(1.1);
	/* Zoom effect */
}

/* Blog Overlay */
.blog-overlay {
	position: absolute;
	bottom: 10px;
	left: 10px;
	color: white;
	display: none;
	align-items: center;
	gap: 8px;
	font-weight: bold;
}

.blog-overlay i {
	background: white;
	color: black;
	border-radius: 50%;
	padding: 5px;
}

/* Blog Icons */
.blog-icons {
	position: absolute;
	bottom: 10px;
	right: 10px;
	display: none;
	gap: 10px;
	color: white;
}

.blog-icons i {
	cursor: pointer;
	font-size: 16px;
}

/* Blog Details */
.blog-details {
	padding: 15px;
}

.blog-category {
	color: #0096ff;
	font-size: 14px;
	font-weight: bold;
}

.blog-category {
	color: #55a9d1;
	font-size: 13px;
	font-weight: 400;
}

/* Continue Reading */
.continue-reading {
	color: #dbae32;
	font-weight: 400;
	font-size: 13px;
	display: inline-block;
	cursor: pointer;
	text-decoration: none;
}

.continue-reading:hover {
	text-decoration: none;
}

/* Responsive Adjustments */
@media (max-width: 1024px) {
	.blog-section {
		justify-content: center;
	}
}

@media (max-width: 768px) {
	.blog-card {
		max-width: 100%;
	}
}

@media (max-width: 480px) {
	.blog-section {
		flex-direction: column;
		align-items: center;
	}

	.blog-card {
		width: 97%;
	}
}

.Recent {
	padding-left: 0px;
}

.recent-product-swiper {
	width: 100%;
	overflow: hidden;
}

.swiper-wrapper {
	display: flex;
}

/* .swiper-slide {
  flex-shrink: 0;
} */

/* categories last */
.category-slider {
	overflow: hidden;
}

.swiper-wrapper {
	display: flex;
	align-items: center;
  /* justify-content: space-evenly; */
}

.category-item {
	text-align: center;
	width: auto !important;
}
.category-image {
	text-align: center;
	display: flex;
	justify-content: center;
}
.category-image img {
	width: 80px; /* Adjust as needed */
	height: 80px;
	object-fit: cover;
	border-radius: 10px;
}

.category-info h3 {
	font-size: 16px;
	font-weight: bold;
}

.category-info p {
	font-size: 14px;
	color: gray;
}

.category-slider .swiper-wrapper {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
}
.category-slider .swiper-slide {
	flex-shrink: 0;
	width: auto;
}

.account-sidebar {
	position: fixed;
	top: 0;
	right: -400px; /* Initially hidden */
	width: 380px;
	height: 100%;
	background-color: #fff;
	box-shadow: -2px 0px 10px rgba(0, 0, 0, 0.2);
	transition: right 0.3s ease-in-out;
	padding: 35px 28px; /* More padding */
	z-index: 1000;
	overflow-y: auto;
}

.account-sidebar.active {
	right: 0;
}

h2 {
	font-size: 24px;
	font-weight: bold;
	margin-bottom: 18px; /* Slightly increased */
}

.close-btn {
	position: absolute;
	top: 18px;
	right: 20px;
	font-size: 22px;
	border: none;
	background: none;
	cursor: pointer;
	color: #333;
}

label {
	font-size: 15px;
	font-weight: 500;
	margin-bottom: 6px;
	display: block;
}

input {
	width: 100%;
	height: 48px; /* Increased height */
	padding: 12px 15px;
	/* margin-bottom: 18px; /* Adjusted spacing */
	border: 1px solid #ccc;
	border-radius: 8px; /* Softer edges */
	font-size: 15px; /* Slightly larger font */
}

.password-wrapper {
	position: relative;
}

.password-wrapper .toggle-password {
	position: absolute;
	right: 14px;
	top: 50%;
	transform: translateY(-50%);
	cursor: pointer;
	color: #777;
	font-size: 18px; /* Slightly bigger */
}

.login-btn {
	width: 100%;
	height: 50px; /* More height for better appearance */
	padding: 14px;
	background-color: #5a9ec7;
	color: white;
	border: none;
	cursor: pointer;
	font-size: 16px;
	font-weight: bold;
	border-radius: 8px;
	margin-top: 12px;
}

.login-btn:hover {
	background-color: #4a89af;
}

.remember-me {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 18px; /* Slightly more space */
	font-size: 14px;
	line-height: 1.5;
}

.remember-me label {
	display: flex;
	align-items: center;
}

.remember-me input {
	width: 18px;
	height: 18px;
	margin-right: 10px;
}

.forgot-password {
	color: #f5a623;
	text-decoration: none;
	font-size: 14px;
	font-weight: 500;
}

.no-account {
	text-align: center;
	margin-top: 35px;
}

.user-icon {
	font-size: 55px; /* Slightly bigger */
	color: #ccc;
	margin-bottom: 8px;
}

.cart-sidebar {
	position: fixed;
	top: 0;
	right: -100%;
	width: 350px;
	height: 100%;
	background: #fff;
	box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
	transition: right 0.3s ease-in-out;
	z-index: 1000;
	padding: 20px;
}
.cart-sidebar.open {
	right: 0;
}
.cart-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	display: none;
	z-index: 999;
}
.cart-overlay.active {
	display: block;
}
.cart-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 18px;
	font-weight: bold;
}
.close-btn {
	cursor: pointer;
	text-decoration: none;
}
.cart-content {
	text-align: center;
	padding: 50px 20px;
}
.empty-cart i {
	font-size: 50px;
	color: #ccc;
}
.return-btn {
	background: #5d9bb2;
	color: white;
	border: none;
	padding: 10px 15px;
	font-size: 16px;
	cursor: pointer;
	border-radius: 5px;
}

/* .category-section {
	padding-top: 30px;
	padding-left: 92px;
	padding-bottom: 30px;
} */

/* .category-main-container {
	min-height: 200px;
	display: flex;
	justify-content: center;
	align-items: center;
} */

/* Slider Container */
.category-main-slider {
	/* width: 100%; */
	/* max-width: 1200px; */
	/* padding: 0 60px; */
	position: relative;
}

/* Slide Item Styles */
.category-slide-item {
	height: 100%;
	display: flex;
	flex-direction: column;
	border-radius: 12px;
	overflow: hidden;
	transition: transform 0.3s ease;
}

.category-slide-item:hover {
	transform: translateY(-5px);
}

.category-slide-image {
	height: 100px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.category-slide-image img {
	width: 80%;
	height: 80%;
	object-fit: contain;
}

.category-slide-info {
	padding: 1rem;
	text-align: center;
}

.category-slide-info h3 {
	font-size: 1.1rem;
	font-weight: 600;
	color: #333;
	margin-bottom: 0.5rem;
}

.category-slide-info p {
	font-size: 0.9rem;
	color: #666;
	margin: 0;
}

/* Navigation Buttons */
.category-slider-next,
.category-slider-prev {
	position: absolute;
	top: 50%;
	width: 40px;
	height: 40px;
	margin-top: -20px;
	background: white;
	border-radius: 50%;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
	z-index: 10;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.category-slider-next::after,
.category-slider-prev::after {
	font-family: "swiper-icons";
	font-size: 1rem;
	color: #333;
}

.category-slider-next {
	right: 0;
}

.category-slider-prev {
	left: 0;
}
.custom-container {
	font-weight: 500;

	font-family: "Poppins";
}
section {
	background: #f6f6f6;
	/* padding-left: 30px;
    padding-right: 20px; */
	/* padding-top: 30px; */
	padding-bottom: 30px;
}
.blog-sec {
	padding-left: 0px;
	padding-right: 0px;
}
/* Responsive Slide Sizing */
.category-main-slider .swiper-slide {
	width: calc((100% - 180px) / 7) !important;
	/* Updated for 7 slides */
}

@media (max-width: 1279px) {
	.category-main-slider .swiper-slide {
		width: calc((100% - 80px) / 5) !important;
	}

	.category-slide-image {
		height: 140px;
	}
}

@media (max-width: 1023px) {
	.category-main-slider .swiper-slide {
		width: calc((100% - 60px) / 4) !important;
	}

	.category-slide-info h3 {
		font-size: 1rem;
	}
}

@media (max-width: 767px) {
	.category-main-slider .swiper-slide {
		width: calc((100% - 30px) / 3) !important;
	}

	.category-slide-image {
		height: 120px;
	}
}

@media (max-width: 479px) {
	.category-main-slider .swiper-slide {
		width: calc((100% - 20px) / 2) !important;
	}

	.category-slide-info {
		padding: 0.75rem;
	}
	/* Mobile Section Responsive Styles */
	.mobile-section-slider {
		padding: 0 15px;
		margin: 0px 0 !important;
	}
}
/*home page style  */
@import url("https://fonts.googleapis.com/css2?family=Sacramento&family=Poppins:wght@300;400;500;600&display=swap");

/* Mobile Section Responsive Styles */
/* .mobile-section-slider {
	padding: 0 15px;
	margin: 30px 0;
} */

.card-mobile {
	margin-bottom: 20px;
}

.unique-card {
	background: #f8f9fa;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	height: 100%;
}

.unique-card-img {
	height: 200px;
	background: url("https://via.placeholder.com/600x400") center/cover no-repeat;
}

/* .unique-card-content {
	padding: 20px;
} */

.unique-card-content p {
	color: white;
	margin-bottom: 15px;
	font-size: 0.9rem;
}

.unique-card-img {
	position: absolute;
	width: 100%;
	height: 100%;
	background: url("/cdn/shop/files/Mobile-Phones-1_126ca2a3-3d4f-4722-9424-69d84c1491f1.jpg?v=1744297943");
	transition: transform 0.3s ease-in-out;
}

.unique-card-content a {
	display: inline-flex;
	align-items: center;
	color: #3b82f6;
	font-weight: 500;
	text-decoration: none;
}

.slider-container-main {
	width: 100%;
}

.swiper.mySwiper-products-mobile {
	padding: 0 10px;
}

/* Product Card Styles for Mobile */
.product-card {
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	overflow: hidden;
	transition: transform 0.3s ease;
	margin-bottom: 15px;
}

.product-card:hover {
	transform: translateY(-5px);
}

.product-image {
	position: relative;
	padding-top: 100%;
	/* 1:1 Aspect Ratio */
	overflow: hidden;
}

.product-image img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.product-card:hover .action-icons {
	opacity: 1;
}

.product-info {
	padding: 15px;
}

.product-info h3 {
	font-size: 0.9rem;
	margin-bottom: 5px;
	color: #333;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.category {
	font-size: 0.75rem;
	color: #6b7280;
	margin-bottom: 5px;
}

.rating {
	color: #fbbf24;
	margin-bottom: 5px;
	font-size: 0.75rem;
}

.in-stock {
	color: #10b981;
	font-size: 0.75rem;
	margin-bottom: 5px;
	font-weight: bold;
}

.limited-stock {
	color: #f39c12;
	font-size: 0.75rem;
	margin-bottom: 5px;
	font-weight: bold;
}

.out-of-stock {
	color: #dc3545;
	font-size: 0.75rem;
	margin-bottom: 5px;
	font-weight: bold;
}

.price {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 5px;
	font-size: 14px;
}

.discounted-price {
	font-weight: 400;
	color: #dbae32;
}

.original-price {
	text-decoration: line-through;
	color: #bbbbbb !important;
	font-size: 28px;
	font-weight: 500;
}

.sku {
	font-size: 0.7rem;
	color: #6b7280;
}

/* Responsive Breakpoints */
@media (min-width: 640px) {
	/* .mobile-section-slider {
		flex-direction: row;
		gap: 20px;
	} */

	.card-mobile {
		width: 30% !important;
		margin-bottom: 0;
	}

	.product-info h3 {
		font-size: 1rem;
	}
}

@media (min-width: 1024px) {
	.mobile-section-slider {
		padding: 0 30px;
	}
}

@media (max-width: 1024px) {
	/* Desktop Section Responsive Styles */

	.bes-tabs,
	.tabs {
		display: flex;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: thin;
		/* Firefox: make scrollbar thin */
		scrollbar-color: #888 #f1f1f1;
		/* Firefox: thumb and track color */
	}

	.tabs::-webkit-scrollbar {
		height: 6px;
	}

	.tabs::-webkit-scrollbar-track {
		background: #f1f1f1;
	}

	.tabs::-webkit-scrollbar-thumb {
		background: #888;
		border-radius: 3px;
	}

	.tabs::-webkit-scrollbar-thumb:hover {
		background: #555;
	}

	.bes-tabs,
	.tab-button {
		flex: 0 0 auto;
		padding: 0.5rem 1rem;
		white-space: nowrap;
	}
}

.font-bold {
	font-family: "Poppins", sans-serif;
	font-weight: 600;
}

.text-5xl {
	font-size: 55px;
	line-height: 1;
}

.text-gray-800 {
	--tw-text-opacity: 1;
	color: rgb(0 0 0);
}

.bes-tabs {
	display: flex;
	padding: 20px 0px 0px 0px;
	justify-content: flex-start;
	margin-bottom: 10px;
}

.bes-tab-button.active {
	font-weight: 600;
	color: #e4ad45;
}

.bes-tab-button {
	background: none;
	border: none;
	font-size: 16px;
	font-weight: 400;
	color: #333;
	cursor: pointer;
	transition: color 0.3s ease;
}

.bes-tab-pane.bes-hidden {
	display: none;
}

.bes-tab-pane.bes-active {
	display: block;
}

.Mobile-custom-btn {
	background-color: #5da4c7;
	color: #fff;
	border-radius: 38px;
	padding: 14px 22px;
	font-size: 12px;
	font-weight: 700;
	text-decoration: none;
	border: none;
	display: none;
}

.custom-btn {
	background-color: #5da4c7;
	color: #fff;
	border-radius: 38px;
	padding: 14px 22px;
	font-size: 12px;
	font-weight: 700;
	text-decoration: none;
	border: none;
}

/* Mobile (up to 767px) */
@media (max-width: 767px) {
	.title-of-category {
		text-align: center;
		width: 100%;
		margin: 0 auto;
	}
	.bes-tabs {
		display: flex;
		padding: 20px 0px 0px 0px;
		justify-content: flex-start;
		margin-bottom: 10px;
	}
	.custom-btn {
		background-color: #5da4c7;
		color: #fff;
		border-radius: 38px;
		padding: 14px 22px;
		font-size: 12px;
		font-weight: 700;
		text-decoration: none;
		border: none;
		display: none;
	}

	.small-screen-btn {
		display: flex;
		justify-content: center;
	}

	.Mobile-custom-btn {
		background-color: #5da4c7;
		color: #fff;
		border-radius: 38px;
		padding: 14px 22px;
		font-size: 12px;
		font-weight: 700;
		width: 150px;
		text-decoration: none;
		border: none;
		display: block;
	}

	.custom-container {
		text-align: center;
		display: contents;
	}

	.bes-product-slider {
	}
}

/* Base button styles */
.bes-tab-button {
	padding: 9px 7px;
	margin: 0 5px;
	border: none;
	background: transparent;
	cursor: pointer;
	font-weight: 400;
	color: #333;
	position: relative;
	transition: all 0.3s ease;
	outline: none;
	font-size: 16px;
	border-radius: 4px;
	font-family: "Poppins";
}

/* Hover effect */
.bes-tab-button:hover {
	color: #c89f2e;
	transform: translateY(-2px);
}

/* Active tab style */
.bes-tab-button.bes-active {
	color: #c89f2e;
	font-weight: 500;
}

/* Underline animation */
.bes-tab-button::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 0;
	height: 2px;
	background: #c89f2e;
	transition: all 0.3s ease;
	transform: translateX(-50%);
}

.bes-tab-button:hover::after,
.bes-tab-button.bes-active::after {
	width: 80%;
}

/* Ripple effect on click */
.bes-tab-button:active {
	transform: translateY(0);
}

.bes-tab-button:active::after {
	background: #c89f2e;
}

.bes-hover-tabs {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 8px;
	gap: 6px;
	position: absolute;
	bottom: 10px;
	left: 0;
	right: 0;
}

.bes-tab {
	width: 16px;
	height: 4px;
	background-color: #ccc;
	border-radius: 2px;
	transition: background-color 0.3s;
}

.bes-tab.bes-active {
	background-color: #333;
}

.bes-main-image {
	transition: opacity 0.2s ease !important;
}

.product-card {
	position: relative;
	/* base container for absolute child */
	overflow: visible;
	/* allow children to overflow */
	z-index: 1;
	/* base z-index */
}

/* Hover effect and expand behavior for product specs */

/* Product card position */
.product-card {
	position: relative;
	overflow: visible;
}

/* Button expand transition and shadow */
.expand-btn {
	transition: all 0.3s ease;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* Category slide item hover effects */
.category-slide-item {
	padding: 5px;
	transition: all 0.3s ease;
}

.category-slide-item:hover {
	transform: translateY(-5px);
}

.category-slide-item:hover .category-slide-image img {
	transform: scale(1.05);
}

.category-slide-item:hover .overlay {
	background: rgba(0, 0, 0, 0.7);
}

/* Parent Wrappers Should Allow Overflow */
.section-products,
.product-grid,
.grid,
.collection-products {
	position: relative;
	overflow: visible !important;
  
	z-index: 1;
}

/* Product Card */
.product-card {
	position: relative;
	overflow: visible;
	transition: all 0.3s ease;
	/* z-index: 5; */
}

.product-tabs-navigation {
	display: flex;
	border-bottom: 1px solid #ddd;
	margin: 15px 0 10px;
}

.tab-button {
	padding: 8px 16px;
	background: none;
	border: none;
	cursor: pointer;
	font-size: 16px;
	font-weight: 400;
	color: #666;
	border-bottom: 2px solid transparent;
}

.tab-button.active {
	color: #dbae32;
	border-bottom: 1px solid #c89f2e;
	font-weight: 500;
}

.product-tab-content {
	display: none;
}

.product-tab-content.active {
	display: block;
}

.product-specs {
	max-height: 200px;
	overflow-y: auto;
	font-size: 13px;
	line-height: 1.4;
}

.spec-section + .spec-section {
	margin-top: 10px;
}

.product-description {
	margin-top: 10px;
	font-size: 14px;
	line-height: 1.5;
}

.product-card-horizontal {
	--image-width: 100px;
	--card-padding: 12px;
	--card-gap: 16px;
}

/* Main container */
.product-card-horizontal-container {
	margin: 0 auto;
	position: relative;
}

/* Slider wrapper */
/* .product-card-horizontal-wrapper {
	overflow: hidden;
	position: relative;
} */

/* Slider track */
/* .product-card-horizontal-slider {
	display: flex;
	gap: var(--card-gap);
	transition: transform 0.5s ease;
	will-change: transform;
} */

/* Individual slide */
/* .product-card-horizontal-slide {
	flex: 0 0 auto;
} */

/* Card styling - horizontal layout */
.product-card-horizontal-card {
	background: #fff;
	border-radius: 12px;
	padding: var(--card-padding);
	/* width: 100%; */
	/* max-width: 300px; */
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
	display: flex;
	align-items: center;
	text-align: left;
	height: 120px;
	/* Fixed height for consistency */
}

/* Image container */
.product-card-horizontal-image {
	flex: 0 0 var(--image-width);
	margin-right: var(--card-gap);
}

.product-card-horizontal-image img {
	width: 100%;
	height: auto;
	border-radius: 8px;
	aspect-ratio: 1/1;
	object-fit: cover;
}

/* Content container */
.product-card-horizontal-content {
	flex: 1;
	overflow: hidden;
}

.product-card-horizontal-content h3 {
	font-size: 14px;
	margin: 0 0 8px 0;
	color: #333;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.product-card-horizontal-stars {
	font-size: 12px;
	color: #ffc107;
	margin-bottom: 6px;
}

.product-card-horizontal-price {
	font-size: 14px;
}

.product-card-horizontal-price .original {
	text-decoration: line-through;
	color: #aaa;
	margin-right: 6px;
	font-size: 12px;
}

.product-card-horizontal-price .highlight {
	color: #c59b00;
	font-weight: bold;
}

/* Navigation buttons */
/* .product-card-horizontal-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 36px;
	height: 36px;
	background: white;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
	border: none;
	z-index: 10;
} */

/* .product-card-horizontal-nav.prev {
	left: 0;
}

.product-card-horizontal-nav.next {
	right: 0;
} */

/* Responsive adjustments */
@media (max-width: 768px) {
	.product-card-horizontal {
		--image-width: 80px;
		--card-padding: 10px;
		--card-gap: 12px;
	}

	/* .product-card-horizontal-wrapper {
		padding: 0 30px;
	} */

	.product-card-horizontal-card {
		margin-left: 5px;
		margin-right: 5px;
		height: 100px;
	}
}

@media (max-width: 480px) {
	.product-card-horizontal {
		--image-width: 70px;
		--card-padding: 8px;
		--card-gap: 10px;
	}

	.product-card-horizontal-content h3 {
		font-size: 13px;
	}

	.product-card-horizontal-nav {
		width: 30px;
		height: 30px;
	}
}

.bes-hover-tabs {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 8px;
	gap: 6px;
	position: absolute;
	bottom: 10px;
	left: 0;
	right: 0;
}

.bes-tab {
	width: 16px;
	height: 4px;
	background-color: #ccc;
	border-radius: 2px;
	transition: background-color 0.3s;
}

.bes-tab.bes-active {
	background-color: #333;
}

.bes-main-image {
	transition: opacity 0.2s ease !important;
}

.product-card {
	position: relative;
	overflow: visible;
}

/* .swiper-slide {
        overflow: visible !important;
        position: relative !important;
    } */

/* .swiper-wrapper {
        overflow: visible !important;
    } */

.product-card {
	position: relative;
	transition: all 0.3s ease;
	height: auto;
	overflow: hidden;
	border: 1px solid #eee;
	border-radius: 8px;
	padding: 15px;
	box-sizing: border-box;
}

.product-card:hover {
	height: auto;
	transform: translateY(-5px);
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
	z-index: 10;
}

/* ↓ add these at the very bottom of that same <style> block: */
/* .swiper-container,
    /* .swiper-wrapper, */
.swiper-slide,
.product-card {
	overflow: visible !important;
}
*/ .spec-section {
	margin-bottom: 10px;
}

.spec-section h4 {
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 5px;
	color: #333;
}

.spec-section ul {
	list-style-type: none;
	padding-left: 0;
	margin: 0;
}

.spec-section li {
	font-size: 12px;
	color: #666;
	margin-bottom: 3px;
}

.share-tooltip a {
	margin: 0 5px;
	color: #333;
	font-size: 14px;
}

.share-tooltip a:hover {
	color: #007bff;
}
.hover-tabs {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 8px;
	gap: 6px;
}

.tab {
	width: 16px;
	height: 4px;
	background-color: #ccc;
	border-radius: 2px;
	transition: background-color 0.3s;
}

.tab.active {
	background-color: #333;
}
/* CSS for Visible Overflow (Y-axis only) */
.custom-slider-container {
	position: relative;
	width: 100%;
	overflow-x: hidden; /* Only hide horizontal overflow */
	overflow-y: visible; /* Allow vertical overflow */
}

.custom-slider-track {
	display: flex;
	gap: 16px;
	transition: transform 0.5s ease;
	will-change: transform;
}

.custom-slide {
	flex: 0 0 auto;
	width: calc(50% - 8px); /* 2 slides on mobile */
}

/* Navigation Buttons */
.custom-slider-prev,
.custom-slider-next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
	background: rgba(255, 255, 255, 0.7);
	border: none;
	border-radius: 50%;
	width: 40px;
	height: 40px;
	font-size: 18px;
	cursor: pointer;
}

.custom-slider-prev {
	left: 10px;
}
.custom-slider-next {
	right: 10px;
}

/* Responsive Breakpoints */
@media (min-width: 768px) {
	.custom-slide {
		width: calc(33.33% - 11px); /* 3 slides */
	}
}

@media (min-width: 1024px) {
	.custom-slide {
		width: calc(25% - 12px); /* 4 slides */
	}
}
.section-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 15px;
	flex-wrap: wrap;
}

.section-header h2 {
	font-weight: bold;
	margin: 0;
	font-size: 1.8rem;
}

.more-products-btn {
	background-color: #5ea0bb;
	color: white;
	border: none;
	border-radius: 20px;
	padding: 10px 20px;
	cursor: pointer;
	font-weight: 600;
	transition: background-color 0.3s ease;
	margin-top: 10px;
}

.more-products-btn:hover {
	background-color: #4a7d93;
}

.laptop-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	justify-content: center;
}

.laptop-card {
	position: relative;
	flex: 1 1 220px;
	max-width: 300px;
	aspect-ratio: 16 / 9;
	border-radius: 10px;
	overflow: hidden;
	cursor: pointer;
	color: white;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	padding: 20px;
	z-index: 0;
	background: transparent;
}

.laptop-card .background {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center center;
	border-radius: 10px;
	transition: transform 0.4s ease;
	z-index: -1;
}

.laptop-card:hover .background {
	transform: scale(1.05);
}

.laptop-title {
	font-weight: bold;
	font-size: 1.25rem;
	margin-bottom: 12px;
	text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
	position: relative;
	z-index: 1;
}

.view-products-btn {
	background-color: white;
	color: black;
	border-radius: 6px;
	padding: 8px 14px;
	width: fit-content;
	font-weight: 600;
	text-decoration: none;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
	transition:
		background-color 0.3s ease,
		color 0.3s ease;
	position: relative;
	z-index: 1;
}

.view-products-btn:hover {
	background-color: #ddd;
	color: #333;
}

@media (max-width: 768px) {
	.laptop-card {
		flex: 1 1 45%;
		max-width: 45%;
	}
}

@media (max-width: 480px) {
	.laptop-card {
		flex: 1 1 100%;
		max-width: 100%;
	}
}
/* Hover effect and expand behavior for product specs */
/* .hover-specs {
    transition: all 0.3s ease;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    position: relative;
  }
  .hover-specs.scroll-enabled {
    overflow-y: auto !important;
  } */
/* Double slider  */
.dual-slider-container {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	padding: 0 20px;
}

.slider-half-container {
	flex: 1 1 calc(50% - 10px);
	min-width: 0; /* Important for flex children with overflow */
}

@media (max-width: 768px) {
	.dual-slider-container {
		flex-direction: column;
	}
	.slider-half-container {
		flex: 1 1 100%;
	}
}
/* Parent CSS  */

:root {
	--cps-primary-color: #2c3e50;
	--cps-secondary-color: #3498db;
	--cps-accent-color: #e74c3c;
	--cps-light-gray: #ecf0f1;
	--cps-dark-gray: #7f8c8d;
	--cps-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	--cps-border-radius: 8px;
	--cps-transition: all 0.3s ease;
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

.text-white {
	--tw-text-opacity: 1;
	color: #ffffff !important;
	font-family: "Poppins" !important;
	font-weight: 500 !important;
}
body {
	font-family: "Lexend Deca", sans-serif;

	background-color: #f6f6f6;
	color: #333;
	line-height: 1.5;
}
.heading {
	font-size: 26px;
	font-weight: 500;
	padding-bottom: 30px;
	color: black;
}
.text-styles {
	font-size: 26px !important;
	font-weight: 500 !important;
}
.text-2xl {
	font-size: 1.5rem;
	line-height: 2rem;
	color: black;
}
.cps-container {
	margin: 0 auto;
	padding: 0 10px;
	width: 100%;
	max-width: 1400px; /* Added for better large screen control */
}
/* Grid layout for sliders */
.cps-sliders-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	padding-left: 68px;
}

@media (min-width: 768px) {
	.cps-sliders-grid {
		grid-template-columns: 1fr 1fr; /* Two columns on tablet/desktop */
		gap: 15px;
	}
}

/* Slider container styles */
.cps-slider-container {
	border-radius: var(--cps-border-radius);
	/* box-shadow: var(--cps-shadow); */
	position: relative;
	width: 99%;
}

/* Full-width slider container (for the 5-product slider) */
.cps-slider-container.full-width {
	grid-column: 1 / -1;
}

.cps-slider-header {
	font-size: 1.2rem;
	font-weight: 600;
	color: black;
	margin-bottom: 12px;
	padding-bottom: 6px;
}

.cps-slider-wrapper {
	position: relative;
	width: 100%;
	padding: 0 8px;
}

.cps-slider {
	display: flex;
	justify-content: center;
	gap: 10px;
	overflow-x: auto;
	scroll-behavior: smooth;
	/* padding-bottom: 10px; */
	width: 100%;
	-webkit-overflow-scrolling: touch;
	scroll-snap-type: x mandatory;
}

.cps-slider::-webkit-scrollbar {
	display: none;
}

/* Base product card styles */
.cps-product-card {
	min-width: 0;
	background: white;
	border-radius: var(--cps-border-radius);
	padding: 12px;
	cursor: pointer;
	transition: var(--cps-transition);
	position: relative;
	scroll-snap-align: start;
	display: block;
	flex-direction: column;
	justify-content: space-between;
}

@media (min-width: 480px) and (max-width: 1024px) {
	.cps-product-card {
		height: 470px;
	}
}


/* @media (min-width: 1280px) and (max-width: 1535px) {
	.cps-product-card {
		height: 500px;
	}
} */

/* @media (min-width: 1536px) {
	.cps-product-card {
		height: 550px;
	}
} */

.cps-slider-container:not(.full-width) .cps-product-card {
	flex: 0 0 calc(50% - 5px); /* Default: 2 products per view */
}

/* Responsive behavior for full-width slider (5 products) */
.cps-slider-container.full-width .cps-product-card {
	flex: 0 0 calc(20% - 8px); /* 5 products on desktop */
}

/* Tablet view adjustments */
@media (max-width: 991px) {
	.cps-slider-container.full-width .cps-product-card {
		flex: 0 0 calc(33.33% - 7px); /* 3 products on tablet */
	}
}

/* Mobile view adjustments */
@media (max-width: 767px) {
	.cps-slider-container:not(.full-width) .cps-product-card,
	.cps-slider-container.full-width .cps-product-card {
		flex: 0 0 calc(50% - 5px) !important;
	}
	.cps-slider-container.full-width {
		max-width: 760px;
	}
	.cps-slider-container {
		width: 57%;
	}
}

@media (max-width: 480px) {
	.brand-grid-container {
		display: flex;
		flex-wrap: wrap;
		gap: 2rem;
		padding: 0rem 6px 2rem 5px !important;
		justify-content: space-between;
	}
	.cps-slider-container {
		width: 99%; /* Full width on mobile */
	}
	.cps-product-card {
		min-width: 0;
		background: white;
		border-radius: var(--cps-border-radius);
		padding: 12px;
		cursor: pointer;
		transition: var(--cps-transition);
		position: relative;
		scroll-snap-align: start;
		height: 550px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		overflow: hidden;
	}
	.slider-style {
		padding-left: 3px !important;
	}
}

/* Product information styles */
.cps-product-basic {
	margin-top: 5px;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;

	line-height: 1.4;
	min-height: calc(1.4em * 2); /* reserve space for 2 lines */

	font-weight: 500;
	margin-bottom: 5px;
	color: var(--cps-primary-color);
	font-size: 15px;

	overflow: hidden;
	overflow-wrap: break-word;
	word-wrap: break-word;
	text-overflow: ellipsis;
}

.cps-product-category {
	font-size: 0.75rem;
	color: var(--cps-dark-gray);
	margin-bottom: 10px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	/* overflow: hidden; */
	height: 2.4em;
}

.cps-product-price {
	font-weight: 700;
	color: #dbae32;
	font-size: 1rem;
}

.cps-product-price del {
	color: var(--cps-dark-gray);
	margin-left: 5px;
	font-size: 0.8em;
}

/* Navigation arrows */
.cps-nav-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: #dbae32;

	color: white;
	border: none;
	border-radius: 50%;
	width: 28px;
	height: 28px;
	cursor: pointer;
	font-size: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--cps-shadow);
	transition: var(--cps-transition);
	z-index: 10;
}

.cps-nav-arrow:hover {
	background: #5da4c7;
	color: white;
	transform: translateY(-50%) scale(1.1);
}

.cps-nav-left {
	left: -4px;
}

.cps-nav-right {
	right: -4px;
}

/* Status badges */
.cps-status-badge {
	position: absolute;
	top: 6px;
	right: 6px;
	padding: 2px 5px;
	border-radius: 2px;
	font-size: 0.6rem;
	font-weight: 600;
	text-transform: uppercase;
}

/* .cps-limited-stock {
    background: #f39c12;
    color: white;
  } */

/* Product image styles */
.cps-product-image {
	position: relative;
	/* overflow: hidden;
    margin-bottom: 10px; */
}

.cps-main-image {
	width: 100%;
	height: auto;
	transition: opacity 0.4s ease;
}

.cps-discount-badge {
	position: absolute;
	top: 10px;
	left: 5px;
	background: #dbae32;
	font-family: "Poppins";
	color: white;
	padding: 3px 8px;
	border-radius: 25px;
	font-size: 12px;
	font-weight: 500;
}

/* Color variants */
.cps-colors {
	display: flex;
	gap: 5px;
	margin: 5px 0;
}

.cps-color-circle {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 1px solid #eee;
}

/* Empty state */
.cps-no-products {
	padding: 20px;
	text-align: center;
	color: var(--cps-dark-gray);
}
/* Remove the existing .cps-extra-info-panel styles and replace with: */
.cps-extra-info-panel {
	position: absolute;
	background: white;
	border-radius: 0 0 var(--cps-border-radius) var(--cps-border-radius);
	padding: 12px;
	box-sizing: border-box;
	width: calc(100% - 24px);
	left: 12px;
	z-index: 100;
	font-size: 0.8rem;
	line-height: 1.4;
	border-top: none;
	margin-top: -1px;
	display: none;
	/* Kept deliberately short (~200px) so the hover panel never covers the sections
	   below it. Spec sheets run ~800px, so they scroll inside this box.
	   height:auto lets short panels shrink instead of always rendering a 200px box. */
	height: auto;
	max-height: 250px;
	overflow-y: auto;
	pointer-events: auto;
	overscroll-behavior: none;
	-ms-overflow-style: none; /* Internet Explorer 10+ */
	scrollbar-width: none; /* Firefox, Safari 18.2+, Chromium 121+ */
}

.button-style {
	color: white;
	font-size: 13px;
	font-weight: 500;
	line-height: 15.6px;
	padding: 15px;
}
.text-styles {
	color: black;
	font-size: 28px;
	font-weight: 500;
	line-height: 28px;
	padding-left: 12px;
}
/* Add this to ensure proper positioning context */
.cps-product-card {
	position: relative;
}
.cps-action-icons {
	position: absolute;
	top: -4px;
	right: -2px;
	background: white;
	border-radius: 12px;
	box-shadow: var(--cps-shadow);
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 15px;
	z-index: 10;
	opacity: 0;
	transform: translateY(-10px);
	transition:
		opacity 0.3s ease,
		transform 0.3s ease;
}

.cps-product-card:hover .cps-action-icons {
	opacity: 1;
	transform: translateY(0);
}

.cps-action-icons span {
	color: #333;
	font-size: 18px;
	cursor: pointer;
	transition: color 0.2s ease;
}

.cps-action-icons span:hover {
	color: #dbae32;
}
/* for first fancy part */
/* Import Google Fonts */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap");

/* Container for phone cards */
.cps-phones-container {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 20px;
	padding: 30px 20px 20px 90px;
	background-color: #f5f5f5;
}

/* Card base styles for phone categories */
.cps-affordable-phone-card,
.cps-latest-phone-card {
	position: relative;
	width: 100%;
	max-width: 700px;
	height: 300px;
	border-radius: 15px;
	overflow: hidden;
	cursor: pointer;
	flex: 1 1 45%;
	transition: transform 0.3s ease;
}

/* Background image overlay with brightness */
.cps-affordable-phone-card::before,
.cps-latest-phone-card::before {
	content: "";
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	filter: brightness(0.6);
	transition: transform 0.3s ease;
	z-index: 0;
}

/* Zoom effect on hover */
.cps-affordable-phone-card:hover::before,
.cps-latest-phone-card:hover::before {
	transform: scale(1.1);
}

/* Highlight border on hover */
.cps-affordable-phone-card::after,
.cps-latest-phone-card::after {
	content: "";
	position: absolute;
	inset: 20px;
	border: 5px solid rgba(255, 255, 255, 0.41);
	border-radius: 10px;
	opacity: 0;
	transition: opacity 0.3s ease;
	z-index: 1;
}
.cps-affordable-phone-card:hover::after,
.cps-latest-phone-card:hover::after {
	opacity: 1;
}

/* Content overlay on cards */
.cps-affordable-phone-content,
.cps-latest-phone-content {
	position: absolute;
	top: 71%;
	left: 5%;
	transform: translateY(-50%);
	color: white;
	z-index: 2;
}

/* Titles inside cards */
.cps-affordable-phone-content h2,
.cps-latest-phone-content h2 {
	font-size: 28px;
	font-weight: 600;
	margin-bottom: 10px;
	font-family: "Poppins", sans-serif;
}

/* Shop buttons style */
.cps-affordable-shop-button,
.cps-latest-shop-button {
	background-color: #dbae32;
	color: white;
	border: none;
	padding: 10px 20px;
	font-size: 13px;
	font-weight: bold;
	border-radius: 5px;
	cursor: pointer;
	transition: box-shadow 0.3s ease;
	font-family: "Poppins", sans-serif;
}
.cps-affordable-shop-button:hover,
.cps-latest-shop-button:hover {
	box-shadow: inset 0 0 200px rgba(0, 0, 0, 0.1);
}

/* Responsive adjustments for tablets and mobile */
@media (max-width: 768px) {
	.cps-affordable-phone-card,
	.cps-latest-phone-card {
		flex: 1 1 100%;
	}

	.cps-sliders-grid {
		display: grid;
		grid-template-columns: 1fr;
		gap: 20px;
		padding-left: 0px;
	}
	.cps-phones-container {
		padding: 1px;
		padding-top: 20px;
	}
}
/* Dual Slider Specific Styles */
.cps-dual-sliders {
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	padding-left: 90px;
	margin: 30px 0;
}

.cps-dual-sliders .cps-slider-container {
	position: relative;
	width: 100%;
	padding: 0;
	border-radius: 0;
	box-shadow: none;
}

.cps-dual-sliders .cps-slider-wrapper {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
}

.cps-dual-sliders .cps-slider {
	overflow: hidden;
	width: 100%;
	scroll-behavior: auto;
	display: flex;
}

.cps-dual-sliders .cps-slider-track {
	display: flex;
	transition: transform 0.5s ease-out;
	will-change: transform;
	/* Let JavaScript handle the gap */
}

.cps-dual-sliders .cps-slide {
	padding: 0;
	box-sizing: border-box;
	/* Let JavaScript control the flex properties for proper cycling */
}

.cps-dual-sliders .cps-product-card {
	height: auto;
	min-width: 0;
	flex-direction: row;
	padding: 12px;
	height: 150px;
}

.cps-dual-sliders .cps-nav-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: white;
	color: #2c3e50;
	border: none;
	border-radius: 50%;
	width: 32px;
	height: 32px;
	cursor: pointer;
	font-size: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	transition: all 0.3s ease;
	z-index: 10;
	border: 1px solid #eee;
}

.cps-dual-sliders .cps-nav-arrow:hover {
	background: #3498db;
	color: white;
	transform: translateY(-50%) scale(1.1);
}

.cps-dual-sliders .cps-nav-left {
	left: 4px;
}

.cps-dual-sliders .cps-nav-right {
	right: 4px;
}

@media (max-width: 768px) {
	.cps-dual-sliders {
		padding-left: 1px;
	}

	.cps-dual-sliders .cps-slide {
		/* Let JavaScript control the flex properties */
	}

	.cps-dual-sliders .cps-nav-left {
		left: 4px;
	}

	.cps-dual-sliders .cps-nav-right {
		right: -8px;
	}
}
/* Brand grid styles */
.brand-grid-container {
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
	padding: 2rem 1rem 2rem 83px;
	justify-content: space-between;
}
.brand-grid-heading {
	font-weight: bold;
	font-size: 1.5rem;
}
.brand-grid-column {
	flex: 1 1 22%;
	min-width: 250px;
}
.brand-grid-title {
	font-size: 1.5rem;
	font-weight: bold;
	margin-bottom: 1rem;
}
.brand-grid-product {
	display: flex;
	align-items: center;
	margin-bottom: 1rem;
	border-bottom: 1px solid #e0e0e0;
	padding-bottom: 1rem;
}
.brand-grid-product img {
	width: 50px;
	height: auto;
	margin-right: 1rem;
}
.brand-grid-details {
	flex: 1;
}
.brand-grid-name {
	font-size: 14px;
	font-weight: 400;
}
.brand-grid-price {
	color: #dbae32;
	font-weight: 500;
	font-size: 15px;
}
.brand-grid-old-price {
	text-decoration: line-through;
	color: #aaa;
	margin-right: 0.5rem;
}
.brand-grid-more-btn {
	background-color: #55a0b8;
	color: white;
	border: none;
	padding: 0.6rem 1rem;
	border-radius: 25px;
	cursor: pointer;
	transition: background 0.3s ease;
	margin-top: 1rem;
}
.brand-grid-more-btn:hover {
	background-color: #dbae32;
}

/* Responsive brand grid columns */
@media (max-width: 1024px) {
	.brand-grid-column {
		flex: 1 1 45%;
	}
}
@media (max-width: 600px) {
	.brand-grid-column {
		flex: 1 1 100%;
	}
}

/* Specific background images */
.cps-affordable-phone-card::before {
	background-image: url('{{ "Latest-Mobile-Phones-1.jpg" | asset_url }}');
}
.cps-latest-phone-card::before {
	background-image: url('{{ "Latest-Mobile-Phones-1.jpg" | asset_url }}');
}
/* ─── Brand slider look & feel ─────────────────── */
.brand-slider {
	margin-inline: auto;
	padding: 1.25rem 0; /* vertical breathing room */
}

.brand-card {
	text-align: center;
	width: 100%; /* BrandSlider sets flex‑basis */
	cursor: pointer;
	user-select: none;
}

.brand-thumb {
	width: 86px;
	height: 86px;
	margin-inline: auto;
	border-radius: 12px;
	background: #f0f0f0;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.brand-thumb img {
	max-width: 72px;
	max-height: 72px;
	object-fit: contain;
}

.brand-name {
	font-size: 1.05rem;
	font-weight: 600;
	margin-top: 0.75rem;
	color: #222;
}

.brand-count {
	font-size: 0.9rem;
	margin-top: 0.25rem;
	color: #6b7280; /* neutral‑500 */
}

/* nav buttons already have global styles – just tweak size */
.brand-slider .cps-nav-left,
.brand-slider .cps-nav-right {
	font-size: 1.75rem;
	line-height: 1;
}

/* Brand Category Slider */

/* Core Slider Styles */
/* .brand-slider-container {
	max-width: 1220px;
	margin: 0 126px;
	margin-left: 92px;
	padding: 20px;
	background-color: white;
	border-radius: 25px;
	margin-bottom: 30px;
	padding-left: 146px;
} */

.brand-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
}

.brand-header h2 {
	margin: 0;
	font-size: 24px;
}

.view-all {
	color: #4795a6;
	text-decoration: none;
	font-weight: 500;
}

.brand-slider-wrapper {
	position: relative;
}

.brand-slider {
	display: flex;
	gap: 30px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding: 10px 0;
	-webkit-overflow-scrolling: touch;
}

.brand-slide {
	scroll-snap-align: start;
	flex: 0 0 auto;
	text-align: center;
	width: 120px;
}

.brand-logo {
	width: 60px;
	height: 60px;
	margin: 0 auto 10px;
	border-radius: 12px;
	background: #f5f5f5;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.brand-logo img {
	max-width: 96%;
	width: 56px;
	max-height: 124%;
	object-fit: contain;
}

.placeholder-logo {
	font-size: 32px;
	font-weight: bold;
	color: #ccc;
}

.brand-name {
	font-weight: 400;
	font-size: 14px;
	margin-bottom: 5px;
}

.product-count {
	color: #666;
	font-size: 13px;
}

.slider-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	background: white;
	border: none;
	border-radius: 50%;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
	cursor: pointer;
	z-index: 2;
	display: none;
}

.slider-nav.prev {
	left: -20px;
}

.slider-nav.next {
	right: -20px;
}

/* Device-specific adjustments */
[data-device="mobile"] .brand-slide {
	width: calc(50% - 15px);
}

[data-device="tablet"] .brand-slide {
	width: calc(33.33% - 20px);
}

/* Show nav buttons when slider overflows */
.brand-slider-container:hover .slider-nav {
	display: block;
}

/* Hide scrollbar */
.brand-slider::-webkit-scrollbar {
	display: none;
}
.brand-slider {
	-ms-overflow-style: none;
	scrollbar-width: none;
}

.no-scroll {
	-ms-overflow-style: none;
	scrollbar-width: none;
	overflow: auto;
}
/* Add this to your CSS - it will only affect the mobile slider */
#cps-productSlider-mobile {
	display: flex;
	gap: 20px;
}

#cps-productSlider-mobile .cps-slide {
	scroll-snap-align: start;
	flex-shrink: 0;
}

@media (max-width: 767px) {
	#cps-productSlider-mobile .cps-slide {
		flex: 0 0 calc(50% - 11.25px) !important; /* 4 cards on mobile */
		min-width: calc(50% - 11.25px) !important;
	}
}

@media (min-width: 768px) and (max-width: 1023px) {
	#cps-productSlider-mobile .cps-slide {
		flex: 0 0 calc(50% - 7.5px) !important; /* 2 cards on tablet */
		min-width: calc(50% - 7.5px) !important;
	}
}

@media (min-width: 1024px) {
	#cps-productSlider-mobile .cps-slide {
		flex: 0 0 calc(25% - 12px) !important; /* 5 cards on desktop */
		min-width: calc(25% - 12px) !important;
	}
}
/* Add this to your CSS - it will only affect the accessories slider */
.cps-slider-accessories {
	display: flex;
	gap: 15px;
}

.cps-slider-accessories .cps-slide {
	scroll-snap-align: start;
	flex-shrink: 0;
}

@media (max-width: 767px) {
	.cps-slider-accessories .cps-slide {
		flex: 0 0 calc(50% - 11.25px) !important; /* 4 cards on mobile */
		min-width: calc(50% - 11.25px) !important;
	}
	/* .brand-slider-container {
		max-width: 1220px;
		/* margin: 0 126px; */
		margin-left: 0px;
		padding: 20px;
		background-color: white;
		border-radius: 25px;
		/* padding-left: 146px; */
	} */
}

@media (min-width: 768px) and (max-width: 1023px) {
	.cps-slider-accessories .cps-slide {
		flex: 0 0 calc(50% - 6.5px) !important; /* 2 cards on tablet */
		min-width: calc(50% - 7.5px) !important;
	}
}

@media (min-width: 1024px) {
	.cps-slider-accessories .cps-slide {
		flex: 0 0 calc(25% - 12px) !important; /* 5 cards on desktop */
		min-width: calc(25% - 12px) !important;
	}
}
/* About-Us-page*/
@import url("https://fonts.googleapis.com/css2?family=Lexend+Deca&display=swap");

* {
	font-family: "Lexend Deca", sans-serif;
}
.md\:text-base {
	font-size: 15px;
	line-height: 1.5rem;
}
.h-\[550px\] {
	height: 420px;
}
.image-style {
	height: 3.5rem;
	width: 3.5rem;
}
.uppercase {
	text-transform: capitalize;
}
.text-lg {
	font-size: 16px;
	line-height: 1.75rem;
	font-weight: 400;
}
.shadow-lg {
	--tw-shadow: 0 0 #0000;
	--tw-shadow-colored: 0 0 #0000;
	box-shadow: none !important;
}

.shadow-md {
	--tw-shadow: 0 0 #0000;
	--tw-shadow-colored: 0 0 #0000;
	box-shadow: none !important;
}

.h-64 {
	height: 308px;
}
.py-12 {
	padding-top: 30px;
	padding-bottom: 1px;
}
.py-16 {
	padding-top: 30px;
	padding-bottom: 0rem;
}
.max-w-3xl {
	max-width: 67rem;
}
/* .w-6 {
    width: 3.5rem;
}
.h-6 {
    height: 3.5rem;
} */
.font-bold {
	font-weight: 500 !important;
	color: black;
}
.md\:text-3xl {
	font-size: 28px;
	line-height: 2.25rem;
	margin-top: 15px;
	margin-bottom: 15px;
}
.text-gray-600 {
	--tw-text-opacity: 1;
	color: #33333382;
	font-size: 15px;
	font-weight: 500;
}
.hover\:bg-amber-500:hover {
	--tw-bg-opacity: 1;
	background-color: #dbae32;
}
.text-gray-200 {
	--tw-text-opacity: 1;
	color: rgb(255 255 255);
	font-weight: 400;
}
.bg-amber-100 {
	--tw-bg-opacity: 1;
	background-color: rgb(255 255 255);
	height: 5rem;
	width: 5rem;
}
.text-white {
	--tw-text-opacity: 1;
	color: #ffffff;
	font-family: "Poppins";
	font-weight: 400;
	font-size: 13px;
}
.hover\:bg-amber-600:hover {
	--tw-bg-opacity: 1;
	background-color: #dbae32;
}

/* .w-12 {
    width: 100px ;
    height: 100px;
} */
.text-amber-400 {
	--tw-text-opacity: 1;
	color: #dbae32;
	font-size: 16px;
	font-weight: 500;
}
.bg-black {
	--tw-bg-opacity: 1;
	background-color: #00000070;
}
.info {
	font-weight: 400;
	color: #a5a5a5;
	text-align: center;
	font-size: 15px;
}
.pinfo {
	font-weight: 400;
	color: #a5a5a5;
	text-align: center;
	font-size: 15px;
}

.bg-gray-100 {
	--tw-bg-opacity: 1;
	background-color: #edf7ff;
	width: 25%;
}
.font-bold {
	font-weight: 700;
	color: black;
}
.texttyu {
	color: black;
	font-weight: 500;
	font-size: 28px;
	margin-top: 15px;
	margin-bottom: 15px;
}
.banner-heading {
	color: white !important;
	color: white !important;
	font-size: 28px;
	font-weight: 500;
	line-height: 34px;
}

/* Custom overlay for banner images */
.custom-overlay {
	background-color: rgb(0 0 0 / 57%) !important;
}

/* Perfect circle for service icons */
.service-icon {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #f1f1f1;
	margin-right: 1rem;
	flex-shrink: 0;
}

.service-icon i {
	font-size: 1.5rem;
	color: #f59e0b;
}

.service-icon img {
	width: 51px;
	height: 51px;
	object-fit: contain;
}

/* Banner shape */
.banner-shape {
	border-radius: 16px;
	overflow: hidden;
}

/* Mobile styles */
@media (max-width: 767px) {
	.new-text {
		font-weight: 500;
		font-size: 18px !important;
	}
	.info {
		font-weight: 400;
		color: #a5a5a5;
		text-align: center;
		font-size: 14px;
	}
	.pinfo {
		font-weight: 400;
		color: #a5a5a5;
		text-align: center;
		font-size: 14px;
	}
	.md\:text-3xl {
		font-size: 20px;
		line-height: 2.25rem;
	}
	.text-sm {
		font-size: 13px;
		line-height: 1.25rem;
	}
	.text-lg {
		font-size: 13px;
		line-height: 1.75rem;
	}
	.text-gray-600 {
		--tw-text-opacity: 1;
		color: #33333382;
		font-size: 14px;
		font-weight: 500;
	}
	.service-icon i,
	.service-icon img {
		font-size: 1.25rem;
		width: 51px;
		height: 51px;
	}
	.service-icon {
		width: 80px;
		height: 80px;
	}
	.banner-heading {
		font-size: 20px !important;
	}
	.h-\[550px\] {
		height: 645px;
	}
	.px-4 {
		padding-left: 1rem;
		padding-right: 17px;
	}
	.banner-subheading {
		font-size: 13px !important;
	}

	.banner-content {
		padding: 1rem !important;
	}

	.texttyu {
		font-size: 20px !important;
		line-height: 32px;
	}

	.bg-gray-100 {
		width: 100% !important;
	}

	.grid-cols-1 {
		grid-template-columns: 1fr !important;
		padding: 22px;
	}

	/* Smaller perfect circles for mobile */
	/* .service-icon {
      width: 50px;
      height: 50px;
    } */

	/* .service-icon i,
    .service-icon img {
      font-size: 1.25rem;
      width: 20px;
      height: 20px;
    } */
}
@media (min-width: 1024px) {
	.lg\:px-16 {
		padding-left: 4rem !important;
		padding-right: 0rem !important;
	}
}
@media (min-width: 768px) {
	.md\:px-8 {
		padding-left: 2rem !important;
		padding-right: 0rem !important;
		margin-left: 58px;
	}
}

/* correction for the samsung and related section  */
.cps-sliders-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	width: 100%;
	padding-left: 0; /* Remove any specific padding */
}
/* 2. Equal Width Slider Containers */
.cps-slider-container {
	width: 99%;
	min-width: 0; /* Crucial for grid/flex children */
	margin: 0;
}
/* 8. Remove any conflicting media queries */
@media (max-width: 767px) {
	.cps-slider-container,
	.cps-slider,
	.cps-product-card {
		width: 100%;
		flex-basis: auto !important;
	}
}

/* .swiper-slide{
  margin:0px !important;
} */
.related-style {
	background: #edf7ff;
	margin-left: 76px;
	padding: 30px;
	width: 1176px;
	border-radius: 15px;
}
.shopify-block.shopify-app-block:has(> [data-app="trustoo"]) {
	width: 1247px !important;
	margin-left: 84px;
}
#noreviews-wrapper {
	padding: 40px 30px;
	width: 100%;
	border-radius: 15px;
}
#noreviews-wrapper {
	clear: both;
	margin: 30px auto;
}
@media (min-width: 1441px) and (max-width: 1600px) {
	#vstar-noreviews {
		max-width: 1316px;
		min-width: 500px;
		position: relative;
	}
	.shopify-block.shopify-app-block:has(> [data-app="trustoo"]) {
		width: 1405px !important;
		margin-left: 84px;
	}
	.footer-links li {
		color: #848484;
		font-size: 14px;
		margin-bottom: 25px;
		transition: all 0.3s ease;
	}
}
.shopify-block.shopify-app-block:has(> [data-app="trustoo"]) {
	width: 1247px !important;
	margin-left: 84px;
}

#noreviews-wrapper {
	padding: 40px 30px;
	width: 100%;
	border-radius: 15px;
	clear: both;
	margin: 30px auto;
}

/* ---------- Mobile View (up to 768px) ---------- */
@media (max-width: 768px) {
	.shopify-block.shopify-app-block:has(> [data-app="trustoo"]) {
		width: 100% !important; /* Full width */
		margin-left: 0 !important; /* Center align */
	}

	#noreviews-wrapper {
		padding: 20px 15px; /* Reduce padding */
		margin: 15px auto; /* Smaller margin */
		border-radius: 10px; /* Slightly smaller radius */
	}
}

/* ---------- Small Mobile View (up to 480px) ---------- */
@media (max-width: 480px) {
	#noreviews-wrapper {
		padding: 15px 10px;
		margin-top: 80px;
		border-radius: 8px;
	}
	.text-styles {
		font-size: 20px !important;
		font-weight: 500 !important;
	}
}

@media (min-width: 1025px) {
	.bes-tabs,
	.tabs {
		justify-content: center;
	}
}

/* BuyElectro category/sub-category responsive guardrails.
   Keep authored slider grouping intact while preventing overflow. */
.cps-container,
.double-slider.cps-container {
	box-sizing: border-box;
	width: min(100%, 1400px) !important;
	max-width: 1400px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: clamp(12px, 2vw, 24px) !important;
	padding-right: clamp(12px, 2vw, 24px) !important;
}

.cps-phones-container,
/* .brand-slider-container, */
.cps-sliders-grid,
.cps-dual-sliders {
	box-sizing: border-box;
	max-width: 100%;
}

.cps-phones-container {
	width: 100%;
	margin-left: auto !important;
	margin-right: auto !important;
	padding: clamp(16px, 2.5vw, 30px) clamp(12px, 2vw, 24px) !important;
	gap: clamp(14px, 2vw, 20px);
}

.cps-phones-container > [class*="-card"] {
	min-width: min(100%, 300px);
}

/* .brand-slider-container {
	width: 100% !important;
	max-width: 1220px !important;
	margin: 24px auto 30px !important;
	padding: clamp(14px, 2vw, 20px) !important;
	border-radius: 18px;
	overflow: hidden;
} */

.brand-slider-wrapper {
	min-width: 0;
}

.brand-slider {
	justify-content: flex-start;
	gap: clamp(14px, 2vw, 30px);
	padding-inline: 4px;
}

.brand-slide {
	width: clamp(92px, 10vw, 120px);
	flex: 0 0 clamp(92px, 10vw, 120px);
}

.cps-sliders-grid {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	gap: clamp(16px, 2vw, 24px) !important;
	width: 100% !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.cps-slider-container {
	width: 100% !important;
	min-width: 0;
}

.cps-slider-container.full-width,
.slider-style.cps-slider-container.full-width {
	grid-column: 1 / -1;
}

.cps-slider-wrapper {
	min-width: 0;
	padding-left: 34px;
	padding-right: 34px;
}

.cps-slider {
	justify-content: flex-start;
	gap: 10px;
	min-width: 0;
	overscroll-behavior-inline: contain;
}

.cps-slider-track {
	min-width: 0;
}

.cps-slider-container:not(.full-width) .cps-product-card {
	flex: 0 0 calc(50% - 5px);
}

.cps-slider-container.full-width .cps-product-card {
	flex: 0 0 calc(20% - 8px);
}

.cps-slide {
	min-width: 0;
}

.cps-nav-left {
	left: 4px;
}

.cps-nav-right {
	right: 4px;
}

.text-styles,
.text-2xl {
	overflow-wrap: anywhere;
}

.button-style,
.custom-btn,
.cps-slider-container a[class*="rounded-full"] {
	white-space: nowrap;
}

@media (max-width: 1024px) {
	.cps-container,
	.double-slider.cps-container {
		width: 100% !important;
		padding-left: 16px !important;
		padding-right: 16px !important;
	}

	.cps-sliders-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	.cps-slider-container.full-width .cps-product-card {
		flex-basis: calc(33.333% - 7px);
	}
}

@media (max-width: 767px) {
	.cps-container,
	.double-slider.cps-container {
		padding-left: 12px !important;
		padding-right: 12px !important;
	}

	.cps-phones-container {
		padding: 16px 0 !important;
	}

	.cps-phones-container > [class*="-card"] {
		flex-basis: 100% !important;
		min-width: 0;
		height: clamp(210px, 58vw, 300px);
	}

	.cps-affordable-phone-content,
	.cps-latest-phone-content,
	.cps-best-for-music-content,
	.cps-buyelectro-choice-wearables-content {
		max-width: calc(100% - 32px);
	}

	.cps-affordable-phone-content h2,
	.cps-latest-phone-content h2,
	.cps-best-for-music-content h2,
	.cps-buyelectro-choice-wearables-content h2 {
		font-size: clamp(20px, 6vw, 24px) !important;
		line-height: 1.2;
	}

	/* .brand-slider-container {
		margin-top: 16px !important;
		margin-bottom: 20px !important;
		border-radius: 14px;
	} */

	.brand-slide {
		width: 88px;
		flex-basis: 88px;
	}

	.brand-logo {
		width: 54px;
		height: 54px;
	}

	.brand-name {
		font-size: 12px;
		line-height: 1.25;
		overflow-wrap: anywhere;
	}

	.cps-sliders-grid {
		grid-template-columns: 1fr !important;
		gap: 20px !important;
	}

	.cps-slider-wrapper {
		padding-left: 30px;
		padding-right: 30px;
	}

	.cps-slider-container:not(.full-width) .cps-product-card,
	.cps-slider-container.full-width .cps-product-card {
		flex: 0 0 calc(50% - 5px) !important;
		width: auto !important;
	}

	.cps-product-card {
		height: auto;
		min-height: 440px;
	}

	.cps-nav-arrow {
		width: 26px;
		height: 26px;
	}
}

@media (max-width: 480px) {
	.cps-slider-wrapper {
		padding-left: 28px;
		padding-right: 28px;
	}

	.cps-slider-container:not(.full-width) .cps-product-card,
	.cps-slider-container.full-width .cps-product-card {
		flex-basis: calc(50% - 5px) !important;
	}

	.cps-product-card {
		min-height: 500px;
		padding: 10px;
	}

	.button-style,
	.custom-btn,
	.cps-slider-container a[class*="rounded-full"] {
		padding: 6px 10px !important;
		font-size: 12px !important;
	}
}

/* ==========================================================================
   Category / sub-category left offset.
   Every category & sub-category section uses schema class "brand-slider-section".
   The homepage (category.liquid) offsets its own content via
   `.maian-content-area lg:ml-[55px]`; these pages had no offset, so their content
   sat under the fixed sidebar. Match the homepage's 55px left offset here.
   (The homepage section itself has NO brand-slider-section class, so it is unaffected.)
   ========================================================================== */
@media (min-width: 1024px) {
	.brand-slider-section {
		/* Match the fixed icon rail exactly (60px) rather than the old 55px. With 55 the
		   content cleared the rail by only 19px on the left while leaving 24px on the
		   right, so nothing on the page was symmetric. At 60 the blocks inside sit 24px
		   from the rail and 24px from the window edge — even gutters. */
		margin-left: 60px;
	}


	/* NOTE: there used to be a rule here pinning
	     .brand-slider-section > .cps-container { margin-left: 0 !important }
	   to keep these containers hard against the left offset. It defeated the
	   `margin-left/right: auto !important` centring below, so once the sections'
	   hardcoded margin hacks were removed the content still sat left of centre.
	   The container is capped by max-width, so auto margins now centre it inside the
	   rail offset — which is what "centred" should mean on these pages. */
}

/* ==========================================================================
   Consistent slider chrome (matches category.liquid).
   swiper-bundle.css loads AFTER theme.css, so !important is required to override
   Swiper's default blue arrows. Applies the gold (#dbae32) circle nav buttons to
   every Swiper slider, and the white rounded brand-slider container, site-wide.
   ========================================================================== */
.swiper-button-prev,
.swiper-button-next {
	position: absolute !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	margin-top: 0 !important;
	z-index: 10;
	cursor: pointer;
	width: 40px !important;
	height: 40px !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	background-color: #dbae32 !important;
	color: #ffffff !important;
	border-radius: 50% !important;
}

.swiper-button-prev::after,
.swiper-button-next::after {
	font-size: 18px !important;
	font-weight: 700;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
	background-color: #4795a6 !important;
	color: #ffffff !important;
}

/* ==========================================================================
   Arrow states. The `display: flex !important` above (needed to beat Swiper's
   default arrow styling) also beat Swiper's own `.swiper-button-lock{display:none}`
   and `.swiper-button-disabled{opacity:.35}` — so every slider showed two solid,
   fully-opaque arrows even when there was nothing to scroll to. Re-assert both
   states at matching specificity.

   - lock     = slides all fit, nothing to scroll at all -> keep BOTH arrows visible
                but faded and inert, so the row still reads as a slider that has run
                out of products rather than one that lost its controls.
   - disabled = scrollable, but already at the first/last slide -> fade that one arrow

   Swiper ships `.swiper-button-lock { display: none }`, which would hide the locked
   arrows entirely — override it back to visible. Swiper adds swiper-button-disabled
   alongside swiper-button-lock, so the disabled rule below supplies the fade.
   ========================================================================== */
.swiper-button-prev.swiper-button-lock,
.swiper-button-next.swiper-button-lock {
	display: flex !important;
}

.swiper-button-prev.swiper-button-disabled,
.swiper-button-next.swiper-button-disabled {
	opacity: 0.35 !important;
	cursor: auto !important;
	pointer-events: none !important;
}

/* Keep the faded arrow faded on hover — without this the hover rule above
   repaints a disabled arrow as if it were live. */
.swiper-button-next.swiper-button-disabled:hover,
.swiper-button-prev.swiper-button-disabled:hover {
	background-color: #dbae32 !important;
}

/* White rounded brand-slider container on every category / sub-category page
   (matches the mobile-phones page). Homepage has no brand-slider-container. */
.brand-slider-container {
	/* max-width: 1220px; */
  margin:0 auto;
  width:89%;
  
	/* margin-right: auto; */
	padding: 20px;
	background-color: #ffffff;
	border-radius: 25px;
	margin-top: 15px;
  margin-bottom: 30px;
}

/* The brand carousel was the one block that did not line up: `width: 89%` above made
   it ~74px narrower per side than the banners and slider grids. Its parent
   (.cps-container) already supplies the shared 24px inset, so the carousel just needs
   to fill that parent — any margin of its own doubles the gutter and breaks the edge.
   Must come AFTER the base rule above to win: same specificity, so source order decides.
   Desktop only; the 89% is left alone on mobile, where there is no rail offset. */
@media (min-width: 1024px) {
	.brand-slider-container {
		width: auto;
		margin-left: 0;
		margin-right: 0;
	}

	/* Two different structures exist: on Mobile Phones the carousel sits inside a
	   .cps-container (which supplies the shared max-width + padding), but on Wearables
	   and friends it is a DIRECT child of the section with no wrapper — so the rule
	   above left it full-bleed while the banners beside it were inset.
	   Reproduce .cps-container's content box here so both structures line up:
	   the 1400px cap minus that container's own horizontal padding. */
	.brand-slider-section > .brand-slider-container {
		max-width: calc(1400px - 2 * clamp(12px, 2vw, 24px));
		margin-left: auto;
		margin-right: auto;
	}
}

/* When a brand slider has too few tiles to scroll, they sat hard left and left a large
   void on the right — e.g. Gaming Consoles: 4 tiles = 525px of content inside a 1207px
   track, so 682px of empty white framed by two faded arrows.
   Centre the tiles in that case ONLY. Swiper marks its nav `.swiper-button-lock` when
   nothing can scroll, which is the reliable signal for "everything fits".
   This must never apply while the track overflows: Swiper positions slides with a
   transform, and justify-content on the wrapper fights it and mis-places every slide —
   which is why a blanket justify-content on .swiper-wrapper had to be reverted before. */


/* Swiper writes spaceBetween as an inline margin-right on every slide, including the
   last one — which throws the centring off by exactly that gap. Drop it on the final
   tile (only while locked); !important is required to beat the inline style. */
.brand-slider-container:has(.swiper-button-lock) .swiper-slide:last-child {
	margin-right: 0 !important;
}

.brand-slider-container .swiper {
	width: 92%;
}

/* Brand slider nav buttons: sit outside the swiper but inside the white container */
.brand-slider-container {
	position: relative;
}
.brand-slider-container .swiper-button-prev {
	left: 25px;
}
.brand-slider-container .swiper-button-next {
	right: 25px;
}

/* Swiper v11 injects an <svg class="swiper-navigation-icon"> into the nav buttons,
   and the ::after chevron also renders — that's the "double arrow". Hide the injected
   SVG and keep the single ::after chevron (the intended gold-circle look). */
.swiper-button-prev .swiper-navigation-icon,
.swiper-button-next .swiper-navigation-icon,
.swiper-navigation-icon {
	display: none !important;
}

/* A lone full-width product slider sometimes sits inside a 2-column .cps-sliders-grid,
   which squeezes it into one column (half width) so its 5 cards get cut off / shrunk.
   When a section is the ONLY child, span the full grid. Two-up pairs (two sections in
   one grid) are unaffected and stay side-by-side. */
.cps-sliders-grid > .bes-product-slider:only-child {
	grid-column: 1 / -1;
}

/* ==========================================================================
   Mobile & tablet responsiveness for the converted Swiper sliders.
   - Containers fill their cell on mobile + tablet.
   - On PHONES, drop the CSS grid entirely so each slider is a normal full-width
     block (one slider per row) exactly like category.liquid. Inside a grid track
     Swiper was measuring slide width as 0 -> blank cards. As a block it sizes right.
   - Tablets keep the two-column grid (Samsung | Apple side-by-side).
   ========================================================================== */
@media (max-width: 1024px) {
	.cps-slider-container,
	.cps-slider-container.full-width,
	.slider-style.cps-slider-container.full-width {
		width: 100% !important;
		max-width: 100% !important;
	}
}

@media (max-width: 767px) {
	.cps-sliders-grid {
		display: block !important;
	}
	.cps-sliders-grid > * {
		width: 100% !important;
		max-width: 100% !important;
		margin-bottom: 24px;
	}
}

/* ==========================================================================
   Dual horizontal sliders (POCO / Sparx style): their wrapper reuses .cps-product-card
   and the Swiper containers, which carry the tall fixed height meant for VERTICAL
   product cards. That left a big empty white box under the short (120px) horizontal
   card. Size every part of the dual slider to its content.
   ========================================================================== */
.cps-dual-sliders .cps-product-card,
.product-card-horizontal .cps-product-card,
.product-card-horizontal,
.product-card-horizontal .swiper,
.product-card-horizontal .swiper > div,
.product-card-horizontal .swiper-wrapper,
.product-card-horizontal .swiper-slide {
	height: auto !important;
	min-height: 0 !important;
}

/* keep the dual-slider card itself at its intended compact size */
.product-card-horizontal .product-card-horizontal-card {
	height: 120px;
}

/* ==========================================================================
   Dual horizontal slider (POCO/Sparx) nav arrows: anchor them to the slider's own
   clipping box (the init target) instead of the overflow-visible parent so both
   arrows sit fully inside the card, shrink them for the compact 120px card, and
   layer above the product content.
   ========================================================================== */
.product-card-horizontal .swiper > .overflow-hidden {
	position: relative;
}
.product-card-horizontal .swiper-button-prev,
.product-card-horizontal .swiper-button-next {
	width: 34px !important;
	height: 34px !important;
	z-index: 20 !important;
	margin-top: 0 !important;
}
.product-card-horizontal .swiper-button-prev {
	left: 4px !important;
}
.product-card-horizontal .swiper-button-next {
	right: 4px !important;
}
.product-card-horizontal .swiper-button-prev::after,
.product-card-horizontal .swiper-button-next::after {
	font-size: 15px !important;
}

/* ==========================================================================
   Product-card image + text sizing — copied from mobile-phone.liquid's local <style>
   to global so every category/sub-category page renders cards exactly like it.
   ========================================================================== */
.cps-product-image {
	aspect-ratio: 1 / 1;
	width: 100%;
}
.cps-product-image img,
.cps-product-image .main-image,
.cps-product-image .cps-main-image {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
/* Product title: allow TWO lines, but always occupy exactly two lines' worth of space
   so every card stays the same height regardless of title length.

   This rule used to force a single line (`white-space: nowrap` + `display: block`),
   which silently defeated the -webkit-line-clamp declared earlier in this file:
   `display: block` disables the -webkit-box formatting that line-clamp requires.

   `height` (not `min-height`) is what keeps card heights identical — a one-line title
   still reserves both lines, so image, price and buttons stay on a common baseline
   across every card in a row. */
.cps-product-basic {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	white-space: normal;
	width: 100%;
	line-height: 1.4;
	height: calc(1.4em * 2);
}