/* ==========================================================================
   STUDENT SAARTHI — CLEAN SHOP PAGE
   File: assets/css/shop.css
   ========================================================================== */

:root {
	--ss-shop-primary: #2457d6;
	--ss-shop-primary-dark: #173b9f;
	--ss-shop-primary-soft: #eef3ff;
	--ss-shop-purple: #7357e8;
	--ss-shop-success: #16a66a;
	--ss-shop-orange: #f28a2b;
	--ss-shop-heading: #172033;
	--ss-shop-text: #566176;
	--ss-shop-muted: #8993a5;
	--ss-shop-background: #f7f8fc;
	--ss-shop-white: #ffffff;
	--ss-shop-border: #e5e9f1;
	--ss-shop-shadow:
		0 12px 34px rgba(23, 32, 51, 0.08);
	--ss-shop-shadow-hover:
		0 20px 48px rgba(23, 32, 51, 0.14);
	--ss-shop-container: 1380px;
}

/* ==========================================================================
   BASE
   ========================================================================== */

.ss-shop-page,
.ss-shop-page *,
.ss-shop-page *::before,
.ss-shop-page *::after {
	box-sizing: border-box;
}

.ss-shop-page {
	width: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background: var(--ss-shop-background);
	color: var(--ss-shop-text);
	font-family: "Poppins", Arial, sans-serif;
}

.ss-shop-page a {
	text-decoration: none;
}

.ss-shop-page img {
	display: block;
	max-width: 100%;
	height: auto;
}

.ss-shop-page svg {
	display: block;
	width: 100%;
	height: 100%;
}

.ss-shop-container {
	position: relative;
	z-index: 2;
	width: min(
		calc(100% - 32px),
		var(--ss-shop-container)
	);
	margin-inline: auto;
}

/* ==========================================================================
   COMPACT INTRO
   ========================================================================== */

.ss-shop-intro {
	position: relative;
	padding: 34px 0 44px;
	overflow: hidden;
	background:
		linear-gradient(
			135deg,
			#0b1838 0%,
			#173a81 52%,
			#5b49d7 100%
		);
	color: #ffffff;
}

.ss-shop-intro-background {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.ss-shop-intro-orb {
	position: absolute;
	border-radius: 50%;
	filter: blur(8px);
	opacity: 0.7;
	animation:
		ssShopOrbMove 8s ease-in-out infinite;
}

.ss-shop-intro-orb-one {
	width: 260px;
	height: 260px;
	top: -120px;
	left: -90px;
	background:
		radial-gradient(
			circle,
			rgba(68, 180, 255, 0.4),
			transparent 70%
		);
}

.ss-shop-intro-orb-two {
	width: 320px;
	height: 320px;
	right: -120px;
	bottom: -170px;
	background:
		radial-gradient(
			circle,
			rgba(255, 158, 74, 0.34),
			transparent 70%
		);
	animation-delay: -3s;
}

@keyframes ssShopOrbMove {
	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-16px);
	}
}

.ss-shop-intro-layout {
	display: grid;
	grid-template-columns:
		minmax(0, 0.9fr)
		minmax(420px, 1.1fr);
	align-items: center;
	gap: 46px;
}

.ss-shop-breadcrumb {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 18px;
	color: rgba(255, 255, 255, 0.6);
	font-size: 10px;
	font-weight: 600;
}

.ss-shop-breadcrumb a {
	color: rgba(255, 255, 255, 0.88);
}

.ss-shop-intro-label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 32px;
	padding: 0 12px;
	border:
		1px solid rgba(255, 255, 255, 0.18);
	border-radius: 999px;
	background:
		rgba(255, 255, 255, 0.09);
	color: #e8eeff;
	font-size: 9px;
	font-weight: 800;
	letter-spacing: 0.7px;
	text-transform: uppercase;
	backdrop-filter: blur(10px);
}

.ss-shop-intro-label svg {
	width: 16px;
	height: 16px;
	color: #ffd181;
}

.ss-shop-intro h1 {
	margin: 16px 0 0;
	color: #ffffff;
	font-size:
		clamp(34px, 4.4vw, 56px);
	font-weight: 900;
	line-height: 1.06;
	letter-spacing: -1.7px;
}

.ss-shop-intro-content > p {
	max-width: 650px;
	margin: 14px 0 0;
	color: rgba(255, 255, 255, 0.72);
	font-size: 12px;
	line-height: 1.75;
}

