/* ============================================================
   CALDEZONE — Custom CSS
   Stack: Tailwind CDN + Alpine.js + Swiper v11
   Brand: #E84B1A (primary), #1a1a1a (dark), Poppins
   ============================================================ */

[x-cloak] { display: none !important; }

html { scroll-behavior: smooth; }

/* ── Utility ─────────────────────────────── */
.scrollbar-hide { -ms-overflow-style:none; scrollbar-width:none; }
.scrollbar-hide::-webkit-scrollbar { display:none; }
.line-clamp-2 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.line-clamp-3 { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

/* ── Categories marquee ──────────────────── */
@keyframes catMarquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.cat-track {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 2rem;
  width: max-content;
  animation: catMarquee 28s linear infinite;
}
.cat-track:hover { animation-play-state: paused; }

/* ── Header ─────────────────────────────── */
.header-scrolled { box-shadow: 0 2px 20px rgba(0,0,0,.09); }

/* Nav underline active indicator */
.nav-link { position:relative; }
.nav-link::after { content:''; position:absolute; bottom:0; left:0; right:0; height:2px; background:#E84B1A; transform:scaleX(0); transition:transform .2s; }
.nav-link:hover::after,
.nav-link.active::after { transform:scaleX(1); }

/* Browse by Industry sidebar dropdown */
.browse-dropdown { min-width:220px; }
.browse-item { transition: background .15s, color .15s; }
.browse-item:hover { background:#fdf0ec; color:#E84B1A; }

/* ── Hero Slider ─────────────────────────── */
.hero-slider { height:540px; }
@media(max-width:1024px) { .hero-slider { height:460px; } }
@media(max-width:640px)  { .hero-slider { height:420px; } }

.hero-pagination { bottom:24px !important; }
.hero-pagination .swiper-pagination-bullet {
  width:8px; height:8px;
  background:rgba(0,0,0,.25); opacity:1;
  transition:all .3s;
}
.hero-pagination .swiper-pagination-bullet-active {
  width:28px; border-radius:4px;
  background:#E84B1A;
}

.hero-prev, .hero-next {
  width:44px !important; height:44px !important;
  background:#fff !important;
  border-radius:50% !important;
  box-shadow:0 2px 12px rgba(0,0,0,.12) !important;
  color:#1a1a1a !important;
  transition:background .2s, color .2s;
}
.hero-prev:hover, .hero-next:hover {
  background:#E84B1A !important;
  color:#fff !important;
}
.hero-prev::after, .hero-next::after { font-size:13px !important; font-weight:700; }
.hero-prev { left:20px !important; }
.hero-next { right:20px !important; }

/* ── Categories Slider ───────────────────── */
.cat-swiper .swiper-slide { width:auto; }

/* ── Products Slider ─────────────────────── */
.products-wrap { overflow:hidden; }

/* ── Countdown ───────────────────────────── */
.countdown-box {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:36px; padding:4px 8px;
  background:#1a1a1a; color:#fff;
  border-radius:6px; font-weight:700; font-size:15px; line-height:1.2;
}
.countdown-box.red { background:#E84B1A; }

/* ── Product Card ────────────────────────── */
.product-card:hover { border-color:#E84B1A; box-shadow:0 4px 24px rgba(0,0,0,.09); }
.product-card .add-btn { opacity:0; transform:translateY(6px); transition:all .25s; }
.product-card:hover .add-btn { opacity:1; transform:translateY(0); }

/* ── Category Circle ─────────────────────── */
.cat-circle { transition:border-color .2s, background .2s; }
.cat-circle:hover { border-color:#E84B1A !important; background:#fdf0ec !important; }
.cat-circle:hover svg { color:#E84B1A !important; }

/* ── 3-col Banners ───────────────────────── */
.feat-banner img { transition:transform .5s; }
.feat-banner:hover img { transform:scale(1.05); }

/* ── Tab pills ───────────────────────────── */
.tab-pill.active { background:#E84B1A; color:#fff; border-color:#E84B1A; }
.tab-pill:not(.active):hover { border-color:#E84B1A; color:#E84B1A; }

/* ── Form inputs focus ───────────────────── */
.form-input:focus { border-color:#E84B1A; outline:none; box-shadow:0 0 0 3px rgba(232,75,26,.1); }

/* ── Footer links ────────────────────────── */
footer a { display:inline-block; transition:color .2s, transform .2s; }
footer a:hover { color:#E84B1A; transform:translateX(3px); }