:root {
  --header-ink: #222;
  --header-surface: #fff;
  --header-accent: #f9f1f2;
  --header-border: rgba(34, 34, 34, .12);
  --header-shadow: 0 10px 30px rgba(25, 26, 11, .12);
  --header-content-width: 1180px;
}

.site-shell { width: 100%; }
body.navigation-is-open { overflow: hidden; }
.site-header { position: relative; z-index: 1000; color: var(--header-ink); padding: 0; background: transparent; }
.site-header__main { background: var(--header-accent); }
.site-header__inner { width: min(100% - 32px, var(--header-content-width)); min-height: 84px; margin: 0 auto; display: grid; grid-template-columns: 180px minmax(220px, 1fr) auto; align-items: center; gap: 28px; }
.site-header__brand { display: block; }
.site-header__brand img { display: block; max-width: 160px; height: auto; }

@media (max-width: 767px) {
  #logo { padding-left: 35px; margin: 0; max-width: 100%;padding-left: 60px; }
  .common-home .menunav{margin-left: -15px; margin-top: 5px; }
}
.site-header__search { position: relative; min-width: 0; }
.delivery-selector { display: none; }
.site-header__search-close { display: none; }
.site-header__search #search { width: 100%; }
.site-header__search #search .form-control { height: 42px; border: 0; border-radius: 6px 0 0 6px; box-shadow: none; }
.site-header__search #search .btn { height: 42px; border: 0; border-radius: 0 6px 6px 0; }
.site-header__popular { display: none; position: absolute; inset: 48px 0 auto; z-index: 4; padding: 16px; background: var(--header-surface); border-radius: 0 0 6px 6px; box-shadow: var(--header-shadow); }
.site-header__popular.is-open { display: block; }
.site-header__popular p { margin: 0 0 8px; font-weight: 600; }
.site-header__popular ul, .site-navigation__list, .site-navigation__panel ul, .account-menu__list, .more-menu ul { margin: 0; padding: 0; list-style: none; }
.site-header__popular a { display: block; padding: 5px 0; color: inherit; }
.site-header__actions { display: flex; align-items: center; gap: 18px; }
.site-header__action, .site-header__action a { color: #fff; }
.header-action-btn { gap: 7px; border: 0; background: none; color: inherit; white-space: nowrap;text-align: center; }
.header-action-btn img { width: 22px; max-height: 22px; }
.site-header__heart { width: 24px; height: 24px; fill: currentColor; }
#wishlist-total { color: #fff !important; }
.site-header #cart > button { padding: 0; border: 0; background: transparent; color: #fff !important; box-shadow: none; text-shadow: none; }
.account-menu, .site-header__more { position: relative; }
.account-menu__list, .more-menu { display: none; position: absolute; top: calc(100% + 15px); right: 0; min-width: 190px; padding: 10px; background: var(--header-surface); color: var(--header-ink); box-shadow: var(--header-shadow); border-radius: 6px; }
.account-menu.is-open .account-menu__list, .more-menu.is-open { display: block; }
.account-menu__list a, .more-menu a { display: block; padding: 9px 10px; color: inherit; }
.account-menu__list a:hover, .more-menu a:hover { background: #f5f5f2; }
.more-menu__close { display: none; }
.more-menu__mobile-only { display: none; }
.site-header__menu-toggle { display: none; }
.site-navigation-wrap { background: var(--header-surface); border-bottom: 1px solid var(--header-border); }
.site-navigation { width: min(100% - 32px, var(--header-content-width)); margin: 0 auto; }
.site-navigation__drawer { position: relative; }
.site-navigation__welcome, .site-navigation__close { display: none; }
.site-navigation__list { display: flex; align-items: stretch; }
.site-navigation__list > li { position: relative; }
.site-navigation__list > li > a, .site-navigation__link { display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 0 18px; border: 0; background: none; color: var(--header-ink); font-weight: 500; }
.site-navigation__link span { font-size: 20px; }
.site-navigation__panel { display: none; position: absolute; top: 100%; left: 0; min-width: 280px; padding: 18px; background: var(--header-surface); box-shadow: var(--header-shadow); }
.site-navigation__item.is-open .site-navigation__panel,
.site-navigation__item:hover .site-navigation__panel,
.site-navigation__link:focus + .site-navigation__panel { display: grid; grid-template-columns: repeat(4, minmax(130px, 1fr)); gap: 16px; min-width: min(100%, 760px); }
.site-navigation__item:hover > .site-navigation__link,
.site-navigation__item.is-open > .site-navigation__link { background: #fd3231; color: #fff; }
.site-navigation__group h3 { margin: 0 0 8px; font-size: 14px; }
.site-navigation__group a { display: block; padding: 4px 0; color: inherit; font-size: 13px; }
.site-modal[hidden] { display: none; }
.site-modal { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; }
.site-modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.72); }
.site-modal__dialog { position: relative; width: min(540px, calc(100% - 32px)); padding: 28px; background: #fff; border-radius: 10px; box-shadow: var(--header-shadow); }
.site-modal__close { position: absolute; top: 8px; right: 12px; border: 0; background: none; font-size: 28px; }
.site-modal__dialog h2 { margin: 0 32px 10px 0; font-size: 20px; }
.site-modal__dialog form { display: grid; gap: 12px; }
.site-modal__dialog input { width: 100%; padding: 13px 15px; border: 1px solid #e9eaec; border-radius: 6px; }
.site-modal__dialog button[type=submit] { padding: 13px 15px; border: 0; border-radius: 6px; background: #191a0b; color: #fff; }

@media (min-width: 768px) {
  .header_Box > header { background: #fdfbfc }
  .header_Box > header .top_hd_col { border-bottom-color: rgba(255, 255, 255, .2); }
  .header_Box > header .xs-hd-width { width: 280px; flex: 0 0 280px; }
  .header_Box > header #search {
    display: flex;
    width: 100% !important;
    height: 40px;
    align-items: stretch;
    overflow: hidden;
    border-radius: 20px;
    background: #fff;
    border: 1px solid #dbdbdb;
  }
  .header_Box > header #search .form-control {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    display: block !important;
    visibility: visible;
    height: 40px;
    border: 0;
    border-radius: 20px 0 0 20px;
    box-shadow: none;
  }
  .header_Box > header #search .input-group-btn { display: flex; width: auto; }
  .header_Box > header #search .btn {
    width: 32px;
    height: 32px;
    border: 0;
    padding: 0;
    background: #fff;
    color: var(--header-accent);
    border-radius: 0 20px 20px 0;
  }
  .header_Box > header #search .btn .fa { color: inherit; }
  .header_Box .menunav { background: var(--header-accent); }
  .header_Box .menunav #menu { min-height: 40px; margin: 0; }
  .header_Box .menunav #menu .navbar-nav { width: 100%; min-height: 40px; justify-content: space-between; }
  .header_Box .menunav #menu .navbar-nav > li > a {
    display: flex;
    min-height: 50px;
    align-items: center;
    padding: 0 10px;
    color: #000000 !important;
  }
  .header_Box > header .cart_btn_col { }
  .header_Box > header .cart_btn_col #cart { width: 100%; }
  .header_Box > header .cart_btn_col #cart > button {
    width: 100%;
    justify-content: center;
    gap: 7px;
    color: #000 !important;
  }
  .header_Box > header .cart_btn_col #cart .hidden-xs:empty::before { content: "My Cart"; }
  .header_Box > header .cart_btn_col #cart .cart-img {
    display: block !important;
    width: 20px;
    height: 22px;
    margin: 0 !important;
  }
  .header_Box > header .sign-col > ul { margin: 0; }
  .header_Box > header .sign-col .login-click,
  .header_Box > header .sign-col .login-click:hover,
  .header_Box > header .sign-col .login-click .header-action-btn { color: #000 !important; text-decoration: none; }
  .header_Box > header .sign-col .header-action-btn,
  .header_Box > header .healp_col .header-action-btn,
  .header_Box > header .more_menu .header-action-btn { gap: 8px; }
  .header_Box > header .sign-col .header-action-btn,
  .header_Box > header .healp_col .header-action-btn,
  .header_Box > header .more_menu .header-action-btn {
    
  }
  .header_Box > header .sign-col img,
  .header_Box > header .more_menu img { display: block; width: 22px; height: 22px; object-fit: contain; }
  .header_Box > header #wishlist-total { color: #fff !important; text-decoration: none; }
  .header_Box > header #wishlist-total .wish-icon { width: 24px; height: 24px; }
  .header_Box > header #wishlist-total .wish-icon path { fill: #fff; }
}

