/* ===========================================================================
   Monk Sera — Enhancement layer (NEW, standalone, progressive enhancement)
   Adds: anti-crop product imagery, hover image-swap, PDP image-zoom,
   recently-viewed rail, frequently-bought-together bundle, blog reading bar.
   100% additive — safe to remove. Loaded after all existing CSS so it wins.
   =========================================================================== */

:root{
  --ms-forest:#0E2A1B; --ms-gold:#C9A227; --ms-lgold:#E8D7A5;
  --ms-cream:#F7F3EE; --ms-ink:#2a2a2a;
}

/* ───────────────────────────────────────────────────────────
   1) ANTI-CROP IMAGE SYSTEM  (product imagery only)
   Preserve original ratio for portrait / landscape / square
   product photos — show the whole packet, never force-crop.
   Editorial / hero images keep their art-directed cover crop.
   ─────────────────────────────────────────────────────────── */
.product-image-wrap,
.ms-pcard-img,
.pcard__img{
  background:linear-gradient(165deg,#ffffff 0%,#f4efe6 100%);
}
.product-image-wrap > img,
.ms-pcard-img > img,
.pcard__img > img,
.ms-hover-img{
  object-fit:contain !important;
  padding:12px;
}
/* PDP main gallery + thumbs + quick-view + you-might-like */
.detail-gallery .slide,
.detail-gallery .slider-stage{ background:#fff; }
.detail-gallery .slide img{
  object-fit:contain !important;
  background:#fff;
  padding:8px;
}
.detail-gallery .thumb img{ object-fit:contain !important; background:#fff; }
.ymal-img-wrap{ background:linear-gradient(165deg,#fff 0%,#f4efe6 100%); }
.ymal-img-wrap img{ object-fit:contain !important; padding:10px; }
.modal-img img{ object-fit:contain !important; background:#fff; }

@media (max-width:768px){
  .product-image-wrap > img,.ms-hover-img{ padding:9px; }
}

/* ───────────────────────────────────────────────────────────
   2) HOVER IMAGE-SWAP on product cards
   ─────────────────────────────────────────────────────────── */
.product-image-wrap,.ms-pcard-img,.pcard__img{ position:relative; }
.ms-hover-img{
  position:absolute; inset:0; width:100%; height:100%;
  opacity:0; transform:scale(1.02);
  transition:opacity .55s ease, transform .8s ease;
  pointer-events:none; z-index:1;
}
.product-card:hover .ms-hover-img,
.ms-pcard:hover .ms-hover-img,
.pcard:hover .ms-hover-img{ opacity:1; transform:scale(1.06); }

/* ───────────────────────────────────────────────────────────
   3) PDP IMAGE ZOOM (fullscreen, pan to explore)
   ─────────────────────────────────────────────────────────── */
.detail-gallery .slide img{ cursor:zoom-in; }
.ms-zoom{
  position:fixed; inset:0; z-index:99990;
  background:rgba(8,18,12,.94);
  display:none; align-items:center; justify-content:center;
  overflow:hidden; cursor:zoom-out;
  animation:msFade .25s ease;
}
.ms-zoom.ms-open{ display:flex; }
.ms-zoom img{
  max-height:88vh; max-width:90vw; will-change:transform;
  transition:transform .15s ease-out;
  user-select:none; -webkit-user-drag:none;
}
.ms-zoom-close{
  position:absolute; top:20px; right:24px; z-index:2;
  width:46px; height:46px; border-radius:50%;
  background:rgba(255,255,255,.1); border:1px solid rgba(201,162,39,.4);
  color:#fff; font-size:20px; cursor:pointer; display:grid; place-items:center;
  transition:background .25s,color .25s;
}
.ms-zoom-close:hover{ background:var(--ms-gold); color:var(--ms-forest); }
.ms-zoom-hint{
  position:absolute; bottom:22px; left:0; right:0; text-align:center;
  color:rgba(255,255,255,.6); font-size:12px; letter-spacing:2px;
  text-transform:uppercase; pointer-events:none;
}
@keyframes msFade{ from{opacity:0} to{opacity:1} }

/* ───────────────────────────────────────────────────────────
   4) FREQUENTLY BOUGHT TOGETHER  (PDP)
   ─────────────────────────────────────────────────────────── */
.ms-fbt{
  max-width:1180px; margin:48px auto 0; padding:30px;
  background:#fff; border:1px solid #ece4d6; border-radius:20px;
  box-shadow:0 12px 40px rgba(14,42,27,.06);
}
.ms-fbt h2{
  font-family:'Cormorant Garamond',serif; color:var(--ms-forest);
  font-size:26px; font-weight:600; margin:0 0 4px;
}
.ms-fbt .ms-fbt-sub{ color:#7c8a80; font-size:13.5px; margin:0 0 22px; }
.ms-fbt-row{ display:flex; align-items:stretch; flex-wrap:wrap; gap:14px; }
.ms-fbt-item{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  width:150px; text-align:center; position:relative;
}
.ms-fbt-item .ms-fbt-thumb{
  width:120px; height:120px; border-radius:14px; overflow:hidden;
  background:linear-gradient(165deg,#fff,#f4efe6); border:1px solid #ece4d6;
}
.ms-fbt-item img{ width:100%; height:100%; object-fit:contain; padding:8px; }
.ms-fbt-item .ms-fbt-nm{ font-size:13px; color:var(--ms-ink); line-height:1.3; min-height:34px; }
.ms-fbt-item .ms-fbt-pr{ font-weight:700; color:var(--ms-forest); font-size:14px; }
.ms-fbt-item .ms-fbt-chk{
  position:absolute; top:6px; left:6px; width:20px; height:20px;
  accent-color:var(--ms-gold); cursor:pointer; z-index:2;
}
.ms-fbt-plus{ align-self:center; font-size:24px; color:#c9b07a; font-weight:300; }
.ms-fbt-cta{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  margin-top:24px; padding-top:20px; border-top:1px solid #efe8dc;
}
.ms-fbt-total{ font-size:15px; color:var(--ms-ink); }
.ms-fbt-total b{ font-size:21px; color:var(--ms-forest); }
.ms-fbt-add{
  background:var(--ms-forest); color:#fff; border:none; cursor:pointer;
  padding:14px 30px; border-radius:30px; font-size:12px; letter-spacing:2px;
  text-transform:uppercase; font-weight:600; transition:all .3s;
}
.ms-fbt-add:hover{ background:var(--ms-gold); color:var(--ms-forest); transform:translateY(-2px); }
@media (max-width:600px){
  .ms-fbt{ padding:22px 16px; border-radius:16px; }
  .ms-fbt-item{ width:120px; }
  .ms-fbt-item .ms-fbt-thumb{ width:96px; height:96px; }
}

/* ───────────────────────────────────────────────────────────
   5) RECENTLY VIEWED rail
   ─────────────────────────────────────────────────────────── */
.ms-rv{ max-width:1280px; margin:0 auto; padding:56px 24px 8px; }
.ms-rv-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:20px; gap:12px; }
.ms-rv-head h2{
  font-family:'Cormorant Garamond',serif; color:var(--ms-forest);
  font-size:30px; font-weight:600; margin:0; letter-spacing:.5px;
}
.ms-rv-head a{ color:#a07d18; font-size:12px; letter-spacing:1.5px; text-transform:uppercase; text-decoration:none; }
.ms-rv-track{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(170px,1fr); gap:16px; overflow-x:auto; padding-bottom:10px; scroll-snap-type:x mandatory; }
.ms-rv-track::-webkit-scrollbar{ height:5px; }
.ms-rv-track::-webkit-scrollbar-thumb{ background:#d9cfbb; border-radius:4px; }
.ms-rv-card{
  scroll-snap-align:start; text-decoration:none; color:inherit;
  background:#fff; border:1px solid #ece4d6; border-radius:16px; overflow:hidden;
  transition:transform .3s, box-shadow .3s;
}
.ms-rv-card:hover{ transform:translateY(-5px); box-shadow:0 16px 38px rgba(14,42,27,.12); }
.ms-rv-thumb{ aspect-ratio:1; background:linear-gradient(165deg,#fff,#f4efe6); }
.ms-rv-thumb img{ width:100%; height:100%; object-fit:contain; padding:10px; }
.ms-rv-card .ms-rv-nm{ font-family:'Cormorant Garamond',serif; font-size:16px; color:var(--ms-forest); padding:12px 12px 2px; line-height:1.2; }
.ms-rv-card .ms-rv-pr{ padding:0 12px 14px; color:var(--ms-gold); font-weight:700; font-size:15px; }
@media (max-width:600px){ .ms-rv{ padding:40px 14px 4px; } .ms-rv-head h2{ font-size:24px; } }

/* ───────────────────────────────────────────────────────────
   6) BLOG reading-progress bar + toast
   ─────────────────────────────────────────────────────────── */
.ms-readbar{
  position:fixed; top:0; left:0; height:3px; width:0;
  background:linear-gradient(90deg,var(--ms-gold),var(--ms-lgold));
  z-index:9999; transition:width .1s linear; box-shadow:0 0 8px rgba(201,162,39,.5);
}
.ms-toast{
  position:fixed; left:50%; bottom:28px; transform:translate(-50%,20px);
  background:var(--ms-forest); color:#fff; padding:13px 24px; border-radius:30px;
  font-size:13.5px; letter-spacing:.4px; box-shadow:0 12px 34px rgba(0,0,0,.28);
  opacity:0; pointer-events:none; transition:opacity .3s, transform .3s; z-index:99995;
}
.ms-toast.ms-show{ opacity:1; transform:translate(-50%,0); }
.ms-toast b{ color:var(--ms-lgold); }