/*
Theme Name: Elessi Theme Child
Theme URI: https://elessi.nasatheme.com/demo/
Description: This is a child theme for Elessi Theme
Author: NasaTheme team
Author URI: https://nasatheme.com
Template: elessi-theme
Version: 1.0
*/


/*************** ADD YOUR CUSTOM CSS IN THIS AREA ***************/

/* ---- Ingredient cards: horizontal smooth-scroll strip ----
   Change --bx-cols to set how many columns are visible per breakpoint.
   Fractions (e.g. 3.4) leave the next column peeking in as a scroll hint. */
.bx-ingredient-scroll {
  --bx-cols: 4.3;   /* desktop */
  --bx-gap: 12px;
}
@media (max-width: 1024px) { .bx-ingredient-scroll { --bx-cols: 2.4; } }  /* tablet */
@media (max-width: 767px)  { .bx-ingredient-scroll { --bx-cols: 1.25; --bx-gap: 8px; } }  /* mobile */

.bx-ingredient-scroll > .e-con-inner {
  flex-wrap: nowrap !important;
  gap: var(--bx-gap);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.bx-ingredient-scroll > .e-con-inner::-webkit-scrollbar { display: none; }
.bx-ingredient-scroll > .e-con-inner > .e-con {
  flex: 0 0 auto;
  scroll-snap-align: start;
  min-width: 0;
  --width: calc((100% - (var(--bx-cols) - 1) * var(--bx-gap)) / var(--bx-cols));
  width: var(--width) !important;
}

/* Arrows + drag cursor for the ingredient strip (added by bx-ingredient-scroll.js) */
.bx-ingredient-scroll { position: relative; }
.bx-ingredient-scroll > .e-con-inner { cursor: grab; }
.bx-ingredient-scroll > .e-con-inner.is-dragging { cursor: grabbing; user-select: none; }
.bx-ingredient-scroll .bx-scroll-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: #111;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.16);
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  line-height: 0;
  transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s ease;
}
.bx-ingredient-scroll .bx-scroll-arrow:hover { background: #e91e63; color: #fff; }
.bx-ingredient-scroll .bx-scroll-arrow.bx-prev svg { transform: rotate(180deg); }
.bx-ingredient-scroll.bx-can-scroll .bx-scroll-arrow { display: flex; }
.bx-ingredient-scroll .bx-scroll-arrow.is-disabled { opacity: 0.3; pointer-events: none; }
@media (max-width: 767px) {
  .bx-ingredient-scroll .bx-scroll-arrow { display: none !important; } /* swipe on phones */
}

/* ---- Cart / mini-cart City field ----
   The theme's floating-label system adds .nasa-actived to a filled .form-row and
   turns its <label> into an absolute overlay, which collided with the selected
   city value (e.g. "Kathmandu" sat under the "City:" label). Keep this label
   static and above the control at all times, matching the mini-cart's look. */
.bx-city-field > label,
.bx-city-field.nasa-actived > label {
  position: static !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  opacity: 1 !important;
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  line-height: 1.3;
}
.bx-city-field.nasa-actived .bx-city-select,
.bx-city-field.nasa-actived .bx-city-other {
  padding-top: 0 !important;
}