/* Daniel Pijamas — réplica do design system React (src/styles.css) */
@import url("https://fonts.googleapis.com/css2?family=Fredoka:wght@400;600;700&family=Quicksand:wght@400;600;700&display=swap");

:root {
  --radius: 0.875rem;
  --radius-pill: 30px;
  --background: oklch(1 0 0);
  --foreground: oklch(0.3 0.04 240);
  --primary: oklch(0.72 0.14 230);
  --primary-foreground: #fff;
  --primary-dark: oklch(83% 0.19 198.22);
  --secondary: oklch(0.86 0.08 225);
  --muted: oklch(0.96 0.03 220);
  --muted-foreground: oklch(0.5 0.04 230);
  --accent: oklch(0.78 0.13 75);
  --lilac: oklch(0.86 0.08 225);
  --lilac-soft: oklch(0.94 0.05 210);
  --news: oklch(0.31 0.1 246.35);
  --bg-light: oklch(0.96 0.04 200);
  --bg-lilac: oklch(0.96 0.03 220);
  --border: oklch(0.92 0.03 220);
  --secsub: #efad4a;
  --shadow-soft: 0 8px 24px oklch(0.72 0.14 230 / 0.18);
  --shadow-glow: 0 15px 30px oklch(0.72 0.14 230 / 0.25);
  --gradient-primary: linear-gradient(135deg, var(--primary), var(--lilac));
  --gradient-soft: linear-gradient(180deg, #ffffff 0%, #eafaff 100%);
  --gradient-top: linear-gradient(
    90deg,
    oklch(0.72 0.16 231.21),
    oklch(0.42 0.09 208.02)
  );
  --footer-copy: linear-gradient(90deg, #06b6d4, #061f74);
  --cor-ceu: #eef5ff;
  --cor-nuvem: #ffffff;
  --cor-magica: #7c5cff;
  --cor-magica-hover: #6342e6;
  --cor-texto: #4a4a4a;
  --cor-titulo: #2d235c;
  --cor-amarelo-sol: #ffd15c;
  --fonte-divertida: "Fredoka", sans-serif;
  /* Fonts oficiais extraídas do seu design system (main.css)*/
  --font-title: "Bodoni Moda", serif;
  --font-body: "Quicksand", sans-serif;
  --font-cute: "Dancing Script", cursive;
}
*,
*::before,
*::after {
  box-sizing: border-box;
  width: auto;
}
html,
body {
  margin: 0;
  padding: 0;
}
body {
  font-family: var(--font-body);
  color: var(--foreground);
  background: var(--gradient-soft);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img {
  max-width: 100%;
  display: block;
}
a {
  color: inherit;
  text-decoration: none;
}
h1,
h2,
h3,
h4 {
  font-family: var(--font-body);
  margin: 0;
}

/* Elementos Animados de Fundo (Nuvens lúdicas) */
.nuvem {
  position: absolute;
  background: #fff;
  border-radius: 100px;
  opacity: 0.8;
  animation: flutuar 6s infinite ease-in-out;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.02);
  z-index: 9999;
}
.nuvem::before,
.nuvem::after {
  content: "";
  position: absolute;
  background: #fff;
  border-radius: 50%;
  z-index: 9999;
}
.nuvem-1 {
  width: 150px;
  height: 50px;
  bottom: 15%;
  left: 10%;
  z-index: 9999;
}
.nuvem-1::before {
  width: 70px;
  height: 70px;
  top: -35px;
  left: 20px;
  z-index: 9999;
}
.nuvem-1::after {
  width: 50px;
  height: 50px;
  top: -25px;
  left: 70px;
  z-index: 9999;
}

.nuvem-2 {
  width: 200px;
  height: 60px;
  bottom: 15%;
  right: 10%;
  animation-duration: 8s;
  animation-delay: 1s;
  z-index: 9999;
}
.nuvem-2::before {
  width: 90px;
  height: 90px;
  top: -45px;
  left: 30px;
  z-index: 9999;
}
.nuvem-2::after {
  width: 70px;
  height: 70px;
  top: -30px;
  left: 95px;
  z-index: 9999;
}

/* Estrelinhas Piscando */
.estrela {
  position: absolute;
  color: var(--primary);
  font-size: 1.2rem;
  animation: piscar 2s infinite ease-in-out;
}
.e-1 {
  top: 25%;
  right: 20%;
  animation-delay: 0.5s;
  z-index: 9999;
}
.e-2 {
  bottom: 30%;
  left: 15%;
  animation-duration: 3s;
  z-index: 9999;
}
.e-3 {
  top: 60%;
  left: 85%;
  animation-delay: 1s;
  z-index: 9999;
}

/* Ícone de Lua com Animação Zzz */
.icone-sono {
  font-size: 4.5rem;
  color: var(--primary);
  margin-bottom: 25px;
  display: inline-block;
  position: absolute;
  animation: balanco 4s infinite ease-in-out;
  padding: 25px;

  z-index: 9999;
}

@media (max-width: 600px){
  .icone-sono{
    display: none !important;
  }
}

/* Letras Zzz subindo */
.Zzz {
  position: absolute;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--foreground);
  opacity: 0;
  animation: subirZzz 3s infinite linear;
  z-index: 9999;
}
.z1 {
  top: -10px;
  right: -10px;
  animation-delay: 0s;
  z-index: 9999;
}
.z2 {
  top: -25px;
  right: -25px;
  font-size: 1.6rem;
  animation-delay: 1.2s;
  z-index: 9999;
}

/* Principais Animações */
@keyframes flutuar {
  0%,
  100% {
    transform: translateY(0) translateX(0);
  }
  50% {
    transform: translateY(-12px) translateX(6px);
  }
}
@keyframes piscar {
  0%,
  100% {
    opacity: 0.3;
    transform: scale(0.8);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}
@keyframes balanco {
  0%,
  100% {
    transform: rotate(-6deg);
  }
  50% {
    transform: rotate(6deg);
  }
}
@keyframes subirZzz {
  0% {
    opacity: 0;
    transform: translateY(15px) scale(0.6);
  }
  50% {
    opacity: 0.8;
  }
  100% {
    opacity: 0;
    transform: translateY(-35px) scale(1.2);
  }
}

.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Top bar */
.topbar {
  background: var(--gradient-top);
  color: #fff;
  text-align: center;
  padding: 10px 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

/* Top contact bar */
.nav-head-top {
  background: #efad4a;
  color: #fff;
  border-bottom: 1px solid #eee;
  font-size: 12px;
  text-transform: uppercase;
}
.nav-head-top ul {
  max-width: 1280px;
  margin: 0 auto;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
  gap: 20px;
}
.nav-head-top ul li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #ffffff;
  font-size: 13px;
  list-style: none;
}
.nav-head-top a {
  color: #ffffff;
  text-decoration: none;
  transition: 0.3s;
}
.nav-head-top a:hover {
  color: var(--primary);
}
.nav-head-top .top-left,
.nav-head-top .top-right {
  display: flex;
  color: #ffffff;
  align-items: center;
  gap: 20px;
  list-style: none;
  font-weight: 600;
}
.top-left {
  color: #ffffff;
}
@media (max-width: 768px) {
  .nav-head-top ul {
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 12px 15px;
    text-align: center;
  }
  .nav-head-top .top-left,
  .nav-head-top .top-right {
    flex-direction: row;
    gap: 8px;
  }
  .nav-head-top ul li {
    justify-content: center;
    font-size: 12px;
  }
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #fff;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
}
.header-row {
  display: grid;
  grid-template-columns: 300px 1fr 220px;
  align-items: center;
  gap: 30px;
  padding: 16px 0;
}
.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1;
}

.brand .brand-name {
  font-family: var(--font-cute);
  font-weight: 700;
  color: var(--primary);
  font-size: 30px;
}
.brand .brand-name span {
  color: var(--accent);
}
@media (min-width: 768px) {
  .brand img {
    width: 64px;
    height: 64px;
  }
  .brand .brand-name {
    font-size: 36px;
  }
}

.logo {
  font-family: var(--font-cute);
  font-size: 38px;
  color: var(--primary);
  cursor: pointer;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.logo i {
  color: var(--lilac);
  font-size: 22px;
}

/* ==========================================================================
   CORREÇÃO DEFINITIVA DO TAMANHO DA LOGO (DANIEL PIJAMAS)
   ========================================================================== */

/* ==========================================================================
   MIRA EXATA NA ESTRUTURA DO HEADER.PHP — DANIEL PIJAMAS
   ========================================================================== */

/* Define o tamanho real da imagem da logo no Desktop */
.logo a img {
  width: 150px !important;
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
  object-fit: contain !important;
}

/* Ajusta o grid do cabeçalho para acomodar a nova logo de 250px sem esmagá-la */
.site-header .header-row {
  grid-template-columns: 260px 1fr 220px !important; /* Abre espaço de 260px para a coluna da marca */
  align-items: center !important;
}

/* Ajuste fino responsivo para telas de celulares e tablets */
@media (max-width: 768px) {
  .logo a img {
    width: 160px !important; /* Reduz um pouco no mobile para não empurrar os ícones */
  }
  .site-header .header-row {
    grid-template-columns: 1fr auto auto !important; /* Reorganiza o grid no mobile */
    gap: 15px !important;
  }
  .dp-trust-badge {
    display: flex;
    flex-direction: column;
  }
}

/* 2. Sobrescreve as travas de 56px/64px caso sua estrutura use a classe .brand */
.brand img {
  width: 250px !important;
  height: auto !important;
  max-width: 100% !important;
  object-fit: contain;
  border-radius: 0px !important; /* Remove o arredondamento rígido se quebrar o design da logo */
}

/* 3. Garante o ajuste responsivo em telas de celular para não quebrar o cabeçalho */
@media (max-width: 768px) {
  .custom-logo,
  .custom-logo-link img,
  .brand img {
    width: 180px !important; /* No celular diminui um pouco para caber ao lado dos ícones */
  }
}

/* ==========================================================================
   FORÇAR EXPANSÃO DA LOGO DO TOPO (HEADER)
   ========================================================================== */

/* 1. Alarga e reestrutura o grid do menu para dar prioridade à logo */
.site-header .header-row {
  display: grid !important;
  grid-template-columns: 320px 1fr auto !important; /* Aumentamos para 320px para não esmagar */
  gap: 20px !important;
  align-items: center !important;
}

/* 2. Remove qualquer trava de tamanho do link da logo */
.site-header a.logo {
  display: flex !important;
  align-items: center !important;
  /* width: 300px !important; /* Define a largura da área da logo 
  max-width: 100% !important;
  min-width: 250px !important;*/
}

/* 3. Força a imagem a crescer e ignora travas de altura inseridas pelo tema */
.site-header img.logo {
  width: 100% !important;
  max-width: 300px !important; /* Limite máximo real do arquivo da imagem */
  height: auto !important;
  max-height: none !important; /* Destrói limites de altura (muito comum em temas) */
  display: block !important;
  object-fit: contain !important;
}

/* 4. Ajustes finos e responsividade para Celular/Tablet */
@media (max-width: 991px) {
  .site-header .header-row {
    grid-template-columns: 220px 1fr auto !important;
  }
  .site-header a.logo {
    width: 200px !important;
    min-width: auto !important;
  }
}

@media (max-width: 768px) {
  .site-header .header-row {
    grid-template-columns: 1fr auto auto !important; /* Layout dinâmico no mobile */
    gap: 10px !important;
  }
  .site-header a.logo {
    width: 250px !important;
  }

  .action-badge {
    position: absolute;
    top: -10px;
    right: -10px;
    background: var(--accent);
    color: #fff;
    border-radius: 999px;
    width: 18px;
    height: 18px;
    font-size: 10px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/**PESQUISAR*/
/** ==========================================================================
    BARRA DE PESQUISA DO CABEÇALHO (ISOLADA)
    ========================================================================== */
header form.search,
.site-header .search {
  position: relative !important;
  flex: 1 !important;
  max-width: 550px !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  margin: 0 auto !important;
}

.site-header .search input {
  width: 100% !important;
  height: 44px !important;
  padding: 10px 45px 10px 20px !important;
  border-radius: 50px !important;
  border: 1px solid #bde6f8 !important; /* Tom azul suave */
  background-color: #f0fdfa !important;
  font-size: 14px !important;
  outline: none !important;
  transition: 0.2s;
}

.site-header .search input:focus {
  border-color: var(--primary) !important;
  background: #fff !important;
}

.site-header .search .icon {
  position: absolute !important;
  right: 18px !important;
  display: flex !important;
  align-items: center !important;
  color: #03a9f4 !important;
  top: 50%;
  transform: translateY(-50%);
}

/* Ajuste Responsivo do Topo */
@media (max-width: 767px) {
  .site-header .search {
    max-width: 100% !important;
    flex: 0 0 100% !important;
    margin-top: 10px !important;
    order: 3;
  }
}

/** ==========================================================================
    CONTAINER DE BUSCA INTERNO DA LOJA (SHOP CUSTOM SEARCH)
    ========================================================================== */
.shop-search-wrapper {
  margin-bottom: 25px;
  display: flex;
  justify-content: center;
  width: 100%;
}

.shop-custom-search {
  position: relative;
  width: 100%;
  max-width: 550px;
}

.shop-custom-search input[type="search"] {
  width: 100% !important;
  padding: 14px 25px 14px 50px !important;
  border-radius: 30px !important;
  font-size: 15px !important;
  border: 1px solid #bde6f8 !important;
  background-color: #f0fdfa !important;
  color: #4a4a4a !important;
  outline: none !important;
  box-shadow: 0 4px 12px rgba(176, 82, 101, 0.03) !important;
  transition: all 0.3s ease !important;
}

.shop-custom-search input[type="search"]:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 4px 18px rgba(176, 82, 101, 0.1) !important;
}

.shop-custom-search .search-submit {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  background: none !important;
  border: none !important;
  color: #069bc9 !important;
  font-size: 16px;
  cursor: pointer;
  padding: 0 !important;
}

/** ==========================================================================
    FIX DEFINITIVO: DESTRAVA LAYOUT DE PESQUISA EM DESKTOP (ANTI-MOBILE)
    ========================================================================== */
@media (min-width: 992px) {
  /* Cancela o empilhamento forçado e expande a tela de busca para o tamanho padrão da loja */
  body.search-results .site-main,
  body.archive.post-type-archive-product .site-main {
    display: block !important;
    width: 100% !important;
    max-width: 1200px !important;
    margin: 40px auto !important;
    padding: 0 20px !important;
    float: none !important;
  }

  body.search-results #primary,
  body.archive.post-type-archive-product #primary {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    display: block !important;
  }

  /* Organiza o cabeçalho de resultados no desktop */
  body.search-results .page-header,
  body.search-results .woocommerce-products-header,
  body.archive.post-type-archive-product .woocommerce-products-header {
    width: 100% !important;
    text-align: left !important;
    margin-bottom: 30px !important;
  }

  /* Renderiza a vitrine de pijamas em 4 colunas alinhadas */
  body.search-results ul.products,
  body.archive.post-type-archive-product ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 30px !important;
    width: 100% !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 20px 0 !important;
  }
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  color: var(--primary);
  order: 2;
}
@media (min-width: 768px) {
  .header-actions {
    order: 3;
  }
}
.header-actions a,
.header-actions button {
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  position: relative;
  transition: 0.2s;
  display: inline-flex;
}
.header-actions a:hover,
.header-actions button:hover {
  color: var(--accent);
  transform: scale(1.1);
}
.action-badge {
  position: absolute;
  top: -10px;
  right: -10px;
  background: var(--accent);
  color: #fff;
  border-radius: 999px;
  width: 18px;
  height: 18px;
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.mobile-toggle {
  display: inline-flex;
}
@media (min-width: 768px) {
  .mobile-toggle {
    display: none;
  }
}

/* Nav */
.main-nav {
  border-top: 1px solid var(--bg-light);
  display: none;
  position: relative;
}
@media (min-width: 768px) {
  .main-nav {
    display: block;
  }
}
.main-nav ul {
  list-style: none;
  margin: 0;
  padding: 14px 16px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 36px;
}
.main-nav a {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  position: relative;
  padding: 4px 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: 0.2s;
}
.main-nav a:hover {
  color: var(--primary);
}
.main-nav a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 0;
  height: 2px;
  background: var(--primary);
  transition: 0.3s;
  transform: translateX(-50%);
}
.main-nav a:hover::after {
  width: 100%;
}

/* Mega menu */
.mega-wrap {
  position: relative;
}
.mega {
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  background: #fff;
  border: 1px solid var(--secondary);
  border-radius: 24px;
  padding: 20px;
  box-shadow: var(--shadow-glow);
  display: none;
  z-index: 1100;
}
.mega-wrap:hover .mega {
  display: block;
}
.mega-grid {
  display: flex;
  gap: 16px;
}
.mega-card {
  width: 200px;
  border-radius: 18px;
  overflow: hidden;
  background: var(--bg-light);
  border: 2px solid transparent;
  transition: 0.3s;
}
.mega-card:hover {
  transform: translateY(-4px);
  border-color: var(--primary);
  box-shadow: var(--shadow-glow);
}
.mega-thumb {
  height: 140px;
  background-size: cover;
  background-position: center;
  transition: 0.3s;
}
.mega-card:hover .mega-thumb {
  transform: scale(1.05);
}
.mega-label {
  padding: 10px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}
.mega-card:hover .mega-label {
  color: var(--primary);
}

/* ==========================================
   SUPER SIDEBAR MOBILE - DESIGN PREMIUM
   ========================================== */

/* 1. CONTAINER PRINCIPAL */
nav.mobile-nav.js-mobile-nav {
  position: fixed !important;
  top: 0 !important;
  left: -320px !important;
  width: 310px !important;
  height: 100vh !important;
  background-color: #ffffff !important;
  box-shadow: 4px 0 15px rgba(0, 0, 0, 0.15) !important;
  transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  z-index: 999999 !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* Quando o menu abre */
nav.mobile-nav.js-mobile-nav.open,
nav.mobile-nav.js-mobile-nav.is-open {
  left: 0 !important;
}

/* 2. TOPO DO MENU: Instagram e Botão Fechar */
.mobile-menu-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 15px 20px !important;
  background-color: var(--primary) !important; /* Cor suave de fundo */
  border-bottom: 1px solid #eadecc !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.mobile-menu-header .menu-insta {
  color: #fff !important;
  font-size: 20px !important;
  text-decoration: none !important;
  display: inline-block !important;
}

.mobile-menu-header .menu-close {
  background: none !important;
  border: none !important;
  font-size: 32px !important;
  color: #fff !important;
  cursor: pointer !important;
  line-height: 1 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* 3. CORPO DO MENU: Listas e Itens */
.mobile-menu-body {
  flex: 1 !important;
  overflow-y: auto !important;
  padding: 0 !important;
  background-color: #ffffff !important;
}

/* Força a remoção de qualquer estilo de lista ou bolinha do tema */
nav.mobile-nav.js-mobile-nav ul,
nav.mobile-nav.js-mobile-nav ul.sidebar-menu-list,
nav.mobile-nav.js-mobile-nav ul.sidebar-menu-list ul {
  list-style: none !important;
  list-style-type: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Configuração de cada linha/link */
nav.mobile-nav.js-mobile-nav ul.sidebar-menu-list li {
  position: relative !important;
  list-style: none !important;
  list-style-type: none !important;
  border-bottom: 1px solid #f2f2f2 !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
}

nav.mobile-nav.js-mobile-nav ul.sidebar-menu-list li a {
  display: block !important;
  padding: 16px 20px !important;
  color: var(--primary) !important; /* Dourado suave */
  text-decoration: none !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  box-sizing: border-box !important;
  transition: background-color 0.2s ease !important;
}

/* Item "Ver todos os produtos" destacado */
nav.mobile-nav.js-mobile-nav ul.sidebar-menu-list li a.all-products-link {
  color: var(--primary) !important;
  font-weight: 700 !important;
}

/* Setinhas indicadoras para sub-menus */
nav.mobile-nav.js-mobile-nav ul.sidebar-menu-list .menu-item-has-children > a::after {
  content: '∨' !important;
  font-size: 10px !important;
  float: right !important;
  margin-top: 4px !important;
  transition: transform 0.2s ease !important;
  color: var(--primary) !important;
}

/* Gira a setinha quando o menu estiver aberto */
nav.mobile-nav.js-mobile-nav ul.sidebar-menu-list .menu-item-has-children.active > a::after {
  transform: rotate(-180deg) !important;
}

/* Sub-menus recolhidos e estilizados */
nav.mobile-nav.js-mobile-nav ul.sidebar-menu-list .sub-menu {
  display: none !important;
  background-color: #fafafa !important;
}

/* Sub-menu ativo (mostrado via JavaScript) */
nav.mobile-nav.js-mobile-nav ul.sidebar-menu-list .menu-item-has-children.active > .sub-menu {
  display: block !important;
}

/* Recuos das subcategorias */
nav.mobile-nav.js-mobile-nav ul.sidebar-menu-list .sub-menu li a {
  padding-left: 35px !important;
  font-size: 14px !important;
}

nav.mobile-nav.js-mobile-nav ul.sidebar-menu-list .sub-menu .sub-menu li a {
  padding-left: 50px !important;
}

/* 4. RODAPÉ FIXO: Criar Conta / Iniciar Sessão */
.mobile-menu-footer {
  background-color: var(--primary) !important; /* Fundo Dourado idêntico à imagem */
  padding: 18px 20px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin-top: auto !important; /* Empurra para o fim do menu */
}

.mobile-menu-footer .footer-login-link {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 10px !important;
  color: #ffffff !important;
  text-decoration: none !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}

.mobile-menu-footer .footer-login-link i {
  font-size: 16px !important;
}

.mobile-menu-footer .footer-login-link .separator {
  opacity: 0.6 !important;
  margin: 0 4px !important;
}

/* 5. OVERLAY (CAMADA ESCURA ATRÁS) */
.menu-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(0, 0, 0, 0.4) !important;
  z-index: 99998 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.3s ease !important;
}

.menu-overlay.is-open {
  opacity: 1 !important;
  visibility: visible !important;
}

/* ==========================================================================
   LIMPEZA DO MENU MOBILE: REMOVE IMAGENS, ÍCONES E TEXTOS DUPLICADOS
   ========================================================================== */

/* 1. Oculta absolutamente todas as imagens dentro do menu mobile */
nav.mobile-nav.js-mobile-nav img,
nav.mobile-nav.js-mobile-nav li img,
nav.mobile-nav.js-mobile-nav .sub-menu img,
nav.mobile-nav.js-mobile-nav .menu-item img {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* 2. Remove as decorações e elementos soltos (como as estrelas, nuvens soltas ou letras como "Z") */
nav.mobile-nav.js-mobile-nav li > span:not(.separator),
nav.mobile-nav.js-mobile-nav li > div,
nav.mobile-nav.js-mobile-nav li > p,
nav.mobile-nav.js-mobile-nav li > text {
  display: none !important;
  visibility: hidden !important;
}

/* 3. Garante que apenas os links de texto principais fiquem visíveis */
nav.mobile-nav.js-mobile-nav ul.sidebar-menu-list li a {
  display: block !important;
  position: relative !important;
  z-index: 2 !important;
}



/* Buttons */
.btn-premium {
  background: linear-gradient(135deg, var(--primary), oklch(0.36 0.14 255.39));
  color: #fff;
  padding: 13px 28px;
  border-radius: var(--radius-pill);
  text-transform: uppercase;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.5px;
  box-shadow: 0 4px 12px rgba(60, 100, 200, 0.25);
  transition: 0.3s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  cursor: pointer;
  text-decoration: none;
}
.btn-premium:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(60, 100, 200, 0.35);
  color: #fff;
}
.btn-outline {
  background: transparent;
  color: var(--primary);
  border: 2px solid var(--primary);
  padding: 11px 26px;
  border-radius: var(--radius-pill);
  text-transform: uppercase;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.5px;
  transition: 0.3s;
  cursor: pointer;
}
.btn-outline:hover {
  background: var(--primary);
  color: #fff;
}

/* Shipping bar */
.shipping-progress-container {
  max-width: 1280px;
  margin: 30px auto;
  padding: 20px;
  background: var(--white);
  border-radius: var(--round);
  box-shadow: var(--shadow);
}
.shipping-bar-bg {
  background: var(--bg-lilac);
  height: 14px;
  border-radius: 7px;
  margin-top: 12px;
  overflow: hidden;
  position: relative;
}
.shipping-bar-fill {
  height: 100%;
  width: 0%;
  transition: width 0.6s;
  border-radius: 7px;
  /* Substituindo o laranja pelo degradê do seu tema premium */
  background: linear-gradient(90deg, rgb(255, 105, 0), #efad4a);
  border-radius: 100px !important;
  box-shadow: 0 2px 6px oklch(0.72 0.14 230 / 0.4) !important;
}
.ship-msg {
  font-size: 13px;
  font-weight: bold;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--primary);
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
}

.container {
  max-width: 1280px;
  margin: 50px 5rem;
  padding: 0 20px;
  position: relative;
  z-index: 1;
  padding-bottom: 50px;
}

/* Section titles */
.section {
  margin: 56px auto;
  max-width: 100%;
  padding: 0 20px;
}
.section-title {
  font-family: var(--font-body);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 28px;
  color: var(--primary);
  margin: 0;
}
.section-sub {
  text-align: center;
  font-family: var(--font-cute);
  font-size: 24px;
  color: var(--accent);
  margin: 6px 0 32px;
}

/* Hero */
.hero {
  position: relative;
  height: 78vh !important;
  overflow: hidden;
}
@media (min-width: 768px) {
  .hero {
    height: 78vh !important;
    width: 100% !important;

  }
}
@media (max-width: 600px) {
  .hero {
    height: 45vh !important;
    width: 100% !important;

  }
}

.hero .swiper,
.hero .swiper-wrapper,
.hero .swiper-slide {
  height: 100%;
}
.hero-slide {
  position: relative;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  /*background: linear-gradient(
    135deg,
    rgba(120, 170, 230, 0.18),
    rgba(200, 162, 216, 0.28)
  );*/
}
.hero-card {
  position: relative;
  max-width: 90%;
  background: rgba(255, 255, 255, 0.068);
  border: 2px solid var(--secondary);
  border-radius: 28px;
  padding: 40px 32px;
  text-align: center;
  box-shadow: var(--shadow-glow);
  backdrop-filter: blur(6px);
  margin: 0 20px;
  /*margin-right: auto;*/
}
@media (min-width: 768px) {
  .hero-card {
    padding: 48px 56px;
  }
}
.hero-eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--secsub);
  margin: 0 0 12px;
}
.hero-title {
  font-family: var(--font-cute);
  font-size: 42px;
  color: var(--primary);
  margin: 0 0 8px;
  line-height: 1.05;
}
@media (min-width: 768px) {
  .hero-title {
    font-size: 58px;
  }
}
.hero-sub {
  color: #242323;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 3px;
  margin: 0 0 24px;
}
@media (min-width: 768px) {
  .hero-sub {
    font-size: 14px;
  }
}

/* Benefits */
.benefits {
  margin: 32px auto;
  max-width: 1280px;
  background: #fff;
  border-radius: 28px;
  padding: 28px 24px;
  box-shadow: var(--shadow-soft);
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: -45px;
}
@media (max-width: 640px) {
  .benefits {
    grid-template-columns: 1fr 1fr;
    max-width: 90%;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    margin-top: 25px;
  }
}
@media (min-width: 1024px) {
  .benefits {
    grid-template-columns: repeat(4, 1fr);
  }
}
.benefit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.benefit .ico {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: var(--bg-light);
  color: oklch(0.49 0.13 234.71);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.benefit strong {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--primary);
}
.benefit span {
  font-size: 12px;
  color: var(--muted-foreground);
}

/* Categories grid */
.cats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  max-width: 1280px;
  margin: 50px auto;
  padding: 0 20px;
}

@media (min-width: 1024px) {
  .cats {
    grid-template-columns: repeat(4, 1fr);
  }
}
.cat-card {
  position: relative;
  aspect-ratio: 1/1;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  transition: 0.4s;
  display: block;
}
.cat-card:hover {
  transform: translateY(-8px) scale(1.02);
}
.cat-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.5s;
}
.cat-card:hover img {
  transform: scale(1.1);
}
.cat-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to top, rgba(95, 160, 210, 0.92), transparent);
  padding: 48px 20px 20px;
  text-align: center;
}
.cat-overlay span {
  font-family: var(--font-title);
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #fff;
  font-size: 18px;
}

/* Container Base do Thumb */
.product-thumb {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 16px !important; /* Bordas arredondadas suaves do seu design */
  z-index: 1 !important;
}

/* Transição suave das imagens */
.product-thumb img {
  transition: transform 0.4s ease !important;
}
.product-thumb:hover img.main {
  transform: scale(1.03) !important;
}

/* NOVA BARRA OVAL DE VISUALIZAÇÃO RÁPIDA (Estilo da Foto) */
.product-quickview-bar {
  position: absolute !important;
  bottom: 16px !important; /* Distância da borda inferior */
  left: 50% !important;
  transform: translate(-50%, 15px) !important; /* Começa um pouco mais abaixo */
  width: 85% !important; /* Largura proporcional interna */
  max-width: 240px !important;
  height: 38px !important;
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(4px) !important;
  border: none !important;
  border-radius: 30px !important; /* Formato perfeitamente oval */
  color: #0284c7 !important; /* Cor azul sutil do texto do seu design */
  font-family: var(--font-body, "Lato", sans-serif) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
  opacity: 0 !important; /* Invisível por padrão */
  visibility: hidden !important;
  transition:
    transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    opacity 0.3s ease,
    background 0.2s ease !important;
  z-index: 10 !important;
}

/* Efeito Hover no Card: Faz a barra subir e aparecer */
.product-thumb:hover .product-quickview-bar {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translate(
    -50%,
    0
  ) !important; /* Sobe suave para a posição certa */
}

/* Hover direto no botão */
.product-quickview-bar:hover {
  background: #ffffff !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15) !important;
  color: #0369a1 !important;
}

/* Ícone dentro do botão */
.product-quickview-bar svg {
  stroke: #0284c7 !important;
  transition: stroke 0.2s ease !important;
}
.product-quickview-bar:hover svg {
  stroke: #0369a1 !important;
}

/* Ajuste do botão de favoritar flutuante */
.product-wishlist-wrapper {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  z-index: 12 !important;
}
.product-fav {
  background: #ffffff !important;
  border: none !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
  cursor: pointer !important;
  color: #a1a1aa !important;
  transition: all 0.2s ease !important;
}
.product-fav:hover {
  transform: scale(1.05) !important;
  color: #38bdf8 !important;
}

/* Badge Premium (ex: Mais Vendido) */
.badge-premium {
  position: absolute !important;
  top: 14px !important;
  left: 14px !important;
  background: #eab308 !important; /* Cor dourada/mostarda do seu layout */
  color: #ffffff !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  padding: 4px 10px !important;
  border-radius: 20px !important;
  letter-spacing: 0.5px !important;
  z-index: 5 !important;
}
.product-card {
  position: relative;
  background: #fff;
  border: 1px solid color-mix(in oklab, var(--secondary) 40%, transparent);
  border-radius: 28px;
  overflow: hidden;
  padding-bottom: 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  transition: 0.3s;
}
.product-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-glow);
}

.product-card:hover .product-thumb img.main {
  opacity: 0;
}
.product-card:hover .product-thumb img.hover {
  opacity: 1;
}
.product-badge {
  position: absolute;
  left: 12px;
  top: 12px;
  background: var(--accent);
  color: #fff;
  border-radius: var(--radius-pill);
  padding: 4px 12px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  z-index: 2;
}
.product-fav {
  position: absolute;
  right: 12px;
  top: 12px;
  background: #fff;
  color: var(--primary);
  width: 36px;
  height: 36px;
  border-radius: 999px;
  box-shadow: var(--shadow-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  cursor: pointer;
  transition: 0.2s;
  z-index: 2;
}
.product-fav:hover {
  background: var(--primary);
  color: #fff;
}
.product-cat {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--lilac);
  margin-top: 14px;
}
.product-name {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  margin: 8px 16px;
  min-height: 42px;
  color: var(--foreground);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.product-old {
  font-size: 12px;
  color: var(--muted-foreground);
  text-decoration: line-through;
  margin: 0;
}
.product-price {
  font-family: var(--font-title);
  font-size: 24px;
  font-weight: 700;
  color: var(--primary);
  margin: 2px 0;
}
.product-pix {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  margin: 0 0 10px;
}
.product-card .btn-premium {
  width: 85%;
  margin: 0 auto;
}

.added_to_cart {
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: var(--primary);
  color: #fff;
  padding: 12px 24px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}

/* Botão do Olho (Quick View) Flutuando sobre a imagem */
.product-card .product-thumb {
  position: relative;
  overflow: hidden;
}

.product-quickview {
  position: absolute !important;
  bottom: 14px !important;
  right: 14px !important;
  z-index: 30 !important;
  background: rgba(255, 255, 255, 0.95) !important;
  border: none !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08) !important;
  transition: all 0.2s ease-in-out !important;
  color: #71717a !important;
}

.product-quickview:hover {
  transform: scale(1.1) !important;
  background: #ffffff !important;
  color: #54c3f1 !important; /* Azul da sua marca */
}

/* Corrige o alinhamento das avaliações */
.product-rating-wrapper {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin: 2px 0 6px 0 !important;
}

.product-rating-wrapper .star-rating {
  color: #ffb800 !important;
  font-size: 13px !important;
}

/* Newsletter */
.newsletter {
  margin: 56px auto;
  max-width: 1280px;
  background: linear-gradient(135deg, var(--primary-dark), var(--news));
  border-radius: 28px;
  padding: 48px 24px;
  text-align: center;
  box-shadow: var(--shadow-soft);
  margin-bottom: 85px;
}
@media (min-width: 768px) {
  .newsletter {
    padding: 56px 48px;
  }
}
.newsletter form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 440px;
  margin: 24px auto 0;
}
@media (min-width: 640px) {
  .newsletter form {
    flex-direction: row;
  }
}

@media (max-width: 640px) {
  .newsletter {
    margin: 56px 15pxS;
  }
}
.newsletter input {
  flex: 1;
  border: 2px solid var(--secondary);
  background: #fff;
  border-radius: var(--radius-pill);
  padding: 12px 20px;
  font-size: 14px;
  outline: none;
}
.newsletter input:focus {
  border-color: var(--primary);
}

/* Footer */
.site-footer {
  margin-top: 64px;
  border-top: 1px solid var(--bg-light);
  background: #fff;
  padding: 20px 20px;
}
.footer-grid {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  gap: 40px;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 1024px) {
  .footer-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
.footer-brand {
  font-family: var(--font-cute);
  font-size: 30px;
  color: var(--primary);
  margin: 0;
}
.footer,
.footer-grid h4 {
  font-size: 18px;
  font-weight: 700;
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--primary);
  margin: 0 0 16px;
}
.footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  margin: 10px 0px;
}
.footer-links li {
  font-size: 14px;
  color: oklch(0.58 0 0) !important;
  margin-bottom: 8px;
}
.footer-links li:hover {
  font-size: 14px;
  color: var(--lilac) !important;
  margin-bottom: 8px;
}

.footer-social {
  display: flex;
  gap: 12px;
  margin-top: 16px;
  color: var(--primary);
}
.footer-pay {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.footer-pay span {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 700;
}
.footer-bottom {
  max-width: 1280px;
  margin: 40px auto 0;
  border-top: 1px solid var(--border);
  padding-top: 20px;
  text-align: center;
  font-size: 12px;
  color: var(--muted-foreground);
}

.footer-copy-dev {
  margin-top: 10px;
  font-size: 12px;
  color: #777;
}

.footer-copy-brand {
  font-weight: 700;
  color: var(--footer-copy) !important;
  display: inline-block;
}

.woocommerce-shipping-totals .shipping {
  display: inline-flex !important;
}

/* WhatsApp float */
.wa-float {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1500;
  background: #25d366;
  color: #fff;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-glow);
  animation: wa-pulse 2s infinite;
}
@keyframes wa-pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.06);
  }
}

/* Cart sidebar (Woo fragments) */
.cart-side {
  position: fixed;
  top: 0;
  right: -440px;
  width: 100%;
  max-width: 420px;
  height: 100%;
  background: #fff;
  z-index: 2000;
  transition: right 0.35s ease;
  box-shadow: -20px 0 40px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  z-index: 99999;
  overflow: auto;
}
.cart-side.open {
  right: 0;
}
.cart-side header {
  padding: 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cart-side header h3 {
  font-family: var(--font-title);
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--primary);
  font-size: 18px;
}
.cart-side .body {
  flex: 1;
  overflow: auto;
  padding: 20px;
}
.cart-side .footer {
  padding: 20px;
  border-top: 1px solid var(--border);
}
.backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 40, 80, 0.35);
  z-index: 1900;
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
}
.backdrop.open {
  opacity: 1;
  visibility: visible;
}

/* Grid WooCommerce */
.dp-products ul.products,
.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 24px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.dp-products ul.products li.product,
.woocommerce ul.products li.product {
  width: 100% !important;
  margin: 0 !important;
  float: none !important;
}

/* Tablet */
@media (max-width: 1024px) {
  .woocommerce ul.products {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .woocommerce ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Celular pequeno */
@media (max-width: 480px) {
  .woocommerce ul.products {
    grid-template-columns: 1fr !important;
  }
}

/* Woo overrides */
.woocommerce ul.products li.product {
  text-align: center;
}
.woocommerce span.onsale {
  background: var(--accent);
  color: #fff;
  border-radius: var(--radius-pill);
  padding: 4px 12px;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 700;
  min-height: auto;
  min-width: auto;
  line-height: 1.4;
  top: 12px;
  left: 12px;
  right: auto;
}
.woocommerce .price {
  color: var(--primary) !important;
  font-family: var(--font-body);
}
.woocommerce a.button,
.woocommerce button.button,
.woocommerce-page button.button,
.woocommerce #respond input#submit {
  background: var(--gradient-primary) !important;
  color: #fff !important;
  border-radius: var(--radius-pill) !important;
  padding: 13px 28px !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  font-size: 12px !important;
  border: 0 !important;
}
.woocommerce a.button:hover {
  transform: translateY(-2px);
}

/*********************************** CSS ADICIONAL ***************************************/
.main-menu {
  display: flex;
  justify-content: center;
  gap: 45px;
  list-style: none;
  margin: 0;
  padding: 14px 0;
}

.main-menu > li {
  position: relative;
}

.main-menu > li > a {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
}

.mega-item:hover .mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.mega-menu {
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%) translateY(10px);

  width: 720px;

  background: #fff;
  border: 2px solid #bde9f9;
  border-radius: 28px;

  padding: 18px;

  display: flex;
  gap: 16px;

  opacity: 0;
  visibility: hidden;

  transition: 0.3s;
  z-index: 9999;
}

.mega-card {
  flex: 1;
  border-radius: 22px;
  overflow: hidden;
  background: #d8f4f8;
}

.mega-thumb {
  height: 180px;
}

.mega-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mega-card span {
  display: block;
  text-align: center;
  padding: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.product-card {
  position: relative;
  overflow: hidden;
  background: #fff;
  border-radius: 28px;
  border: 1px solid rgba(120, 180, 230, 0.25);

  transition: 0.35s;
}

.product-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-glow);
}

.product-thumb {
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
}

.product-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-thumb img.hover {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: 0.5s;
}

.product-card:hover img.main {
  opacity: 0;
}

.product-card:hover img.hover {
  opacity: 1;
}

.quick-view-btn {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;

  opacity: 0;
  transform: translateY(20px);

  transition: 0.3s;

  background: #fff;

  border: none;

  border-radius: 999px;

  height: 42px;

  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.product-card:hover .quick-view-btn {
  opacity: 1;
  transform: none;
}

.product-stars {
  margin: 6px 0;
}

.product-stars .star-rating {
  margin: auto;
}
.woocommerce .star-rating {
  float: right;
  overflow: hidden;
  position: relative;
  height: 1em;
  line-height: 1;
  font-size: 1em;
  width: 5.4em;
  color: #ffa704 !important;
  justify-self: center;
}

/* GRID DOS PRODUTOS */

.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 24px !important;

  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after {
  display: none !important;
}

.woocommerce ul.products li.product {
  float: none !important;
  width: 100% !important;
  margin: 0 !important;
  clear: none !important;
}

/* Tablet */
@media (max-width: 1024px) {
  .woocommerce ul.products {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .woocommerce ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Celular pequeno */
@media (max-width: 480px) {
  .woocommerce ul.products {
    grid-template-columns: 1fr !important;
  }
}
/* FORÇAR GRID */

body .woocommerce ul.products,
body ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 24px !important;
  width: 100% !important;
}

body .woocommerce ul.products li.product,
body ul.products li.product {
  width: auto !important;
  float: none !important;
  margin: 0 !important;
  clear: none !important;
  max-width: none !important;
}

body .woocommerce ul.products::before,
body .woocommerce ul.products::after {
  display: none !important;
  content: none !important;
}
.yith-wcwl-add-to-wishlist-button__label {
  display: none !important;
}
/* Remove estilo padrão do YITH */
.yith-wcwl-add-to-wishlist,
.yith-wcwl-add-to-wishlist * {
  margin: 0;
  padding: 0;
  box-shadow: none;
}

/* Posicionamento */
.product-thumb .yith-wcwl-add-to-wishlist {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 20;
}

/* Seu botão */
.product-thumb .yith-wcwl-add-to-wishlist a {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #dfeaf2;
  color: #33b5ef;
  transition: 0.3s;
}

/* Hover */
.product-thumb .yith-wcwl-add-to-wishlist a:hover {
  background: #33b5ef;
  color: #fff;
  transform: scale(1.05);
}

/* Esconde textos do YITH */
.yith-wcwl-add-to-wishlist .feedback,
.yith-wcwl-add-to-wishlist .yith-wcwl-wishlistaddedbrowse,
.yith-wcwl-add-to-wishlist .yith-wcwl-wishlistexistsbrowse {
  display: none !important;
}
.woocommerce ul.products li.product {
  position: relative;
}

.product-wishlist {
  position: absolute;
  top: 15px;
  right: 15px;
  z-index: 20;
}

.product-wishlist .yith-wcwl-add-to-wishlist {
  margin: 0 !important;
}

.product-wishlist a {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  transition: 0.3s;
}

.product-wishlist a:hover {
  background: var(--primary);
  color: #fff;
  transform: scale(1.05);
} /* GRID */
.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.woocommerce ul.products li.product {
  position: relative;
  background: #fff;
  border: 1px solid #cfe8f5;
  border-radius: 30px;
  overflow: hidden;
  text-align: center;
  padding-bottom: 20px;
  margin: 0 !important;
  width: 100% !important;
  float: none !important;
  transition: 0.35s;
}

.woocommerce ul.products li.product:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}

.woocommerce ul.products li.product img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  margin: 0;
}

/* BADGE */
.woocommerce span.onsale {
  top: 12px !important;
  left: 12px !important;
  right: auto !important;
  background: #d9a03d !important;
  color: #fff !important;
  border-radius: 20px !important;
  padding: 8px 14px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
}

/* YITH */
.yith-wcwl-add-to-wishlist {
  position: absolute;
  top: 12px;
  right: 12px;
  margin: 0 !important;
  z-index: 10;
}

.yith-wcwl-add-to-wishlist a {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}

/* CATEGORIA */
.product-category {
  margin-top: 18px;
  color: #88d1ff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* Garante que o container da miniatura da categoria seja perfeitamente quadrado e uniforme */
.product-category .product-thumb,
.category-card .product-thumb,
.site-header .category-menu-thumb {
  aspect-ratio: 1 / 1 !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: var(
    --muted
  ) !important; /* Fundo suave caso a imagem do placeholder demore a carregar */
  border-radius: var(--radius) !important;
}

/* Força todas as imagens internas a se comportarem como 'cover' (cortando as sobras sem amassar) */
.category-thumb-image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 0.3s ease !important;
}

/* Efeito sutil de hover idêntico ao dos seus produtos */
.product-category:hover .category-thumb-image {
  transform: scale(1.05);
}

/* TÍTULO */
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 16px;
  font-family: Georgia, serif;
  text-transform: uppercase;
  color: #24314a;
  line-height: 1.4;
  padding: 0 20px;
  min-height: 52px;
}

/* PREÇO */
.woocommerce ul.products li.product .price {
  display: block;
  margin-top: 10px;
}

.woocommerce ul.products li.product .price bdi {
  color: #2eaef2;
  font-size: 24px;
  font-weight: 700;
}

/* BOTÃO */
.woocommerce ul.products li.product .button {
  width: 85%;
  margin: 15px auto 0 !important;
  display: block !important;
  border-radius: 50px !important;
  background: #53b9ea !important;
  color: #fff !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 2px;
  padding: 16px !important;
}

/* SINGLE PRODUCT */
/* ==========================================================================
   LAYOUT PREMIUM: PÁGINA INTERNA DO PRODUTO (SINGLE PRODUCT)
   ========================================================================== */

/* Container Principal do Produto */
.single-product div.product {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  max-width: 1200px;
  margin: 40px auto;
  padding: 0 20px;
}

/* Coluna da Esquerda: Imagens e Slide */
.single-product div.product .woocommerce-product-gallery {
  flex: 1 1 500px;
  max-width: 550px;
  width: 100%;
  position: relative;
}

/* Ajuste do tamanho da imagem para não estourar a tela */
.single-product div.product .woocommerce-product-gallery img {
  width: 100%;
  height: auto;
  object-fit: cover;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.05);
}

/* Coluna da Direita: Informações e Compra */
.single-product div.product .summary {
  flex: 1 1 450px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Título do Produto */
.single-product .product_title {
  font-family: var(--font-body);
  font-size: 2.5rem;
  color: #1a365d; /* Tom azul escuro elegante */
  margin-bottom: 15px;
}

/* Preços */
.single-product .price {
  font-size: 16px;
  color: #03a9f4 !important;
  font-weight: 700;
  margin-bottom: 25px;
}

.single-product .price del {
  font-size: 1.2rem;
  color: #94a3b8;
  margin-right: 10px;
}

/* Área de Variações e Botão de Compra */
.single-product form.cart {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 20px;
}

.single-product .quantity input {
  padding: 10px;
  border-radius: 50px;
  border: 1px solid #cbd5e1;
  text-align: center;
  width: 80px;
}

/* Customização dos Controles do Slide Nativo (Flexslider) */
.woocommerce-product-gallery .flex-control-thumbs {
  display: flex;
  gap: 10px;
  margin-top: 15px;
  padding: 0;
  list-style: none;
}

.woocommerce-product-gallery .flex-control-thumbs li {
  width: 20%;
  cursor: pointer;
}

.woocommerce-product-gallery .flex-control-thumbs li img {
  border: 2px solid transparent;
  transition: all 0.3s ease;
  border-radius: 8px;
}

.woocommerce-product-gallery .flex-control-thumbs li img.flex-active,
.woocommerce-product-gallery .flex-control-thumbs li img:hover {
  border-color: #03a9f4;
  opacity: 0.8;
}

/* Responsividade para celulares */
@media (max-width: 768px) {
  .single-product div.product {
    flex-direction: column;
    gap: 20px;
  }
  .single-product div.product .woocommerce-product-gallery,
  .single-product div.product .summary {
    max-width: 100%;
    flex: 1 1 100%;
  }
  .single-product .product_title {
    font-size: 1.8rem;
  }
}

.single-product form.cart {
  margin-top: 30px;
}

.single-product .quantity input {
  height: 52px;
  border-radius: 30px;
}

.single-product button.single_add_to_cart_button {
  height: 60px !important;
  border-radius: 40px !important;
  padding: 0 40px !important;
  background: linear-gradient(90deg, #00d4ff, #002c7a) !important;
}

/* Tamanhos */

.variations tbody {
  display: flex;
  gap: 10px;
}

.variations select {
  border: 2px solid #dce7ef;
  border-radius: 40px;
  height: 52px;
  padding: 0 20px;
}

/* Cor */

.variations tr {
  display: block;
  margin-bottom: 20px;
}

/* Quantidade */

.quantity input {
  height: 52px !important;
  border-radius: 30px !important;
}

/****** MENSAGEM DE SUCESSO */
.woocommerce-message {
  max-width: 650px;
  margin: 10px auto;
  padding: 20px 30px;
  background: #d4edda;
  border: 1px solid #c3e6cb;
  color: #155724;
  border-radius: 28px;
}

.woocommerce-message::before {
  content: "\e015";
  color: #8fae1b;
  top: 5px;
  padding: 15px 10px 0px 0px;
  gap: 15px;
  display: contents;
}

/* ==========================================================================
   CORREÇÃO INTEGRAL: WOOCOMMERCE SYSTEM DANIEL PIJAMAS
   ========================================================================== */

/* 1. COMPATIBILIDADE DAS FONTES E CORES GERAIS */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce div.product .product_title {
  font-family: var(--font-body) !important;
  color: var(--foreground) !important;
}

.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce ul.products li.product .price bdi,
.single-product .price {
  color: var(--primary) !important;
  font-family: var(--font-body) !important;
}

/* 2. PADRONIZAÇÃO DE TODOS OS BOTÕES DO WOOCOMMERCE (IGUAL AO .btn-premium) */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce-page button.button,
.woocommerce #respond input#submit,
.woocommerce div.product form.cart .button,
.single-product button.single_add_to_cart_button {
  background: var(--gradient-primary) !important;
  color: var(--primary-foreground) !important;
  font-family: var(--font-body) !important;
  border-radius: var(--radius-pill) !important;
  padding: 13px 28px !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  font-size: 12px !important;
  border: 0 !important;
  box-shadow: 0 4px 12px rgba(60, 100, 200, 0.25) !important;
  transition: 0.3s !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce div.product form.cart .button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(60, 100, 200, 0.35) !important;
  color: #fff !important;
}

/* 3. REFATORAÇÃO DO CARD DE PRODUTO NA VITRINE (IGUAL AO SEU DESIGN) */
.woocommerce ul.products li.product {
  background: #fff !important;
  border: 1px solid var(--border) !important;
  border-radius: 28px !important;
  overflow: hidden !important;
  text-align: center !important;
  padding-bottom: 20px !important;
  transition: 0.35s !important;
  box-shadow: none !important;
}

.woocommerce ul.products li.product:hover {
  transform: translateY(-8px) !important;
  box-shadow: var(--shadow-glow) !important;
}

/* Correção da Imagem no Loop */
.woocommerce ul.products li.product a img {
  width: 100% !important;
  aspect-ratio: 3/4 !important;
  object-fit: cover !important;
  margin: 0 0 14px 0 !important;
  border-radius: 28px 28px 0 0 !important;
}

/* Ajuste do botão dentro do card de listagem */
.woocommerce ul.products li.product .button {
  width: 85% !important;
  margin: 15px auto 0 !important;
  display: block !important;
}

/* 4. BADGES DE DESCONTO (ONSALE) */
.woocommerce span.onsale {
  background: var(--accent) !important;
  color: #fff !important;
  border-radius: var(--radius-pill) !important;
  padding: 6px 14px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  top: 12px !important;
  left: 12px !important;
  right: auto !important;
  min-height: auto !important;
  min-width: auto !important;
  line-height: 1.4 !important;
}

/* 5. DESIGN DA PÁGINA INTERNA DO PRODUTO (SINGLE PRODUCT) */
.single-product div.product .product_title {
  font-family: var(--font-body) !important;
  font-size: 42px !important;
  color: var(--primary) !important;
}

.single-product .woocommerce-product-gallery img {
  border-radius: 28px !important;
}

/* Customização dos Seletores de Variações (Tamanho/Cor) */
.woocommerce div.product form.cart .variations select {
  border: 2px solid var(--secondary) !important;
  background: var(--bg-light) !important;
  border-radius: var(--radius-pill) !important;
  height: 46px !important;
  padding: 0 20px !important;
  font-family: var(--font-body) !important;
  color: var(--foreground) !important;
  outline: none !important;
}

.woocommerce div.product form.cart .variations select:focus {
  border-color: var(--primary) !important;
  background: #fff !important;
}

/* Campo de Quantidade */
.woocommerce div.product .quantity input.qty {
  height: 46px !important;
  border-radius: var(--radius-pill) !important;
  border: 2px solid var(--secondary) !important;
  background: var(--bg-light) !important;
  font-family: var(--font-body) !important;
}

/* 6. MENSAGENS DO SYSTEMA (SUCESSO / ERRO) */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  background: var(--bg-lilac) !important;
  border: 1px solid var(--border) !important;
  color: var(--foreground) !important;
  border-radius: var(--radius) !important;
  padding: 18px 24px !important;
  box-shadow: var(--shadow-soft) !important;
  font-family: var(--font-body) !important;
}

/* ==========================================================================
   GRID DE PRODUTOS - SEÇÃO HOME (DANIEL PIJAMAS)
   ========================================================================== */

/* 1. Neutraliza os padrões antigos e quebras de float do WooCommerce */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.products::before,
.products::after {
  display: none !important;
  content: none !important;
}

/* 2. Ativação do Grid Responsivo (Meta da Imagem 2) */
.products {
  display: grid !important;
  grid-template-columns: repeat(1, 1fr) !important; /* Mobile: 2 colunas */
  gap: 16px !important;
  margin: 32px auto !important;
  padding: 0 16px !important;
  max-width: 1240px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

@media (min-width: 300px) {
  .products {
    grid-template-columns: repeat(2, 1fr) !important; /* Mobile: 2 colunas */
  }
  .product-card .btn-premium a {
    width: 100%;
  }
}


@media (min-width: 768px) {
  .products {
    grid-template-columns: repeat(3, 1fr) !important; /* Tablet: 3 colunas */
    gap: 24px !important;
  }
  
}

@media (min-width: 1024px) {
  .products {
    grid-template-columns: repeat(
      4,
      1fr
    ) !important; /* Desktop: 4 colunas idênticas ao protótipo */
    gap: 30px !important;
  }
}

/* 3. Estilização do Card (Efeito Elevado Premium) */
.product-card {
  display: flex !important;
  flex-direction: column !important;
  background: #ffffff !important;
  border-radius: var(--radius, 12px) !important;
  position: relative !important;
  float: none !important; /* Mata o float herdado do WP */
  width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* 4. Container de Imagem com Aspect-Ratio Fixo (Evita desalinhamento se as fotos forem de tamanhos diferentes) */
.product-thumb {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 3 / 4 !important; /* Proporção ideal para pijamas/moda */
  overflow: hidden !important;
  border-radius: var(--radius, 12px) !important;
  /*background-color: var(--bg-light, #f9f9f9) !important;*/
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}

.product-thumb a {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

.product-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  margin: 0 !important;
  padding: 0 !important;
  transition:
    opacity 0.4s ease,
    transform 0.4s ease !important;
}

/* Configuração do Efeito Hover (Troca de imagem suave) */
.product-thumb img.hover {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  opacity: 0 !important;
  z-index: 1 !important;
}

.product-card:hover .product-thumb img.main {
  opacity: 0 !important;
}

.product-card:hover .product-thumb img.hover {
  opacity: 1 !important;
  transform: scale(1.02) !important; /* Leve zoom elegante */
}

/* 5. Botão de Favoritos (Coração flutuando sobre a foto no canto superior direito) */
.product-wishlist {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  z-index: 10 !important;
  margin: 0 !important;
}

.product-fav {
  background: rgba(255, 255, 255, 0.85) !important;
  border: none !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
  transition: all 0.2s ease !important;
  color: var(--muted-foreground, #71717a) !important;
  padding: 0 !important;
}

.product-fav:hover {
  transform: scale(1.08) !important;
  background: #ffffff !important;
  color: oklch(72% 0.14 230) !important; /* Cor Vermelho/Branco Premium */
}

/* Estado ativo sincronizado pelo main.js */
.product-fav.active {
  background: oklch(72% 0.14 230) !important;
  color: #ffffff !important; /* Cor Azul/Branco Premium */
}

.product-fav.active svg {
  fill: #ffffff !important;
}

/* 6. Bloco de Textos e Tipografia */
.product-info {
  padding: 15px 12px 12px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

/* Categoria sutil */
.product-cat {
  font-family: var(--font-body, "Lato", sans-serif) !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  color: var(--muted-foreground, #a1a1aa) !important;
  display: block !important;
}

/* Título Serifado Bodoni */
.product-title {
  margin: 2px 0 0 0 !important;
  font-family: var(--font-body, "Bodoni Moda", serif) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
}

.product-title a {
  color: oklch(32.109% 0.00004 271.152) !important;
  text-decoration: none !important;
  font-size: 20px;
  font-family: var(--font-body);
}

/* Área de Preço e Oferta PIX */
.product-price-wrapper {
  display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;
  margin-top: 2px !important;
}

.product-price-wrapper .price {
  font-family: var(--font-body, "Lato", sans-serif) !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  color: var(--primary, #09c4fd) !important;
}

/* Correção para quando houver preço "De / Por" promocional */
.product-price-wrapper .price del {
  color: var(--muted-foreground, #a1a1aa) !important;
  font-weight: 400 !important;
  font-size: 18px !important;
  margin-right: 6px !important;
  display: inline-block !important;
}

.product-price-wrapper .price ins {
  text-decoration: none !important;
  color: var(--primary, #b388ff) !important;
  font-weight: 700 !important;
}

/* Linha de Destaque do PIX */
.pix-price {
  font-family: var(--font-body, "Lato", sans-serif) !important;
  font-size: 14px !important;
  color: #dca043 !important; /* Verde Esmeralda Soft */
  font-weight: 500 !important;
  display: block !important;
}

/* Estilo dos botões flutuantes */
.product-quickview {
  background: rgba(255, 255, 255, 0.85) !important;
  border: none !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
  transition: all 0.2s ease !important;
  color: var(--muted-foreground, #71717a) !important;
  padding: 0 !important;
}
.product-quickview:hover {
  transform: scale(1.08) !important;
  background: #ffffff !important;
  color: var(--primary, #b388ff) !important;
}

/* Estrutura do Modal */
.qv-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}
.qv-modal.open {
  opacity: 1;
  visibility: visible;
}
body.qv-open {
  overflow: hidden;
}

.qv-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
}

.qv-content-wrapper {
  position: relative;
  background: #ffffff;
  width: 90%;
  max-width: 840px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  z-index: 2;
  animation: qvSlide 0.3s ease;
}

.qv-close {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  right: 20px;
  background: none;
  border: none;
  font-size: 28px;
  cursor: pointer;
  color: var(--primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  z-index: 10;
}

.qv-content {
  padding: 32px;
  max-height: 85vh;
  overflow-y: auto;
}

/* Layout de Duas Colunas do Modal */
.qv-product-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
@media (min-width: 640px) {
  .qv-product-layout {
    grid-template-columns: 1fr 1.2fr;
  }
}

.qv-gallery img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  object-fit: cover;
}
.qv-summary {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-family: var(--font-body, sans-serif);
}
.qv-summary h2 {
  font-family: var(--font-title, serif);
  font-size: 24px;
  margin: 0;
}
.qv-price-box {
  font-size: 18px;
  font-weight: 600;
}
.qv-description {
  font-size: 14px;
  color: #71717a;
  line-height: 1.5;
}
.qv-view-more {
  font-size: 13px;
  color: var(--primary, #b388ff);
  text-decoration: none;
  margin-top: 8px;
  display: inline-block;
}

@keyframes qvSlide {
  from {
    transform: translateY(20px);
  }
  to {
    transform: translateY(0);
  }
}

/* Spinner de Carregamento Premium */
.qv-loading {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 250px !important;
  font-family: var(--font-body, sans-serif) !important;
  font-size: 14px !important;
  color: #a1a1aa !important;
  gap: 16px !important;
}

/* Cria o círculo rotativo */
.qv-loading::before {
  content: "" !important;
  width: 32px !important;
  height: 32px !important;
  border: 3px solid #f4f4f5 !important;
  border-top-color: var(
    --primary,
    #b388ff
  ) !important; /* Cor lilás do seu tema */
  border-radius: 50% !important;
  animation: qvSpin 0.8s linear infinite !important;
}

@keyframes qvSpin {
  to {
    transform: rotate(360deg);
  }
}

/* Ajuste no botão de compra direta dentro do modal */
.qv-direct-buy {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  padding: 12px !important;
  background: var(--primary, #b388ff) !important;
  color: #fff !important;
  border-radius: 30px !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  font-size: 13px !important;
  letter-spacing: 0.5px !important;
  text-align: center !important;
}

/* Customização do Título do Painel */
.dashboard-fav-title {
  font-family: var(--font-title, "Bodoni Moda", serif) !important;
  font-size: 24px !important;
  color: #0f172a !important;
  font-weight: 700;
}

.dashboard-fav-sub {
  font-size: 13px !important;
  color: #64748b !important;
  margin-bottom: 28px !important;
}

/* Grid Interno do Dashboard */
.fav-dashboard-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
  gap: 20px !important;
  width: 100% !important;
}

/* Tipografia de Preços Baseada nos Prints */
.price-main-blue {
  display: block !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #38bdf8 !important; /* Azul destacado do print */
  text-align: center !important;
  margin-top: 6px;
}

.pix-price-sub {
  display: block !important;
  font-size: 12px !important;
  color: #f59e0b !important; /* Dourado/Laranja do PIX */
  font-weight: 600 !important;
  text-align: center !important;
  margin-top: 2px;
}

/* Novo Botão Arredondado com Degradê (Estilo "ADICIONAR") */
.btn-premium-gradient {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  background: linear-gradient(135deg, #38bdf8 0%, #7dd3fc 100%) !important;
  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  padding: 12px 20px !important;
  border-radius: 50px !important; /* Totalmente arredondado */
  text-transform: uppercase !important;
  border: none !important;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease !important;
  text-decoration: none !important;
  box-shadow: 0 4px 14px rgba(56, 189, 248, 0.2) !important;
}

.btn-premium-gradient:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px rgba(56, 189, 248, 0.3) !important;
  color: #ffffff !important;
}

/* Estado Vazio Amigável */
.fav-empty-state {
  text-align: center !important;
  padding: 50px 20px !important;
  background: #f8fafc !important;
  border-radius: 16px !important;
  border: 1px dashed #cbd5e1 !important;
}

.btn-premium-action {
  display: inline-block !important;
  background: #38bdf8 !important;
  color: #fff !important;
  padding: 10px 24px !important;
  border-radius: 50px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  font-size: 13px !important;
}
/* ==========================================================================
   ESTILIZAÇÃO DO DASHBOARD DE MEMBROS & FAVORITOS
   ========================================================================== */

/* Ajuste estrutural do painel padrão do WooCommerce */
.woocommerce-account .woocommerce {
  display: flex !important;
  gap: 40px !important;
  margin-top: 30px !important;
  align-items: flex-start !important;
}

/* Menu Lateral */
.woocommerce-MyAccount-navigation {
  flex: 0 0 240px !important;
  background: #ffffff !important;
  border-radius: 16px !important;
  padding: 20px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
}

.woocommerce-MyAccount-navigation ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.woocommerce-MyAccount-navigation li {
  margin-bottom: 8px !important;
}

.woocommerce-MyAccount-navigation li a {
  display: block !important;
  padding: 12px 16px !important;
  color: #475569 !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  border-radius: 8px !important;
  transition: all 0.2s ease !important;
}

.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation li a:hover {
  background: #e0f2fe !important;
  color: #0284c7 !important;
}

/* Área de Conteúdo do Dashboard */
.woocommerce-MyAccount-content {
  flex: 1 !important;
  background: #ffffff !important;
  border-radius: 16px !important;
  padding: 30px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
}

/* Títulos do Dashboard */
.dashboard-fav-title {
  font-family: var(--font-body) !important;
  font-size: 28px !important;
  color: #03a9f4 !important; /* Azul do seu tema */
  margin-top: 0 !important;
  margin-bottom: 6px !important;
  font-weight: 700 !important;
}

.dashboard-fav-sub {
  font-size: 14px !important;
  color: #64748b !important;
  margin-bottom: 30px !important;
}

/* Grelha de Favoritos Responsiva */
.fav-dashboard-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
  gap: 24px !important;
  width: 100% !important;
  padding: 10px 0 !important;
}

/* Customização dos Cards de Produto no Dashboard */
.fav-card-item {
  background: #ffffff !important;
  border: 1px solid #f1f5f9 !important;
  border-radius: 20px !important;
  padding: 15px !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.03) !important;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease !important;
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
}

.fav-card-item:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 15px 35px rgba(3, 169, 244, 0.1) !important;
}

/* Thumbnail e Badges */
.fav-card-item .product-thumb {
  position: relative !important;
  border-radius: 15px !important;
  overflow: hidden !important;
  margin-bottom: 15px !important;
}

.fav-card-item .product-thumb img {
  width: 100% !important;
  height: auto !important;
  object-fit: cover !important;
}

/* Badge Mais Vendido */
.badge-premium-fav {
  position: absolute !important;
  top: 10px !important;
  left: 10px !important;
  background: #eab308 !important;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 4px 12px !important;
  border-radius: 20px !important;
  text-transform: uppercase !important;
  z-index: 2 !important;
}

/* Botão Coração */
.fav-card-item .product-wishlist-wrapper {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  z-index: 2 !important;
}

.fav-card-item .js-wish-toggle {
  background: #ffffff !important;
  border: none !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;
  cursor: pointer !important;
}

/* Infos do Produto */
.fav-card-item .product-cat {
  font-size: 11px !important;
  text-transform: uppercase !important;
  color: #03a9f4 !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  display: block !important;
  text-align: center !important;
}

.fav-card-item .product-title {
  font-family: "Bodoni Moda", serif !important;
  font-size: 16px !important;
  text-align: center !important;
  margin: 8px 0 !important;
  text-transform: uppercase !important;
}

.fav-card-item .product-title a {
  color: #1e293b !important;
  text-decoration: none !important;
}

/* Preços Estilo Premium */
.price-main-blue {
  display: block !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  color: #03a9f4 !important;
  text-align: center !important;
}

.pix-price-sub {
  display: block !important;
  font-size: 12px !important;
  color: #eab308 !important;
  font-weight: 600 !important;
  text-align: center !important;
  margin-top: 2px !important;
}

/* Botão Adicionar com o Degradê Arredondado */
.btn-premium-gradient-fav {
  display: block !important;
  background: linear-gradient(135deg, #03a9f4 0%, #3bf7ff 100%) !important;
  color: #ffffff !important;
  text-align: center !important;
  padding: 12px 20px !important;
  border-radius: 50px !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 1px !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  margin-top: 15px !important;
  transition: opacity 0.2s !important;
  border: none !important;
  width: 100% !important;
}

.btn-premium-gradient-fav:hover {
  opacity: 0.9 !important;
  color: #ffffff !important;
}

/* ==========================================================================
   AJUSTE DE DESIGN DO MENU SUPERIOR (HEADER)
   ========================================================================== */

/* Garante o alinhamento em linha de todos os elementos do topo */
.header-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 20px !important;
  padding: 15px 20px !important;
}

/* Limita e ajusta o tamanho do logo para não estourar o topo */
.site-header .logo img {
  max-height: 80px !important; /* Ajuste premium para não quebrar a barra */
  width: auto !important;
  object-fit: contain !important;
  display: inline-block !important;
  vertical-align: middle !important;
}

/* Alinha os ícones de ação (Conta, Favoritos, Sacola) */
.header-actions {
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
}

.header-actions a {
  color: #03a9f4 !important; /* Mantém o azul do tema */
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
}

/* Ajuste fino dos badges de contagem (Coração e Sacola) */
.action-badge {
  position: absolute !important;
  top: -8px !important;
  right: -8px !important;
  background-color: #eab308 !important; /* Amarelo premium */
  color: #ffffff !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  min-width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 2px !important;
}

/* =========================
FOOTER BENEFITS
========================= */

.footer-benefits {
  max-width: 1280px;
  margin: -40px auto;
  padding: 0 20px;
  position: relative;
  z-index: 20;
  margin-bottom: -125px;
}

.footer-benefits-card {
  background: #fff;
  border-radius: 32px;
  padding: 28px 35px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);

  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 25px;
}

.footer-benefit-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.footer-benefit-icon {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--bg-light);
  display: flex;
  align-items: center;
  justify-content: center;
  color: oklch(0.49 0.13 234.71);
  font-size: 22px;
  flex-shrink: 0;
}

.footer-benefit-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--primary);
  margin-bottom: 2px;
}

.footer-benefit-text {
  font-size: 12px;
  color: #888;
}

/* MOBILE */

@media (max-width: 900px) {
  .footer-benefits-card {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 600px) {
  .footer-benefits {
    margin: 30px auto 0;
  }

  .footer-benefits-card {
    grid-template-columns: 1fr;
    padding: 24px;
    border-radius: 24px;
  }

  .footer-benefit-item {
    justify-content: flex-start;
  }
}

/* ==========================================================================
   AJUSTE E ALINHAMENTO DO MENU SUPERIOR (HEADER)
   ========================================================================== */

/* Centraliza verticalmente todos os elementos do topo */
.site-header .container.header-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 30px !important;
  padding: 2px 2px !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  flex-wrap: wrap;
}

/* Controla o tamanho da logo para não quebrar o layout */
.site-header .logo {
  display: flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
}

.site-header .logo img {
  height: auto !important;
  object-fit: contain !important;
}

/* Agrupa e alinha os ícones de ação do cliente */
.header-actions {
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
  flex-shrink: 0 !important;
}

.header-actions a,
.header-actions .mobile-toggle {
  color: #03a9f4 !important; /* Azul padrão Daniel Pijamas */
  position: relative !important;
  /*display: inline-flex !important;*/
  align-items: center !important;
  justify-content: center !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  cursor: pointer !important;
  text-decoration: none !important;
}

.header-actions svg {
  width: 20px !important;
  height: 20px !important;
}

/* Navegação em linha abaixo do cabeçalho principal */
.main-nav {
  border-top: 1px solid #f1f5f9 !important;
  padding: 5px 0 !important;
  background: #ffffff !important;
}

.main-nav ul {
  display: flex !important;
  justify-content: center !important;
  gap: 35px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.main-nav ul li a {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #475569 !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  transition: color 0.2s !important;
}

.main-nav ul li a:hover {
  color: #03a9f4 !important;
}

/* ==========================================================================
   CORREÇÃO DE LISTA DE ITENS - MINI-CART (SACOLA REFINADA)
   ========================================================================== */

/* Lista de Itens */
.cart-side .body ul.woocommerce-mini-cart {
  list-style: none !important;
  margin: 0 !important;
  padding: 20px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
}

/* CORREÇÃO: Ajustado as colunas do Grid para dar espaço real à imagem (85px) */
.cart-side .body ul.woocommerce-mini-cart li.woocommerce-mini-cart-item {
  display: grid !important;
  grid-template-columns: 85px 1fr 24px !important; /* Coluna 1 agora tem 85px livres */
  grid-template-rows: auto auto auto !important;
  gap: 4px 16px !important;
  align-items: start !important;
  position: relative !important;
  padding-bottom: 20px !important;
  border-bottom: 1px solid #e2f5fc !important;
}

/* Imagem do Produto */
.cart-side .body ul.woocommerce-mini-cart li img {
  grid-column: 1 !important;
  grid-row: 1 / span 3 !important;
  width: 85px !important;
  height: 100px !important;
  object-fit: cover !important;
  border-radius: 18px !important;
  margin: 0 !important;
}

/* Título do Produto */
.cart-side .body ul.woocommerce-mini-cart li a:not(.remove) {
  grid-column: 2 !important;
  grid-row: 1 !important;
  font-size: 13px !important; /* Leve redução para não estourar em telas menores */
  font-weight: 700 !important;
  color: #24314a !important;
  text-transform: uppercase;
  line-height: 1.3 !important;
  margin: 0 !important;
}

/* CORREÇÃO CIRÚRGICA PARA VARIAÇÕES (Tamanho / Cor) */
.cart-side .body .variation {
  grid-column: 2 !important;
  grid-row: 2 !important;
  display: block !important; /* Mudado de flex para block para garantir a quebra ideal */
  font-size: 11px !important;
  color: #7b8e9b !important;
  margin: 2px 0 4px 0 !important;
  list-style: none !important;
  padding: 0 !important;
  width: 100% !important;
}

/* Garante os rótulos pequenos e organizados */
.cart-side .body .variation dt {
  font-weight: 600 !important;
  display: inline !important;
}
.cart-side .body .variation dd {
  font-weight: 700 !important;
  display: inline !important;
  margin-left: 3px !important;
  margin-right: 8px !important;
  color: #24314a !important;
}

/* Preço do Item e Quantidade */
.cart-side .body li .quantity {
  grid-column: 2 !important;
  grid-row: 3 !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #1da7e6 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  width: 100% !important;
}

/* ==========================================================================
   CUPOM, CEP E BOTÕES DE AÇÃO (ÁREA INFERIOR)
   ========================================================================== */

/* Barra de progresso de Frete Grátis (caso use) */
.cart-shipping-threshold {
  background: var(--bg-light);
  border-radius: var(--radius-pill);
  height: 8px;
  width: 100%;
  overflow: hidden;
  margin: 10px 0 20px;
}
.cart-shipping-progress {
  background: #1da7e6;
  height: 100%;
  border-radius: var(--radius-pill);
}

/* Campos de entrada customizados (Cupom e CEP) */
.cart-side .coupon-wrap,
.cart-side .shipping-wrap {
  display: flex !important;
  gap: 10px !important;
  margin-bottom: 12px !important;
}

.cart-side input.input-text {
  flex: 1 !important;
  border: 2px solid #bde9f9 !important;
  background: #e6f7fd !important;
  border-radius: var(--radius-pill) !important;
  padding: 10px 16px !important;
  font-size: 13px !important;
  outline: none !important;
  color: var(--foreground) !important;
}

/* Subtotal e Totais */
.cart-side .woocommerce-mini-cart__total,
.cart-side .total-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 16px 0 !important;
  border-top: 1px solid var(--border) !important;
  margin-top: 10px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}

.cart-side .woocommerce-mini-cart__total strong {
  font-family: var(--font-body) !important;
  text-transform: uppercase !important;
  color: var(--foreground) !important;
}

.cart-side .woocommerce-mini-cart__total .amount {
  font-size: 20px !important;
  color: #1da7e6 !important;
}

/* Área de botões nativos do WooCommerce Mini-Cart */
.cart-side .woocommerce-mini-cart__buttons {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  padding: 0 !important;
  margin-top: 15px !important;
}

/* Transforma o botão padrão do WC no seu botão azul arredondado de checkout */
.cart-side .woocommerce-mini-cart__buttons a.button.checkout,
.cart-side .btn-checkout {
  background: #53b9ea !important;
  color: #fff !important;
  border-radius: var(--radius-pill) !important;
  padding: 14px 20px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  text-align: center !important;
  border: 0 !important;
  box-shadow: 0 4px 12px rgba(83, 185, 234, 0.2) !important;
  display: block !important;
  width: 100% !important;
}

/* Botão secundário opcional (Ver carrinho) */
.cart-side .woocommerce-mini-cart__buttons a.button:not(.checkout) {
  background: transparent !important;
  color: var(--muted-foreground) !important;
  text-align: center !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  padding: 8px !important;
  display: block !important;
}

/* Container que abriga os resultados do frete */
#dp-frete-resultado-ajax,
#dp_minicart_shipping_results,
.woocommerce-shipping-methods {
  margin-top: 15px !important;
  padding: 0 !important;
  list-style: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important; /* Espaçamento entre os cartões */
}

/* Estrutura de cada Card de Frete */
#dp-frete-resultado-ajax ul li,
#dp_minicart_shipping_results ul li,
.woocommerce-shipping-methods li {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 14px 16px !important;
  background-color: #ffffff !important;
  border: 1px solid #e2e8f0 !important; /* Borda fina idêntica ao modelo */
  border-radius: 8px !important; /* Arredondamento suave dos cantos */
  position: relative !important;
  cursor: pointer !important;
  transition: all 0.2s ease-in-out !important;
}

/* Modificação da Bolinha Radio nativa para se adequar ao design */
#dp-frete-resultado-ajax ul li input[type="radio"],
#dp_minicart_shipping_results ul li input[type="radio"],
.woocommerce-shipping-methods li input[type="radio"] {
  margin: 0 12px 0 0 !important;
  accent-color: #54c3f1 !important; /* Deixa a seleção na cor azul do tema */
  cursor: pointer !important;
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0 !important;
}

/* Organização Interna dos Textos (Nome do frete e Preço) */
#dp-frete-resultado-ajax ul li label,
#dp_minicart_shipping_results ul li label,
.woocommerce-shipping-methods li label {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
  margin: 0 !important;
  cursor: pointer !important;
  font-size: 14px !important;
  color: #475569 !important;
  font-weight: 500 !important;
}

/* Alinha o preço e dá o devido destaque em negrito */
#dp-frete-resultado-ajax ul li label .amount,
#dp_minicart_shipping_results ul li label .amount,
.woocommerce-shipping-methods li label .amount {
  font-weight: 700 !important;
  color: #0f172a !important;
  margin-left: auto !important;
}

/* Efeito Hover ao passar o mouse nos cartões */
#dp-frete-resultado-ajax ul li:hover,
#dp_minicart_shipping_results ul li:hover,
.woocommerce-shipping-methods li:hover {
  border-color: #cbd5e1 !important;
  background-color: #f8fafc !important;
}

/* CARD SELECIONADO: Quando a opção estiver ativa, ganha um destaque suave */
#dp-frete-resultado-ajax ul li:has(input[type="radio"]:checked),
#dp_minicart_shipping_results ul li:has(input[type="radio"]:checked),
.woocommerce-shipping-methods li:has(input[type="radio"]:checked) {
  border-color: #54c3f1 !important; /* Borda azul do tema */
  background-color: #f0f9ff !important; /* Fundo azul bem discreto */
}

/* Estrutura da lista de fretes */
.radio-button-container {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding: 0 !important;
  margin: 10px 0 !important;
  list-style: none !important;
}

/* O Cartão */
.radio-button-item label.radio-button {
  display: block !important;
  width: 100% !important;
  padding: 12px !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.radio-button-item .radio-button-content {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

/* Customização dos Círculos de Seleção */
.radio-button-icons-container {
  position: relative !important;
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
}

.radio-button-icon.unchecked {
  position: absolute !important;
  width: 16px !important;
  height: 16px !important;
  border: 2px solid #cbd5e1 !important;
  border-radius: 50% !important;
  top: 0;
  left: 0;
}

/* Estado Ativo: Quando o input oculto estiver marcado */
.radio-button-item
  input[type="radio"]:checked
  + .radio-button-content
  .radio-button-icon.unchecked {
  border-color: #54c3f1 !important; /* Cor Destaque */
}

.radio-button-item
  input[type="radio"]:checked
  + .radio-button-content
  .radio-button-icon.checked {
  position: absolute !important;
  width: 8px !important;
  height: 8px !important;
  background: #54c3f1 !important;
  border-radius: 50% !important;
  top: 4px;
  left: 4px;
}

/* ==========================================================================
   CARRINHO LATERAL ULTRA REFINADO (ESTILO SUA SACOLA)
   ========================================================================== */

/* Ajustes Gerais do Painel */
.cart-side {
  font-family: var(--font-body), sans-serif;
}

.cart-side header {
  padding: 24px 20px;
  border-bottom: 1px solid #e2f5fc;
}

.cart-side header h3 {
  font-family: var(--font-body);
  color: #1da7e6;
  font-size: 22px;
  letter-spacing: 1px;
}

/* Barra de Progresso de Frete Grátis */
.cart-shipping-notice {
  padding: 16px 20px 0;
  font-size: 13px;
  color: #555;
}
.cart-shipping-notice strong {
  color: #1da7e6;
}
.cart-shipping-bar {
  margin: 10px 20px 0;
  background: #e6f7fd;
  height: 10px;
  border-radius: 20px;
  overflow: hidden;
}
.cart-shipping-progress {
  background: #1da7e6;
  height: 100%;
  width: 75%; /* Ajustado dinamicamente via backend/JS se necessário */
  border-radius: 20px;
}

/* Lista de Itens */
.cart-side .body ul.woocommerce-mini-cart {
  list-style: none !important;
  margin: 0 !important;
  padding: 20px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
}

.cart-side .body ul.woocommerce-mini-cart li.woocommerce-mini-cart-item {
  display: grid !important;
  grid-template-columns: 5px 1fr 30px !important;
  grid-template-rows: auto auto auto !important;
  gap: 14px 16px !important;
  align-items: start !important;
  position: relative !important;
  padding-bottom: 20px !important;
  border-bottom: 1px solid #e2f5fc !important;
}

/* Imagem do Produto */
.cart-side .body ul.woocommerce-mini-cart li img {
  grid-column: 1 !important;
  grid-row: 1 / span 3 !important;
  width: 85px !important;
  height: 100px !important;
  object-fit: cover !important;
  border-radius: 18px !important;
  margin: 0 !important;
}

/* Título do Produto */
.cart-side .body ul.woocommerce-mini-cart li a:not(.remove) {
  grid-column: 2 !important;
  grid-row: 1 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #24314a !important;
  text-transform: uppercase;
  line-height: 1.3 !important;
  margin: 0 !important;
}

/* Variações (Tamanho / Cor) */
.cart-side .body .variation {
  grid-column: 2 !important;
  grid-row: 2 !important;
  display: flex !important;
  gap: 6px !important;
  font-size: 12px !important;
  color: #7b8e9b !important;
  margin: 2px 0 4px 0 !important;
  list-style: none !important;
  padding: 0 !important;
}

/* Preço do Item */
.cart-side .body li .quantity {
  grid-column: 2 !important;
  grid-row: 3 !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #1da7e6 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

/* Seletor Customizado de Quantidade (- 1 +) */
.custom-qty-wrapper {
  display: inline-flex !important;
  align-items: center !important;
  background: #e6f7fd !important;
  border-radius: 30px !important;
  padding: 4px 10px !important;
  width: fit-content !important;
  gap: 12px !important;
}
.custom-qty-btn {
  background: #ffffff !important;
  color: #1da7e6 !important;
  border: none !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05) !important;
}
.custom-qty-num {
  font-size: 14px !important;
  color: #24314a !important;
  font-weight: 700 !important;
}

/* Botão Remover Lixeira (Ícone Vermelho) */
.cart-side .body ul.woocommerce-mini-cart li a.remove {
  grid-column: 3 !important;
  grid-row: 1 / span 2 !important;
  justify-self: end !important;
  color: #ef4444 !important;
  font-size: 18px !important;
  background: transparent !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
}

/* Área de Cupons, CEP e Totais no Footer */
.cart-side .footer {
  padding: 20px !important;
  border-top: 1px solid #e2f5fc !important;
  background: #fff !important;
}

.cart-fields-row {
  display: grid !important;
  grid-template-columns: 1fr 100px !important;
  gap: 10px !important;
  margin-bottom: 12px !important;
}

.cart-fields-row input {
  width: 100% !important;
  border: 2px solid #bde9f9 !important;
  background: #e6f7fd !important;
  border-radius: 30px !important;
  padding: 10px 16px !important;
  font-size: 13px !important;
  outline: none !important;
  color: #24314a !important;
}

.cart-fields-row button {
  background: #1da7e6 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 30px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
}

/* Valores (Subtotal, Frete, Total) */
.cart-side .summary-row {
  display: flex !important;
  justify-content: space-between !important;
  font-size: 14px !important;
  color: #555 !important;
  margin-bottom: 8px !important;
}

.cart-side .summary-row.total-final {
  margin-top: 12px !important;
  padding-top: 12px !important;
  border-top: 1px solid #e2f5fc !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #24314a !important;
}
.cart-side .summary-row.total-final .amount {
  font-size: 22px !important;
  color: #1da7e6 !important;
  font-family: var(--font-title);
}

/* Botão Finalizar Compra */
.cart-side .woocommerce-mini-cart__buttons a.button.checkout,
.cart-side .btn-checkout-final {
  background: #9addf7 !important; /* Azul claro pastel do layout */
  color: #ffffff !important;
  border-radius: 30px !important;
  padding: 16px 20px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  text-align: center !important;
  border: none !important;
  display: block !important;
  width: 100% !important;
  box-shadow: 0 4px 15px rgba(154, 221, 247, 0.25) !important;
  transition: opacity 0.2s;
}
.cart-side .woocommerce-mini-cart__buttons a.button.checkout:hover {
  opacity: 0.9;
}

.cart-side .continue-shopping {
  display: block;
  text-align: center;
  font-size: 12px;
  color: #7b8e9b;
  margin-top: 12px;
  text-decoration: underline;
}

/*   Instagram */
/* ======================================
INSTAGRAM SECTION
====================================== */

.instagram-section {
  padding: 50px 20px;
  background: linear-gradient(180deg, #fff 0%, #f8fbff 100%);
  justify-items: center;
}

.instagram-sub {
  text-align: center;
  font-family: var(--font-cute);
  font-size: 32px;
  color: var(--secsub);
  margin-bottom: 10px;
}

.instagram-title {
  text-align: center;
  font-size: 42px;
  font-weight: 800;
  color: var(--primary);
  margin-bottom: 14px;
  font-family: var(--font-body);
}

.instagram-text {
  text-align: center;
  max-width: 600px;
  margin: 0 auto 50px;
  color: #777;
  line-height: 1.7;
}

.instagram-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 18px;
}

.instagram-card {
  position: relative;
  overflow: hidden;
  border-radius: 26px;
  aspect-ratio: 1/1;
  display: block;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.instagram-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.5s ease;
}

.instagram-card::before {
  content: "\f16d";
  font-family: "Font Awesome 6 Brands";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  color: #fff;
  background: rgba(20, 112, 181, 0.45);
  opacity: 0;
  transition: 0.35s ease;
  z-index: 2;
}

.instagram-card:hover img {
  transform: scale(1.1);
}

.instagram-card:hover::before {
  opacity: 1;
}

.instagram-button {
  width: max-content;
  margin: 45px auto 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 28px;
  border-radius: 60px;
  background: linear-gradient(135deg, var(--primary), oklch(0.36 0.14 255.39));
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: 0.3s ease;
}

.instagram-button:hover {
  transform: translateY(-4px);
  color: #fff;
}

/* MOBILE */

@media (max-width: 1100px) {
  .instagram-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 700px) {
  .instagram-grid {
    grid-template-columns: repeat(2, 1fr);

    gap: 14px;
  }

  .instagram-title {
    font-size: 30px;
  }
}

/* ==========================================================================
   VISUALIZAÇÃO RÁPIDA (QUICK VIEW) DESIGN PREMIUM
   ========================================================================== */

/* Grid Principal */
.grid-qv {
  display: grid !important;
  grid-template-columns: 45% 55% !important;
  gap: 30px !important;
  align-items: start !important;
  padding: 10px !important;
  font-family: var(--font-body), sans-serif;
}

/* Galeria de Fotos e Miniaturas */
.qv-gallery-wrapper {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.qv-main-image img {
  width: 100% !important;
  height: auto !important;
  border-radius: 18px !important;
  object-fit: cover;
}
.qv-thumbnails {
  display: flex;
  gap: 10px;
  overflow-x: auto;
}
.qv-thumb-item {
  width: 65px;
  height: 75px;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.2s;
}
.qv-thumb-item.active,
.qv-thumb-item:hover {
  border-color: #1da7e6;
}
.qv-thumb-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Informações do Produto (Coluna Direita) */
.qv-summary .product_title {
  font-size: 24px !important;
  font-weight: 700 !important;
  color: #24314a !important;
  text-transform: uppercase !important;
  margin-bottom: 8px !important;
}

.qv-price-container {
  margin-bottom: 15px;
}
.qv-price-box .amount {
  font-size: 26px !important;
  font-weight: 800 !important;
  color: #1da7e6 !important;
}
.qv-pix-price {
  font-size: 13px;
  color: #7b8e9b;
  margin-top: 2px;
}

.qv-description {
  font-size: 14px;
  line-height: 1.5;
  color: #555;
  margin-bottom: 20px;
}

/* Ocultação de tabelas/labels nativas do WooCommerce para dar espaço ao novo layout clean */
.qv-summary table.variations {
  width: 100% !important;
  border: none !important;
  margin-bottom: 15px !important;
}
.qv-summary table.variations td {
  display: block !important;
  padding: 0 !important;
  border: none !important;
}
.qv-summary table.variations .label {
  margin-bottom: 6px !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  color: #24314a !important;
  text-transform: uppercase;
}

/* Seletores Customizados (Swatches) */
.qv-custom-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}

/* Itens Individuais dos Seletores */
.qv-swatch-item {
  min-width: 40px;
  height: 40px;
  border: 2px solid #e2f5fc;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: #24314a;
  cursor: pointer;
  background: #fff;
  transition: all 0.2s ease;
  padding: 0 8px;
}

/* Estilo específico para caixas de Tamanho */
.swatches-size .qv-swatch-item {
  border-radius: 30px; /* Transforma as caixas de tamanho em pílulas arredondadas */
  background: #f4fbe2; /* Fundo suave pastel idêntico ou similar ao proposto */
  border: 1px solid #d8f3a3;
}

/* Estado de Selecionado ativo */
.qv-custom-swatches .qv-swatch-item.selected {
  border-color: #1da7e6 !important;
  background-color: #e6f7fd !important;
  box-shadow: 0 0 0 2px rgba(29, 167, 230, 0.15);
}

/* Ajuste específico quando for cor sólida */
.qv-swatch-item.has-color-fill {
  border-radius: 50%; /* Torna as variações de cores em círculos cromáticos */
  width: 34px;
  min-width: 34px;
  height: 34px;
}
.qv-swatch-item.has-color-fill.selected {
  transform: scale(1.1);
}

/* Área de Quantidade e Botão "Adicionar" Lado a Lado */
.qv-summary form.cart {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 15px !important;
  margin-top: 20px !important;
}

/* Estilização do seletor numérico nativo ajustado para o padrão redondo */
.qv-summary form.cart .quantity {
  display: inline-block !important;
  margin: 0 !important;
}
.qv-summary form.cart .quantity input.qty {
  width: 70px !important;
  height: 48px !important;
  border-radius: 30px !important;
  border: 2px solid #bde9f9 !important;
  background: #e6f7fd !important;
  text-align: center !important;
  font-weight: 700 !important;
  color: #24314a !important;
}

/* Botão Adicionar à Sacola */
.qv-summary form.cart .single_add_to_cart_button {
  flex: 1 !important;
  background: #1da7e6 !important;
  color: #ffffff !important;
  border-radius: 30px !important;
  height: 48px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(29, 167, 230, 0.2) !important;
  cursor: pointer !important;
  transition: background 0.2s;
}
.qv-summary form.cart .single_add_to_cart_button:hover {
  background: #158ec5 !important;
}

.qv-view-more {
  display: inline-block;
  margin-top: 15px;
  font-size: 12px;
  color: #7b8e9b;
  text-decoration: underline;
}

/* Responsividade Básica para Mobile */
@media (max-width: 768px) {
  .grid-qv {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
}

/* ==========================================================================
   ESTILO DO MODAL PREMIUM - VISUAL MODELO CORRIGIDO
   ========================================================================== */

/* Container Geral dentro do Modal */
.dp-tailwind-modal {
  display: grid !important;
  grid-template-columns: 1fr;
  max-height: 92vh !important;
  width: 100% !important;
  max-width: 860px !important;
  background-color: #ffffff !important;
  border-radius: 24px !important; /* rounded-3xl */
  overflow: hidden !important;
  margin: 0 auto !important;
}

@media (min-width: 768px) {
  .dp-tailwind-modal {
    grid-template-columns: repeat(
      2,
      minmax(0, 1fr)
    ) !important; /* md:grid-cols-2 */
  }
}

/* --- COLUNA DA ESQUERDA: CARROSSEL --- */
.qv-gallery-container {
  height: 300px !important;
  background-color: #ffffff !important;
  position: relative !important;
}

@media (min-width: 768px) {
  .qv-gallery-container {
    height: auto !important;
    min-height: 500px !important; /* md:min-h-[500px] */
  }
}

.dp-quickview-swiper,
.swiper-container {
  width: 100% !important;
  height: 100% !important;
}

.modal-slide-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* object-cover */
}

/* --- COLUNA DA DIREITA: CONTEÚDO --- */
.qv-details-scroll {
  overflow-y: auto !important; /* overflow-y-auto */
  padding: 28px !important; /* p-7 */
  display: flex !important;
  flex-direction: column !important;
  text-align: left !important;
}

/* Elementos de Texto */
.qv-category-tag {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
  color: var(--primary) !important; /* Tom Lilac */
  margin: 0 0 8px 0 !important;
}

.dp-tailwind-modal .product_title {
  font-family: inherit !important;
  font-size: 24px !important; /* text-2xl */
  color: #1e293b !important;
  margin: 0 0 8px 0 !important;
  font-weight: 700 !important;
}

.qv-price-container .woocommerce-Price-amount,
.dp-tailwind-modal .price {
  font-size: 30px !important; /* text-3xl */
  font-weight: 700 !important;
  margin: 0 !important;
  border: none !important;
  background: none !important;
}

.qv-short-desc {
  margin: 16px 0 !important;
  font-size: 14px !important;
  line-height: 1.625 !important;
  color: #64748b !important;
}

/* --- MUDANÇA DOS BOTÕES DE VARIAÇÃO (ESTILO REDONDO) --- */
.dp-tailwind-modal .variations {
  width: 100% !important;
  margin-bottom: 20px !important;
  border: none !important;
}

.dp-tailwind-modal .variations td {
  padding: 8px 0 !important;
  border: none !important;
  display: block !important;
}

.dp-tailwind-modal .variations label {
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: #0f172a !important;
  margin-bottom: 8px !important;
  display: block !important;
}

/* Adaptação dos Swatches originais para ficarem redondos como no seu modelo */
.dp-tailwind-modal .variable-item {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  border-radius: 9999px !important; /* Totalmente redondo */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 2px solid #e2e8f0 !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  background: #ffffff !important;
  color: #0f172a !important;
  transition: all 0.2s ease !important;
}

.dp-tailwind-modal .variable-item.selected,
.dp-tailwind-modal .variable-item:hover {
  border-color: #0091d3 !important;
  background-color: #0091d3 !important;
  color: #ffffff !important;
}

/* Se o seu tema usar select tradicional, ele fica assim: */
.dp-tailwind-modal .variations select {
  width: 100% !important;
  padding: 10px 14px !important;
  border-radius: 9999px !important;
  border: 2px solid #e2e8f0 !important;
  font-weight: 600 !important;
}

/* --- BOTÃO COMPRAR E QUANTIDADE (LADO A LADO) --- */
.dp-tailwind-modal form.cart {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important; /* gap-4 */
  margin-top: 24px !important;
  width: 100% !important;
}

/* Bloco de Quantidade em Pílula */
.dp-tailwind-modal .quantity {
  display: inline-flex !important;
  align-items: center !important;
  background-color: #f1f5f9 !important;
  border-radius: 9999px !important;
  padding: 4px !important;
}

.dp-tailwind-modal .quantity input.qty {
  width: 35px !important;
  height: 32px !important;
  border: none !important;
  background: transparent !important;
  text-align: center !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  color: #0f172a !important;
}

/* Botão Adicionar ao Carrinho Principal (Estilo Completo) */
.dp-tailwind-modal .single_add_to_cart_button {
  flex: 1 1 0% !important; /* flex-1 */
  background-color: #0091d3 !important; /* Azul oficial */
  color: #ffffff !important;
  border-radius: 9999px !important; /* Formato pílula completa */
  padding: 14px 28px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  border: none !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease !important;
  text-align: center !important;
}

.dp-tailwind-modal .single_add_to_cart_button:hover {
  background-color: #0077b0 !important;
}

.qv-view-details-link {
  margin-top: 16px !important;
  font-size: 12px !important;
  color: #64748b !important;
  text-decoration: underline !important;
}

/* ==========================================================================
   AJUSTE DOS CONTAINERS DE PRODUTOS RELACIONADOS E UPSELLS NO MOBILE
   ========================================================================== */
@media screen and (max-width: 767px) {
  /* Garante que o título e o bloco do carrossel não fiquem colados nas bordas do celular */
  .single-product .related.products,
  .single-product .upsells.products {
    padding-left: 15px !important;
    padding-right: 15px !important;
    margin-top: 35px !important;
    margin-bottom: 35px !important;
    box-sizing: border-box !important;
    overflow: visible !important; /* Crucial para o Swiper mostrar a pontinha do próximo card */
  }

  /* Corrige os títulos "Você vai amar essas Fofuras..." e "Produtos fofos Parecidos" */
  .single-product .related.products .section-title,
  .single-product .upsells.products .section-title {
    font-size: 20px !important;
    line-height: 1.3 !important;
    margin-bottom: 5px !important;
    text-align: center !important;
  }

  /* Corrige os subtítulos das seções no mobile */
  .single-product .related.products .section-sub,
  .single-product .upsells.products .section-sub {
    font-size: 14px !important;
    margin-bottom: 20px !important;
    text-align: center !important;
  }

  /* Força o container do carrossel a ignorar os paddings laterais do pai para o slide vazar bonito */
  .single-product .related.products .swiper-container,
  .single-product .upsells.products .swiper-container {
    margin-left: -15px !important;
    margin-right: -15px !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    overflow: hidden !important; /* Mantém o Swiper funcionando no trilho dele */
  }
}
/* ==========================================================================
   1. CORREÇÃO COMPLETA: PÁGINA DO PRODUTO (CORES E TAMANHOS EM CÍRCULOS)
   ========================================================================== */

/* Remove a aparência feia de tabela e organiza em blocos limpos */
.single-product div.product table.variations {
  width: 100% !important;
  border: none !important;
  background: transparent !important;
  margin-bottom: 20px !important;
}

.single-product div.product table.variations td,
.single-product div.product table.variations th {
  display: block !important;
  width: 100% !important;
  padding: 8px 0 !important;
  border: none !important;
  background: transparent !important;
  text-align: left !important;
}

/* Estilização das Labels (Cores / Tamanhos) */
.single-product div.product table.variations label {
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  color: #0f172a !important;
  margin-bottom: 8px !important;
  display: block !important;
}

/* Transforma os Dropdowns padrões em listas horizontais limpas */
/* Nota: Se você utiliza plugins de Swatches, este bloco formata os itens como botões circulares premium */
.single-product div.product .variable-items-wrapper,
.qv-product-layout .variable-items-wrapper {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

/* Força os botões de Atributos a ficarem redondos idênticos ao modelo */
.single-product div.product .variable-item,
.qv-product-layout .variable-item {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  border-radius: 50% !important; /* Círculo perfeito */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 2px solid #e2e8f0 !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  background: #ffffff !important;
  color: #0f172a !important;
  transition: all 0.2s ease !important;
  box-shadow: none !important;
  cursor: pointer !important;
}

/* Customização para variações de cores preenchidas (ex: Rosa) */
.single-product div.product .variable-item.color-variable-item,
.qv-product-layout .variable-item.color-variable-item {
  padding: 3px !important;
}

/* Estado Selecionado / Hover (Borda Azul Oficial Daniel Pijamas) */
.single-product div.product .variable-item:hover,
.single-product div.product .variable-item.selected,
.qv-product-layout .variable-item:hover,
.qv-product-layout .variable-item.selected {
  border-color: #0091d3 !important;
  background-color: #0091d3 !important;
  color: #ffffff !important;
}

/* Se a sua variação de cor tiver uma imagem interna ou cor de fundo, mantém o fundo original no hover */
.single-product div.product .variable-item.color-variable-item:hover,
.single-product div.product .variable-item.color-variable-item.selected {
  color: transparent !important;
  background-color: transparent !important;
  box-shadow:
    inset 0 0 0 3px #ffffff,
    0 0 0 2px #0091d3 !important;
}

/* Higieniza os Dropdowns nativos "Escolha uma opção" caso o plugin de Swatches não esteja ativo */
.single-product div.product table.variations select {
  width: 100% !important;
  max-width: 280px !important;
  padding: 12px 16px !important;
  border-radius: 9999px !important; /* Formato pílula */
  border: 2px solid #e2e8f0 !important;
  font-weight: 600 !important;
  color: #475569 !important;
  background-color: #f8fafc !important;
}

/* ==========================================================================
   2. REESTRUTURAÇÃO COMPLETA DA PÁGINA "MINHA CONTA" (FIM DAS SOBREPOSIÇÕES)
   ========================================================================== */

/* Corrige o container nativo do WooCommerce que está esmagando o layout */
.woocommerce-account .woocommerce {
  display: block !important;
  max-width: 1200px !important;
  margin: 40px auto !important;
  padding: 0 15px !important;
}

@media (min-width: 769px) {
  .woocommerce-account .woocommerce {
    display: flex !important; /* Divide em colunas: Menu na esquerda, Conteúdo na direita */
    align-items: flex-start !important;
    gap: 40px !important;
  }

  /* Define a largura do menu de navegação da conta */
  .woocommerce-account .woocommerce-MyAccount-navigation {
    flex: 0 0 250px !important;
    max-width: 250px !important;
    width: 250px !important;
    margin-bottom: 15px !important;
  }

  /* Define a largura do painel de conteúdo */
  .woocommerce-account .woocommerce-MyAccount-content {
    flex: 1 !important;
    background: #ffffff !important;
    padding: 30px !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
  }
}

/* Estilização dos Links do Menu Lateral (Transforma em lista vertical limpa) */
.woocommerce-MyAccount-navigation ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.woocommerce-MyAccount-navigation ul li {
  margin: 0 !important;
  padding: 0 !important;
}

.woocommerce-MyAccount-navigation ul li a {
  display: block !important;
  padding: 14px 20px !important;
  background: #f8fafc !important;
  color: #334155 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  text-decoration: none !important;
  border-radius: 12px !important;
  transition: all 0.2s ease !important;
  border-left: 4px solid transparent !important;
}

/* Destaque para o botão ativo e efeito de hover */
.woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-MyAccount-navigation ul li a:hover {
  background: #e0f2fe !important; /* Azul bem clarinho de fundo */
  color: #0091d3 !important; /* Azul oficial */
  border-left-color: #0091d3 !important;
}

/* Ajustes para a tabela de Pedidos para evitar quebras em telas menores */
.woocommerce-MyAccount-content table.shop_table {
  width: 100% !important;
  border-collapse: collapse !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  border: 1px solid #e2e8f0 !important;
}

.woocommerce-MyAccount-content table.shop_table th {
  background: #f1f5f9 !important;
  padding: 14px !important;
  font-weight: 700 !important;
  color: #1e293b !important;
}

.woocommerce-MyAccount-content table.shop_table td {
  padding: 14px !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

/* Estilização dos botões "Visualizar" da tabela de pedidos */
.woocommerce-MyAccount-content .woocommerce-button.button.view {
  background: #0091d3 !important;
  color: #ffffff !important;
  padding: 8px 20px !important;
  border-radius: 9999px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
}

/* ==========================================================================
   CORREÇÃO DOS BOTÕES DE QUANTIDADE (+ E -) NO MINI CART
   ========================================================================== */

/* Garante que o container de quantidade fique visível e bem estruturado */
.widget_shopping_cart_content
  ul.woocommerce-mini-cart
  li.mini_cart_item
  .quantity {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 8px !important;
}

/* Estilização do seletor numérico/quantidade embrulhado (Padrão Woo) */
.widget_shopping_cart_content
  ul.woocommerce-mini-cart
  li.mini_cart_item
  .quantity
  .qty-wrapper,
.widget_shopping_cart_content
  ul.woocommerce-mini-cart
  li.mini_cart_item
  .quantity
  .quantity-nav-wrapper {
  display: flex !important;
  align-items: center !important;
  background: var(--bg-light) !important;
  border-radius: var(--radius-pill) !important;
  padding: 2px 6px !important;
  border: 1px solid var(--border) !important;
}

/* Estilização Geral dos botões de + e - */
.widget_shopping_cart_content
  ul.woocommerce-mini-cart
  li.mini_cart_item
  .quantity
  button.minus,
.widget_shopping_cart_content
  ul.woocommerce-mini-cart
  li.mini_cart_item
  .quantity
  button.plus,
.widget_shopping_cart_content
  ul.woocommerce-mini-cart
  li.mini_cart_item
  .quantity
  .minus,
.widget_shopping_cart_content
  ul.woocommerce-mini-cart
  li.mini_cart_item
  .quantity
  .plus {
  width: 26px !important;
  height: 26px !important;
  background: #ffffff !important;
  border: 1px solid var(--border) !important;
  color: var(--primary) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin: 0 !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03) !important;
}

/* Efeito Hover nos botões + e - */
.widget_shopping_cart_content
  ul.woocommerce-mini-cart
  li.mini_cart_item
  .quantity
  button.minus:hover,
.widget_shopping_cart_content
  ul.woocommerce-mini-cart
  li.mini_cart_item
  .quantity
  button.plus:hover,
.widget_shopping_cart_content
  ul.woocommerce-mini-cart
  li.mini_cart_item
  .quantity
  .minus:hover,
.widget_shopping_cart_content
  ul.woocommerce-mini-cart
  li.mini_cart_item
  .quantity
  .plus:hover {
  background: var(--primary) !important;
  color: #ffffff !important;
  border-color: var(--primary) !important;
}

/* Estilização do Campo de Texto Central (O número da quantidade) */
.widget_shopping_cart_content
  ul.woocommerce-mini-cart
  li.mini_cart_item
  .quantity
  input.qty,
.widget_shopping_cart_content
  ul.woocommerce-mini-cart
  li.mini_cart_item
  .quantity
  input[type="number"] {
  width: 32px !important;
  height: 26px !important;
  text-align: center !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--foreground) !important;
}

/* Esconde setas padrão do input number no Chrome/Safari/Edge */
.widget_shopping_cart_content
  ul.woocommerce-mini-cart
  li.mini_cart_item
  .quantity
  input.qty::-webkit-outer-spin-button,
.widget_shopping_cart_content
  ul.woocommerce-mini-cart
  li.mini_cart_item
  .quantity
  input.qty::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

/* ==========================================================================
   INTERFACES ESTRUTURAIS: MINI CART DANIEL PIJAMAS (CORES CORRIGIDAS)
   ========================================================================== */

/* 1. Alinhamento da Barra de Frete Grátis no Topo */
.dp-shipping-notice-wrapper {
  display: block !important;
  width: 100%;
  background: #f4f4f4 !important; /* Fundo cinza suave padrão */
  padding: 15px 20px !important;
  box-sizing: border-box;
  border-bottom: 1px solid #eef2f5;
  margin-bottom: 10px;
}

.dp-shipping-notice p {
  font-family: "Quicksand", sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #444444 !important;
  letter-spacing: 0.5px;
  margin: 0 0 10px 0 !important;
  text-align: center !important;
  text-transform: uppercase !important;
}

.dp-shipping-notice p strong {
  color: #03a9f4 !important; /* Azul destacado do seu tema para o valor restante */
}

.dp-progress-bar {
  width: 100%;
  height: 8px !important;
  background: #e2e8f0 !important;
  border-radius: 20px !important;
  overflow: hidden;
}

.dp-progress-fill {
  height: 100%;
  background: #03a9f4 !important; /* Preenchimento em Azul Daniel Pijamas */
  border-radius: 20px !important;
  transition: width 0.4s ease-in-out !important;
}

.dp-progress-fill.full {
  background: #22c55e !important; /* Verde sucesso ao liberar o frete */
}

/* 2. Reestruturação dos Itens da Lista (.mini_cart_item) */
.widget_shopping_cart_content ul.cart_list,
.widget_shopping_cart_content ul.woocommerce-mini-cart {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.widget_shopping_cart_content ul.woocommerce-mini-cart li.mini_cart_item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 15px !important;
  padding: 15px 20px !important;
  border-bottom: 1px solid #f5f5f5 !important;
  position: relative !important;
  min-height: 90px !important;
}

.widget_shopping_cart_content
  ul.woocommerce-mini-cart
  li.mini_cart_item::before {
  display: none !important;
}

/* Imagem na Esquerda */
.widget_shopping_cart_content ul.woocommerce-mini-cart li.mini_cart_item a img {
  width: 70px !important;
  height: 80px !important;
  object-fit: cover !important;
  border-radius: 12px !important;
  margin: 5px !important;
  float: left !important;
}

/* Textos e Informações do Produto */
.widget_shopping_cart_content
  ul.woocommerce-mini-cart
  li.mini_cart_item
  .dp-product-meta-wrapper,
.widget_shopping_cart_content
  ul.woocommerce-mini-cart
  li.mini_cart_item
  > a:not(.remove) {
  font-family: "Quicksand", sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #333333 !important;
  text-decoration: none !important;
  line-height: 1.4 !important;
  display: block !important;
  flex: 1 !important;
  padding-right: 10px !important;
}

/* Preço e Quantidade (Ex: 2 × R$ 135,00) */
.widget_shopping_cart_content
  ul.woocommerce-mini-cart
  li.mini_cart_item
  .quantity {
  display: block !important;
  font-family: "Quicksand", sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #03a9f4 !important; /* Valores em Azul */
  margin-top: 4px !important;
}

/* 3. Botão de Remover Item (X) */
.widget_shopping_cart_content
  ul.woocommerce-mini-cart
  li.mini_cart_item
  a.remove {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  color: #ef4444 !important; /* Vermelho padrão para exclusão */
  font-size: 20px !important;
  font-weight: 400 !important;
  width: 30px !important;
  height: 30px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  transition: background 0.2s ease !important;
  order: 3 !important;
}

.widget_shopping_cart_content
  ul.woocommerce-mini-cart
  li.mini_cart_item
  a.remove:hover {
  background: #fef2f2 !important;
  color: #dc2626 !important;
}

/* 4. Rodapé do Carrinho */
.widget_shopping_cart_content .woocommerce-mini-cart__total {
  font-family: "Quicksand", sans-serif !important;
  font-size: 16px !important;
  color: #333333 !important;
  padding: 20px !important;
  border-top: 1px solid #f5f5f5 !important;
  margin: 0 !important;
  display: flex !important;
  justify-content: space-between !important;
}

.widget_shopping_cart_content .woocommerce-mini-cart__total .amount {
  font-weight: 700 !important;
  color: #03a9f4 !important; /* Subtotal em Azul */
}

.widget_shopping_cart_content .woocommerce-mini-cart__buttons {
  padding: 0 20px 20px 20px !important;
  margin: 0 !important;
}

/* Botão Finalizar Compra Personalizado */
.widget_shopping_cart_content
  .woocommerce-mini-cart__buttons
  a.button.checkout {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 48px !important;
  background: #03a9f4 !important; /* Botão Azul Daniel Pijamas */
  color: #ffffff !important;
  font-family: "Quicksand", sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  border-radius: 25px !important;
  box-shadow: 0 4px 12px rgba(3, 169, 244, 0.2) !important;
  transition: background 0.2s ease !important;
}

.widget_shopping_cart_content
  .woocommerce-mini-cart__buttons
  a.button.checkout:hover {
  background: #0288d1 !important; /* Tom de azul ligeiramente mais escuro no hover */
}

.widget_shopping_cart_content
  .woocommerce-mini-cart__buttons
  a.button:not(.checkout) {
  display: none !important;
}

/* ==========================================================================
   SISTEMA DE DESIGN INTEGRADO: MINI CART DANIEL PIJAMAS
   ========================================================================== */

/* 1. Alinhamento da Barra de Frete Grátis no Topo */
.dp-shipping-notice-wrapper {
  display: block !important;
  width: 100%;
  background: var(
    --bg-light
  ) !important; /* Herdando fundo claro do Design System */
  padding: 16px 20px !important;
  box-sizing: border-box;
  border-bottom: 1px solid var(--border);
  margin-bottom: 10px;
}

.dp-shipping-notice p {
  font-family: var(--font-body) !important; /* Herdando a fonte Quicksand */
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--foreground) !important;
  letter-spacing: 0.5px;
  margin: 0 0 10px 0 !important;
  text-align: center !important;
  text-transform: uppercase !important;
}

.dp-shipping-notice p strong {
  color: var(--primary) !important; /* Usando o azul oklch padrão da marca */
}

.dp-progress-bar {
  width: 100%;
  height: 8px !important;
  background: var(--border) !important;
  border-radius: var(--radius-pill) !important;
  overflow: hidden;
}

.dp-progress-fill {
  height: 100%;
  background: var(
    --primary
  ) !important; /* Preenchimento com a cor azul primária */
  border-radius: var(--radius-pill) !important;
  transition: width 0.4s ease-in-out !important;
}

.dp-progress-fill.full {
  background: #22c55e !important; /* Verde padrão para sucesso */
}

/* 2. Reestruturação dos Itens da Lista (.mini_cart_item) */
.widget_shopping_cart_content ul.cart_list,
.widget_shopping_cart_content ul.woocommerce-mini-cart {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.widget_shopping_cart_content ul.woocommerce-mini-cart li.mini_cart_item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 15px !important;
  padding: 15px 20px !important;
  border-bottom: 1px solid var(--bg-light) !important;
  position: relative !important;
  min-height: 94px !important;
}

.widget_shopping_cart_content
  ul.woocommerce-mini-cart
  li.mini_cart_item::before {
  display: none !important;
}

.js-cart-close {
  background: #ffbc00;
  border: 1px;
  border-radius: 100%;
  padding: 5px 5px;
  width: 35px;
  height: 35px;
  cursor: pointer;
}

.js-favoritos-close {
  background: #ffbc00;
  border: 1px;
  border-radius: 100%;
  padding: 5px 5px;
  width: 35px;
  height: 35px;
  cursor: pointer;
}

.js-cart-close:ho {
  background: rgb(0, 140, 255);
  border: 1px;
  border-radius: 100%;
  padding: 5px 5px;
  width: 35px;
  height: 35px;
  cursor: pointer;
}

/* Imagem do Produto */
.widget_shopping_cart_content ul.woocommerce-mini-cart li.mini_cart_item a img {
  width: 70px !important;
  height: 80px !important;
  object-fit: cover !important;
  border-radius: var(
    --radius
  ) !important; /* Herdando os cantos arredondados do tema (14px) */
  margin: 5px !important;
  float: left !important;
}

/* Textos e Títulos do Produto */
.widget_shopping_cart_content
  ul.woocommerce-mini-cart
  li.mini_cart_item
  .dp-product-meta-wrapper,
.widget_shopping_cart_content
  ul.woocommerce-mini-cart
  li.mini_cart_item
  > a:not(.remove) {
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--foreground) !important;
  text-decoration: none !important;
  line-height: 1.4 !important;
  display: block !important;
  flex: 1 !important;
  padding-right: 10px !important;
}

/* Preço e Quantidade */
.widget_shopping_cart_content
  ul.woocommerce-mini-cart
  li.mini_cart_item
  .quantity {
  display: block !important;
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--primary) !important; /* Valores na cor primária da marca */
  margin-top: 4px !important;
}

/* 3. Botão de Remover Item (X) */
.widget_shopping_cart_content
  ul.woocommerce-mini-cart
  li.mini_cart_item
  a.remove {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  color: #ef4444 !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  width: 30px !important;
  height: 30px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  transition: background 0.2s ease !important;
  order: 3 !important;
}

.widget_shopping_cart_content
  ul.woocommerce-mini-cart
  li.mini_cart_item
  a.remove:hover {
  background: #fef2f2 !important;
  color: #dc2626 !important;
}

/* 4. Rodapé do Carrinho */
.widget_shopping_cart_content .woocommerce-mini-cart__total {
  font-family: var(--font-body) !important;
  font-size: 16px !important;
  color: var(--foreground) !important;
  padding: 20px !important;
  border-top: 1px solid var(--border) !important;
  margin: 0 !important;
  display: flex !important;
  justify-content: space-between !important;
}

.widget_shopping_cart_content .woocommerce-mini-cart__total .amount {
  font-weight: 700 !important;
  color: var(--primary) !important; /* Subtotal destacado em Azul */
}

.widget_shopping_cart_content .woocommerce-mini-cart__buttons {
  padding: 0 20px 20px 20px !important;
  margin: 0 !important;
}

/* Botão de Finalização de Compra Premium */
.widget_shopping_cart_content
  .woocommerce-mini-cart__buttons
  a.button.checkout {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 48px !important;
  background: var(
    --gradient-primary
  ) !important; /* Usando o gradiente oficial do seu cabeçalho */
  color: var(--primary-foreground) !important;
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  border-radius: var(
    --radius-pill
  ) !important; /* Mantendo o padrão oval de pílula */
  box-shadow: var(--shadow-soft) !important; /* Sombreamento leve nativo */
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease !important;
  border: 0 !important;
}

.widget_shopping_cart_content
  .woocommerce-mini-cart__buttons
  a.button.checkout:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(
    --shadow-glow
  ) !important; /* Efeito de brilho ativo no hover */
}

/* Ocultar outros botões desnecessários do fluxo padrão */
.widget_shopping_cart_content
  .woocommerce-mini-cart__buttons
  a.button:not(.checkout) {
  display: none !important;
}

/* Container da Barra de Frete */
.dp-shipping-notice-wrapper {
  display: block !important;
  width: 100%;
  background: #f4f4f4; /* Cor de fundo idêntica ao modelo */
  padding: 18px 20px;
  box-sizing: border-box;
  text-align: center;
}

.dp-shipping-notice p {
  font-family: "Quicksand", sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #444444;
  letter-spacing: 0.5px;
  margin: 0 0 10px 0 !important;
  text-transform: uppercase;
}

.dp-shipping-notice p strong {
  color: #b85b80; /* Cor rosa/vinho de destaque para o valor */
}

/* Base da Linha de Progresso */
.dp-progress-bar {
  width: 100%;
  height: 10px;
  background: #e2e8f0;
  border-radius: 20px;
  overflow: hidden;
}

/* Preenchimento Dinâmico */
.dp-progress-fill {
  height: 100%;
  background: #b85b80; /* Cor sólida de preenchimento */
  border-radius: 20px;
  transition: width 0.4s ease-in-out;
}

/* Quando atingir 100% */
.dp-progress-fill.full {
  background: #a2db34; /* Verde sucesso */
}

/* 2. Containers "Nuvem Flutuante" (Os blocos principais da Imagem 3) */
.shipping-progress-container {
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;

  /* Bordas super arredondadas e orgânicas da Imagem 3 */
  border-radius: 20px !important;

  /* Borda dupla simulando vidro/luz refletida */
  border: 2px solid rgba(255, 255, 255, 0.7) !important;

  /* Sombra volumosa 3D (Suave, usando sua cor primária com opacidade) */
  box-shadow:
    0 10px 40px -10px oklch(0.72 0.14 230 / 0.72),
    0 25px 70px -15px oklch(0.72 0.14 230 / 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
  transition:
    transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    box-shadow 0.4s ease !important;
}

/* Efeito de flutuação ao passar o mouse */
.shipping-progress-container:hover {
  transform: translateY(-6px) scale(1.01) !important;
  box-shadow:
    0 20px 50px -10px oklch(0.72 0.14 230 / 0.18),
    0 30px 80px -10px oklch(0.72 0.14 230 / 0.22) !important;
}

/* 3. Ajuste de Elementos Internos Pílula (Padrão Imagem 3) */
.shipping-bar-bg {
  background: var(--bg-light) !important;
  border: 1px solid rgba(120, 180, 230, 0.15) !important;
  height: 20px !important; /* Um pouco mais espessa como na foto */
  border-radius: 100px !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.04) !important;
}

/* ==========================================================================
   INTERFACES COMPLEMENTARES PARA O COMPONENTE WOOCOMMERCE
   ========================================================================== */

/* Garantir o isolamento das duas imagens (Normal e Hover) */
.p-img-link {
  display: block;
  position: relative;
  width: 100%;
  height: 340px; /* Altere a altura se preferir fotos mais longas */
  overflow: hidden;
}

.p-img-link .p-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  transition:
    transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1),
    opacity 0.4s ease !important;
}

/* Estado inicial da imagem hover */
.p-img-link .p-img.hover {
  opacity: 0;
}

/* Transição ao passar o mouse no Card */
.p-card:hover .p-img.main {
  opacity: 0;
  transform: scale(1.04);
}

.p-card:hover .p-img.hover {
  opacity: 1;
  transform: scale(1.04);
}

/* Limpeza do preço nativo do WooCommerce para não quebrar o layout */
.p-price-box .p-price-old .price {
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  color: var(--muted-foreground) !important;
}
.p-price-box .p-price-old .price del {
  opacity: 0.5;
}
.p-price-box .p-price-old .price ins {
  background: transparent;
  text-decoration: none;
  font-weight: 500;
  margin-left: 6px;
}

/* Estilização do botão nativo "Comprar" do WooCommerce dentro do nosso padrão pílula */
.p-action-button .button {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--gradient-primary) !important;
  color: #ffffff !important;
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  padding: 14px 24px !important;
  border-radius: 100px !important;
  border: none !important;
  box-shadow: 0 8px 20px -4px oklch(0.72 0.14 230 / 0.3) !important;
  transition: all 0.3s ease !important;
}

.p-action-button .button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 24px -4px oklch(0.72 0.14 230 / 0.45) !important;
}

/* Botão Espiar Flutuante */
.quick-view-btn {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translate(-50%, 10px);
  background: rgba(255, 255, 255, 0.9);
  border: none;
  padding: 8px 18px;
  border-radius: 100px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--foreground);
  opacity: 0;
  transition: all 0.3s ease;
  z-index: 4;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.p-img-wrap:hover .quick-view-btn {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Ajuste do Shortcode do YITH Wishlist para ficar redondo e clean */
.p-fav-wrapper {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 5;
}
/* Limpa os estilos padrões que o plugin costuma injetar */
.p-fav-wrapper .yith-wcwl-add-to-wishlist {
  margin-top: 0 !important;
}
.p-fav-wrapper .yith-wcwl-add-button a {
  width: 36px;
  height: 36px;
  background: #ffffff !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  color: var(--muted-foreground);
}

/* ==========================================================================
   CORREÇÃO CIRÚRGICA: FORÇAR MENU DESKTOP EM TELAS GRANDES
   ========================================================================== */
@media (min-width: 1025px) {
  /* Sumir apenas com o ícone de hambúrguer/três linhas no computador */
  .mobile-toggle,
  .site-header .fa-bars,
  .site-header .mobile-menu-toggle {
    display: none !important;
  }

  /* Forçar o contêiner do menu de textos a ficar visível */
  .main-nav {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

/* Força a logo a respeitar o novo tamanho máximo */
.custom-logo-link img,
.site-logo img,
.header-logo img,
.navbar-brand img {
  width: 220px !important; /* Mude aqui para o tamanho que achar visualmente melhor */
  max-width: 100% !important;
  height: auto !important;
}

/* Remove o título em texto que ficou duplicado acima da logo do rodapé */
.site-footer .footer-brand {
  display: none !important;
}

/* ==========================================================================
   BOTÃO VOLTAR AO TOPO (SCROLL BACK TO TOP)
   ========================================================================== */
.back-to-top {
  position: fixed;
  bottom: 90px; /* Posicionado acima do botão do WhatsApp */
  right: 20px;
  background-color: var(
    --primary,
    #0083a0
  ); /* Usa a cor primária do seu tema */
  color: #ffffff !important;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  opacity: 0; /* Começa invisível */
  visibility: hidden;
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease,
    transform 0.3s ease;
  z-index: 9999; /* Garante que fica por cima do layout */
}

/* Efeito de hover (passar o mouse) */
.back-to-top:hover {
  transform: translateY(-5px);
  background-color: #333333; /* Cor opcional ao passar o mouse */
}

/* Classe que o JavaScript vai acionar para mostrar o botão */
.back-to-top.show {
  opacity: 1;
  visibility: visible;
  margin-right: 10px;
}

/* Ajuste fino para telas menores (opcional) */
@media (max-width: 768px) {
  .back-to-top {
    bottom: 85px;
    right: 15px;
    width: 40px;
    height: 40px;
    font-size: 16px;
  }
}

/* ==========================================================================
   ALERTAS FLUTUANTES (TOAST HUD NOTIFICATIONS)
   ========================================================================== */
#toast {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%) translateY(50px);
  background-color: #333333;
  color: #ffffff;
  padding: 14px 28px;
  font-size: 14px;
  font-family: var(--font-body, Arial, sans-serif);
  font-weight: 500;
  border-radius: 30px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  opacity: 0;
  visibility: hidden;
  transition:
    transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    opacity 0.3s ease,
    visibility 0.3s ease;
  z-index: 100000;
  text-align: center;
  white-space: nowrap;
}

#toast.show {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* ==========================================================================
   RESTAURAÇÃO DO ESTILO: CARRINHO, RELACIONADOS E BOTÕES GERAIS
   ========================================================================== */

/* 1. Padronização de Todos os Botões de Compra (Forçando o Azul Lindo da Marca) */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .wp-block-button__link,
.woocommerce-page .button,
button.custom-qty-btn {
  background: linear-gradient(
    135deg,
    #a0e0ff 0%,
    #54c3f1 100%
  ) !important; /* Gradiente azul fofo */
  color: #ffffff !important;
  font-family: var(--font-body), "Open Sans", sans-serif !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  border-radius: 50px !important; /* Botões pílula arredondados */
  border: none !important;
  box-shadow: 0 4px 15px rgba(84, 195, 241, 0.2) !important;
  transition: all 0.3s ease !important;
  text-shadow: none !important;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce-page .button:hover {
  background: linear-gradient(135deg, #54c3f1 0%, #3caad6 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(84, 195, 241, 0.35) !important;
  color: #ffffff !important;
}

/* 2. Correção da Página de Carrinho Vazio */
.woocommerce-cart .wc-empty-cart-message {
  text-align: center !important;
  padding: 20px 0 !important;
}

.woocommerce-cart .cart-empty {
  font-family: var(--font-title), "Bodoni MT", serif !important;
  color: #2b7fa1 !important;
  font-size: 24px !important;
  font-weight: 600 !important;
}

/* Centraliza e estiliza o botão "Voltar para a loja" no carrinho */
.woocommerce-cart .return-to-shop {
  text-align: center !important;
  margin-top: 25px !important;
}

.woocommerce-cart .return-to-shop a.button {
  padding: 15px 35px !important;
  display: inline-block !important;
}

/* 3. Ajuste Fino dos Produtos Relacionados (Que estavam esmagados na direita) */
.single-product .related.products {
  width: 100% !important;
  display: block !important;
  clear: both !important;
  margin-top: 50px !important;
}

.single-product .related.products h2 {
  font-family: var(--font-body), "Bodoni MT", serif !important;
  color: var(--primary) !important;
  font-size: 28px !important;
  text-align: center !important;
  margin-bottom: 30px !important;
}

/* Força os cards dos relacionados a seguirem o mesmo padrão redondo das categorias */
.single-product .related.products ul.products li.product {
  background: #ffffff !important;
  border-radius: 24px !important;
  padding: 15px !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.04) !important;
  border: 1px solid rgba(84, 195, 241, 0.1) !important;
}

/* ==========================================================================
   RESPONSIVIDADE MACRO (BREAKPOINTS COMPARTILHADOS)
   ========================================================================== */

@media (max-width: 1024px) {
  .woocommerce ul.products {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (max-width: 768px) {
  .woocommerce ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .single-product div.product {
    flex-direction: column !important;
    gap: 30px;
  }
  .single-product div.product .woocommerce-product-gallery,
  .single-product div.product .summary {
    max-width: 100%;
    flex: 1 1 100%;
  }
  .single-product .product_title {
    font-size: 2rem;
  }
  .woocommerce-tabs ul.tabs {
    font-size: 14px;
    flex-direction: column !important;
  }
}

@media (max-width: 480px) {
  .woocommerce ul.products {
    grid-template-columns: 1fr !important;
  }
  .woocommerce-tabs ul.tabs {
    font-size: 14px;
    flex-direction: column !important;
  }
}
/* ==========================================================================
   CORREÇÃO CIRÚRGICA: FORÇAR MENU HORIZONTAL NO DESKTOP
   ========================================================================== */

@media (min-width: 1025px) {
  /* 1. Remove o botão de hambúrguer (as 3 barrinhas), já que estamos no PC */
  .js-mobile,
  .mobile-toggle {
    display: none !important;
  }

  /* 2. Força o contêiner do seu menu a ocupar a largura total e ficar visível */
  .js-mobile-nav,
  nav,
  .menu-principal-container {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    background: transparent !important; /* Remove fundos escuros/sólidos de celular */
    box-shadow: none !important;
  }

  /* 3. TRANSFORMA EM HORIZONTAL: Alinha os itens (Início, Loja...) lado a lado */
  .js-mobile-nav ul,
  nav ul,
  .menu-principal-container ul {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 35px !important; /* Espaçamento elegante entre os links */
    list-style: none !important;
    margin: 15px auto !important;
    padding: 0 !important;
  }

  /* 4. Estilo Premium dos Links (Azul Identidade Daniel Pijamas) */
  .js-mobile-nav ul li a,
  nav ul li a {
    font-family: var(--font-body), "Open Sans", sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    color: #2b7fa1 !important; /* Azul escuro da marca */
    text-decoration: none !important;
    padding: 10px 5px !important;
    display: inline-block !important;
    transition: color 0.2s ease !important;
  }

  /* Efeito de passar o mouse nos links */
  .js-mobile-nav ul li a:hover,
  nav ul li a:hover {
    color: #54c3f1 !important; /* Azul claro suave */
  }
}

/* ==========================================================================
   GARANTIA DO MENU MOBILE APENAS EM TELAS MENORES
   ========================================================================== */
@media (max-width: 1024px) {
  /* Garante que o menu vertical funcione perfeitamente no celular */
  .js-mobile-nav {
    background-color: #ffffff !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05) !important;
  }

  .js-mobile-nav li a {
    padding: 15px 20px !important;
    color: #555555 !important;
    display: block !important;
    border-bottom: 1px solid #f4f9fc !important;
  }
}

/* ==========================================================================
   CORREÇÃO DE LAYOUT EXCLUSIVA PARA DISPOSITIVOS MÓVEIS (MOBILE)
   ========================================================================== */

@media (max-width: 1024px) {
  /* 1. CORREÇÃO DO HEADER E ÍCONES AMASSADOS NO MOBILE */
  /* Organiza o topo para a logo respirar e os ícones ficarem alinhados na direita */
  .site-header .container,
  header .container,
  .header-main {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 15px !important;
    /*flex-direction: column;*/
  }

  /* Dá limite de tamanho para a logo não ser esmagada */
  .site-logo,
  header .logo,
  header a.navbar-brand {
    max-width: 150px !important;
    height: auto !important;
    flex: 1 !important;
  }

  /* Alinha o bloco de ícones (Favoritos, Carrinho e Menu Hambúrguer) lado a lado na direita */
  header .header-right,
  header .js-cart-toggle,
  .header-icons-group {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important; /* Espaçamento idêntico entre os botões */
    margin: 0 !important;
    padding: 0 !important;
    position: static !important; /* Remove posicionamentos absolutos antigos */
  }

  /* 2. CORREÇÃO DOS PRODUTOS RELACIONADOS FATIADOS */
  /* Força a seção de abas (Descrição) e Relacionados a ocuparem 100% da largura no celular */
  .single-product .woocommerce-tabs,
  .single-product .related.products {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    display: block !important;
    clear: both !important;
    padding: 0 15px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Organiza o título "Produtos relacionados" centralizado e espaçado */
  .single-product .related.products h2 {
    font-size: 22px !important;
    text-align: center !important;
    margin: 30px 0 15px 0 !important;
    width: 100% !important;
  }

  /* Faz a listagem de produtos relacionados quebrar em colunas inteiras normais */
  .single-product .related.products ul.products {
    display: grid !important;
    grid-template-columns: repeat(
      auto-fit,
      minmax(140px, 1fr)
    ) !important; /* Deixa 2 produtos lado a lado ou 1 por linha dependendo do tamanho */
    gap: 15px !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
  }

  /* Garante que o card do produto ocupe o espaço correto sem sumir com os textos */
  .single-product .related.products ul.products li.product {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }
}

/* ==========================================================================
   RESOLUÇÃO DEFINITIVA: TAMANHO CORRETO DOS CARDS NO CARROSSEL
   ========================================================================== */

/* 1. Limita a seção para não estourar a tela */
.site-main .related.products,
.woocommerce .related.products,
.product .related.products,
div.related.products,
.site-main .upsells.products,
.woocommerce .upsells.products,
.product .upsells.products,
div.upsells.products,
.products-slider-section {
  display: block !important;
  clear: both !important;
  float: none !important;
  max-width: 1200px !important;
  margin: 50px auto !important;
  padding: 0 15px !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

/* 2. Área visível do carrossel */
.products-carousel {
  position: relative;
  overflow: hidden !important;
  width: 100% !important;
}

/* 3. Ajuste do Trilho Horizontal */
.woocommerce .products-carousel ul.products.swiper-wrapper,
.products-carousel ul.products.swiper-wrapper {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important; /* Proíbe o empilhamento vertical */
  justify-content: flex-start !important;
  margin: 20px 0 0 0 !important;
  padding: 20px 0 !important;
  box-sizing: border-box !important;
  list-style: none !important;
  width: 100% !important;
}

/* 4. CORREÇÃO DE LARGURA: Impede o produto de ficar gigante */
.woocommerce .products-carousel ul.products li.product.swiper-slide,
.products-carousel ul.products li.product.swiper-slide {
  /* Força uma largura base ideal (ex: ~25% no desktop para caberem 4 produtos) 
       mas o Swiper reajustará via JavaScript dinamicamente */
  width: 280px !important;
  max-width: 85vw !important; /* Segurança para telas menores/mobile */

  /* Remove as propriedades fixas do WooCommerce que travam o slider */
  float: none !important;
  margin: 0 !important;

  /* Espaçamento lateral interno para os cartões originais não colarem */
  padding: 0 10px !important;
  box-sizing: border-box !important;

  /* LIMPEZA DE SOBREPOSIÇÃO: Nenhum fundo ou borda fantasma aqui */
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* 5. Mantém a imagem perfeitamente ajustada ao card original */
.products-carousel ul.products li.product.swiper-slide img {
  max-width: 100% !important;
  height: auto !important;
  display: block;
  margin: 0 auto;
}

/* ==========================================================================
   1. CORREÇÃO DO MENU SUPERIOR E SUBMENU (TABLET: 768PX ATÉ 1024PX)
   ========================================================================== */
@media screen and (max-width: 1024px) and (min-width: 768px) {
  .site-header,
  .main-nav {
    background: #ffffff !important;
    position: relative !important;
    z-index: 99999 !important;
  }

  /* Remove elementos duplicados soltos pelo tema fora do container */
  .main-nav ul li > img,
  .main-menu li > img,
  .mobile-toggle,
  .mobile-nav {
    display: none !important;
    visibility: hidden !important;
  }

  .main-nav {
    display: block !important;
    visibility: visible !important;
    border-top: 1px solid #f1f5f9 !important;
    border-bottom: 1px solid #f1f5f9 !important;
  }

  .main-nav ul,
  .main-menu {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 0 !important;
    margin: 0 !important;
    list-style: none !important;
  }

  .main-nav a,
  .main-menu > li > a {
    font-size: 11px !important;
    white-space: nowrap !important;
  }

  /* Oculta links excessivamente longos no tablet */
  .main-menu li a[href*="checkout"],
  .main-menu li a[href*="finalizar-compra"],
  .main-menu li a[href*="admin"] {
    display: none !important;
  }

  /* Fixação do Balão Suspenso do Submenu */
  .mega,
  .mega-menu,
  .main-menu li ul,
  .sub-menu {
    position: absolute !important;
    top: 100% !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(5px) !important;
    width: 540px !important;
    background: #ffffff !important;
    border: 2px solid #bde9f9 !important;
    border-radius: 24px !important;
    padding: 14px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
    z-index: 999999 !important;
    display: none !important;
    flex-direction: row !important;
    gap: 12px !important;
  }

  .mega-wrap:hover .mega,
  .mega-item:hover .mega-menu,
  li:hover > ul,
  li:hover > .sub-menu {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}

/* ==========================================================================
   2. SEÇÃO DE DESCRIÇÃO E ABAS RESPONSIVAS (MOBILE E TABLET)
   ========================================================================== */
@media screen and (max-width: 1024px) {
  .woocommerce-tabs ul.tabs,
  .wc-tabs,
  div.container ul {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    padding: 0 !important;
  }

  .woocommerce-tabs ul.tabs li,
  .wc-tabs li {
    flex: 1 1 auto !important;
    min-width: 100px !important;
    text-align: center !important;
  }
}

/* ==========================================================================
   CORREÇÃO DEFINITIVA: FORÇAR ALINHAMENTO HORIZONTAL (MOBILE)
   ========================================================================== */
@media screen and (max-width: 767px) {
  /* 1. Força a área do carrossel a permitir que o conteúdo transborde para os lados */
  .products-carousel,
  .woocommerce .products-carousel {
    position: relative !important;
    overflow: hidden !important; /* Esconde a barra de rolagem feia do navegador */
    width: 100% !important;
    display: block !important;
  }

  /* 2. O TRILHO: Proíbe terminantemente os produtos de caírem para a linha de baixo */
  .woocommerce .products-carousel ul.products.swiper-wrapper,
  .products-carousel ul.products.swiper-wrapper,
  .woocommerce .related.products ul.products,
  .related.products ul.products {
    display: flex !important;
    flex-direction: row !important; /* Garante formato de linha */
    flex-wrap: nowrap !important; /* PROÍBE EMPILHAR UM EMBAIXO DO OUTRO */
    justify-content: flex-start !important;
    align-items: stretch !important; /* Mantém todos os cards com a mesma altura */
    width: 100% !important;
    margin: 15px 0 !important;
    padding: 10px 0 !important;
    box-sizing: border-box !important;
  }

  /* 3. OS CARDS: Deixa o tamanho responsivo controlado pelo JavaScript */
  .woocommerce .products-carousel ul.products li.product.swiper-slide,
  .products-carousel ul.products li.product.swiper-slide,
  .woocommerce .related.products ul.products li.product,
  .related.products ul.products li.product {
    width: 100% !important; /* Largura ideal para não esmagar o preço */
    min-width: 250px !important; /* Força estabilidade no tamanho */
    flex-shrink: 0 !important; /* Impede o navegador de esmagar o card */
    float: none !important; /* Destrói o float antigo do WooCommerce */
    margin-right: 14px !important; /* Espaçamento entre um pijama e outro */
    margin-left: 0 !important;
    margin-bottom: 0 !important; /* Remove a margem inferior que afastava os blocos */
    display: block !important;
  }

  /* 4. Alinhamento interno para garantir simetria */
  .products-carousel li.product .woocommerce-loop-product__title {
    min-height: 40px !important; /* Deixa todos os títulos alinhados */
  }
}

/* ==========================================================================
   CONSERTO ULTRA-CORRETIVO: QUICK VIEW DO TEMA (DANIEL PIJAMAS)
   ========================================================================= */

/* 1. Força o bloco interno a nascer em duas colunas rígidas */
.woocommerce div.quickview-modal-content div.product,
div.quickview-content div.product,
.quick-view-modal div.product {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important; /* Alinha os blocos pelo topo */
  gap: 30px !important;
  padding: 25px !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 850px !important; /* Garante espaço para os dois lados respirarem */
}

/* 2. COLUNA DA ESQUERDA (Imagens): Impede de ocupar 100% no carregamento */
.woocommerce div.quickview-modal-content div.product .images,
div.quickview-content div.product .images,
.quick-view-modal div.product .images {
  flex: 0 0 46% !important; /* Fixa rigorosamente o tamanho do slide */
  width: 46% !important;
  max-width: 46% !important;
  float: none !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* Controla os tamanhos de todas as imagens do carrossel no Quick View */
.woocommerce div.quickview-modal-content div.product .images img,
div.quickview-content div.product .images img {
  width: 100% !important;
  max-height: 480px !important; /* Limita a altura para não esticar a janela */
  object-fit: cover !important;
  border-radius: 16px !important;
}

/* 3. COLUNA DA DIREITA (Informações): Garante que nasça posicionada ao lado */
.woocommerce div.quickview-modal-content div.product .summary,
div.quickview-content div.product .summary,
.quick-view-modal div.product .summary {
  flex: 0 0 54% !important; /* Fixa a largura dos textos */
  width: 54% !important;
  max-width: 54% !important;
  float: none !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
}

/* 4. Ajustes nos botões e variações para ficarem perfeitos */
div.quickview-content .summary .product_title {
  font-family: "Quicksand", sans-serif !important;
  font-weight: 700 !important;
  font-size: 24px !important;
}

/* Estilização do botão de compra interna */
div.quickview-content .summary .single_add_to_cart_button {
  background-color: #54c3f1 !important;
  border-radius: 30px !important;
  font-family: "Quicksand", sans-serif !important;
  font-weight: 600 !important;
  padding: 12px 25px !important;
  transition: background 0.3s ease !important;
}

div.quickview-content .summary .single_add_to_cart_button:hover {
  background-color: #39b3e6 !important;
}

/* 5. Responsividade para telas menores (Tablets e Smartphones) */
@media (max-width: 880px) {
  .woocommerce div.quickview-modal-content div.product,
  div.quickview-content div.product {
    flex-direction: column !important;
    min-width: 100% !important;
  }
  .woocommerce div.quickview-modal-content div.product .images,
  .woocommerce div.quickview-modal-content div.product .summary,
  div.quickview-content div.product .images,
  div.quickview-content div.product .summary {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }
}
/* ==========================================================================
   TRAVAMENTO DE VARIAÇÕES EM MODAL (DANIEL PIJAMAS)
   ========================================================================== */

/* Impede que o formulário de variações perca o tamanho ou reinicie o layout */
div.quickview-content .summary form.cart,
.woocommerce div.quickview-modal-content .summary form.cart {
  display: block !important;
  width: 100% !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Garante que os blocos de escolha (bolinhas de cores e tamanhos) fiquem estáveis */
.woocommerce div.quickview-modal-content .variations,
div.quickview-content .summary .variations {
  width: 100% !important;
  display: table !important; /* Mantém a estrutura de tabela nativa estável */
  margin-bottom: 15px !important;
}

/* Proteção para o bloco de imagens não resetar a modal inteira ao trocar de foto */
.woocommerce div.quickview-modal-content .images .woocommerce-product-gallery,
div.quickview-content .images .woocommerce-product-gallery {
  position: relative !important;
  width: 100% !important;
}

/* ==========================================================================
   ESTILIZAÇÃO DAS ABAS DE INFORMAÇÃO DO PRODUTO (ARREDONDADAS)
   ========================================================================== */
.woocommerce-tabs ul.tabs {
  border-bottom: 2px solid rgba(84, 195, 241, 0.15) !important;
  background: transparent !important;
  padding-left: 0 !important;
  display: flex !important;
  gap: 5px !important;
  font-size: 14px;
}

.woocommerce-tabs ul.tabs li {
  background: #f4f9fc !important;
  border: 1px solid rgba(84, 195, 241, 0.15) !important;
  border-bottom: none !important;
  border-radius: 12px 12px 0 0 !important; /* Bordas superiores suaves */
  margin: 0 !important;
  padding: 0 !important;
}

.woocommerce-tabs ul.tabs li.active {
  background: #ffffff !important;
  border-top: 3px solid #54c3f1 !important;
}

.woocommerce-tabs ul.tabs li a {
  color: #2b7fa1 !important;
  font-weight: 600 !important;
  font-family: var(--font-body), sans-serif !important;
  padding: 10px 20px !important;
  display: inline-block !important;
}

/* ==========================================================================
   1. DESIGN DO MENU DESKTOP (IDÊNTICO AO MODELO)
   ========================================================================== */

@media (min-width: 1025px) {
  /* Alinha o menu horizontalmente bem abaixo do cabeçalho */
  .js-mobile-nav,
  nav,
  .menu-principal-container {
    display: none !important;
    width: 100% !important;
    background: #ffffff !important;
    border-top: 1px solid #f0f4f7 !important;
    border-bottom: 1px solid #f0f4f7 !important;
    margin: 20px 0 0 0 !important;
    padding: 0 !important;
  }

  /* Remove os estilos de lista vertical e organiza em linha */
  .js-mobile-nav ul,
  nav ul,
  .menu-principal-container ul {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 30px !important; /* Espaço elegante entre os links */
    list-style: none !important;
    margin: 0 auto !important;
    padding: 0 !important;
    height: 50px !important; /* Altura padrão da barra do menu */
  }

  /* Estilização padrão de cada link do menu */
  .js-mobile-nav ul li a,
  nav ul li a {
    font-family: var(--font-body), "Open Sans", sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    color: #555555 !important; /* Cinza escuro discreto do modelo */
    text-decoration: none !important;
    padding: 15px 5px !important;
    display: inline-block !important;
    position: relative !important;
    transition: color 0.2s ease !important;
  }

  /* Efeito Hover e Item Ativo com a barrinha azul embaixo */
  .js-mobile-nav ul li a:hover,
  nav ul li a:hover,
  .js-mobile-nav ul li.current-menu-item a,
  nav ul li.current-menu-item a {
    color: #54c3f1 !important; /* Azul da marca */
  }

  /* Cria a linha indicadora azul exatamente como no exemplo */
  .js-mobile-nav ul li a::after,
  nav ul li a::after {
    content: "" !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 3px !important;
    background-color: #54c3f1 !important;
    transform: scaleX(0) !important;
    transition: transform 0.25s ease !important;
  }

  /* Mostra a linha no hover ou na página ativa */
  .js-mobile-nav ul li a:hover::after,
  nav ul li a:hover::after,
  .js-mobile-nav ul li.current-menu-item a::after,
  nav ul li.current-menu-item a::after {
    transform: scaleX(1) !important;
  }
}

/* ==========================================================================
   2. RESET DE QUEBRA DA PÁGINA DE PRODUTO (RESOLVE OS RELACIONADOS ESPREMIDOS)
   ========================================================================== */

/* Força o fechamento da área lateral de compra e limpa o layout para os blocos inferiores */
.woocommerce-tabs,
.related.products,
div.related.products,
section.related.products {
  width: 100% !important;
  max-width: 1200px !important;
  margin: 40px auto 0 auto !important;
  clear: both !important; /* Quebra qualquer alinhamento lateral */
  display: block !important;
  float: none !important;
}

/* Centraliza e estiliza o título "Produtos relacionados" */
.related.products h2 {
  font-family: var(--font-title), serif !important;
  color: #2b7fa1 !important;
  font-size: 28px !important;
  margin-bottom: 25px !important;
  text-align: left !important;
  width: 100% !important;
}

/* Transforma a lista espremida em uma vitrine de 4 colunas horizontais */
.woocommerce .related.products ul.products,
.related.products ul.products {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 20px !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  list-style: none !important;
}

/* Configura cada card de produto relacionado */
.woocommerce .related.products ul.products li.product,
.related.products ul.products li.product {
  flex: 1 1 calc(25% - 20px) !important; /* Divide em 4 colunas perfeitas */
}

/* ==========================================================================
   3. DESIGN DAS ABAS DE DESCRIÇÃO (SUAVES E ARREDONDADAS)
   ========================================================================== */
.woocommerce-tabs ul.tabs {
  border-bottom: 2px solid #eef5f8 !important;
  padding: 0 !important;
  display: flex !important;
  gap: 8px !important;
  background: transparent !important;
  list-style: none;
  font-size: 14px;
}

.woocommerce-tabs ul.tabs li {
  background: #f7fafc !important;
  border: 1px solid #eef5f8 !important;
  border-bottom: none !important;
  border-radius: 8px 8px 0 0 !important;
  margin: 0 !important;
}

.woocommerce-tabs ul.tabs li.active {
  background: #ffffff !important;
  border-top: 3px solid #54c3f1 !important;
}

.woocommerce-tabs ul.tabs li a {
  color: #555555 !important;
  font-weight: 600 !important;
  padding: 10px 20px !important;
}

/* ==========================================================================
   RESET COMPLETO E REMOÇÃO DE DUPLICADOS DO MENU DESKTOP
   ========================================================================== */

@media (min-width: 1025px) {
  /* 1. Esconde o menu hambúrguer e força apenas UMA estrutura principal */
  .js-mobile,
  .mobile-toggle {
    display: none !important;
  }

  /* 2. Configuração da Barra de Navegação Única */
  nav,
  .menu-principal-container {
    display: block !important;
    width: 100% !important;
    background: #ffffff !important;
    border-top: 1px solid #f0f4f7 !important;
    border-bottom: 1px solid #f0f4f7 !important;
    margin: 20px 0 0 0 !important;
    padding: 0 !important;
  }

  /* 3. Organiza o menu principal estritamente em uma linha horizontal */
  nav > ul,
  .menu-principal-container > ul,
  .js-mobile-nav > ul {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 30px !important;
    list-style: none !important;
    margin: 0 auto !important;
    padding: 0 !important;
    height: 50px !important;
  }

  /* Evita que sub-listas (categorias) fiquem visíveis por padrão */
  nav ul li {
    position: relative !important; /* Base para o posicionamento do submenu */
    display: inline-block !important;
  }

  /* 4. Estilo dos Links Principais (Início, Loja, Minha Conta...) */
  nav > ul > li > a,
  .menu-principal-container > ul > li > a,
  .js-mobile-nav > ul > li > a {
    font-family: var(--font-body), "Open Sans", sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    color: #555555 !important;
    text-decoration: none !important;
    padding: 15px 5px !important;
    display: inline-block !important;
    position: relative !important;
    transition: color 0.2s ease !important;
  }

  /* Efeito de Linha Azul embaixo no Hover (Idêntico ao modelo) */
  nav > ul > li > a::after,
  .menu-principal-container > ul > li > a::after {
    content: "" !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 3px !important;
    background-color: #54c3f1 !important;
    transform: scaleX(0) !important;
    transition: transform 0.25s ease !important;
  }

  nav > ul > li:hover > a::after,
  nav > ul > li.current-menu-item > a::after {
    transform: scaleX(1) !important;
    color: #54c3f1 !important;
  }

  nav > ul > li:hover > a {
    color: #54c3f1 !important;
  }

  /* ==========================================================================
       5. SISTEMA DE DROPDOWN (CORRIGE AS CATEGORIAS EXPOSTAS)
       ========================================================================== */

  /* Esconde qualquer submenu/categoria por padrão para não quebrar o layout */
  nav ul li ul,
  .menu-principal-container ul li ul,
  nav ul li .sub-menu {
    position: absolute !important;
    top: 100% !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(10px) !important;
    background: #ffffff !important;
    min-width: 200px !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1) !important;
    border-radius: 8px !important;
    padding: 10px 0 !important;
    display: flex !important;
    flex-direction: column !important; /* Faz as categorias ficarem uma abaixo da outra */
    gap: 0 !important;
    height: auto !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: all 0.25s ease !important;
    z-index: 9999 !important;
    border: 1px solid #eef5f8 !important;
  }

  /* Mostra o submenu lindamente apenas quando o usuário passa o mouse por cima */
  nav ul li:hover > ul,
  .menu-principal-container ul li:hover > ul,
  nav ul li:hover > .sub-menu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(-50%) translateY(0) !important;
  }

  /* Estilo dos links de dentro do Submenu (Categorias como "Sem Categoria", "Pijamas"...) */
  nav ul li ul li a,
  .menu-principal-container ul li ul li a {
    color: #666666 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 10px 20px !important;
    display: block !important;
    width: 100% !important;
    text-align: left !important;
    text-transform: none !important;
    letter-spacing: 0.5px !important;
    transition:
      background 0.2s ease,
      color 0.2s ease !important;
  }

  /* Efeito de hover dentro das categorias */
  nav ul li ul li a:hover {
    background-color: #f4f9fc !important;
    color: #54c3f1 !important;
  }

  /* Remove a barrinha azul de baixo nos sublinks para não virar bagunça */
  nav ul li ul li a::after {
    display: none !important;
  }
}

/* ==========================================================================
   SISTEMA DE MEGA MENU COM IMAGENS (CATEGORIAS LADO A LADO)
   ========================================================================== */
@media (min-width: 1025px) {
  /* Alinha o container do submenu para abrir como uma caixa grande horizontal */
  nav ul li ul,
  .menu-principal-container ul li ul,
  nav ul li .sub-menu {
    position: absolute !important;
    top: 100% !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(15px) !important;
    background: #ffffff !important;

    /* Largura ideal para caber os cards lado a lado */
    width: 600px !important;
    padding: 20px !important;
    box-shadow: 0 10px 30px rgba(84, 195, 241, 0.15) !important;
    border-radius: 20px !important; /* Bordas bem redondinhas do seu tema */
    border: 2px solid #eef5f8 !important;

    /* Transforma a lista vertical em uma linha horizontal de cards */
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    gap: 15px !important;

    opacity: 0 !important;
    visibility: hidden !important;
    transition: all 0.25s ease-in-out !important;
    z-index: 9999 !important;
  }

  /* Mostra o menu de fotos ao passar o mouse */
  nav ul li:hover > ul,
  .menu-principal-container ul li:hover > ul,
  nav ul li:hover > .sub-menu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(-50%) translateY(0) !important;
  }

  /* Estiliza cada item (li) como um card clicável */
  nav ul li ul li,
  .menu-principal-container ul li ul li {
    flex: 1 !important;
    display: block !important;
  }

  /* Transforma o link <a> em uma caixinha com fundo azul bebê */
  nav ul li ul li a,
  .menu-principal-container ul li ul li a {
    display: flex !important;
    flex-direction: column !important; /* Foto em cima, texto embaixo */
    align-items: center !important;
    text-align: center !important;
    text-decoration: none !important;
    background-color: #e0f5ff !important; /* Fundo azul claro fofo */
    border-radius: 14px !important;
    padding: 10px !important;
    transition:
      transform 0.2s ease,
      background 0.2s ease !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Efeito de leve subida ao passar o mouse na foto da categoria */
  nav ul li ul li a:hover {
    transform: translateY(-4px) !important;
    background-color: #d0efff !important;
  }

  /* Estilização da foto de dentro do menu */
  nav ul li ul li a img.menu-cat-img {
    width: 100% !important;
    height: 100px !important; /* Altura controlada para as fotos ficarem alinhadas */
    object-fit: cover !important; /* Não deixa a foto esticar ou distorcer */
    border-radius: 10px !important;
    margin-bottom: 8px !important;
  }

  /* Estilização do texto abaixo da foto */
  nav ul li ul li a span {
    font-family: var(--font-body), sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #2b7fa1 !important; /* Azul escuro padrão */
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    display: block !important;
  }

  /* Limpa setas ou linhas residuais nas subcategorias */
  nav ul li ul li a::after {
    display: none !important;
  }
}

/* ==========================================================================
   MEGA MENU AUTOMÁTICO COM IMAGENS NATIVAS DO WORDPRESS
   ========================================================================== */
@media (min-width: 1025px) {
  /* Configuração da caixinha que flutua ao passar o mouse */
  nav ul li ul,
  .menu-principal-container ul li ul,
  nav ul li .sub-menu {
    position: absolute !important;
    top: 100% !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(15px) !important;
    background: #ffffff !important;

    /* Ajuste de largura para caber os cards lado a lado */
    width: 650px !important;
    padding: 20px !important;
    box-shadow: 0 10px 30px rgba(84, 195, 241, 0.15) !important;
    border-radius: 20px !important;
    border: 2px solid #eef5f8 !important;

    /* Alinha as subcategorias horizontalmente */
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    gap: 15px !important;

    opacity: 0 !important;
    visibility: hidden !important;
    transition: all 0.25s ease-in-out !important;
    z-index: 9999 !important;
  }

  /* Exibe o menu ao passar o mouse em "LOJA", "PIJAMAS", etc. */
  nav ul li:hover > ul,
  .menu-principal-container ul li:hover > ul,
  nav ul li:hover > .sub-menu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(-50%) translateY(0) !important;
  }

  /* Ajusta cada item da lista interna */
  nav ul li ul li,
  .menu-principal-container ul li ul li {
    flex: 1 !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Formata o link completo como um bloco/card clicável direcionável */
  nav ul li ul li a,
  .menu-principal-container ul li ul li a {
    display: flex !important;
    flex-direction: column !important; /* Imagem no topo, texto embaixo */
    align-items: center !important;
    text-align: center !important;
    text-decoration: none !important;
    background-color: #e0f5ff !important; /* Fundo azul bebê do seu tema */
    border-radius: 14px !important;
    padding: 12px 10px !important;
    transition:
      transform 0.2s ease,
      background 0.2s ease !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Efeito de leve subida ao passar o mouse no card */
  nav ul li ul li a:hover {
    transform: translateY(-4px) !important;
    background-color: #d0efff !important;
  }

  /* Estilização da Imagem Nativa que vem do WordPress */
  nav ul li ul li a img.menu-cat-img {
    width: 100% !important;
    height: 110px !important; /* Altura ideal fixa */
    max-width: 140px !important;
    object-fit: cover !important; /* Corta a imagem perfeitamente sem distorcer */
    border-radius: 10px !important;
    margin-bottom: 10px !important;
    display: block !important;
  }

  /* Estilização do texto da categoria abaixo da foto */
  nav ul li ul li a span.menu-cat-title {
    font-family: var(--font-body), sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #2b7fa1 !important; /* Azul escuro principal */
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Remove伪-elementos residuais nas subcategorias */
  nav ul li ul li a::after {
    display: none !important;
  }
}

/* ==========================================================================
   MEGA MENU PROTEGIDO: COMPORTAMENTO DE LAYOUT ISOLADO
   ========================================================================== */
@media (min-width: 1025px) {
  /* Garante que imagens soltas fora do submenu fiquem completamente invisíveis */
  nav > ul > li > a img.menu-cat-img,
  .menu-principal-container > ul > li > a img.menu-cat-img {
    display: none !important;
  }

  /* Configuração da caixa drop horizontal que abriga as categorias */
  nav ul li ul,
  .menu-principal-container ul li ul,
  nav ul li .sub-menu {
    position: absolute !important;
    top: 100% !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(15px) !important;
    background: #ffffff !important;
    width: 650px !important;
    padding: 20px !important;
    box-shadow: 0 10px 30px rgba(84, 195, 241, 0.15) !important;
    border-radius: 20px !important;
    border: 2px solid #eef5f8 !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    gap: 15px !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: all 0.25s ease-in-out !important;
    z-index: 9999 !important;
  }

  nav ul li:hover > ul,
  .menu-principal-container ul li:hover > ul,
  nav ul li:hover > .sub-menu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(-50%) translateY(0) !important;
  }

  /* Formatação estrutural dos mini-cards */
  nav ul li ul li,
  .menu-principal-container ul li ul li {
    flex: 1 !important;
    display: block !important;
  }

  /* Estilização dos cartões internos das subcategorias */
  nav ul li ul li a,
  .menu-principal-container ul li ul li a {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    text-decoration: none !important;
    background-color: #e0f5ff !important; /* Azul suave */
    border-radius: 14px !important;
    padding: 12px 10px !important;
    transition:
      transform 0.2s ease,
      background 0.2s ease !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  nav ul li ul li a:hover {
    transform: translateY(-4px) !important;
    background-color: #d0efff !important;
  }

  /* Redimensionamento e contenção da imagem interna do card */
  nav ul li ul li a img.menu-cat-img {
    display: block !important;
    width: 100% !important;
    height: 110px !important;
    max-width: 140px !important;
    object-fit: cover !important; /* Evita distorções na imagem da categoria */
    border-radius: 10px !important;
    margin-bottom: 10px !important;
  }

  /* Texto abaixo das miniaturas */
  nav ul li ul li a span.menu-cat-title {
    font-family: var(--font-body), sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #2b7fa1 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    display: block !important;
  }

  nav ul li ul li a::after {
    display: none !important;
  }
}
/* ==========================================================================
   ESTILIZAÇÃO CORRETIVA: MEGA MENU COM FOTOS NATIVAS
   ========================================================================== */
@media (min-width: 1025px) {
  /* Alinha o menu superior em uma linha limpa e horizontal */
  .nav-menu,
  nav ul,
  .menu-principal-container ul {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 30px !important;
    list-style: none !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }

  /* Define a posição relativa obrigatória para os pais do submenu */
  nav ul li,
  .menu-principal-container ul li {
    position: relative !important;
  }

  /* O SEGREDO: Caixa suspensa (Submenu) formatada como linha horizontal */
  nav ul li ul,
  nav ul li .sub-menu,
  .menu-principal-container ul li ul {
    position: absolute !important;
    top: 100% !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(10px) !important;
    background: #ffffff !important;
    width: 580px !important; /* Espaço ideal para os cards respirarem */
    padding: 15px !important;
    box-shadow: 0 10px 30px rgba(84, 195, 241, 0.15) !important;
    border-radius: 16px !important;
    border: 1px solid #eef5f8 !important;

    /* Transforma a lista vertical padrão do tema em formato de vitrine */
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    gap: 15px !important;

    opacity: 0 !important;
    visibility: hidden !important;
    transition: all 0.25s ease-in-out !important;
    z-index: 99999 !important;
  }

  /* Exibe a caixinha suspensa suavemente ao passar o mouse */
  nav ul li:hover > ul,
  .menu-principal-container ul li:hover > ul {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(-50%) translateY(0) !important;
  }

  /* Reseta os itens internos da lista do submenu */
  nav ul li ul li,
  .menu-principal-container ul li ul li {
    flex: 1 !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Transforma o link em um card de categoria clicável */
  nav ul li ul li a,
  .menu-principal-container ul li ul li a {
    display: flex !important;
    flex-direction: column !important; /* Foto em cima, texto embaixo */
    align-items: center !important;
    text-align: center !important;
    background-color: #eef9ff !important; /* Fundo azul piscina clarinho */
    border-radius: 12px !important;
    padding: 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    text-transform: none !important;
    border: 1px solid transparent !important;
    transition:
      transform 0.2s ease,
      background 0.2s ease !important;
  }

  /* Efeito hover individual no card */
  nav ul li ul li a:hover {
    transform: translateY(-3px) !important;
    background-color: #e0f4ff !important;
    border-color: #54c3f1 !important;
  }

  /* Ajuste milimétrico da foto da categoria dentro do menu */
  nav ul li ul li a img.mega-menu-thumb {
    display: block !important;
    width: 100% !important;
    height: 90px !important; /* Força altura uniforme */
    max-width: 120px !important;
    object-fit: cover !important; /* Ajusta a imagem sem distorcer */
    border-radius: 8px !important;
    margin-bottom: 8px !important;
  }

  /* Texto abaixo da foto */
  nav ul li ul li a span.mega-menu-text {
    font-family: var(--font-body), sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #2b7fa1 !important;
    letter-spacing: 0.3px !important;
    display: block !important;
  }

  /* Remove marcadores e decorações extras de submenus antigos */
  nav ul li ul li a::after,
  .menu-principal-container ul li ul li a::after {
    display: none !important;
  }
}

/* ==========================================================================
   ADAPTAÇÃO DA PÁGINA DE PRODUTOS PARA O TEMA 2 (NOSSA LOJA)
   ========================================================================== */

/* 1. Título da Página (Estilo Elegante) */
.woocommerce-products-header .woocommerce-products-header__title.page-title {
  font-family: "Playfair Display", "Georgia", serif !important;
  text-transform: uppercase !important;
  color: var(--primary) !important;
  letter-spacing: 2px !important;
  font-size: 2rem !important;
  text-align: center !important;
  margin-bottom: 5px !important;
}

/* 2. Customização dos Cards de Produtos */
ul.products li.product {
  background: #ffffff !important;
  border-radius: 16px !important;
  padding: 12px !important;
  box-shadow: 0 4px 15px rgba(176, 82, 101, 0.05) !important;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease !important;
  border: 1px solid #f9f0f2 !important;
}

ul.products li.product:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 8px 25px rgba(176, 82, 101, 0.12) !important;
}

/* 3. Arredondamento das Imagens dos Pijamas */
ul.products li.product img {
  border-radius: 12px !important;
  object-fit: cover !important;
  margin-bottom: 15px !important;
}

/* 4. Categorias e Títulos Internos do Card */
ul.products li.product .woocommerce-loop-product__title {
  font-family: "Quicksand", sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #4a4a4a !important;
  margin: 10px 0 6px 0 !important;
  text-align: center !important;
}

/* Tag de categoria acima do título */
ul.products li.product .ast-woo-product-category {
  font-size: 11px !important;
  text-transform: uppercase !important;
  color: var(--primary) !important;
  letter-spacing: 1px !important;
  font-weight: 600 !important;
}

/* 5. Preços (Destaque Suave) */
ul.products li.product .price {
  color: var(--primary) !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  justify-content: center !important;
  margin-bottom: 15px !important;
}

/* Preço antigo riscado */
ul.products li.product .price del {
  font-size: 13px !important;
  color: #999999 !important;
}

/* Preço atualizado/PIX abaixo */
ul.products li.product .price ins {
  background: transparent !important;
  text-decoration: none !important;
  color: var(--primary) !important;
}

/* 6. Botão "Adicionar ao Carrinho" (Padrão Botão Rosa do Tema 2) */
ul.products li.product .button.add_to_cart_button {
  background-color: var(--primary) !important;
  color: #ffffff !important;
  border-radius: 30px !important;
  padding: 10px 20px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
  letter-spacing: 1px !important;
  transition: background-color 0.2s ease !important;
  width: 90% !important;
  margin: 0 auto 10px auto !important;
  display: block !important;
  border: none !important;
}

ul.products li.product .button.add_to_cart_button:hover {
  background-color: var(--primary) !important;
}

/* 7. Badges de "Oferta" ou "Novo" */
ul.products li.product .onsale {
  background-color: var(--primary) !important;
  color: #ffffff !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  padding: 4px 10px !important;
  border-radius: 20px !important;
  line-height: 1 !important;
  min-height: auto !important;
  min-width: auto !important;
}

/* ==========================================================================
   REMOVE COMPLETAMENTE O CONTAINER E OS CARDS DE CATEGORIAS NO CHECKOUT
   ========================================================================== */
.woocommerce-checkout .products.columns-4.dp-categorias-topo-loop,
.woocommerce-checkout .dp-categorias-topo-loop,
.woocommerce-checkout .widget_product_categories,
.woocommerce-checkout .product-categories,
.woocommerce-checkout hr {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
}

/* ==========================================================================
   ESTILIZAÇÃO DOS FILTROS E BUSCA (TEMA 2)
   ========================================================================== */

.shop-custom-header {
  width: 100%;
  max-width: 800px;
  margin: 0 auto 40px auto;
  text-align: center;
  padding: 0 15px;
}

/* Container dos Filtros (Pílulas) */
.shop-categories-filter {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
}

/* Estilo Base do Botão Inativo */
.shop-categories-filter .filter-pill {
  display: inline-block;
  padding: 10px 28px;
  border: 1px solid var(--primary) !important;
  color: var(--primary) !important;
  border-radius: 25px !important;
  font-family: "Quicksand", sans-serif;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-decoration: none !important;
  transition: all 0.25s ease-in-out !important;
  background-color: #ffffff;
}

/* Efeito de Hover nas Pílulas */
.shop-categories-filter .filter-pill:hover {
  background-color: #c5eafc !important; /* Fundo rosa bem claro */
  transform: translateY(-1px);
}

/* Estado Ativo (Onde o usuário está navegando no momento) */
.shop-categories-filter .filter-pill.active {
  background-color: var(--primary) !important; /* Fundo rosa escuro do Tema 2 */
  color: #ffffff !important;
  border-color: var(--primary) !important;
  box-shadow: 0 4px 12px rgba(176, 82, 101, 0.25) !important;
}

/* ==========================================================================
   BREADCRUMB PREMIUM (TEMA 2)
   ========================================================================== */

.woocommerce-breadcrumb.dp-theme2-breadcrumb {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  padding: 0 0 10px 0 !important;
  margin: 0 auto !important;
  background: transparent !important; /* Remove fundos cinzas herdados */
  border: none !important;
  font-family: "Quicksand", sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #a8a8a8 !important; /* Cinza claro neutro */
  text-transform: capitalize !important; /* Apenas primeira letra maiúscula */
}

/* Estilo dos Links do Caminho */
.woocommerce-breadcrumb.dp-theme2-breadcrumb a {
  color: var(--primary) !important; /* Rosa do Tema 2 para os links clicáveis */
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

.woocommerce-breadcrumb.dp-theme2-breadcrumb a:hover {
  color: var(--primary-dark) !important;
  text-decoration: underline !important;
}

/* Divisor sutil entre os links */
.woocommerce-breadcrumb.dp-theme2-breadcrumb .bc-separator {
  display: inline-block !important;
  margin: 0 8px !important;
  color: var(--primary-light) !important; /* Rosa bem suave para o separador */
  font-weight: 300 !important;
}

/* O último item (página atual onde o usuário está) */
.woocommerce-breadcrumb.dp-theme2-breadcrumb span:last-child {
  color: #7a7a7a !important; /* Tom ligeiramente mais escuro para o texto estático */
  font-weight: 600 !important;
}

/* ==========================================================================
   ESTILIZAÇÃO DO FILTRO DE ORDENAÇÃO (TEMA 2)
   ========================================================================== */

/* Container do filtro de ordenação */
.woocommerce .woocommerce-ordering {
  margin: 0 0 30px 0 !important;
  float: none !important; /* Reseta o comportamento bruto nativo */
  display: flex !important;
  justify-content: flex-end !important; /* Alinha totalmente à direita */
  width: 100% !important;
  padding: 0 15px !important;
  box-sizing: border-box !important;
}

/* O elemento <select> interno */
.woocommerce .woocommerce-ordering select {
  font-family: "Quicksand", sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #555555 !important;
  background-color: #ffffff !important;
  border: 1px solid #ccebff !important; /* Borda rosa sutil combinando com a busca */
  border-radius: 20px !important; /* Cantos arredondados suavizados */
  padding: 10px 35px 10px 20px !important;
  cursor: pointer !important;
  outline: none !important;
  box-shadow: 0 4px 12px rgba(176, 82, 101, 0.03) !important;
  transition: all 0.3s ease !important;

  /* Remove a seta padrão do navegador para customização */
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;

  /* Injeta uma seta customizada e elegante usando SVG embutido */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%232b7fa1' d='M0 0l5 5 5-5z'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 18px center !important;
}

/* Efeito de foco/clique no Select */
.woocommerce .woocommerce-ordering select:focus {
  border-color: var(--primary) !important; /* Rosa do Tema 2 em destaque */
  box-shadow: 0 4px 18px rgba(176, 82, 101, 0.1) !important;
}

/* Opções internas do menu dropdown */
.woocommerce .woocommerce-ordering select option {
  background-color: #ffffff !important;
  color: #4a4a4a !important;
  font-family: "Quicksand", sans-serif !important;
}

/* ==========================================================================
   AJUSTES DE RESPONSIVIDADE (MOBILE)
   ========================================================================== */
@media (max-width: 768px) {
  .woocommerce .woocommerce-ordering {
    justify-content: center !important; /* Centraliza no mobile para melhor usabilidade */
    margin-bottom: 20px !important;
  }

  .woocommerce .woocommerce-ordering select {
    width: 100% !important;
    max-width: 320px !important; /* Não deixa o campo gigante em telas pequenas */
    text-align: center !important;
  }
}

/* ==========================================================================
   INTEGRAÇÃO DE ESTILO: WOOCOMMERCE + FRONT-END
   ========================================================================== */

/* Garante o espaçamento correto abaixo do menu e centralização */
.main-content-wrapper.front-end-style {
  /*padding-top: 60px !important;
  padding-bottom: 80px !important;*/
  min-height: 60vh;
}

.main-content-wrapper.front-end-style .site-container {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
}

/* Força os títulos do WooCommerce a usarem a fonte padrão do seu tema */
.front-end-style h1.page-title {
  font-family: "Quicksand", sans-serif !important;
  font-weight: 700 !important;
  color: #2b7fa1 !important; /* Seu azul padrão */
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  margin-bottom: 10px !important;
}

/* Ajusta o grid nativo para não quebrar ou sumir com as margens */
.front-end-style ul.products {
  margin: 40px 0 0 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) !important;
  gap: 30px !important;
}

/* Corrige a exibição da contagem de resultados ("Mostrando todos os 2 resultados") */
.woocommerce-result-count {
  font-family: "Quicksand", sans-serif !important;
  color: #777777 !important;
  font-size: 14px !important;
  margin-top: 15px !important;
}

/* ==========================================================================
   UPGRADE GENERALIZADO DA LOJA: PRODUTO, CARRINHO E CHECKOUT
   ========================================================================== */

/* --- 1. AJUSTES DA PÁGINA DE PRODUTO SINGLE (.single-product-page) --- */

.single-product-page .product {
  font-family: "Quicksand", sans-serif !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 40px !important;
}

/* Força os títulos a herdar o tom escuro do tema */
.single-product-page .product_title {
  font-family: "Quicksand", sans-serif !important;
  font-weight: 700 !important;
  color: var(--foreground) !important;
  font-size: 2.2rem !important;
  margin-bottom: 10px !important;
}

/* Alinha o preço com o azul pastel principal do design system */
.single-product-page .entry-summary .price,
.single-product-page .entry-summary .price amount,
.single-product-page .entry-summary .price ins {
  color: var(--primary) !important;
  font-weight: 700 !important;
  font-size: 1.8rem !important;
  text-decoration: none !important;
}

/* Botão de adicionar ao carrinho transformado em cápsula premium */
.single-product-page button.single_add_to_cart_button.button {
  background: var(--primary) !important;
  color: var(--primary-foreground, #fff) !important;
  font-family: "Quicksand", sans-serif !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  padding: 14px 36px !important;
  border-radius: var(--radius-pill) !important;
  border: none !important;
  box-shadow: 0 4px 15px rgba(0, 145, 211, 0.15) !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
}

.single-product-page button.single_add_to_cart_button.button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(0, 145, 211, 0.25) !important;
  filter: brightness(1.05);
}

/* --- 2. MODELAGEM DA PÁGINA DE CARRINHO (.woocommerce-cart-page) --- */

.woocommerce-cart-page table.shop_table.cart {
  border-collapse: separate !important;
  border-spacing: 0 12px !important;
  border: none !important;
  background: transparent !important;
  width: 100% !important;
}

.woocommerce-cart-page table.shop_table.cart thead th {
  background: transparent !important;
  color: var(--foreground) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  font-size: 0.85rem !important;
  border: none !important;
  padding: 10px 20px !important;
  display: block;
}

/* Transforma as linhas em Cards minimalistas suspensos */
.woocommerce-cart-page table.shop_table.cart tbody tr.cart_item {
  background: #ffffff !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.01) !important;
}

.woocommerce-cart-page table.shop_table.cart td {
  padding: 18px 20px !important;
  border: none !important;
  vertical-align: middle !important;
}

/* Garante os cantos suaves em cada linha do produto */
.woocommerce-cart-page table.shop_table.cart tr td:first-child {
  border-top-left-radius: var(--radius) !important;
  border-bottom-left-radius: var(--radius) !important;
}
.woocommerce-cart-page table.shop_table.cart tr td:last-child {
  border-top-right-radius: var(--radius) !important;
  border-bottom-right-radius: var(--radius) !important;
}

/* Imagens das miniaturas no carrinho */
.woocommerce-cart-page table.shop_table td.product-thumbnail img {
  width: 65px !important;
  height: 85px !important;
  border-radius: 8px !important;
  object-fit: cover !important;
}

/* Inputs de quantidade limpos */
.woocommerce-cart-page .quantity input.qty,
.single-product-page .quantity input.qty {
  height: 42px !important;
  width: 58px !important;
  border-radius: 8px !important;
  border: 1px solid var(--border) !important;
  background: var(--bg-light) !important;
  font-weight: 600 !important;
  text-align: center !important;
}

/* Botão Fechar Compra / Checkout */
.woocommerce-cart-page .wc-proceed-to-checkout a.checkout-button,
.woocommerce-checkout-page #place_order {
  background: var(--primary) !important;
  color: #ffffff !important;
  font-family: "Quicksand", sans-serif !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  padding: 16px 32px !important;
  border-radius: var(--radius-pill) !important;
  display: block !important;
  text-align: center !important;
  box-shadow: 0 4px 14px rgba(0, 145, 211, 0.2) !important;
  transition: all 0.25s ease !important;
  border: none !important;
}

.woocommerce-cart-page .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce-checkout-page #place_order:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(0, 145, 211, 0.3) !important;
}

/* --- 3. ALINHAMENTO DA PÁGINA DE CHECKOUT (.woocommerce-checkout-page) --- */

/* Restaura o design nos campos nativos injetados pelo do_action */
.woocommerce-checkout-page .form-row input.input-text,
.woocommerce-checkout-page .form-row select,
.woocommerce-checkout-page .form-row textarea,
.woocommerce-checkout-page
  .select2-container--default
  .select2-selection--single {
  border-radius: 24px !important; /* Mantém os cantos arredondados do layout dos pijama */
  border: 2px solid #cbeffc !important; /* Azul pastel correspondente ao card */
  padding: 12px 15px !important;
  background-color: #ffffff !important;
  font-family: "Quicksand", sans-serif !important;
  color: #444444 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  height: auto !important;
}

/* Corrige especificamente a caixa de seleção do Select2 (Estado e Cidade) */
.woocommerce-checkout-page
  .select2-container--default
  .select2-selection--single
  .select2-selection__rendered {
  line-height: 24px !important;
  color: #444444 !important;
  padding-left: 0 !important;
}

.woocommerce-checkout-page .select2-container .select2-selection--single {
  height: 48px !important;
  display: flex !important;
  align-items: center !important;
}

/* Ajuste das Labels nativas para manter o alinhamento */
.woocommerce-checkout-page .form-row label {
  font-family: "Quicksand", sans-serif !important;
  font-weight: 700 !important;
  color: #2cb3ea !important;
  margin-bottom: 6px !important;
  display: block !important;
  font-size: 0.9rem !important;
}

/* Ajuste de Grid dos campos nativos (Nome, Sobrenome, etc) */
.woocommerce-checkout-page .form-row-first,
.woocommerce-checkout-page .form-row-last {
  width: 48% !important;
  float: left !important;
}

.woocommerce-checkout-page .form-row-wide {
  clear: both !important;
  width: 100% !important;
}

@media (max-width: 768px) {
  .woocommerce-checkout-page .form-row-first,
  .woocommerce-checkout-page .form-row-last {
    width: 100% !important;
    float: none !important;
  }
}

.woocommerce-checkout-page table.shop_table {
  border: 2px solid #cbeffc !important;
  border-radius: 24px !important;
  background: #ffffff !important;
  border-collapse: separate !important;
  padding: 15px !important;
}

/*** Imagens das miniaturas no checkout */
.menu-cat-thumb {
  width: 100px;
  height: 100px;
  object-fit: cover;
  margin-right: 8px;
  vertical-align: middle;
}

/* Correção de escopo para o Carrinho Global */
.woocommerce-cart .woocommerce,
.widget_shopping_cart,
.front-end-style.woocommerce-cart-page {
  font-family: "Quicksand", sans-serif !important;
}

.woocommerce-cart .checkout-button,
.widget_shopping_cart .checkout,
.shop_table .actions .button {
  background: var(--primary) !important;
  color: #ffffff !important;
  border-radius: var(--radius-pill) !important;
  padding: 12px 24px !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 14px rgba(0, 145, 211, 0.2) !important;
  text-transform: uppercase;
  border: none !important;
  transition: all 0.25s ease !important;
}

.woocommerce-cart .checkout-button:hover,
.widget_shopping_cart .checkout:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(0, 145, 211, 0.3) !important;
}

/* Ajuste de Layout da Página de Produto Único */
.single-product-page .product {
  display: flex !important;
  flex-direction: row !important;
  gap: 40px !important;
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
}

/* Coluna da Esquerda (Imagens) */
.single-product-page .woocommerce-product-gallery {
  flex: 1 !important;
  max-width: 50% !important;
}

/* Coluna da Direita (Dados de Compra) */
.single-product-page .summary.entry-summary {
  flex: 1 !important;
  max-width: 50% !important;
  display: flex;
  flex-direction: column;
}

/* Responsividade para Mobile */
@media (max-width: 768px) {
  .single-product-page .product {
    flex-direction: column !important;
  }
  .single-product-page .woocommerce-product-gallery,
  .single-product-page .summary.entry-summary {
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* --- ESTILIZAÇÃO DO COMPONENTE SINGLE PRODUCT --- */
.dp-product-single-container {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 50px !important;
  margin: 40px auto !important;
  max-width: 1200px !important;
  padding: 0 20px !important;
}

.dp-single-cat {
  font-family: "Quicksand", sans-serif;
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 1.5px;
  color: var(--muted-foreground);
  font-weight: 700;
  display: block;
  margin-bottom: 8px;
}

.dp-single-title {
  font-family: var(--font-title), serif !important;
  font-size: 2.5rem !important;
  color: var(--foreground);
  margin-bottom: 15px !important;
  line-height: 1.2;
}

.dp-single-price-box {
  background: var(--bg-light);
  padding: 20px;
  border-radius: var(--radius);
  margin: 20px 0;
  border-left: 4px solid var(--primary);
}

/* Alvo corrigido para .dp-price-original e elementos internos de preço do WooCommerce */
.dp-single-price-box .dp-price-original,
.dp-single-price-box .dp-price-original .amount,
.dp-single-price-box .dp-price-original ins .amount {
  font-family: "Quicksand", sans-serif !important;
  font-size: 1.8rem !important;
  font-weight: 700 !important;
  color: var(--primary) !important;
}

/* Garante que preços antigos (rasurados em caso de promoção) fiquem menores e discretos */
.dp-single-price-box .dp-price-original del .amount {
  font-size: 1.3rem !important;
  font-weight: 500 !important;
  color: #94a3b8 !important; /* Cor cinza para o preço antigo */
  margin-right: 8px;
}

.woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product .stock {
  color: var(--secsub) !important;
  font-weight: 800;
  display: none !important; /* Oculta o texto de estoque para uma aparência mais limpa */
}

strong {
  color: var(--secsub);
}

.dp-destaque-preco {
  color: var(--primary);
  font-weight: 800;
}

.dp-pix-discount-badge {
  font-family: "Quicksand", sans-serif;
  font-size: 1.1rem;
  margin-top: 5px;
  color: #2e7d32; /* Verde suave para sucesso comercial */
}

.dp-pix-discount-badge .badge-highlight {
  background: var(--accent);
  color: #fff;
  font-size: 0.75rem;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 700;
  vertical-align: middle;
}

.dp-trust-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: "Quicksand", sans-serif;
  background: var(--lilac-soft);
  padding: 12px;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--foreground);
  margin: 20px 0;
  width: 100%;
}


/* Customização dos botões de variação e compra para ficarem arredondados */
.dp-product-info-column .single_add_to_cart_button {
  background: var(--primary) !important;
  border-radius: var(--radius-pill) !important;
  padding: 15px 40px !important;
  font-weight: 700 !important;
  font-family: "Quicksand", sans-serif !important;
  box-shadow: 0 4px 14px rgba(0, 145, 211, 0.2) !important;
  border: none !important;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease !important;
}

.dp-product-info-column .single_add_to_cart_button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(0, 145, 211, 0.3) !important;
}

/* Responsividade Responsável para Telas Menores */
@media (max-width: 992px) {
  .dp-product-single-container {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
  }
}

/* --- LAYOUT GRID RESPONSÁVEL DO PRODUTO ÚNICO --- */
.dp-single-product-wrapper {
  display: flex !important;
  flex-direction: row !important;
  gap: 40px !important;
  max-width: 1200px !important;
  margin: 40px auto !important;
  padding: 0 20px !important;
  align-items: flex-start;
}

.dp-gallery-wrapper {
  flex: 1.2 !important;
  max-width: 55% !important;
  width: 55% !important;
}

.dp-meta-summary-wrapper {
  flex: 0.8 !important;
  max-width: 45% !important;
  width: 45% !important;
  display: flex;
  flex-direction: column;
}

/* TÍTULOS E SUBTÍTULOS */
.dp-product-badge-cat {
  font-family: "Quicksand", sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--muted-foreground);
  letter-spacing: 1px;
}

.dp-product-main-title {
  font-family: var(--font-title), serif !important;
  font-size: 2.2rem !important;
  color: var(--foreground);
  margin: 8px 0 15px 0 !important;
  line-height: 1.2;
}

/* BOX DE PREÇO */
.dp-product-price-tier {
  background: var(--bg-light);
  padding: 18px;
  border-radius: var(--radius);
  margin-bottom: 20px;
}

.dp-main-price-display .price,
.dp-main-price-display .price span {
  font-family: "Quicksand", sans-serif !important;
  font-size: 1.75rem !important;
  font-weight: 700 !important;
  color: var(--foreground) !important;
}

.dp-pix-pricing {
  font-family: "Quicksand", sans-serif;
  font-size: 1.05rem;
  color: #2e7d32;
  margin-top: 6px;
}

.dp-pix-pricing .pix-bold {
  font-weight: 700;
}

.dp-pix-pricing .pix-green-badge {
  background: #e8f5e9;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 700;
  margin-left: 5px;
}

.dp-divider-line {
  height: 1px;
  background: var(--border);
  width: 100%;
  margin: 15px 0;
}

/* CORREÇÃO CRÍTICA: FORMULÁRIO DE CALCULAR FRETE */
.dp-shipping-trust-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-top: 25px;
  background: #ffffff;
}

.dp-shipping-trust-header {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--foreground);
  font-family: "Quicksand", sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 15px;
}

.dp-shipping-trust-header span {
  color: var(--primary);
}

.dp-shipping-calculator-anchor h5 {
  font-family: "Quicksand", sans-serif;
  font-size: 1rem;
  margin-bottom: 10px;
  font-weight: 700;
}

/* Forçar os inputs de frete do WC a virarem blocos bonitos e responsivos */
.woocommerce-shipping-calculator .shipping-calculator-button {
  display: none !important; /* Oculta o link de gatilho cinza nativo */
}

.woocommerce-shipping-calculator .shipping-calculator-form {
  display: block !important; /* Força exibição aberta */
}

.shipping-calculator-form p {
  margin-bottom: 10px !important;
  width: 100% !important;
}

.shipping-calculator-form input.input-text,
.shipping-calculator-form select {
  width: 100% !important;
  box-sizing: border-box !important;
  border-radius: var(--radius-pill) !important;
  border: 1px solid var(--border) !important;
  padding: 10px 15px !important;
  font-family: "Quicksand", sans-serif !important;
  outline: none;
}

.shipping-calculator-form button[name="calc_shipping"] {
  width: 100% !important;
  background: var(--primary) !important;
  color: white !important;
  border-radius: var(--radius-pill) !important;
  padding: 10px !important;
  font-family: "Quicksand", sans-serif !important;
  font-weight: 700 !important;
  border: none !important;
  cursor: pointer;
  text-transform: uppercase;
  font-size: 0.85rem;
  transition: opacity 0.2s;
}

.shipping-calculator-form button[name="calc_shipping"]:hover {
  opacity: 0.9;
}

/* SEÇÃO INFERIOR (ABAS) */
.dp-bottom-details-container {
  max-width: 1200px;
  margin: 40px auto;
  padding: 0 20px;
  font-family: "Quicksand", sans-serif;
}

/* RESPONSIVIDADE MOBILE */
@media (max-width: 820px) {
  .dp-single-product-wrapper {
    flex-direction: column !important;
    gap: 20px !important;
  }
  .dp-gallery-wrapper,
  .dp-meta-summary-wrapper {
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* ==========================================================================
   AJUSTES FINOS DE UX: SELETORES DE COMPRA UNIFICADOS
   ========================================================================== */

/* Container: Quantidade + Botão Adicionar à Sacola Lado a Lado */
.dp-single-actions-box form.cart {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 25px 0 35px 0 !important;
  width: 100% !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
}

/* Seletor de Quantidade Compacto e Arredondado (Estilo Pill) */
/* AJUSTE FORÇADO PARA O SELETOR DE QUANTIDADE */
.dp-single-actions-box form.cart .quantity {
  height: 52px !important;
  width: 110px !important;
  min-width: 110px !important;
  border: 2px solid #bce6f7 !important; /* Borda azul clara sutil do botão original */
  border-radius: var(--radius-pill) !important;
  background-color: #e6f7ff !important; /* Fundo azul bem claro igual ao botão original */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

/* Força o número interno a ficar gigante, centralizado e sem caixas extras */
.dp-single-actions-box form.cart .quantity .qty {
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  font-size: 1.2rem !important;
  color: #0091d3 !important; /* Cor azul do tema para o número */
  background: transparent !important;
  border: none !important;
  text-align: center !important;
  width: 100% !important;
  height: 100% !important;
  outline: none !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
}

/* Remove setas padrão de quantidade (Chrome, Safari, Edge e Firefox) */
.dp-single-actions-box form.cart .quantity .qty::-webkit-outer-spin-button,
.dp-single-actions-box form.cart .quantity .qty::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}
.dp-single-actions-box form.cart .quantity .qty {
  -moz-appearance: textfield !important;
}

/* ESTILIZAÇÃO DO BREADCRUMB NO TOPO DO PRODUTO */
.dp-product-breadcrumb-top {
  margin: 25px auto 15px auto !important; /* Aumenta o espaço em cima e embaixo */
  padding: 0 20px !important; /* Evita que ele cole nas bordas em telas menores */
  max-width: 1200px; /* Alinha com o limite do seu container principal */
  font-family: var(--font-body) !important;
  font-size: 1rem !important; /* Deixa o texto maior e mais legível */
  font-weight: 500 !important;
  color: #64748b !important; /* Cor cinza moderna */
}

/* Links do caminho (Início, Categoria) */
.dp-product-breadcrumb-top a {
  color: #0091d3 !important; /* Usa o azul principal da sua marca nos links */
  text-decoration: none !important;
  font-weight: 600 !important;
  transition: color 0.2s ease;
}

.dp-product-breadcrumb-top a:hover {
  color: #0073aa !important; /* Tom mais escuro no hover */
  text-decoration: underline !important;
}

/* Customização dos separadores ">" */
.dp-product-breadcrumb-top .woocommerce-breadcrumb-delimiter,
.dp-product-breadcrumb-top {
  /* Garante um espaçamento harmônico ao redor do sinal de maior */
  letter-spacing: 2px;
}

/* Nome do produto atual (o último item, que não é link) */
.dp-product-breadcrumb-top tr,
.dp-product-breadcrumb-top span:last-child {
  color: #94a3b8 !important; /* Tom cinza mais suave para destacar que é a página atual */
  font-weight: 500 !important;
}

/* Botão Principal: Adicionar à Sacola */
.dp-single-actions-box form.cart .single_add_to_cart_button {
  flex: 1 !important;
  height: 52px !important;
  background: var(--primary) !important;
  color: var(--primary-foreground) !important;
  border-radius: var(--radius-pill) !important;
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  border: none !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 4px 14px rgba(0, 145, 211, 0.15) !important;
}

/* Efeito de Hover no Botão */
.dp-single-actions-box form.cart .single_add_to_cart_button:hover {
  background: var(--news) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px rgba(0, 145, 211, 0.25) !important;
}

/* 2. Correção Absoluta de Produtos Relacionados / Compre Junto */
.dp-product-tabs-and-related {
  max-width: 1200px !important;
  margin: 60px auto !important;
  padding: 0 20px !important;
  clear: both !important;
}

.dp-related-products-grid-wrapper role,
.related.products {
  width: 100% !important;
  margin-top: 40px !important;
}

.related.products h2 {
  font-family: var(--font-title), serif !important;
  font-size: 1.8rem !important;
  color: var(--foreground) !important;
  text-align: center !important;
  margin-bottom: 30px !important;
}

/* Transforma a lista vertical estourada do WC em um Grid de 4 Colunas */
.related.products ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 25px !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

/* Ajusta o tamanho dos cartões individuais de produtos dentro dos relacionados */
.related.products ul.products li.product {
  width: 100% !important;
  margin: 0 !important;
  float: none !important;
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.04) !important;
  border-radius: var(--radius) !important;
  padding: 15px !important;
  box-sizing: border-box !important;
}

/* Garante que a imagem do produto relacionado fique proporcional e bonita */
.related.products ul.products li.product img {
  width: 100% !important;
  height: auto !important;
  object-fit: cover !important;
  border-radius: calc(var(--radius) - 4px) !important;
  margin-bottom: 12px !important;
}

/* Responsividade Adaptativa para Telas Menores */
@media (max-width: 992px) {
  .related.products ul.products {
    grid-template-columns: repeat(
      2,
      1fr
    ) !important; /* 2 por linha em tablets */
    gap: 15px !important;
  }
}

@media (max-width: 576px) {
  .dp-single-actions-box form.cart {
    flex-direction: column !important; /* Empilha apenas no mobile extremo */
    align-items: stretch !important;
  }
  .dp-single-actions-box form.cart .quantity {
    width: 100% !important; /* Largura total no mobile */
  }
  .related.products ul.products {
    grid-template-columns: 1fr !important; /* 1 por linha no celular */
  }
}

/* ==========================================================================
   ESTILIZAÇÃO DE VARIAÇÕES (COR/TAMANHO) E DESIGN DO BOTÃO DE FRETE
   ========================================================================== */

/* Força a quebra de linha para exibir os textos "Cor" e "Tamanho" de forma limpa */
.dp-single-actions-box table.variations {
  width: 100% !important;
  border-collapse: collapse !important;
  margin-bottom: 15px !important;
}

.dp-single-actions-box table.variations tr {
  display: flex !important;
  flex-direction: column !important; /* Coloca o texto em cima do seletor */
  gap: 6px !important;
  margin-bottom: 14px !important;
  width: 100% !important;
}

.dp-single-actions-box table.variations td {
  display: block !important;
  padding: 0 !important;
  width: 100% !important;
  border: none !important;
  background: transparent !important;
}

/* Estilo do Texto da Variação (Cor / Tamanho) */
.dp-single-actions-box table.variations td.label label {
  font-family: "Quicksand", sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  color: var(--foreground) !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Customização dos Dropdowns de Seleção */
.dp-single-actions-box table.variations td.value select {
  width: 100% !important;
  max-width: 100% !important;
  height: 48px !important;
  border-radius: var(--radius-pill) !important;
  border: 1px solid var(--border) !important;
  padding: 0 20px !important;
  font-family: "Quicksand", sans-serif !important;
  font-weight: 500 !important;
  background-color: #fafafa !important;
  color: var(--foreground) !important;
  outline: none !important;
  box-sizing: border-box !important;
}

/* --- REESTILIZAÇÃO TOTAL DO BOTÃO DE CALCULAR FRETE --- */
.dp-shipping-section .dp-shipping-title {
  font-family: "Quicksand", sans-serif !important;
  font-weight: 700 !important;
  font-size: 1.1rem !important;
  color: var(--foreground) !important;
  margin: 25px 0 12px 0 !important;
}

/* Esconde o gatilho cinza nativo do WooCommerce */
.dp-shipping-form-wrapper .shipping-calculator-button {
  display: none !important;
}

/* Força o formulário do plugin de frete a ficar visível e elegante */
.dp-shipping-form-wrapper .shipping-calculator-form {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  width: 100% !important;
}

/* Arredonda e limpa o campo de texto do CEP */
.dp-shipping-form-wrapper
  .shipping-calculator-form
  input#calc_shipping_postcode {
  width: 100% !important;
  height: 48px !important;
  border-radius: var(--radius-pill) !important;
  border: 1px solid var(--border) !important;
  padding: 0 20px !important;
  font-family: "Quicksand", sans-serif !important;
  font-size: 1rem !important;
  background-color: #ffffff !important;
  box-sizing: border-box !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.02) !important;
}

/* Melhora o Botão de Calcular do seu Plugin */
.dp-shipping-form-wrapper
  .shipping-calculator-form
  button[name="calc_shipping"] {
  width: 100% !important;
  height: 48px !important;
  background: var(--primary) !important; /* Usa o azul/lilás do seu tema */
  color: #ffffff !important;
  border: none !important;
  border-radius: var(--radius-pill) !important;
  font-family: "Quicksand", sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  cursor: pointer !important;
  transition:
    opacity 0.2s,
    transform 0.2s !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05) !important;
}

.dp-shipping-form-wrapper
  .shipping-calculator-form
  button[name="calc_shipping"]:hover {
  opacity: 0.93 !important;
  transform: translateY(-1px) !important;
}

/* ==========================================================================
   DESIGN SYSTEM REFATORADO: BOTÕES DE COMPRA E SIMULADOR DE FRETE PREMIUM
   ========================================================================== */

/* --- 1. SELEÇÃO DE VARIANTES (COR E TAMANHO) --- */
.dp-single-actions-box table.variations {
  width: 100% !important;
  border-collapse: collapse !important;
  margin-bottom: 25px !important;
}

.dp-single-actions-box table.variations tr {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin-bottom: 20px !important;
  width: 100% !important;
}

.dp-single-actions-box table.variations td {
  display: block !important;
  padding: 0 !important;
  width: 100% !important;
  border: none !important;
  background: transparent !important;
}

/* Rótulos: COR e TAMANHO */
.dp-single-actions-box table.variations td.label label {
  font-family: "Quicksand", sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  color: var(--foreground) !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
}

/* Dropdowns de Seleção Otimizados */
.dp-single-actions-box table.variations td.value select {
  width: 100% !important;
  height: 50px !important;
  border-radius: var(--radius-pill) !important;
  border: 1px solid var(--border) !important;
  padding: 0 20px !important;
  font-family: "Quicksand", sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  background-color: var(--background) !important;
  color: var(--foreground) !important;
  outline: none !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  transition: border-color 0.2s ease !important;
  appearance: none !important; /* Remove seta padrão feia */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234c566a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 20px center !important;
}

.dp-single-actions-box table.variations td.value select:focus {
  border-color: var(--primary) !important;
}

/* --- 3. SEÇÃO DO CALCULADOR DE FRETE (ESTILO CARTÃO CLEAN) --- */
.dp-shipping-section {
  background: var(--background) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important; /* Cantos levemente suavizados */
  padding: 24px !important;
  margin-top: 35px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02) !important;
}

.dp-shipping-section h4.dp-shipping-title,
.dp-shipping-section h4 {
  font-family: "Quicksand", sans-serif !important;
  font-weight: 700 !important;
  font-size: 1.05rem !important;
  color: var(--foreground) !important;
  margin: 0 0 16px 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* Wrapper do Formulário do teu Plugin */
.dp-shipping-form-wrapper .shipping-calculator-form,
.dp-shipping-form-wrapper #calcularFrete,
.dp-shipping-form-wrapper .inputs {
  display: flex !important;
  flex-direction: row !important; /* Campo e botão na mesma linha como na referência */
  gap: 10px !important;
  width: 100% !important;
}

/* Campo de Entrada do CEP */
.dp-shipping-form-wrapper input[type="text"],
.dp-shipping-form-wrapper input#calc_shipping_postcode,
.dp-shipping-form-wrapper .inputs input {
  flex: 1 !important;
  height: 48px !important;
  border-radius: var(--radius-pill) !important;
  border: 1px solid var(--border) !important;
  padding: 0 20px !important;
  font-family: "Quicksand", sans-serif !important;
  font-size: 0.95rem !important;
  background-color: var(--muted) !important;
  color: var(--foreground) !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  outline: none !important;
  transition: all 0.2s ease !important;
}

.dp-shipping-form-wrapper input:focus {
  border-color: var(--primary) !important;
  background-color: var(--background) !important;
}

/* Botão "OK / Calcular" Lateral do Plugin */
.dp-shipping-form-wrapper button,
.dp-shipping-form-wrapper .calcular-frete-botao,
.dp-shipping-form-wrapper #btnCalcularFrete,
.dp-shipping-form-wrapper button[name="calc_shipping"] {
  height: 48px !important;
  width: auto !important;
  min-width: 100px !important;
  padding: 0 24px !important;
  background: var(
    --foreground
  ) !important; /* Tom escuro contrastante elegante */
  color: #ffffff !important;
  border-radius: var(--radius-pill) !important;
  font-family: "Quicksand", sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  border: none !important;
  cursor: pointer !important;
  margin: 0 !important;
  transition: background-color 0.2s ease !important;
}

.dp-shipping-form-wrapper button:hover,
.dp-shipping-form-wrapper .calcular-frete-botao:hover {
  background: var(--primary) !important;
}

/* --- RESPONSIVIDADE MOBILE EXTRA --- */
@media (max-width: 480px) {
  .dp-single-actions-box form.cart {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .dp-single-actions-box form.cart .quantity {
    width: 100% !important;
  }
  .dp-shipping-form-wrapper .shipping-calculator-form,
  .dp-shipping-form-wrapper #calcularFrete {
    flex-direction: column !important;
  }
  .dp-shipping-form-wrapper button {
    width: 100% !important;
  }
}

/* ==========================================================================
   ALINHAMENTO DEFINITIVO DA SACOLA E QUANTIDADE (PRODUTOS COM VARIAÇÃO)
   ========================================================================== */

/* 1. Força o container de variações a ficar lado a lado */
.single_variation_wrap .woocommerce-variation-add-to-cart {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  margin-top: 20px !important;
  margin-bottom: 25px !important;
  width: 100% !important;
}

/* 2. Customização do Seletor de Quantidade (Estilo Pill Compacto) */
.single_variation_wrap .woocommerce-variation-add-to-cart .quantity {
  height: 52px !important;
  width: 110px !important;
  min-width: 110px !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-pill) !important;
  background: var(--muted) !important; /* Fundo cinza suave do tema */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 10px !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}

.single_variation_wrap .woocommerce-variation-add-to-cart .quantity .qty {
  font-family: "Quicksand", sans-serif !important;
  font-weight: 700 !important;
  font-size: 1.1rem !important;
  color: var(--foreground) !important;
  background: transparent !important;
  border: none !important;
  text-align: center !important;
  width: 100% !important;
  outline: none !important;
}

/* Remove setas nativas do input de número */
.single_variation_wrap
  .woocommerce-variation-add-to-cart
  .quantity
  .qty::-webkit-outer-spin-button,
.single_variation_wrap
  .woocommerce-variation-add-to-cart
  .quantity
  .qty::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

/* 3. Customização do Botão (Mesmo desativado "Selecione as opções") */
.single_variation_wrap
  .woocommerce-variation-add-to-cart
  .single_add_to_cart_button {
  flex: 1 !important;
  height: 52px !important;
  background: var(--primary) !important; /* Cor principal da Daniel Pijamas */
  color: var(--primary-foreground) !important;
  border-radius: var(--radius-pill) !important;
  font-family: "Quicksand", sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  border: none !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 4px 14px rgba(0, 145, 211, 0.12) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
}

/* Efeito Hover quando o botão estiver liberado para clique */
.single_variation_wrap
  .woocommerce-variation-add-to-cart
  .single_add_to_cart_button:not(:disabled):hover {
  background: var(--news) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px rgba(0, 145, 211, 0.22) !important;
}

/* Customização do botão quando estiver desativado (Antes de escolher cor/tamanho) */
.single_variation_wrap
  .woocommerce-variation-add-to-cart
  .single_add_to_cart_button:disabled,
.single_variation_wrap
  .woocommerce-variation-add-to-cart
  .single_add_to_cart_button.disabled {
  background: #e2e8f0 !important; /* Tom cinza moderno neutro */
  color: #94a3b8 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
  transform: none !important;
}

/* --- RESPONSIVIDADE CELULAR --- */
@media (max-width: 480px) {
  .single_variation_wrap .woocommerce-variation-add-to-cart {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .single_variation_wrap .woocommerce-variation-add-to-cart .quantity {
    width: 100% !important;
  }
}

/* ==========================================================================
   ALINHAMENTO PREMIUM: VARIAÇÕES EM BLOCO E BOTÕES EM LINHA
   ========================================================================== */

/* --- 1. Ajuste das Tabelas de Variação (Cor e Tamanho) --- */
.dp-single-actions-box table.variations {
  width: 100% !important;
  border-collapse: collapse !important;
  margin-bottom: 20px !important;
}

.dp-single-actions-box table.variations tr {
  display: flex !important;
  flex-direction: column !important; /* Coloca o título acima do seletor */
  gap: 6px !important;
  margin-bottom: 16px !important;
  width: 100% !important;
}

.dp-single-actions-box table.variations td {
  display: block !important;
  padding: 0 !important;
  width: 100% !important;
  border: none !important;
}

/* Títulos "Cor" e "Tamanho" */
.dp-single-actions-box table.variations td.label label {
  font-family: "Quicksand", sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  color: var(--foreground) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

/* Campos de seleção (Dropdowns) */
.dp-single-actions-box table.variations td.value select {
  width: 100% !important;
  height: 48px !important;
  border-radius: var(--radius-pill) !important;
  border: 1px solid var(--border) !important;
  padding: 0 15px !important;
  font-family: "Quicksand", sans-serif !important;
  font-weight: 600 !important;
  background-color: #fafafa !important;
  color: var(--foreground) !important;
  outline: none !important;
}

/* --- 2. Linha Única: Quantidade + Botão Adicionar à Sacola --- */
.single_variation_wrap .woocommerce-variation-add-to-cart,
.dp-single-actions-box form.cart .variations_button {
  display: flex !important;
  flex-direction: row !important; /* Força um ao lado do outro */
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  margin-top: 20px !important;
}

/* Caixinha de Quantidade Slim */
.single_variation_wrap .quantity,
.dp-single-actions-box form.cart .quantity {
  height: 50px !important;
  width: 100px !important;
  min-width: 100px !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-pill) !important;
  background: var(--muted) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

.single_variation_wrap .quantity .qty,
.dp-single-actions-box form.cart .quantity .qty {
  font-family: "Quicksand", sans-serif !important;
  font-weight: 700 !important;
  font-size: 1.1rem !important;
  color: var(--foreground) !important;
  background: transparent !important;
  border: none !important;
  text-align: center !important;
  width: 100% !important;
  outline: none !important;
}

/* Botão Adicionar à Sacola Premium */
.single_variation_wrap .single_add_to_cart_button,
.dp-single-actions-box .single_add_to_cart_button {
  flex: 1 !important; /* Ocupa todo o espaço restante */
  height: 50px !important;
  background: var(--primary) !important; /* Cor principal azul/lilás */
  color: var(--primary-foreground) !important;
  border-radius: var(--radius-pill) !important;
  font-family: "Quicksand", sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  border: none !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  transition:
    background-color 0.2s ease,
    transform 0.2s ease !important;
}

/* Efeito quando o botão está ativo */
.single_variation_wrap .single_add_to_cart_button:not(:disabled):hover {
  background: var(--news) !important;
  transform: translateY(-1px) !important;
}

/* Efeito quando o botão está desativado (aguardando selecionar cor/tamanho) */
.single_variation_wrap .single_add_to_cart_button:disabled,
.single_variation_wrap .single_add_to_cart_button.disabled {
  background: #e2e8f0 !important;
  color: #94a3b8 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
  transform: none !important;
}

/* ==========================================================================
   ALINHAMENTO EM LINHA: QUANTIDADE + BOTÃO (CORREÇÃO DE ESPECIFICIDADE)
   ========================================================================== */

/* Alvo direto na div que agrupa a quantidade e o botão de variação */
.dp-single-actions-box .woocommerce-variation-add-to-cart,
.woocommerce-variation-add-to-cart.variations_button {
  display: flex !important;
  flex-direction: row !important; /* Coloca um ao lado do outro */
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  margin-top: 20px !important;
  margin-bottom: 20px !important;
}

/* Redesenha a caixinha de quantidade */
.dp-single-actions-box .woocommerce-variation-add-to-cart .quantity {
  height: 50px !important;
  width: 100px !important;
  min-width: 100px !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-pill) !important;
  background: var(--muted) !important; /* Fundo cinza limpo */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

.dp-single-actions-box .woocommerce-variation-add-to-cart .quantity .qty {
  font-family: "Quicksand", sans-serif !important;
  font-weight: 700 !important;
  font-size: 1.1rem !important;
  color: var(--foreground) !important;
  background: transparent !important;
  border: none !important;
  text-align: center !important;
  width: 100% !important;
  outline: none !important;
}

/* Força o botão de adicionar à sacola a ocupar o resto do espaço */
.dp-single-actions-box
  .woocommerce-variation-add-to-cart
  .single_add_to_cart_button {
  flex: 1 !important; /* Expande dinamicamente */
  height: 50px !important;
  background: var(--primary) !important; /* Azul/Lilás da Daniel Pijamas */
  color: var(--primary-foreground) !important;
  border-radius: var(--radius-pill) !important;
  font-family: "Quicksand", sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  border: none !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  transition:
    background-color 0.2s ease,
    transform 0.2s ease !important;
}

/* Comportamento do botão quando estiver ativo */
.dp-single-actions-box
  .woocommerce-variation-add-to-cart
  .single_add_to_cart_button:not(:disabled):hover {
  background: var(--news) !important;
  transform: translateY(-1px) !important;
}

/* Comportamento do botão quando estiver desativado (Antes de escolher tamanho/cor) */
.dp-single-actions-box
  .woocommerce-variation-add-to-cart
  .single_add_to_cart_button:disabled,
.dp-single-actions-box
  .woocommerce-variation-add-to-cart
  .single_add_to_cart_button.disabled {
  background: #e2e8f0 !important;
  color: #94a3b8 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Responsividade para telas de celulares pequenos */
@media (max-width: 480px) {
  .dp-single-actions-box .woocommerce-variation-add-to-cart {
    flex-direction: column !important; /* Empilha apenas em telas muito pequenas */
    align-items: stretch !important;
  }
  .dp-single-actions-box .woocommerce-variation-add-to-cart .quantity {
    width: 100% !important;
  }
}

/* ==========================================================================
   ESTILIZAÇÃO PREMIUM PARA SWATCHES DINÂMICOS, BOTÕES E FRETE (DANIEL PIJAMAS)
   ========================================================================== */

/* --- 1. CORREÇÃO DE LINHAS E EXIBIÇÃO DOS TÍTULOS --- */
.dp-single-actions-box table.variations {
  width: 100% !important;
  border-collapse: collapse !important;
  margin-bottom: 20px !important;
}

/* Força cada linha de variação (Cor/Tamanho) a agir como bloco vertical */
.dp-single-actions-box table.variations tr {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 8px !important;
  margin-bottom: 20px !important;
  width: 100% !important;
  border: none !important;
}

.dp-single-actions-box table.variations td {
  display: block !important;
  width: 100% !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
}

/* Força os títulos das labels (Cor, Tamanho) a ficarem destacados acima */
.dp-single-actions-box table.variations td.label label {
  font-family: "Quicksand", sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.9rem !important;
  color: var(--foreground) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  display: block !important;
}

/* --- 2. GRID DOS SWATCHES DINÂMICOS (BOTÕES DE CORES E TAMANHOS) --- */
.dp-swatch-group-container {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-top: 5px !important;
  width: 100% !important;
}

/* Swatch Redondo de Cores */
.dp-custom-color-swatch {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  border: 1px solid var(--border) !important;
  cursor: pointer !important;
  transition: all 0.2s ease-in-out !important;
  position: relative !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06) !important;
}

.dp-custom-color-swatch:hover {
  transform: scale(1.1) !important;
}

/* Estado Ativo/Selecionado da Cor (Garante contraste e borda dupla elegante) */
.dp-custom-color-swatch.active {
  border-color: var(--foreground) !important;
  box-shadow:
    0 0 0 2px var(--background),
    0 0 0 4px var(--primary) !important;
  transform: scale(1.05) !important;
}

/* Swatch de Tamanhos (Botão Quadrado Suave) */
.dp-custom-size-swatch {
  min-width: 46px !important;
  height: 40px !important;
  padding: 0 12px !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius, 8px) !important;
  background-color: var(--background) !important;
  color: var(--foreground) !important;
  font-family: "Quicksand", sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.dp-custom-size-swatch:hover {
  border-color: var(--primary) !important;
  background-color: #fcfcfc !important;
}

/* Estado Ativo/Selecionado do Tamanho */
.dp-custom-size-swatch.active {
  background-color: var(--primary) !important;
  color: var(--primary-foreground) !important;
  border-color: var(--primary) !important;
  font-weight: 700 !important;
}

/* --- 3. LINHA ÚNICA DA SACOLA: QUANTIDADE + ADICIONAR LADO A LADO --- */
.woocommerce-variation-add-to-cart {
  display: flex !important;
  flex-direction: row !important; /* Lado a lado definitivo */
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  margin-top: 25px !important;
  margin-bottom: 25px !important;
}

/* Caixinha de Quantidade Estilo Pill Slim */
.woocommerce-variation-add-to-cart .quantity {
  height: 50px !important;
  width: 100px !important;
  min-width: 100px !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-pill) !important;
  background: var(--muted) !important; /* Tom cinza suave */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

.woocommerce-variation-add-to-cart .quantity .qty {
  font-family: "Quicksand", sans-serif !important;
  font-weight: 700 !important;
  font-size: 1.1rem !important;
  color: var(--foreground) !important;
  background: transparent !important;
  border: none !important;
  text-align: center !important;
  width: 100% !important;
  outline: none !important;
}

.woocommerce-variation-add-to-cart .quantity .qty::-webkit-outer-spin-button,
.woocommerce-variation-add-to-cart .quantity .qty::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

/* Botão Adicionar à Sacola Premium */
.woocommerce-variation-add-to-cart .single_add_to_cart_button {
  flex: 1 !important; /* Ocupa todo o resto da linha */
  height: 50px !important;
  background: var(--primary) !important; /* Azul/Lilás da Daniel Pijamas */
  color: var(--primary-foreground) !important;
  border-radius: var(--radius-pill) !important;
  font-family: "Quicksand", sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  border: none !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  transition: all 0.2s ease !important;
}

.woocommerce-variation-add-to-cart
  .single_add_to_cart_button:not(:disabled):not(.disabled):hover {
  background: var(--news) !important;
  transform: translateY(-1px) !important;
}

/* Botão Desativado (Aguardando Seleção) */
.woocommerce-variation-add-to-cart .single_add_to_cart_button:disabled,
.woocommerce-variation-add-to-cart .single_add_to_cart_button.disabled {
  background: #e2e8f0 !important;
  color: #94a3b8 !important;
  cursor: not-allowed !important;
  transform: none !important;
}

/* --- 4. SEÇÃO DO NOVO SIMULADOR DE FRETE EM CARTÃO CLEAN --- */
.dp-frete-simulator-box {
  background: oklch(0.96 0.04 195.77) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  padding: 20px !important;
  margin-top: 30px !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.01) !important;
}

.dp-frete-label {
  font-family: "Quicksand", sans-serif !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  color: var(--foreground) !important;
  margin-bottom: 12px !important;
  display: block !important;
}

/* Input e Botão Alinhados na mesma linha horizontal */
.dp-frete-input-group {
  display: flex !important;
  flex-direction: row !important;
  gap: 10px !important;
  width: 100% !important;
}

.dp-frete-input-group input {
  flex: 1 !important;
  height: 46px !important;
  border-radius: var(--radius-pill) !important;
  border: 1px solid var(--border) !important;
  padding: 0 18px !important;
  font-family: "Quicksand", sans-serif !important;
  font-size: 0.95rem !important;
  background-color: var(--muted) !important;
  color: var(--foreground) !important;
  outline: none !important;
  box-sizing: border-box !important;
}

.dp-frete-input-group input:focus {
  border-color: var(--primary) !important;
  background-color: var(--background) !important;
}

/* Botão "Calcular" do simulador */
.dp-frete-input-group button {
  height: 46px !important;
  padding: 0 24px !important;
  background: var(
    --foreground
  ) !important; /* Tom escuro contrastante e chique */
  color: #ffffff !important;
  border-radius: var(--radius-pill) !important;
  font-family: "Quicksand", sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  text-transform: uppercase !important;
  border: none !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease !important;
}

.dp-frete-input-group button:hover {
  background: var(--primary) !important;
}

.dp-frete-result-msg {
  margin-top: 10px !important;
  font-family: "Quicksand", sans-serif !important;
  font-size: 0.9rem !important;
}

/* --- RESPONSIVIDADE MOBILE --- */
@media (max-width: 480px) {
  .woocommerce-variation-add-to-cart {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .woocommerce-variation-add-to-cart .quantity {
    width: 100% !important;
  }
  .dp-frete-input-group {
    flex-direction: column !important;
  }
  .dp-frete-input-group button {
    width: 100% !important;
  }
}

/* ==========================================================================
   DESIGN COMPONENTES SINGLE PRODUCT (FORÇAR TÍTULOS E ALINHAMENTO LADO A LADO)
   ========================================================================== */

/* Remove layouts de tabela nativos que ocultam elementos */
.dp-single-actions-box table.variations,
.dp-single-actions-box table.variations tbody,
.dp-single-actions-box table.variations tr,
.dp-single-actions-box table.variations td {
  display: block !important;
  width: 100% !important;
  border: none !important;
  background: transparent !important;
}

/* Oculta a label velha vazia do WC */
.dp-single-actions-box table.variations td.label {
  display: none !important;
}

/* Bloco mestre criado pelo JS */
.dp-swatch-master-block {
  display: block !important;
  width: 100% !important;
  margin-bottom: 20px !important;
}

/* Estilização do Título Injetado (COR e TAMANHO) */
.dp-swatch-title-label {
  font-family: "Quicksand", sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  color: var(--foreground) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  margin-bottom: 8px !important;
  display: block !important;
}

/* Container das bolinhas e quadradinhos */
.dp-swatch-group-container {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

/* Swatches de Cores */
.dp-custom-color-swatch {
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  border: 1px solid var(--border) !important;
  cursor: pointer !important;
  transition: transform 0.2s ease !important;
}
.dp-custom-color-swatch.active {
  border-color: var(--foreground) !important;
  box-shadow:
    0 0 0 2px var(--background),
    0 0 0 4px var(--primary) !important;
}

/* Swatches de Tamanho */
.dp-custom-size-swatch {
  min-width: 44px !important;
  height: 38px !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  background: var(--background) !important;
  font-family: "Quicksand", sans-serif !important;
  font-weight: 600 !important;
  cursor: pointer !important;
}
.dp-custom-size-swatch.active {
  background: var(--primary) !important;
  color: #fff !important;
  border-color: var(--primary) !important;
}

/* --- FORÇAR DEFINITIVAMENTE LADO A LADO --- */
.dp-single-actions-box
  .single_variation_wrap
  .woocommerce-variation-add-to-cart,
.dp-single-actions-box .woocommerce-variation-add-to-cart {
  display: flex !important;
  flex-direction: row !important; /* Coloca lado a lado no desktop */
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  margin-top: 25px !important;
}

/* Força a caixinha de quantidade a manter o tamanho slim */
.dp-single-actions-box .woocommerce-variation-add-to-cart .quantity {
  height: 50px !important;
  width: 95px !important;
  min-width: 95px !important;
  max-width: 95px !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-pill) !important;
  background: var(--muted) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

.dp-single-actions-box .woocommerce-variation-add-to-cart .quantity .qty {
  width: 100% !important;
  border: none !important;
  background: transparent !important;
  text-align: center !important;
  font-family: "Quicksand", sans-serif !important;
  font-weight: 700 !important;
  font-size: 1.1rem !important;
  color: var(--foreground) !important;
}

/* Força o Botão de Adicionar a expandir na mesma linha */
.dp-single-actions-box
  .woocommerce-variation-add-to-cart
  .single_add_to_cart_button {
  flex: 1 !important; /* Ganha o resto do espaço lateral */
  height: 50px !important;
  background: var(--primary) !important;
  color: var(--primary-foreground) !important;
  border-radius: var(--radius-pill) !important;
  font-family: "Quicksand", sans-serif !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  border: none !important;
  cursor: pointer !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Responsividade Mobile Extremo */
@media (max-width: 480px) {
  .dp-single-actions-box .woocommerce-variation-add-to-cart {
    flex-direction: column !important; /* Empilha só em telas muito pequenas */
    align-items: stretch !important;
  }
  .dp-single-actions-box .woocommerce-variation-add-to-cart .quantity {
    width: 100% !important;
    max-width: 100% !important;
  }
}
/* ==========================================================================
   FOLHA DE ESTILO PREMIUM COMPONENTE DE VARIAÇÕES (DANIEL PIJAMAS)
   ========================================================================== */

/* Força a quebra total de tabelas para o modelo Modern Flex */
.dp-single-actions-box table.variations,
.dp-single-actions-box table.variations tbody,
.dp-single-actions-box table.variations tr,
.dp-single-actions-box table.variations td {
  display: block !important;
  width: 100% !important;
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
}

/* Oculta de vez a coluna vazia da esquerda */
.dp-single-actions-box table.variations td.label {
  display: none !important;
}

/* Bloco mestre do Swatch */
.dp-swatch-master-block {
  display: block !important;
  width: 100% !important;
  margin-bottom: 20px !important;
}

/* Títulos visíveis e elegantes acima das variações */
.dp-swatch-title-label {
  font-family: "Quicksand", sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  color: var(--foreground) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  margin-bottom: 8px !important;
}

.dp-swatch-group-container {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

/* Swatch Circular de Cor */
.dp-custom-color-swatch {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  border: 1px solid var(--border) !important;
  cursor: pointer !important;
  transition: transform 0.2s ease !important;
}
.dp-custom-color-swatch.active {
  border-color: var(--foreground) !important;
  box-shadow:
    0 0 0 2px var(--background),
    0 0 0 4px var(--primary) !important;
}

/* Swatch de Tamanho */
.dp-custom-size-swatch {
  min-width: 44px !important;
  height: 38px !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  background: var(--background) !important;
  color: var(--foreground) !important;
  font-family: "Quicksand", sans-serif !important;
  font-weight: 600 !important;
  cursor: pointer !important;
}
.dp-custom-size-swatch.active {
  background: var(--primary) !important;
  color: #ffffff !important;
  border-color: var(--primary) !important;
}

/* --- FORÇAR QUANTIDADE E ADICIONAR LADO A LADO --- */
.dp-single-actions-box .woocommerce-variation-add-to-cart,
.dp-single-actions-box form.cart .variations_button {
  display: flex !important;
  flex-direction: row !important; /* Lado a lado definitivo */
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  margin-top: 25px !important;
  clear: both !important;
}

/* Container de quantidade ajustado */
.dp-single-actions-box .woocommerce-variation-add-to-cart .quantity {
  height: 50px !important;
  width: 95px !important;
  min-width: 95px !important;
  max-width: 95px !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-pill) !important;
  background: var(--muted) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
}

.dp-single-actions-box .woocommerce-variation-add-to-cart .quantity .qty {
  width: 100% !important;
  border: none !important;
  background: transparent !important;
  text-align: center !important;
  font-family: "Quicksand", sans-serif !important;
  font-weight: 700 !important;
  font-size: 1.1rem !important;
  color: var(--foreground) !important;
}

/* Botão adicionar preenchendo a linha */
.dp-single-actions-box
  .woocommerce-variation-add-to-cart
  .single_add_to_cart_button {
  flex: 1 !important;
  height: 50px !important;
  background: var(--primary) !important;
  color: var(--primary-foreground) !important;
  border-radius: var(--radius-pill) !important;
  font-family: "Quicksand", sans-serif !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  border: none !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Responsividade Mobile */
@media (max-width: 480px) {
  .dp-single-actions-box .woocommerce-variation-add-to-cart {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .dp-single-actions-box .woocommerce-variation-add-to-cart .quantity {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ==========================================================================
   ALINHAMENTO PREMIUM: FORMULÁRIO DE FRETE CLAUDIO SANCHES
   ========================================================================== */

/* Garante o esqueleto em bloco para tabelas antigas */
.dp-single-actions-box table.variations,
.dp-single-actions-box table.variations tr,
.dp-single-actions-box table.variations td {
  display: block !important;
  width: 100% !important;
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
}
.dp-single-actions-box table.variations td.label {
  display: none !important;
}

/* Swatches e Títulos */
.dp-swatch-master-block {
  display: block !important;
  width: 100% !important;
  margin-bottom: 20px !important;
}
.dp-swatch-title-label {
  font-family: "Quicksand", sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  color: var(--foreground) !important;
  text-transform: uppercase;
  margin-bottom: 8px !important;
}
.dp-swatch-group-container {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}
.dp-custom-color-swatch {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  border: 1px solid var(--border) !important;
  cursor: pointer !important;
}
.dp-custom-color-swatch.active {
  border-color: var(--foreground) !important;
  box-shadow:
    0 0 0 2px var(--background),
    0 0 0 4px var(--primary) !important;
}
.dp-custom-size-swatch {
  min-width: 44px !important;
  height: 38px !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  background: var(--background) !important;
  font-family: "Quicksand", sans-serif !important;
  font-weight: 600 !important;
  cursor: pointer !important;
}
.dp-custom-size-swatch.active {
  background: var(--primary) !important;
  color: #fff !important;
  border-color: var(--primary) !important;
}

/* --- BOTÕES LADO A LADO --- */
.dp-single-actions-box .woocommerce-variation-add-to-cart,
.dp-single-actions-box form.cart .variations_button {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  width: 249px !important;
  margin-top: 2px !important;
  margin-bottom: 25px !important;
}
.dp-single-actions-box .woocommerce-variation-add-to-cart .quantity {
  height: 50px !important;
  width: 95px !important;
  min-width: 95px !important;
  max-width: 95px !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-pill) !important;
  background: var(--muted) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.dp-single-actions-box .woocommerce-variation-add-to-cart .quantity .qty {
  width: 100% !important;
  border: none !important;
  background: transparent !important;
  text-align: center !important;
  font-family: "Quicksand", sans-serif !important;
  font-weight: 700 !important;
  font-size: 1.1rem !important;
}
.dp-single-actions-box
  .woocommerce-variation-add-to-cart
  .single_add_to_cart_button {
  flex: 1 !important;
  height: 50px !important;
  background: var(--primary) !important;
  color: var(--primary-foreground) !important;
  border-radius: var(--radius-pill) !important;
  font-family: "Quicksand", sans-serif !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  border: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* --- DESIGN DO SIMULADOR CORREIOS OFICIAL --- */
.woocommerce-shipping-calculator,
.shipping-calculator-form,
#correios-shipping-simulator {
  background: var(--background) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius, 12px) !important;
  padding: 20px !important;
  margin-top: 25px !important;
  display: block !important;
}

/* Título interno do bloco de frete */
.woocommerce-shipping-calculator h2,
.woocommerce-shipping-calculator p.dp-title {
  font-family: "Quicksand", sans-serif !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  color: var(--foreground) !important;
  margin-bottom: 12px !important;
}

/* Coloca o input e o botão nativos na mesma linha horizontal */
.shipping-calculator-form p.form-row,
.woocommerce-shipping-calculator .form-row {
  display: flex !important;
  flex-direction: row !important;
  gap: 10px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Campo de entrada de texto (Input do CEP) */
.shipping-calculator-form input[type="text"],
#calc_shipping_postcode {
  flex: 1 !important;
  height: 46px !important;
  border-radius: var(--radius-pill) !important;
  border: 1px solid var(--border) !important;
  padding: 0 18px !important;
  font-family: "Quicksand", sans-serif !important;
  font-size: 0.95rem !important;
  background-color: var(--muted) !important;
  color: var(--foreground) !important;
  outline: none !important;
}

/* Botão de envio/cálculo do plugin Claudio Sanches */
.shipping-calculator-form button[type="submit"],
.shipping-calculator-form button[name="calc_shipping"] {
  height: 46px !important;
  padding: 0 24px !important;
  background: var(--foreground) !important;
  color: #ffffff !important;
  border-radius: var(--radius-pill) !important;
  font-family: "Quicksand", sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  text-transform: uppercase !important;
  border: none !important;
  cursor: pointer !important;
  white-space: nowrap !important;
}

.shipping-calculator-form button:hover {
  background: var(--primary) !important;
}

/* Resultados das taxas (PAC / SEDEX) */
.woocommerce-shipping-methods,
.shipping-calculator-products {
  margin-top: 15px !important;
  list-style: none !important;
  padding: 0 !important;
  font-family: "Quicksand", sans-serif !important;
}

/* Ajuste Mobile */
@media (max-width: 480px) {
  .dp-single-actions-box .woocommerce-variation-add-to-cart {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .dp-single-actions-box .woocommerce-variation-add-to-cart .quantity {
    width: 100% !important;
    max-width: 100% !important;
  }
  .shipping-calculator-form p.form-row {
    flex-direction: column !important;
  }
  .shipping-calculator-form button {
    width: 100% !important;
  }
}

/* ==========================================================================
   PÁGINA DO CARRINHO (WOOCOMMERCE SHOPPING CART PAGE)
   ========================================================================== */

/* Estrutura Principal da Tabela */
.woocommerce-cart-form {
  margin-bottom: 40px;
}

.shop_table.cart {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 12px !important; /* Cria o efeito de linhas separadas/cards */
  font-family: "Quicksand", sans-serif !important;
}

/* Cabeçalho da Tabela */
.shop_table.cart th {
  font-family: var(--font-title) !important;
  color: var(--foreground) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.05em !important;
  padding: 15px !important;
  border-bottom: 2px solid var(--border) !important;
  text-align: left;
}

/* Linhas dos Produtos */
.shop_table.cart tr.cart_item {
  background-color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03) !important;
  border-radius: var(--radius) !important;
  transition: transform 0.2s ease;
}

.shop_table.cart td {
  padding: 20px 15px !important;
  vertical-align: middle !important;
  color: var(--foreground) !important;
  border: none !important;
}

/* Arredondamento simulado nas pontas da linha devido ao border-spacing */
.shop_table.cart td:first-child {
  border-top-left-radius: var(--radius) !important;
  border-bottom-left-radius: var(--radius) !important;
}
.shop_table.cart td:last-child {
  border-top-right-radius: var(--radius) !important;
  border-bottom-right-radius: var(--radius) !important;
}

/* Imagem do Produto */
.shop_table.cart td.product-thumbnail img {
  width: 70px !important;
  height: auto !important;
  border-radius: calc(var(--radius) - 4px) !important;
  object-fit: cover !important;
}

/* Nome do Produto */
.shop_table.cart td.product-name a {
  font-weight: 700 !important;
  color: var(--foreground) !important;
  text-decoration: none !important;
  font-size: 1rem !important;
}
.shop_table.cart td.product-name a:hover {
  color: var(--primary) !important;
}

/* Botão de Remover Item (X) */
.shop_table.cart td.product-remove a.remove {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background-color: var(--muted) !important;
  color: var(--muted-foreground) !important;
  font-size: 1.1rem !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}
.shop_table.cart td.product-remove a.remove:hover {
  background-color: #ff4d4d !important;
  color: #ffffff !important;
}

/* Input de Quantidade */
.shop_table.cart .quantity input.qty {
  width: 60px !important;
  height: 40px !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-pill) !important;
  text-align: center !important;
  font-weight: 700 !important;
  color: var(--foreground) !important;
  background: var(--background) !important;
  outline: none !important;
}

/* Área do Cupom e Atualização */
.shop_table.cart td.actions {
  background: transparent !important;
  padding: 20px 0 !important;
}

.shop_table.cart td.actions .coupon {
  display: inline-flex !important;
  gap: 10px !important;
}

.shop_table.cart td.actions .coupon input#coupon_code {
  height: 46px !important;
  padding: 0 20px !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-pill) !important;
  font-family: "Quicksand", sans-serif !important;
  outline: none !important;
  width: 180px !important;
}

/* Forçar estilo nos botões da tabela (Aplicar Cupom / Atualizar Carrinho) */
.shop_table.cart td.actions button.button {
  height: 46px !important;
  padding: 0 24px !important;
  font-family: "Quicksand", sans-serif !important;
  font-weight: 700 !important;
  border-radius: var(--radius-pill) !important;
  text-transform: uppercase !important;
  font-size: 0.8rem !important;
  letter-spacing: 0.05em !important;
  cursor: pointer !important;
  border: none !important;
  transition: all 0.2s ease !important;
}

/* Botão "Aplicar Cupom" */
.shop_table.cart td.actions .coupon button[name="apply_coupon"] {
  background-color: var(--muted) !important;
  color: var(--foreground) !important;
}
.shop_table.cart td.actions .coupon button[name="apply_coupon"]:hover {
  background-color: var(--secondary) !important;
}

/* Botão "Atualizar Carrinho" */
.shop_table.cart td.actions button[name="update_cart"] {
  background-color: var(--foreground) !important;
  color: #ffffff !important;
  float: right !important;
}
.shop_table.cart td.actions button[name="update_cart"]:hover {
  background-color: var(--primary) !important;
}

/* ==========================================================================
   TOTAIS DO CARRINHO (CART COLLATERALS)
   ========================================================================== */
.cart-collaterals {
  margin-top: 40px !important;
  display: flex !important;
  justify-content: space-between !important;
  font-family: "Quicksand", sans-serif !important;
}

.cart-collaterals .cart_totals {
  width: 100% !important;
  max-width: 480px !important;
  background-color: #ffffff !important;
  padding: 30px !important;
  border-radius: var(--radius) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
}

.cart-collaterals h2 {
  font-family: var(--font-body) !important;
  font-size: 1.4rem !important;
  color: var(--foreground) !important;
  margin-bottom: 20px !important;
  font-weight: 700 !important;
}

.cart-collaterals .shop_table_totals {
  width: 100% !important;
  border-collapse: collapse !important;
}

.cart-collaterals .shop_table_totals tr td,
.cart-collaterals .shop_table_totals tr th {
  padding: 14px 0 !important;
  border-bottom: 1px solid var(--border) !important;
  text-align: left !important;
  color: var(--foreground) !important;
}

.cart-collaterals .shop_table_totals tr th {
  font-weight: 600 !important;
  width: 35% !important;
}

.cart-collaterals .shop_table_totals tr.order-total th,
.cart-collaterals .shop_table_totals tr.order-total td {
  border-bottom: none !important;
  font-size: 1.2rem !important;
  font-weight: 700 !important;
}

/* Botão Finalizar Compra Principal */
.cart-collaterals .wc-proceed-to-checkout a.checkout-button {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  padding: 16px 0 !important;
  background: var(--foreground) !important;
  color: #ffffff !important;
  border-radius: var(--radius-pill) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  text-decoration: none !important;
  margin-top: 20px !important;
  transition: background 0.2s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

.cart-collaterals .wc-proceed-to-checkout a.checkout-button:hover {
  background: var(--primary) !important;
}

/* Responsividade Mobile */
@media (max-width: 768px) {
  .shop_table.cart,
  .shop_table.cart tbody,
  .shop_table.cart tr,
  .shop_table.cart td {
    display: block !important;
    width: 100% !important;
  }
  .shop_table.cart thead {
    display: none !important; /* Esconde cabeçalho em telas pequenas */
  }
  .shop_table.cart tr.cart_item {
    margin-bottom: 15px !important;
    padding: 15px !important;
    position: relative !important;
  }
  .shop_table.cart td {
    padding: 8px 0 !important;
    text-align: right !important;
  }
  .shop_table.cart td::before {
    content: attr(data-title) ": ";
    float: left !important;
    font-weight: 700 !important;
    color: var(--muted-foreground) !important;
  }
  .shop_table.cart td.product-remove {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    z-index: 2;
  }
  .shop_table.cart td.product-remove::before {
    content: "" !important;
  }
  .shop_table.cart td.product-thumbnail {
    text-align: center !important;
  }
  .shop_table.cart td.product-thumbnail::before {
    content: "" !important;
  }
  .shop_table.cart td.actions .coupon {
    flex-direction: column !important;
    width: 100% !important;
  }
  .shop_table.cart td.actions .coupon input#coupon_code {
    width: 100% !important;
  }
  .shop_table.cart td.actions button[name="update_cart"] {
    width: 100% !important;
    margin-top: 12px !important;
  }
}

/* Garante o posicionamento correto da lente de zoom do WooCommerce */
.woocommerce-product-gallery {
  position: relative;
}

.woocommerce-product-gallery .woocommerce-product-gallery__trigger {
  position: absolute;
  top: 15px;
  right: 15px;
  z-index: 99;
  background-color: #fff;
  border-radius: 50%;
  width: 35px;
  height: 35px;
  text-align: center;
  line-height: 35px;
  letter-spacing: 0;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.zoomImg {
  background-color: #fff; /* Evita transparências feias no fundo do pijama ao dar zoom */
}

/* ==========================================================================
   ESTRUTURAÇÃO DA GALERIA DE SLIDES E LENTE DE ZOOM
   ========================================================================== */

/* Mantém o contêiner principal da foto isolado */
.woocommerce-product-gallery {
  position: relative;
  overflow: hidden;
  width: 100%;
}

/* Esconde as imagens extras da lista antes do Flexslider carregar (evita pulos na tela) */
.woocommerce-product-gallery .slides {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

/* Força o contêiner de zoom a respeitar as bordas arredondadas da sua foto */
.woocommerce-product-gallery__image {
  position: relative;
  overflow: hidden;
  cursor: zoom-in;
  border-radius: 12px; /* Mantém o padrão visual do seu site */
}

/* Lente de aproximação gerada dinamicamente pelo plugin de Zoom */
.zoomImg {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.25s ease-in-out;
  background-color: #ffffff; /* Evita que o fundo do contêiner apareça vazio */
  z-index: 999;
}

.woocommerce-product-gallery__image:hover .zoomImg {
  opacity: 1;
}

/* Alinhamento harmônico das miniaturas abaixo do slide */
.flex-control-thumbs {
  display: flex;
  gap: 10px;
  margin-top: 15px;
  padding: 0;
  list-style: none;
}

.flex-control-thumbs li {
  width: 25%; /* Divide o espaço proporcionalmente para até 4 miniaturas */
  cursor: pointer;
}

.flex-control-thumbs img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  border: 2px solid transparent;
  transition: all 0.2s ease;
  opacity: 0.6;
}

/* Destaca a miniatura da foto que está ativa no slide */
.flex-control-thumbs img.flex-active {
  border-color: #00a8ff; /* Cor azul padrão do seu tema */
  opacity: 1;
}

/* ==========================================================================
   DASHBOARD MINHA CONTA ALINHADO - DANIEL PIJAMAS
   ========================================================================== */

/* Forçar o alinhamento em duas colunas idênticas no topo e lado a lado */
body.woocommerce-account .woocommerce {
  /* display: grid !important;
  grid-template-columns: 280px 1fr !important;
  grid-auto-flow: column;*/
  gap: 30px !important;
  max-width: 1200px !important;
  margin: 40px auto !important;
  padding: 0 20px !important;
  align-items: stretch !important; /* Força os dois blocos a terem exatamente a mesma altura */
}

/* Remover interferências antigas de float */
body.woocommerce-account .woocommerce-MyAccount-navigation,
body.woocommerce-account .woocommerce-MyAccount-content {
  float: none !important;
  width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* Menu Lateral Corrigido e Alinhado */
body.woocommerce-account .woocommerce-MyAccount-navigation {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 16px !important;
  padding: 24px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important; /* Mantém os botões organizados no topo */
  margin-bottom: 10px !important;
}

/* Lista de Links sem esticar */
body.woocommerce-account .woocommerce-MyAccount-navigation ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  height: auto !important;
}

body.woocommerce-account .woocommerce-MyAccount-navigation li {
  margin: 0px 20px 0px 0px !important;
  padding: 0 !important;
  list-style-type: none !important;
  width: 220px !important;
}

/* Estilização dos Links */
body.woocommerce-account .woocommerce-MyAccount-navigation li a {
  display: flex !important;
  align-items: center !important;
  padding: 14px 18px !important;
  color: #475569 !important;
  font-family: "Quicksand", sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  border-radius: 14px !important;
  transition: all 0.25s ease !important;
  background: #f8fafc !important;
  border: 1px solid #f1f5f9 !important;
}

/* Efeitos de Interação */
body.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
  background: #fff5f7 !important;
  color: var(--accent) !important;
  border-color: #fce7f3 !important;
  transform: translateX(4px);
}

body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
  background: var(--accent) !important;
  color: #ffffff !important;
  border-color: var(--accent) !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 12px rgba(39, 168, 219, 0.25) !important;
  width: 220px !important;
}

body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a i {
  color: #ffffff !important;
}

body.woocommerce-account .woocommerce-MyAccount-navigation li a i {
  font-size: 1.1rem !important;
  color: #64748b !important;
}

/* Área de Conteúdo da Direita Alinhada */
body.woocommerce-account .woocommerce-MyAccount-content {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 16px !important;
  padding: 20px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02) !important;
  margin-bottom: 10px !important;
}

/* Ajustes de Responsividade */
@media (max-width: 900px) {
  body.woocommerce-account .woocommerce {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    align-items: start !important;
  }

  body.woocommerce-account .woocommerce-MyAccount-navigation ul {
    flex-direction: row !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    padding-bottom: 8px !important;
  }

  body.woocommerce-account .woocommerce-MyAccount-navigation li a {
    padding: 10px 16px !important;
    font-size: 0.85rem !important;
  }
}

.woocommerce-account .woocommerce-MyAccount-content mark {
  color: var(--accent) !important;
}

/* ==========================================================================
   CORREÇÃO DE VARIAÇÕES E SIMULADOR DE FRETE - DANIEL PIJAMAS
   ========================================================================== */
/* ==========================================================================
   CORREÇÃO DEFINITIVA: TÍTULOS DE SWATCHES E SIMULADOR DE FRETE
   ========================================================================== */

/* 1. FORÇAR A EXIBIÇÃO DOS TÍTULOS (ESTRUTURA COMPATÍVEL COM PLUGINS) */
.single-product div.product .variations th,
.single-product div.product .variations td.label,
.single-product div.product .variations label,
.single-product div.product .variation-block-title,
.single-product div.product .woo-selected-variation-item-name,
.cfvsw-label-attributes {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  font-family: "Quicksand", sans-serif !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  font-size: 0.95rem !important;
  margin-bottom: 8px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  float: none !important;
  text-align: left !important;
}

/* Ajusta as linhas das variações para que os blocos fiquem empilhados corretamente (Título em cima, Botão embaixo) */
.single-product div.product table.variations tr,
.single-product div.product .variations .cfvsw-attribute-wrapper {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  margin-bottom: 20px !important;
  width: 100% !important;
}

.single-product div.product table.variations td {
  display: block !important;
  width: 100% !important;
  padding: 0 !important;
}

/* 2. ENVELOPE DO SIMULADOR DE FRETE (MAIS ESPAÇAMENTO E DESTAQUE) */
.dp-frete-simulator-box {
  display: block !important;
  clear: both !important;
  margin-top: 35px !important; /* Cria um distanciamento claro dos botões acima */
  margin-bottom: 25px !important;
  padding: 22px !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.01) !important;
}

.dp-frete-label {
  display: block !important;
  font-family: "Quicksand", sans-serif !important;
  font-weight: 700 !important;
  color: #475569 !important;
  font-size: 0.95rem !important;
  margin-bottom: 12px !important;
  text-align: left !important;
}

/* Alinhamento do grupo do Input + Botão */
.dp-frete-input-group {
  display: flex !important;
  gap: 12px !important;
  max-width: 380px !important;
  width: 100% !important;
}

.dp-frete-input-group input {
  flex: 1 !important;
  padding: 14px 18px !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 30px !important; /* Formato Pílula */
  font-family: "Quicksand", sans-serif !important;
  font-size: 0.95rem !important;
  outline: none !important;
  background-color: #ffffff !important;
  box-sizing: border-box !important;
}

.dp-frete-input-group input:focus {
  border-color: #27a8db !important;
  box-shadow: 0 0 0 3px rgba(39, 168, 219, 0.1) !important;
}

.dp-frete-input-group button {
  background-color: #27a8db !important; /* Azul Daniel Pijamas */
  color: #ffffff !important;
  font-family: "Quicksand", sans-serif !important;
  font-weight: 700 !important;
  padding: 0 28px !important;
  border: none !important;
  border-radius: 30px !important;
  cursor: pointer !important;
  font-size: 0.95rem !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
}

.dp-frete-input-group button:hover {
  background-color: #1d92c2 !important;
}

.dp-frete-result-msg {
  margin-top: 14px !important;
  font-family: "Quicksand", sans-serif !important;
  font-size: 0.9rem !important;
  color: #334155 !important;
  text-align: left !important;
}

/* ==========================================================================
   DASATIVAR - LAYOUT FRETE MELHOR ENVIO
   ========================================================================== */
.containerCalculator {
  display: none !important;
}
/* Remove a simulação de frete duplicada e antiga da página do produto */
.summary .shipping-calculator-form,
.summary div:has(> p:contains("Simulação de frete")) {
  display: none !important;
}
/* ==========================================================================
   PÁGINA INSTITUCIONAL — QUEM SOMOS (DANIEL PIJAMAS)
   ========================================================================== */
.page-about-us {
  overflow: hidden;
  padding-bottom: 40px;
}

/* Hero Header */
.about-hero {
  position: relative;
  padding: 100px 0 60px 0;
  text-align: center;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
}

.about-sub {
  font-family: "Quicksand", sans-serif;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #475569;
  margin-bottom: 10px;
  font-weight: 700;
}

.about-main-title {
  font-family: "Bodoni Moda", serif;
  font-size: 3rem;
  color: #1e293b;
  max-width: 800px;
  margin: 0 auto 20px auto;
  line-height: 1.2;
}

.icone-sono-wrapper {
  position: relative;
  display: inline-block;
  width: 80px;
  height: 80px;
  margin-top: 15px;
}

/* Secção Manifesto */
.about-manifesto {
  padding: 60px 0;
  background: #ffffff;
}

.about-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}

@media (min-width: 1024px) {
  .about-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.about-section-title {
  font-family: "Bodoni Moda", serif;
  font-size: 2.4rem;
  color: #27a8db;
  margin-bottom: 20px;
}
.about-section-title.text-center {
  text-align: center;
}

.about-content p {
  font-family: "Quicksand", sans-serif;
  font-size: 1.1rem;
  color: #475569;
  line-height: 1.7;
  margin-bottom: 20px;
}

.about-image-frame {
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(60, 100, 200, 0.08);
  border: 1px solid #eef5f8;
}

.about-featured-img {
  width: 100%;
  height: 450px;
  object-fit: cover;
}

/* Secção de Pilares */
.about-pillars {
  padding: 80px 0;
  background: transparent;
}

.pillars-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  margin-top: 40px;
}

@media (min-width: 768px) {
  .pillars-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.pillar-card {
  background: #ffffff;
  padding: 35px 25px;
  border-radius: 24px;
  text-align: center;
  border: 1px solid #eef5f8;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.01);
  transition: transform 0.3s ease;
}

.pillar-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(39, 168, 219, 0.08);
}

.pillar-icon {
  font-size: 3rem;
  margin-bottom: 20px;
  display: inline-block;
}

.pillar-card h3 {
  font-family: "Quicksand", sans-serif;
  font-weight: 700;
  font-size: 1.3rem;
  color: #1e293b;
  margin-bottom: 12px;
}

.pillar-card p {
  font-family: "Quicksand", sans-serif;
  font-size: 0.95rem;
  color: #64748b;
  line-height: 1.6;
}

/* CTA de Fecho */
.about-cta {
  padding: 80px 0;
  text-align: center;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
}

.cta-title {
  font-family: "Bodoni Moda", serif;
  font-size: 2.5rem;
  color: #1e293b;
  margin-bottom: 12px;
}

.cta-text {
  font-family: "Quicksand", sans-serif;
  font-size: 1.2rem;
  color: #64748b;
  margin-bottom: 30px;
}

/* Estrutura da Janela Lateral */
/* Sincroniza a transição lateral com base nas classes nativas do seu tema */
.js-favoritos-side {
  position: fixed !important;
  top: 0 !important;
  right: -100% !important;
  width: 360px !important;
  max-width: 100% !important;
  height: 100% !important;
  background: #fff !important;
  box-shadow: -5px 0 15px rgba(0, 0, 0, 0.05) !important;
  transition: right 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Quando ativo, desliza para dentro da área visível */
.js-favoritos-side.open {
  right: 0 !important;
}

/* Força o comportamento do fundo escurecido nativo (.js-backdrop) */
.js-backdrop.open {
  opacity: 1 !important;
  visibility: visible !important;
}

.page-about-childhood {
  font-family: var(--fonte-base);
  color: var(--cor-texto);
  background-color: #fbfbfe;
  overflow-x: hidden;
}

/* --- HERO SECTION --- */
.about-hero-magical {
  background: linear-gradient(135deg, #6faffd 0%, #e8feff 100%);
  position: relative;
  padding: 100px 0 160px 0;
  overflow: hidden;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.badge-playful {
  background: var(--cor-nuvem);
  color: var(--primary);
  padding: 8px 16px;
  border-radius: 50px;
  font-family: var(--fonte-divertida);
  font-weight: 600;
  font-size: 0.9rem;
  box-shadow: 0 8px 20px rgba(124, 92, 255, 0.1);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
}

.about-title-pop {
  font-family: var(--fonte-divertida);
  font-size: 3.5rem;
  color: var(--cor-titulo);
  line-height: 1.2;
  margin-bottom: 20px;
}

.hero-lead-text {
  font-size: 1.2rem;
  line-height: 1.6;
  margin-bottom: 30px;
  color: #5a5575;
}

.btn-scroll-down {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--fonte-divertida);
  color: #0f91f1;
  text-decoration: none;
  font-weight: 600;
  transition: transform 0.3s ease;
}

.btn-scroll-down:hover {
  transform: translateY(5px);
}

/* Cenário Interativo do Hero */
.hero-interactive-scene {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
}

.moon-glow {
  font-size: 8rem;
  filter: drop-shadow(0 0 25px var(--cor-amarelo-sol));
  animation: float 6s ease-in-out infinite;
}

.sleepy-avatar {
  font-size: 3rem;
  position: absolute;
  top: 20%;
  right: 25%;
  animation: float 4s ease-in-out infinite alternate;
}

/* Divisor Ondulado (Wave) */
.wave-divider {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
}

.wave-divider svg {
  position: relative;
  display: block;
  width: calc(130% + 1.3px);
  height: 80px;
  transform: rotateY(180deg);
}

.wave-divider .shape-fill {
  fill: #fbfbfe;
}

/* --- MANIFESTO SECTION --- */
.about-playful-manifesto {
  padding: 80px 0;
}

.manifesto-flex {
  display: flex;
  align-items: center;
  gap: 60px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.manifesto-flex > div {
  flex: 1;
}

.manifesto-media-wrapper {
  position: relative;
}

/* Moldura Orgânica da Foto */
.frame-playful-cards {
  position: relative;
  margin: 0;
}

.img-main-manifesto {
  width: 100%;
  max-width: 450px;
  height: auto;
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; /* Forma de blob fluído */
  box-shadow: 0 20px 40px rgba(45, 35, 92, 0.15);
  transition: border-radius 0.4s ease;
}

.img-main-manifesto:hover {
  border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
}

.floating-badge {
  position: absolute;
  background: var(--cor-nuvem);
  padding: 10px 20px;
  border-radius: 20px;
  font-family: var(--fonte-divertida);
  font-weight: 600;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
  animation: float 5s ease-in-out infinite;
}

.badge-top {
  top: 10%;
  left: -20px;
  animation-delay: 0.5s;
}
.badge-bottom {
  bottom: 10%;
  right: 20px;
}

.section-title-curved {
  font-family: var(--fonte-divertida);
  font-size: 2.8rem;
  color: var(--cor-titulo);
  margin-bottom: 25px;
}

.story-speech-bubble {
  background: var(--cor-nuvem);
  padding: 35px;
  border-radius: 30px;
  box-shadow: 0 15px 35px rgba(124, 92, 255, 0.05);
  line-height: 1.8;
  font-size: 1.1rem;
  position: relative;
}

/* --- PILARES SECTION --- */
.about-pillars-cloud {
  padding: 100px 0;
  background: radial-gradient(circle at 10% 20%, #f4f7ff 0%, #fbfbfe 100%);
}

.center-header {
  text-align: center;
  margin-bottom: 60px;
}

.section-subtitle {
  font-size: 1.2rem;
  color: #7a7593;
}

.pillars-playful-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.pillar-card-interactive {
  background: var(--cor-nuvem);
  padding: 40px 30px;
  border-radius: 32px;
  text-align: center;
  box-shadow: 0 15px 35px rgba(45, 35, 92, 0.04);
  transition:
    transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    box-shadow 0.4s ease;
  border: 2px solid transparent;
}

.pillar-card-interactive:hover {
  transform: translateY(-12px) scale(1.02);
  box-shadow: 0 25px 50px rgba(124, 92, 255, 0.12);
}

/* Cores subtis por card */
.p-cloud:hover {
  border-color: #a8d4ff;
}
.p-paint:hover {
  border-color: #ffb8f6;
}
.p-heart:hover {
  border-color: #ffb3b3;
}

.card-icon-bounce {
  margin-bottom: 25px;
}

.icon-bubble {
  font-size: 2.5rem;
  background: #f4efff;
  padding: 20px;
  border-radius: 50%;
  display: inline-block;
  width: 80px;
  height: 80px;
  line-height: 40px;
  transition: transform 0.3s ease;
}

.pillar-card-interactive:hover .icon-bubble {
  transform: rotate(15deg) scale(1.1);
}

.pillar-card-interactive h3 {
  font-family: var(--fonte-divertida);
  font-size: 1.5rem;
  color: var(--cor-titulo);
  margin-bottom: 15px;
}

.pillar-card-interactive p {
  line-height: 1.6;
  color: #6b6687;
}

/* --- CTA SECTION (COSMIC) --- */
.about-cta-cosmic {
  margin: 56px auto;
  max-width: 1280px;
  background: linear-gradient(135deg, var(--primary-dark), var(--news));
  border-radius: 28px;
  padding: 48px 24px;
  text-align: center;
  box-shadow: var(--shadow-soft);
  margin-bottom: 85px;
}

.cta-title-pop {
  font-family: var(--fonte-divertida);
  font-size: 3rem;
  margin-bottom: 20px;
  color: #ffffff;
}

.cta-text-play {
  font-size: 1.3rem;
  margin-bottom: 40px;
  color: #fff !important;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* Botão Mágico Premium */
.btn-magical-shop {
  display: inline-block;
  background: linear-gradient(45deg, #ff6b8b, #ff9f43);
  color: white;
  padding: 18px 45px;
  border-radius: 50px;
  font-family: var(--fonte-divertida);
  font-size: 1.2rem;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(255, 107, 139, 0.4);
  transition:
    transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    box-shadow 0.3s ease;
}

.btn-magical-shop:hover {
  transform: scale(1.08);
  box-shadow: 0 15px 40px rgba(255, 107, 139, 0.6);
}

/* --- ANIMAÇÕES LÚDICAS (KEYFRAMES) --- */
@keyframes float {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-15px);
  }
  100% {
    transform: translateY(0px);
  }
}

/* Elementos do Céu Decorativos */
.sky-elements .cloud-floating {
  position: absolute;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 100px;
  animation: float 7s ease-in-out infinite;
}
.sky-elements .c-1 {
  width: 100px;
  height: 40px;
  top: 15%;
  left: 5%;
  animation-delay: 1s;
}
.sky-elements .c-2 {
  width: 150px;
  height: 50px;
  top: 60%;
  right: 5%;
}

.star-twinkle {
  position: absolute;
  font-size: 1.5rem;
  animation: float 3s ease-in-out infinite alternate;
}
.st-1 {
  top: 20%;
  right: 45%;
  animation-delay: 0.5s;
}
.st-2 {
  top: 70%;
  left: 15%;
}

/* --- RESPONSIVIDADE (MOBILE) --- */
@media (max-width: 991px) {
  .hero-grid,
  .manifesto-flex {
    grid-template-columns: 1fr;
    flex-direction: column;
    text-align: center;
  }

  .hero-interactive-scene {
    display: none; /* Esconde o cenário no mobile para focar no texto */
  }

  .pillars-playful-grid {
    grid-template-columns: 1fr;
  }

  .about-title-pop {
    font-size: 2.5rem;
  }
  .section-title-curved {
    font-size: 2rem;
  }
  .cta-title-pop {
    font-size: 2.2rem;
  }

  .manifesto-media-wrapper {
    margin-bottom: 40px;
  }

  .badge-top {
    left: 10px;
  }
  .badge-bottom {
    right: 10px;
  }
}

/* ==========================================================================
   DESATIVAR QUICK VIEW EM UPSELL E PRODUTOS RELACIONADOS (DANIEL PIJAMAS)
   ========================================================================== */

/* Esconde o botão de visualização rápida nas seções específicas */
.up-sells .js-quick-view,
.related .js-quick-view,
.upsells .js-quick-view,
.related-products .js-quick-view {
  display: none !important;
}

/* Ajusta o espaçamento do botão restante (Ver Opções / Comprar) se necessário */
.up-sells .product-actions,
.related .product-actions {
  justify-content: center !important;
  gap: 0 !important;
}

.yith-add-to-wishlist-button-block.yith-add-to-wishlist-button-block--single {
  display: none !important;
}

/* ==========================================================================
   EFEITO GRADIENTE - STRATEX COMPANY (ADRIANA LIMA)
   ========================================================================== */
.footer-copy-brand a,
html body .footer-copy-brand a {
  background: var(--footer-copy) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  display: inline-block !important; /* Essencial para o navegador calcular o tamanho e aplicar o gradiente */
  font-weight: 700 !important; /* Deixa o texto em negrito para o gradiente se destacar mais */
  text-decoration: none !important; /* Remove o sublinhado padrão se houver */
}

/* Efeito opcional: Deixa o gradiente ainda mais vivo quando o usuário passa o mouse por cima */
.footer-copy-brand a:hover,
html body .footer-copy-brand a:hover {
  filter: brightness(1.2) !important;
}

/* ==========================================================================
   OCULTA APENAS O PREÇO DUPLICADO DE BAIXO (MANTÉM O CARD VERDE)
   ========================================================================== */

/* Remove o bloco de preço nativo do resumo que fica solto */
.dp-product-info-column > p.price,
.dp-product-info-column > span.price {
  display: none !important;
}

/* Remove o preço que o WooCommerce injeta dinamicamente dentro do formulário de variações */
.variations_form .single_variation_wrap .woocommerce-variation-price {
  display: none !important;
}

/* Força o preço de dentro do seu card verde a SEMPRE aparecer */
.dp-single-price-box .dp-price-original {
  display: inline-block !important;
}

/* ==========================================================================
   RESPONSIVIDADE GERAL: TABLETS E MOBILE (DANIEL PIJAMAS)
   ========================================================================== */

/* 📱 1. Ajustes Gerais para Tablets (Até 992px) */
@media screen and (max-width: 992px) {
  /* Força as duas colunas do produto (Imagens e Informações) a quebrarem em linha única */
  .dp-product-single-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 30px !important;
    padding: 15px !important;
  }

  .dp-product-gallery-column,
  .dp-product-info-column {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Tabelas do WooCommerce (Carrinho, Detalhes da Conta) responsivas */
  table.shop_table {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
  }
}

/* 📱 2. Otimização do Cabeçalho e Elementos Críticos no Celular (Até 576px) */
@media screen and (max-width: 576px) {
  .newsletter {
    margin: 56px 15px;
  }

  /* CABEÇALHO COMPACTO EM FLEXBOX */
  .site-header .container.header-row {
    display: flex !important;
    flex-direction: row;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 8px 12px !important;
    gap: 0 !important;
  }

  /* Linha 1: Logotipo alinhado na esquerda */
  .site-header .header-row a.logo {
    order: 1 !important;
    flex: 0 0 auto !important;
    max-width: 140px !important;
    margin-bottom: 20px;
  }

  .site-header .header-row a.logo img {
    max-height: 45px !important; /* Encolhe levemente a logo para dar respiro */
    width: auto !important;
  }

  /* Linha 1: Grupo de Ícones alinhado na direita (mesma linha da logo) */
  .site-header .header-row .header-actions {
    order: 2 !important;
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important; /* Espaçamento ideal para cliques no celular */
    margin: 0 !important;
  }

  /* Ajuste de escala dos SVGs do cabeçalho no mobile */
  .site-header .header-row .header-actions svg {
    width: 22px !important;
    height: 22px !important;
  }

  /* Linha 2: Barra de Pesquisa quebra sozinha e toma 100% do espaço abaixo */
  .site-header .header-row form.search {
    order: 3 !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    margin-top: 10px !important;
    margin-bottom: 2px !important;
  }

  .site-header .header-row form.search input[type="search"] {
    height: 42px !important;
    padding: 0 45px 0 15px !important;
    font-size: 15px !important; /* Impede zoom forçado do sistema do iPhone */
    border-radius: var(--radius-pill) !important;
  }

  /* 📄 AJUSTES DA PÁGINA DO PRODUTO NO MOBILE */
  .dp-single-title {
    font-size: 1.75rem !important;
    line-height: 1.25 !important;
    margin-bottom: 10px !important;
  }

  .dp-single-price-box {
    padding: 15px !important;
    margin: 15px 0 !important;
  }

  .dp-single-price-box .dp-price-original {
    font-size: 1.5rem !important;
  }

  /* Força botões de variação (tamanhos) a ficarem organizados sem estourar o limite lateral */
  .variations_form .variations select {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    margin-bottom: 10px !important;
  }

  /* 🚚 SIMULADOR DE FRETE EMPILHADO */
  .dp-frete-input-group {
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
  }

  #dp_calc_shipping_cep {
    width: 100% !important;
    text-align: center !important;
    padding: 12px !important;
    font-size: 16px !important;
  }

  #dp_btn_calc_shipping {
    width: 100% !important;
    justify-content: center !important;
    padding: 12px !important;
  }

  /* Grade de resultados de fretes */
  .dp-shipping-rate-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
  }

  /* 🛡️ Selos de Confiança */
  .dp-trust-badge {
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
    padding: 5px !important;
  }
}

/* ==========================================================================
   CORREÇÃO DO BADGE DO CARRINHO NO MOBILE
   ========================================================================== */
@media screen and (max-width: 576px) {
  /* Garante que o container de ações permita o posicionamento dos filhos */
  .site-header .header-row .header-actions {
    position: relative !important;
  }

  /* Cria a base relativa especificamente no link do carrinho */
  .site-header .header-row .header-actions a.js-cart-toggle {
    position: relative !important;
    display: inline-block !important;
  }

  /* Reposiciona a bolinha amarela colada no ícone da sacola */
  .site-header .header-row .header-actions .action-badge.cart-count {
    position: absolute !important;
    top: -8px !important; /* Ajusta a altura (subir/descer) */
    right: -8px !important; /* Ajusta a lateral (esquerda/direita) */
    margin: 0 !important;
    transform: none !important;
    z-index: 10 !important;

    /* Ajuste fino de tamanho para ficar redondo e perfeito no mobile */
    min-width: 18px !important;
    height: 18px !important;
    font-size: 11px !important;
    line-height: 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* ==========================================================================
   CORREÇÃO CIRÚRGICA: SUBMENU E BLOQUEIO DE VAZAMENTO (TABLET 768PX - 1024PX)
   ========================================================================== */
@media screen and (max-width: 1024px) and (min-width: 768px) {
  /* 1. BLOQUEIO DE VAZAMENTO: Dá um fundo branco sólido para cobrir as estrelas/Z do banner */
  .site-header,
  .main-nav {
    background: #ffffff !important;
    position: relative !important;
    z-index: 99999 !important; /* Fica por cima de qualquer elemento do banner */
  }

  /* 2. FAXINA ESTRUTURAL: Elimina na marra as imagens duplicadas soltas e textos avulsos */
  .main-nav ul li > img,
  .main-menu li > img,
  .main-nav text,
  .mobile-toggle,
  .mobile-nav {
    display: none !important;
    visibility: hidden !important;
  }

  /* 3. ALINHAMENTO DA BARRA PRINCIPAL (IGUAL DESKTOP) */
  .main-nav {
    display: block !important;
    visibility: visible !important;
    border-top: 1px solid #f1f5f9 !important;
    border-bottom: 1px solid #f1f5f9 !important;
  }

  .main-nav ul,
  .main-menu {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 14px !important; /* Ajuste milimétrico para caber na horizontal */
    padding: 12px 0 !important;
    margin: 0 !important;
    list-style: none !important;
  }

  /* Diminui e comprime os textos longos para não quebrar linha */
  .main-nav a,
  .main-menu > li > a {
    font-size: 11px !important;
    letter-spacing: 0px !important;
    white-space: nowrap !important;
    padding: 5px 2px !important;
  }

  /* Oculta os dois links gigantes apenas no iPad para salvar o layout */
  .main-menu li a[href*="checkout"],
  .main-menu li a[href*="finalizar-compra"],
  .main-menu li a[href*="admin"],
  .main-menu li a[href*="administracao"] {
    display: none !important;
  }

  /* 4. COMPORTAMENTO PADRÃO DO BALÃO DO SUBMENU (IGUAL IMAGEM 2) */
  .mega,
  .mega-menu,
  .main-menu li ul,
  .sub-menu {
    position: absolute !important;
    top: 100% !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(5px) !important;
    width: 540px !important; /* Tamanho exato para conter as 3 fotos no tablet */
    background: #ffffff !important;
    border: 2px solid #bde9f9 !important;
    border-radius: 24px !important;
    padding: 14px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
    z-index: 999999 !important;

    /* Começa totalmente escondido */
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;

    /* Força o alinhamento das 3 fotos horizontais */
    flex-direction: row !important;
    gap: 12px !important;
  }

  /* RECONSTRUÇÃO DOS LINKS INTERNOS DO BALÃO */
  .mega-menu li,
  .sub-menu li {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    flex: 1 !important;
    max-width: 33.33% !important;
  }

  /* Força a imagem interna a ficar contida e redonda/arredondada */
  .mega-menu li img,
  .sub-menu li img,
  .mega-thumb {
    width: 80px !important;
    height: 80px !important;
    display: block !important;
    border-radius: 14px !important; /* Curvatura suave idêntica ao seu design */
    object-fit: cover !important;
    margin-bottom: 6px !important;
  }

  /* EXIBIÇÃO NO HOVER (PASSAR O MOUSE OU TOQUE NO LINK MÃE) */
  .mega-wrap:hover .mega,
  .mega-item:hover .mega-menu,
  li:hover > ul,
  li:hover > .sub-menu {
    display: flex !important; /* Transforma o submenu em flexbox na horizontal */
    opacity: 1 !important;
    visibility: visible !important;
  }
}

/* ==========================================================================
   AJUSTE CIRÚRGICO DOS BADGES DE NOTIFICAÇÃO (TABLET 768PX - 1024PX)
   ========================================================================== */
@media screen and (max-width: 1024px) and (min-width: 768px) {
  /* Garante que o botão/link que segura o badge seja a referência de posição */
  .header-actions a,
  .header-actions button,
  .site-header .header-icons a {
    position: relative !important;
    display: inline-flex !important;
    overflow: visible !important; /* Impede que o badge seja cortado */
  }

  /* Força o badge oval a se posicionar perfeitamente no canto superior direito do ícone */
  .action-badge,
  .header-actions .action-badge,
  span.action-badge {
    position: absolute !important;
    top: -8px !important; /* Ajusta a altura da bolinha */
    right: -8px !important; /* Ajusta a lateral da bolinha */
    background: var(
      --accent,
      #ff6900
    ) !important; /* Mantém a cor viva do seu tema */
    color: #ffffff !important;
    border-radius: 999px !important;
    width: 18px !important;
    height: 18px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 999 !important; /* Garante que fique por cima do ícone */
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* ==========================================================================
   ESTILIZAÇÃO COMPLETA DA PÁGINA DO CARRINHO (DANIEL PIJAMAS)
   ========================================================================== */

/* 🛍️ 1. Estrutura Geral da Tabela do Carrinho */
.woocommerce-cart table.shop_table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border: 1px solid var(--secondary) !important;
  border-radius: var(--radius) !important;
  overflow: hidden !important;
  background: #ffffff !important;
  margin-bottom: 30px !important;
}

/* Topo da Tabela (Cabeçalho) */
.woocommerce-cart table.shop_table thead {
  background: var(--bg-light) !important;
}

.woocommerce-cart table.shop_table th {
  font-family: "Fredoka", sans-serif !important;
  color: var(--primary) !important;
  font-weight: 600 !important;
  padding: 15px !important;
  text-transform: uppercase !important;
  font-size: 0.9rem !important;
  border: none !important;
}

/* Linhas e Células de Produtos */
.woocommerce-cart table.shop_table td {
  padding: 20px 15px !important;
  border-bottom: 1px solid var(--muted) !important;
  color: var(--foreground) !important;
  font-family: "Quicksand", sans-serif !important;
  vertical-align: middle !important;
}

.woocommerce-cart table.shop_table tr:last-child td {
  border-bottom: none !important;
}

/* Link do Nome do Pijama */
.woocommerce-cart .product-name a {
  font-family: "Fredoka", sans-serif !important;
  color: var(--foreground) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: color 0.2s !important;
}

.woocommerce-cart .product-name a:hover {
  color: var(--primary) !important;
}

/* Miniatura da Imagem */
.woocommerce-cart .product-thumbnail img {
  border-radius: calc(var(--radius) / 2) !important;
  max-width: 70px !important;
  height: auto !important;
}

/* Botão de Remover Item (X) */
.woocommerce-cart .product-remove a.remove {
  color: #ef4444 !important;
  background: #fee2e2 !important;
  border-radius: 50% !important;
  width: 26px !important;
  height: 26px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
  transition: all 0.2s !important;
}

.woocommerce-cart .product-remove a.remove:hover {
  background: #ef4444 !important;
  color: #ffffff !important;
}

/* 🔢 2. Seção de Quantidade (Input) */
.woocommerce-cart .quantity input.qty {
  width: 60px !important;
  height: 38px !important;
  border-radius: var(--radius-pill) !important;
  border: 1px solid var(--secondary) !important;
  font-family: "Quicksand", sans-serif !important;
  font-weight: 700 !important;
  color: var(--foreground) !important;
  text-align: center !important;
  background: #ffffff !important;
}

/* 🎫 3. Bloco do Cupom de Desconto e Atualização */
.woocommerce-cart .actions {
  background: var(--bg-light) !important;
  padding: 15px !important;
}

.woocommerce-cart .actions .coupon {
  display: inline-flex !important;
  gap: 10px !important;
}

.woocommerce-cart .actions .coupon input#coupon_code {
  height: 42px !important;
  border-radius: var(--radius-pill) !important;
  border: 1px solid var(--secondary) !important;
  padding: 0 15px !important;
  font-family: "Quicksand", sans-serif !important;
  width: 180px !important;
}

/* Botão Aplicar Cupom e Atualizar Carrinho */
.woocommerce-cart .actions .button {
  height: 42px !important;
  border-radius: var(--radius-pill) !important;
  background: #ffffff !important;
  border: 1px solid var(--primary) !important;
  color: var(--primary) !important;
  font-family: "Fredoka", sans-serif !important;
  font-weight: 600 !important;
  padding: 0 20px !important;
  transition: all 0.2s !important;
  cursor: pointer !important;
}

.woocommerce-cart .actions .button:hover {
  background: var(--primary) !important;
  color: #ffffff !important;
}

/* Força o botão de Atualizar Carrinho a respeitar o estado desabilitado do Woo */
.woocommerce-cart .actions .button[name="update_cart"]:disabled {
  opacity: 0.5 !important;
  background: #ffffff !important;
  color: var(--muted-foreground) !important;
  border-color: var(--secondary) !important;
}

/* 📊 4. Bloco de Totais do Carrinho (Cart Collaterals) */
.woocommerce-cart .cart-collaterals {
  display: flex !important;
  justify-content: flex-end !important;
  margin-top: 40px !important;
}

.woocommerce-cart .cart_totals {
  width: 100% !important;
  max-width: 450px !important;
  background: #ffffff !important;
  border: 1px solid var(--secondary) !important;
  border-radius: var(--radius) !important;
  padding: 25px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02) !important;
}

.woocommerce-cart .cart_totals h2 {
  font-family: "Fredoka", sans-serif !important;
  color: var(--foreground) !important;
  font-size: 1.4rem !important;
  margin-bottom: 20px !important;
  border-bottom: 2px solid var(--primary) !important;
  padding-bottom: 8px !important;
}

.woocommerce-cart .cart_totals table {
  width: 100% !important;
  margin-bottom: 20px !important;
}

.woocommerce-cart .cart_totals table td,
.woocommerce-cart .cart_totals table th {
  padding: 12px 0 !important;
  border-top: none !important;
  border-bottom: 1px solid var(--muted) !important;
  background: transparent !important;
}

/* Preço Final em Destaque */
.woocommerce-cart .order-total .amount {
  font-size: 1.4rem !important;
  font-weight: 700 !important;
  color: var(--foreground) !important;
}

/* 🚀 BOTÃO FINALIZAR COMPRA (CHAMATIVO) */
.woocommerce-cart .wc-proceed-to-checkout .checkout-button {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  background: var(--primary) !important;
  color: #ffffff !important;
  font-family: "Fredoka", sans-serif !important;
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  padding: 15px !important;
  border-radius: var(--radius-pill) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  transition: background 0.2s !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1) !important;
}

.woocommerce-cart .wc-proceed-to-checkout .checkout-button:hover {
  background: var(--news) !important; /* Cor de destaque para conversão */
}

/* 📱 5. Responsividade Crítica do Carrinho */
@media screen and (max-width: 768px) {
  .woocommerce-cart table.shop_table thead {
    display: none !important; /* Esconde o cabeçalho no mobile */
  }

  .woocommerce-cart table.shop_table tr {
    display: block !important;
    margin-bottom: 20px !important;
    border: 1px solid var(--secondary) !important;
    border-radius: var(--radius) !important;
    padding: 10px !important;
  }

  .woocommerce-cart table.shop_table td {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 10px 5px !important;
    border-bottom: 1px solid var(--muted) !important;
    text-align: right !important;
  }

  .woocommerce-cart table.shop_table td:last-child {
    border-bottom: none !important;
  }

  /* Adiciona etiquetas dinâmicas simulando o cabeçalho no mobile */
  .woocommerce-cart table.shop_table td::before {
    content: attr(data-title) ": " !important;
    font-family: "Fredoka", sans-serif !important;
    font-weight: 600 !important;
    color: var(--muted-foreground) !important;
    float: left !important;
    text-transform: uppercase !important;
    font-size: 0.8rem !important;
  }

  .woocommerce-cart .actions .coupon {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
  }

  .woocommerce-cart .actions .coupon input#coupon_code {
    width: 100% !important;
  }

  .woocommerce-cart .cart-collaterals {
    justify-content: center !important;
  }
}

/* ==========================================================================
   BLINDAGEM DOS CAMPOS COMPACTOS DO MERCADO PAGO NO CHECKOUT
   ========================================================================== */
/* ==========================================================================
   CORREÇÃO E ALINHAMENTO DO FORMULÁRIO DO MERCADO PAGO V2 (DANIEL PIJAMAS)
   ========================================================================== */

/* Garante que o container do Mercado Pago apareça como um bloco organizado *
#form-checkout {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 10px 0 !important;
}

/* Organiza as linhas do formulário (Número do cartão sozinho, validade/CVC juntos) *
.form-checkout__row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  width: 100% !important;
}

/* Container de cada campo individual *
.form-checkout__group {
  flex: 1 1 calc(50% - 8px) !important; /* Divide os campos menores em 50% da linha *
  display: flex !important;
  flex-direction: column !important;
}

/* Força o campo do número do cartão e do titular a ocuparem 100% da linha *
.form-checkout__group.col-12,
#form-checkout__cardNumber-container,
#form-checkout__cardholderName-container {
  flex: 0 0 100% !important;
  width: 100% !important;
}

/* Estiliza os blocos onde o Mercado Pago injeta os IFRAMES com segurança *
.form-checkout__input,
#form-checkout__cardNumber,
#form-checkout__expirationDate,
#form-checkout__securityCode {
  height: 46px !important;
  width: 100% !important;
  border: 1px solid var(--secondary) !important;
  border-radius: var(--radius-pill) !important;
  padding: 10px 16px !important;
  background: #ffffff !important;
  font-family: "Quicksand", sans-serif !important;
  box-sizing: border-box !important;
  display: block !important;
}

/* Alinha o tamanho das labels (textos explicativos como "Número do cartão") *
#form-checkout label,
.form-checkout__label {
  font-family: "Fredoka", sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  color: var(--foreground) !important;
  margin-bottom: 6px !important;
  display: block !important;
}

/* Corrige o select de parcelas/bancos do Mercado Pago *
#form-checkout__installments,
#form-checkout__issuer,
#form-checkout__identificationType {
  height: 46px !important;
  width: 100% !important;
  border: 1px solid var(--secondary) !important;
  border-radius: var(--radius-pill) !important;
  padding: 0 16px !important;
  font-family: "Quicksand", sans-serif !important;
  background-color: #ffffff !important;
}*/


/* ==========================================================================
   BLINDAGEM VISUAL: INFINITEPAY LINK DIRETO (DANIEL PIJAMAS)
   ========================================================================== */

/* Esconde as listas de gateways padrão do WooCommerce que quebram o design das abas */
.woocommerce-checkout #payment ul.payment_methods,
.woocommerce-checkout #payment .payment_box {
    display: none !important;
}

/* Mantém o contêiner do checkout limpo para focar nas abas customizadas e no botão oficial */
.conteiner-pagamento-real {
    width: 100% !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}
.order-details-box{
  display: none !important;
}
.wcfm_buttons{
  display: none !important;
}

/* ==========================================================================
   ESTILIZAÇÃO PREMIUM DA DASHBOARD "MINHA CONTA" (DANIEL PIJAMAS)
   ========================================================================== */

/* 🔹 1. Layout Estrutural Divisório (Painel + Sidebar) */
.woocommerce-account .woocommerce {
  display: flex !important;
  gap: 40px !important;
  align-items: flex-start !important;
  margin-top: 20px !important;
  font-family: "Quicksand", sans-serif !important;
  color: var(--foreground) !important;
}

/* 🔹 2. Painel de Conteúdo Principal (Direita) */
.woocommerce-account .woocommerce-MyAccount-content {
  flex: 1 !important;
  background: transparent !important;
  padding: 0 !important;
}

/* Texto de Boas-vindas Inicial */
.woocommerce-account .woocommerce-MyAccount-content > p {
  font-size: 1.15rem !important;
  line-height: 1.6 !important;
  color: var(--foreground) !important;
  margin-bottom: 25px !important;
}

.woocommerce-account .woocommerce-MyAccount-content > p strong {
  font-family: "Fredoka", sans-serif !important;
  color: var(--news) !important;
  font-size: 1.3rem !important;
}

/* Links em destaque dentro do texto de introdução */
.woocommerce-account .woocommerce-MyAccount-content > p a {
  color: var(--primary) !important;
  text-decoration: none !important;
  font-weight: 700 !important;
  border-bottom: 1.5px dashed var(--primary) !important;
}

/* 🔹 3. Cards de Atalhos Rápidos (Estilo Layout Solicitado) */
/* Se quiser criar divs customizadas na sua página de introdução, use estas classes: */
.dp-account-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
  gap: 20px !important;
  margin-top: 30px !important;
}

.dp-account-card {
  background: #ffffff !important;
  border: 1px solid var(--secondary) !important;
  border-radius: var(--radius) !important;
  padding: 24px !important;
  text-align: center !important;
  transition:
    transform 0.2s,
    box-shadow 0.2s !important;
  cursor: pointer !important;
}

.dp-account-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.03) !important;
  border-color: var(--primary) !important;
}

.dp-account-card h3 {
  font-family: "Fredoka", sans-serif !important;
  font-size: 1.1rem !important;
  margin: 0 0 8px 0 !important;
  color: var(--foreground) !important;
}

.dp-account-card p {
  font-size: 0.85rem !important;
  color: var(--muted-foreground) !important;
  margin: 0 !important;
}

/* 🔹 4. Tabela de Pedidos Recentes Limpa e Minimalista */
.woocommerce-account table.shop_table.my_account_orders {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border: 1px solid var(--secondary) !important;
  border-radius: var(--radius) !important;
  overflow: hidden !important;
  background: #ffffff !important;
  width: 100% !important;
}

.woocommerce-account table.shop_table thead {
  background: var(--bg-light) !important;
}

.woocommerce-account table.shop_table th {
  font-family: "Fredoka", sans-serif !important;
  color: var(--foreground) !important;
  font-weight: 600 !important;
  padding: 14px 18px !important;
  font-size: 0.85rem !important;
  text-transform: uppercase !important;
  border: none !important;
}

.woocommerce-account table.shop_table td {
  padding: 16px 18px !important;
  border-top: 1px solid var(--muted) !important;
  border-bottom: none !important;
  vertical-align: middle !important;
  font-size: 0.95rem !important;
}

/* Botão de Ação "Visualizar Pedido" */
.woocommerce-account table.shop_table td .button {
  background: #ffffff !important;
  border: 1.5px solid var(--primary) !important;
  color: var(--primary) !important;
  border-radius: var(--radius-pill) !important;
  font-family: "Fredoka", sans-serif !important;
  font-weight: 600 !important;
  padding: 6px 16px !important;
  font-size: 0.85rem !important;
  transition: all 0.2s !important;
  display: inline-block !important;
  height: auto !important;
  line-height: 1.2 !important;
}

.woocommerce-account table.shop_table td .button:hover {
  background: var(--primary) !important;
  color: #ffffff !important;
}

/* 🔹 5. Badges de Status Personalizados (Estilo App) */
.woocommerce-account table.shop_table mark.order-status {
  background: var(--bg-light) !important;
  color: var(--primary) !important;
  padding: 5px 12px !important;
  border-radius: var(--radius-pill) !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
}

/* Cores específicas para cada status importante */
.woocommerce-account table.shop_table mark.completed {
  background: #dcfce7 !important;
  color: #16a34a !important;
}

.woocommerce-account table.shop_table mark.processing {
  background: #fef9c3 !important;
  color: #ca8a04 !important;
}

.woocommerce-account table.shop_table mark.cancelled {
  background: #fee2e2 !important;
  color: #dc2626 !important;
}

/* 📱 6. Responsividade Completa para Celular (Empilhado) */
@media screen and (max-width: 768px) {
  .woocommerce-account .woocommerce {
    flex-direction: column !important;
    gap: 25px !important;
  }

  .woocommerce-account .woocommerce-MyAccount-navigation {
    width: 100% !important;
    flex: none !important;
    margin-bottom: 15px !important;
  }

  /* Transforma o menu lateral em uma barra de rolagem horizontal confortável no mobile */
  .woocommerce-account .woocommerce-MyAccount-navigation ul {
    flex-direction: row !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    padding-bottom: 5px !important;
    scrollbar-width: none; /* Oculta barra no Firefox */
  }

  .woocommerce-account .woocommerce-MyAccount-navigation ul::-webkit-scrollbar {
    display: none; /* Oculta barra no Chrome/Safari */
  }

  .woocommerce-account .woocommerce-MyAccount-navigation ul li a {
    padding: 8px 14px !important;
    font-size: 0.85rem !important;
  }

  /* Ajuste da tabela de histórico no mobile */
  .woocommerce-account table.shop_table.my_account_orders thead {
    display: none !important;
  }

  .woocommerce-account table.shop_table.my_account_orders tr {
    display: block !important;
    margin-bottom: 15px !important;
    border: 1px solid var(--secondary) !important;
    border-radius: var(--radius) !important;
    padding: 10px !important;
  }

  .woocommerce-account table.shop_table.my_account_orders td {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 10px 5px !important;
    border-top: none !important;
    border-bottom: 1px solid var(--muted) !important;
    text-align: right !important;
  }

  .woocommerce-account table.shop_table.my_account_orders td:last-child {
    border-bottom: none !important;
  }

  .woocommerce-account table.shop_table.my_account_orders td::before {
    content: attr(data-title) ": " !important;
    font-family: "Fredoka", sans-serif !important;
    font-weight: 600 !important;
    color: var(--muted-foreground) !important;
    float: left !important;
    font-size: 0.8rem !important;
  }
}
/* ==========================================================================
   POLIMENTO INTERNO DO PAINEL "MINHA CONTA" (DANIEL PIJAMAS)
   ========================================================================== */

/* 📋 1. Ajustes no Texto de Boas-Vindas e Links */
.woocommerce-MyAccount-content p {
  font-family: "Quicksand", sans-serif !important;
  font-size: 1rem !important;
  line-height: 1.6 !important;
  color: var(--foreground) !important;
  margin-bottom: 20px !important;
}

/* Deixa os links em destaque com a cor do seu tema */
.woocommerce-MyAccount-content p a {
  color: var(--primary) !important;
  text-decoration: none !important;
  font-weight: 700 !important;
  border-bottom: 1.5px dashed var(--primary) !important;
  transition: color 0.2s ease !important;
}

.woocommerce-MyAccount-content p a:hover {
  color: var(--news) !important;
  border-color: var(--news) !important;
}

/* 🏡 2. Estilização do Bloco de Endereços (Faturamento / Entrega) */
.woocommerce-MyAccount-content .addresses {
  margin-top: 25px !important;
  background: #ffffff !important;
  border: 1px solid var(--secondary) !important;
  border-radius: var(--radius) !important;
  padding: 24px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.01) !important;
}

.woocommerce-MyAccount-content .addresses .title h3 {
  font-family: "Fredoka", sans-serif !important;
  color: var(--foreground) !important;
  font-size: 1.2rem !important;
  margin-top: 0 !important;
  margin-bottom: 12px !important;
}

.woocommerce-MyAccount-content .addresses address {
  font-family: "Quicksand", sans-serif !important;
  font-style: normal !important;
  line-height: 1.5 !important;
  color: var(--muted-foreground) !important;
  font-size: 0.95rem !important;
}

/* Botão de Editar Endereço */
.woocommerce-MyAccount-content .addresses .edit {
  display: inline-block !important;
  margin-top: 12px !important;
  font-family: "Fredoka", sans-serif !important;
  font-weight: 600 !important;
  color: var(--primary) !important;
  text-decoration: none !important;
  font-size: 0.9rem !important;
}

.woocommerce-MyAccount-content .addresses .edit:hover {
  color: var(--news) !important;
}

/* ⚙️ 3. Estilização dos Formulários (Detalhes da Conta / Alterar Senha) */
.woocommerce-MyAccount-content form.edit-account {
  background: #ffffff !important;
  border: 1px solid var(--secondary) !important;
  border-radius: var(--radius) !important;
  padding: 25px !important;
  margin-top: 20px !important;
}

.woocommerce-MyAccount-content form.edit-account fieldset {
  border: 1px solid var(--muted) !important;
  border-radius: var(--radius) !important;
  padding: 20px !important;
  margin-bottom: 20px !important;
}

.woocommerce-MyAccount-content form.edit-account legend {
  font-family: "Fredoka", sans-serif !important;
  font-weight: 600 !important;
  color: var(--foreground) !important;
  padding: 0 10px !important;
}

/* Labels e Inputs dos dados do cliente */
.woocommerce-MyAccount-content form .form-row label {
  font-family: "Fredoka", sans-serif !important;
  font-weight: 600 !important;
  color: var(--foreground) !important;
  font-size: 0.9rem !important;
  margin-bottom: 6px !important;
  display: block !important;
}

.woocommerce-MyAccount-content form .form-row input.input-text {
  height: 44px !important;
  border: 1px solid var(--secondary) !important;
  border-radius: var(--radius-pill) !important;
  padding: 10px 16px !important;
  font-family: "Quicksand", sans-serif !important;
  color: var(--foreground) !important;
  background: #ffffff !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.woocommerce-MyAccount-content form .form-row input.input-text:focus {
  border-color: var(--primary) !important;
  outline: none !important;
}

/* Botão Salvar Alterações */
.woocommerce-MyAccount-content form button.button {
  background: var(--primary) !important;
  color: #ffffff !important;
  font-family: "Fredoka", sans-serif !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  padding: 12px 30px !important;
  border-radius: var(--radius-pill) !important;
  border: none !important;
  cursor: pointer !important;
  transition: background 0.2s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
}

.woocommerce-MyAccount-content form button.button:hover {
  background: var(--news) !important;
}

/* 🔔 4. Caixa de Alertas e Mensagens do WooCommerce (Ex: "Nenhum pedido feito ainda") */
.woocommerce-MyAccount-content .woocommerce-info,
.woocommerce-MyAccount-content .woocommerce-Message {
  background: var(--bg-light) !important;
  border: 1px solid var(--secondary) !important;
  border-top: 3px solid var(--primary) !important;
  border-radius: var(--radius) !important;
  padding: 15px 20px !important;
  font-family: "Quicksand", sans-serif !important;
  color: var(--foreground) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 15px !important;
}

/* Botão "Ir para a loja" dentro do alerta */
.woocommerce-MyAccount-content .woocommerce-info .button,
.woocommerce-MyAccount-content .woocommerce-Message .button {
  background: #ffffff !important;
  border: 1.5px solid var(--primary) !important;
  color: var(--primary) !important;
  border-radius: var(--radius-pill) !important;
  font-family: "Fredoka", sans-serif !important;
  font-weight: 600 !important;
  padding: 8px 20px !important;
  font-size: 0.85rem !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

.woocommerce-MyAccount-content .woocommerce-info .button:hover,
.woocommerce-MyAccount-content .woocommerce-Message .button:hover {
  background: var(--primary) !important;
  color: #ffffff !important;
}
/* ==========================================================================
   CONTAINER DE NOTIFICAÇÕES TOAST (DANIEL PIJAMAS)
   ========================================================================== */
#dp-toast-container {
  position: fixed !important;
  bottom: 30px !important;
  right: 30px !important;
  z-index: 999999 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  pointer-events: none;
}

/* Responsividade para celulares ficarem centralizados no topo ou rodapé */
@media screen and (max-width: 480px) {
  #dp-toast-container {
    right: 20px !important;
    left: 20px !important;
    bottom: 20px !important;
    align-items: center !important;
  }
  .dp-toast {
    width: 100% !important;
    text-align: center !important;
  }
}

.woocommerce-form__label,
.woocommerce-form__label-for-checkbox,
.checkbox {
  color: chocolate;
  font-size: 14px;
  font-family: "Quicksand";
  font-weight: 600;
}
.wc-better-shipping-progress-text {
  margin-top: 5px;
  font-size: 14px;
  color: cadetblue;
  font-family: "Quicksand";
  font-weight: 800;
}
/* ==========================================================================
     HARMONIZAÇÃO VISUAL: ALINHAMENTO DA TABELA DE RESUMO COM O TEMA
     ========================================================================== */
.woocommerce-checkout-review-order-table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 10px !important; /* Cria um respiro elegante entre as linhas */
  margin-top: 15px !important;
  font-family: "Montserrat", sans-serif !important;
}

/* Deixa as linhas com fundo limpo e bordas suaves */
.woocommerce-checkout-review-order-table tr {
  background: #ffffff !important;
}

/* Estilização dos títulos das colunas (Produto / Subtotal) */
.woocommerce-checkout-review-order-table th {
  font-weight: 700 !important;
  text-transform: uppercase !important;
  font-size: 0.75rem !important;
  color: #2cb3ea !important;
  letter-spacing: 1px !important;
  padding: 12px 5px !important;
  border-bottom: 2px solid #f0faff !important;
}

/* Alinhamento de todos os textos de valores e fretes */
.woocommerce-checkout-review-order-table td,
.woocommerce-checkout-review-order-table th {
  font-family: "Montserrat", sans-serif !important;
  font-size: 0.9rem !important;
  color: #475569 !important;
  padding: 14px 5px !important;
  border-bottom: 1px solid #f0faff !important;
}

/* Força os valores numéricos à direita a ficarem destacados em azul */
.woocommerce-checkout-review-order-table td.product-total,
.woocommerce-checkout-review-order-table tr.cart-subtotal td span.amount,
.woocommerce-checkout-review-order-table tr.shipping td span.amount {
  font-weight: 700 !important;
  color: #2cb3ea !important;
}

/* Destaque total para a linha do valor final do pedido */
.woocommerce-checkout-review-order-table tr.order-total {
  background: #f0faff !important; /* Fundo azul bem clarinho do tema */
}

.woocommerce-checkout-review-order-table tr.order-total th,
.woocommerce-checkout-review-order-table tr.order-total td {
  border: none !important;
  padding: 18px 15px !important;
}

.woocommerce-checkout-review-order-table tr.order-total th {
  color: #1e293b !important;
  font-size: 1.05rem !important;
  border-top-left-radius: 14px !important;
  border-bottom-left-radius: 14px !important;
}

.woocommerce-checkout-review-order-table tr.order-total td strong span.amount {
  color: #2cb3ea !important;
  font-size: 1.3rem !important;
  font-weight: 900 !important;
  font-family: var(--font-body) !important;
}

/* ==========================================================================
   TELA DE LOGIN PREMIUM CUSTOMIZADA (ESTILO AMO PIJAMAS)
   ========================================================================== */
.dp-login-box-wrapper {
  width: 100%;
  max-width: 1000px;
  margin: 40px auto;
  background-color: #d1edf9 !important;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.04);
}

.dp-login-container {
  display: flex;
  width: 100%;
  min-height: 580px;
}

.dp-login-benefits-side {
  flex: 1;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}

.dp-benefits-content {
  max-width: 320px;
}
.dp-login-logo-brand h1 {
  font-size: 2.4rem;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.1;
  margin: 8px 0;
}
.dp-heart-icon-brand {
  font-size: 2rem;
  color: #ed4e78;
}
.dp-brand-sub {
  font-size: 1.1rem;
  color: #475569;
  margin-bottom: 30px;
}
.dp-benefits-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.dp-benefit-item {
  display: flex;
  align-items: center;
  gap: 15px;
}
.dp-benefit-icon {
  width: 40px;
  height: 40px;
  background-color: #ffe4e6;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.dp-benefit-text h3 {
  font-size: 0.95rem;
  font-weight: 600;
  color: #0f172a;
  margin: 0 0 2px 0;
}
.dp-benefit-text p {
  font-size: 0.85rem;
  color: #64748b;
  margin: 0;
}

/* Lado do Formulário */
.dp-login-form-side {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
}

.dp-login-card {
  background: #ffffff;
  padding: 30px;
  border-radius: 20px;
}
.dp-link-create {
  color: var(--primary) !important;
}
.dp-card-header {
  text-align: center;
  margin-bottom: 20px;
}
.dp-user-avatar-icon {
  width: 48px;
  height: 48px;
  background-color: #fff1f2;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}
.dp-user-avatar-icon svg {
  width: 22px;
  height: 22px;
  color: #ed4e78;
}
.dp-card-header h2 {
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0;
  text-align: center;
}
.dp-card-header p {
  color: #64748b;
  font-size: 0.85rem;
}

/* Estilização dos Inputs Nativos do WooCommerce */
.dp-login-card form.login {
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  background: none !important;
}

.dp-login-card form.login .form-row {
  margin-bottom: 15px !important;
  padding: 0 !important;
}

.dp-login-card form.login input.input-text {
  width: 100% !important;
  padding: 11px 14px !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  font-size: 0.9rem !important;
}

/* Botão Entrar Oficial */
.dp-login-card form.login button.button {
  width: 100% !important;
  background-color: #ed4e78 !important;
  color: #ffffff !important;
  padding: 12px !important;
  border-radius: 8px !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  border: none !important;
  margin-top: 10px;
}

/* Redes Sociais e Divisores */
.dp-social-divider {
  text-align: center;
  position: relative;
  margin: 20px 0;
}
.dp-social-divider::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 1px;
  background-color: #e2e8f0;
}
.dp-social-divider span {
  background: #ffffff;
  padding: 0 10px;
  font-size: 0.8rem;
  color: #94a3b8;
  position: relative;
  z-index: 2;
}
.dp-social-buttons {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}
.dp-social-btn {
  flex: 1;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  padding: 8px;
  border-radius: 8px;
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.dp-google .brand-icon {
  color: #ea4335;
  font-weight: bold;
}
.dp-facebook .brand-icon {
  color: #1877f2;
  font-weight: bold;
}

.dp-card-footer-notice {
  text-align: center;
  font-size: 0.75rem;
  color: #64748b;
  margin: 0;
}

/* ==========================================================================
   INTEGRAÇÃO PREMIUM: FORMULÁRIO DE RECUPERAÇÃO DE SENHA
   ========================================================================== */
.dp-lost-pwd-box form.lost_reset_password {
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  background: none !important;
}

.dp-lost-pwd-box .dp-login-card > p {
  font-size: 0.88rem !important;
  color: #64748b !important;
  line-height: 1.5 !important;
  text-align: center !important;
  margin-bottom: 20px !important;
}

.woocommerce form .form-row-first,
.woocommerce form .form-row-last,
.woocommerce-page form .form-row-first,
.woocommerce-page form .form-row-last {
  width: 100% !important;
}

.dp-lost-pwd-box form.lost_reset_password input.input-text {
  width: 100% !important;
  padding: 11px 14px !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  font-size: 0.9rem !important;
  box-sizing: border-box;
}

.dp-lost-pwd-box form.lost_reset_password button.button {
  width: 100% !important;
  background-color: #ed4e78 !important;
  color: #ffffff !important;
  padding: 12px !important;
  border-radius: 8px !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  border: none !important;
  margin-top: 15px !important;
  cursor: pointer;
  transition: background-color 0.2s;
}
.dp-lost-pwd-box form.lost_reset_password button.button:hover {
  background-color: #db3b65 !important;
}

/* ==========================================================================
   INTERFACES COMPATÍVEIS E PREMIUM (AMO PIJAMAS STYLE)
   ========================================================================== */
.dp-login-card .u-columns.col2-set {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
}
.dp-login-card .u-columns.col2-set h2 {
  display: none !important;
}
.dp-login-card .u-column1,
.dp-login-card .u-column2 {
  width: 100% !important;
  float: none !important;
  padding: 0 !important;
}

/* Padronização dos inputs do Formulário de Registro (Cadastro) */
.dp-login-card form.register {
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  background: none !important;
}
.dp-login-card form.register .form-row {
  margin-bottom: 15px !important;
  padding: 0 !important;
}
.dp-login-card form.register input.input-text {
  width: 100% !important;
  padding: 11px 14px !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  font-size: 0.9rem !important;
  background-color: #f8fafc !important;
}

/* Botão Registrar Oficial */
.dp-login-card form.register button.button {
  width: 100% !important;
  background-color: #ed4e78 !important;
  color: #ffffff !important;
  padding: 12px !important;
  border-radius: 8px !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  border: none !important;
  margin-top: 10px !important;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(237, 78, 120, 0.2);
}

.dp-form-links {
  text-align: center !important;
  margin-top: 15px !important;
  margin-bottom: 15px !important;
}
.dp-form-links a.dp-link-create {
  display: inline-block !important;
  padding: 10px 20px !important;
  background-color: #e0f7ff !important;
  color: #ed4e78 !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  font-size: 0.9rem !important;
  width: 100% !important;
  box-sizing: border-box;
}

/* ==========================================================================
   ESTADO PADRÃO / CONTROLE DE ALTERNÂNCIA (LOGIN / CADASTRO)
   ========================================================================== */
.dp-login-card .u-column2,
.dp-login-card .col-2 {
  display: none !important; /* Esconde o cadastro por padrão */
}

/* QUANDO O MODO CADASTRO ESTIVER ATIVO (.dp-show-register-now) */
.dp-show-register-now .u-column1,
.dp-show-register-now .col-1,
.dp-show-register-now form.login,
.dp-show-register-now .woocommerce-form-login-wrapper {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
}

.dp-show-register-now .u-column2,
.dp-show-register-now .col-2 {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
}

.dp-show-register-now form.register,
.dp-show-register-now .u-column2 input.input-text,
.dp-show-register-now .col-2 input.input-text {
  display: block !important;
  width: 100% !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* ==========================================================================
   AJUSTES RESPONSIVOS MOBILE (TELA CELULAR)
   ========================================================================== */
@media screen and (max-width: 768px) {
  .dp-login-container {
    flex-direction: column;
    min-height: auto !important;
  }
  .dp-login-benefits-side {
    display: none; /* Oculta os benefícios no mobile */
  }
  .dp-login-card {
    padding: 20px !important;
  }

  .dp-login-form-side {
    padding: 10px !important;
  }

  .woocommerce-account .u-columns.col2-set {
    display: block !important;
    width: 100% !important;
  }

  .woocommerce-account .u-columns.col2-set .col-1,
  .woocommerce-account .u-columns.col2-set .col-2,
  .woocommerce-account .u-columns.col2-set .u-column1,
  .woocommerce-account .u-columns.col2-set .u-column2 {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 0 20px 0 !important;
  }

  .woocommerce form.login,
  .woocommerce form.register,
  .woocommerce form.lost_reset_password {
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    width: 100% !important;
  }

  .woocommerce form .form-row {
    width: 100% !important;
    float: none !important;
    margin-bottom: 15px !important;
  }

  .woocommerce form.login .form-row .woocommerce-form-login__rememberme {
    display: block !important;
    margin-top: 10px !important;
    margin-bottom: 15px !important;
  }

  .woocommerce form.login .button,
  .woocommerce form.register .button,
  .woocommerce form.lost_reset_password .button {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }
}

/* ==========================================================================
   INTEGRAÇÃO DE BOTÕES OFICIAIS DO NEXTEND SOCIAL LOGIN
 ========================================================================== */
.dp-nextend-social-container {
  margin-bottom: 20px;
  width: 100%;
  text-align: center !important;
}

/* Força os botões do plugin a ficarem lado a lado e elegantes */
.dp-nextend-social-container .nextend-social-login-displays {
  display: flex !important;
  gap: 10px !important;
  justify-content: center !important;
  text-align: center !important;
}

.dp-nextend-social-container .nextend-social-login-provider {
  flex: 1 !important;
  margin: 0 !important;
}

.dp-nextend-social-container .nextend-social-login-provider a {
  width: 100% !important;
  border-radius: 8px !important;
  padding: 10px !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
}

/* ==========================================================================
   SISTEMA DE TOASTS PREMIUM (NOTIFICAÇÕES FLUTUANTES)
 ========================================================================== */
/* Container de Toasts flutuantes sempre visível no topo direito */
#dp-toast-container {
  position: fixed !important;
  top: 30px !important;
  right: 30px !important;
  z-index: 99999999 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  max-width: 380px !important;
  width: 100% !important;
  pointer-events: none;
}

.dp-toast {
  pointer-events: auto;
  background: #ffffff !important;
  color: #1e293b !important;
  padding: 14px 18px !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  border-left: 5px solid #64748b;
  opacity: 0;
  transform: translateX(50px);
  transition:
    transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    opacity 0.3s ease !important;
}

.dp-toast.show {
  opacity: 1;
  transform: translateX(0);
}

.dp-toast.error {
  border-left-color: #ed4e78 !important;
}
.dp-toast.success {
  border-left-color: #10b981 !important;
}

/* Oculta de forma limpa caixas que já foram processadas */
.woocommerce-notices-wrapper:empty {
  display: none !important;
}
/* CONTAINER DE TOASTS GLOBAL FIXO NA TELA */

/* Ocultação total e segura dos blocos originais para não dar "pulo" na tela */
.woocommerce-NoticeGroup-checkout,
.woocommerce-error,
.woocommerce-message {
  display: none !important;
  opacity: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* Garante que os textos e cartões de slides inativos fiquem totalmente invisíveis */
.swiper-slide:not(.swiper-slide-active) .hero-card,
.swiper-slide:not(.swiper-slide-active) .hero-eyebrow,
.swiper-slide:not(.swiper-slide-active) .hero-title,
.swiper-slide:not(.swiper-slide-active) .hero-sub,
.swiper-slide:not(.swiper-slide-active) .btn-premium {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: auto !important;
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
}

/* Força o slide ativo a exibir seus textos perfeitamente */
.swiper-slide.swiper-slide-active .hero-card,
.swiper-slide.swiper-slide-active .hero-eyebrow,
.swiper-slide.swiper-slide-active .hero-title,
.swiper-slide.swiper-slide-active .hero-sub,
.swiper-slide.swiper-slide-active .btn-premium {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Garante a exibição do link/botão de opções no loop */
.products .product .button,
.products .product .add_to_cart_button {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  background-color: #2cb3ea !important;
  color: #ffffff !important;
  padding: 10px 20px !important;
  border-radius: 50px !important;
  text-align: center !important;
  margin-top: 15px !important;
}

/* ==========================================================================
   CORREÇÃO CIRÚRGICA DE PRODUTOS VARIÁVEIS NO CARRINHO LATERAL
   ========================================================================== */

/* 1. Garante que o item da lista se comporte como um bloco flexível que permite quebras *
.cart-side .body ul.woocommerce-mini-cart li.woocommerce-mini-cart-item {
  display: flex !important;
  flex-wrap: wrap !important; 
  align-items: flex-start !important;
}*/

/* 2. Corrige a caixinha de variação (ex: "tamanhos: P") para que não esmague o preço */
.cart-side .body .variation {
  display: block !important; /* Altera de flex para block para empilhar corretamente */
  width: 100% !important; /* Ocupa a largura total disponível abaixo do título */
  margin: 4px 0 6px 0 !important;
}

/* 3. Ajusta os tamanhos das etiquetas de variação internos */
.cart-side .body .variation dt {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--muted-foreground) !important;
  display: inline !important; /* Fica lado a lado com o valor (ex: tamanhos:) */
  margin: 0 !important;
}

.cart-side .body .variation dd {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--foreground) !important;
  display: inline !important; /* Exibe o valor (ex: P) logo em seguida */
  margin: 0 10px 0 4px !important;
}

/* 4. Força a quantidade e o preço a irem para a linha de baixo de forma limpa */
.cart-side .body .quantity {
  display: block !important;
  width: 100% !important; /* Toma a linha inteira abaixo das variações */
  margin-top: 4px !important;
  font-size: 13px !important;
}

/* ==========================================================================
   PAGINAÇÃO COMPATÍVEL COM O TEMA DANIEL PIJAMAS
   ========================================================================== */
.woocommerce-pagination {
  text-align: center;
  margin: 40px 0 20px 0 !important;
  display: flex;
  justify-content: center;
  width: 100%;
}

.woocommerce-pagination ul.page-numbers {
  display: inline-flex !important;
  white-space: nowrap;
  gap: 8px;
  padding: 0 !important;
  margin: 0 auto !important;
  list-style: none !important;
  border: none !important; /* Remove aquela barra roxa/cinza feia de ponta a ponta */
}

.woocommerce-pagination ul.page-numbers li {
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
  display: inline-block !important;
}

.woocommerce-pagination ul.page-numbers li a,
.woocommerce-pagination ul.page-numbers li span.page-numbers {
  display: flex !important;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 6px;
  font-family: var(--font-body), "Quicksand", sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #24314a !important;
  background: #ffffff !important;
  border: 2px solid #e2f5fc !important;
  border-radius: var(
    --radius-pill,
    50%
  ) !important; /* Força ficar perfeitamente redondo */
  text-decoration: none !important;
  transition: all 0.2s ease-in-out;
  box-shadow: 0 4px 10px rgba(154, 221, 247, 0.1);
}

/* Estado Ativo (Página Atual) */
.woocommerce-pagination ul.page-numbers li span.current {
  background: #1da7e6 !important;
  color: #ffffff !important;
  border-color: #1da7e6 !important;
  box-shadow: 0 4px 12px rgba(29, 167, 230, 0.3);
}

/* Efeito Passar o Mouse (Hover) */
.woocommerce-pagination ul.page-numbers li a:hover {
  background: #e6f7fd !important;
  border-color: #1da7e6 !important;
  color: #1da7e6 !important;
  transform: translateY(-2px);
}

/* ==========================================================================
   HIGIENIZAÇÃO E FORMATAÇÃO DE ATACADO (WPC VARIATIONS TABLE)
   ========================================================================== */

/* 1. Remove as miniaturas de imagem repetidas dentro da tabela */
.woovr-variation-image {
  display: none !important;
}

/* 2. Oculta os botões individuais de "Adicionar ao Carrinho" de cada linha */
.woovr-variation-action {
  display: none !important;
}

/* 3. SOME TOTALMENTE com os seletores antigos de bolinhas (G, M, P) para não duplicar */
.variations_form.cart .variations,
.variations_form.cart .tawcvs-swatches {
  display: none !important;
  visibility: hidden !important;
}

/* 4. Organiza as linhas da tabela em cards horizontais limpos */
.woovr-variation {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 14px 18px !important;
  margin-bottom: 10px !important;
  background: #ffffff !important;
  border: 2px solid #e2f5fc !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 10px rgba(29, 167, 230, 0.03) !important;
}

/* 5. Estiliza o texto do tamanho e o preço em destaque */
.woovr-variation-info {
  font-family: "Quicksand", sans-serif !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  color: #2b2b2b !important;
}

.woovr-variation-price {
  font-weight: 700 !important;
  color: #1da7e6 !important;
  margin-left: 12px !important;
}

/* 6. Formata o campo numérico para ficar redondo e fofo igual aos inputs do site */
.woovr-variation-selector .quantity {
  display: inline-block !important;
}

.woovr-variation-selector .quantity input.qty {
  width: 65px !important;
  height: 42px !important;
  border-radius: 20px !important;
  border: 2px solid #1da7e6 !important;
  background-color: #e2f5fc !important;
  color: #1da7e6 !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  text-align: center !important;
}

/* 7. Garante que o botão principal de Adicionar ao Carrinho de baixo fique visível */
.single_add_to_cart_button {
  display: inline-block !important;
}

/* ==========================================================================
   ESTILIZAÇÃO DA MATRIZ DE ATACADO COM PREÇOS
   ========================================================================== */

/* Remove seletores nativos de bolinhas para evitar repetições */
.variations_form.cart .variations,
.variations_form.cart .tawcvs-swatches,
.variations_form.cart .quantity:not(.daniel-atacado-container .quantity) {
  display: none !important;
}

.daniel-atacado-container {
  margin: 25px 0 !important;
  font-family: "Quicksand", sans-serif;
}

.daniel-atacado-titulo {
  font-size: 16px;
  font-weight: 700;
  color: #4a5568;
  margin-bottom: 15px;
  letter-spacing: -0.3px;
}

/* Estrutura das Linhas em Cards */
.daniel-atacado-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 14px 18px !important;
  margin-bottom: 12px !important;
  background: #ffffff !important;
  border: 1px solid #e2f5fc !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 12px rgba(29, 167, 230, 0.02) !important;
}

/* Alinhamento de Textos (Tamanho e Valor) */
.info-lado-esquerdo {
  display: flex;
  flex-direction: column;
}

.nome-tamanho {
  font-size: 15px;
  font-weight: 700;
  color: #2d3748;
}

.preco-tamanho,
.preco-tamanho .woocommerce-Price-amount {
  font-size: 14px;
  font-weight: 600;
  color: #718096 !important; /* Cor cinza sutil idêntica ao seu print modelo */
  margin-top: 3px;
}

/* Input de Seleção Numérica */
.input-qtd-atacado {
  width: 65px !important;
  height: 40px !important;
  border-radius: 6px !important; /* Cantos levemente suavizados igual ao print */
  border: 1px solid #cbd5e0 !important;
  background-color: #ffffff !important;
  color: #2d3748 !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  text-align: center !important;
  outline: none;
}

/* Destaca o botão principal de compra abaixo da tabela */
.single_add_to_cart_button {
  display: block !important;
  width: 100% !important;
  margin-top: 20px !important;
}

/* Wrapper dos seletores */
.daniel-qty-wrapper {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* Botões de + e - Azuis */
.daniel-minus-btn,
.daniel-plus-btn {
  width: 36px !important;
  height: 36px !important;
  border: none !important;
  background-color: #0091d3 !important; /* Azul do modelo da foto */
  color: #ffffff !important;
  font-size: 18px !important;
  font-weight: bold !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background 0.2s;
}

.daniel-minus-btn:hover,
.daniel-plus-btn:hover {
  background-color: #1da7e6 !important; /* Muda de tom no hover */
}

/* Ajuste fino na caixa de texto do centro */
.input-qtd-atacado {
  width: 50px !important;
  height: 36px !important;
  border: 1px solid #cbd5e0 !important;
  background: #ffffff !important;
  color: #2d3748 !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  text-align: center !important;
  padding: 0 !important;
  margin: 0 !important;
  -moz-appearance: textfield;
}

/* Esconde as setinhas nativas do navegador */
.input-qtd-atacado::-webkit-outer-spin-button,
.input-qtd-atacado::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Esconde os botões originais de baixo (as bolinhas soltas) */
.variations_form.cart .tawcvs-swatches,
.variations_form.cart .variations {
  display: none !important;
}

/* ==========================================================================
   RESPONSIVIDADE DO QUICK VIEW MODAL (MOBILE & TABLETS)
   ========================================================================== */

/* 1. Ajustes Gerais para Tablets (Telas até 991px) */
@media (max-width: 991px) {
  #dp-quickview-modal .dp-custom-cart-wrapper {
    display: flex;
    flex-direction: column; /* Empilha o conteúdo verticalmente */
    max-height: 85vh;
    overflow-y: auto; /* Permite rolagem suave interna se o conteúdo for longo */
    padding: 15px;
  }

  /* Ajusta a largura das colunas internas para ocupar a tela inteira */
  #dp-quickview-modal .qv-image-column,
  #dp-quickview-modal .qv-info-column {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
  }

  #dp-quickview-modal .qv-image-column {
    margin-bottom: 20px;
    text-align: center;
  }

  #dp-quickview-modal .qv-image-column img {
    max-height: 250px; /* Evita que a foto ocupe todo o espaço inicial */
    width: auto;
    object-fit: contain;
  }
}

/* 2. Ajustes Estritos para Smartphones (Telas até 576px) */
@media (max-width: 576px) {
  /* Alinha o container do modal mais próximo das bordas da tela */
  #dp-quickview-modal {
    padding: 10px;
  }

  #dp-quickview-modal .daniel-atacado-titulo {
    font-size: 16px !important;
    line-height: 1.3;
    margin-bottom: 15px !important;
  }

  /* Item da Grade: Organiza as informações e os botões de +/- de forma compacta */
  #dp-quickview-modal .daniel-atacado-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 10px !important;
    margin-bottom: 8px !important;
    border: 1px solid #eef2f5;
    border-radius: 8px;
  }

  #dp-quickview-modal .info-lado-esquerdo {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding-right: 10px;
  }

  #dp-quickview-modal .nome-tamanho {
    font-size: 14px !important;
    font-weight: 600;
  }

  #dp-quickview-modal .preco-tamanho {
    font-size: 13px !important;
    margin-top: 2px;
  }

  /* Wrapper de quantidades: Garante espaçamento confortável para o toque */
  #dp-quickview-modal .daniel-qty-wrapper {
    display: flex;
    align-items: center;
    min-width: 110px;
    justify-content: flex-end;
  }

  /* Botões de + e - mais fáceis de clicar no celular */
  #dp-quickview-modal .daniel-minus-btn,
  #dp-quickview-modal .daniel-plus-btn {
    width: 32px !important;
    height: 32px !important;
    font-size: 16px !important;
    line-height: 30px !important;
    padding: 0 !important;
    border-radius: 6px !important;
  }

  /* Input numérico centralizado */
  #dp-quickview-modal .input-qtd-atacado {
    width: 36px !important;
    height: 32px !important;
    font-size: 14px !important;
    text-align: center;
    padding: 0 !important;
    margin: 0 4px !important;
  }

  /* Botão Principal de Adicionar ao Carrinho */
  #dp-quickview-modal .single_add_to_cart_button {
    width: 100% !important;
    padding: 14px 20px !important;
    font-size: 15px !important;
    font-weight: bold;
    text-transform: uppercase;
    border-radius: 30px !important;
    margin-top: 15px !important;
  }
}

.daniel-loadmore-container #daniel-loadmore-btn {
  background-color: #1da7e6;
  color: #ffffff;
  border: none;
  padding: 14px 45px;
  font-size: 15px;
  font-weight: bold;
  text-transform: uppercase;
  border-radius: 30px;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(29, 167, 230, 0.2);
  transition: all 0.3s ease;
}

.daniel-loadmore-container #daniel-loadmore-btn:hover {
  background-color: #0c91cf;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(29, 167, 230, 0.3);
}

.daniel-loadmore-container #daniel-loadmore-btn.loading {
  background-color: #a3defa !important;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none;
}

/* ==========================================================================
   ESTILIZAÇÃO E ORGANIZAÇÃO COMPLETA DO MINI CARRINHO (SIDEBAR)
   ========================================================================= */

/* Garante o comportamento correto do painel lateral */
.cart-side {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.cart-side .body {
  flex: 1;
  overflow-y: auto; /* Permite rolagem apenas nos itens se houver muitos */
  padding: 15px;
}

/* Formatação da lista nativa do WooCommerce dentro do seu aside */
.cart-side .widget_shopping_cart_content ul.cart_list {
  margin: 5px !important;
  padding: 0 !important;
  list-style: none !important;
}

/* Alinhamento em linha (Flexbox) para cada item do pijama */
.cart-side .widget_shopping_cart_content ul.cart_list li {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 15px 0 !important;
  margin: 0 !important;
  border-bottom: 1px solid #f1f5f9 !important;
  position: relative !important;
  float: none !important; /* Remove quebras antigas do WooCommerce */
  width: 100% !important;
}

/* Ajuste da miniatura da foto do pijama */
.cart-side .widget_shopping_cart_content ul.cart_list li img {
  width: 65px !important;
  height: auto !important;
  float: none !important;
  margin: 0 !important;
  border-radius: 8px !important;
  object-fit: cover;
  flex-shrink: 0;
}

/* Organização do bloco de texto (Título, Preço, Quantidade) */
.cart-side .widget_shopping_cart_content ul.cart_list li a:not(.remove) {
  font-size: 0.95rem !important;
  line-height: 1.3 !important;
  font-weight: 600 !important;
  color: #333 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2; /* Força o título a ter no máximo 2 linhas */
  -webkit-box-orient: vertical;
  /*overflow: hidden;*/
  padding: 0 !important;
  margin-bottom: 4px !important;
}

/* Ajuste da quantidade e preço inseridos pelo WooCommerce */
.cart-side .widget_shopping_cart_content ul.cart_list li .quantity {
  display: block !important;
  font-size: 0.85rem !important;
  color: #64748b !important;
}

/* Destaca o valor do pijama */
.cart-side
  .widget_shopping_cart_content
  ul.cart_list
  li
  .quantity
  .woocommerce-Price-amount {
  color: #2cb3ea !important; /* Cor padrão do seu tema */
  font-weight: 700 !important;
  font-size: 1rem !important;
}

/* Ajuste do botão 'X' de remover item */
.cart-side .widget_shopping_cart_content ul.cart_list li .remove {
  position: absolute !important;
  right: 5px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: #ef4444 !important;
  font-size: 1.2rem !important;
  left: auto !important;
}

/* Rodapé do carrinho (Subtotal e Botões de Finalizar) */
.cart-side .widget_shopping_cart_content .total {
  padding: 15px !important;
  border-top: 2px solid #e2e8f0 !important;
  margin-top: 15px !important;
  font-size: 1.1rem !important;
  display: flex !important;
  justify-content: space-between !important;
}

.cart-side .widget_shopping_cart_content .buttons a {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  margin-bottom: 10px !important;
  padding: 12px !important;
  border-radius: 8px !important;
  font-weight: bold !important;
}

/* ==========================================================================
   ESTILIZAÇÃO DO CARRINHO IGUAL À FINALIZAÇÃO DE COMPRA (CHECKOUT)
   ========================================================================== */

@media (min-width: 992px) {
  /* 1. Transforma o container do carrinho em um Layout de Duas Colunas (padrão Checkout) */
  .woocommerce-cart .woocommerce {
    display: flex !important;
    align-items: flex-start !important;
    gap: 40px !important;
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 15px !important;
  }

  /* 2. Bloco da Esquerda (Formulário da Tabela de Produtos + Sugestões) */
  .woocommerce-cart .woocommerce-cart-form {
    flex: 1 !important; /* Ocupa todo o espaço restante da esquerda */
    margin-bottom: 0 !important;
  }

  /* 3. Bloco da Direita (Caixa de Totais / Lateral de Resumo) */
  .woocommerce-cart .cart-collaterals {
    width: 410px !important; /* Largura idêntica à lateral do checkout */
    flex-shrink: 0 !important;
    position: sticky !important;
    top: 20px !important; /* Faz a caixinha seguir a tela ao rolar a página */
  }

  /* Ajusta o container interno dos totais para ocupar 100% da sua coluna */
  .woocommerce-cart .cart-collaterals .cart_totals {
    width: 100% !important;
    float: none !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 25px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03) !important;
  }

  /* 4. Reposiciona as Sugestões (Cross-sells) para ficarem abaixo dos produtos na esquerda */
  .woocommerce-cart .woocommerce {
    flex-wrap: wrap !important; /* Permite que elementos flutuem se necessário */
  }

  /* Move o bloco de collaterals para o lado e força o cross-sells a se ajustar */
  .woocommerce-cart .cart-collaterals {
    display: block !important;
  }
}

/* ==========================================================================
   REESTRUTURAÇÃO COMPLETA: CARRINHO ESTILO FINALIZAÇÃO DE COMPRA (CHECKOUT)
   ========================================================================== */

@media (min-width: 992px) {
  /* 1. Define o container principal em Grid (Igual ao Checkout) */
  .woocommerce-cart .woocommerce {
    display: grid !important;
    grid-template-columns: 1fr 380px !important; /* Esquerda fluida, Direita fixa */
    gap: 40px !important;
    max-width: 1250px !important;
    margin: 0 auto !important;
    padding: 20px 15px !important;
    align-items: flex-start !important;
  }

  /* 2. Força o formulário da tabela a ocupar a coluna da esquerda */
  .woocommerce-cart .woocommerce-cart-form {
    grid-column: 1 !important;
    margin-bottom: 30px !important;
  }

  /* 3. Força as sugestões (Cross-sells) a irem para baixo da tabela na esquerda */
  .woocommerce-cart .cart-collaterals .cross-sells {
    grid-column: 1 !important;
    width: 100% !important;
    margin-top: 20px !important;
  }

  /* 4. Força o bloco de Totais (cart_totals) a ir para a barra lateral direita */
  .woocommerce-cart .cart-collaterals {
    display: contents !important; /* Desfaz o container nativo para podermos mover os filhos no Grid */
  }

  .woocommerce-cart .cart_totals {
    grid-column: 2 !important; /* Joga estritamente para a coluna 2 */
    grid-row: 1 / span 2 !important; /* Faz ele começar no topo e cobrir a lateral */
    position: sticky !important;
    top: 30px !important; /* Segue a tela ao rolar */
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 25px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02) !important;
    width: 100% !important;
  }
}

/* ==========================================================================
   POLIMENTO VISUAL DA TABELA E ELEMENTOS
   ========================================================================== */
/* Deixa a tabela de produtos arredondada e moderna */
.shop_table.cart {
  width: 100% !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  overflow: hidden !important;
}

/* Faixa azul superior nos títulos da tabela */
.shop_table.cart th {
  background-color: #e0f7ff !important;
  color: #1e3a8a !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  font-size: 0.85rem !important;
  padding: 14px !important;
  border: none !important;
}

/* Linhas dos produtos */
.shop_table.cart td {
  padding: 18px 14px !important;
  border-bottom: 1px solid #f1f5f9 !important;
  vertical-align: middle !important;
}

/* Centralizações numéricas */
.shop_table.cart td.product-price,
.shop_table.cart td.product-quantity,
.shop_table.cart td.product-subtotal {
  text-align: center !important;
}

/* Arredonda as fotos dos pijamas no carrinho */
.shop_table.cart td.product-thumbnail img {
  width: 65px !important;
  height: auto !important;
  border-radius: 8px !important;
  object-fit: cover !important;
}

/* Ajusta o espaçamento do botão Aplicar Cupom */
.shop_table.cart .coupon {
  display: inline-flex !important;
  gap: 10px !important;
}
/* Oculta a seção de produtos recomendados no carrinho */
.woocommerce-cart .cross-sells {
  display: none !important;
}

/* Notificação de Compra*/
.notificationx-content{
	width: 100% !important;
}

.woocommerce table.shop_table tbody th, .woocommerce table.shop_table tfoot td, .woocommerce table.shop_table tfoot th{
  text-wrap: auto !important;
}


/* Esconde os botões e deixa que o JavaScript trabalhe em segundo plano *
.daniel-loadmore-container,
.daniel-loadmore-news-container,
.daniel-loadmore-offers-container {
    opacity: 0;
    height: 0;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    pointer-events: none;
}*/

#lostpasswordform div.g-recaptcha, #loginform div.g-recaptcha, #registerform div.g-recaptcha {
    justify-items: center !important;
}


/* ==========================================================================
   BANNER HERO RESPONSIVO COM SUPORTE AO PERSONALIZAR
   ========================================================================== */
.dp-hero-banner {
  width: 100%;
  background: var(--gradient-soft);
  padding: 48px 24px;
  /*border-radius: 24px;*/
  margin: 80px 0;
  box-sizing: border-box;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(29, 167, 230, 0.08);
}

.dp-banner-container {
  max-width: 1140px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.dp-banner-content {
  flex: 1;
  max-width: 580px;
}

.dp-banner-badge {
  display: inline-block;
  background-color: rgba(29, 167, 230, 0.12);
  color: #0284c7;
  font-size: 13px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 50px;
  letter-spacing: 0.5px;
  margin-bottom: 16px;
  text-transform: uppercase;
}

.dp-banner-title {
  font-size: 38px;
  line-height: 1.2;
  font-weight: 800;
  color: var(--secsub);
  margin: 0 0 16px 0;
}

.dp-banner-description {
  font-size: 16px;
  line-height: 1.6;
  color: #475569;
  margin: 0 0 28px 0;
}

.dp-banner-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.dp-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background-color: #1da7e6;
  color: #ffffff !important;
  font-size: 16px;
  font-weight: 700;
  padding: 14px 28px;
  border-radius: 50px;
  text-decoration: none !important;
  box-shadow: 0 8px 20px rgba(29, 167, 230, 0.35);
  transition: all 0.3s ease;
}

.dp-btn-primary:hover {
  background-color: #0284c7;
  transform: translateY(-3px);
  box-shadow: 0 12px 25px rgba(29, 167, 230, 0.45);
}

.dp-banner-subtext {
  font-size: 14px;
  font-weight: 600;
  color: #64748b;
}

/* Mídia / Imagem */
.dp-banner-media {
  flex: 1;
  display: flex;
  justify-content: center;
}

.dp-media-card {
  position: relative;
  width: 100%;
  max-width: 420px;
}

.dp-banner-img {
  width: 100%;
  height: 350px;
  object-fit: cover;
  border-radius: 20px;
  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.12);
  display: block;
}

.dp-floating-tag {
  position: absolute;
  bottom: -15px;
  left: -15px;
  background: #ffffff;
  padding: 10px 18px;
  border-radius: 16px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 2px solid #e0f2fe;
}

.dp-floating-tag .tag-number {
  font-size: 18px;
  font-weight: 900;
  color: #ef4444;
  line-height: 1;
}

.dp-floating-tag .tag-label {
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
}

/* Responsivo para Celulares */
@media (max-width: 768px) {
  .dp-banner-container {
    flex-direction: column;
    text-align: center;
    gap: 28px;
  }

  .dp-banner-title {
    font-size: 28px;
  }

  .dp-banner-actions {
    justify-content: center;
    flex-direction: column;
    gap: 12px;
  }

  .dp-btn-primary {
    width: 100%;
    justify-content: center;
  }

  .dp-floating-tag {
    bottom: 10px;
    left: 10px;
  }

  .dp-banner-img {
    height: 260px;
  }
}