h2.wp-block-heading.has-text-align-center {
    margin-bottom: 20px;
}

h2.wp-block-heading {
    margin-bottom: 20px;
}

.product-title a {
font-size:18px;
}

.shop-hero {
  grid-template-columns: 1fr 1fr;
}

.product-media {
    height: 360px;
}
.product-price {
 
  margin-bottom: 0;
}
.product-body {
  margin-bottom: 20px;
}

.product-card-actions {
    align-self: center;
}

/* =====================================================
      MOBILE — v2
   Adicione ao FINAL do global.css ou no CSS Adicional.
    
   ===================================================== */


/* ==============================================
   A) OVERFLOW GLOBAL — só impede scroll horizontal
   ============================================== */

html, body {
  overflow-x: hidden;
}


/* ==============================================
   B) HEADER — Tablet (≤1024px)
   ============================================== */

@media (max-width: 1024px) {

  .header-grid {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "logo   actions"
      "search search";
    gap: 8px 12px;
    align-items: center;
  }

  .site-logo        { grid-area: logo; }
  .header-actions   { grid-area: actions; justify-self: end; }

  .site-search,
  .site-search-wrapper {
    grid-area: search;
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
    margin: 8px 0 6px;
  }
}


/* ==============================================
   C) HEADER — Telefones (≤480px)
   Substitui o antigo bloco de 462px
   ============================================== */

@media (max-width: 480px) {

  .header-top {
    padding: 8px 0;
  }

  .header-grid {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "logo   actions"
      "search search";
    gap: 6px 8px;
  }

  .site-logo img {
    max-height: 40px;
    width: auto;
  }

  .header-actions {
    gap: 8px;
  }

  .btn-account {
    padding: 8px;
    width: 36px;
    height: 36px;
    justify-content: center;
    border-radius: 6px;
  }
  .btn-account span { display: none; }
  .btn-account i    { font-size: 15px; }

  .cart-link {
    width: 34px;
    height: 34px;
  }
  .cart-count {
    top: -4px;
    right: -4px;
    min-width: 17px;
    height: 17px;
    line-height: 17px;
    font-size: 10px;
    padding: 0 4px;
  }

  .nav-toggle {
    display: inline-flex;
    width: 28px;
    height: 20px;
    flex-shrink: 0;
  }

  .site-search,
  .site-search-wrapper {
    height: 40px;
    border-radius: 20px;
  }

  .announcement-bar {
    font-size: 12px;
    padding: 8px 10px;
  }
  .announcement-bar p {
    margin: 2px;
    line-height: 1.3;
  }
}


/* ==============================================
   D) DRAWER — Telefones (≤480px)
   ============================================== */

@media (max-width: 480px) {

  #site-drawer {
    width: min(85vw, 320px);
  }

  #site-drawer .menu {
    margin-top: 48px;
  }

  #site-drawer .menu-item > a {
    font-size: 15px;
    padding: 13px 12px;
    padding-right: calc(36px + env(safe-area-inset-right));
  }

  #site-drawer .menu-item.has-children > a::after {
    font-size: 14px;
    right: calc(10px + env(safe-area-inset-right));
  }

  #site-drawer .sub-menu > li > a {
    font-size: 13px;
    padding: 11px 14px;
  }

  .drawer-close {
    top: calc(env(safe-area-inset-top) + 14px);
    right: calc(env(safe-area-inset-right) + 8px);
    width: 36px;
    height: 36px;
  }
}


/* ==============================================
   E) HERO SWIPER — Telefones (≤480px)
   ============================================== */

@media (max-width: 480px) {

  .hero-wrap {
    margin: 12px 0 0;
  }

  .hero-swiper {
    --hero-h: 200px;
    border-radius: 8px;
  }

  .hero-swiper .swiper-pagination {
    margin: 16px 0 4px;
  }
}


/* ==============================================
   F) SEÇÕES — ESPAÇOS BRANCOS (≤640px apenas)
   
   Estas regras SÓ se aplicam em mobile pequeno.
   Acima de 640px tudo fica como o tema define.
   ============================================== */

