/* MJ Packaging V116 — premium catalog/card refinement.
   Keeps existing data + interactions; redesigns presentation only. */
:root{
  --mj116-paper:#FBF9F6;
  --mj116-ink:#2E2E2E;
  --mj116-muted:#77736d;
  --mj116-line:#ebe7e1;
  --mj116-soft:#f5f3ef;
  --mj116-green:#14583c;
  --mj116-green-dark:#0d3f2b;
  --mj116-gold:#9a6428;
}

body.page-catalog, body.page-home{background:var(--mj116-paper)!important;color:var(--mj116-ink)}

/* Quiet, editorial page introduction. */
.mj-pagehero{
  background:var(--mj116-paper)!important;
  border-bottom:0!important;
  padding:64px 0 38px!important;
}
.mj-pagehero .mj-wrap{position:relative}
.mj-pagehero h1{
  margin:0 0 12px!important;
  color:#171714!important;
  font-family:"Iowan Old Style","Baskerville","Garamond",Georgia,serif!important;
  font-size:clamp(42px,5vw,68px)!important;
  font-weight:500!important;
  line-height:.98!important;
  letter-spacing:-.045em!important;
}
.mj-pagehero p{
  max-width:700px!important;
  margin:0!important;
  color:var(--mj116-muted)!important;
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
  font-size:18px!important;
  line-height:1.55!important;
}

