/*
Theme Name:   Storefront Child - Via Profs
Description:  Tema filho do Storefront com customizacoes da Via Profs
Template:     storefront
Version:      1.6.0
Text Domain:  storefront-child-viaprofs
*/

/* ============================================================
   TOKENS DE DESIGN
   ============================================================ */
:root {
  --vp-primary:        #6666cc;
  --vp-primary-hover:  #5252b8; /* antes era #b764ff — mudança de matiz muito agressiva */
  --vp-cta:            #1EC65D;
  --vp-cta-hover:      #17a84e;
  --vp-navy:           #24224C;
  --vp-text:           #3d3b5c;  /* antes rgba(36,34,76,0.75) = ~#6A6895, contraste insuficiente em cards */
  --vp-text-muted:     #767676;
  --vp-card-bg:        #F0EFFD;
  --vp-bg-secondary:   #f2f2f8;
  --vp-border:         rgba(0, 0, 0, 0.08);
  --vp-radius-card:    10px;
  --vp-radius-pill:    35px;
  --vp-shadow:         0 2px 12px rgba(102, 102, 204, 0.12);
  --vp-shadow-hover:   0 6px 20px rgba(102, 102, 204, 0.18);
}

/* Remove sidebar, ocupa largura total */
#secondary.widget-area { display: none !important; }
#primary.content-area  { width: 100% !important; float: none !important; }


/* ============================================================
   1. BASE / TIPOGRAFIA
   ============================================================ */
body, input, textarea, select {
  font-family: 'Inter', sans-serif;
  color: var(--vp-text);
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Inter', sans-serif;
  color: var(--vp-navy);
}

a {
  color: var(--vp-primary);
  transition: color 0.2s ease;
}
a:hover { color: var(--vp-primary-hover); }

/* Acessibilidade: focus visível para navegação por teclado */
*:focus-visible {
  outline: 3px solid rgba(102, 102, 204, 0.5);
  outline-offset: 3px;
}

/* Respeita preferência do sistema por menos movimento */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}


/* ============================================================
   2. TOP BAR (Store Notice)
   ============================================================ */
.woocommerce-store-notice,
p.demo_store {
  background: var(--vp-navy) !important;
  color: #fff !important;
  font-family: 'Inter', sans-serif;
}

.woocommerce-store-notice a,
p.demo_store a {
  color: #fff !important;
  font-weight: 600;
}


/* ============================================================
   3. HEADER
   ============================================================ */
.site-header {
  background: #fff !important;
  border-bottom: 1px solid var(--vp-border);
  /* Storefront tem padding-top: 2.617em no .site-header; zeramos aqui para
     usar apenas o padding do .col-full interno */
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

.site-header .site-title a  { color: var(--vp-navy) !important; }
.site-description            { color: var(--vp-primary); }

.site-header-cart .cart-contents        { color: var(--vp-primary) !important; }
.site-header-cart .cart-contents .amount { color: var(--vp-primary) !important; }
.site-header-cart .cart-contents:hover  { color: var(--vp-primary-hover) !important; }


/* ============================================================
   4. NAVEGAÇÃO
   ============================================================ */
.main-navigation ul li a {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  color: var(--vp-primary) !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: color 0.2s ease;
}

.main-navigation ul li a:hover,
.main-navigation ul li.current-menu-item > a,
.main-navigation ul li.current-page-ancestor > a {
  color: var(--vp-primary-hover) !important;
}

.main-navigation ul ul {
  background: #fff;
  border: 1px solid var(--vp-border);
  border-radius: 0 0 var(--vp-radius-card) var(--vp-radius-card);
  box-shadow: var(--vp-shadow);
}

.main-navigation ul ul li a {
  font-weight: 600;
  color: #333 !important;
  text-transform: none;
  letter-spacing: 0;
  transition: color 0.2s ease, background 0.2s ease;
}

.main-navigation ul ul li a:hover {
  color: var(--vp-primary) !important;
  background: rgba(102, 102, 204, 0.06);
}


/* ============================================================
   5. CAMPO DE BUSCA — GLOBAL (fora do header)
   Apenas reset leve para widgets de busca em sidebar/footer.
   O header usa .vp-search-* (Seção 26).
   ============================================================ */
.widget_product_search .vp-search-form,
.widget_search .vp-search-form { margin: 0; }


/* ============================================================
   6. CARDS DE PRODUTO
   ============================================================ */
.woocommerce ul.products li.product {
  background: var(--vp-card-bg) !important;
  border-radius: var(--vp-radius-card) !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  cursor: pointer;
}

.woocommerce ul.products li.product:hover {
  box-shadow: var(--vp-shadow-hover);
  transform: translateY(-2px);
}

.woocommerce ul.products li.product img {
  border-radius: 6px;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  color: var(--vp-navy) !important;
}

.woocommerce .star-rating,
.woocommerce .star-rating span::before { color: #eabe12; }

.woocommerce ul.products li.product .price {
  color: var(--vp-primary) !important;
  font-weight: 600 !important;
}
.woocommerce ul.products li.product .price del {
  color: rgba(102, 102, 204, 0.5) !important;
}
.woocommerce ul.products li.product .price ins {
  text-decoration: none !important;
  color: var(--vp-primary) !important;
}

.woocommerce span.onsale {
  background: var(--vp-primary) !important;
  color: #fff !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
  min-height: auto;
  min-width: auto;
  line-height: 1.4;
}


/* ============================================================
   7. BOTÕES CTA
   ============================================================ */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #payment #place_order,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
  font-family: 'Nunito Sans', sans-serif !important;
  font-weight: 700 !important;
  background: var(--vp-cta) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--vp-radius-pill) !important;
  transition: background 0.2s ease, filter 0.2s ease;
  cursor: pointer;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce #payment #place_order:hover,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
  background: var(--vp-cta-hover) !important;
  filter: brightness(1.05);
  color: #fff !important;
}

.woocommerce a.button:focus,
.woocommerce button.button:focus {
  outline: 3px solid rgba(102, 102, 204, 0.4) !important;
  outline-offset: 2px;
}


/* ============================================================
   8. PRODUTO INDIVIDUAL
   ============================================================ */
.single-product .product_title {
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  color: var(--vp-primary) !important;
}

.single-product .price {
  color: var(--vp-primary) !important;
  font-weight: 600 !important;
}

.single-product .price del {
  color: rgba(102, 102, 204, 0.5) !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  color: rgba(51, 51, 51, 0.65);
  border-radius: 10px 10px 0 0;
  transition: color 0.2s ease;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: #333 !important;
}


/* ============================================================
   9. SIDEBAR / WIDGETS
   ============================================================ */
.widget-area .widget-title {
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  color: var(--vp-primary) !important;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.widget-area ul li a {
  color: var(--vp-text) !important;
  font-weight: 500;
  transition: color 0.2s ease;
}

.widget-area ul li a:hover {
  color: var(--vp-primary) !important;
}

.tagcloud a {
  color: var(--vp-text-muted) !important;
  border-radius: 6px !important;
  transition: all 0.2s ease;
}

.tagcloud a:hover {
  background: var(--vp-primary) !important;
  color: #fff !important;
  border-color: var(--vp-primary) !important;
}

.woocommerce .widget_price_filter .ui-slider-range,
.woocommerce .widget_price_filter .ui-slider .ui-slider-handle {
  background: var(--vp-primary) !important;
}

.woocommerce .widget_price_filter .price_slider_wrapper .ui-widget-content {
  background: var(--vp-bg-secondary) !important;
}


/* ============================================================
   10. BREADCRUMB
   ============================================================ */
.woocommerce-breadcrumb       { color: var(--vp-text-muted); }
.woocommerce-breadcrumb a     { color: var(--vp-primary) !important; font-weight: 500; }


/* ============================================================
   11. PAGINAÇÃO
   ============================================================ */
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  border-radius: 15px !important;
  font-weight: 700;
  font-family: 'Inter', sans-serif;
  border: 1px solid var(--vp-border) !important;
  color: var(--vp-text) !important;
  transition: all 0.2s ease;
}

.woocommerce nav.woocommerce-pagination ul li a:hover {
  background: var(--vp-primary) !important;
  color: #fff !important;
  border-color: var(--vp-primary) !important;
}

.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--vp-primary) !important;
  color: #fff !important;
  border-color: var(--vp-primary) !important;
}


/* ============================================================
   12. NOTICES
   ============================================================ */
.woocommerce-message         { border-top-color: var(--vp-cta) !important; }
.woocommerce-message::before { color: var(--vp-cta) !important; }
.woocommerce-info            { border-top-color: var(--vp-primary) !important; }
.woocommerce-info::before    { color: var(--vp-primary) !important; }


