/* Dar-us-Salam Custom Styles */
/* DUS — add-to-cart modal layout (#blockcart-modal), used by ps_shoppingcart/modal.tpl */
#blockcart-modal .dus-modal-row {
  display: flex;
}
 
#blockcart-modal .dus-modal-inner-row {
  flex: 1;
}
 
#blockcart-modal .dus-modal-details-col {
  display: flex;
  flex-direction: column;
}
 
#blockcart-modal .dus-modal-ref {
  margin: 2px 0 6px;
}
 
#blockcart-modal .dus-modal-account-btn {
  margin-top: auto;
  padding-top: 10px;
  text-align: center;
}
 
#blockcart-modal .dus-modal-btn-row {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: 6px;
}
 
#blockcart-modal .dus-modal-btn-flex {
  flex: 1;
  padding-left: 8px;
  padding-right: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}

/* DUS — add-to-cart modal: center the cart-summary column (items count, subtotal, promo box) at all widths */
#blockcart-modal .cart-content {
  text-align: center;
}

/* DUS — add-to-cart modal: enlarge "unlocked offer" headline, scoped so it doesn't also enlarge the "add $X more" emphasis */
#blockcart-modal .dus-promo-unlocked {
  font-size: 1.25em;
}

/* DUS — promo banner (dus_cart_promo.tpl): center the display:block <img> via margin:0 auto (text-align:center doesn't affect block elements) */
.dus-promo-banner-wrap {
  margin-top: 6px;
  text-align: center;
}
.dus-promo-banner-link {
  display: block;
  padding-bottom: 15px;
}
.dus-promo-banner-img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--border-radius);
  margin: 0 auto;
}

/* DUS — add-to-cart modal: min-width:0 on flex children so long content can't force horizontal overflow */
#blockcart-modal .dus-modal-row > [class*="col-"],
#blockcart-modal .dus-modal-inner-row > [class*="col-"],
#blockcart-modal .dus-modal-btn-row > * {
  min-width: 0;
}

/* DUS — add-to-cart modal: mobile layout (<=540px) — stack columns, shrink image beside text, center summary, full-width stacked buttons */
@media (max-width: 540px) {
  #blockcart-modal .dus-modal-row {
    flex-direction: column;
  }
  #blockcart-modal .dus-modal-row > .divide-right,
  #blockcart-modal .dus-modal-row > .col-md-6 {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
  }
  #blockcart-modal .divide-right {
    border-right: none;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #e2e2e2;
  }

  /* Image + details side by side, smaller cover image (!important beats Bootstrap's .col-md-6 width:100%) */
  #blockcart-modal .dus-modal-inner-row {
    display: flex;
    flex-wrap: nowrap !important;
    align-items: flex-start;
  }
  #blockcart-modal .dus-modal-inner-row > div:first-child {
    flex: 0 0 110px !important;
    max-width: 110px !important;
    width: 110px !important;
  }
  #blockcart-modal .dus-modal-inner-row .product-image {
    max-width: 100%;
    width: 100%;
    height: auto;
  }
  #blockcart-modal .dus-modal-details-col {
    flex: 1 !important;
    max-width: none !important;
    width: auto !important;
    padding-left: 12px;
  }

  /* Account/login link — full width instead of a narrow pill */
  #blockcart-modal .dus-modal-account-link {
    display: block;
    width: 100%;
  }

  /* Promo box — tighter padding/font so it can't force extra width */
  #blockcart-modal .dus-cart-promo {
    padding: 10px !important;
    font-size: 13px !important;
  }

  /* Button row — all 3 full width, stacked */
  #blockcart-modal .dus-modal-btn-row {
    flex-direction: column;
    row-gap: 8px;
  }
  #blockcart-modal .dus-modal-btn-flex,
  #blockcart-modal .dus-modal-btn-checkout {
    flex: 0 0 auto;
    width: 100%;
  }
}
.compare .btn:hover, .wishlist .btn:hover {
	background-color: var(--price-color); 
	color: white;
}

img[src*="dus_zellepay/logo"] {
    width: 70px;
    height: 39px;
    max-width: 70px;
    max-height: 39px;
}
/* Checkout step buttons (Continue / Place Order) - bold weight + full width */
button.continue,
button.center-block {
    font-size: 24px;
	font-weight: 600 !important;
    width: 100% !important;
	margin-top: 20px;
	margin-bottom: 20px;
	padding: 15px;
}
/* DUS — homepage: stop product/CMS sections overlapping the product grid so Add-to-Cart buttons stay clickable */
section.page-home { display: block; }                 /* inline-block lets sections overlap; block stacks them */
#featured-products, #content { position: relative; }
.product_list .product-miniature { position: relative; z-index: 1; }
.product_list .add-to-cart-button { z-index: 5; }     /* keep the revealed button above its neighbours */

/* DUS — homepage product cards: hide Add-to-Cart until hovered (!important beats a higher-specificity theme rule) */
.product_list .product-miniature .add-to-cart-button {
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(-15px);
  transition: opacity .3s ease, visibility .3s ease, transform .3s ease;
}
.product_list .product-miniature:hover .add-to-cart-button {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0);
}

/* === Viewed products: fix smaller second image on hover === */
.dus-grid-item .thumbnail-container .product-thumbnail img.img_1 {
  width: 100%;
  height: auto;
}
/* PRODUCT PAGE — additional-image thumbnail slider: let Owl Carousel handle layout (do NOT touch .owl-wrapper-outer/.owl-wrapper/.owl-item width, display, or transform — Owl sets those inline via JS to drive the actual slide) */

/* Carousel: hide thumbnail strip when product has only one image (!important beats Owl's inline display:block) */
#additional-carousel:has(.owl-item:only-child) {
    display: none !important;
}

/* Thumb wrapper: cancel Bootstrap col-* padding only (leave width/float alone — Owl sizes the item, not this) */
#additional-carousel .owl-item .thumb-container {
    padding: 0 !important;
    margin: 0 !important;
}

/* Anchor: fluid block that fills Owl's item box so the thumb image can scale to it */
#additional-carousel .owl-item .elevatezoom-gallery {
    display: block !important;
    width: 100% !important;
    height: auto !important;
}

/* Image: always scales down to fit its box instead of clipping */
#additional-carousel .owl-item .thumb {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
}

/* Product image modal — widen dialog, fill viewport height, keep responsive */
#product-modal .modal-dialog {
  max-width: 1800px;
  width: 92vw;
  margin: 1rem auto;
}

/* Product image modal — white framing card around the cover (restores the box) */
#product-modal .modal-content {
  background: #fff;
  border: none;
  border-radius: var(--border-radius);
  padding: 15px;
}

/* Product image modal — center the cover inside the card */
#product-modal .modal-content .modal-body {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 0;
  padding: 0;
}

/* Product image modal — cover scales to the full window height */
#product-modal .modal-body figure {
  margin: 0;
  width: 100%;
  max-width: 100%;
  text-align: center;
}
#product-modal .modal-body img.product-cover-modal,
#product-modal .modal-body .js-modal-product-cover {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: calc(100vh - 2rem - 30px); /* viewport minus dialog margin (2rem) + card padding (30px) */
  border-radius: var(--border-radius);
}