/* Toolbar becomes an understated control row. */
.mj-catalog{padding:10px 0 80px!important}
.mj-toolbar{margin-bottom:28px!important}
.mj-filter-trigger,.mj-sort{
  height:46px!important;
  border:1px solid var(--mj116-line)!important;
  border-radius:999px!important;
  background:#fff!important;
  color:#3a3935!important;
  font-size:14px!important;
  font-weight:650!important;
}
.mj-filter-trigger{padding:0 18px!important}
.mj-sort{min-width:190px!important;padding:0 16px!important}
.mj-count{font-size:15px!important;color:#817d76!important}

/* Premium card shell: no visible border, soft depth, generous spacing. */
.mj-product-grid{gap:26px!important;align-items:stretch!important}
.mj104-card{
  position:relative!important;
  display:flex!important;
  flex-direction:column!important;
  height:100%!important;
  border:0!important;
  border-radius:24px!important;
  background:#fff!important;
  box-shadow:0 10px 34px rgba(38,31,23,.065)!important;
  color:var(--mj116-ink)!important;
  overflow:hidden!important;
  transition:transform .28s cubic-bezier(.22,1,.36,1),box-shadow .28s ease!important;
}
.mj104-card:hover{
  border:0!important;
  transform:translateY(-5px)!important;
  box-shadow:0 24px 58px rgba(38,31,23,.115)!important;
}

/* Status + wishlist. */
.mj104-card .mj104-top{
  min-height:48px!important;
  padding:18px 22px 2px!important;
}
.mj104-card .mj104-status{
  min-height:27px!important;
  padding:0 11px!important;
  border:0!important;
  border-radius:999px!important;
  background:#edf7f0!important;
  color:var(--mj116-green)!important;
  font-size:10px!important;
  font-weight:750!important;
  letter-spacing:.07em!important;
}
.mj104-card .mj104-status.inquiry{
  background:#f8f0e5!important;
  color:#82551f!important;
}
.mj104-card .mj-card-wish{
  width:42px!important;height:42px!important;
  margin:-6px -5px 0 8px!important;
  color:#aaa59d!important;
  font-size:25px!important;
  background:transparent!important;
}
.mj104-card .mj-card-wish:hover{background:#f6f4f1!important;color:#b13b50!important;transform:none!important}

/* Image is the visual hero of every card. */
.mj104-card>.mj-card-media{
  order:2!important;
  margin:14px 22px 0!important;
  width:auto!important;
  aspect-ratio:1/1!important;
  border:0!important;
  border-radius:20px!important;
  background:#f7f5f1!important;
}
.mj104-card>.mj-card-media img{
  padding:18px!important;
  transition:opacity .26s ease,transform .42s cubic-bezier(.22,1,.36,1)!important;
}
.mj104-card:hover>.mj-card-media:not(.mj-alt-ready) img:not(.mj-alt){transform:scale(1.035)!important}
.mj104-card:hover>.mj-card-media.mj-alt-ready img.mj-alt{transform:scale(1.035)!important}

/* Title follows the image, matching the premium editorial hierarchy. */
.mj104-card>.mj-card-title{
  order:3!important;
  min-height:67px!important;
  max-height:67px!important;
  margin:20px 22px 0!important;
  color:#191916!important;
}
.mj104-card>.mj-card-title strong{
  font-size:19px!important;
  font-weight:650!important;
  line-height:1.25!important;
  letter-spacing:-.018em!important;
}
.mj104-card>.mj-card-title span{
  margin-top:5px!important;
  color:#817c74!important;
  font-size:13px!important;
  font-weight:500!important;
  line-height:1.4!important;
}

/* Information block: airy, not dashboard-like. */
.mj104-card>.mj-card-body{
  order:4!important;
  padding:0 22px 22px!important;
}
.mj104-card .mj-card-category{
  margin:0 0 12px!important;
  color:var(--mj116-gold)!important;
  font-size:10px!important;
  font-weight:800!important;
  letter-spacing:.105em!important;
}
.mj104-card .mj100-options{gap:6px!important;margin:0 0 13px!important}
.mj104-card .mj100-options>b{font-size:9px!important;color:#98928a!important}
.mj104-card .mj100-options>span{
  padding:6px 9px!important;
  border:0!important;
  border-radius:999px!important;
  background:#f4f2ee!important;
  color:#5d5953!important;
  font-size:11px!important;
}
.mj104-card .mj-card-spec{
  gap:9px!important;
  margin:0 0 14px!important;
  padding:12px 13px!important;
  border:0!important;
  border-radius:14px!important;
  background:#f7f5f1!important;
  color:#625e58!important;
  font-size:11px!important;
}
.mj104-card .mj-card-spec b{color:#9a958e!important;font-size:9px!important}

/* Price gets the strongest typographic treatment. */
.mj104-card .mj104-price-row{
  min-height:68px!important;
  padding-top:15px!important;
  border-top:1px solid #eeeae5!important;
}
.mj104-card .mj104-price-row>div>small{
  color:#99948c!important;
  font-size:10px!important;
  letter-spacing:.01em!important;
}
.mj104-card .mj-card-price{
  color:#171714!important;
  font-size:28px!important;
  font-weight:650!important;
  letter-spacing:-.035em!important;
}
.mj104-card .mj-card-price em{color:#8a857d!important;font-size:10px!important}
.mj104-card .mj-card-price.quote{color:#85551e!important;font-size:14px!important}
.mj104-card .mj104-moq{
  min-height:29px!important;
  padding:0 10px!important;
  border-radius:999px!important;
  background:#edf7f0!important;
  color:var(--mj116-green)!important;
  font-size:10px!important;
}

/* Primary action is premium but restrained — no loud gold/glow. */
.mj104-card .mj-card-actions{gap:9px!important;min-height:95px!important;margin-top:14px!important}
.mj104-card .mj-card-actions>.mj-buy-trigger{
  height:46px!important;
  border:0!important;
  border-radius:12px!important;
  background:linear-gradient(135deg,#165a3f,#0f4a33)!important;
  color:#fff!important;
  box-shadow:0 9px 22px rgba(20,88,60,.15)!important;
  font-size:13px!important;
  font-weight:750!important;
}
.mj104-card .mj-card-actions>.mj-buy-trigger:hover{
  background:linear-gradient(135deg,#0f4a33,#0b3826)!important;
  box-shadow:0 13px 28px rgba(20,88,60,.20)!important;
}
.mj104-card .mj104-secondary{gap:8px!important}
.mj104-card .mj104-secondary .mj-card-cta{
  height:42px!important;
  border-radius:11px!important;
  font-size:11px!important;
}
.mj104-card .mj-card-inquiry{
  border:1px solid #e2ded7!important;
  background:#fff!important;
  color:#4d4943!important;
}
.mj104-card .mj-card-inquiry:hover{border-color:#cfc8bd!important;background:#faf8f5!important;color:#24231f!important}
.mj104-card .mj104-whatsapp{border:1px solid #d4e6da!important;background:#f4faf6!important;color:#17603f!important}
.mj104-card .mj104-whatsapp:hover{background:#edf7f0!important;border-color:#bcd8c7!important}

/* Home product rails inherit the same visual language. */
.page-home .mj-home-rail{gap:24px!important}
.page-home .mj-home-rail .mj104-card{border-radius:22px!important}

@media(min-width:1500px){
  .mj-product-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:30px!important}
}
@media(max-width:900px){
  .mj-pagehero{padding:46px 0 28px!important}
  .mj-pagehero h1{font-size:42px!important}
  .mj-pagehero p{font-size:16px!important}
  .mj-product-grid{gap:16px!important}
  .mj104-card{border-radius:19px!important}
  .mj104-card .mj104-top{padding:13px 14px 0!important}
  .mj104-card>.mj-card-media{margin:11px 14px 0!important;border-radius:15px!important}
  .mj104-card>.mj-card-media img{padding:11px!important}
  .mj104-card>.mj-card-title{min-height:61px!important;max-height:61px!important;margin:14px 14px 0!important}
  .mj104-card>.mj-card-title strong{font-size:16px!important}
  .mj104-card>.mj-card-title span{font-size:12px!important}
  .mj104-card>.mj-card-body{padding:0 14px 15px!important}
  .mj104-card .mj-card-price{font-size:23px!important}
}
@media(max-width:600px){
  .mj-pagehero{padding:32px 0 20px!important}
  .mj-pagehero h1{font-size:34px!important}
  .mj-pagehero p{font-size:15px!important;line-height:1.45!important}
  .mj-catalog{padding-bottom:54px!important}
  .mj-toolbar{margin-bottom:16px!important}
  .mj-product-grid{gap:10px!important}
  .mj104-card{border-radius:15px!important;box-shadow:0 6px 22px rgba(38,31,23,.055)!important}
  .mj104-card:hover{transform:none!important;box-shadow:0 6px 22px rgba(38,31,23,.055)!important}
  .mj104-card .mj104-top{min-height:40px!important;padding:10px 9px 0!important}
  .mj104-card .mj104-status{min-height:22px!important;padding:0 7px!important;font-size:8px!important}
  .mj104-card .mj-card-wish{width:36px!important;height:36px!important;font-size:22px!important}
  .mj104-card>.mj-card-media{margin:8px 9px 0!important;border-radius:12px!important}
  .mj104-card>.mj-card-media img{padding:7px!important}
  .mj104-card>.mj-card-title{min-height:53px!important;max-height:53px!important;margin:11px 9px 0!important}
  .mj104-card>.mj-card-title strong{font-size:14px!important;line-height:1.25!important}
  .mj104-card>.mj-card-title span{margin-top:3px!important;font-size:10px!important}
  .mj104-card>.mj-card-body{padding:0 9px 11px!important}
  .mj104-card .mj-card-category{margin-bottom:7px!important;font-size:8px!important}
  .mj104-card .mj-card-spec{gap:5px!important;margin-bottom:9px!important;padding:7px 8px!important;font-size:9px!important}
  .mj104-card .mj-card-spec b{font-size:7px!important}
  .mj104-card .mj104-price-row{min-height:55px!important;padding-top:10px!important}
  .mj104-card .mj104-price-row>div>small{font-size:8px!important}
  .mj104-card .mj-card-price{font-size:18px!important}
  .mj104-card .mj-card-price em{font-size:8px!important}
  .mj104-card .mj104-moq{min-height:23px!important;padding:0 6px!important;font-size:7px!important}
  .mj104-card .mj-card-actions{gap:5px!important;min-height:76px!important;margin-top:9px!important}
  .mj104-card .mj-card-actions>.mj-buy-trigger{height:37px!important;border-radius:9px!important;font-size:10px!important}
  .mj104-card .mj104-secondary{gap:5px!important}
  .mj104-card .mj104-secondary .mj-card-cta{height:34px!important;border-radius:8px!important;font-size:8px!important;padding:0 5px!important}
}