/* DealNet search bar - version 16
   One white bar, everything the same height and vertically centered:
   [ All Categories | search box (stretches) | Sort dropdown | SEARCH ]
   All text in the bar uses the same font size.
   Desktop and tablet only (700px and wider). Phones get a simple stacked layout below. */

@media (min-width: 700px) {
  #search_mini_form {
    display: flex !important;
    align-items: stretch;
    width: 100% !important;
    height: 40px;
    background: #fff;
    border: 2px solid #b5b5b5;
    border-radius: 4px;
    overflow: visible;
    box-sizing: border-box;
  }
  #search_mini_form .form-search {
    display: flex !important;
    align-items: stretch;
    flex: 1 1 auto;
    min-width: 0;
    width: auto !important;
    height: 100%;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  #search_mini_form .form-search > label {
    display: none !important;
  }

  /* All Categories */
  #search_mini_form .input_cat {
    flex: 0 0 auto;
    display: flex !important;
    align-items: center;
    height: 100%;
    float: none !important;
    margin: 0 !important;
    background: #fff;
    border-right: 1px solid #ddd;
    border-radius: 2px 0 0 2px;
    position: relative;
    z-index: 50;
  }
  #search_mini_form .input_cat,
  #search_mini_form .input_cat * {
    font-size: 14px !important;
  }

  /* Search box area */
  #search_mini_form .input_search {
    flex: 1 1 auto;
    display: flex !important;
    align-items: stretch;
    min-width: 0;
    width: auto !important;
    height: 100%;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff;
  }
  #search_mini_form .input_search .input-text {
    order: 1;
    flex: 1 1 auto;
    min-width: 0;
    width: auto !important;
    height: 100% !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 12px !important;
    border: 0 !important;
    box-shadow: none !important;
    background: #fff !important;
    color: #333;
    font-size: 14px !important;
    line-height: normal !important;
  }

  /* Sort dropdown, sits just before SEARCH */
  #search_mini_form .input_search .product-sorting {
    order: 2;
    flex: 0 0 auto;
    display: flex !important;
    align-items: stretch;
    height: 100%;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  #search_mini_form .sortdir {
    height: 100% !important;
    margin: 0 !important;
    padding: 0 8px !important;
    border: 0 !important;
    border-left: 1px solid #ddd !important;
    border-radius: 0 !important;
    background: #fff !important;
    color: #333 !important;
    font-size: 14px !important;
    cursor: pointer;
  }

  /* SEARCH button at the very end */
  #search_mini_form .input_search .button {
    order: 3;
    flex: 0 0 auto;
    display: flex !important;
    align-items: center;
    height: 100% !important;
    float: none !important;
    margin: 0 !important;
    border-radius: 0 2px 2px 0 !important;
    font-size: 14px !important;
  }

  /* Old Sorting area is now empty */
  #search_mini_form .div_link-cart {
    display: none !important;
  }
}

/* Tablets, e.g. iPad 9 (810px wide upright, 1080px sideways), up to 1199px:
   two rows inside the gray-bordered box
   [ All Categories        | Sort: Highest discount ]
   [ search box (wide)                   | SEARCH   ] */
@media (min-width: 700px) and (max-width: 1199px) {
  #search_mini_form {
    height: auto !important;
  }
  #search_mini_form .form-search {
    flex-wrap: wrap;
    height: auto !important;
  }
  #search_mini_form .input_search {
    display: contents !important;
  }
  #search_mini_form .input_cat {
    order: 1;
    flex: 1 1 50%;
    max-width: 50%;
    height: 40px;
    box-sizing: border-box;
    border-bottom: 1px solid #ddd;
    border-radius: 2px 0 0 0;
  }
  #search_mini_form .input_cat select {
    width: 100%;
    max-width: none;
  }
  #search_mini_form .input_search .product-sorting {
    order: 2;
    flex: 1 1 50%;
    max-width: 50%;
    height: 40px;
    box-sizing: border-box;
    border-bottom: 1px solid #ddd;
  }
  #search_mini_form .sortdir {
    width: 100%;
    max-width: none;
    border-left: 0 !important;
  }
  #search_mini_form .input_search .input-text {
    order: 3;
    flex: 1 1 0;
    height: 40px !important;
  }
  #search_mini_form .input_search .button {
    order: 4;
    height: 40px !important;
    border-radius: 0 0 2px 0 !important;
  }
}

/* Phones and small tablets:
   [ All Categories            ]
   [ search box      | SEARCH  ]
   [ Sort dropdown             ]
   Text is 16px so iPhones don't zoom in when you tap the search box. */
