/* ==========================================================================
   RAM JYOTI AGRO - Future-Proof Responsive Architecture
   System: Fluid CSS (RAM Pattern & clamp) + Modern Container Queries (@container)
   Universal Support: 320px (Budget Androids) to 430px (Pro Max) to 4K Displays
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. FLUID ROOT TOKENS (Math-based dynamic scaling without breakpoint steps)
   -------------------------------------------------------------------------- */
:root {
  --header-height: clamp(68px, 5vw + 40px, 84px);
  --section-pad-y: clamp(2.5rem, 5vw + 1rem, 5rem);
  --fs-hero: clamp(1.85rem, 4.5vw + 0.75rem, 3.75rem);
  --fs-h1: clamp(1.5rem, 3.5vw + 0.5rem, 2.75rem);
  --fs-h2: clamp(1.25rem, 2.8vw + 0.4rem, 2.15rem);
  --fs-h3: clamp(1.05rem, 2vw + 0.35rem, 1.45rem);
  --fs-body: clamp(0.88rem, 1vw + 0.6rem, 1.05rem);
  --grid-card-min: min(100%, 280px);
}

/* --------------------------------------------------------------------------
   2. CONTAINER QUERY CONTEXTS (Elements that monitor their own width)
   -------------------------------------------------------------------------- */
.products-grid,
.shop-showcase-section,
.finest-products-section,
.welcome-section,
.facility-section,
.product-card,
.catalog-card,
.detail-split-grid,
.cart-drawer-body {
  container-type: inline-size;
}

/* --------------------------------------------------------------------------
   3. INTRINSIC FLUID GRIDS (RAM Pattern: Repeat, Auto-Fit, MinMax)
   -------------------------------------------------------------------------- */
.products-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(var(--grid-card-min), 1fr)) !important;
  gap: clamp(1rem, 2.5vw, 2rem) !important;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)) !important;
  gap: clamp(0.75rem, 2vw, 1.5rem) !important;
}

/* --------------------------------------------------------------------------
   4. FLUID FLOATING PILLS & CONTROLS (Zero overflow across all 3 mobile tiers)
   -------------------------------------------------------------------------- */
.catalog-floating-pills {
  width: min(100%, 390px);
  padding: 3px;
  display: inline-flex;
  justify-content: center;
  margin-inline: auto;
  box-sizing: border-box;
}

.catalog-floating-pills .catalog-pill-btn {
  padding: clamp(0.45rem, 2.2vw, 0.65rem) clamp(0.55rem, 2.8vw, 1.25rem);
  font-size: clamp(0.66rem, 2.2vw, 0.8rem);
  letter-spacing: clamp(0.2px, 0.5vw, 0.8px);
  gap: clamp(0.25rem, 1vw, 0.5rem);
  flex: 1;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
}

.filter-pill {
  padding: clamp(0.38rem, 1.6vw, 0.6rem) clamp(0.65rem, 2.5vw, 1.35rem);
  font-size: clamp(0.74rem, 2vw, 0.88rem);
  border-radius: var(--radius-pill);
  background: #f1f5f9;
  color: #475569;
  font-weight: 600;
  border: 1px solid #cbd5e1;
  transition: all var(--transition-fast);
  cursor: pointer;
  white-space: nowrap;
}

.filter-pill:hover,
.filter-pill.active {
  background: var(--brand-teal);
  color: #ffffff;
  border-color: var(--brand-teal);
  box-shadow: 0 4px 12px rgba(46, 99, 120, 0.25);
}

/* --------------------------------------------------------------------------
   5. CONTAINER QUERIES: PRODUCT & CATALOG CARDS
   (Cards adapt to their own width, whether in 1-col mobile or multi-col desktop)
   -------------------------------------------------------------------------- */
