:root {
  --brand: #7a2e2a;
  --brand-2: #c08a3a;
  --ink: #151515;
  --muted: #6b7280;
  --bg: #fff7f2;
  --radius: 1.25rem;
}

html {
  scroll-behavior: smooth
}

body {
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color: var(--ink);
}

a {
  color: inherit
}

.text-brand {
  color: var(--brand) !important
}

.btn-brand {
  background: linear-gradient(135deg, var(--brand), #9b3b35);
  border: none;
  color: #fff;
  border-radius: 999px;
  padding: .75rem 1.1rem;
  box-shadow: 0 10px 30px rgba(122, 46, 42, .25);
}

.btn-brand:hover {
  filter: brightness(.98);
  color: #fff
}

.btn-outline-brand {
  border: 1px solid rgba(122, 46, 42, .5);
  color: var(--brand);
  border-radius: 999px;
  padding: .75rem 1.1rem;
}

.btn-outline-brand:hover {
  background: rgba(122, 46, 42, .06)
}

.topbar {
  font-size: .9rem;
  background: #111;
  color: #fff
}

.topbar a {
  color: #fff;
  text-decoration: none;
  opacity: .95
}

.hero {
  background: radial-gradient(1000px 500px at 15% 10%, rgba(192, 138, 58, .22), transparent 60%),
    radial-gradient(1000px 500px at 85% 30%, rgba(122, 46, 42, .18), transparent 55%),
    linear-gradient(180deg, var(--bg), #fff);
}

.hero-card {
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .7);
  border: 1px solid rgba(0, 0, 0, .06);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .06);
}

.k-badge {
  display: inline-flex;
  gap: .45rem;
  align-items: center;
  padding: .35rem .7rem;
  border-radius: 999px;
  background: rgba(122, 46, 42, .08);
  color: var(--brand);
  font-weight: 700;
  font-size: .85rem;
}

.section {
  padding: 72px 0
}

.section-title {
  letter-spacing: -.02em;
  font-weight: 800
}

.section-sub {
  color: var(--muted);
  max-width: 56ch
}

.card-soft {
  border-radius: var(--radius);
  border: 1px solid rgba(0, 0, 0, .06);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .06);
}

.card-soft:hover {
  transform: translateY(-2px);
  transition: .2s
}

.icon-pill {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(192, 138, 58, .14);
  color: var(--brand);
}

.category-tile {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: #fff
}

.category-tile .bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(122, 46, 42, .12), rgba(192, 138, 58, .10))
}

.category-tile .content {
  position: relative;
  padding: 22px
}

.category-tile h5 {
  font-weight: 800;
  margin: 0
}

.category-tile p {
  color: var(--muted);
  margin: .35rem 0 0
}

.product-card img {
  border-radius: 1.1rem;
  width: 100%;
  height: 550px;
  aspect-ratio: 4/3;
  object-fit: cover;
  background: #f3f4f6

}

.product-card .price {
  font-weight: 800;
  color: var(--brand)
}

.ribbon {
  position: absolute;
  top: 14px;
  left: 14px;
  background: rgba(122, 46, 42, .92);
  color: #fff;
  padding: .35rem .65rem;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 700;
}

.stats {
  background: linear-gradient(135deg, rgba(122, 46, 42, .06), rgba(192, 138, 58, .06));
  border: 1px solid rgba(0, 0, 0, .05);
  border-radius: var(--radius);
  padding: 26px;
}

.footer {
  background: #0f0f0f;
  color: #fff
}

.footer a {
  color: #fff;
  text-decoration: none;
  opacity: .92
}

.footer a:hover {
  opacity: 1
}

.form-control,
.form-select {
  border-radius: 14px;
  border: 1px solid rgba(0, 0, 0, .12);
  padding: .75rem .9rem;
}

.form-control:focus,
.form-select:focus {
  box-shadow: 0 0 0 .25rem rgba(122, 46, 42, .12);
  border-color: rgba(122, 46, 42, .45);
}

.toast-container {
  z-index: 1080
}

.small-muted {
  color: var(--muted);
  font-size: .92rem
}


/* --- Motion --- */

@keyframes floaty {
  0% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-10px);
  }

  100% {
    transform: translateY(0px);
  }
}

.hero-float {
  animation: floaty 6s ease-in-out infinite;
}

.glow {
  box-shadow: 0 18px 70px rgba(122, 46, 42, .12);
}

/* --- Light / Aurora background --- */
.bg-aurora {
  position: absolute;
  inset: -120px;
  background:
    radial-gradient(600px 400px at 20% 20%, rgba(192, 138, 58, .22), transparent 60%),
    radial-gradient(700px 500px at 80% 30%, rgba(122, 46, 42, .18), transparent 60%),
    radial-gradient(600px 500px at 50% 80%, rgba(14, 165, 233, .10), transparent 60%),
    linear-gradient(180deg, rgba(255, 247, 242, 1), rgba(255, 255, 255, 1));
  filter: blur(0px);
  animation: auroraMove 14s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes auroraMove {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }

  100% {
    transform: translate3d(-20px, -10px, 0) scale(1.03);
  }
}

.light-spot {
  position: fixed;
  width: 520px;
  height: 520px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .55), rgba(192, 138, 58, .14) 35%, rgba(122, 46, 42, .08) 60%, transparent 72%);
  mix-blend-mode: screen;
  pointer-events: none;
  transform: translate(-50%, -50%);
  opacity: .65;
  filter: blur(6px);
  z-index: 0;
}

body>* {
  position: relative;
  z-index: 1;
}

.hero {
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(900px 600px at 10% 10%, rgba(255, 255, 255, .75), transparent 55%);
  pointer-events: none;
}

/* --- Full-width home slider --- */
.hero-slider {
  width: 100%;
}

.hero-slider .carousel-item img {
  height: 100vh;
  min-height: 520px;
  object-fit: cover;
}

@media (max-width: 768px) {
  .hero-slider .carousel-item img {
    height: 42vh;
  }
}

.glass {
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(255, 255, 255, .55);
  backdrop-filter: blur(10px) saturate(160%);
}

.btn-brand {
  position: relative;
  overflow: hidden;
}

.btn-brand::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -80%;
  width: 60%;
  height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: rotate(18deg);
  animation: sheen 5.5s ease-in-out infinite;
}

@keyframes sheen {
  0% {
    left: -80%;
    opacity: 0;
  }

  20% {
    opacity: .9;
  }

  45% {
    left: 140%;
    opacity: 0;
  }

  100% {
    left: 140%;
    opacity: 0;
  }
}