/* ==========================================================================
   MAIN SEARCH
   ========================================================================== */

.ss-shop-main-search {
	display: grid;
	grid-template-columns:
		48px minmax(0, 1fr) auto;
	align-items: center;
	min-height: 58px;
	padding: 5px;
	border:
		1px solid rgba(255, 255, 255, 0.25);
	border-radius: 16px;
	background: #ffffff;
	box-shadow:
		0 18px 42px rgba(2, 10, 30, 0.25);
}

.ss-shop-main-search-icon {
	width: 46px;
	height: 46px;
	display: grid;
	place-items: center;
	color: var(--ss-shop-muted);
}

.ss-shop-main-search-icon svg {
	width: 20px;
	height: 20px;
}

.ss-shop-main-search input[type="search"] {
	width: 100%;
	min-width: 0;
	height: 46px;
	padding: 0 10px;
	border: 0;
	background: transparent;
	color: var(--ss-shop-heading);
	font-family: inherit;
	font-size: 11px;
	outline: none;
}

.ss-shop-main-search input::placeholder {
	color: #9aa3b4;
}

.ss-shop-main-search button {
	min-width: 108px;
	height: 46px;
	padding: 0 18px;
	border: 0;
	border-radius: 12px;
	background:
		linear-gradient(
			135deg,
			var(--ss-shop-primary),
			var(--ss-shop-primary-dark)
		);
	color: #ffffff;
	font-family: inherit;
	font-size: 10px;
	font-weight: 800;
	cursor: pointer;
	box-shadow:
		0 10px 22px rgba(36, 87, 214, 0.28);
	transition: 0.25s ease;
}

.ss-shop-main-search button:hover {
	transform: translateY(-2px);
	box-shadow:
		0 14px 28px rgba(36, 87, 214, 0.36);
}

/* ==========================================================================
   BENEFITS
   ========================================================================== */

.ss-shop-benefits {
	background: #ffffff;
	border-bottom:
		1px solid var(--ss-shop-border);
}

.ss-shop-benefits-grid {
	display: grid;
	grid-template-columns:
		repeat(3, minmax(0, 1fr));
}

.ss-shop-benefit {
	position: relative;
	display: grid;
	grid-template-columns: 44px 1fr;
	align-items: center;
	gap: 12px;
	min-height: 82px;
	padding: 14px 26px;
}

.ss-shop-benefit + .ss-shop-benefit::before {
	content: "";
	position: absolute;
	left: 0;
	top: 20px;
	bottom: 20px;
	width: 1px;
	background: var(--ss-shop-border);
}

.ss-shop-benefit > span {
	width: 42px;
	height: 42px;
	display: grid;
	place-items: center;
	border-radius: 13px;
	background: var(--ss-shop-primary-soft);
	color: var(--ss-shop-primary);
}

.ss-shop-benefit:nth-child(2) > span {
	background: #eaf8f1;
	color: var(--ss-shop-success);
}

.ss-shop-benefit:nth-child(3) > span {
	background: #fff3e8;
	color: var(--ss-shop-orange);
}

.ss-shop-benefit svg {
	width: 21px;
	height: 21px;
}

.ss-shop-benefit strong,
.ss-shop-benefit small {
	display: block;
}

.ss-shop-benefit strong {
	color: var(--ss-shop-heading);
	font-size: 11px;
	font-weight: 800;
}

.ss-shop-benefit small {
	margin-top: 3px;
	color: var(--ss-shop-muted);
	font-size: 8px;
}

/* ==========================================================================
   SECTION TITLE
   ========================================================================== */

.ss-shop-section-title {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 24px;
}

.ss-shop-section-title > div > span,
.ss-shop-products-heading > span,
.ss-shop-footer-cta-card > div > span {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: var(--ss-shop-primary);
	font-size: 9px;
	font-weight: 800;
	letter-spacing: 0.9px;
	text-transform: uppercase;
}

.ss-shop-section-title > div > span::before,
.ss-shop-products-heading > span::before,
.ss-shop-footer-cta-card > div > span::before {
	content: "";
	width: 26px;
	height: 3px;
	border-radius: 999px;
	background:
		linear-gradient(
			90deg,
			var(--ss-shop-primary),
			#82a7ff
		);
}

