/**
 * Volch Loja - Estilos da Aplicação e Adaptadores de Layout
 * Complementa o Design System Editorial Noir
 */

html {
  scroll-behavior: smooth;
  scroll-padding-top: 180px;
}

#vitrine {
  scroll-margin-top: 180px;
}

/* Container Mestre com Margens do Design System */
.container-editorial {
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--margin-desktop);
  padding-right: var(--margin-desktop);
}

@media (max-width: 768px) {
  .container-editorial {
    padding-left: var(--margin-mobile);
    padding-right: var(--margin-mobile);
  }
}

/* Header Transparente -> Sólido ao Rolar a Página */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1050;
  background-color: transparent !important;
  background-image: linear-gradient(180deg, rgba(28,21,18,0.5) 0%, rgba(28,21,18,0) 100%) !important;
  color: #F1ECE4 !important;
  transition: background-color 200ms ease, color 200ms ease !important;
  border: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  outline: none !important;
  pointer-events: none;
  height: auto;
  min-height: 70px;
  display: flex;
  flex-direction: column;
}

.site-header-main {
  width: 100%;
  height: 80px;
  display: flex;
  align-items: center;
  pointer-events: none;
}

.site-header a,
.site-header button,
.site-header input,
.site-header form,
.site-header select,
.site-header span {
  pointer-events: auto;
  color: inherit !important;
  transition: color 200ms ease;
  border: none !important;
  border-bottom: none !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

.site-header a:hover,
.site-header button:hover {
  color: var(--color-primary) !important; /* Terracota */
}

.site-header.scrolled,
.site-header.header-solid,
.site-header.has-search-open {
  background-color: #1C1512 !important;
  background-image: none !important;
  border: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

#catalogo,
#vitrine {
  scroll-margin-top: 85px;
}

.site-header .nav-link {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #ffffff; /* Sempre claro sobre o header escuro */
  text-decoration: none;
  padding: 8px 16px;
  transition: all 0.2s ease;
}

.site-header .nav-link:hover {
  color: #d78652 !important;
  opacity: 1;
}

/* Dimensionamento dos botões de ação no Header (Ícones Minimalistas) */
.header-action-btn {
  width: 40px !important;
  height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  transition: opacity 0.2s ease, transform 0.2s ease !important;
}

.header-action-btn:hover {
  opacity: 0.65 !important;
  transform: scale(1.08);
}

/* Painel de Busca em Segunda Faixa (Mobile & Desktop) */
.mobile-search-panel {
  width: 100%;
  padding: 12px 0 14px;
  background-color: #1C1512;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: none;
  pointer-events: auto;
}

.mobile-search-panel.is-open {
  display: block;
  animation: searchSlideDown 200ms ease forwards;
}

@keyframes searchSlideDown {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.mobile-search-form {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 46px;
  gap: 8px;
  align-items: center;
}

.mobile-search-input {
  width: 100%;
  min-width: 0;
  height: 46px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: #F1ECE4;
  color: #1C1512;
  font-family: var(--font-body);
  font-size: 16px;
  outline: none;
  border-radius: 0px !important;
  box-sizing: border-box;
}

.mobile-search-input::placeholder {
  color: rgba(28, 21, 18, 0.60);
  font-size: 13px;
  letter-spacing: 0.08em;
}

.mobile-search-input:focus {
  border-color: #A45E31;
  box-shadow: 0 0 0 2px rgba(164, 94, 49, 0.25);
}

.mobile-search-submit {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(241, 236, 228, 0.4);
  background: transparent;
  color: #F1ECE4;
  border-radius: 0px !important;
  cursor: pointer;
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;
}

.mobile-search-submit:hover {
  background: #A45E31;
  border-color: #A45E31;
  color: #FFFFFF;
}

@media (max-width: 991.98px) {
  .site-header-main {
    height: 70px;
  }
  .site-header-actions {
    gap: 2px !important;
  }
  .header-action-btn {
    width: 38px !important;
    height: 38px !important;
  }
}

/* Logo da marca com transição */
.site-logo-img {
  height: 152px;
  width: auto;
  display: block;
}

/* Offcanvas Drawer do Carrinho Lateral */
.carrinho-drawer {
  z-index: 1090 !important;
  background-color: var(--color-surface) !important;
  color: var(--color-on-surface) !important;
  border-left: 1px solid var(--color-border-hairline) !important;
}

.offcanvas-backdrop {
  z-index: 1080 !important;
}

/* Drawer Mobile Offcanvas */
#menuMobileDrawer {
  z-index: 1095 !important;
  background-color: #FFFFFF !important;
}

.carrinho-drawer .offcanvas-header {
  border-bottom: 1px solid var(--color-border-hairline);
  padding: 24px var(--margin-mobile);
}

.carrinho-drawer .offcanvas-body {
  padding: 24px var(--margin-mobile);
}

.carrinho-drawer .offcanvas-footer {
  border-top: 1px solid var(--color-border-hairline);
  padding: 24px var(--margin-mobile);
  background-color: var(--color-surface-container-low) !important;
}

.cart-item-card {
  display: flex;
  gap: 16px;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--color-border-hairline);
}

.cart-item-img {
  width: 80px;
  height: 100px;
  object-fit: cover;
  background-color: var(--color-surface);
}

/* Layout do Painel Administrativo */
.admin-wrapper {
  display: flex;
  min-height: 100vh;
  background-color: var(--color-background);
  position: relative;
  overflow-x: hidden;
  max-width: 100vw;
}

.admin-sidebar {
  width: 260px;
  background-color: var(--color-primary-container); /* Brand Dark / Marrom Marfim #1C1512 */
  border-right: 1px solid var(--color-border-hairline);
  padding: 32px 0;
  flex-shrink: 0;
  z-index: 1060;
  color: #ffffff !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}

.admin-sidebar .admin-brand {
  padding: 0 24px 32px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 24px;
  color: #ffffff !important;
}

.admin-sidebar .admin-brand .badge-noir,
.admin-sidebar .badge-noir {
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
  background-color: rgba(255, 255, 255, 0.08) !important;
  font-weight: 600;
}

.admin-sidebar .label-sm,
.admin-sidebar .text-muted,
.admin-sidebar .text-white-50 {
  color: rgba(255, 255, 255, 0.6) !important;
}

.admin-sidebar .border-top {
  border-top-color: rgba(255, 255, 255, 0.12) !important;
}

.admin-sidebar .nav-item {
  list-style: none;
}

.admin-sidebar .nav-link-admin {
  display: block;
  padding: 12px 24px;
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8) !important;
  text-decoration: none;
  transition: all 0.3s ease;
  border-radius: var(--border-radius-default);
}

.admin-sidebar .nav-link-admin:hover,
.admin-sidebar .nav-link-admin.active {
  background-color: var(--color-primary); /* Terracota */
  color: #ffffff !important;
  box-shadow: none;
}

.admin-sidebar .nav-link-admin.text-danger {
  color: #ff8a80 !important;
}

.admin-sidebar .nav-link-admin.text-danger:hover {
  background-color: rgba(255, 138, 128, 0.15) !important;
  color: #ff8a80 !important;
}

.admin-content {
  flex-grow: 1;
  padding: 40px var(--margin-desktop);
  background-color: var(--color-background);
  color: var(--color-on-surface);
  min-width: 0;
  max-width: 100%;
}

.admin-header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 24px;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--color-border-hairline);
  flex-wrap: wrap;
  gap: 16px;
}

/* Sidebar Offcanvas/Drawer Overlay para Tablet e Mobile (< 1200px) */
@media (max-width: 1199.98px) {
  .admin-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    height: 100vh;
    width: 280px;
    transform: translateX(-100%);
    box-shadow: none;
    overflow-y: auto;
  }

  .admin-sidebar.show {
    transform: translateX(0);
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
  }

  .admin-content {
    padding: 24px 16px !important;
    width: 100% !important;
    max-width: 100vw !important;
  }

  body.admin-sidebar-open {
    overflow: hidden !important;
  }
}

/* Overlay Backdrop do Menu Admin */
.admin-sidebar-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(28, 21, 18, 0.6);
  z-index: 1055;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.admin-sidebar-backdrop.show {
  opacity: 1;
  visibility: visible;
}

/* Tabelas Administrativas no Padrão Noir */
.table-noir {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 32px;
}

.table-noir th {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-primary);
  text-align: left;
  background-color: var(--color-surface-container);
  color: var(--color-on-surface);
}

.table-noir td {
  font-family: var(--font-body);
  font-size: 14px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-border-hairline);
  color: var(--color-on-surface);
}

.table-noir tbody tr:hover {
  background-color: var(--color-surface-container-low);
}

/* Badges e Status */
.badge-noir {
  display: inline-block;
  padding: 4px 8px;
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid var(--color-primary);
  border-radius: var(--border-radius-default);
  color: #ffffff !important;
  background-color: var(--color-primary-container);
}

.badge-noir-danger {
  border-color: var(--color-error);
  color: var(--color-error);
}

.badge-noir-success {
  border-color: var(--color-primary);
  background-color: var(--color-primary);
  color: var(--color-on-primary);
}

/* Rodapé Institucional */
.site-footer {
  background-color: #140f0d; /* Dark Ink */
  border-top: 1px solid var(--color-border-hairline);
  padding: 64px 0 32px 0;
  margin-top: var(--section-gap);
  color: #f1ece4 !important;
}

.site-footer a {
  color: rgba(241, 236, 228, 0.56);
  text-decoration: none;
  transition: color 0.3s ease;
}

.site-footer a:hover {
  color: #d78652 !important;
}