/* Product image modal — wider thumbnail rail so previews can grow */
#product-modal #thumbnails {
  margin-left: 15px;
}
#product-modal #thumbnails .js-modal-mask,
#product-modal #thumbnails .product-images {
  width: auto;
}

/* Product image modal — bigger thumbnails, scale up toward native 250px size */
#product-modal #thumbnails .product-images > li.thumb-container {
  width: auto;
  margin-bottom: 12px;
}
#product-modal #thumbnails .product-images .thumb,
#product-modal #thumbnails img.js-modal-thumb {
  width: 100%;
  max-width: 200px;   /* push to 250px to use the full native resolution */
  height: auto;
  border-radius: var(--border-radius);
}

/* Quickview: additional-image grid (<4 images) was collapsing to full-width stacked rows */
.quickview .product-cover {
  position: relative;
  height: 413px;
  overflow: hidden;
}
.quickview .product-cover img.dus-qv-cover-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Grid item: reclaim width from theme's width:100% override on .thumb-container.product_item */
.quickview .js-qv-mask.additional_grid .thumb-container.product_item {
  width: auto !important;
  max-width: none !important;
  float: none !important;
  padding: 3px !important;
  flex: 0 0 auto;
  box-sizing: border-box;
}

/* Row: wrap instead of stack */
.quickview .js-qv-mask.additional_grid #additional-carousel.product_list.grid.row {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Thumbnail size (bumped from native 68x68) */
.quickview .js-qv-mask.additional_grid .thumb-container.product_item img.thumb {
  width: 90px;
  height: 90px;
  display: block;
  object-fit: contain;
}

/* Keep thumb strip contained inside the modal, scroll if it grows */
.quickview .js-qv-mask.additional_grid {
  max-height: 200px;
  overflow-y: auto;
  overflow-x: hidden;
  margin-top: 10px;
}

.quickview .modal-body {
  overflow: hidden;
}

/* Product title links — restore blue hover to match other site links */
.product-title a:hover,
.product-title a:focus {
    color: var(--link-hover-color);
}

/* DUS: reusable product grid (replaces Owl carousels) — add dus-grid/dus-grid-item classes; 6/4/3/2 cols; used by viewed-products, crossselling */
.dus-grid {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin: 0;
    padding: 15px 0 0;
}

/* DUS: grid item — base = 2 per row (mobile-first) */
.dus-grid article.dus-grid-item {
    flex: 0 0 50%;
    max-width: 50%;
    float: none; /* cancel inherited float so wrapping stays clean */
}

/* DUS: grid — 3 per row from small tablet up */
@media (min-width: 576px) {
    .dus-grid article.dus-grid-item { flex: 0 0 33.3333%; max-width: 33.3333%; }
}

/* DUS: grid — 4 per row from small desktop up */
@media (min-width: 992px) {
    .dus-grid article.dus-grid-item { flex: 0 0 25%; max-width: 25%; }
}

/* DUS: grid — 6 per row on large desktop */
@media (min-width: 1200px) {
    .dus-grid article.dus-grid-item { flex: 0 0 16.6666%; max-width: 16.6666%; }
}

/* DUS: drop the theme's inter-item divider line inside dus grids */
.dus-grid article.product_item::after { display: none; }


/* Currency caret: SVG must NOT capture clicks, or the .js-dropdown toggle never fires */
.currency-selector .dus-currency-caret {
    pointer-events: none;          /* clicks fall through to the toggle span — this is the actual fix */
    width: 10px;
    height: 6px;
    margin-left: 4px;
    vertical-align: middle;
    transition: transform 0.2s ease;
}

/* Currency caret: flip the arrow up when the dropdown is open */
.currency-selector.js-dropdown.open .dus-currency-caret {
    transform: rotate(180deg);
}
/* Header-nav dropdowns (currency, language, account) must layer above the search bar (z-index: 9990) */
#header .header-nav .dropdown-menu {
    z-index: 10000;
}
/* Logo: full natural size + ratio-locked scaling, no CLS (width/max-width now live in theme.css) */
#header .header-top .header_logo .logo {
    display: block;
    width: 100%;
    height: auto;          /* keeps 235:50 ratio — scales down cleanly, no shift */
}

/* CLS fix: fixed height reserves the space; overflow MUST stay visible or it clips the currency/language dropdown */
.header-nav { height: 38px; overflow: visible; }

.header-nav .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
}
/* CLS fix: keep free-shipping text on one line so it can't wrap and change bar height */
.header-nav .contact-link a {
    white-space: nowrap;
}

.tm-carousel {
  display: none;
  position: relative;
  float: left;
  width: 100%;
  margin: 0;
}
.cp-carousel {
  display: none;
  position: relative;
  float: left;
  width: 100%;
  margin: 0;
}
.owl-carousel .owl-wrapper {
  display: none;
  position: relative;
  -webkit-transform: translate3d(0px, 0px, 0px);
  -ms-transform: translate3d(0px, 0px, 0px);
  -o-transform: translate3d(0px, 0px, 0px);
  -moz-transform: translate3d(0px, 0px, 0px);
  display: flex !important;
  flex-wrap: wrap;
}
.owl-carousel .owl-wrapper:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
.owl-carousel .owl-wrapper-outer {
  overflow-x: clip;
  position: relative;
  float: left;
  width: 100%;
  padding: 0;
}
.owl-carousel .owl-wrapper-outer.autoHeight {
  -webkit-transition: height 500ms ease-in-out;
  -moz-transition: height 500ms ease-in-out;
  -ms-transition: height 500ms ease-in-out;
  -o-transition: height 500ms ease-in-out;
  transition: height 500ms ease-in-out;
}
.owl-carousel .owl-item {  
  float: left;
  display: flex;
  height: auto;
}
.owl-carousel .owl-item .manu_image a {
  display: inline-block;
}
.owl-carousel .owl-item .manu_image a img {
  max-width: 100%;
}

.owl-carousel .owl-wrapper,
.owl-carousel .owl-item {
  /* fix */
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  text-align: center;
}

