@font-face {
	font-weight: normal;
	font-style: normal;
	font-family: "woodmart-font";
	src: url("//stores.wady.sa/hawiah/wp-content/themes/woodmart/fonts/woodmart-font-1-400.woff2?v=8.1.2") format("woff2");
}

@font-face {
	font-family: "star";
	font-weight: 400;
	font-style: normal;
	src: url("//stores.wady.sa/hawiah/wp-content/plugins/woocommerce/assets/fonts/star.eot?#iefix") format("embedded-opentype"), url("//stores.wady.sa/hawiah/wp-content/plugins/woocommerce/assets/fonts/star.woff") format("woff"), url("//stores.wady.sa/hawiah/wp-content/plugins/woocommerce/assets/fonts/star.ttf") format("truetype"), url("//stores.wady.sa/hawiah/wp-content/plugins/woocommerce/assets/fonts/star.svg#star") format("svg");
}

@font-face {
	font-family: "WooCommerce";
	font-weight: 400;
	font-style: normal;
	src: url("//stores.wady.sa/hawiah/wp-content/plugins/woocommerce/assets/fonts/WooCommerce.eot?#iefix") format("embedded-opentype"), url("//stores.wady.sa/hawiah/wp-content/plugins/woocommerce/assets/fonts/WooCommerce.woff") format("woff"), url("//stores.wady.sa/hawiah/wp-content/plugins/woocommerce/assets/fonts/WooCommerce.ttf") format("truetype"), url("//stores.wady.sa/hawiah/wp-content/plugins/woocommerce/assets/fonts/WooCommerce.svg#WooCommerce") format("svg");
}