.ss-shop-section-title h2,
.ss-shop-products-heading h2,
.ss-shop-footer-cta-card h2 {
	margin: 8px 0 0;
	color: var(--ss-shop-heading);
	font-size:
		clamp(25px, 3.3vw, 38px);
	font-weight: 900;
	line-height: 1.12;
	letter-spacing: -0.9px;
}

.ss-shop-section-title > a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	flex: 0 0 auto;
	color: var(--ss-shop-primary);
	font-size: 9px;
	font-weight: 800;
	transition: 0.23s ease;
}

.ss-shop-section-title > a:hover {
	gap: 11px;
	color: var(--ss-shop-primary-dark);
}

.ss-shop-section-title > a svg {
	width: 15px;
	height: 15px;
}

/* ==========================================================================
   CATEGORY LIST
   ========================================================================== */

.ss-shop-categories-section {
	padding: 54px 0;
	background: #ffffff;
}

.ss-shop-category-list {
	display: grid;
	grid-template-columns:
		repeat(5, minmax(0, 1fr));
	gap: 13px;
}

.ss-shop-category-item {
	display: grid;
	grid-template-columns: 54px 1fr;
	align-items: center;
	gap: 12px;
	min-height: 82px;
	padding: 12px;
	border:
		1px solid var(--ss-shop-border);
	border-radius: 16px;
	background: #ffffff;
	color: var(--ss-shop-heading);
	box-shadow: var(--ss-shop-shadow);
	transition: 0.25s ease;
	overflow: hidden;
}

.ss-shop-category-item:hover,
.ss-shop-category-item.is-active {
	transform: translateY(-4px);
	border-color:
		rgba(36, 87, 214, 0.3);
	box-shadow: var(--ss-shop-shadow-hover);
}

.ss-shop-category-item.is-active {
	background:
		linear-gradient(
			135deg,
			#f6f8ff,
			#edf2ff
		);
}

.ss-shop-category-thumb {
	width: 52px;
	height: 52px;
	display: grid;
	place-items: center;
	border-radius: 14px;
	overflow: hidden;
	background: var(--ss-shop-primary-soft);
	color: var(--ss-shop-primary);
}

.ss-shop-category-thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	padding: 4px;
	background: #ffffff;
}

.ss-shop-category-thumb svg {
	width: 25px;
	height: 25px;
}

.ss-shop-category-item strong,
.ss-shop-category-item small {
	display: block;
}

.ss-shop-category-item strong {
	color: var(--ss-shop-heading);
	font-size: 10px;
	font-weight: 800;
	line-height: 1.35;
}

.ss-shop-category-item small {
	margin-top: 4px;
	color: var(--ss-shop-muted);
	font-size: 7px;
}

/* ==========================================================================
   PRODUCTS SECTION
   ========================================================================== */

.ss-shop-products-section {
	position: relative;
	padding: 58px 0 70px;
	background: var(--ss-shop-background);
}

.ss-shop-products-layout {
	display: grid;
	grid-template-columns:
		245px minmax(0, 1fr);
	align-items: start;
	gap: 24px;
}

/* ==========================================================================
   FILTER PANEL
   ========================================================================== */

.ss-shop-filter-panel {
	position: sticky;
	top: 110px;
	display: grid;
	gap: 14px;
}

.ss-shop-filter-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 54px;
	padding: 10px 14px;
	border-radius: 15px;
	background: var(--ss-shop-heading);
	color: #ffffff;
}

.ss-shop-filter-header > div {
	display: flex;
	align-items: center;
	gap: 9px;
}

.ss-shop-filter-header > div > svg {
	width: 18px;
	height: 18px;
}

.ss-shop-filter-header strong {
	font-size: 10px;
	font-weight: 800;
}

.ss-shop-filter-close {
	display: none;
	width: 32px;
	height: 32px;
	padding: 7px;
	border: 0;
	border-radius: 9px;
	background:
		rgba(255, 255, 255, 0.1);
	color: #ffffff;
	cursor: pointer;
}

.ss-shop-filter-block {
	padding: 16px;
	border:
		1px solid var(--ss-shop-border);
	border-radius: 16px;
	background: #ffffff;
	box-shadow: var(--ss-shop-shadow);
}

.ss-shop-filter-block h3 {
	margin: 0 0 12px;
	color: var(--ss-shop-heading);
	font-size: 11px;
	font-weight: 900;
}