/* Alertas de Notificação do Sistema (Preto com Fonte Branca - Sem Rosa) */
.alert-noir-danger {
  background-color: #000000 !important;
  color: #ffffff !important;
  border-left: 4px solid #ba1a1a !important;
  border-radius: var(--border-radius-default);
  padding: 14px 20px;
  font-family: var(--font-heading);
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.alert-noir-success {
  background-color: #000000 !important;
  color: #ffffff !important;
  border-left: 4px solid var(--color-primary) !important;
  border-radius: var(--border-radius-default);
  padding: 14px 20px;
  font-family: var(--font-heading);
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Excel Filter Buttons em Cabeçalhos de Tabela */
.btn-excel-filter-trigger {
  background-color: #333333 !important;
  color: #ffffff !important;
  border: 1px solid #ffffff !important;
  border-radius: 0px !important;
  padding: 4px 9px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  margin-left: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
  transition: all 0.2s ease !important;
}

.btn-excel-filter-trigger:hover,
.btn-excel-filter-trigger.show,
.btn-excel-filter-trigger.is-filtered {
  background-color: #ffc107 !important;
  color: #000000 !important;
  border-color: #000000 !important;
  font-weight: 800 !important;
  opacity: 1 !important;
}

/* Previne corte dos menus dropdown estilo Excel nas tabelas responsivas */
.table-responsive {
  overflow: visible !important;
}

@media (max-width: 991px) {
  .table-responsive {
    overflow-x: auto !important;
  }
}

.excel-filter-dropdown {
  border: 1px solid #ffffff !important;
  border-radius: 0px !important;
  background-color: #111111 !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.7) !important;
  z-index: 2050 !important;
}

.excel-filter-dropdown .btn-sort-asc,
.excel-filter-dropdown .btn-sort-desc {
  display: block !important;
  width: 100% !important;
  clear: both !important;
  float: none !important;
  margin-bottom: 4px !important;
  white-space: normal !important;
}

/* Ordenação de Elementos Mobile na PDP */
@media (max-width: 767.98px) {
  .pdp-mobile-order-1 { order: 1 !important; }
  .pdp-mobile-order-2 { order: 2 !important; }
  .pdp-mobile-order-3 { order: 3 !important; }
  .pdp-mobile-order-4 { order: 4 !important; }
  .pdp-mobile-order-5 { order: 5 !important; }
  .pdp-mobile-order-6 { order: 6 !important; }
  .pdp-mobile-order-7 { order: 7 !important; }
  .pdp-mobile-order-8 { order: 8 !important; }
  .pdp-mobile-order-9 { order: 9 !important; }
}

/* Carrossel de Mídias PDP - Urban Earth Editorial (Slide Horizontal) */
.pdp-carousel {
  position: relative;
  width: 100%;
  max-width: 85%; /* Reduzido o tamanho da foto conforme solicitado */
  aspect-ratio: 3 / 4;
  background-color: var(--color-surface-container);
  overflow: hidden;
  border: 1px solid var(--color-border-hairline);
  border-radius: var(--border-radius-lg); /* Cantos arredondados sutilmente */
}

.pdp-carousel-inner {
  display: flex; /* Disposição horizontal */
  width: 100%;
  height: 100%;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Animação suave do slide */
}

.pdp-carousel-item {
  flex-shrink: 0; /* Impede encolhimento das imagens no flex */
  width: 100%;
  height: 100%;
  position: relative;
}

.pdp-carousel-item.active {
  z-index: 2;
}

.pdp-carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Efeito mini zoom de 1.05x em hover na imagem ativa */
.pdp-carousel:hover .pdp-carousel-item.active img {
  transform: scale(1.05);
}

/* Setas de navegação minimalistas */
.pdp-carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  color: var(--color-on-surface);
  border: none;
  font-size: 24px;
  font-weight: 300;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.3s ease, background-color 0.3s ease;
}

/* Mostra as setas ao passar o mouse no carrossel */
.pdp-carousel:hover .pdp-carousel-btn {
  opacity: 0.6;
}

.pdp-carousel-btn:hover {
  opacity: 1 !important;
  background-color: rgba(0, 0, 0, 0.05);
}

.pdp-carousel-btn-prev {
  left: 8px;
}

.pdp-carousel-btn-next {
  right: 8px;
}

/* Miniaturas/Thumbnails */
.pdp-carousel-thumbnails {
  display: flex;
  gap: 12px;
  margin-top: 12px;
  flex-wrap: wrap;
  max-width: 85%; /* Alinhado com a largura reduzida do carrossel */
}

.pdp-carousel-thumb {
  width: 64px;
  aspect-ratio: 3 / 4;
  cursor: pointer;
  opacity: 0.5;
  border: 1px solid transparent;
  transition: opacity 0.3s ease, border-color 0.3s ease;
  overflow: hidden;
  background-color: var(--color-surface-container);
  border-radius: var(--border-radius-default); /* Cantos arredondados nas miniaturas */
}

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

.pdp-carousel-thumb:hover {
  opacity: 0.8;
}

.pdp-carousel-thumb.active {
  opacity: 1;
  border-color: var(--color-primary);
}

/* Créditos Editorial na PDP */
.pdp-creditos {
  border-top: 1px solid var(--color-border-hairline) !important;
}

.pdp-creditos-link {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-on-surface-variant) !important;
  transition: color 0.3s ease, opacity 0.3s ease;
  opacity: 0.85;
}

.pdp-creditos-link:hover {
  color: var(--color-primary) !important;
  opacity: 1;
}

.pdp-creditos-link svg {
  transition: transform 0.3s ease;
}

.pdp-creditos-link:hover svg {
  transform: scale(1.15);
}

/* Overrides globais para o Painel Administrativo */
.admin-wrapper .card,
.admin-wrapper .modal-content {
  border-radius: var(--border-radius-default) !important;
  border: 1px solid var(--color-border-hairline) !important;
  box-shadow: none !important;
}

.admin-wrapper .card-header {
  border-radius: 0 !important;
  border-bottom: 1px solid var(--color-border-hairline) !important;
  background-color: var(--color-surface-container) !important;
}

.admin-wrapper .form-control,
.admin-wrapper .form-select,
.admin-wrapper .input-group .form-control {
  color: #1C1512 !important;
  background-color: var(--color-surface-container-lowest) !important;
  border-radius: var(--border-radius-default) !important;
  border: 1px solid var(--color-border-hairline) !important;
  box-shadow: none !important;
}

.admin-wrapper .input-group .btn {
  border-radius: var(--border-radius-default) !important;
  border: 1px solid var(--color-border-hairline) !important;
  box-shadow: none !important;
}

.admin-wrapper .btn-dark,
.admin-wrapper .btn-primary {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: var(--color-on-primary) !important;
  border-radius: var(--border-radius-default) !important;
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: uppercase;
}

.admin-wrapper .btn-dark:hover,
.admin-wrapper .btn-primary:hover {
  background-color: var(--color-primary-container) !important;
  border-color: var(--color-primary-container) !important;
}

.admin-wrapper .btn-outline-dark {
  border-radius: var(--border-radius-default) !important;
  border: 1px solid var(--color-outline) !important;
  color: var(--color-on-surface) !important;
  background-color: transparent !important;
}

.admin-wrapper .btn-outline-dark:hover {
  background-color: var(--color-outline) !important;
  color: #ffffff !important;
}

.admin-wrapper .badge {
  border-radius: var(--border-radius-default) !important;
}

.admin-wrapper .badge.bg-dark,
.admin-wrapper .badge-dark,
.badge.bg-dark,
.badge-dark {
  background-color: var(--color-primary-container) !important;
  color: #ffffff !important;
}

.admin-wrapper .bg-dark,
.admin-wrapper .bg-primary-container {
  color: #ffffff !important;
}

.admin-wrapper table,
.admin-wrapper .table {
  border-color: var(--color-border-hairline) !important;
}

.admin-wrapper table th,
.admin-wrapper .table th {
  background-color: var(--color-surface-container-high) !important;
  color: var(--color-on-surface) !important;
  border-bottom: 2px solid var(--color-border-hairline) !important;
  font-family: var(--font-body);
  font-weight: 700;
}

/* Correção de Stacking Context e Z-Index para Modais Bootstrap */
.modal {
  z-index: 1065 !important;
}

.modal-backdrop {
  z-index: 1055 !important;
}

.admin-wrapper table td,
.admin-wrapper .table td {
  border-bottom: 1px solid var(--color-border-hairline) !important;
  background-color: transparent !important;
}

/* Tipografia Code e Monospace - Sem Rosa */
code, kbd, samp, pre {
  color: #1C1512 !important;
  font-family: var(--font-monospace, monospace) !important;
  font-weight: 700 !important;
  background-color: transparent !important;
}

.admin-sidebar code,
.bg-dark code,
.text-white code,
.noir-toast code {
  color: #ffffff !important;
}

/* Toast de Notificação do Painel Admin (Canto Inferior Direito por 3s) */
.noir-toast {
  position: fixed !important;
  bottom: 24px !important;
  right: 24px !important;
  z-index: 1099 !important;
  background-color: #000000 !important;
  color: #ffffff !important;
  padding: 14px 24px !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  font-family: var(--font-heading) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  border-radius: 0px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
  max-width: calc(100vw - 32px) !important;
  width: max-content !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  white-space: normal !important;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  pointer-events: none;
}

