/* ======================================================
   ECOMWELT EASYORDERS THEME - V1
   Based on the working EasyOrders override structure supplied by the user.

   Brand:
   EcomWelt — Amazon & E-Commerce Education + Consulting

   Color System:
   Deep Navy: #071B33 / #0B1F3A
   Orange Accent: #FF7A00
   Blue Accent: #2563EB
   Light Background: #F5F8FC
   Text: #0F172A
   WhatsApp: #25D366
====================================================== */

:root {
  --ew-primary: #0B1F3A;
  --ew-primary-dark: #061527;
  --ew-primary-soft: #102A4C;
  --ew-accent: #FF7A00;
  --ew-accent-dark: #E56500;
  --ew-blue: #2563EB;
  --ew-blue-soft: #EAF1FF;
  --ew-bg: #F5F8FC;
  --ew-bg-soft: #EEF4FF;
  --ew-card: #FFFFFF;
  --ew-white: #FFFFFF;
  --ew-text: #0F172A;
  --ew-muted: #64748B;
  --ew-border: rgba(11, 31, 58, 0.14);
  --ew-border-strong: rgba(11, 31, 58, 0.24);
  --ew-shadow: 0 14px 34px rgba(11, 31, 58, 0.08);
  --ew-shadow-strong: 0 18px 46px rgba(11, 31, 58, 0.16);
  --whatsapp-green: #25D366;
}

/* ======================================================
   1) GLOBAL BACKGROUND / BASE
====================================================== */

html,
body,
#__next,
#root,
.app,
.app_container,
.layout,
.layout_container,
.page,
.page_container,
.page_content,
.content,
.content_container,
main,
section,
article,
aside,
.home_container,
.home_page,
.category_page,
.categories_page,
.collections_page,
.products_page,
.product_page,
.cart_page,
.checkout_page,
.thank_you_page,
.thankyou_page,
.success_page,
.payment_page,
.shipping_page,
.container,
.container_class,
.home_products_grid_container,
.products_grid_container,
.category_products_grid_container,
.checkout_container,
.cart_container,
order_success_container,
.order_success_container {
  background-color: var(--ew-bg) !important;
  color: var(--ew-text) !important;
}

html,
body {
  font-family: "Cairo", "Alexandria", Tahoma, Arial, sans-serif !important;
  scroll-behavior: smooth !important;
}

body {
  direction: rtl !important;
}

/* Keep common wrappers clean without destroying custom dark sections */
body > div,
body > div > div,
main > div {
  background-color: var(--ew-bg) !important;
}

img,
video,
iframe,
svg {
  max-width: 100% !important;
}

/* ======================================================
   2) HEADER - EcomWelt Navy Header
====================================================== */

header,
.default_header,
.header,
.navbar,
.navbar_container,
.header_container,
.default_header_container,
.store_header,
.store_header_container,
.header-wrapper,
.header_wrapper,
.site_header,
.main_header,
.top_header {
  background: linear-gradient(135deg, var(--ew-primary-dark) 0%, var(--ew-primary) 58%, #0E2E55 100%) !important;
  color: var(--ew-white) !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: 0 8px 28px rgba(6, 21, 39, 0.22) !important;
}

header *,
.default_header *,
.header *,
.navbar *,
.navbar_container *,
.header_container *,
.default_header_container *,
.store_header *,
.store_header_container *,
.header-wrapper *,
.header_wrapper *,
.site_header *,
.main_header *,
.top_header * {
  background-color: transparent !important;
  color: var(--ew-white) !important;
}

header a,
.default_header a,
.header a,
.navbar a,
.header_container a,
.default_header_container a,
.store_header a {
  color: var(--ew-white) !important;
  font-weight: 800 !important;
  text-decoration: none !important;
}

header a:hover,
.default_header a:hover,
.header a:hover,
.navbar a:hover,
.header_container a:hover,
.default_header_container a:hover,
.store_header a:hover {
  color: var(--ew-accent) !important;
}

header svg,
.default_header svg,
.header svg,
.navbar svg,
.header_container svg,
.default_header_container svg {
  color: var(--ew-white) !important;
  stroke: var(--ew-white) !important;
}

/* Header CTA / cart / account buttons */
header button,
.default_header button,
.header button,
.navbar button,
.header_container button,
.default_header_container button,
.store_header button {
  background: var(--ew-accent) !important;
  color: var(--ew-white) !important;
  border-color: var(--ew-accent) !important;
  border-radius: 12px !important;
  font-weight: 900 !important;
}

/* ======================================================
   3) CATEGORY / NAV BAR UNDER HEADER
====================================================== */

nav,
.menu,
.main_menu,
.categories_nav,
.categories_bar,
.category_bar,
.default_categories,
.default_categories_bar,
.default_header_categories,
.header_categories,
.header_menu,
.navigation,
.navigation_bar,
.nav_menu,
.store_categories,
.store_categories_menu,
.mobile_categories,
.desktop_categories {
  background-color: var(--ew-white) !important;
  color: var(--ew-text) !important;
  border-bottom: 1px solid var(--ew-border) !important;
  box-shadow: 0 8px 22px rgba(11, 31, 58, 0.05) !important;
}

nav *,
.menu *,
.main_menu *,
.categories_nav *,
.categories_bar *,
.category_bar *,
.default_categories *,
.default_categories_bar *,
.default_header_categories *,
.header_categories *,
.header_menu *,
.navigation *,
.navigation_bar *,
.nav_menu *,
.store_categories *,
.store_categories_menu *,
.mobile_categories *,
.desktop_categories * {
  background-color: transparent !important;
  color: var(--ew-text) !important;
}

nav a,
.menu a,
.main_menu a,
.categories_nav a,
.categories_bar a,
.category_bar a,
.default_categories a,
.default_categories_bar a,
.default_header_categories a,
.header_categories a,
.header_menu a,
.navigation a,
.navigation_bar a,
.nav_menu a,
.store_categories a,
.store_categories_menu a,
.mobile_categories a,
.desktop_categories a {
  color: var(--ew-text) !important;
  background-color: transparent !important;
  text-decoration: none !important;
  border-bottom: none !important;
  border-radius: 12px !important;
  padding: 8px 14px !important;
  transition: all 0.25s ease !important;
  font-weight: 800 !important;
}

nav a::after,
.menu a::after,
.main_menu a::after,
.categories_nav a::after,
.categories_bar a::after,
.category_bar a::after,
.default_categories a::after,
.default_categories_bar a::after,
.default_header_categories a::after,
.header_categories a::after,
.header_menu a::after,
.navigation a::after,
.navigation_bar a::after,
.nav_menu a::after,
.store_categories a::after,
.store_categories_menu a::after {
  display: none !important;
  content: none !important;
  background: transparent !important;
  border: none !important;
}

nav a:hover,
.menu a:hover,
.main_menu a:hover,
.categories_nav a:hover,
.categories_bar a:hover,
.category_bar a:hover,
.default_categories a:hover,
.default_categories_bar a:hover,
.default_header_categories a:hover,
.header_categories a:hover,
.header_menu a:hover,
.navigation a:hover,
.navigation_bar a:hover,
.nav_menu a:hover,
.store_categories a:hover,
.store_categories_menu a:hover,
.mobile_categories a:hover,
.desktop_categories a:hover,
nav a.active,
nav a[aria-current="page"],
.menu a.active,
.menu a[aria-current="page"],
.categories_bar a.active,
.categories_bar a[aria-current="page"],
.category_bar a.active,
.category_bar a[aria-current="page"],
.default_categories a.active,
.default_categories a[aria-current="page"],
.header_categories a.active,
.header_categories a[aria-current="page"],
.navigation a.active,
.navigation a[aria-current="page"] {
  background-color: var(--ew-blue-soft) !important;
  color: var(--ew-blue) !important;
  text-decoration: none !important;
  border-bottom: none !important;
}

/* Direct bar under header fallback */
header + div,
.default_header + div,
.header + div,
.store_header + div,
.site_header + div,
.main_header + div {
  background-color: var(--ew-white) !important;
  color: var(--ew-text) !important;
  border-bottom: 1px solid var(--ew-border) !important;
  box-shadow: 0 8px 22px rgba(11, 31, 58, 0.05) !important;
}

header + div *,
.default_header + div *,
.header + div *,
.store_header + div *,
.site_header + div *,
.main_header + div * {
  background-color: transparent !important;
  color: var(--ew-text) !important;
}

header + div a,
.default_header + div a,
.header + div a,
.store_header + div a,
.site_header + div a,
.main_header + div a {
  color: var(--ew-text) !important;
  background-color: transparent !important;
  text-decoration: none !important;
  border-bottom: none !important;
  border-radius: 12px !important;
  padding: 8px 14px !important;
  font-weight: 800 !important;
  transition: all 0.25s ease !important;
}

header + div a:hover,
.default_header + div a:hover,
.header + div a:hover,
.store_header + div a:hover,
.site_header + div a:hover,
.main_header + div a:hover,
header + div a.active,
header + div a[aria-current="page"],
.default_header + div a.active,
.default_header + div a[aria-current="page"],
.header + div a.active,
.header + div a[aria-current="page"] {
  background-color: var(--ew-blue-soft) !important;
  color: var(--ew-blue) !important;
  text-decoration: none !important;
  border-bottom: none !important;
}

/* Tailwind-style category links fallback */
.h-full.w-full.flex.justify-center.items-center.gap-8 a:hover,
.h-full.w-full.flex.justify-center.items-center.gap-8 a.hover\:underline:hover {
  background-color: var(--ew-blue-soft) !important;
  color: var(--ew-blue) !important;
  text-decoration: none !important;
  border-bottom: none !important;
}

/* ======================================================
   4) PRODUCT CARDS / CATEGORY CARDS
====================================================== */

.default_product_list_card,
.home_products_grid_card,
.products_grid_card,
.product_card,
.product-list-card,
.product_card_container,
.category_product_card {
  background-color: var(--ew-card) !important;
  color: var(--ew-text) !important;
  border: 1px solid var(--ew-border) !important;
  border-radius: 18px !important;
  box-shadow: var(--ew-shadow) !important;
  overflow: hidden !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
}

.default_product_list_card:hover,
.home_products_grid_card:hover,
.products_grid_card:hover,
.product_card:hover,
.product-list-card:hover,
.product_card_container:hover,
.category_product_card:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--ew-shadow-strong) !important;
  border-color: rgba(255, 122, 0, 0.28) !important;
}

