/*
  ShopperMarket View Models (Add-On)
  Option A (Safe): CSS + wrapper classes only.
  v1.1.0 adds optional CTA styles for injected buttons.
*/

/* v1.2.0 adds Quick View modal + Like + Recently viewed */

.smvm-wrap{width:100%;}

/* ========= Baseline Grid (safe + modern) ========= */
.smvm-wrap .sm-grid-wrapper{width:100%;}
.smvm-wrap .sm-grid-container{
  display:grid;
  gap:18px;
  align-items:stretch;
}

.smvm-wrap .sm-grid-card{
  position:relative;
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 10px 24px rgba(0,0,0,.06);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.smvm-wrap .sm-grid-card:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 34px rgba(0,0,0,.10);
  border-color:rgba(0,0,0,.12);
}

/* Image hero (works with your parent structure: .sm-img-ratio img) */
.smvm-wrap .sm-grid-card img{
  width:100%;
  height:auto;
  display:block;
  aspect-ratio:4/3;
  background:#f7f7f8;
  padding:10px;
  object-fit:contain;
}

/* If the parent uses a ratio wrapper, keep it clean */
.smvm-wrap .sm-img-ratio{background:#f7f7f8;}

.smvm-wrap .sm-card-body-short{padding:14px 14px 16px 14px;}

.smvm-wrap .sm-card-title{
  font-size:18px;
  line-height:1.15;
  margin:0 0 10px 0;
  letter-spacing:-0.2px;
}
.smvm-wrap .sm-card-title a{color:#111;text-decoration:none;}
.smvm-wrap .sm-card-title a{color:#111 !important;text-decoration:none !important;}
.smvm-wrap .sm-card-title a:hover{
  text-decoration:underline;
  text-decoration-thickness:2px;
}

/* Optional excerpt (if your theme/plugin prints one) */
.smvm-wrap .sm-card-excerpt,
.smvm-wrap .sm-card-body-short p{
  color:rgba(0,0,0,.70);
  font-size:14px;
  line-height:1.35;
  margin:0 0 12px 0;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* ========= CTA Row (only visible when add-on injects buttons) ========= */
.smvm-wrap .smvm-cta-row{
  display:flex;
  gap:10px;
  margin-top:12px;
}

.smvm-wrap .smvm-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:100%;
  padding:12px 14px;
  border-radius:12px;
  font-weight:800;
  font-size:14px;
  text-decoration:none;
  transition:transform .12s ease, box-shadow .12s ease, opacity .12s ease;
  white-space:nowrap;
  border:0;
  cursor:pointer;
}

.smvm-wrap .smvm-btn-primary{
  background:#111;
  color:#fff !important;
  box-shadow:0 10px 18px rgba(0,0,0,.18);
}
.smvm-wrap .smvm-btn-primary:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 26px rgba(0,0,0,.22);
}

.smvm-wrap .smvm-btn-secondary{
  background:#fff;
  color:#111 !important;
  border:1px solid rgba(0,0,0,.15);
}
.smvm-wrap .smvm-btn-secondary:hover{
  transform:translateY(-1px);
}

/* ========= Badge + Heart (if present) ========= */
.smvm-wrap .sm-badge,
.smvm-wrap .sm-card-badge{
  position:absolute;
  top:12px;
  left:12px;
  z-index:5;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(17,17,17,.92);
  color:#fff;
  font-size:12px;
  font-weight:700;
  box-shadow:0 10px 20px rgba(0,0,0,.18);
}

/* Like button (top-right heart) */
.smvm-wrap .smvm-like{
  position:absolute;
  top:12px;
  right:12px;
  z-index:6;
  width:38px;
  height:38px;
  border-radius:999px;
  background:rgba(255,255,255,.95);
  border:1px solid rgba(0,0,0,.08);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 10px 20px rgba(0,0,0,.10);
  cursor:pointer;
}

/* ========= Pagination (fixes bullet list / ugly numbers) ========= */
.smvm-wrap .sm-pagination,
.smvm-wrap .sm-grid-pagination,
.smvm-wrap nav.pagination{
  margin:18px 0;
}

.smvm-wrap .sm-pagination ul,
.smvm-wrap .sm-grid-pagination ul,
.smvm-wrap .page-numbers{
  list-style:none !important;
  padding:0 !important;
  margin:0 !important;
}

.smvm-wrap .sm-pagination ul,
.smvm-wrap .sm-grid-pagination ul{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
}

.smvm-wrap .sm-pagination li,
.smvm-wrap .sm-grid-pagination li{margin:0 !important;}

.smvm-wrap .sm-pagination a,
.smvm-wrap .sm-pagination span,
.smvm-wrap .sm-grid-pagination a,
.smvm-wrap .sm-grid-pagination span,
.smvm-wrap a.page-numbers,
.smvm-wrap span.page-numbers{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:38px;
  height:38px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.12);
  text-decoration:none !important;
  color:#111 !important;
  background:#fff;
  font-weight:700;
}

.smvm-wrap .sm-pagination .current,
.smvm-wrap .sm-grid-pagination .current,
.smvm-wrap span.page-numbers.current{
  background:#111;
  color:#fff !important;
  border-color:#111;
}

.smvm-wrap .sm-pagination a:hover,
.smvm-wrap .sm-grid-pagination a:hover,
.smvm-wrap a.page-numbers:hover{
  transform:translateY(-1px);
}
.smvm-wrap .smvm-like:hover{transform:translateY(-1px);}
.smvm-wrap .smvm-like-icon{font-size:16px;line-height:1;color:#111;opacity:.7;}
.smvm-wrap .sm-grid-card[data-smvm-liked="1"] .smvm-like-icon{opacity:1;}

/* Quick View modal */
.smvm-qv{position:fixed;inset:0;z-index:99999;display:none;}
.smvm-qv[aria-hidden="false"]{display:block;}
.smvm-qv__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55);}
.smvm-qv__panel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(860px,92vw);max-height:86vh;overflow:auto;background:#fff;border-radius:18px;box-shadow:0 24px 60px rgba(0,0,0,.35);}
.smvm-qv__close{position:sticky;top:0;float:right;margin:10px 10px 0 0;width:40px;height:40px;border-radius:999px;border:1px solid rgba(0,0,0,.10);background:#fff;cursor:pointer;font-size:22px;line-height:1;}
.smvm-qv__content{padding:18px;}

.smvm-qv-card{display:grid;grid-template-columns: minmax(220px, 320px) 1fr;gap:16px;align-items:start;}
.smvm-qv-img img{width:100%;height:auto;display:block;aspect-ratio:4/3;object-fit:contain;background:#f7f7f8;padding:10px;border-radius:14px;}
.smvm-qv-title{margin:0 0 8px 0;font-size:20px;line-height:1.15;letter-spacing:-0.2px;}
.smvm-qv-excerpt{margin:0 0 14px 0;color:rgba(0,0,0,.72);}
.smvm-qv-actions{display:flex;gap:10px;}

@media (max-width: 720px){
  .smvm-qv-card{grid-template-columns:1fr;}
}

/* Saved (wishlist / history) grids */
.smvm-saved-wrap{margin:16px 0;}
.smvm-saved-title{margin:0 0 12px 0;font-size:18px;}
.smvm-saved-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
@media (max-width: 1024px){.smvm-saved-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width: 640px){.smvm-saved-grid{grid-template-columns:repeat(1,1fr);}}

/* ========= Image fit modes ========= */
.smvm-fit-cover .sm-grid-card img{ object-fit:cover; padding:0; }
.smvm-fit-cover .sm-img-ratio{ background:#f0f0f0; }

.smvm-fit-contain .sm-grid-card img{ object-fit:contain; }

/* ========= Responsive guard ========= */
@media (max-width: 1024px){
  .smvm-wrap .sm-grid-container{grid-template-columns:repeat(2,1fr) !important;}
}
@media (max-width: 640px){
  .smvm-wrap .sm-grid-container{grid-template-columns:repeat(1,1fr) !important;}
  .smvm-wrap .smvm-cta-row{flex-direction:column;}
}

/* ========= View tweaks ========= */
.smvm-view-wirecutter .sm-card-title{font-size:18px;}

.smvm-view-minimal .sm-grid-card{
  border-radius:14px;
  border:1px solid rgba(0,0,0,.06);
  box-shadow:none;
}
.smvm-view-minimal .sm-grid-card:hover{transform:none;box-shadow:0 10px 24px rgba(0,0,0,.06);}
.smvm-view-minimal .sm-grid-container{gap:14px;}

.smvm-view-list_compact .sm-grid-container{grid-template-columns:repeat(1,1fr) !important;gap:10px;}
.smvm-view-list_compact .sm-grid-card{display:flex;align-items:center;gap:12px;padding:10px;border-radius:14px;}
.smvm-view-list_compact .sm-grid-card img{width:96px;height:96px;flex:0 0 96px;aspect-ratio:1/1;padding:8px;border-radius:12px;background:#fafafa;}
.smvm-view-list_compact .sm-card-body-short{padding:0;flex:1 1 auto;}
.smvm-view-list_compact .smvm-cta-row{margin-top:8px;}

/* ========= Pagination (fix bullets / ugly lists) ========= */
.smvm-wrap .sm-pagination,
.smvm-wrap .sm-grid-pagination,
.smvm-wrap nav.pagination{margin:18px 0;}

.smvm-wrap .sm-pagination ul,
.smvm-wrap .page-numbers,
.smvm-wrap .sm-grid-pagination ul{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}

.smvm-wrap .sm-pagination li,
.smvm-wrap .sm-grid-pagination li{margin:0;padding:0;}

.smvm-wrap .sm-pagination a,
.smvm-wrap .sm-pagination span,
.smvm-wrap a.page-numbers,
.smvm-wrap span.page-numbers{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:40px;
  height:40px;
  padding:0 12px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  color:#111 !important;
  text-decoration:none !important;
  font-weight:800;
  font-size:14px;
}

.smvm-wrap .sm-pagination a:hover,
.smvm-wrap a.page-numbers:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 20px rgba(0,0,0,.08);
}

.smvm-wrap .page-numbers.current,
.smvm-wrap .sm-pagination .current{
  background:#111;
  color:#fff !important;
  border-color:#111;
}

.smvm-wrap .page-numbers.dots{min-width:auto;padding:0 10px;opacity:.6;}