.noir-toast.show {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Fallback Definitivo para Computadores Antigos (Modo de Baixo Desempenho) */
.low-performance .marquee-track,
.low-performance .noir-marquee-content,
.low-performance .lookbook-marquee-track {
  animation: none !important;
  transform: none !important;
  will-change: auto !important;
}

.low-performance .site-header.scrolled {
  backdrop-filter: none !important;
  background-color: #1C1512 !important;
}

.low-performance * {
  animation-duration: 0.01ms !important;
  animation-delay: 0s !important;
  transition-duration: 0.01ms !important;
  transition-delay: 0s !important;
  backdrop-filter: none !important;
  filter: none !important;
  will-change: auto !important;
}

.low-performance .reveal-image,
.low-performance .is-revealed,
.low-performance .is-visible {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  transition: none !important;
}

.marquee-container,
.noir-marquee-container {
  position: relative;
  isolation: isolate;
  overflow: clip;
}

/* Classes para Quebra de Linha Responsiva Editorial */
.responsive-phrase-part {
  display: inline;
}

.lookbook-title-desktop {
  display: inline;
}

.lookbook-title-mobile {
  display: none;
}

/* ==========================================================================
   Ajustes de Responsividade Mobile — Seção de Benefícios e Sob Medida
   ========================================================================== */
@media (max-width: 767px) {
  .responsive-phrase-part {
    display: block !important;
    text-align: center !important;
  }

  .lookbook-title-desktop {
    display: none !important;
  }

  .lookbook-title-mobile {
    display: block !important;
  }
  /* Seção de Benefícios (Text Stagger) */
  .text-stagger-section {
    padding: 36px 20px !important;
  }
  
  .text-stagger-container {
    gap: 20px !important;
  }
  
  .text-stagger-hover {
    font-size: 20px !important;
    line-height: 1.35 !important;
    letter-spacing: 0.02em !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    white-space: normal !important;
    padding: 0 10px !important;
  }
  
  /* Seção Sob Medida */
  .volch-lookbook-section {
    padding: 48px 0 36px !important;
  }

  .lookbook-header-container {
    padding: 0 20px !important;
    margin-bottom: 24px !important;
  }

  .lookbook-title {
    font-size: 22px !important;
    line-height: 1.35 !important;
    letter-spacing: -0.01em !important;
    margin-bottom: 12px !important;
    padding: 0 8px !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
  }

  .lookbook-description {
    font-size: 14px !important;
    line-height: 1.55 !important;
    padding: 0 10px !important;
    max-width: 100% !important;
  }
}

/* ==========================================================================
   Faixa Institucional Animada (Marquee) Integrada ao Header
   ========================================================================== */
.marquee-container {
  overflow: hidden;
  width: 100%;
  background-color: #FFFFFF !important;
  background: #FFFFFF !important;
  background-image: none !important;
  color: #4E4541 !important;
  padding: 8px 0; /* Menos alto que antes para não parecer banner pesado */
  white-space: nowrap;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #D9D1C7 !important; /* Borda muted suave */
  z-index: 5;
  position: relative;
}

.marquee-container *,
.marquee-container::before,
.marquee-container::after,
.marquee-track,
.marquee-track::before,
.marquee-track::after,
.marquee-content {
  background-color: #FFFFFF !important;
  background: #FFFFFF !important;
  background-image: none !important;
}

.marquee-track {
  display: inline-flex;
  white-space: nowrap;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
  animation: marquee-scroll 45s linear infinite; /* Animacao um pouco mais rapida e confortavel */
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.marquee-content {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding-right: 1.5rem;
  flex-shrink: 0;
  color: #4E4541 !important;
}

@keyframes marquee-scroll {
  0% {
    transform: translate3d(-50%, 0, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .marquee-track {
    animation: none;
    white-space: normal;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
    padding: 0 1rem;
  }
  .marquee-content {
    padding-right: 0;
  }
}

/* --- BARRA DE NAVEGAÇÃO PREMIUM VOLCH (Substituindo o antigo Marquee) --- */
.volch-premium-nav-bar {
  width: 100%;
  background-color: #1C1512 !important; /* Cor Brand Dark para visibilidade e contraste dos links */
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; /* Linha de divisão elegante */
  box-sizing: border-box;
  display: flex; /* Alinhamento flexbox principal para centralização perfeita no site */
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 100;
  overflow: visible; /* Permite visualizar os dropdowns flutuantes */
  height: 54px;
  
  /* Animação de Entrada da Barra */
  transform: translateY(-100%);
  animation: slideInBar 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: 0.2s;
}

@keyframes slideInBar {
  to {
    transform: translateY(0);
  }
}

.premium-nav-container {
  width: 100%;
  max-width: 1400px;
  display: flex;
  align-items: center;
  justify-content: center; /* Centralização horizontal absoluta */
  gap: clamp(24px, 5vw, 64px); /* Espaçamento central elegante entre logo e links */
  padding: 0 5vw;
  height: 100%;
}

.premium-nav-brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  height: 100%;
  text-decoration: none;
}

.premium-nav-logo {
  height: clamp(26px, 3.8vw, 34px);
  width: auto;
  display: block;
  filter: brightness(0) invert(1); /* Assinatura sempre branca para contraste em fundo escuro */
  
  /* Animação de Entrada como se estivesse desenhando (clip-path horizontal) */
  clip-path: inset(0 100% 0 0);
  animation: drawSignature 1.4s cubic-bezier(0.25, 1, 0.5, 1) forwards;
  animation-delay: 0.6s;
}

@keyframes drawSignature {
  to {
    clip-path: inset(0 0 0 0);
  }
}

.premium-nav-links-wrapper {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3.5vw, 40px);
  height: 100%;
}

.premium-nav-link,
.premium-nav-item-wrapper {
  font-family: var(--font-body);
  font-size: clamp(11px, 1.3vw, 12px);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-decoration: none;
  text-transform: uppercase;
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 100%;
  opacity: 1;
  transform: none;
  transition: color 0.3s ease;
}

/* Wrapper de itens com submenus */
.premium-nav-item-wrapper {
  position: relative; /* Contexto para posicionamento absoluto do submenu */
  cursor: pointer;
}

/* Dropdowns dos Submenus */
.premium-submenu {
  position: absolute; /* Mudado de fixed para absolute para alinhar com o link do menu */
  top: 100%; /* Fica logo abaixo do item no menu premium no desktop */
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background-color: #1C1512 !important; /* Cor Brand Dark da marca */
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 14px 20px;
  display: flex;
  flex-direction: column; /* Coluna vertical no desktop */
  gap: 10px;
  min-width: 195px;
  z-index: 1055; /* Acima do site-header que é 1050 */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 250ms ease, transform 250ms ease, visibility 250ms ease;
  border-radius: 0px !important; /* Cantos vivos 0px do DS */
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5); /* Sombra fina e sutil de overlay */
}

/* Quando ativo */
.premium-submenu.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* Links do Submenu */
.premium-submenu-link {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: #FFFFFF !important;
  transition: color 200ms ease, padding-left 200ms ease;
  white-space: nowrap;
  display: block;
  text-align: left;
  width: 100%;
  border: none !important;
  background: none !important;
}

.premium-submenu-link:hover {
  color: #A45E31 !important; /* Terracota */
  padding-left: 4px; /* Deslocamento elegante no hover */
}

/* Força cores visíveis com alta especificidade (Garante contra herança de .site-header a) */
.premium-nav-link {
  color: #1C1512 !important; /* Sempre escuro em contraste com o fundo claro do cabeçalho */
}

.premium-nav-link:hover {
  color: #A45E31 !important; /* Terracota ao passar o mouse */
}

/* Efeito de Hover Sutil (Sublinhado fino que surge do centro) */
.premium-nav-link::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #1C1512;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.premium-nav-link:hover::after {
  transform: scaleX(1);
  background-color: #A45E31;
}

@keyframes fadeInItem {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- ADAPTAÇÃO RESPONSIVA MOBILE (Scroll Horizontal Controlado) --- */
@media (max-width: 767px) {
  /* No mobile, o submenu flutua com position: fixed abaixo do cabeçalho */
  .premium-submenu {
    position: fixed; /* Fixo em relação à tela */
    top: 104px; /* Fica logo abaixo da barra premium (50px header + 54px barra) */
    left: 0;
    right: 0;
    margin: 0 auto; /* Centraliza a caixa preta na tela do mobile */
    width: 100vw; /* Ocupa exatamente a largura da tela (100vw) */
    height: auto;
    max-height: 380px; /* Limite de altura seguro */
    overflow-y: auto; /* Rolagem vertical clássica */
    transform: none;
    background-color: #1C1512 !important; /* Fundo Brand Dark */
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 12px 20px;
    display: flex !important;
    flex-direction: column; /* Lista vertical, um abaixo do outro */
    gap: 12px;
    z-index: 1060; /* Acima do site-header */
    
    /* Estado Padrão Oculto */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 250ms ease, visibility 250ms ease;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
  }

  .premium-submenu::-webkit-scrollbar {
    display: none; /* Oculta barra de rolagem */
  }

  /* Quando o submenu estiver ativo, exibe no mobile */
  .premium-submenu.open {
    transform: none;
    display: flex !important;
  }

  .premium-submenu-link {
    display: block;
    padding: 4px 0;
    font-size: 11px;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.85) !important;
    text-transform: uppercase;
    font-weight: 700;
    text-align: left;
    width: 100%;
    border: none !important;
    background: none !important;
  }

  .premium-submenu-link:hover {
    color: #A45E31 !important;
    padding-left: 6px;
  }

  .premium-nav-container {
    padding: 0 16px;
    justify-content: center;
    gap: 16px;
  }
  
  .premium-nav-brand {
    display: none !important;
  }
  
  .premium-nav-links-wrapper {
    flex-grow: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(8px, 3.5vw, 20px);
    padding: 0;
  }
  
  .premium-nav-links-wrapper::-webkit-scrollbar {
    display: none; /* Oculta scrollbar Chrome/Safari */
  }
  
  .premium-nav-link {
    display: inline-block;
    line-height: 54px;
    white-space: nowrap;
    font-size: clamp(10px, 2.8vw, 12px) !important;
  }
  
  .premium-nav-link::after {
    bottom: 8px;
  }
}

/* Efeito de Hover nas Fotos de SKU (Mídias) no Painel Administrativo */
.photo-container-hover:hover .opcoes-foto-hover {
  display: flex !important;
}

/* Ajustes de Espaçamento e Otimização do Header em Telas Mobile */
@media (max-width: 576px) {
  .site-header-main {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  .header-action-btn {
    width: 36px !important;
    height: 36px !important;
  }
  .volch-brand-logo {
    height: 23px !important;
  }
  .site-header-actions {
    gap: 2px !important;
  }
}

/* --- NEUTRALIZAÇÃO DO CARD DO CATÁLOGO PARA O GRID DE 6 COLUNAS (Prevenindo encavalamento e estiramento) --- */
#catalogo .expansion-card-item {
  flex: none !important;
  min-width: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  aspect-ratio: auto !important;
  min-height: 0 !important;
  height: auto !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 0px !important;
  overflow: visible !important;
  box-shadow: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 0 !important;
  margin: 0 !important;
}

#catalogo .btn-favorito-card {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  z-index: 10 !important;
  background: transparent !important;
}

#catalogo .btn-favorito-card .svg-heart-icon {
  stroke: #1C1512 !important; /* Coracao com contorno escuro para contraste no fundo claro */
  filter: none !important;      /* Sem sombras escuras e desfocadas do carrossel escuro */
}

#catalogo .btn-favorito-card.active .svg-heart-icon {
  fill: #A45E31 !important;    /* Preenchimento Terracota quando ativo */
  stroke: #A45E31 !important;
}

/* --- RESPONSIVIDADE DE RECUO DO CONTEÚDO (PADDING-TOP DO MAIN) --- */
.volch-main-container {
  padding-top: 60px !important;
}
@media (min-width: 992px) {
  .volch-main-container {
    padding-top: 72px !important; /* Altura do header de linha única no desktop */
  }
}

