/** Shopify CDN: Minification failed

Line 64:26 Unexpected ")"
Line 883:1 Unexpected "}"

**/
/*General Styles*/:root
  {
    --primary-green: #3D5656;
    /* Escurecido de #4E8D4E a 2026-09-06. O valor antigo dava 4,0:1 sobre
       branco, abaixo dos 4,5:1 exigidos a texto normal, e esta variável colore
       11 regras de texto — os subtítulos .text-green-secondary da homepage, a
       ligação do breadcrumb nas páginas de produto, e o desconto do upsell,
       este último no custom_css das definições do tema. A #31502F dá 9,06:1.
       Levantamento das 7 regras que a usam como fundo antes de mudar: quatro
       têm texto branco por cima e melhoram, duas estão mortas, uma não tem
       texto. A única que piorava era o :hover das Pesquisas Populares, tratado
       neste mesmo commit. NÃO é a definição color_btn_* do admin — essa é
       outra, e foi corrigida à parte. */
    --secondary-green: #31502F;
    --white: #ffffff;
    --gray: #e5e5e5;
    /* Traço de separação. Mesmo valor do --gray, com nome que diz para que serve:
       o --gray é usado como cor solta, este existe para separadores. */
    --cv-hairline: #e5e5e5;
    --border-radius: 30px 3px 30px 3px;
  }
  .border-green {
    border: 1px solid var(--secondary-green)
  }
  .all-rounded {
    border-radius: 100px;
    overflow: hidden
  }
  .container-narrow {
    max-width: 1200px !important
  }
  .flexBox {
    display: flex
  }
  .flexColumn {
    flex-direction: column
  }
  .page-header {
    padding-bottom: 0 !important
  }
  .border-criaverde .sf-custom__block-inner {
    border-radius: var(--border-radius);
    overflow: hidden
  }
  /*Typography*/
  .section__subheading {
    margin-bottom: 0.1rem;
  }
  .text-green-primary {
    color: var(--primary-green);
  }
  .text-green-secondary {
    color: var(--secondary-green);
  }
  .orderBorder {
    border-bottom: 1px solid #eee
  }
  .orderBorder:last-child() {
    border-bottom: 1px solid #fff !important
  }



  /*Header*/
  .sf-header .sf-logo a {
    min-width: 140px !important
  }
  .sf__header-main-menu {
    background: var(--secondary-green);
  }
  .sf__header-main-menu .sf-menu-item {
    color: var(--white);
  }
  .sf__header-main-menu .sf-menu-item a {
    padding: 0.5rem 1rem !important;
  }
  .sf__header-main-menu .sf-menu-item a:after {
    bottom: calc(1.25rem - 16px)
  }
  .sf-header header.sf-header__desktop.logo-center__2l .sf-menu-item:hover > a:after {
    left: 0.5rem;
    width: calc(100% - 1rem)
  }
  .sf-menu-submenu__content {
    max-height: 50vh
  }
  .sf-menu-submenu__items {
    flex-wrap: wrap;
    flex-direction: column;
  }
  .sf-menu-submenu__items > li {
    margin-bottom: 0 !important;
  }
  .sf-menu-submenu__items a:hover {
    color: var(--secondary-green)
  }
  .sf-menu-submenu__content img {
    border-radius: var(--border-radius);
    overflow: hidden
  }
  /*.sf__menu-item-level2:last-child > a {
    text-decoration: underline;
    color: var(--secondary-green)
  }*/
  li.sf-menu-item[data-index="3"] .text-color-regular-price{
    display:none!important
  }
  /*Ícones do Menu*/
  .icMenu {
    width: 20px;
    display: inline-block;
    filter:brightness(100);
    margin-right: 5px
  }
  .EmptyDrop .icMenu {
    display: none !important
  }
  /*Search Box*/
  /* Sugestões de "Pesquisas Populares": grelha de 2 colunas em vez de flex-wrap,
     que alinhava à esquerda com larguras variáveis e deixava as linhas
     desencontradas. O número de linhas ajusta-se sozinho a 4, 5 ou 6 itens.
     Regra própria e não classes do Tailwind: o build do tema é purgado e não
     traz gap-y-3 nem as combinações de que isto precisa. */
  .cv-ps-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem 1rem;
    width: 100%;
    max-width: 34rem;
  }
  .cv-ps-grid > a {
    text-align: center;
  }
  /* Botão de fechar da pesquisa: maior e no verde das pastilhas. */
  [data-close-search] {
    color: var(--secondary-green);
  }
  .flex-search {
    display: flex;
    flex-wrap: wrap;
  }
  .flex-search > div {
    flex: 0 0 25%;
    box-sizing: border-box;
    padding: 0.5rem;
  }
  .search-item-border > a .mb-3 {
    border: 1px solid var(--gray);
    border-radius: var(--border-radius)
  }
  .search-item-border:hover > a .mb-3 {
    border: 1px solid var(--secondary-green);
  }

 .text-disclaimer-details{font-size:12px !important;margin-top:3%}

 .variant-picker__field[data-option-name="Tamanho"]{display:none !important}
  
  /*Footer*/
  footer {
    padding-top: 2rem
  }
  .sf__footer-block-title {
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    margin-bottom: 1rem !important
  }
  footer .sf__accordion-item {
    border: unset !important;
    padding: unset !important;
    border-radius: unset !important
  }

  /*Banner*/
  .sf__slide-block--middle-left .sf__slide-content {
    max-width: 45% !important;
  }
  .sf__slide-content .text-black {
    color: var(--primary-green);
  }
  /*Grid com filtros*/
  .product-tabs__header--horizontal a.active {
    opacity: 1
  }
  .product-tabs__header--horizontal a {
    opacity: .3
  }

  /*Card Produto*/
  .sf__pcard-image {
    border: 2px solid var(--gray);
    border-radius: var(--border-radius);
    overflow: hidden;
  }
  .sf__pcard:hover .sf__pcard-image {
    border: 2px solid var(--secondary-green);
  }
  .sf__pcard button.add-to-cart,
  .sf__pcard button.f-product-form {
    border-radius: 100px !important
  }
  .contentFlex {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .contentFlex h3 {
    font-size: 16px;
    margin: 0 !important;
    padding: 0 !important;
    font-weight: 600;
    color: var(--secondary-green) !important;
  }
  .contentFlex .sf__tooltip-item.sf__tooltip-style-1 {
    padding: 0 !important;
    margin: 0 !important;
  }
  .sf-wishlist__button .sf__tooltip-content,
  .sf__pcard-action {
    display: none !important
  }
  .sf-wishlist__button:hover svg,
  .added-to-wishlist svg {
    filter: invert(1) brightness(10)
  }
  .added-to-wishlist {
    background: var(--secondary-green) !important
  }
  .sf__pcard-price {
    display: flex;
  }
  .text-color-regular-price {
    font-weight: 600;
    color: var(--secondary-green) !important;
    font-size: 18px
  }
  .prod__compare_price {
    opacity: .5
  }
  .prod__tag--soldout {
    background: var(--primary-green) !important;
    width: auto;
    height: unset;
    padding: 0.3rem 2rem;
    display: block;
    border-radius: 5px
  }

  /*Sections*/
  .image__with-text .sf-image img,
  .lookbook-image img {
    border-radius: var(--border-radius);
    overflow: hidden
  }
  .sf-custom__block p {
    color: var(--primary-green)
  }
  /*Product Bundles*/
  .product-bundles .sf-product-variant-option-dropdown {
    border: 1px solid var(--secondary-green);
    border-radius: 100px;
    padding: 0.3rem 1.3rem;
  }
  .product-bundles .product-bundles__item-image {
    border: 1px solid var(--gray);
    border-radius: var(--border-radius);
    overflow: hidden
  }
  /*Collection List*/
  .collection-card {
    border-radius: var(--border-radius);
    overflow: hidden
  }
  .collection-card:hover .collection-card__image {
    opacity: .3;
  }
  .collection-card__inner {
    background: #000
  }
  .collection-card__image {
    opacity: .75;
    transition: 0.3s ease
  }
  .collection-card__info h3 {
    font-weight: 600 !important
  }
  .collection-card__info h3 a,
  .collection-card__info p {
    color: var(--white)
  }
  .collection-card--inside:hover .sf__btn {
    background: var(--secondary-green) !important
  }
  /*Collection Slider*/
  .slider-collection .container-fluid {
    position: relative;
  }
  .slider-collection .sf__featured-collection-button .sf__btn {
    position: absolute;
    top: 12px;
    right: 0;
    border-radius: 100px
  }

  /*Collection Page*/
  .template-collection .sf__accordion-item {
    border: 1px solid var(--gray);
    padding: 1rem;
    border-radius: 20px 3px 20px 3px
  }
  .template-collection .sf__accordion-item.open {
    border: 1px solid var(--secondary-green);
  }
  .template-collection .sf__filter-wrapper .facet-checkbox {
    padding: 0.3rem 0 !important
  }
  .template-collection span.filter-products-count {
    opacity: .3;
  }
  .template-collection .sf__filter-wrapper .facet-checkbox .icon-checkmark {
    top: 10px !important
  }
  .template-collection .justify-bread,
  .justify-bread {
    justify-content: center
  }
  .template-product .justify-bread {
    justify-content: flex-start
  }
  .header__icon {
    display: table;
    margin: 0 auto 20px;
    width: 50px !important
  }

  /*Product Page*/
  .nav-swiper-container .swiper-slide-thumb-active .sf-prod-media {
    border: unset !important;
    padding: 0
  }
  .nav-swiper-container .sf-prod-media {
    padding: 0 !important
  }
  .swiper-slide-thumb-active {
    border: 1px solid var(--secondary-green) !important
  }
  .product-template > .container {
    max-width: 1380px;
    padding-top: 1.2rem
  }
  .sf-preview__wrapper {
    border-radius: var(--border-radius);
    overflow: hidden
  }
  .sf-preview__wrapper .swiper-slide {
    width: 100% !important
  }
  .sf-prod__layout-6 .nav-swiper-container {
    width: 125px !important
  }
  .sf-media-nav .swiper-slide {
    height: 125px !important;
    overflow: hidden;
    border-radius: 30px 3px
  }
  .product-template .sf-breadcrumb__nav a {
    color: var(--secondary-green);
    text-transform: uppercase;
    padding-left: 0.6rem
  }
  .product-template .sf-breadcrumb__nav a:hover {
    font-weight: 600
  }
  .product-template .sf-breadcrumb__nav span {
    font-size: 12px;
    padding: 0 0 0 1rem
  }
  .product-template .bread-crumb__item {
    padding: 0.3rem
  }
  .product-template .prod__price {
    font-size: 24px
  }
  .main-product__block-tax {
    font-size: 10px
  }
  .mais-info {
    font-weight: 600;
    color: var(--secondary-green);
    margin-top: 0.7rem;
    display: block;
  }
  /*Variants*/
  .prod__option--button .variant-picker__option input:checked + label {
    background: var(--primary-green) !important;
    border: 1px solid var(--primary-green) !important
  }
  /*Quantity*/
  .form__input-wrapper {
    border: 1px solid var(--primary-green);
    border-radius: 20px 3px;
    overflow: hidden
  }
  button.add-to-cart {
    border-radius: 20px 3px;
  }
  .prod__sticky-atc {
    padding-top: 10px
  }
  /*Product Details*/
  .productDetails {
    display: flex;
    flex-wrap: wrap
  }
  .pd_col1 {
    flex: 0 0 65%;
    padding-right: 5rem;
  }
  .pd_col2 {
    flex: 0 0 35%
  }
  .productDetails li {
    list-style: none;
  }
  .productDetails h2 {
    font-size: 32px
  }
  .productDetails h2,
  .productDetails h3 {
    margin-bottom: 0 !important
  }
  .boxGray {
    background: #fbfbfb;
    padding: 1.5rem 2rem;
    border-radius: var(--border-radius)
  }
  .boxGray li {
    font-size: 14px;
    margin-bottom: 0 !important
  }
  .svg-icon {
    display: inline-block;
    padding-right: 0.5rem
  }
  .svg-icon svg {
    width: 30px
  }
  /*Opção Presente*/
  .name_option,
  .gift_option {
    width: 100%;
    display: flex;
    flex-direction: column
  }
  .box-select {
    display: flex;
    font-size: 12px;
    align-items: center;
    flex-wrap: wrap;
  }
  .box-select input {
    width: 0
  }
  .box-select .selector {
    width: 50px;
    height: 20px;
    background: var(--gray);
    border-radius: 100px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-right: 5px;
    padding: 0 5px;
    transition: 0.3s ease;
    cursor: pointer;
  }
  .box-select .selector > div {
    width: 16px;
    height: 16px;
    transform: scale(1.7);
    background: var(--white);
    border-radius: 100px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
    transition: 0.3s ease;
  }
  #nameOption:checked ~ .selector,
  #giftOption:checked ~ .selector {
    justify-content: flex-end;
    background: var(--secondary-green)
  }
  .box-name {
    opacity: 0;
    visibility: hidden;
    height: 0;
    flex: 0 0 100% !important;
  }
  .box-name:not(:placeholder-shown) {
    border: 1px solid var(--secondary-green) !important
  }
  .box-name:focus {
    border: 1px solid var(--secondary-green) !important
  }
  #nameOption:checked ~ .box-name,
  #giftOption:checked ~ .box-name {
    opacity: 1;
    visibility: visible;
    height: auto;
    margin: 1rem 0;
  }
  #nameOption:checked ~ span,
  #giftOption:checked ~ span {
    color: var(--secondary-green)
  }
  /*Tabela de Informações*/
  .tableInfo {
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-top: 3rem;
    border-radius: 10px;
    overflow: hidden
  }
  .tableLine {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    justify-content: space-between;
    padding: 1rem;
    border-radius: 10px;
    margin-top: -0.5rem;
    position: relative
  }
  .tableLine:nth-child(even) {
    background: #fbfbfb
  }
  .tableLine:nth-child(odd) {
    background: var(--gray);
  }
  .tableCol:nth-child(2) {
    text-align: right
  }
  .tableHeader {
    background: var(--primary-green) !important;
    color: var(--white)
  }
  /*Dashboard - Client Area*/
  .sf-customer__nav {
    flex: 0 0 20%
  }
  .sf-customer__nav h4 {
    font-size: 20px !important;
    margin-bottom: 0.5rem
  }
  .sf-customer__nav > div {
    padding: 2rem;
    border-radius: var(--border-radius)
  }
  .sf-customer__nav a {
    padding: 0.4rem 0;
    position: relative;
  }
  .sf-customer__nav a.active {
    color: var(--secondary-green) !important
  }
  .sf-customer__nav a.active:before {
    content: " ";
    width: 14px;
    height: 14px;
    display: inline-block;
    background: var(--secondary-green);
    border-radius: 100px
  }
  .logoutBtn {
    background: #c34444;
    color: #fff;
    padding: 0.5rem 1.2rem !important;
    margin-top: 3rem;
    border-radius: 100px
  }
  .sf-customer__address-info .flex {
    gap: 0.5rem
  }
  /*Services*/
  .services-title .content__subheading,
  .services-title .sf-custom__text-cta {
    margin: 0 !important
  }
  .services-title .content__subheading {
    font-weight: 600
  }
  .service-block .block--right {
    padding: 0 0 0 4rem;
  }
  .service-block .block--left {
    padding: 0 4rem 0 0;
  }
  .service-block h3 {
    color: var(--primary-green)
  }
  .service-block .services-image-card h3{
    color: #fff!important;
  }
  /*.service-block img{
    border-radius: var(--border-radius)!important;
  }
  .service-block .services-image-card .image-card__inner{
    border-radius: 30px 3px 30px 3px!important;
  }*/
  .service-block .services-image-card .image-card__content{
    box-shadow: inset 0 0 0 2000px rgb(46 43 45 / 37%);
  }
  @media screen and  (min-width: 992px) and (max-width:1199.98px){
      .services-block-quickview .services-image-card .image-card__content{
        margin-top: -25px;
        }
      .services-block-quickview .image-card__content-inner a{
        font-size: 10px;
      }
  }

  .services-block-quickview .services-image-card .image-card__content{
    box-shadow: none!important;
    position: static;
    padding: 14px 0px 0px 0px!important; 
    margin-top: -35px;
  }
  @media screen and (min-width: 768px) and (max-width:991.98px){
    .services-block-quickview .services-image-card .image-card__content{
    margin-top: -60px;
    }
  }
  .services-block-quickview .image-card__inner img{
      height: 90%;
  }
  .services-block-quickview .image-card__content{
      justify-content: start!important;
  }
  .services-block-quickview .image-card__content-inner a{
      color: #3D5656!important;
  }
  @media screen and (max-width:991.98px){
      .services-block-quickview .image-card__content-inner a{
      margin-bottom: 10px;
    }
  }

  .service-block .content__subheading {
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--secondary-green)
  }
  .service-block .sf__btn {
    border-radius: 100px !important
  }
    /*SERVICES QUICKVIEW*/
  .services-block-quickview .services-image-card h3{
    font-size: 23px!important;
  }
  /*Blog*/
  .sf__blog-cardImage,
  .template-article .f-img-loaded {
    border-radius: var(--border-radius)
  }


  @media screen and (max-width:767px) {
    .text-disclaimer-details{margin-top:7% }
    /*General*/
    .sectionSpace {
      margin: 5rem 0
    }
    /*Header*/
    .sf-header__mobile-right .sf-cart-icon path {
     /* display: none*/
      fill:#3D5656;
    }
    .sf-logo-mobile img {
      width: 100px !important;
      height: auto !important
    }
    .search-container {
      min-height: unset !important;
      padding: 3rem 1rem
    }
    .btn-mob {
      border-radius: 100px;
      background: var(--secondary-green);
      color: #fff;
      padding: 0.5rem 1rem;
      text-decoration: none
    }
    /* O markup trazia hover:text-gray-800, que punha #1f2937 sobre a pastilha
       verde: 3,67:1 com o verde antigo, e 1,62:1 com o novo — o escurecimento
       da variável tornava o rótulo ilegível ao passar o rato. A classe saiu do
       search-popup.liquid e o sinal de interação passa a ser opacidade, que
       mantém o branco e os 9,06:1 de contraste em qualquer estado. */
    .btn-mob:hover,
    .btn-mob:focus-visible {
      opacity: 0.85;
    }
    .flex-search > div {
      flex: 0 0 50%
    }
    /*Ícones do Menu*/
    .icMenu {
      width: 30px;
      display: inline-block;
      filter:unset;
      margin-right: 5px
    }
    .icMenu.EmptyDrop {
      display: none !important
    }
    .back-to-back {
      width: 100%;
      background: var(--secondary-green);
      align-items: center;
      border-radius: 0 0 25px 0;
      color: #fff
    }
    .back-to-back > div {
      display: flex;
      align-items: center;
    }
    .back-to-back .icMenu {
      filter:brightness(100) !important
    }
    .ttMenu {
      line-height: 2.2
    }
    /*Banner*/
    .sf__slide-block--middle-left .sf__slide-content {
      max-width: 100% !important;
    }
    .sf__slide-content .text-black {
      color: var(--primary-green);
    }
    .sf__slide-block {
      margin-top: -12rem
    }
    .sf__slide--text-black .sf__slide-bg {
      opacity: 1;
    }

    /*Collections Page*/
    .contentFlex h3 {
      text-align: left
    }
    .wishIconcard {
      display: none
    }

    /*Product Page*/
    .form__input-wrapper {
      padding: 0.5rem
    }
    .items-end .add-to-cart.sf__btn {
      padding: 1rem
    }
    .prod__sticky-atc {
      max-height: unset !important;
    }
    .prod__sticky-atc .psa__form-controls,
    .prod__sticky-atc .psa__info {
      padding: 0 0 10px !important
    }
    .sticky-atc-form {
      flex-direction: column;
    }
    .productDetails {
      flex-direction: column-reverse
    }
    .pd_col1,
    .pd_col2 {
      flex: 0 0 100%;
      padding-right: 0;
      margin-bottom: 1rem
    }
    .sf-prod__container > div:nth-child(1) {
      width: 100% !important;
      flex: 0 0 100% !important
    }
    .sf-prod__container > div:nth-child(2) {
      width: 100% !important;
      flex: 0 0 100% !important
    }
    .box-select > span {
      flex: 0 0 75%
    }

    /*Collection Slider*/
    .slider-collection .sf__featured-collection-button .sf__btn {
      position: relative;
      top: unset;
      right: unset;
      border-radius: 100px
    }
    .collection-card__info {
      position: absolute !important;
      left: 50% !important;
      top: 50% !important;
      transform: translate(-50%, -50%) !important;
      text-align: center;
      width: 100%;
    }
  }