/* mouse grab icon */
.customNavigation {
	position: absolute;
	z-index: 9;
	width: 100%;
	top: 50%;
	direction: ltr !important;
	right: 0;
	left: auto;
  opacity: 0;
  -khtml-opacity: 0;
-webkit-opacity: 0;
-moz-opacity: 0;
}
.products .customNavigation {
	top: 48%;
}
.tmcategorylist .customNavigation, .testimonial-block-part .customNavigation {
	top: 54%;
}
.tmcategorylist:hover .customNavigation {
	opacity: 1;
	-khtml-opacity: 1;
	-webkit-opacity: 1;
	-moz-opacity: 1;
}
.customNavigation a.prev::before {
	content: "\E314";
	font-family: "Material Icons";
	position: absolute;
	font-size: 20px;
	right: 5px;
	top: -1px;
	color: #808080;
}
.customNavigation a.next::before {
	content: "\E315";
	font-family: "Material Icons";
	position: absolute;
	font-size: 20px;
	position: absolute;
	right: 3px;
	top: -1px;
	color: #808080;
}
#tmtestimonialcmsblock .customNavigation {
  top: -24px;
  z-index: 5;
  right: 15px;
}
#index #tmtestimonialcmsblock .customNavigation {
  top: -40px;
  right: 0;
}
.special-products .customNavigation {
	top: 52%;
}
.special-products:hover .customNavigation, 
.products:hover .customNavigation,
.testimonial-block-part:hover .customNavigation,
.tmblog-latest:hover .customNavigation, 
#tminstagramblock:hover .customNavigation,
.product-accessories:hover .customNavigation,
.productscategory-products:hover .customNavigation{
  opacity: 1;
  -khtml-opacity: 1;
  -webkit-opacity: 1;
  -moz-opacity: 1;
}
.lastest_block .customNavigation {
	top: 44%;
}
.customNavigation i {
	color: #222 !important;
	cursor: pointer;
	font-size: 0;
	font-weight: 500;
	height: 38px;
	line-height: 32px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	text-align: center;
	width: 38px;
	background: transparent;
	border-radius: 0;
	font-style: unset;
	box-shadow: 0px 0px 16px 0px rgba(0,0,0,0.11);
}

.customNavigation i.prev {
	background: transparent;
	right: auto;
	background: #fff;
	border-radius: 50%;
	left: -5px;
}
.customNavigation i.next {
	background: transparent;
	right: 0px;
	background: #fff;
	border-radius: 50%;
	right: -5px;
}
.tmcategorylist .customNavigation i.prev, 
.testimonial-block-part .customNavigation i.prev, 
#tminstagramblock .btn.prev.instagram_prev,
.special-products .customNavigation i.prev{
	left: -20px;
}
.tmcategorylist .customNavigation i.next, 
.testimonial-block-part .customNavigation i.next, 
#tminstagramblock .btn.next.instagram_next,
.special-products .customNavigation i.next  {
  right: -20px;
}
.customNavigation i.prev::before {
	content: '';
	-webkit-mask-image: url(../img/megnor/pro-left.svg);
	-webkit-mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-image: url(../img/megnor/pro-left.svg);
	mask-position: center;
	mask-repeat: no-repeat;
	background-color: #000;
	mask-size: 14px;
	font-size: 14px;
	width: 38px;
	height: 38px;
	display: block;
  -webkit-mask-size: 14px;
}
#tmtestimonialcmsblock .customNavigation i.prev::before {
  right: 1px;
  font-weight: 500;
}
#tmtestimonialcmsblock .customNavigation i.next::before {
  right: 0;
  font-weight: 500;
}
.customNavigation i.next::before {
	content: '';
	-webkit-mask-image: url(../img/megnor/pro-right.svg);
	-webkit-mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-image: url(../img/megnor/pro-right.svg);
	mask-position: center;
	mask-repeat: no-repeat;
	background-color: #000;
	mask-size: 14px;
	font-size: 14px;
	width: 38px;
	height: 38px;
	display: block;
  -webkit-mask-size: 14px;
}
.customNavigation i.next:hover::before,.customNavigation i.prev:hover::before  {
  color: #fff;
}
#cpleftbanner1 img,
#cpleftbanner2 img {
  max-width: 100%;
}
#cpleftbanner1 li,
#cpleftbanner2 li {
  overflow: hidden;
  position: relative;
  float: left;
  border-radius: 5px;
}
#cpleftbanner1 li a,
#cpleftbanner2 li a {
  display: inline-block;
  position: relative;
  overflow: hidden;
  vertical-align: top;
}
.footer-container .links.lastest_block .customNavigation i.prev:hover {
  color: #9bbab1 !important;
}
.footer-container .links.lastest_block .customNavigation i.next:hover {
  color: #9bbab1 !important;
}

@media (max-width: 1449px) {
  .tmcategorylist .customNavigation i.prev, 
  .testimonial-block-part .customNavigation i.prev, 
  #tminstagramblock .btn.prev.instagram_prev,
  .special-products .customNavigation i.prev{
    left: -15px;
  }
  .tmcategorylist .customNavigation i.next, 
  .testimonial-block-part .customNavigation i.next,
   #tminstagramblock .btn.next.instagram_next,
   .special-products .customNavigation i.next {
    right: -15px;
  }
  .customNavigation i.next {
    right: 0;
  }/* Footer contact - email icon link (reset link styling) */
.block-contact .email a {
  display: inline-block;
  color: inherit;
  text-decoration: none;
}

/* Footer contact - circular email badge (match your .phone icon's size/color) */
.block-contact .email i.material-icons {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;          /* match .phone icon width */
  height: 48px;         /* match .phone icon height */
  border-radius: 50%;
  background: #e7a93b;  /* match .phone icon gold */
  color: #fff;
  font-size: 24px;
  vertical-align: middle;
  margin-right: 12px;
}

/* Footer contact - 'Email us' label beside the icon */
.block-contact .email .email-text {
  vertical-align: middle;
  font-weight: 700;
}
  .customNavigation i.prev {
    left: 0;
  }
}
@media (max-width: 1199px) {
  #tmtestimonialcmsblock .customNavigation {
    top: -36px;
    z-index: 5;
    right: -18px;
  }
}

@media (max-width: 991px) {
  #cpleftbanner1 li img,
  #cpleftbanner2 li a {
    width: auto;
  }
  #tmtestimonialcmsblock .customNavigation {
    top: 0;
    right: 0;
  }
}
@media (max-width: 767px) {
  .customNavigation {
    opacity: 1;
    -khtml-opacity: 1;
    -webkit-opacity: 1;
    -moz-opacity: 1;
  }
  
  .tmcategorylist .customNavigation i.prev, 
  .testimonial-block-part .customNavigation i.prev, 
  #tminstagramblock .btn.prev.instagram_prev, 
  .special-products .customNavigation i.prev,
  .btn.prev.accessories_prev {
    left: 0;
  }
  .tmcategorylist .customNavigation i.next, 
  .testimonial-block-part .customNavigation i.next,
   #tminstagramblock .btn.next.instagram_next, 
   .special-products .customNavigation i.next,
   .btn.next.accessories_next {
    right: 0;
  }
  .quickview .mask.additional_slider .customNavigation i.prev {
    left: -10px !important;
  }
  .quickview .mask.additional_slider .customNavigation i.next {
    right: -10px !important;
  }
  .btn.next.brand_next {
    left: auto;
    right: 0;
    position: absolute;
  }
  .btn.prev.brand_prev {
    left: 0;
    right: auto;
  }
  .customNavigation i.next {
    left: auto;
    right: 0;
  }
}
@media (max-width: 480px) {
}
/* CP Side Vertical Menu - Dropdown Overrides - OW 6/17/26 */
#sidevertical_menu .top-menu .sub-menu ul[data-depth="1"] > li {
  flex: unset !important;
  max-width: 100% !important;
  width: 100% !important;
  display: block !important;
}
/* Force depth-2 list to stack (scoped to side menu) */
#sidevertical_menu ul.top-menu[data-depth="2"] {
  display: block !important;
  flex-wrap: unset !important;
}
/* Suppress depth-2+ sub-menus — parent links only */
#sidevertical_menu .top-menu .sub-menu .collapse {
  display: none !important;
}
#sidevertical_menu .top-menu .sub-menu a[data-depth="1"] .pull-xs-right {
  display: none !important;
}
/* Hide cms-category items (Authors, Information, List, Islamic Articles) */
#sidevertical_menu .top-menu .sub-menu ul[data-depth="1"] > li.cms-category {
  display: none !important;
}