/* ==========================================================================
   REESTRUTURAÇÃO EDITORIAL DA HOME — VOLCH (15 SEÇÕES)
   ========================================================================== */

/* Hero Link Editorial (Texto simples, fonte fina, sem formato de botão) */
.volch-hero-link {
  display: inline-block;
  color: #FAF9F6 !important;
  font-family: var(--font-body), sans-serif;
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  text-decoration: none !important;
  padding-bottom: 6px;
  border: none !important;
  border-bottom: 1px solid rgba(250, 249, 246, 0.7) !important;
  background: transparent !important;
  border-radius: 0px !important;
  transition: border-bottom-color 0.3s ease, color 0.3s ease, opacity 0.3s ease;
}
.volch-hero-link:hover {
  border-bottom-color: #FFFFFF !important;
  color: #FFFFFF !important;
  opacity: 1;
}

/* Botões Editoriais (Urban Earth Editorial) */
.volch-btn-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #1C1512;
  color: #F1ECE4 !important;
  font-family: var(--font-body), sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 14px 28px;
  border-radius: 0px !important;
  border: 1px solid #1C1512;
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.volch-btn-cta:hover {
  background-color: #A45E31;
  border-color: #A45E31;
  color: #FFFFFF !important;
}

.volch-btn-editorial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  color: #1C1512 !important;
  font-family: var(--font-body), sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 13px 26px;
  border-radius: 0px !important;
  border: 1px solid #1C1512;
  transition: all 0.3s ease;
}
.volch-btn-editorial:hover {
  background-color: #1C1512;
  color: #F1ECE4 !important;
}

.volch-btn-editorial-light {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  color: #F1ECE4 !important;
  font-family: var(--font-body), sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 12px 24px;
  border-radius: 0px !important;
  border: 1px solid #F1ECE4;
  transition: all 0.3s ease;
}
.volch-btn-editorial-light:hover {
  background-color: #F1ECE4;
  color: #1C1512 !important;
}

/* 02 — Hero Section */
.volch-hero-section {
  position: relative;
  min-height: 90vh;
  height: 94vh;
  max-height: 1080px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background-color: #16110F;
}
.volch-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 52%;
  z-index: 0;
  animation: heroZoomIn 2.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes heroZoomIn {
  from { transform: scale(1.035); }
  to { transform: scale(1); }
}
.volch-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 16, 14, 0.25) 0%, rgba(20, 16, 14, 0.72) 100%);
  z-index: 1;
}
.volch-hero-content {
  position: relative;
  z-index: 2;
  margin-bottom: clamp(40px, 8vh, 80px);
  margin-left: clamp(20px, 6vw, 80px);
  max-width: 780px;
  animation: heroFadeUp 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
}
@keyframes heroFadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.volch-hero-scroll-indicator {
  position: absolute;
  bottom: 28px;
  right: clamp(20px, 6vw, 80px);
  z-index: 2;
  font-family: var(--font-body), sans-serif;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.25em;
  color: rgba(241, 236, 228, 0.65);
  text-transform: uppercase;
}

/* Assinatura Volch (Animação Canvas 24 FPS - Compacta & Editorial) */
.volch-signature-section {
  width: 100%;
  height: auto;
  min-height: 0;
  margin: 0 auto;
  padding: clamp(12px, 1.6vw, 20px) 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #FFFFFF;
  border-bottom: 1px solid rgba(28, 21, 18, 0.08);
  overflow: hidden;
  box-sizing: border-box;
}

.volch-signature-wrapper {
  position: relative;
  width: clamp(145px, 11vw, 185px);
  max-width: 100%;
  aspect-ratio: 552 / 408;
  flex: 0 0 auto;
  margin: 0 auto;
  overflow: hidden;
  background: transparent;
  display: block;
  opacity: 0;
  transform: translateY(6px);
  filter: blur(1px);
  will-change: opacity, transform, filter;
  transition: opacity 750ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 750ms cubic-bezier(0.22, 1, 0.36, 1),
              filter 750ms cubic-bezier(0.22, 1, 0.36, 1);
}

.volch-signature-wrapper.is-visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

.volch-signature-canvas,
.volch-signature-fallback {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent;
  border: none;
  outline: none;
}

@media (max-width: 1024px) {
  .volch-signature-section {
    padding: clamp(10px, 1.4vw, 16px) 14px;
  }
  .volch-signature-wrapper {
    width: clamp(135px, 15vw, 165px);
  }
}

@media (max-width: 600px) {
  .volch-signature-section {
    padding: 10px 12px;
  }
  .volch-signature-wrapper {
    width: min(40vw, 140px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .volch-signature-wrapper {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}

/* 03 — Novidades */
.volch-product-card-home {
  transition: transform 0.4s ease;
  text-align: center;
}
.volch-product-img-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 3;
  height: auto;
  overflow: hidden;
  border-radius: 0px !important;
  background-color: #FAF9F6;
  display: block;
}
.volch-product-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: contain !important;
  object-position: center center !important;
  background-color: #FAF9F6;
  display: block;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
}
.volch-product-card-home:hover .volch-product-img-wrapper img {
  transform: scale(1.025);
  opacity: 0.92;
}

/* 04 — Manifesto */
.volch-manifesto-section {
  background-color: #FFFFFF;
  color: #1C1512;
  padding: 60px 0;
  border-top: 1px solid rgba(28, 21, 18, 0.08);
  border-bottom: 1px solid rgba(28, 21, 18, 0.08);
}

/* 05 — Editorial / Coleção Prefácio Full-Width */
.volch-prefacio-section {
  width: 100%;
  position: relative;
  background-color: #14100E;
  border-top: 1px solid rgba(28, 21, 18, 0.08);
  border-bottom: 1px solid rgba(28, 21, 18, 0.08);
  display: flex;
  justify-content: center;
}
.volch-prefacio-img-container {
  position: relative;
  width: 100%;
  max-width: 1024px;
  margin: 0 auto;
  aspect-ratio: 1024 / 379;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #14100E;
}
.volch-prefacio-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  display: block;
}
.volch-prefacio-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: rgba(18, 14, 12, 0.38);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px 20px;
  z-index: 2;
}
.volch-prefacio-title {
  font-family: var(--font-heading), 'Cotoris Heavy', sans-serif;
  font-size: clamp(26px, 3.8vw, 52px);
  font-weight: 300;
  letter-spacing: 0.12em;
  color: #FAF9F6;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
}
.volch-prefacio-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  color: #FAF9F6 !important;
  font-family: var(--font-body), sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 13px 28px;
  border: 1px solid #FAF9F6;
  border-radius: 0px !important;
  box-shadow: none !important;
  transition: all 0.3s ease;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  background-color: rgba(28, 21, 18, 0.25);
}
.volch-prefacio-btn:hover,
.volch-prefacio-link:hover .volch-prefacio-btn {
  background-color: #FAF9F6;
  color: #1C1512 !important;
  border-color: #FAF9F6;
}
.volch-prefacio-link:hover .volch-prefacio-img {
  transform: scale(1.02);
}
.volch-prefacio-img {
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 06 — Feminino Campaign */
.volch-feminino-section {
  background-color: #FFFFFF;
  color: #1C1512;
  padding: 60px 0;
  border-top: 1px solid rgba(28, 21, 18, 0.08);
  border-bottom: 1px solid rgba(28, 21, 18, 0.08);
}

/* 07 — Vault / Acessórios */
.volch-vault-badge {
  font-family: var(--font-body), sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: #8C827A;
  text-transform: uppercase;
}

/* Barra de Benefícios Minimalista abaixo de Acessórios */
.volch-trust-bar {
  border-top: 1px solid rgba(28, 21, 18, 0.08);
  padding-top: 36px;
  margin-top: 48px;
}
.volch-benefit-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #1C1512;
  text-align: center;
}
.volch-benefit-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: #A45E31;
}
.volch-benefit-text {
  font-family: var(--font-body), sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #1C1512;
  line-height: 1.35;
}
.volch-benefit-sub {
  display: inline;
  font-size: 9px;
  letter-spacing: 0.08em;
  color: rgba(28, 21, 18, 0.6);
  font-weight: 300;
}

/* 08 — Sob Medida Editorial (Full-Width Horizontal & Processo Inline) */
.volch-sob-medida-editorial-section {
  width: 100%;
  position: relative;
  background-color: #F1ECE4;
  border-top: 1px solid rgba(28, 21, 18, 0.08);
  border-bottom: 1px solid rgba(28, 21, 18, 0.08);
  padding: 55px 0 65px 0;
}
.volch-sob-medida-header {
  text-align: center;
  margin-bottom: clamp(28px, 3.5vw, 44px);
}
.volch-sob-medida-tag {
  font-family: var(--font-body), sans-serif;
  font-size: 10px;
  letter-spacing: 0.3em;
  color: #A45E31;
}
.volch-sob-medida-headline {
  font-family: var(--font-heading), 'Cotoris Heavy', sans-serif;
  font-size: clamp(22px, 3.2vw, 40px);
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: 0.04em;
  color: #1C1512;
  text-align: center;
}
.volch-sob-medida-gallery-fullwidth {
  width: 100%;
  overflow: hidden;
  position: relative;
  background-color: #14100E;
}
.volch-sob-medida-photo-frame {
  position: relative;
  overflow: hidden;
  background-color: #E6E0D6;
  border-radius: 0;
  aspect-ratio: 2 / 3;
  width: 100%;
}
.volch-sob-medida-gallery-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  display: block;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.volch-sob-medida-photo-frame:hover .volch-sob-medida-gallery-img {
  transform: scale(1.04);
}
.volch-sob-medida-bottom-wrap {
  padding-top: clamp(32px, 4vw, 50px);
}
.volch-sob-medida-process-title-inline {
  font-family: var(--font-body), sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.25em;
  color: #1C1512;
  margin-bottom: 24px;
}
.volch-sob-medida-steps-inline {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  gap: clamp(14px, 2.4vw, 42px);
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
}
.volch-sob-medida-step-inline {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
}
.volch-step-num-inline {
  font-family: var(--font-heading), 'Cotoris Heavy', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #A45E31;
  flex-shrink: 0;
}
.volch-step-text-inline {
  font-family: var(--font-body), sans-serif;
  font-size: clamp(12px, 0.95vw, 14px);
  font-weight: 400;
  color: rgba(28, 21, 18, 0.85);
  letter-spacing: 0.01em;
}
.volch-sob-medida-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background-color: #1C1512;
  color: #F1ECE4 !important;
  font-family: var(--font-body), sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none !important;
  padding: 14px 32px;
  border: 1px solid #1C1512;
  border-radius: 0px !important;
  box-shadow: none !important;
  transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}