.ss-shop-filter-search {
	display: grid;
	grid-template-columns:
		minmax(0, 1fr) 40px;
	align-items: center;
	min-height: 42px;
	border:
		1px solid var(--ss-shop-border);
	border-radius: 11px;
	background: var(--ss-shop-background);
	overflow: hidden;
}

.ss-shop-filter-search input {
	width: 100%;
	min-width: 0;
	height: 40px;
	padding: 0 11px;
	border: 0;
	background: transparent;
	color: var(--ss-shop-heading);
	font-family: inherit;
	font-size: 9px;
	outline: none;
}

.ss-shop-filter-search button {
	width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	border: 0;
	background: transparent;
	color: var(--ss-shop-primary);
	cursor: pointer;
}

.ss-shop-filter-search button svg {
	width: 17px;
	height: 17px;
}

.ss-shop-filter-categories {
	display: grid;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ss-shop-filter-categories li {
	margin: 0;
}

.ss-shop-filter-categories li a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	min-height: 39px;
	padding: 0 11px;
	border-radius: 10px;
	background: var(--ss-shop-background);
	color: var(--ss-shop-text);
	font-size: 8px;
	font-weight: 700;
	transition: 0.22s ease;
}

.ss-shop-filter-categories li a small {
	min-width: 24px;
	height: 22px;
	display: grid;
	place-items: center;
	padding: 0 6px;
	border-radius: 7px;
	background: #ffffff;
	color: var(--ss-shop-muted);
	font-size: 7px;
}

.ss-shop-filter-categories li a:hover,
.ss-shop-filter-categories li.is-active a {
	background:
		linear-gradient(
			135deg,
			var(--ss-shop-primary),
			var(--ss-shop-primary-dark)
		);
	color: #ffffff;
}

.ss-shop-filter-categories li a:hover small,
.ss-shop-filter-categories li.is-active a small {
	background:
		rgba(255, 255, 255, 0.14);
	color: #ffffff;
}

/* ==========================================================================
   FILTER HELP
   ========================================================================== */

.ss-shop-filter-help {
	padding: 20px 16px;
	border-radius: 16px;
	background:
		linear-gradient(
			145deg,
			#102652,
			#2457d6
		);
	color: #ffffff;
	text-align: center;
	box-shadow: var(--ss-shop-shadow);
}

.ss-shop-filter-help > span {
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	margin: 0 auto;
	border-radius: 13px;
	background:
		rgba(255, 255, 255, 0.13);
}

.ss-shop-filter-help > span svg {
	width: 22px;
	height: 22px;
}

.ss-shop-filter-help h3 {
	margin: 12px 0 0;
	color: #ffffff;
	font-size: 13px;
	font-weight: 900;
}

.ss-shop-filter-help p {
	margin: 7px 0 0;
	color:
		rgba(255, 255, 255, 0.7);
	font-size: 8px;
	line-height: 1.6;
}

.ss-shop-filter-help a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 38px;
	margin-top: 13px;
	padding: 0 13px;
	border-radius: 10px;
	background: #ffffff;
	color: var(--ss-shop-primary);
	font-size: 8px;
	font-weight: 800;
}

/* ==========================================================================
   PRODUCTS TOOLBAR
   ========================================================================== */

.ss-shop-products-content {
	min-width: 0;
}

.ss-shop-products-toolbar {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 22px;
	padding-bottom: 18px;
	border-bottom:
		1px solid var(--ss-shop-border);
}

.ss-shop-products-heading h2 {
	font-size:
		clamp(23px, 2.9vw, 34px);
}

.ss-shop-toolbar-controls {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: 9px;
}

.ss-shop-filter-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	gap: 7px;
	min-height: 40px;
	padding: 0 12px;
	border:
		1px solid var(--ss-shop-border);
	border-radius: 10px;
	background: #ffffff;
	color: var(--ss-shop-heading);
	font-family: inherit;
	font-size: 8px;
	font-weight: 800;
	cursor: pointer;
}

.ss-shop-filter-toggle svg {
	width: 16px;
	height: 16px;
}

.ss-shop-result-count .woocommerce-result-count {
	margin: 0;
	color: var(--ss-shop-muted);
	font-size: 8px;
}

.ss-shop-ordering .woocommerce-ordering {
	margin: 0;
}

