/* ============================================================
   product-card.css — the store's product card, for every other surface.

   Generated from store-mobile.css, never edited by hand. The store's rules are
   scoped to .store-page and the store depends on them resolving exactly as they
   do, so this is a re-scoped copy rather than a widening of that scope. Any
   grid that renders store/_product_card.html adds .ps-card-grid and gets the
   same card; the store is unaffected either way.

   Regenerate: copy store-mobile.css, swap `.store-page .feature-item-card` for
   `.ps-card-grid .feature-item-card`, then neutralise any remaining
   `.store-page` selectors.
   ============================================================ */


/* ====== 1. Trim chrome on the store page (mobile only) ====== */
@media (max-width: 991px) {

  /* Hide signup marquee banner on the store page */
  #signupMarqueeBanner {
    display: none !important;
  }

  /* Hide breadcrumb on the store page */
  .ps-not-the-store-page nav[aria-label="breadcrumb"],
  .ps-not-the-store-page .breadcrumb {
    display: none !important;
  }

  /* Pull product grid up to fill the space the breadcrumb vacated */
  .ps-not-the-store-page .section-content,
  section.section-content.ps-not-the-store-page {
    padding-top: 8px !important;
  }
}

/* ====== 2. Mobile header polish (≤991px) ====== */
@media (max-width: 991px) {

  /* Replace translucent blur with solid white for crisper text */
  .ps-mobile-header {
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06) !important;
  }

  /* Shrink logo from 36px → 30px */
  .ps-logo-container img,
  .ps-logo-container img.ps-logo {
    height: 30px !important;
  }
}

/* ====== 3. Product card mobile redesign (≤767px) ====== */
@media (max-width: 767px) {

  /* Softer card surface */
  .ps-card-grid .feature-item-card .card {
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
  }
  .ps-card-grid .feature-item-card .card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  }

  /* Image: 260 → 220px on mobile (overrides inline height: 260px) */
  .ps-card-grid .feature-item-card .card .img-wrap {
    height: 220px;
  }
  .ps-card-grid .feature-item-card .card .img-wrap img {
    height: 220px !important;
  }

  /* Title: 16/500 → 13/500, sharper neutral */
  .ps-card-grid .feature-item-card .card .info-wrap .title {
    font-size: 13px;
    font-weight: 500;
    color: #222;
    line-height: 1.35;
    margin-bottom: 6px;
  }

  /* Info padding tighter */
  .ps-card-grid .feature-item-card .card .info-wrap {
    padding: 10px 12px 12px;
  }

  /* Price block compact + clear */
  .ps-card-grid .feature-item-card .card .info-wrap .price {
    font-size: 15px;
    font-weight: 700;
    color: #1A1A1A;
  }
  .ps-card-grid .feature-item-card .card .info-wrap .price-old {
    font-size: 12px;
    margin-left: 6px;
  }

  /* Smaller wishlist heart (38 → 32) */
  .ps-card-grid .feature-item-card .card .favourite-tag {
    width: 32px;
    height: 32px;
    line-height: 32px;
    top: 8px;
    right: 8px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  }
  .ps-card-grid .feature-item-card .card .favourite-tag i {
    font-size: 1.05rem;
  }
}

