:root {
  --tc-ink: #211419;
  --tc-wine: #7f123f;
  --tc-rose: #d9147f;
  --tc-rose-soft: #fff0f7;
  --tc-pearl: #fff8fb;
  --tc-line: rgba(127, 18, 63, 0.13);
  --tc-shadow: 0 22px 60px rgba(127, 18, 63, 0.14);
}

body {
  background:
    radial-gradient(circle at 12% 6%, rgba(255, 196, 222, 0.32), transparent 34rem),
    linear-gradient(180deg, #fffafd 0%, #fff 38%, #fff6fa 100%) !important;
  color: var(--tc-ink);
}

body:not(.tc-admin-route) button[aria-label="Painel admin"] {
  display: none !important;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(127, 18, 63, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(127, 18, 63, 0.03) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: linear-gradient(180deg, #000, transparent 72%);
}

.top-bar {
  background: linear-gradient(90deg, #7f123f, #dd167f 48%, #9e174d) !important;
  box-shadow: 0 8px 28px rgba(127, 18, 63, 0.16);
}

.site-header {
  height: 96px !important;
  background: rgba(255, 255, 255, 0.86) !important;
  border-bottom: 1px solid rgba(214, 20, 127, 0.13) !important;
  box-shadow: 0 12px 45px rgba(127, 18, 63, 0.08);
  backdrop-filter: blur(18px);
}

.header-inner {
  max-width: 1180px !important;
}

.logo-line {
  color: #2a151d !important;
  letter-spacing: -0.04em !important;
}

.logo-line span,
.logo-subtitle,
.nav a.active,
.icon-button:hover,
.menu-toggle:hover {
  color: var(--tc-rose) !important;
}

.logo-line::after {
  background: linear-gradient(135deg, #ff8dbf, var(--tc-rose)) !important;
  box-shadow: -4px 4px 0 -1px #ff8dbf, 0 0 28px rgba(217, 20, 127, 0.36) !important;
}

.nav a,
.nav-dropdown > button {
  letter-spacing: 0.06em;
}

.nav a::after,
.nav a.active::after {
  height: 3px !important;
  bottom: 27px !important;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--tc-rose), transparent) !important;
}

.icon-button,
.menu-toggle {
  border-radius: 999px !important;
  background: #fff !important;
  box-shadow: 0 10px 30px rgba(127, 18, 63, 0.1);
  transition: transform 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.icon-button:hover,
.menu-toggle:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 38px rgba(217, 20, 127, 0.18);
}

.hero {
  height: clamp(360px, 48vw, 640px) !important;
  min-height: 360px !important;
  max-height: 640px !important;
  background:
    linear-gradient(135deg, #fff2f8, #ffd7e9 44%, #f02b91) !important;
  border-bottom: 1px solid var(--tc-line);
}

.hero::before {
  content: "";
  position: absolute;
  inset: 18px;
  z-index: 2;
  border: 1px solid rgba(255, 255, 255, 0.56);
  pointer-events: none;
  mix-blend-mode: screen;
}

.hero::after {
  content: "";
  position: absolute;
  inset: auto -10% -24% 30%;
  height: 38%;
  z-index: 2;
  background: radial-gradient(ellipse, rgba(255, 255, 255, 0.62), transparent 70%);
  pointer-events: none;
}

.hero-banner-image {
  filter: saturate(1.06) contrast(1.04);
  transform: scale(1.015);
  animation: tcHeroDrift 13s ease-in-out infinite alternate;
}

.hero-banner-link {
  cursor: pointer;
}

.hero-brand-panel,
.hero-message-panel {
  border-radius: 6px !important;
  box-shadow: 0 26px 70px rgba(91, 10, 45, 0.22) !important;
}

.hero-brand-panel {
  background: rgba(231, 28, 137, 0.9) !important;
}

.hero-message-panel {
  background: rgba(116, 14, 61, 0.9) !important;
}

.hero-message-script,
.hero-brand-name {
  text-shadow: 0 12px 28px rgba(68, 0, 35, 0.22) !important;
}

.slider-dots button,
.slider-dots span {
  box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.45);
}

.benefits {
  max-width: 1180px !important;
  margin-top: -38px !important;
  margin-bottom: 34px !important;
  position: relative;
  z-index: 5;
  border: 1px solid rgba(255, 255, 255, 0.76) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.86) !important;
  box-shadow: var(--tc-shadow);
  backdrop-filter: blur(18px);
}

.benefit-card {
  min-height: 92px !important;
  padding: 20px 22px !important;
  border-color: var(--tc-line) !important;
}

.benefit-card > span,
.category-icon {
  background:
    radial-gradient(circle at 30% 20%, #fff, transparent 42%),
    linear-gradient(135deg, #ffe5f2, #ffc5df) !important;
  color: var(--tc-rose) !important;
  box-shadow: inset 0 0 0 1px rgba(217, 20, 127, 0.11), 0 12px 28px rgba(217, 20, 127, 0.12);
}

.benefit-card h3 {
  color: var(--tc-wine) !important;
  letter-spacing: 0.08em;
}

.section-heading {
  margin-top: 20px !important;
  margin-bottom: 26px !important;
}

.section-heading h2 {
  color: var(--tc-ink);
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.section-kicker,
.eyebrow {
  color: var(--tc-rose) !important;
  letter-spacing: 0.18em !important;
}

.products-section,
.coupon-section,
.testimonials,
.about-section,
.footer-inner,
.footer-bottom {
  max-width: 1180px !important;
}

.product-grid {
  gap: 22px !important;
}

.product-card {
  position: relative;
  padding: 10px !important;
  border: 1px solid rgba(127, 18, 63, 0.09);
  border-radius: 8px;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, rgba(217, 20, 127, 0.28), rgba(255, 194, 222, 0), rgba(127, 18, 63, 0.18)) border-box;
  box-shadow: 0 18px 46px rgba(127, 18, 63, 0.08);
  overflow: hidden;
  transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.28s ease, border-color 0.28s ease;
}

.product-card::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  background: linear-gradient(120deg, transparent 8%, rgba(255, 255, 255, 0.86) 42%, transparent 64%);
  transform: translateX(-120%);
  transition: transform 0.7s ease, opacity 0.25s ease;
  pointer-events: none;
}

.product-card:hover {
  transform: translateY(-7px);
  border-color: rgba(217, 20, 127, 0.24);
  box-shadow: 0 26px 70px rgba(127, 18, 63, 0.16);
}

.product-card:hover::before {
  opacity: 1;
  transform: translateX(120%);
}

.product-image {
  border-radius: 7px !important;
  background: linear-gradient(145deg, #fff8fb, #fff) !important;
  overflow: hidden;
}

.product-image img {
  transform: scale(0.98);
  transition: transform 0.34s ease, filter 0.34s ease;
}

.product-card:hover .product-image img {
  transform: scale(1.035);
  filter: saturate(1.08);
}

.product-card h3 {
  margin-top: 12px !important;
  color: #28151d !important;
  font-weight: 800 !important;
}

.product-card strong {
  color: var(--tc-rose) !important;
  font-size: 15px !important;
}

.product-cart,
.button.primary,
.primary.button,
.secondary-button:hover,
.cep-button,
.instagram-button {
  background: linear-gradient(135deg, #7f123f, #d9147f 58%, #ff66ad) !important;
  box-shadow: 0 14px 34px rgba(217, 20, 127, 0.26) !important;
}

.product-cart,
.product-favorite {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.product-cart:hover,
.product-favorite:hover {
  transform: translateY(-3px) scale(1.04);
}

.coupon-banner,
.instagram-band {
  border-radius: 8px !important;
  overflow: hidden;
  box-shadow: 0 26px 70px rgba(127, 18, 63, 0.14);
}

.coupon-banner {
  background:
    linear-gradient(120deg, rgba(127, 18, 63, 0.92), rgba(217, 20, 127, 0.88)),
    radial-gradient(circle at 12% 20%, rgba(255, 255, 255, 0.25), transparent 28rem) !important;
}

.coupon-copy {
  border-color: rgba(255, 255, 255, 0.34) !important;
  background: rgba(255, 255, 255, 0.12) !important;
  backdrop-filter: blur(12px);
}

.testimonials {
  padding: 48px 0 28px;
}

.testimonial-card,
.about-section,
.account-panel,
.cart-drawer,
.admin-panel {
  border-radius: 8px !important;
  border-color: var(--tc-line) !important;
  box-shadow: var(--tc-shadow) !important;
}

.testimonial-card {
  background: rgba(255, 255, 255, 0.82) !important;
  backdrop-filter: blur(14px);
}

.quote-mark {
  color: rgba(217, 20, 127, 0.24) !important;
}

.about-section {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(255, 239, 247, 0.92)),
    radial-gradient(circle at 85% 15%, rgba(217, 20, 127, 0.13), transparent 28rem) !important;
}

.footer {
  background:
    linear-gradient(180deg, #fff6fa, #fee9f3) !important;
  border-top: 1px solid var(--tc-line);
}

.footer .socials {
  display: flex !important;
  align-items: center;
  gap: 12px;
}

.footer .socials a {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(127, 18, 63, 0.12);
  border-radius: 999px;
  color: #2a151d;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 12px 28px rgba(127, 18, 63, 0.1);
  transition: transform 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.footer .socials a:hover {
  color: var(--tc-rose);
  border-color: rgba(217, 20, 127, 0.28);
  transform: translateY(-3px);
}

.footer .socials svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.9;
}

.footer-bottom {
  border-top-color: var(--tc-line) !important;
}

.whatsapp-float {
  background: linear-gradient(135deg, #1ec56d, #13a75a) !important;
  box-shadow: 0 14px 34px rgba(19, 167, 90, 0.28) !important;
  animation: tcFloat 3.4s ease-in-out infinite;
}

.modal-backdrop,
.cart-shell,
.admin-shell,
.account-modal {
  backdrop-filter: blur(14px);
}

.cart-drawer,
.account-panel,
.admin-panel {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 248, 251, 0.98)) !important;
}

.shipping-option,
.order-card,
.cart-item {
  border-radius: 8px !important;
}

.admin-product-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}

.admin-product-actions .button {
  min-height: 44px;
}

.admin-danger-button {
  border: 1px solid rgba(190, 18, 60, 0.22) !important;
  background: #fff1f2 !important;
  color: #be123c !important;
  box-shadow: none !important;
}

.admin-danger-button:hover {
  background: #be123c !important;
  color: #fff !important;
  transform: translateY(-2px);
}

.admin-upload-row {
  align-items: center !important;
  padding: 12px !important;
  border: 1px dashed rgba(217, 20, 127, 0.25);
  border-radius: 8px;
  background: rgba(255, 240, 247, 0.72);
}

.admin-upload-button {
  min-height: 42px;
  border-radius: 8px !important;
  background: linear-gradient(135deg, #fff, #fff1f7) !important;
  border: 1px solid rgba(217, 20, 127, 0.2) !important;
  color: var(--tc-wine) !important;
  font-weight: 800 !important;
}

.tc-motion .section-heading,
.tc-motion .benefit-card,
.tc-motion .product-card,
.tc-motion .coupon-banner,
.tc-motion .testimonial-card,
.tc-motion .about-section,
.tc-motion .instagram-band,
.tc-motion .footer-inner {
  opacity: 0;
  transform: translateY(24px);
}

.tc-motion .section-heading.tc-in,
.tc-motion .benefit-card.tc-in,
.tc-motion .product-card.tc-in,
.tc-motion .coupon-banner.tc-in,
.tc-motion .testimonial-card.tc-in,
.tc-motion .about-section.tc-in,
.tc-motion .instagram-band.tc-in,
.tc-motion .footer-inner.tc-in {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.7s cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.tc-motion .product-card:nth-child(2n),
.tc-motion .testimonial-card:nth-child(2n) {
  transform: translateX(24px);
}

.tc-motion .product-card:nth-child(2n).tc-in,
.tc-motion .testimonial-card:nth-child(2n).tc-in {
  transform: none;
}

@keyframes tcHeroDrift {
  from {
    transform: scale(1.015) translate3d(0, 0, 0);
  }
  to {
    transform: scale(1.055) translate3d(-0.7%, 0, 0);
  }
}

@keyframes tcFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

@media (max-width: 900px) {
  .site-header {
    height: auto !important;
  }

  .header-inner {
    min-height: 82px;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .hero {
    min-height: 430px !important;
    height: 58vh !important;
    max-height: 560px !important;
  }

  .benefits {
    margin-top: -24px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .benefit-card {
    min-height: 82px !important;
    padding: 16px 14px !important;
    gap: 12px !important;
  }

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

  .product-card {
    padding: 8px !important;
  }

  .product-card h3 {
    font-size: 11px !important;
  }
}

@media (max-width: 560px) {
  .top-bar-inner {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .hero {
    aspect-ratio: 1280 / 682 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  .hero::before {
    inset: 8px;
  }

  .hero-banner-image {
    object-fit: contain !important;
    object-position: center !important;
    animation: none !important;
    transform: none !important;
  }

  .hero-brand-panel,
  .hero-message-panel,
  .hero-benefit-bar {
    transform: scale(0.92);
  }

  .hero-brand-panel,
  .hero-message-panel {
    box-shadow: 0 18px 44px rgba(91, 10, 45, 0.18) !important;
  }

  .benefits {
    width: calc(100% - 20px) !important;
    gap: 0 !important;
  }

  .benefit-card > span {
    width: 38px !important;
    height: 38px !important;
  }

  .benefit-card h3 {
    font-size: 9px !important;
    line-height: 1.2 !important;
  }

  .benefit-card p {
    font-size: 10px !important;
    line-height: 1.35 !important;
  }

  .products-section,
  .coupon-section,
  .testimonials,
  .about-section,
  .footer-inner,
  .footer-bottom {
    width: calc(100% - 20px) !important;
  }

  .section-heading {
    margin-bottom: 18px !important;
  }

  .section-heading h2 {
    font-size: 25px !important;
  }

  .coupon-banner,
  .instagram-band {
    border-radius: 7px !important;
  }

  .whatsapp-float {
    right: 14px !important;
    bottom: 16px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-banner-image,
  .whatsapp-float {
    animation: none !important;
  }

  .tc-motion .section-heading,
  .tc-motion .benefit-card,
  .tc-motion .product-card,
  .tc-motion .coupon-banner,
  .tc-motion .testimonial-card,
  .tc-motion .about-section,
  .tc-motion .instagram-band,
  .tc-motion .footer-inner {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

.product-colors {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 7px 0 8px;
}

.product-colors span {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 4px 7px;
  border: 1px solid rgba(217, 20, 127, .16);
  border-radius: 999px;
  background: #fff0f7;
  color: #7f123f !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  line-height: 1;
  text-transform: uppercase;
}

.admin-form-grid label input[placeholder="Preto, Rosa, Azul"] {
  border-color: rgba(217, 20, 127, .32) !important;
  background: #fff8fb !important;
}