.default_product_list_card div,
.home_products_grid_card div,
.products_grid_card div,
.product_card div,
.product-list-card div,
.product_card_container div,
.category_product_card div {
  background-color: transparent !important;
}

.default_product_list_card img,
.home_products_grid_card img,
.products_grid_card img,
.product_card img,
.product-list-card img,
.product_card_container img,
.category_product_card img {
  background-color: var(--ew-white) !important;
}

.product_name,
.product_title,
.card_title,
.default_product_list_card .product_name,
.home_products_grid_card .product_name,
.products_grid_card .product_name {
  color: var(--ew-text) !important;
  background-color: transparent !important;
  font-weight: 900 !important;
}

.product_price,
.price,
.card_price,
.default_product_list_card .product_price,
.home_products_grid_card .product_price,
.products_grid_card .product_price {
  color: var(--ew-accent) !important;
  background-color: transparent !important;
  font-weight: 900 !important;
}

/* ======================================================
   5) PRODUCT DETAILS / CART / CHECKOUT / THANK YOU
====================================================== */

.product_details,
.product_details_container,
.product_info,
.product_description,
.product_content,
.cart_container,
.cart_page,
.cart_items,
.cart_item,
.checkout_container,
.checkout_page,
.checkout_card,
.order_summary,
.summary_card,
.thank_you_page,
.thankyou_page,
.success_page,
.order_success_container {
  background-color: var(--ew-bg) !important;
  color: var(--ew-text) !important;
}

.product_details *,
.product_details_container *,
.product_info *,
.product_description *,
.product_content *,
.cart_container *,
.checkout_container *,
.thank_you_page *,
.thankyou_page *,
.success_page *,
.order_success_container * {
  color: var(--ew-text) !important;
}

/* Product information blocks */
.product_details,
.product_info,
.checkout_card,
.order_summary,
.summary_card,
.cart_item {
  border-radius: 18px !important;
  border: 1px solid var(--ew-border) !important;
  box-shadow: var(--ew-shadow) !important;
}

/* ======================================================
   6) TITLES / TEXT HIERARCHY
====================================================== */

.home_section_top_title,
.section_title,
.category_title,
.page_title,
.products_title,
.product_page_title,
h1,
h2 {
  color: var(--ew-primary) !important;
  background-color: transparent !important;
  font-weight: 900 !important;
}

h3,
h4,
h5,
h6 {
  color: var(--ew-text) !important;
  background-color: transparent !important;
  font-weight: 800 !important;
}

p,
span,
li,
div {
  letter-spacing: 0 !important;
}

/* ======================================================
   7) BUTTONS / ADD TO CART / CTAs
====================================================== */

button,
.checkout_btn,
.add_to_cart_btn,
.form_checkout_btn,
.buy_now_btn,
.cart_btn,
.product_add_to_cart_btn,
.submit_btn,
.btn-primary,
.primary_btn,
a.button,
a.btn {
  background: linear-gradient(135deg, var(--ew-accent) 0%, #FF8F1F 100%) !important;
  color: var(--ew-white) !important;
  border: 1px solid var(--ew-accent) !important;
  border-radius: 12px !important;
  font-weight: 900 !important;
  text-decoration: none !important;
  transition: all 0.25s ease !important;
  box-shadow: 0 12px 26px rgba(255, 122, 0, 0.20) !important;
}

button *,
.checkout_btn *,
.add_to_cart_btn *,
.form_checkout_btn *,
.buy_now_btn *,
.cart_btn *,
.product_add_to_cart_btn *,
.submit_btn *,
.btn-primary *,
.primary_btn *,
a.button *,
a.btn * {
  color: var(--ew-white) !important;
}

button:hover,
.checkout_btn:hover,
.add_to_cart_btn:hover,
.form_checkout_btn:hover,
.buy_now_btn:hover,
.cart_btn:hover,
.product_add_to_cart_btn:hover,
.submit_btn:hover,
.btn-primary:hover,
.primary_btn:hover,
a.button:hover,
a.btn:hover {
  background: linear-gradient(135deg, var(--ew-accent-dark) 0%, var(--ew-accent) 100%) !important;
  border-color: var(--ew-accent-dark) !important;
  color: var(--ew-white) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 16px 30px rgba(255, 122, 0, 0.26) !important;
}

/* Secondary buttons if theme uses outline classes */
.btn-secondary,
.secondary_btn,
a.btn-secondary {
  background: var(--ew-white) !important;
  color: var(--ew-primary) !important;
  border: 1px solid var(--ew-border-strong) !important;
  box-shadow: none !important;
}

.btn-secondary:hover,
.secondary_btn:hover,
a.btn-secondary:hover {
  background: var(--ew-blue-soft) !important;
  color: var(--ew-blue) !important;
  border-color: rgba(37, 99, 235, 0.28) !important;
}

/* ======================================================
   8) INPUTS / FORMS
====================================================== */

input,
textarea,
select,
.global_input,
.global_textarea {
  background-color: var(--ew-white) !important;
  color: var(--ew-text) !important;
  border: 1px solid var(--ew-border-strong) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}

input:focus,
textarea:focus,
select:focus,
.global_input:focus,
.global_textarea:focus {
  border-color: var(--ew-blue) !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12) !important;
  outline: none !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--ew-muted) !important;
}

