/* ============================================================
   LEORA Colors — Mobile Enhancement Layer
   Additive only · loaded AFTER styles.css.
   Goal: snappier, thumb-friendly touch behaviour on phones
   without changing the desktop look.
   ============================================================ */

/* --- 1. Snappy taps everywhere ------------------------------
   Kills the grey tap-flash and any lingering tap delay so every
   button / link / card fires the instant a thumb lands. */
a, button, input, select, textarea, label,
[role="button"], [onclick],
.btn, .cart-btn, .close-x, .link,
.filters *, .subfilters *, .how-step,
.wa-launch, .wa-send, .wa-x, .star-row button {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Interactive controls: always show a pointer and don't let a
   long-press text-selection swallow the tap. */
.btn, .cart-btn, .close-x, .link, .wa-launch, .wa-send, .wa-x,
.star-row button,
.filters a, .filters button,
.subfilters a, .subfilters button {
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}

/* Gentle press feedback on touch (respecting reduced-motion). */
@media (prefers-reduced-motion: no-preference) {
  .btn:active, .cart-btn:active, .wa-launch:active,
  .star-row button:active, .close-x:active, .wa-x:active {
    transform: scale(.97);
  }
}

/* Keyboard / accessibility floor: keep focus visible on touch + tab. */
.btn:focus-visible, .cart-btn:focus-visible, .link:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
.filters a:focus-visible, .subfilters a:focus-visible {
  outline: 2px solid #774a60;
  outline-offset: 2px;
}

/* --- 2. Phone layout & tap targets (≤768px) ----------------- */
@media (max-width: 768px) {

  /* iOS auto-zooms when a focused field is < 16px. Pin to 16px so
     checkout never jumps mid-typing. (Tweak if it changes your look.) */
  input, select, textarea {
    font-size: 16px !important;
  }

  /* Minimum 44px tap targets (Apple/Google guideline).
     Only sets a floor — never shrinks anything. */
  .btn, .cart-btn,
  #toCheckout, #placeOrder, #backToCart, #fbSend, #waSend,
  .filters a, .filters button,
  .subfilters a, .subfilters button {
    min-height: 44px;
  }

  .close-x, .wa-x {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .star-row button {
    min-width: 44px;
    min-height: 44px;
    font-size: 2rem;
  }
}

/* --- 3. Cart drawer & feedback modal on phones (≤600px) ----- */
@media (max-width: 600px) {
  .drawer {
    width: 100% !important;
    max-width: 100% !important;
    /* Use the *real* viewport height (set by JS), 100vh fallback. */
    height: 100vh;
    height: calc(var(--app-vh, 1vh) * 100);
  }

  .fb-modal {
    width: calc(100% - 2rem);
    max-height: 90vh;
    max-height: calc(var(--app-vh, 1vh) * 90);
    overflow-y: auto;
  }
}

/* --- 4. Notch / home-indicator safe areas ------------------- */
.site-header        { padding-top: env(safe-area-inset-top); }
.drawer .foot       { padding-bottom: calc(.9rem + env(safe-area-inset-bottom)); }
.wa-widget          { bottom: calc(1rem + env(safe-area-inset-bottom)) !important; }

/* --- 5. Category filters: scroll horizontally instead of
   wrapping/clipping. Gated on touch devices so desktop is
   untouched. (Remove this block if you prefer wrapping.) ----- */
html.is-touch .filters,
html.is-touch .subfilters {
  display: flex;
  flex-wrap: nowrap;
  gap: .5rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}
html.is-touch .filters::-webkit-scrollbar,
html.is-touch .subfilters::-webkit-scrollbar { display: none; }
html.is-touch .filters > *,
html.is-touch .subfilters > * {
  flex: 0 0 auto;
  white-space: nowrap;
  scroll-snap-align: start;
}