/* ====== 4. Phase 2: Sticky mobile toolbar (pills + chips) ====== */
@media (max-width: 991px) {

  /* Hide floating filter FAB — replaced by toolbar */
  .filter-fab-container {
    display: none !important;
  }

  /* Hide the original (desktop) chip strip on mobile — chips are mirrored into the toolbar */
  .ps-not-the-store-page #selected-categories {
    display: none !important;
  }

  /* Toolbar container: sticky under the 52px mobile header */
  .store-toolbar {
    position: sticky;
    top: 52px;
    z-index: 900;
    background: #FFFFFF;
    border-bottom: 1px solid #EEEEEE;
    margin: 0 -4px 8px;            /* bleed to viewport edges; counter the col padding */
    padding: 0;
  }

  /* Row 1: title + product count */
  .store-toolbar-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px 6px;
    min-height: 36px;
  }
  .store-toolbar-title {
    font-size: 15px;
    font-weight: 600;
    color: #1A1A1A;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: capitalize;
  }
  .store-toolbar-count {
    font-size: 12px;
    font-weight: 500;
    color: #666;
    flex-shrink: 0;
  }
  .store-toolbar-count:empty {
    display: none;
  }

  /* Row 2: horizontally scrollable pills + chips */
  .store-toolbar-pills {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px 10px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-padding-left: 12px;
    -webkit-overflow-scrolling: touch;
  }
  .store-toolbar-pills::-webkit-scrollbar {
    display: none;
  }

  /* Pill button */
  .store-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    height: 34px;
    padding: 0 12px;
    border: 1px solid #D8D8D8;
    border-radius: 17px;
    background: #FFFFFF;
    color: #1A1A1A;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
    white-space: nowrap;
  }
  .store-pill:active {
    transform: scale(0.97);
    background: #F5F5F5;
  }
  .store-pill i {
    font-size: 12px;
    color: #666;
  }
  .store-pill .store-pill-chev {
    font-size: 10px;
    margin-left: 2px;
  }

  /* Filter pill — primary visual weight (terracotta accent) */
  .store-pill.store-pill-primary {
    border-color: var(--brand-action, #996633);
    color: var(--brand-action, #996633);
    background: rgba(var(--brand-primary-rgb, 153, 102, 51), 0.04);
  }
  .store-pill.store-pill-primary i {
    color: var(--brand-action, #996633);
  }

  /* Filter pill badge — sage when filters are applied */
  .store-pill-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    margin-left: 2px;
    border-radius: 9px;
    background: var(--brand-secondary, #AFBD77);
    color: #FFFFFF;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
  }

  /* Inline chip strip area inside the same scroll row */
  .store-toolbar-chips {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
  }
  .store-toolbar-chips:not(:empty)::before {
    content: "";
    display: inline-block;
    width: 1px;
    height: 22px;
    background: #E5E5E5;
    margin: 0 4px;
  }

  /* Restyle the JS-injected chips inside the toolbar (overrides inline styles set by store.js) */
  .store-toolbar-chips ul,
  .store-toolbar-chips .selected-item {
    list-style: none;
    margin: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .store-toolbar-chips .selected-item > div {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    height: 30px !important;
    padding: 0 6px 0 10px !important;
    margin: 0 !important;
    background: #F4EFE7 !important;
    border: 1px solid var(--brand-primary-light, #d9c9b2) !important;
    border-radius: 15px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: var(--brand-action-hover, #6e4a1f) !important;
    white-space: nowrap !important;
  }
  .store-toolbar-chips .selected-item > div > span {
    line-height: 1 !important;
  }
  .store-toolbar-chips .selected-item > div > button {
    border: none !important;
    background: transparent !important;
    color: var(--brand-action, #996633) !important;
    cursor: pointer !important;
    font-size: 16px !important;
    line-height: 1 !important;
    padding: 0 4px !important;
    margin: 0 !important;
  }
  .store-toolbar-chips .selected-item > div > button:hover {
    color: var(--brand-action-hover, #6e4a1f) !important;
  }
}

/* ====== 5. Phase 2.5: Chip-style options inside the bottom sheet ====== */
/* Scoped under .bottom-sheet to win over generic .filter-option styles in the
   inline <style> block of store.html (which has lower specificity). The
   selected state uses a JS-toggled .is-checked class — no :has() dependency,
   so it works on every browser that loads this stylesheet. */
@media (max-width: 991px) {

  /* Bigger drop-down area so chips have room to wrap */
  .bottom-sheet #fg-categories .filter-group-content,
  .bottom-sheet #fg-product-type .filter-group-content,
  .bottom-sheet #fg-brand .filter-group-content {
    max-height: 360px !important;
    padding-bottom: 4px;
  }

  /* Container: wrap chips horizontally instead of one per line */
  .bottom-sheet #fg-categories .filter-options,
  .bottom-sheet #fg-product-type .filter-options,
  .bottom-sheet #fg-brand .filter-options {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 12px 16px 16px !important;
  }

  /* Each option strips its row layout and just hosts a chip */
  .bottom-sheet #fg-categories .filter-option,
  .bottom-sheet #fg-product-type .filter-option,
  .bottom-sheet #fg-brand .filter-option {
    display: inline-flex !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    cursor: pointer !important;
    transition: none !important;
  }

  /* Native checkbox hidden but still controls state */
  .bottom-sheet #fg-categories .filter-option input[type="checkbox"],
  .bottom-sheet #fg-product-type .filter-option input[type="checkbox"],
  .bottom-sheet #fg-brand .filter-option input[type="checkbox"] {
    position: absolute !important;
    opacity: 0 !important;
    width: 1px !important;
    height: 1px !important;
    margin: 0 !important;
    pointer-events: none !important;
  }

  /* The visible chip — built from the existing <span> */
  .bottom-sheet #fg-categories .filter-option > span,
  .bottom-sheet #fg-product-type .filter-option > span,
  .bottom-sheet #fg-brand .filter-option > span {
    display: inline-flex !important;
    align-items: center !important;
    height: 36px !important;
    padding: 0 14px !important;
    border: 1px solid #D8D8D8 !important;
    border-radius: 18px !important;
    background: #FFFFFF !important;
    color: #333 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease !important;
    user-select: none !important;
  }

  .bottom-sheet #fg-categories .filter-option:active > span,
  .bottom-sheet #fg-product-type .filter-option:active > span,
  .bottom-sheet #fg-brand .filter-option:active > span {
    transform: scale(0.97) !important;
    background: #F5F5F5 !important;
  }

  /* Selected state — sage accent, driven by JS-toggled .is-checked class */
  .bottom-sheet #fg-categories .filter-option.is-checked > span,
  .bottom-sheet #fg-product-type .filter-option.is-checked > span,
  .bottom-sheet #fg-brand .filter-option.is-checked > span {
    background: rgba(var(--brand-secondary-rgb, 175, 189, 119), 0.18) !important;
    border-color: var(--brand-secondary, #AFBD77) !important;
    color: var(--brand-ink-deep, #4f5d29) !important;
    font-weight: 600 !important;
  }

  /* Add a subtle ✓ on selected chips */
  .bottom-sheet #fg-categories .filter-option.is-checked > span::before,
  .bottom-sheet #fg-product-type .filter-option.is-checked > span::before,
  .bottom-sheet #fg-brand .filter-option.is-checked > span::before {
    content: "\2713";
    margin-right: 6px;
    font-weight: 700;
    color: var(--brand-label, #6f8a2e);
  }

  /* ===== Price chip grid (replaces Min/Max selects on mobile) ===== */
  /* Hide the original Min/Max select layout; chips replace it visually */
  #fg-price .price-range-inputs {
    display: none !important;
  }

  #fg-price .price-chip-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 14px 16px 18px;
  }

  .price-chip {
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 0 14px;
    border: 1px solid #D8D8D8;
    border-radius: 18px;
    background: #FFFFFF;
    color: #333;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
    white-space: nowrap;
  }
  .price-chip:active {
    transform: scale(0.97);
    background: #F5F5F5;
  }
  .price-chip.active {
    background: rgba(var(--brand-secondary-rgb, 175, 189, 119), 0.14);
    border-color: var(--brand-secondary, #AFBD77);
    color: var(--brand-ink-deep, #4f5d29);
    font-weight: 600;
  }
  .price-chip.active::before {
    content: "\2713";
    margin-right: 6px;
    font-weight: 700;
    color: var(--brand-label, #6f8a2e);
  }
}

/* ====== 6. Phase 2.6: Density pass — Myntra-tight cards + header ====== */

/* Header — crop the "The Nature Products" tagline baked into the logo PNG.
   The image is 2044x634 (3.22:1). Showing image at 30px height = 96.6px wide;
   container is 22px tall with overflow hidden, so the bottom ~27% of the image
   (the tagline) is clipped off. The wordmark fits cleanly in the top 22px. */
@media (max-width: 991px) {
  .ps-logo-container {
    overflow: hidden !important;
    max-height: 22px !important;
    align-items: flex-start !important;
  }
  .ps-logo-container a {
    line-height: 0 !important;
    display: block !important;
  }
  .ps-logo-container img,
  .ps-logo-container img.ps-logo {
    height: 30px !important;
    width: auto !important;
    display: block !important;
    object-fit: unset !important;
  }
  /* Tighter top bar so the visual feels Myntra-thin */
  .ps-top-header {
    padding: 8px 14px !important;
    min-height: 48px !important;
  }
  .ps-icon-btn {
    width: 36px !important;
    height: 36px !important;
  }
  .ps-icon-btn i {
    font-size: 16px !important;
  }
}

/* Sticky toolbar — drop the title/count row entirely on mobile.
   The Shop tab in the bottom nav already signals "you're in the store",
   and any active category is shown as a removable chip in the pill row. */
@media (max-width: 991px) {
  .store-toolbar-title-row {
    display: none !important;
  }
  .store-toolbar-pills {
    padding: 8px 12px !important;
  }
  .store-pill {
    height: 32px !important;
    font-size: 12.5px !important;
    padding: 0 11px !important;
  }
}

/* Product card — Myntra-tight density (phone widths only) */
@media (max-width: 767px) {

  /* Tighter inter-card gap */
  .ps-card-grid .feature-item-card {
    padding-left: 3px !important;
    padding-right: 3px !important;
    margin-bottom: 6px !important;
  }

  /* Less puffy card */
  .ps-card-grid .feature-item-card .card {
    border-radius: 8px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
  }

  /* Smaller image — 220 → 180 */
  .ps-card-grid .feature-item-card .card .img-wrap {
    height: 180px !important;
  }
  .ps-card-grid .feature-item-card .card .img-wrap img {
    height: 180px !important;
  }

  /* Tighter text area */
  .ps-card-grid .feature-item-card .card .info-wrap {
    padding: 8px 10px 10px !important;
  }

  /* Title — 13 → 12, denser line height */
  .ps-card-grid .feature-item-card .card .info-wrap .title {
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    color: #2A2A2A !important;
    margin-bottom: 4px !important;
  }

  /* Price line — compact, with discount chip room */
  .ps-card-grid .feature-item-card .card .info-wrap .price-wrap {
    display: flex !important;
    align-items: baseline !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    font-size: 13px !important;
  }
  .ps-card-grid .feature-item-card .card .info-wrap .price {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #1A1A1A !important;
    margin-right: 0 !important;
  }
  .ps-card-grid .feature-item-card .card .info-wrap .price-old {
    font-size: 11px !important;
    font-weight: 500 !important;
    color: #FF5733 !important;
    margin-left: 0 !important;
    text-decoration: line-through;
    text-decoration-color: #FF5733;
    opacity: 0.95;
  }

  /* Discount % chip — sage, inline with price */
  .ps-card-grid .feature-item-card .card .discount-pct {
    display: inline-flex;
    align-items: center;
    height: 18px;
    padding: 0 6px;
    border-radius: 4px;
    background: rgba(var(--brand-secondary-rgb, 175, 189, 119), 0.18);
    color: var(--brand-ink-deep, #4f5d29);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.2px;
    line-height: 1;
    white-space: nowrap;
  }

  /* Smaller wishlist heart — 32 → 28 */
  .ps-card-grid .feature-item-card .card .favourite-tag {
    width: 28px !important;
    height: 28px !important;
    line-height: 28px !important;
    top: 6px !important;
    right: 6px !important;
  }
  .ps-card-grid .feature-item-card .card .favourite-tag i {
    font-size: 0.92rem !important;
  }
}


/* ====== 6b. Strikethrough MRP — red on every viewport ====== */
/* ui.css applies `color: #999` to .price-old at desktop widths; scope a
   stronger .ps-not-the-store-page rule here so MRP reads as a clear discount cue
   on both mobile and desktop. */
.ps-card-grid .feature-item-card .card .info-wrap .price-old {
  color: #FF5733 !important;
  text-decoration: line-through;
  text-decoration-color: #FF5733;
  font-weight: 500;
  opacity: 0.95;
}

/* ====== 6c. Price row — hierarchy + filled discount pill + inline wishlist ====== */
/* The price-wrap becomes a 2-column flex row: pricing tokens on the left,
   wishlist heart on the right. This is the pattern emerging in editorial
   / premium DTC brands (Lululemon ’24 redesign, Faherty, Everlane) — it
   keeps the product photo clean and puts the save action next to the
   commit-intent price line. */
.ps-card-grid .feature-item-card .card .info-wrap .price-wrap {
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 13px !important;
}

.ps-card-grid .feature-item-card .card .info-wrap .price-group {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px;            /* tight cluster: ₹SP and ₹MRP read as one pair */
  flex: 1 1 auto;
  min-width: 0;
}

/* Discount pill sits as a separate semantic unit (a "deal callout"),
   so it gets a bigger breathing margin than the price↔MRP gap. */
.ps-card-grid .feature-item-card .card .info-wrap .price-group .discount-pct {
  margin-left: 6px;
}
@media (min-width: 768px) {
  .ps-card-grid .feature-item-card .card .info-wrap .price-group .discount-pct {
    margin-left: 10px;
  }
}

/* Selling price — promote slightly for clearer hierarchy */
.ps-card-grid .feature-item-card .card .info-wrap .price {
  font-weight: 800 !important;
  color: #1A1A1A !important;
  letter-spacing: -0.01em;
}

/* Discount pill — flat sage, white text, fully rounded.
   No icon, no gradient, no shadow — clean editorial pill that reads
   instantly as "deal" without competing visually with the price. */
.ps-card-grid .feature-item-card .card .discount-pct {
  display: inline-flex !important;
  align-items: center;
  padding: 2px 7px !important;
  border-radius: 999px;
  background: var(--brand-label, #8fa060);
  color: #ffffff !important;
  font-weight: 600 !important;
  font-size: 10px !important;
  letter-spacing: 0.03em !important;
  line-height: 1.3 !important;
  white-space: nowrap;
  height: auto !important;
  text-transform: none;
}

/* Wishlist heart — two render points, one shown per viewport.
   On phones (< 768px) the card is too narrow for an inline heart
   without pushing the discount pill onto a second line, so the
   overlay heart on the image takes over (Myntra/Flipkart pattern).
   On tablet/desktop (≥ 768px) cards have width to spare, so the
   inline heart at the right edge of the price row reads as a
   premium-DTC touch and keeps the product photo clean. JS sync via
   `data-product-id` updates both buttons regardless of which is
   visible. */
.ps-card-grid .feature-item-card .ps-wish-overlay { display: none; }   /* desktop default */
.ps-card-grid .feature-item-card .ps-wish-inline  { display: inline-flex; }
@media (max-width: 767px) {
  .ps-card-grid .feature-item-card .ps-wish-overlay { display: inline-flex; }
  .ps-card-grid .feature-item-card .ps-wish-inline  { display: none !important; }
}

/* Image-overlay heart (mobile) */
.ps-card-grid .feature-item-card .ps-wish-overlay {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(var(--brand-primary-rgb, 153, 102, 51), 0.12);
  color: #6f6457;
  padding: 0;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  z-index: 4;
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.ps-card-grid .feature-item-card .ps-wish-overlay i {
  font-size: 0.92rem;
  line-height: 1;
}
.ps-card-grid .feature-item-card .ps-wish-overlay:active { transform: scale(0.92); }
.ps-card-grid .feature-item-card .ps-wish-overlay.active {
  color: #e63946;
  background: #fff;
  border-color: #f4b8bf;
}
.ps-card-grid .feature-item-card .ps-wish-overlay:focus { outline: none; }

/* Inline wishlist (right edge of price row) — circular outline that
   fills on hover, turns red when in wishlist (`.active` set by JS). */
.ps-card-grid .feature-item-card .ps-wish-inline {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #ffffff;
  border: 1.4px solid #e3dccf;
  color: #9a8d7a;
  cursor: pointer;
  padding: 0;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.ps-card-grid .feature-item-card .ps-wish-inline i {
  font-size: 0.98rem;
  line-height: 1;
  transition: transform 0.18s ease;
}
@media (hover: hover) {
  .ps-card-grid .feature-item-card .ps-wish-inline:hover {
    background: #fff5ef;
    border-color: var(--brand-action, #996633);
    color: var(--brand-action, #996633);
    box-shadow: 0 4px 10px rgba(var(--brand-primary-rgb, 153, 102, 51), 0.15);
  }
  .ps-card-grid .feature-item-card .ps-wish-inline:hover i {
    transform: scale(1.12);
  }
}
.ps-card-grid .feature-item-card .ps-wish-inline:active { transform: scale(0.92); }
.ps-card-grid .feature-item-card .ps-wish-inline.active {
  color: #e63946;
  border-color: #f4b8bf;
  background: #fff;
}
.ps-card-grid .feature-item-card .ps-wish-inline:focus { outline: none; }
.ps-card-grid .feature-item-card .ps-wish-inline:focus-visible {
  outline: 2px solid rgba(var(--brand-primary-rgb, 153, 102, 51), 0.45);
  outline-offset: 2px;
}

/* Desktop sizing — restrained type for an editorial feel.
   Price down 1 step (~14px) so it doesn't dominate the row;
   MRP and pill follow in proportion. */
@media (min-width: 768px) {
  .ps-card-grid .feature-item-card .card .info-wrap .price {
    font-size: 13.5px !important;
    font-weight: 700 !important;
  }
  .ps-card-grid .feature-item-card .card .info-wrap .price-old {
    font-size: 11.5px !important;
  }
  .ps-card-grid .feature-item-card .card .discount-pct {
    font-size: 10px !important;
    padding: 2px 8px !important;
  }
}

/* Mobile — pill keeps the same flat sage style at slightly tighter padding */
@media (max-width: 767px) {
  .ps-card-grid .feature-item-card .card .discount-pct {
    font-size: 9.5px !important;
    padding: 2px 6px !important;
  }
}

/* ====== 7. Card CTA — Add / Options button below the price row ====== */
/* Brand-brown outline pill that fills on tap; JS-managed .is-added /
   .is-failed states inherit emerald/red bg from cart-feedback.css. */

/* --- Equal-height cards with the CTA pinned to the bottom ---
   Bootstrap's .row is flex (align-items: stretch) so cols already
   share height; we just propagate that down to the card → info-wrap →
   fix-height, then `margin-top: auto` on the CTA pushes it to the
   bottom regardless of whether the title is 1 line or 2. The title
   also reserves a 2-line min-height so the price row sits at a stable
   y across cards in the same row. */
.ps-card-grid .feature-item-card {
  display: flex !important;
  flex-direction: column;
}
.ps-card-grid .feature-item-card > .card-product-grid {
  display: flex;
  flex-direction: column;
  flex: 1;
  height: 100%;
}
.ps-card-grid .feature-item-card .card .info-wrap {
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Release the legacy fixed-height clamp and make fix-height the flex
   spine of the info area. ui.css sets .fix-height { height: 80px;
   overflow: hidden } which would crop the button. */
.ps-card-grid .card-product-grid .fix-height {
  height: auto !important;
  overflow: visible !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
}

/* Title — clamp to 2 lines AND reserve the 2-line height. This is the
   pattern Myntra/Flipkart/Amazon India use to align price rows across
   varied titles. */
.ps-card-grid .feature-item-card .card .info-wrap .title {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  min-height: calc(1.4em * 2);
}

/* Desktop / tablet — tighter type for grid density (16px → 13.5px) */
@media (min-width: 768px) {
  .ps-card-grid .feature-item-card .card .info-wrap .title {
    font-size: 13.5px !important;
    line-height: 1.4 !important;
    font-weight: 500 !important;
    color: #2A2A2A !important;
    margin-bottom: 6px !important;
    min-height: calc(1.4em * 2);
  }
  .ps-card-grid .feature-item-card .card .info-wrap {
    padding: 12px 14px 14px !important;
  }
}

/* Mobile inherits its 1.3 line-height from the existing rule;
   override the min-height to match (2 lines × 1.3em). */
@media (max-width: 767px) {
  .ps-card-grid .feature-item-card .card .info-wrap .title {
    min-height: calc(1.3em * 2);
  }
}

.ps-card-cta {
  margin-top: auto;   /* pin to bottom of the card */
  padding-top: 8px;
  border-top: 1px solid rgba(var(--brand-primary-rgb, 153, 102, 51), 0.08);
}
.ps-add-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  height: 34px;
  padding: 0 12px;
  border: 1.5px solid var(--brand-action, #996633);
  background: #ffffff;
  color: var(--brand-action, #996633);
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 22px;
  cursor: pointer;
  user-select: none;
  position: relative;
  overflow: hidden;
  transition:
    background-color 0.22s ease,
    color 0.22s ease,
    border-color 0.22s ease,
    box-shadow 0.22s ease,
    transform 0.12s ease;
}
.ps-add-btn:focus { outline: none; }
.ps-add-btn:focus-visible {
  outline: 2px solid rgba(var(--brand-primary-rgb, 153, 102, 51), 0.45);
  outline-offset: 2px;
}
.ps-add-btn .ps-add-icon {
  flex-shrink: 0;
  transition: transform 0.28s cubic-bezier(0.34, 1.4, 0.64, 1);
  will-change: transform;
}
.ps-add-btn .ps-add-label {
  line-height: 1;
  white-space: nowrap;
}

/* Pointer hover (desktop) */
@media (hover: hover) {
  .ps-add-btn:hover {
    background: var(--brand-action, #996633);
    color: #ffffff;
    box-shadow: 0 6px 14px rgba(var(--brand-primary-rgb, 153, 102, 51), 0.22);
  }
  .ps-add-btn:hover .ps-add-icon { transform: rotate(90deg) scale(1.08); }
  .ps-add-btn--options:hover .ps-add-icon { transform: translateX(2px) scale(1.06); }
}

/* Touch press (mobile) — quick fill flash on tap-down,
   so the action feels alive before the AJAX completes. */
.ps-add-btn:active {
  background: var(--brand-action-hover, #7a5229);
  color: #ffffff;
  border-color: var(--brand-action-hover, #7a5229);
  transform: scale(0.97);
}

/* Subtle inner sage glow on idle — organic brand cue (very faint) */
.ps-add-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(120% 80% at 50% 110%, rgba(var(--brand-secondary-rgb, 175, 189, 119), 0.18), transparent 60%);
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.22s ease;
}
.ps-add-btn:hover::after,
.ps-add-btn:active::after { opacity: 0; }

/* Mobile density — match the tighter card padding */
@media (max-width: 767px) {
  .ps-card-cta {
    margin-top: 7px;
    padding-top: 7px;
  }
  .ps-add-btn {
    height: 32px;
    font-size: 11.5px;
    border-width: 1.3px;
    letter-spacing: 0.05em;
  }
  .ps-add-btn .ps-add-icon {
    width: 13px;
    height: 13px;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ps-add-btn,
  .ps-add-btn .ps-add-icon {
    transition: background-color 0.2s ease, color 0.2s ease;
    transform: none !important;
  }
}

/* ====== Focused bottom sheet ======
   .bs-focus alone        → no tabs row (applies to sort + all-filters + single)
   .bs-focus-single       → also hides inner group header (single-group only)
   The generic "Sort & Filter" two-tab mode is no longer reachable from
   any pill — every pill enters one of these focused modes. */
@media (max-width: 991px) {
  /* Sheet title gets a touch more prominence — it's the sole header */
  .bottom-sheet.bs-focus .bottom-sheet-title {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
  }
  /* Hide Sort/Filters tab switcher in ANY focus mode */
  .bottom-sheet.bs-focus .bottom-sheet-tabs {
    display: none !important;
  }
  /* Single-group only: hide the inner group header (title + chevron)
     since the sheet title above already names the group */
  .bottom-sheet.bs-focus-single #tab-filters .filter-group-header {
    display: none !important;
  }
  .bottom-sheet.bs-focus-single #tab-filters .filter-group-content {
    max-height: none !important;
    padding-top: 8px;
  }
  .bottom-sheet.bs-focus-single #tab-filters .filter-group {
    border-bottom: none !important;
  }
  .bottom-sheet.bs-focus-single #tab-filters .bs-filter-search-box {
    display: block !important;
    margin: 0 16px 8px;
    border-radius: 8px;
  }
}

/* ====== Hide toolbar chip mirror — the Filter pill badge already
   shows the count, and tapping any group pill shows the selected chips
   inside the sheet via their sage selected state. No need to also
   surface them inline in the toolbar. ====== */
@media (max-width: 991px) {
  .store-toolbar-chips {
    display: none !important;
  }
  /* If the divider before chips was rendered, hide it too */
  .store-toolbar-chips::before {
    display: none !important;
  }
}

/* ====== Elegant footer buttons — pill-shaped, brand-aligned, matches
   the store ADD button language ====== */
@media (max-width: 991px) {
  .bottom-sheet-footer {
    padding: 14px 16px 16px;
    background: white;
    border-top: 1px solid #f0f0f0;
  }
  .bottom-sheet-actions {
    display: flex;
    gap: 10px;
  }
  .btn-clear-filters,
  .btn-clear-sort,
  .btn-apply-filters {
    flex: 1;
    min-width: 0;
    height: 46px;
    padding: 0 20px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease,
                color 0.18s ease, transform 0.1s ease, box-shadow 0.18s ease;
  }
  /* Secondary — outlined sage pill (Clear) */
  .btn-clear-filters,
  .btn-clear-sort {
    background: #FFFFFF;
    border: 1.5px solid var(--brand-label, #8fa060);
    color: var(--brand-ink-deep, #5c7029);
  }
  .btn-clear-filters:hover,
  .btn-clear-sort:hover {
    background: rgba(143, 160, 96, 0.06);
    border-color: var(--brand-ink-deep, #5c7029);
  }
  .btn-clear-filters:active,
  .btn-clear-sort:active {
    transform: scale(0.97);
    background: rgba(143, 160, 96, 0.10);
  }
  /* Primary — solid sage pill (Apply) */
  .btn-apply-filters {
    background: var(--brand-label, #8fa060);
    border: 1.5px solid var(--brand-label, #8fa060);
    color: #FFFFFF;
    box-shadow: 0 2px 8px rgba(143, 160, 96, 0.25);
  }
  .btn-apply-filters:hover {
    background: var(--brand-label, #7a8b4f);
    border-color: var(--brand-label, #7a8b4f);
    box-shadow: 0 4px 12px rgba(143, 160, 96, 0.32);
  }
  .btn-apply-filters:active {
    transform: scale(0.97);
    box-shadow: 0 1px 4px rgba(143, 160, 96, 0.20);
  }
}

/* ====== Sort sheet polish — full sage selection state with check icon
   on the right, larger touch targets ====== */
@media (max-width: 991px) {
  #tab-sort .sort-options {
    padding: 8px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  #tab-sort .sort-option {
    position: relative;
    display: flex !important;
    align-items: center;
    min-height: 52px;
    padding: 0 16px !important;
    margin: 0 !important;
    border: 1.5px solid #E5E5E5;
    border-radius: 12px;
    background: #FFFFFF;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
  }
  #tab-sort .sort-option:active {
    transform: scale(0.99);
  }
  /* Hide the default radio dot — selection is shown via card style */
  #tab-sort .sort-option input[type="radio"] {
    position: absolute !important;
    opacity: 0 !important;
    width: 1px !important;
    height: 1px !important;
    margin: 0 !important;
    pointer-events: none !important;
  }
  #tab-sort .sort-option span {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #333 !important;
    flex: 1;
  }
  /* Selected — full sage background with check tick on the right */
  #tab-sort .sort-option input[type="radio"]:checked ~ span,
  #tab-sort .sort-option.active span {
    color: #FFFFFF !important;
    font-weight: 600 !important;
  }
  #tab-sort .sort-option:has(input:checked),
  #tab-sort .sort-option.active {
    background: var(--brand-label, #8fa060) !important;
    border-color: var(--brand-label, #8fa060) !important;
  }
  #tab-sort .sort-option:has(input:checked)::after,
  #tab-sort .sort-option.active::after {
    content: "\2713";
    margin-left: 8px;
    color: #FFFFFF;
    font-size: 15px;
    font-weight: 700;
  }
}