/* ======================================================
   9) FOOTER - EcomWelt Branding
====================================================== */

footer,
.default_footer,
.footer,
.footer_container,
.store_footer {
  background: linear-gradient(135deg, var(--ew-primary-dark) 0%, var(--ew-primary) 65%, #0E2E55 100%) !important;
  color: var(--ew-white) !important;
  border-top: 1px solid rgba(255,255,255,0.08) !important;
}

footer *,
.default_footer *,
.footer *,
.footer_container *,
.store_footer * {
  background-color: transparent !important;
  color: var(--ew-white) !important;
}

footer a,
.default_footer a,
.footer a,
.footer_container a,
.store_footer a,
.default_footer_link {
  color: rgba(255,255,255,0.88) !important;
  text-decoration: none !important;
}

footer a:hover,
.default_footer a:hover,
.footer a:hover,
.footer_container a:hover,
.store_footer a:hover,
.default_footer_link:hover {
  color: var(--ew-accent) !important;
}

/* Add our brand mark line if footer allows pseudo elements */
footer::after,
.default_footer::after,
.footer::after,
.footer_container::after,
.store_footer::after {
  content: "© 2026 EcomWelt — Amazon & E-Commerce Education + Consulting" !important;
  display: block !important;
  padding: 14px 20px !important;
  margin-top: 18px !important;
  border-top: 1px solid rgba(255,255,255,0.12) !important;
  color: rgba(255,255,255,0.78) !important;
  font-size: 13px !important;
  text-align: center !important;
  direction: ltr !important;
}

/* ======================================================
   10) HIDE EASYORDERS POWERED BY
   ملاحظة: CSS لا يقدر يخفي Text Node فقط لو النص بدون كلاس أو لينك.
   هذه القواعد تخفي أغلب حالات Powered by EasyOrders المعروفة.
====================================================== */

footer a[href*="easy-orders"],
footer a[href*="easyorders"],
footer a[href*="EasyOrders"],
footer [class*="powered"],
footer [class*="Powered"],
footer [id*="powered"],
footer [id*="Powered"],
.default_footer a[href*="easy-orders"],
.default_footer a[href*="easyorders"],
.default_footer [class*="powered"],
.default_footer [id*="powered"],
.footer a[href*="easy-orders"],
.footer a[href*="easyorders"],
.footer [class*="powered"],
.footer [id*="powered"],
.store_footer a[href*="easy-orders"],
.store_footer a[href*="easyorders"],
.store_footer [class*="powered"],
.store_footer [id*="powered"],
.powered-by,
.powered_by,
.poweredBy,
.easyorders-powered,
.easy-orders-powered,
[class*="easyorders-powered"],
[class*="easy-orders-powered"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

/* Direct external platform links outside footer, if generated separately */
a[href="https://www.easy-orders.net"],
a[href="https://easy-orders.net"],
a[href="https://www.easyorders.eg"],
a[href="https://easyorders.eg"] {
  display: none !important;
  visibility: hidden !important;
}

/* ======================================================
   11) SLIDER / HERO / HOME SECTIONS
====================================================== */

.swiper,
.swiper-wrapper,
.swiper-slide {
  background-color: var(--ew-bg) !important;
}

.swiper-pagination-bullet {
  background-color: rgba(11, 31, 58, 0.28) !important;
}

.swiper-pagination-bullet-active {
  background-color: var(--ew-accent) !important;
}

.home_section,
.home-section,
.section_container,
.section-container {
  background-color: var(--ew-bg) !important;
}

/* ======================================================
   12) BADGES / DISCOUNTS / PRICES
====================================================== */

.discount,
.discount_badge,
.sale_badge,
.badge,
.product_badge {
  background-color: rgba(255, 122, 0, 0.12) !important;
  color: var(--ew-accent-dark) !important;
  border: 1px solid rgba(255, 122, 0, 0.22) !important;
  border-radius: 999px !important;
  font-weight: 900 !important;
}

.old_price,
.compare_at_price,
.price_before,
del {
  color: #94A3B8 !important;
}

/* ======================================================
   13) WHATSAPP FLOATING BUTTON - Keep Green
====================================================== */

#chat-widget-wa {
  background: transparent !important;
  background-color: transparent !important;
  z-index: 9999999 !important;
}

#chat-widget-wa,
#chat-widget-wa * {
  background-image: none !important;
}

#chat-widget-wa > div,
#chat-widget-wa div[style] {
  background: var(--whatsapp-green) !important;
  background-color: var(--whatsapp-green) !important;
  color: #FFFFFF !important;
  border-radius: 20px !important;
  border: none !important;
  box-shadow: 0 8px 22px rgba(37, 211, 102, 0.30) !important;
}

#chat-widget-wa > div *,
#chat-widget-wa div[style] *,
#chat-widget-wa svg,
#chat-widget-wa svg *,
#chat-widget-wa path {
  color: #FFFFFF !important;
  fill: #FFFFFF !important;
  stroke: none !important;
  background: transparent !important;
  background-color: transparent !important;
}

#chat-widget-wa:hover > div,
#chat-widget-wa:hover div[style] {
  background: #1EBE5D !important;
  background-color: #1EBE5D !important;
  color: #FFFFFF !important;
}

#chat-widget-wa button,
#chat-widget-wa a,
#chat-widget-wa .btn,
#chat-widget-wa .button {
  background-color: var(--whatsapp-green) !important;
  color: #FFFFFF !important;
  border: none !important;
}

/* ======================================================
   14) MOBILE POLISH
====================================================== */

@media (max-width: 768px) {
  html,
  body {
    font-size: 15px !important;
  }

  header,
  .default_header,
  .header,
  .navbar,
  .header_container,
  .default_header_container,
  .store_header {
    box-shadow: 0 6px 18px rgba(6, 21, 39, 0.22) !important;
  }

  nav a,
  .menu a,
  .main_menu a,
  .categories_nav a,
  .categories_bar a,
  .category_bar a,
  .navigation a,
  .nav_menu a,
  header + div a {
    padding: 8px 10px !important;
    font-size: 14px !important;
  }

  .default_product_list_card,
  .home_products_grid_card,
  .products_grid_card,
  .product_card,
  .product-list-card,
  .product_card_container,
  .category_product_card {
    border-radius: 16px !important;
  }

  button,
  .checkout_btn,
  .add_to_cart_btn,
  .form_checkout_btn,
  .buy_now_btn,
  .cart_btn,
  .product_add_to_cart_btn,
  .submit_btn,
  .btn-primary,
  .primary_btn,
  a.button,
  a.btn {
    border-radius: 12px !important;
  }
}