/* ============================================================
   13. FORMULÁRIOS
   ============================================================ */
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus {
  border-color: var(--vp-primary) !important;
  box-shadow: 0 0 0 3px rgba(102, 102, 204, 0.15);
  outline: none;
}

.woocommerce form .form-row label {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  color: var(--vp-navy);
}


/* ============================================================
   14. FOOTER
   ============================================================ */
.site-footer {
  background: rgba(102, 102, 204, 0.04) !important;
  border-top: 1px solid var(--vp-border);
}

.site-footer .widget-title {
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  color: var(--vp-primary) !important;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.site-footer a       { color: #333 !important; transition: color 0.2s ease; }
.site-footer a:hover { color: var(--vp-primary) !important; }
.site-footer p       { color: var(--vp-text-muted); line-height: 1.6; }

.storefront-info-wrapper,
.site-info { color: var(--vp-text-muted) !important; }
.site-info a { color: var(--vp-primary) !important; }

/* Oculta link "WooCommerce" no rodapé padrão */
.site-info a[href*="woocommerce.com"] { display: none; }

/* Estrutura do rodapé personalizado */
#colophon { padding: 0 !important; margin: 0 !important; background: transparent !important; max-width: 100% !important; width: 100% !important; box-sizing: border-box !important; }
#colophon .col-full { max-width: 100% !important; width: 100% !important; padding: 0 !important; margin: 0 !important; box-sizing: border-box !important; }
#colophon > .col-full > .site-info { display: none !important; }

#vp-footer { background: #fff6fa; font-family: inherit; margin-top: 0; }

.vp-footer__main {
  background: #f0effd;
  padding: 60px 0 40px;
  border-top: 3px solid #6666CC;
  width: 100%;
  box-sizing: border-box;
}

.vp-footer__container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 40px;
  align-items: start;
}

.vp-footer__logo        { max-width: 150px; height: auto; display: block; margin-bottom: 14px; }
.vp-footer__logo-link   { display: inline-block; }
.vp-footer__tagline     { font-size: 13.5px; color: #777; line-height: 1.6; margin: 0 0 12px; }
.vp-footer__contact     { font-size: 13px; color: #777; margin: 0 0 16px; }
.vp-footer__contact a   { color: #6666CC; text-decoration: none; }
.vp-footer__contact a:hover { text-decoration: underline; }

.vp-footer__social      { display: flex; gap: 12px; align-items: center; }
.vp-footer__social a    { color: #aaa; transition: color 0.2s; display: flex; align-items: center; min-width: 44px; min-height: 44px; justify-content: center; }
.vp-footer__social a:hover { color: #6666CC; }

#vp-footer .vp-footer__col .vp-footer__title,
#vp-footer .vp-footer__col--brand .vp-footer__title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #6666CC !important;
  margin: 0 0 18px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.vp-footer__links     { list-style: none; margin: 0; padding: 0; }
.vp-footer__links li  { margin-bottom: 10px; }
.vp-footer__links a   { font-size: 13.5px; color: #555; text-decoration: none; transition: color 0.2s; line-height: 1.5; }
.vp-footer__links a:hover { color: #6666CC; }

.vp-footer__payment-img    { max-width: 100%; height: auto; display: block; margin-bottom: 12px; }
.vp-footer__payment-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.vp-footer__badge          { background: #fff; border: 1px solid #ddd; border-radius: 4px; padding: 4px 10px; font-size: 12px; color: #555; font-weight: 600; }
.vp-footer__security       { margin-top: 12px; }

.vp-footer__seal {
  font-size: 12px;
  color: #555;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px 10px;
}

.vp-footer__bottom         { background: #6666CC; padding: 16px 0; }
.vp-footer__bottom-inner   { display: flex; flex-direction: row; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.vp-footer__bottom-info    { font-size: 12.5px; color: #fff; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.vp-footer__sep            { opacity: 0.6; }
.vp-footer__bottom-social  { display: flex; gap: 12px; align-items: center; }
.vp-footer__bottom-social a { color: #fff; display: flex; align-items: center; transition: opacity 0.2s; min-width: 44px; min-height: 44px; justify-content: center; }
.vp-footer__bottom-social a:hover { opacity: 0.8; color: #fff; }

@media (max-width: 900px) {
  .vp-footer__container { grid-template-columns: 1fr 1fr; gap: 32px; padding: 0 20px; box-sizing: border-box; }
}

@media (max-width: 600px) {
  .vp-footer__container  { grid-template-columns: 1fr; gap: 28px; padding: 0 20px; box-sizing: border-box; width: 100%; }
  .vp-footer__main       { padding: 40px 0 28px; text-align: center; width: 100%; box-sizing: border-box; }
  .vp-footer__logo       { margin: 0 auto 14px; }
  .vp-footer__social     { justify-content: center; }
  .vp-footer__payment-badges { justify-content: center; }
  .vp-footer__bottom-inner   { flex-direction: column; text-align: center; }
  .vp-footer__bottom-info    { justify-content: center; }
  .vp-footer__bottom-social  { justify-content: center; }
}


/* ============================================================
   15. PÁGINA DE OBRIGADO
   ============================================================ */
.woocommerce-thankyou-order-received {
  display: block;
  width: 100%;
  padding: 20px 30px !important;
  background-color: #fff !important;
  border: 2px dashed #4CAF50 !important;
  border-radius: 6px !important;
  color: #4CAF50 !important;
  font-size: 1.5em !important;
  font-weight: 700 !important;
  text-align: center !important;
  margin-bottom: 20px !important;
  box-shadow: none !important;
}

.vp-thankyou-info {
  display: block;
  width: 100%;
  text-align: center !important;
  font-size: 1em !important;
  color: #444 !important;
  margin-top: 10px !important;
  margin-bottom: 20px !important;
}
.vp-thankyou-info a       { color: #4CAF50 !important; font-weight: 600 !important; text-decoration: underline !important; }
.vp-thankyou-info a:hover { color: #388E3C !important; }


/* ============================================================
   16. BOTÃO DE DOWNLOAD — .vp-download-btn (output via PHP)
   ============================================================ */
.vp-download-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 24px !important;
  height: 44px !important;
  background: var(--vp-cta) !important;
  color: #fff !important;
  border-radius: var(--vp-radius-pill) !important;
  font-family: 'Nunito Sans', sans-serif !important;
  font-size: 0.875rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: background 0.18s, box-shadow 0.18s !important;
  box-shadow: 0 2px 8px rgba(30, 198, 93, 0.25) !important;
  cursor: pointer !important;
}

.vp-download-btn:hover {
  background: var(--vp-cta-hover) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(30, 198, 93, 0.35) !important;
  text-decoration: none !important;
}

.vp-download-btn:focus-visible {
  outline: 3px solid rgba(30, 198, 93, 0.45) !important;
  outline-offset: 2px !important;
}

@media (max-width: 767px) {
  .vp-download-btn {
    width: 100% !important;
    height: 48px !important;
    font-size: 0.9375rem !important;
  }
}


/* ============================================================
   17. TÍTULO DA SEÇÃO DE PRODUTOS
   ============================================================ */
.woocommerce-products-header,
.storefront-full-width-content .woocommerce-products-header {
  text-align: center;
  padding: 44px 20px 12px !important;
  background: transparent;
}

@media (max-width: 1024px) {
  .woocommerce-products-header,
  .storefront-full-width-content .woocommerce-products-header { padding-top: 32px !important; }
}

@media (max-width: 767px) {
  .woocommerce-products-header,
  .storefront-full-width-content .woocommerce-products-header { padding-top: 24px !important; }
}

.woocommerce-products-header__title.page-title {
  display: block !important;
  font-family: 'Nunito Sans', sans-serif;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 800;
  color: var(--vp-navy);
  text-align: center;
  margin: 0 auto 8px;
  padding: 0;
  line-height: 1.2;
  letter-spacing: -0.3px;
}

.woocommerce-products-header__title.page-title::after {
  content: '';
  display: block;
  width: 56px;
  height: 4px;
  background: var(--vp-primary);
  border-radius: 4px;
  margin: 10px auto 0;
}


/* ============================================================
   18. FILTER BAR — pills com dropdown
   ============================================================ */
.vp-category-filters-wrap {
  padding: 0 0 24px;
}

.vp-filter-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

/* Pill base — !important necessário para vencer regras do Storefront/WooCommerce */
.vp-filter-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 0 20px !important;
  height: 44px !important;
  border-radius: 50px !important;
  font-family: 'Nunito Sans', sans-serif !important;
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  color: var(--vp-primary) !important;
  background: transparent !important;
  border: 2px solid var(--vp-primary) !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  transition: background 0.18s, color 0.18s, border-color 0.18s !important;
  box-shadow: none !important;
  appearance: none;
  -webkit-appearance: none;
  touch-action: manipulation; /* evita atraso de toque no mobile */
}

.vp-filter-pill:hover {
  background: rgba(102, 102, 204, 0.07) !important;
  color: var(--vp-primary) !important;
  filter: none !important;
}

.vp-filter-pill:focus-visible {
  outline: 3px solid rgba(102, 102, 204, 0.4) !important;
  outline-offset: 2px;
}

.vp-filter-pill.is-active {
  background: var(--vp-primary) !important;
  color: #fff !important;
  border-color: var(--vp-primary) !important;
}

/* Chevron */
.vp-filter-pill__chevron {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  transition: transform 0.18s;
  flex-shrink: 0;
}

.vp-filter-dropdown.is-open .vp-filter-pill__chevron {
  transform: rotate(180deg);
}

/* Dropdown wrapper */
.vp-filter-dropdown { position: relative; }

/* Painel */
.vp-filter-dropdown__panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 190px;
  background: #fff;
  border: 1px solid rgba(102, 102, 204, 0.18);
  border-radius: 14px;
  box-shadow: 0 8px 28px rgba(102, 102, 204, 0.14);
  padding: 6px;
  z-index: 200;
  animation: vpDdIn 0.14s ease;
}

.vp-filter-dropdown__panel.vp-dd-hidden { display: none !important; }

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

.vp-filter-dropdown--sort .vp-filter-dropdown__panel {
  left: auto;
  right: 0;
}

/* Item do dropdown */
.vp-filter-dropdown__item {
  display: block;
  padding: 9px 14px;
  border-radius: 8px;
  font-family: 'Nunito Sans', sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--vp-text);
  text-decoration: none !important;
  cursor: pointer;
  transition: background 0.14s, color 0.14s;
  white-space: nowrap;
  touch-action: manipulation;
}

.vp-filter-dropdown__item:hover {
  background: rgba(102, 102, 204, 0.07);
  color: var(--vp-primary) !important;
}

.vp-filter-dropdown__item.is-active {
  background: rgba(102, 102, 204, 0.1);
  color: var(--vp-primary) !important;
  font-weight: 700;
}

.vp-filter-dropdown__item.is-empty {
  opacity: 0.38;
  pointer-events: none;
  font-style: italic;
}

/* Backdrop (mobile): cobre a tela inteira */
.vp-filter-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 10000;
  -webkit-tap-highlight-color: transparent;
}

/* Mobile: scroll horizontal + painel em bottom sheet */
@media (max-width: 768px) {
  .vp-filter-bar {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 8px;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .vp-filter-bar::-webkit-scrollbar { display: none; }

  .vp-filter-pill {
    flex-shrink: 0;
    scroll-snap-align: start;
    height: 40px !important;
    font-size: 0.8125rem !important;
    padding: 0 16px !important;
  }

  /* Painel como body-child quando aberto no mobile */
  body > .vp-filter-dropdown__panel,
  .vp-filter-dropdown__panel.vp-is-mobile {
    position: fixed !important;
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    border-radius: 16px 16px 0 0 !important;
    padding: 16px 8px calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    min-width: unset !important;
    /* altura máxima: deixa pelo menos 120px de tela acima do painel */
    max-height: calc(100dvh - 120px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    box-shadow: 0 -4px 24px rgba(102, 102, 204, 0.15) !important;
    z-index: 10001 !important; /* acima do backdrop (10000) */
    animation: vpDdUp 0.2s ease !important;
  }

  @keyframes vpDdUp {
    from { transform: translateY(20px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
  }

  .vp-filter-dropdown__item {
    padding: 12px 16px;
    font-size: 0.9375rem;
  }
}


/* ============================================================
   19. TOOLBAR DA LOJA — ordenação estilizada como pill
   ============================================================ */

/* Oculta contagem e paginação no topo */
.storefront-sorting:not(.products + .storefront-sorting) .woocommerce-result-count,
.storefront-sorting:not(.products + .storefront-sorting) .woocommerce-pagination {
  display: none !important;
}

/* Oculta ordenação no rodapé da lista */
.products + .storefront-sorting .woocommerce-ordering { display: none !important; }

/* Fallback se JS não mover o sort (JS oculta via style.display='none') */
.storefront-sorting:not(.products + .storefront-sorting) {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0 0 20px;
}

/* Remove estilo nativo do browser */
.woocommerce-ordering select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  /* Visual — pill idêntico aos filtros */
  border: 2px solid var(--vp-primary);
  border-radius: 50px;
  background-color: transparent;
  color: var(--vp-primary);

  /* Seta: triângulo CSS puro (sem SVG — compatível com WAF) */
  background-image: none;
  background-repeat: no-repeat;
  background-position: right 14px center;

  /* Tipografia */
  font-family: 'Nunito Sans', sans-serif;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1;

  /* Espaçamento — deixa espaço para a seta */
  padding: 8px 40px 8px 18px;
  min-height: 44px;
  cursor: pointer;

  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* Hover / focus — inverte como os pills */
.woocommerce-ordering select:hover,
.woocommerce-ordering select:focus {
  background-color: var(--vp-primary);
  color: #fff;
  outline: none;
}

/* Wrapper com label "ORDENAR POR:" */
.woocommerce-ordering {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.woocommerce-ordering::before {
  content: 'Ordenar por:';
  font-family: 'Nunito Sans', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  color: #9999bb;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.woocommerce-ordering::after {
  content: '';
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid var(--vp-primary);
  pointer-events: none;
  transition: border-top-color 0.2s ease;
}

.woocommerce-ordering:hover::after {
  border-top-color: #fff;
}

/* Mobile */
@media (max-width: 768px) {
  .storefront-sorting:not(.products + .storefront-sorting) {
    justify-content: flex-end;
    padding: 0 10px 16px;
    margin-top: -6px;
  }

  .woocommerce-ordering select {
    font-size: 0.8125rem;
    padding: 6px 36px 6px 14px;
    min-height: 44px;
  }
}

/* Sem sidebar no checkout */
.woocommerce-checkout .col-1,
.woocommerce-checkout .col-2 { width: 100% !important; float: none !important; }

body.woocommerce-checkout .widget-area,
body.woocommerce-checkout #secondary { display: none !important; }


/* ============================================================
   20. GRID MOBILE (≤ 767px)
   ============================================================ */
@media (max-width: 767px) {

  ul.products {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 0 10px 90px !important;
    margin: 0 !important;
  }

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

  ul.products li.product,
  ul.products li.product.first,
  ul.products li.product.last {
    float: none !important;
    clear: none !important;
    width: 100% !important;
    margin: 0 !important;
    background: #f6f5fb;
    border-radius: 16px;
    overflow: hidden;
    display: flex !important;
    flex-direction: column;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  }

  ul.products li.product img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    margin: 0 !important;
    display: block;
  }

  ul.products li.product .woocommerce-loop-product__title {
    font-size: 12px;
    line-height: 1.25;
    font-weight: 700;
    color: #17174f;
    padding: 10px 10px 0;
    margin: 0 auto;
    max-width: 95%;
    min-height: 42px;
  }

  ul.products li.product .price {
    font-size: 13px;
    font-weight: 800;
    color: var(--vp-primary); /* corrigido: era #e05ba5 (pink inconsistente) */
    margin: 6px 0 8px !important;
    line-height: 1;
  }

  ul.products li.product .button {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: calc(100% - 20px);
    margin: 0 10px 10px !important;
    padding: 10px 8px;
    border-radius: 999px;
    background: #1fd15f;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.15;
    text-align: center;
    min-height: 44px; /* touch target */
  }

  ul.products li.product .added_to_cart {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: calc(100% - 20px);
    margin: 8px 10px 10px !important;
    padding: 9px 8px;
    border-radius: 999px;
    background: #6666cc;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.15;
    text-align: center;
    min-height: 44px; /* touch target */
  }

  ul.products li.product .star-rating { display: none !important; }
  ul.products li.product .button.loading::after { display: none !important; }

  .storefront-sorting { padding: 0 10px; margin-bottom: 12px; }
}


/* ============================================================
   21. BOTÃO FLUTUANTE WHATSAPP
   ============================================================ */
.whatsapp-float {
  position: fixed;
  bottom: 30px;
  right: 20px;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-direction: row-reverse;
}

.whatsapp-float__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25d366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.45);
  flex-shrink: 0;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.whatsapp-float__icon svg { width: 30px; height: 30px; fill: #fff; }

.whatsapp-float__label {
  background: #fff;
  color: #128c7e;
  padding: 8px 14px;
  border-radius: 24px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  border: 2px solid #25d366;
  line-height: 1;
}

.whatsapp-float:hover .whatsapp-float__icon {
  transform: scale(1.08);
  box-shadow: 0 6px 18px rgba(37, 211, 102, 0.55);
}

@media (max-width: 768px) {
  .whatsapp-float          { bottom: calc(16px + env(safe-area-inset-bottom, 0px)); right: 14px; }
  .whatsapp-float__label   { display: none; }
  .whatsapp-float__icon    { width: 52px; height: 52px; }
}


/* ============================================================
   22. TELAS MUITO PEQUENAS (≤ 480px)
   ============================================================ */
@media (max-width: 480px) {
  ul.products li.product .woocommerce-loop-product__title {
    font-size: 11px;
    min-height: 44px;
  }

  ul.products li.product .price {
    font-size: 12px;
  }

  ul.products li.product .button,
  ul.products li.product a.button,
  ul.products li.product .add_to_cart_button {
    font-size: 10px;
    padding: 9px 4px;
    margin: 0 6px 8px !important;
    width: calc(100% - 12px);
  }
}


/* ============================================================
   23. TABELA DE DOWNLOADS (Minha Conta)
   ============================================================ */
.woocommerce-table--order-downloads tbody tr {
  border-bottom: 1px solid rgba(102, 102, 204, 0.15);
}

.woocommerce-table--order-downloads tbody tr:last-child {
  border-bottom: none;
}

.woocommerce-table--order-downloads tbody td {
  padding-top: 18px !important;
  padding-bottom: 18px !important;
}


/* ============================================================
   24. BANNER DE COOKIES (plugin Cookie Notice)
   ============================================================ */
#cookie-notice {
  border-top: 1px solid #e0e0e0 !important;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06) !important;
  padding: 14px 30px !important;
}

#cookie-notice .cookie-notice-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  gap: 20px;
}

#cookie-notice #cn-notice-text {
  font-size: 13px !important;
  color: #333 !important;
  line-height: 1.5 !important;
  flex: 1 !important;
  margin: 0 !important;
}

#cookie-notice #cn-notice-buttons {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  flex-shrink: 0 !important;
}

/* Botão Aceitar */
#cookie-notice #cn-accept-cookie {
  background-color: var(--vp-cta) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 30px !important;
  padding: 10px 24px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  min-height: 44px !important;
  order: 2 !important;
  transition: background-color 0.2s ease !important;
}

#cookie-notice #cn-accept-cookie:hover {
  background-color: var(--vp-cta-hover) !important;
}

/* Link "Mais informações" */
#cookie-notice #cn-more-info {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #333 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  order: 1 !important;
}

#cookie-notice #cn-more-info:hover {
  text-decoration: underline !important;
}

/* Oculta botão Recusar e banner de revogação */
#cookie-notice #cn-refuse-cookie,
#cookie-notice .cookie-revoke-container { display: none !important; }

@media (max-width: 768px) {
  #cookie-notice {
    padding: 12px 16px !important;
  }

  #cookie-notice .cookie-notice-container {
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
    text-align: center !important;
  }

  #cookie-notice #cn-notice-buttons {
    justify-content: center !important;
    width: 100% !important;
  }
}


/* ============================================================
   25. TOP BAR
   ============================================================ */
.vp-top-bar {
  background: var(--vp-navy);
  color: rgba(255, 255, 255, 0.88);
  font-size: 11.5px;
  font-family: 'Nunito Sans', sans-serif;
  font-weight: 600;
  letter-spacing: 0.025em;
  padding: 7px 0;
}

.vp-top-bar__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.vp-top-bar__item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

/* Força dimensões dos ícones SVG — WooCommerce/Storefront tem reset que força svg { width:100% } */
.vp-top-bar__icon,
.vp-top-bar svg {
  width: 12px !important;
  height: 12px !important;
  min-width: 12px !important;
  max-width: 12px !important;
  min-height: 12px !important;
  max-height: 12px !important;
  display: inline-block !important;
  vertical-align: middle !important;
  flex-shrink: 0 !important;
  opacity: 0.8;
}

.vp-top-bar__dot {
  color: rgba(255, 255, 255, 0.3);
  font-size: 18px;
  line-height: 1;
  user-select: none;
}

@media (max-width: 600px) {
  .vp-top-bar__dot { display: none; }
  .vp-top-bar__item:not(:first-child) { display: none; }
  .vp-top-bar { padding: 6px 16px; }
  .vp-top-bar__inner { justify-content: center; }
}


/* ============================================================
   26. HEADER — layout flex desktop
   ============================================================ */
/* Row: logo | search (flex-grow) | cart */
.site-header .col-full {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 16px !important;
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}

/* Storefront: .site-branding { width:73.9%; float:left; clear:both }
   Sobrescrevemos tudo para o flex funcionar corretamente */
.site-header .site-branding {
  flex: 0 0 auto !important;
  width: auto !important;
  float: none !important;
  clear: none !important;
  margin: 0 !important;
  order: 2;
}

/* Storefront: .site-search { width:21.7%; float:right } */
.site-header .site-search {
  flex: 1 1 auto !important;
  width: auto !important;
  float: none !important;
  clear: none !important;
  max-width: 500px !important;
  margin: 0 !important;
  order: 3;
}

/* ── Search form (template: woocommerce/product-search-form.php) ── */
/* ── Reset do form ──────────────────────────────────────── */
.site-header .site-search form,
.site-header .vp-search-form { margin: 0 !important; }

/* ── Wrapper: contexto de posicionamento ────────────────── */
/* Funciona tanto com .vp-search-wrap (nosso template) quanto
   com .woocommerce-product-search (template padrão do WC)   */
.site-header .vp-search-wrap,
.site-header .woocommerce-product-search,
.site-header .widget_product_search form {
  position: relative !important;
  display: block !important;
}

/* ── Input — funciona com ambas as classes ──────────────── */
.site-header .vp-search-input,
.site-header .search-field {
  width: 100% !important;
  height: 44px !important;
  padding: 0 48px 0 18px !important;
  border: 2px solid rgba(102, 102, 204, 0.18) !important;
  border-radius: 50px !important;
  background: #f7f7fc !important;
  font-size: 0.875rem !important;
  font-family: 'Nunito Sans', sans-serif !important;
  color: var(--vp-text) !important;
  line-height: 1 !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  box-shadow: none !important;
  transition: border-color 0.18s, box-shadow 0.18s, background 0.18s !important;
  box-sizing: border-box !important;
  display: block !important;
}

.site-header .vp-search-input:focus,
.site-header .search-field:focus {
  border-color: var(--vp-primary) !important;
  box-shadow: 0 0 0 3px rgba(102, 102, 204, 0.12) !important;
  background: #fff !important;
  outline: none !important;
}

.site-header .vp-search-input::placeholder,
.site-header .search-field::placeholder { color: #aaa !important; opacity: 1 !important; }

/* ── Botão submit — nosso template (.vp-search-btn com SVG) */
.site-header .vp-search-btn {
  position: absolute !important;
  right: 7px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: none !important;
  border: none !important;
  color: #999 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
  transition: color 0.15s, background 0.15s !important;
}

.site-header .vp-search-btn:hover {
  color: var(--vp-primary) !important;
  background: rgba(102, 102, 204, 0.08) !important;
}

.site-header .vp-search-btn svg {
  width: 18px !important;
  height: 18px !important;
  display: block !important;
  pointer-events: none !important;
}

/* ── Botão submit — template padrão WC (sem SVG, só span.screen-reader-text)
   Mostra ícone de lupa via background-image inline SVG                       */
.site-header .woocommerce-product-search button[type="submit"]:not(.vp-search-btn),
.site-header .widget_product_search button[type="submit"]:not(.vp-search-btn) {
  position: absolute !important;
  right: 7px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  background-color: transparent !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 18px 18px !important;
  /* Oculta o texto "Search" do span interno */
  font-size: 0 !important;
  color: transparent !important;
  overflow: hidden !important;
  transition: background-color 0.15s !important;
  /* Reset clip do Storefront */
  clip: auto !important;
  clip-path: none !important;
}

.site-header .woocommerce-product-search button[type="submit"]:not(.vp-search-btn):hover,
.site-header .widget_product_search button[type="submit"]:not(.vp-search-btn):hover {
  background-color: rgba(102, 102, 204, 0.08) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236666cc' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") !important;
}

/* Neutraliza pseudo-elementos do Storefront no form */
.site-header .woocommerce-product-search::before,
.site-header .woocommerce-product-search::after,
.site-header .widget_product_search::before,
.site-header .widget_product_search::after { display: none !important; content: none !important; }

/* Cart — movido pelo PHP para dentro do primeiro col-full */
/* Storefront: .site-header-cart { width:21.7%; float:right } */
.site-header-cart {
  flex: 0 0 auto !important;
  width: auto !important;
  float: none !important;
  margin: 0 !important;
  order: 5;
}

/* Account link — desktop only */
.vp-account-link {
  order: 4;
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 10px !important;
  border-radius: 8px !important;
  color: var(--vp-text) !important;
  text-decoration: none !important;
  transition: background 0.15s, color 0.15s !important;
  white-space: nowrap !important;
  min-height: 44px !important;
}

.vp-account-link:hover {
  background: rgba(102, 102, 204, 0.07) !important;
  color: var(--vp-primary) !important;
  text-decoration: none !important;
}

.vp-account-link__icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--vp-primary) !important;
  flex-shrink: 0 !important;
  transition: color 0.15s !important;
}

.vp-account-link:hover .vp-account-link__icon {
  color: var(--vp-primary-hover) !important;
}

.vp-account-link__text {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  line-height: 1.2 !important;
}

.vp-account-link__sublabel {
  font-size: 10px !important;
  font-weight: 500 !important;
  color: #999 !important;
  font-family: 'Inter', sans-serif !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}

.vp-account-link__label {
  font-size: 0.8125rem !important;
  font-weight: 700 !important;
  font-family: 'Nunito Sans', sans-serif !important;
  color: inherit !important;
  max-width: 120px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.site-header-cart .cart-contents {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  white-space: nowrap !important;
  min-height: 44px !important;
  padding: 4px 8px !important;
}

/* Mini-cart dropdown: escondido por padrão (WooCommerce mostra no hover via JS) */
.site-header-cart .widget_shopping_cart { display: none !important; }
.site-header-cart:hover .widget_shopping_cart,
.site-header-cart.active .widget_shopping_cart { display: block !important; }

/* ── Ícone SVG do carrinho + badge de contagem ─────── */
.vp-cart-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--vp-primary);
  flex-shrink: 0;
}

.vp-cart-badge {
  position: absolute;
  top: -7px;
  right: -10px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  background: #e5497a;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  font-family: 'Inter', sans-serif;
  line-height: 18px;
  text-align: center;
  border-radius: 10px;
  box-sizing: border-box;
  pointer-events: none;
  display: none; /* visible on mobile only — section 29 */
}

/* Esconde a nav do Storefront (substituída pela .vp-nav-bar) */
.main-navigation { display: none !important; }

/* Hide Storefront's own mobile menu toggle */
button.storefront-menu-toggle,
.storefront-menu-toggle,
button.menu-toggle,
.menu-toggle { display: none !important; }


/* ============================================================
   27. NAV BAR — faixa de categorias (desktop)
   ============================================================ */
.vp-nav-bar {
  background: #fff;
  border-bottom: 1px solid var(--vp-border);
}

.vp-nav-bar__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* List reset */
.vp-nav-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: stretch !important;
  flex-wrap: nowrap !important;
  justify-content: center !important;
}

/* Top-level items */
.vp-nav-list > .menu-item { position: relative; }

.vp-nav-list > .menu-item > a {
  display: inline-flex !important;
  align-items: center !important;
  padding: 13px 15px !important;
  font-family: 'Nunito Sans', sans-serif !important;
  font-size: 0.8125rem !important;
  font-weight: 700 !important;
  color: var(--vp-text) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  border-bottom: 2px solid transparent !important;
  margin-bottom: -1px !important; /* flush with nav-bar border */
  transition: color 0.15s, border-color 0.15s !important;
}

.vp-nav-list > .menu-item:hover > a,
.vp-nav-list > .menu-item.current-menu-item > a,
.vp-nav-list > .menu-item.current-menu-ancestor > a {
  color: var(--vp-primary) !important;
  border-bottom-color: var(--vp-primary) !important;
}

/* Dropdown chevron */
.vp-nav-list > .menu-item-has-children > a::after {
  content: '';
  display: inline-block;
  margin-left: 5px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  opacity: 0.55;
  transition: transform 0.15s, opacity 0.15s;
  flex-shrink: 0;
}

.vp-nav-list > .menu-item-has-children:hover > a::after {
  transform: rotate(180deg);
  opacity: 1;
}

/* Dropdown panel */
.vp-nav-list .sub-menu {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 6px !important;
  position: absolute !important;
  top: calc(100% + 1px) !important;
  left: 0 !important;
  min-width: 200px !important;
  background: #fff !important;
  border: 1px solid rgba(102, 102, 204, 0.12) !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 24px rgba(102, 102, 204, 0.12) !important;
  z-index: 600 !important;
  transform: translateY(-4px) !important;
  transition: opacity 0.15s, transform 0.15s, visibility 0.15s !important;
}

.vp-nav-list .menu-item-has-children:hover > .sub-menu {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}

.vp-nav-list .sub-menu .menu-item > a {
  display: block !important;
  padding: 8px 12px !important;
  border-radius: 6px !important;
  font-family: 'Nunito Sans', sans-serif !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  color: var(--vp-text) !important;
  text-decoration: none !important;
  transition: background 0.12s, color 0.12s !important;
  white-space: nowrap !important;
}

.vp-nav-list .sub-menu .menu-item:hover > a {
  background: rgba(102, 102, 204, 0.07) !important;
  color: var(--vp-primary) !important;
}

/* "Gratuitos" — destaque verde */
.vp-nav-list > .menu-item:last-child > a {
  color: var(--vp-cta) !important;
  font-weight: 800 !important;
}
.vp-nav-list > .menu-item:last-child:hover > a {
  color: var(--vp-cta-hover) !important;
  border-bottom-color: var(--vp-cta) !important;
}


/* ============================================================
   28. HAMBURGUER
   ============================================================ */
.vp-hamburger {
  display: none; /* visível apenas no mobile */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 8px;
  background: none;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s;
}

.vp-hamburger:hover { background: rgba(102, 102, 204, 0.07); }
.vp-hamburger:focus-visible { outline: 3px solid rgba(102, 102, 204, 0.4); outline-offset: 2px; }

.vp-hamburger__line {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--vp-primary);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.vp-hamburger[aria-expanded="true"] .vp-hamburger__line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.vp-hamburger[aria-expanded="true"] .vp-hamburger__line:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.vp-hamburger[aria-expanded="true"] .vp-hamburger__line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}