:root {
	--wd-text-font: "Cardo", Arial, Helvetica, sans-serif;
	--wd-text-font-weight: 400;
	--wd-text-color: #767676;
	--wd-text-font-size: 14px;
	--wd-title-font: "Cardo", Arial, Helvetica, sans-serif;
	--wd-title-font-weight: 400;
	--wd-title-transform: none;
	--wd-title-color: #242424;
	--wd-entities-title-font: "Cardo", Arial, Helvetica, sans-serif;
	--wd-entities-title-font-weight: 400;
	--wd-entities-title-transform: none;
	--wd-entities-title-color: #333333;
	--wd-entities-title-color-hover: rgb(51 51 51 / 65%);
	--wd-alternative-font: "Cardo", Arial, Helvetica, sans-serif;
	--wd-widget-title-font: "Cardo", Arial, Helvetica, sans-serif;
	--wd-widget-title-font-weight: 400;
	--wd-widget-title-transform: none;
	--wd-widget-title-color: #333;
	--wd-widget-title-font-size: 12px;
	--wd-header-el-font: "Cardo", Arial, Helvetica, sans-serif;
	--wd-header-el-font-weight: 700;
	--wd-header-el-transform: none;
	--wd-header-el-font-size: 14px;
	--wd-primary-color: rgb(0,0,0);
	--wd-alternative-color: rgb(0,0,0);
	--wd-link-color: #333333;
	--wd-link-color-hover: #242424;
	--btn-default-font-family: 'Trebuchet MS', Helvetica, sans-serif;
	--btn-default-bgcolor: #f7f7f7;
	--btn-default-bgcolor-hover: #efefef;
	--btn-accented-font-family: 'Trebuchet MS', Helvetica, sans-serif;
	--btn-accented-bgcolor: rgb(0,0,0);
	--btn-accented-bgcolor-hover: rgb(28,28,28);
	--wd-form-brd-width: 2px;
	--notices-success-bg: #459647;
	--notices-success-color: #fff;
	--notices-warning-bg: #E0B252;
	--notices-warning-color: #fff;
}
.wd-popup.wd-age-verify {
	--wd-popup-width: 500px;
}
.wd-popup.wd-promo-popup {
	background-color: #111111;
	background-image: url(https://stores.wady.sa/hawiah/wp-content/uploads/2021/08/promo-popup-1.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	--wd-popup-width: 800px;
	--wd-popup-padding: 15px;
}
.woodmart-woocommerce-layered-nav .wd-scroll-content {
	max-height: 223px;
}
.wd-page-title {
	background-color: #0a0a0a;
	background-image: url(https://tofa7a.net/wp-content/uploads/2021/10/fashion-colored-page-title-shop.jpg);
	background-size: cover;
	background-position: center center;
}
.wd-footer {
	background-color: #ffffff;
	background-image: none;
}
.wd-popup.popup-quick-view {
	--wd-popup-width: 920px;
}
:root{
--wd-container-w: 1222px;
--wd-form-brd-radius: 0px;
--btn-default-color: #333;
--btn-default-color-hover: #333;
--btn-accented-color: #fff;
--btn-accented-color-hover: #fff;
--btn-default-brd-radius: 5px;
--btn-default-box-shadow: none;
--btn-default-box-shadow-hover: none;
--btn-accented-brd-radius: 0px;
--btn-accented-box-shadow: none;
--btn-accented-box-shadow-hover: none;
--btn-accented-box-shadow-active: none;
--btn-accented-bottom: 0px;
--wd-brd-radius: 0px;
}

@media (min-width: 1222px) {
section.elementor-section.wd-section-stretch > .elementor-container {
margin-left: auto;
margin-right: auto;
}
}


@font-face {
	font-family: "cardo";
	font-weight: 400;
	font-style: normal;
}

/* =========================================================
  [1] My Account Icons Size (Woodmart / WooCommerce)
  - تعديل حجم الأيقونات اللي بتظهر قبل روابط حسابي (عن طريق ::before)
========================================================== */
.wd-my-account-links .dashboard-link a:before,
.wd-my-account-links .orders-link a:before,
.wd-my-account-links .edit-address-link a:before,
.wd-my-account-links .edit-account-link a:before,
.wd-my-account-links .customer-logout-link a:before {
  font-size: 22px; /* غير الرقم حسب الحجم اللي يعجبك */
}



/* =========================================================
  [2] Footer Sidebar Padding + Font Sizes
  - ضبط هوامش الفوتر + حجم خط النصوص والروابط + عنوان الودجت
========================================================== */
.footer-sidebar {
  padding-right: 20px;
  padding-left: 20px;
}

.footer-sidebar,
.footer-sidebar a {
  font-size: 13px;
}

.footer-sidebar .widget-title {
  font-size: 15px;
  font-weight: 600;
}



/* =========================================================
  [3] Hide Scrollbar Inside Elementor Popup (Keep Scrolling)
  - إخفاء الـ scrollbar داخل Popup بتاع Elementor مع بقاء الاسكرول شغال
========================================================== */
.dialog-lightbox-message,
.dialog-lightbox-message * {
  scrollbar-width: none !important;     /* Firefox */
  -ms-overflow-style: none !important;  /* IE/Edge */
}

.dialog-lightbox-message::-webkit-scrollbar,
.dialog-lightbox-message *::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;             /* Chrome/Safari */
}



/* =========================================================
  [4] Currency: Hide Default Symbol + Add "SAR" After Price
  - إخفاء رمز العملة الافتراضي في WooCommerce
  - إضافة نص SAR بعد الرقم
========================================================== */

/* 4.1 إخفاء أي رمز عملة افتراضي */
.woocommerce-Price-currencySymbol,
.price .woocommerce-Price-currencySymbol,
.amount .woocommerce-Price-currencySymbol {
  display: none !important;
}

/* 4.2 تجهيز السعر */
.woocommerce-Price-amount,
.price .amount,
.amount {
  position: relative;
  font-variant-ligatures: none;
}

/* 4.3 إضافة SAR بعد الرقم */
.woocommerce-Price-amount::after,
.price .amount::after,
.amount::after {
  content: " SAR";
  font-size: 12px;
  font-weight: 300;
  margin-left: 4px; /* RTL */
  vertical-align: middle;
  color: inherit;
}



/* =========================================================
  [5] Price Font Weight (Light)
  - تخفيف وزن خط السعر في كل مكان (300)
========================================================== */
.price,
.woocommerce-Price-amount,
.woocommerce-Price-amount bdi {
  font-weight: 300 !important;
}



/* =========================================================
  [6] Hide Stock Status Text
  - إخفاء In stock / Out of stock
========================================================== */
.stock.in-stock,
.stock.out-of-stock {
  display: none !important;
}



/* =========================================================
  [7] Product Card Tweaks (Woodmart Product Grid)
  - اسم المنتج Bold (500)
  - تصغير السعر
  - تصغير Swatches + إخفاء النص + منع hover scale
========================================================== */

/* 7.1 اسم المنتج Bold */
.product-element-bottom .wd-entities-title,
.product-element-bottom .wd-entities-title a {
  font-weight: 500 !important;
}

/* 7.2 تصغير حجم السعر شوية */
.product-element-bottom .price,
.product-element-bottom .price .amount,
.product-element-bottom .woocommerce-Price-amount {
  font-size: 12px !important; /* عدّلها 13/15 حسب ما تحب */
  line-height: 1.2 !important;
}

/* 7.3 تصغير swatches (لو القالب بيستخدم CSS variable) */
.product-element-bottom .wd-swatches-grid.wd-size-default {
  --swatch-size: 14px !important;
}

/* 7.4 fallback قوي لو الـ variable مش شغال */
.product-element-bottom .wd-swatches-grid.wd-size-default .wd-swatch {
  font-size: 0 !important;
  line-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;

  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
  min-height: 14px !important;
  max-width: 14px !important;
  max-height: 14px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* 7.5 الدائرة الملونة نفسها */
.product-element-bottom .wd-swatches-grid.wd-size-default .wd-swatch .wd-swatch-bg {
  width: 11px !important;
  height: 11px !important;
  min-width: 11px !important;
  min-height: 11px !important;
  max-width: 11px !important;
  max-height: 11px !important;

  border-radius: 50% !important;
}

/* 7.6 تقليل المسافات */
.product-element-bottom .wd-swatches-grid.wd-size-default {
  gap: 6px !important;
}

/* 7.7 إخفاء النص (Beige/Black...) */
.product-element-bottom .wd-swatches-grid .wd-swatch-text {
  display: none !important;
}

/* 7.8 إلغاء أي تكبير hover */
.product-element-bottom .wd-swatches-grid .wd-swatch:hover,
.product-element-bottom .wd-swatches-grid .wd-swatch-bg:hover {
  transform: none !important;
}



/* =========================================================
  [8] Remove Add-to-Cart Button Background (Loop Only)
  - إزالة الخلفية والشادو من زرار Add to cart في صفحة الشوب/اللوب
========================================================== */
a.add-to-cart-loop {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}



/* =========================================================
  [9] CF7 Hidden Meta Fields Fix
  - إخفاء أي hidden fields في Contact Form 7 (منع فراغات/ظهور غير متوقع)
========================================================== */
.wpcf7 form .hidden-fields-container,
.wpcf7 form input[type="hidden"] {
  display: none !important;
}



/* =========================================================
  [10] Apply Cardo Globally (Force + Woodmart Variables)
  - تطبيق خط Cardo على كل الموقع + ضبط متغيرات Woodmart
  - ملاحظة: لازم تكون ضايف الخط (Google Fonts أو مرفوع)
========================================================== */

/* 10.1 Force on body/html */
body, html {
  font-family: "Cardo", serif !important;
}

/* 10.2 Woodmart variables override */
:root {
  --wd-text-font: "Cardo", serif;
  --wd-title-font: "Cardo", serif;
  --wd-entities-title-font: "Cardo", serif;
  --wd-header-el-font: "Cardo", serif;
  --wd-widget-title-font: "Cardo", serif;
}

/* 10.3 Ensure common elements use it */
body, button, input, textarea, select,
h1, h2, h3, h4, h5, h6,
p, a, span, li, strong, em {
  font-family: "Cardo", serif !important;
}












/* إخفاء السكشن افتراضيًا */
.woocommerce-account .elementor-element-59ecfa8 {
    display: none !important;
}

/* إظهاره فقط بعد تسجيل الدخول */
.woocommerce-account.logged-in .elementor-element-59ecfa8 {
    display: block !important;
}













/* توحيد صور المتجر */
.woocommerce ul.products li.product img{
  width:100%;
  height:300px;   /* غيّرها حسب تصميمك */
  object-fit:cover;
}

/* توحيد صورة المنتج الأساسية داخل الجاليري */
.single-product .woocommerce-product-gallery__image img{
  width:100%;
  height:520px;   /* غيّرها حسب تصميمك */
  object-fit:cover;
}

/* توحيد صور الجاليري الصغيرة */
.single-product .flex-control-thumbs img{
  width:100%;
  height:110px;
  object-fit:cover;
}

/* ==============================
   Hide Show Sidebar & Products Per Page (Woodmart)
   ============================== */

/* إخفاء زر Show sidebar */
.wd-show-sidebar,
.wd-toolbar .wd-show-sidebar,
a[rel="nofollow"].wd-show-sidebar {
    display: none !important;
}

/* إخفاء اختيار عدد المنتجات (Show 9 / 12 / 18 / 24) */
.wd-products-per-page,
.wd-toolbar .wd-products-per-page {
    display: none !important;
}

/* لو العنصرين موجودين داخل شريط المتجر */
.woocommerce-shop .wd-show-sidebar,
.woocommerce-shop .wd-products-per-page {
    display: none !important;
}
/* =====================================
   Hide "Show sidebar" link (Woodmart)
   ===================================== */

/* أي رابط نصه Show sidebar */
a[href="#"][rel="nofollow"] {
    display: none !important;
}

/* احتياط: لو الرابط داخل toolbar */
.wd-toolbar a[href="#"] {
    display: none !important;
}

/* =====================================
   Hide Products Per Page (Show 9 / 12 / 18 / 24)
   ===================================== */

.wd-products-per-page {
    display: none !important;
}

/* صفحة المتجر فقط */
.woocommerce-shop .wd-products-per-page,
.woocommerce-shop a[href="#"][rel="nofollow"] {
    display: none !important;
}
@media (min-width: 1025px) {
	@media (min-width: 1025px) {
    header a[aria-label="Search"] .wd-tools-icon {
        display: none;
    }
}



}

@media (max-width: 576px) {
	/* =========================================================
  [11] Mobile Footer Columns: Add Divider Between Columns
  - ده بيضيف خط فاصل تحت كل عمود في الفوتر على الموبايل
  - ليه؟ عشان تنظيم أفضل وتحديد كل جزء بصريًا
  - آخر عمود بدون خط
========================================================== */
@media (max-width: 768px) {
  .footer-sidebar .footer-column {
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
    padding-bottom: 15px;
    margin-bottom: 15px;
  }

  .footer-sidebar .footer-column:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
  }
}



/* =========================================================
  [12] Mobile Footer: Center Logo + Reduce Spacing (Max 767px)
  - توسيط لوجو الفوتر في العمود الأول
  - تقليل المسافات فوق العناوين وبين الأعمدة
  - إضافة مسافة تحت اللوجو (margin-bottom)
  - ليه؟ عشان شكل الموبايل يبقى أشيك ومضغوط بدون فراغات كبيرة
========================================================== */
@media (max-width: 767px) {

  /* 12.1 توسيط اللوجو أفقيًا */
  .footer-column-1 {
    display: flex !important;
    justify-content: center !important;
    text-align: center !important;
  }

  .footer-column-1 figure,
  .footer-column-1 img {
    margin: 0 auto !important;
    display: block !important;
  }

  /* 12.2 مسافة تحت اللوجو */
  .footer-column-1 figure,
  .footer-column-1 img {
    margin-bottom: 30px !important; /* عدّل الرقم حسب اللي يريحك */
  }

  /* 12.3 تقليل المسافة الكبيرة فوق كل عنوان */
  .footer-widget {
    margin-top: 0 !important;
  }

  .footer-widget .widget-title {
    margin-top: 0px !important;
    padding-top: 6px !important;
  }

  /* 12.4 تقليل المسافة بين الأعمدة */
  .footer-column {
    margin-bottom: 3px !important;
  }

  .footer-sidebar {
    row-gap: 6px !important;
  }
}



/* =========================================================
  [13] Marquee (Infinite Scrolling Row)
  - ده يعمل شريط متحرك أفقيًا (Marquee) بعناصر متكررة
  - ليه؟ لعرض شعارات/نصوص/عروض بشكل متحرك داخل الهيدر أو أي سكشن
  - ملاحظة: عشان حركة -50% تشتغل صح لازم تكون ضاعف المحتوى داخل track
========================================================== */

/* 13.1 الكونتينر الخارجي: يمنع خروج المحتوى */
.marquee {
  width: 100%;
  overflow: hidden;
}

/* 13.2 التراك المتحرك: Flex + Animation */
.marquee-track {
  display: flex;
  width: max-content;
  gap: 60px;
  will-change: transform;
  animation: marquee-loop 20s linear infinite; /* زوّد الرقم = أبطأ */
  align-items: center;
}

/* 13.3 كل عنصر داخل التراك */
.marquee-item {
  white-space: nowrap;
}

/* 13.4 حركة اللوب */
@keyframes marquee-loop {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); } /* لأننا ضاعفنا المحتوى */
}

/* 13.5 توسيط رأسي داخل الهيدر (لو الماركي داخل Header) */
.marquee,
.marquee-track {
  height: 100%;
  display: flex;
  align-items: center;
}

}