/* ==========================================================================
   HavenOne Tweaks — لمسة عصرية فوق Flatsome
   الألوان: أسود + بيج (Nude). لتغيير الهوية عدّل المتغيرات بس.
   ========================================================================== */

:root {
	--hn-ink: #141414;          /* النص والأزرار الأساسية */
	--hn-ink-soft: #5c5752;     /* نص ثانوي */
	--hn-nude: #e8dccf;         /* البيج */
	--hn-nude-deep: #c9b29b;    /* بيج غامق للتفاصيل */
	--hn-bg: #faf7f3;           /* خلفية الأقسام الفاتحة */
	--hn-line: #ece6df;         /* الخطوط والحدود */
	--hn-sale: #a3342c;         /* لون الخصم (خمري هادي) */
	--hn-wa: #1faa59;
	--hn-radius: 14px;
	--hn-radius-sm: 10px;
	--hn-font: "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
}

/* --------------------------------------------------------------------------
   الخط والطباعة
   -------------------------------------------------------------------------- */

body,
button,
input,
select,
textarea,
.nav > li > a,
h1, h2, h3, h4, h5, h6,
.heading-font,
.alt-font,
.off-canvas-center .nav-vertical li > a {
	font-family: var(--hn-font) !important;
	letter-spacing: 0 !important;
}

body {
	color: var(--hn-ink);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
	color: var(--hn-ink);
	font-weight: 700;
	line-height: 1.35;
}

/* عناوين الأقسام بالصفحة الرئيسية ("اختاري من أقسامنا"...) */
.section-title,
.page-wrapper .row > .col h1,
.page-wrapper .row > .col h2 {
	font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem);
}

.section-title-container {
	margin-bottom: 1.5em;
}

.section-title b {
	background: var(--hn-line);
	opacity: 1;
}

/* --------------------------------------------------------------------------
   الشريط العلوي والهيدر
   -------------------------------------------------------------------------- */

#top-bar {
	background: var(--hn-ink) !important;
	font-size: 0.82rem;
	font-weight: 500;
}

#top-bar .nav > li > a,
#top-bar strong {
	color: #fff;
	font-weight: 500;
}

.header-main {
	background: rgba(255, 255, 255, 0.92) !important;
	-webkit-backdrop-filter: saturate(180%) blur(12px);
	backdrop-filter: saturate(180%) blur(12px);
	border-bottom: 1px solid var(--hn-line);
}

.header-main .nav > li > a {
	font-size: 0.95rem;
	font-weight: 500;
	color: var(--hn-ink);
	text-transform: none;
}

.header-main .nav > li > a:hover,
.header-main .nav > li.active > a {
	color: var(--hn-nude-deep);
}

/* القائمة المنسدلة */
.nav-dropdown {
	border: 1px solid var(--hn-line) !important;
	border-radius: var(--hn-radius-sm);
	box-shadow: 0 18px 40px -18px rgba(20, 20, 20, 0.25) !important;
	padding: 10px 0;
}

.nav-dropdown li a {
	font-size: 0.92rem;
	padding: 8px 20px !important;
}

/* عداد السلة */
.cart-icon strong {
	border-color: var(--hn-ink);
	border-radius: 999px;
	color: var(--hn-ink);
}

.cart-icon strong::after {
	border-color: var(--hn-ink);
}

/* --------------------------------------------------------------------------
   الأزرار
   -------------------------------------------------------------------------- */

.button,
button.button,
input[type="submit"],
.single_add_to_cart_button {
	border-radius: 999px !important;
	font-weight: 600 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	box-shadow: none !important;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.button.primary,
.single_add_to_cart_button,
.checkout-button,
#place_order {
	background-color: var(--hn-ink) !important;
	border-color: var(--hn-ink) !important;
	color: #fff !important;
}

.button.primary:hover,
.single_add_to_cart_button:hover,
.checkout-button:hover,
#place_order:hover {
	background-color: #000 !important;
	transform: translateY(-1px);
}

.button.is-outline,
.button.secondary.is-outline {
	border: 1.5px solid var(--hn-ink) !important;
	color: var(--hn-ink) !important;
	background: transparent !important;
}

.button.is-outline:hover {
	background: var(--hn-ink) !important;
	color: #fff !important;
}

/* --------------------------------------------------------------------------
   السلايدر الرئيسي
   -------------------------------------------------------------------------- */

.slider-wrapper .banner,
.slider-wrapper .slide {
	border-radius: 0;
}

.banner .button {
	padding-inline: 1.8em;
}

.flickity-page-dots .dot {
	width: 8px;
	height: 8px;
	border: 0;
	background: rgba(255, 255, 255, 0.6);
	opacity: 1;
	transition: width 0.25s ease;
}

.flickity-page-dots .dot.is-selected {
	width: 22px;
	border-radius: 999px;
	background: #fff;
}