.ss-shop-ordering select {
	min-height: 40px;
	padding: 0 34px 0 11px;
	border:
		1px solid var(--ss-shop-border);
	border-radius: 10px;
	background-color: #ffffff;
	color: var(--ss-shop-heading);
	font-family: inherit;
	font-size: 8px;
	font-weight: 700;
	outline: none;
}

/* ==========================================================================
   WOOCOMMERCE PRODUCTS
   ========================================================================== */

.ss-shop-products-content ul.products {
	display: grid !important;
	grid-template-columns:
		repeat(3, minmax(0, 1fr)) !important;
	gap: 18px !important;
	margin: 0 !important;
	padding: 0 !important;
}

.ss-shop-products-content ul.products::before,
.ss-shop-products-content ul.products::after {
	display: none !important;
}

.ss-shop-products-content ul.products li.product {
	position: relative;
	width: 100% !important;
	min-width: 0;
	margin: 0 !important;
	padding: 0 0 15px !important;
	border:
		1px solid var(--ss-shop-border);
	border-radius: 18px;
	background: #ffffff;
	box-shadow: var(--ss-shop-shadow);
	overflow: hidden;
	transition: 0.28s ease;
}

.ss-shop-products-content ul.products li.product:hover {
	transform: translateY(-5px);
	box-shadow: var(--ss-shop-shadow-hover);
}

.ss-shop-products-content
ul.products
li.product
a.woocommerce-LoopProduct-link {
	display: block;
}

/* Never crop or stretch product images */

.ss-shop-products-content
ul.products
li.product
a
img {
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 1 / 1 !important;
	margin: 0 !important;
	padding: 12px !important;
	object-fit: contain !important;
	object-position: center !important;
	background: #f8f9fc;
	transition: 0.3s ease;
}

.ss-shop-products-content
ul.products
li.product:hover
a
img {
	transform: scale(1.025);
}

.ss-shop-products-content
ul.products
li.product
.onsale {
	top: 10px !important;
	left: 10px !important;
	right: auto !important;
	min-width: auto !important;
	min-height: 25px !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 9px !important;
	border-radius: 999px !important;
	background:
		linear-gradient(
			135deg,
			#e5485d,
			#ff6f7f
		) !important;
	color: #ffffff !important;
	font-size: 7px !important;
	font-weight: 800 !important;
	line-height: 25px !important;
	box-shadow:
		0 8px 18px rgba(229, 72, 93, 0.24);
}

.ss-shop-products-content
ul.products
li.product
.woocommerce-loop-category__title,
.ss-shop-products-content
ul.products
li.product
.woocommerce-loop-product__title {
	margin: 13px 14px 0 !important;
	padding: 0 !important;
	color: var(--ss-shop-heading);
	font-size: 11px !important;
	font-weight: 900 !important;
	line-height: 1.45;
}

.ss-shop-products-content
ul.products
li.product
.star-rating {
	float: none !important;
	margin: 8px 14px 0 !important;
	color: #ffb400;
	font-size: 9px;
}

.ss-shop-products-content
ul.products
li.product
.price {
	display: block !important;
	margin: 9px 14px 0 !important;
	color: var(--ss-shop-heading) !important;
	font-size: 13px !important;
	font-weight: 900 !important;
}

.ss-shop-products-content
ul.products
li.product
.price
del {
	margin-right: 4px;
	color: var(--ss-shop-muted);
	font-size: 8px;
	font-weight: 600;
	opacity: 1;
}

.ss-shop-products-content
ul.products
li.product
.price
ins {
	text-decoration: none;
}

.ss-shop-products-content
ul.products
li.product
.button,
.ss-shop-products-content
ul.products
li.product
.added_to_cart {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width:
		calc(100% - 28px) !important;
	min-height: 40px;
	margin: 12px 14px 0 !important;
	padding: 0 11px !important;
	border: 0 !important;
	border-radius: 11px !important;
	background:
		linear-gradient(
			135deg,
			var(--ss-shop-primary),
			var(--ss-shop-primary-dark)
		) !important;
	color: #ffffff !important;
	font-family: inherit;
	font-size: 8px !important;
	font-weight: 800 !important;
	line-height: 1.2 !important;
	text-align: center;
	box-shadow:
		0 10px 22px rgba(36, 87, 214, 0.2);
	transition: 0.23s ease;
}

