:root{
  --bg:#FFFFFF; --bg-soft:#F7F8FA; --ink:#16181D; --muted:#5B6472; --border:#E6E8EC;
  --primary:#FF5A5F; --primary-dark:#E04347; --secondary:#0FA3B1;
  --success:#2EA043; --warning:#E0A800; --error:#D64545;
}

html{scroll-behavior:smooth}
body{-webkit-font-smoothing:antialiased}

/* Reveal animations (GSAP fallback: visible if JS off) */
.reveal{opacity:0;transform:translateY(24px)}
.no-js .reveal,
.reveal.is-in{opacity:1;transform:none}

@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1 !important;transform:none !important}
  html{scroll-behavior:auto}
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
}

/* Cards */
.tm-card{transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s, border-color .35s}
.tm-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px -12px rgba(20,24,29,.18);border-color:#D7DBE2}

/* --- Hotu brand polish ---------------------------------------------------- */

/* Soft film grain for hero depth (very subtle, non-distracting) */
.hotu-grain{position:absolute;inset:0;pointer-events:none;opacity:.5;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E")}

/* Aurora blobs — animated coloured glows behind the hero */
.hotu-aurora{position:absolute;border-radius:9999px;filter:blur(70px);opacity:.55;will-change:transform}
@keyframes drift{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(18px,-22px,0) scale(1.08)}}
.hotu-aurora-anim{animation:drift 16s ease-in-out infinite}

/* Gradient text accent */
.hotu-gradient-text{background:linear-gradient(95deg,#FF5A5F 0%,#FF8A5F 55%,#F2A900 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* Elevated primary button sheen on hover */
.hotu-btn{position:relative;overflow:hidden;isolation:isolate}
.hotu-btn::after{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .4s;
  background:linear-gradient(120deg,transparent 20%,rgba(255,255,255,.28) 50%,transparent 80%)}
.hotu-btn:hover::after{opacity:1}

/* Category pill icon ring */
.hotu-cat-ring{box-shadow:0 6px 18px -6px var(--ring,rgba(20,24,29,.25))}

/* Section eyebrow */
.hotu-eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-size:.72rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.18em;color:var(--primary)}
.hotu-eyebrow::before{content:"";width:1.5rem;height:1px;background:linear-gradient(90deg,transparent,var(--primary))}

@media (prefers-reduced-motion: reduce){
  .hotu-aurora-anim{animation:none}
}

/* Line clamp */
.clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.clamp-1{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}

/* Focus visible */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--secondary);outline-offset:2px;border-radius:6px
}

/* Skeleton shimmer */
.skeleton{position:relative;overflow:hidden;background:#EDEFF2;border-radius:12px}
.skeleton::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);
  animation:shimmer 1.4s infinite}
@keyframes shimmer{100%{transform:translateX(100%)}}

/* Range slider */
input[type=range]{-webkit-appearance:none;appearance:none;height:4px;border-radius:9999px;background:var(--border)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;
  background:var(--primary);cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.25)}
input[type=range]::-moz-range-thumb{width:18px;height:18px;border:none;border-radius:50%;background:var(--primary);cursor:pointer}

/* Cart badge pop */
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.4)}100%{transform:scale(1)}}
.badge-pop{animation:pop .4s ease}

/* Fly to cart clone */
.fly-clone{position:fixed;z-index:200;border-radius:12px;object-fit:cover;pointer-events:none;
  transition:all .8s cubic-bezier(.4,.1,.3,1)}

.no-scrollbar::-webkit-scrollbar{display:none}
.no-scrollbar{-ms-overflow-style:none;scrollbar-width:none}

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