:root {
  --rn-brand: #007aff;
  --rn-navy: #071123;
  --rn-soft: #eef6ff;
  --rn-line: rgba(15, 23, 42, .08);
  --rn-shadow: 0 24px 70px rgba(15, 23, 42, .10);
}

body {
  background:
    radial-gradient(circle at top right, rgba(0, 122, 255, .11), transparent 32rem),
    linear-gradient(180deg, #f7fbff 0%, #ffffff 38%, #f8fafc 100%) !important;
}

#topbar {
  background: linear-gradient(90deg, #071123, #0c2450, #007aff) !important;
  box-shadow: 0 12px 35px rgba(7, 17, 35, .18);
}

.glass-nav {
  background: rgba(255, 255, 255, .82) !important;
  border-bottom: 1px solid rgba(15, 23, 42, .06) !important;
  box-shadow: 0 18px 60px rgba(15, 23, 42, .07);
}

#hero {
  min-height: 74vh;
}

.hero-float { animation: none !important; }

#hero::before,
#hero::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
  filter: blur(6px);
}

#hero::before {
  width: 22rem;
  height: 22rem;
  right: -8rem;
  top: 4rem;
  background: rgba(0, 122, 255, .12);
}

#hero::after {
  width: 16rem;
  height: 16rem;
  left: -5rem;
  bottom: 2rem;
  background: rgba(37, 211, 102, .10);
}

.gradient-text {
  background: linear-gradient(135deg, #071123 0%, #007aff 58%, #20c997 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}

.product-card,
.category-products-box,
#categories a,
.countdown-box {
  border: 1px solid var(--rn-line) !important;
  box-shadow: 0 18px 55px rgba(15, 23, 42, .07) !important;
}

.category-products-box {
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(248,250,252,.92)),
    radial-gradient(circle at top left, rgba(0, 122, 255, .08), transparent 22rem) !important;
  overflow: hidden;
  position: relative;
}

.category-products-box::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(0, 122, 255, .12), transparent 32%);
  opacity: .45;
}

.product-card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(248, 251, 255, .96)) padding-box,
    linear-gradient(145deg, rgba(2, 6, 23, .72), rgba(255, 255, 255, .86) 42%, rgba(2, 6, 23, .50)) border-box !important;
  border: 1px solid transparent !important;
  border-radius: 1.7rem !important;
  box-shadow: 0 20px 54px rgba(2, 6, 23, .13), 0 0 0 1px rgba(2, 6, 23, .08), 0 1px 0 rgba(255, 255, 255, .9) inset !important;
  isolation: isolate;
  contain: layout paint style;
  transition: transform .2s ease, box-shadow .2s ease !important;
}

.product-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at 82% 0%, rgba(2, 6, 23, .18), transparent 34%),
    radial-gradient(circle at 10% 88%, rgba(37, 211, 102, .12), transparent 30%);
  opacity: .82;
  pointer-events: none;
}

.product-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,.36), transparent 36%, rgba(0,122,255,.05));
  opacity: .65;
  z-index: 1;
}

.product-card > * {
  position: relative;
  z-index: 2;
}

.product-card > div:first-child {
  margin: .62rem;
  border-radius: 1.25rem !important;
  background:
    linear-gradient(145deg, #ffffff, #eef6ff),
    radial-gradient(circle at 35% 20%, rgba(0, 122, 255, .12), transparent 42%) !important;
  box-shadow: inset 0 0 0 1px rgba(0, 122, 255, .06), 0 14px 30px rgba(15, 23, 42, .06);
}

.product-card > div:first-child img {
  filter: drop-shadow(0 16px 18px rgba(15, 23, 42, .10));
  transform: scale(.98);
  transition: transform .28s ease, filter .28s ease;
}

.product-card h3 {
  letter-spacing: -.015em;
}

.product-card .text-brand {
  text-shadow: 0 10px 28px rgba(0, 122, 255, .18);
}

.product-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 26px 62px rgba(2, 6, 23, .16), 0 0 0 1px rgba(2, 6, 23, .18) !important;
}