/* ============================================================
   29. HEADER MOBILE (≤ 767px)
   Estrutura: hamburguer (esq) | logo (centro) | carrinho (dir)
              busca (largura total, linha 2)
   Referência: layout Integralmedica
   ============================================================ */
@media (max-width: 767px) {

  /* ── Remove barra inferior fixa do Storefront ─────────── */
  .storefront-handheld-footer-bar { display: none !important; }

  /* ── Grid 3 colunas — linha 1 do header ──────────────── */
  .site-header .col-full {
    display: grid !important;
    grid-template-columns: 44px 1fr 44px !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    gap: 0 !important;
    padding: 10px 14px !important;
    /* reset flex herdado do desktop */
    flex-wrap: unset !important;
  }

  /* Hamburguer — coluna 1, linha 1 */
  .vp-hamburger {
    display: flex !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: start !important;
    width: 44px !important;
    height: 44px !important;
    margin: 0 !important;
    order: unset !important;
    flex: unset !important;
  }

  /* Logo — coluna 2, linha 1, centralizada */
  .site-header .site-branding {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: center !important;
    align-self: center !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    order: unset !important;
    flex: unset !important;
    float: none !important;
  }

  /* Carrinho — coluna 3, linha 1, alinhado à direita */
  .site-header-cart {
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    width: 44px !important;
    margin: 0 !important;
    order: unset !important;
    flex: unset !important;
  }

  /* Link de conta: oculto no mobile */
  .vp-account-link { display: none !important; }

  /* ── Badge + ocultar texto de preço ───────────────────── */
  .vp-cart-badge { display: block !important; }
  .site-header-cart .cart-contents .amount,
  .site-header-cart .cart-contents .count { display: none !important; }

  /* Mini-cart: desabilitado no mobile (drawer cuida disso) */
  .site-header-cart .widget_shopping_cart,
  .site-header-cart:hover .widget_shopping_cart,
  .site-header-cart.active .widget_shopping_cart { display: none !important; }

  /* ── Busca — coluna 1-3, linha 2 ─────────────────────── */
  /* O Storefront oculta .site-search no mobile esperando a barra inferior.
     Como removemos a barra inferior, forçamos a exibição aqui. */
  .site-header .site-search {
    display: block !important;
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 8px 0 6px !important;
    order: unset !important;
    flex: unset !important;
  }

  /* Campo de busca mobile: leve ajuste de tamanho */
  .site-header .vp-search-input,
  .site-header .search-field {
    height: 46px !important;
    font-size: 0.9375rem !important;
  }

  /* Barra de categorias: oculta no mobile */
  .vp-nav-bar { display: none !important; }
}


