/* ============================================================
   store-tight.css — Raj Collection — MOBILE store density + polish
   SCOPE: max-width 1023px. Make it Myntra-TIGHT: 2 full rows + short
   header + short sticky footer. Loaded LAST to win the cascade.
   ============================================================ */
@media (max-width: 1023px) {

  /* ===== 1. ANNOUNCEMENT BAR — short, subtle, vertically centered ===== */
  .rcs-utility {
    height: 34px !important;
    min-height: 34px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
    font-size: 10.5px !important;
    letter-spacing: 0.08em;
    overflow: hidden !important;
  }
  .rcs-utility__inner, .rcs-utility__track {
    height: 34px !important;
    display: flex !important;
    align-items: center !important;
  }
  .rcs-utility__item {
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1 !important;
    font-size: 10.5px !important;
  }
  .rcs-utility__item .rcs-ico { font-size: 11px !important; }

  /* ===== 2. HEADER — short + tight ===== */
  .rcs-header__inner {
    min-height: 54px !important;
    height: 54px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .rcs-header__brand-r9 .rcs-r9-logo-wm,
  .rcs-header__brand-r9 { font-size: 1.15rem !important; }
  .rcs-header__menu, .rcs-header__search, .rcs-header__cart { width: 38px !important; height: 38px !important; }

  /* ===== 3. CHIPS — smaller, uniform margins both sides ===== */
  .rcs-shop-toolbar {
    padding: 8px 16px 8px !important;     /* uniform L/R = 16 (match card gutter) */
    gap: 8px !important;
    scroll-padding-left: 16px;
  }
  .rcs-shop-toolbar::after { content: ""; flex: 0 0 16px; }  /* right margin when scrolled */
  .rcs-chip {
    height: 38px !important;
    padding: 0 16px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
  }

  /* ===== 4. PRODUCT CARDS — tighter, smaller, tight rhythm ===== */
  ul.products { gap: 12px 12px !important; padding: 10px 16px 80px !important; }

  /* Rating chip: GOLD star, perfectly inside the image bottom-left corner */
  .rcs-product-card__rating {
    position: absolute !important;
    left: 10px !important; bottom: 10px !important; top: auto !important;
    height: 24px !important; padding: 0 8px !important;
    display: inline-flex !important; align-items: center !important; gap: 4px !important;
    font-size: 11.5px !important; font-weight: 700 !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,0.95) !important;
    z-index: 2 !important;
  }
  /* Force the star GOLD (was grey). Targets the icon + a Unicode fallback. */
  .rcs-product-card__rating .ph-star,
  .rcs-product-card__rating .ph-fill,
  .rcs-product-card__rating i { color: #e3a008 !important; font-style: normal; }
  .rcs-product-card__rating .ph-star::before,
  .rcs-product-card__rating .ph-fill::before,
  .rcs-product-card__rating i::before { content: "\2605" !important; color: #e3a008 !important; font-family: inherit !important; }

  /* Image: keep 3/4 but ensure media is positioning context */
  .rcs-product-card__media { position: relative !important; border-radius: 10px !important; aspect-ratio: 3/4 !important; }

  /* Tight rhythm: image -> name -> price -> CTA, all snug */
  .rcs-product-card__info { padding-top: 8px !important; }
  .rcs-product-card .rcs-product-card__title,
  ul.products li.product .rcs-product-card__title {
    font-size: 14px !important; line-height: 1.2 !important; font-weight: 700 !important;
    margin-top: 0 !important; margin-bottom: 4px !important;
    min-height: 34px !important;   /* 2 lines reserved, tight */
  }
  .rcs-product-card__price {
    margin-top: 0 !important;
    font-size: 15px !important; font-weight: 700 !important;
  }
  .rcs-product-card__price del { font-size: 12.5px !important; }
  .rcs-product-card__price ins { font-weight: 800 !important; }

  /* CHOOSE OPTIONS: tighter, matches image/card width */
  .rcs-card__cta {
    margin-top: 8px !important;
    height: 38px !important; min-height: 38px !important;
    padding: 0 8px !important;
    border-radius: 9px !important;
    font-size: 10.5px !important; font-weight: 700 !important; letter-spacing: 0.03em !important;
    width: 100% !important;
    white-space: nowrap !important; overflow: hidden !important;
    gap: 5px !important;
  }
  .rcs-card__cta i { font-size: 13px !important; flex: 0 0 auto; }

  /* ===== 5. FOOTER (FILTER/SORT) — short + tight ===== */
  .woocommerce-shop .rcs-shop-filterbar,
  .tax-product_cat .rcs-shop-filterbar,
  .post-type-archive-product .rcs-shop-filterbar {
    height: 50px !important;
  }
  .rcs-shop-filterbar button {
    height: 50px !important;
    font-size: 13px !important;
  }

  /* ===== WISHLIST HEART: active = filled MAROON/RED (was going white) ===== */
  .rcs-product-card .rcs-card__wishlist,
  ul.products li.product .rcs-card__wishlist { background: rgba(255,255,255,0.95) !important; }
  .rcs-product-card .rcs-card__wishlist i,
  .rcs-product-card .rcs-card__wishlist .ph { color: #7a1430 !important; }
  /* Active (filled) heart -> solid maroon heart on white circle */
  .rcs-product-card .rcs-card__wishlist.is-active,
  .rcs-product-card .rcs-card__wishlist[aria-pressed="true"],
  ul.products li.product .rcs-card__wishlist.is-active {
    background: #fff !important;
  }
  .rcs-product-card .rcs-card__wishlist.is-active i,
  .rcs-product-card .rcs-card__wishlist.is-active .ph,
  .rcs-product-card .rcs-card__wishlist .ph-heart-fill {
    color: #c0152f !important;   /* filled red heart */
  }
  /* If the active rule uses a ::before SVG, force it red too */
  .rcs-product-card .rcs-card__wishlist.is-active::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23c0152f' stroke='%23c0152f' stroke-width='1.6' stroke-linejoin='round'><path d='M12 21s-7-4.5-9.5-9A5.5 5.5 0 0 1 12 6a5.5 5.5 0 0 1 9.5 6c-2.5 4.5-9.5 9-9.5 9z'/></svg>") !important;
  }

}