.volch-sob-medida-btn span:last-child {
  display: inline-block;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.volch-sob-medida-btn:hover {
  background-color: transparent;
  color: #1C1512 !important;
  border-color: #1C1512;
}
.volch-sob-medida-btn:hover span:last-child {
  transform: translateX(6px);
}

/* Animações Suaves de Entrada no Viewport */
.volch-sob-medida-img-col.reveal-on-scroll {
  opacity: 0;
  transform: scale(1.03);
  transition: opacity 1.1s cubic-bezier(0.25, 1, 0.5, 1), transform 1.2s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: opacity, transform;
}
.volch-sob-medida-img-col.reveal-on-scroll.is-revealed {
  opacity: 1;
  transform: scale(1);
}
.volch-sob-medida-content-col.reveal-on-scroll {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 1s cubic-bezier(0.25, 1, 0.5, 1) 0.12s, transform 1s cubic-bezier(0.25, 1, 0.5, 1) 0.12s;
  will-change: opacity, transform;
}
.volch-sob-medida-content-col.reveal-on-scroll.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* 09 — Processo */
.volch-processo-section {
  background-color: #FFFFFF;
  color: #1C1512;
  padding: 60px 0;
  border-top: 1px solid rgba(28, 21, 18, 0.08);
  border-bottom: 1px solid rgba(28, 21, 18, 0.08);
}
.volch-processo-num {
  font-family: var(--font-body), sans-serif;
  font-size: 28px;
  font-weight: 300;
  letter-spacing: 0.1em;
  color: #A45E31;
}



/* 13 — Assinatura Volch (ÚNICA FAIXA ANIMADA — CSS PURO) */
.volch-signature-ticker-section {
  background-color: #FFFFFF;
  color: #1C1512;
  padding: 16px 0;
  overflow: hidden;
  white-space: nowrap;
  border-top: 1px solid rgba(28, 21, 18, 0.08);
  border-bottom: 1px solid rgba(28, 21, 18, 0.08);
}
.volch-signature-ticker-track {
  display: inline-flex;
  width: max-content;
  will-change: transform;
  animation: volchTickerLoop 48s linear infinite;
}
.volch-signature-ticker-track:hover {
  animation-play-state: paused;
}
.volch-signature-ticker-item {
  font-family: var(--font-body), sans-serif;
  font-size: 10px;
  font-weight: 300 !important;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #1C1512;
  padding-right: 48px;
}
@keyframes volchTickerLoop {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Revelação Suave ao Entrar no Viewport */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-on-scroll.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   RESPONSIVIDADE MOBILE — VOLCH HOME (TABLET E SMARTPHONE)
   ========================================================================== */
@media (max-width: 991.98px) {
  /* Recuo do topo do conteúdo */
  .volch-main-container {
    padding-top: 56px !important;
  }

  /* Header Mobile */
  .site-header-main {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
  .site-header-main .volch-brand-logo {
    height: 22px !important;
  }
  .header-action-btn {
    min-width: 44px;
    min-height: 44px;
  }

  /* 02 — Hero Mobile (Centralização Horizontal Abaixo dos Rostos das Modelos) */
  .volch-hero-section {
    min-height: 82vh !important;
    height: 86vh !important;
    max-height: 720px !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    padding-bottom: clamp(34px, 6.5vh, 56px) !important;
  }
  .volch-hero-bg {
    object-position: center 20% !important;
  }
  .volch-hero-overlay {
    background: linear-gradient(180deg, rgba(20, 16, 14, 0.06) 0%, rgba(20, 16, 14, 0.2) 40%, rgba(20, 16, 14, 0.78) 76%, rgba(20, 16, 14, 0.92) 100%) !important;
  }
  .volch-hero-content {
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 0 !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 12px !important;
  }
  .volch-hero-content span {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .volch-hero-content h1 {
    font-size: clamp(24px, 7vw, 36px) !important;
    line-height: 1.18 !important;
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 100% !important;
  }
  .volch-hero-content > div {
    text-align: center !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
  }
  .volch-hero-content .volch-hero-link {
    display: inline-block !important;
    margin: 0 auto !important;
    text-align: center !important;
  }
  .volch-hero-content .volch-btn-cta {
    width: 100%;
    max-width: 300px;
    padding: 14px 20px !important;
  }

  /* Redução de Padding Vertical em Todas as Seções */
  #feminino,
  #novidades,
  #acessorios,
  #vault,
  #lookbook,
  #sobre-volch {
    padding-top: 38px !important;
    padding-bottom: 42px !important;
  }
  .volch-manifesto-section,
  .volch-feminino-section,
  .volch-processo-section {
    padding-top: 42px !important;
    padding-bottom: 42px !important;
  }

  /* 03, 05 & 07 — Produtos e Alturas Simétricas Mobile (Proporção Editorial 2:3 sem cortes) */
  .volch-product-img-wrapper {
    height: auto !important;
    aspect-ratio: 2 / 3 !important;
    max-height: 560px;
    background-color: #FAF9F6;
  }
  .volch-product-img-wrapper img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    background-color: #FAF9F6;
  }

  /* 05 — Editorial / Coleção Prefácio Mobile */
  .volch-prefacio-img-container {
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 1024 / 379 !important;
    min-height: unset !important;
  }
  .volch-prefacio-img {
    height: 100% !important;
    width: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
  }
  .volch-prefacio-title {
    font-size: clamp(14px, 4vw, 20px) !important;
    letter-spacing: 0.08em !important;
    margin-bottom: 8px !important;
  }
  .volch-prefacio-btn {
    padding: 6px 14px !important;
    font-size: 8.5px !important;
    letter-spacing: 0.14em !important;
  }

  /* Barra de Benefícios Mobile */
  .volch-trust-bar {
    padding-top: 24px !important;
    margin-top: 28px !important;
  }
  .volch-benefit-item {
    flex-direction: column !important;
    gap: 6px !important;
    padding: 6px 2px !important;
  }
  .volch-benefit-icon {
    width: 18px !important;
    height: 18px !important;
  }
  .volch-benefit-text {
    font-size: 10px !important;
    letter-spacing: 0.08em !important;
  }

  /* 05 — Feminino Mobile (Preservação Integral das Fotografias de Alta Costura) */
  #feminino .volch-product-img-wrapper {
    height: auto !important;
    aspect-ratio: 2 / 3 !important;
    max-height: 560px;
    background-color: #FAF9F6;
  }
  #feminino img,
  #feminino .volch-product-img-wrapper img {
    max-height: none !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    background-color: #FAF9F6;
  }

  /* 08 — Sob Medida Editorial Mobile */
  .volch-sob-medida-editorial-section {
    padding-top: 36px !important;
    padding-bottom: 45px !important;
  }
  .volch-sob-medida-header {
    margin-bottom: 20px !important;
  }
  .volch-sob-medida-headline {
    font-size: clamp(18px, 5.5vw, 24px) !important;
    letter-spacing: 0.03em !important;
  }
  .volch-sob-medida-bottom-wrap {
    padding-top: 26px !important;
  }
  .volch-sob-medida-process-title-inline {
    margin-bottom: 16px !important;
  }
  .volch-sob-medida-steps-inline {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
    max-width: 380px !important;
    margin: 0 auto !important;
  }
  .volch-sob-medida-step-inline {
    white-space: normal !important;
    gap: 8px !important;
  }
  .volch-step-text-inline {
    font-size: 13.5px !important;
    line-height: 1.45 !important;
  }
  .volch-sob-medida-btn {
    width: 100% !important;
    max-width: 320px !important;
    justify-content: center !important;
    padding: 13px 20px !important;
    gap: 12px !important;
  }

  /* 09 — Processo Mobile */
  .volch-processo-section .col-12 {
    margin-bottom: 12px;
  }
  .volch-processo-num {
    font-size: 22px !important;
  }



  /* 11 — Lookbook Mobile (Enquadramento Editorial Perfeito e Proporcional) */
  #lookbook .volch-lookbook-card {
    width: 100% !important;
    background-color: #16110F !important;
    overflow: hidden !important;
    margin-bottom: 0 !important;
  }
  #lookbook .volch-lookbook-card .volch-lookbook-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    background-color: #16110F !important;
    display: block !important;
  }
  .volch-lookbook-card-calca {
    height: 460px !important;
  }
  .volch-lookbook-card-calca .volch-lookbook-img {
    object-position: center 25% !important;
  }
  .volch-lookbook-card-saia {
    height: 380px !important;
  }
  .volch-lookbook-card-saia .volch-lookbook-img {
    object-position: center 35% !important;
  }
  .volch-lookbook-card-cropped {
    height: 270px !important;
  }
  .volch-lookbook-card-cropped .volch-lookbook-img {
    object-position: center center !important;
  }

  /* 12 — Sobre a Volch Mobile */
  #sobre-volch img {
    max-height: 340px !important;
  }

  /* 13 — Assinatura Volch Mobile */
  .volch-signature-ticker-section {
    padding: 12px 0 !important;
  }
  .volch-signature-ticker-item {
    font-size: 9px !important;
    font-weight: 300 !important;
    letter-spacing: 2.5px !important;
    padding-right: 36px !important;
  }


  /* Botões Editoriais Largura Adaptativa Mobile */
  .volch-btn-cta,
  .volch-btn-editorial,
  .volch-btn-editorial-light {
    min-height: 46px;
    padding: 13px 22px !important;
  }
}