/*CONTACTS*/


.fix-section-info-contacts .info-section .title{
  font-size:24px;
  font-weight:600;
  margin-bottom:2%;
}

.fix-section-info-contacts .info-section{
  margin-top:4em;
}

.fix-section-info-contacts .section-my{margin-top:0% !important}

.form-contacts-div::after{
  content:"";
  height:2rem;
  width:100%;
  background-color:#fff !important;
  display:block !important;
  margin-top:30em !important;
  z-index:60;
  position:absolute;
}
  
  /*Breakpoint 1280px*/
  @media screen and (max-width:1441px) {
    /*Product Page*/
    .product-template > .container {
      max-width: 1280px;

    }
    .sf-prod__container > div:nth-child(1) {
      width: 60%;
      flex: 0 0 60%
    }
    .sf-prod__container > div:nth-child(2) {
      width: 40%;
      flex: 0 0 40%
    }
  }

 /*GERAL*/
 .page-construcao-de-jardins .page-header, .page-plantscapping .page-header, .page-jardins-verticais .page-header, .page-decoracao-de-eventos .page-header, .page-decoracao-de-interiores .page-header, .page-aluguer-de-plantas .page-header{
   padding-top: 1rem;
   padding-bottom: 0.8rem!important;
 }
 .page-construcao-de-jardins .page-header__title, .page-plantscapping .page-header__title, .page-jardins-verticais .page-header__title, .page-decoracao-de-eventos .page-header__title, .page-decoracao-de-interiores .page-header__title, .page-aluguer-de-plantas .page-header__title{
   font-size: 48px!important;
 }
 @media screen and (max-width: 767.98px){
  .page-construcao-de-jardins .page-header__title, .page-plantscapping .page-header__title, .page-jardins-verticais .page-header__title, .page-decoracao-de-eventos .page-header__title, .page-decoracao-de-interiores .page-header__title, .page-aluguer-de-plantas .page-header__title{
   font-size: 28px!important;
  }
  .form-contacts-div{margin-top:12%}
  .form-contacts-div::after{
    margin-top:39em !important;
  }
  .fix-section-info-contacts .info-section{margin-top:0px !important}

  .fix-section-info-contacts .sf-custom__social{margin-top:-4em;}

   .container-social-media-menu-customer{justify-content:flex-start !important}

   .sf__accordion-item[data-block-type="details"] .sf__accordion-button{display:none !important}
   .sf__accordion-item
 }
  .border-radius-img-criaverde img{
    border-radius: 30px 3px 30px 3px!important;
  }
  .border-radius-img-criaverde .image-card__inner{
    border-radius: 30px 3px 30px 3px!important;
  }
  .border-radius-servicos-criaverde img{
    border-radius: 100px 3px 100px 0px!important;
    height: 65.5%!important;
  } 
   @media screen and (max-width: 767.98px){
    .border-radius-servicos-criaverde img{
    height: 70%!important;
      } 
   }
  .border-radius-servicos-criaverde .image-card__inner:hover{
    transform: none!important;
  }
  .border-radius-servicos-criaverde .image-card__inner{
    border-radius: 100px 3px 100px 0px!important;
  }
  .title-heading-services{
    font-weight: 400;
    font-size: 16px;
    color: #3D5656;
    text-align: center;
    margin-top: 80px;
    letter-spacing: 0.2em;
  }
  @media screen and (max-width:991.98px){
    .title-heading-services{
    margin-top: 30px;
    }
  }
  
  .title-h2-each-service h2{
    font-size: 45px!important;
  }