/* ============================================================
   30. OVERLAY + OFF-CANVAS MENU
   ============================================================ */
body.vp-no-scroll { overflow: hidden !important; touch-action: none; }

.vp-mobile-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 10010;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.vp-mobile-overlay.is-visible {
  visibility: visible;
  opacity: 1;
}

.vp-mobile-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 85%;
  max-width: 360px;
  height: 100vh;
  height: 100dvh;
  background: #fff;
  z-index: 10011;
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.14);
  will-change: transform;
}

.vp-mobile-nav.is-open { transform: translateX(0); }

/* Cabeçalho do painel */
.vp-mobile-nav__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--vp-border);
  flex-shrink: 0;
}

.vp-mobile-nav__logo-link img {
  height: 30px;
  width: auto;
  display: block;
}

.vp-mobile-nav__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--vp-text);
  border-radius: 8px;
  padding: 0;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}

.vp-mobile-nav__close:hover { background: rgba(102, 102, 204, 0.07); color: var(--vp-primary); }
.vp-mobile-nav__close:focus-visible { outline: 3px solid rgba(102, 102, 204, 0.4); outline-offset: 2px; }
.vp-mobile-nav__close svg { width: 20px; height: 20px; display: block; }

/* Corpo rolável */
.vp-mobile-nav__body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
}