@media (max-width: 699px) {
  #search_mini_form .input_search {
    display: flex !important;
    flex-wrap: wrap;
    align-items: stretch;
    position: static !important;
    width: 100% !important;
    float: none !important;
  }
  #search_mini_form .input_search {
    height: auto !important;
    overflow: visible !important;
  }
  #search_mini_form .input_search .input-text,
  #search_mini_form #search.input-text {
    order: 1;
    flex: 1 1 0;
    min-width: 0;
    width: auto !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 12px !important;
    line-height: normal !important;
    border: 0 !important;
    border-radius: 4px 0 0 4px !important;
    -webkit-appearance: none;
    appearance: none;
    background: #fff !important;
    font-size: 16px !important;
    box-sizing: border-box !important;
  }
  #search_mini_form .input_search .button {
    order: 2;
    flex: 0 0 auto;
    display: flex !important;
    align-items: center;
    position: static !important;
    visibility: visible !important;
    opacity: 1 !important;
    float: none !important;
    height: 40px !important;
    margin: 0 !important;
    border-radius: 0 4px 4px 0 !important;
  }
  #search_mini_form .input_search .product-sorting {
    order: 3;
    flex: 1 1 100%;
    display: block !important;
    margin-top: 6px;
  }
  #search_mini_form .sortdir,
  #search_mini_form .input_cat select {
    width: 100%;
    height: 40px !important;
    box-sizing: border-box;
    font-size: 16px !important;
  }
  #search_mini_form .input_cat {
    margin: 0 0 6px 0 !important;
  }
  #search_mini_form {
    margin: 0 !important;
    padding: 0 !important;
  }
  /* empty old Sorting area left extra gray space at the bottom */
  #search_mini_form .div_link-cart {
    display: none !important;
  }
}

/* ===== All Categories box on desktop and tablet (version 8) =====
   The theme hides the real <select> and shows its own box:
   .catsearch-dropdown > span.current (the label) + ul (the list).
   Make that box fill the bar's full height and draw a clear arrow. */
@media (min-width: 700px) {
  #search_mini_form .catsearch-dropdown {
    position: relative;
    display: flex !important;
    align-items: center;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 34px 0 12px !important;
    border: 0 !important;
    background-color: #fff !important;
    background-image: none !important;
    box-sizing: border-box;
    cursor: pointer;
  }
  #search_mini_form .catsearch-dropdown .current {
    display: block !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: normal !important;
    background: transparent none !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #search_mini_form .catsearch-dropdown::after {
    content: "";
    position: absolute;
    right: 13px;
    top: 50%;
    margin-top: -3px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid #555;
    pointer-events: none;
  }
  /* the list opens right under the box */
  #search_mini_form .catsearch-dropdown ul {
    top: 100% !important;
    left: 0;
    min-width: 100%;
    z-index: 100;
  }
}
@media (min-width: 700px) and (max-width: 1199px) {
  #search_mini_form .catsearch-dropdown {
    width: 100% !important;
  }
}

/* ===== Soft gray fill so the search bar stands out (version 9) =====
   Light gray boxes, a faint shadow, and the search box turns white
   while you type in it. */
@media (min-width: 700px) {
  #search_mini_form {
    background: #f4f5f7;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  }
  #search_mini_form .input_cat,
  #search_mini_form .catsearch-dropdown,
  #search_mini_form .input_search,
  #search_mini_form .input_search .input-text,
  #search_mini_form .sortdir {
    background-color: #f4f5f7 !important;
  }
  #search_mini_form .catsearch-dropdown:hover,
  #search_mini_form .sortdir:hover {
    background-color: #eaecef !important;
  }
  #search_mini_form .input_search .input-text:focus {
    background-color: #fff !important;
    outline: none;
  }
  #search_mini_form .input_cat,
  #search_mini_form .sortdir,
  #search_mini_form .input_search .product-sorting {
    border-color: #d9dce1 !important;
  }
}

/* ===== Version 10 =====
   1) The theme gives All Categories a white background (its "over" state)
      with stronger rules than ours; these more specific rules keep it gray.
   2) Stronger divider lines between the boxes, matching the outer border. */
@media (min-width: 700px) {
  html body #search_mini_form .input_cat,
  html body #search_mini_form .input_cat div.catsearch-dropdown,
  html body #search_mini_form .input_cat div.catsearch-dropdown.over {
    background-color: #f4f5f7 !important;
    background-image: none !important;
  }
  html body #search_mini_form .input_cat div.catsearch-dropdown span.current,
  html body #search_mini_form .input_cat div.catsearch-dropdown.over span.current {
    background: transparent none !important;
  }
  html body #search_mini_form .input_cat div.catsearch-dropdown:hover,
  html body #search_mini_form .input_cat div.catsearch-dropdown.over:hover {
    background-color: #eaecef !important;
  }

  html body #search_mini_form .input_cat {
    border-right: 2px solid #b5b5b5 !important;
  }
  html body #search_mini_form .sortdir {
    border-left: 2px solid #b5b5b5 !important;
  }
}
@media (min-width: 700px) and (max-width: 1199px) {
  /* iPad: two rows, so the lines go between the rows and between the two top boxes */
  html body #search_mini_form .input_cat,
  html body #search_mini_form .input_search .product-sorting {
    border-bottom: 2px solid #b5b5b5 !important;
  }
  html body #search_mini_form .sortdir {
    border-left: 0 !important;
  }
}