@media (hover: none), (pointer: coarse) {
  .product-card,
  .product-card:hover,
  .product-card > div:first-child img,
  .product-card:hover > div:first-child img {
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
  .glass-nav { backdrop-filter: none !important; }
}

.product-card:hover > div:first-child img {
  transform: scale(1.035);
  filter: drop-shadow(0 22px 24px rgba(15, 23, 42, .14));
}

.product-card .bg-brand,
.product-card button.bg-brand,
a.bg-brand {
  background: linear-gradient(135deg, #007aff, #005bd1) !important;
  box-shadow: 0 14px 28px rgba(0, 122, 255, .22);
}

.product-actions {
  background: rgba(248, 250, 252, .82);
  border: 1px solid rgba(226, 232, 240, .82);
  border-radius: 1rem;
  padding: .35rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .92);
}

.product-actions button,
.product-actions a {
  border-radius: .82rem !important;
  box-shadow: none !important;
}

.product-actions button:first-child {
  box-shadow: 0 10px 22px rgba(0, 122, 255, .24) !important;
}

.bg-ws,
a.bg-ws {
  background: linear-gradient(135deg, #25d366, #16a34a) !important;
}

#cart-link {
  background: linear-gradient(135deg, #071123, #10254a) !important;
  border: 1px solid rgba(255,255,255,.12);
}

#floating-wa {
  width: 3.25rem !important;
  height: 3.25rem !important;
  padding: 0 !important;
  border-radius: 9999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  animation: none !important;
  transform: none !important;
  transition: none !important;
  box-shadow: 0 18px 40px rgba(34, 197, 94, .38) !important;
}

#floating-wa:hover,
#floating-wa.floating-btn,
#floating-wa.floating-btn:hover {
  animation: none !important;
  transform: none !important;
  transition: none !important;
}

#floating-wa span {
  display: none !important;
}

#floating-wa svg {
  width: 1.65rem !important;
  height: 1.65rem !important;
}

footer {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}

.home-category-card { contain: layout paint style; }
.home-category-card .home-category-image img { padding: .65rem !important; transition: transform .2s ease; }
.home-category-card:hover .home-category-image img { transform: scale(1.04); }

#contact .space-y-4 > a[href*="wa.me"]:nth-of-type(n+2),
footer .space-y-3 > a[href*="wa.me"]:nth-of-type(n+2) {
  display: none !important;
}

@media (max-width: 640px) {
  #hero {
    min-height: auto;
  }

  .category-products-box {
    border-radius: 1.25rem !important;
    padding: 1rem !important;
  }

  .product-card {
    border-radius: 1rem !important;
  }

  #products-grid,
  .category-products-box .grid {
    gap: .85rem !important;
  }

  .product-card .p-3 {
    padding: .7rem !important;
  }

  .product-card h3 {
    font-size: .86rem !important;
    line-height: 1.35 !important;
  }

  .product-card p {
    font-size: .72rem !important;
    line-height: 1.65 !important;
  }

  .product-card .text-xl,
  .product-card .sm\:text-2xl {
    font-size: 1.12rem !important;
    line-height: 1.2 !important;
  }

  .product-actions {
    grid-template-columns: 1fr !important;
    gap: .45rem !important;
  }

  .product-actions button,
  .product-actions a {
    min-height: 2.15rem;
    padding: .48rem .35rem !important;
    font-size: .72rem !important;
    line-height: 1.2 !important;
    white-space: nowrap;
  }
}

@media (max-width: 380px) {
  #products-grid,
  .category-products-box .grid {
    grid-template-columns: 1fr !important;
  }

  .product-card {
    max-width: 100% !important;
  }

  .product-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .store-product-actions {
    grid-template-columns: 1fr !important;
  }
}