@charset "UTF-8";
/* CSS principal da loja (era o bloco <style> #1 do head)
   Extraído VERBATIM do index.html (refactor sênior, F2) — NÃO reformatar. */



    

.star-rating .star {
  color: #ddd;
  transition: color 0.2s;
}
.star-rating .star.selected,
.star-rating .star:hover,
.star-rating .star:hover ~ .star {
  color: #ffb400; /* Cor ouro para estrelas selecionadas */
}
.review-item {
  background: #ffffff;
  border: 1px solid var(--border);
  padding: 12px;
  border-radius: 14px;
}
.review-stars {
  color: #ffb400;
  font-size: 12px;
  margin-bottom: 5px;
}
    
    :root {
      --green: #00543d;
      --green-2: #0b6a4d;
      --green-soft: #eef7f3;
      --white: #ffffff;
      --bg: #ffffff;
      --text: #0f172a;
      --text-soft: #5f6b66;
      --border: #d9e6df;
      --shadow: 0 18px 40px rgba(0, 84, 61, 0.08);
      --shadow-soft: 0 10px 24px rgba(0, 84, 61, 0.06);
      --container: 1360px;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: Inter, Arial, sans-serif;
    }

    body {
      background: var(--bg);
      color: var(--text);
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    img {
      display: block;
      max-width: 100%;
    }

    button,
    input,
    select {
      font: inherit;
    }

    .login-overlay {
      position: fixed;
      inset: 0;
      /* Antes era um verde sólido (parede) que tampava a loja. Pedido do dono (26/06):
         mostrar a LOJA borrada ao fundo. Tom verde translúcido + blur do conteúdo atrás
         (a vitrine pública já renderiza no load) — legível e dentro da marca. */
      background: rgba(0, 56, 42, 0.55);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      display: none;
      align-items: center;
      justify-content: center;
      padding: 20px;
      z-index: 6000;
    }

    .login-overlay.active {
      display: flex;
    }

    #cepEntradaOverlay {
      background: rgba(15, 23, 42, 0.42);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }

    #cepEntradaOverlay .login-box {
      max-width: 500px;
      border: 1px solid rgba(255,255,255,0.72);
      box-shadow: 0 34px 90px rgba(0, 0, 0, 0.24);
      animation: cepPopupEntrada 0.24s ease both;
    }

    @keyframes cepPopupEntrada {
      from { opacity: 0; transform: translateY(12px) scale(0.97); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }

    .login-box {
      width: 100%;
      max-width: 460px;
      background: #ffffff;
      border-radius: 28px;
      padding: 34px;
      box-shadow: 0 30px 80px rgba(0, 0, 0, 0.18);
      position: relative;
    }

    .close-login {
      position: absolute;
      top: 16px;
      right: 16px;
      border: none;
      width: 42px;
      height: 42px;
      border-radius: 14px;
      background: var(--green-soft);
      color: var(--green);
      cursor: pointer;
      font-size: 20px;
      font-weight: 900;
    }

    .login-kicker {
      display: inline-block;
      padding: 8px 12px;
      border-radius: 999px;
      background: var(--green-soft);
      color: var(--green);
      font-size: 12px;
      font-weight: 800;
      margin-bottom: 16px;
    }

    .login-box h2 {
      color: var(--green);
      font-size: 34px;
      line-height: 1;
      font-weight: 900;
      margin-bottom: 12px;
      letter-spacing: -0.04em;
    }

    .login-box p {
      color: var(--text-soft);
      line-height: 1.7;
      margin-bottom: 24px;
      font-size: 15px;
    }

    .login-form {
      display: grid;
      gap: 14px;
    }

    .login-form input {
      width: 100%;
      padding: 15px 16px;
      border: 1px solid var(--border);
      border-radius: 16px;
      outline: none;
      font-size: 15px;
      background: #ffffff;
    }

    .login-form input:focus {
      border-color: var(--green);
      box-shadow: 0 0 0 4px rgba(0, 84, 61, 0.08);
    }

    .login-form button {
      border: none;
      background: var(--green);
      color: white;
      padding: 15px 16px;
      border-radius: 16px;
      font-weight: 800;
      cursor: pointer;
    }

    .login-erro {
      color: #c62828;
      font-size: 14px;
      min-height: 20px;
    }

    .login-register-area {
      margin-top: 16px;
      padding-top: 16px;
      border-top: 1px solid var(--border);
      display: grid;
      gap: 10px;
      text-align: center;
    }

    .login-register-text {
      color: var(--text-soft);
      font-size: 13px;
      font-weight: 700;
      line-height: 1.5;
    }

    .login-register-button {
      width: 100%;
      border: 1px solid var(--border);
      background: #ffffff;
      color: var(--green);
      padding: 15px 16px;
      border-radius: 16px;
      font-weight: 900;
      cursor: pointer;
    }


    .cadastro-steps {
      display: flex;
      gap: 8px;
      margin-bottom: 18px;
    }

    .cadastro-step-pill {
      flex: 1;
      border-radius: 999px;
      padding: 9px 10px;
      background: #f3f7f5;
      color: var(--text-soft);
      font-size: 12px;
      font-weight: 900;
      text-align: center;
      border: 1px solid rgba(0,84,61,0.08);
    }

    .cadastro-step-pill.active {
      background: var(--green);
      color: #ffffff;
      border-color: var(--green);
    }

    .cadastro-step {
      display: none;
      gap: 14px;
    }

    .cadastro-step.active {
      display: grid;
    }

    .cadastro-form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }

    .cadastro-check-label {
      display: flex;
      gap: 10px;
      align-items: flex-start;
      color: var(--text-soft);
      font-size: 13px;
      line-height: 1.5;
      font-weight: 700;
      padding: 2px 0;
    }

    .cadastro-check-label input {
      width: auto;
      margin-top: 3px;
      accent-color: var(--green);
    }

    .cadastro-actions {
      display: flex;
      gap: 10px;
    }

    .cadastro-actions button {
      flex: 1;
    }

    .cadastro-secondary-btn {
      background: #ffffff !important;
      color: var(--green) !important;
      border: 1px solid var(--border) !important;
    }

    .cadastro-help-text {
      color: var(--text-soft);
      font-size: 12px;
      line-height: 1.5;
      margin-top: -4px;
    }

    @media (max-width: 520px) {
      .cadastro-form-row {
        grid-template-columns: 1fr;
      }

      .cadastro-actions {
        flex-direction: column;
      }
    }


    #cadastroOverlay .login-box {
      max-height: none;
      overflow: visible;
      padding: 24px 28px;
    }

    #cadastroOverlay .login-kicker {
      margin-bottom: 10px;
      padding: 6px 10px;
    }

    #cadastroOverlay .login-box h2 {
      font-size: 28px;
      margin-bottom: 8px;
    }

    #cadastroOverlay .login-box p {
      margin-bottom: 14px;
      font-size: 13px;
      line-height: 1.45;
    }

    #cadastroOverlay .login-form {
      gap: 9px;
    }

    #cadastroOverlay .cadastro-steps {
      margin-bottom: 12px;
    }

    #cadastroOverlay .cadastro-step-pill {
      padding: 7px 9px;
      font-size: 11px;
    }

    #cadastroOverlay .login-form input,
    #cadastroOverlay .login-form select {
      min-height: 43px;
      padding: 11px 13px;
      border-radius: 13px;
      font-size: 13px;
    }

    #cadastroOverlay .cadastro-check-label {
      font-size: 12px;
      line-height: 1.35;
      gap: 8px;
      display: flex;
      flex-direction: row;
      align-items: center;
    }

    #cadastroOverlay .cadastro-check-label input {
      width: 16px;
      min-width: 16px;
      height: 16px;
      min-height: 16px;
      margin: 0;
      padding: 0;
      border-radius: 4px;
      flex: 0 0 auto;
    }

    #cadastroOverlay .cadastro-help-text {
      font-size: 11px;
      line-height: 1.35;
      margin-top: -2px;
    }

    #cadastroOverlay .cadastro-actions button {
      padding: 12px 14px;
      border-radius: 14px;
    }

    #cadastroOverlay .login-erro {
      min-height: 16px;
      font-size: 12px;
    }

    /* Cadastro: overlay rolavel p/ o botao nao sumir no mobile quando o form passa da altura da tela. */
    #cadastroOverlay {
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }

    #cadastroOverlay .login-box {
      margin-top: auto;
      margin-bottom: auto;
    }

    header {
      position: sticky;
      top: 0;
      z-index: 100;
      background: rgba(255,255,255,0.96);
      backdrop-filter: blur(10px);
      border-bottom: 1px solid var(--border);
    }

    .top-strip {
      background: var(--green);
      color: #ffffff;
      overflow: hidden;
      white-space: nowrap;
      position: relative;
    }

    .top-strip-track {
      display: inline-block;
      white-space: nowrap;
      animation: scrollStrip 18s linear infinite;
    }

    .top-strip-track span {
      padding-right: 40px;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.16em;
      text-transform: uppercase;
    }

    @keyframes scrollStrip {
      from {
        transform: translateX(0);
      }
      to {
        transform: translateX(-50%);
      }
    }

    .header-inner {
      max-width: var(--container);
      margin: 0 auto;
      padding: 18px 22px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      flex-wrap: nowrap;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 14px;
      flex: 0 0 auto;
      min-width: max-content;
    }

    .brand-mark {
      width: 54px;
      height: 54px;
      border-radius: 18px;
      background: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      flex-shrink: 0;
      border: 1px solid rgba(0,84,61,0.10);
    }

    .brand-mark img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .brand-logo-link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      text-decoration: none;
      flex-shrink: 0;
    }

    .brand-logo-img {
      width: auto;
      height: 42px;
      object-fit: contain;
      display: block;
    }

    .brand-copy h1 {
      font-size: 24px;
      line-height: 1;
      color: var(--green);
      font-weight: 900;
      letter-spacing: -0.04em;
      margin-bottom: 5px;
    }

    .brand-copy p {
      color: var(--text-soft);
      font-size: 13px;
    }

    .header-actions {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: nowrap;
      flex: 0 0 auto;
      white-space: nowrap;
    }
    .header-search {
      flex: 1 1 620px;
      min-width: 320px;
      max-width: 720px;
      position: relative;
    }

    .header-search input {
      width: 100%;
      min-height: 52px;
      padding: 14px 16px 14px 42px;
      border: 1px solid #00543d;
      border-radius: 16px;
      background: #ffffff;
      color: var(--text);
      outline: none;
      font-size: 14px;
      transition: border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.9);
    }

    .header-search input:hover {
      border-color: rgba(0,84,61,0.20);
      background: #ffffff;
    }

    .header-search input:focus {
      border-color: #00543d;
      box-shadow: 0 0 0 3px rgba(0,84,61,0.08);
      background: #ffffff;
    }

    .header-search .filtro-icone {
      position: absolute;
      left: 14px;
      top: 50%;
      transform: translateY(-50%);
    }


    .filter-menu {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: nowrap;
      flex: 0 0 auto;
    }

    .filters-dropdown {
      position: relative;
      flex: 0 0 auto;
    }

    .filters-dropdown-trigger {
      border: none;
      width: 52px;
      min-width: 52px;
      min-height: 52px;
      padding: 0;
      border-radius: 16px;
      background: var(--green-soft);
      color: var(--green);
      font-size: 13px;
      font-weight: 900;
      box-shadow: var(--shadow-soft);
      white-space: nowrap;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      transition: background 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
    }

    .filters-dropdown-trigger:hover,
    .filters-dropdown.open .filters-dropdown-trigger {
      background: #ffffff;
      transform: translateY(-1px);
      box-shadow: var(--shadow);
    }

    .hamburger-icon {
      width: 22px;
      display: grid;
      gap: 5px;
    }

    .hamburger-icon span {
      display: block;
      width: 100%;
      height: 3px;
      border-radius: 999px;
      background: var(--green);
      transition: transform 0.22s ease, opacity 0.22s ease;
    }

    .filters-dropdown.open .hamburger-icon span:nth-child(1) {
      transform: translateY(8px) rotate(45deg);
    }

    .filters-dropdown.open .hamburger-icon span:nth-child(2) {
      opacity: 0;
    }

    .filters-dropdown.open .hamburger-icon span:nth-child(3) {
      transform: translateY(-8px) rotate(-45deg);
    }

    .filters-dropdown-panel {
      position: absolute;
      top: calc(100% + 12px);
      right: 0;
      width: max-content;
      max-width: 520px;
      padding: 12px;
      border-radius: 20px;
      border: 1px solid rgba(0,84,61,0.10);
      background: #ffffff;
      box-shadow: 0 24px 54px rgba(0,84,61,0.12);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transform: translateY(8px);
      transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease;
      z-index: 200;
    }

    .filters-dropdown.open .filters-dropdown-panel {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transform: translateY(0);
    }

    .filters-dropdown-layout {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      width: max-content;
    }

    .filters-dropdown-categories {
      display: grid;
      gap: 8px;
      width: 170px;
      flex: 0 0 170px;
    }

    .filters-category-btn {
      width: 100%;
      border: 1px solid rgba(0,84,61,0.10);
      background: #f8fcfa;
      color: var(--green);
      border-radius: 14px;
      padding: 12px 14px;
      text-align: left;
      font-size: 12px;
      font-weight: 900;
      cursor: pointer;
      transition: background 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
    }

    .filters-category-btn:hover,
    .filters-category-btn.active {
      background: var(--green-soft);
      border-color: rgba(0,84,61,0.18);
      box-shadow: var(--shadow-soft);
      color: var(--green);
      font-weight: 900;
      transform: translateX(2px);
    }

    .filters-dropdown-content {
      display: none;
      width: 0;
      min-width: 0;
      overflow: hidden;
      align-self: stretch;
      padding: 0;
      border-left: none;
    }

    .filters-dropdown-content.has-active-panel {
      display: block;
      width: 210px;
      padding: 0 0 0 14px;
      border-left: 1px solid rgba(0,84,61,0.10);
    }

    .filters-dropdown-placeholder {
      display: none;
    }

    .filters-category-panel {
      display: none;
    }

    .filters-category-panel.active {
      display: block;
    }

    .filter-menu-grid {
      display: block;
    }

    .filtro-item .filtro-label {
      display: none;
    }

    .filter-options-list {
      display: grid;
      gap: 8px;
    }

    .filter-option-btn {
      width: 100%;
      border: none;
      background: transparent;
      color: var(--text);
      border-radius: 0;
      padding: 0;
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      text-align: left;
      line-height: 1.5;
      transition: color 0.18s ease, opacity 0.18s ease;
      box-shadow: none;
    }

    .filter-option-btn + .filter-option-btn {
      margin-top: 0;
    }

    .filter-option-btn:hover,
    .filter-option-btn.active {
      background: transparent;
      border-color: transparent;
      box-shadow: none;
      transform: translateX(2px);
      color: var(--green);
      font-weight: 900;
      text-decoration: underline;
      text-underline-offset: 4px;
    }

    .filter-option-btn.active {
      font-weight: 900;
    }

    .filter-option-btn.is-all {
      color: var(--text-soft);
    }

    .filter-hidden-select {
      display: none;
    }

    .filter-clear-wrap {
      display: flex;
      align-items: center;
      margin-top: 12px;
    }

