/* ======================================
   COLOR THEME + SNOW ONLY
   NO SIZE / NO LAYOUT CHANGES
====================================== */

/* ===== COLOR PALETTE ===== */
:root {
  --warm-orange: #f2994a;
  --soft-orange: #f6b17a;
  --warm-red: #eb5757;
  --deep-red: #c0392b;
}

/* ======================================
   FULL SITE BACKGROUND COLOR
====================================== */
body {
  background: linear-gradient(
    180deg,
    var(--warm-orange),
    var(--warm-red)
  );
  color: #fff;
}

/* ======================================
   HEAVY SNOW EFFECT (GLOBAL)
====================================== */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.9) 2px, transparent 3px),
    radial-gradient(circle, rgba(255,255,255,.7) 1.5px, transparent 2.5px),
    radial-gradient(circle, rgba(255,255,255,.5) 1px, transparent 2px);
  background-size:
    120px 120px,
    180px 180px,
    240px 240px;
  animation: snowFall 20s linear infinite;
  pointer-events: none;
  z-index: 9999;
}

@keyframes snowFall {
  from {
    background-position:
      0 0,
      0 0,
      0 0;
  }
  to {
    background-position:
      0 1400px,
      0 1800px,
      0 2200px;
  }
}

/* ======================================
   HEADER (KEEP WHITE)
====================================== */
header {
  background: #ffffff;
}

/* ======================================
   HERO COLOR ONLY
====================================== */
.hero {
  background: linear-gradient(
    135deg,
    var(--warm-orange),
    var(--warm-red)
  );
}

/* ======================================
   PRODUCTS SECTION COLOR
====================================== */
#printers {
  background: linear-gradient(
    180deg,
    var(--warm-orange),
    var(--deep-red)
  );
}

/* ======================================
   PRODUCT GRID BACKGROUND (BETWEEN CARDS)
====================================== */
.products {
  background: linear-gradient(
    180deg,
    var(--soft-orange),
    var(--warm-red)
  );
}

/* ======================================
   PRODUCT CARD COLORS ONLY
====================================== */
.product {
  background: #ffffff;
}

/* Product name */
.product h3 {
  color: #222;
}

/* Price */
.product span {
  color: var(--warm-red);
  font-weight: 600;
}

/* Buy button color */
.product button,
.product .buy-btn {
  background: linear-gradient(
    135deg,
    #ff7a18,
    #ff3d3d
  );
}

.product button:hover,
.product .buy-btn:hover {
  background: linear-gradient(
    135deg,
    #ff3d3d,
    #ff7a18
  );
}

/* ======================================
   FILTER BUTTON ACTIVE COLOR
====================================== */
.filters button.active {
  background: linear-gradient(
    135deg,
    #ff7a18,
    #ff3d3d
  );
  color: #fff;
  border-color: transparent;
}

/* ======================================
   FOOTER COLOR
====================================== */
footer {
  background: linear-gradient(
    135deg,
    var(--warm-red),
    var(--deep-red)
  );
  color: #fff;
}
/* =========================
   NEW ARRIVAL BADGE
========================= */
.product {
  position: relative; /* REQUIRED */
}

.badge-new {
  position: absolute;
  top: 14px;
  left: -6px;
  background: linear-gradient(135deg, #ff2d2d, #ff8a00);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 6px;
  transform: rotate(-12deg);
  box-shadow: 0 6px 16px rgba(0,0,0,0.25);
  z-index: 5;
}

/* small shine */
.badge-new::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,0.4),
    transparent
  );
  transform: translateX(-120%);
  animation: badgeShine 3s infinite;
}

@keyframes badgeShine {
  0% { transform: translateX(-120%); }
  40% { transform: translateX(120%); }
  100% { transform: translateX(120%); }
}

/* =========================
   ANIMATED NEW ARRIVAL BADGE
========================= */
.product {
  position: relative;
}