@media screen and  (max-width:991.98px){
    .copy-each-service h3{
    font-size: 20px!important;
    line-height: 30px!important;
  }
}
  .copy-each-service h3{
    color: #3D5656!important;
    font-size: 32px;
    margin-bottom: 25px;
    margin-top: 5px;
    line-height: 48px;
  }
  .copy-each-service p a{
    background: #4E8D4E;
    border-radius: 12px;
    font-weight: 400!important;
    font-size: 16px!important;
    color: #fff;
    text-decoration: none!important;
    padding: 10px 32px;
    margin-right: 10px;
  }
  .copy-each-service p:nth-child(8) a{
    background: #fff;
    border-radius: 12px;
    font-weight: 400!important;
    font-size: 16px!important;
    color: #4E8D4E!important;
    text-decoration: none!important;
    padding: 10px 32px;
    border: 1px solid #4E8D4E;
  }
@media screen and (max-width:1684.99px){
    .copy-each-service p:nth-child(8){
      margin-top: 25px!important;
    }
}
@media screen and (min-width:1685px){
  .copy-each-service p:nth-child(7),   .copy-each-service p:nth-child(8){
    display: inline;
  }
}
  
  @media screen and (max-width: 767.98px){
    .copy-each-service a{
    display: block;
    text-align: center;
    width: 100%;
    }
  }
  .copy-each-service p{
    margin-bottom: 0!important;
    margin-top: 0;
    line-height: 30px;
  }
  .copy-each-service p:nth-child(6){
    margin-bottom: 37px!important;
  }
@media screen and  (max-width:767.98px){
    #block-each-service m-custom-content .sf-custom__block:nth-child(1){
    max-height: 22em;
  }

}
@media screen and (min-width: 768px) and (max-width:991.98px){
    #block-each-service m-custom-content .sf-custom__block:nth-child(1){
    max-height: 41em;
  }
}
@media screen and  (min-width: 992px){
  #block-each-service m-custom-content .sf-custom__block:nth-child(1){
    width: 53%;
    max-height: 50em;
  }
  #block-each-service m-custom-content .sf-custom__block:nth-child(2){
    width: 43%;
  }

 
    .copy-each-service p{margin-top:25px !important}
   
}
  @media screen and (min-width: 992px){
      /*.copy-each-service .sf-custom__block-inner{
    padding: 0px 70px 0px 0px;
    }*/
    .product-recommendations .section__header h2{
    font-size: 36px!important;
    }
    .recently-viewed .section__header h2{
    font-size: 36px!important;
    }
  }
@media screen and (max-width:991.98px){
    .complementary-product-heading{
    font-size: 24px!important;
    }
}


  /*FILTROS MOBILE*/
@media screen and (max-width: 767.98px){
  #CollectionProductGrid .sf__toolbar-wrapper .flex.flex-1.items-center.justify-between{
  display: none!important;
  }
  #CollectionProductGrid .sf__toolbar-wrapper .sf__toggle-filter{
  justify-content: space-between!important;
  width: 100%!important;
  }
  #CollectionProductGrid .sf__toolbar-wrapper .sf__toggle-filter > button > svg{
  display: none!important;
  }
  #CollectionProductGrid .sf__toolbar-wrapper .sf__toggle-filter > button{
  width: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
  border: 1px solid #4e8d4e;
  padding: 1% 0%;
  border-radius: 15px 2px;
  color: #4e8d4e;
  font-weight: 600;
  }
  .sf__toggle-filter span {
    font-size: 76%;
  }
  .add_orderby{
    font-size: 52%;
    margin-right: 5px;
  }
}

/*REMOVE BREADCRUMBS*/
.sf-breadcrumb{
  display: none!important;
}

body.template-product .sf-breadcrumb{
  display: block !important;
}

@media (max-width: 767px){
  .page-servicos #all-services-block-mobile .services-image-card .image-card__content{
  position: absolute!important;
  }

  .copy-each-service p:nth-child(8){margin-top:12px !important}
  .copy-each-service p a{margin-top:20px !important}
  .copy-each-service p:nth-child(8) a{margin-top:12px !important}
}


/*PAGINA SERVIÇOS GERAL - SLIDE MOBILE*/

@media screen and (max-width:991.98px){
  #all-services-block-mobile .other-services-heading {
    display: none!important;
  }
  /*#all-services-block-mobile .image-card--content-stack .image-card__content{
    position: absolute!important;
  }*/
  .service-block .services-image-card .image-card__content{
    border-radius: 30px 3px 30px 3px!important;
  }
  #all-services-block-mobile > m-custom-content{
    flex-wrap: nowrap!important;
    overflow-x: scroll!important;
  }
  #all-services-block-mobile .services-image-card{
    flex: 0 0 70%!important;
  }
  .service-block .block--text{
    padding: 0 10px!important;
  }
  .service-block p, .service-block h3, .service-block .sf-custom__text-cta {
    text-align: center!important;
  }
  @media screen and (max-width: 767.98px){
    #all-services-block-mobile .section__header .section__subheading{
      font-weight: 700;
      font-size: 20px;
    }
  }
  .column-reverse-mobile m-custom-content{
    flex-direction: column-reverse!important;
  }
  .service-block .sf-custom__block .content__subheading{
    margin-top: 20px;
  }
}


/*PAGINA SERVIÇOS INDIVIDUAL - PASSOS PLANTSCAPPING*/

.plantscapping-passos .content__subheading{
  font-weight: 700!important;
  font-size: 24px!important;
}

  @media screen and (max-width: 767.98px){
    .plantscapping-passos .content__subheading{
    text-align: center;
    }
    #plantscapping-special-section .sf-custom__block p{
    text-align: center!important;
    }
    #plantscapping-special-section .plantscapping-passos .content__subheading{
      font-size: 18px!important;
    }
  }

  @media screen and (min-width: 768px) and (max-width:991.98px){
    #plantscapping-special-section .sf-custom__block--image{
      width: 33%;
    }
  }

.envio-ao-cliente .text-color-subtext{
  color: #3D5656!important;
}
.envio-ao-cliente .prose :where(ul>li):not(:where([class~=not-prose] *))::marker{
  color: #3D5656!important;
}
.plantscapping-btn-orcamento a{
  font-size: 16px;
  margin-bottom: 60px;
  border-radius: 12px!important;
}
.plantscapping-btn-orcamento a:hover{
  box-shadow: none!important;
}
@media screen and  (max-width:991.98px){
  .como-funciona-plantscapping{
    font-size: 26px!important;
  }
  .plantscapping-btn-orcamento a{
  font-size: 12px;
  }
  #sf-custom__block--04ffe98c-adca-4447-bc3d-0aba9c48cd35{
    margin-bottom: 15px;
  }
  #sf-custom__block--7e543f80-c21e-4425-8b29-1410c97cf66d{
    margin-top: 15px;
  }
}
@media screen and (max-width: 767.98px){
  .portfolio-plantscapping-text h3{
  font-size: 22px!important;
  }
  .portfolio-plantscapping-text li{
    font-size: 14px!important;
  }
}
.portfolio-plantscapping-text h3{
  font-weight: 700;
  font-size: 32px;
  color: #3D5656;
}
.portfolio-plantscapping-text li{
  font-weight: 400;
  font-size: 16px;
  color: #3D5656!important;
}
.portfolio-plantscapping-text li::marker{
  color: #3D5656!important;
}
@media screen and (max-width: 767.98px){
  .passos-img{
  width: 33%!important;
  }  
}


#shopify-section-template--17838012301592__ea3729bb-5740-40ac-ba74-ec9bfbf5c675, #shopify-section-template--17838012301592__6d072af9-2aef-42ad-aeae-f6eb51951a38{
  background-color: #e0eae2!important;
}

#shopify-section-template--17838012301592__ea3729bb-5740-40ac-ba74-ec9bfbf5c675 m-custom-content{
  padding-top: 60px!important;
}
@media screen and  (max-width:991.98px){
  #shopify-section-template--17838012301592__ea3729bb-5740-40ac-ba74-ec9bfbf5c675 m-custom-content{
  margin-top: 100px!important;
  }
}
#shopify-section-template--17838012301592__6d072af9-2aef-42ad-aeae-f6eb51951a38 m-custom-content{
  padding-bottom: 60px!important;
}

#shopify-section-template--17838012301592__ea3729bb-5740-40ac-ba74-ec9bfbf5c675 .container.section-my, #shopify-section-template--17838012301592__6d072af9-2aef-42ad-aeae-f6eb51951a38 .container.section-my{
  margin-bottom: 0px!important;
  margin-top: 0px!important;
  padding-bottom: 60px!important;
}

/*PAGINA SERVIÇOS INDIVIDUAL - FORM*/
@media screen and (max-width: 767.98px){
  #sf-custom-template--17838012301592__3a2dc371-6697-47a6-9ee5-8572e74d6be0{
    margin-top: 30px;
  }
  #portfolio-criaverde .sf__ms{
      max-height: 23em!important;
  }
}

