/* ============================================================

 * BREAKPOINT SCALE (authoritative reference)

 * Mobile-first approach. Keep new rules aligned:

 *   >= 1440px   large desktop   (grid density / wide layouts)

 *   <= 1279px   small desktop   (container shrink)

 *   <= 1023px   landscape tablet (product columns, nav collapse)

 *   <= 991px    tablet           (header stacking)

 *   <= 782px    WP admin-bar / landscape phone

 *   <= 767px    portrait tablet  (single-column layouts)

 *   <= 640px    large phone      (cards, filters)

 *   <= 480px    phone            (typography scale down)

 * ============================================================





@font-face {

	font-family: "Vazirmatn";

	src: url("../fonts/vazirmatn-variable.woff2") format("woff2");

	font-weight: 100 900;

	font-style: normal;

	font-display: swap;

}



/* ============================================

   1. CSS CUSTOM PROPERTIES (Design Tokens)

   ============================================ */

:root {

	--havir-red: #d32f2f;

	--havir-red-dark: #b71c1c;

	--havir-red-soft: #ffebee;

	--havir-navy: #1a1a2e;

	--havir-navy-2: #16213e;

	--havir-gold: #b8860b;

	--havir-gold-dark: #9a6b09;

	--havir-bg: #fafafa;

	--havir-surface: #ffffff;

	--havir-surface-alt: #f5f5f7;

	--havir-text: #333333;

	--havir-muted: #6b7280;

	--havir-border: #e5e7eb;

	--havir-success: #188038;

	--havir-error: #d32f2f;

	--havir-info: #2563eb;

	--space-1: 0.25rem;

	--space-2: 0.5rem;

	--space-3: 0.75rem;

	--space-4: 1rem;

	--space-5: 1.25rem;

	--space-6: 1.5rem;

	--space-8: 2rem;

	--space-10: 2.5rem;

	--space-12: 3rem;

	--space-16: 4rem;

	--font-xs: 0.78rem;

	--font-sm: 0.9rem;

	--font-base: 1rem;

	--font-lg: 1.125rem;

	--font-xl: 1.35rem;

	--font-2xl: 1.75rem;

	--font-3xl: 2.25rem;

	--font-4xl: 3rem;

	--radius: 12px;

	--radius-sm: 8px;

	--radius-lg: 20px;

	--shadow: 0 4px 24px rgba(0, 0, 0, 0.08);

	--shadow-lg: 0 20px 45px rgba(26, 26, 46, 0.16);

	--transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

	--z-dropdown: 50;

	--z-sticky: 990;

	--z-overlay: 1000;

	--z-panel: 1010;

	--z-toast: 1100;

}



/* Visible keyboard focus for every interactive element that does not

 * define its own focus style. */

:focus-visible {

	outline: 2px solid var(--havir-red);

	outline-offset: 2px;

	border-radius: 2px;

}





/* ============================================

   2. RESET & BASE

   ============================================ */

*,

*::before,

*::after {

	box-sizing: border-box;

}



html {

	direction: rtl;

	scroll-behavior: smooth;

	max-width: 100vw;

	overflow-x: clip;

}



body {

	margin: 0;

	max-width: 100vw;

	overflow-x: clip;

	position: relative;

	background: var(--havir-bg);

	color: var(--havir-text);

	font-family: "Vazirmatn", Tahoma, Arial, sans-serif;

	line-height: 1.8;

	text-align: start;

	text-rendering: optimizeLegibility;

	-webkit-font-smoothing: antialiased;

	-moz-osx-font-smoothing: grayscale;

	font-synthesis-weight: none;

}



button,

input,

select,

textarea {

	font: inherit;

}



body.no-scroll {

	overflow: hidden;

}



img {

	max-inline-size: 100%;

	block-size: auto;

}



svg {

	max-inline-size: 100%;

}



::selection {

	background: var(--havir-red);

	color: #fff;

}



/* ============================================

   3. TYPOGRAPHY

   ============================================ */

h1,

h2,

h3,

h4,

h5,

h6 {

	margin-block: 0 var(--space-3);

	color: var(--havir-navy);

	font-weight: 850;

	line-height: 1.35;

}



h1 {

	font-size: clamp(2rem, 5vw, var(--font-4xl));

}



h2 {

	font-size: clamp(1.6rem, 3vw, var(--font-3xl));

}



h3 {

	font-size: var(--font-xl);

}



a {

	color: inherit;

	text-decoration: none;

	transition: var(--transition);

}



a:hover {

	color: var(--havir-red);

}



p {

	margin-block: 0 var(--space-4);

}



blockquote {

	margin-block: var(--space-8);

	padding-block: var(--space-5);

	padding-inline: var(--space-6);

	border-inline-start: 4px solid var(--havir-red);

	background: var(--havir-surface);

	border-radius: var(--radius);

	box-shadow: var(--shadow);

}



.latin-heading {

	font-family: "Playfair Display", Georgia, serif;

	direction: ltr;

	letter-spacing: 0;

}



/* ============================================

   4. LAYOUT & GRID SYSTEM

   ============================================ */

.container {

	width: 100%;

	max-width: 1280px;

	margin-left: auto;

	margin-right: auto;

	padding-left: var(--space-4, 1rem);

	padding-right: var(--space-4, 1rem);

	box-sizing: border-box;

}



@media (min-width: 1440px) {

	.container {

		max-width: 1320px;

	}

}



.row,

.grid-2,

.grid-3,

.grid-4,

.post-grid,

.havir-product-grid {

	display: grid;

	gap: var(--space-6);

}



.grid-2 {

	grid-template-columns: repeat(2, minmax(0, 1fr));

}



.grid-3,

.havir-product-grid:not(.havir-product-carousel) {

	grid-template-columns: repeat(3, minmax(0, 1fr));

}



.grid-4 {

	grid-template-columns: repeat(4, minmax(0, 1fr));

}



.site-main {

	padding-block: var(--space-8);

}



.havir-elementor-page .site-main,

.havir-front-page--elementor,

.havir-full-width-template,

.havir-blank-template .site-main {

	padding-block: 0;

}



.havir-elementor-content {

	inline-size: 100%;

	margin-inline: auto;

}



.havir-elementor-content > .elementor,

.havir-elementor-content .elementor-section-wrap,

.havir-elementor-content .e-con {

	inline-size: 100%;

}



.havir-elementor-content .elementor-section.elementor-section-boxed > .elementor-container {

	max-inline-size: 1280px;

}



.elementor-editor-active .site-header,

.elementor-editor-active .site-footer {

	position: relative;

	z-index: 1;

}



/* ============================================

   5. TOP BAR

   ============================================ */

.havir-topbar {

	background: var(--havir-navy);

	color: #fff;

	font-size: 13px;

}



.havir-topbar__inner,

.havir-topbar__contact,

.havir-topbar__actions {

	display: flex;

	align-items: center;

	gap: var(--space-4);

}



.havir-topbar__inner {

	justify-content: space-between;

	min-block-size: 38px;

}



.havir-topbar a:hover {

	color: var(--havir-gold);

}



/* ============================================

   6. HEADER & NAVIGATION

   ============================================ */

.site-header {

	position: relative;

	z-index: 990;

	background: #ffffff !important;

	transition: var(--transition);

}



.site-header--sticky {

	position: sticky;

	inset-block-start: 0;

	z-index: 990;

}



body.admin-bar .site-header--sticky {

	inset-block-start: 32px;

}



@media (max-width: 782px) {

	body.admin-bar .site-header--sticky {

		inset-block-start: 46px;

	}

}



@media (max-width: 600px) {

	body.admin-bar .site-header--sticky {

		inset-block-start: 0;

	}

}



.site-header.header-scrolled {

	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);

	border-block-end: 1px solid var(--havir-border);

}



.site-header.header-scrolled .havir-topbar {

	max-height: 0;

	opacity: 0;

	overflow: hidden;

	padding: 0;

	transition: max-height 0.3s ease, opacity 0.2s ease, padding 0.3s ease;

}



.havir-main-header {

	position: relative;

	z-index: 100;

	overflow: visible;

}



.havir-main-header__inner {

	display: grid;

	grid-template-columns: auto minmax(260px, 1fr) auto;

	align-items: center;

	gap: var(--space-6);

	padding-block: var(--space-4);

	position: relative;

	overflow: visible;

}



.havir-brand__title {

	color: var(--havir-red);

	font-size: var(--font-xl);

	font-weight: 900;

}



.havir-search-form {

	position: relative;

	z-index: 105;

	overflow: visible;

	display: flex;

	align-items: center;

	border: 1.5px solid #e2e8f0;

	border-radius: 999px;

	background: #f8fafc;

	min-block-size: 48px;

	max-block-size: 48px;

	inline-size: 100%;

	max-inline-size: 680px;

	padding: 4px 6px 4px 5px;

	transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);

	box-sizing: border-box;

}



.havir-search-form:hover {

	border-color: #cbd5e1;

	background: #f1f5f9;

}