.ss-shop-products-content
ul.products
li.product
.button:hover,
.ss-shop-products-content
ul.products
li.product
.added_to_cart:hover {
	transform: translateY(-2px);
	box-shadow:
		0 14px 28px rgba(36, 87, 214, 0.29);
}

.ss-shop-products-content
ul.products
li.product
.button.added {
	display: none !important;
}

/* ==========================================================================
   EMPTY STATE
   ========================================================================== */

.ss-shop-empty {
	padding: 55px 22px;
	border:
		1px dashed var(--ss-shop-border);
	border-radius: 18px;
	background: #ffffff;
	text-align: center;
}

.ss-shop-empty > span {
	width: 58px;
	height: 58px;
	display: grid;
	place-items: center;
	margin: 0 auto;
	border-radius: 17px;
	background: var(--ss-shop-primary-soft);
	color: var(--ss-shop-primary);
}

.ss-shop-empty > span svg {
	width: 27px;
	height: 27px;
}

.ss-shop-empty h3 {
	margin: 16px 0 0;
	color: var(--ss-shop-heading);
	font-size: 18px;
	font-weight: 900;
}

.ss-shop-empty p {
	margin: 7px 0 0;
	color: var(--ss-shop-muted);
	font-size: 9px;
}

.ss-shop-empty a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	min-height: 42px;
	margin-top: 16px;
	padding: 0 14px;
	border-radius: 11px;
	background: var(--ss-shop-primary);
	color: #ffffff;
	font-size: 8px;
	font-weight: 800;
}

.ss-shop-empty a svg {
	width: 14px;
	height: 14px;
}

/* ==========================================================================
   PAGINATION
   ========================================================================== */

.ss-shop-pagination {
	margin-top: 30px;
}

.ss-shop-pagination
.woocommerce-pagination {
	margin: 0;
}

.ss-shop-pagination
.woocommerce-pagination
ul.page-numbers {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
}

.ss-shop-pagination
.woocommerce-pagination
ul.page-numbers
li {
	margin: 0 !important;
	border: 0 !important;
}

.ss-shop-pagination
.woocommerce-pagination
ul.page-numbers
li
a,
.ss-shop-pagination
.woocommerce-pagination
ul.page-numbers
li
span {
	width: 38px;
	height: 38px;
	display: grid;
	place-items: center;
	padding: 0 !important;
	border:
		1px solid var(--ss-shop-border);
	border-radius: 10px;
	background: #ffffff;
	color: var(--ss-shop-heading);
	font-size: 8px;
	font-weight: 800;
	line-height: 1;
	transition: 0.22s ease;
}

.ss-shop-pagination
.woocommerce-pagination
ul.page-numbers
li
span.current,
.ss-shop-pagination
.woocommerce-pagination
ul.page-numbers
li
a:hover {
	border-color: var(--ss-shop-primary);
	background: var(--ss-shop-primary);
	color: #ffffff;
}

/* ==========================================================================
   FOOT CTA
   ========================================================================== */

.ss-shop-footer-cta {
	padding: 0 0 66px;
	background: var(--ss-shop-background);
}

.ss-shop-footer-cta-card {
	display: grid;
	grid-template-columns:
		minmax(0, 1fr) auto;
	align-items: center;
	gap: 28px;
	padding: 30px 34px;
	border-radius: 20px;
	background:
		linear-gradient(
			135deg,
			#0b1838,
			#173f91 58%,
			#6249d9
		);
	color: #ffffff;
	box-shadow:
		0 24px 56px rgba(10, 25, 58, 0.2);
}

.ss-shop-footer-cta-card
> div
> span {
	color: #cbd9ff;
}

.ss-shop-footer-cta-card
> div
> span::before {
	background: #90b2ff;
}

.ss-shop-footer-cta-card h2 {
	color: #ffffff;
}

.ss-shop-footer-cta-card p {
	margin: 8px 0 0;
	color:
		rgba(255, 255, 255, 0.68);
	font-size: 9px;
	line-height: 1.6;
}

.ss-shop-footer-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 9px;
}

.ss-shop-footer-actions a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	min-height: 44px;
	padding: 0 14px;
	border-radius: 11px;
	font-size: 8px;
	font-weight: 800;
	transition: 0.23s ease;
}

.ss-shop-footer-actions a:hover {
	transform: translateY(-2px);
}

.ss-shop-footer-actions a svg {
	width: 16px;
	height: 16px;
}