/* The legacy theme reserved space for its fixed header. The rebuilt header is
   part of normal document flow, so remove that duplicate reservation. */
body.common-home > .site-shell ~ .home-header-tab,
body.common-home > .site-shell ~ .container.top_positionn,
body:not(.common-home) > .site-shell ~ .container.top_positionn { margin-top: 0 !important; }

/* Keep the home hero visible if the carousel enhancement is delayed or
   unavailable. Slick removes this loading state once it initializes. */
body.common-home .banner-slide.slick-loading .slick-slide:first-child {
  display: block;
  visibility: visible;
}

body.common-home > .home-header-tab,
body.common-home .main-banner-slide,
body.common-home .main-banner-slide .banner-slide,
body.common-home .main-banner-slide .banner-slide > a,
body.common-home .main-banner-slide .banner-slide img {
  visibility: visible !important;
  opacity: 1 !important;
  border-radius: initial;
}

body.common-home > .home-header-tab { margin-top: 0 !important; }
body.common-home .main-banner-slide .banner-slide > a:first-child { display: block !important; }
.text-black{
  color: #000000;
}
.cart svg{
  height: 20px;
}
@media (max-width: 767px) {
  /* Keep the floating mobile navbar container compact. Broad homepage
     .container rules must not stretch it and push the toggle away. */
  body.common-home .menunav > .container,
  .menunav > .container {
    position: absolute !important;
    top: -32px !important;
    left: 25px !important;
    width: 45px !important;
    max-width: 45px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .menunav > .container > .row {
    width: 45px !important;
    margin: 0 !important;
  }
  .site-header__inner { width: 100%; min-height: 106px; grid-template-columns: 1fr auto; gap: 12px; padding: 14px 16px 10px; }
  .site-header__brand img { max-width: 130px; }
  .site-header__menu-toggle { display: inline-flex; grid-column: 2; grid-row: 1; align-items: center; justify-content: center; width: 38px; height: 38px; border: 0; background: none; }
  .site-header__menu-toggle img { width: 25px; }
  .site-header__search { grid-column: 1 / -1; grid-row: 2; }
  .site-header__actions { position: absolute; top: 16px; right: 64px; gap: 10px; }
  .site-header__account > a span, .site-header__account .account-menu__list, .site-header__actions > #wishlist-total span, .site-header__actions > .site-header__more > button span, .site-header__cart #cart .hidden-xs { display: none; }
  .site-header__account .header-action-btn > span:not(.header-action-btn__chevron) { display: none; }
  .site-header__actions .header-action-btn { padding: 4px; }
  .site-header__heart { width: 21px; height: 21px; }
  .menunav { position: relative; z-index: 2500; }
  /* The drawer must sit above the floating hamburger while it is open;
     otherwise the hamburger shows through in the phone row. */
  #menu .navbar-collapse.navbar-ex1-collapse.collapse { position: fixed; left: -70%; top: 0; width: 70%; height: 100%; z-index: 3003; overflow-y: auto; background: #fff; }
  #menu .navbar-collapse.navbar-ex1-collapse.collapse.in { left: 0; }
  #menu .menu-overlay { z-index: 3000; }
  #menu .navbar-header { position: relative; z-index: 3002; }
  #menu .new-nav-bar { position: relative; z-index: 3002; }
  #menu span.menu-close { display: block; }
  .more-menu { position: fixed; top: 58px; right: 12px; }
  .more-menu__close { display: block; margin-left: auto; border: 0; background: none; font-size: 22px; }
  .more-menu__mobile-only { display: block; }
  .logobox{
    position: initial !important;
  }
}

/* Mobile search belongs to the header row. The legacy theme stylesheet made
   both suggestion containers fixed to the viewport, allowing results to paint
   over the homepage and detaching the close control from the input. */
@media (max-width: 767px) {
  .header_Box > header .top_hd_col,
  .header_Box > header .top_hd_col > .row,
  .header_Box > header .search,
  .header_Box > header .xs-hd-width {
    position: relative;
  }

  .header_Box > header .search {
    z-index: 1100;
    position: absolute;
    width: 100%;
    padding: 0 15px;
    left: 0px;
    top: 48px;
    background: #fdfbfc;
    padding-bottom: 10px;
  }
  #menu .btn-navbar {
    margin-right: 15px;
    margin-top: -13px;
  }

  .header_Box > header .xs-hd-width {
    /* Keep the original mobile search wrapper sizing. */
    width: 100% !important;
    padding: 0 15px;
  }

  .header_Box > header #search {
    position: relative !important;
    /* Keep the original input-box width; the dropdown is aligned to it. */
    width: 100% !important;
    margin: 0 !important;
  }

  .header_Box > header #search #serchId,
  .header_Box > header .custom-search-link {
    position: absolute !important;
    top: calc(100% + 10px) !important;
    right: auto !important;
    left: 0 !important;
    width: 100% !important;
    height: auto !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    box-sizing: border-box;
    background: #fff !important;
    z-index: 1200;
  }

  .header_Box > header .custom-search-link {
    width: calc(100% - 15px) !important;
  }

  .header_Box > header #search #serchId ul#Hajaxtargetresult,
  .header_Box > header .custom-search-link ul {
    max-height: none;
    margin: 0;
    padding: 14px 16px;
    background: #fff;
  }

  .header_Box > header #search #serchId {
    max-height: min(280px, calc(100vh - 180px)) !important;
  }

  .header_Box > header #search #serchId ul#Hajaxtargetresult {
    max-height: none;
    overflow: visible;
  }

  .header_Box > header #search #serchId .Hselectli {
    min-height: 0;
    margin: 0;
    padding: 9px 4px 9px 28px;
    font-size: 15px;
    line-height: 1.35;
  }

  .header_Box > header .search-drop-close {
    display: none !important;
    top: 50% !important;
    right: 23px !important;
    transform: translateY(-50%);
    margin: 0;
    line-height: 1;
  }

  .header_Box > header .search.search-is-open .search-drop-close {
    display: block !important;
  }
}