@container (max-width: 420px) {
  .catalog-card,
  .product-card {
    padding: clamp(0.85rem, 3.5cqi, 1.25rem);
  }

  .catalog-card .catalog-title,
  .product-card .product-info .product-title {
    font-size: clamp(0.92rem, 4.2cqi, 1.05rem);
    min-height: auto;
  }

  .catalog-card .catalog-pack-sizes {
    font-size: clamp(0.75rem, 3.4cqi, 0.85rem);
    letter-spacing: 0.2px;
  }

  .product-card .product-info .product-features {
    gap: 0.35rem;
  }

  .product-card .product-info .product-features span {
    font-size: clamp(0.7rem, 3cqi, 0.75rem);
    padding: 0.18rem 0.5rem;
  }

  .product-card .product-info .product-card-footer,
  .product-card .product-info .product-meta {
    padding-top: 0.75rem !important;
    gap: 0.55rem !important;
  }

  .product-card .product-info .product-card-footer .pricing-weight-row,
  .product-card .product-info .product-meta > div:first-child {
    gap: 0.4rem !important;
  }

  .product-card .product-info .product-card-footer .pricing-weight-row .weight-tag,
  .product-card .product-info .product-meta .weight-tag {
    font-size: clamp(0.72rem, 3cqi, 0.82rem) !important;
    padding: 0.16rem 0.45rem !important;
  }

  .product-card .product-info .product-card-footer .pricing-weight-row .price-val,
  .product-card .product-info .product-meta > div:first-child > div:last-child {
    font-size: clamp(0.98rem, 4.5cqi, 1.15rem) !important;
  }

  .product-card .product-info .product-card-footer .action-buttons-row,
  .product-card .product-info .product-meta > div:last-child {
    grid-template-columns: 1fr 1.3fr !important;
    gap: clamp(0.35rem, 1.5cqi, 0.5rem) !important;
  }

  .product-card .product-info .product-card-footer .action-buttons-row .btn-sm,
  .product-card .product-info .product-meta .btn-sm {
    padding: clamp(0.45rem, 2cqi, 0.6rem) clamp(0.45rem, 2cqi, 0.75rem) !important;
    font-size: clamp(0.72rem, 3cqi, 0.82rem) !important;
    letter-spacing: 0 !important;
  }
}

/* Ultra-compact container fallback (Tier 1: < 340px) */
@container (max-width: 340px) {
  .product-card .product-info .product-card-footer .action-buttons-row,
  .product-card .product-info .product-meta > div:last-child {
    grid-template-columns: 1fr 1.15fr !important;
    gap: 0.3rem !important;
  }

  .product-card .product-info .product-card-footer .action-buttons-row .btn-sm,
  .product-card .product-info .product-meta .btn-sm {
    padding: 0.42rem 0.35rem !important;
    font-size: 0.7rem !important;
  }
}

/* --------------------------------------------------------------------------
   6. CONTAINER QUERIES: PRODUCT DETAIL & SPLIT GRIDS
   -------------------------------------------------------------------------- */
.detail-split-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)) !important;
  gap: clamp(1.5rem, 4vw, 3.5rem) !important;
}

/* --------------------------------------------------------------------------
   7. MACRO-LEVEL MEDIA QUERIES (Exclusively for Global Shell & Hardware)
   -------------------------------------------------------------------------- */

/* Header Mobile Menu & Nav Collapse */
@media (max-width: 991px) {
  .site-header .main-nav-links {
    display: none;
  }

  .site-header .mobile-drawer-toggle {
    display: flex;
  }
}

/* ==========================================================================
   SMALL MOBILE TIER (320px - 360px): Budget & older Android phones
   Fine-tuned corrections for every element that overflows or looks cramped
   ========================================================================== */