@media screen and (min-width: 768px){
  
  .plantscapping-portfolio .sf__ms{
    max-height: 45em;
    flex-wrap: nowrap!important;
    overflow-x: auto!important;
    overflow-y: hidden;
    display: flex;
  }
  .plantscapping-portfolio .sf__ms m-custom-content{
    flex-wrap: nowrap!important;
  }
  .plantscapping-portfolio .sf-custom__block--image, #portfolio-criaverde .sf-custom__block--text{
    flex: 0 0 35%;
  } 
}

.form-servicos-orcamentos::after{
    content: "";
    height: 2rem;
    width: 100%;
    background-color: #fff!important;
    display: block!important;
    margin-top: -160px;
    z-index: 60;
    position: absolute;
}
.form-servicos-orcamentos{
  margin-top: 100px;
}
@media screen and (min-width: 768px){

  .container-logo-footer{display:none !Important}
  .page-construcao-de-jardins .form-servicos-orcamentos .section-my, .page-aluguer-de-plantas .form-servicos-orcamentos .section-my, .page-decoracao-de-eventos .form-servicos-orcamentos .section-my, .page-jardins-verticais .form-servicos-orcamentos .section-my, .page-decoracao-de-interiores .form-servicos-orcamentos .section-my{
      margin-top: 100px!important;
  }
}
@media screen and (max-width: 767.98px){
  .form-servicos-orcamentos::after{
    margin-top: -125px!important;
  }
}
@media screen and (min-width: 768px) and (max-width:991.98px){
    .form-servicos-orcamentos::after{
    margin-top: -140px!important;
  }
}
@media screen and  (min-width: 992px){
  .form-servicos-orcamentos h2{
  font-size: 48px!important
  }
}

/*PAGINA SERVIÇOS INDIVIDUAL - Geral*/
@media screen and (max-width: 767.98px){
 .page-construcao-de-jardins #portfolio-criaverde, .page-aluguer-de-plantas #portfolio-criaverde, .page-jardins-verticais #portfolio-criaverde{
  margin-top: 75px;
  margin-bottom: -30px;
  }
  .page-decoracao-de-eventos #portfolio-criaverde{
  margin-top: 50px;
  margin-bottom: -20px;
  }
  .page-decoracao-de-interiores #portfolio-criaverde{
  margin-top: 45px;
  margin-bottom: -25px;
  }
}
@media screen and (max-width:1199.98px){
  #equipa-criaverde .lookbook-image{
  margin-bottom: 20px;
  }
}

#portfolio-criaverde h2{
  font-size: 32px!important;
}

#portfolio-criaverde img{
  border-radius: 50px 3px;
  /*height: 71%;*/
}
@media screen and (min-width: 768px) and (max-width:991.98px){
  #portfolio-criaverde{
    margin-top: 85px!important;
  }
}
@media screen and (max-width: 767.98px){
  .criaverde-banner .sf__slide-block{
    margin-top:unset!important
  }
  #portfolio-criaverde h2{
  font-size: 24px!important;
  }

  .page-construcao-de-jardins .page-header__title, .page-aluguer-de-plantas .page-header__title, .page-decoracao-de-eventos .page-header__title, .page-jardins-verticais .page-header__title, .page-decoracao-de-interiores .page-header__title, .page-plantscapping .page-header__title{
  font-size: 28px;
  }
} 

.services-block-quickview{
  margin-top: -3%;
}
@media screen and (max-width: 767.98px){
  .services-block-quickview{
  margin-top: -15%;
  }
}
@media screen and  (min-width: 768px){
  .services-block-quickview .section__subheading{
  display: none!important;
  }
}

/*PAGINA SERVIÇOS INDIVIDUAL - BLOCK SERVICES QUICKVIEW*/
.other-services-heading p{
  font-weight: 700!important;
  font-size: 32px!important;
  text-transform: inherit!important;
  color: #3D5656!important;
}
.services-block-quickview .sf-custom__block--image_card{
  width: 16%;
} 
.services-block-quickview{
 /* border-top: 1px solid #B5B5B5;
  border-bottom: 1px solid #B5B5B5;*/
  padding-top: 20px;
  padding-bottom: 20px;
}

@media screen and  (min-width: 992px){
  .services-block-quickview m-custom-content{
  justify-content: space-between!important;
  }
  .services-block-quickview{
  margin-right: 120px!important;
  margin-left: 120px!important;
}
}

/*PAGINA SERVIÇOS PLANTSCAPPING*/
@media screen and (max-width:991.98px){
  #plantscapping-special-section .plantscapping-text-top p{
  font-size: 18px!important;
  }
}
#plantscapping-special-section .plantscapping-text-top p{
  font-size: 20px;
}
/*FOOTER*/
.sf-footer form.sf__footer-form-newsletter.form__style-minimal .sf__newletter__form-input::placeholder{
  color: #fff!important;
  font-size: 14px!important;
}

.sf-footer .sf__footer-bottom-inner{
    border-top: 1px solid #fff;
    margin-top: 2.5rem;
    padding-bottom: 1.2rem;
    padding-top: 1.2rem;
}

.logo-white-footer{
    width: 11rem;
    padding-bottom: 50px;
}

.sf-footer{
  padding-top: 3rem!important;
}
@media (max-width: 767px){
  .sf-footer{
    padding-top: 45px!important;
  }
}

/* A margem de 1rem que aqui estava para todos os parágrafos deste contentor saiu a
   2026-09-07. Foi escrita para a estrutura antiga — três parágrafos sem classe —
   e passou a ganhar às regras .cv-footer-contact__*, que têm menos
   especificidade (0,1,0 contra os 0,3,1 desta). Era ela que mantinha 16px entre
   o número e a nota do custo da chamada, mesmo depois de a margem da nota ir a
   zero. Hoje todos os parágrafos deste contentor são do bloco de contactos e têm
   margem própria, mais abaixo neste ficheiro. */

.agree-terms p{
    font-size: 14px!important;
}

.sf__footer-bottom .container-fluid > div > div{
  text-align: end!important;
}
.metodos-de-pagamento-footer > img{
  width: 13em;
}
.criaverde-lider-footer > img{
  width: 15em;
  margin-left: 20px;
}

@media screen and (max-width: 992px){
  .criaverde-lider-footer > img{
    margin-bottom: 20px;
  }
}

#block-each-service .sf-custom__block--image .sf-image::before{
  opacity: 0!important;
  background-color: transparent!important;
  color: transparent!important;
}

@media (max-width: 992px){
  /*.sf-tabs--responsive .sf__accordion-item .sf__accordion-content{
    display: contents!important;
  }
  .sf-tabs--responsive .sf__accordion-item[data-block-type="details"] .sf__accordion-button{
    display: none!important;
  }*/

  .sf-tabs--responsive .sf__accordion-item.sf-tab-content[data-block-type="tab"] .sf__accordion-button{font-weight:600}

  .sf-tabs--responsive .sf__accordion-item.sf-tab-content[data-block-type="tab"] .sf__accordion-button::after{
    /*display:none !important*/
  }
  
  .mobile-column-reverse{
    display: flex;
    flex-direction: column-reverse;
  }
  .sf-footer .sf__accordion-item .sf__footer-middle{
    padding-top: 0px!important;
  }
  .sf-footer .sf__footer-bottom{
    padding-bottom: 0px!important;
  }
  .mega-menu-customer-criaverde{
    width: 100%;
    display: block;
  }
  .menu-customer-logo{
    width: 100px;
    height: auto;
    margin: 0.5rem 0.3rem 1.5rem;
  }
  .criaverde-menu-customer-container{
    margin-bottom: 0rem!important;
    padding-bottom: 1rem!important;
    background-color: #083508!important;
  }
  .criaverde-menu-customer-container a{
    color: #fff!important;
    padding: 0.8rem 0.3rem;
  }
  .container-social-media-menu-customer{
    display: flex;
    flex-direction: row;
    justify-content: end;
  }
  .container-social-media-menu-customer a{
    padding: 0.8rem 0.8rem!important;
  }
  .metodos-de-pagamento-footer img{
  margin-top: -10px;
  }
}

@media screen and  (min-width: 768px){
    .container-logo-footer{
    display: none!important;
  }
}

@media screen and (max-width:991.98px){
  .sf-footer__accordion .sf__accordion-item .sf__accordion-button:after{
  filter: invert(1);
  }
  .container-logo-footer{
    display: flex;
    justify-content: center;
  }
  .sf__footer-bottom .container-fluid > div > div{
  text-align: center!important;
  }
}

@media screen and (min-width: 768px) and (max-width:991.98px){
  .agree-terms{
    margin-bottom: 40px;
  }
  .sf-footer .sf__footer-bottom{
    padding-bottom: 0px!important;
  }
  .sf__footer-bottom .container-fluid > div > div{
    margin-bottom: 0px!important;
  }
}


/*MARGENS GERAL*/
@media screen and  (min-width: 992px){
  .service-block, .block-image-with-text-style{
    padding-left: 40px;
    padding-right: 40px;
    margin-right: 71.5px;
    margin-left: 71.5px;
  }
}
.services-block-quickview{
    padding-left: 0px!important;
    padding-right: 0px!important;
}
@media screen and (min-width: 768px){
  #all-services-block-mobile{
    padding-right: 0px;
    padding-left: 0px;
  }
}
@media screen and (max-width:991.98px){
  .services-block-quickview > div{
    padding-left: 1rem!important;
    padding-right: 1rem!important;
  }
}
@media screen and (max-width:991.98px){
  .service-block, .block-image-with-text-style{
    padding-left: 16px;
    padding-right: 16px;
  }
}

/*ESPAÇAMENTOS GERAL*/
@media screen and (max-width: 767.98px){
  .services-block-quickview{
    margin-top: -110px!important;
    margin-bottom: -50px!important;
  }
  .copy-each-service h3{
    margin-top: -20px!important;
  }
  .page-plantscapping .form-servicos-orcamentos{
    margin-top: 55px!important;
  }
  .page-plantscapping .scroll-content h3{
    padding-top: 25px!important;
  }
  .page-plantscapping #shopify-section-template--17838012301592__ea3729bb-5740-40ac-ba74-ec9bfbf5c675 .container.section-my{
    padding-bottom: 20px!important;
  }
  .page-plantscapping #shopify-section-template--17838012301592__ea3729bb-5740-40ac-ba74-ec9bfbf5c675 m-custom-content {
    padding-top: 45px!important;
    margin-top: 85px!important;
  } 
  .template-product .section__heading{
    font-size: 20px!important;
  }
  .template-product .recently-viewed .container{
    margin-top: 50px;
    margin-bottom: -5px;
  } 
  .template-product .mobile-column-reverse{
    margin-bottom: -35px;
  }
  .template-product .productDetails h2{
    font-size: 23px;
  }
  .template-product .sf-po__option-button{
    font-size: 13px;
  }
}
/*CUIDA EVENTO*/
.cuida-text-block h3, .custom-01 .content__heading{
  color:var(--color-heading-text);
}
.cuida-text-block{
  padding:2rem !important
}
.custom-01 .sf-custom__image-with-text .sf-custom__block:first-child{
  padding:0 calc(var(--column-gap)/2)
}
.custom-01 .sf-custom__block{
  text-align:center;
  margin:0 auto
}
.custom-03 .sf-custom__image-with-text{
  text-align:center
}
.custom-01 .sf-custom__image-with-text .image__box, .custom-03 .sf-custom__image-with-text .image__box{
  width:150px!important;
  margin:auto
}
.custom-03 .sf-custom__grid{
  justify-content:center
}
.custom-03 .content__heading, .custom-01 .content__heading{
  font-size:2em
}
#simulador{
  margin-top:-5rem!important
}
@media screen and (max-width:767px){
  .custom-01 .sf-custom__block{
    text-align:center;
    margin:1rem auto
  }
  .custom-03 .content__heading, .custom-01 .content__heading{
    font-size:1.5em
  }
  #simulador{
    margin-top:0!important
  }


  body.template-addresses .sf-customer__nav, body.template-account .sf-customer__nav, body.page-wishlist .sf-customer__nav{
    flex: 0 0 100%!important;
  }

  body.template-addresses .flexBox.flexColumn.border-green, body.template-account .flexBox.flexColumn.border-green, body.page-wishlist .flexBox.flexColumn.border-green{
    flex:  0 0 100% !important;
    margin: 4%;
  }

  body.template-addresses .py-8.flex, body.template-account .py-8.flex, body.page-wishlist .py-8.flex{
    flex-wrap:wrap!important;
  }

  
}