@media (max-width: 640px) {

  /* Reduzir padding dentro dos landing blocks */
  .landing-block.design-padding-normal {
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .landing-block.design-padding-spacious {
    padding-top: 28px;
    padding-bottom: 28px;
  }

  /* Reduzir margin entre seções */
  .landing-block.design-margin-small {
    margin-top: 6px;
    margin-bottom: 6px;
  }

  /* Padding interno dos containers das seções */
  .landing-block .container-fluid > .container.w-100 {
    padding-left: 10px;
    padding-right: 10px;
  }

  /* --- Best Sellers --- */
  .landing-block-best-sellers-home h2,
  .landing-block-best-sellers-home .landing-block-heading {
    font-size: 22px;
    margin-bottom: 16px;
  }

  .product-card .product-media {
    height: clamp(250px, 55vw, 360px);
    min-height: 250px;
  }

  .product-title {
    height: auto;
    min-height: 60px;
    padding: 12px 10px 14px;
    font-size: 14px;
  }

  .product-price {
    padding: 0 10px 8px;
    font-size: 15px;
    text-align: center;
  }

  .product-card-actions {
    padding: 0 10px 14px;
    text-align: center;
  }

  .btn-add-to-cart {
    font-size: 14px;
    padding: 8px 14px;
    width: 100%;
  }

  /* --- Health Goals --- */
  .health-goals {
    padding: 16px 0 20px;
  }

  .health-goals .section-title {
    font-size: 22px;
    margin-bottom: 16px;
  }

  .goals-grid {
    gap: 10px;
  }

  .goal-media {
    padding: 18px 8px;
  }

  .goal-media img {
    width: clamp(50px, 14vw, 90px);
  }

  .goal-label {
    min-height: 46px;
    padding: 8px 6px;
    font-size: 11px;
  }

  /* --- Shop by Products --- */
  .shop-products .section-head.center {
    margin-bottom: 16px;
  }

  h2#shop-products-title {
    margin-bottom: 16px;
    font-size: 22px;
  }

  .sp-grid {
    gap: 14px;
  }

  .sp-media {
    aspect-ratio: 16 / 10;
    padding: 12px 8px;
  }

  .sp-caption {
    min-height: 46px;
    padding: 10px 8px;
  }

  /* --- Signature Pak Banner --- */
  .landing-block-signature-paks {
    padding-top: 4px;
    padding-bottom: 4px;
  }

  /* --- Value Prop / Shop with us --- */
  .vp-wrap {
    padding: 0 10px;
  }

  .vp-title {
    font-size: clamp(22px, 5.5vw, 32px);
    padding-top: 20px;
    margin-bottom: 8px;
  }

  .vp-sub {
    font-size: 14px;
    margin-bottom: 16px;
  }

  .vp-sub br {
    display: none;
  }

  /* --- Latest Blogs --- */
  header.section-head.center h2 {
    margin-top: 20px;
    font-size: 22px;
  }

  .latest-blogs .section-head.center {
    margin-bottom: 12px;
  }

  .lb-card {
    height: auto;
  }

  .lb-body {
    min-height: 70px;
    padding: 12px 10px 14px;
  }

  .lb-title {
    font-size: 14px;
  }

  /* --- Why Hotze --- */
  .landing-block-why-hotze .cat-title {
    font-size: 22px;
    margin-bottom: 12px;
  }

  .landing-block-why-hotze .cat-intro {
    font-size: 14px;
    margin-bottom: 12px;
  }

  .landing-block-why-hotze .cat-intro p {
    margin-bottom: 0.5em;
  }

  .landing-block-why-hotze .cat-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .landing-block-why-hotze .cat-media img {
    width: 100%;
    height: auto;
    max-height: 260px;
    object-fit: cover;
    border-radius: 8px;
  }

  .landing-block-why-hotze .cat-posttext {
    font-size: 14px;
    margin-top: 12px;
  }

  /* --- Reviews --- */
  .reviews-box {
    padding: 16px 0 0;
  }

  /* --- H2 geral dentro de landing blocks --- */
  .landing-block h2 {
    margin-bottom: 16px;
  }
}


/* ==============================================
   G) NEWSLETTER &amp; MAP — Telefones (≤480px)
   ============================================== */

@media (max-width: 480px) {

  .newsletter-cta {
    padding: 28px 16px;
  }

  .nl-title {
    font-size: 18px;
    margin-bottom: 16px;
  }

  .nl-form {
    flex-direction: column;
    gap: 10px;
  }

  .nl-input {
    height: 42px;
    max-width: 100%;
  }

  .nl-form .btn-layout {
    width: 100%;
    height: 42px;
  }

  .map-embed iframe {
    height: 200px;
  }
}


/* ==============================================
   H) FOOTER — Telefones (≤480px)
   ============================================== */

@media (max-width: 480px) {

  .site-footer {
    padding: 20px 0 0;
  }

  .footer-grid {
    gap: 18px;
  }

  .footer-logo img {
    max-height: 48px;
  }

  .contact-list li {
    font-size: 14px;
  }

  .footer-title {
    font-size: 16px;
    margin: 8px 0 8px;
  }

  .footer-links a {
    font-size: 14px;
  }

  .footer-bottom {
    margin-top: 18px;
    padding: 12px 0;
    font-size: 12px;
  }
}


/* ==============================================
   I) SWIPER NAVIGATION — MOBILE (≤768px)
   ============================================== */

@media (max-width: 768px) {

  .product-block-swiper .swiper-button-prev,
  .product-block-swiper .swiper-button-next {
    display: none !important;
  }

  .product-block-swiper {
    overflow: hidden;
  }
}

/* ===== Containers / Base ===== */
/* Substitua o bloco original por este */

.container, .container-lg {
  margin: auto;
  width: 100%;
  max-width: 1920px;
}

.container {
  padding: 0 clamp(20px, 2vw, 60px);
}

.container-lg {
  padding: 0 clamp(20px, 3vw, 150px);
}
.btn-layout{
  
  border: 1px solid #123559;
  background: #123559;
  color:#fff;
   
}
.btn-layout:hover, .btn-layout:focus{ color:#fff; background:var(--brand-orange); border-color:var(--brand-orange); text-decoration:none; }

.btn-add-to-cart{
  color: #fff;
  background-color: #123559;
}
.btn-add-to-cart:hover{background-color: #e06b2c;text-decoration:none;}

.btn-account{  background:#123559; }

.btn-account:hover{  background:#e06b2c; }

.gform_wrapper .gform_footer input.button,
.gform_wrapper .gform_footer input[type=submit],
.gform_wrapper .gform_page_footer input.button,
.gform_wrapper .gform_page_footer input[type=submit] {
   
  border: 1px solid #123559;
   
  background: var(--main-color, #123559);
}