/* ======================================================
   15) OPTIONAL: EcomWelt Custom Landing Section Helpers
   Use these classes inside custom HTML blocks when building the home page.
====================================================== */

.ew-section {
  background-color: var(--ew-bg) !important;
  color: var(--ew-text) !important;
  direction: rtl !important;
}

.ew-dark-section {
  background: radial-gradient(circle at 20% 10%, rgba(37,99,235,0.18), transparent 32%),
              linear-gradient(135deg, var(--ew-primary-dark) 0%, var(--ew-primary) 62%, #0E2E55 100%) !important;
  color: var(--ew-white) !important;
}

.ew-dark-section *,
.ew-dark-card * {
  color: var(--ew-white) !important;
}

.ew-card {
  background-color: var(--ew-card) !important;
  border: 1px solid var(--ew-border) !important;
  border-radius: 22px !important;
  box-shadow: var(--ew-shadow) !important;
}

.ew-dark-card {
  background-color: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 22px !important;
  box-shadow: 0 18px 42px rgba(0,0,0,0.18) !important;
}

.ew-orange-text {
  color: var(--ew-accent) !important;
}

.ew-blue-text {
  color: var(--ew-blue) !important;
}

.ew-muted {
  color: var(--ew-muted) !important;
}



/* ======================================================
   ECOMWELT CLEAN HEADER FIX - V1.2
   Replace full CSS file with this version.
   - No top/bottom announcement bars
   - Clean header only
   - Bigger logo
   - Transparent nav links with orange hover/active underline
====================================================== */

:root {
  --ew-navy: #061527;
  --ew-navy-2: #0B1F3A;
  --ew-navy-3: #102A4C;
  --ew-orange: #FF7A00;
  --ew-orange-dark: #E56500;
  --ew-white: #FFFFFF;
  --ew-soft-white: rgba(255,255,255,0.88);
}

/* Cancel announcement bars from previous versions */
html, body { padding-top: 0 !important; }
body::before, body::after,
header::before, header::after,
.default_header::before, .default_header::after,
.header::before, .header::after,
.store_header::before, .store_header::after,
.site_header::before, .site_header::after,
.main_header::before, .main_header::after {
  display: none !important;
  content: none !important;
}

/* Header shell */
header,
.default_header,
.header,
.navbar,
.navbar_container,
.header_container,
.default_header_container,
.store_header,
.store_header_container,
.header-wrapper,
.header_wrapper,
.site_header,
.main_header,
.top_header {
  background: linear-gradient(135deg, var(--ew-navy) 0%, var(--ew-navy-2) 58%, var(--ew-navy-3) 100%) !important;
  color: var(--ew-white) !important;
  border: none !important;
  border-bottom: 1px solid rgba(255,122,0,0.18) !important;
  box-shadow: 0 8px 28px rgba(6,21,39,.18) !important;
  min-height: 96px !important;
  height: auto !important;
}

/* Header inner cleanup */
header *,
.default_header *,
.header *,
.navbar *,
.navbar_container *,
.header_container *,
.default_header_container *,
.store_header *,
.store_header_container *,
.header-wrapper *,
.header_wrapper *,
.site_header *,
.main_header *,
.top_header * {
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* Header layout */
header > div,
.default_header > div,
.header > div,
.store_header > div,
.header_container,
.default_header_container,
.store_header_container,
.navbar_container {
  min-height: 96px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 26px !important;
  padding: 12px 48px !important;
  background: transparent !important;
}

/* Logo bigger */
header img,
.default_header img,
.header img,
.store_header img,
.header_container img,
.default_header_container img,
.store_header_container img,
.navbar img {
  width: auto !important;
  height: 74px !important;
  max-width: 190px !important;
  object-fit: contain !important;
  border-radius: 12px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

header picture,
header figure,
header [class*="logo"],
.default_header [class*="logo"],
.header [class*="logo"],
.store_header [class*="logo"],
.header_container [class*="logo"] {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* Nav containers part of header */
header nav,
.default_header nav,
.header nav,
.store_header nav,
.header_container nav,
.default_header_container nav,
.store_header_container nav,
.navbar nav,
nav,
.menu,
.main_menu,
.categories_nav,
.categories_bar,
.category_bar,
.default_categories,
.default_categories_bar,
.default_header_categories,
.header_categories,
.header_menu,
.navigation,
.navigation_bar,
.nav_menu,
.store_categories,
.store_categories_menu,
.mobile_categories,
.desktop_categories,
.h-full.w-full.flex.justify-center.items-center.gap-8 {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

/* Nav links base: no rectangles */
header a,
.default_header a,
.header a,
.navbar a,
.header_container a,
.default_header_container a,
.store_header a,
header nav a,
.header nav a,
.default_header nav a,
.store_header nav a,
nav a,
.menu a,
.main_menu a,
.categories_nav a,
.categories_bar a,
.category_bar a,
.default_categories a,
.default_categories_bar a,
.default_header_categories a,
.header_categories a,
.header_menu a,
.navigation a,
.navigation_bar a,
.nav_menu a,
.store_categories a,
.store_categories_menu a,
.mobile_categories a,
.desktop_categories a,
.h-full.w-full.flex.justify-center.items-center.gap-8 a {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--ew-soft-white) !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 12px 10px !important;
  margin: 0 4px !important;
  font-weight: 900 !important;
  font-size: 17px !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  position: relative !important;
  transition: color .2s ease, transform .2s ease !important;
}

/* Orange underline only */
header a::after,
.default_header a::after,
.header a::after,
.navbar a::after,
.header_container a::after,
.default_header_container a::after,
.store_header a::after,
header nav a::after,
.header nav a::after,
.default_header nav a::after,
.store_header nav a::after,
nav a::after,
.menu a::after,
.main_menu a::after,
.categories_nav a::after,
.categories_bar a::after,
.category_bar a::after,
.default_categories a::after,
.default_categories_bar a::after,
.default_header_categories a::after,
.header_categories a::after,
.header_menu a::after,
.navigation a::after,
.navigation_bar a::after,
.nav_menu a::after,
.store_categories a::after,
.store_categories_menu a::after,
.h-full.w-full.flex.justify-center.items-center.gap-8 a::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  right: 10px !important;
  left: 10px !important;
  bottom: 3px !important;
  height: 3px !important;
  border-radius: 999px !important;
  background: transparent !important;
  transform: scaleX(0) !important;
  transform-origin: center !important;
  transition: all .22s ease !important;
}

/* Hover / active */
header a:hover,
.default_header a:hover,
.header a:hover,
.navbar a:hover,
.header_container a:hover,
.default_header_container a:hover,
.store_header a:hover,
header nav a:hover,
.header nav a:hover,
.default_header nav a:hover,
.store_header nav a:hover,
nav a:hover,
.menu a:hover,
.main_menu a:hover,
.categories_nav a:hover,
.categories_bar a:hover,
.category_bar a:hover,
.default_categories a:hover,
.default_categories_bar a:hover,
.default_header_categories a:hover,
.header_categories a:hover,
.header_menu a:hover,
.navigation a:hover,
.navigation_bar a:hover,
.nav_menu a:hover,
.store_categories a:hover,
.store_categories_menu a:hover,
.mobile_categories a:hover,
.desktop_categories a:hover,
.h-full.w-full.flex.justify-center.items-center.gap-8 a:hover,
header a.active,
header a[aria-current="page"],
.default_header a.active,
.default_header a[aria-current="page"],
.header a.active,
.header a[aria-current="page"],
.store_header a.active,
.store_header a[aria-current="page"],
nav a.active,
nav a[aria-current="page"],
.menu a.active,
.menu a[aria-current="page"],
.categories_bar a.active,
.categories_bar a[aria-current="page"],
.navigation a.active,
.navigation a[aria-current="page"] {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--ew-orange) !important;
  border: 0 !important;
  box-shadow: none !important;
  text-decoration: none !important;
  transform: translateY(-1px) !important;
}

header a:hover::after,
.default_header a:hover::after,
.header a:hover::after,
.navbar a:hover::after,
.header_container a:hover::after,
.default_header_container a:hover::after,
.store_header a:hover::after,
header nav a:hover::after,
.header nav a:hover::after,
.default_header nav a:hover::after,
.store_header nav a:hover::after,
nav a:hover::after,
.menu a:hover::after,
.categories_bar a:hover::after,
.navigation a:hover::after,
.h-full.w-full.flex.justify-center.items-center.gap-8 a:hover::after,
header a.active::after,
header a[aria-current="page"]::after,
.default_header a.active::after,
.default_header a[aria-current="page"]::after,
.header a.active::after,
.header a[aria-current="page"]::after,
nav a.active::after,
nav a[aria-current="page"]::after {
  background: var(--ew-orange) !important;
  transform: scaleX(1) !important;
}

header a *,
.default_header a *,
.header a *,
.store_header a *,
nav a *,
.menu a *,
.categories_bar a *,
.navigation a *,
.h-full.w-full.flex.justify-center.items-center.gap-8 a * {
  background: transparent !important;
  color: inherit !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* If EasyOrders creates a separate div after header, make it visually part of header, not a white bar */
header + div,
.default_header + div,
.header + div,
.store_header + div,
.site_header + div,
.main_header + div {
  background: linear-gradient(135deg, var(--ew-navy) 0%, var(--ew-navy-2) 100%) !important;
  color: var(--ew-white) !important;
  border: none !important;
  border-bottom: 1px solid rgba(255,122,0,0.18) !important;
  box-shadow: none !important;
  min-height: auto !important;
  padding: 0 48px 12px !important;
}

header + div *,
.default_header + div *,
.header + div *,
.store_header + div *,
.site_header + div *,
.main_header + div * {
  background: transparent !important;
  color: inherit !important;
  box-shadow: none !important;
}

/* Cart / search buttons */
header button,
.default_header button,
.header button,
.navbar button,
.header_container button,
.default_header_container button,
.store_header button {
  background: var(--ew-orange) !important;
  background-color: var(--ew-orange) !important;
  color: #FFFFFF !important;
  border: 1px solid var(--ew-orange) !important;
  border-radius: 16px !important;
  min-width: 54px !important;
  min-height: 54px !important;
  box-shadow: 0 10px 24px rgba(255,122,0,.28) !important;
}

header button:hover,
.default_header button:hover,
.header button:hover,
.navbar button:hover,
.header_container button:hover,
.default_header_container button:hover,
.store_header button:hover {
  background: var(--ew-orange-dark) !important;
  border-color: var(--ew-orange-dark) !important;
  transform: translateY(-1px) !important;
}

header svg,
.default_header svg,
.header svg,
.navbar svg,
.header_container svg,
.default_header_container svg {
  color: currentColor !important;
  stroke: currentColor !important;
}

@media (max-width: 768px) {
  header,
  .default_header,
  .header,
  .navbar,
  .navbar_container,
  .header_container,
  .default_header_container,
  .store_header,
  .store_header_container {
    min-height: 76px !important;
  }

  header > div,
  .default_header > div,
  .header > div,
  .store_header > div,
  .header_container,
  .default_header_container,
  .store_header_container,
  .navbar_container {
    min-height: 76px !important;
    padding: 10px 16px !important;
    gap: 12px !important;
  }

  header img,
  .default_header img,
  .header img,
  .store_header img,
  .header_container img,
  .default_header_container img,
  .store_header_container img,
  .navbar img {
    height: 58px !important;
    max-width: 140px !important;
  }

  header a,
  .default_header a,
  .header a,
  .navbar a,
  .header_container a,
  .default_header_container a,
  .store_header a,
  nav a,
  .menu a,
  .categories_bar a,
  .navigation a {
    font-size: 14px !important;
    padding: 8px 7px !important;
    margin: 0 2px !important;
  }

  header + div,
  .default_header + div,
  .header + div,
  .store_header + div,
  .site_header + div,
  .main_header + div {
    padding: 0 16px 10px !important;
    overflow-x: auto !important;
  }

  header button,
  .default_header button,
  .header button,
  .navbar button,
  .header_container button,
  .default_header_container button,
  .store_header button {
    min-width: 48px !important;
    min-height: 48px !important;
    border-radius: 14px !important;
  }
}



/* ======================================================
   ECOMWELT FINAL LOGO + HEADER PATCH - V1.4
   - No white badge behind logo
   - Use a proper dark-header logo asset: white + orange transparent PNG
   - Bigger logo area
   - Header links are part of the header, no white rectangles
====================================================== */

/* Kill any CSS-generated announcement bars */
html,
body {
  padding-top: 0 !important;
}

body::before,
body::after,
header::before,
header::after,
.default_header::before,
.default_header::after,
.header::before,
.header::after,
.store_header::before,
.store_header::after,
.site_header::before,
.site_header::after,
.main_header::before,
.main_header::after {
  display: none !important;
  content: none !important;
}

/* Header shell */
header,
.default_header,
.header,
.navbar,
.navbar_container,
.header_container,
.default_header_container,
.store_header,
.store_header_container,
.header-wrapper,
.header_wrapper,
.site_header,
.main_header,
.top_header {
  background: linear-gradient(135deg, #061527 0%, #0B1F3A 58%, #102A4C 100%) !important;
  color: #FFFFFF !important;
  min-height: 104px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255,122,0,.22) !important;
  box-shadow: 0 8px 28px rgba(6,21,39,.18) !important;
}

/* Preserve the theme's logo-centered structure as much as possible */
header > div,
.default_header > div,
.header > div,
.store_header > div,
.header_container,
.default_header_container,
.store_header_container,
.navbar_container {
  min-height: 104px !important;
  align-items: center !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  background: transparent !important;
}

/* No forced white box, no padding, no border. Let the logo file show as it is. */
header img,
.default_header img,
.header img,
.store_header img,
.header_container img,
.default_header_container img,
.store_header_container img,
.navbar img,
footer img,
.default_footer img,
.footer img,
.footer_container img,
.store_footer img {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  object-fit: contain !important;
}

/* Header logo size */
header img,
.default_header img,
.header img,
.store_header img,
.header_container img,
.default_header_container img,
.store_header_container img,
.navbar img {
  height: 92px !important;
  width: auto !important;
  max-width: 260px !important;
}

/* Footer logo size */
footer img,
.default_footer img,
.footer img,
.footer_container img,
.store_footer img {
  width: auto !important;
  max-width: 240px !important;
  max-height: 110px !important;
}

/* Remove all white/nav block backgrounds */
header *,
.default_header *,
.header *,
.navbar *,
.navbar_container *,
.header_container *,
.default_header_container *,
.store_header *,
.store_header_container *,
.header-wrapper *,
.header_wrapper *,
.site_header *,
.main_header *,
.top_header *,
header + div *,
.default_header + div *,
.header + div *,
.store_header + div *,
.site_header + div *,
.main_header + div * {
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* If EasyOrders creates a category row after header, merge it visually with header */
header + div,
.default_header + div,
.header + div,
.store_header + div,
.site_header + div,
.main_header + div {
  background: linear-gradient(135deg, #061527 0%, #0B1F3A 100%) !important;
  color: #FFFFFF !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255,122,0,.18) !important;
  box-shadow: none !important;
}

/* Navigation base: no rectangles */
header a,
.default_header a,
.header a,
.navbar a,
.header_container a,
.default_header_container a,
.store_header a,
header nav a,
.header nav a,
.default_header nav a,
.store_header nav a,
nav a,
.menu a,
.main_menu a,
.categories_nav a,
.categories_bar a,
.category_bar a,
.default_categories a,
.default_categories_bar a,
.default_header_categories a,
.header_categories a,
.header_menu a,
.navigation a,
.navigation_bar a,
.nav_menu a,
.store_categories a,
.store_categories_menu a,
.mobile_categories a,
.desktop_categories a,
.h-full.w-full.flex.justify-center.items-center.gap-8 a {
  background: transparent !important;
  background-color: transparent !important;
  color: rgba(255,255,255,.92) !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 12px 10px !important;
  margin: 0 4px !important;
  font-weight: 900 !important;
  font-size: 17px !important;
  text-decoration: none !important;
  position: relative !important;
  transition: color .2s ease, transform .2s ease !important;
}

/* Clean underline indicator */
header a::after,
.default_header a::after,
.header a::after,
.navbar a::after,
.header_container a::after,
.default_header_container a::after,
.store_header a::after,
nav a::after,
.menu a::after,
.categories_bar a::after,
.navigation a::after,
.h-full.w-full.flex.justify-center.items-center.gap-8 a::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  right: 10px !important;
  left: 10px !important;
  bottom: 2px !important;
  height: 3px !important;
  border-radius: 999px !important;
  background: transparent !important;
  transform: scaleX(0) !important;
  transition: all .22s ease !important;
}

/* Hover / active */
header a:hover,
.default_header a:hover,
.header a:hover,
.navbar a:hover,
.header_container a:hover,
.default_header_container a:hover,
.store_header a:hover,
nav a:hover,
.menu a:hover,
.categories_bar a:hover,
.navigation a:hover,
.h-full.w-full.flex.justify-center.items-center.gap-8 a:hover,
header a.active,
header a[aria-current="page"],
.default_header a.active,
.default_header a[aria-current="page"],
.header a.active,
.header a[aria-current="page"],
.store_header a.active,
.store_header a[aria-current="page"],
nav a.active,
nav a[aria-current="page"] {
  background: transparent !important;
  color: #FF7A00 !important;
  border: 0 !important;
  box-shadow: none !important;
  text-decoration: none !important;
  transform: translateY(-1px) !important;
}

header a:hover::after,
.default_header a:hover::after,
.header a:hover::after,
.navbar a:hover::after,
.header_container a:hover::after,
.default_header_container a:hover::after,
.store_header a:hover::after,
nav a:hover::after,
.menu a:hover::after,
.categories_bar a:hover::after,
.navigation a:hover::after,
.h-full.w-full.flex.justify-center.items-center.gap-8 a:hover::after,
header a.active::after,
header a[aria-current="page"]::after,
nav a.active::after,
nav a[aria-current="page"]::after {
  background: #FF7A00 !important;
  transform: scaleX(1) !important;
}

/* Cart/search buttons stay orange */
header button,
.default_header button,
.header button,
.navbar button,
.header_container button,
.default_header_container button,
.store_header button {
  background: #FF7A00 !important;
  color: #FFFFFF !important;
  border: 1px solid #FF7A00 !important;
  border-radius: 16px !important;
  min-width: 54px !important;
  min-height: 54px !important;
  box-shadow: 0 10px 24px rgba(255,122,0,.28) !important;
}

header button:hover,
.default_header button:hover,
.header button:hover,
.navbar button:hover,
.header_container button:hover,
.default_header_container button:hover,
.store_header button:hover {
  background: #E56500 !important;
  border-color: #E56500 !important;
}

/* Mobile */
@media (max-width: 768px) {
  header,
  .default_header,
  .header,
  .navbar,
  .navbar_container,
  .header_container,
  .default_header_container,
  .store_header,
  .store_header_container {
    min-height: 84px !important;
  }

  header img,
  .default_header img,
  .header img,
  .store_header img,
  .header_container img,
  .default_header_container img,
  .store_header_container img,
  .navbar img {
    height: 70px !important;
    max-width: 210px !important;
  }

  header a,
  .default_header a,
  .header a,
  .navbar a,
  .header_container a,
  .default_header_container a,
  .store_header a,
  nav a,
  .menu a,
  .categories_bar a,
  .navigation a {
    font-size: 14px !important;
    padding: 8px 7px !important;
    margin: 0 2px !important;
  }
}



/* ======================================================
   ECOMWELT THEME V1.5 FINAL PATCH
   الهدف:
   1) منع الموقع من تحويل اللوجو لأبيض بالكامل عند أول الصفحة
   2) جعل Scrollbar برتقالي
   3) توحيد خلفية الموقع أبيض
   4) تحسين Newsletter / Email box في الفوتر
   5) تجهيز رابط حقوق الملكية لـ EcomWelt لو موجود كرابط
====================================================== */

:root {
  --ew-navy: #061527;
  --ew-navy-2: #0B1F3A;
  --ew-orange: #FF7A00;
  --ew-orange-dark: #E56500;
  --ew-white: #FFFFFF;
  --ew-page-bg: #FFFFFF;
  --ew-section-soft: #F6F8FB;
  --ew-text: #0B1F3A;
  --ew-muted: #667085;
}

/* =========================
   1) LOGO COLOR FIX
   يمنع أي filter / invert / grayscale على اللوجو في أول الصفحة أو بعد السكروول
========================= */

header img,
.default_header img,
.header img,
.store_header img,
.header_container img,
.default_header_container img,
.store_header_container img,
.navbar img,
header a img,
.default_header a img,
.header a img,
.store_header a img,
header [class*="logo"] img,
.default_header [class*="logo"] img,
.header [class*="logo"] img,
.store_header [class*="logo"] img,
footer img,
.default_footer img,
.footer img,
.footer_container img,
.store_footer img,
footer [class*="logo"] img,
.default_footer [class*="logo"] img,
.footer [class*="logo"] img {
  filter: none !important;
  -webkit-filter: none !important;
  mix-blend-mode: normal !important;
  opacity: 1 !important;
  visibility: visible !important;
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* يستهدف حالات الثيم عند أعلى الصفحة أو عند sticky/scrolled */
header:not(.scrolled) img,
header.scrolled img,
header.sticky img,
header.fixed img,
.header:not(.scrolled) img,
.header.scrolled img,
.header.sticky img,
.header.fixed img,
.default_header:not(.scrolled) img,
.default_header.scrolled img,
.default_header.sticky img,
.default_header.fixed img,
.store_header:not(.scrolled) img,
.store_header.scrolled img,
.store_header.sticky img,
.store_header.fixed img,
[class*="sticky"] img,
[class*="fixed"] img,
[class*="scrolled"] img {
  filter: none !important;
  -webkit-filter: none !important;
  mix-blend-mode: normal !important;
  opacity: 1 !important;
}

/* لو الثيم بيحاول يلوّن اللوجو كـ SVG أو Mask */
header svg,
.default_header svg,
.header svg,
.store_header svg,
.header [class*="logo"] svg,
.default_header [class*="logo"] svg,
.store_header [class*="logo"] svg {
  filter: none !important;
  -webkit-filter: none !important;
  mix-blend-mode: normal !important;
}

/* مساحة اللوجو بدون خلفية أو badge */
header img,
.default_header img,
.header img,
.store_header img,
.header_container img,
.default_header_container img,
.store_header_container img,
.navbar img {
  height: 92px !important;
  width: auto !important;
  max-width: 280px !important;
  object-fit: contain !important;
  padding: 0 !important;
  margin: 0 !important;
}

footer img,
.default_footer img,
.footer img,
.footer_container img,
.store_footer img {
  width: auto !important;
  max-width: 260px !important;
  max-height: 120px !important;
  object-fit: contain !important;
}

/* =========================
   2) ORANGE SCROLLBAR
========================= */

html {
  scrollbar-color: var(--ew-orange) #EEF2F7 !important;
  scrollbar-width: thin !important;
}

::-webkit-scrollbar {
  width: 12px !important;
  height: 12px !important;
}

::-webkit-scrollbar-track {
  background: #EEF2F7 !important;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--ew-orange), var(--ew-orange-dark)) !important;
  border-radius: 999px !important;
  border: 3px solid #EEF2F7 !important;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--ew-orange-dark) !important;
}

/* =========================
   3) WHITE WEBSITE BACKGROUND
   نخلي الخلفية العامة أبيض لتجنب مشاكل ألوان الأقسام والمنتجات
========================= */

html,
body,
#__next,
#root,
.app,
.app_container,
.layout,
.layout_container,
.page,
.page_container,
.page_content,
.content,
.content_container,
main,
article,
aside,
.home_container,
.home_page,
.category_page,
.categories_page,
.collections_page,
.products_page,
.product_page,
.cart_page,
.checkout_page,
.thank_you_page,
.thankyou_page,
.success_page,
.payment_page,
.shipping_page,
.container,
.container_class,
.home_products_grid_container,
.products_grid_container,
.category_products_grid_container,
.checkout_container,
.cart_container,
.order_success_container {
  background-color: var(--ew-page-bg) !important;
  color: var(--ew-text) !important;
}

/* لا نخلي كل section أبيض بالقوة عشان لو حطينا بلوكات مخصصة داكنة تشتغل */
body > div,
body > div > div,
main > div {
  background-color: var(--ew-page-bg) !important;
}

/* الأقسام الافتراضية الفاتحة */
section:not(header):not(footer),
.home_products_grid_container,
.products_grid_container,
.category_products_grid_container,
.product_page,
.cart_page,
.checkout_page {
  background-color: var(--ew-page-bg) !important;
}

/* منطقة عناوين الأقسام الافتراضية */
.home_section_top_title,
.section_title,
.category_title,
.page_title,
.products_title,
.product_page_title {
  color: var(--ew-navy) !important;
  background: transparent !important;
  font-weight: 900 !important;
}

/* كروت المنتجات على الأبيض */
.default_product_list_card,
.home_products_grid_card,
.products_grid_card,
.product_card,
.product-list-card,
.product_card_container,
.category_product_card {
  background-color: #FFFFFF !important;
  color: var(--ew-text) !important;
  border: 1px solid #E5EAF1 !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 22px rgba(6,21,39,.06) !important;
  overflow: hidden !important;
}

.default_product_list_card div,
.home_products_grid_card div,
.products_grid_card div,
.product_card div,
.product-list-card div,
.product_card_container div,
.category_product_card div {
  background-color: transparent !important;
}

.default_product_list_card img,
.home_products_grid_card img,
.products_grid_card img,
.product_card img,
.product-list-card img,
.product_card_container img,
.category_product_card img {
  background-color: #FFFFFF !important;
}

/* =========================
   4) FOOTER NEWSLETTER / EMAIL BOX FIX
========================= */

footer,
.default_footer,
.footer,
.footer_container,
.store_footer {
  background: linear-gradient(135deg, var(--ew-navy) 0%, var(--ew-navy-2) 100%) !important;
  color: #FFFFFF !important;
}

footer *,
.default_footer *,
.footer *,
.footer_container *,
.store_footer * {
  color: inherit !important;
}

/* Email input واضح فوق الفوتر */
footer input,
.default_footer input,
.footer input,
.footer_container input,
.store_footer input,
footer input[type="email"],
.default_footer input[type="email"],
.footer input[type="email"],
.footer_container input[type="email"],
.store_footer input[type="email"],
footer input[placeholder*="mail"],
.default_footer input[placeholder*="mail"],
.footer input[placeholder*="mail"],
.footer_container input[placeholder*="mail"],
.store_footer input[placeholder*="mail"],
footer input[placeholder*="E-mail"],
.default_footer input[placeholder*="E-mail"],
.footer input[placeholder*="E-mail"],
.footer_container input[placeholder*="E-mail"],
.store_footer input[placeholder*="E-mail"] {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  color: var(--ew-navy) !important;
  border: 2px solid rgba(255,122,0,.85) !important;
  border-radius: 14px !important;
  padding: 14px 18px !important;
  min-height: 52px !important;
  min-width: 260px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.18) !important;
  outline: none !important;
}

footer input::placeholder,
.default_footer input::placeholder,
.footer input::placeholder,
.footer_container input::placeholder,
.store_footer input::placeholder {
  color: #667085 !important;
  opacity: 1 !important;
}

footer input:focus,
.default_footer input:focus,
.footer input:focus,
.footer_container input:focus,
.store_footer input:focus {
  border-color: var(--ew-orange) !important;
  box-shadow: 0 0 0 4px rgba(255,122,0,.18), 0 12px 28px rgba(0,0,0,.18) !important;
}

/* أزرار الفوتر */
footer button,
.default_footer button,
.footer button,
.footer_container button,
.store_footer button,
footer .btn,
.default_footer .btn,
.footer .btn,
.footer_container .btn,
.store_footer .btn {
  background: var(--ew-orange) !important;
  color: #FFFFFF !important;
  border: 1px solid var(--ew-orange) !important;
  border-radius: 14px !important;
  min-height: 48px !important;
  font-weight: 900 !important;
}

footer button:hover,
.default_footer button:hover,
.footer button:hover,
.footer_container button:hover,
.store_footer button:hover {
  background: var(--ew-orange-dark) !important;
  border-color: var(--ew-orange-dark) !important;
}

/* روابط الفوتر */
footer a,
.default_footer a,
.footer a,
.footer_container a,
.store_footer a,
.default_footer_link {
  color: #FFFFFF !important;
  text-decoration: none !important;
  font-weight: 800 !important;
}

footer a:hover,
.default_footer a:hover,
.footer a:hover,
.footer_container a:hover,
.store_footer a:hover {
  color: var(--ew-orange) !important;
}

/* لو EcomWelt موجودة كرابط في الحقوق، تظهر برتقالي */
footer a[href*="ecomwelt"],
.default_footer a[href*="ecomwelt"],
.footer a[href*="ecomwelt"],
.footer_container a[href*="ecomwelt"],
.store_footer a[href*="ecomwelt"] {
  color: var(--ew-orange) !important;
  font-weight: 900 !important;
}

/* ملاحظة: CSS لا يستطيع تحويل نص عادي إلى Hyperlink.
   لازم من إعدادات الفوتر تخلي كلمة EcomWelt نفسها رابط إلى https://www.ecomwelt.com */

/* =========================
   5) MOBILE
========================= */

@media (max-width: 768px) {
  header img,
  .default_header img,
  .header img,
  .store_header img,
  .header_container img,
  .default_header_container img,
  .store_header_container img,
  .navbar img {
    height: 70px !important;
    max-width: 220px !important;
  }

  footer input,
  .default_footer input,
  .footer input,
  .footer_container input,
  .store_footer input {
    min-width: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}



/* ======================================================
   ECOMWELT THEME V1.6 - MOBILE MENU FIX
   Fixes the empty white mobile popup / drawer on phones.
====================================================== */

@media (max-width: 768px) {
  header,
  .default_header,
  .header,
  .store_header,
  .navbar,
  .header_container,
  .default_header_container,
  .store_header_container {
    background: linear-gradient(135deg, #061527 0%, #0B1F3A 100%) !important;
    color: #ffffff !important;
    min-height: 86px !important;
    overflow: visible !important;
  }

  header img,
  .default_header img,
  .header img,
  .store_header img,
  .header_container img,
  .default_header_container img,
  .store_header_container img,
  .navbar img {
    height: 64px !important;
    max-width: 170px !important;
    object-fit: contain !important;
    filter: none !important;
    -webkit-filter: none !important;
    mix-blend-mode: normal !important;
  }

  header button,
  .default_header button,
  .header button,
  .navbar button,
  .header_container button,
  .default_header_container button,
  .store_header button {
    background: #FF7A00 !important;
    color: #ffffff !important;
    border: 1px solid #FF7A00 !important;
    border-radius: 18px !important;
    min-width: 56px !important;
    min-height: 56px !important;
    box-shadow: 0 8px 18px rgba(255,122,0,.25) !important;
  }

  [role="dialog"],
  [aria-modal="true"],
  .modal,
  .drawer,
  .side-menu,
  .sidebar,
  .mobile-menu,
  .mobile_menu,
  .menu-drawer,
  .drawer-content,
  .drawer_content,
  .offcanvas,
  .offcanvas-menu,
  .mobile_nav,
  .mobile-nav,
  .navigation-drawer,
  .navigation_drawer {
    background: #061527 !important;
    color: #ffffff !important;
    border-radius: 22px !important;
    box-shadow: 0 18px 55px rgba(6,21,39,.35) !important;
    border: 1px solid rgba(255,255,255,.10) !important;
  }

  [role="dialog"] *,
  [aria-modal="true"] *,
  .modal *,
  .drawer *,
  .side-menu *,
  .sidebar *,
  .mobile-menu *,
  .mobile_menu *,
  .menu-drawer *,
  .drawer-content *,
  .drawer_content *,
  .offcanvas *,
  .offcanvas-menu *,
  .mobile_nav *,
  .mobile-nav *,
  .navigation-drawer *,
  .navigation_drawer * {
    color: inherit !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  [role="dialog"] a,
  [aria-modal="true"] a,
  .modal a,
  .drawer a,
  .side-menu a,
  .sidebar a,
  .mobile-menu a,
  .mobile_menu a,
  .menu-drawer a,
  .drawer-content a,
  .drawer_content a,
  .offcanvas a,
  .offcanvas-menu a,
  .mobile_nav a,
  .mobile-nav a,
  .navigation-drawer a,
  .navigation_drawer a {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    background: rgba(255,255,255,.06) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    border-radius: 14px !important;
    padding: 14px 16px !important;
    margin: 8px 0 !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    text-decoration: none !important;
    text-align: right !important;
    direction: rtl !important;
  }

  [role="dialog"] a:hover,
  [aria-modal="true"] a:hover,
  .modal a:hover,
  .drawer a:hover,
  .side-menu a:hover,
  .sidebar a:hover,
  .mobile-menu a:hover,
  .mobile_menu a:hover,
  .menu-drawer a:hover,
  .drawer-content a:hover,
  .drawer_content a:hover,
  .offcanvas a:hover,
  .offcanvas-menu a:hover,
  .mobile_nav a:hover,
  .mobile-nav a:hover,
  .navigation-drawer a:hover,
  .navigation_drawer a:hover {
    background: #FF7A00 !important;
    color: #ffffff !important;
    border-color: #FF7A00 !important;
  }

  [role="dialog"] button,
  [aria-modal="true"] button,
  .modal button,
  .drawer button,
  .side-menu button,
  .sidebar button,
  .mobile-menu button,
  .mobile_menu button,
  .menu-drawer button,
  .drawer-content button,
  .drawer_content button,
  .offcanvas button,
  .offcanvas-menu button,
  .mobile_nav button,
  .mobile-nav button,
  .navigation-drawer button,
  .navigation_drawer button {
    background: #FF7A00 !important;
    color: #ffffff !important;
    border: 1px solid #FF7A00 !important;
    border-radius: 16px !important;
    min-width: 52px !important;
    min-height: 52px !important;
  }

  [role="dialog"] > div,
  [aria-modal="true"] > div,
  .modal > div,
  .drawer > div,
  .mobile-menu > div,
  .mobile_menu > div,
  .menu-drawer > div,
  .drawer-content > div,
  .drawer_content > div,
  .offcanvas > div,
  .mobile_nav > div,
  .mobile-nav > div {
    background: #061527 !important;
    color: #ffffff !important;
  }

  [role="dialog"] input,
  [aria-modal="true"] input,
  .modal input,
  .drawer input,
  .mobile-menu input,
  .mobile_menu input,
  .menu-drawer input,
  .offcanvas input,
  .mobile_nav input,
  .mobile-nav input {
    background: #ffffff !important;
    color: #061527 !important;
    border: 2px solid #FF7A00 !important;
    border-radius: 14px !important;
    padding: 12px 14px !important;
  }
}

.search-modal,
.search_modal,
.search-overlay,
.search_overlay,
.search-drawer,
.search_drawer {
  background: #061527 !important;
  color: #ffffff !important;
}

.search-modal input,
.search_modal input,
.search-overlay input,
.search_overlay input,
.search-drawer input,
.search_drawer input {
  background: #ffffff !important;
  color: #061527 !important;
  border: 2px solid #FF7A00 !important;
  border-radius: 14px !important;
}