/* Main Menu - Dropdown Overrides - OW 5/23/26 */

/* Force single-column layout */
#_top_main_menu .top-menu .sub-menu.collapse {
  display: block !important;
}
#_top_main_menu .top-menu .sub-menu ul[data-depth="1"] > li {
  flex: unset !important;
  max-width: 100% !important;
  width: 100% !important;
  display: block !important;
}
ul.top-menu[data-depth="2"] {
  display: block !important;
  flex-wrap: unset !important;
}

/* Suppress depth-2+ sub-menus — parent links only */
#_top_main_menu .top-menu .sub-menu .collapse {
  display: none !important;
}
#_top_main_menu .top-menu .sub-menu a[data-depth="1"] .pull-xs-right {
  display: none !important;
}

/* Hide cms-category items (Authors, Information, List, Islamic Articles) */
#_top_main_menu .top-menu .sub-menu ul[data-depth="1"] > li.cms-category {
  display: none !important;
}

/* Anchor dropdown to its parent nav item */
#_top_main_menu #top-menu > li {
  position: relative !important;
}

/* Dropdown container */
#_top_main_menu .top-menu .sub-menu,
#_top_main_menu .top-menu .sub-menu.collapse,
#_top_main_menu .top-menu .popover.sub-menu {
  position: absolute !important;
  left: 0 !important;
  right: auto !important;
  display: block !important;
  width: fit-content !important;
  min-width: 260px !important;
  max-width: 320px !important;
  padding: 0 5px !important;
  background-color: #111111 !important;
  border: none !important;
  border-top: 2px solid var(--primary-color) !important;
  border-radius: 0 !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45) !important;
  z-index: 9999 !important;
}

/* Reset inner ul browser defaults */
#_top_main_menu .top-menu .sub-menu > ul.top-menu {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* Dropdown links */
#_top_main_menu .top-menu .sub-menu a[data-depth="1"],
#_top_main_menu .top-menu .sub-menu a[data-depth="2"] {
  display: block !important;
  padding: 8px 10px !important;
  min-width: unset !important;
  color: #ffffff !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  transition: background-color 0.15s ease, color 0.15s ease !important;
}

/* Hover — white background, dark text */
#_top_main_menu .top-menu .sub-menu li:hover > a[data-depth="1"],
#_top_main_menu .top-menu .sub-menu li:hover > a[data-depth="2"] {
  background-color: #ffffff !important;
  color: #111111 !important;
}

/* No divider on last item */
#_top_main_menu .top-menu .sub-menu li:last-child > a {
  border-bottom: none !important;
}

.contact-link a:hover {
    color: #ffffff !important;
}

/* Product page: "Related Items" right-hand column */

/* Two-column layout: product+tabs left, Related Items right; stacks below <992px */
@media (min-width: 992px) {
  #main .dus-product-layout { display: flex; align-items: flex-start; gap: 24px; }
  #main .dus-product-main   { flex: 1 1 auto; min-width: 0; }
  #main .dus-product-aside  { flex: 0 0 200px; width: 200px; }   /* slim column */
}

/* ----- Related Items box ----- */
#main .dus-product-aside .product-accessories.related-items-box {
  border: 2px solid #000;     /* black border */
  background: transparent;
  margin: 0;                  /* no gap above the box */
}

#main .dus-product-aside .related-items-header {
  margin: 5px;
  padding: 9px 10px;
  background: black;       /*  #007A3D; Palestinian-flag green */
  border: 1px solid #00592b;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 1px;
  font-size: 1rem;
}

#main .dus-product-aside .related-items-list { padding: 6px 10px 12px; }

#main .dus-product-aside .related-item {
  text-align: center;
  padding: 14px 0;
  border-bottom: 1px dashed #ccc;
}
#main .dus-product-aside .related-item:last-child { border-bottom: none; }

#main .dus-product-aside .related-item-link { display: block; text-decoration: none; }

/* Show the 160x160 thumbnail at its native size (no upscaling = no distortion) */
#main .dus-product-aside .related-item-img img {
  display: block;
  width: 160px;
  height: 160px;
  max-width: 100%;
  margin: 0 auto 8px;
}

#main .dus-product-aside .related-item-title {
  color: #c00000;
  font-weight: 700;
  font-size: .9rem;
  line-height: 1.3;
}
#main .dus-product-aside .related-item-link:hover .related-item-title { text-decoration: underline; }


/* ===== Footer contact: hide theme's default headset badge on the phone line ===== */
#block-contact_list .phone:before,
#block-contact_list .phone:after {
  content: "" !important;
  display: none !important;
}

/* ===== Footer contact: remove theme's leftover left padding (was for the old headset icon) ===== */
#block-contact_list .phone {
  padding-left: 0 !important;
}

/* ===== Footer contact: 'You have any Questions?' title above the phone number ===== */
#block-contact_list .phone .contact-question {
  display: block;
  margin-bottom: 8px;
}

/* ===== Footer contact: icon + text row (phone number / 'Email Us') ===== */
#block-contact_list .contact-line {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ===== Footer contact: spacing between the phone block and the email link ===== */
#block-contact_list .email {
  margin-top: 12px;
}

/* ===== Footer contact: matching gold SVG icons (phone + email) ===== */
#block-contact_list .contact-icon svg {
  display: block;
  fill: #fad505;
}

/* ===== Footer contact: circular gold badge behind both icons ===== */
#block-contact_list .contact-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid #fad505;
  flex: 0 0 auto;
}

/* ===== Footer contact: reset email link so 'Email Us' matches the phone text ===== */
#block-contact_list .email a {
  color: inherit;
}

/* ===== Footer contact: phone number & 'Email Us' share the same size/weight ===== */
#block-contact_list .phone-number,
#block-contact_list .email-text {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.2;
}

/* Availability + qty wrapper — one line, fixed height, clear of the Add-to-Cart row */
.product-quantity .dus-availability-wrap {
    flex: 0 0 100%;
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0 10px;
    min-height: 30px;
    margin: 6px 0 14px;
}

/* Available quantity line */
.dus-availability-wrap .dus-available-qty {
    display: inline-flex;
    align-items: center;
    font-size: 15px;
    color: #2e7d32;
}

/* Available quantity — the number */
.dus-qty-num {
    font-weight: 700;
    margin: 0 3px;
}

/* Available quantity — check icon */
.dus-qty-icon {
    font-size: 18px;
    color: #2e7d32;
    margin-right: 4px;
}