/* ===== Version 11: no white glow behind "All Categories" =====
   Removes any text shadow, box shadow, background or fade effect
   that the theme puts directly behind the label text. */
@media (min-width: 700px) {
  html body #search_mini_form .input_cat div.catsearch-dropdown,
  html body #search_mini_form .input_cat div.catsearch-dropdown span.current,
  html body #search_mini_form .input_cat div.catsearch-dropdown span.current * {
    text-shadow: none !important;
    box-shadow: none !important;
    transition: none !important;
  }
  html body #search_mini_form .input_cat div.catsearch-dropdown span.current,
  html body #search_mini_form .input_cat div.catsearch-dropdown span.current::before,
  html body #search_mini_form .input_cat div.catsearch-dropdown span.current::after {
    background: transparent none !important;
    border: 0 !important;
  }
}

/* ===== Version 12: no white flash while the page loads =====
   For a split second, before the theme's script builds its own
   "All Categories" box, the browser shows the plain <select>, which is white.
   Style that plain <select> to look the same, so the switch is invisible. */
@media (min-width: 700px) {
  html body #search_mini_form #category_search {
    height: 100% !important;
    margin: 0 !important;
    padding: 0 34px 0 12px !important;
    border: 0 !important;
    border-radius: 0 !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #f4f5f7 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0h10L5 6z' fill='%23555'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 13px center !important;
    color: #555;
    font-size: 14px !important;
    font-weight: bold;
    box-shadow: none !important;
    text-shadow: none !important;
    cursor: pointer;
  }
}

/* ===== Header on phones (version 7) =====
   Logo centered with modest spacing, links centered underneath,
   and empty leftover blocks removed so they don't add blank space. */
@media (max-width: 699px) {
  .header-contenter-top .header {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    padding: 10px 0 6px !important;
    margin: 0 !important;
    height: auto !important;
    min-height: 0 !important;
  }
  .header-contenter-top .grid_6,
  .header-contenter-top #topmenu {
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
    min-height: 0 !important;
  }
  .header-contenter-top .header-logo {
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
    text-align: center;
  }
  .header-contenter-top .header-logo a.logo {
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
    float: none !important;
  }
  .header-contenter-top .header-logo img {
    display: block !important;
    max-width: 170px;
    width: 100%;
    height: auto !important;
    margin: 0 auto !important;
  }
  #topmenu .row_1 {
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    text-align: center;
  }
  /* first list only holds old Google+/Facebook widgets that no longer show anything */
  #topmenu .row_1 > ul.links:first-child {
    display: none !important;
  }
  #topmenu ul.links,
  #topmenu .welcome-msg {
    float: none !important;
    display: block !important;
    margin: 6px 0 0 !important;
    padding: 0 !important;
    text-align: center !important;
  }
  #topmenu ul.links li {
    float: none !important;
    display: inline-block !important;
  }
  /* empty spacer blocks above the search bar */
  .header-contenter-bottom .grid_6,
  .header-contenter-bottom .menu-center {
    display: none !important;
  }
  .header-contenter-bottom .header {
    padding-top: 6px !important;
    margin-top: 0 !important;
  }
}

/* ===== Version 13: Shop by Department on phones =====
   The menu moves from the bottom of the page to just under the search bar,
   closed by default. Tapping "Shop By Department" opens or closes it.
   (The small script at the end of main.php adds the tap behavior; without it,
   the menu simply stays open, so nothing is ever hidden by mistake.) */
@media (max-width: 699px) {
  .main .em_content_bg {
    display: flex !important;
    flex-direction: column;
  }
  .main .em_content_bg > .col-left {
    order: -1;
    float: none !important;
    width: 100% !important;
    left: auto !important;
    right: auto !important;
    margin: 0 0 12px 0 !important;
    position: static !important;
  }
  .main .em_content_bg > .col-main {
    order: 1;
    float: none !important;
    width: 100% !important;
    left: auto !important;
    right: auto !important;
    margin: 0 !important;
    position: static !important;
  }
  .col-left .sidebar .block_department {
    cursor: pointer;
    position: relative;
    -webkit-tap-highlight-color: transparent;
  }
  .col-left .sidebar .block_department::after {
    content: "";
    position: absolute;
    right: 16px;
    top: 50%;
    margin-top: -3px;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 7px solid #fff;
    pointer-events: none;
  }
  html.dn-menu-js .col-left .sidebar:not(.dn-open) .main_left_menu {
    display: none !important;
  }
  html.dn-menu-js .col-left .sidebar.dn-open .block_department::after {
    border-top: 0;
    border-bottom: 7px solid #fff;
  }
}

/* ===== Version 16: "Featured Deals" heading on the home page =====
   DealNet blue, each word capitalized, original size.
   Shifted down so it sits just above the Desktop Computers box,
   without adding any extra space to the page. */
.col-main-content > h1:has(~ .home_products) {
  color: #008dfb !important;
  text-transform: capitalize;
  position: relative;
  top: 18px;
}