.ss-shop-account-button {
	background: #ffffff;
	color: var(--ss-shop-primary);
}

.ss-shop-free-button {
	border:
		1px solid rgba(255, 255, 255, 0.2);
	background:
		rgba(255, 255, 255, 0.1);
	color: #ffffff;
}

.ss-shop-free-button:hover {
	color: #ffffff;
}

/* ==========================================================================
   MOBILE FILTER
   ========================================================================== */

.ss-shop-filter-overlay {
	position: fixed;
	z-index: 9997;
	inset: 0;
	display: none;
	background:
		rgba(5, 13, 31, 0.72);
	backdrop-filter: blur(4px);
}

body.ss-shop-filter-open {
	overflow: hidden;
}

/* ==========================================================================
   ASTRA CLEANUP
   ========================================================================== */

body.post-type-archive-product
.ast-container,
body.tax-product_cat
.ast-container,
body.tax-product_tag
.ast-container,
body.post-type-archive-product
.site-content
> .ast-container,
body.tax-product_cat
.site-content
> .ast-container,
body.tax-product_tag
.site-content
> .ast-container {
	max-width: none;
	padding: 0;
}

body.post-type-archive-product
.entry-header,
body.tax-product_cat
.entry-header,
body.tax-product_tag
.entry-header,
body.post-type-archive-product
.woocommerce-products-header,
body.tax-product_cat
.woocommerce-products-header,
body.tax-product_tag
.woocommerce-products-header {
	display: none !important;
}

body.post-type-archive-product
.site-main,
body.tax-product_cat
.site-main,
body.tax-product_tag
.site-main,
body.post-type-archive-product
.content-area,
body.tax-product_cat
.content-area,
body.tax-product_tag
.content-area,
body.post-type-archive-product
.site-content,
body.tax-product_cat
.site-content,
body.tax-product_tag
.site-content {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
}

