/* ============================================================
   mobile-shop2.css — Raj Collection — MOBILE shop refinements
   SCOPE: max-width 1023px ONLY. Desktop untouched.
   Sticky header/chips/filter-sort, card CTA centering, uniform name
   height, applied-filter visibility, add-to-cart feedback.
   ============================================================ */
@media (max-width: 1023px) {

  /* ---------- STICKY: keep chips + filter/sort pinned on scroll ---------- */
  /* Pin the category chips + the filter/sort bar to the top below the header. */
  .rcs-shop-toolbar {
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--rcs-bg, #faf6f0);
    padding-top: 10px !important;
    padding-bottom: 6px !important;
  }
  .rcs-shop-filterbar.__disabled_sticky_top {
    position: sticky;
    top: 52px;        /* sits just under the chips row */
    z-index: 39;
    background: var(--rcs-bg, #faf6f0);
    transition: padding .2s ease, box-shadow .2s ease;
  }
  /* Condensed state (added by JS on scroll): smaller filter/sort buttons */
  .rcs-shop-filterbar.is-condensed { padding-top: 4px !important; padding-bottom: 4px !important; box-shadow: 0 4px 14px -8px rgba(0,0,0,.18); }
  .rcs-shop-filterbar.is-condensed button { padding-top: 8px !important; padding-bottom: 8px !important; font-size: 0.82rem !important; }

  /* ---------- APPLIED FILTER: clearly visible ---------- */
  .rcs-shop-filterbar button.is-applied {
    color: #fff !important;
    background: var(--rcs-primary, #8a1c3b) !important;
    border-color: var(--rcs-primary, #8a1c3b) !important;
    font-weight: 600 !important;
  }
  .rcs-shop-filterbar button.is-applied::after {
    content: "";
    position: absolute;
    top: 6px; right: 10px;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 2px var(--rcs-primary, #8a1c3b);
  }
  .rcs-shop-filterbar button { position: relative; }

  /* ---------- PRODUCT CARD: CTA centered + match card width ---------- */
  .rcs-product-card__cta,
  ul.products li.product .rcs-card__cta,
  ul.products li.product a.button {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100% !important;
    margin: 10px 0 0 !important;   /* full card width, no overhang */
    box-sizing: border-box !important;
    text-align: center;
  }
  /* Uniform product NAME height so price/CTA rows align across columns */
  .rcs-product-card__title,
  .woocommerce-loop-product__title {
    min-height: 2.6em;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  /* Make each card a column so the CTA pins to the bottom -> rows align */
  ul.products li.product {
    display: flex !important;
    flex-direction: column;
  }
  ul.products li.product .rcs-product-card__info { flex: 1 1 auto; }

  /* ---------- ADD-TO-CART feedback states ---------- */
  .rcs-card__cta.is-adding { opacity: .75; pointer-events: none; }
  .rcs-card__cta.is-added { background: #1e7d52 !important; border-color: #1e7d52 !important; color: #fff !important; }

  /* Cart bag badge bump animation */
  @keyframes rcs-bag-bump { 0%{transform:scale(1)} 35%{transform:scale(1.35)} 100%{transform:scale(1)} }
  .rcs-bottom-nav a.is-bumping .rcs-ico,
  .rcs-header__cart.is-bumping { animation: rcs-bag-bump .45s ease; }

  /* Toast */
  .rcs-cart-toast {
    position: fixed;
    left: 50%; bottom: calc(var(--rcs-bottom-nav-h, 64px) + 16px);
    transform: translateX(-50%) translateY(20px);
    background: #1b1b1b; color: #fff;
    padding: 12px 18px; border-radius: 999px;
    font-size: .9rem; font-weight: 600;
    box-shadow: 0 10px 30px -8px rgba(0,0,0,.4);
    opacity: 0; pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
    z-index: 9999;
    display: flex; align-items: center; gap: 8px;
  }
  .rcs-cart-toast.is-show { opacity: 1; transform: translateX(-50%) translateY(0); }
}
