/* custom-inline.css - extracted styles from index.php's inline <style> */

/* product cart wrap */
.product-cart-wrap {
    width: 126px;
    margin: 0 auto;
}
.product-cart-wrap .cart-plus-minus {
    position: relative;
}
.product-cart-wrap .cart-plus-minus input {
    width: 100%;
    background: rgb(234 227 213 / 82%);
    border: none;
    padding: 11px 50px;
    font-size: 15px;
    font-weight: 700;
    color: rgb(42 21 16 / 79%);
    text-align: center;
    border-radius: 50px;
    line-height: 1;
}
.product-cart-wrap .cart-plus-minus .button {
    position: absolute;
    left: 0;
    top: 0;
    width: 45px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    z-index: 1;
    font-weight: 700;
    font-size: 18px;
    color: var(--tg-secondary-color);
    user-select: none;
    transition: .3s linear;
}
.product-cart-wrap .cart-plus-minus .inc.button {
    left: auto;
    right: 0;
}
.product-cart-wrap .cart-plus-minus .button:hover {
    color: var(--tg-primary-color);
}

/* small badge style for header cart count */
#header-cart-count {
    display:inline-block;
    min-width:20px;
    font-size:12px;
    line-height:18px;
    padding:2px 6px;
    border-radius:12px;
    background:#e74c3c;
    color:#fff;
    text-align:center;
    vertical-align:middle;
    margin-left:6px;
}

/* refined qty control */
.qty-control { display:inline-flex; align-items:center; gap:6px; }
.qty-input { width:44px; text-align:center; border-radius:4px; padding:6px 4px; border:1px solid #ddd; font-size:14px; }
.qty-btn { display:inline-block; min-width:34px; height:34px; line-height:34px; text-align:center; border-radius:6px; border:1px solid #ddd; background:#fff; cursor:pointer; font-size:12px; }
.qty-btn:active { transform:translateY(1px); }

/* Floating cart button bottom-right */
#floating-cart-btn {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 9999;
  background: #e74c3c;
  color: #fff;
  border-radius: 50px;
  padding: 12px 16px;
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
  display: flex;
  gap:10px;
  align-items:center;
  cursor: pointer;
}
#floating-cart-btn i { font-size:18px; }
#floating-cart-count { background: rgba(255,255,255,.15); padding:4px 8px; border-radius:12px; font-weight:600; }

/* Floating search bar (hidden initially) */
#floating-search {
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9998;
  width: 90%;
  max-width: 720px;
  display: none;
  background: rgba(255,255,255,0.95);
  border-radius: 8px;
  padding: 8px 12px;
  box-shadow: 0 8px 20px rgba(0,0,0,.12);
}
#floating-search input[type="search"] {
  width: 100%;
  border: none;
  outline: none;
  font-size: 15px;
}

/* highlight search matches */
.search-match { background: rgba(255,235,59,0.25); padding:2px 3px; border-radius:3px; }

/* small flash for qty feedback */
.qty-flash.ok { color: #0bbd7e; font-weight:700; }
.qty-flash.err { color: #e74c3c; font-weight:700; }

/* category buttons */
#cat-menu .cat-btn {
  display:inline-block;
  margin:6px 8px;
  padding:8px 14px;
  font-size:14px;
  border:1px solid #ddd;
  border-radius:25px;
  background:#fff;
  cursor:pointer;
  transition:0.15s ease;
}
#cat-menu .cat-btn:hover { background:#f7f7f7; }
#cat-menu .cat-btn.active { background:#e74c3c; color:#fff; border-color:#e74c3c; }
/* ===== Ensure drawer slides fully (mobile-only) ===== */
@media (max-width: 991.98px) {

  /* wrapper should cover full viewport so translateX(100%) hides it fully */
  .mobile-menu {
    width: 100% !important;
    max-width: 100% !important;
    right: 0 !important;
    left: auto !important;
    transform: translateX(100%) !important; /* hide fully */
    will-change: transform;
  }

  /* inner drawer panel: fixed readable width aligned to right */
  .mobile-menu .menu-box {
    position: absolute !important;
    right: 0 !important;
    left: auto !important;
    width: 320px !important;      /* drawer width — change if you want bigger */
    max-width: 85% !important;
    height: 100% !important;
    box-shadow: -12px 0 28px rgba(0,0,0,0.22) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* when visible, bring wrapper to 0 so inner 320px panel is fully visible */
  .mobile-menu-visible .mobile-menu,
  body.mobile-menu-visible .mobile-menu {
    transform: translateX(0) !important;
  }

  /* prevent page layout shift: lock body scroll and preserve scrollbar gap */
  body.mobile-menu-visible {
    overflow: hidden !important;
    position: relative !important;
  }

  /* optional: avoid content moving when scrollbar appears/disappears
     add right padding equal to scrollbar width if needed (5-15px) */
  body.mobile-menu-visible {
    padding-right: 0 !important;
  }

  /* ensure backdrop covers whole viewport */
  .menu-backdrop {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }
}
/* hide the hamburger toggler while drawer is open (mobile only) */
@media (max-width: 991.98px) {
  body.mobile-menu-visible .mobile-nav-toggler,
  .mobile-menu-visible .mobile-nav-toggler {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}