/* =========================================================================
   SHOPZY — Online Marketplace Theme
   Hand-written styles & animations (100% original)
   Vivid orange dense marketplace look. Works alongside Tailwind CSS.
   MIT-style license — you own this code.
   ========================================================================= */

:root {
  --brand: #f15a24;
  --brand-600: #e04708;
  --ink: #1f2430;
}

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

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

.font-display { font-family: 'Outfit', 'Mulish', sans-serif; }

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

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

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .55s cubic-bezier(.2,.7,.2,1), transform .55s cubic-bezier(.2,.7,.2,1); }
.reveal.in-view { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: .05s; }
.reveal-delay-2 { transition-delay: .1s; }
.reveal-delay-3 { transition-delay: .15s; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ---------- Product card (compact) ---------- */
.product-card { transition: transform .25s ease, box-shadow .25s ease; }
.product-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -24px rgba(31,36,48,.4); }
.product-card .product-img { transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.product-card:hover .product-img { transform: scale(1.06); }
.product-card .quick { opacity: 0; transition: opacity .25s ease; }
.product-card:hover .quick { opacity: 1; }

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

/* ---------- Sold bar ---------- */
.sold-track { background: rgba(255,255,255,.35); border-radius: 999px; overflow: hidden; height: 14px; position: relative; }
.sold-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #fde68a, #f59e0b); }
.sold-track.dark { background: #ffe4d3; }

/* ---------- Header on scroll ---------- */
.site-header { transition: box-shadow .3s ease; }
.site-header.scrolled { box-shadow: 0 8px 26px -16px rgba(31,36,48,.4); }

/* ---------- Hero slider ---------- */
.hero-slide { transition: opacity .7s ease; }
.hero-slide.is-hidden { opacity: 0; pointer-events: none; }

/* ---------- 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; border-radius: .375rem; }

/* ---------- Category circle ---------- */
.cat-circle { transition: transform .25s ease; }
.cat-circle:hover { transform: translateY(-4px); }
.cat-circle:hover .cat-circle-img { box-shadow: 0 14px 26px -16px rgba(241,90,36,.7); }
.cat-circle-img { transition: box-shadow .25s ease; }

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

/* ---------- Marquee ---------- */
.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; }

/* ---------- Range slider ---------- */
input[type="range"].brand-range { -webkit-appearance: none; appearance: none; height: 4px; border-radius: 999px; background: #dfe3ea; 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(241,90,36,.2); }
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: #f59e0b; letter-spacing: 1px; }

/* ---------- 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;
  }
}