/* Theme availability message — same size & alignment as the qty line */
.dus-availability-wrap  #product-availability {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    width: auto;
    margin: 0;
    padding: 0;
    font-size: 15px;
}

#product-availability .product-available, #product-availability .product-unavailable {
    padding: 0px 0px;
}
/* Availability message icon — match size, roomy line-height so the icon never clips */
.dus-availability-wrap #product-availability .material-icons {
    font-size: 18px;
    line-height: 1.4;
}

.product-quantity #product-availability i.material-icons, .product-quantity #product-availability span.message {
margin-top: 0px;
}

.product-add-to-cart.js-product-add-to-cart {
    padding: 0px 0px;
}

.product-page .productpage-attributes-items {
	margin-bottom: 0px;
    color: #424146;
}

.product-information .brand-infos a, .product-reference span, .product-quantities span, .quickview .brand-infos a {
    color: #424146; 
	font-weight: 700;
}

/* Product attributes: lay the "Select :" label and dropdown out on one left-aligned row */
.product-variants > .product-variants-item {
    display: flex !important;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding-top: 10px;
}

/* Product attributes: shrink the label to its text so it can't push the dropdown to the right edge */
.product-variants > .product-variants-item > .control-label {
    width: auto !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    white-space: nowrap;
}

/* Product attributes: keep the dropdown inline at a fixed width, not floated or stretched to 100% */
.product-variants > .product-variants-item > select.form-control-select {
    width: auto !important;
    min-width: 150px;
    max-width: 220px;
    flex: 0 0 auto !important;
    float: none !important;
    margin: 0 !important;
}

/* Brand infos - remove vertical separator line */
.product-page .productpage-attributes-items .brand-infos::after {
    display: none;
}

/* DUS — product action row: quantity + Add to Cart + Save to Wishlist on one line */
.dus-cart-actions {
    display: flex;
    align-items: stretch;          /* wishlist button matches Add to Cart height */
    flex-wrap: wrap;               /* wishlist drops below on narrow screens */
    gap: 10px;
    margin-top: 10px;
	margin-bottom: 10px;
}

/* DUS — quantity stepper keeps its natural width */
.dus-cart-actions .product-double-quantity {
    flex: 0 0 auto;
}

/* DUS — Add to Cart takes the remaining space */
.dus-cart-actions .add {
    flex: 1 1 auto;
    margin: 0;
}
.dus-cart-actions .add .add-to-cart {
    width: 100%;
    height: 100%;
}



/* DUS — Product action row: Add to Cart + Save to Wishlist (consolidated, replaces prior related rules) */

/* DUS — action row: quantity + Add to Cart + Save to Wishlist on ONE line */
.dus-cart-actions {
    display: flex;
    align-items: center;      /* center everything on one baseline (was stretch) */
    flex-wrap: wrap;          /* graceful wrap before the mobile breakpoint */
    gap: 12px;
    margin-top: 10px;
}

/* DUS — quantity stepper: natural width */
.dus-cart-actions .product-double-quantity {
    flex: 0 0 auto;
}

/* DUS — Add to Cart: equal-width, 170px floor / 220px ceiling */
.dus-cart-actions .add {
    display: flex;            /* lets the button fill this wrapper */
    flex: 1 1 0;
    min-width: 140px;
    max-width: 220px;
    margin: 0;
}
.dus-cart-actions .add .add-to-cart {
    width: 100%;
    height: 48px;
    min-height: 48px;
    margin: 0;
    padding: 0 18px;          /* kill the theme's tall vertical padding */
    white-space: nowrap;      /* never let "Add to cart" wrap to 2 lines */
}

/* DUS — Save to Wishlist outer wrapper: matches Add to Cart (170px floor / 220px ceiling) */
.wish-comp {
    display: flex;
    flex: 1 1 0;
    min-width: 140px;
    max-width: 220px;
    float: none;
    margin: 0;
    background: transparent;
}
.wish-comp .wishlist {
    width: 100%;
    height: 48px;
    margin: 0;
    background: transparent;
}

/* DUS — Save to Wishlist button (overrides the theme's white .btn oval + its margin) */
.wish-comp .wishlist .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    height: 48px;
    min-height: 48px;
    margin: 0;                /* kill the theme .btn-product margin (the "extra margin top") */
    padding: 0;
    border: none;
    box-shadow: none;
    border-radius: var(--border-radius);
    background-color: var(--primary-color);   /* yellow #fad505 */
    color: var(--secondary-color);            /* #111111 */
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

/* DUS — relabel: hide module's "Add To Wishlist", show "Save to Wishlist" */
.wish-comp .wishlist .st-wishlist-bt-content {
    font-size: 0;
    color: inherit;
    font-weight: 400;
}
.wish-comp .wishlist .st-wishlist-bt-content::after {
    content: "Save to Wishlist";
    font-size: var(--body-font-size);         /* 15px */
}

/* DUS — wishlist heart icon: visible, inherits button color */
.wish-comp .wishlist i,
.wish-comp .wishlist .material-icons {
    font-size: 18px;
    line-height: 1;
    color: inherit;
}

/* DUS — cart icon before "Add to cart" (reveal the icon already in the markup) */
.product-add-to-cart .add-to-cart .material-icons,
.product-add-to-cart .add-to-cart i.material-icons {
    display: inline-flex !important;
    align-items: center;
    font-size: 18px;
    line-height: 1;
    margin-right: 6px;
    color: inherit;
}

/* DUS — remove the divider line under the action row */
.product-add-to-cart.js-product-add-to-cart {
    border-bottom: none;
}

/* DUS — shared transitions for all yellow buttons (color shift + lift) */
.btn-primary,
.wish-comp .wishlist .btn {
    transition: background-color .18s ease, color .18s ease,
                transform .08s ease, box-shadow .18s ease;
}

/* DUS — hover / keyboard-focus: go red, lift, shadow (all yellow buttons) */
.btn-primary:not(:disabled):hover,
.btn-primary:not(:disabled):focus-visible,
.wish-comp .wishlist .btn:hover,
.wish-comp .wishlist .btn:focus-visible {
    background-color: var(--price-color);     /* red #a90000 */
    color: #fff;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.2);
}

/* DUS — force EVERYTHING in the wishlist button white on hover (heart was going blue) */
.wish-comp .wishlist .btn:hover,
.wish-comp .wishlist .btn:hover *,
.wish-comp .wishlist .btn:hover *::before {
    color: #fff !important;       /* beats the theme's link-hover blue on the icon */
    fill: #fff !important;        /* covers the icon if it's an SVG */
    text-decoration: none;
}

/* DUS — Add to Cart specifically: ensure red hover beats theme defaults */
.product-add-to-cart .btn-primary.add-to-cart:not(:disabled):hover,
.product-add-to-cart .btn-primary.add-to-cart:not(:disabled):focus-visible {
    background-color: var(--price-color);
    color: #fff;
}
.product-add-to-cart .btn-primary.add-to-cart:not(:disabled):hover .material-icons {
    color: #fff;
}

