/* === Shirin Cafe Preview Overrides === */

/* --- Navigation --- */

/* Mobile (<980px): hide sf-menu ul, show select dropdown */
@media (max-width: 979px) {
  #topnav.sf-menu {
    display: none !important;
  }
  /* Pin the mobile dropdown to the very top of the viewport */
  select.select-menu {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 48px;
    background-color: rgba(26, 0, 0, 0.97);
    border: none;
    border-bottom: 1px solid #5a2000;
    color: #f2ce87;
    font-size: 14px;
    padding: 0 12px;
    z-index: 9997;
    margin: 0 !important;
  }
  /* Remove theme's 45px padding-top on header_wrapper (was for old mobile dropdown) */
  header.header .header_wrapper {
    padding-top: 0 !important;
  }
  body.cherry-fixed-layout header.header .static_box {
    display: none !important;
  }
}

/* Desktop (>=980px): hide select, show GIF nav */
@media (min-width: 980px) {
  select.select-menu {
    display: none !important;
  }
  nav.nav.nav__primary.clearfix {
    position: relative;
    left: 116px; /* override bundle4's -106px; shifts nav right so home lands at ~x:230 */
  }

  /* Force horizontal layout — don't rely on Superfish JS */
  ul#topnav.sf-menu {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
  }
  ul#topnav.sf-menu > li {
    float: left !important;
    list-style: none !important;
    display: block !important;
  }
  /* Hide ALL sub-menus */
  ul#topnav.sf-menu li ul {
    display: none !important;
  }

  /* Push About Us and Contact past the logo image (which ends at ~x:997).
     Bundle4 sets left:265 and left:280; these override to clear the logo. */
  li#menu-item-55 { left: 390px !important; }
  li#menu-item-54 { left: 405px !important; }
}

/* My Account and Cart hidden from nav on all viewports */
ul#topnav.sf-menu > li#menu-item-67,
ul#topnav.sf-menu > li#menu-item-68,
li#menu-item-67,
li#menu-item-68 {
  display: none !important;
}

/* Cart icon — positioned top-right of header */
a.cart-icon-corner {
  position: fixed;
  top: 18px;
  font-size: 32px;
  color: #f2ce87;
  z-index: 9999;
  text-decoration: none;
}
/* Place icon 18px inside the right edge of the Bootstrap container */
@media (min-width: 1200px) {
  a.cart-icon-corner { right: calc((100vw - 1170px) / 2 + 128px); }
}
@media (min-width: 980px) and (max-width: 1199px) {
  a.cart-icon-corner { right: calc((100vw - 940px) / 2 + 128px); }
}
@media (max-width: 979px) {
  a.cart-icon-corner { right: 128px; }
}
a.cart-icon-corner:hover {
  color: #ffffcc;
}
body.home a.cart-icon-corner {
  display: none !important;
}

/* --- Product cards: mobile dark theme --- */
@media (max-width: 979px) {
  /* Equal-height rows via flexbox */
  ul.products {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
  }
  /* Dark card replacing WooCommerce's white background */
  ul.products li.product {
    background: #1a0000 !important;
    border: 1px solid #5a2000 !important;
    border-radius: 2px !important;
    padding: 0 !important;
    margin-bottom: 16px !important;
    display: flex !important;
    flex-direction: column !important;
  }
  ul.products li.product a.woocommerce-LoopProduct-link {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    flex: 1 !important;
    padding: 0 !important;
  }
  ul.products li.product a.woocommerce-LoopProduct-link img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 !important;
  }
  ul.products li.product .woocommerce-loop-product__title {
    text-align: center !important;
    color: #ffffcc !important;
    font-size: 14px !important;
    padding: 6px 10px 4px !important;
    margin: 0 !important;
  }
  ul.products li.product .price {
    text-align: center !important;
    display: block !important;
    color: #f2ce87 !important;
    font-size: 15px !important;
    font-weight: bold !important;
    padding: 4px 10px 6px !important;
  }
  ul.products li.product .short_desc {
    display: none !important;
  }
  ul.products li.product a.add_to_cart_button {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: center !important;
    background: #4c0000 !important;
    color: #ffffcc !important;
    border: none !important;
    border-top: 1px solid #5a2000 !important;
    padding: 10px !important;
    font-size: 11px !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
  }
  ul.products li.product a.add_to_cart_button:hover {
    background: #6a0000 !important;
  }
}

/* --- Product cards: fix description overlap --- */
@media (min-width: 979px) {
  /* bundle4 floats img left at 153px and h2 left at 38% width, both inside an
     inline anchor. short_desc is a sibling — position it absolutely so it lands
     to the RIGHT of the image (left: 175px) and BELOW the h2 (top: 55px). */
  body #motopress-main.main-holder .content-holder ul.products li.product .short_desc {
    position: absolute !important;
    display: block !important;
    top: 55px !important;
    left: 175px !important;
    width: 34% !important;
    color: #ffffcc;
  }

  /* Price font size */
  body #motopress-main.main-holder .content-holder ul.products li.product > a .price {
    font-size: 1.1em;
    font-weight: bold;
  }
}

/* === Menu sub-page tabs (A-la-carte / Banquets / Special Order) === */
ul.subpage-tabs {
  list-style: none !important;
  margin: 0 0 10px 0 !important;
  padding: 0 !important;
  display: flex !important;
  justify-content: center;
  gap: 32px;
}
ul.subpage-tabs li { margin: 0 !important; }
ul.subpage-tabs li a {
  display: inline-block;
  padding: 4px 0 6px;
  background: none;
  color: #f2ce87 !important;
  border: none;
  border-bottom: 2px solid #f2ce87;
  text-decoration: none !important;
  font-size: 22px;
  letter-spacing: 0;
  text-transform: none;
}
ul.subpage-tabs li.active a,
ul.subpage-tabs li a:hover {
  color: #ffffcc !important;
  border-bottom-color: #ffffcc;
}