@media (max-width: 575.98px) {
  /* Telas Estreitas (360px - 414px) */
  .volch-hero-content h1 {
    font-size: clamp(23px, 6.8vw, 28px) !important;
    line-height: 1.18 !important;
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .volch-btn-cta,
  .volch-btn-editorial,
  .volch-btn-editorial-light {
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
  }
  /* Lookbook em Telas Estreitas */
  .volch-lookbook-card-calca {
    height: 420px !important;
  }
  .volch-lookbook-card-saia {
    height: 350px !important;
  }
  .volch-lookbook-card-cropped {
    height: 250px !important;
  }
  .site-footer {
    padding-top: 50px !important;
    padding-bottom: 30px !important;
  }
  .footer-col-title {
    margin-bottom: 14px !important;
  }
}

/* ==========================================================================
   DROPDOWN EDITORIAL DE SUBCATEGORIAS (HOVER DESKTOP / ACORDEÃO MOBILE)
   ========================================================================== */
.volch-header-nav {
  position: relative;
}
.volch-nav-item {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.volch-nav-link {
  position: relative;
  color: #1C1512 !important;
  transition: color 0.2s ease, opacity 0.2s ease;
  padding: 10px 0;
  display: inline-block;
  white-space: nowrap;
}
.volch-nav-link:hover {
  color: #A45E31 !important;
}
.volch-nav-sep {
  color: #D9D1C7;
  font-size: 10px;
  user-select: none;
}

/* Dropdown Container Flutuante com Cantos Vivos e Sombra Sutil */
.volch-nav-has-dropdown {
  padding-bottom: 0;
}
.volch-nav-has-dropdown::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 14px;
}
.volch-dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 220px;
  background-color: #FAF9F6;
  border: 1px solid #D9D1C7;
  border-radius: 0px !important;
  box-shadow: 0 12px 30px rgba(28, 21, 18, 0.08);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1), transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.22s;
  z-index: 1100;
}
.volch-nav-has-dropdown:hover .volch-dropdown-menu,
.volch-nav-has-dropdown:focus-within .volch-dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.volch-dropdown-inner {
  padding: 12px 0;
  display: flex;
  flex-direction: column;
}
.volch-dropdown-header {
  display: block;
  font-family: var(--font-body), sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: #8C827A;
  padding: 4px 20px 8px;
  border-bottom: 1px solid rgba(217, 209, 199, 0.6);
  margin-bottom: 6px;
}
.volch-dropdown-item {
  display: block;
  font-family: var(--font-body), sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #1C1512 !important;
  text-decoration: none !important;
  padding: 7px 20px;
  transition: background-color 0.2s ease, color 0.2s ease, padding-left 0.2s ease;
  white-space: nowrap;
}
.volch-dropdown-item:hover {
  background-color: rgba(164, 94, 49, 0.07);
  color: #A45E31 !important;
  padding-left: 24px;
}
.volch-dropdown-divider {
  height: 1px;
  background-color: #D9D1C7;
  margin: 6px 0;
}
.volch-dropdown-item-all {
  color: #A45E31 !important;
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.2em;
}

/* Mega Menu Editorial com Imagem de Referência Lateral */
.volch-dropdown-megamenu {
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  width: 540px;
  max-width: 90vw;
  background-color: #FAF9F6;
  border: 1px solid #D9D1C7;
  border-radius: 0px !important;
  box-shadow: 0 16px 36px rgba(28, 21, 18, 0.08);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1), transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.22s;
  z-index: 1100;
  padding: 20px 24px;
}

.volch-nav-has-dropdown:hover .volch-dropdown-megamenu,
.volch-nav-has-dropdown:focus-within .volch-dropdown-megamenu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.volch-megamenu-inner {
  display: flex;
  align-items: stretch;
  gap: 24px;
}

.volch-megamenu-links {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.volch-megamenu-media {
  width: 190px;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  border-radius: 0px !important;
  background-color: #FAF9F6;
  border: 1px solid #D9D1C7;
  display: flex;
  flex-direction: column;
}

.volch-megamenu-img {
  width: 100%;
  height: 100%;
  min-height: 250px;
  object-fit: cover;
  object-position: center top;
  border-radius: 0px !important;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  display: block;
  flex: 1 1 auto;
}

.volch-megamenu-media:hover .volch-megamenu-img {
  transform: scale(1.03);
}

.volch-megamenu-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10px 8px;
  background: linear-gradient(0deg, rgba(28, 21, 18, 0.88) 0%, rgba(28, 21, 18, 0) 100%);
  color: #FAF9F6;
  font-family: var(--font-body);
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-align: center;
}


/* Botão Toggle e Acordeão do Menu Mobile */
.mobile-nav-toggle {
  transition: transform 0.25s ease;
}
.mobile-nav-toggle[aria-expanded="true"] .mobile-toggle-icon {
  transform: rotate(180deg);
}
.mobile-toggle-icon {
  transition: transform 0.25s ease;
}

/* ==========================================================================
   DESLIZAMENTO SUAVE DE SEÇÃO E PÁGINA (SMOOTH SLIDE & ZERO-JANK)
   ========================================================================== */
html {
  scroll-behavior: smooth;
}

/* Offset inteligente para que seções com âncoras não fiquem cobertas pelo cabeçalho fixo */
section[id],
div[id] {
  scroll-margin-top: 75px;
}
@media (max-width: 991.98px) {
  section[id],
  div[id] {
    scroll-margin-top: 60px;
  }
}

/* Slide suave contínuo ao carregar ou alternar seções (100% acelerado por hardware) */
.volch-main-container,
.volch-catalogo-page {
  animation: volchSmoothSlideIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
  will-change: transform, opacity;
  transform: translate3d(0, 0, 0);
}

@keyframes volchSmoothSlideIn {
  0% {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* Redução de movimento para acessibilidade */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }
  .volch-main-container,
  .volch-catalogo-page {
    animation: none !important;
    transform: none !important;
  }
}

/* ==========================================================================
   SISTEMA DE FAVORITOS & AVISOS EDITORIAIS (LATERAL DIREITA)
   ========================================================================== */
.btn-favorito-card,
.btn-favorito-heart {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}
.btn-favorito-card,
.btn-favorito-heart,
.btn-pdp-favorite {
  z-index: 35 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  touch-action: manipulation;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-favorito-card:hover,
.btn-favorito-heart:hover {
  transform: scale(1.12);
}

.btn-favorito-card svg,
.btn-favorito-card path,
.btn-favorito-heart svg,
.btn-favorito-heart path {
  pointer-events: none !important;
}

.btn-favorito-card.active svg,
.btn-favorito-heart.active svg {
  fill: #A45E31 !important;
  stroke: #A45E31 !important;
}

#volchToastLateralDireita {
  position: fixed;
  top: 95px;
  right: 24px;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: none;
  max-width: 360px;
  width: calc(100vw - 40px);
}

.volch-toast-aviso-login {
  border-radius: 0px !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
}

/* ==========================================================================
   ELEMENTOS RESPONSIVOS COMPLEMENTARES (SUBMENUS, HEADER, CATÁLOGO, TOAST)
   ========================================================================== */

/* 1. Imagem de Referência nos Submenus do Drawer Mobile */
.volch-mobile-drawer-media-img {
  width: 100% !important;
  height: auto !important;
  max-height: 165px !important;
  aspect-ratio: 16 / 9 !important;
  object-fit: cover !important;
  object-position: center top !important;
  border-radius: 0px !important;
  display: block;
}

.volch-mobile-drawer-media-acessorios,
.volch-mobile-drawer-media-img.acessorios {
  object-position: center 48% !important;
}

/* 2. Header Mobile Ultracompatível (≤ 420px) */
@media (max-width: 420px) {
  .site-header-actions {
    gap: 3px !important;
  }
  .header-action-btn {
    min-width: 36px !important;
    min-height: 36px !important;
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
  }
  .header-action-btn svg {
    width: 17px !important;
    height: 17px !important;
  }
  .site-header-main .volch-brand-logo {
    height: 19px !important;
    max-width: 74px !important;
  }
  .badge-cart {
    top: 2px !important;
    right: 2px !important;
    font-size: 8.5px !important;
    padding: 2px 4px !important;
  }
}

/* Barra de Subcategorias Deslizável (Drag & Touch Friendly) */
.volch-catalogo-subnav {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  white-space: nowrap !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-x: contain !important;
  touch-action: pan-x pan-y !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  cursor: grab;
  padding-bottom: 6px;
  position: relative;
  z-index: 20;
  user-select: none;
  -webkit-user-select: none;
}
.volch-catalogo-subnav.is-dragging {
  cursor: grabbing !important;
}
.volch-catalogo-subnav-track {
  display: inline-flex !important;
  flex-wrap: nowrap !important;
  width: max-content !important;
  min-width: 100% !important;
  gap: 8px !important;
  align-items: center !important;
  touch-action: pan-x pan-y !important;
  user-select: none;
  -webkit-user-select: none;
}
.volch-catalogo-subnav .btn {
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  touch-action: pan-x pan-y !important;
  -webkit-user-drag: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}
.volch-catalogo-subnav::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}
.volch-catalogo-subnav::-webkit-scrollbar-track {
  display: none !important;
}
.volch-catalogo-subnav::-webkit-scrollbar-thumb {
  display: none !important;
}