/* DUS — active (pressed): settle back down for a click feel */
.btn-primary:not(:disabled):active,
.wish-comp .wishlist .btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
}

/* DUS — Cart modal + cart-page checkout buttons: red hover (!important needed — module CSS loads after custom.css) */

/* DUS — smooth transition on the two module checkout buttons */
#blockcart-modal .cart-content-btn .btn-primary,
.checkout.cart-detailed-actions .btn-primary {
    transition: background-color .18s ease, color .18s ease,
                transform .08s ease, box-shadow .18s ease;
}

/* DUS — hover/focus: red bg, white text, lift + shadow */
#blockcart-modal .cart-content-btn .btn-primary:not(:disabled):hover,
#blockcart-modal .cart-content-btn .btn-primary:not(:disabled):focus-visible,
.checkout.cart-detailed-actions .btn-primary:not(:disabled):hover,
.checkout.cart-detailed-actions .btn-primary:not(:disabled):focus-visible {
    background-color: var(--price-color) !important;   /* red #a90000 */
    color: #fff !important;
    border-color: var(--price-color) !important;
    transform: translateY(-2px);
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.2);
}

/* DUS — modal checkout icon follows the text color on hover */
#blockcart-modal .cart-content-btn .btn-primary:not(:disabled):hover .material-icons {
    color: #fff !important;
}

/* DUS — active (pressed): settle back down */
#blockcart-modal .cart-content-btn .btn-primary:not(:disabled):active,
.checkout.cart-detailed-actions .btn-primary:not(:disabled):active {
    transform: translateY(0);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
}

@media (max-width: 1199px) {
    .wish-comp {
        padding-block: 0; }}



/* DUS SOCIAL SHARE — private namespace, no theme conflicts */

/* dus-share: narrow strip pinned to the top-right of the product column */
.dus-share {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
}

.modal.quickview .dus-share {
    padding-top: 50px;
	padding-right: 10px;
}

/* dus-share list: vertical icon stack, gap controls spacing */
.dus-share-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* dus-share item */
.dus-share-item {
    margin: 0;
    padding: 0;
    line-height: 0;
}

/* dus-share link + icon */
.dus-share-link {
    display: block;
    width: 28px;
    height: 28px;
}
.dus-share-link svg {
    width: 28px;
    height: 28px;
    display: block;
    transition: transform 0.2s ease, fill 0.2s ease;
}

