/* MJ Packaging V118 — EXACT 5-LOCATION PREMIUM PATCH
   Presentation-only CSS. Existing HTML structure, IDs, loops and JS are untouched. */

/* 1. Main Outer Wrapper / page background */
body.page-catalog,
body.page-home{
  background:#FBF9F6 !important;
}

/* 2. Heading — Presentation-ready boxes / catalog page heading */
body.page-catalog .mj-pagehero h1,
body.page-home .mj-pagehero h1{
  font-family:"Garamond","Cardo","EB Garamond",Georgia,serif !important;
  font-weight:300 !important;
  color:#111111 !important;
  letter-spacing:-0.025em !important;
}

/* 3. Product Card Container — only shell treatment */
body.page-catalog .mj-product-card,
body.page-catalog .mj104-card{
  background:#fff !important;
  border:0 !important;
  border-radius:24px !important;
  padding:24px !important;
  box-shadow:0 10px 35px rgba(0,0,0,.055) !important;
  transition:transform .3s ease,box-shadow .3s ease !important;
}
body.page-catalog .mj-product-card:hover,
body.page-catalog .mj104-card:hover{
  border:0 !important;
  transform:translateY(-4px) !important;
  box-shadow:0 20px 50px rgba(0,0,0,.08) !important;
}

/* 4. Product Image Box — exact visual treatment */
body.page-catalog .mj-product-card .mj-card-media,
body.page-catalog .mj104-card .mj-card-media{
  background:#F0F0F0 !important;
  border-radius:16px !important;
  padding:16px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  aspect-ratio:1 / 1 !important;
  box-sizing:border-box !important;
}

/* Preserve image behavior: do not alter hover/loading logic. */
body.page-catalog .mj-card-media img{
  max-width:100%;
  max-height:100%;
}

/* 5. Buy Now Button — exact emerald treatment */
body.page-catalog .mj-card-actions .mj-buy-trigger,
body.page-catalog .mj104-card .mj-buy-trigger{
  background:#064E3B !important;
  color:#fff !important;
  font-weight:500 !important;
  border:0 !important;
  border-radius:12px !important;
  padding:0 !important;
  min-height:48px !important;
  height:48px !important;
  box-shadow:none !important;
}
body.page-catalog .mj-card-actions .mj-buy-trigger:hover,
body.page-catalog .mj104-card .mj-buy-trigger:hover{
  background:#022C22 !important;
  color:#fff !important;
}

/* Keep the existing mobile structure and behavior; only scale the five treatments. */
@media(max-width:600px){
  body.page-catalog .mj-product-card,
  body.page-catalog .mj104-card{
    padding:14px !important;
    border-radius:18px !important;
  }
  body.page-catalog .mj-product-card .mj-card-media,
  body.page-catalog .mj104-card .mj-card-media{
    padding:10px !important;
    border-radius:14px !important;
  }
  body.page-catalog .mj-card-actions .mj-buy-trigger,
  body.page-catalog .mj104-card .mj-buy-trigger{
    min-height:46px !important;
    height:46px !important;
  }
}