/* Lista principal */
.vp-mobile-nav__list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.vp-mobile-nav__list > .menu-item {
  border-bottom: 1px solid rgba(102, 102, 204, 0.07);
  position: relative;
}

.vp-mobile-nav__list > .menu-item > a {
  display: flex !important;
  align-items: center !important;
  padding: 15px 20px !important;
  font-family: 'Nunito Sans', sans-serif !important;
  font-size: 0.9375rem !important;
  font-weight: 700 !important;
  color: var(--vp-navy) !important;
  text-decoration: none !important;
  transition: background 0.12s, color 0.12s !important;
}

.vp-mobile-nav__list > .menu-item > a:hover {
  background: rgba(102, 102, 204, 0.04) !important;
  color: var(--vp-primary) !important;
}

/* Itens com sub-menu: espaço para o botão */
.vp-mobile-nav__list > .menu-item-has-children > a {
  padding-right: 52px !important;
}

/* Submenu (controlado por JS via max-height) */
.vp-mobile-nav__list .sub-menu {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: rgba(102, 102, 204, 0.03);
  overflow: hidden;
}

.vp-mobile-nav__list .sub-menu .menu-item > a {
  display: block !important;
  padding: 12px 20px 12px 36px !important;
  font-family: 'Nunito Sans', sans-serif !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  color: var(--vp-text) !important;
  text-decoration: none !important;
  transition: color 0.12s, background 0.12s !important;
}

