/* ===================== ZCRAVE CAROUSELS UI ===================== */
:root{
  --zc-gap: 8px;
  --zc-card-w: clamp(220px, 22vw, 300px);
  --zc-radius: 6px;
  --zc-border: #f5f5f5;
  --zc-sale: #e10000;
  --zc-strike: #a0a0a0;
}

.zc-carousel{
  margin:30px 0px 30px 0px; width:100vw; max-width:100vw; margin-left:calc(-50vw + 50%);
  padding:0 0 0 15px; box-sizing:border-box; color:#000; text-transform:uppercase;
  font-family:"input-mono",monospace;
}
.zc-header{display:flex;align-items:center;justify-content:space-between;padding:0 4px 8px}
.zc-heading{margin:0;font-weight:200;letter-spacing:0em;font-size:18px;word-spacing:-4px;line-height:1.1}
.zc-nav{display:flex;gap:1px}
.zc-btn{border:0px solid var(--zc-border);background:#fff;color:#000;border-radius:999px;width:28px;height:28px;line-height:8px;text-align:center;font-size:18px;font-weight:200;cursor:pointer}
.zc-btn:hover{font-weight:400}

.zc-track{display:flex;gap:var(--zc-gap);margin:0;padding:0;list-style:none;overflow:auto hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scroll-behavior:smooth}
.zc-slide{flex:0 0 auto;width:var(--zc-card-w);scroll-snap-align:start}

/* Card */
.zc-card{display:block;background:#fff;color:inherit;text-decoration:none;border:0.5px solid var(--zc-border);border-radius:var(--zc-radius);overflow:hidden}
.zc-thumb{position:relative;display:block;aspect-ratio:3/4;overflow:hidden}
.zc-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:opacity .35s ease, transform .35s ease}
.zc-thumb img:not(.second){opacity:1;transform:scale(1.0)}
.zc-thumb img.second{opacity:0}
.zc-card:hover .zc-thumb img.second{opacity:1}
.zc-card:hover .zc-thumb img:not(.second){opacity:0}

.zc-meta{padding:10px 10px 10px}

/* Title row: title (left) + wishlist icon (right) */
.zc-row{display:flex;align-items:center;gap:8px}
.zc-row .zc-title{
  flex:1 1 auto;
  min-width:0;
  display:inline-block;
  color:inherit;
  text-decoration:none;
  margin:0;
  word-spacing: -4px;
  font-size:10px !important; line-height:1.15; font-weight:200!important; letter-spacing:0em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Price: current left, original right */
.zc-price{display:flex;align-items:baseline;gap:8px;font-size:11px !important;margin-top: 0px;font-weight:400!important}
body.single-product .price__amount-wrapper, body.single-product .price__amount-wrapper *{font-size:10px !important;font-weight:400!important}
.zc-price ins{order:1;color:#be1620!important;text-decoration:none;font-size:10px!important;font-weight:400!important}
.zc-price del{order:2;color:#000!important;font-size:10px !important;font-weight:400!important}

/* Wishlist icon */
.zc-wishlist-btn{
  flex:0 0 auto;
  background:none; border:none; padding:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.zc-wishlist-btn svg{width:18px;height:18px;fill:#000;stroke-width:0px;transition:fill .2s ease}
.zc-wishlist-btn:hover svg{fill:#720eec}
.zc-wishlist-btn.added svg { fill: var(--wc-primary, #720eec); }


/* Mobile */
@media (max-width:640px){
  :root{--zc-card-w:41vw}
  .zc-heading{font-size:14px;font-weight:200}
}

/* layout for title + wish icon */
.zc-card .zc-row { display:flex; align-items:center; gap:8px; }
.zc-card .zc-row .zc-title { flex:1 1 auto; min-width:0; }
.zc-card .zc-row .zc-wish { flex:0 0 auto; display:inline-flex; }

/* normalize YITH wrapper inside the card */
.zc-card .yith-wcwl-add-to-wishlist { margin:0; }

/* Turn the YITH link(s) into a 16x16 icon-only button */
.zc-card .yith-wcwl-add-to-wishlist a.add_to_wishlist,
.zc-card .yith-wcwl-add-to-wishlist .yith-wcwl-wishlistaddedbrowse a,
.zc-card .yith-wcwl-add-to-wishlist .yith-wcwl-wishlistexistsbrowse a {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:16px;
  height:16px;
  line-height:16px;
  text-indent:-9999px;          /* visually hide label text, keep for a11y */
  overflow:hidden;
  color:#000;                    /* default icon color */
  position:relative;
}

/* inject your bookmark SVG as a mask so it inherits currentColor */
.zc-card .yith-wcwl-add-to-wishlist a.add_to_wishlist::before,
.zc-card .yith-wcwl-add-to-wishlist .yith-wcwl-wishlistaddedbrowse a::before,
.zc-card .yith-wcwl-add-to-wishlist .yith-wcwl-wishlistexistsbrowse a::before {
  content:"";
  display:block;
  width:16px;
  height:16px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill-rule='evenodd' clip-rule='evenodd' d='M6.5 6h11v12L12 14.487 6.5 18V6zm.658.646V16.81L12 13.716l4.842 3.093V6.646H7.158z'/></svg>") no-repeat center/contain;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill-rule='evenodd' clip-rule='evenodd' d='M6.5 6h11v12L12 14.487 6.5 18V6zm.658.646V16.81L12 13.716l4.842 3.093V6.646H7.158z'/></svg>") no-repeat center/contain;
}

/* hover/active colors */
.zc-card .yith-wcwl-add-to-wishlist a.add_to_wishlist:hover { color: var(--wc-primary, #720eec); }

/* once added/existing, keep icon tinted primary and make it link to wishlist */
.zc-card .yith-wcwl-add-to-wishlist .yith-wcwl-wishlistaddedbrowse a,
.zc-card .yith-wcwl-add-to-wishlist .yith-wcwl-wishlistexistsbrowse a {
  color: var(--wc-primary, #720eec);
}

/* hide YITH inline feedback text/spinner inside the tiny icon area */
.zc-card .yith-wcwl-add-to-wishlist .feedback,
.zc-card .yith-wcwl-add-to-wishlist .ajax-loading {
  display:none !important;
}