/* 3. Cards Fluidos do Catálogo */
.volch-catalogo-card {
  width: 100%;
  max-width: 380px;
  margin-left: auto !important;
  margin-right: auto !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.volch-catalogo-media {
  width: 100%;
  max-width: 380px;
  aspect-ratio: 2 / 3;
  height: auto;
  display: block;
  overflow: hidden;
  border-radius: 0px !important;
  background-color: #FAF9F6;
  margin-left: auto !important;
  margin-right: auto !important;
}
.volch-catalogo-img {
  width: 100%;
  height: 100%;
  object-fit: contain !important;
  object-position: center center !important;
  display: block;
  margin: 0 auto;
  border-radius: 0px !important;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.volch-catalogo-placeholder {
  background-color: #FAF9F6;
  border: 1px solid #D9D1C7;
  aspect-ratio: 2 / 3 !important;
  height: auto !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

@media (max-width: 767.98px) {
  .volch-catalogo-card {
    width: 100% !important;
    max-width: 360px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .volch-catalogo-media {
    width: 100% !important;
    max-width: 360px !important;
    height: auto !important;
    aspect-ratio: 2 / 3 !important;
    min-height: unset;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .volch-catalogo-img,
  .volch-catalogo-placeholder {
    width: 100% !important;
    height: 100% !important;
    max-height: unset !important;
    object-position: center center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* 4. Toast de Favoritos Mobile */
@media (max-width: 575.98px) {
  #volchToastLateralDireita {
    top: 75px !important;
    right: 14px !important;
    left: 14px !important;
    width: auto !important;
    max-width: calc(100vw - 28px) !important;
  }
}

/* ==========================================================================
   POP-UP PROMOCIONAL — 10% OFF PRIMEIRA COMPRA (URBAN EARTH EDITORIAL)
   ========================================================================== */
.volch-promo-backdrop {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(18, 14, 12, 0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.35s ease;
}

.volch-promo-backdrop.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.volch-promo-dialog {
  background-color: #FFFFFF;
  border: 1px solid #1C1512;
  border-radius: 0px !important;
  box-shadow: none !important;
  width: 100%;
  max-width: 680px;
  position: relative;
  overflow: hidden;
  transform: scale(0.96) translateY(12px);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.volch-promo-backdrop.is-active .volch-promo-dialog {
  transform: scale(1) translateY(0);
}

.volch-promo-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 36px;
  height: 36px;
  background: transparent;
  border: none;
  font-size: 28px;
  line-height: 1;
  color: #1C1512;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease, transform 0.2s ease;
}

.volch-promo-close:hover {
  color: #A45E31;
  transform: scale(1.1);
}

.volch-promo-body {
  display: flex;
  flex-direction: row;
  min-height: 420px;
}

.volch-promo-image-col {
  width: 44%;
  position: relative;
  background-color: #FAF9F6;
  overflow: hidden;
}

.volch-promo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  display: block;
}

.volch-promo-content-col {
  width: 56%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px 32px 36px 32px;
  background-color: #FFFFFF;
}

.volch-promo-eyebrow {
  font-family: var(--font-body), sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3em;
  color: #A45E31;
  text-transform: uppercase;
  margin-bottom: 8px;
  display: block;
}

.volch-promo-title {
  font-family: var(--font-heading), 'Cotoris Heavy', sans-serif;
  font-size: 22px;
  font-weight: 300;
  letter-spacing: 0.04em;
  color: #1C1512;
  line-height: 1.2;
  margin: 0 0 12px 0;
  text-transform: uppercase;
}

.volch-promo-desc {
  font-family: var(--font-body), sans-serif;
  font-size: 12px;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(28, 21, 18, 0.75);
  margin: 0 0 18px 0;
}

.volch-promo-coupon-box {
  background-color: #FAF9F6;
  border: 1px dashed #A45E31;
  padding: 10px 14px;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.volch-promo-coupon-label {
  font-family: var(--font-body), sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: #8C827A;
  text-transform: uppercase;
}

.volch-promo-code {
  font-family: var(--font-heading), monospace;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: #1C1512;
}

.volch-promo-copy-btn {
  background-color: #1C1512;
  color: #FFFFFF;
  border: none;
  border-radius: 0px !important;
  font-family: var(--font-body), sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.15em;
  padding: 7px 14px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s ease;
}

.volch-promo-copy-btn:hover {
  background-color: #A45E31;
}

.volch-promo-cta {
  display: block;
  width: 100%;
  text-align: center;
  background-color: #1C1512;
  color: #FFFFFF !important;
  text-decoration: none;
  font-family: var(--font-body), sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 13px 20px;
  border-radius: 0px !important;
  border: 1px solid #1C1512;
  transition: all 0.25s ease;
}

.volch-promo-cta:hover {
  background-color: transparent;
  color: #1C1512 !important;
}

.volch-promo-dismiss {
  display: block;
  width: 100%;
  text-align: center;
  background: transparent;
  border: none;
  color: rgba(28, 21, 18, 0.45);
  font-family: var(--font-body), sans-serif;
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-top: 10px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}

.volch-promo-dismiss:hover {
  color: #1C1512;
}

/* Mobile Pop-up Promocional */
@media (max-width: 640px) {
  .volch-promo-dialog {
    max-width: 340px;
    max-height: 88vh;
    overflow-y: auto;
  }
  .volch-promo-body {
    flex-direction: column;
    min-height: auto;
  }
  .volch-promo-image-col {
    width: 100%;
    height: 190px;
  }
  .volch-promo-content-col {
    width: 100%;
    padding: 22px 18px 20px 18px;
    text-align: center;
  }
  .volch-promo-title {
    font-size: 18px;
  }
  .volch-promo-desc {
    font-size: 11px;
    margin-bottom: 14px;
  }
  .volch-promo-coupon-box {
    padding: 8px 10px;
    margin-bottom: 14px;
  }
  .volch-promo-code {
    font-size: 14px;
  }
}

/* ==========================================================================
   LOOKBOOK EDITORIAL - CARD CALÇA ERICA
   ========================================================================== */
.volch-lookbook-card {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  display: block;
}
.volch-lookbook-card .volch-lookbook-img {
  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}
.volch-lookbook-card:hover .volch-lookbook-img {
  transform: scale(1.035);
}
.volch-lookbook-caption {
  background: linear-gradient(180deg, rgba(28, 21, 18, 0) 0%, rgba(28, 21, 18, 0.76) 100%);
  z-index: 2;
  pointer-events: none;
}
.volch-lookbook-btn-tag {
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #F1ECE4;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-bottom: 1px solid rgba(241, 236, 228, 0.6);
  padding-bottom: 2px;
  transition: border-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.volch-lookbook-card:hover .volch-lookbook-btn-tag {
  color: #FFFFFF;
  border-color: #FFFFFF;
  transform: translateX(3px);
}

@media (max-width: 767.98px) {
  .volch-lookbook-card .volch-lookbook-img {
    object-fit: cover !important;
  }
}

/* ==========================================================================
   BARRA SUPERIOR MOBILE DE CATEGORIAS E SUBCATEGORIAS (URBAN EARTH EDITORIAL)
   ========================================================================== */
/* ==========================================================================
   BARRA SUPERIOR MOBILE DE CATEGORIAS E SUBCATEGORIAS (URBAN EARTH EDITORIAL)
   ========================================================================== */
.volch-mobile-cat-header {
  background-color: #FFFFFF;
  border-bottom: 1px solid #EAEAEA;
  position: relative;
  width: 100%;
  z-index: 1040;
}

/* Faixa 1: Grid com Todas as Categorias 100% Visíveis */
.volch-mobile-cat-nav {
  width: 100%;
  background-color: #FFFFFF;
  border-top: 1px solid #EAEAEA;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.volch-mobile-cat-nav::-webkit-scrollbar {
  display: none;
}
.volch-mobile-cat-grid {
  display: flex;
  width: 100%;
  min-width: 100%;
  align-items: stretch;
  justify-content: space-around;
  padding: 0 2px;
  margin: 0;
  box-sizing: border-box;
}
.volch-mobile-cat-tab {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 9px 1px 8px;
  background-color: transparent !important;
  color: #111111 !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0px !important;
  font-family: var(--font-body), sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none !important;
  white-space: nowrap;
  touch-action: manipulation;
  cursor: pointer;
  transition: all 0.15s ease;
  line-height: 1.15;
  outline: none !important;
  box-shadow: none !important;
  -webkit-tap-highlight-color: transparent;
}
@media (max-width: 360px) {
  .volch-mobile-cat-tab {
    font-size: 9px;
    letter-spacing: 0.01em;
    padding: 8px 1px 7px;
  }
}
.volch-mobile-cat-tab:hover,
.volch-mobile-cat-tab:focus {
  color: #000000 !important;
}
.volch-mobile-cat-tab.active,
.volch-mobile-cat-tab.is-active,
.volch-mobile-cat-tab[aria-expanded="true"] {
  background-color: transparent !important;
  color: #000000 !important;
  border-bottom: 2px solid #000000 !important;
  font-weight: 700;
}
.volch-mobile-cat-tab .volch-pill-arrow {
  transition: transform 0.2s ease;
  stroke: currentColor;
  flex-shrink: 0;
}
.volch-mobile-cat-tab.is-active .volch-pill-arrow,
.volch-mobile-cat-tab[aria-expanded="true"] .volch-pill-arrow {
  transform: rotate(180deg);
}

/* ==========================================================================
   MINI MENU EDITORIAL MOBILE COM IMAGEM DE FUNDO (URBAN EARTH EDITORIAL)
   ========================================================================== */
.volch-minimenu-wrapper {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  z-index: 1050;
  pointer-events: none;
}

.volch-minimenu-panel {
  display: none;
  width: 100%;
  max-height: calc(85vh - 90px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-bottom: 2px solid #000000;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.55);
  pointer-events: auto;
  animation: volchMiniMenuSlide 0.24s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.volch-minimenu-panel.is-open {
  display: block;
}

#miniMenuFeminino {
  background-position: center 16% !important;
}

#miniMenuAcessorios {
  background-position: center 40% !important;
}

#miniMenuDrops {
  background-position: center 16% !important;
}

#miniMenuSobMedida {
  background-position: center 22% !important;
}

@keyframes volchMiniMenuSlide {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.volch-minimenu-inner {
  padding: 16px 16px 18px;
  background-color: transparent;
  position: relative;
}

.volch-minimenu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 10px;
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}

.site-header .volch-minimenu-tag,
.volch-minimenu-tag {
  font-family: var(--font-body), sans-serif;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase;
  color: #FFFFFF !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9) !important;
}

.site-header .volch-minimenu-close,
.volch-minimenu-close {
  background: transparent !important;
  border: none !important;
  color: #FFFFFF !important;
  font-size: 24px !important;
  font-weight: 300 !important;
  line-height: 1 !important;
  padding: 2px 6px !important;
  cursor: pointer;
  opacity: 0.95 !important;
  transition: opacity 0.15s ease;
  touch-action: manipulation;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9) !important;
}
.volch-minimenu-close:hover,
.volch-minimenu-close:active {
  color: #FFFFFF !important;
  opacity: 1 !important;
}

.volch-minimenu-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 12px;
  margin-bottom: 16px;
}

/* Links das Subcategorias: Fundo Branco Editorial e Texto Escuro Nítido */
.site-header .volch-minimenu-link,
.volch-minimenu-link {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 11px 12px !important;
  color: #1C1512 !important;
  text-decoration: none !important;
  font-family: var(--font-body), sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  background: #FFFFFF !important;
  border: 1px solid rgba(28, 21, 18, 0.20) !important;
  border-radius: 0px !important;
  touch-action: manipulation;
  transition: all 0.18s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.site-header .volch-minimenu-link span,
.volch-minimenu-link span {
  color: #1C1512 !important;
  font-family: var(--font-body), sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-shadow: none !important;
}

.site-header .volch-minimenu-link svg,
.volch-minimenu-link svg {
  stroke: #1C1512 !important;
  color: #1C1512 !important;
  opacity: 0.85 !important;
  transition: transform 0.15s ease, opacity 0.15s ease;
  flex-shrink: 0;
}

.site-header .volch-minimenu-link:hover,
.site-header .volch-minimenu-link:active,
.site-header .volch-minimenu-link.active,
.volch-minimenu-link:hover,
.volch-minimenu-link:active,
.volch-minimenu-link.active {
  background: #1C1512 !important;
  border-color: #1C1512 !important;
}

.site-header .volch-minimenu-link:hover span,
.site-header .volch-minimenu-link:active span,
.site-header .volch-minimenu-link.active span,
.volch-minimenu-link:hover span,
.volch-minimenu-link:active span,
.volch-minimenu-link.active span {
  color: #FFFFFF !important;
}

.site-header .volch-minimenu-link:hover svg,
.site-header .volch-minimenu-link:active svg,
.site-header .volch-minimenu-link.active svg,
.volch-minimenu-link:hover svg,
.volch-minimenu-link:active svg,
.volch-minimenu-link.active svg {
  stroke: #FFFFFF !important;
  color: #FFFFFF !important;
  transform: translateX(3px);
  opacity: 1 !important;
}

.volch-minimenu-footer {
  margin-top: 4px;
}

/* Botão Ver Tudo em Fundo Branco com Borda e Texto Escuros */
.site-header .volch-minimenu-all-btn,
.volch-minimenu-all-btn {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  padding: 12px 14px !important;
  background: #FFFFFF !important;
  border: 1px solid #1C1512 !important;
  color: #1C1512 !important;
  text-decoration: none !important;
  font-family: var(--font-body), sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  border-radius: 0px !important;
  transition: all 0.2s ease;
  touch-action: manipulation;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22) !important;
  text-shadow: none !important;
}

.site-header .volch-minimenu-all-btn:hover,
.site-header .volch-minimenu-all-btn:active,
.volch-minimenu-all-btn:hover,
.volch-minimenu-all-btn:active {
  background: #1C1512 !important;
  color: #FFFFFF !important;
  border-color: #1C1512 !important;
}

/* Backdrop Escuro para Fechar ao Tocar Fora */
.volch-minimenu-backdrop {
  display: none;
  position: fixed;
  top: 94px;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: calc(100vh - 94px);
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(2px);
  z-index: 1045;
}
.volch-minimenu-backdrop.is-open {
  display: block;
}

/* ==========================================================================
   BARRA DE NAVEGAÇÃO INFERIOR FIXA — BOTTOM NAV (EXCLUSIVA MOBILE < 992px)
   ========================================================================== */
.volch-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 56px;
  background-color: #FFFFFF;
  border-top: 1px solid #EAEAEA;
  z-index: 1045;
  display: flex;
  align-items: stretch;
  justify-content: space-around;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.06);
}

@media (min-width: 992px) {
  .volch-bottom-nav {
    display: none !important;
  }
}

@media (max-width: 991.98px) {
  body {
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .volch-main-container {
    padding-top: 94px !important;
  }
  section[id],
  div[id] {
    scroll-margin-top: 98px !important;
  }
  .btn-back-to-top {
    bottom: calc(68px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

.volch-bottom-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background: transparent;
  border: none;
  outline: none;
  color: #111111;
  text-decoration: none !important;
  cursor: pointer;
  touch-action: manipulation;
  padding: 4px 0;
  transition: color 0.15s ease, background-color 0.15s ease;
  position: relative;
  border-radius: 0px !important;
}
.volch-bottom-nav-item:hover,
.volch-bottom-nav-item:active,
.volch-bottom-nav-item.is-active {
  color: #000000 !important;
  background-color: rgba(0, 0, 0, 0.05);
}
.volch-bottom-nav-item svg {
  width: 20px;
  height: 20px;
  display: block;
}
.volch-bottom-label {
  font-family: var(--font-body), sans-serif;
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1;
  color: inherit;
}
/* Badges de Contagem (Favoritos e Sacola) — Bola Laranja com Numeração Preta */
.volch-bottom-badge,
#favCountBottom,
#cartCountBottom,
.volch-header-badge,
#favCountHeader,
#cartCountHeader {
  position: absolute;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  max-width: 16px !important;
  background-color: #FF7020 !important;
  color: #000000 !important;
  font-family: var(--font-body), sans-serif !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-align: center !important;
  border-radius: 50% !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important;
  z-index: 5;
  box-sizing: border-box !important;
}

.volch-bottom-badge:not(.d-none),
#favCountBottom:not(.d-none),
#cartCountBottom:not(.d-none),
.volch-header-badge:not(.d-none),
#favCountHeader:not(.d-none),
#cartCountHeader:not(.d-none) {
  display: flex !important;
}

.volch-bottom-badge.d-none,
#favCountBottom.d-none,
#cartCountBottom.d-none,
.volch-header-badge.d-none,
#favCountHeader.d-none,
#cartCountHeader.d-none {
  display: none !important;
}

.volch-bottom-badge,
#favCountBottom,
#cartCountBottom {
  top: 2px !important;
  right: calc(50% - 17px) !important;
}

.volch-header-badge,
#favCountHeader,
#cartCountHeader {
  top: 2px !important;
  right: 2px !important;
}