/* --------------------------------------------------------------------------
   كروت التصنيفات ("اختاري من أقسامنا")
   -------------------------------------------------------------------------- */

.product-category .box-image {
	border-radius: var(--hn-radius);
	overflow: hidden;
}

.product-category .box-text {
	padding-top: 0.8em;
}

.product-category .box-text h5,
.product-category .header-title {
	font-size: 0.95rem;
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0;
}

.product-category .count {
	display: none;
}

/* --------------------------------------------------------------------------
   كروت المنتجات
   -------------------------------------------------------------------------- */

.product-small .box-image {
	border-radius: var(--hn-radius);
	overflow: hidden;
	background: var(--hn-bg);
	/* نسبة طولية موحدة للفساتين بدل خليط مربع/طولي */
	aspect-ratio: 3 / 4;
}

.product-small .box-image .image-zoom,
.product-small .box-image .image-fade_in_back,
.product-small .box-image .image-none,
.product-small .box-image > div:first-child,
.product-small .box-image a {
	height: 100%;
}

.product-small .box-image img {
	width: 100%;
	height: 100% !important;
	object-fit: cover;
	object-position: center top;
	transition: transform 0.6s ease, opacity 0.4s ease;
}

.product-small:hover .box-image img {
	transform: scale(1.03);
}

.product-small .box-text {
	padding: 0.9em 0.2em 1.4em;
	text-align: start;
}

.product-small .product-title,
.product-small .name {
	font-size: 0.95rem;
	font-weight: 500;
	line-height: 1.5;
	color: var(--hn-ink);
	/* سطرين كحد أقصى عشان الكروت تضل متساوية */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.product-small .category {
	display: none;
}

.product-small .price,
.product-small .price-wrapper .price {
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--hn-ink);
	margin-top: 4px;
}

.price del,
.price del .amount {
	color: var(--hn-ink-soft) !important;
	opacity: 0.6;
	font-weight: 400;
}

.price ins,
.price ins .amount {
	color: var(--hn-sale) !important;
	text-decoration: none;
	font-weight: 700;
}

/* زر + الإضافة السريعة على الصورة */
.product-small .add-to-cart-grid,
.product-small .image-tools .button {
	border-radius: 999px !important;
	background: rgba(255, 255, 255, 0.95) !important;
	color: var(--hn-ink) !important;
	border: 0 !important;
}

/* "معاينة سريعة" */
.product-small .quick-view {
	background: rgba(20, 20, 20, 0.85) !important;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
}

/* المنفّد من المخزون */
.product-small .out-of-stock-label {
	background: rgba(255, 255, 255, 0.9);
	color: var(--hn-ink);
	font-weight: 600;
	font-size: 0.8rem;
	border-radius: 999px;
	width: auto;
	inset-inline: 12px auto;
	top: 12px;
	bottom: auto;
	padding: 4px 12px;
	text-transform: none;
}

/* --------------------------------------------------------------------------
   شارات الخصم / جديد
   -------------------------------------------------------------------------- */

.badge-container {
	margin: 12px !important;
}

.badge {
	height: auto !important;
	width: auto !important;
}

.badge-inner,
.badge .badge-inner,
.badge-circle .badge-inner,
.badge-circle-inside .badge-inner {
	border-radius: 999px !important;
	padding: 5px 12px !important;
	height: auto !important;
	width: auto !important;
	font-size: 0.75rem !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
	letter-spacing: 0;
	text-transform: none;
}

.badge-inner.on-sale,
.on-sale .badge-inner {
	background: var(--hn-sale) !important;
	color: #fff !important;
}

.badge-inner.new-bubble {
	background: var(--hn-ink) !important;
	color: #fff !important;
}

/* --------------------------------------------------------------------------
   صفحة المنتج
   -------------------------------------------------------------------------- */

.single-product .product-gallery .slide img,
.single-product .woocommerce-product-gallery__image img {
	border-radius: var(--hn-radius);
}

.single-product .product-thumbnails .col a {
	border-radius: var(--hn-radius-sm);
	overflow: hidden;
}

.single-product .product-thumbnails a {
	border: 1.5px solid transparent !important;
	transform: none !important;
}

.single-product .product-thumbnails .is-nav-selected a {
	border-color: var(--hn-ink) !important;
}

.single-product .product-thumbnails img {
	opacity: 0.6;
}

.single-product .product-thumbnails .is-nav-selected img,
.single-product .product-thumbnails a:hover img {
	opacity: 1;
}

.single-product .product-info .product-title {
	font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.85rem);
	font-weight: 700;
	line-height: 1.4;
	margin-bottom: 0.4em;
}

.single-product .product-info .is-divider {
	display: none;
}