.vp-mobile-nav__list .sub-menu .menu-item > a:hover {
  color: var(--vp-primary) !important;
  background: rgba(102, 102, 204, 0.06) !important;
}

/* Separador + itens extras */
.vp-mobile-nav__divider {
  border: none;
  border-top: 1px solid var(--vp-border);
  margin: 8px 20px;
}

.vp-mobile-nav__extras {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.vp-mobile-nav__extras .menu-item > a,
.vp-mobile-nav__extras li > a {
  display: flex !important;
  align-items: center !important;
  padding: 13px 20px !important;
  font-family: 'Nunito Sans', sans-serif !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  color: var(--vp-text-muted) !important;
  text-decoration: none !important;
  transition: color 0.12s !important;
}

.vp-mobile-nav__extras li > a:hover { color: var(--vp-primary) !important; }


/* ============================================================
   31. ACCORDION TOGGLE
   ============================================================ */
.vp-acc-toggle {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  color: var(--vp-text-muted);
  border-radius: 6px;
  transition: color 0.15s, background 0.15s;
  flex-shrink: 0;
}

.vp-acc-toggle:hover { color: var(--vp-primary); background: rgba(102, 102, 204, 0.07); }
.vp-acc-toggle:focus-visible { outline: 3px solid rgba(102, 102, 204, 0.4); outline-offset: -2px; }

.vp-acc-chevron {
  display: block;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid currentColor;
  transition: transform 0.2s ease;
}

.menu-item-has-children.vp-acc-open > .vp-acc-toggle .vp-acc-chevron {
  transform: rotate(180deg);
}


/* ============================================================
   32. CART DRAWER (painel lateral)
   ============================================================ */
.vp-cart-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 10008;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.vp-cart-drawer-overlay.is-visible {
  visibility: visible;
  opacity: 1;
}

.vp-cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 90%;
  max-width: 420px;
  height: 100vh;
  height: 100dvh;
  background: #fff;
  z-index: 10009;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.14);
  will-change: transform;
}

.vp-cart-drawer.is-open { transform: translateX(0); }

.vp-cart-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--vp-border);
  flex-shrink: 0;
}

.vp-cart-drawer__title {
  font-family: 'Inter', sans-serif !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: var(--vp-navy) !important;
  margin: 0 !important;
}

.vp-cart-drawer__close {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: var(--vp-text-muted);
  font-size: 0.875rem;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 6px;
  min-height: 44px;
  transition: color 0.15s, background 0.15s;
}

.vp-cart-drawer__close:hover {
  color: var(--vp-navy);
  background: rgba(0, 0, 0, 0.05);
}

.vp-cart-drawer__body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 20px;
}

/* WooCommerce mini-cart dentro do drawer */
.vp-cart-drawer .widget { margin: 0 !important; }
.vp-cart-drawer .widget_shopping_cart { display: block !important; }

.vp-cart-drawer .woocommerce-mini-cart__empty-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 48px 0 32px;
  color: var(--vp-text-muted);
  font-size: 0.9375rem;
  text-align: center;
}

.vp-cart-drawer .woocommerce-mini-cart {
  list-style: none !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
}

.vp-cart-drawer .woocommerce-mini-cart-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--vp-border);
}

.vp-cart-drawer .woocommerce-mini-cart-item img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
}

.vp-cart-drawer .woocommerce-mini-cart__total {
  font-size: 1rem;
  padding: 14px 0 4px;
  border-top: 1px solid var(--vp-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.vp-cart-drawer .woocommerce-mini-cart__total strong { font-weight: 700; }
.vp-cart-drawer .woocommerce-mini-cart__total .woocommerce-Price-amount {
  font-weight: 700;
  color: var(--vp-primary);
}

.vp-cart-drawer .woocommerce-mini-cart__buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
}

.vp-cart-drawer .woocommerce-mini-cart__buttons a {
  display: block !important;
  text-align: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
}


/* ============================================================
   35. PÁGINA DO CARRINHO — REDESIGN COMPLETO
   ============================================================ */

/* ── Wrapper geral ──────────────────────────────────────── */
/* O shortcode clássico fica dentro do wrapper do Gutenberg block.
   Resetamos o wrapper para não conflitar com o nosso layout. */
.woocommerce-cart .wp-block-woocommerce-cart {
  display: block !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  contain: none !important;
}

.woocommerce-cart .entry-content { padding: 0 !important; }

/* Remove título "Carrinho" do Storefront (redundante) */
.woocommerce-cart .entry-header { display: none !important; }

/* Headline customizada */
.woocommerce-cart-form::before {
  content: 'Seu carrinho';
  display: block;
  font-family: 'Nunito Sans', sans-serif;
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--vp-navy);
  margin-bottom: 24px;
  letter-spacing: -0.02em;
}