/* Links do Drawer Mobile */
.volch-mobile-drawer-sublink {
  color: rgba(28, 21, 18, 0.72) !important;
  transition: color 0.2s ease, padding-left 0.2s ease;
}
.volch-mobile-drawer-sublink:hover {
  color: #A45E31 !important;
  padding-left: 4px;
}

/* Prevenção de rolagem de fundo com Drawer Mobile Aberto (Body Scroll Lock) */
body.volch-drawer-open,
html.volch-drawer-open {
  overflow: hidden !important;
  touch-action: none !important;
  overscroll-behavior: none !important;
}

.offcanvas-backdrop.show {
  touch-action: none !important;
  overscroll-behavior: none !important;
}

#menuMobileDrawer {
  overscroll-behavior: contain !important;
}

/* Botão Concierge PDP Sem Quebra de Texto */
#btnConsultarPrecoConcierge {
  white-space: nowrap !important;
  text-wrap: nowrap !important;
  font-size: clamp(10.5px, 2.7vw, 13px) !important;
  letter-spacing: clamp(0.04em, 1.1vw, 0.14em) !important;
  padding-left: clamp(8px, 2vw, 20px) !important;
  padding-right: clamp(8px, 2vw, 20px) !important;
}

#btnConsultarPrecoConcierge svg {
  flex-shrink: 0 !important;
}

#btnConsultarPrecoConcierge span {
  white-space: nowrap !important;
  text-wrap: nowrap !important;
}

/* Botão Fechar (X) - Menu Mobile Lateral */
#menuMobileDrawer .btn-close-mobile-drawer,
#menuMobileDrawer .btn-close {
  background: none !important;
  filter: none !important;
  opacity: 1 !important;
  color: #1C1512 !important;
  border: none !important;
  box-shadow: none !important;
}

#menuMobileDrawer .btn-close-mobile-drawer:hover,
#menuMobileDrawer .btn-close:hover {
  opacity: 0.7 !important;
}

/* ==========================================================================
   TIPOGRAFIA OFICIAL: TÍTULOS DE ROUPAS E SEÇÕES EM COR PRETA (#1C1512)
   Design System Urban Earth Editorial — Mobile, Tablet e Desktop
   ========================================================================== */

/* 1. Títulos das Roupas (Cards da Vitrine, Catálogo, PDP e Sacola) */
.volch-product-card-home h3,
.volch-product-card-home h3 a,
.volch-catalogo-card h3,
.volch-catalogo-card h3 a,
.expansion-card-item h3,
.expansion-card-item h3 a,
.expansion-card-title,
.product-page .product-summary .product-title,
.product-title,
.product-name,
.cart-item-title,
.drawer-item-title {
  color: #1C1512 !important;
  -webkit-text-fill-color: #1C1512 !important;
  text-decoration: none !important;
}

.volch-product-card-home h3 a:hover,
.volch-catalogo-card h3 a:hover,
.expansion-card-item h3 a:hover {
  color: #A45E31 !important;
  -webkit-text-fill-color: #A45E31 !important;
}

/* 2. Títulos das Seções da Loja Virtual (Fundos Claros: Branco e Canvas) */
#novidades h2,
#manifesto h2,
#feminino h2,
#acessorios h2,
#sob-medida h2,
#contato-volch h2,
#contato h2,
.volch-manifesto-section h2,
.volch-feminino-section h2,
.volch-sob-medida-headline,
.sob-medida-headline,
.lookbook-title,
.atelier-title,
.volch-atelier-section h2,
.volch-catalogo-page h1,
.volch-catalogo-header h1,
.volch-catalogo-page h2,
.volch-empty-state-editorial h2,
.quem-veste-volch-title,
.title-video,
.launches-title,
.vitrine-title {
  color: #1C1512 !important;
  -webkit-text-fill-color: #1C1512 !important;
}

/* 3. Blindagem Específica para Dispositivos Móveis e Tablets (<= 1024px) */
@media (max-width: 1024px) {
  .volch-product-card-home h3,
  .volch-product-card-home h3 a,
  .volch-catalogo-card h3,
  .volch-catalogo-card h3 a,
  .expansion-card-item h3,
  .expansion-card-item h3 a,
  .expansion-card-title,
  .product-page .product-summary .product-title,
  .product-title,
  .product-name,
  .cart-item-title,
  .drawer-item-title,
  #novidades h2,
  #manifesto h2,
  #feminino h2,
  #acessorios h2,
  #sob-medida h2,
  #contato-volch h2,
  #contato h2,
  .volch-manifesto-section h2,
  .volch-feminino-section h2,
  .volch-sob-medida-headline,
  .sob-medida-headline,
  .lookbook-title,
  .atelier-title,
  .volch-atelier-section h2,
  .volch-catalogo-page h1,
  .volch-catalogo-header h1,
  .volch-catalogo-page h2,
  .volch-empty-state-editorial h2,
  .quem-veste-volch-title,
  .title-video,
  .launches-title,
  .vitrine-title {
    color: #1C1512 !important;
    -webkit-text-fill-color: #1C1512 !important;
  }
}