/* dus-share resting colors (per brand) */
.dus-share-item.dus-fb   .dus-share-link svg { fill: #1877f2; }
.dus-share-item.dus-tw   .dus-share-link svg { fill: #1da1f2; }
.dus-share-item.dus-pin  .dus-share-link svg { fill: #e60023; }
.dus-share-item.dus-li   .dus-share-link svg { fill: #0a66c2; }
.dus-share-item.dus-wa   .dus-share-link svg { fill: #25d366; }
.dus-share-item.dus-copy .dus-share-link svg { fill: #5a5a5a; }

/* dus-share hover: enlarge + deepen to a darker brand shade */
.dus-share-link:hover svg { transform: scale(1.25); }
.dus-share-item.dus-fb   .dus-share-link:hover svg { fill: #0b5ed7; }
.dus-share-item.dus-tw   .dus-share-link:hover svg { fill: #0c8de0; }
.dus-share-item.dus-pin  .dus-share-link:hover svg { fill: #ad081b; }
.dus-share-item.dus-li   .dus-share-link:hover svg { fill: #004182; }
.dus-share-item.dus-wa   .dus-share-link:hover svg { fill: #1da851; }
.dus-share-item.dus-copy .dus-share-link:hover svg { fill: var(--secondary-color); }

/* dus-share: keep the "copied" check green even on hover */
.dus-share-item.dus-copy .dus-share-link.is-copied svg,
.dus-share-item.dus-copy .dus-share-link.is-copied:hover svg { fill: #25a244; }

/* product title: reserve a right gutter so it won't run under the icons */
.col-md-7 .productpage_title { padding-right: 44px; }

/* dus-share: nudge icons in from the edge on narrow screens */
@media (max-width: 800px) {
    .dus-share { right: 10px; }
}

/* DUS: Sample Pages block placed under product images */
.dus-sample-pages {
    text-align: center;
}
.dus-sample-pages strong {
    display: block;
    margin-bottom: 8px;
    font-family: var(--title-font-family);
}
.dus-sample-pages .btn-download {
    background-color: var(--primary-color);
    color: var(--secondary-color);
    border-radius: var(--border-radius);
}


/* hioutofstocknotification */
/* DUS: OOSN — wrapper: clear the floated share block + 10px breathing room
.hi-oosn-page {
    clear: both;
    width: 100%;
    padding: 10px 0;
} */

.subscribe_form_content {
    margin-bottom: 10px;
}

/* DUS: OOSN — strip the module's bordered box so it blends into the product card */
#hi-oosn-block {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* DUS: OOSN — hide the module's title line */
.hi-oosn-title {
    display: none !important;
}

/* DUS: OOSN — email + button on a single row */
.hi-oosn-page .hi-oosn-email-content {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

/* DUS: OOSN — email field: 2px black border, theme radius; colors from BO settings */
.hi-oosn-page .hi-oosn-email-content input[name="hi_stock_email"] {
    flex: 1 1 auto;
    height: auto !important;
    border: 2px solid var(--secondary-color) !important;
    border-radius: var(--border-radius);
}

/* DUS: OOSN — button matched to the theme primary buttons */
.hi-oosn-page .hi-oosn-email-content .oosn-button {
    position: static !important;
    flex: 0 0 auto;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: auto !important;
    height: auto !important;
    padding: 14px 24px !important;
    white-space: nowrap !important;
    background-image: none !important;
    background-color: var(--primary-color) !important;
    color: var(--secondary-color) !important;
    border: none !important;
    border-radius: var(--border-radius) !important;
    font-family: var(--title-font-family);
    font-weight: 700;
    font-size: var(--body-font-size);
    line-height: 1;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
}

/* DUS: OOSN — button label (kept in CSS so it never depends on empty button markup) */
.hi-oosn-page .hi-oosn-email-content .oosn-button::after {
    content: "Notify Me When Available";
}

/* DUS: OOSN — hover (invert to match the theme feel) */
.hi-oosn-page .hi-oosn-email-content .oosn-button:hover {
    background-color: var(--secondary-color) !important;
    color: var(--primary-color) !important;
}

/* DUS — hide Social Title radio group on account forms */
.form-fields .form-group[data-form-field="id_gender"] { display: none; }

/* === Address form: hide auto-filled Alias field (value set from address1 via Address.php override) === */
.form-group.row:has(#field-alias) {
    display: none;
}

.footer-container {
	background-color: white;
}
#_desktop_user_info a.top-link, #header .header-nav .left-nav, #_desktop_currency_selector  {
	color: #DCD7C8;
}
#header .header-nav .left-nav a {
	color: #DCD7C8;
}
/* Product code: force the reference onto its own full-width line below the price */
.product-price-and-shipping {
  flex-wrap: wrap;
}
.product-price-and-shipping span.dus-code {
  display: block;     /* own line in normal block flow */
  flex: 0 0 100%;     /* own line if the container is flex-row */
  width: 100%;
  margin-top: 2px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.2;
  color: #484442;
}

/* Product code: "Item" label prepended via CSS so it stays out of the template data */
.product-price-and-shipping span.dus-code::before {
  content: "Item ";
}

/* Remove extra space under image & description; trim the wide right gutter (theme sets 40px) to 10px */
.product-page .col-md-5 {
    margin-bottom: 5px;
    padding-inline-end: 10px;
}

@media (max-width: 767px) {
.product-page .col-md-7 {
        margin-block-start: 5px;
}}

.product-page .col-md-7 {
    padding-inline-start: 10px;
    margin-bottom: 5px;
}
/* Remove space above related items table */
#myprestacommentsBlock, .product-accessories {
    margin: 0px 0px !important;
}
/* Product cover image — fill the column at every breakpoint */
.product-leftside .images-container,
.product-leftside .product-cover {
  width: 100% !important;
  max-width: 100% !important;
  padding-bottom: 10px;
}
.product-leftside .product-cover .js-qv-product-cover {
  width: 100% !important;
  height: auto !important;
  max-width: 500px !important;   /* medium_default native size — don't upscale */
}

/* NOTE: 651-767px product two-column + wishlist fixes live in theme.css (search "DUS — Product page 651-767") */


/* Dar-us-Salam — Header Search Bar (theme PRS02045_06): always-visible light pill + Meilisearch dropdown, reuses :root brand vars */


/* 1. BASE (mobile-first defaults; overridden per breakpoint) */

/* === Search block — stacking context: lifts bar + dropdown above page content (e.g. product gallery) === */
#search_block_top {
  position: relative;
  z-index: 9990;
  display: inline-block;
  vertical-align: middle;
}

/* === Search block — legacy magnifier toggle icon: hidden (bar is always visible) === */
span.search_button {
  display: none !important;
}

/* === Search block — toggle wrapper: always shown === */
#search_block_top .searchtoggle {
  display: block;
}

/* === Search bar — light pill wrapping field + magnifier === */
#search_block_top form#searchbox {
  position: relative;
  display: flex;
  align-items: center;
  background-color: #D5E0EB;              /* light gray — same pill as desktop */
  border-radius: var(--border-radius);
}

/* === Search bar — inner flex wrapper === */
#search_block_top .cpsearch-main {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
}

/* === Search bar — text input === */
#search_block_top #search_query_top {
  width: 100%;
  padding: 9px 12px;
  border: none;
  background-color: transparent;
  color: var(--secondary-color);
  font-family: var(--body-font-family);
  font-size: var(--body-font-size);
  border-radius: var(--border-radius);
}
#search_block_top #search_query_top::placeholder {
  color: #555555;
}

/* === Search bar — submit (magnifier) button: dark inline SVG === */
#search_block_top .btn.btn-primary {
  background-color: transparent;
  padding: 2px 6px;
  flex: 0 0 auto;
}
#search_block_top .btn.btn-primary .submit-text {
  display: block;
  width: 24px;
  height: 38px;
  font-size: 0;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;
}

/* === Search bar — clear (×) button: hidden until the field has text === */
.dus-search-clear {
  display: none;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin: 0 2px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #484442;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.dus-search-clear:hover {
  color: var(--secondary-color);
}
/* show it once the input has a value (placeholder no longer shown) */
#search_query_top:not(:placeholder-shown) ~ .dus-search-clear {
  display: flex;
}


/* 2. MOBILE (<=650px): tap magnifier to open a full-width bar; requires the custom.js toggle */
@media (max-width: 650px) {

  /* === Search block — just holds the magnifier in the header row === */
  #search_block_top {
    width: auto;
    flex: 0 0 auto;
  }

  /* === Toggle icon — show the white magnifier (hidden at ≥651px) === */
  span.search_button {
    display: block !important;
    width: 30px;
    height: 30px;
    cursor: pointer;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 30px 30px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
  }

  /* === Toggle icon — switch to a white ✕ once the bar is open === */
  span.search_button.active {
    background-size: 30px 30px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
  }

  /* Bar — full-width fixed strip, 20px gap each side; jQuery owns display via slideToggle(), this rule owns layout */
  #search_block_top .searchtoggle {
    display: none;
    position: fixed;
    top: var(--dus-search-top, 56px);
    left: 0;
    right: 0;
    width: 100%;
    padding: 8px 20px;                    /* the 20px breathing room each side */
    background-color: #151515;            /* dark strip, reads as part of the header */
    transform: none;
    border: none;
    z-index: 99999;
  }

  /* === Pill — fills the padded strip, light gray === */
  #search_block_top .searchtoggle form#searchbox {
    width: 100%;
    background-color: #D5E0EB;
  }
  #search_block_top .searchtoggle #search_query_top {
    width: 100%;
  }

  /* === Dropdown — full width under the open bar (inside the 20px gaps) === */
  #search_block_top .searchtoggle .dus-meili-results {
    left: 0;
    right: 0;
    width: 100%;
    max-height: 80vh;
    z-index: 99999;
  }
}


/* 3. LARGE PHONE / TABLET / DESKTOP (>=651px): always-visible compact pill pinned right, expands left over the mega menu */
@media (min-width: 651px) {

  /* DUS — small fixed footprint, no left margin, so .header-right stays narrow */
  #search_block_top {
    width: 170px;
    height: 42px;
    flex: 0 0 auto;
  }

  /* DUS — anchored RIGHT so the bar expands LEFT, overlaying the mega menu */
  #search_block_top .searchtoggle {
    display: block !important;
    position: absolute;
    right: 0;
    left: auto;
    top: 50%;
    transform: translateY(-50%);
    width: auto;
    border: none;
    background-color: transparent;
    z-index: 1001;
  }

  /* DUS — light "pill" wrapping the field + magnifier; sizes to its content */
  #search_block_top .searchtoggle form#searchbox {
    display: inline-flex;
    align-items: center;
    width: auto;
    background-color: #D5E0EB;
    border-radius: 5px;
    padding-right: 4px;
  }
  #search_block_top .cpsearch-main {
    float: none;
  }

  /* DUS — compact field; trimmed padding for more text space; grows LEFT on focus */
  #search_block_top #search_query_top {
    width: 100px;
    padding: 8px 6px;
    background-color: transparent;
    color: #111111;
    border: none;
    border-radius: 5px;
    transition: width 0.3s ease;
  }
  #search_block_top #search_query_top:focus,
  #search_block_top #search_query_top:not(:placeholder-shown) {
    width: 275px;
  }

  /* DUS — magnifier submit button: inline SVG, dark, inside the light pill */
  #search_block_top .searchtoggle .btn.btn-primary {
    background-color: transparent;
    padding: 2px 6px;
    flex: 0 0 auto;
  }
  #search_block_top .searchtoggle .btn.btn-primary .submit-text {
    -webkit-mask-image: none;
    mask-image: none;
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px 18px;
    width: 24px;
    height: 38px;
    font-size: 0;
  }
}