/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 1180px) {
	.ss-shop-category-list {
		grid-template-columns:
			repeat(4, minmax(0, 1fr));
	}

	.ss-shop-products-content
	ul.products {
		grid-template-columns:
			repeat(2, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 960px) {
	.ss-shop-intro-layout {
		grid-template-columns: 1fr;
		gap: 25px;
	}

	.ss-shop-main-search {
		max-width: 760px;
	}

	.ss-shop-benefits-grid {
		grid-template-columns:
			repeat(3, minmax(0, 1fr));
	}

	.ss-shop-category-list {
		grid-template-columns:
			repeat(3, minmax(0, 1fr));
	}

	.ss-shop-products-layout {
		grid-template-columns: 1fr;
	}

	.ss-shop-filter-panel {
		position: fixed;
		z-index: 9998;
		top: 0;
		left: 0;
		bottom: 0;
		width: min(88vw, 330px);
		padding: 15px;
		overflow-y: auto;
		background: var(--ss-shop-background);
		transform: translateX(-105%);
		transition: transform 0.28s ease;
	}

	body.ss-shop-filter-open
	.ss-shop-filter-panel {
		transform: translateX(0);
	}

	body.ss-shop-filter-open
	.ss-shop-filter-overlay {
		display: block;
	}

	.ss-shop-filter-close,
	.ss-shop-filter-toggle {
		display: inline-flex;
	}
}

/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 767px) {
	.ss-shop-container {
		width:
			min(
				calc(100% - 22px),
				var(--ss-shop-container)
			);
	}

	.ss-shop-intro {
		padding: 24px 0 36px;
	}

	.ss-shop-breadcrumb {
		margin-bottom: 14px;
		font-size: 8px;
	}

	.ss-shop-intro-label {
		min-height: 29px;
		padding-inline: 10px;
		font-size: 8px;
	}

	.ss-shop-intro h1 {
		font-size:
			clamp(30px, 9vw, 42px);
		letter-spacing: -1px;
	}

	.ss-shop-intro-content > p {
		font-size: 10px;
		line-height: 1.65;
	}

	.ss-shop-main-search {
		grid-template-columns:
			39px minmax(0, 1fr);
		min-height: 52px;
		border-radius: 14px;
	}

	.ss-shop-main-search-icon {
		width: 38px;
		height: 42px;
	}

	.ss-shop-main-search input[type="search"] {
		height: 42px;
		padding-inline: 6px;
		font-size: 9px;
	}

	.ss-shop-main-search button {
		grid-column: 1 / -1;
		width: 100%;
		height: 41px;
		margin-top: 4px;
	}

	.ss-shop-benefits-grid {
		grid-template-columns:
			repeat(3, minmax(0, 1fr));
	}

	.ss-shop-benefit {
		grid-template-columns: 1fr;
		justify-items: center;
		min-height: 98px;
		padding: 12px 6px;
		text-align: center;
		gap: 7px;
	}

	.ss-shop-benefit + .ss-shop-benefit::before {
		top: 15px;
		bottom: 15px;
	}

	.ss-shop-benefit > span {
		width: 36px;
		height: 36px;
	}

	.ss-shop-benefit strong {
		font-size: 8px;
	}

	.ss-shop-benefit small {
		font-size: 6px;
	}

	.ss-shop-categories-section {
		padding: 42px 0;
	}

	.ss-shop-section-title {
		align-items: flex-start;
	}

	.ss-shop-section-title h2,
	.ss-shop-products-heading h2,
	.ss-shop-footer-cta-card h2 {
		font-size: 25px;
	}

	.ss-shop-category-list {
		grid-template-columns:
			repeat(2, minmax(0, 1fr));
		gap: 10px;
	}

	.ss-shop-category-item {
		grid-template-columns: 44px 1fr;
		min-height: 70px;
		padding: 9px;
		gap: 9px;
	}

	.ss-shop-category-thumb {
		width: 42px;
		height: 42px;
		border-radius: 12px;
	}

	.ss-shop-category-item strong {
		font-size: 8px;
	}

	.ss-shop-category-item small {
		font-size: 6px;
	}

	.ss-shop-products-section {
		padding: 44px 0 56px;
	}

	.ss-shop-products-toolbar {
		align-items: flex-start;
		flex-direction: column;
		gap: 12px;
	}

	.ss-shop-toolbar-controls {
		width: 100%;
		justify-content: space-between;
	}

	.ss-shop-result-count {
		display: none;
	}

	.ss-shop-ordering {
		flex: 1;
	}

	.ss-shop-ordering select {
		width: 100%;
	}

	.ss-shop-products-content
	ul.products {
		grid-template-columns:
			repeat(2, minmax(0, 1fr)) !important;
		gap: 10px !important;
	}

	.ss-shop-products-content
	ul.products
	li.product {
		border-radius: 14px;
		padding-bottom: 11px !important;
	}

	.ss-shop-products-content
	ul.products
	li.product
	a
	img {
		padding: 7px !important;
	}

	.ss-shop-products-content
	ul.products
	li.product
	.woocommerce-loop-category__title,
	.ss-shop-products-content
	ul.products
	li.product
	.woocommerce-loop-product__title {
		margin: 9px 9px 0 !important;
		font-size: 8px !important;
		line-height: 1.4;
	}

	.ss-shop-products-content
	ul.products
	li.product
	.star-rating {
		margin:
			6px 9px 0 !important;
		font-size: 7px;
	}

	.ss-shop-products-content
	ul.products
	li.product
	.price {
		margin:
			7px 9px 0 !important;
		font-size: 10px !important;
	}

	.ss-shop-products-content
	ul.products
	li.product
	.button,
	.ss-shop-products-content
	ul.products
	li.product
	.added_to_cart {
		width:
			calc(100% - 18px) !important;
		min-height: 36px;
		margin:
			9px 9px 0 !important;
		padding-inline: 7px !important;
		font-size: 7px !important;
	}

	.ss-shop-footer-cta {
		padding-bottom: 52px;
	}

	.ss-shop-footer-cta-card {
		grid-template-columns: 1fr;
		gap: 20px;
		padding: 24px 18px;
		border-radius: 18px;
	}

	.ss-shop-footer-actions {
		display: grid;
		grid-template-columns:
			repeat(2, minmax(0, 1fr));
		width: 100%;
	}

	.ss-shop-footer-actions a {
		width: 100%;
	}
}

/* ==========================================================================
   SMALL MOBILE
   ========================================================================== */

@media (max-width: 430px) {
	.ss-shop-section-title > a {
		font-size: 7px;
	}

	.ss-shop-category-list {
		grid-template-columns:
			repeat(2, minmax(0, 1fr));
	}

	.ss-shop-footer-actions {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.ss-shop-page *,
	.ss-shop-page *::before,
	.ss-shop-page *::after {
		animation: none !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}