.single-product .product-info .price {
	font-size: 1.4rem;
	font-weight: 700;
	margin-bottom: 1.2em;
}

.single-product .breadcrumbs {
	font-size: 0.82rem;
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	color: var(--hn-ink-soft);
}

/* جدول الخيارات */
.single-product table.variations {
	margin-bottom: 0.6em;
}

.single-product table.variations th,
.single-product table.variations td,
.single-product table.variations .label {
	display: block;
	padding: 0;
	border: 0;
	text-align: start;
}

.single-product table.variations .label label {
	font-size: 0.9rem;
	font-weight: 600;
	margin-bottom: 8px;
	display: block;
}

.single-product table.variations td.value {
	padding-bottom: 14px;
}

.single-product .reset_variations {
	font-size: 0.8rem;
	color: var(--hn-ink-soft);
	margin-top: 8px;
	display: inline-block;
}

/* أزرار المقاسات (من havenone.js) */
.hn-swatches {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.hn-swatch {
	min-width: 64px;
	height: 44px;
	padding: 0 16px;
	margin: 0 !important;
	border: 1.5px solid var(--hn-line);
	border-radius: var(--hn-radius-sm);
	background: #fff;
	color: var(--hn-ink);
	font-family: var(--hn-font);
	font-size: 0.92rem;
	font-weight: 500;
	line-height: 1;
	cursor: pointer;
	text-transform: none;
	transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.hn-swatch:hover {
	border-color: var(--hn-ink);
}

.hn-swatch.is-active {
	background: var(--hn-ink);
	border-color: var(--hn-ink);
	color: #fff;
}

.hn-swatch:disabled,
.hn-swatch.is-disabled {
	color: #b9b3ad;
	background: #fff
		linear-gradient(to top left, transparent calc(50% - 0.75px), var(--hn-line) 50%, transparent calc(50% + 0.75px));
	cursor: not-allowed;
	border-color: var(--hn-line);
}

.hn-swatch:focus-visible {
	outline: 2px solid var(--hn-nude-deep);
	outline-offset: 2px;
}

/* السلكت الأصلي بيضل موجود لووكومرس بس مخفي */
.hn-has-swatches select {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

/* الكمية + الإضافة للسلة */
.single-product form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 10px;
}

.single-product form.variations_form.cart {
	display: block;
}

.single-product .woocommerce-variation-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 10px;
}

.single-product .quantity {
	margin: 0 !important;
	border: 1.5px solid var(--hn-line);
	border-radius: 999px;
	overflow: hidden;
	display: inline-flex;
	opacity: 1;
}

.single-product .quantity input,
.single-product .quantity .button {
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	height: 48px;
	min-height: 48px;
	border-radius: 0 !important;
}

.single-product .single_add_to_cart_button {
	flex: 1 1 220px;
	height: 50px;
	margin: 0 !important;
	font-size: 1rem !important;
}

/* زر الواتساب */
.hn-wa-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	height: 50px;
	margin: 10px 0 0;
	border: 1.5px solid var(--hn-ink);
	border-radius: 999px;
	color: var(--hn-ink) !important;
	font-weight: 600;
	font-size: 0.95rem;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.hn-wa-btn svg {
	color: var(--hn-wa);
	flex: none;
}

.hn-wa-btn:hover {
	background: var(--hn-ink);
	color: #fff !important;
}

.hn-wa-btn:hover svg {
	color: #fff;
}

/* صندوق التوصيل والدفع والتبديل */
.hn-info-box {
	list-style: none;
	margin: 18px 0 8px !important;
	padding: 6px 16px;
	background: var(--hn-bg);
	border: 1px solid var(--hn-line);
	border-radius: var(--hn-radius);
}

.hn-info-box li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0 !important;
	padding: 12px 0;
	border-bottom: 1px solid var(--hn-line);
}

.hn-info-box li:last-child {
	border-bottom: 0;
}

.hn-info-box svg {
	flex: none;
	margin-top: 2px;
	color: var(--hn-nude-deep);
}

.hn-info-box strong {
	display: block;
	font-size: 0.88rem;
	font-weight: 600;
}

.hn-info-box span {
	display: block;
	font-size: 0.85rem;
	color: var(--hn-ink-soft);
	line-height: 1.6;
}

/* أيقونات المشاركة */
.single-product .social-icons.share-icons {
	margin-top: 10px;
}

.single-product .share-icons .icon {
	border-color: var(--hn-line) !important;
	color: var(--hn-ink-soft) !important;
	background: transparent !important;
}

/* التبويبات (الوصف / معلومات إضافية) */
.single-product .woocommerce-tabs .tabs {
	border-bottom: 1px solid var(--hn-line);
	gap: 4px;
}