/* Shared mobile page gutter for non-home screens.  Legacy Bootstrap rows and
   xs-p-* helpers were allowing inner content to touch the viewport edges. */
@media (max-width: 767px) {
  body:not(.common-home) #content {
    width: 100%;
    box-sizing: border-box;
    padding-left: 15px !important;
    padding-right: 15px !important;
    overflow-x: hidden;
  }

  body:not(.common-home) #content > .container,
  body:not(.common-home) #content .container.top_positionn {
    width: 100% !important;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box;
  }

  body:not(.common-home) #content > .container > .row,
  body:not(.common-home) #content .container.top_positionn > .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  body:not(.common-home) #content img {
    max-width: 100%;
  }

  /* Footer sections use full-width Bootstrap columns; keep their inner
     content on the same mobile gutter as the rest of the site. */
  .payment-img-col > .container,
  footer.cart-footer > .container,
  .btm-contact-sec > .container,
  .bg-last-ft > .container {
    width: 100% !important;
    max-width: none !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    box-sizing: border-box;
  }

  .payment-img-col .text-center {
    padding-top: 22px !important;
    padding-bottom: 22px !important;
  }

  .payment-img-col > .container > .row,
  footer.cart-footer > .container > .row,
  .btm-contact-sec > .container > .row,
  .bg-last-ft > .container > .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .payment-img-col .text-center,
  .btm-contact-sec [class*="col-"],
  .bg-last-ft [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  footer.cart-footer {
    padding-top: 0 !important;
  }

  .btm-contact-sec {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }
}