/* ---------------------------------------------------------------------------
   Acessibilidade — reforço do utilitário de conteúdo visualmente oculto.
   O .visually-hidden do chunk.css usa apenas clip (deprecado); clip-path é o
   equivalente moderno. Usado pelo H1 da homepage em layout/theme.liquid.
   --------------------------------------------------------------------------- */
.visually-hidden {
  clip-path: inset(50%);
}

/* ---------------------------------------------------------------------------
   Cartão de página nos resultados de pesquisa
   As classes page-card* já eram emitidas pelo sections/page-search.liquid, mas
   não tinham uma única linha de CSS em todo o tema: a etiqueta saía como texto
   solto por cima do título. Vivem aqui, e não no collection.css do Minimog,
   para sobreviverem a uma atualização do tema base.
   --------------------------------------------------------------------------- */
.page-card {
  height: 100%;
}

.page-card__inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1.5rem;
  border: 1px solid var(--secondary-green, #4E8D4E);
  border-radius: var(--border-radius, 30px 3px 30px 3px);
  color: inherit;
  text-decoration: none;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.page-card__inner:hover,
.page-card__inner:focus-visible {
  background-color: rgba(78, 141, 78, 0.06);
  box-shadow: 0 2px 12px rgba(61, 86, 86, 0.12);
}

.page-card__badge-label {
  display: inline-block;
  padding: 0.15em 0.75em;
  border-radius: 999px;
  background-color: var(--secondary-green, #4E8D4E);
  color: #fff;
  font-size: 0.75rem;
  line-height: 1.6;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.page-card__title {
  margin: 0;
  color: var(--primary-green, #3D5656);
}

.page-card__excerpt {
  margin-top: 0.75rem;
  margin-bottom: 0;
  color: #666;
  font-size: 0.9375rem;
  line-height: 1.6;
}

/* ---------------------------------------------------------------------------
   Convite a pedir artigos, nos resultados de pesquisa
   Dois estados, ambos servidos pelo snippets/cv-search-fallback.liquid:
   bloco destacado quando não há resultados, linha discreta quando há.
   --------------------------------------------------------------------------- */
.cv-search-fallback {
  max-width: 46rem;
  margin: 3rem auto;
  padding: 2.5rem 1.75rem;
  border: 1px solid var(--secondary-green, #4E8D4E);
  border-radius: var(--border-radius, 30px 3px 30px 3px);
  background-color: rgba(78, 141, 78, 0.04);
  text-align: center;
}

.cv-search-fallback__title {
  margin: 0 0 0.75rem;
  color: var(--primary-green, #3D5656);
  font-size: 1.5rem;
  line-height: 1.3;
}

.cv-search-fallback__text {
  margin: 0 auto 1.75rem;
  max-width: 34rem;
  color: #555;
  line-height: 1.6;
}

.cv-search-fallback__cta {
  display: inline-block;
}

.cv-search-fallback__contacts {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(78, 141, 78, 0.25);
}

.cv-search-fallback__contacts-intro {
  display: block;
  margin-bottom: 0.75rem;
  color: #777;
  font-size: 0.875rem;
}

.cv-search-fallback__stores {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cv-search-fallback__hours {
  color: #777;
}

.cv-search-fallback__stores a {
  color: var(--primary-green, #3D5656);
  text-decoration: underline;
}

.cv-search-fallback__store-name {
  color: #777;
}

.cv-search-fallback__inline {
  margin: 2.5rem 0 0;
  color: #666;
  font-size: 0.9375rem;
  line-height: 1.6;
  text-align: center;
}

.cv-search-fallback__inline a {
  color: var(--primary-green, #3D5656);
  text-decoration: underline;
}

@media (min-width: 768px) {
  .cv-search-fallback {
    padding: 3rem 2.5rem;
  }

  .cv-search-fallback__title {
    font-size: 1.75rem;
  }
}

/* ---------------------------------------------------------------------------
   Convite a solicitar, no popup de pesquisa
   Escondido por omissão. O app.js põe a classe cv-search-empty no [data-result]
   quando a pesquisa não devolve nada — que é quando o botão "Mais Resultados"
   é escondido e o popup ficava sem saída nenhuma.
   --------------------------------------------------------------------------- */
.cv-popup-fallback {
  display: none;
}

.cv-search-empty .cv-popup-fallback {
  display: block;
  margin: 1.5rem auto 0;
  max-width: 32rem;
  color: #666;
  font-size: 0.9375rem;
  line-height: 1.6;
  text-align: center;
}

.cv-popup-fallback a {
  color: var(--primary-green, #3D5656);
  text-decoration: underline;
}

/* ---------------------------------------------------------------------------
   Gaveta do carrinho — usabilidade em telemóvel
   Sobrepõe regras do chunk.css do Minimog a partir desta camada, em vez de as
   editar lá. Tudo aqui está limitado ao .scd__footer, que a página do carrinho
   não usa — ela partilha .scd__wrapper, .scd__content, .scd__body, .scd__items,
   .scd__summary e .scd__trust-badge, mas tem rodapé próprio.
   --------------------------------------------------------------------------- */

/* O rodapé caía na zona onde a barra de gestos do iPhone intercepta toques.
   Primeiro uso de safe-area no tema: env() devolve 0 onde não se aplica, pelo
   que não altera nada fora dos ecrãs com recorte. Padrão a seguir daqui em
   diante, em vez de valores fixos. */
.scd__footer {
  padding-bottom: calc(1rem + env(safe-area-inset-bottom));
}

/* INERTE HOJE — mantido de propósito.
   O chunk.css usa a mesma variável como max-height e min-height, o que fixaria a
   área de itens na altura máxima. Só que essa regra é
   section.sf-header.cart-has-items .scd__items e NUNCA casa: a classe
   cart-has-items é posta na section.sf-header, e a gaveta é injetada no
   #cart-drawer-container, que vive dentro do elemento main, fora dessa secção. Medido em
   browser a 2026-09-02: max-height efetivo "none".
   Fica escrito porque passa a valer no dia em que a gaveta mude de sítio ou em
   que o seletor seja corrigido. O espaço em branco real vem do flex-grow do
   .scd__body, que é o comportamento normal de uma gaveta de altura total. */
section.sf-header.cart-has-items .scd__items {
  min-height: 0;
}

/* A checkbox tem 18px (chunk.css: 1.125rem), muito abaixo dos 44px
   recomendados. O rótulo passa a ser uma caixa de 44x44 com a checkbox ao
   centro; a margem negativa de 13px cancela exatamente esse centramento
   (44/2 - 18/2), para o alinhamento à esquerda não se deslocar. */
.scd__footer .agree-terms {
  display: flex;
  align-items: flex-start;
  width: 100%;
  text-align: left;
}

.scd__footer .agree-terms__box {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-left: -13px;
  cursor: pointer;
}

/* Alinha a primeira linha do texto com o centro da checkbox. */
.scd__footer .agree-terms__text {
  flex: 1 1 auto;
  padding-top: 13px;
}

.scd__footer .agree-terms__text p {
  margin: 0;
}

.scd__footer .agree-terms__text a {
  text-decoration: underline;
}

/* O botão de fechar da gaveta tinha p-2 (8px) à volta de um SVG de 24px: 40px de
   área de toque, abaixo dos 44 recomendados. O padding saiu do markup e vive
   aqui porque p-[10px] não existe no CSS compilado — o build do tema é purgado e
   só traz as classes já presentes no código. Ganha também o verde da marca, em
   vez do preto herdado do Minimog. */
.scd__close {
  padding: 10px; /* 10 + 24 + 10 = 44 */
  color: var(--primary-green, #3D5656);
}

/* ---------------------------------------------------------------------------
   Página do carrinho (/cart)
   O rodapé da gaveta não existe aqui, pelo que estas regras têm âmbito próprio.
   --------------------------------------------------------------------------- */

/* O aviso do valor mínimo era estilizado com element.style dentro do script
   inline da secção; o script passa a pôr-lhe só a classe e o texto. A margem
   mantém-se, mas o vermelho puro dá lugar ao #c74230 que o tema já usa nos
   descontos do carrinho — passa a haver um só vermelho de aviso. */
.mov-warning {
  margin-top: 10px;
  color: #c74230;
}

/* Mesmo tratamento da gaveta: rótulo só à volta da caixa, 44x44, e o texto ao
   lado ligado por aria-labelledby. O flex: 0 0 auto é o que aqui mais importa —
   sem ele a caixa é um item flex que encolhe, e a 400px comprimia-se de 18px
   para 13, ficando oval. */
.sf-cart__buttons-container .agree-terms {
  display: flex;
  align-items: flex-start;
  width: 100%;
  text-align: left;
}

.sf-cart__buttons-container .agree-terms__box {
  flex: 0 0 auto;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-left: -13px; /* cancela o centramento: 44/2 - 18/2 */
  cursor: pointer;
}

.sf-cart__buttons-container .agree-terms__text {
  flex: 1 1 auto;
  padding-top: 13px;
}

.sf-cart__buttons-container .agree-terms__text p {
  margin: 0;
}

/* O Google Pay ficava encostado ao botão principal, sem respiro nenhum. */
.sf-cart__buttons-container .additional-checkout-buttons {
  margin-top: 0.75rem;
}


/* ---------------------------------------------------------------------------
   Página do carrinho — composição
   Âmbito .sf-cart, que é a classe do wrapper desta página. A gaveta é
   .scd__wrapper SEM .sf-cart, e o próprio chunk.css se apoia nessa distinção
   (.scd__wrapper:not(.sf-cart)). Nada daqui lhe chega, apesar de .scd__summary,
   .scd__items e .scd-item serem classes partilhadas pelas duas vistas.
   --------------------------------------------------------------------------- */

/* Contrapartida do container: true na chamada do page-title. O .page-header traz
   padding: 2rem 1rem do chunk.css, e o .container que agora vive lá dentro soma
   o seu próprio padding-left: 1rem — o título ficava 16px à direita da tabela,
   cujo .container é filho direto da secção e só paga o padding uma vez.

   Acima de 1536px isto não se via: o .container perde o padding lateral nessa
   media query, e os 16px do .page-header são absorvidos pela folga da
   centragem. A 1280 e abaixo viam-se. Anular o padding horizontal do
   .page-header deixa o padding do contentor interior como o único, e os dois
   passam a bater em qualquer largura.

   Âmbito .template-cart: as outras sete secções que passam container: true têm
   o mesmo desvio, mas com títulos centrados, onde 16px não se lêem. Corrigi-las
   é decisão à parte. */
.template-cart .page-header {
  padding-left: 0;
  padding-right: 0;
}

/* Os separadores já existiam — 1px solid var(--color-border) — mas o
   settings.color_border está definido como #ffffff, ou seja, branco sobre
   branco. Não se toca nessa definição: são dez usos em todo o tema. Aqui só se
   recolore o traço, com âmbito desta página. */
.sf-cart .sf-cart__table-head,
.sf-cart .sf-cart__item {
  border-bottom-color: var(--cv-hairline);
}

/* Não há exceção :last-child no Minimog, pelo que a última linha deixava um
   traço solto por baixo, já sem nada para separar. */
.sf-cart .sf-cart__item:last-child {
  border-bottom: 0;
}

/* O bloco de checkout flutuava sem fundo, encostado à direita e com dois terços
   da largura vazios ao lado. Ganha o mesmo #f7f7f7 do rodapé da gaveta, para as
   duas vistas do carrinho se lerem como a mesma coisa.
   A margem negativa de -3rem que o chunk.css lhe dá tem de sair: servia para o
   conteúdo alinhar sem fundo visível, mas com fundo faria o painel transbordar
   6rem para fora do contentor. */
.sf-cart .sf-cart__summary {
  margin: 0;
  padding: 2rem;
  background-color: #f7f7f7;
  border-radius: var(--border-radius, 30px 3px 30px 3px);
}

/* A repartição das colunas da tabela. O Minimog dá 20% ao preço, 20% à
   quantidade e 12% ao total, e a coluna do produto fica com o resto — números
   pensados para a tabela ocupar o contentor inteiro, 1280px. Os 12% do total
   são 92px a 768 de ecrã e 100 dentro do grid: em ambos os casos o valor parte
   em duas linhas, porque "€10,95 EUR" precisa de ~85 mais o padding.

   Os 20% da quantidade, esses, sobram em qualquer largura: o seletor mede
   ~104px. É de lá que vem o que falta ao total. O padding das colunas desce de
   1.5rem para 1rem pela mesma razão — 3rem por coluna, 12rem nas quatro, é
   muito numa tabela que já não tem 1280.

   A partir de 768 e não sempre: abaixo disso o layout da linha é outro — as
   colunas da quantidade e do total estão hidden, o seletor de quantidade passa
   a viver dentro da coluna do preço, e o .sf-cart__table-col vale 40%. Aplicar
   aqui os 18% deixava o preço com ~66px em telemóvel, com o seletor lá dentro.

   As duas exceções do chunk.css têm de ser repetidas: têm a mesma
   especificidade que a regra do padding e perdiam-na por ordem de cascata, o
   que reporia padding nos dois bordos da tabela e desalinharia outra vez o
   "Produto" do título. */
@media (min-width: 768px) {
  .sf-cart .sf-cart__table-col {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .sf-cart .sf-cart__table-col:first-child {
    padding-left: 0;
  }

  .sf-cart .sf-cart__table-price {
    width: 18%;
  }

  .sf-cart .sf-cart__table-quantity {
    width: 18%;
  }

  .sf-cart .sf-cart__table-subtotal {
    width: 16%;
    padding-right: 0;
  }
}

/* O formulário desta página é uma coluna só. O .sf-cart__table{flex:1} que o
   chunk.css lhe dá é código morto: nada põe o .sf-cart__form em flex, e o
   display efetivo é block — medido em browser. A folha de estilo do Minimog foi
   escrita para uma linha de duas colunas que o markup nunca chega a criar.
   Aqui cria-se, sem tocar no Liquid.

   1200px e não 1024: a coluna do produto tem de acomodar 110px de imagem mais
   1.5rem de padding do bloco de texto, e o .sf-cart__table-col gasta 3rem de
   padding horizontal por coluna. A 1024 sobravam 128px para o título do
   produto; a 1200 sobram 212, que dão duas linhas. Baixar o breakpoint obriga
   a rever as larguras das colunas do Minimog, e isso é outro commit. */
@media (min-width: 1200px) {
  .sf-cart .sf-cart__form {
    display: grid;
    /* minmax(0, 1fr) e não 1fr: o 1fr é minmax(auto, 1fr) e recusaria encolher
       abaixo do conteúdo mais largo, pelo que um título de produto comprido
       empurrava o painel para fora do contentor. */
    grid-template-columns: minmax(0, 1fr) 400px;
    gap: 3rem;
    align-items: start;
  }

  /* O div.flex.justify-end do Liquid passa a ser a segunda célula, já com a
     largura exata do painel. Anular-lhe o flex evita que ele volte a alinhar o
     que já está alinhado.
     Sem sinais de maior/menor no comentário de propósito: o ficheiro é .liquid
     e passa pelo parser de HTML do theme check, que lia a tag de exemplo como
     um elemento por fechar e devolvia LiquidHTMLSyntaxError. */
  .sf-cart .sf-cart__form > .flex.justify-end {
    display: block;
  }

}

/* A moldura da imagem não declara flex-shrink e é item de um flex container.
   Com a tabela larga nunca se notou; estreitada pelo grid, o texto ao lado
   comprimia-a de 110px para ~80 e as linhas ficavam com imagens de tamanhos
   diferentes. A gaveta já resolve isto no .scd-item__image do chunk.css, com
   flex: 0 0 auto — a página do carrinho é que ficou sem o equivalente. */
.sf-cart .sf-cart__item-product-image {
  flex: 0 0 auto;
}

/* O carrinho vazio tem de sair do grid. O chunk.css esconde o painel com
   body.cart-empty .scd__wrapper .sf-cart__summary{display:none}, mas não
   esconde o invólucro que o envolve: em grid, esse invólucro vazio continuava a
   ocupar a segunda coluna de 400px e a mensagem "O seu carrinho está vazio",
   que é text-center, ficava centrada só na coluna da esquerda. */
body.cart-empty .sf-cart .sf-cart__form {
  display: block;
}

/* Abaixo do grid o painel deixa de flutuar e ocupa a largura da tabela. O
   intervalo já estava partido antes deste commit: o chunk.css dá-lhe
   width: 400px sem qualquer media query, e o justify-end encostava-o à direita
   — a 900px de ecrã eram ~470px vazios ao lado.

   O botão e os Termos ficam limitados a 420px e alinhados à direita. Sem isso,
   o w-full do botão dava-lhe a largura toda do painel: uma faixa cinzenta de
   900px com um botão de 900px não se lê como um painel de checkout. O
   cart-addons (Nota/Envio/Cupão) é o único conteúdo que ganha com a largura —
   é uma linha de três — e fica a ocupá-la.

   Engloba o antigo bloco @media (max-width: 767px), que só dava o margin-top.
   O .98 segue a convenção já usada cinco vezes neste ficheiro, para não abrir
   uma fresta de 1px em zoom fracionário.

   Em telemóvel nada muda: abaixo de 480 o chunk.css já dá width: 100%, o
   margin-top já cá estava, e o max-width do botão não chega a morder num painel
   de ~368px. O cart-addons continua a ter o fundo do painel a separá-lo da
   última linha de produto. */
@media (max-width: 1199.98px) {
  .sf-cart .sf-cart__summary {
    width: 100%;
    margin-top: 1.5rem;
  }

  .sf-cart .sf-cart__buttons-container {
    max-width: 420px;
    margin-left: auto;
  }
}


/* ---------------------------------------------------------------------------
   Componente: agree-terms com rótulo e texto separados
   O padrão do Minimog é um rótulo a envolver a caixa E o texto. O agree_text é
   richtext e traz links para os Termos e a Política: conteúdo interativo dentro
   de um rótulo é HTML inválido, e num telemóvel o toque no link compete com
   marcar a caixa. No padrão novo o rótulo envolve só a caixa, com área de toque
   própria, e o nome acessível vem do texto ao lado por aria-labelledby.

   Sem sinais de maior/menor nos comentários deste ficheiro: ele é .liquid e
   passa pelo parser de HTML do theme check, que lê uma tag de exemplo como um
   elemento por fechar e devolve LiquidHTMLSyntaxError.

   O modificador --split existe para estas regras não chegarem às instâncias que
   ainda usam o markup antigo. Sem ele, um display: flex num .agree-terms sem
   âmbito mudaria o rodapé — que está em todas as páginas do site — no commit
   que devia ser inerte. Com ele, este bloco não casa com nada até o markup
   passar a emiti-lo.

   A gaveta e a página do carrinho já usam este padrão, mas com regras próprias
   em .scd__footer e .sf-cart__buttons-container, escritas antes deste
   componente existir. Ficam como estão: passá-las a usar o snippet implica
   mexer no que acabou de ser publicado, e isso é trabalho à parte.
   --------------------------------------------------------------------------- */

.agree-terms--split {
  display: flex;
  align-items: flex-start;
  width: 100%;
  text-align: left;
}

/* A checkbox tem 18px (chunk.css: 1.125rem), muito abaixo dos 44 recomendados.
   O rótulo passa a ser uma caixa de 44x44 com a checkbox ao centro; a margem
   negativa cancela exatamente esse centramento (44/2 - 18/2), para o
   alinhamento à esquerda não se deslocar.
   O display é declarado aqui e não herdado do .agree-terms label do theme.css:
   o componente não deve depender de uma regra escrita para o markup antigo. */
.agree-terms--split .agree-terms__box {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-left: -13px;
  cursor: pointer;
}

/* Alinha a primeira linha do texto com o centro da checkbox. */
.agree-terms--split .agree-terms__text {
  flex: 1 1 auto;
  padding-top: 13px;
}

.agree-terms--split .agree-terms__text p {
  margin: 0;
}

/* Em telemóvel o alvo de 44px acabava exactamente onde o texto começa: tocar
   nas primeiras letras não fazia nada, e um pixel à esquerda alternava a caixa.
   Uma fronteira invisível a meio de uma zona que parece toda tocável, e o preço
   de o rótulo ter deixado de envolver o texto. Não se recupera o toque no texto
   aqui — isso exigiria JavaScript, e é decisão à parte —, mas afasta-se a
   fronteira do sítio onde ela engana.

   O margin-left negativo fica. Cheguei a tirá-lo, para os 44px caberem todos
   dentro da coluna, e foi sobre-correção: os 13px que transbordam caem sobre o
   padding do rodapé, onde não há mais nada para tocar, e sem a margem a caixa
   deslocava-se para 29 enquanto o campo de email e a descrição começam em 16.
   Trocava um problema invisível por um desalinhamento visível. */
@media (max-width: 767.98px) {
  .agree-terms--split .agree-terms__text {
    padding-left: 0.5rem;
  }
}


/* ---------------------------------------------------------------------------
   Rodapé — o botão da newsletter e o preenchimento automático

   O botão era uma seta em position:absolute, sobreposta ao campo e encostada ao
   bordo direito. Passou a ser um botão com texto, "Subscrever", fora do campo e
   a seguir à caixa dos Termos. A seta não dizia o que fazia, e defendê-la do
   fundo — que é o que este bloco fazia antes — era tratar o sintoma.

   O que se segue é o que a troca obriga a escrever. O Minimog não tem estilo de
   botão que sirva um fundo escuro sem correção: das três variantes possíveis
   aqui, duas ficam a 4,0:1 e a terceira só se aguenta em repouso.
   --------------------------------------------------------------------------- */

/* 1. Layout. O botão fica por baixo da caixa dos Termos, com a linha toda em
      telemóvel e largura automática a partir de 768px.

      Não há modo em linha, e a razão foi medida e não estimada. Mesmo a 1440px
      o formulário tem 443px: o rodapé é lg:flex-nowrap, e a coluna de 50%
      encolhe muito abaixo de metade quando os blocos partilham a linha. O texto
      dos Termos ocupa esses 443px inteiros. Não existe largura de ecrã onde a
      caixa e o botão caibam lado a lado — e um flex-direction:row que nunca
      dispara é código morto a fingir que está a fazer alguma coisa.

      Larguras úteis medidas, já com o botão fora do campo: 328px a 360,
      343 a 375, 398 a 430, 443 em computador.

      A ordem no DOM é campo, Termos, botão, e a ordem visual é a mesma. Nada
      aqui usa "order": pôr o botão acima do consentimento é o que se veio
      corrigir, e fazê-lo por CSS devolvia o problema a quem vê, com a tabulação
      a saltar para trás. */
.sf-footer form.sf__footer-form-newsletter .sf__footer-newsletter-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  /* A separação interna passa a ser o gap, e a margem que era da caixa dos
     Termos passa para a linha inteira. Os dois valores são os que já lá
     estavam — o do chunk.css e o da regra 768–991.98 deste ficheiro —, para o
     espaço por baixo do formulário não mudar com este commit. */
  margin-bottom: 15px;
}

.sf-footer form.sf__footer-form-newsletter .sf__footer-newsletter-actions .agree-terms--split {
  margin-bottom: 0;
}

@media screen and (min-width: 768px) and (max-width: 991.98px) {
  .sf-footer form.sf__footer-form-newsletter .sf__footer-newsletter-actions {
    margin-bottom: 40px;
  }
}

/* O campo reservava 3rem à direita para a seta que lhe estava por cima. A seta
   saiu, e a reserva ficava um vazio à direita do texto. Quem a impõe é o
   chunk.css (padding:.375rem 3rem), não a classe px-12 que estava no markup —
   essa nunca valeu nada, com 0,1,0 contra os 0,3,1 do seletor do tema, e por
   isso saiu do Liquid sem que nada se mexesse. O minimal já punha o
   padding-left a 0; isto acerta o outro lado. */
.sf-footer form.sf__footer-form-newsletter.form__style-minimal .sf__newletter__form-input {
  padding-right: 0;
}

/* 2. Cor em repouso. O botão usa sf__btn-secondary + sf__btn-light, o par do
      Minimog para fundo escuro: transparente, com borda e rótulo brancos, o que
      dá 13,79:1 sobre o rodapé. As alternativas com fundo ficavam ambas a
      4,0:1 — branco sobre o #4e8d4e de --color-btn-bg —, abaixo dos 4,5:1
      exigidos a texto de 14px.

      O sf__btn-light escreve #fff literal. Repete-se aqui pela variável, para o
      botão acompanhar o dia em que a cor do texto do rodapé mudar no admin. O
      seletor é longo por necessidade: precisa de 0,3,1 para passar à frente do
      .sf__btn.sf__btn-secondary.sf__btn-light do chunk.css, que é 0,3,0. */
.sf-footer form.sf__footer-form-newsletter .sf__footer-newsletter-submit {
  width: 100%;
  border-color: var(--color-footer-text);
  color: var(--color-footer-text);
}

@media screen and (min-width: 768px) {
  .sf-footer form.sf__footer-form-newsletter .sf__footer-newsletter-submit {
    width: auto;
  }
}

/* 3. O :hover, que é o mesmo problema que este bloco já tinha resolvido para a
      seta e que a troca de elemento devolve: o chunk.css pinta qualquer
      sf__btn-secondary em :hover e :focus com fundo var(--color-btn-bg-hover),
      #4e8d4e, e rótulo branco — 4,0:1. Aqui inverte-se o botão, fundo branco e
      rótulo da cor do rodapé, o que devolve os mesmos 13,79:1 do repouso e faz
      do estado uma inversão visível, não um desvanecimento.

      O !important não é preferência: a regra do chunk.css traz !important no
      color e no border-color, e sem ele a especificidade não chega. O
      background-color não o traz, e por isso vai sem — a diferença é
      deliberada, não descuido.

      A cor do rótulo segue o fundo do rodapé, que abaixo de 767px é outra
      variável. É a mesma troca que o bloco do autofill faz mais abaixo, no
      mesmo ponto exato e pela mesma razão. */
.sf-footer form.sf__footer-form-newsletter .sf__footer-newsletter-submit:hover,
.sf-footer form.sf__footer-form-newsletter .sf__footer-newsletter-submit:focus {
  background-color: var(--color-footer-text);
  border-color: var(--color-footer-text) !important;
  color: var(--color-footer-background) !important;
}

@media screen and (max-width: 767px) {
  .sf-footer form.sf__footer-form-newsletter .sf__footer-newsletter-submit:hover,
  .sf-footer form.sf__footer-form-newsletter .sf__footer-newsletter-submit:focus {
    color: var(--color-footer-background-mobile) !important;
  }
}

/* 4. O foco, e o !important que aqui não é opcional. O .sf__btn traz
      outline:none na base, mas o problema é maior: o chunk.css tem um
      :focus{outline:none!important} global, sem seletor nenhum a que se possa
      fugir por especificidade. Anula o contorno de foco de TODO o site.

      Foi apanhado a medir este botão, e traz uma correção ao commit anterior:
      a regra de :focus-visible que o 51cec1e deu à seta nunca funcionou. Está
      publicada desde 4 de setembro e é inerte — o mesmo !important comia-a.
      Um contorno declarado não é um contorno visível, e a diferença só aparece
      com o valor computado à frente.

      O :focus-visible casa também :focus, portanto o !important global aplica-se
      na mesma; a saída é responder com !important e especificidade maior. */
.sf-footer form.sf__footer-form-newsletter .sf__footer-newsletter-submit:focus-visible {
  outline: 2px solid var(--color-footer-text) !important;
  outline-offset: 2px;
}

/* 5. O preenchimento automático. O campo do rodapé é form__style-minimal:
      background transparent, só com um traço em baixo. Quando o iOS preenche o
      email — e sugere-o sozinho, por o campo ser type="email" —, o WebKit pinta
      o fundo de amarelo claro por um mecanismo que IGNORA background-color.

      Este bloco nasceu por causa da seta branca, que sobre esse amarelo passava
      de 13,79:1 para 1,04:1. A seta saiu do campo e já não é ela que está em
      causa — mas a regra fica, e o motivo aguenta-se sozinho: o texto do campo
      é var(--color-footer-subtext), branco, e sobre o amarelo dá o mesmo
      1,04:1. O email preenchido ficava ilegível com botão ou sem ele.

      O tema não trata autofill em lado nenhum: zero regras com "autofill" em
      todas as folhas de estilo da página, confirmado em runtime. A maioria dos
      campos escapa ao problema porque o chunk.css lhes força fundo branco, mas
      esse seletor tem uma lista de :not() e o campo do rodapé está lá dentro
      duas vezes, por .form-control e por .newsletter__input-st.

      O que pega é a sombra interior, que o autofill não sobrepõe. A cor vem da
      variável e não fixa: o fundo do rodapé muda no admin, e uma cor fixa
      deixaria aqui um retângulo da cor antiga.

      O -webkit-text-fill-color devolve o texto ao branco do campo, 13,79:1
      sobre o rodapé. Sem ele o email preenchido ficaria com a cor que o WebKit
      escolher, sobre um fundo que já não é o dele.

      As duas variantes ficam em blocos separados de propósito. Um seletor
      desconhecido invalida a lista inteira onde aparece: juntar :-webkit-autofill
      e :autofill numa só lista apagaria ambos nos motores que só conhecem um. */
.sf-footer .sf__newletter__form-input:-webkit-autofill,
.sf-footer .sf__newletter__form-input:-webkit-autofill:hover,
.sf-footer .sf__newletter__form-input:-webkit-autofill:focus {
  -webkit-box-shadow: inset 0 0 0 1000px var(--color-footer-background);
  box-shadow: inset 0 0 0 1000px var(--color-footer-background);
  -webkit-text-fill-color: var(--color-footer-subtext);
  caret-color: var(--color-footer-subtext);
  /* O WebKit anima o fundo do autofill; adiar a transição impede o clarão. */
  transition: background-color 9999s ease-in-out 0s;
}

.sf-footer .sf__newletter__form-input:autofill,
.sf-footer .sf__newletter__form-input:autofill:hover,
.sf-footer .sf__newletter__form-input:autofill:focus {
  box-shadow: inset 0 0 0 1000px var(--color-footer-background);
  -webkit-text-fill-color: var(--color-footer-subtext);
  caret-color: var(--color-footer-subtext);
  transition: background-color 9999s ease-in-out 0s;
}

/* O rodapé tem fundo próprio abaixo de 767px, e a sombra tem de o acompanhar,
   senão o retângulo fica da cor do desktop. Usa-se 767px e não a convenção
   767.98 deste ficheiro: é a media query exata que o chunk.css usa para trocar
   a variável, e as duas não podem discordar nem por meio pixel. */
@media screen and (max-width: 767px) {
  .sf-footer .sf__newletter__form-input:-webkit-autofill,
  .sf-footer .sf__newletter__form-input:-webkit-autofill:hover,
  .sf-footer .sf__newletter__form-input:-webkit-autofill:focus {
    -webkit-box-shadow: inset 0 0 0 1000px var(--color-footer-background-mobile);
    box-shadow: inset 0 0 0 1000px var(--color-footer-background-mobile);
  }

  .sf-footer .sf__newletter__form-input:autofill,
  .sf-footer .sf__newletter__form-input:autofill:hover,
  .sf-footer .sf__newletter__form-input:autofill:focus {
    box-shadow: inset 0 0 0 1000px var(--color-footer-background-mobile);
  }
}


/* ---------------------------------------------------------------------------
   Página 404 — o cabeçalho

   O título deixou de ser uma interjeição ("Oops!") e passou a uma frase. Com
   isso apareceram dois problemas que o texto curto escondia.

   O primeiro é a folga. A secção sf-page404 só tem padding vertical
   (py-32 lg:py-48) e nenhum horizontal, e enquanto a linha mais longa foi
   "Página não encontrada!" isso nunca se viu. Com a frase, o título encostava
   aos dois bordos em todas as larguras — a 375px sobravam 5px de cada lado.
   Daí o padding e a medida máxima: 48rem é a largura em que a frase assenta em
   duas linhas em computador sem o subtítulo passar a duas.

   O segundo é a hierarquia. Título e subtítulo tinham exactamente o mesmo
   tamanho, e a única diferença era o peso — 500 contra 300. Com duas frases em
   vez de uma interjeição mais uma constatação, liam-se como um bloco só. As
   escalas passam a ser diferentes, e o bloco encolhe de 225px para 136px em
   computador e de 180px para 86px em telemóvel.

   As medidas são as que foram testadas em browser antes de escolher, não a
   escala do Tailwind: 40px e 28px não existem nos utilitários deste tema
   (lg:text-4xl não está gerado), e aproximar com o que havia dava 48/30, que é
   outra proporção.
   --------------------------------------------------------------------------- */

.cv-page404__heading {
  max-width: 48rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.cv-page404__title,
.cv-page404__subtitle {
  display: block;
}

.cv-page404__title {
  font-size: 24px;
  line-height: 1.25;
  font-weight: 500;
}

.cv-page404__subtitle {
  font-size: 20px;
  line-height: 1.3;
  font-weight: 300;
}

/* 1024px é o breakpoint lg do tema, o mesmo que as utilitárias que aqui
   deixaram de ser usadas empregavam. */
@media screen and (min-width: 1024px) {
  .cv-page404__title {
    font-size: 40px;
  }

  .cv-page404__subtitle {
    font-size: 28px;
  }
}


/* ---------------------------------------------------------------------------
   Slideshow da homepage — véu por baixo do texto

   O texto do slide fica sobreposto à fotografia: com use_content_above
   desligado, o slideshow.css põe o bloco em position:absolute com bottom:1rem
   e z-index 999. Não havia nada entre o texto e a foto — o show_overlay da
   secção está desligado, e ligá-lo seria pior, porque o véu do tema usa
   img_overlay_bg, que está em #ffffff a 85%: lavava a imagem e apagava o texto
   branco.

   Medido nas quatro fotografias em uso, na banda vertical que o texto ocupa em
   cada uma, com luminância relativa WCAG e percentil 95 em vez do pixel mais
   claro (com o máximo absoluto, qualquer brilho isolado forçava o mesmo valor
   em todos os slides e a medida não distinguia nada):

     workshop orquídeas   banda 87–95%   branco a 3,11:1 (média) / 1,25:1 (p95)
     paisagismo museu     banda 36–81%   3,15:1 / 1,54:1
     BTL Açores           banda 74–95%   2,35:1 / 1,24:1
     aluguer pátio        banda 65–86%   2,92:1 / 1,02:1

   Os quatro falham. O véu preto mínimo para o branco chegar a 4,5:1 no p95 é
   0,45 a 0,55 conforme a foto.

   O gradiente NÃO se limita ao terço inferior, e isso foi a medição a decidir:
   o slide do paisagismo tem o texto entre 36% e 81% da altura, a meio da
   imagem. Um véu preso ao fundo não lhe tocava. Começa portanto aos 22%, está
   em 0,45 quando chega aos 36%, e atinge 0,55 aos 45% — a partir daí cobre os
   outros três com folga. Os 22% de topo ficam limpos, para a fotografia
   continuar a ler-se como fotografia.

   Âncora em .home-banner__slideshow, que vem do tema, e não na classe
   .criaverde-banner, que é um custom_class escrito no admin e desaparece se
   alguém lhe mexer.

   Fica também um text-shadow nos títulos, escrito no custom_css da secção em
   templates/index.json. Não é redundante: apanha os poucos pixels claros que
   sobrevivem ao véu. Ver a nota do CLAUDE.md sobre os três sítios onde vive
   CSS neste tema.
   --------------------------------------------------------------------------- */

.home-banner__slideshow .sf__slide-media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0) 22%,
    rgba(0, 0, 0, 0.45) 36%,
    rgba(0, 0, 0, 0.55) 45%,
    rgba(0, 0, 0, 0.6) 100%
  );
}

/* Abaixo dos 768px a rampa tem de começar mais cedo. O texto reflui e sobe: no
   slide do paisagismo passa a ocupar de 28% a 100% da altura, e a rampa que
   começa aos 22% e só chega a 0,45 aos 36% deixa as primeiras linhas quase sem
   véu. Medido sobre os pixels renderizados, com o autoplay parado e o texto
   escondido, o pior p95 dos quatro slides a 390px:

                                        390px   360px
     rampa @22 · 0,45@36 · 0,55@45      2,76    3,12   (valores de computador)
     rampa @8  · 0,45@22 · 0,55@32      5,76    3,11
     0,15@0    · 0,40@15 · 0,55@30      5,78    5,11
     0,10@0    · 0,45@16 · 0,55@28      5,80    5,01   ← esta
     0,20@0    · 0,45@14 · 0,55@26      5,81    5,83

   A rampa tem de começar no próprio topo, e a razão está nos 360px: aí o texto
   do paisagismo ocupa de -1% a 101% da altura, ou seja o slide inteiro e um
   pouco mais. Não há topo limpo para deixar. Começar aos 8% chegava a 390px mas
   deixava 3,11:1 a 360, que é a largura mais estreita que se testa.

   Fica a mais leve das que passam nas três larguras: 0,10 no topo, que é uma
   sombra ténue, e o mesmo 0,6 do computador no fundo. O escurecimento máximo não
   muda — muda só onde a rampa começa.

   Os valores de computador ficam intactos: lá o pior é 4,86:1, sem folga para
   atenuar mas acima do mínimo. */
@media screen and (max-width: 767.98px) {
  .home-banner__slideshow .sf__slide-media::after {
    background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.1) 0%,
      rgba(0, 0, 0, 0.45) 16%,
      rgba(0, 0, 0, 0.55) 28%,
      rgba(0, 0, 0, 0.6) 100%
    );
  }
}


/* ---------------------------------------------------------------------------
   Rodapé — o bloco de contactos

   Três problemas medidos no bloco publicado, a 360, 390 e 1440px.

   O travessão órfão. Os emails saíam como "Rótulo — endereço" num parágrafo só,
   e o par quebrava entre o rótulo e o endereço, deixando o travessão sozinho no
   fim da linha. Acontecia a 360px e, ao contrário do que se supunha, também em
   computador: aí a coluna do rodapé tem 259px, mais estreita do que os 328 do
   telemóvel. A 390px cabia numa linha, e por isso não se via. O rótulo passa a
   bloco próprio por cima do endereço e o travessão desaparece.

   Os endereços não pareciam ligações: brancos, sem sublinhado, iguais ao texto
   à volta. Ganham underline com offset, que é o que os distingue sem lhes mudar
   a cor.

   A hierarquia. A nota do custo da chamada estava DENTRO da âncora do telefone
   — ver o comentário no footer-blocks.liquid — e herdava a caixa de linha do
   link: 28px de altura para 10px de texto. Sai para parágrafo próprio, a 12px e
   70% de opacidade.

   Contrastes sobre o #31502F do rodapé: branco 9,06:1, rótulo a 75% 5,93:1,
   nota a 70% 5,38:1. Todos com folga sobre os 4,5:1. A 60% daria 4,45, e é por
   isso que os 70% da nota são o limite prudente e não uma escolha estética.

   Altura da zona de contactos, medida com o mesmo método em cada passo:

                    original   1.ª versão   com a nota a 11px
                               (12px)       e sem a margem genérica
     360px            236        211              190
     390px            180        211              190
     1440px           268        232              209

   A primeira versão encolhia a 360 e em computador, porque o telefone passa de
   duas ou três linhas para uma quando a nota lhe sai de dentro, mas crescia
   31px a 390 — aí os emails cabiam numa linha cada e passaram a ocupar duas.

   O que recuperou isso foi remover a regra genérica de margem que este ficheiro
   tinha para todos os parágrafos do bloco (ver o comentário mais acima, onde estava).
   Ela dava 1rem a cada parágrafo, incluindo entre o número e a nota, e ganhava
   às classes cv- por especificidade. Com margens explícitas, os +31px a 390
   passam a +10 sobre o original.

   Apertar o espaçamento entre emails não vale a pena: testado a 10px e a 8px,
   poupa 2 e 3px. Ficam nos 14px, que é o que separa os dois blocos de email.
   --------------------------------------------------------------------------- */

.cv-footer-contact__phone {
  margin: 0;
  font-size: 17px;
  line-height: 1.3;
}

.cv-footer-contact__email:last-of-type {
  margin-bottom: 0;
}

.cv-footer-contact__phone a {
  text-decoration: none;
}

/* Colada ao número, sem margem: é uma nota do telefone e não um item da lista.
   A 11px é o único degrau do rodapé abaixo dos 12px dos rótulos, e é isso que a
   subordina — a escala à volta é 12, 14, 16, 17 e 18px. O contraste não depende
   do tamanho e mantém-se nos 5,38:1 da opacidade de 70%. Era 10px, e a branco,
   antes desta série de commits. */
.cv-footer-contact__note {
  margin: 0;
  font-size: 11px;
  line-height: 1.35;
  opacity: 0.7;
}

.cv-footer-contact__email {
  margin: 14px 0 0;
}

.cv-footer-contact__label {
  display: block;
  font-size: 12px;
  line-height: 1.3;
  opacity: 0.75;
  margin-bottom: 1px;
}

/* inline-block para o sublinhado não se estender ao espaço em branco que o
   Liquid deixa à volta do endereço. */
.cv-footer-contact__email a {
  display: inline-block;
  font-size: 16px;
  line-height: 1.35;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ─────────────────────────────────────────────────────────────
   Destinatário do cartão presente (snippets/cv-gift-card-recipient-form)

   Sem JavaScript não existe a classe --js: a caixa de visto fica escondida
   (está desativada no markup e seria um controlo morto) e os campos ficam à
   vista, com a nota de introdução. Com JavaScript inverte-se: aparece a caixa
   de visto, desaparece a nota, e os campos só se mostram com a caixa marcada.
   ───────────────────────────────────────────────────────────── */
.cv-gift-recipient {
  margin: 20px 0;
  padding: 16px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
}

.cv-gift-recipient__toggle {
  display: none;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1.4;
}

.cv-gift-recipient--js .cv-gift-recipient__toggle {
  display: flex;
}

.cv-gift-recipient__toggle input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  accent-color: var(--secondary-green);
  cursor: pointer;
}

.cv-gift-recipient__nojs {
  font-size: 14px;
  line-height: 1.4;
  margin: 0 0 12px;
}

.cv-gift-recipient--js .cv-gift-recipient__nojs {
  display: none;
}

.cv-gift-recipient--js .cv-gift-recipient__fields {
  display: none;
}

.cv-gift-recipient--js.cv-gift-recipient--open .cv-gift-recipient__fields {
  display: block;
  margin-top: 16px;
}

.cv-gift-recipient__field + .cv-gift-recipient__field {
  margin-top: 14px;
}

.cv-gift-recipient__field .form-control {
  width: 100%;
}

.cv-gift-recipient__note {
  font-size: 12px;
  line-height: 1.35;
  opacity: 0.75;
  margin: 4px 0 0;
}