/* ── Layout: float (compatível com Storefront, confiável) ── */
/* Clearfix para o container */
.woocommerce-cart .woocommerce::after {
  content: '' !important;
  display: table !important;
  clear: both !important;
}
.woocommerce-cart .woocommerce {
  padding: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Formulário: float left */
.woocommerce-cart .woocommerce-cart-form {
  float: left !important;
  width: 58% !important;
  box-sizing: border-box !important;
  padding-right: 24px !important;
}

/* Totais: float right — percentual para não estouar o wrapper */
.woocommerce-cart .cart-collaterals {
  float: right !important;
  width: 40% !important;
  box-sizing: border-box !important;
}

/* Storefront já flutua .cart_totals dentro de .cart-collaterals a 52.94%.
   Anulamos isso para que ocupe 100% do contêiner pai que definimos. */
.woocommerce-cart .cart-collaterals .cart_totals {
  float: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* ── Tabela do carrinho ──────────────────────────────────── */
.woocommerce-cart .shop_table.cart {
  border: none !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  background: #fff !important;
  box-shadow: 0 1px 8px rgba(102, 102, 204, 0.08) !important;
  /* table-layout: fixed → respeita width declarado em cada coluna */
  table-layout: fixed !important;
  border-collapse: collapse !important;
  width: 100% !important;
}

/* Cabeçalho da tabela */
.woocommerce-cart .shop_table thead th {
  background: #f8f8fc !important;
  font-family: 'Nunito Sans', sans-serif !important;
  font-size: 0.6875rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: #888 !important;
  padding: 14px 16px !important;
  border: none !important;
}

/* Linhas */
.woocommerce-cart .shop_table tbody tr {
  border-bottom: 1px solid var(--vp-border) !important;
}

.woocommerce-cart .shop_table tbody tr:last-child {
  border-bottom: none !important;
}

.woocommerce-cart .shop_table td {
  border: none !important;
  padding: 16px !important;
  vertical-align: middle !important;
}

/* Hover row */
.woocommerce-cart .shop_table tbody tr:hover {
  background: #fafafd !important;
}

/* ── Larguras de coluna (fixas com table-layout:fixed) ───── */
/* Com table-layout:fixed o browser usa exatamente as larguras declaradas.
   product-name não tem width definido → recebe o espaço restante. */
.woocommerce-cart .product-remove   { width: 44px  !important; }
.woocommerce-cart .product-thumbnail { width: 80px  !important; }
.woocommerce-cart .product-price    { width: 110px !important; }
.woocommerce-cart .product-quantity { width: 110px !important; }
.woocommerce-cart .product-subtotal { width: 120px !important; }

/* ── Coluna: remover ─────────────────────────────────────── */

.woocommerce-cart .product-remove a.remove {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: #f5f5f8 !important;
  color: #aaa !important;
  font-size: 1.1rem !important;
  font-weight: 400 !important;
  text-decoration: none !important;
  transition: background 0.15s, color 0.15s !important;
  line-height: 1 !important;
}

.woocommerce-cart .product-remove a.remove:hover {
  background: #ffe4ec !important;
  color: #e5497a !important;
}

/* ── Coluna: thumbnail ───────────────────────────────────── */
.woocommerce-cart .product-thumbnail img {
  width: 60px !important;
  height: 60px !important;
  object-fit: cover !important;
  border-radius: 8px !important;
  display: block !important;
  border: 1px solid var(--vp-border) !important;
}

/* ── Coluna: nome ────────────────────────────────────────── */
.woocommerce-cart .product-name a {
  font-family: 'Nunito Sans', sans-serif !important;
  font-size: 0.9375rem !important;
  font-weight: 700 !important;
  color: var(--vp-primary) !important;
  text-decoration: none !important;
  line-height: 1.3 !important;
  transition: color 0.15s !important;
}

.woocommerce-cart .product-name a:hover { color: var(--vp-primary-hover, #5555bb) !important; }

.woocommerce-cart .product-name .variation {
  font-size: 0.8125rem !important;
  color: var(--vp-text-muted) !important;
  margin-top: 4px !important;
}

/* ── Coluna: preço ───────────────────────────────────────── */
.woocommerce-cart .product-price,
.woocommerce-cart .product-subtotal {
  font-family: 'Nunito Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.9375rem !important;
  color: var(--vp-navy) !important;
}

.woocommerce-cart .product-subtotal .woocommerce-Price-amount {
  color: var(--vp-primary) !important;
}

/* ── Coluna: quantidade ──────────────────────────────────── */
.woocommerce-cart .product-quantity .qty {
  width: 60px !important;
  height: 40px !important;
  padding: 0 8px !important;
  text-align: center !important;
  font-family: 'Nunito Sans', sans-serif !important;
  font-size: 0.9375rem !important;
  font-weight: 700 !important;
  border: 2px solid var(--vp-border) !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: var(--vp-navy) !important;
  -moz-appearance: textfield !important;
  transition: border-color 0.18s !important;
}

.woocommerce-cart .product-quantity .qty::-webkit-inner-spin-button,
.woocommerce-cart .product-quantity .qty::-webkit-outer-spin-button { -webkit-appearance: none !important; }

.woocommerce-cart .product-quantity .qty:focus {
  outline: none !important;
  border-color: var(--vp-primary) !important;
  box-shadow: 0 0 0 3px rgba(102, 102, 204, 0.12) !important;
}

/* ── Área de cupom + atualizar ───────────────────────────── */
/* Barra mínima, sem destaque — foco deve ficar nos CTAs de compra */
.woocommerce-cart .actions {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  padding: 12px 0 0 !important;
  border-top: 1px solid var(--vp-border) !important;
  background: transparent !important;
  border-radius: 0 !important;
  margin-top: 8px !important;
}

/* Cupom: sempre visível (igual à referência) */
.woocommerce-cart .coupon {
  display: flex !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  flex: 1 1 auto !important;
}

.woocommerce-cart .coupon #coupon_code {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: none !important;
  width: auto !important;
  height: 44px !important;
  padding: 0 18px !important;
  border: 1.5px solid var(--vp-border) !important;
  border-radius: var(--vp-radius-pill) !important;
  font-size: 0.875rem !important;
  font-family: 'Inter', sans-serif !important;
  background: #fff !important;
  color: var(--vp-text) !important;
  transition: border-color 0.18s !important;
}

.woocommerce-cart .coupon #coupon_code:focus {
  outline: none !important;
  border-color: var(--vp-primary) !important;
  box-shadow: 0 0 0 3px rgba(102, 102, 204, 0.1) !important;
}

.woocommerce-cart .coupon #coupon_code::placeholder { color: #aaa !important; }

/* Botão "Aplicar cupom" — outline secundário, não ocupa largura total */
.woocommerce-cart .coupon .button,
.woocommerce-cart button[name="apply_coupon"] {
  display: inline-block !important;
  width: auto !important;
  flex: 0 0 auto !important;
  height: 44px !important;
  padding: 0 20px !important;
  font-size: 0.8125rem !important;
  font-weight: 700 !important;
  font-family: 'Nunito Sans', sans-serif !important;
  white-space: nowrap !important;
  border-radius: var(--vp-radius-pill) !important;
  background: transparent !important;
  border: 2px solid var(--vp-primary) !important;
  color: var(--vp-primary) !important;
  cursor: pointer !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  transition: background 0.15s, color 0.15s !important;
}

.woocommerce-cart .coupon .button:hover,
.woocommerce-cart button[name="apply_coupon"]:hover {
  background: var(--vp-primary) !important;
  color: #fff !important;
}

/* "Atualizar carrinho" — pill outline, auto-largura */
.woocommerce-cart button[name="update_cart"] {
  display: inline-block !important;
  width: auto !important;
  flex: 0 0 auto !important;
  height: 44px !important;
  padding: 0 20px !important;
  font-size: 0.8125rem !important;
  font-weight: 700 !important;
  font-family: 'Nunito Sans', sans-serif !important;
  white-space: nowrap !important;
  border-radius: var(--vp-radius-pill) !important;
  background: transparent !important;
  border: 2px solid var(--vp-border) !important;
  color: var(--vp-text-muted) !important;
  cursor: pointer !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  transition: border-color 0.15s, color 0.15s !important;
}

.woocommerce-cart button[name="update_cart"]:hover {
  border-color: var(--vp-primary) !important;
  color: var(--vp-primary) !important;
}

/* ── Notices / mensagens ─────────────────────────────────── */
.woocommerce-cart .woocommerce-message,
.woocommerce-cart .woocommerce-error,
.woocommerce-cart .woocommerce-info {
  border-radius: 10px !important;
  padding: 12px 18px !important;
  font-size: 0.9rem !important;
  margin-bottom: 20px !important;
}

/* ── Totals card ─────────────────────────────────────────── */
.woocommerce-cart .cart_totals {
  background: #fff !important;
  border-radius: 16px !important;
  box-shadow: 0 2px 16px rgba(102, 102, 204, 0.1) !important;
  overflow: hidden !important;
  border: 1px solid rgba(102, 102, 204, 0.1) !important;
}

.woocommerce-cart .cart_totals h2 {
  font-family: 'Nunito Sans', sans-serif !important;
  font-size: 1rem !important;
  font-weight: 800 !important;
  color: var(--vp-navy) !important;
  padding: 20px 24px 16px !important;
  margin: 0 !important;
  border-bottom: 1px solid var(--vp-border) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

.woocommerce-cart .cart_totals table {
  width: 100% !important;
  border-collapse: collapse !important;
}

.woocommerce-cart .cart_totals table th,
.woocommerce-cart .cart_totals table td {
  padding: 14px 24px !important;
  border: none !important;
  border-bottom: 1px solid var(--vp-border) !important;
  font-size: 0.9375rem !important;
}

.woocommerce-cart .cart_totals table th {
  font-family: 'Nunito Sans', sans-serif !important;
  font-weight: 600 !important;
  color: var(--vp-text-muted) !important;
  width: 50% !important;
}

.woocommerce-cart .cart_totals table td {
  font-family: 'Nunito Sans', sans-serif !important;
  font-weight: 700 !important;
  color: var(--vp-navy) !important;
  text-align: right !important;
}

/* Linha do total final */
.woocommerce-cart .cart_totals .order-total th,
.woocommerce-cart .cart_totals .order-total td {
  border-bottom: none !important;
  padding-bottom: 20px !important;
}

.woocommerce-cart .cart_totals .order-total th {
  font-size: 1rem !important;
  font-weight: 800 !important;
  color: var(--vp-navy) !important;
}

.woocommerce-cart .cart_totals .order-total td .woocommerce-Price-amount {
  font-size: 1.1rem !important;
  font-weight: 800 !important;
  color: var(--vp-primary) !important;
}

/* Shipping radio */
.woocommerce-cart .cart_totals .shipping ul,
.woocommerce-cart .cart_totals #shipping_method {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ── CTAs do carrinho ────────────────────────────────────── */
.woocommerce-cart .wc-proceed-to-checkout { padding: 0 24px 24px !important; }

/* Remove o botão padrão caso algum plugin o re-adicione */
.woocommerce-cart .wc-proceed-to-checkout > a.checkout-button:not(.vp-cart-btn--primary) {
  display: none !important;
}

.vp-cart-actions {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  padding-top: 4px !important;
}

.vp-cart-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  min-height: 52px !important;
  padding: 0 24px !important;
  border-radius: var(--vp-radius-pill) !important;
  font-family: 'Nunito Sans', sans-serif !important;
  font-size: 1rem !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: background 0.18s, color 0.18s, box-shadow 0.18s, transform 0.12s !important;
  touch-action: manipulation !important;
  box-sizing: border-box !important;
}

.vp-cart-btn--primary {
  background: var(--vp-primary) !important;
  color: #fff !important;
  box-shadow: 0 4px 16px rgba(102, 102, 204, 0.38) !important;
}

.vp-cart-btn--primary:hover {
  background: var(--vp-primary-hover) !important;
  color: #fff !important;
  box-shadow: 0 6px 22px rgba(102, 102, 204, 0.46) !important;
  transform: translateY(-1px) !important;
  text-decoration: none !important;
}

.vp-cart-btn--primary:active { transform: translateY(0) !important; }

.vp-cart-btn--secondary {
  background: transparent !important;
  color: var(--vp-primary) !important;
  border: 2px solid rgba(102, 102, 204, 0.3) !important;
  font-weight: 700 !important;
}

.vp-cart-btn--secondary:hover {
  background: rgba(102, 102, 204, 0.06) !important;
  border-color: var(--vp-primary) !important;
  color: var(--vp-primary) !important;
  text-decoration: none !important;
}

/* Badge de segurança abaixo dos CTAs */
.vp-cart-secure {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  margin: 4px 0 0 !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  color: #888 !important;
  letter-spacing: 0.01em !important;
}

.vp-cart-secure svg { flex-shrink: 0 !important; opacity: 0.7 !important; }

/* ── Carrinho vazio ──────────────────────────────────────── */
.woocommerce-cart .cart-empty {
  text-align: center !important;
  padding: 60px 24px !important;
  font-family: 'Nunito Sans', sans-serif !important;
  font-size: 1.1rem !important;
  color: var(--vp-text-muted) !important;
}

.woocommerce-cart .return-to-shop .button {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 48px !important;
  padding: 0 28px !important;
  border-radius: var(--vp-radius-pill) !important;
  background: var(--vp-primary) !important;
  color: #fff !important;
  font-family: 'Nunito Sans', sans-serif !important;
  font-weight: 800 !important;
  font-size: 1rem !important;
  text-decoration: none !important;
  border: none !important;
  margin-top: 16px !important;
  transition: background 0.18s !important;
}

.woocommerce-cart .return-to-shop .button:hover {
  background: var(--vp-primary-hover) !important;
}

/* ── Mobile: ≤ 767px ─────────────────────────────────────── */
@media (max-width: 767px) {

  /* Float → empilha */
  .woocommerce-cart .woocommerce-cart-form,
  .woocommerce-cart .cart-collaterals {
    float: none !important;
    width: 100% !important;
  }

  .woocommerce-cart .woocommerce-cart-form::before {
    font-size: 1.375rem !important;
    margin-bottom: 16px !important;
  }

  /* Tabela responsiva: linhas viram cards (como a referência) */
  .woocommerce-cart .shop_table.cart,
  .woocommerce-cart .shop_table.cart tbody,
  .woocommerce-cart .shop_table.cart tr,
  .woocommerce-cart .shop_table.cart td {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Esconde o cabeçalho — os data-title no td fazem o papel */
  .woocommerce-cart .shop_table.cart thead { display: none !important; }

  /* Cada item = card branco com borda */
  .woocommerce-cart .shop_table.cart tbody tr {
    background: #fff !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 6px rgba(102,102,204,0.08) !important;
    margin-bottom: 12px !important;
    padding: 16px !important;
    border: 1px solid var(--vp-border) !important;
    position: relative !important;
  }

  /* Célula remove: topo direito */
  .woocommerce-cart .shop_table.cart td.product-remove {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    width: auto !important;
    padding: 0 !important;
    text-align: right !important;
  }

  /* Thumbnail: 72px, canto esquerdo (float) */
  .woocommerce-cart .shop_table.cart td.product-thumbnail {
    float: left !important;
    width: 80px !important;
    padding: 0 12px 0 0 !important;
    border: none !important;
  }
  .woocommerce-cart .shop_table.cart td.product-thumbnail img {
    width: 72px !important;
    height: 72px !important;
  }

  /* Nome: ao lado da imagem */
  .woocommerce-cart .shop_table.cart td.product-name {
    padding: 0 0 8px !important;
    border: none !important;
    overflow: hidden !important;
  }
  .woocommerce-cart .shop_table.cart td.product-name a {
    font-size: 0.9375rem !important;
    color: var(--vp-primary) !important;
  }
  .woocommerce-cart .shop_table.cart td.product-name::before { display: none !important; }

  /* Preço, Quantidade, Subtotal: linha com label + valor */
  .woocommerce-cart .shop_table.cart td.product-price,
  .woocommerce-cart .shop_table.cart td.product-quantity,
  .woocommerce-cart .shop_table.cart td.product-subtotal {
    clear: both !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 6px 0 !important;
    border-top: 1px solid var(--vp-border) !important;
    border-radius: 0 !important;
    font-size: 0.9rem !important;
  }

  /* Labels via data-title */
  .woocommerce-cart .shop_table.cart td.product-price::before,
  .woocommerce-cart .shop_table.cart td.product-quantity::before,
  .woocommerce-cart .shop_table.cart td.product-subtotal::before {
    content: attr(data-title) !important;
    font-family: 'Nunito Sans', sans-serif !important;
    font-weight: 700 !important;
    color: var(--vp-text) !important;
    font-size: 0.875rem !important;
  }

  /* Subtotal em destaque (cor primária) */
  .woocommerce-cart .shop_table.cart td.product-subtotal .woocommerce-Price-amount {
    font-size: 1rem !important;
    font-weight: 800 !important;
    color: var(--vp-primary) !important;
  }

  /* Cupom: visível por padrão no mobile (não precisa do toggle) */
  .woocommerce-cart .coupon {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 12px !important;
  }

  .woocommerce-cart .coupon #coupon_code {
    width: 100% !important;
    max-width: none !important;
    height: 48px !important;
    border-radius: var(--vp-radius-pill) !important;
    font-size: 1rem !important;
  }

  .woocommerce-cart .coupon .button,
  .woocommerce-cart button[name="apply_coupon"] {
    display: block !important;
    width: 100% !important;
    height: 48px !important;
    border-radius: var(--vp-radius-pill) !important;
    background: var(--vp-primary) !important;
    color: #fff !important;
    border-color: var(--vp-primary) !important;
    font-size: 0.9375rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
  }

  /* "Atualizar carrinho": botão full-width e visível no mobile */
  .woocommerce-cart button[name="update_cart"] {
    display: block !important;
    width: 100% !important;
    height: 48px !important;
    border-radius: var(--vp-radius-pill) !important;
    background: transparent !important;
    border: 2px solid var(--vp-border) !important;
    color: var(--vp-text-muted) !important;
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    font-family: 'Nunito Sans', sans-serif !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    cursor: pointer !important;
    margin-top: 4px !important;
  }

  .woocommerce-cart .actions {
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 16px 0 0 !important;
  }

  /* CTAs maiores e primários no mobile */
  .vp-cart-btn { min-height: 52px !important; font-size: 1rem !important; }
  .vp-cart-secure { font-size: 0.8125rem !important; margin-top: 6px !important; }

  /* Totals card: valores um pouco menores para caber */
  .woocommerce-cart .cart_totals table th,
  .woocommerce-cart .cart_totals table td { padding: 12px 18px !important; }
}