@media (max-width: 360px) {

  /* Root tokens: tighter spacing at 320px */
  :root {
    --section-pad-x: 0.75rem;
    --header-height: 62px;
  }

  /* Wrapper: reduce side padding */
  .wrapper {
    padding-inline: 0.75rem !important;
  }

  /* HEADER: compact logo + tight icon row */
  .site-header {
    padding-block: 0.6rem !important;
  }

  .site-header .header-inner {
    gap: 0.5rem !important;
  }

  .site-header .brand-logo-wrap .logo-img {
    height: 38px !important;
    width: auto !important;
  }

  .site-header .header-actions {
    gap: 0.45rem !important;
  }

  .site-header .header-actions .action-btn {
    width: 34px !important;
    height: 34px !important;
  }

  .site-header .header-actions .action-btn svg {
    width: 17px !important;
    height: 17px !important;
  }

  .site-header .header-actions .mobile-menu-toggle svg {
    width: 22px !important;
    height: 22px !important;
  }

  /* CATALOG FLOATING PILL BAR */
  .catalog-floating-pills {
    width: 100% !important;
    max-width: 100% !important;
    padding: 2px !important;
  }

  .catalog-floating-pills .catalog-pill-btn {
    padding: 0.42rem 0.4rem !important;
    font-size: 0.62rem !important;
    letter-spacing: 0.1px !important;
    gap: 0.2rem !important;
    flex: 1 !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  .catalog-floating-pills .catalog-pill-btn span {
    font-size: 0.7rem !important;
  }

  /* FILTER PILLS (Products page) */
  .filter-pill {
    padding: 0.32rem 0.55rem !important;
    font-size: 0.7rem !important;
  }

  /* PRODUCT GRID: single column */
  .products-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  /* CATALOG CARD (B2B Products page) */
  .catalog-card {
    padding: 0.8rem !important;
  }

  .catalog-card .catalog-title {
    font-size: 0.9rem !important;
    min-height: auto !important;
  }

  .catalog-card .catalog-pack-sizes {
    font-size: 0.72rem !important;
    letter-spacing: 0 !important;
  }

  /* SHOP PRODUCT CARD (D2C Shop page) */
  .product-card {
    padding: 0.8rem !important;
  }

  .product-card .product-info .product-category-label,
  .product-card .product-info .product-type-label {
    font-size: 0.65rem !important;
    letter-spacing: 0.5px !important;
  }

  .product-card .product-info .product-title {
    font-size: 0.88rem !important;
    min-height: auto !important;
    margin-bottom: 0.4rem !important;
  }

  .product-card .product-info .product-features span {
    font-size: 0.67rem !important;
    padding: 0.14rem 0.4rem !important;
  }

  /* SHOP CARD FOOTER */
  .product-card .product-info .product-card-footer,
  .product-card .product-info .product-meta {
    padding-top: 0.6rem !important;
    gap: 0.45rem !important;
  }

  .product-card .product-info .product-card-footer .pricing-weight-row .weight-tag,
  .product-card .product-info .product-meta .weight-tag {
    font-size: 0.68rem !important;
    padding: 0.12rem 0.3rem !important;
  }

  .product-card .product-info .product-card-footer .pricing-weight-row .price-val {
    font-size: 0.92rem !important;
  }

  .product-card .product-info .product-card-footer .action-buttons-row,
  .product-card .product-info .product-meta > div:last-child {
    grid-template-columns: 1fr 1.2fr !important;
    gap: 0.28rem !important;
  }

  .product-card .product-info .product-card-footer .action-buttons-row a,
  .product-card .product-info .product-card-footer .action-buttons-row button,
  .product-card .product-info .product-meta > div:last-child a,
  .product-card .product-info .product-meta > div:last-child button {
    height: 34px !important;
    padding: 0.38rem 0.3rem !important;
    font-size: 0.68rem !important;
    letter-spacing: 0 !important;
    min-width: 0 !important;
  }

  /* HEADING OVERFLOW GUARD */
  h1, h2, h3 {
    word-break: break-word;
    overflow-wrap: break-word;
  }

  /* GENERAL BUTTONS */
  .btn.btn-sm {
    padding-inline: 0.6rem !important;
    font-size: 0.75rem !important;
    white-space: nowrap !important;
  }
}

/* Touch Hardware Ergonomics (Tap target minimums 44px) */
@media (hover: none) and (pointer: coarse) {
  .btn,
  .action-btn,
  .nav-arrow,
  .slider-dot,
  .catalog-pill-btn,
  .filter-pill {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .product-card:hover,
  .catalog-card:hover {
    transform: none;
  }
}

/* Scale back 44px tap target for the 320px tier to prevent overflow */
@media (hover: none) and (pointer: coarse) and (max-width: 360px) {
  .action-btn {
    min-height: 34px !important;
  }
  .catalog-pill-btn,
  .filter-pill {
    min-height: 34px !important;
  }
}

/* Fine Pointer Hover Effects (Desktop / Laptop Only) */
@media (hover: hover) and (pointer: fine) {
  .product-card:hover {
    transform: translateY(-6px);
  }
  .catalog-card:hover {
    transform: translateY(-6px);
  }
}

/* Print Cleanliness */
@media print {
  .site-header,
  .catalog-floating-pills,
  .floating-catalog-bar,
  .floating-whatsapp,
  .cart-drawer,
  .cart-drawer-overlay {
    display: none !important;
  }

  body {
    background: #ffffff;
    color: #000000;
  }
}