/* ===========================================================================
   Monk Sera — Homepage Polish Layer (NEW, override-only).
   Loaded AFTER index.php inline styles. Refines existing .ms-* sections.
   No markup/PHP change. Safe to remove.
   =========================================================================== */

/* ---- Mobile grid integrity (prevents cramped 3/4-col on small screens) ---- */
@media (max-width:760px){
  .ms-products-grid{ grid-template-columns:repeat(2,1fr) !important; gap:14px !important; }
  .ms-coll-grid{ grid-template-columns:repeat(2,1fr) !important; gap:12px !important; }
  .ms-why-grid{ grid-template-columns:1fr !important; gap:12px !important; }
}
@media (max-width:420px){
  .ms-products-grid{ gap:11px !important; }
}

/* ---- Section rhythm: tighten oversized desktop padding, balance mobile ---- */
@media (min-width:1024px){ .ms-section{ padding:104px 0 !important; } }
@media (max-width:768px){ .ms-section{ padding:56px 0 !important; } }

/* ---- Product card: smoother lift + image zoom on hover (enhances, not replaces) ---- */
.ms-pcard{ transition:transform .4s cubic-bezier(.4,0,.2,1), box-shadow .4s cubic-bezier(.4,0,.2,1) !important; will-change:transform; }
.ms-pcard:hover{ transform:translateY(-6px) !important; box-shadow:0 18px 48px rgba(14,42,27,.14) !important; }
.ms-pcard-img img{ transition:transform .7s cubic-bezier(.4,0,.2,1) !important; }
.ms-pcard:hover .ms-pcard-img img{ transform:scale(1.05) !important; }

/* ---- Collection tiles: depth + hover reveal ---- */
.ms-coll-card{ transition:transform .45s cubic-bezier(.4,0,.2,1), box-shadow .45s !important; overflow:hidden; }
.ms-coll-card:hover{ transform:translateY(-4px) !important; box-shadow:0 16px 44px rgba(14,42,27,.16) !important; }
.ms-coll-card img{ transition:transform .8s cubic-bezier(.4,0,.2,1) !important; }
.ms-coll-card:hover img{ transform:scale(1.06) !important; }

/* ---- Hero text legibility on bright images ---- */
.ms-hero-overlay{ background:linear-gradient(to top,rgba(7,20,16,.78) 0%,rgba(7,20,16,.30) 50%,rgba(7,20,16,.42) 100%) !important; }
.ms-hero-h1{ text-shadow:0 2px 24px rgba(0,0,0,.35); letter-spacing:-.01em; }
.ms-hero-sub{ text-shadow:0 1px 12px rgba(0,0,0,.4); }
@media (max-width:600px){
  .ms-hero{ min-height:84vh !important; }
  .ms-hero-h1{ font-size:clamp(2rem,9vw,3rem) !important; line-height:1.08 !important; }
  .ms-hero-btns{ flex-wrap:wrap; gap:10px !important; }
}

/* ---- Buttons: consistent premium feel on hover (only transitions) ---- */
.ms-hero-btns a,.ms-products-viewall,.ms-why-card{ transition:all .3s cubic-bezier(.4,0,.2,1) !important; }
.ms-products-viewall:hover{ transform:translateY(-2px); }

/* ---- Trust strip + section headers: subtle entrance smoothing ---- */
.ms-trust-item{ transition:transform .3s ease; }
.ms-trust-item:hover{ transform:translateY(-3px); }

/* ---- Tap targets / accessibility on mobile ---- */
@media (max-width:768px){
  .ms-hero-arrow{ width:42px !important; height:42px !important; }
  .ms-hero-dot{ width:9px !important; height:9px !important; }
}

/* ---- Image rendering quality ---- */
.ms-pcard-img img,.ms-coll-card img,.ms-hero-img{ image-rendering:auto; }

@media (prefers-reduced-motion:reduce){
  .ms-pcard,.ms-coll-card,.ms-pcard-img img,.ms-coll-card img{ transition:none !important; }
  .ms-pcard:hover,.ms-coll-card:hover{ transform:none !important; }
}