/* =========================================================================
   ZENOVA — Fashion Marketplace Theme
   Hand-written styles & animations (100% original)
   Bold red/black high-contrast marketplace look. Works with Tailwind CSS.
   MIT-style license — you own this code.
   ========================================================================= */

:root {
  --brand: #dc2626;
  --brand-700: #b91c1c;
  --accent: #f59e0b;
  --ink: #141414;
}

* { -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }

body {
  font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif;
  color: var(--ink);
  background: #ffffff;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.font-display { font-family: 'Archivo', 'Manrope', sans-serif; }
.tracking-tightish { letter-spacing: -.01em; }

::selection { background: var(--brand); color: #fff; }

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #cfcfcf; border-radius: 999px; border: 2px solid #f1f1f1; }
::-webkit-scrollbar-thumb:hover { background: var(--brand); }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1); }
.reveal.in-view { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: .06s; }
.reveal-delay-2 { transition-delay: .12s; }
.reveal-delay-3 { transition-delay: .18s; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ---------- Product card ---------- */
.product-card { transition: border-color .25s ease, box-shadow .3s ease; }
.product-card:hover { border-color: rgba(20,20,20,.18); box-shadow: 0 22px 44px -26px rgba(20,20,20,.4); }
.product-card .product-img { transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.product-card:hover .product-img { transform: scale(1.06); }

/* hover action column (compare / wishlist / cart) */
.action-col { opacity: 0; transform: translateX(10px); transition: opacity .3s ease, transform .3s ease; }
.product-card:hover .action-col { opacity: 1; transform: none; }
.action-col button { transition: background-color .2s ease, color .2s ease, transform .2s ease; }
.action-col button:hover { transform: translateY(-2px); }

/* bottom add bar */
.add-bar { transform: translateY(100%); opacity: 0; transition: transform .3s ease, opacity .3s ease; }
.product-card:hover .add-bar { transform: none; opacity: 1; }

/* Phone / touch: keep Add visible (hover never fires) */
@media (hover: none), (max-width: 1023px) {
  .action-col { display: none; }
  .add-bar { transform: none; opacity: 1; }
}

/* ---------- Wishlist / compare active ---------- */
.wish-btn.is-active { background: var(--brand); color: #fff; }
.wish-btn.is-active svg { fill: currentColor; }
.cmp-btn.is-active { background: var(--ink); color: #fff; }

/* ---------- Header on scroll ---------- */
.site-header { transition: box-shadow .3s ease; }
.site-header.scrolled { box-shadow: 0 8px 30px -16px rgba(20,20,20,.35); }

/* ---------- Buttons ---------- */
.btn-shine { position: relative; overflow: hidden; }
.btn-shine::after { content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%; background: linear-gradient(120deg, transparent, rgba(255,255,255,.4), transparent); transform: skewX(-20deg); }
.btn-shine:hover::after { left: 130%; transition: left .8s ease; }

/* ---------- Cart badge ---------- */
.cart-count.bump { animation: bump .4s ease; }
@keyframes bump { 0%{transform:scale(1)} 50%{transform:scale(1.4)} 100%{transform:scale(1)} }

/* ---------- Flash countdown chips ---------- */
.cd-chip { background: var(--ink); color: #fff; }

/* ---------- Marquee (brands) ---------- */
.marquee { overflow: hidden; }
.marquee__track { display: flex; width: max-content; animation: marquee 28s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Drawers / overlay / menu ---------- */
.drawer { transition: transform .42s cubic-bezier(.4,0,.2,1); }
.overlay { transition: opacity .35s ease; }
.mobile-menu { transition: transform .4s cubic-bezier(.4,0,.2,1); }
.filter-panel { transition: transform .4s cubic-bezier(.4,0,.2,1); }

/* ---------- Accordion ---------- */
.acc-body { max-height: 0; overflow: hidden; transition: max-height .4s ease; }
@media (min-width: 1024px) {
  .acc-body { max-height: none !important; overflow: visible; }
}

/* ---------- Range slider ---------- */
input[type="range"].brand-range { -webkit-appearance: none; appearance: none; height: 4px; border-radius: 999px; background: #e5e5e5; outline: none; }
input[type="range"].brand-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--brand); cursor: pointer; box-shadow: 0 0 0 4px rgba(220,38,38,.18); }
input[type="range"].brand-range::-moz-range-thumb { width: 18px; height: 18px; border: none; border-radius: 50%; background: var(--brand); cursor: pointer; }

/* ---------- Stars ---------- */
.stars { color: #facc15; letter-spacing: 1px; }

/* ---------- Section heading underline ---------- */
.heading-bar { position: relative; padding-left: 14px; }
.heading-bar::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 5px; height: 70%; background: var(--brand); border-radius: 2px; }

/* ---------- Category list (hero) ---------- */
.cat-link { transition: background-color .2s ease, padding-left .2s ease, color .2s ease; }
.cat-link:hover { background: #f6f6f6; padding-left: 1.25rem; color: var(--brand); }

/* ---------- Toast ---------- */
.toast { transition: transform .4s cubic-bezier(.2,.8,.2,1), opacity .4s ease; }

/* ---------- Misc ---------- */
body.no-scroll { overflow: hidden; }

/* Price: never split currency from digits; keep card rows aligned on phone */
.product-card-price,
.product-card .pc-price,
.product-card .pc-price-was,
.product-card .dn-price,
.product-card .dn-price-was,
.product-card .sh-price,
.product-card .sh-price-was,
.product-card .dm-price,
.product-card .dm-price-was,
.product-card .fk-price,
.product-card .fk-price-was,
.product-card .rw-price,
.product-card .rw-price-was,
.product-card .hl-price,
.product-card .hl-price-was,
.product-card .nr-price,
.product-card .nr-price-was,
.product-card .tz-price {
  white-space: nowrap !important;
  word-break: keep-all;
  overflow-wrap: normal;
}
.product-card-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.375rem;
  row-gap: 0.125rem;
  min-height: 1.5rem;
}
@media (max-width: 640px) {
  .product-card-price,
  .sh-card-price,
  .dm-card-price,
  .fk-card-price,
  .dn-card-price,
  .nr-card-price,
  .rw-card-price,
  .hl-card-price,
  .tz-price {
    flex-direction: column;
    align-items: flex-start;
    flex-wrap: nowrap;
    gap: 0.125rem;
  }
  .product-card-price > span,
  .sh-card-price > span,
  .dm-card-price > span,
  .fk-card-price > span,
  .dn-card-price > span,
  .nr-card-price > span,
  .hl-card-price > span,
  .tz-price > span {
    white-space: nowrap !important;
    display: inline-block;
    max-width: 100%;
  }
  .product-card-price > span:first-child {
    font-size: 0.9rem;
  }
}

/* WaveSeller developer credit — high visibility strip */
.ws-dev-credit {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.95rem 1rem;
  background: #020617;
  color: #f8fafc;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-align: center;
  border-top: 3px solid #38bdf8;
}
.ws-dev-credit strong {
  color: #38bdf8;
  font-weight: 800;
  font-size: 1.05rem;
  margin-left: 0.25rem;
  letter-spacing: 0.02em;
}
@media (max-width: 640px) {
  .ws-dev-credit {
    font-size: 0.9rem;
    padding: 1rem 0.75rem;
  }
  .ws-dev-credit strong {
    font-size: 1rem;
  }
}

/* ---------- Floating chat + back-to-top (DP-Site method, Zenova colors) ---------- */
:root {
  --floating-action-right: max(1.25rem, env(safe-area-inset-right, 0px));
  --floating-action-bottom: max(1.125rem, env(safe-area-inset-bottom, 0px));
  --floating-action-size: 3.25rem;
  --floating-action-gap: 0.75rem;
  --floating-action-shadow: 0 18px 40px -14px rgba(20, 20, 20, 0.4);
}

#backToTop.back-to-top {
  position: fixed;
  right: var(--floating-action-right);
  bottom: var(--floating-action-bottom);
  z-index: 36;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  min-width: 44px;
  min-height: 44px;
  border: none;
  border-radius: 9999px;
  cursor: pointer;
  background: var(--ink, #141414);
  color: #fff;
  box-shadow: var(--floating-action-shadow);
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, 0.35rem, 0);
  transition: opacity .2s ease, transform .2s ease, background .15s ease, bottom .2s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
#backToTop.back-to-top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translate3d(0, 0, 0);
}
#backToTop.back-to-top:hover,
#backToTop.back-to-top:active {
  background: var(--brand, #dc2626);
}

.floating-chat {
  position: fixed;
  right: var(--floating-action-right);
  bottom: var(--floating-action-bottom);
  z-index: 35;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.625rem;
  /* Let clicks pass through empty stack space to #backToTop underneath */
  pointer-events: none;
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.floating-chat__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.85) translateY(0.5rem);
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease, visibility .22s ease;
}
.floating-chat__actions.is-open {
  opacity: 1;
  visibility: visible;
  transform: scale(1) translateY(0);
  pointer-events: auto;
}
.floating-chat__btn,
.floating-chat__trigger {
  display: grid;
  place-items: center;
  border: none;
  border-radius: 9999px;
  cursor: pointer;
  pointer-events: auto;
  color: #fff;
  box-shadow: var(--floating-action-shadow);
  transition: transform .15s ease, filter .15s ease, background .15s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.floating-chat__btn {
  width: 3rem;
  height: 3rem;
  min-width: 44px;
  min-height: 44px;
}
.floating-chat__trigger {
  width: var(--floating-action-size);
  height: var(--floating-action-size);
  min-width: 48px;
  min-height: 48px;
  background: var(--brand, #dc2626);
}
.floating-chat__btn--whatsapp {
  background: #16a34a;
}
.floating-chat__btn--messenger {
  background: #2563eb;
}
@media (hover: hover) {
  .floating-chat__btn:hover,
  .floating-chat__trigger:hover {
    transform: translateY(-2px);
    filter: brightness(1.06);
  }
}
.floating-chat__icon {
  grid-area: 1 / 1;
}
.floating-chat__icon--close {
  display: none;
}
.floating-chat__trigger[aria-expanded="true"] .floating-chat__icon--open {
  display: none;
}
.floating-chat__trigger[aria-expanded="true"] .floating-chat__icon--close {
  display: block;
}

/* DP method: when chat exists, lift back-to-top above the chat trigger */
body.has-floating-chat #backToTop.back-to-top {
  right: var(--floating-action-right);
  bottom: calc(var(--floating-action-bottom) + var(--floating-action-size) + var(--floating-action-gap));
  width: var(--floating-action-size);
  height: var(--floating-action-size);
}
body.floating-chat-open #backToTop.back-to-top {
  opacity: 0 !important;
  pointer-events: none !important;
}

@media (max-width: 480px) {
  :root {
    --floating-action-right: max(1rem, env(safe-area-inset-right, 0px));
    --floating-action-bottom: max(0.75rem, env(safe-area-inset-bottom, 0px));
    --floating-action-size: 3.125rem;
  }
  .floating-chat__btn {
    width: 2.75rem;
    height: 2.75rem;
  }
  .floating-chat__btn svg {
    width: 1.25rem;
    height: 1.25rem;
  }
}