/* DUS — 992–1449px: full menu still shows, but there's room to expand to 400px on focus */
@media (min-width: 992px) and (max-width: 1449px) {
  #search_block_top {
    width: 120px;
  }
  #search_block_top #search_query_top {
    width: 70px;
  }
  #search_block_top #search_query_top:focus,
  #search_block_top #search_query_top:not(:placeholder-shown) {
    width: 400px;
  }
}

/* DUS — 651–991px: mega menu collapsed to a hamburger, freeing space → wider bar */
@media (min-width: 651px) and (max-width: 991px) {
  #search_block_top {
    width: 210px;
  }
  #search_block_top #search_query_top {
    width: 160px;
  }
  #search_block_top #search_query_top:focus,
  #search_block_top #search_query_top:not(:placeholder-shown) {
    width: 320px;
  }
}

/* DUS — ≥1450px: plenty of room, so make the INITIAL box (and expansion) larger */
@media (min-width: 1450px) {
  #search_block_top {
    width: 250px;
  }
  #search_block_top #search_query_top {
    width: 200px;
  }
  #search_block_top #search_query_top:focus,
  #search_block_top #search_query_top:not(:placeholder-shown) {
    width: 400px;
  }
}


/* 4. MEILISEARCH DROPDOWN — reuses :root brand variables */

/* === Meilisearch results — dropdown container === */
.dus-meili-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 9999;
  max-height: calc(70vh + 50px);         /* +50px so categories peek in below "See More Results" */
  overflow-y: auto;
  margin-top: 4px;
  background: #ffffff;
  border: 1px solid #e2e2e2;
  border-radius: var(--border-radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
  font-family: var(--body-font-family);
  font-size: var(--body-font-size);
  color: var(--secondary-color);
  text-align: left;                       /* cancel inherited center alignment from .header-div */
}

/* === Meilisearch results — group label (Products / Categories / Pages) === */
.dus-meili-group {
  padding: 8px 14px 4px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #484442;
  background: var(--box-bodybkg-color);
}

/* === Meilisearch results — item row (shared, all groups) === */
.dus-meili-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 14px;
  text-decoration: none;
  color: var(--secondary-color);
  border-top: 1px solid #f1f1f1;
}
.dus-meili-item:first-of-type { border-top: none; }

/* === Meilisearch results — active state (hover + keyboard) === */
.dus-meili-item:hover,
.dus-meili-item.is-active {
  background: var(--box-bodybkg-color);
  color: var(--link-hover-color);
}

/* === Meilisearch results — product thumbnail === */
.dus-meili-thumb {
  flex: 0 0 auto;
  width: 68px;
  height: 68px;
  object-fit: contain;
  background: #fafafa;
  border: 1px solid #eeeeee;
  border-radius: var(--border-radius);
}

/* === Meilisearch results — product meta column === */
.dus-meili-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* === Meilisearch results — product name === */
.dus-meili-name {
  font-size: 14px;
  line-height: 1.3;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* === Meilisearch results — product subtitle (often Arabic) === */
.dus-meili-sub {
  font-size: 14px;
  color: #777777;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* === Meilisearch results — price line (price + stock flag) === */
.dus-meili-priceline {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}
.dus-meili-price {
  font-size: 14px;
  font-weight: 700;
  color: var(--price-color);
}
.dus-meili-oos {
  font-size: 14px;
  color: #999999;
}

/* === Meilisearch results — category / CMS simple rows === */
.dus-meili-row .dus-meili-name { font-weight: 500; }

/* === Meilisearch results — highlight mark from Meilisearch === */
.dus-meili-results mark {
  background: var(--primary-color);
  color: var(--secondary-color);
  padding: 0 1px;
  border-radius: 2px;
}

/* === Meilisearch results — loading + empty states === */
.dus-meili-loading,
.dus-meili-empty {
  padding: 14px;
  text-align: center;
  font-size: 14px;
  color: #484442;
}

/* === Meilisearch results — reference code after price === */
.dus-meili-ref {
  font-size: 14px;
  color: #484442;
  margin-left: 2px;
}

/* === Meilisearch results — "See More Results" link (foot of Products group) === */
.dus-meili-more {
  display: block;
  padding: 10px 14px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  color: var(--link-hover-color);
  background: var(--box-bodybkg-color);
  border-top: 1px solid #e2e2e2;
}
.dus-meili-more:hover,
.dus-meili-more.is-active {
  background: var(--primary-color);
  color: var(--secondary-color);
}

/* === Meilisearch results — narrow viewports === */
@media (max-width: 575px) {
  .dus-meili-results { max-height: 70vh; }
  .dus-meili-thumb { width: 48px; height: 48px; }
  .dus-meili-name { font-size: 13px; }
}

/* === Fancybox above sticky header search === */
.fancybox-overlay { z-index: 99990 !important; }
.fancybox-wrap    { z-index: 99991 !important; }

/* 5. HEADER ROW LAYOUT (menu single-row + cart alignment) — replaces the old temporary >=992px header block */

/* Main menu — keep nav on one line between 992-1205px (undoes theme's <=1199px width:56% rule) */
@media (min-width: 992px) and (max-width: 1205px) {
  .header-top .header-div .header-center {
    white-space: nowrap;
  }
  #header .header-top-main.bg_main .menu {
    width: auto;
    margin-inline-start: 0;
    white-space: nowrap;
  }
  .header-top-main.bg_main #_top_main_menu li {
    margin-inline: 6px;
  }
}

/* Cart — center the basket icon on the same line as search + wishlist at all widths (vertical-align now lives in theme.css) */
#_desktop_cart .icon_menu,
#_mobile_cart  .icon_menu {
  display: inline-flex;
  align-items: center;
}

/* Wishlist — keep the heart visible in the 481-650px search-icon band (theme.css hides it at <=650px) */
@media (min-width: 515px) and (max-width: 650px) {
  .header-top .head-wishlist {
    display: inline-block;
  }
}

/* Header row — tighten search/wishlist/cart/menu spacing below 650px so nothing overflows or clips */
@media (max-width: 650px) {
  .header-top .header-div .container {
    gap: 20px;
    padding: 0 20px;
  }
  .header-top .header-div .container .header-right {
    gap: 20px;
  }
}
@media (max-width: 450px) {
  .header-top .header-div .container {
    gap: 5px;
    padding: 0 5px;
  }
  .header-top .header-div .container .header-right {
    gap: 5px;
  }
}

/* Logo — shrink the WRAPPER (not just the img) below 450px so search/cart don't get pushed off-screen (`body` prefix wins over search.css's earlier import) */
@media (max-width: 450px) {
  body #header .header-top .header_logo {
    width: 180px;
    max-width: 100%;
  }
  body #header .header-top .header_logo .logo {
    width: 100%;
    height: auto;
  }
}

/* DUS — Homepage slider (#carousel) */
.carousel .carousel-item .caption {
  pointer-events: none;
}
.carousel .carousel-item .caption .slide-text,
.carousel .carousel-item .caption .sliderbutton {
  pointer-events: auto;
}