/* ============================================================
   mobile-fixes.css — Raj Collection Sequel — MOBILE polish
   SCOPE: max-width 1023px ONLY. Does NOT affect desktop (>=1024).
   Addresses Suraj's mobile observations (shop + PDP).
   ============================================================ */
@media (max-width: 1023px) {

  /* ---------- SHOP: header/top ---------- */
  /* Remove "59 sarees" count */
  .rcs-shop-header .rcs-meta { display: none !important; }

  /* Tighten empty vertical space below header, above chips */
  .rcs-shop-header { padding-top: 8px !important; padding-bottom: 4px !important; margin-bottom: 4px !important; }
  .rcs-shop-toolbar { margin-top: 4px !important; }

  /* ---------- SHOP: category chips ---------- */
  /* Proper padding both sides so chips don't overflow right margin */
  .rcs-shop-toolbar {
    padding-left: 16px !important;
    padding-right: 16px !important;
    scroll-padding-left: 16px;
    scroll-padding-right: 16px;
    gap: 8px !important;
  }
  .rcs-shop-toolbar::after { content: ""; flex: 0 0 8px; }
  .rcs-chip.is-active { scroll-snap-align: start; }

  /* ---------- SHOP: filter/sort separator lines ---------- */
  /* Soften/thin the harsh lines around the filter bar */
  .rcs-shop-filterbar {
    border-top: 1px solid rgba(0,0,0,0.06) !important;
    border-bottom: 1px solid rgba(0,0,0,0.06) !important;
  }

  /* ---------- SHOP: product grid uniformity ---------- */
  /* Uniform title height (1 vs 2 line) */
  .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;
  }
  /* Consistent price row height */
  .rcs-product-card__price, .rcs-product-card__info .price {
    min-height: 1.5em;
  }
  /* Button padding both sides so they don't hit the edge */
  .rcs-product-card + .button,
  ul.products li.product .button,
  .add_to_cart_button,
  .rcs-product-card__cta {
    margin-left: 8px !important;
    margin-right: 8px !important;
    width: calc(100% - 16px) !important;
    box-sizing: border-box !important;
  }

  /* ---------- PDP: breadcrumb one line + ellipsis ---------- */
  .rcs-pdp__crumbs, .rcs-crumbs {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: flex !important;
    flex-wrap: nowrap !important;
  }
  .rcs-crumbs__current {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }

  /* ---------- PDP: image height (Myntra/Ajio-style proportions) ---------- */
  /* Cap gallery height so it doesn't dominate / crop bottom details */
  .rcs-pdp__gallery__slide img {
    max-height: 56vh !important;
    object-fit: cover;
  }

  /* Reduce empty space between image bottom and product name */
  .rcs-pdp__gallery { margin-bottom: 12px !important; }
  .rcs-pdp__title { margin-top: 8px !important; }

  /* ---------- PDP: rating font size (was too small) ---------- */
  .rcs-pdp__rating-row { font-size: 0.95rem !important; }
  .rcs-pdp__rating-row * { font-size: inherit !important; }

  /* ---------- SHOP: filter/sort drawers translucent ---------- */
  /* So the drawer doesn't fully block the interface behind it */
  .rcs-shop-drawer { background-color: rgba(20, 12, 14, 0.32) !important; backdrop-filter: blur(2px) !important; -webkit-backdrop-filter: blur(2px) !important; }
  .rcs-shop-drawer__sheet {
    background-color: rgba(250, 247, 240, 0.94) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
  }
  /* Filter/Sort buttons: applied-state badge */
  .rcs-shop-filterbar button.is-applied { position: relative; color: var(--rcs-primary, #8a1c3b); font-weight: 600; }
  .rcs-shop-filterbar button.is-applied::after {
    content: ""; position: absolute; top: 4px; right: 4px;
    width: 7px; height: 7px; border-radius: 50%; background: var(--rcs-primary, #8a1c3b);
  }
}

/* ---------- SHOP: logo centered on FULL screen width (mobile) ---------- */
/* The header inner is a 3-col grid (menu | brand | actions); the brand is
   centered between icons, not the screen. Absolutely-center the brand to the
   viewport on mobile. */
@media (max-width: 1023px) {
  /* Center logo to the FULL VIEWPORT (not between the menu+icons). The header
     inner has padding so left:50% wasn't screen-center. Anchor to 50vw and
     cancel the inner's left padding via a positioning context with no offset. */
  .rcs-header__inner { position: static; }
  #rcs-header, .rcs-header { position: relative; }
  .rcs-header__brand-r9, .rcs-header__brand-wrap {
    position: absolute !important;
    left: 50vw !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    text-align: center !important;
    pointer-events: auto;
    z-index: 2;
  }
}