.cart-button,
    .client-button {
      border: none;
      color: white;
      border-radius: 16px;
      padding: 12px 16px;
      cursor: pointer;
      font-weight: 800;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      box-shadow: var(--shadow-soft);
      flex: 0 0 auto;
      white-space: nowrap;
    }

    .cart-button {
      background: var(--green);
    }

    .client-button {
      background: var(--green-2);
    }

    #openClientButton {
      display: none !important;
    }

    body.usuario-logado #openClientButton {
      display: inline-flex !important;
    }

    body.usuario-logado #openLoginButton,
    body.usuario-logado #registerButton {
      display: none !important;
    }


    .featured-showcase-section {
      display: none;
    }

    body.usuario-logado .featured-showcase-section {
      display: block;
    }

    /* --- FOOTER IGUAL FAQ --- */
    .main-footer {
      --primary: #29e681;
      --accent: #29e681;
      --zeleno-dark: #00543d;
      background: #f7fbf8;
      padding: 60px 10% 20px;
      border-top: 1px solid rgba(0, 84, 61, 0.1);
      position: relative;
      z-index: 70;
      font-family: 'Poppins', sans-serif;
    }

    .main-footer * {
      font-family: 'Poppins', sans-serif;
    }

    .footer-grid {
      display: flex;
      justify-content: flex-start;
      gap: 50px;
      max-width: 1200px;
      margin: 0 auto 60px auto;
      flex-wrap: wrap;
    }

    .footer-brand {
      flex: 2;
      min-width: 280px;
    }

    .footer-brand .footer-logo {
      height: 46px;
      margin-bottom: 20px;
      filter: brightness(0) saturate(100%) invert(18%) sepia(38%) saturate(1496%) hue-rotate(128deg) brightness(97%) contrast(102%);
    }

    .footer-brand p {
      color: rgba(16, 49, 38, 0.6);
      font-size: 11px;
      line-height: 1.6;
      max-width: 300px;
    }

    .footer-title {
      color: var(--zeleno-dark);
      font-size: 1.1rem;
      font-weight: 700;
      margin-bottom: 25px;
      text-transform: uppercase;
      letter-spacing: 1px;
    }

    .footer-links {
      list-style: none;
    }

    .footer-links li {
      margin-bottom: 8px;
    }

    .footer-links a {
      color: rgba(16, 49, 38, 0.6);
      text-decoration: none;
      font-size: 11px;
      transition: 0.3s;
    }

    .footer-links a:hover {
      color: var(--primary);
      padding-left: 5px;
    }

    .social-links {
      display: flex;
      gap: 20px;
      margin-top: 25px;
    }

    .social-links a {
      color: var(--zeleno-dark);
      font-size: 22px;
      transition: 0.3s;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 24px;
      height: 24px;
    }

    .social-links svg {
      width: 22px;
      height: 22px;
      display: block;
      fill: currentColor;
    }

    .social-links a:hover {
      color: var(--primary);
    }

    @media (max-width: 900px) {
      .main-footer {
        padding: 60px 5% 30px !important;
        text-align: center !important;
      }

      .footer-grid {
        flex-direction: column !important;
        align-items: center !important;
        gap: 40px !important;
      }

      .footer-brand {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        min-width: auto !important;
        flex: none !important;
      }

      .footer-brand p {
        margin: 0 auto !important;
      }

      .footer-col {
        margin-left: 0 !important;
        width: 100%;
      }

      .footer-links {
        padding: 0 !important;
        text-align: center !important;
        list-style: none !important;
      }

      .footer-links li {
        text-align: center !important;
      }

      .footer-links a {
        display: inline-block !important;
        margin: 0 auto 8px !important;
        padding-left: 0 !important;
      }

      .footer-bottom {
        flex-direction: column-reverse !important;
        text-align: center !important;
        justify-content: center !important;
      }
    }

    .cart-count {
      min-width: 24px;
      height: 24px;
      padding: 0 8px;
      border-radius: 999px;
      background: #ffffff;
      color: var(--green);
      font-size: 11px;
      font-weight: 900;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .hero {
      max-width: var(--container);
      margin: 18px auto 0;
      padding: 0 22px;
    }

    .hero-box {
      min-height: 320px;
      border-radius: 36px;
      overflow: hidden;
      display: grid;
      grid-template-columns: 1.05fr 0.95fr;
      background: #ffffff;
      border: 2px solid var(--green);
    }

    .hero-content {
      padding: 34px 42px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .hero-kicker {
      display: inline-flex;
      width: fit-content;
      padding: 8px 12px;
      border-radius: 999px;
      background: var(--green-soft);
      color: var(--green);
      font-size: 12px;
      font-weight: 900;
      margin-bottom: 16px;
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }

    .hero-title {
      font-size: 52px;
      line-height: 0.95;
      letter-spacing: -0.08em;
      color: var(--green);
      font-weight: 900;
      margin-bottom: 14px;
      max-width: 650px;
    }

    .hero-text {
      font-size: 15px;
      line-height: 1.75;
      color: var(--text-soft);
      max-width: 520px;
      margin-bottom: 22px;
    }

    .hero-actions {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
    }

    .hero-btn {
      border: none;
      border-radius: 16px;
      padding: 14px 18px;
      font-weight: 800;
      cursor: pointer;
    }

    .hero-btn-primary {
      background: var(--green);
      color: white;
    }

    .hero-btn-secondary {
      background: #ffffff;
      color: var(--green);
      border: 2px solid var(--green);
    }

    .hero-visual {
      position: relative;
      min-height: 100%;
      background: var(--green);
      overflow: hidden;
    }

    .hero-visual img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      mix-blend-mode: luminosity;
      opacity: 0.92;
    }

    .hero-visual::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(0,84,61,0.08) 0%, rgba(0,84,61,0.32) 100%);
    }

    .container {
      max-width: var(--container);
      margin: 0 auto;
      padding: 34px 22px 70px;
    }

    .topbar {
      display: grid;
      gap: 20px;
      margin-bottom: 34px;
    }

    .status {
      color: var(--text-soft);
      font-weight: 700;
      font-size: 14px;
    }

    .filters-panel {
      position: relative;
      overflow: hidden;
      padding: 22px;
      border-radius: 34px;
      border: 1px solid rgba(0,84,61,0.10);
      background: linear-gradient(135deg, #ffffff 0%, #f8fcfa 48%, #eef7f2 100%);
      box-shadow: 0 24px 54px rgba(0,84,61,0.08), inset 0 1px 0 rgba(255,255,255,0.92);
    }

    .filters-head {
      position: relative;
      z-index: 1;
      display: flex;
      justify-content: space-between;
      align-items: end;
      gap: 18px;
      flex-wrap: wrap;
      margin-bottom: 18px;
    }

    .filters-kicker {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      width: fit-content;
      padding: 8px 12px;
      border-radius: 999px;
      background: rgba(0,84,61,0.08);
      color: var(--green);
      font-size: 11px;
      font-weight: 900;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      margin-bottom: 10px;
    }

    .filters-title {
      font-size: 30px;
      line-height: 0.96;
      letter-spacing: -0.06em;
      color: var(--green);
      font-weight: 900;
      margin-bottom: 8px;
    }

    .filters-subtitle {
      font-size: 14px;
      color: var(--text-soft);
      max-width: 680px;
      line-height: 1.7;
    }

    .filters-head-side {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
    }

    .filters-chip {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 40px;
      padding: 10px 14px;
      border-radius: 999px;
      background: #ffffff;
      border: 1px solid rgba(0,84,61,0.10);
      color: var(--green);
      font-size: 12px;
      font-weight: 800;
      box-shadow: var(--shadow-soft);
    }

    .filtros {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      grid-template-areas: "canabinoide fornecedor categoria concentracao";
      gap: 14px;
      margin-top: 14px;
    }

    .filtro-item {
      display: grid;
      gap: 8px;
    }

    .filtro-item-busca {
      grid-area: busca;
    }

    .filtro-item-canabinoide {
      grid-area: canabinoide;
    }

    .filtro-item-fornecedor {
      grid-area: fornecedor;
    }

    .filtro-item-categoria {
      grid-area: categoria;
    }

    .filtro-item-concentracao {
      grid-area: concentracao;
    }

    .filtro-label {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--text-soft);
      font-weight: 900;
      padding-left: 4px;
    }

    .filtro-field {
      position: relative;
    }

    .filtro-icone {
      position: absolute;
      left: 16px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 14px;
      opacity: 0.82;
      pointer-events: none;
    }

    .filtros input,
    .filtros select {
      width: 100%;
      min-height: 56px;
      padding: 14px 16px 14px 44px;
      border: 1px solid rgba(0,84,61,0.10);
      border-radius: 20px;
      background: rgba(255,255,255,0.94);
      color: var(--text);
      outline: none;
      font-size: 14px;
      transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease, background 0.22s ease;
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.9);
    }

    .filtro-item-busca input {
      min-height: 62px;
      font-size: 15px;
      border-radius: 22px;
      box-shadow: 0 12px 26px rgba(0,84,61,0.05), inset 0 1px 0 rgba(255,255,255,0.96);
    }

    .filtros select {
      cursor: pointer;
      background-image:
        linear-gradient(45deg, transparent 50%, var(--green) 50%),
        linear-gradient(135deg, var(--green) 50%, transparent 50%);
      background-position:
        calc(100% - 20px) calc(50% - 3px),
        calc(100% - 14px) calc(50% - 3px);
      background-size: 6px 6px, 6px 6px;
      background-repeat: no-repeat;
    }

    .filtros input:hover,
    .filtros select:hover {
      border-color: rgba(0,84,61,0.20);
      background: #ffffff;
    }

    .filtros input:focus,
    .filtros select:focus {
      border-color: var(--green);
      box-shadow: 0 0 0 5px rgba(0,84,61,0.08);
      background: #ffffff;
      transform: translateY(-1px);
    }

    .filtros-acoes {
      position: relative;
      z-index: 1;
      margin-top: 16px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 14px;
      flex-wrap: wrap;
    }

    .filters-tip {
      color: var(--text-soft);
      font-size: 13px;
      line-height: 1.6;
    }

    .btn-filtro {
      border: none;
      background: linear-gradient(135deg, var(--green) 0%, var(--green-2) 100%);
      color: white;
      padding: 10px 16px;
      border-radius: 12px;
      cursor: pointer;
      font-weight: 800;
      font-size: 13px;
      box-shadow: 0 8px 18px rgba(0,84,61,0.12);
    }

    .section-head {
      display: flex;
      justify-content: space-between;
      align-items: end;
      gap: 20px;
      margin-bottom: 24px;
      flex-wrap: wrap;
    }

    .section-title {
      font-size: 52px;
      line-height: 0.95;
      letter-spacing: -0.08em;
      color: var(--green);
      font-weight: 900;
    }

    .section-caption {
      color: var(--text-soft);
      font-size: 15px;
      max-width: 540px;
      line-height: 1.8;
    }

    .grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
      gap: 24px;
    }

    .card {
      background: #ffffff;
      border-radius: 28px;
      overflow: hidden;
      border: 1px solid var(--border);
      box-shadow: var(--shadow-soft);
      display: flex;
      flex-direction: column;
      min-height: 100%;
      transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
      position: relative;
    }

    .card:hover {
      transform: translateY(-6px);
      box-shadow: var(--shadow);
      border-color: rgba(0,84,61,0.28);
    }

    .imagem-wrap {
      width: 100%;
      height: 330px;
      background: #f6faf8;
      overflow: hidden;
      position: relative;
      border-bottom: 1px solid var(--border);
    }

    .imagem-wrap img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .card-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(0,84,61,0.04) 100%);
      pointer-events: none;
    }

    .card-top-badges {
      position: absolute;
      top: 14px;
      left: 14px;
      right: 14px;
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      z-index: 2;
    }

    .card-badge {
      display: inline-flex;
      align-items: center;
      width: fit-content;
      padding: 7px 10px;
      border-radius: 999px;
      font-size: 11px;
      font-weight: 900;
      box-shadow: var(--shadow-soft);
    }

    .card-badge-rebuy {
      background: #ffffff;
      color: var(--green);
    }

    .card-badge-recommended {
      background: rgba(0,84,61,0.88);
      color: #ffffff;
    }

    .card-body {
      padding: 24px;
      display: flex;
      flex-direction: column;
      gap: 18px;
      flex: 1;
    }

    .card-header {
      display: grid;
      gap: 10px;
    }

    .produto-nome {
      color: var(--green);
      font-size: 22px;
      line-height: 1.1;
      font-weight: 800;
      letter-spacing: -0.05em;
      min-height: 62px;
    }

    .produto-preco {
      font-size: 22px;
      font-weight: 700;
      letter-spacing: -0.05em;
      color: var(--text);
    }

    .produto-cupom {
      font-size: 12px;
      color: var(--green);
      background: var(--green-soft);
      display: inline-block;
      width: fit-content;
      padding: 7px 11px;
      border-radius: 999px;
      font-weight: 800;
    }

    .produto-estimativa {
      color: var(--text-soft);
      font-size: 12px;
      line-height: 1.6;
      background: #f8fbf9;
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 10px 12px;
    }

    .acoes {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
      gap: 10px;
      margin-top: auto;
      align-items: stretch;
    }

    .btn {
      border: none;
      border-radius: 18px;
      padding: 14px 16px;
      font-weight: 800;
      cursor: pointer;
      flex: 1;
      font-size: 14px;
      transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, background 0.22s ease;
    }

    .btn:hover {
      transform: translateY(-2px);
    }

    .btn-primary {
      background: var(--green);
      color: white;
      box-shadow: 0 14px 24px rgba(0,84,61,0.14);
    }

    .btn-secondary {
      background: linear-gradient(135deg, #ffffff 0%, #f5fbf8 100%);
      color: var(--green);
      border: 1px solid rgba(0,84,61,0.12);
      box-shadow: 0 14px 24px rgba(0,84,61,0.08);
    }

    .btn-detail-premium {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      text-align: left;
      padding: 12px 14px;
      overflow: hidden;
      position: relative;
    }

    .btn-detail-premium::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(0,84,61,0.03) 0%, rgba(0,84,61,0.08) 100%);
      opacity: 0;
      transition: opacity 0.22s ease;
      pointer-events: none;
    }

    .btn-detail-premium:hover::after {
      opacity: 1;
    }

    .btn-detail-copy {
      position: relative;
      z-index: 1;
      display: grid;
      gap: 3px;
      min-width: 0;
    }

    .btn-detail-label {
      color: var(--green);
      font-size: 13px;
      font-weight: 900;
      letter-spacing: -0.02em;
      line-height: 1.2;
    }

    .btn-detail-sub {
      color: var(--text-soft);
      font-size: 11px;
      font-weight: 700;
      line-height: 1.35;
    }

    .btn-detail-icon {
      position: relative;
      z-index: 1;
      width: 38px;
      height: 38px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: rgba(0,84,61,0.08);
      color: var(--green);
      font-size: 18px;
      font-weight: 900;
      flex-shrink: 0;
      transition: transform 0.22s ease, background 0.22s ease;
    }

    .btn-detail-premium:hover .btn-detail-icon {
      transform: translateX(2px);
      background: rgba(0,84,61,0.12);
    }

    .locked-card .imagem-wrap {
      background: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      border-bottom: 1px solid rgba(0,0,0,0.06);
      position: relative;
    }

    .locked-card .imagem-wrap img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .locked-mockup {
      position: relative;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 18px;
    }



    .locked-product-mockup-img {
      display: block !important;
      width: 100%;
      height: 100%;
      object-fit: contain !important;
      background: transparent !important;
      /* Deslogado vê a FOTO REAL do produto, mas borrada (irreconhecível) */
      filter: blur(4px);
      transform: scale(1.03);
    }

    /* modal do produto bloqueado: mesma regra de blur */
    #modalImagem.imagem-bloqueada-blur {
      filter: blur(6px);
      transform: scale(1.02);
    }

    .locked-package-scene {
      position: relative;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0;
      filter: drop-shadow(0 18px 24px rgba(0,0,0,0.18));
    }

    .locked-package {
      position: relative;
      flex-shrink: 0;
      background:
        radial-gradient(circle at 28% 24%, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 22%),
        radial-gradient(circle at 70% 70%, rgba(221,226,223,0.78) 0%, rgba(221,226,223,0) 30%),
        linear-gradient(90deg, #e3e8e5 0%, #ffffff 18%, #f6f8f7 48%, #ffffff 76%, #dfe6e2 100%);
      border: 1px solid rgba(255,255,255,0.92);
      box-shadow:
        inset 10px 0 18px rgba(210,218,214,0.72),
        inset -10px 0 18px rgba(205,214,210,0.72),
        inset 0 10px 14px rgba(255,255,255,0.96),
        inset 0 -12px 18px rgba(206,214,210,0.78),
        0 12px 22px rgba(0,0,0,0.12);
      overflow: hidden;
    }

    .locked-package::before,
    .locked-package::after {
      content: "";
      position: absolute;
      left: 9%;
      right: 9%;
      height: 14px;
      border-radius: 999px;
      background: linear-gradient(180deg, #ffffff 0%, #dfe6e2 100%);
      box-shadow: 0 2px 8px rgba(0,0,0,0.08);
      z-index: 2;
    }

    .locked-package::before {
      top: -5px;
    }

    .locked-package::after {
      bottom: -5px;
      box-shadow: 0 -2px 8px rgba(0,0,0,0.06);
    }

    .locked-package-square {
      width: 128px;
      height: 128px;
      border-radius: 10px 10px 13px 13px;
      transform: rotate(-2deg);
    }

    .locked-package-tall {
      width: 74px;
      height: 124px;
      border-radius: 9px 9px 12px 12px;
      transform: rotate(2deg);
    }

    .locked-package-highlight {
      position: absolute;
      inset: 12px 14px;
      border-radius: inherit;
      background:
        linear-gradient(115deg, rgba(255,255,255,0.74) 0%, rgba(255,255,255,0) 34%),
        radial-gradient(circle at 55% 32%, rgba(255,255,255,0.64) 0%, rgba(255,255,255,0) 22%);
      opacity: 0.88;
      pointer-events: none;
    }

    .locked-package-fold {
      position: absolute;
      left: 11%;
      right: 11%;
      height: 1px;
      background: rgba(193,204,199,0.72);
      z-index: 3;
    }

    .locked-package-fold.top {
      top: 18px;
    }

    .locked-package-fold.bottom {
      bottom: 18px;
    }

    .locked-card .card-body {
      background: linear-gradient(180deg, #ffffff 0%, #fbfdfc 100%);
    }


    /* Card deslogado: mais respiro entre nome, selo e botao (vence os overrides de gap nos breakpoints) */
    .guest-locked-card .card-body { gap: 16px !important; }
    .guest-locked-card .card-header { gap: 12px !important; }
    .guest-locked-card .locked-state { margin-bottom: 2px !important; }

    .guest-locked-card .imagem-wrap {
      background: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .guest-locked-card .imagem-wrap img {
      display: none;
    }

    .guest-locked-card .imagem-wrap::after {
      display: none;
    }

    .guest-lock-overlay {
      position: absolute;
      inset: 0;
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
      text-align: center;
    }

    .guest-lock-box {
      display: grid;
      justify-items: center;
      gap: 10px;
      padding: 18px;
      border-radius: 22px;
      background: rgba(255,255,255,0.86);
      border: 1px solid rgba(255,255,255,0.72);
      box-shadow: 0 18px 34px rgba(0,0,0,0.10);
      backdrop-filter: blur(10px);
    }

    .guest-lock-icon {
      width: 54px;
      height: 54px;
      border-radius: 999px;
      background: var(--green);
      color: #ffffff;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      font-weight: 900;
    }

    .guest-lock-title {
      color: var(--green);
      font-size: 14px;
      font-weight: 900;
      line-height: 1.35;
    }

    .guest-lock-text {
      color: var(--text-soft);
      font-size: 12px;
      font-weight: 700;
      line-height: 1.5;
      max-width: 230px;
    }

    .guest-product-placeholder {
      display: grid;
      gap: 8px;
    }

    .guest-product-title {
      color: var(--green);
      font-size: 22px;
      line-height: 1.1;
      font-weight: 800;
      letter-spacing: -0.05em;
    }

    .guest-product-line {
      height: 14px;
      width: 78%;
      border-radius: 999px;
      background: linear-gradient(90deg, #eef7f3, #dfeee7, #eef7f3);
    }

    .guest-product-line.short {
      width: 48%;
    }

    .locked-state {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      width: fit-content;
      padding: 9px 12px;
      border-radius: 999px;
      background: #f3f7f5;
      color: #5f6b66;
      font-size: 12px;
      font-weight: 800;
      border: 1px solid rgba(0,84,61,0.08);
    }

    .erro {
      text-align: center;
      color: #b91c1c;
      margin-top: 20px;
      font-weight: 700;
    }

    .vazio {
      grid-column: 1 / -1;
      text-align: center;
      color: var(--text-soft);
      padding: 36px;
      background: white;
      border: 1px solid var(--border);
      border-radius: 24px;
      box-shadow: var(--shadow-soft);
      font-weight: 600;
    }

    .pagination {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      margin-top: 42px;
    }

    .page-btn {
      border: 1px solid var(--border);
      background: white;
      color: var(--green);
      border-radius: 14px;
      padding: 11px 15px;
      min-width: 46px;
      cursor: pointer;
      font-weight: 800;
    }

    .page-btn.active {
      background: var(--green);
      color: white;
      border-color: transparent;
    }

    .page-btn:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    .page-info {
      width: 100%;
      text-align: center;
      margin-top: 8px;
      color: var(--text-soft);
      font-size: 14px;
      font-weight: 700;
    }

    .cart-overlay,
    .modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 84, 61, 0.18);
      opacity: 0;
      visibility: hidden;
      transition: 0.25s ease;
      z-index: 998;
      backdrop-filter: blur(6px);
    }

    .cart-overlay.active,
    .modal-overlay.active {
      opacity: 1;
      visibility: visible;
    }

    /* AJUSTE PRINCIPAL AQUI */
    .cart-sidebar {
      position: fixed;
      top: 0;
      right: -460px;
      width: 100%;
      max-width: 460px;
      height: 100vh;
      background: #ffffff;
      border-left: 1px solid var(--border);
      box-shadow: -16px 0 40px rgba(0, 84, 61, 0.08);
      z-index: 999;
      transition: right 0.28s ease;
      overflow-y: auto;
      overflow-x: hidden;
      display: block;
    }

    .cart-sidebar.active {
      right: 0;
    }

    .cart-header {
      padding: 24px 22px;
      border-bottom: 1px solid var(--border);
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: sticky;
      top: 0;
      background: #ffffff;
      z-index: 2;
    }

    .cart-header h2 {
      color: var(--green);
      font-size: 30px;
      font-weight: 900;
      letter-spacing: -0.05em;
    }

    .close-cart,
    .close-modal,
    .close-client-page {
      border: none;
      width: 42px;
      height: 42px;
      border-radius: 14px;
      background: var(--green-soft);
      color: var(--green);
      cursor: pointer;
      font-size: 20px;
      font-weight: 900;
    }

    /* AJUSTE PRINCIPAL AQUI */
    .cart-items {
      padding: 18px;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .cart-empty,
    .client-empty {
      text-align: center;
      color: var(--text-soft);
      margin-top: 48px;
      font-size: 15px;
      background: #fafcfa;
      padding: 24px;
      border-radius: 16px;
      border: 1px dashed var(--border);
    }

    .client-card {
      border: 1px solid var(--border);
      border-radius: 22px;
      padding: 18px;
      background: white;
      box-shadow: var(--shadow-soft);
      display: grid;
      gap: 10px;
    }

    .client-card-label {
      color: var(--text-soft);
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      font-weight: 900;
    }

    .client-card-value {
      color: var(--green);
      font-size: 18px;
      font-weight: 900;
      line-height: 1.4;
    }

    .client-card-subvalue {
      color: var(--text-soft);
      font-size: 14px;
      line-height: 1.6;
    }

    .client-stage-timeline {
      position: relative;
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 12px;
      margin-top: 8px;
      padding-top: 8px;
    }

    .client-stage-timeline::before {
      content: "";
      position: absolute;
      top: 26px;
      left: 24px;
      right: 24px;
      height: 3px;
      background: #dfeae4;
      border-radius: 999px;
      z-index: 0;
    }

    .client-stage-step {
      position: relative;
      z-index: 1;
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      border: none;
      background: transparent;
      padding: 0;
      color: var(--text-soft);
      font-size: 11px;
      font-weight: 900;
      line-height: 1.5;
    }

    .client-stage-dot {
      width: 20px;
      height: 20px;
      border-radius: 999px;
      background: #ffffff;
      border: 3px solid #dfeae4;
      margin-bottom: 10px;
      transition: 0.22s ease;
      box-shadow: 0 0 0 6px rgba(255,255,255,0.95);
    }

    .client-stage-label {
      max-width: 90px;
    }

    .client-stage-step.done .client-stage-dot {
      background: var(--green);
      border-color: var(--green);
    }

    .client-stage-step.active .client-stage-dot {
      background: #ffffff;
      border-color: var(--green);
      box-shadow: 0 0 0 6px rgba(0,84,61,0.10);
    }

    .client-stage-step.done,
    .client-stage-step.active {
      color: var(--green);
    }

    .client-line-items {
      display: grid;
      gap: 12px;
    }

    .client-line-item {
      border: 1px solid var(--border);
      border-radius: 18px;
      padding: 14px;
      background: #fcfefd;
      display: grid;
      gap: 6px;
    }

    .client-line-item-name {
      color: var(--green);
      font-size: 15px;
      font-weight: 900;
      line-height: 1.5;
    }

    .client-line-item-meta {
      color: var(--text-soft);
      font-size: 13px;
      line-height: 1.6;
    }

    .history-list {
      display: grid;
      gap: 12px;
    }

    .history-item {
      border: 1px solid var(--border);
      border-radius: 18px;
      padding: 14px;
      background: #ffffff;
    }

    .history-item-title {
      color: var(--green);
      font-size: 15px;
      font-weight: 900;
      margin-bottom: 6px;
    }

    .history-item-meta {
      color: var(--text-soft);
      font-size: 13px;
      line-height: 1.6;
    }

    .history-clear-btn {
      border: 1px solid #e4b8b8;
      background: #ffffff;
      color: #c0392b;
      border-radius: 14px;
      padding: 10px 16px;
      font-size: 12px;
      font-weight: 900;
      cursor: pointer;
      align-self: center;
    }

    .history-clear-btn:hover {
      background: #fdecec;
    }

    /* (13/07) REDESIGN "Meus pedidos": card com faixa superior (data/total/nº/status),
       itens com foto à esquerda e ações ("Pedir novamente" / "Ver detalhes") à direita. */
    .pedidos-lista {
      display: grid;
      gap: 18px;
    }

    .pedido-card {
      border: 1px solid var(--border);
      border-radius: 18px;
      background: #ffffff;
      overflow: hidden;
      box-shadow: var(--shadow-soft);
    }

    .pedido-card-head {
      display: flex;
      align-items: center;
      gap: 32px;
      padding: 14px 20px;
      background: #f2f5f3;
      border-bottom: 1px solid var(--border);
    }

    .pedido-card-head-label {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--text-soft);
    }

    .pedido-card-head-value {
      font-size: 14px;
      font-weight: 800;
      color: var(--text);
      margin-top: 2px;
    }

    .pedido-card-head-right {
      margin-left: auto;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 6px;
      min-width: 0;
    }

    .pedido-card-numero {
      font-size: 12px;
      font-weight: 700;
      color: var(--text-soft);
      max-width: 260px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .pedido-badge {
      display: inline-block;
      padding: 5px 14px;
      border-radius: 999px;
      font-size: 11px;
      font-weight: 900;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: #ffffff;
      background: var(--green);
    }

    .pedido-badge.entregue { background: #6cc24a; }
    .pedido-badge.enviado { background: #2f7fbf; }
    .pedido-badge.separacao { background: #d98a1f; }
    .pedido-badge.confirmado { background: var(--green); }

    .pedido-card-body {
      display: flex;
      align-items: stretch;
    }

    .pedido-card-itens {
      flex: 1;
      min-width: 0;
      padding: 18px 20px;
      display: grid;
      gap: 16px;
      align-content: start;
    }

    .pedido-item {
      display: flex;
      align-items: center;
      gap: 14px;
    }

    .pedido-item-thumb {
      width: 54px;
      height: 54px;
      border-radius: 10px;
      object-fit: cover;
      background: #f0f0f0;
      flex: 0 0 auto;
    }

    .pedido-item-thumb-vazia {
      background: var(--green-soft);
    }

    .pedido-item-info {
      min-width: 0;
    }

    .pedido-item-nome {
      font-size: 14px;
      font-weight: 800;
      color: var(--text);
      text-transform: uppercase;
      line-height: 1.35;
    }

    .pedido-item-qtd {
      margin-top: 4px;
      font-size: 13px;
      color: var(--text);
    }

    .pedido-card-acoes {
      flex: 0 0 280px;
      border-left: 1px solid var(--border);
      padding: 18px 20px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 12px;
    }

    .pedido-btn-outline,
    .pedido-btn-solid {
      width: 100%;
      border-radius: 999px;
      padding: 13px 18px;
      font-size: 14px;
      font-weight: 800;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      transition: filter 0.15s ease, background 0.15s ease;
    }

    .pedido-btn-outline {
      background: #ffffff;
      border: 1.5px solid var(--text);
      color: var(--text);
    }

    .pedido-btn-outline:hover {
      background: #f6f8f7;
    }

    .pedido-btn-plus {
      width: 26px;
      height: 26px;
      border-radius: 50%;
      background: var(--green);
      color: #ffffff;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      font-weight: 900;
      line-height: 1;
      flex: 0 0 auto;
    }

    .pedido-btn-solid {
      background: var(--green);
      border: 1.5px solid var(--green);
      color: #ffffff;
    }

    .pedido-btn-solid:hover {
      filter: brightness(1.08);
    }

    .pedido-card-detalhes {
      border-top: 1px solid var(--border);
      padding: 16px 20px;
      background: #fbfdfc;
    }

    /* (13/07) REDESIGN formulário de endereço (Adicionar / Editar): tela única com
       link de voltar, card branco, campos empilhados com label caixa alta e input
       cinza flat, botão pill largura total — layout da referência, cores Zeleno. */
    .address-form-back {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      border: none;
      background: transparent;
      color: var(--text);
      font-size: 12px;
      font-weight: 900;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      cursor: pointer;
      padding: 4px 0;
      margin-bottom: 14px;
    }

    .address-form-back:hover {
      color: var(--green);
    }

    .address-form-v2 {
      display: block;
    }

    .address-form-card {
      background: #ffffff;
      border: 1px solid var(--border);
      border-radius: 18px;
      box-shadow: var(--shadow-soft);
      padding: 26px 24px;
      max-width: 560px;
      display: grid;
      gap: 18px;
    }

    /* achata o card-por-campo herdado (borda, sombra, lápis) dentro do form novo */
    .address-form-v2 .client-account-field {
      border: none;
      border-radius: 0;
      padding: 0;
      box-shadow: none;
      background: transparent;
      gap: 7px;
    }

    .address-form-v2 .client-account-field::after {
      display: none;
    }

    .address-form-v2 .client-account-field label {
      padding-right: 0;
      color: var(--text);
      font-size: 11px;
      letter-spacing: 0.09em;
    }

    .address-form-v2 .client-account-field input,
    .address-form-v2 .client-account-field select {
      background: #f3f4f4;
      border: 1.5px solid transparent;
      border-radius: 8px;
      padding: 12px 14px;
      font-size: 14px;
      color: var(--text);
      width: 100%;
      outline: none;
      transition: border-color 0.15s ease, background 0.15s ease;
    }

    .address-form-v2 .client-account-field input:focus,
    .address-form-v2 .client-account-field select:focus {
      border-color: var(--green);
      background: #ffffff;
    }

    .af2-cep-link {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      margin-top: 4px;
      color: var(--text);
      font-size: 13px;
      font-weight: 800;
      text-decoration: underline;
      text-underline-offset: 3px;
      width: fit-content;
    }

    .af2-cep-link:hover {
      color: var(--green);
    }

    .af2-check {
      font-size: 13px;
    }

    .af2-submit {
      width: 100%;
      border: none;
      border-radius: 999px;
      padding: 15px 18px;
      background: var(--green);
      color: #ffffff;
      font-size: 13px;
      font-weight: 900;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      cursor: pointer;
      transition: filter 0.15s ease;
    }

    .af2-submit:hover {
      filter: brightness(1.08);
    }

    .af2-submit:disabled {
      opacity: 0.65;
      cursor: default;
    }

    .af2-novo-link {
      border: none;
      background: transparent;
      color: var(--text-soft);
      font-size: 13px;
      font-weight: 800;
      text-decoration: underline;
      text-underline-offset: 3px;
      cursor: pointer;
      justify-self: center;
    }

    .af2-novo-link:hover {
      color: var(--green);
    }

    @media (max-width: 720px) {
      .address-form-card {
        max-width: none;
        padding: 20px 16px;
      }
    }

    /* (13/07) REDESIGN visual do CHECKOUT (layout da referência): título grandão,
       itens como linhas com divisor (lixeira + stepper circular à direita) e painel
       de resumo com "Receber X itens em CEP" como cabeçalho. Tudo ESCOPADO no
       checkout — .qty-btn/.remove-btn do carrinho lateral ficam intactos. */
    .checkout-page-title {
      color: var(--text);
      font-size: 42px;
      text-transform: uppercase;
      letter-spacing: -0.03em;
    }

    #checkoutStepProdutos .checkout-card-title {
      color: var(--text);
      font-size: 19px;
      padding-bottom: 14px;
      border-bottom: 1px solid var(--border);
    }

    #checkoutStepProdutos .checkout-items {
      gap: 0;
    }

    #checkoutStepProdutos .checkout-item {
      border: none;
      border-bottom: 1px solid var(--border);
      border-radius: 0;
      padding: 18px 2px;
      background: transparent;
      align-items: center;
    }

    #checkoutStepProdutos .checkout-item:last-child {
      border-bottom: none;
    }

    #checkoutStepProdutos .checkout-item img {
      width: 64px;
      height: 64px;
      border-radius: 10px;
    }

    #checkoutStepProdutos .checkout-item-name {
      color: var(--text);
      font-size: 14px;
      text-transform: uppercase;
    }

    .checkout-item-preco-linha {
      color: var(--text) !important;
    }

    .checkout-item-preco-linha strong {
      color: var(--text);
      font-size: 15px;
      font-weight: 900;
    }

    .checkout-item-preco-antigo {
      color: var(--text-soft);
      text-decoration: line-through;
      margin-right: 8px;
      font-weight: 700;
    }

    .checkout-item-lado {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      justify-content: space-between;
      gap: 14px;
      align-self: stretch;
      flex: 0 0 auto;
    }

    .checkout-item .checkout-item-trash {
      background: transparent;
      border: none;
      color: var(--text-soft);
      padding: 4px;
      border-radius: 8px;
      line-height: 0;
    }

    .checkout-item .checkout-item-trash:hover {
      color: #c0392b;
      background: #fdecec;
    }

    .checkout-item .checkout-item-stepper {
      flex-wrap: nowrap;
      gap: 10px;
    }

    .checkout-item .checkout-item-stepper .qty-btn {
      width: 32px;
      height: 32px;
      padding: 0;
      border-radius: 50%;
      background: #ffffff;
      border: 1.5px solid var(--text);
      color: var(--text);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      line-height: 1;
    }

    .checkout-item .checkout-item-stepper .qty-btn:hover {
      background: var(--green);
      border-color: var(--green);
      color: #ffffff;
    }

    .checkout-item .checkout-item-stepper .qty-value {
      color: var(--text);
      min-width: 16px;
    }

    /* Painel de resumo: o "Receber X item(ns) em CEP" vira o cabeçalho */
    .checkout-product-summary-panel .checkout-summary-title {
      display: none;
    }

    .checkout-product-summary-panel .checkout-summary-muted {
      color: var(--text);
      font-size: 17px;
      font-weight: 900;
      padding-bottom: 14px;
      border-bottom: 1px solid var(--border);
    }

    .checkout-product-summary-panel .checkout-product-summary-line {
      border-bottom: none;
      padding-bottom: 2px;
      color: var(--text);
      font-weight: 700;
    }

    .checkout-product-summary-panel .checkout-product-summary-line strong {
      color: var(--text);
      font-weight: 800;
    }

    .checkout-product-summary-panel .checkout-product-summary-line.total {
      border-top: 1px solid var(--border);
      padding-top: 14px;
      margin-top: 6px;
      font-size: 19px;
      font-weight: 900;
    }

    .checkout-product-summary-panel .checkout-product-summary-line.total strong {
      font-size: 21px;
      font-weight: 900;
    }

    #checkoutProductSummaryContinueButton {
      border-radius: 999px;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      font-size: 14px;
      padding: 16px;
    }

    /* (13/07) OLHINHO da senha (login / redefinir / cadastro). Só o ícone, DENTRO do campo,
       à direita — sem quadrado/fundo. !important pra atropelar o .login-form button genérico
       (fundo verde, padding grande) mesmo se alguma regra vier depois. Os estilos críticos
       também estão INLINE no index.html (garantia contra cache de CSS). */
    .senha-wrap {
      position: relative !important;
      width: 100%;
    }

    .senha-wrap input {
      padding-right: 48px !important;
    }

    .login-form .senha-toggle,
    .senha-toggle {
      position: absolute !important;
      top: 50% !important;
      right: 14px !important;
      transform: translateY(-50%) !important;
      width: auto !important;
      height: auto !important;
      padding: 0 !important;
      margin: 0 !important;
      border: none !important;
      border-radius: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
      color: var(--text-soft) !important;
      display: inline-flex !important;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      line-height: 0;
    }

    .login-form .senha-toggle:hover,
    .senha-toggle:hover {
      color: var(--green) !important;
      background: transparent !important;
    }

    @media (max-width: 720px) {
      .pedido-card-head {
        flex-wrap: wrap;
        gap: 14px 24px;
      }

      .pedido-card-head-right {
        margin-left: 0;
        width: 100%;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
      }

      .pedido-card-body {
        flex-direction: column;
      }

      .pedido-card-acoes {
        flex: 1 1 auto;
        border-left: none;
        border-top: 1px solid var(--border);
      }
    }

    .client-action-btn {
      border: none;
      border-radius: 16px;
      padding: 14px 16px;
      background: var(--green);
      color: #ffffff;
      font-weight: 900;
      cursor: pointer;
    }

    .cart-item {
      display: flex;
      gap: 12px;
      border: 1px solid var(--border);
      border-radius: 22px;
      padding: 14px;
      background: white;
      box-shadow: var(--shadow-soft);
    }

    .cart-item img {
      width: 86px;
      height: 86px;
      object-fit: cover;
      border-radius: 16px;
      background: #eef2f7;
      flex-shrink: 0;
    }

    .cart-item-info {
      flex: 1;
      min-width: 0;
    }

    .cart-item-name {
      color: var(--green);
      font-size: 14px;
      font-weight: 800;
      line-height: 1.35;
      margin-bottom: 6px;
    }

    .cart-item-price {
      color: var(--green);
      font-weight: 800;
      margin-bottom: 8px;
      font-size: 14px;
      line-height: 1.5;
    }

    .cart-item-note {
      display: inline-block;
      margin-top: 4px;
      font-size: 11px;
      padding: 4px 8px;
      border-radius: 999px;
      background: var(--green-soft);
      color: var(--green);
      font-weight: 800;
    }

    .cart-controls {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    .qty-btn,
    .remove-btn {
      border: none;
      background: var(--green-soft);
      color: var(--green);
      border-radius: 12px;
      padding: 8px 12px;
      cursor: pointer;
      font-weight: 800;
    }

    .qty-value {
      min-width: 22px;
      text-align: center;
      color: var(--green);
      font-weight: 900;
    }

    .remove-btn {
      background: #eef7f3;
      color: var(--green);
      border: 1px solid rgba(0,84,61,0.08);
    }

    /* AJUSTE PRINCIPAL AQUI */
    .cart-footer {
      border-top: 1px solid var(--border);
      padding: 22px;
      display: flex;
      flex-direction: column;
      gap: 16px;
      background: white;
    }

    .cart-summary {
      display: flex;
      justify-content: space-between;
      color: var(--green);
      font-size: 20px;
      font-weight: 900;
      letter-spacing: -0.03em;
    }

    .cart-summary-secondary {
      display: flex;
      justify-content: space-between;
      color: var(--text-soft);
      font-size: 14px;
      font-weight: 800;
      gap: 12px;
    }

    .cart-shipping-box {
      border: 1px solid rgba(0, 84, 61, 0.10);
      border-radius: 18px;
      padding: 16px;
      background: #fbfdfc;
      display: grid;
      gap: 10px;
    }

    .cart-shipping-title {
      color: var(--green);
      font-size: 11px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }

    .cart-shipping-line {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: center;
      color: var(--text-soft);
      font-size: 13px;
      line-height: 1.5;
    }

    .cart-shipping-line strong {
      color: var(--green);
    }

    .cart-shipping-option {
      display: flex;
      gap: 10px;
      align-items: flex-start;
      padding: 12px;
      border-radius: 14px;
      background: #ffffff;
      border: 1px solid rgba(0,84,61,0.10);
    }

    .cart-shipping-option input {
      margin-top: 2px;
      accent-color: var(--green);
    }

    .cart-shipping-option-label {
      color: var(--text-soft);
      font-size: 13px;
      line-height: 1.6;
      font-weight: 700;
    }

    .cart-shipping-option-label strong {
      color: var(--green);
    }

    .cart-shipping-input {
      width: 100%;
      min-height: 46px;
      padding: 12px 14px;
      border: 1px solid var(--border);
      border-radius: 14px;
      background: #ffffff;
      color: var(--text);
      outline: none;
      font-size: 14px;
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .cart-shipping-input:focus {
      border-color: var(--green);
      box-shadow: 0 0 0 4px rgba(0, 84, 61, 0.08);
    }

    .cart-shipping-input:focus {
      border-color: var(--green);
      box-shadow: 0 0 0 4px rgba(0, 84, 61, 0.08);
    }

    .cart-shipping-help {
      color: var(--text-soft);
      font-size: 12px;
      line-height: 1.5;
    }

    .cart-shipping-status {
      color: var(--green);
      font-size: 12px;
      font-weight: 800;
      line-height: 1.5;
    }

    .cart-shipping-status.error {
      color: #b91c1c;
    }

    .cart-progress-box {
      border: 1px solid var(--border);
      border-radius: 18px;
      padding: 14px;
      background: #fbfdfc;
      display: grid;
      gap: 10px;
    }

    .cart-progress-text {
      color: var(--text-soft);
      font-size: 13px;
      line-height: 1.6;
      font-weight: 700;
    }

    .cart-progress-bar {
      width: 100%;
      height: 10px;
      border-radius: 999px;
      background: #e8f2ed;
      overflow: hidden;
    }

    .cart-progress-fill {
      height: 100%;
      width: 0%;
      background: linear-gradient(90deg, var(--green), var(--green-2));
      border-radius: 999px;
      transition: width 0.25s ease;
    }

    .cart-usage-box {
      border: 1px solid var(--border);
      border-radius: 18px;
      padding: 14px;
      background: #fbfdfc;
      display: grid;
      gap: 10px;
    }

    .cart-usage-row {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      align-items: center;
    }

    .cart-usage-label {
      color: var(--text-soft);
      font-size: 13px;
      font-weight: 700;
    }

    .cart-usage-value {
      color: var(--green);
      font-size: 14px;
      font-weight: 900;
    }

    .cart-actions {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
    }

    .cart-action-btn {
      border: none;
      border-radius: 16px;
      padding: 15px;
      font-weight: 800;
      cursor: pointer;
      flex: 1;
      font-size: 15px;
    }

    .btn-clear-cart {
      background: var(--green-soft);
      color: var(--green);
      border: 1px solid rgba(0,84,61,0.10);
    }

    .btn-finish {
      background: var(--green);
      color: white;
      box-shadow: 0 16px 28px rgba(0,84,61,0.16);
    }

    .btn-whatsapp {
      background: #f3f7f5;
      color: var(--green);
      border: 1px solid rgba(0,84,61,0.10);
      box-shadow: none;
      flex: 0.9;
    }

    .product-modal {
      position: fixed;
      inset: 50% auto auto 50%;
      transform: translate(-50%, -50%) scale(0.96);
      width: calc(100% - 28px);
      max-width: 1280px;
      max-height: 94vh;
      overflow: hidden;
      background: #ffffff;
      border: 1px solid rgba(0,84,61,0.10);
      border-radius: 36px;
      z-index: 999;
      opacity: 0;
      visibility: hidden;
      transition: 0.30s ease;
      display: grid;
      grid-template-columns: 0.95fr 1.05fr;
      grid-template-rows: minmax(0, 1fr); /* 🔧 desktop: linha limitada -> conteudo da direita rola */
      box-shadow: 0 34px 90px rgba(0, 84, 61, 0.16);
    }

    .product-modal.active {
      opacity: 1;
      visibility: visible;
      transform: translate(-50%, -50%) scale(1);
    }

    .modal-image-panel {
      position: relative;
      min-height: 100%;
      background: radial-gradient(circle at top left, rgba(255,255,255,0.10), transparent 26%), linear-gradient(145deg, #0b4d39 0%, #0a5d45 40%, #0d7759 100%);
      overflow: hidden;
      display: flex;
      align-items: stretch;
      justify-content: stretch;
    }

    .modal-image-panel img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      mix-blend-mode: screen;
      opacity: 0.92;
    }

    .modal-image-gradient {
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(0,0,0,0.02) 0%, rgba(0,0,0,0.18) 100%), linear-gradient(90deg, rgba(0,84,61,0.10) 0%, rgba(0,84,61,0) 48%);
      pointer-events: none;
    }

    .modal-floating-badges {
      position: absolute;
      left: 26px;
      right: 26px;
      bottom: 26px;
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      z-index: 2;
    }

    .modal-floating-badge {
      background: rgba(255,255,255,0.14);
      color: #ffffff;
      border-radius: 999px;
      padding: 10px 14px;
      font-size: 12px;
      font-weight: 900;
      border: 1px solid rgba(255,255,255,0.18);
      backdrop-filter: blur(10px);
    }

    .modal-content {
      padding: 34px;
      overflow-y: auto;
      min-height: 0; /* item de grid tem min-height:auto -> sem isto nao rola internamente */
      background: radial-gradient(circle at top right, rgba(0,84,61,0.05), transparent 20%), linear-gradient(180deg, #ffffff 0%, #fbfdfc 100%);
    }

    .modal-top {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 18px;
      margin-bottom: 24px;
    }

    .modal-title-wrap {
      display: grid;
      gap: 12px;
      max-width: 600px;
    }

    .modal-kicker {
      display: inline-flex;
      width: fit-content;
      padding: 9px 13px;
      border-radius: 999px;
      background: rgba(0,84,61,0.08);
      color: var(--green);
      font-size: 11px;
      font-weight: 900;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .modal-title {
      color: var(--green);
      font-size: 40px;
      line-height: 0.95;
      font-weight: 900;
      letter-spacing: -0.08em;
    }

    .modal-subtitle {
      color: var(--text-soft);
      font-size: 15px;
      line-height: 1.8;
      max-width: 560px;
    }

    .modal-price-card {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 18px;
      align-items: center;
      padding: 24px;
      border-radius: 28px;
      background: linear-gradient(135deg, #ffffff 0%, #f6fbf8 100%);
      border: 1px solid rgba(0,84,61,0.10);
      box-shadow: 0 18px 34px rgba(0,84,61,0.08);
      margin-bottom: 20px;
    }

    .modal-price-label {
      font-size: 11px;
      color: var(--text-soft);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      font-weight: 900;
      margin-bottom: 8px;
    }

    .modal-price {
      font-size: 52px;
      font-weight: 900;
      color: var(--green);
      letter-spacing: -0.08em;
      line-height: 0.95;
    }

    .modal-coupon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 15px 18px;
      border-radius: 20px;
      background: var(--green);
      color: #ffffff;
      font-size: 12px;
      font-weight: 800;
      line-height: 1.55;
      min-width: 210px;
      box-shadow: 0 14px 26px rgba(0,84,61,0.16);
    }

    .modal-badges {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-bottom: 26px;
    }

    .modal-badge {
      background: #ffffff;
      color: var(--green);
      border: 1px solid rgba(0,84,61,0.12);
      border-radius: 999px;
      padding: 10px 14px;
      font-size: 12px;
      font-weight: 800;
      box-shadow: var(--shadow-soft);
    }

    .modal-hero-stats {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
      margin-bottom: 26px;
    }

    .modal-hero-stat-card {
      border-radius: 24px;
      padding: 20px;
      background: linear-gradient(135deg, #ffffff 0%, #f5fbf8 52%, #edf7f2 100%);
      border: 1px solid rgba(0,84,61,0.10);
      box-shadow: 0 16px 30px rgba(0,84,61,0.06);
      display: grid;
      gap: 10px;
    }

    .modal-hero-stat-label {
      display: inline-flex;
      width: fit-content;
      padding: 7px 11px;
      border-radius: 999px;
      background: rgba(0,84,61,0.08);
      color: var(--green);
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      font-weight: 900;
    }

    .modal-hero-stat-value {
      color: var(--green);
      font-size: 38px;
      line-height: 0.95;
      font-weight: 900;
      letter-spacing: -0.07em;
    }

    .modal-hero-stat-text {
      color: var(--green);
      font-size: 15px;
      line-height: 1.35;
      font-weight: 900;
      letter-spacing: -0.03em;
    }

    .modal-hero-stat-subtext {
      color: var(--text-soft);
      font-size: 12px;
      line-height: 1.6;
    }

    .modal-accordion {
      display: grid;
      gap: 16px;
      margin-bottom: 24px;
    }

    .modal-accordion-item {
      border: 1px solid rgba(0,84,61,0.10);
      border-radius: 28px;
      background: linear-gradient(180deg, #ffffff 0%, #fbfdfc 100%);
      box-shadow: 0 14px 26px rgba(0,84,61,0.06);
      overflow: hidden;
    }

    .modal-accordion-button {
      width: 100%;
      border: none;
      background: transparent;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 22px 24px;
      cursor: pointer;
      text-align: left;
    }

    .modal-accordion-title-wrap {
      display: grid;
      gap: 6px;
    }

    .modal-accordion-kicker {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--text-soft);
      font-weight: 900;
    }

    .modal-accordion-title {
      font-size: 20px;
      font-weight: 900;
      color: var(--green);
      letter-spacing: -0.04em;
    }

    .modal-accordion-icon {
      width: 42px;
      height: 42px;
      border-radius: 999px;
      background: var(--green-soft);
      color: var(--green);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      font-weight: 900;
      flex-shrink: 0;
      transition: transform 0.22s ease, background 0.22s ease;
    }

    .modal-accordion-item.active .modal-accordion-icon {
      transform: rotate(45deg);
      background: rgba(0,84,61,0.14);
    }

    .modal-accordion-content {
      display: grid;
      grid-template-rows: 0fr;
      transition: grid-template-rows 0.30s ease;
    }

    .modal-accordion-item.active .modal-accordion-content {
      grid-template-rows: 1fr;
    }

    .modal-accordion-inner {
      overflow: hidden;
    }

    .modal-accordion-body {
      padding: 0 24px 24px;
    }

    .modal-info-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
    }

    .modal-info-card {
      background: #ffffff;
      border: 1px solid rgba(0,84,61,0.08);
      border-radius: 20px;
      padding: 18px;
      box-shadow: 0 10px 20px rgba(0,84,61,0.04);
    }

    .modal-info-label {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--text-soft);
      font-weight: 900;
      margin-bottom: 8px;
    }

    .modal-info-value {
      color: var(--green);
      font-size: 15px;
      font-weight: 800;
      line-height: 1.55;
    }

    .modal-effects-box {
      background: linear-gradient(135deg, #f2faf6 0%, #ecf7f1 100%);
      border-radius: 24px;
      padding: 18px;
      border: 1px solid rgba(0,84,61,0.08);
    }

    .card-effects {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      min-height: 34px;
    }

    .effect-pill {
      background: white;
      color: var(--green);
      border-radius: 999px;
      padding: 10px 12px;
      font-size: 12px;
      font-weight: 800;
      line-height: 1.35;
      border: 1px solid rgba(0,84,61,0.10);
    }

    .modal-actions {
      display: flex;
      gap: 12px;
      margin-top: 12px;
    }

    .client-page {
      position: fixed;
      inset: 0;
      background: #f7fbf9;
      z-index: 3000;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity 0.25s ease, visibility 0.25s ease;
      overflow: hidden;
    }

    .client-page.active {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }

    .client-page-shell {
      display: flex;
      flex-direction: column;
      width: 100%;
      height: 100%;
    }

    .client-page-topbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 20px 24px;
      border-bottom: 1px solid var(--border);
      background: rgba(255,255,255,0.96);
      backdrop-filter: blur(10px);
    }

    .client-page-topbar-left {
      display: flex;
      align-items: center;
      gap: 14px;
      min-width: 0;
    }

    .client-page-title-wrap {
      display: grid;
      gap: 4px;
    }

    .client-page-kicker {
      color: var(--text-soft);
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      font-weight: 900;
    }

    .client-page-title {
      color: var(--green);
      font-size: 30px;
      line-height: 1;
      font-weight: 900;
      letter-spacing: -0.05em;
    }

    .client-page-subtitle {
      color: var(--text-soft);
      font-size: 13px;
      line-height: 1.5;
    }

    .client-page-body {
      flex: 1;
      min-height: 0;
      display: grid;
      grid-template-columns: 300px minmax(0, 1fr);
    }

    .client-page-menu {
      padding: 24px;
      border-right: 1px solid var(--border);
      background: linear-gradient(180deg, #ffffff 0%, #f8fcfa 100%);
      overflow-y: auto;
    }

    .client-menu-card {
      border: 1px solid var(--border);
      border-radius: 26px;
      padding: 18px;
      background: #ffffff;
      box-shadow: var(--shadow-soft);
      display: grid;
      gap: 18px;
    }

    .client-menu-user {
      display: grid;
      gap: 6px;
      padding-bottom: 18px;
      border-bottom: 1px solid var(--border);
    }

    .client-menu-user-name {
      color: var(--green);
      font-size: 22px;
      font-weight: 900;
      letter-spacing: -0.04em;
      line-height: 1.2;
    }

    .client-menu-user-email {
      color: var(--text-soft);
      font-size: 14px;
      line-height: 1.6;
      word-break: break-word;
    }

    .client-menu-nav {
      display: grid;
      gap: 10px;
    }

    .client-menu-btn {
      width: 100%;
      border: 1px solid var(--border);
      background: #ffffff;
      color: var(--green);
      border-radius: 18px;
      padding: 14px 16px;
      text-align: left;
      font-weight: 800;
      cursor: pointer;
      transition: 0.22s ease;
    }

    .client-menu-btn.active {
      background: var(--green);
      color: #ffffff;
      border-color: var(--green);
      box-shadow: 0 16px 28px rgba(0,84,61,0.16);
    }


    .client-menu-topic {
      display: grid;
      gap: 8px;
    }

    .client-menu-topic-toggle {
      width: 100%;
      border: 1px solid var(--border);
      background: #ffffff;
      color: var(--green);
      border-radius: 18px;
      padding: 14px 16px;
      text-align: left;
      font-weight: 900;
      cursor: pointer;
      transition: 0.22s ease;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .client-menu-topic-toggle::after {
      content: "+";
      width: 24px;
      height: 24px;
      border-radius: 999px;
      background: var(--green-soft);
      color: var(--green);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      line-height: 1;
      font-weight: 900;
      flex-shrink: 0;
      transition: transform 0.22s ease, background 0.22s ease;
    }

    .client-menu-topic.open .client-menu-topic-toggle,
    .client-menu-topic-toggle:hover {
      background: var(--green-soft);
      border-color: rgba(0,84,61,0.18);
    }

    .client-menu-topic.open .client-menu-topic-toggle::after {
      content: "−";
      background: var(--green);
      color: #ffffff;
    }

    .client-menu-submenu {
      display: none;
      gap: 8px;
      padding: 2px 0 6px 10px;
      border-left: 2px solid rgba(0,84,61,0.10);
      margin-left: 8px;
    }

    .client-menu-topic.open .client-menu-submenu {
      display: grid;
    }

    .client-page-main {
      padding: 24px;
      overflow-y: auto;
    }

    .client-page-section-head {
      display: flex;
      justify-content: space-between;
      align-items: end;
      gap: 18px;
      flex-wrap: wrap;
      margin-bottom: 22px;
    }

    .client-page-section-title {
      color: var(--green);
      font-size: 42px;
      line-height: 0.95;
      font-weight: 900;
      letter-spacing: -0.06em;
    }

    .client-page-section-text {
      color: var(--text-soft);
      font-size: 14px;
      line-height: 1.7;
      max-width: 680px;
    }

    .client-grid-two {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 16px;
    }

    .client-grid-three {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 16px;
    }

    .client-info-box {
      border: 1px solid var(--border);
      border-radius: 22px;
      padding: 18px;
      background: #ffffff;
      box-shadow: var(--shadow-soft);
      display: grid;
      gap: 8px;
    }

    .lib-box-row { display: flex; gap: 12px; align-items: flex-start; }
    .lib-box-thumb {
      width: 60px; height: 60px; border-radius: 14px; object-fit: cover;
      flex-shrink: 0; background: #f3fbf6; border: 1px solid var(--border);
    }
    .lib-box-main { flex: 1; min-width: 0; display: grid; gap: 6px; }

    .client-info-label {
      color: var(--text-soft);
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      font-weight: 900;
    }

    .client-info-value {
      color: var(--green);
      font-size: 18px;
      font-weight: 900;
      line-height: 1.5;
      word-break: break-word;
    }

    .client-info-subvalue {
      color: var(--text-soft);
      font-size: 13px;
      line-height: 1.6;
    }

    .client-account-edit-hint {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      width: fit-content;
      margin-top: 10px;
      padding: 9px 12px;
      border-radius: 999px;
      background: var(--green-soft);
      color: var(--green);
      font-size: 12px;
      font-weight: 900;
      border: 1px solid rgba(0,84,61,0.10);
    }

    .client-account-form {
      display: grid;
      gap: 16px;
    }

    .client-account-field {
      position: relative;
      border: 1px solid var(--border);
      border-radius: 22px;
      padding: 18px;
      background: #ffffff;
      box-shadow: var(--shadow-soft);
      display: grid;
      gap: 8px;
    }

    .client-account-field::after {
      content: "✎";
      position: absolute;
      top: 14px;
      right: 14px;
      width: 30px;
      height: 30px;
      border-radius: 999px;
      background: var(--green-soft);
      color: var(--green);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-weight: 900;
      pointer-events: none;
    }

    .client-account-field label {
      color: var(--text-soft);
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      font-weight: 900;
      padding-right: 38px;
    }

    .client-account-field input,
    .client-account-field select {
      width: 100%;
      min-height: 48px;
      padding: 12px 14px;
      border: 1px solid var(--border);
      border-radius: 14px;
      background: #fbfdfc;
      color: var(--green);
      outline: none;
      font-size: 16px;
      font-weight: 900;
    }

    .client-account-field input:focus,
    .client-account-field select:focus {
      border-color: var(--green);
      background: #ffffff;
      box-shadow: 0 0 0 4px rgba(0,84,61,0.08);
    }

    .client-account-actions {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      align-items: center;
      margin-top: 4px;
    }

    .client-account-save-btn,
    .client-account-reset-btn {
      border: none;
      border-radius: 16px;
      padding: 14px 16px;
      font-weight: 900;
      cursor: pointer;
    }

    .client-account-save-btn {
      background: var(--green);
      color: #ffffff;
      box-shadow: 0 16px 28px rgba(0,84,61,0.16);
    }

    .client-account-reset-btn {
      background: var(--green-soft);
      color: var(--green);
      border: 1px solid rgba(0,84,61,0.10);
    }

    .client-account-save-btn:disabled,
    .client-account-reset-btn:disabled {
      opacity: 0.65;
      cursor: not-allowed;
    }

    .client-account-message {
      min-height: 20px;
      color: var(--text-soft);
      font-size: 13px;
      font-weight: 800;
      line-height: 1.5;
    }

    .client-account-message.success {
      color: var(--green);
    }

    .client-account-message.error {
      color: #b91c1c;
    }

    .client-wallet-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 16px;
      margin-bottom: 16px;
    }

    .client-wallet-highlight {
      border: 1px solid rgba(0,84,61,0.10);
      border-radius: 26px;
      padding: 22px;
      background: linear-gradient(135deg, #ffffff 0%, #f5fbf8 100%);
      box-shadow: var(--shadow-soft);
      display: grid;
      gap: 10px;
    }

    .client-wallet-highlight .client-info-value {
      font-size: 26px;
    }


    /* CARTEIRA PREMIUM */
    .client-wallet-premium {
      display: grid;
      gap: 18px;
    }

    .client-wallet-hero {
      position: relative;
      overflow: hidden;
      border-radius: 32px;
      padding: 28px;
      background:
        radial-gradient(circle at top right, rgba(255,255,255,0.24) 0%, rgba(255,255,255,0) 34%),
        linear-gradient(135deg, #00543d 0%, #087657 100%);
      color: #ffffff;
      box-shadow: 0 24px 54px rgba(0,84,61,0.18);
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 24px;
      align-items: end;
    }

    .client-wallet-hero::before {
      content: "";
      position: absolute;
      width: 260px;
      height: 260px;
      right: -88px;
      top: -110px;
      border-radius: 999px;
      background: rgba(255,255,255,0.12);
      pointer-events: none;
    }

    .client-wallet-hero::after {
      content: "";
      position: absolute;
      width: 170px;
      height: 170px;
      left: -70px;
      bottom: -82px;
      border-radius: 999px;
      background: rgba(255,255,255,0.09);
      pointer-events: none;
    }

    .client-wallet-hero-content,
    .client-wallet-hero-side {
      position: relative;
      z-index: 1;
    }

    .client-wallet-kicker {
      display: inline-flex;
      width: fit-content;
      padding: 8px 12px;
      border-radius: 999px;
      background: rgba(255,255,255,0.14);
      border: 1px solid rgba(255,255,255,0.18);
      color: #ffffff;
      font-size: 11px;
      font-weight: 900;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      margin-bottom: 14px;
    }

    .client-wallet-balance-label {
      color: rgba(255,255,255,0.78);
      font-size: 13px;
      font-weight: 800;
      margin-bottom: 6px;
    }

    .client-wallet-balance-value {
      color: #ffffff;
      font-size: 56px;
      line-height: 0.95;
      font-weight: 900;
      letter-spacing: -0.08em;
      margin-bottom: 10px;
    }

    .client-wallet-balance-help {
      color: rgba(255,255,255,0.78);
      font-size: 13px;
      line-height: 1.55;
      font-weight: 700;
      max-width: 560px;
    }

    .client-wallet-hero-side {
      min-width: 210px;
      padding: 18px;
      border-radius: 24px;
      background: rgba(255,255,255,0.12);
      border: 1px solid rgba(255,255,255,0.18);
      backdrop-filter: blur(12px);
      display: grid;
      gap: 8px;
    }

    .client-wallet-side-label {
      color: rgba(255,255,255,0.72);
      font-size: 11px;
      font-weight: 900;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .client-wallet-side-value {
      color: #ffffff;
      font-size: 24px;
      font-weight: 900;
      line-height: 1.2;
    }

    .client-wallet-stats {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
    }

    .client-wallet-stat-card,
    .client-wallet-referral-card {
      border: 1px solid rgba(0,84,61,0.10);
      border-radius: 24px;
      background: #ffffff;
      box-shadow: var(--shadow-soft);
      padding: 18px;
      display: grid;
      gap: 8px;
    }

    .client-wallet-stat-label,
    .client-wallet-referral-label {
      color: var(--text-soft);
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      font-weight: 900;
    }

    .client-wallet-stat-value {
      color: var(--green);
      font-size: 30px;
      line-height: 1;
      font-weight: 900;
      letter-spacing: -0.05em;
    }

    .client-wallet-stat-text,
    .client-wallet-referral-text {
      color: var(--text-soft);
      font-size: 13px;
      line-height: 1.55;
      font-weight: 700;
    }

    .client-wallet-referral-card {
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 16px;
    }

    .client-wallet-referral-link {
      color: var(--green);
      font-size: 14px;
      font-weight: 900;
      line-height: 1.5;
      overflow-wrap: anywhere;
    }

    .client-wallet-action-row {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      align-items: center;
      justify-content: flex-start;
    }

    @media (max-width: 900px) {
      .client-wallet-hero,
      .client-wallet-referral-card {
        grid-template-columns: 1fr;
      }

      .client-wallet-stats {
        grid-template-columns: 1fr;
      }

      .client-wallet-balance-value {
        font-size: 42px;
      }
    }

    @media (max-width: 1180px) {
      .hero-box,
      .product-modal {
        grid-template-columns: 1fr;
      }

      /* 🔧 modal empilhado: imagem no topo, conteudo embaixo COM scroll proprio */
      .product-modal {
        grid-template-rows: auto minmax(0, 1fr);
      }

      .filtros {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas:
          "canabinoide fornecedor"
          "categoria concentracao";
      }

      .modal-image-panel {
        min-height: 340px;
        max-height: 380px;
      }

      /* 🔧 mostra a imagem inteira sem cortar/aumentar demais */
      .modal-image-panel img {
        object-fit: contain;
      }

      .modal-hero-stats,
      .client-page-body {
        grid-template-columns: 1fr;
      }

      .client-page-menu {
        border-right: none;
        border-bottom: 1px solid var(--border);
      }

      .client-grid-two,
      .client-grid-three,
      .client-wallet-grid {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 768px) {
      .header-inner {
        flex-wrap: wrap;
      }
      .brand {
        min-width: 0;
      }
      .header-search {
        order: 3;
        width: 100%;
        min-width: 0;
        max-width: none;
      }


      .hero-content {
        padding: 26px;
      }

      .hero-title {
        font-size: 38px;
      }

      .hero-box {
        min-height: 260px;
      }

      .filtros {
        grid-template-columns: 1fr;
        grid-template-areas:
          "canabinoide"
          "fornecedor"
          "categoria"
          "concentracao";
      }

      .section-title {
        font-size: 36px;
      }

      .produto-nome {
        font-size: 24px;
        min-height: auto;
      }

      .imagem-wrap {
        height: 270px;
      }

      .product-modal {
        width: calc(100% - 16px);
        max-height: 94vh;
        border-radius: 28px;
      }

      .modal-content {
        padding: 22px;
      }

      .modal-title {
        font-size: 34px;
      }

      .modal-price-card,
      .modal-info-grid {
        grid-template-columns: 1fr;
      }

      .filters-panel {
        padding: 18px;
        border-radius: 28px;
      }

      .filters-title {
        font-size: 24px;
      }

      .filtros-acoes {
        flex-direction: column;
        align-items: stretch;
      }

      .btn-filtro,
      .client-button,
      .cart-button {
        width: 100%;
        justify-content: center;
      }

      .acoes {
        grid-template-columns: 1fr;
      }

      .btn-detail-premium {
        min-height: 62px;
      }

      .header-actions {
        width: 100%;
        flex-wrap: wrap;
      }

      .filter-menu {
        width: auto;
        display: flex;
        grid-template-columns: none;
      }

      .filters-dropdown,
      .filter-clear-wrap {
        width: auto;
      }

      .filters-dropdown-panel {
        width: max-content;
      }

      .filters-dropdown-trigger {
        justify-content: center;
        width: 52px;
        min-width: 52px;
      }

      .filters-dropdown-panel {
        right: auto;
        left: 0;
        width: max-content;
        max-width: calc(100vw - 36px);
      }

      .filters-dropdown-layout {
        grid-template-columns: 1fr;
      }

      .filters-dropdown-categories {
        grid-template-columns: 1fr;
      }

      .filter-options-list {
        flex-direction: column;
      }

      .filter-option-btn {
        width: 100%;
        text-align: left;
        border-radius: 16px;
      }

      .featured-showcase-carousel {
        padding: 8px 42px 4px;
      }

      .featured-showcase-arrow {
        display: inline-flex;
        width: 38px;
        height: 38px;
        font-size: 20px;
      }

      .featured-showcase-arrow-prev,
      .featured-showcase-arrow-next {
        top: 90px;
      }

      .client-page-topbar {
        padding: 18px;
      }

      .client-page-main,
      .client-page-menu {
        padding: 18px;
      }

      .client-page-title {
        font-size: 24px;
      }

      .client-page-section-title {
        font-size: 32px;
      }

      .client-stage-timeline::before {
        left: 18px;
        right: 18px;
      }

      .client-stage-label {
        max-width: 72px;
        font-size: 10px;
      }
    }


    .hero-carousel-premium {
      width: 100%;
      height: 370px;
      position: relative;
      overflow: hidden;
      border-radius: 38px;
      border: 1px solid rgba(0,84,61,0.12);
      box-shadow: 0 30px 80px rgba(0,84,61,0.14);
      background: #042d21;
      display: block;
    }

    .hero-carousel-glow {
      position: absolute;
      inset: auto auto -120px -120px;
      width: 340px;
      height: 340px;
      border-radius: 999px;
      background: radial-gradient(circle, rgba(107,255,196,0.22) 0%, rgba(107,255,196,0) 72%);
      z-index: 1;
      pointer-events: none;
      filter: blur(4px);
    }

    .hero-carousel-track {
      width: 100%;
      height: 100%;
      position: relative;
    }

    .hero-carousel-slide {
      position: absolute;
      inset: 0;
      opacity: 0;
      transition: opacity 0.9s ease, transform 1.2s ease;
      transform: scale(1.04);
      will-change: opacity, transform;
    }

    .hero-carousel-slide.is-active {
      opacity: 1;
      transform: scale(1);
      z-index: 1;
    }

    .hero-carousel-slide img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .hero-carousel-overlay {
      position: absolute;
      inset: 0;
      background:
        linear-gradient(180deg, rgba(0,0,0,0.04) 0%, rgba(0,0,0,0.16) 100%),
        linear-gradient(90deg, rgba(0,84,61,0.16) 0%, rgba(0,84,61,0.02) 35%, rgba(0,84,61,0.02) 65%, rgba(0,84,61,0.16) 100%);
      z-index: 2;
      pointer-events: none;
    }

    .hero-carousel-arrow {
      display: none !important;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 3;
      width: 54px;
      height: 54px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,0.26);
      background: rgba(255,255,255,0.14);
      color: #ffffff;
      font-size: 34px;
      line-height: 1;
      cursor: pointer;
      backdrop-filter: blur(12px);
      box-shadow: 0 18px 30px rgba(0,0,0,0.12);
      transition: transform 0.22s ease, background 0.22s ease, border-color 0.22s ease;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .hero-carousel-arrow:hover {
      background: rgba(255,255,255,0.22);
      border-color: rgba(255,255,255,0.4);
      transform: translateY(-50%) scale(1.04);
    }

    .hero-carousel-arrow-prev {
      left: 22px;
    }

    .hero-carousel-arrow-next {
      right: 22px;
    }

    .hero-carousel-dots {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      margin-top: 14px;
    }

    .hero-carousel-dots:empty {
      display: none;
    }

    .hero-carousel-dot {
      width: 10px;
      height: 10px;
      border-radius: 999px;
      border: none;
      background: rgba(0,84,61,0.25);
      cursor: pointer;
      transition: transform 0.22s ease, background 0.22s ease, width 0.22s ease;
      padding: 0;
    }

    .hero-carousel-dot.active {
      width: 30px;
      background: #00543D;
    }

    .institutional-submenu {
      max-width: var(--container);
      margin: 18px auto 0;
      padding: 0 22px;
    }

    .institutional-submenu-inner {
      display: flex;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
      padding: 14px 16px;
      border: 1px solid rgba(0,84,61,0.10);
      border-radius: 22px;
      background: linear-gradient(135deg, #ffffff 0%, #f8fcfa 100%);
      box-shadow: var(--shadow-soft);
    }

    .institutional-submenu-title {
      color: var(--green);
      font-size: 12px;
      font-weight: 900;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      padding: 8px 12px;
      border-radius: 999px;
      background: rgba(0,84,61,0.08);
    }

    .institutional-submenu a {
      color: var(--green);
      text-decoration: none;
      font-size: 13px;
      font-weight: 800;
      padding: 9px 11px;
      border-radius: 999px;
      transition: background 0.22s ease, color 0.22s ease, transform 0.22s ease;
    }

    .institutional-submenu a:hover {
      background: var(--green-soft);
      transform: translateY(-1px);
    }


    .filters-dropdown-institutional {
      margin-top: 12px;
      padding-top: 12px;
      border-top: 1px solid rgba(0,84,61,0.10);
      display: grid;
      gap: 8px;
    }

    .filters-dropdown-institutional-title {
      color: var(--green);
      font-size: 11px;
      font-weight: 900;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      padding: 0 2px;
    }

    .filters-dropdown-institutional-links {
      display: grid;
      gap: 8px;
    }

    .filters-dropdown-institutional-links a {
      color: var(--green);
      text-decoration: none;
      font-size: 13px;
      font-weight: 800;
      line-height: 1.35;
      padding: 8px 10px;
      border-radius: 12px;
      background: #f8fcfa;
      border: 1px solid rgba(0,84,61,0.08);
    }

    .filters-dropdown-institutional-links a:hover {
      background: var(--green-soft);
    }



    @media (max-width: 1180px) {
      .hero-carousel-premium {
        height: 340px;
      }
    }

    @media (max-width: 768px) {
      .hero-carousel-premium {
        height: 260px;
        border-radius: 28px;
      }

      .hero-carousel-arrow {
        width: 44px;
        height: 44px;
        font-size: 28px;
      }

      .hero-carousel-arrow-prev {
        left: 14px;
      }

      .hero-carousel-arrow-next {
        right: 14px;
      }

      .hero-carousel-dots {
        bottom: 14px;
        gap: 8px;
        padding: 8px 12px;
      }

      .hero-carousel-dot.active {
        width: 24px;
      }
    }


    .featured-showcase-section {
      max-width: var(--container);
      margin: 34px auto 0;
      padding: 0 22px;
    }

    .featured-showcase-shell {
      position: relative;
      overflow: visible;
      border-radius: 0;
      padding: 0;
      background: none;
      border: none;
      box-shadow: none;
    }

    .featured-showcase-shell::after {
      content: "";
      display: block;
      width: min(440px, 62%);
      height: 1px;
      margin: 34px auto 0;
      background: linear-gradient(90deg, transparent, rgba(0,84,61,0.20), transparent);
    }

    .featured-showcase-shell::before {
      content: none;
      position: absolute;
      inset: auto -90px -120px auto;
      width: 260px;
      height: 260px;
      border-radius: 999px;
      background: radial-gradient(circle, rgba(0,84,61,0.14) 0%, rgba(0,84,61,0) 72%);
      pointer-events: none;
    }

    .featured-showcase-head {
      display: none;
      justify-content: space-between;
      align-items: end;
      gap: 18px;
      flex-wrap: wrap;
      margin-bottom: 22px;
      position: relative;
      z-index: 1;
    }

    .featured-showcase-kicker {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      width: fit-content;
      padding: 8px 12px;
      border-radius: 999px;
      background: rgba(0,84,61,0.08);
      color: var(--green);
      font-size: 11px;
      font-weight: 900;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      margin-bottom: 10px;
    }

    .featured-showcase-title {
      color: var(--green);
      font-size: 42px;
      line-height: 0.95;
      font-weight: 900;
      letter-spacing: -0.06em;
      margin-bottom: 10px;
    }

    .featured-showcase-text {
      color: var(--text-soft);
      font-size: 14px;
      line-height: 1.7;
      max-width: 700px;
    }

    .featured-showcase-actions {
      display: none;
    }

    .featured-showcase-arrow {
      display: none;
      width: 52px;
      height: 52px;
      border-radius: 999px;
      border: 1px solid rgba(0,84,61,0.12);
      background: rgba(255,255,255,0.86);
      color: var(--green);
      font-size: 28px;
      line-height: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      box-shadow: 0 16px 28px rgba(0,84,61,0.08);
      transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
    }

    .featured-showcase-arrow:hover {
      transform: translateY(-50%) scale(1.03);
      background: #ffffff;
      box-shadow: 0 20px 34px rgba(0,84,61,0.12);
    }

    .featured-showcase-arrow-prev,
    .featured-showcase-arrow-next {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 3;
    }

    .featured-showcase-arrow-prev {
      left: 4px;
    }

    .featured-showcase-arrow-next {
      right: 4px;
    }

    .featured-showcase-carousel {
      position: relative;
      z-index: 1;
      overflow: hidden;
      padding: 4px 0 2px;
    }

    .featured-showcase-track {
      display: flex;
      justify-content: safe center;
      gap: 42px;
      overflow-x: auto;
      scroll-behavior: smooth;
      scrollbar-width: none;
      -ms-overflow-style: none;
      padding: 0;
    }

    .featured-showcase-track::-webkit-scrollbar {
      display: none;
    }

    .featured-showcase-card {
      flex: 0 0 116px;
      display: grid;
      justify-items: center;
      gap: 12px;
      cursor: pointer;
    }

    .featured-showcase-circle {
      width: 104px;
      height: 104px;
      border-radius: 999px;
      overflow: hidden;
      position: relative;
      border: 4px solid #ffffff;
      background: #ffffff;
      box-shadow: 0 0 0 1px rgba(0,84,61,0.16), 0 14px 30px rgba(0,84,61,0.10);
      transition: transform 0.28s ease, box-shadow 0.28s ease;
    }

    .featured-showcase-circle::after {
      content: none;
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(0,0,0,0.10) 100%);
      pointer-events: none;
    }

    .featured-showcase-card:hover .featured-showcase-circle {
      transform: translateY(-4px);
      box-shadow: 0 0 0 2px #29E681, 0 18px 34px rgba(0,84,61,0.16);
    }

    .featured-showcase-circle img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transform: scale(1.08);
    }

    .featured-showcase-name {
      display: inline-block;
      width: fit-content;
      padding: 6px 12px;
      border-radius: 999px;
      background: rgba(0,84,61,0.88);
      color: #ffffff;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.03em;
      box-shadow: var(--shadow-soft);
      text-align: center;
      line-height: 1;
      max-width: 112px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .featured-showcase-subname {
      display: none;
      color: var(--text-soft);
      font-size: 11px;
      text-align: center;
      line-height: 1.5;
      margin-top: -6px;
      max-width: 118px;
    }

    .featured-showcase-dots {
      display: none;
      justify-content: center;
      align-items: center;
      gap: 10px;
      margin-top: 18px;
      position: relative;
      z-index: 1;
      flex-wrap: wrap;
    }

    .featured-showcase-dot {
      width: 10px;
      height: 10px;
      border-radius: 999px;
      border: none;
      background: rgba(0,84,61,0.22);
      cursor: pointer;
      transition: transform 0.22s ease, background 0.22s ease, width 0.22s ease;
      padding: 0;
    }

    .featured-showcase-dot.active {
      width: 28px;
      background: var(--green);
    }


    @media (max-width: 768px) {
      .featured-showcase-section {
        margin-top: 18px;
        padding: 0 18px;
      }

      .featured-showcase-shell {
        padding: 0;
        border-radius: 0;
      }

      .featured-showcase-shell::after {
        margin-top: 20px;
      }

      .featured-showcase-track {
        gap: 22px;
      }

      .featured-showcase-title {
        font-size: 30px;
      }

      .featured-showcase-actions {
        width: 100%;
        justify-content: flex-start;
      }

      .featured-showcase-card {
        flex: 0 0 92px;
      }

      .featured-showcase-circle {
        width: 92px;
        height: 92px;
      }

      .featured-showcase-arrow {
        width: 38px;
        height: 38px;
        font-size: 20px;
      }

      .featured-showcase-dot.active {
        width: 22px;
      }
    }



    .store-main-layout {
      max-width: var(--container);
      margin: 0 auto;
      padding: 34px 22px 70px;
      display: grid;
      grid-template-columns: 280px minmax(0, 1fr);
      gap: 24px;
      align-items: start;
    }

    .store-main-layout .container {
      max-width: none;
      margin: 0;
      padding: 0;
      min-width: 0;
    }

    .side-filters {
      position: sticky;
      top: 112px;
      border: 1px solid rgba(0,84,61,0.10);
      border-radius: 28px;
      background: linear-gradient(180deg, #ffffff 0%, #f8fcfa 100%);
      box-shadow: var(--shadow-soft);
      padding: 20px;
      display: grid;
      gap: 14px;
      z-index: 20;
    }

    .side-filters-kicker {
      display: inline-flex;
      width: fit-content;
      padding: 8px 12px;
      border-radius: 999px;
      background: rgba(0,84,61,0.08);
      color: var(--green);
      font-size: 11px;
      font-weight: 900;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .side-filters-title {
      color: var(--green);
      font-size: 26px;
      line-height: 1;
      font-weight: 900;
      letter-spacing: -0.05em;
    }

    .side-filters-text {
      color: var(--text-soft);
      font-size: 13px;
      line-height: 1.6;
    }

    .side-filter-item {
      display: grid;
      gap: 7px;
    }

    .side-filter-label {
      color: var(--text-soft);
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      font-weight: 900;
    }

    .side-filter-item input,
    .side-filter-item select {
      width: 100%;
      min-height: 46px;
      padding: 11px 12px;
      border: 1px solid var(--border);
      border-radius: 14px;
      background: #ffffff;
      color: var(--text);
      outline: none;
      font-size: 13px;
    }

    .side-filter-item input:focus,
    .side-filter-item select:focus {
      border-color: var(--green);
      box-shadow: 0 0 0 4px rgba(0,84,61,0.08);
    }

    .side-filters-actions {
      display: grid;
      gap: 10px;
    }

    .side-filter-btn {
      border: none;
      min-height: 44px;
      border-radius: 14px;
      padding: 10px 14px;
      font-size: 13px;
      font-weight: 900;
      cursor: pointer;
    }

    .side-filter-btn-primary {
      background: var(--green);
      color: #ffffff;
    }

    .side-filter-btn-secondary {
      background: var(--green-soft);
      color: var(--green);
      border: 1px solid rgba(0,84,61,0.10);
    }


    /* FILTROS MULTIPLOS PREMIUM */
    .multi-filter {
      position: relative;
    }

    .multi-filter-trigger {
      width: 100%;
      min-height: 46px;
      padding: 11px 42px 11px 12px;
      border: 1px solid var(--border);
      border-radius: 14px;
      background: #ffffff;
      color: var(--text);
      outline: none;
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      text-align: left;
      position: relative;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.9);
      transition: border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
    }

    .multi-filter-trigger::after {
      content: "⌄";
      position: absolute;
      right: 14px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--green);
      font-size: 16px;
      font-weight: 900;
    }

    .multi-filter.open .multi-filter-trigger {
      border-color: var(--green);
      box-shadow: 0 0 0 4px rgba(0,84,61,0.08);
      background: #ffffff;
    }

    .multi-filter.open .multi-filter-trigger::after {
      content: "⌃";
    }

    .multi-filter-panel {
      position: absolute;
      left: 0;
      right: 0;
      top: calc(100% + 8px);
      z-index: 80;
      display: none;
      max-height: 260px;
      overflow-y: auto;
      padding: 10px;
      border: 1px solid rgba(0,84,61,0.12);
      border-radius: 18px;
      background: #ffffff;
      box-shadow: 0 22px 44px rgba(0,84,61,0.14);
    }

    .multi-filter.open .multi-filter-panel {
      display: grid;
      gap: 6px;
    }

    .multi-filter-option {
      width: 100%;
      border: none;
      background: #ffffff;
      color: var(--text);
      border-radius: 13px;
      padding: 10px 10px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 10px;
      text-align: left;
      font-size: 13px;
      line-height: 1.35;
      font-weight: 500;
      transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
    }

    .multi-filter-option:hover {
      background: var(--green-soft);
      color: var(--green);
      transform: translateX(2px);
    }

    .multi-filter-check {
      width: 16px;
      height: 16px;
      border-radius: 999px;
      border: 2px solid rgba(0,84,61,0.28);
      background: #ffffff;
      flex: 0 0 16px;
      position: relative;
    }

    .multi-filter-option.active .multi-filter-check {
      border-color: var(--green);
      background: var(--green);
      box-shadow: inset 0 0 0 4px #ffffff;
    }

    .multi-filter-option.active {
      color: var(--green);
      background: #f2faf6;
      font-weight: 600;
    }

    .multi-filter-actions {
      display: flex;
      justify-content: space-between;
      gap: 8px;
      padding-top: 8px;
      margin-top: 4px;
      border-top: 1px solid rgba(0,84,61,0.08);
    }

    .multi-filter-action {
      border: none;
      background: var(--green-soft);
      color: var(--green);
      border-radius: 999px;
      padding: 8px 10px;
      font-size: 11px;
      font-weight: 900;
      cursor: pointer;
    }

    .multi-filter-action .mfa-x { display: none; }
    /* 🔧 botao "Fechar" do filtro vira "x" em qualquer tela */
    .multi-filter-action[data-action="close"] .mfa-txt { display: none; }
    .multi-filter-action[data-action="close"] .mfa-x { display: inline-block; font-size: 16px; line-height: 1; }

    @media (max-width: 1180px) {
      .store-main-layout {
        grid-template-columns: 1fr;
        padding: 24px 22px 70px;
      }

      .side-filters {
        position: static;
      }
    }


    /* AREA DO CLIENTE COMPLETA */
    .client-menu-group {
      display: grid;
      gap: 8px;
      padding-top: 12px;
      border-top: 1px solid var(--border);
    }

    .client-menu-group:first-child {
      padding-top: 0;
      border-top: none;
    }

    .client-menu-group-title {
      color: var(--text-soft);
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      font-weight: 900;
      padding: 0 4px;
    }

    .client-menu-btn.is-subitem {
      padding-left: 28px;
      font-size: 13px;
      border-radius: 14px;
      background: #fbfdfc;
    }

    .client-doc-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 14px;
      /* Lista de largura cheia (padrão das outras seções da área do cliente):
         cards uniformes, sem vãos de grid, cada um com altura natural. */
    }

    .client-doc-head {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .client-doc-head .client-doc-icon {
      flex: 0 0 auto;
    }

    .client-doc-card {
      border: 1px solid rgba(0, 84, 61, 0.10);
      border-radius: 22px;
      padding: 20px;
      background: #ffffff;
      box-shadow: var(--shadow-soft);
      display: flex;
      flex-direction: column;
      gap: 10px;
      transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    }

    .client-doc-card:hover {
      border-color: rgba(0, 84, 61, 0.25);
      box-shadow: 0 16px 40px rgba(0, 84, 61, 0.10);
      transform: translateY(-2px);
    }

    .client-doc-icon {
      width: 46px;
      height: 46px;
      border-radius: 15px;
      background: linear-gradient(135deg, #00543D 0%, #0b7a58 100%);
      border: none;
      color: #eafff4;
      box-shadow: 0 8px 18px rgba(0, 84, 61, 0.22);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      font-weight: 900;
    }

    .client-doc-icon svg {
      width: 22px;
      height: 22px;
      display: block;
      stroke: #eafff4;
      stroke-width: 1.6;
      stroke-linecap: round;
      stroke-linejoin: round;
      fill: none;
    }

    .client-doc-title {
      color: var(--green);
      font-size: 17px;
      font-weight: 900;
      letter-spacing: -0.02em;
      line-height: 1.25;
    }

    .client-doc-text {
      color: var(--text-soft);
      font-size: 13px;
      line-height: 1.6;
      max-width: 78ch;
    }

    .client-doc-info {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 16px;
      height: 16px;
      margin-left: 7px;
      vertical-align: middle;
      border-radius: 50%;
      border: 1.5px solid currentColor;
      color: var(--green);
      opacity: .5;
      font-size: 11px;
      font-weight: 700;
      font-style: italic;
      line-height: 1;
      font-family: Georgia, "Times New Roman", serif;
      cursor: help;
      position: relative;
      flex: 0 0 auto;
      -webkit-tap-highlight-color: transparent;
      transition: opacity .15s ease;
    }
    .client-doc-info::before { content: "i"; }
    .client-doc-info:hover,
    .client-doc-info:focus { opacity: 1; outline: none; }
    .client-doc-info-bubble {
      position: absolute;
      bottom: calc(100% + 9px);
      left: 50%;
      transform: translateX(-50%) translateY(4px);
      width: max-content;
      max-width: 230px;
      background: #0F4D26;
      color: #fff;
      padding: 9px 12px;
      border-radius: 10px;
      font-size: 12.5px;
      font-weight: 500;
      font-style: normal;
      line-height: 1.45;
      text-align: left;
      white-space: normal;
      box-shadow: 0 8px 22px rgba(15,77,38,.22);
      opacity: 0;
      visibility: hidden;
      transition: opacity .16s ease, transform .16s ease;
      z-index: 60;
      pointer-events: none;
    }
    .client-doc-info-bubble::after {
      content: "";
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translateX(-50%);
      border: 6px solid transparent;
      border-top-color: #0F4D26;
    }
    .client-doc-info:hover .client-doc-info-bubble,
    .client-doc-info:focus .client-doc-info-bubble {
      opacity: 1;
      visibility: visible;
      transform: translateX(-50%) translateY(0);
    }

    .client-doc-status {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      width: fit-content;
      border-radius: 999px;
      padding: 7px 13px;
      background: #f3f7f5;
      color: var(--green);
      font-size: 10.5px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.07em;
    }

    .client-doc-status::before {
      content: "";
      width: 6px;
      height: 6px;
      border-radius: 999px;
      background: currentColor;
      flex: 0 0 auto;
    }

    /* Variantes de status dos documentos — mesma linguagem de pills do resto da área do cliente */
    .client-doc-status.is-aprovado { background: rgba(41,230,129,0.14); color: #0b6a4d; border: 1px solid rgba(41,230,129,0.45); }
    .client-doc-status.is-rejeitado { background: #fdecec; color: #b91c1c; border: 1px solid #f3caca; }
    .client-doc-status.is-atencao { background: #fdf6e2; color: #8a6d1a; border: 1px solid #efe0b0; }
    .client-doc-status.is-analise { background: #eaf3f0; color: var(--green); border: 1px solid rgba(0,84,61,0.16); }

    .client-doc-motivo {
      padding: 12px 14px;
      background: #fdf6e2;
      border: 1px solid #efe0b0;
      border-radius: 16px;
      color: #8a6d1a;
      font-size: 12.5px;
      line-height: 1.55;
    }
    .client-doc-motivo a { color: inherit; font-weight: 700; }

    .client-receita-item {
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 12px 14px;
      margin-bottom: 8px;
      background: #fbfdfc;
    }

    .client-receita-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      border-radius: 999px;
      padding: 4px 11px;
      font-size: 10px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.07em;
      border: 1px solid transparent;
    }
    .client-receita-badge::before {
      content: "";
      width: 5px;
      height: 5px;
      border-radius: 999px;
      background: currentColor;
      flex: 0 0 auto;
    }
    .client-receita-badge.is-aprovado { background: rgba(41,230,129,0.14); color: #0b6a4d; border-color: rgba(41,230,129,0.45); }
    .client-receita-badge.is-rejeitado { background: #fdecec; color: #b91c1c; border-color: #f3caca; }
    .client-receita-badge.is-atencao { background: #fdf6e2; color: #8a6d1a; border-color: #efe0b0; }
    .client-receita-badge.is-analise { background: #eaf3f0; color: var(--green); border-color: rgba(0,84,61,0.16); }

    .client-receita-aviso { margin-top: 4px; font-size: 0.8em; color: #8a6d1a; }



    .client-doc-upload-area {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 10px;
      margin-top: 4px;
      padding-top: 14px;
      border-top: 1px solid rgba(0, 84, 61, 0.08);
    }

    .client-doc-upload-area .client-doc-file-input {
      flex: 1 1 260px;
      width: auto;
    }

    .client-doc-upload-area .client-doc-upload-btn,
    .client-doc-upload-area .client-doc-sign-btn,
    .client-doc-upload-area .client-doc-saibamais-btn {
      flex: 0 0 auto;
      margin-top: 0;
      padding: 13px 22px;
    }

    .client-doc-upload-area .client-doc-upload-message,
    .client-doc-upload-area .client-doc-termos-aceite {
      flex-basis: 100%;
    }

    .client-doc-upload-area .client-doc-upload-message:empty {
      display: none;
    }

    .client-doc-file-input {
      width: 100%;
      padding: 14px;
      border: 1.5px dashed rgba(0, 84, 61, 0.22);
      border-radius: 16px;
      background: #fbfdfc;
      color: var(--text-soft);
      font-size: 13px;
      font-family: inherit;
      cursor: pointer;
      transition: border-color 0.2s ease, background 0.2s ease;
    }

    .client-doc-file-input:hover {
      border-color: var(--green);
      background: var(--green-soft);
    }

    .client-doc-file-input::file-selector-button {
      border: none;
      border-radius: 999px;
      padding: 9px 16px;
      margin-right: 12px;
      background: var(--green);
      color: #ffffff;
      font-weight: 800;
      font-size: 12px;
      font-family: inherit;
      cursor: pointer;
      transition: opacity 0.2s ease;
    }

    .client-doc-file-input::file-selector-button:hover {
      opacity: 0.88;
    }

    .client-doc-upload-btn {
      border: none;
      border-radius: 14px;
      padding: 12px 14px;
      background: linear-gradient(135deg, #00543D 0%, #0b7a58 100%);
      color: #ffffff;
      font-weight: 900;
      letter-spacing: 0.01em;
      cursor: pointer;
      font-size: 13px;
      transition: box-shadow 0.2s ease, transform 0.2s ease;
    }

    .client-doc-upload-btn:hover:not(:disabled) {
      box-shadow: 0 10px 22px rgba(0, 84, 61, 0.22);
      transform: translateY(-1px);
    }

    .client-doc-upload-btn:disabled {
      opacity: 0.6;
      cursor: not-allowed;
    }

    .client-doc-sign-btn {
      border: 1.5px solid var(--green);
      border-radius: 14px;
      padding: 12px 14px;
      background: #ffffff;
      color: var(--green);
      font-weight: 900;
      cursor: pointer;
      font-size: 13px;
      margin-top: 8px;
    }
    .client-doc-sign-btn:hover { background: rgba(0, 84, 61, 0.06); }
    .client-doc-sign-btn:disabled { opacity: 0.6; cursor: not-allowed; }

    .termo-sign-overlay {
      position: fixed; inset: 0; z-index: 100000;
      background: rgba(15, 77, 38, 0.45);
      display: none; align-items: center; justify-content: center;
      padding: 20px;
    }
    .termo-sign-overlay.ativo { display: flex; }
    .termo-sign-modal {
      position: relative; background: var(--off-white, #FDFAF2);
      border-radius: 18px; padding: 24px; max-width: 420px; width: 100%;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    }
    .termo-sign-close {
      position: absolute; top: 10px; right: 12px; border: none; background: transparent;
      font-size: 26px; line-height: 1; cursor: pointer; color: #0F4D26;
    }
    .termo-sign-title { font-weight: 900; font-size: 18px; color: #0F4D26; margin-bottom: 6px; }
    .termo-sign-text { font-size: 13px; color: #335; margin-bottom: 16px; }
    .termo-sign-options { display: flex; flex-direction: column; gap: 10px; }
    .termo-sign-option {
      border: 1.5px solid var(--green); border-radius: 14px; padding: 14px;
      background: #fff; color: var(--green); font-weight: 900; font-size: 14px; cursor: pointer;
    }
    .termo-sign-option:hover { background: var(--green); color: #fff; }
    .termo-sign-option:disabled { opacity: 0.6; cursor: not-allowed; }
    .termo-sign-message { margin-top: 14px; font-size: 12px; min-height: 16px; }
    .termo-sign-message.ok { color: #0b6a4d; }
    .termo-sign-message.erro { color: #b91c1c; }

    .video-anvisa-overlay {
      position: fixed; inset: 0; z-index: 100001;
      background: rgba(15, 77, 38, 0.55);
      display: none; align-items: center; justify-content: center; padding: 20px;
    }
    .video-anvisa-overlay.ativo { display: flex; }
    .video-anvisa-modal {
      position: relative; background: #000; border-radius: 16px;
      max-width: 880px; width: 100%; box-shadow: 0 20px 60px rgba(0,0,0,0.35); overflow: hidden;
    }
    .video-anvisa-close {
      position: absolute; top: 8px; right: 12px; z-index: 2; border: none;
      background: rgba(0,0,0,0.5); color: #fff; width: 34px; height: 34px;
      border-radius: 50%; font-size: 22px; line-height: 1; cursor: pointer;
    }
    .video-anvisa-modal video { display: block; width: 100%; height: auto; max-height: 80vh; background: #000; }
    .client-doc-saibamais-btn {
      border: 1.5px solid var(--green); border-radius: 14px; padding: 10px 12px;
      background: #fff; color: var(--green); font-weight: 900; font-size: 12px;
      cursor: pointer; width: fit-content;
    }
    .client-doc-saibamais-btn:hover { background: var(--green); color: #fff; }

    .box-alt-modal { max-width: 460px; max-height: 86vh; overflow-y: auto; }
    .box-alt-label { font-weight: 800; font-size: 12px; color: #0F4D26; margin: 12px 0 6px; }
    .box-alt-radio { display: block; font-size: 13px; color: #335; margin: 4px 0; cursor: pointer; }
    .box-alt-radio input { margin-right: 8px; }
    .box-alt-input { width: 100%; box-sizing: border-box; border: 1px solid #cfe3d7; border-radius: 10px; padding: 10px 12px; font-size: 13px; margin: 4px 0; }
    .box-alt-input:focus { outline: none; border-color: var(--green); }

    .client-doc-delete-btn {
      border: 1px solid rgba(185, 28, 28, 0.18);
      border-radius: 14px;
      padding: 10px 12px;
      background: #fff7f7;
      color: #b91c1c;
      font-weight: 900;
      cursor: pointer;
      font-size: 12px;
      width: fit-content;
    }

    .client-doc-delete-btn:disabled {
      opacity: 0.6;
      cursor: not-allowed;
    }

    .client-doc-saved-actions {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    .client-doc-saved-actions .client-doc-text {
      display: inline-flex;
      align-items: center;
      border: 1px solid rgba(0, 84, 61, 0.22);
      border-radius: 14px;
      padding: 10px 12px;
      background: #ffffff;
      color: var(--green);
      font-weight: 900;
      font-size: 12px;
      line-height: 1;
      text-decoration: none;
      transition: background 0.2s ease;
    }

    .client-doc-saved-actions .client-doc-text:hover {
      background: var(--green-soft);
    }

    .client-doc-upload-message {
      min-height: 18px;
      color: var(--text-soft);
      font-size: 12px;
      line-height: 1.5;
      font-weight: 700;
    }

    .client-doc-upload-message.success {
      color: var(--green);
    }

    .client-doc-upload-message.error {
      color: #b91c1c;
    }

    #clientAddressForm .client-grid-two {
      align-items: start;
    }

    #clientAddressForm .client-account-field {
      align-self: start;
    }

    .client-address-proof-card {
      align-self: start;
      padding: 14px;
      gap: 10px;
      min-height: auto;
    }

    .client-address-proof-card .client-doc-title {
      font-size: 16px;
      line-height: 1.25;
    }

    .client-address-proof-card .client-doc-upload-area {
      gap: 8px;
      margin-top: 0;
    }

    .client-address-proof-card .client-doc-file-input {
      padding: 9px 10px;
      min-height: 40px;
    }

    .client-address-proof-card .client-doc-upload-btn {
      padding: 11px 12px;
      min-height: 42px;
    }

    @media (max-width: 768px) {
      .client-doc-grid {
        grid-template-columns: 1fr;
      }
    }


    /* CARRINHO CLEAN + CHECKOUT COMPLETO */
    .cart-sidebar .cart-shipping-box,
    .cart-sidebar .coupon-section,
    .cart-sidebar .cart-summary,
    .cart-sidebar .cart-usage-box,
    .cart-sidebar #finishOrderButton {
      display: none !important;
    }

    .cart-sidebar .cart-footer { padding-top: 18px; }
    .cart-sidebar .cart-summary-secondary { font-size: 15px; color: var(--green); }
    .cart-sidebar .cart-progress-box { background: #ffffff; border-style: dashed; }
    .cart-sidebar .cart-actions { display: grid; grid-template-columns: 0.8fr 1.2fr; }
    .cart-sidebar .btn-whatsapp { background: var(--green); color: #ffffff; border: none; box-shadow: 0 16px 28px rgba(0,84,61,0.16); flex: 1; }

    .cart-item-clean { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .cart-item-clean .cart-item-mainline { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
    .cart-item-clean .cart-item-price-clean { color: var(--green); font-size: 14px; font-weight: 900; white-space: nowrap; text-align: right; }
    .cart-promo-missing { color: var(--text-soft); font-size: 12px; line-height: 1.5; background: #f8fbf9; border: 1px dashed var(--border); border-radius: 12px; padding: 9px 10px; font-weight: 700; }

    .checkout-page { position: fixed; inset: 0; background: #f7fbf9; z-index: 3200; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.25s ease, visibility 0.25s ease; overflow: hidden; }
    .checkout-page.active { opacity: 1; visibility: visible; pointer-events: auto; }
    .checkout-page-shell { display: flex; flex-direction: column; width: 100%; height: 100%; }
    .checkout-page-topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; border-bottom: 1px solid var(--border); background: rgba(255,255,255,0.96); backdrop-filter: blur(10px); }
    .checkout-page-title { color: var(--green); font-size: 30px; line-height: 1; font-weight: 900; letter-spacing: -0.05em; }
    .checkout-page-subtitle { color: var(--text-soft); font-size: 13px; line-height: 1.5; margin-top: 4px; }
    .checkout-page-body { flex: 1; min-height: 0; overflow-y: auto; padding: 24px; }
    .checkout-layout { max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 22px; align-items: start; }
    .checkout-card { background: #ffffff; border: 1px solid rgba(0,84,61,0.10); border-radius: 26px; box-shadow: var(--shadow-soft); padding: 24px; display: grid; gap: 16px; }
    .checkout-card-title { color: var(--green); font-size: 22px; font-weight: 900; letter-spacing: -0.04em; }
    .checkout-product-summary-panel { position: sticky; top: 24px; }
    .checkout-product-summary-panel:not(.active) { display: none !important; }
    .checkout-page:not([data-checkout-step="produtos"]):not([data-checkout-step="dados"]) .checkout-product-summary-panel { display: none !important; }
    .checkout-summary-title { color: var(--green); font-size: 22px; line-height: 1.15; font-weight: 900; letter-spacing: -0.04em; }
    .checkout-summary-muted { color: var(--text-soft); font-size: 13px; line-height: 1.5; font-weight: 700; }
    .checkout-product-coupon-pill { border: 1px dashed rgba(0,84,61,0.30); border-radius: 16px; padding: 13px 14px; color: var(--green); font-size: 16px; font-weight: 900; text-align: center; text-transform: uppercase; background: #ffffff; }
    .checkout-product-summary-lines { display: grid; gap: 12px; }
    .checkout-product-summary-line { display: flex; justify-content: space-between; gap: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--border); color: var(--text-soft); font-size: 14px; font-weight: 800; }
    .checkout-product-summary-line strong { color: var(--green); white-space: nowrap; }
    .checkout-product-summary-line.total { border-bottom: none; padding-top: 2px; padding-bottom: 0; color: var(--green); font-size: 22px; font-weight: 900; }
    .checkout-product-summary-line.total strong { font-size: 24px; }
    .checkout-items { display: grid; gap: 14px; }
    .checkout-item { display: flex; gap: 14px; border: 1px solid rgba(0,84,61,0.10); border-radius: 20px; padding: 14px; background: #ffffff; transition: border-color 0.2s ease, box-shadow 0.2s ease; }
    .checkout-item:hover { border-color: rgba(0,84,61,0.25); box-shadow: 0 12px 28px rgba(0,84,61,0.08); }
    .checkout-item img { width: 86px; height: 86px; object-fit: cover; border-radius: 16px; background: #eef2f7; flex-shrink: 0; }
    .checkout-item-info { flex: 1; min-width: 0; display: grid; gap: 6px; }
    .checkout-item-name { color: var(--green); font-size: 15px; font-weight: 900; line-height: 1.4; }
    .checkout-item-meta { color: var(--text-soft); font-size: 13px; line-height: 1.5; font-weight: 700; }
    .checkout-summary-row { display: flex; justify-content: space-between; gap: 12px; color: var(--text-soft); font-size: 14px; font-weight: 800; line-height: 1.5; }
    .checkout-summary-row strong { color: var(--green); }
    .checkout-summary-total { border-top: 1px solid rgba(0,84,61,0.10); padding-top: 16px; color: var(--green); font-size: 24px; font-weight: 900; letter-spacing: -0.03em; }
    .checkout-actions { display: grid; gap: 10px; }
    .checkout-action-btn { border: none; border-radius: 16px; padding: 15px; font-weight: 900; cursor: pointer; font-size: 15px; letter-spacing: 0.01em; transition: box-shadow 0.2s ease, transform 0.2s ease, background 0.2s ease; }
    .checkout-action-primary { background: linear-gradient(135deg, #00543D 0%, #0b7a58 100%); color: #ffffff; box-shadow: 0 16px 28px rgba(0,84,61,0.16); }
    .checkout-action-primary:hover:not(:disabled) { box-shadow: 0 20px 36px rgba(0,84,61,0.26); transform: translateY(-1px); }
    .checkout-action-secondary { background: var(--green-soft); color: var(--green); border: 1px solid rgba(0,84,61,0.10); }
    .checkout-action-secondary:hover:not(:disabled) { background: #e4f1ea; }
    .checkout-installments-box {
      border: 1px solid rgba(0, 84, 61, 0.10);
      border-radius: 18px;
      padding: 16px;
      background: #fbfdfc;
      display: none;
      gap: 8px;
      margin: 10px 0 0;
    }

    .checkout-installments-box.active {
      display: grid;
    }

    .checkout-installments-box label {
      color: var(--green);
      font-size: 13px;
      font-weight: 900;
    }

    .checkout-installments-box select {
      width: 100%;
      min-height: 46px;
      padding: 10px 12px;
      border: 1px solid var(--border);
      border-radius: 14px;
      background: #ffffff;
      color: var(--text);
      outline: none;
      font-size: 14px;
      font-weight: 800;
    }

    .checkout-installments-help {
      color: var(--text-soft);
      font-size: 12px;
      line-height: 1.5;
    }

    .checkout-payment-methods { display: grid; gap: 16px; margin-top: 8px; }
    .checkout-payment-methods h3 { margin: 0; color: var(--text); font-size: 18px; font-weight: 900; letter-spacing: -0.02em; }
    .checkout-payment-method-list { display: grid; gap: 0; overflow: hidden; border: 1px solid #dedede; border-radius: 8px; background: #fff; }
    .checkout-payment-method-option { min-height: 80px; display: flex; align-items: center; gap: 14px; padding: 12px 20px; border: 0; border-bottom: 1px solid #e7e7e7; border-radius: 0; background: #fff; cursor: pointer; transition: background .18s ease; }
    .checkout-payment-method-option:last-child { border-bottom: 0; }
    .checkout-payment-method-option:hover { background: #fafafa; }
    .checkout-payment-method-option:has(input:checked) { background: #fff; }
    .checkout-payment-method-option input { position: absolute; opacity: 0; pointer-events: none; }
    .checkout-payment-method-radio { width: 20px; height: 20px; border: 2px solid #b7c1bd; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; }
    .checkout-payment-method-radio::after { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--green); transform: scale(0); transition: transform .16s ease; }
    .checkout-payment-method-option input:checked + .checkout-payment-method-radio { border-color: var(--green); }
    .checkout-payment-method-option input:checked + .checkout-payment-method-radio::after { transform: scale(1); }
    .checkout-payment-method-option input:focus-visible + .checkout-payment-method-radio { outline: 3px solid rgba(0,84,61,.18); outline-offset: 3px; }
    .checkout-payment-method-icon { width: 48px; height: 48px; border: 1px solid #dedede; border-radius: 50%; display: grid; place-items: center; color: #1f2937; background: #fff; flex: 0 0 auto; }
    .checkout-payment-method-icon svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
    .checkout-payment-method-icon-pix svg { width: 27px; height: 27px; }
    .checkout-payment-method-copy { min-width: 0; display: grid; gap: 3px; }
    .checkout-payment-method-copy strong { color: var(--text); font-size: 15px; line-height: 1.3; font-weight: 900; }
    .checkout-payment-method-copy small { color: var(--text-soft); font-size: 12px; line-height: 1.35; font-weight: 700; }
    .checkout-payment-split-fields { border: 1px solid rgba(0,84,61,0.12); border-radius: 16px; padding: 16px; background: #fbfdfc; gap: 12px; }
    .checkout-payment-split-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .checkout-payment-split-field { display: grid; gap: 6px; }
    .checkout-payment-split-field label { color: var(--text-soft); font-size: 12px; font-weight: 900; }
    .checkout-payment-split-field input { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 14px; outline: none; }
    .checkout-payment-split-field input:focus { border-color: var(--green); box-shadow: 0 0 0 4px rgba(0,84,61,0.08); }
    .checkout-payment-step { color: var(--green); font-size: 13px; line-height: 1.5; font-weight: 900; }
    .checkout-payment-help { color: var(--text-soft); font-size: 12px; line-height: 1.5; font-weight: 700; }
    @media (max-width: 980px) { .checkout-layout { grid-template-columns: 1fr; } }
    @media (max-width: 560px) {
      .checkout-payment-method-option { min-height: 72px; padding: 10px 14px; gap: 11px; }
      .checkout-payment-method-icon { width: 42px; height: 42px; }
      .checkout-payment-split-grid { grid-template-columns: 1fr; }
    }


    /* JORNADA DO CHECKOUT - etapas do carrinho */
    .checkout-steps {
      max-width: var(--container);
      margin: 0 auto 18px;
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
    }

    .checkout-step-pill {
      border: 1px solid rgba(0, 84, 61, 0.12);
      border-radius: 999px;
      background: #ffffff;
      color: var(--text-soft);
      padding: 12px 13px;
      font-size: 11px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      text-align: center;
      cursor: pointer;
      transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
    }

    .checkout-step-pill:hover:not(.active) {
      border-color: var(--green);
      color: var(--green);
    }

    .checkout-step-pill.active {
      background: linear-gradient(135deg, #00543D 0%, #0b7a58 100%);
      color: #ffffff;
      border-color: transparent;
      box-shadow: 0 14px 28px rgba(0,84,61,0.22);
    }

    .checkout-step-section {
      display: none;
    }

    .checkout-step-section.active {
      display: grid;
      gap: 16px;
    }

    .checkout-step-actions {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      margin-top: 4px;
    }

    .checkout-customer-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }

    .checkout-customer-field {
      /* sem caixa-dentro-de-caixa: o INPUT é o único elemento com borda */
      border: none;
      border-radius: 0;
      background: transparent;
      padding: 0;
      display: grid;
      gap: 7px;
    }

    .checkout-customer-label {
      color: var(--text-soft);
      font-size: 11px;
      font-weight: 900;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .checkout-customer-value {
      color: var(--green);
      font-size: 15px;
      font-weight: 900;
      line-height: 1.5;
      overflow-wrap: anywhere;
    }

    .checkout-full-width {
      grid-column: 1 / -1;
    }

    /* AJUSTE PONTUAL: dados pessoais no visual clean do checkout */
    #checkoutStepDados.checkout-card {
      position: relative;
      min-height: 118px;
    }

    #checkoutStepDados .checkout-card-title {
      color: var(--green);
      font-size: 22px;
      font-weight: 900;
      letter-spacing: -0.04em;
      padding-right: 34px;
    }

    #checkoutStepDados .checkout-card-title::after {
      content: "✎";
      position: absolute;
      top: 22px;
      right: 22px;
      color: var(--text-soft);
      font-size: 13px;
      line-height: 1;
    }

    #checkoutCustomerData.checkout-customer-grid {
      display: block;
      color: var(--text);
      font-size: 13px;
      font-weight: 400;
      line-height: 1.55;
    }

    #checkoutCustomerData .checkout-customer-clean-line {
      margin: 0;
      color: var(--text);
      overflow-wrap: anywhere;
    }

    #checkoutCustomerData .checkout-customer-data-list {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px 16px;
      margin-top: 4px;
      /* caixa ÚNICA agrupando os campos (padrão das outras caixas do checkout) */
      border: 1px solid rgba(0, 84, 61, 0.10);
      border-radius: 18px;
      background: #fbfdfc;
      padding: 18px;
    }

    #checkoutCustomerData .checkout-customer-input {
      background: #ffffff;
    }

    #checkoutCustomerData .checkout-documents-section {
      margin-top: 22px;
      padding-top: 18px;
      border-top: 1px solid rgba(0, 84, 61, 0.08);
    }

    #checkoutCustomerData .checkout-documents-title {
      color: var(--green);
      font-size: 11px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      margin-bottom: 12px;
    }

    #checkoutCustomerData .checkout-documents-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 10px;
    }

    #checkoutCustomerData .client-doc-card {
      box-shadow: none;
      padding: 14px 16px;
      gap: 8px;
    }

    /* No checkout os cards de documento ficam COMPACTOS: sem a descrição longa
       (as instruções completas vivem na área do cliente) e com ícone menor. */
    #checkoutCustomerData .client-doc-text {
      display: none;
    }

    #checkoutCustomerData .client-doc-icon {
      width: 34px;
      height: 34px;
      border-radius: 11px;
      box-shadow: none;
    }

    #checkoutCustomerData .client-doc-icon svg {
      width: 17px;
      height: 17px;
    }

    #checkoutCustomerData .client-doc-title {
      font-size: 14px;
    }

    #checkoutCustomerData .client-doc-upload-area {
      margin-top: 2px;
      padding-top: 10px;
    }

    @media (max-width: 980px) {
      #checkoutCustomerData .checkout-customer-data-list,
      #checkoutCustomerData .checkout-documents-grid {
        grid-template-columns: 1fr;
      }
    }

    /* AJUSTE PONTUAL: segunda etapa com dados pessoais e entrega juntos */
    .checkout-page[data-checkout-step="dados"] .checkout-layout {
      grid-template-columns: minmax(0, 1fr) 420px;
      align-items: start;
    }

    .checkout-page[data-checkout-step="dados"] #checkoutStepDados,
    .checkout-page[data-checkout-step="dados"] #checkoutStepCep {
      grid-column: 1;
    }

    /* ⚠️ (26/06, pedido do dono): "Entrega e frete" (CEP+número) vai PRA CIMA, acima de Dados
       pessoais. Só troca os grid-row — desktop pela regra explícita; no mobile o Cep vira auto
       (row1) e o Dados fica explícito em row2, então o Cep também sobe. */
    .checkout-page[data-checkout-step="dados"] #checkoutStepDados {
      grid-row: 2;
    }

    .checkout-page[data-checkout-step="dados"] #checkoutStepCep {
      grid-row: 1;
    }

    .checkout-page[data-checkout-step="dados"] #checkoutStepDados .checkout-step-actions {
      display: none !important;
    }

    .checkout-page[data-checkout-step="dados"] #checkoutProductSummaryPanel {
      grid-column: 2;
      grid-row: 1 / span 2;
      position: sticky;
      top: 24px;
    }

    @media (max-width: 980px) {
      .checkout-page[data-checkout-step="dados"] .checkout-layout {
        grid-template-columns: 1fr;
      }

      .checkout-page[data-checkout-step="produtos"] #checkoutStepProdutos,
      .checkout-page[data-checkout-step="produtos"] #checkoutStepDados,
      .checkout-page[data-checkout-step="dados"] #checkoutStepCep,
      .checkout-page[data-checkout-step="produtos"] #checkoutProductSummaryPanel {
        grid-column: 1;
        grid-row: auto;
      }
    }

    @media (max-width: 768px) {
      .checkout-steps,
      .checkout-customer-grid {
        grid-template-columns: 1fr;
      }
    }


    /* CORRECAO DA AREA DO CLIENTE: CAIXAS DENTRO DO MENU */
    .client-page-body,
    .client-page-menu,
    .client-menu-card,
    .client-menu-nav,
    .client-menu-group,
    .client-menu-user {
      min-width: 0;
      max-width: 100%;
      overflow-x: hidden;
    }

    .client-page-menu {
      width: 100%;
      box-sizing: border-box;
    }

    .client-menu-card {
      width: 100%;
      box-sizing: border-box;
    }

    .client-menu-btn {
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
      white-space: normal;
      overflow-wrap: anywhere;
      word-break: normal;
    }

    .client-menu-user-name,
    .client-menu-user-email {
      max-width: 100%;
      overflow-wrap: anywhere;
      word-break: break-word;
    }

    .client-menu-btn.is-subitem {
      padding-left: 20px;
    }

    @media (max-width: 1180px) {
      .client-page-menu {
        width: 100%;
        padding: 18px;
      }
    }

    @media (max-width: 520px) {
      .client-page-menu {
        padding: 14px;
      }

      .client-menu-card {
        padding: 14px;
        border-radius: 22px;
      }

      .client-menu-btn {
        padding: 13px 14px;
        border-radius: 16px;
        font-size: 14px;
      }

      .client-menu-btn.is-subitem {
        padding-left: 16px;
        font-size: 13px;
      }
    }


    /* CARRINHO NA IMAGEM DO PRODUTO */
    .image-cart-toggle-btn {
      position: absolute;
      top: 14px;
      right: 14px;
      z-index: 6;
      width: 44px;
      height: 44px;
      border: 1px solid rgba(0,84,61,0.10);
      border-radius: 999px;
      background: rgba(255,255,255,0.92);
      color: var(--green);
      cursor: pointer;
      font-size: 17px;
      font-weight: 900;
      line-height: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 12px 24px rgba(0,84,61,0.10);
      backdrop-filter: blur(10px);
      transition: transform 0.22s ease, color 0.22s ease, background 0.22s ease, box-shadow 0.22s ease;
    }

    .image-cart-toggle-btn:hover,
    .imagem-wrap.cart-panel-open .image-cart-toggle-btn {
      transform: translateY(-2px) scale(1.04);
      background: #ffffff;
      color: var(--green);
      box-shadow: 0 18px 30px rgba(0,84,61,0.14);
    }

    .image-cart-panel {
      position: absolute;
      inset: 0;
      z-index: 5;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 18px;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity 0.22s ease, visibility 0.22s ease;
    }

    .imagem-wrap.cart-panel-open .image-cart-panel {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }

    .imagem-wrap.cart-panel-open > img {
      filter: blur(3px) brightness(0.72);
      transform: scale(1.03);
      transition: filter 0.22s ease, transform 0.22s ease;
    }

    .image-cart-box {
      width: min(100%, 138px);
      display: grid;
      gap: 5px;
      padding: 0;
      border-radius: 6px;
      background: transparent;
      border: none;
      box-shadow: none;
      backdrop-filter: none;
      text-align: center;
    }

    .image-cart-qty-control {
      height: 40px;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      align-items: center;
      border: 1px solid #00543d;
      border-radius: 5px;
      background: rgba(255,255,255,0.94);
      overflow: hidden;
    }

    .image-cart-qty-btn {
      height: 100%;
      border: none;
      background: transparent;
      color: #00543d;
      font-size: 22px;
      font-weight: 300;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .image-cart-qty-btn:disabled {
      color: #b8c9c3;
      cursor: not-allowed;
    }

    .image-cart-qty-value {
      color: #00543d;
      font-size: 16px;
      font-weight: 700;
      line-height: 1;
      text-align: center;
    }

    .image-cart-add-btn {
      border: none;
      border-radius: 5px;
      padding: 10px 10px;
      min-height: 40px;
      background: #00543d;
      color: #ffffff;
      font-size: 14px;
      font-weight: 800;
      cursor: pointer;
      box-shadow: none;
    }

    .image-cart-add-btn:hover {
      transform: translateY(-1px);
    }

    .imagem-wrap.product-image-clickable {
      cursor: pointer;
    }

    @media (max-width: 768px) {
      .image-cart-toggle-btn {
        width: 34px !important;
        height: 34px !important;
        font-size: 14px !important;
        top: 12px !important;
        right: 12px !important;
      }

      .image-cart-box {
        width: min(100%, 180px);
        padding: 12px;
      }

      .image-cart-add-btn {
        font-size: 12px;
        padding: 11px 12px;
      }
    }

    .favorite-btn {
      position: absolute;
      top: 14px;
      right: 14px;
      z-index: 5;
      width: 44px;
      height: 44px;
      border: 1px solid rgba(0,84,61,0.10);
      border-radius: 999px;
      background: rgba(255,255,255,0.92);
      color: rgba(15,23,42,0.32);
      cursor: pointer;
      font-size: 24px;
      font-weight: 900;
      line-height: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 12px 24px rgba(0,84,61,0.10);
      backdrop-filter: blur(10px);
      transition: transform 0.22s ease, color 0.22s ease, background 0.22s ease, box-shadow 0.22s ease;
    }

    .favorite-btn:hover {
      transform: translateY(-2px) scale(1.04);
      background: #ffffff;
      color: #e11d48;
      box-shadow: 0 18px 30px rgba(0,84,61,0.14);
    }

    .favorite-btn.active {
      color: #e11d48;
      background: #ffffff;
    }

    .favorites-client-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 16px;
      margin-top: 16px;
    }

    .favorite-client-card {
      border: 1px solid var(--border);
      border-radius: 22px;
      padding: 14px;
      background: #ffffff;
      box-shadow: var(--shadow-soft);
      display: grid;
      grid-template-columns: 74px minmax(0, 1fr);
      gap: 14px;
      align-items: center;
    }

    .favorite-client-card img {
      width: 74px;
      height: 74px;
      border-radius: 16px;
      object-fit: cover;
      background: #eef2f7;
    }

    .favorite-client-info {
      min-width: 0;
      display: grid;
      gap: 6px;
    }

    .favorite-client-name {
      color: var(--green);
      font-size: 15px;
      font-weight: 900;
      line-height: 1.35;
    }

    .favorite-client-meta {
      color: var(--text-soft);
      font-size: 12px;
      line-height: 1.5;
      font-weight: 700;
    }

    .favorite-client-actions {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-top: 4px;
    }

    .favorite-client-btn {
      border: none;
      border-radius: 12px;
      padding: 9px 11px;
      font-size: 12px;
      font-weight: 900;
      cursor: pointer;
      background: var(--green-soft);
      color: var(--green);
    }

    .favorite-client-btn.primary {
      background: var(--green);
      color: #ffffff;
    }

    @media (max-width: 768px) {
      .favorites-client-grid {
        grid-template-columns: 1fr;
      }
    }


    /* AJUSTES SOLICITADOS - produto e checkout */
    .modal-hero-stats {
      display: none !important;
    }

    .modal-image-panel {
      background: #ffffff !important;
    }

    .modal-image-panel img {
      mix-blend-mode: normal !important;
      opacity: 1 !important;
      object-fit: contain !important;
      background: #ffffff !important;
    }

    .modal-image-gradient {
      display: none !important;
    }

    .card .produto-estimativa {
      display: none !important;
    }

    .card .acoes {
      grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
      gap: 10px;
    }

    .card .acoes .btn {
      padding: 10px 12px;
      border-radius: 16px;
      font-size: 13px;
      min-height: 56px;
    }

    .card .acoes .btn-primary {
      min-height: 58px;
      max-height: 64px;
      line-height: 1.2;
    }

    .card .btn-detail-premium {
      min-height: 58px;
      padding: 10px 12px;
    }

    .card .btn-detail-label {
      font-size: 12px;
    }

    .card .btn-detail-sub {
      font-size: 10px;
    }

    .card .btn-detail-icon {
      width: 34px;
      height: 34px;
      font-size: 16px;
    }

    @media (max-width: 768px) {
      .card .acoes {
        grid-template-columns: 1fr;
      }
    }

    /* AJUSTE 5 PRODUTOS POR LINHA - sem cortar imagem, texto e botoes */
    .grid {
      grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
      gap: 12px !important;
      align-items: start !important;
    }

    .card {
      border-radius: 22px;
      min-width: 0;
    }

    .imagem-wrap {
      height: 170px !important;
    }

    .imagem-wrap img {
      object-fit: contain !important;
      background: #f6faf8;
    }

    .card-body {
      padding: 10px !important;
      gap: 7px !important;
    }

    .produto-nome {
      font-size: 14px !important;
      line-height: 1.12 !important;
      font-weight: 500 !important;
      min-height: calc(14px * 1.12 * 2) !important;
      max-height: calc(14px * 1.12 * 2) !important;
      letter-spacing: -0.04em !important;
      overflow-wrap: anywhere;
      word-break: normal;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .produto-nome.produto-nome-clickable {
      cursor: pointer;
      transition: color 0.18s ease, text-decoration-color 0.18s ease;
    }

    .produto-nome.produto-nome-clickable:hover {
      text-decoration: underline;
      text-underline-offset: 3px;
    }

    /* 💰 (22/07) preços da vitrine UNIFICADOS: preço fechado (R$ 450,00) e preço
       por grama (R$ 70,00/g) com o MESMO tamanho/peso/cor, todos centralizados —
       antes o fechado ficava 20px à esquerda e o /g 22px no centro (desalinhado). */
    .produto-preco {
      font-size: 22px !important;
      line-height: 1.05 !important;
      font-weight: 900 !important;
      color: var(--green) !important;
      text-align: center !important;
      letter-spacing: -0.05em !important;
    }

    .produto-preco-original-row {
      display: flex;
      align-items: center;
      gap: 7px;
      flex-wrap: wrap;
      margin-bottom: 3px;
    }

    .produto-preco-original-riscado {
      color: #7a8a84;
      font-size: 13px;
      line-height: 1;
      text-decoration: line-through;
      font-weight: 700;
      letter-spacing: -0.03em;
    }

    .produto-desconto-inline {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: fit-content;
      padding: 4px 7px;
      border-radius: 999px;
      background: var(--green-soft);
      color: var(--green);
      font-size: 10px;
      font-weight: 900;
      line-height: 1;
      white-space: nowrap;
    }

    .produto-preco-final {
      display: block;
      color: var(--green);
      font-size: 24px;
      line-height: 0.98;
      font-weight: 900;
      letter-spacing: -0.06em;
    }

    .produto-cupom {
      font-size: 10px !important;
      padding: 5px 8px !important;
    }

    .card .acoes {
      grid-template-columns: 1fr !important;
      gap: 6px !important;
    }

    .card .acoes .btn,
    .card .btn-detail-premium {
      min-height: 40px !important;
      max-height: none !important;
      padding: 8px 9px !important;
      border-radius: 12px !important;
      font-size: 11px !important;
    }

    .card .btn-detail-label {
      font-size: 11px !important;
    }

    .card .btn-detail-sub {
      font-size: 9px !important;
    }

    .card .btn-detail-icon {
      width: 26px !important;
      height: 26px !important;
      font-size: 12px !important;
    }

    .favorite-btn {
      width: 34px !important;
      height: 34px !important;
      font-size: 19px !important;
      top: 12px !important;
      right: 12px !important;
    }

    .card-badge {
      font-size: 9px !important;
      padding: 5px 8px !important;
    }

    @media (max-width: 1180px) {
      .grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
      }
    }

    @media (max-width: 768px) {
      .grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      }

      .imagem-wrap {
        height: 165px !important;
      }
    }



    .load-more-btn {
      min-width: 190px !important;
      background: var(--green) !important;
      color: #ffffff !important;
      border-color: var(--green) !important;
      box-shadow: 0 14px 24px rgba(0,84,61,0.14) !important;
    }

    @media (max-width: 520px) {
      .grid {
        grid-template-columns: 1fr !important;
      }

      .imagem-wrap {
        height: 220px !important;
      }
    }



    .login-link-button {
      border: none !important;
      background: transparent !important;
      color: var(--green) !important;
      padding: 4px 0 !important;
      border-radius: 0 !important;
      font-size: 13px !important;
      font-weight: 900 !important;
      cursor: pointer;
      text-decoration: underline;
      text-underline-offset: 4px;
      box-shadow: none !important;
    }

    .login-success-message {
      color: var(--green);
      font-size: 14px;
      line-height: 1.6;
      font-weight: 800;
      min-height: 20px;
    }


  

    /* Form do CLIENTE e controlado por JS (so produto da receita). Aqui escondemos SO o de ESPECIALISTAS (cliente nao posta). */
    .product-reviews-section #reviewTabEspecialistas:not(.especialista-logado) .review-form {
      display: none !important;
    }


    /* CORRECAO: manter texto visivel nos submenus da area do cliente */
    .client-menu-btn.is-subitem.active,
    .client-menu-btn.is-subitem.active:hover {
      background: #ffffff !important;
      color: var(--green) !important;
      border-color: var(--green) !important;
      box-shadow: none !important;
      font-weight: 900 !important;
    }

    .client-menu-btn.is-subitem:hover {
      color: var(--green) !important;
    }


    /* AJUSTE FINAL MOBILE ONLY - nao altera desktop nem estrutura */
    @media (max-width: 768px) {
      html,
      body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
      }

      body {
        font-size: 14px;
      }

      header {
        position: sticky;
        top: 0;
      }

      .top-strip-track span {
        font-size: 10px;
        letter-spacing: 0.12em;
        padding-right: 28px;
      }

      .header-inner {
        padding: 12px 14px;
        gap: 10px;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
      }

      .brand {
        min-width: 0;
        gap: 10px;
      }

      .brand-mark {
        width: 42px;
        height: 42px;
        border-radius: 14px;
      }

      .brand-copy {
        min-width: 0;
      }

      .brand-copy h1 {
        font-size: 20px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .header-actions {
        width: auto;
        justify-content: flex-end;
        gap: 7px;
        flex-wrap: nowrap;
      }

      .header-search {
        grid-column: 1 / -1;
        order: initial;
        width: 100%;
        min-width: 0;
        max-width: none;
      }

      .header-search input {
        min-height: 46px;
        border-radius: 14px;
        font-size: 13px;
        padding-top: 12px;
        padding-bottom: 12px;
      }

      .filters-dropdown-trigger,
      .cart-button,
      .client-button {
        min-height: 42px;
        height: 42px;
        border-radius: 14px;
      }

      .filters-dropdown-trigger {
        width: 42px;
        min-width: 42px;
      }

      .hamburger-icon {
        width: 19px;
        gap: 4px;
      }

      .hamburger-icon span {
        height: 2px;
      }

      .client-button,
      .cart-button {
        width: auto;
        padding: 0 12px;
        font-size: 12px;
        gap: 7px;
        justify-content: center;
      }

      #languageToggleButton {
        padding: 0 10px !important;
      }

      .cart-count {
        min-width: 20px;
        height: 20px;
        padding: 0 6px;
      }

      .filters-dropdown-panel {
        position: fixed;
        top: 108px;
        left: 12px;
        right: 12px;
        width: auto;
        max-width: none;
        border-radius: 20px;
        max-height: calc(100vh - 126px);
        overflow-y: auto;
      }

      .filters-dropdown-institutional-links {
        grid-template-columns: 1fr;
      }

      .hero {
        margin-top: 14px;
        padding: 0 14px;
      }

      .hero-carousel-premium {
        height: auto;
        aspect-ratio: 1 / 1;
        border-radius: 24px;
      }

      .hero-carousel-slide img {
        object-fit: cover;
      }

      .hero-carousel-arrow {
        width: 36px;
        height: 36px;
        font-size: 24px;
      }

      .hero-carousel-arrow-prev {
        left: 10px;
      }

      .hero-carousel-arrow-next {
        right: 10px;
      }

      .hero-carousel-dots {
        bottom: 10px;
        padding: 7px 10px;
      }

      .featured-showcase-section,
      .store-main-layout {
        padding-left: 14px;
        padding-right: 14px;
      }

      .featured-showcase-shell {
        padding: 16px;
        border-radius: 24px;
      }

      .featured-showcase-head {
        margin-bottom: 16px;
      }

      .featured-showcase-title {
        font-size: 26px;
        line-height: 1;
      }

      .featured-showcase-text {
        font-size: 13px;
      }

      .featured-showcase-carousel {
        padding: 4px 44px 2px;
      }

      .featured-showcase-card {
        flex-basis: 86px;
      }

      .featured-showcase-circle {
        width: 86px;
        height: 86px;
      }

      .featured-showcase-name {
        font-size: 9px;
        padding: 5px 10px;
        max-width: 96px;
      }

      .featured-showcase-subname {
        max-width: 86px;
        font-size: 10px;
      }

      .store-main-layout {
        padding-top: 20px;
        padding-bottom: 48px;
        gap: 18px;
      }

      .side-filters {
        padding: 16px;
        border-radius: 22px;
        gap: 12px;
      }

      .side-filters-kicker {
        font-size: 10px;
      }

      .side-filter-item input,
      .side-filter-item select,
      .multi-filter-trigger {
        min-height: 44px;
        border-radius: 13px;
        font-size: 13px;
      }

      .multi-filter-panel {
        position: fixed;
        left: 14px;
        right: 14px;
        top: 50%;
        transform: translateY(-50%);
        max-height: min(420px, calc(100vh - 90px));
        z-index: 4000;
      }

      .section-head {
        gap: 10px;
        margin-bottom: 16px;
      }

      .section-title {
        font-size: 32px;
        line-height: 1;
      }

      .section-caption,
      .status {
        font-size: 13px;
        line-height: 1.6;
      }

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

      .card {
        border-radius: 18px;
      }

      .imagem-wrap {
        height: 150px !important;
      }

      .card-body {
        padding: 9px !important;
        gap: 6px !important;
      }

      .produto-nome {
        font-size: 13px !important;
        line-height: 1.15 !important;
      }

      .produto-preco {
        font-size: 17px !important;
      }

      .produto-cupom {
        font-size: 9px !important;
        padding: 4px 7px !important;
      }

      .card .acoes .btn,
      .card .btn-detail-premium {
        min-height: 38px !important;
        padding: 8px !important;
        font-size: 10px !important;
      }

      .card .btn-detail-label {
        font-size: 10px !important;
      }

      .card .btn-detail-sub {
        display: none !important;
      }

      .card .btn-detail-icon {
        width: 24px !important;
        height: 24px !important;
      }

      .favorite-btn {
        width: 32px !important;
        height: 32px !important;
        top: 9px !important;
        right: 9px !important;
      }

      .card-top-badges {
        top: 9px;
        left: 9px;
        right: 46px;
      }

      .card-badge {
        font-size: 8px !important;
        padding: 4px 6px !important;
      }

      .pagination {
        margin-top: 28px;
      }

      .page-btn,
      .load-more-btn {
        min-height: 42px;
      }

      .cart-sidebar {
        right: -100%;
        max-width: none;
        width: 100%;
      }

      .cart-header {
        padding: 16px 14px;
      }

      .cart-header h2 {
        font-size: 24px;
      }

      .cart-items {
        padding: 14px;
      }

      .cart-item,
      .checkout-item {
        gap: 10px;
        padding: 12px;
        border-radius: 18px;
      }

      .cart-item img,
      .checkout-item img {
        width: 68px;
        height: 68px;
        border-radius: 14px;
      }

      .cart-actions,
      .cart-sidebar .cart-actions {
        grid-template-columns: 1fr;
      }

      .cart-footer {
        padding: 16px 14px 22px;
      }

      .product-modal {
        inset: 0;
        width: 100%;
        height: 100%;
        max-height: none;
        border-radius: 0;
        transform: translateY(12px);
        grid-template-columns: 1fr;
        grid-template-rows: auto minmax(0, 1fr); /* conteudo rola; imagem fica no topo */
      }

      .product-modal.active {
        transform: translateY(0);
      }

      .modal-image-panel {
        min-height: 220px;
        max-height: 280px;
      }

      .modal-content {
        padding: 18px 14px 24px;
      }

      .modal-top {
        margin-bottom: 16px;
      }

      .modal-title {
        font-size: 30px;
        line-height: 1;
      }

      .modal-subtitle {
        font-size: 13px;
      }

      .modal-price-card {
        padding: 16px;
        border-radius: 22px;
        gap: 12px;
      }

      .modal-price {
        font-size: 34px;
      }

      .modal-coupon {
        min-width: 0;
        width: 100%;
      }

      .modal-badges {
        gap: 8px;
        margin-bottom: 18px;
      }

      .modal-badge,
      .effect-pill {
        font-size: 11px;
        padding: 8px 10px;
      }

      .modal-accordion-button {
        padding: 16px;
      }

      .modal-accordion-title {
        font-size: 16px;
      }

      .modal-accordion-body {
        padding: 0 16px 16px;
      }

      .modal-actions {
        display: grid;
        grid-template-columns: 1fr;
      }

      .checkout-page-topbar,
      .client-page-topbar {
        padding: 14px;
      }

      .checkout-page-title,
      .client-page-title {
        font-size: 23px;
      }

      .checkout-page-body,
      .client-page-main,
      .client-page-menu {
        padding: 14px;
      }

      .checkout-card,
      .client-card,
      .client-info-box,
      .client-doc-card {
        border-radius: 20px;
        padding: 16px;
      }

      .checkout-card-title {
        font-size: 20px;
      }

      .client-page-section-title {
        font-size: 28px;
      }
    }

    @media (max-width: 420px) {
      .header-inner {
        padding-left: 10px;
        padding-right: 10px;
        grid-template-columns: minmax(0, 1fr) auto;
      }

      .brand-copy h1 {
        font-size: 18px;
      }

      .brand-mark {
        width: 38px;
        height: 38px;
      }

      .header-actions {
        gap: 5px;
      }

      .filters-dropdown-trigger,
      .cart-button,
      .client-button {
        min-height: 38px;
        height: 38px;
        border-radius: 12px;
      }

      .filters-dropdown-trigger {
        width: 38px;
        min-width: 38px;
      }

      .client-button,
      .cart-button {
        padding: 0 9px;
        font-size: 11px;
      }

      .hero,
      .featured-showcase-section,
      .store-main-layout {
        padding-left: 10px;
        padding-right: 10px;
      }

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

      .imagem-wrap {
        height: 132px !important;
      }

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

      .produto-nome {
        font-size: 12px !important;
      }

      .produto-preco {
        font-size: 15px !important;
      }

      .card .acoes .btn,
      .card .btn-detail-premium {
        min-height: 36px !important;
        font-size: 9.5px !important;
      }
    }

    @media (max-width: 340px) {
      .grid {
        grid-template-columns: 1fr !important;
      }

      .imagem-wrap {
        height: 210px !important;
      }
    }


/* MOBILE FIX AREA DO CLIENTE */
@media (max-width: 768px) {

  .client-page {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .client-page-shell {
    height: auto !important;
    min-height: 100vh;
  }

  .client-page-body {
    display: flex !important;
    flex-direction: column !important;
    overflow: visible !important;
  }

  .client-page-menu {
    width: 100% !important;
    border-right: none !important;
    border-bottom: 1px solid var(--border) !important;
    padding: 14px !important;
    overflow: visible !important;
  }

  .client-page-main {
    width: 100% !important;
    padding: 14px !important;
    overflow: visible !important;
  }

  .client-menu-card,
  .client-card,
  .client-info-box,
  .client-doc-card,
  .favorite-client-card {
    border-radius: 18px !important;
  }

  .client-page-section-title {
    font-size: 26px !important;
    line-height: 1.05 !important;
  }

  .client-page-title {
    font-size: 20px !important;
  }

  .client-page-topbar {
    padding: 14px !important;
    align-items: center !important;
  }

  .client-page-topbar-left {
    min-width: 0 !important;
  }

  .client-menu-btn,
  .client-menu-topic-toggle {
    min-height: 50px !important;
    font-size: 14px !important;
    padding: 12px 14px !important;
  }

  .client-menu-submenu {
    margin-left: 0 !important;
    padding-left: 0 !important;
    border-left: none !important;
  }

  .client-stage-timeline {
    overflow-x: auto;
    padding-bottom: 10px;
    gap: 20px;
    justify-content: flex-start !important;
  }

  .client-stage-step {
    min-width: 90px;
  }

  .client-grid-two,
  .client-grid-three,
  .client-doc-grid,
  .favorites-client-grid,
  .client-wallet-grid {
    grid-template-columns: 1fr !important;
  }

  .favorite-client-card {
    grid-template-columns: 64px 1fr !important;
    align-items: flex-start !important;
  }

  .favorite-client-card img {
    width: 64px !important;
    height: 64px !important;
  }

  .client-wallet-highlight .client-info-value {
    font-size: 22px !important;
  }

  .close-client-page {
    flex-shrink: 0;
  }
}



    @media (max-width: 980px) {
      .checkout-product-summary-panel { position: static; }
    }

  

    /* AJUSTE PONTUAL: cards com a mesma altura, sem excesso de branco */
    .grid {
      align-items: stretch !important;
    }

    .card {
      height: 100% !important;
      display: flex !important;
      flex-direction: column !important;
    }

    .card-body {
      flex: 1 1 auto !important;
      display: flex !important;
      flex-direction: column !important;
      justify-content: flex-start !important;
    }

    .card-header {
      display: grid !important;
      /* (08/07) linha do preço era 40px FIXO e o preço com promoção (riscado + selinho +
         preço final) estourava por baixo do botão "Adicionar ao carrinho". minmax mantém
         os 40px de mínimo (card sem promo fica igual) e deixa crescer quando tem promo. */
      grid-template-rows: calc(14px * 1.12 * 2) minmax(40px, auto) !important;
      gap: 2px !important; /* (08/07) sobe o bloco do preço pra perto do título */
      align-items: start !important;
    }

    .produto-preco {
      min-height: 40px !important;
      display: flex !important;
      flex-direction: column !important;
      justify-content: flex-start !important;
    }

    .produto-preco-original-row {
      /* (08/07) compacta o riscado + selinho pra caberem numa linha só e o preço
         final ficar longe do botão (antes o selinho quebrava linha e empurrava
         o preço pra baixo do "Adicionar ao carrinho"). */
      min-height: 0 !important;
      margin-bottom: 1px !important;
      gap: 4px !important;
      row-gap: 1px !important;
    }

    .produto-preco-original-riscado {
      font-size: 11px !important;
    }

    .produto-desconto-inline {
      font-size: 9px !important;
      padding: 3px 6px !important;
    }

    .produto-preco-final {
      font-size: 22px !important;
      line-height: 0.96 !important;
    }

    .produto-preco-sem-promocao {
      transform: translateY(8px) !important;
    }

    .card .acoes {
      margin-top: 6px !important;
    }

    .card .acoes .btn {
      min-height: 38px !important;
      padding: 7px 9px !important;
    }


    #languageToggleButton {
      min-width: 56px;
      justify-content: center;
      text-transform: none !important;
      font-size: 0 !important;
      line-height: 1 !important;
      padding: 10px 14px !important;
    }

    .language-flag-icon {
      width: 28px;
      height: 20px;
      display: block;
      border-radius: 4px;
      box-shadow: 0 0 0 1px rgba(0,84,61,0.14);
      overflow: hidden;
      flex: 0 0 auto;
    }

    .checkout-customer-input {
      width: 100%;
      border: 1px solid rgba(0,84,61,0.16);
      border-radius: 14px;
      padding: 11px 12px;
      color: var(--green);
      font-size: 14px;
      font-weight: 800;
      line-height: 1.4;
      outline: none;
      background: #fbfdfc;
      font-family: inherit;
    }

    .checkout-customer-input:focus {
      border-color: var(--green);
      box-shadow: 0 0 0 3px rgba(0,84,61,0.08);
      background: #ffffff;
    }

    .checkout-final-items {
      display: grid;
      gap: 10px;
      margin: 14px 0 16px;
      padding-bottom: 14px;
      border-bottom: 1px solid var(--border);
    }

    .checkout-final-item {
      display: grid;
      grid-template-columns: 48px minmax(0, 1fr);
      gap: 10px;
      align-items: center;
      padding: 10px;
      border: 1px solid rgba(0,84,61,0.10);
      border-radius: 16px;
      background: #fbfdfc;
    }

    .checkout-final-item img {
      width: 48px;
      height: 48px;
      object-fit: contain;
      border-radius: 12px;
      background: #ffffff;
    }

    .checkout-final-item-name {
      color: var(--green);
      font-size: 13px;
      line-height: 1.25;
      font-weight: 900;
    }

    .checkout-final-item-meta {
      color: var(--text-soft);
      font-size: 12px;
      line-height: 1.35;
      font-weight: 700;
      margin-top: 2px;
    }


    /* ===== UX: toast + contador pulsando + mini-carrinho ===== */
    @keyframes cartCountPulse {
      0% { transform: scale(1); }
      35% { transform: scale(1.45); }
      100% { transform: scale(1); }
    }
    .cart-count.pulse { animation: cartCountPulse 0.5s ease; }

    .cart-toast {
      position: fixed; right: 24px; bottom: 24px; z-index: 4000;
      display: flex; align-items: center; gap: 10px; max-width: 340px;
      padding: 13px 18px; background: var(--green); color: #fff;
      border-radius: 14px; box-shadow: 0 14px 34px rgba(0,84,61,0.28);
      font-size: 14px; font-weight: 600;
      opacity: 0; transform: translateY(14px); pointer-events: none;
      transition: opacity .25s ease, transform .25s ease;
    }
    .cart-toast.show { opacity: 1; transform: translateY(0); }
    .cart-toast-check {
      display: inline-flex; align-items: center; justify-content: center;
      width: 22px; height: 22px; flex: 0 0 auto; border-radius: 50%;
      background: #29E681; color: var(--green); font-weight: 900; font-size: 13px;
    }
    @media (max-width: 600px) {
      .cart-toast { right: 12px; left: 12px; bottom: 12px; max-width: none; }
    }

    .cart-wrap { position: relative; display: inline-flex; align-items: center; }
    .mini-cart {
      position: absolute; top: calc(100% + 12px); right: 0; width: 300px;
      background: #fff; border: 1px solid var(--border); border-radius: 16px;
      box-shadow: var(--shadow); padding: 14px; z-index: 3000;
      opacity: 0; visibility: hidden; transform: translateY(8px);
      transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
    }
    @media (hover: hover) {
      .cart-wrap:hover .mini-cart { opacity: 1; visibility: visible; transform: translateY(0); }
    }
    .mini-cart-empty { text-align: center; color: var(--text-soft); font-size: 14px; padding: 12px 0; }
    .mini-cart-list { max-height: 280px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
    .mini-cart-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
    .mini-cart-item-name { font-size: 13.5px; font-weight: 600; color: var(--text); line-height: 1.25; }
    .mini-cart-item-qty { font-size: 12px; color: var(--text-soft); margin-top: 2px; }
    .mini-cart-item-price { font-size: 13.5px; font-weight: 800; color: var(--green); white-space: nowrap; }
    .mini-cart-footer { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
    .mini-cart-subtotal { display: flex; align-items: center; justify-content: space-between; font-size: 14px; margin-bottom: 10px; }
    .mini-cart-subtotal strong { color: var(--green); font-size: 15px; }
    .mini-cart-btn {
      width: 100%; padding: 10px; border: none; border-radius: 12px;
      background: var(--green); color: #fff; font-weight: 700; font-size: 14px;
      cursor: pointer; transition: background .2s ease;
    }
    .mini-cart-btn:hover { background: var(--green-2); }

    /* ===== UX: toast bloqueado + botao confirma + fly-to-cart + cards em cascata ===== */
    .cart-toast.blocked { background: #92400e; box-shadow: 0 14px 34px rgba(146,64,14,0.30); }
    .cart-toast.blocked .cart-toast-check { background: #fbbf24; color: #7a3e00; }

    .btn-primary.btn-added {
      background: #29E681 !important;
      border-color: #29E681 !important;
      color: var(--green) !important;
    }

    .fly-to-cart {
      position: fixed; z-index: 5000; border-radius: 12px; object-fit: cover;
      pointer-events: none; box-shadow: 0 10px 24px rgba(0,84,61,0.22);
      transition: transform .7s cubic-bezier(.22,.61,.36,1), opacity .7s ease;
      will-change: transform, opacity;
    }

    @keyframes cardEnter {
      from { opacity: 0; transform: translateY(14px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .card-enter { animation: cardEnter .45s ease both; }

    @media (prefers-reduced-motion: reduce) {
      .card-enter { animation: none; }
      .fly-to-cart { display: none; }
      .cart-count.pulse { animation: none; }
    }

    /* ===== UX: Avise-me quando chegar (produto esgotado) ===== */
    .card-badge-esgotado { background:#6b7280; color:#fff; }
    /* (21/07) ESCASSEZ: badge quando o saldo vendável do Core está entre 1 e 10. */
    .card-badge-ultimas { background:#b45309; color:#fff; }
    .esgotado-img img { filter: grayscale(0.35); opacity: 0.78; }
    .btn-notify {
      width: 100%; background: #fff; color: var(--green); border: 1.5px solid var(--green);
      border-radius: 12px; padding: 12px; font-weight: 700; font-family: 'Poppins', sans-serif;
      cursor: pointer; transition: background .2s ease, color .2s ease;
    }
    .btn-notify:hover { background: var(--green); color: #fff; }

    .avise-overlay {
      position: fixed; inset: 0; z-index: 6000; background: rgba(15,23,42,0.55);
      display: flex; align-items: center; justify-content: center; padding: 20px;
      opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s ease;
    }
    .avise-overlay.open { opacity: 1; visibility: visible; }
    .avise-modal {
      position: relative; width: 100%; max-width: 380px; background: #fff;
      border-radius: 18px; box-shadow: var(--shadow); padding: 26px 24px 24px;
      transform: translateY(10px); transition: transform .2s ease;
    }
    .avise-overlay.open .avise-modal { transform: translateY(0); }
    .avise-close {
      position: absolute; top: 12px; right: 14px; border: none; background: none;
      font-size: 26px; line-height: 1; color: var(--text-soft); cursor: pointer;
    }
    .avise-body h3 { margin: 0 0 4px; font-size: 19px; color: var(--green); font-family: 'Poppins', sans-serif; }
    .avise-sub { margin: 0 0 16px; font-size: 14px; color: var(--text-soft); font-weight: 600; }
    .avise-label { display: block; font-size: 12.5px; font-weight: 700; color: var(--text); margin: 10px 0 5px; }
    .avise-input {
      width: 100%; padding: 11px 13px; border: 1px solid var(--border);
      border-radius: 11px; font-size: 14px; box-sizing: border-box;
    }
    .avise-input:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(0,84,61,0.10); }
    .avise-submit {
      width: 100%; margin-top: 18px; padding: 13px; border: none; border-radius: 12px;
      background: var(--green); color: #fff; font-weight: 700; font-size: 15px;
      cursor: pointer; transition: background .2s ease;
    }
    .avise-submit:hover { background: var(--green-2); }
    .avise-submit:disabled { opacity: .7; cursor: default; }
    .avise-feedback { margin-top: 12px; font-size: 13.5px; text-align: center; }
    .avise-feedback.ok { color: var(--green); font-weight: 700; }
    .avise-feedback.erro { color: #b42318; }
    .avise-wpp-btn {
      display: inline-block; margin-top: 8px; background: #25D366; color: #fff;
      border: none; border-radius: 10px; padding: 9px 14px; font-weight: 700;
      font-size: 13.5px; cursor: pointer;
    }
    .btn-notify.btn-notify-on { background: var(--green); color: #fff; }
    .menu-dot { display:inline-block; width:9px; height:9px; border-radius:50%; background:#e23b3b; margin-left:7px; vertical-align:middle; }
    .produto-voltou { border:1.5px solid #29E681 !important; background:#e8f7ef !important; }
    .produto-voltou-badge { margin-top:8px; display:inline-block; background:#29E681; color:var(--green); font-weight:800; font-size:12.5px; padding:5px 10px; border-radius:9px; }

/* ============================================================================
   (08/07) REDESIGN ÁREA DO CLIENTE — layout novo (referência aprovada pela dona),
   CORES ZELENO PRESERVADAS. Menu lateral: avatar + "Olá, Nome!" + itens em pílula
   + Sair. Dados pessoais: título grande + subtítulo + cards de leitura (label/valor)
   com "Editar dados". Bloco APENSADO no fim de propósito: vence a cascata sem
   mexer em nenhuma regra antiga.
   ========================================================================== */
    .client-page-menu {
      background: #ffffff !important;
    }

    .client-menu-card {
      border: none !important;
      box-shadow: none !important;
      background: transparent !important;
      padding: 6px 2px !important;
      gap: 26px !important;
    }

    .client-menu-user {
      border-bottom: none !important;
      padding-bottom: 0 !important;
      gap: 2px !important;
    }

    .client-menu-avatar {
      width: 58px;
      height: 58px;
      border-radius: 999px;
      background: var(--green-soft);
      color: var(--green);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      font-weight: 900;
      margin-bottom: 10px;
    }

    .client-menu-hello {
      color: var(--text-soft);
      font-size: 13px;
      line-height: 1.2;
    }

    .client-menu-user-name {
      font-size: 19px !important;
    }

    .client-menu-nav {
      gap: 4px !important;
    }

    .client-menu-btn {
      border: none !important;
      background: transparent !important;
      border-radius: 999px !important;
      padding: 11px 16px !important;
      font-weight: 700 !important;
      font-size: 14px;
    }

    .client-menu-btn:hover {
      background: var(--green-soft) !important;
    }

    .client-menu-btn.active {
      background: var(--green) !important;
      color: #ffffff !important;
      box-shadow: none !important;
    }

    .client-menu-logout {
      color: #c0392b !important;
      display: inline-flex !important;
      align-items: center;
      gap: 8px;
      margin-top: 14px;
    }

    .client-menu-logout:hover {
      background: rgba(192, 57, 43, 0.08) !important;
    }

    .client-view-wrap {
      display: grid;
      gap: 18px;
      max-width: 780px;
    }

    .client-view-card {
      background: #ffffff;
      border: 1px solid var(--border);
      border-radius: 22px;
      padding: 26px 28px;
      box-shadow: var(--shadow-soft);
    }

    .client-view-kicker {
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      font-weight: 900;
      color: var(--green);
      margin-bottom: 18px;
    }

    .client-view-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 22px 28px;
    }

    .client-view-label {
      font-size: 11px;
      font-weight: 900;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--green);
      margin-bottom: 4px;
    }

    .client-view-value {
      font-size: 15px;
      color: var(--text);
      line-height: 1.4;
      word-break: break-word;
    }

    .client-view-footer {
      border-top: 1px solid var(--border);
      margin-top: 22px;
      padding-top: 14px;
      display: flex;
    }

    .client-account-edit-btn {
      border: none;
      background: transparent;
      color: var(--green);
      font-weight: 900;
      font-size: 15px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 0;
    }

    .client-account-edit-btn:hover {
      text-decoration: underline;
    }

    @media (max-width: 640px) {
      .client-view-grid {
        grid-template-columns: 1fr;
      }
    }

/* (08/07) REDESIGN ÁREA DO CLIENTE — parte 2: seção ENDEREÇOS no layout da
   referência (grid de cards + botão "Adicionar endereço" no topo). */
    .client-page-head-add-btn {
      border: none;
      background: var(--green);
      color: #ffffff;
      border-radius: 999px;
      padding: 12px 20px;
      font-weight: 900;
      font-size: 13px;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      cursor: pointer;
      box-shadow: var(--shadow-soft);
      white-space: nowrap;
    }

    .client-page-head-add-btn:hover {
      filter: brightness(1.08);
    }

    .client-address-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
      gap: 18px;
      margin-top: 4px;
    }

    .client-address-card-v2 {
      position: relative;
      background: #ffffff;
      border: 1px solid var(--border);
      border-radius: 22px;
      padding: 24px 22px 16px;
      box-shadow: var(--shadow-soft);
      display: flex;
      flex-direction: column;
    }

    .client-address-default-badge {
      position: absolute;
      top: 14px;
      right: 14px;
      background: var(--green);
      color: #ffffff;
      font-size: 10px;
      font-weight: 900;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      padding: 4px 10px;
      border-radius: 999px;
    }

    .client-address-apelido {
      font-size: 11px;
      font-weight: 900;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--green);
      margin-bottom: 8px;
    }

    .client-address-lines {
      color: var(--text-soft);
      font-size: 14.5px;
      line-height: 1.7;
      flex: 1;
      word-break: break-word;
    }

    .client-address-footer {
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
      margin-top: 16px;
    }

    .client-address-mini-actions {
      display: inline-flex;
      gap: 14px;
    }

    .client-address-mini-btn {
      border: none;
      background: transparent;
      color: var(--text-soft);
      font-size: 12px;
      font-weight: 800;
      cursor: pointer;
      padding: 0;
    }

    .client-address-mini-btn:hover {
      text-decoration: underline;
    }

    .client-address-mini-btn.danger {
      color: #c0392b;
    }

    /* ===== Cartões salvos (área do cliente) ===== */
    .client-cards-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 14px;
      margin-bottom: 18px;
    }

    /* mini-cartão físico: gradiente verde-floresta + glow menta */
    .client-card-tile {
      position: relative;
      overflow: hidden;
      aspect-ratio: 1.7 / 1;
      max-width: 340px;
      border-radius: 18px;
      padding: 18px 20px;
      background:
        radial-gradient(circle at 85% 120%, rgba(41, 230, 129, 0.30) 0%, rgba(41, 230, 129, 0) 55%),
        linear-gradient(125deg, #042d21 0%, #00543D 65%, #0b6a4d 100%);
      color: #FDFAF2;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      box-shadow: 0 16px 32px rgba(0, 84, 61, 0.20);
    }

    .client-card-tile-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .client-card-chip {
      width: 34px;
      height: 25px;
      border-radius: 6px;
      background: linear-gradient(135deg, #e9d8a6 0%, #c9b26d 100%);
      box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
    }

    .client-card-brand {
      font-size: 11px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.10em;
      color: #29E681;
    }

    .client-card-number {
      font-size: 17px;
      font-weight: 700;
      letter-spacing: 0.14em;
      white-space: nowrap;
    }

    .client-card-tile-bottom {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 10px;
    }

    .client-card-holder {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      opacity: 0.85;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .client-card-exp {
      font-size: 12px;
      font-weight: 800;
      color: #29E681;
    }

    .client-card-delete {
      position: absolute;
      top: 10px;
      right: 10px;
      width: 26px;
      height: 26px;
      border: none;
      border-radius: 999px;
      background: rgba(253, 250, 242, 0.14);
      color: #FDFAF2;
      font-size: 15px;
      line-height: 1;
      cursor: pointer;
      opacity: 0;
      transition: opacity 0.2s ease, background 0.2s ease;
    }

    .client-card-tile:hover .client-card-delete {
      opacity: 1;
    }

    .client-card-delete:hover {
      background: rgba(220, 53, 69, 0.85);
    }

    /* estado vazio / carregando */
    .client-card-empty,
    .client-card-ghost {
      grid-column: 1 / -1;
      display: flex;
      align-items: center;
      gap: 14px;
      border: 1.5px dashed rgba(0, 84, 61, 0.22);
      border-radius: 18px;
      padding: 22px;
      background: #fbfdfc;
      color: var(--text-soft);
      font-size: 13px;
      font-weight: 700;
    }

    .client-card-empty span {
      font-weight: 400;
      opacity: 0.8;
    }

    .client-card-empty-icon {
      width: 46px;
      height: 46px;
      border-radius: 15px;
      background: var(--green-soft);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      flex: 0 0 auto;
    }

    /* formulário */
    .client-card-form {
      border: 1px solid rgba(0, 84, 61, 0.10);
      border-radius: 18px;
      background: #fbfdfc;
      padding: 18px;
      display: grid;
      gap: 14px;
      max-width: 640px;
    }

    .client-card-form-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px 14px;
    }

    .client-card-form .checkout-customer-input {
      background: #ffffff;
    }

    .client-card-form-actions {
      display: flex;
      justify-content: flex-end;
    }

    .client-card-form-actions .client-doc-upload-btn {
      padding: 13px 28px;
    }

    @media (max-width: 640px) {
      .client-card-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .client-card-form-grid .checkout-customer-field:nth-last-child(1) {
        grid-column: 1 / -1;
      }

      .client-card-form-actions .client-doc-upload-btn {
        width: 100%;
      }
    }

    /* ===== Pills de cupom aplicado no checkout ===== */
    .checkout-coupon-pills {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 10px;
    }

    .checkout-coupon-chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      border-radius: 999px;
      padding: 7px 14px;
      background: linear-gradient(135deg, #00543D 0%, #0b7a58 100%);
      color: #ffffff;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      box-shadow: 0 8px 18px rgba(0, 84, 61, 0.18);
    }

    /* ===== Autocomplete da busca ===== */
    .header-search-suggest {
      position: absolute;
      top: calc(100% + 8px);
      left: 0;
      right: 0;
      z-index: 60;
      background: #ffffff;
      border: 1px solid rgba(0, 84, 61, 0.12);
      border-radius: 18px;
      box-shadow: 0 24px 48px rgba(0, 84, 61, 0.16);
      padding: 8px;
      display: none;
      max-height: 380px;
      overflow-y: auto;
    }

    .header-search-suggest-item {
      display: flex;
      align-items: center;
      gap: 10px;
      width: 100%;
      border: none;
      background: transparent;
      border-radius: 12px;
      padding: 11px 12px;
      text-align: left;
      cursor: pointer;
      color: var(--text);
      font-size: 14px;
      font-family: inherit;
      transition: background 0.15s ease;
    }

    .header-search-suggest-item:hover,
    .header-search-suggest-item.active {
      background: var(--green-soft);
    }

    .header-search-suggest-icon {
      flex: 0 0 auto;
      width: 28px;
      height: 28px;
      border-radius: 9px;
      background: #f3f7f5;
      color: var(--green);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
    }

    .header-search-suggest-text {
      flex: 1;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .header-search-suggest-text strong {
      color: var(--green);
    }

    .header-search-suggest-extra {
      margin-left: 8px;
      color: var(--text-soft);
      font-size: 12px;
    }

    .header-search-suggest-tag {
      flex: 0 0 auto;
      border-radius: 999px;
      padding: 4px 10px;
      background: rgba(41, 230, 129, 0.14);
      color: #0b6a4d;
      font-size: 10px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }

    @media (max-width: 768px) {
      /* Mobile: painel FIXED (imune a clipping do header sticky/viewport); o top é
         calculado via JS a partir da posição real da barra de busca. */
      .header-search-suggest {
        position: fixed;
        left: 10px;
        right: 10px;
        border-radius: 16px;
        max-height: min(48vh, 340px);
      }
    }

    /* ===== Logo Zeleno Store centralizado no header (mobile) =====
       Grid de 3 colunas (1fr | logo | 1fr): o logo fica no CENTRO GEOMÉTRICO da
       tela independente da largura dos botões à direita. Busca na linha de baixo. */
    @media (max-width: 768px) {
      .header-inner {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
      }

      .brand {
        grid-column: 2;
        grid-row: 1;
        justify-self: center;
      }

      .header-actions {
        grid-column: 3;
        grid-row: 1;
        justify-self: end;
      }

      .header-search {
        grid-column: 1 / -1;
        grid-row: 2;
      }
    }

    /* ===== Preço por grama como destaque na vitrine (17/07) ===== */
    /* 💰 (22/07, pedido do dono) preço no estilo do panfleto: "R$80,00/g" inteiro
       em verde forte, centralizado, com "*min 5g" pequeno e discreto embaixo. */
    .produto-preco-grama-hero {
      font-size: 22px;
      font-weight: 900;
      letter-spacing: -0.05em;
      color: var(--green);
      line-height: 1.1;
      display: flex;
      align-items: baseline;
      justify-content: center;
      gap: 0;
    }

    .produto-preco-grama-unidade {
      font-size: inherit;
      font-weight: inherit;
      letter-spacing: inherit;
      color: inherit;
    }

    .produto-preco-total-sub {
      margin-top: 2px;
      letter-spacing: 0;
      text-align: center;
    }

    .produto-preco-min {
      font-size: 11px;
      font-weight: 600;
      color: #55635c;
    }

    .produto-preco-total-chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      border-radius: 999px;
      padding: 4px 10px;
      background: rgba(41, 230, 129, 0.12);
      border: 1px solid rgba(41, 230, 129, 0.30);
      color: #35564a;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0;
      line-height: 1.2;
      white-space: nowrap;
    }

    .produto-preco-total-chip strong {
      color: var(--green);
      font-weight: 900;
    }

    /* ═══ 🎠 (23/07, pedido do dono) Título do carrossel "Produtos em destaque" ═══
       O head estava display:none no CSS original — reativado aqui (regra no FINAL
       do arquivo vence a anterior de mesma especificidade). Estilo no padrão da
       loja: kicker pill verde-menta (mesma receita do .login-kicker), título
       Poppins 900 verde e um traço de acabamento embaixo. Tudo centralizado. */
    .featured-showcase-head {
      display: flex;
      justify-content: center;
      text-align: center;
      margin-bottom: 26px;
    }

    .featured-showcase-head-center {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
    }

    .featured-showcase-kicker {
      display: inline-block;
      padding: 7px 14px;
      border-radius: 999px;
      background: var(--green-soft);
      border: 1px solid rgba(0, 84, 61, 0.12);
      color: var(--green);
      font-family: 'Poppins', Inter, sans-serif;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }

    .featured-showcase-title {
      font-family: 'Poppins', Inter, sans-serif;
      margin-bottom: 0;
    }

    .featured-showcase-underline {
      width: 64px;
      height: 4px;
      border-radius: 999px;
      background: linear-gradient(90deg, var(--green), #29e681);
    }

    /* ═══ 📱 (23/07) Banners mobile logado+PT em formato 2:1 (1080x540) ═══
       A moldura padrão do hero no mobile tem 260px fixos (feita p/ as artes
       verticais 1080x1350). Com a classe hero-mobile-wide (ligada pelo JS só
       nesse conjunto), a altura segue a proporção 2:1 da arte -> imagem inteira,
       sem corte nas laterais. Fora do mobile, nada muda. */
    @media (max-width: 768px) {
      .hero-carousel-premium.hero-mobile-wide {
        height: auto;
        aspect-ratio: 2 / 1;
      }
    }