.badge-new {
  position: absolute;
  top: 14px;
  left: -8px;
  background: linear-gradient(135deg, #ff2d2d, #ff8a00);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  padding: 6px 14px;
  border-radius: 6px;
  transform: rotate(-12deg);
  box-shadow: 0 6px 18px rgba(0,0,0,0.3);
  z-index: 5;

  /* animation */
  animation: badgeFloat 3s ease-in-out infinite,
             badgePulse 1.6s ease-in-out infinite;
}

/* FLOAT UP & DOWN */
@keyframes badgeFloat {
  0%   { transform: translateY(0) rotate(-12deg); }
  50%  { transform: translateY(-4px) rotate(-12deg); }
  100% { transform: translateY(0) rotate(-12deg); }
}

/* PULSE GLOW */
@keyframes badgePulse {
  0% {
    box-shadow: 0 0 0 rgba(255,77,77,0.6);
  }
  70% {
    box-shadow: 0 0 18px rgba(255,138,0,0.9);
  }
  100% {
    box-shadow: 0 0 0 rgba(255,77,77,0.6);
  }
}

/* SHINE SWEEP */
.badge-new::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,0.55),
    transparent
  );
  transform: translateX(-120%);
  animation: badgeShine 2.8s infinite;
  border-radius: inherit;
}

@keyframes badgeShine {
  0%   { transform: translateX(-120%); }
  40%  { transform: translateX(120%); }
  100% { transform: translateX(120%); }
}

/* FORCE NEW BADGE ON ALL PRODUCTS (TEST) */
.product::before {
  content: "Available In Stock";
  position: absolute;
  top: 14px;
  left: -8px;
  background: linear-gradient(135deg, #ff2d2d, #ff8a00);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  padding: 6px 14px;
  border-radius: 6px;
  transform: rotate(-12deg);
  box-shadow: 0 6px 18px rgba(0,0,0,0.3);
  z-index: 5;

  animation: badgeFloat 2.5s ease-in-out infinite,
             badgePulse 1.4s ease-in-out infinite;
}

@keyframes badgeFloat {
  0%   { transform: translateY(0) rotate(-12deg); }
  50%  { transform: translateY(-6px) rotate(-12deg); }
  100% { transform: translateY(0) rotate(-12deg); }
}

@keyframes badgePulse {
  0%   { box-shadow: 0 0 0 rgba(255,77,77,0.5); }
  70%  { box-shadow: 0 0 20px rgba(255,138,0,0.9); }
  100% { box-shadow: 0 0 0 rgba(255,77,77,0.5); }
}

/* ==============================
   NEW ARRIVED – ONLY ANIMATION
============================== */

/* required */
.product {
  position: relative;
}

/* NEW badge */
.badge-new {
  position: absolute;
  top: 14px;
  left: -8px;
  background: linear-gradient(135deg, #ff2d2d, #ff8a00);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  padding: 6px 14px;
  border-radius: 6px;
  transform: rotate(-12deg);
  box-shadow: 0 6px 18px rgba(0,0,0,0.3);
  z-index: 5;
}

/* ==============================
   COOL ANIMATION – NEW ONLY
============================== */
.product.is-new {
  animation: newFloat 3.5s ease-in-out infinite;
}

@keyframes newFloat {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}

/* glow aura */
.product.is-new::before {
  content: "";
  position: absolute;
  inset: -8px;
  background: radial-gradient(
    circle at top,
    rgba(255,122,24,0.45),
    transparent 60%
  );
  filter: blur(14px);
  opacity: .8;
  z-index: -1;
  animation: newGlow 2.4s ease-in-out infinite;
}

@keyframes newGlow {
  0%   { opacity: .5; }
  50%  { opacity: 1; }
  100% { opacity: .5; }
}

/* shine sweep */
.product.is-new::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    transparent 20%,
    rgba(255,255,255,.6) 50%,
    transparent 80%
  );
  transform: translateX(-120%);
  animation: newShine 3s infinite;
  pointer-events: none;
}

@keyframes newShine {
  0%   { transform: translateX(-120%); }
  40%  { transform: translateX(120%); }
  100% { transform: translateX(120%); }
}

/* hover extra pop */
.product.is-new:hover {
  transform: translateY(-14px) scale(1.04);
  box-shadow: 0 35px 80px rgba(255,61,61,0.55);
}