.havir-search-form:focus-within {

	border-color: var(--havir-red, #e63946);

	background: #ffffff;

	box-shadow: 0 0 0 4px rgba(230, 57, 70, 0.12), 0 2px 12px rgba(0, 0, 0, 0.04);

}



.havir-search-prefix {

	display: inline-flex;

	align-items: center;

	justify-content: center;

	color: #94a3b8;

	padding-inline-start: 12px;

	padding-inline-end: 2px;

	flex-shrink: 0;

	pointer-events: none;

	transition: color 0.2s ease;

}



.havir-search-form:focus-within .havir-search-prefix {

	color: var(--havir-red, #e63946);

}



.havir-search-prefix svg {

	inline-size: 19px !important;

	block-size: 19px !important;

	width: 19px !important;

	height: 19px !important;

	stroke: currentColor !important;

	display: block !important;

}



.havir-search-input {

	flex: 1 1 auto;

	min-inline-size: 0;

	inline-size: 100%;

	border: 0 !important;

	outline: 0 !important;

	background: transparent !important;

	padding-inline: 8px 12px !important;

	padding-block: 0 !important;

	font-family: inherit !important;

	font-size: 13.5px !important;

	font-weight: 500 !important;

	color: #1e293b !important;

	line-height: 1.5 !important;

	box-shadow: none !important;

}



.havir-search-input::placeholder {

	color: #94a3b8;

	font-size: 13px;

	font-weight: 400;

}



.havir-search-submit {

	display: inline-flex !important;

	align-items: center !important;

	justify-content: center !important;

	gap: 7px !important;

	min-inline-size: auto !important;

	min-block-size: 38px !important;

	block-size: 38px !important;

	max-block-size: 38px !important;

	padding-inline: 18px 14px !important;

	border: 0 !important;

	border-radius: 999px !important;

	background: linear-gradient(135deg, var(--havir-red, #e63946) 0%, #d90429 100%) !important;

	color: #ffffff !important;

	font-family: "Vazirmatn", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;

	font-size: 13px !important;

	font-weight: 700 !important;

	cursor: pointer !important;

	box-shadow: 0 2px 8px rgba(230, 57, 70, 0.28) !important;

	transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;

	flex-shrink: 0 !important;

	white-space: nowrap !important;

	line-height: 1 !important;

}



.havir-search-submit svg {

	inline-size: 17px !important;

	block-size: 17px !important;

	width: 17px !important;

	height: 17px !important;

	stroke: currentColor !important;

	display: block !important;

	flex-shrink: 0 !important;

}



.havir-search-submit span {

	display: inline-block !important;

	line-height: 1 !important;

	letter-spacing: -0.2px !important;

}



.havir-search-submit:hover {

	background: linear-gradient(135deg, #c1121f 0%, #b70924 100%) !important;

	transform: translateY(-1px) !important;

	box-shadow: 0 4px 14px rgba(230, 57, 70, 0.38) !important;

}



.havir-search-submit:active {

	transform: translateY(0) !important;

	box-shadow: 0 1px 4px rgba(230, 57, 70, 0.2) !important;

}



.havir-icon-button,

.btn-icon {

	display: inline-flex;

	align-items: center;

	justify-content: center;

	min-inline-size: 42px;

	min-block-size: 42px;

	inline-size: 42px;

	block-size: 42px;

	border: 1px solid #e2e8f0;

	border-radius: 12px;

	background: #ffffff;

	color: #334155;

	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);

	transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);

	position: relative;

	cursor: pointer;

	text-decoration: none;

}



.havir-icon {

	display: block;

	flex: 0 0 auto;

	inline-size: 20px;

	block-size: 20px;

}



.havir-icon--small {

	inline-size: 16px;

	block-size: 16px;

}



.havir-icon-button:hover,

.btn-icon:hover {

	border-color: #cbd5e1;

	background: #fef2f2;

	color: var(--havir-red, #e63946);

	transform: translateY(-2px);

	box-shadow: 0 4px 12px rgba(230, 57, 70, 0.12);

}



.havir-header-actions {

	display: flex;

	align-items: center;

	gap: 10px;

}



.cart-count,

.wishlist-count {

	position: absolute;

	inset-block-start: -5px;

	inset-inline-start: -5px;

	min-inline-size: 19px;

	block-size: 19px;

	border-radius: 999px;

	background: var(--havir-red, #e63946);

	color: #ffffff;

	font-family: "Vazirmatn", sans-serif;

	font-size: 11px;

	font-weight: 700;

	line-height: 19px;

	text-align: center;

	border: 2px solid #ffffff;

	box-shadow: 0 2px 6px rgba(230, 57, 70, 0.35);

}



.cart-total {

	display: none;

}



.havir-hamburger {

	display: none;

	flex-direction: column;

	gap: 4px;

}



.havir-hamburger span {

	inline-size: 22px;

	block-size: 2px;

	background: currentColor;

}



.havir-nav {

	background: #181c2b;

	color: #fff;

	border-block-start: 1px solid rgba(255, 255, 255, 0.08);

	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);

	position: relative;

	z-index: 90;

	overflow: visible !important;

}



.havir-nav > .container,

.havir-nav .site-container {

	position: relative;

	overflow: visible !important;

}



.havir-primary-menu {

	display: flex !important;

	align-items: center !important;

	flex-wrap: nowrap !important;

	gap: 2px !important;

	margin: 0 !important;

	padding: 0 !important;

	list-style: none !important;

	overflow: visible !important;

	width: 100% !important;

}



.havir-primary-menu > li {

	position: relative !important;

	flex-shrink: 0 !important;

	white-space: nowrap !important;

}



/* Mega menu items are anchored to the entire navbar container so they never overflow */

.havir-primary-menu > li.menu-item-has-mega {

	position: static !important;

}



.havir-primary-menu > li > a,

.havir-menu-link {

	display: inline-flex !important;

	align-items: center !important;

	white-space: nowrap !important;

	word-break: keep-all !important;

	gap: 3px !important;

	padding-block: 8px !important;

	padding-inline: 8px !important;

	font-family: "Vazirmatn", -apple-system, BlinkMacSystemFont, "Segoe UI", Tahoma, sans-serif !important;

	font-size: 12.5px !important;

	font-weight: 600 !important;

	color: #e2e8f0 !important;

	line-height: 1.3 !important;

	text-decoration: none !important;

	border-radius: 6px !important;

	transition: all 0.18s ease !important;

}



.havir-primary-menu > li:hover > a,

.havir-primary-menu > li.current-menu-item > a,

.havir-menu-link:hover {

	color: #ffffff !important;

	background: rgba(255, 255, 255, 0.12) !important;

}



.havir-menu-caret {

	display: inline-flex;

	align-items: center;

	justify-content: center;

	font-size: 8px;

	line-height: 1;

	opacity: 0.7;

	margin-inline-start: 2px;

	transition: transform 0.2s ease;

}



.havir-primary-menu li:hover > a .havir-menu-caret {

	transform: rotate(180deg);

	opacity: 1;

}



@media (max-width: 1240px) {

	.havir-primary-menu > li > a,

	.havir-menu-link {

		font-size: 11.5px !important;

		padding-inline: 5px !important;

		gap: 2px !important;

	}

}



@media (max-width: 1080px) {

	.havir-primary-menu > li > a,

	.havir-menu-link {

		font-size: 11px !important;

		padding-inline: 3px !important;

		gap: 1px !important;

	}

}



/* ====================================================

   CONTAINER-BOUND MEGA MENU (Spans container cleanly)

   ==================================================== */

.havir-primary-menu .sub-menu.havir-mega-panel {

	position: absolute !important;

	top: 100% !important;

	right: 1rem !important;

	left: 1rem !important;

	width: calc(100% - 2rem) !important;

	max-width: 1280px !important;

	margin: 0 auto !important;

	background: #ffffff !important;

	border-radius: 0 0 16px 16px !important;

	border: 1px solid #e2e8f0 !important;

	border-top: 3px solid var(--havir-red, #e63946) !important;

	box-shadow: 0 24px 48px -12px rgba(15, 23, 42, 0.16), 0 8px 24px -4px rgba(15, 23, 42, 0.08) !important;

	padding: 28px 32px 0 32px !important;

	display: none;

	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;

	gap: 24px 32px !important;

	align-items: start !important;

	z-index: 1000 !important;

	box-sizing: border-box !important;

	overflow: hidden !important;

}



@media (min-width: 1440px) {

	.havir-primary-menu .sub-menu.havir-mega-panel {

		max-width: 1320px !important;

	}

}



/* Mega Menu Columns */

.havir-primary-menu .sub-menu.havir-mega-panel > li.havir-mega-col {

	display: flex !important;

	flex-direction: column !important;

	gap: 4px !important;

	min-width: 0 !important;

	padding: 0 !important;

	margin: 0 !important;

	position: static !important;

}



/* Mega Menu Column Heading */

.havir-mega-col-title {

	display: inline-flex !important;

	align-items: center !important;

	font-family: "Vazirmatn", -apple-system, BlinkMacSystemFont, "Segoe UI", Tahoma, sans-serif !important;

	font-size: 14px !important;

	font-weight: 800 !important;

	color: #0f172a !important;

	text-decoration: none !important;

	padding: 0 0 10px 0 !important;

	margin-bottom: 6px !important;

	border-bottom: 2px solid #f1f5f9 !important;

	position: relative !important;

	transition: all 0.2s ease !important;

	white-space: normal !important;

	line-height: 1.4 !important;

}



.havir-mega-col-title::before {

	content: "";

	display: inline-block;

	width: 4px;

	height: 15px;

	background: var(--havir-red, #e63946);

	border-radius: 2px;

	margin-inline-end: 8px;

	flex-shrink: 0;

	transition: height 0.2s ease;

}



.havir-mega-col-title:hover {

	color: var(--havir-red, #e63946) !important;

	border-bottom-color: var(--havir-red, #e63946) !important;

}



/* Mega Menu Child Lists */

.havir-mega-sublist {

	display: flex !important;

	flex-direction: column !important;

	gap: 2px !important;

	margin: 0 !important;

	padding: 0 !important;

	list-style: none !important;

	background: transparent !important;

	box-shadow: none !important;

	border: none !important;

	position: static !important;

}



.havir-mega-subitem {

	display: block !important;

	margin: 0 !important;

	padding: 0 !important;

	position: static !important;

}



.havir-mega-sublink {

	display: flex !important;

	align-items: center !important;

	padding: 6px 10px !important;

	font-size: 13px !important;

	font-weight: 500 !important;

	color: #475569 !important;

	text-decoration: none !important;

	border-radius: 6px !important;

	transition: all 0.18s ease !important;

	line-height: 1.4 !important;

	white-space: normal !important;

}



.havir-mega-sublink:hover {

	color: var(--havir-red, #e63946) !important;

	background: #fef2f2 !important;

	transform: translateX(-4px) !important;

	padding-inline-start: 14px !important;

}



/* Mega Menu Footer Banner */

.havir-mega-footer {

	grid-column: 1 / -1 !important;

	margin-top: 16px !important;

	padding: 14px 24px !important;

	background: #f8fafc !important;

	border-top: 1px solid #e2e8f0 !important;

	margin-inline: -32px !important;

	border-radius: 0 0 15px 15px !important;

	list-style: none !important;

}



.havir-mega-footer__inner {

	display: flex !important;

	align-items: center !important;

	justify-content: space-around !important;

	flex-wrap: wrap !important;

	gap: 16px !important;

}



.havir-mega-perk {

	display: inline-flex !important;

	align-items: center !important;

	gap: 8px !important;

	font-size: 12.5px !important;

	font-weight: 600 !important;

	color: #475569 !important;

}



.havir-mega-perk svg {

	color: var(--havir-red, #e63946) !important;

	flex-shrink: 0 !important;

}



/* ====================================================

   STANDARD SINGLE-COLUMN DROPDOWNS (Compact)

   ==================================================== */

.havir-primary-menu .sub-menu:not(.havir-mega-panel) {

	position: absolute !important;

	top: 100% !important;

	right: 0 !important;

	left: auto !important;

	inset-block-start: 100% !important;

	inset-inline-start: 0 !important;

	z-index: 1000 !important;

	display: none;

	min-width: 220px !important;

	width: max-content !important;

	max-width: 280px !important;

	margin: 0 !important;

	padding: 8px !important;

	list-style: none !important;

	background: #ffffff !important;

	color: #1e293b !important;

	border-radius: 12px !important;

	border: 1px solid #e2e8f0 !important;

	border-top: 3px solid var(--havir-red, #e63946) !important;

	box-shadow: 0 16px 36px rgba(15, 23, 42, 0.14) !important;

}



/* Reverse dropdown direction for items in the left half of navbar */

.havir-primary-menu > li:nth-last-child(-n+4) > .sub-menu:not(.havir-mega-panel) {

	inset-inline-start: auto !important;

	inset-inline-end: 0 !important;

	right: auto !important;

	left: 0 !important;

}



.havir-primary-menu .sub-menu:not(.havir-mega-panel) li {

	display: block !important;

	position: relative !important;

	margin: 0 !important;

	padding: 0 !important;

}



.havir-primary-menu .sub-menu:not(.havir-mega-panel) li a,

.havir-submenu-link {

	display: flex !important;

	align-items: center !important;

	padding: 9px 14px !important;

	font-size: 13px !important;

	font-weight: 600 !important;

	color: #334155 !important;

	text-decoration: none !important;

	transition: all 0.18s ease !important;

	border-radius: 8px !important;

	white-space: nowrap !important;

}



.havir-primary-menu .sub-menu:not(.havir-mega-panel) li a:hover,

.havir-submenu-link:hover {

	background: #fef2f2 !important;

	color: var(--havir-red, #e63946) !important;

	transform: translateX(-3px) !important;

}



/* Seamless Hover Bridge */

.havir-primary-menu .sub-menu::before {

	content: '';

	position: absolute;

	top: -14px;

	right: 0;

	left: 0;

	height: 14px;

	background: transparent;

	pointer-events: auto;

}



/* Open on hover, focus, or active state */

.havir-primary-menu li:hover > .sub-menu:not(.havir-mega-panel),

.havir-primary-menu li:focus-within > .sub-menu:not(.havir-mega-panel),

.havir-primary-menu li.is-active > .sub-menu:not(.havir-mega-panel),

.havir-primary-menu li.is-open > .sub-menu:not(.havir-mega-panel),

.havir-primary-menu .menu-item-has-children:hover > .sub-menu:not(.havir-mega-panel) {

	display: block !important;

	animation: dropdownFade 0.2s cubic-bezier(0.16, 1, 0.3, 1) both;

}



.havir-primary-menu li:hover > .sub-menu.havir-mega-panel,

.havir-primary-menu li:focus-within > .sub-menu.havir-mega-panel,

.havir-primary-menu li.is-active > .sub-menu.havir-mega-panel,

.havir-primary-menu li.is-open > .sub-menu.havir-mega-panel,

.havir-primary-menu .menu-item-has-children:hover > .sub-menu.havir-mega-panel,

.havir-primary-menu .menu-item-has-mega:hover > .sub-menu.havir-mega-panel {

	display: grid !important;

	animation: dropdownFade 0.2s cubic-bezier(0.16, 1, 0.3, 1) both;

}



@keyframes dropdownFade {

	from {

		opacity: 0;

		transform: translateY(6px);

	}

	to {

		opacity: 1;

		transform: translateY(0);

	}

}



/* ============================================

   7. MOBILE MENU (Off-Canvas)

   ============================================ */

.havir-overlay {

	position: fixed;

	inset: 0;

	z-index: var(--z-overlay);

	background: rgba(0, 0, 0, 0.48);

	backdrop-filter: blur(2px);

	opacity: 1;

	transition: opacity 0.2s ease;

}



.havir-overlay[hidden] {

	display: none !important;

}



.havir-mobile-menu {

	position: fixed !important;

	inset-block: 0 !important;

	top: 0 !important;

	bottom: 0 !important;

	right: 0 !important;

	left: auto !important;

	inset-inline-start: 0 !important;

	inset-inline-end: auto !important;

	z-index: var(--z-panel, 1020) !important;

	width: min(88vw, 360px) !important;

	max-width: 360px !important;

	height: 100vh !important;

	height: 100dvh !important;

	max-height: 100vh !important;

	max-height: 100dvh !important;

	padding: var(--space-5, 1.25rem) !important;

	background: var(--havir-surface, #ffffff) !important;

	box-shadow: -15px 0 45px rgba(15, 23, 42, 0.18) !important;

	transform: translate3d(115%, 0, 0) !important;

	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s ease !important;

	overflow-y: auto !important;

	overscroll-behavior: contain !important;

	pointer-events: none !important;

	visibility: hidden !important;

	box-sizing: border-box !important;

	direction: rtl !important;

	will-change: transform;

}



.admin-bar .havir-mobile-menu {

	top: 32px !important;

	height: calc(100vh - 32px) !important;

	height: calc(100dvh - 32px) !important;

}



@media (max-width: 782px) {

	.admin-bar .havir-mobile-menu {

		top: 46px !important;

		height: calc(100vh - 46px) !important;

		height: calc(100dvh - 46px) !important;

	}

}



.havir-mobile-menu.is-open,

body.has-mobile-menu-open .havir-mobile-menu {

	transform: translate3d(0, 0, 0) !important;

	pointer-events: auto !important;

	visibility: visible !important;

}



body.has-mini-cart-open .havir-mobile-menu {

	pointer-events: none !important;

	visibility: hidden !important;

	transform: translate3d(115%, 0, 0) !important;

}



/* LTR compatibility */

[dir="ltr"] .havir-mobile-menu {

	right: auto !important;

	left: 0 !important;

	transform: translate3d(-115%, 0, 0) !important;

	box-shadow: 15px 0 45px rgba(15, 23, 42, 0.18) !important;

}



[dir="ltr"] .havir-mobile-menu.is-open,

[dir="ltr"] body.has-mobile-menu-open .havir-mobile-menu {

	transform: translate3d(0, 0, 0) !important;

}



.havir-mobile-menu__header {

	display: flex;

	align-items: center;

	justify-content: space-between;

	margin-block-end: var(--space-5);

}



.havir-mobile-nav,

.havir-mobile-menu ul {

	margin: 0;

	padding: 0;

	list-style: none;

}



.havir-mobile-nav a,

.havir-mobile-menu__links a {

	display: block;

	padding-block: var(--space-3);

	border-block-end: 1px solid var(--havir-border);

	overflow-wrap: anywhere;

}



.havir-mobile-nav .sub-menu {

	margin: 0;

	padding-inline-start: var(--space-4);

	list-style: none;

}



.havir-mobile-nav .sub-menu a {

	padding-block: var(--space-2);

	font-size: var(--font-sm);

	color: var(--havir-text-muted);

}



.havir-mobile-nav .sub-menu a:hover {

	color: var(--havir-red);

}



.havir-mobile-search {

	position: relative;

	display: grid;

	gap: var(--space-2);

	margin-block-end: var(--space-5);

}



.havir-mobile-search .havir-search-input {

	min-block-size: 46px;

	border: 1px solid var(--havir-border);

	border-radius: var(--radius-sm);

	background: var(--havir-surface-alt);

}



.havir-mobile-search button[type="submit"] {

	min-block-size: 44px;

	border: 0;

	border-radius: var(--radius-sm);

	background: var(--havir-red);

	color: #fff;

	font-weight: 800;

}



/* ============================================

   8. MINI CART SIDEBAR

   ============================================ */

.havir-mini-cart {

	position: fixed;

	inset-block: 0;

	inset-inline-start: 0;

	inset-inline-end: auto;

	top: 0;

	right: 0;

	bottom: 0;

	left: auto;

	z-index: var(--z-panel);

	display: flex;

	flex-direction: column;

	width: min(92vw, 420px);

	max-width: 420px;

	height: 100vh;

	height: 100dvh;

	max-height: 100vh;

	max-height: 100dvh;

	padding: 0;

	background: linear-gradient(180deg, #fff 0%, #fafafa 100%);

	box-shadow: -24px 0 60px rgba(15, 23, 42, 0.18);

	direction: rtl;

	transform: translate3d(110%, 0, 0);

	transition: var(--transition);

	overflow: hidden;

	overscroll-behavior: contain;

	isolation: isolate;

	pointer-events: none;

	visibility: hidden;

	will-change: transform;

}



.admin-bar .havir-mini-cart {

	top: 32px;

	height: calc(100vh - 32px);

	height: calc(100dvh - 32px);

	max-height: calc(100vh - 32px);

	max-height: calc(100dvh - 32px);

}



.havir-mini-cart.is-open {

	transform: translate3d(0, 0, 0);

	pointer-events: auto;

	visibility: visible;

}



body.has-mobile-menu-open .havir-mini-cart {

	pointer-events: none;

	visibility: hidden;

	transform: translate3d(110%, 0, 0);

}



body.has-mini-cart-open .havir-mini-cart {

	pointer-events: auto;

	visibility: visible;

	transform: translate3d(0, 0, 0);

}



.havir-mini-cart__header {

	position: sticky;

	inset-block-start: 0;

	z-index: 2;

	display: flex;

	align-items: center;

	justify-content: space-between;

	gap: var(--space-4);

	padding: var(--space-5);

	background: rgba(255, 255, 255, 0.94);

	border-block-end: 1px solid var(--havir-border);

	backdrop-filter: blur(12px);

}



.havir-mini-cart__header strong,

.havir-mini-cart__header span {

	display: block;

}



.havir-mini-cart__header strong {

	color: var(--havir-navy);

	font-size: var(--font-lg);

}



.havir-mini-cart__header span {

	color: var(--havir-muted);

	font-size: var(--font-sm);

}



.havir-mini-cart__content {

	position: relative;

	flex: 1 1 auto;

	min-block-size: 0;

	padding: var(--space-5);

	overflow-x: hidden;

	overflow-y: auto;

	transition: opacity 0.2s ease;

}



.havir-mini-cart__content.is-busy {

	opacity: 0.66;

}



.havir-mini-cart__content.is-busy::after {

	content: "";

	position: absolute;

	inset: 0;

	background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0));

	animation: shimmer 1.2s linear infinite;

	pointer-events: none;

}



.havir-mini-cart-loading {

	display: flex;

	flex-direction: column;

	align-items: center;

	justify-content: center;

	padding: var(--space-8, 48px) var(--space-4, 16px);

	gap: var(--space-3, 12px);

	color: var(--havir-muted, #64748b);

	text-align: center;

}



.havir-mini-cart-loading .havir-spinner {

	width: 32px;

	height: 32px;

	border: 3px solid rgba(0, 0, 0, 0.08);

	border-top-color: var(--havir-red, #f90074);

	border-radius: 50%;

	animation: havirSearchSpin 0.75s linear infinite;

}



.havir-mini-cart-loading span:not(.havir-spinner) {

	font-size: var(--font-sm, 13.5px);

	font-weight: 600;

	color: var(--havir-navy, #0f172a);

}



.woocommerce-mini-cart {

	margin: 0;

	padding: 0;

	list-style: none;

}



.woocommerce-mini-cart-item {

	display: grid;

	grid-template-columns: 82px minmax(0, 1fr);

	column-gap: var(--space-4);

	row-gap: var(--space-2);

	align-items: start;

	margin-block-end: var(--space-3);

	padding: var(--space-3);

	padding-inline-end: 48px;

	border: 1px solid var(--havir-border);

	border-radius: var(--radius);

	background: var(--havir-surface);

	position: relative;

	box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);

}



.havir-mini-cart-item__media {

	min-inline-size: 0;

}



.havir-mini-cart-item__thumb {

	display: block;

	inline-size: 82px;

}



.havir-mini-cart-item__thumb img {

	inline-size: 82px;

	block-size: 82px;

	object-fit: cover;

	border-radius: var(--radius-sm);

	background: var(--havir-surface-alt);

}



.havir-mini-cart-item__body {

	display: grid;

	gap: var(--space-2);

	min-inline-size: 0;

	padding-inline-end: var(--space-1);

}



.havir-mini-cart-item__title {

	display: block;

	color: var(--havir-navy);

	font-weight: 800;

	line-height: 1.7;

	overflow-wrap: anywhere;

}



.havir-mini-cart-item__meta {

	color: var(--havir-muted);

	font-size: var(--font-sm);

	line-height: 1.7;

}



.havir-mini-cart-item__meta p,

.havir-mini-cart-item__meta dl,

.havir-mini-cart-item__meta dd {

	margin: 0;

}



.havir-mini-cart-item__meta dl {

	display: flex;

	flex-wrap: wrap;

	gap: 0 var(--space-2);

}



.havir-mini-cart-item__meta dt {

	font-weight: 700;

}



.havir-mini-cart-item__pricing .quantity {

	display: block;

	margin-block-start: 0;

	border: 0;

	color: var(--havir-muted);

	font-size: var(--font-sm);

	line-height: 1.8;

}



.havir-mini-cart-item__quantity {

	display: grid;

	gap: var(--space-2);

}



.havir-mini-cart-item__pricing .havir-quantity-control {

	inline-size: fit-content;

}



.havir-mini-cart-item__pricing .havir-quantity-control .quantity input.qty {

	inline-size: 42px;

	min-block-size: 36px;

}



.havir-mini-cart-item__pricing .havir-quantity-control .havir-qty-btn {

	inline-size: 34px;

	block-size: 36px;

}



.woocommerce-mini-cart-item a.remove {

	position: absolute;

	inset-block-start: var(--space-2);

	inset-inline-end: var(--space-3);

	display: grid;

	place-items: center;

	inline-size: 32px;

	block-size: 32px;

	border-radius: 50%;

	background: var(--havir-red-soft);

	color: var(--havir-red);

	font-size: 0;

}



.woocommerce-mini-cart-item a.remove span {

	font-size: var(--font-lg);

	line-height: 1;

}



@media (max-width: 782px) {

	.admin-bar .havir-mini-cart {

		top: 46px;

		height: calc(100vh - 46px);

		height: calc(100dvh - 46px);

		max-height: calc(100vh - 46px);

		max-height: calc(100dvh - 46px);

	}

}



@media (max-width: 480px) {

	.havir-mini-cart {

		width: 100vw;

		max-width: 100vw;

	}



	.havir-mini-cart__header,

	.havir-mini-cart__content {

		padding-inline: var(--space-4);

	}

}



.havir-mini-cart a {

	overflow-wrap: anywhere;

}



.havir-mini-cart .woocommerce-mini-cart__total {

	display: flex;

	justify-content: space-between;

	gap: var(--space-3);

	margin-block-start: var(--space-4);

	padding: var(--space-4);

	border: 1px solid var(--havir-border);

	border-radius: var(--radius);

	background: var(--havir-surface);

	color: var(--havir-navy);

	font-weight: 900;

}



.havir-mini-cart .woocommerce-mini-cart__buttons {

	display: grid;

	gap: var(--space-2);

	margin-block-start: var(--space-3);

}



.havir-mini-cart .woocommerce-mini-cart__buttons .button {

	display: flex;

	align-items: center;

	justify-content: center;

	min-block-size: 48px;

	border-radius: var(--radius-sm);

	background: var(--havir-navy);

	color: #fff;

	font-weight: 850;

}



.havir-mini-cart .woocommerce-mini-cart__buttons .checkout {

	background: var(--havir-red);

}



.havir-mini-cart .woocommerce-mini-cart__empty-message {

	margin: 0;

	padding: var(--space-6);

	border: 1px dashed var(--havir-border);

	border-radius: var(--radius);

	background: var(--havir-surface);

	text-align: center;

	color: var(--havir-muted);

}



@media (min-width: 992px) {

	.havir-mobile-menu,

	body.has-mobile-menu-open .havir-mobile-menu,

	.havir-mobile-menu.is-open {

		display: none !important;

		pointer-events: none !important;

		visibility: hidden !important;

		transform: translate3d(115%, 0, 0) !important;

	}

}



/* ============================================

   9. SEARCH DROPDOWN

   ============================================ */

.havir-search-results {

	position: absolute !important;

	top: 100% !important;

	margin-top: 10px !important;

	right: 0 !important;

	left: 0 !important;

	width: 100% !important;

	min-width: 100% !important;

	max-width: 100% !important;

	box-sizing: border-box !important;

	z-index: 99999 !important;

	max-height: 480px !important;

	overflow-y: auto !important;

	padding: 10px !important;

	background: #ffffff !important;

	border: 1.5px solid #e2e8f0 !important;

	border-radius: 18px !important;

	box-shadow: 0 20px 45px rgba(15, 23, 42, 0.16), 0 4px 12px rgba(15, 23, 42, 0.06) !important;

	backdrop-filter: blur(10px);

}



.havir-search-results::-webkit-scrollbar {

	width: 6px;

}



.havir-search-results::-webkit-scrollbar-track {

	background: #f1f5f9;

	border-radius: 999px;

}



.havir-search-results::-webkit-scrollbar-thumb {

	background: #cbd5e1;

	border-radius: 999px;

}



.havir-search-results::-webkit-scrollbar-thumb:hover {

	background: #94a3b8;

}



.havir-search-loading {

	display: flex;

	align-items: center;

	justify-content: center;

	gap: 10px;

	padding: 24px 16px;

	color: #64748b;

	font-size: 0.88rem;

	font-weight: 600;

}



.havir-search-spinner {

	width: 20px;

	height: 20px;

	border: 2.5px solid #e2e8f0;

	border-top-color: var(--havir-red, #e63946);

	border-radius: 50%;

	animation: havirSearchSpin 0.75s linear infinite;

}



@keyframes havirSearchSpin {

	to {

		transform: rotate(360deg);

	}

}



.havir-search-list {

	display: grid;

	gap: 4px;

}



.havir-search-meta {

	display: flex;

	align-items: center;

	justify-content: space-between;

	flex-wrap: wrap;

	gap: var(--space-2);

	padding: 8px 12px;

	margin-bottom: 6px;

	color: #10b981;

	font-size: 0.82rem;

	font-weight: 700;

	border-bottom: 1px solid #f1f5f9;

}



.havir-search-meta kbd {

	padding: 2px 7px;

	color: #10b981;

	background: rgba(16, 185, 129, 0.09);

	border: 1px solid rgba(16, 185, 129, 0.2);

	border-radius: 6px;

	font: inherit;

	font-size: 0.75rem;

}



.havir-search-result {

	display: grid;

	grid-template-columns: 50px minmax(0, 1fr) auto;

	gap: 12px;

	align-items: center;

	min-height: 64px;

	padding: 8px 12px;

	border-radius: 12px;

	color: var(--havir-text);

	text-decoration: none;

	border-bottom: 1px solid #f8fafc;

	transition: background 0.15s ease, transform 0.15s ease;

}



.havir-search-result:hover,

.havir-search-result.is-active {

	background: #f8fafc;

}



.havir-search-result:last-child {

	border-bottom: 0;

}



.havir-search-result img,

.havir-search-thumb {

	display: block;

	width: 50px;

	height: 50px;

	inline-size: 50px;

	block-size: 50px;

	object-fit: cover;

	background: #f1f5f9;

	border: 1px solid #e2e8f0;

	border-radius: 10px;

	flex-shrink: 0;

}



.havir-search-result__body {

	display: grid;

	gap: 3px;

	min-width: 0;

}



.havir-search-result__top {

	display: flex;

	align-items: center;

	gap: 8px;

	min-width: 0;

	color: #64748b;

	font-size: 0.72rem;

}



.havir-search-result strong {

	display: -webkit-box;

	overflow: hidden;

	color: #0f172a;

	font-size: 0.88rem;

	font-weight: 700;

	line-height: 1.5;

	text-overflow: ellipsis;

	white-space: normal;

	-webkit-line-clamp: 2;

	-webkit-box-orient: vertical;

}



.havir-search-category,

.havir-search-sku {

	overflow: hidden;

	text-overflow: ellipsis;

	white-space: nowrap;

}



.havir-search-sku {

	direction: ltr;

	font-size: 0.68rem;

	unicode-bidi: plaintext;

}



.havir-search-result__side {

	display: grid;

	gap: 2px;

	justify-items: end;

	text-align: end;

	align-self: center;

	white-space: nowrap;

	flex-shrink: 0;

}



.havir-search-price {

	color: var(--havir-red, #e63946);

	font-weight: 800;

	font-size: 0.92rem;

}



.havir-search-regular {

	color: #94a3b8;

	font-size: 0.75rem;

	text-decoration: line-through;

}



.havir-search-stock {

	color: #10b981;

	font-size: 0.72rem;

	font-weight: 700;

}



.havir-search-stock.is-empty {

	color: #ef4444;

}



.havir-search-all,

.havir-search-empty {

	display: block;

	padding: 12px;

	color: #0f172a;

	font-weight: 800;

	font-size: 0.88rem;

	text-align: center;

	text-decoration: none;

}



.havir-search-all {

	margin-top: 8px;

	border-radius: 12px;

	background: #f1f5f9;

	color: #1e293b;

	transition: background 0.15s ease, color 0.15s ease;

}



.havir-search-all:hover {

	background: #e2e8f0;

	color: var(--havir-red, #e63946);

}



@media (max-width: 640px) {

	.havir-search-results {

		position: absolute !important;

		top: 100% !important;

		margin-top: 8px !important;

		right: 0 !important;

		left: 0 !important;

		width: 100% !important;

		max-height: 65vh !important;

		border-radius: 14px !important;

		z-index: 99999 !important;

	}



	.havir-search-result {

		grid-template-columns: 44px minmax(0, 1fr) auto !important;

		gap: 10px !important;

		padding: 8px 10px !important;

	}



	.havir-search-result img,

	.havir-search-thumb {

		width: 44px !important;

		height: 44px !important;

		inline-size: 44px !important;

		block-size: 44px !important;

	}



	.havir-search-result strong {

		font-size: 0.84rem !important;

	}



	.havir-search-price {

		font-size: 0.84rem !important;

	}

}



.havir-mobile-search .havir-search-results {

	position: relative !important;

	top: 0 !important;

	margin-top: 10px !important;

	max-height: 350px !important;

	box-shadow: none !important;

	border: 1px solid var(--havir-border) !important;

}



/* ============================================

   10. HERO SECTION (VIEWPORT CALIBRATED)

   ============================================ */

.havir-hero {

	position: relative;

	overflow: hidden;

	/* Responsive instead of a rigid 420px: the banner must fill the width and

	   stay comfortable from small phones up to large desktop displays. */

	height: clamp(360px, 52vh, 560px);

	min-height: clamp(360px, 52vh, 560px);

	background: #0b1220;

	color: var(--havir-navy, #0F172A);

	direction: rtl;

	width: 100%;

	max-width: 100%;

}



.havir-hero::before,

.havir-hero::after {

	display: none;

}



.havir-hero__track {

	position: relative;

	width: 100%;

	height: 100%;

	direction: rtl;

	transform: none;

	display: block;

}



.havir-hero__slide {

	position: absolute;

	inset: 0;

	width: 100%;

	height: 100%;

	display: flex;

	align-items: center;

	direction: rtl;

	background-size: cover;

	background-position: center center;

	background-repeat: no-repeat;

	opacity: 0;

	visibility: hidden;

	transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;

	z-index: 1;

}



.havir-hero__slide.is-active,

.havir-hero__slide:first-child {

	opacity: 1;

	visibility: visible;

	z-index: 2;

}



.havir-hero__slide::after {

	content: '';

	position: absolute;

	inset: 0;

	/* Dark scrim (RTL): heavy on the right where the copy sits, clear on the

	   left so the artwork stays visible. */

	background:

		linear-gradient(to left, rgba(6, 10, 20, 0.92) 0%, rgba(6, 10, 20, 0.72) 42%, rgba(6, 10, 20, 0.18) 75%, rgba(6, 10, 20, 0.06) 100%),

		linear-gradient(to top, rgba(6, 10, 20, 0.5) 0%, rgba(6, 10, 20, 0) 55%);

	z-index: 1;

	pointer-events: none;

}



.havir-hero__slide--stationery,

.havir-hero__slide--red {

	background-image: url('../images/banner-hero-havir.svg');

}



.havir-hero__slide--gifts,

.havir-hero__slide--navy {

	background-image: url('../images/banner-2-gifts.jpg');

	background-image: image-set(

		url('../images/banner-2-gifts.webp') type('image/webp'),

		url('../images/banner-2-gifts.jpg') type('image/jpeg')

	);

}



.havir-hero__slide--art,

.havir-hero__slide--gold {

	background-image: url('../images/banner-3-art.jpg');

	background-image: image-set(

		url('../images/banner-3-art.webp') type('image/webp'),

		url('../images/banner-3-art.jpg') type('image/jpeg')

	);

}



.havir-hero__container {

	position: relative;

	z-index: 3;

	height: 100%;

	display: flex;

	align-items: center;

	justify-content: flex-start;

}



.havir-hero__content {

	position: relative;

	z-index: 3;

	max-width: 560px;

	background: rgba(9, 14, 26, 0.55);

	backdrop-filter: blur(14px);

	-webkit-backdrop-filter: blur(14px);

	padding: clamp(20px, 2.5vw, 30px) clamp(22px, 2.8vw, 34px);

	border-radius: 20px;

	border: 1px solid rgba(255, 255, 255, 0.14);

	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);

	margin-inline-start: 0;

}



.havir-hero__eyebrow {

	display: inline-flex;

	align-items: center;

	padding: 4px 14px;

	background: rgba(230, 57, 70, 0.1);

	border: 1px solid rgba(230, 57, 70, 0.25);

	color: var(--havir-red, #D32F2F);

	border-radius: 30px;

	font-size: 12px;

	font-weight: 800;

	margin-bottom: 8px;

}



.havir-hero__content h1,

.havir-hero__content h2 {

	font-size: clamp(20px, 2.4vw, 30px);

	font-weight: 900;

	line-height: 1.4;

	color: #FFFFFF;

	margin-bottom: 10px;

	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);

}



.havir-hero__content p {

	font-size: 14px;

	line-height: 1.9;

	color: #E2E8F0;

	margin-bottom: 18px;

	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);

}



.havir-hero__actions {

	display: flex;

	flex-wrap: wrap;

	gap: 12px;

	margin-top: 0;

}



.havir-hero__actions .btn-secondary,

.havir-hero__actions .btn-primary {

	background: linear-gradient(135deg, var(--havir-red, #E63946), #D90429);

	color: #FFFFFF;

	border: none;

	font-weight: 800;

	font-size: 14px;

	padding: 10px 24px;

	border-radius: 10px;

	box-shadow: 0 4px 14px rgba(230, 57, 70, 0.35);

	transition: all 0.25s ease;

}



.havir-hero__actions .btn-secondary:hover,

.havir-hero__actions .btn-primary:hover {

	transform: translateY(-2px);

	box-shadow: 0 6px 20px rgba(230, 57, 70, 0.45);

}



.havir-hero__actions .btn-outline {

	background: rgba(255, 255, 255, 0.9);

	color: #1E293B;

	border: 1px solid #CBD5E1;

	font-weight: 700;

	font-size: 14px;

	padding: 10px 20px;

	border-radius: 10px;

	transition: all 0.25s ease;

}



.havir-hero__actions .btn-outline:hover {

	background: #FFFFFF;

	border-color: var(--havir-red, #E63946);

	color: var(--havir-red, #E63946);

}



.havir-hero__dots {

	position: absolute;

	z-index: 5;

	inset-block-end: 14px;

	left: 50%;

	transform: translateX(-50%);

	display: flex;

	gap: 8px;

}



.havir-hero__dots button {

	width: 10px;

	height: 10px;

	border-radius: 50%;

	background: rgba(0, 0, 0, 0.22);

	border: none;

	cursor: pointer;

	transition: all 0.3s ease;

	padding: 0;

}



.havir-hero__dots button.is-active {

	width: 26px;

	border-radius: 13px;

	background: var(--havir-red, #E63946);

	box-shadow: 0 0 8px rgba(230, 57, 70, 0.5);

}



/* Standalone Metrics Bar */

.havir-metrics-strip {

	background: #FFFFFF;

	border-bottom: 1px solid #E2E8F0;

	padding: 14px 0;

	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);

}



.havir-metrics-grid {

	display: grid;

	grid-template-columns: repeat(3, minmax(0, 1fr));

	gap: 16px;

}



.havir-metric-card {

	display: flex;

	align-items: center;

	justify-content: space-between;

	gap: 14px;

	padding: 14px 24px;

	background: #FFFFFF;

	border: 1px solid #EEF2F6;

	border-radius: 12px;

	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);

	transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);

}



.havir-metric-card:hover {

	transform: translateY(-2px);

	border-color: rgba(230, 57, 70, 0.25);

	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);

}



.havir-metric-card strong {

	display: block;

	font-size: 22px;

	font-weight: 900;

	color: var(--havir-red, #E63946);

	white-space: nowrap;

	font-family: "Vazirmatn", sans-serif;

}



.havir-metric-card span {

	display: block;

	font-size: 13.5px;

	font-weight: 600;

	color: #334155;

}



@media (max-width: 991px) {

	.havir-hero {

		height: clamp(340px, 46vh, 460px);

		min-height: clamp(340px, 46vh, 460px);

	}



	.havir-hero__content {

		max-width: 460px;

	}



	.havir-hero__content h1,

	.havir-hero__content h2 {

		font-size: 22px;

	}



	.havir-hero__content p {

		font-size: 13px;

		margin-bottom: 14px;

	}



	.havir-metrics-grid {

		gap: 10px;

	}



	.havir-metric-card {

		padding: 10px 14px;

	}



	.havir-metric-card strong {

		font-size: 17px;

	}



	.havir-metric-card span {

		font-size: 12px;

	}

}



@media (max-width: 600px) {

	.havir-hero {

		height: auto;

		min-height: 320px;

	}



	.havir-hero__slide::after {

		background: linear-gradient(180deg, rgba(6, 10, 20, 0.55) 0%, rgba(6, 10, 20, 0.88) 100%);

	}



	.havir-hero__slide {

		position: relative;

		inset: auto;

		min-height: 320px;

		padding: 34px 0;

	}



	.havir-hero__track {

		height: auto;

	}



	.havir-hero__content {

		max-width: 100%;

		padding: 14px 16px;

	}



	.havir-hero__eyebrow {

		font-size: 11px;

		padding: 2px 10px;

		margin-bottom: 6px;

	}



	.havir-hero__content h1,

	.havir-hero__content h2 {

		font-size: 17px;

		margin-bottom: 6px;

	}



	.havir-hero__content p {

		display: none;

	}



	.havir-hero__actions .btn-secondary,

	.havir-hero__actions .btn-primary {

		padding: 6px 14px;

		font-size: 12px;

	}



	.havir-hero__actions .btn-outline {

		padding: 6px 12px;

		font-size: 12px;

	}



	.havir-metrics-grid {

		grid-template-columns: 1fr;

		gap: 8px;

	}



	.havir-metric-card {

		justify-content: space-between;

	}

}





/* ============================================

   11. CATEGORY CARDS

   ============================================ */

.havir-section {

	padding-block: 44px 48px;

}



.havir-section__header {

	display: flex;

	align-items: center;

	justify-content: space-between;

	gap: var(--space-4);

	margin-block-end: 24px;

}



.havir-category-card {

	display: grid;

	gap: var(--space-4);

	padding: var(--space-6);

	background: var(--havir-surface);

	border: 1px solid var(--havir-border);

	border-radius: var(--radius);

	box-shadow: var(--shadow);

	transition: var(--transition);

}



.havir-category-card:hover {

	transform: translateY(-6px);

	box-shadow: var(--shadow-lg);

}



.havir-category-card h3 {

	margin-block-end: 0;

}



.havir-category-card span:last-child {

	color: var(--havir-muted);

	font-size: var(--font-sm);

	font-weight: 700;

}



.havir-category-card__icon {

	display: grid;

	place-items: center;

	inline-size: 64px;

	block-size: 64px;

	border-radius: 50%;

	background: var(--havir-red-soft);

	color: var(--havir-red);

}



/* ============================================

   12. PRODUCT CARDS (Consolidated & Unified)

   ============================================ */

.havir-product-card {

	position: relative;

	background: #ffffff;

	border: 1px solid var(--havir-border, #e5e7eb);

	border-radius: 16px;

	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);

	overflow: hidden;

	display: flex !important;

	flex-direction: column !important;

	justify-content: flex-start;

	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;

	height: auto;

	box-sizing: border-box;

}



.havir-product-card:hover {

	transform: translateY(-4px);

	box-shadow: 0 10px 24px rgba(230, 57, 70, 0.12);

	border-color: rgba(230, 57, 70, 0.25);

}



.havir-product-card__media {

	position: relative;

	width: 100%;

	aspect-ratio: 1 / 1;

	height: auto;

	min-height: auto;

	max-height: auto;

	background: #ffffff;

	display: flex;

	align-items: center;

	justify-content: center;

	overflow: hidden;

	padding: 14px;

	box-sizing: border-box;

	border-bottom: 1px solid rgba(241, 245, 249, 0.9);

}



.havir-product-card__image-link {

	display: flex;

	align-items: center;

	justify-content: center;

	width: 100%;

	height: 100%;

	position: relative;

}



.havir-product-card__image-wrap {

	position: relative;

	width: 100%;

	height: 100%;

	display: flex;

	align-items: center;

	justify-content: center;

}



.havir-product-card__media img,

.havir-product-card__image-link img,

.havir-product-card__img,

.attachment-woocommerce_thumbnail {

	max-width: 100% !important;

	max-height: 100% !important;

	width: 100% !important;

	height: 100% !important;

	object-fit: contain !important;

	object-position: center !important;

	transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease;

	display: block;

	margin: 0 auto;

}



.havir-product-card:hover .havir-product-card__media img,

.havir-product-card:hover .havir-product-card__image-link img,

.havir-product-card:hover .havir-product-card__img,

.havir-product-card:hover .attachment-woocommerce_thumbnail {

	transform: scale(1.06);

}



/* Secondary image on hover (Digikala / Zara / Shopify standard) */

.havir-product-secondary-image {

	position: absolute !important;

	inset: 0 !important;

	width: 100% !important;

	height: 100% !important;

	object-fit: contain !important;

	object-position: center !important;

	opacity: 0 !important;

	transition: opacity 0.35s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;

	pointer-events: none !important;

}



.havir-product-card:hover .havir-product-card__image-wrap.has-secondary-image .attachment-woocommerce_thumbnail {

	opacity: 0 !important;

}



.havir-product-card:hover .havir-product-secondary-image {

	opacity: 1 !important;

	transform: scale(1.06) !important;

}



.havir-product-placeholder {

	display: flex;

	flex-direction: column;

	align-items: center;

	justify-content: center;

	gap: var(--space-2);

	width: 100%;

	height: 100%;

	color: var(--havir-red);

	text-align: center;

}



.havir-product-placeholder__icon {

	display: flex;

	align-items: center;

	justify-content: center;

	width: 48px;

	height: 48px;

	border-radius: 14px;

	background: var(--havir-red-soft);

}



.havir-product-placeholder__label {

	color: var(--havir-muted);

	font-size: var(--font-xs);

	font-weight: 700;

}



/* Badges */

.havir-product-card__badge,

.havir-product-card .onsale,

.woocommerce span.onsale,

.woocommerce ul.products li.product .onsale,

.havir-featured-badge {

	position: absolute;

	top: 10px;

	right: 10px;

	left: auto;

	bottom: auto;

	inset-block-start: 10px;

	inset-inline-start: 10px;

	z-index: 4;

	font-family: "Vazirmatn", Tahoma, sans-serif;

	font-size: 11px;

	font-weight: 800;

	line-height: 1;

	padding: 4px 10px;

	border-radius: 20px;

	background: linear-gradient(135deg, #ef4444, #dc2626);

	color: #ffffff !important;

	box-shadow: 0 2px 8px rgba(239, 68, 68, 0.35);

	min-height: auto;

	min-width: auto;

	border: none;

}



/* Wishlist */

.havir-wishlist-button {

	position: absolute;

	top: 10px;

	left: 10px;

	right: auto;

	inset-block-start: 10px;

	inset-inline-end: 10px;

	width: 36px;

	height: 36px;

	min-width: 36px;

	min-height: 36px;

	border-radius: 50%;

	background: rgba(255, 255, 255, 0.94);

	border: 1px solid #e2e8f0;

	display: flex;

	align-items: center;

	justify-content: center;

	cursor: pointer;

	z-index: 5;

	color: #64748b;

	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);

	transition: all 0.2s ease;

	padding: 0;

}



.havir-wishlist-button::before {

	content: '';

	position: absolute;

	top: 50%;

	left: 50%;

	transform: translate(-50%, -50%);

	width: 48px;

	height: 48px;

	min-width: 48px;

	min-height: 48px;

}



.havir-wishlist-button:hover {

	color: var(--havir-red, #e63946);

	transform: scale(1.1);

	background: #ffffff;

}



.havir-wishlist-button.is-active {

	background: var(--havir-red, #e63946);

	color: #ffffff;

	border-color: var(--havir-red, #e63946);

}



.havir-wishlist-button svg {

	width: 15px;

	height: 15px;

}



/* Quick View */

.havir-quick-view,

.havir-quick-view-btn {

	position: absolute;

	bottom: 12px;

	left: 50%;

	top: auto !important;

	right: auto !important;

	transform: translateX(-50%) translateY(8px);

	opacity: 0;

	visibility: hidden;

	background: rgba(15, 23, 42, 0.88) !important;

	backdrop-filter: blur(8px);

	-webkit-backdrop-filter: blur(8px);

	color: #ffffff !important;

	border: 1px solid rgba(255, 255, 255, 0.18) !important;

	border-radius: 999px !important;

	padding: 6px 14px !important;

	font-size: 11.5px !important;

	font-weight: 700 !important;

	cursor: pointer;

	white-space: nowrap;

	transition: all 0.24s cubic-bezier(0.16, 1, 0.3, 1) !important;

	z-index: 6;

	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25) !important;

	display: inline-flex !important;

	align-items: center;

	gap: 6px;

	width: auto !important;

	height: 32px !important;

}



.havir-product-card:hover .havir-quick-view,

.havir-product-card:hover .havir-quick-view-btn {

	opacity: 1 !important;

	visibility: visible !important;

	transform: translateX(-50%) translateY(0) !important;

}



.havir-quick-view:hover,

.havir-quick-view-btn:hover {

	background: var(--havir-red, #e63946) !important;

	color: #ffffff !important;

	border-color: transparent !important;

	box-shadow: 0 6px 18px rgba(230, 57, 70, 0.4) !important;

}



.havir-quick-view svg,

.havir-quick-view-btn svg {

	width: 14px !important;

	height: 14px !important;

	display: inline-block !important;

	vertical-align: middle !important;

}



/* Card Body */

.havir-product-card__body {

	padding: 12px 14px 14px;

	display: flex !important;

	flex-direction: column !important;

	flex-grow: 1 !important;

	gap: 5px;

	box-sizing: border-box;

}



.havir-product-category {

	font-size: 11px;

	color: #64748b;

	line-height: 1.2;

	margin: 0;

	white-space: nowrap;

	overflow: hidden;

	text-overflow: ellipsis;

}



.havir-product-card__title,

.havir-product-card .woocommerce-loop-product__title,

.havir-product-card__body h3 {

	font-size: 13.5px !important;

	font-weight: 700 !important;

	color: #1e293b !important;

	line-height: 1.5 !important;

	margin: 0 !important;

	padding: 0 !important;

	display: -webkit-box !important;

	-webkit-line-clamp: 2 !important;

	-webkit-box-orient: vertical !important;

	overflow: hidden !important;

	text-overflow: ellipsis !important;

	min-height: 42px !important;

	max-height: 42px !important;

}



.havir-product-card__title a,

.havir-product-card .woocommerce-loop-product__title a,

.havir-product-card__body h3 a {

	color: #1e293b !important;

	text-decoration: none !important;

	transition: color 0.2s ease;

}



.havir-product-card:hover .woocommerce-loop-product__title a,

.havir-product-card:hover .havir-product-card__title a,

.havir-product-card:hover h3 a {

	color: var(--havir-red, #e63946) !important;

}



/* Meta & Reviews */

.havir-product-card__meta {

	display: flex;

	align-items: center;

	gap: 6px;

	min-height: 18px;

	font-size: 11px;

	color: #64748b;

}



.havir-product-card__reviews {

	font-size: 11px;

	color: #64748b;

	font-weight: 600;

}



.havir-product-card__reviews--muted {

	color: #cbd5e1;

}



.havir-product-card .star-rating,

.havir-product-card .havir-rating {

	font-size: 11px;

	color: #f59e0b;

}



/* Stock */

.havir-product-card__stock {

	font-size: 11px;

	color: #047857;

	margin: 0;

	line-height: 1.3;

	font-weight: 600;

}



.havir-product-card__stock .stock {

	margin: 0;

	color: #047857;

	font-weight: 600;

}



.havir-product-card__stock .stock.in-stock {

	color: #047857;

	font-weight: 600;

}



.havir-product-card__stock .stock.out-of-stock {

	color: #dc2626;

	font-weight: 600;

}



.outofstock .havir-product-card__media::after {

	content: "ناموجود";

	position: absolute;

	inset: 0;

	display: flex;

	align-items: center;

	justify-content: center;

	background: rgba(255, 255, 255, 0.8);

	color: #64748b;

	font-weight: 800;

	font-size: 13px;

	z-index: 3;

}



/* Price */

.havir-product-price,

.havir-product-card .price {

	font-size: 15px !important;

	font-weight: 800 !important;

	color: var(--havir-red, #e63946) !important;

	margin-block-start: auto !important;

	padding-block-start: 4px !important;

	padding-block-end: 2px !important;

	display: flex !important;

	align-items: baseline !important;

	flex-wrap: wrap !important;

	gap: 6px !important;

	line-height: 1.3 !important;

	min-height: 26px;

}



.havir-product-card .price del {

	font-size: 11.5px !important;

	color: #475569 !important;

	font-weight: 500 !important;

	text-decoration: line-through !important;

	opacity: 1 !important;

}



.havir-product-card .price ins {

	font-size: 15px !important;

	font-weight: 800 !important;

	color: var(--havir-red, #e63946) !important;

	text-decoration: none !important;

}



.havir-product-card .price .woocommerce-Price-amount,

.havir-product-price {

	color: inherit;

	font-family: "Vazirmatn", Tahoma, sans-serif;

	white-space: nowrap;

}



.havir-product-card .price .woocommerce-Price-currencySymbol {

	font-size: 11px;

	font-weight: 500;

	margin-inline-start: 2px;

}



/* Action Button (Add to Cart / Select Options) */

.havir-product-card .button,

.havir-product-card .btn-primary,

.havir-product-card a.button,

.havir-product-card .added_to_cart {

	width: 100% !important;

	inline-size: 100% !important;

	height: 38px !important;

	min-height: 38px !important;

	padding: 0 12px !important;

	border-radius: 10px !important;

	font-size: 12.5px !important;

	font-weight: 700 !important;

	background: linear-gradient(135deg, #e63946, #d32f2f) !important;

	color: #ffffff !important;

	border: none !important;

	cursor: pointer !important;

	transition: all 0.22s ease !important;

	display: inline-flex !important;

	align-items: center !important;

	justify-content: center !important;

	text-align: center !important;

	text-decoration: none !important;

	box-shadow: 0 2px 6px rgba(230, 57, 70, 0.2) !important;

	margin-block-start: 6px !important;

	margin-block-end: 0 !important;

	line-height: 1 !important;

	box-sizing: border-box;

}



.havir-product-card .button:hover,

.havir-product-card .btn-primary:hover,

.havir-product-card a.button:hover {

	background: linear-gradient(135deg, #d32f2f, #b71c1c) !important;

	box-shadow: 0 4px 14px rgba(230, 57, 70, 0.35) !important;

	transform: translateY(-2px) !important;

	color: #ffffff !important;

}



.havir-product-card .added_to_cart {

	background: #10b981 !important;

	box-shadow: 0 2px 6px rgba(16, 185, 129, 0.25) !important;

}



/* ============================================

   13. PRODUCT CAROUSEL (Responsive & Smooth)

   ============================================ */

.products.havir-product-carousel,

.havir-product-grid.havir-product-carousel,

.havir-product-carousel {

	display: flex !important;

	flex-direction: row !important;

	flex-wrap: nowrap !important;

	overflow-x: auto !important;

	overflow-y: hidden !important;

	scroll-snap-type: x mandatory;

	gap: 16px !important;

	padding: 8px 4px 18px 4px !important;

	margin: 0 !important;

	list-style: none !important;

	-webkit-overflow-scrolling: touch;

	scrollbar-width: none !important; /* Firefox */

	-ms-overflow-style: none !important; /* IE 10+ */

}



.products.havir-product-carousel::-webkit-scrollbar,

.havir-product-grid.havir-product-carousel::-webkit-scrollbar,

.havir-product-carousel::-webkit-scrollbar {

	display: none !important; /* Chrome, Safari, Edge */

	width: 0 !important;

	height: 0 !important;

}



.products.havir-product-carousel > *,

.havir-product-grid.havir-product-carousel > *,

.havir-product-carousel > * {

	flex: 0 0 235px !important;

	width: 235px !important;

	max-width: 235px !important;

	min-width: 235px !important;

	scroll-snap-align: start;

	margin: 0 !important;

}



@media (max-width: 640px) {

	.products.havir-product-carousel > *,

	.havir-product-grid.havir-product-carousel > *,

	.havir-product-carousel > * {

		flex: 0 0 190px !important;

		width: 190px !important;

		max-width: 190px !important;

		min-width: 190px !important;

	}

}



/* ============================================

   14. TABS SECTION (Bestsellers)

   ============================================ */

.havir-tabs {

	display: flex;

	flex-wrap: wrap;

	gap: var(--space-2);

	margin-block-end: var(--space-6);

}



.havir-tab-button {

	border: 1px solid var(--havir-border);

	border-radius: 999px;

	background: var(--havir-surface);

	padding-block: var(--space-2);

	padding-inline: var(--space-5);

	font-weight: 800;

}



.havir-tab-button.is-active {

	background: var(--havir-red);

	border-color: var(--havir-red);

	color: #fff;

}



.havir-tab-panel[hidden] {

	display: none;

}



.btn-outline--light {

	border-color: rgba(255, 255, 255, 0.28);

	color: inherit;

}



.btn-outline--light:hover,

.btn-outline--light:focus {

	background: rgba(255, 255, 255, 0.14);

	color: inherit;

}



/* ============================================

   15. TRUST BADGES

   ============================================ */

.havir-trust-grid {

	display: grid;

	grid-template-columns: repeat(4, minmax(0, 1fr));

	gap: var(--space-4);

}



.havir-trust-item {

	display: grid;

	grid-template-columns: 56px 1fr;

	gap: var(--space-3);

	align-items: center;

	padding: var(--space-5);

	background: var(--havir-surface);

	border: 1px solid var(--havir-border);

	border-radius: var(--radius);

}



.havir-trust-item__icon {

	display: grid;

	place-items: center;

	inline-size: 56px;

	block-size: 56px;

	border-radius: 50%;

	background: var(--havir-red-soft);

	color: var(--havir-red);

}



.havir-trust-item svg {

	color: var(--havir-red);

}



/* ============================================

   16. LOYALTY CLUB BANNER

   ============================================ */

.havir-loyalty-banner {

	position: relative;

	overflow: hidden;

	background: linear-gradient(135deg, var(--havir-navy), #0b1020);

	color: #fff;

}



.havir-loyalty-banner h2,

.havir-loyalty-banner h3 {

	color: #fff;

}



.havir-loyalty-benefits {

	display: grid;

	grid-template-columns: repeat(3, minmax(0, 1fr));

	gap: var(--space-4);

	margin-block: var(--space-8);

}



.havir-loyalty-benefit {

	padding: var(--space-5);

	border: 1px solid rgba(255, 255, 255, 0.14);

	border-radius: var(--radius);

	background: rgba(255, 255, 255, 0.08);

}



/* ============================================

   17. NEWSLETTER SECTION

   ============================================ */

.havir-newsletter-section {

	background: var(--havir-red);

	color: #fff;

}



.havir-newsletter {

	display: grid;

	grid-template-columns: 1fr minmax(280px, 460px);

	gap: var(--space-6);

	align-items: center;

	padding-block: var(--space-10);

}



.havir-newsletter h2 {

	color: #fff;

}



.havir-newsletter-form {

	display: flex;

	gap: var(--space-2);

}



.havir-newsletter-form input {

	flex: 1;

	border: 0;

	border-radius: var(--radius-sm);

	padding-inline: var(--space-4);

}



/* ============================================

   18. FOOTER

   ============================================ */

.site-footer {

	background: var(--havir-navy);

	color: rgba(255, 255, 255, 0.86);

}



.havir-footer-main {

	padding-block: var(--space-12);

}



.havir-footer-grid {

	display: grid;

	grid-template-columns: 1.4fr repeat(3, 1fr);

	gap: var(--space-8);

}



.havir-footer-column h3 {

	color: #fff;

}



.havir-footer-column ul {

	margin: 0;

	padding: 0;

	list-style: none;

}



.havir-footer-column li {

	margin-block-end: var(--space-2);

}



.havir-footer-column a {

	color: rgba(255, 255, 255, 0.78);

	transition: color 0.2s ease;

}



.havir-footer-column a:hover {

	color: var(--havir-gold);

}



.havir-contact-list li {

	display: flex;

	align-items: center;

	gap: var(--space-2);

}



.havir-contact-list .havir-icon {

	color: var(--havir-gold);

}



.havir-socials {

	display: flex;

	flex-wrap: wrap;

	gap: var(--space-2);

}



.havir-socials a {

	display: inline-flex;

	align-items: center;

	justify-content: center;

	min-block-size: 42px;

	padding-inline: var(--space-4);

	border-radius: 999px;

	background: rgba(255, 255, 255, 0.08);

	color: #fff;

	font-size: var(--font-sm);

	font-weight: 800;

}



.havir-socials a:hover {

	background: var(--havir-gold);

	color: var(--havir-navy);

}



.havir-footer-bottom {

	border-block-start: 1px solid rgba(255, 255, 255, 0.1);

}



.havir-footer-bottom__inner {

	display: flex;

	align-items: center;

	justify-content: space-between;

	gap: var(--space-4);

	padding-block: var(--space-4);

}



.havir-trust-badges {

	display: flex;

	gap: var(--space-2);

}



.havir-badge-placeholder {

	display: inline-flex;

	align-items: center;

	justify-content: center;

	min-inline-size: 92px;

	min-block-size: 56px;

	padding-block: var(--space-2);

	padding-inline: var(--space-3);

	border: 1px solid rgba(255, 255, 255, 0.28);

	border-radius: var(--radius-sm);

	color: #fff;

	font-size: var(--font-sm);

	font-weight: 800;

	text-align: center;

}



/* ============================================

   19. LOYALTY PAGE

   ============================================ */

.havir-loyalty-page-hero {

	position: relative;

	overflow: hidden;

	padding-block: var(--space-10);

	background:

		radial-gradient(circle at 12% 18%, rgba(255, 215, 0, 0.16), transparent 24%),

		linear-gradient(135deg, #0f172a 0%, #141b2d 44%, #5f1722 100%);

	color: #fff;

}



.havir-loyalty-page-hero h1,

.havir-loyalty-page-hero .havir-breadcrumbs,

.havir-loyalty-page-hero .havir-breadcrumbs a,

.havir-loyalty-page-hero .havir-breadcrumbs span {

	color: #fff;

}



.havir-loyalty-page-hero__inner {

	display: grid;

	grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);

	gap: var(--space-8);

	align-items: center;

}



.havir-loyalty-page-hero__content {

	display: grid;

	gap: var(--space-4);

}



.havir-loyalty-page-hero__content > * {

	margin: 0;

}



.havir-loyalty-page-hero p {

	max-inline-size: 620px;

	color: rgba(255, 255, 255, 0.84);

	font-size: var(--font-lg);

	line-height: 1.95;

}



.havir-loyalty-page-hero__actions {

	display: flex;

	flex-wrap: wrap;

	gap: var(--space-3);

	margin-block-start: var(--space-2);

}



.havir-loyalty-summary-card,

.havir-loyalty-rule,

.havir-level-card,

.havir-loyalty-history-panel {

	background: var(--havir-surface);

	border: 1px solid var(--havir-border);

	border-radius: var(--radius);

	box-shadow: var(--shadow);

}



.havir-loyalty-summary-card {

	position: relative;

	overflow: hidden;

	display: grid;

	gap: var(--space-5);

	padding: var(--space-5);

	color: var(--havir-text);

	background:

		linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.98)),

		var(--havir-surface);

	border-color: rgba(255, 255, 255, 0.14);

	box-shadow: 0 28px 48px rgba(15, 23, 42, 0.18);

}



.havir-loyalty-summary-card strong {

	display: block;

	color: var(--havir-navy);

	font-size: var(--font-4xl);

	line-height: 1.15;

}



.havir-loyalty-summary-card__head {

	display: grid;

	gap: var(--space-2);

}



.havir-loyalty-summary-card__eyebrow {

	color: var(--havir-muted);

	font-size: var(--font-sm);

	font-weight: 800;

}



.havir-loyalty-summary-card__stats {

	display: grid;

	grid-template-columns: repeat(2, minmax(0, 1fr));

	gap: var(--space-3);

}



.havir-loyalty-summary-card__stats > div {

	padding: var(--space-3);

	background: rgba(15, 23, 42, 0.04);

	border: 1px solid rgba(148, 163, 184, 0.18);

	border-radius: var(--radius-sm);

}



.havir-loyalty-summary-card__stats small {

	display: block;

	margin-block-end: var(--space-2);

	color: var(--havir-muted);

	font-size: var(--font-xs);

	font-weight: 800;

}



.havir-loyalty-summary-card__stats b {

	color: var(--havir-navy);

	font-size: var(--font-xl);

	font-weight: 900;

}



.havir-loyalty-summary-card__progress {

	display: grid;

	gap: var(--space-3);

}



.havir-loyalty-summary-card__progress p {

	margin: 0;

	color: var(--havir-muted);

	font-size: var(--font-sm);

}



.havir-progress {

	overflow: hidden;

	block-size: 12px;

	background: var(--havir-surface-alt);

	border-radius: 999px;

}



.havir-progress__bar {

	display: block;

	block-size: 100%;

	inline-size: var(--progress, 0%);

	background: linear-gradient(90deg, var(--havir-red), var(--havir-gold));

	border-radius: inherit;

	transition: inline-size 0.8s ease;

}



.havir-loyalty-rules {

	display: grid;

	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));

	gap: var(--space-5);

}



.havir-loyalty-levels {

	display: grid;

	grid-template-columns: repeat(4, minmax(0, 1fr));

	gap: var(--space-5);

}



.havir-loyalty-rule,

.havir-level-card {

	padding: var(--space-5);

	transition: var(--transition);

}



.havir-loyalty-rule:hover,

.havir-level-card:hover {

	transform: translateY(-4px);

	box-shadow: var(--shadow-lg);

}



.havir-loyalty-rule > span,

.havir-level-card > span {

	display: grid;

	place-items: center;

	inline-size: 56px;

	block-size: 56px;

	margin-block-end: var(--space-4);

	border-radius: 50%;

	background: var(--havir-red-soft);

	color: var(--havir-red);

}



.havir-loyalty-levels {

	grid-template-columns: repeat(4, minmax(0, 1fr));

}



.havir-level-card.is-current {

	border-color: var(--havir-gold);

	background: linear-gradient(180deg, #fff, rgba(255, 215, 0, 0.12));

}



.havir-loyalty-outline-btn {

	border-color: rgba(255, 255, 255, 0.22);

	color: #fff;

	background: rgba(255, 255, 255, 0.04);

}



.havir-loyalty-outline-btn:hover {

	border-color: rgba(255, 255, 255, 0.32);

	background: rgba(255, 255, 255, 0.1);

	color: #fff;

}



.havir-loyalty-history-panel {

	display: grid;

	grid-template-columns: minmax(0, 0.8fr) minmax(260px, 1fr);

	gap: var(--space-6);

	align-items: start;

	padding: var(--space-6);

}



.havir-loyalty-history-panel ul {

	display: grid;

	gap: var(--space-3);

	margin: 0;

	padding: 0;

	list-style: none;

}



.havir-loyalty-history-panel li {

	display: flex;

	align-items: center;

	justify-content: space-between;

	gap: var(--space-3);

	padding: var(--space-3);

	border-radius: var(--radius-sm);

	background: var(--havir-surface-alt);

}



.havir-loyalty-history-panel strong {

	color: var(--havir-red);

}



.havir-trust-badges img {

	width: 64px;

	height: 64px;

	inline-size: 64px;

	block-size: 64px;

	aspect-ratio: 1 / 1;

	object-fit: contain;

	background: #fff;

	border-radius: var(--radius-sm);

}



/* ============================================

   19. BREADCRUMBS

   ============================================ */

.havir-breadcrumbs,

.woocommerce-breadcrumb {

	display: flex;

	flex-wrap: wrap;

	gap: var(--space-2);

	align-items: center;

	color: var(--havir-muted);

	font-size: var(--font-sm);

	margin-block-end: var(--space-4);

}



.havir-breadcrumbs span:last-child {

	color: var(--havir-red);

}



/* ============================================

   20. PAGINATION

   ============================================ */

.havir-pagination,

.woocommerce-pagination {

	margin-block-start: var(--space-8);

	text-align: center;

}



.page-numbers {

	display: inline-flex;

	align-items: center;

	justify-content: center;

	min-inline-size: 42px;

	min-block-size: 42px;

	margin-inline: 2px;

	border: 1px solid var(--havir-border);

	border-radius: var(--radius-sm);

	background: var(--havir-surface);

}



.page-numbers.current {

	background: var(--havir-red);

	color: #fff;

	border-color: var(--havir-red);

}



/* ============================================

   21. FORMS (Global)

   ============================================ */

input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="image"]):not([type="file"]):not([type="range"]):not([type="color"]):not([type="hidden"]),

textarea,

select {

	inline-size: 100%;

	min-block-size: 48px;

	border: 1px solid var(--havir-border);

	border-radius: var(--radius-sm);

	background: var(--havir-surface);

	color: var(--havir-text);

	padding-block: var(--space-2);

	padding-inline: var(--space-4);

	font-size: 16px;

}



/* Radio & Checkbox Inputs - Proper proportional sizing */

input[type="checkbox"],

input[type="radio"] {

	inline-size: 18px !important;

	block-size: 18px !important;

	min-block-size: 18px !important;

	max-block-size: 18px !important;

	width: 18px !important;

	height: 18px !important;

	min-height: 18px !important;

	max-height: 18px !important;

	margin: 0 !important;

	padding: 0 !important;

	accent-color: var(--havir-red, #e63946) !important;

	cursor: pointer !important;

	flex-shrink: 0 !important;

}



/* Shipping Methods (Cart & Checkout) */

ul#shipping_method,

.woocommerce-shipping-methods {

	list-style: none !important;

	padding: 0 !important;

	margin: 0 !important;

	display: flex !important;

	flex-direction: column !important;

	gap: 10px !important;

	width: 100% !important;

	box-sizing: border-box !important;

}



ul#shipping_method li,

.woocommerce-shipping-methods li {

	position: relative !important;

	display: flex !important;

	flex-direction: row !important;

	align-items: flex-start !important;

	justify-content: flex-start !important;

	gap: 10px !important;

	padding: 12px 14px !important;

	background: #ffffff !important;

	border: 1.5px solid #e2e8f0 !important;

	border-radius: 12px !important;

	cursor: pointer !important;

	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;

	margin: 0 !important;

	list-style: none !important;

	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03) !important;

	box-sizing: border-box !important;

	text-align: right !important;

	direction: rtl !important;

}



ul#shipping_method li:hover,

.woocommerce-shipping-methods li:hover {

	border-color: #cbd5e1 !important;

	background: #f8fafc !important;

	box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06) !important;

	transform: translateY(-1px) !important;

}



ul#shipping_method li:has(input:checked),

.woocommerce-shipping-methods li:has(input:checked),

ul#shipping_method li.is-selected,

.woocommerce-shipping-methods li.is-selected {

	border-color: var(--havir-red, #e63946) !important;

	background: #fffafa !important;

	box-shadow: 0 0 0 1px var(--havir-red, #e63946), 0 3px 10px rgba(230, 57, 70, 0.1) !important;

}



ul#shipping_method input[type="radio"],

.woocommerce-shipping-methods input[type="radio"] {

	appearance: auto !important;

	-webkit-appearance: auto !important;

	width: 18px !important;

	height: 18px !important;

	min-width: 18px !important;

	min-height: 18px !important;

	margin-top: 3px !important;

	margin-inline-end: 0 !important;

	flex-shrink: 0 !important;

	accent-color: var(--havir-red, #e63946) !important;

	cursor: pointer !important;

}



ul#shipping_method label,

.woocommerce-shipping-methods label {

	display: flex !important;

	flex-direction: column !important;

	align-items: flex-start !important;

	width: 100% !important;

	flex: 1 1 auto !important;

	margin: 0 !important;

	padding: 0 !important;

	font-size: 13px !important;

	line-height: 1.7 !important;

	color: #334155 !important;

	cursor: pointer !important;

	font-weight: 500 !important;

	text-align: right !important;

	word-break: break-word !important;

}



ul#shipping_method li:has(input:checked) label,

.woocommerce-shipping-methods li:has(input:checked) label,

ul#shipping_method li.is-selected label,

.woocommerce-shipping-methods li.is-selected label {

	color: #0f172a !important;

	font-weight: 600 !important;

}



ul#shipping_method .woocommerce-Price-amount,

.woocommerce-shipping-methods .woocommerce-Price-amount {

	display: inline-flex !important;

	align-items: center !important;

	font-weight: 800 !important;

	color: var(--havir-red, #e63946) !important;

	background: rgba(230, 57, 70, 0.08) !important;

	padding: 3px 8px !important;

	border-radius: 6px !important;

	font-size: 13px !important;

	margin-top: 6px !important;

	margin-inline-start: 0 !important;

}



textarea {

	min-block-size: 140px;

	resize: vertical;

}



input:focus,

textarea:focus,

select:focus {

	outline: 0;

	border-color: var(--havir-red);

	box-shadow: 0 0 0 4px rgba(211, 47, 47, 0.12);

}



.has-error {

	border-color: var(--havir-error);

}



.has-success {

	border-color: var(--havir-success);

}



.havir-global-search {

	display: flex;

	gap: var(--space-2);

	inline-size: min(100%, 640px);

	margin-inline: auto;

}



.havir-global-search .search-field {

	flex: 1;

}



.havir-global-search .search-submit {

	flex: 0 0 auto;

}



.suggested-categories {

	display: flex;

	flex-wrap: wrap;

	gap: var(--space-2);

	justify-content: center;

	margin-block-start: var(--space-5);

}



.suggested-categories a {

	display: inline-flex;

	align-items: center;

	min-block-size: 40px;

	padding-inline: var(--space-4);

	border: 1px solid var(--havir-border);

	border-radius: 999px;

	background: var(--havir-surface-alt);

	font-weight: 800;

}



/* ============================================

   22. BUTTONS (Global)

   ============================================ */

.btn-primary,

.btn-secondary,

.btn-outline,

.btn-ghost,

.button,

button[type="submit"],

input[type="submit"] {

	display: inline-flex;

	align-items: center;

	justify-content: center;

	gap: var(--space-2);

	min-inline-size: 48px;

	min-block-size: 48px;

	border: 1px solid transparent;

	border-radius: var(--radius-sm);

	padding-block: var(--space-3);

	padding-inline: var(--space-5);

	font-weight: 850;

	line-height: 1.2;

	transition: var(--transition);

}



.btn-primary,

.button,

button[type="submit"],

input[type="submit"] {

	background: var(--havir-red);

	color: #fff;

}



.btn-secondary {

	background: var(--havir-navy);

	color: #fff;

}



.btn-outline {

	background: transparent;

	border-color: var(--havir-red);

	color: var(--havir-red);

}



.btn-ghost {

	background: transparent;

	color: var(--havir-navy);

}



.btn-primary:hover,

.btn-secondary:hover,

.button:hover {

	filter: brightness(0.94);

	color: #fff;

	transform: translateY(-2px);

}



button:disabled,

.disabled {

	cursor: not-allowed;

	opacity: 0.6;

}



/* ============================================

   23. MODALS (World-Class Global Modal System)

   ============================================ */

.havir-modal {

	position: fixed !important;

	inset: 0 !important;

	top: 0 !important;

	left: 0 !important;

	right: 0 !important;

	bottom: 0 !important;

	width: 100vw !important;

	height: 100vh !important;

	z-index: 999999 !important;

	display: flex !important;

	align-items: center !important;

	justify-content: center !important;

	padding: 1.5rem !important;

	background: transparent !important;

	border: none !important;

	box-shadow: none !important;

	transform: none !important;

	overflow: hidden !important;

	box-sizing: border-box !important;

}



.havir-modal[hidden] {

	display: none !important;

}



.havir-modal-overlay {

	position: fixed !important;

	inset: 0 !important;

	top: 0 !important;

	left: 0 !important;

	right: 0 !important;

	bottom: 0 !important;

	width: 100vw !important;

	height: 100vh !important;

	background: rgba(15, 23, 42, 0.72) !important;

	backdrop-filter: blur(8px) !important;

	-webkit-backdrop-filter: blur(8px) !important;

	animation: havirModalFadeIn 0.22s ease-out forwards !important;

	z-index: 1 !important;

}



.havir-modal-content {

	position: relative !important;

	background: var(--havir-surface, #ffffff) !important;

	width: min(94vw, 920px) !important;

	max-height: calc(100vh - 3rem) !important;

	border-radius: 24px !important;

	border: 1px solid rgba(226, 232, 240, 0.8) !important;

	box-shadow: 0 25px 60px -15px rgba(15, 23, 42, 0.28), 0 0 0 1px rgba(0, 0, 0, 0.04) !important;

	overflow-y: auto !important;

	padding: 2.25rem !important;

	z-index: 2 !important;

	animation: havirModalPopIn 0.28s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;

	box-sizing: border-box !important;

	margin: auto !important;

	transform: none !important;

}



.havir-modal-close,

.havir-modal__close {

	position: absolute !important;

	top: 1.25rem !important;

	left: 1.25rem !important;

	right: auto !important;

	width: 38px !important;

	height: 38px !important;

	display: flex !important;

	align-items: center !important;

	justify-content: center !important;

	background: rgba(241, 245, 249, 0.95) !important;

	border: 1px solid rgba(226, 232, 240, 0.8) !important;

	border-radius: 50% !important;

	font-size: 1.25rem !important;

	line-height: 1 !important;

	cursor: pointer !important;

	color: #64748b !important;

	transition: all 0.2s ease !important;

	z-index: 10 !important;

	padding: 0 !important;

}



.havir-modal-close:hover,

.havir-modal__close:hover {

	background: var(--havir-red, #e63946) !important;

	color: #ffffff !important;

	border-color: var(--havir-red, #e63946) !important;

	transform: rotate(90deg) scale(1.06) !important;

}



[dir="ltr"] .havir-modal-close,

[dir="ltr"] .havir-modal__close {

	right: 1.25rem !important;

	left: auto !important;

}



@keyframes havirModalFadeIn {

	from { opacity: 0; }

	to { opacity: 1; }

}



@keyframes havirModalPopIn {

	from { opacity: 0; transform: scale(0.95) translateY(12px); }

	to { opacity: 1; transform: scale(1) translateY(0); }

}



/* ============================================

   24. 404 PAGE

   ============================================ */

.havir-404__inner {

	display: grid;

	place-items: center;

	min-block-size: 60vh;

	text-align: center;

}



.havir-404__code {

	color: var(--havir-red);

	font-size: clamp(5rem, 18vw, 12rem);

	font-weight: 900;

	line-height: 1;

	animation: float 4s ease-in-out infinite;

}



.havir-404__illustration {

	margin-block: var(--space-4);

}



.havir-404__search {

	inline-size: 100%;

	max-inline-size: 540px;

	margin-block: var(--space-4) var(--space-6);

}



.havir-404__actions {

	display: flex;

	flex-wrap: wrap;

	align-items: center;

	justify-content: center;

	gap: var(--space-3);

	margin-block-start: var(--space-3);

}



.havir-404__actions a {

	display: inline-flex;

	align-items: center;

	gap: 8px;

	min-height: 44px;

	padding: 8px 22px;

	border-radius: 999px;

	font-weight: 700;

	font-size: 14px;

	text-decoration: none;

	transition: all 0.2s ease;

}



.havir-404__actions a svg {

	width: 18px !important;

	height: 18px !important;

	display: inline-block;

}



/* ============================================

   UNIVERSAL TABLE STYLING & RESPONSIVENESS

   ============================================ */

table {

	inline-size: 100%;

	border-collapse: separate;

	border-spacing: 0;

	margin-block: var(--space-5);

	background: var(--havir-surface, #ffffff);

	border: 1px solid var(--havir-border, #e2e8f0);

	border-radius: 14px;

	overflow: hidden;

	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.02);

}



table th {

	background: #f8fafc;

	color: #475569;

	font-weight: 800;

	font-size: 13.5px;

	padding: 14px 18px;

	border-block-end: 2px solid #e2e8f0;

	text-align: start;

	vertical-align: middle;

	white-space: nowrap;

}



table td {

	padding: 14px 18px;

	border-block-end: 1px solid #f1f5f9;

	color: var(--havir-text, #1e293b);

	font-size: 14px;

	vertical-align: middle;

	transition: background-color 0.15s ease;

}



table tr:last-child td {

	border-block-end: none;

}



table tbody tr:hover td {

	background-color: #fafbfc;

}



.table-responsive,

.woocommerce-cart-form,

.woocommerce-table-responsive {

	inline-size: 100%;

	max-inline-size: 100%;

	overflow-x: auto;

	-webkit-overflow-scrolling: touch;

}



/* ============================================

   25. UTILITY CLASSES

   ============================================ */

.sr-only,

.screen-reader-text {

	position: absolute;

	inline-size: 1px;

	block-size: 1px;

	padding: 0;

	margin: -1px;

	overflow: hidden;

	clip: rect(0, 0, 0, 0);

	white-space: nowrap;

	border: 0;

}



.skip-link.sr-only:focus,

.skip-link.screen-reader-text:focus {

	position: fixed !important;

	top: 15px !important;

	right: 15px !important;

	left: auto !important;

	z-index: 100000 !important;

	inline-size: auto !important;

	block-size: auto !important;

	width: auto !important;

	height: auto !important;

	padding: 12px 24px !important;

	clip: auto !important;

	overflow: visible !important;

	white-space: normal !important;

	background: #1e293b !important;

	color: #ffffff !important;

	font-weight: 700 !important;

	font-size: 14px !important;

	border-radius: 8px !important;

	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35) !important;

	outline: 2px solid #3b82f6 !important;

	outline-offset: 2px !important;

	text-decoration: none !important;

}



.text-center {

	text-align: center;

}



.text-right {

	text-align: start;

}



.text-left {

	text-align: end;

}



.hidden {

	display: none !important;

}



.visible {

	display: block !important;

}



.flex {

	display: flex;

}



.flex-center {

	display: flex;

	align-items: center;

	justify-content: center;

}



.m-0 { margin: 0; }

.mt-4 { margin-block-start: var(--space-4); }

.mb-4 { margin-block-end: var(--space-4); }

.p-4 { padding: var(--space-4); }

.py-8 { padding-block: var(--space-8); }



.havir-toast {

	position: fixed;

	inset-inline-start: var(--space-5);

	inset-block-end: var(--space-5);

	z-index: var(--z-toast);

	padding-block: 0.875rem;

	padding-inline: 1.25rem;

	border-radius: var(--radius-full, 9999px);

	background: rgba(26, 26, 46, 0.92);

	color: #fff;

	font-weight: 600;

	font-size: var(--font-sm);

	letter-spacing: 0.01em;

	box-shadow: 0 12px 32px -4px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(255, 255, 255, 0.12) inset;

	backdrop-filter: blur(12px);

	-webkit-backdrop-filter: blur(12px);

	animation: toastEnter 240ms var(--havir-ease-spring) both;

}



@keyframes toastEnter {

	from { opacity: 0; transform: translateY(12px) scale(0.95); }

	to { opacity: 1; transform: translateY(0) scale(1); }

}



.havir-toast--success {

	background: rgba(24, 128, 56, 0.94);

	box-shadow: 0 12px 32px -4px rgba(24, 128, 56, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.15) inset;

}



.havir-toast--error {

	background: rgba(211, 47, 47, 0.94);

	box-shadow: 0 12px 32px -4px rgba(211, 47, 47, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.15) inset;

}



/* ============================================

   Floating Scroll-to-Top Button (Circle on Left)

   ============================================ */

.havir-scroll-top {

	position: fixed;

	inset-inline-start: 24px;

	inset-inline-end: auto;

	inset-block-end: 24px;

	inset-block-start: auto;

	left: 24px;

	right: auto;

	bottom: 24px;

	inline-size: 44px;

	block-size: 44px;

	width: 44px;

	height: 44px;

	border-radius: 50%;

	padding: 0;

	margin: 0;

	display: flex;

	align-items: center;

	justify-content: center;

	background: var(--havir-red, #e63946);

	color: #ffffff;

	border: 2px solid rgba(255, 255, 255, 0.9);

	box-shadow: 0 8px 24px rgba(230, 57, 70, 0.38), 0 2px 6px rgba(0, 0, 0, 0.12);

	z-index: 98;

	cursor: pointer;

	opacity: 0;

	pointer-events: none;

	transform: translateY(14px) scale(0.85);

	transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s ease, box-shadow 0.25s ease;

}



.havir-scroll-top svg {

	width: 20px;

	height: 20px;

	stroke: #ffffff;

	stroke-width: 2.5;

	transition: transform 0.2s ease;

	display: block;

}



.havir-scroll-top:hover {

	background: #b71c1c;

	box-shadow: 0 12px 28px rgba(183, 28, 28, 0.48), 0 4px 10px rgba(0, 0, 0, 0.18);

	transform: translateY(-3px) scale(1.06);

}



.havir-scroll-top:hover svg {

	transform: translateY(-2px);

}



.havir-scroll-top:active {

	transform: translateY(0) scale(0.95);

}



.havir-scroll-top.is-visible {

	opacity: 1;

	pointer-events: auto;

	transform: translateY(0) scale(1);

}



.page-hero {

	padding-block: var(--space-5);

	background: var(--havir-surface);

	border-block-end: 1px solid var(--havir-border);

}



.havir-page-hero__inner {

	display: flex;

	align-items: end;

	justify-content: space-between;

	gap: var(--space-4);

	min-block-size: 96px;

}



.havir-page-hero__content {

	display: grid;

	gap: var(--space-2);

}



.havir-page-hero__eyebrow {

	display: inline-flex;

	align-items: center;

	min-block-size: 28px;

	padding-inline: var(--space-3);

	border-radius: 999px;

	background: var(--havir-red-soft);

	color: var(--havir-red);

	font-size: var(--font-sm);

	font-weight: 800;

}



.page-hero h1 {

	margin: 0;

	font-size: clamp(1.7rem, 3vw, 2.8rem);

	line-height: 1.2;

}



.single-layout {

	display: grid;

	grid-template-columns: minmax(0, 1fr) 300px;

	gap: var(--space-8);

}



.single-article,

.havir-page-content,

.empty-state {

	background: var(--havir-surface);

	border: 1px solid var(--havir-border);

	border-radius: var(--radius);

	padding: var(--space-6);

	box-shadow: var(--shadow);

}



.havir-search-summary {

	margin-block-end: var(--space-5);

	padding: var(--space-4) var(--space-5);

	border: 1px solid var(--havir-border);

	border-radius: var(--radius);

	background: var(--havir-surface);

	box-shadow: var(--shadow);

	color: var(--havir-muted);

}



.havir-search-summary p {

	margin: 0;

	font-size: var(--font-sm);

	font-weight: 700;

}



/* ============================================

   26. RESPONSIVE BREAKPOINTS

   ============================================ */

@media (max-width: 1279px) {

	.grid-4,

	.havir-trust-grid,

	.havir-footer-grid {

		grid-template-columns: repeat(2, minmax(0, 1fr));

	}

}



@media (max-width: 1023px) {

	.grid-3,

	.havir-product-grid:not(.havir-product-carousel),

	.havir-loyalty-rules,

	.havir-loyalty-levels,

	.havir-loyalty-page-hero__inner,

	.havir-loyalty-history-panel {

		grid-template-columns: repeat(2, minmax(0, 1fr));

	}



	.single-layout {

		grid-template-columns: 1fr;

	}

}



@media (max-width: 991px) {

	.havir-nav {

		display: none;

	}



	.havir-hamburger {

		display: inline-flex;

	}

}



@media (max-width: 767px) {

	.havir-topbar {

		display: none;

	}



	.havir-main-header__inner {

		grid-template-columns: 1fr auto;

	}



	.havir-search-form {

		grid-column: 1 / -1;

		order: 3;

		margin-block-start: var(--space-2);

	}



	@media (max-width: 480px) {

		.havir-search-submit span {

			display: none !important;

		}

		.havir-search-submit {

			padding-inline: 11px !important;

		}

	}



	.havir-header-actions .havir-icon-button:not(.havir-cart-toggle) {

		display: none;

	}



	.havir-quick-view,

	.havir-quick-view-btn {

		display: none !important;

		opacity: 0 !important;

		visibility: hidden !important;

		pointer-events: none !important;

	}



	.havir-product-card__body {

		padding: var(--space-3);

	}



	.site-main {

		padding-block: var(--space-6);

	}



	.page-hero {

		padding-block: var(--space-4);

	}



	.havir-page-hero__inner {

		min-block-size: 0;

	}



	.grid-3,

	.grid-4,

	.havir-trust-grid,

	.havir-loyalty-benefits,

	.havir-loyalty-rules,

	.havir-loyalty-levels,

	.havir-loyalty-page-hero__inner,

	.havir-loyalty-history-panel,

	.havir-footer-grid,

	.havir-newsletter {

		grid-template-columns: 1fr;

	}



	.grid-2,

	.havir-product-grid:not(.havir-product-carousel),

	.woocommerce ul.products:not(.havir-product-carousel),

	ul.products:not(.havir-product-carousel) {

		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

		gap: 10px !important;

	}



	/* Product Card Mobile Polish */

	.havir-product-card {

		border-radius: 14px !important;

		border: 1px solid #e2e8f0 !important;

	}



	.havir-product-card__media {

		padding: 10px !important;

		border-bottom: 1px solid #f1f5f9 !important;

	}



	.havir-product-card__badge,

	.havir-product-card .onsale,

	.woocommerce span.onsale,

	.woocommerce ul.products li.product .onsale {

		top: 6px !important;

		right: 6px !important;

		font-size: 10px !important;

		font-weight: 800 !important;

		padding: 3px 7px !important;

		border-radius: 10px !important;

		line-height: 1.2 !important;

	}



	.havir-wishlist-button {

		top: 6px !important;

		left: 6px !important;

		width: 30px !important;

		height: 30px !important;

		min-width: 30px !important;

		min-height: 30px !important;

	}



	.havir-wishlist-button svg {

		width: 13px !important;

		height: 13px !important;

	}



	.havir-product-card__body {

		padding: 8px 10px 10px !important;

		gap: 4px !important;

	}



	.havir-product-category {

		font-size: 10.5px !important;

		color: #94a3b8 !important;

		margin: 0 0 2px 0 !important;

		line-height: 1.2 !important;

	}



	.havir-product-card__title,

	.havir-product-card .woocommerce-loop-product__title,

	.havir-product-card__body h3,

	.havir-product-card__body h2 {

		font-size: 12.5px !important;

		line-height: 1.45 !important;

		min-height: 36px !important;

		max-height: 36px !important;

		margin: 0 !important;

		font-weight: 700 !important;

		color: #0f172a !important;

		display: -webkit-box !important;

		-webkit-line-clamp: 2 !important;

		-webkit-box-orient: vertical !important;

		overflow: hidden !important;

		text-overflow: ellipsis !important;

	}



	.havir-product-price,

	.havir-product-card .price {

		font-size: 13px !important;

		min-height: 22px !important;

		padding: 2px 0 !important;

		display: flex !important;

		align-items: baseline !important;

		flex-wrap: wrap !important;

		gap: 4px !important;

		line-height: 1.3 !important;

	}



	.havir-product-card .price del {

		font-size: 10.5px !important;

		color: #94a3b8 !important;

	}



	.havir-product-card .price ins,

	.havir-product-card .price .amount {

		font-size: 13.5px !important;

		font-weight: 800 !important;

		color: var(--havir-red, #e63946) !important;

	}



	.havir-product-card .price .woocommerce-Price-currencySymbol {

		font-size: 9.5px !important;

		font-weight: 600 !important;

	}



	.havir-product-card .price .from {

		font-size: 10.5px !important;

		color: #64748b !important;

		font-weight: 600 !important;

		margin-inline-end: 2px !important;

	}



	.havir-product-card .button,

	.havir-product-card .btn-primary,

	.havir-product-card a.button,

	.havir-product-card .added_to_cart {

		width: 100% !important;

		inline-size: 100% !important;

		height: 34px !important;

		min-height: 34px !important;

		padding: 0 8px !important;

		border-radius: 8px !important;

		font-size: 11px !important;

		font-weight: 700 !important;

		white-space: nowrap !important;

		overflow: hidden !important;

		text-overflow: ellipsis !important;

		display: inline-flex !important;

		align-items: center !important;

		justify-content: center !important;

		margin-top: 4px !important;

		margin-bottom: 0 !important;

		box-sizing: border-box !important;

	}



	.havir-product-card__stock {

		font-size: 10px !important;

		line-height: 1.2 !important;

	}



	.havir-loyalty-page-hero {

		padding-block: var(--space-7);

	}



	.havir-loyalty-page-hero__actions {

		flex-direction: column;

		align-items: stretch;

	}



	.havir-loyalty-summary-card__stats {

		grid-template-columns: 1fr;

	}



	.havir-footer-bottom__inner,

	.havir-section__header {

		align-items: flex-start;

		flex-direction: column;

	}

}



@media (max-width: 479px) {

	.container {

		padding-inline: var(--space-3);

	}



	.havir-newsletter-form {

		flex-direction: column;

	}

}



@media (min-width: 1440px) {

	.container {

		inline-size: min(100% - 4rem, 1360px);

	}

}



@media (min-width: 1920px) {

	.container {

		inline-size: min(100% - 6rem, 1520px);

	}

}



.container--fluid {

	inline-size: min(100% - 2rem, 1680px);

}



.havir-layout-full-width .site-main > .container,

.havir-layout-full-width .site-main > .container--fluid {

	inline-size: min(100% - 2rem, 1680px);

}



.havir-page-title-disabled .page-hero {

	display: none;

}



.havir-transparent-header .site-header {

	background: color-mix(in srgb, var(--havir-surface) 88%, transparent);

	backdrop-filter: blur(14px);

}



/* ============================================

   27. DEMO LANDING PAGES

   ============================================ */

.havir-demo-front {

	padding-block: 0;

}



.havir-demo-content {

	inline-size: 100%;

}



.havir-demo-landing {

	--demo-primary: var(--havir-red);

	--demo-dark: var(--havir-navy);

	--demo-accent: var(--havir-gold);

	background: var(--havir-bg);

	color: var(--havir-text);

}



.havir-demo-landing--office {

	--demo-primary: #0f766e;

	--demo-dark: #111827;

	--demo-accent: #f59e0b;

}



.havir-demo-landing--art {

	--demo-primary: #7c3aed;

	--demo-dark: #0f172a;

	--demo-accent: #22c55e;

}



.havir-demo-landing--premium {

	--demo-primary: #991b1b;

	--demo-dark: #18181b;

	--demo-accent: #d4af37;

}



/* Calibrated Hero Banner - Fits 100% in viewport at standard zoom without scrolling */

.havir-demo-hero {

	position: relative !important;

	display: flex !important;

	align-items: center !important;

	height: 380px !important;

	min-height: 380px !important;

	max-height: 380px !important;

	min-block-size: unset !important;

	overflow: hidden !important;

	background: var(--demo-dark) !important;

	isolation: isolate !important;

	direction: rtl !important;

}



.havir-demo-hero::after {

	content: "";

	position: absolute;

	inset: 0;

	z-index: -1;

	background: linear-gradient(90deg, rgba(15, 23, 42, 0.92) 0%, rgba(15, 23, 42, 0.72) 55%, rgba(15, 23, 42, 0.3) 100%) !important;

}



.havir-demo-hero img {

	position: absolute !important;

	inset: 0 !important;

	z-index: -2 !important;

	inline-size: 100% !important;

	block-size: 100% !important;

	object-fit: cover !important;

	object-position: center !important;

}



.havir-demo-hero__content {

	inline-size: min(100% - 2rem, 1280px) !important;

	margin-inline: auto !important;

	padding-block: 0 !important;

	color: #fff !important;

}



.havir-demo-hero p:empty,

.havir-demo-landing p:empty {

	display: none !important;

}



.havir-demo-eyebrow {

	display: inline-flex !important;

	align-items: center !important;

	gap: 6px !important;

	margin-block-end: 8px !important;

	color: var(--demo-accent) !important;

	font-weight: 800 !important;

	font-size: 13.5px !important;

	letter-spacing: 0.3px !important;

}



.havir-demo-hero h1 {

	max-inline-size: 680px !important;

	color: #ffffff !important;

	font-size: clamp(1.65rem, 2.4vw, 2.15rem) !important;

	line-height: 1.35 !important;

	margin-block: 0 8px !important;

	font-weight: 800 !important;

	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;

}



.havir-demo-hero p {

	max-inline-size: 580px !important;

	color: rgba(255, 255, 255, 0.9) !important;

	font-size: 14px !important;

	line-height: 1.6 !important;

	margin-block: 0 14px !important;

	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) !important;

}



.havir-demo-actions {

	display: flex !important;

	flex-wrap: wrap !important;

	align-items: center !important;

	gap: 12px !important;

	margin-block-start: 12px !important;

}



.havir-demo-actions .btn-primary,

.havir-demo-actions .btn-outline {

	padding: 9px 24px !important;

	font-size: 13.5px !important;

	font-weight: 700 !important;

	border-radius: 8px !important;

	line-height: 1.4 !important;

	display: inline-flex !important;

	align-items: center !important;

	justify-content: center !important;

	text-decoration: none !important;

	transition: all 0.25s ease !important;

}



.havir-demo-actions .btn-primary {

	background: var(--havir-red, #E63946) !important;

	border: 1px solid var(--havir-red, #E63946) !important;

	color: #ffffff !important;

	box-shadow: 0 4px 14px rgba(230, 57, 70, 0.35) !important;

}



.havir-demo-actions .btn-primary:hover {

	background: #c52b37 !important;

	border-color: #c52b37 !important;

	color: #fff !important;

}



.havir-demo-actions .btn-outline {

	background: rgba(255, 255, 255, 0.1) !important;

	border: 1px solid rgba(255, 255, 255, 0.4) !important;

	color: #ffffff !important;

	backdrop-filter: blur(4px) !important;

}



.havir-demo-actions .btn-outline:hover {

	background: rgba(255, 255, 255, 0.25) !important;

	border-color: #ffffff !important;

	color: #fff !important;

}



.havir-demo-feature-strip {

	display: grid !important;

	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;

	gap: 16px !important;

	margin-block-start: -28px !important;

	position: relative !important;

	z-index: 5 !important;

}



.havir-demo-feature-strip > div,

.havir-demo-card,

.havir-demo-showcase {

	border: 1px solid var(--havir-border);

	border-radius: var(--radius);

	background: var(--havir-surface);

	box-shadow: var(--shadow);

}



.havir-demo-feature-strip > div {

	padding: 12px 20px !important;

	border-radius: 12px !important;

	border: 1px solid var(--havir-border, #E2E8F0) !important;

	background: var(--havir-surface, #FFFFFF) !important;

	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.07) !important;

	display: flex !important;

	flex-direction: column !important;

	justify-content: center !important;

	transition: transform 0.2s ease, box-shadow 0.2s ease !important;

}



.havir-demo-feature-strip strong,

.havir-demo-feature-strip span {

	display: block !important;

}



.havir-demo-feature-strip strong {

	color: var(--demo-dark, #0F172A) !important;

	font-size: 14.5px !important;

	font-weight: 800 !important;

	margin-bottom: 2px !important;

}



.havir-demo-feature-strip span {

	color: var(--havir-muted, #64748B) !important;

	font-size: 12.5px !important;

}



.havir-demo-section {

	padding-block: var(--space-16);

}



.havir-demo-section header {

	max-inline-size: 680px;

	margin-block-end: var(--space-8);

}



.havir-demo-card-grid {

	display: grid;

	grid-template-columns: repeat(3, minmax(0, 1fr));

	gap: var(--space-5);

}



.havir-demo-card {

	padding: var(--space-6);

}



.havir-demo-card span {

	display: inline-block;

	inline-size: 44px;

	block-size: 6px;

	margin-block-end: var(--space-5);

	border-radius: 999px;

	background: var(--demo-primary);

}



.havir-demo-card h3 {

	color: var(--demo-dark);

}



.havir-demo-showcase {

	display: grid;

	grid-template-columns: minmax(0, 1fr) minmax(280px, 520px);

	align-items: center;

	gap: var(--space-8);

	margin-block-end: var(--space-16);

	padding: var(--space-8);

	overflow: hidden;

}



.havir-demo-showcase img {

	inline-size: 100%;

	aspect-ratio: 4 / 3;

	object-fit: cover;

	border-radius: var(--radius-sm);

}



.havir-demo-cta {

	padding-block: var(--space-12);

	background: var(--demo-dark);

	color: #fff;

	text-align: center;

}



.havir-demo-cta h2 {

	color: #fff;

}



@media (max-width: 991px) {

	.havir-demo-hero {

		height: 330px !important;

		min-height: 330px !important;

		max-height: 330px !important;

	}



	.havir-demo-hero h1 {

		font-size: 1.55rem !important;

	}



	.havir-demo-feature-strip {

		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;

		gap: 10px !important;

		margin-block-start: -22px !important;

	}



	.havir-demo-feature-strip > div {

		padding: 10px 14px !important;

	}



	.havir-demo-feature-strip strong {

		font-size: 13px !important;

	}



	.havir-demo-feature-strip span {

		font-size: 11.5px !important;

	}

}



@media (max-width: 767px) {

	.havir-demo-hero {

		height: auto !important;

		min-height: 270px !important;

		max-height: none !important;

		padding-block: 28px 36px !important;

	}



	.havir-demo-hero h1 {

		font-size: 1.35rem !important;

		line-height: 1.4 !important;

	}



	.havir-demo-feature-strip,

	.havir-demo-card-grid,

	.havir-demo-showcase {

		grid-template-columns: 1fr !important;

	}



	.havir-demo-feature-strip {

		margin-block-start: 16px !important;

		gap: 10px !important;

	}

}







/* ==========================================================================

   FOOTER BRAND POLISH

   ========================================================================== */



.havir-footer-logo {

	display: inline-block;

	margin-bottom: 16px;

}



.havir-footer-logo a {

	display: inline-flex;

	align-items: center;

	justify-content: center;

	background: #FFFFFF;

	padding: 6px 12px;

	border-radius: 14px;

	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);

	transition: transform 0.25s ease, box-shadow 0.25s ease;

}



.havir-footer-logo a:hover {

	transform: translateY(-2px);

	box-shadow: 0 6px 18px rgba(230, 57, 70, 0.3);

}



.havir-footer-logo img,

.havir-footer-logo .custom-logo {

	width: auto;

	max-width: 140px;

	height: 48px;

	max-height: 48px;

	object-fit: contain;

	border-radius: 6px;

	display: block;

}



.havir-footer-column p {

	font-size: 13.5px;

	line-height: 1.8;

	color: rgba(255, 255, 255, 0.78);

	margin-bottom: 14px;

}



.havir-footer-highlights {

	display: flex;

	flex-wrap: wrap;

	gap: 8px;

	margin-top: 10px;

	margin-bottom: 18px;

}



.havir-footer-highlights span {

	font-size: 11.5px;

	font-weight: 600;

	padding: 4px 10px;

	border-radius: 6px;

	background: rgba(255, 255, 255, 0.08);

	color: rgba(255, 255, 255, 0.88);

	border: 1px solid rgba(255, 255, 255, 0.12);

	display: inline-flex;

	align-items: center;

}



.havir-brand img,

.havir-brand .custom-logo {

	max-height: 52px;

	width: auto;

	max-width: 140px;

	object-fit: contain;

	display: block;

}



/* ============================================

   PROMOTIONAL BANNERS (3-Column Grid)

   ============================================ */

.havir-promo-banners {

	padding: 20px 0 12px;

}



.havir-promo-grid {

	display: grid;

	grid-template-columns: repeat(3, 1fr);

	gap: 18px;

}



.havir-promo-card {

	position: relative;

	display: block;

	border-radius: 14px;

	overflow: hidden;

	background: #ffffff;

	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);

	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;

	text-decoration: none;

	border: 1px solid rgba(0, 0, 0, 0.05);

}



.havir-promo-card:hover {

	transform: translateY(-4px);

	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);

}



.havir-promo-card img {

	width: 100%;

	height: auto;

	max-height: 220px;

	object-fit: cover;

	display: block;

	transition: transform 0.4s ease;

}



.havir-promo-card:hover img {

	transform: scale(1.03);

}



@media (max-width: 900px) {

	.havir-promo-grid {

		gap: 10px;

	}

	.havir-promo-card img {

		max-height: 160px;

	}

}



@media (max-width: 640px) {

	.havir-promo-grid {

		grid-template-columns: 1fr;

		gap: 12px;

	}

	.havir-promo-card img {

		max-height: 150px;

	}

}



/* ============================================

   FLASH DEALS / SPECIAL OFFERS SECTION

   ============================================ */

.havir-flash-deals {

	background: linear-gradient(135deg, #e63946 0%, #c1121f 100%);

	border-radius: 20px;

	padding: 24px 20px;

	margin: 28px 0;

	color: #ffffff;

	box-shadow: 0 10px 30px rgba(230, 57, 70, 0.22);

}



.havir-flash-deals__header {

	display: flex;

	align-items: center;

	justify-content: space-between;

	flex-wrap: wrap;

	gap: 12px;

	margin-bottom: 20px;

	padding-bottom: 12px;

	border-bottom: 1px solid rgba(255, 255, 255, 0.2);

}



.havir-flash-deals__title-group {

	display: flex;

	align-items: center;

	gap: 10px;

}



.havir-flash-deals__badge {

	display: inline-flex;

	align-items: center;

	gap: 4px;

	background: #ffffff;

	color: #e63946;

	font-size: 12px;

	font-weight: 800;

	padding: 4px 12px;

	border-radius: 99px;

	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

}



.havir-flash-deals__title {

	font-size: 20px;

	font-weight: 800;

	color: #ffffff !important;

	margin: 0;

}



.havir-flash-deals__link {

	display: inline-flex;

	align-items: center;

	gap: 6px;

	color: #ffffff !important;

	font-size: 13px;

	font-weight: 700;

	text-decoration: none;

	background: rgba(255, 255, 255, 0.18);

	padding: 6px 14px;

	border-radius: 8px;

	transition: background 0.2s ease;

}



.havir-flash-deals__link:hover {

	background: rgba(255, 255, 255, 0.32);

	color: #ffffff !important;

}



.havir-flash-deals .havir-product-grid {

	margin-bottom: 0;

}



.havir-flash-deals .havir-product-card {

	background: #ffffff;

	color: #1e293b;

	border: none;

}



/* ============================================

   GLOBAL PROTECTION & HORIZONTAL DISPLAY FOR TRACKING PLUGINS

   ============================================ */

[class*="tracking"] svg,

[class*="shipment"] svg,

[class*="post-"] svg,

[class*="post_"] svg,

[id*="tracking"] svg,

[id*="shipment"] svg,

.order-tracking svg,

.post-tracking svg {

	width: 24px !important;

	height: 24px !important;

	max-width: 28px !important;

	max-height: 28px !important;

	min-width: 16px !important;

	min-height: 16px !important;

	display: inline-block !important;

	vertical-align: middle !important;

	flex-shrink: 0 !important;

}



[class*="tracking"] ul:not(.havir-primary-menu),

[class*="tracking"] ol,

[class*="shipment"] ul,

[class*="shipment"] ol,

.order-tracking ul,

.order-tracking ol {

	display: grid !important;

	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;

	gap: 12px !important;

	list-style: none !important;

	margin: 16px 0 !important;

	padding: 0 !important;

}



[class*="tracking"] ul:not(.havir-primary-menu) > li,

[class*="tracking"] ol > li,

[class*="shipment"] ul > li,

[class*="shipment"] ol > li,

.order-tracking ul > li,

.order-tracking ol > li {

	display: flex !important;

	flex-direction: column !important;

	align-items: center !important;

	text-align: center !important;

	background: #f8fafc !important;

	border: 1px solid #e2e8f0 !important;

	border-radius: 12px !important;

	padding: 14px 10px !important;

}





/* ============================================

   22. ORDER PROGRESS STEPPER (tracking + my-account)

   Horizontal on desktop, vertical timeline on mobile.

   ============================================ */

.havir-stepper {

	position: relative;

	--stepper-line: var(--havir-border);

	--stepper-fill: var(--havir-red);

	--stepper-done: var(--havir-red);

	--stepper-node: var(--havir-surface);

	--stepper-pending: var(--havir-muted);

}



.havir-stepper__track {

	position: relative;

	display: flex;

	justify-content: space-between;

	list-style: none;

	margin: 0;

	padding: 0;

}



/* connecting line */

.havir-stepper__line {

	position: absolute;

	top: 26px;

	left: 32px;

	right: 32px;

	height: 3px;

	background: var(--stepper-line);

	z-index: 0;

	border-radius: 999px;

}



.havir-stepper__line-fill {

	height: 100%;

	width: 0;

	background: var(--stepper-fill);

	transition: width 0.6s var(--transition);

	border-radius: 999px;

}



.havir-stepper__steps {

	display: flex;

	justify-content: space-between;

	list-style: none;

	margin: 0;

	padding: 0;

	position: relative;

	z-index: 1;

}



.havir-stepper__step {

	display: flex;

	flex-direction: column;

	align-items: center;

	text-align: center;

	gap: 8px;

	flex: 0 0 auto;

	max-width: 130px;

}



/* node circle */

.havir-stepper__node {

	position: relative;

	display: flex;

	align-items: center;

	justify-content: center;

	width: 52px;

	height: 52px;

	border-radius: 50%;

	background: var(--stepper-node);

	border: 3px solid var(--stepper-line);

	color: var(--stepper-pending);

	flex: none;

	transition: border-color 0.3s ease, background 0.3s ease, transform 0.3s ease;

}



.havir-stepper__node svg {

	width: 22px;

	height: 22px;

	flex: none;

}



/* done state */

.havir-stepper__step.is-done .havir-stepper__node {

	background: var(--stepper-done);

	border-color: var(--stepper-done);

	color: #ffffff;

}



.havir-stepper__step.is-done .havir-stepper__title {

	color: var(--stepper-done);

}



/* current / active state */

.havir-stepper__step.is-current .havir-stepper__node {

	border-color: var(--stepper-fill);

	color: var(--stepper-fill);

	background: var(--stepper-node);

	box-shadow: 0 0 0 8px rgba(211, 47, 47, 0.1);

	transform: scale(1.06);

}



.havir-stepper__pulse {

	position: absolute;

	inset: -4px;

	border-radius: 50%;

	border: 2px solid var(--stepper-fill);

	animation: havirStepperPulse 2s ease-out infinite;

	pointer-events: none;

}



@keyframes havirStepperPulse {

	0% { transform: scale(0.9); opacity: 1; }

	100% { transform: scale(1.35); opacity: 0; }

}



/* stopped (cancelled / failed / refunded) */

.havir-stepper__step.is-stopped .havir-stepper__node {

	background: var(--stepper-done);

	border-color: var(--stepper-done);

	color: #ffffff;

}



.havir-stepper__stop {

	position: absolute;

	top: 50%;

	left: 50%;

	transform: translate(-50%, -50%);

	font-size: 16px;

	line-height: 1;

}



/* cancelled notice */

.havir-stepper__notice {

	margin-top: var(--space-4);

	padding: 12px 16px;

	background: #fff8f8;

	border: 1px solid #f5c6c6;

	border-radius: 10px;

	color: #a33;

	font-weight: 600;

	text-align: center;

}



.havir-stepper__title {

	font-size: 0.95rem;

	font-weight: 700;

	color: var(--havir-text);

	line-height: 1.3;

}



.havir-stepper__desc {

	font-size: 0.78rem;

	color: var(--stepper-pending);

	line-height: 1.4;

	margin-top: 2px;

}



/* mobile: vertical timeline */

@media (max-width: 767px) {

	.havir-stepper__track {

		display: block;

	}



	.havir-stepper__line {

		display: none;

	}



	.havir-stepper__steps {

		flex-direction: column;

		gap: 0;

	}



	.havir-stepper__step {

		flex-direction: row;

		align-items: flex-start;

		text-align: left;

		gap: 14px;

		max-width: none;

		padding: 14px 0;

	}



	.havir-stepper__node {

		flex: none;

	}



	.havir-stepper__title {

		font-size: 1rem;

	}



	.havir-stepper__desc {

		font-size: 0.82rem;

	}

}



/* Enforce 1:1 Aspect Ratio for All Product Grid Images (Native & Elementor) */

.woocommerce ul.products li.product a img,

.woocommerce-page ul.products li.product a img,

.elementor-widget-woocommerce-products .products.elementor-grid .product a img,

.elementor-widget-woocommerce-archive-products .products.elementor-grid .product a img,

.havir-product-card__media img {

    aspect-ratio: 1 / 1 !important;

    object-fit: contain !important;

    object-position: center !important;

    width: 100% !important;

    height: 100% !important;

    background-color: #ffffff;

}



/* Enforce 1:1 Aspect Ratio for Single Product Gallery Images */

.woocommerce div.product div.images .woocommerce-product-gallery__image img:not(.zoomImg) {

    aspect-ratio: 1 / 1 !important;

    object-fit: contain !important;

    width: 100% !important;

    background-color: #ffffff;

}



/* ============ Comments (comments.php) ============ */

.comments-area {

    background: var(--havir-surface);

    border: 1px solid var(--havir-border);

    border-radius: var(--havir-radius);

    box-shadow: var(--havir-shadow-sm);

    padding: 1.75rem;

    margin-top: 2.5rem;

}



.comments-title {

    font-size: 1.15rem;

    font-weight: 700;

    margin: 0 0 1.25rem;

}



.comment-list,

.comment-list .children {

    list-style: none;

    margin: 0;

    padding: 0;

}



.comment-list .children {

    margin-inline-start: 1.5rem;

}



.havir-comment {

    padding: 1rem 0;

    border-bottom: 1px solid var(--havir-border-light);

}



.comment-list > .havir-comment:last-child {

    border-bottom: 0;

}



.havir-comment .comment-body {

    display: flex;

    gap: 0.875rem;

    align-items: flex-start;

}



.havir-comment .avatar {

    border-radius: var(--havir-radius-full);

    flex-shrink: 0;

}



.havir-comment .comment-meta {

    margin-bottom: 0.5rem;

}



.havir-comment .comment-author .fn {

    font-weight: 700;

}



.havir-comment .comment-author a {

    color: var(--havir-text);

}



.havir-comment .comment-metadata a {

    color: var(--havir-muted);

    font-size: 0.82rem;

}



.havir-comment .comment-content p {

    margin: 0 0 0.5rem;

    line-height: 1.9;

}



.havir-comment .reply {

    font-size: 0.85rem;

    font-weight: 700;

}



.comment-form {

    display: grid;

    gap: 1rem;

}



.comment-form label {

    display: block;

    font-weight: 700;

    margin-bottom: 0.375rem;

}



.comment-form input[type="text"],

.comment-form input[type="email"],

.comment-form input[type="url"],

.comment-form textarea {

    inline-size: 100%;

    padding: 0.7rem 0.9rem;

    border: 1px solid var(--havir-border);

    border-radius: var(--havir-radius-sm);

    background: var(--havir-surface);

    font: inherit;

    transition: var(--havir-transition-fast);

}



.comment-form input:focus,

.comment-form textarea:focus {

    outline: none;

    border-color: var(--havir-red);

    box-shadow: 0 0 0 3px rgba(211, 47, 47, 0.12);

}



.comment-form textarea {

    min-block-size: 140px;

    resize: vertical;

}



.comment-form .submit {

    justify-self: start;

}



.no-comments {

    color: var(--havir-muted);

    margin: 0;

}



@media (max-width: 640px) {

    .comments-area {

        padding: 1.25rem;

    }



    .comment-list .children {

        margin-inline-start: 0.75rem;

    }



    .havir-comment .comment-body {

        flex-direction: column;

    }

}



/* ============================================

   14. MOBILE STICKY BOTTOM NAV & TOUCH UX

   ============================================ */

.havir-mobile-bottom-nav {

	display: none;

}



@media (max-width: 768px) {

	body {

		padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)) !important;

	}



	.havir-scroll-top {

		bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important;

	}



	.havir-mobile-bottom-nav {

		display: block !important;

		position: fixed !important;

		bottom: 0 !important;

		left: 0 !important;

		right: 0 !important;

		width: 100% !important;

		background: rgba(255, 255, 255, 0.96) !important;

		backdrop-filter: blur(12px) !important;

		-webkit-backdrop-filter: blur(12px) !important;

		border-top: 1px solid rgba(226, 232, 240, 0.9) !important;

		box-shadow: 0 -4px 18px rgba(15, 23, 42, 0.08) !important;

		z-index: 998 !important;

		padding-bottom: env(safe-area-inset-bottom, 0px) !important;

	}



	.havir-mobile-bottom-nav__inner {

		display: grid !important;

		grid-template-columns: repeat(5, 1fr) !important;

		height: 60px !important;

		align-items: center !important;

		padding: 0 4px !important;

		margin: 0 auto !important;

		max-width: 600px !important;

	}



	.havir-mobile-nav-item {

		display: flex !important;

		flex-direction: column !important;

		align-items: center !important;

		justify-content: center !important;

		color: #64748b !important;

		text-decoration: none !important;

		font-size: 11px !important;

		font-weight: 600 !important;

		gap: 3px !important;

		background: none !important;

		border: none !important;

		cursor: pointer !important;

		padding: 4px 2px !important;

		transition: color 0.18s ease, transform 0.15s ease !important;

		position: relative !important;

		-webkit-tap-highlight-color: transparent !important;

	}



	.havir-mobile-nav-item:hover,

	.havir-mobile-nav-item.is-active {

		color: #d32f2f !important;

		font-weight: 700 !important;

	}



	.havir-mobile-nav-item svg {

		width: 20px !important;

		height: 20px !important;

		stroke-width: 2.1 !important;

	}



	.havir-mobile-nav-item:active svg {

		transform: scale(0.9) !important;

	}



	.havir-mobile-nav-icon-wrap {

		position: relative !important;

		display: inline-flex !important;

		align-items: center !important;

		justify-content: center !important;

	}



	.havir-mobile-cart-item .havir-cart-badge {

		position: absolute !important;

		top: -4px !important;

		right: -8px !important;

		background: #d32f2f !important;

		color: #ffffff !important;

		font-size: 9.5px !important;

		font-weight: 700 !important;

		min-width: 17px !important;

		height: 17px !important;

		border-radius: 999px !important;

		display: flex !important;

		align-items: center !important;

		justify-content: center !important;

		padding: 0 3px !important;

		box-shadow: 0 2px 5px rgba(211, 47, 47, 0.35) !important;

		line-height: 1 !important;

	}



	.havir-mobile-vip-item {

		color: #d97706 !important;

	}



	.havir-mobile-vip-item.is-active,

	.havir-mobile-vip-item:hover {

		color: #b45309 !important;

	}



	.havir-vip-dot {

		position: absolute !important;

		top: -1px !important;

		right: -2px !important;

		width: 6px !important;

		height: 6px !important;

		background: #ef4444 !important;

		border-radius: 50% !important;

		box-shadow: 0 0 6px #ef4444 !important;

	}



	/* Quick View on Mobile: Disabled to prevent overlapping tap targets on small cards */

	.havir-product-card__media .havir-quick-view,

	.havir-product-card__media .havir-quick-view-btn,

	.havir-quick-view,

	.havir-quick-view-btn {

		display: none !important;

		opacity: 0 !important;

		visibility: hidden !important;

		pointer-events: none !important;

	}

}



/* Quantity Controls Precision Styling */

.havir-quantity-control {

	display: inline-flex !important;

	align-items: center !important;

	border: 1px solid var(--havir-border, #e2e8f0) !important;

	border-radius: 999px !important;

	background: var(--havir-surface, #ffffff) !important;

	overflow: hidden !important;

	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;

}



.havir-quantity-control .quantity {

	display: inline-flex !important;

	align-items: center !important;

	border: none !important;

	border-radius: 0 !important;

	padding: 0 !important;

	margin: 0 !important;

	background: transparent !important;

	box-shadow: none !important;

}



.havir-quantity-control input.qty,

.havir-quantity-control .quantity input.qty {

	display: inline-block !important;

	width: 46px !important;

	inline-size: 46px !important;

	min-width: 46px !important;

	max-width: 46px !important;

	height: 38px !important;

	block-size: 38px !important;

	min-block-size: 38px !important;

	max-block-size: 38px !important;

	line-height: 38px !important;

	padding: 0 !important;

	margin: 0 !important;

	border: none !important;

	border-radius: 0 !important;

	background: transparent !important;

	box-shadow: none !important;

	outline: none !important;

	text-align: center !important;

	font-size: 15px !important;

	font-weight: 800 !important;

	color: #0f172a !important;

	-moz-appearance: textfield !important;

	appearance: textfield !important;

}



.havir-quantity-control input.qty::-webkit-outer-spin-button,

.havir-quantity-control input.qty::-webkit-inner-spin-button {

	-webkit-appearance: none !important;

	margin: 0 !important;

}



.havir-quantity-control .havir-qty-btn {

	display: inline-flex !important;

	align-items: center !important;

	justify-content: center !important;

	width: 36px !important;

	inline-size: 36px !important;

	height: 38px !important;

	block-size: 38px !important;

	background: transparent !important;

	border: none !important;

	color: #475569 !important;

	font-size: 18px !important;

	font-weight: 700 !important;

	line-height: 1 !important;

	cursor: pointer !important;

	padding: 0 !important;

	margin: 0 !important;

	transition: all 0.2s ease !important;

	user-select: none !important;

}



.havir-quantity-control .havir-qty-btn:hover {

	background: rgba(230, 57, 70, 0.08) !important;

	color: var(--havir-red, #e63946) !important;

}