.single-product .woocommerce-tabs .tabs li a {
	font-size: 0.95rem;
	font-weight: 500;
	text-transform: none;
	letter-spacing: 0;
	color: var(--hn-ink-soft);
	border: 0 !important;
	padding: 12px 6px;
}

.single-product .woocommerce-tabs .tabs li.active a {
	color: var(--hn-ink);
	box-shadow: inset 0 -2px 0 var(--hn-ink);
	background: transparent;
}

.single-product .woocommerce-Tabs-panel {
	line-height: 1.9;
	font-size: 0.95rem;
	color: #3c3834;
}

.single-product .woocommerce-product-attributes th,
.single-product .woocommerce-product-attributes td {
	border-color: var(--hn-line);
	padding: 12px 0;
	font-size: 0.9rem;
}

/* "منتجات ذات صلة" */
.related .product-section-title,
.related h3 {
	font-size: 1.3rem;
	font-weight: 700;
	text-transform: none;
	letter-spacing: 0;
}

/* شريط الإضافة للسلة الثابت (Flatsome) */
.sticky-add-to-cart--active {
	background: rgba(255, 255, 255, 0.96) !important;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border-top: 1px solid var(--hn-line);
	box-shadow: 0 -10px 30px -18px rgba(20, 20, 20, 0.35) !important;
}

/* --------------------------------------------------------------------------
   الحقول والفورمات (سلة / دفع / حسابي)
   -------------------------------------------------------------------------- */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="search"],
input[type="number"],
textarea,
select {
	border: 1.5px solid var(--hn-line) !important;
	border-radius: var(--hn-radius-sm) !important;
	box-shadow: none !important;
	min-height: 46px;
	font-size: 0.95rem;
	background-color: #fff;
}

input:focus,
textarea:focus,
select:focus {
	border-color: var(--hn-ink) !important;
	box-shadow: 0 0 0 3px rgba(20, 20, 20, 0.06) !important;
}

.woocommerce-cart .cart_totals,
.woocommerce-checkout .checkout-sidebar,
.woocommerce-checkout #order_review,
.has-border {
	border: 1px solid var(--hn-line) !important;
	border-radius: var(--hn-radius);
	padding: 24px !important;
}

.shop_table th {
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0;
	font-size: 0.9rem;
}

.woocommerce-message,
.woocommerce-info,
.message-container {
	border-radius: var(--hn-radius-sm);
}

/* --------------------------------------------------------------------------
   الفوتر
   -------------------------------------------------------------------------- */

.footer-wrapper .footer-1,
.footer-wrapper .footer-2 {
	background: var(--hn-bg) !important;
	color: var(--hn-ink);
	border-top: 1px solid var(--hn-line);
}

.footer-wrapper .widget-title,
.footer-wrapper h4 {
	font-size: 0.95rem;
	font-weight: 700;
	text-transform: none;
	letter-spacing: 0;
	color: var(--hn-ink);
}

.footer-wrapper .is-divider {
	display: none;
}

.footer-wrapper a {
	color: var(--hn-ink-soft);
}

.footer-wrapper a:hover {
	color: var(--hn-ink);
}

.absolute-footer {
	background: var(--hn-ink) !important;
	color: rgba(255, 255, 255, 0.7);
	font-size: 0.8rem;
}

.absolute-footer a {
	color: #fff;
}

/* --------------------------------------------------------------------------
   زر واتساب العائم
   -------------------------------------------------------------------------- */

.hn-wa-float {
	position: fixed;
	bottom: 20px;
	inset-inline-start: 20px;
	z-index: 999;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: var(--hn-wa);
	color: #fff !important;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 10px 24px -8px rgba(31, 170, 89, 0.6);
	transition: transform 0.2s ease;
}

.hn-wa-float svg {
	width: 28px;
	height: 28px;
}

.hn-wa-float:hover {
	transform: scale(1.06);
}

/* بصفحة المنتج على الموبايل: فوق شريط الإضافة للسلة الثابت */
@media (max-width: 849px) {
	.single-product .hn-wa-float {
		bottom: 92px;
	}
}

/* --------------------------------------------------------------------------
   الموبايل
   -------------------------------------------------------------------------- */

@media (max-width: 549px) {
	.product-small .box-text {
		padding: 0.7em 0.1em 1.1em;
	}

	.product-small .product-title,
	.product-small .name {
		font-size: 0.88rem;
	}

	.product-small .price {
		font-size: 0.9rem;
	}

	.badge-container {
		margin: 8px !important;
	}

	.hn-swatch {
		flex: 1 1 0;
		min-width: 0;
	}

	.single-product .single_add_to_cart_button {
		flex-basis: 100%;
	}

	.single-product .quantity {
		flex: 1 1 100%;
		justify-content: center;
	}

	.hn-wa-float {
		width: 50px;
		height: 50px;
		bottom: 16px;
		inset-inline-start: 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition: none !important;
	}
}
