.elementor-3850 .elementor-element.elementor-element-5d2b2d8{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:stretch;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-3850 .elementor-element.elementor-element-6f9b4ca{--display:flex;--min-height:36px;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--padding-top:0px;--padding-bottom:0px;--padding-left:24px;--padding-right:24px;}.elementor-3850 .elementor-element.elementor-element-6f9b4ca:not(.elementor-motion-effects-element-type-background), .elementor-3850 .elementor-element.elementor-element-6f9b4ca > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-secondary );}.elementor-3850 .elementor-element.elementor-element-a70e591{--display:flex;--min-height:80px;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:center;--flex-wrap:nowrap;--padding-top:0px;--padding-bottom:0px;--padding-left:40px;--padding-right:40px;}.elementor-3850 .elementor-element.elementor-element-a70e591:not(.elementor-motion-effects-element-type-background), .elementor-3850 .elementor-element.elementor-element-a70e591 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-secondary );}.elementor-3850 .elementor-element.elementor-element-bd7ffb5{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:flex-start;--align-items:center;--padding-top:12px;--padding-bottom:12px;--padding-left:0px;--padding-right:0px;}.elementor-widget-icon.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-primary );}.elementor-widget-icon.elementor-view-framed .elementor-icon, .elementor-widget-icon.elementor-view-default .elementor-icon{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-widget-icon.elementor-view-framed .elementor-icon, .elementor-widget-icon.elementor-view-default .elementor-icon svg{fill:var( --e-global-color-primary );}.elementor-3850 .elementor-element.elementor-element-5e438a3 .elementor-icon-wrapper{text-align:start;}.elementor-3850 .elementor-element.elementor-element-5e438a3 .elementor-icon{font-size:24px;}.elementor-3850 .elementor-element.elementor-element-5e438a3 .elementor-icon svg{height:24px;}.elementor-3850 .elementor-element.elementor-element-0379a6c .elementor-icon-wrapper{text-align:start;}.elementor-3850 .elementor-element.elementor-element-0379a6c .elementor-icon{font-size:24px;}.elementor-3850 .elementor-element.elementor-element-0379a6c .elementor-icon svg{height:24px;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );line-height:var( --e-global-typography-text-line-height );}.elementor-3850 .elementor-element.elementor-element-49d31bd{text-align:start;}.elementor-3850 .elementor-element.elementor-element-49d31bd img{height:32px;}.elementor-3850 .elementor-element.elementor-element-422d702{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-search{--e-search-input-color:var( --e-global-color-text );}.elementor-widget-search.e-focus{--e-search-input-color:var( --e-global-color-text );}.elementor-widget-search .elementor-pagination{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-3850 .elementor-element.elementor-element-a807ec1{width:var( --container-widget-width, 100% );max-width:100%;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-3850 .elementor-element.elementor-element-188562e{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:flex-end;--align-items:center;--gap:24px 24px;--row-gap:24px;--column-gap:24px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-3850 .elementor-element.elementor-element-1b8bdfa{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--gap:4px 4px;--row-gap:4px;--column-gap:4px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-3850 .elementor-element.elementor-element-1b8bdfa.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-3850 .elementor-element.elementor-element-eb038a8 .elementor-icon-wrapper{text-align:center;}.elementor-3850 .elementor-element.elementor-element-eb038a8 .elementor-icon{font-size:24px;}.elementor-3850 .elementor-element.elementor-element-eb038a8 .elementor-icon svg{height:24px;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );color:var( --e-global-color-primary );}.elementor-3850 .elementor-element.elementor-element-69c49ae{text-align:center;}.elementor-3850 .elementor-element.elementor-element-69c49ae .elementor-heading-title{font-family:"Inter", Sans-serif;font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:0.5px;}.elementor-3850 .elementor-element.elementor-element-5f6d87c{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--gap:4px 4px;--row-gap:4px;--column-gap:4px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-3850 .elementor-element.elementor-element-5f6d87c.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-3850 .elementor-element.elementor-element-e8214b5 .elementor-icon-wrapper{text-align:center;}.elementor-3850 .elementor-element.elementor-element-e8214b5 .elementor-icon{font-size:24px;}.elementor-3850 .elementor-element.elementor-element-e8214b5 .elementor-icon svg{height:24px;}.elementor-3850 .elementor-element.elementor-element-e8564c2{text-align:center;}.elementor-3850 .elementor-element.elementor-element-e8564c2 .elementor-heading-title{font-family:"Inter", Sans-serif;font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:0.5px;}.elementor-3850 .elementor-element.elementor-element-9689d3e{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--gap:4px 4px;--row-gap:4px;--column-gap:4px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-3850 .elementor-element.elementor-element-9689d3e.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__toggle .elementor-button{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__product-name a{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__product-price{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__footer-buttons .elementor-button{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__footer-buttons a.elementor-button--view-cart{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__footer-buttons a.elementor-button--checkout{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-widget-woocommerce-menu-cart .woocommerce-mini-cart__empty-message{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-3850 .elementor-element.elementor-element-85591db{--main-alignment:center;--divider-style:solid;--subtotal-divider-style:solid;--elementor-remove-from-cart-button:none;--remove-from-cart-button:block;--toggle-button-background-color:rgba(0,0,0,0);--toggle-button-hover-background-color:rgba(0,0,0,0);--toggle-icon-padding:0px 0px 0px 0px;--cart-border-style:none;--cart-footer-layout:1fr 1fr;--products-max-height-sidecart:calc(100vh - 240px);--products-max-height-minicart:calc(100vh - 385px);}.elementor-3850 .elementor-element.elementor-element-85591db .widget_shopping_cart_content{--subtotal-divider-left-width:0;--subtotal-divider-right-width:0;}.elementor-3850 .elementor-element.elementor-element-409cdb5{text-align:center;}.elementor-3850 .elementor-element.elementor-element-409cdb5 .elementor-heading-title{font-family:"Inter", Sans-serif;font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:0.5px;}.elementor-3850 .elementor-element.elementor-element-9be86fa{--display:flex;--min-height:52px;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--padding-top:0px;--padding-bottom:0px;--padding-left:48px;--padding-right:48px;}.elementor-widget-nav-menu .elementor-nav-menu .elementor-item{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item{color:var( --e-global-color-text );fill:var( --e-global-color-text );}.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:hover,
.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.elementor-item-active,
.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.highlighted,
.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:focus{color:var( --e-global-color-accent );fill:var( --e-global-color-accent );}.elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:before,
.elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:after{background-color:var( --e-global-color-accent );}.elementor-widget-nav-menu .e--pointer-framed .elementor-item:before,
.elementor-widget-nav-menu .e--pointer-framed .elementor-item:after{border-color:var( --e-global-color-accent );}.elementor-widget-nav-menu{--e-nav-menu-divider-color:var( --e-global-color-text );}.elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-item, .elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-sub-item{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-size:var( --e-global-typography-accent-font-size );font-weight:var( --e-global-typography-accent-font-weight );}.elementor-3850 .elementor-element.elementor-element-e2337fe .elementor-menu-toggle{margin:0 auto;}.elementor-3850 .elementor-element.elementor-element-e2337fe .elementor-nav-menu .elementor-item{font-family:"Sora", Sans-serif;font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;}.elementor-3850 .elementor-element.elementor-element-e2337fe .elementor-nav-menu--main .elementor-item{color:var( --e-global-color-bgbase );fill:var( --e-global-color-bgbase );padding-left:0px;padding-right:0px;padding-top:14px;padding-bottom:14px;}.elementor-3850 .elementor-element.elementor-element-e2337fe .elementor-nav-menu--main .elementor-item:hover,
.elementor-3850 .elementor-element.elementor-element-e2337fe .elementor-nav-menu--main .elementor-item.elementor-item-active,
.elementor-3850 .elementor-element.elementor-element-e2337fe .elementor-nav-menu--main .elementor-item.highlighted,
.elementor-3850 .elementor-element.elementor-element-e2337fe .elementor-nav-menu--main .elementor-item:focus{color:var( --e-global-color-primary );fill:var( --e-global-color-primary );}.elementor-3850 .elementor-element.elementor-element-e2337fe .elementor-nav-menu--main .elementor-item.elementor-item-active{color:var( --e-global-color-primary );}.elementor-3850 .elementor-element.elementor-element-e2337fe{--e-nav-menu-horizontal-menu-item-margin:calc( 28px / 2 );}.elementor-3850 .elementor-element.elementor-element-e2337fe .elementor-nav-menu--main:not(.elementor-nav-menu--layout-horizontal) .elementor-nav-menu > li:not(:last-child){margin-bottom:28px;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}@media(max-width:1024px){.elementor-widget-image .widget-image-caption{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-widget-search .elementor-pagination{line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-widget-heading .elementor-heading-title{line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__toggle .elementor-button{line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__product-name a{line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__product-price{line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__footer-buttons .elementor-button{line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__footer-buttons a.elementor-button--view-cart{line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__footer-buttons a.elementor-button--checkout{line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-widget-woocommerce-menu-cart .woocommerce-mini-cart__empty-message{line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-widget-nav-menu .elementor-nav-menu .elementor-item{line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-item, .elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-sub-item{font-size:var( --e-global-typography-accent-font-size );}}@media(min-width:768px){.elementor-3850 .elementor-element.elementor-element-5d2b2d8{--width:100%;}.elementor-3850 .elementor-element.elementor-element-6f9b4ca{--width:100%;}.elementor-3850 .elementor-element.elementor-element-a70e591{--width:100%;}.elementor-3850 .elementor-element.elementor-element-bd7ffb5{--width:30%;}.elementor-3850 .elementor-element.elementor-element-422d702{--width:45%;}.elementor-3850 .elementor-element.elementor-element-188562e{--width:25%;}.elementor-3850 .elementor-element.elementor-element-1b8bdfa{--width:96px;}.elementor-3850 .elementor-element.elementor-element-5f6d87c{--width:84px;}.elementor-3850 .elementor-element.elementor-element-9689d3e{--width:84px;}.elementor-3850 .elementor-element.elementor-element-9be86fa{--width:100%;}}@media(max-width:767px){.elementor-3850 .elementor-element.elementor-element-6f9b4ca{--padding-top:0px;--padding-bottom:0px;--padding-left:12px;--padding-right:12px;}.elementor-3850 .elementor-element.elementor-element-a70e591{--min-height:64px;--padding-top:0px;--padding-bottom:0px;--padding-left:16px;--padding-right:16px;}.elementor-3850 .elementor-element.elementor-element-bd7ffb5{--width:55%;}.elementor-widget-image .widget-image-caption{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-3850 .elementor-element.elementor-element-49d31bd img{height:28px;}.elementor-widget-search .elementor-pagination{line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-3850 .elementor-element.elementor-element-188562e{--width:120px;}.elementor-widget-heading .elementor-heading-title{line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__toggle .elementor-button{line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__product-name a{line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__product-price{line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__footer-buttons .elementor-button{line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__footer-buttons a.elementor-button--view-cart{line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__footer-buttons a.elementor-button--checkout{line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-widget-woocommerce-menu-cart .woocommerce-mini-cart__empty-message{line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-widget-nav-menu .elementor-nav-menu .elementor-item{line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-item, .elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-sub-item{font-size:var( --e-global-typography-accent-font-size );}}/* Start custom CSS for search, class: .elementor-element-a807ec1 */.elementor-3850 .elementor-element.elementor-element-a807ec1 form{position:relative}
.elementor-3850 .elementor-element.elementor-element-a807ec1 button[type=submit],.elementor-3850 .elementor-element.elementor-element-a807ec1 .e-search-submit,.elementor-3850 .elementor-element.elementor-element-a807ec1 .elementor-search-form__submit{position:absolute!important;right:8px;top:50%;transform:translateY(-50%);background:transparent!important;border:none!important;box-shadow:none!important;font-size:0!important;width:40px;height:40px;min-width:40px;padding:0!important}
.elementor-3850 .elementor-element.elementor-element-a807ec1 button[type=submit]::after,.elementor-3850 .elementor-element.elementor-element-a807ec1 .e-search-submit::after,.elementor-3850 .elementor-element.elementor-element-a807ec1 .elementor-search-form__submit::after{content:'';display:block;width:20px;height:20px;margin:0 auto;background:var(--e-global-color-secondary);-webkit-mask:url("data:image/svg+xml;utf8, dentro do tfoot, acima do total. */
body.woocommerce-checkout .shop_table tfoot tr.eu-ckt-frete-linha{
display:block!important;padding:12px 0!important;
border-bottom:1px solid var(--glass-3,#20261A)!important}
body.woocommerce-checkout .eu-ckt-frete-linha td{
display:block!important;width:100%!important;text-align:left!important}
body.woocommerce-checkout .eu-ckt-frete-barra{
background:transparent!important;padding:0!important;border:0!important;margin:0!important}
body.woocommerce-checkout .eu-ckt-frete-barra p,
body.woocommerce-checkout .eu-ckt-frete-ok{
margin:0 0 8px!important;
font-family:var(--eu-body,Archivo,system-ui,sans-serif)!important;
font-size:12.5px!important;line-height:1.45!important;
color:var(--mute-2,#AFB6A4)!important;text-transform:none!important;letter-spacing:0!important}
body.woocommerce-checkout .eu-ckt-frete-ok{margin:0!important;color:var(--green,#8BE01F)!important}
body.woocommerce-checkout .eu-ckt-frete-barra p strong,
body.woocommerce-checkout .eu-ckt-frete-barra p strong *,
body.woocommerce-checkout .eu-ckt-frete-barra .woocommerce-Price-amount,
body.woocommerce-checkout .eu-ckt-frete-barra .woocommerce-Price-currencySymbol,
body.woocommerce-checkout .eu-ckt-frete-barra bdi,
body.woocommerce-checkout .eu-ckt-frete-ok strong{
color:var(--paper,#F2F3EF)!important;
font-family:var(--eu-mono,"JetBrains Mono",monospace)!important;
font-weight:700!important;font-variant-numeric:tabular-nums}
body.woocommerce-checkout .eu-ckt-frete-ok strong{color:var(--green,#8BE01F)!important}
/* ---------- o que o cartao custa, em parcela ---------- */
body.woocommerce-checkout .shop_table tfoot tr.eu-ckt-parcela{
display:block!important;padding:10px 0 0!important;border-bottom:0!important}
body.woocommerce-checkout .eu-ckt-parcela td{
display:block!important;width:100%!important;text-align:right!important;
font-family:var(--eu-mono,"JetBrains Mono",monospace)!important;
font-size:10.5px!important;font-weight:400!important;
letter-spacing:.08em!important;text-transform:uppercase!important;
line-height:1.7!important;color:var(--mute-2,#AFB6A4)!important;
font-variant-numeric:tabular-nums}
/* ---------- o fecho voltou para a coluna do formulario ----------
Ele esta em PAPEL agora, nao em vidro: a tinta muda junto. */
body.woocommerce-checkout .eu-ckt-col--form .place-order{
display:flex!important;flex-direction:column!important;gap:12px!important;
margin:0!important;padding:0!important;border:0!important;
float:none!important;width:auto!important}
body.woocommerce-checkout .eu-ckt-col--form .place-order label.checkbox,
body.woocommerce-checkout .eu-ckt-col--form .woocommerce-terms-and-conditions-checkbox-text{
color:var(--ink,#12150E)!important;font-size:13.5px!important}
body.woocommerce-checkout .eu-ckt-col--form .place-order .woocommerce-privacy-policy-text p{
color:var(--ink-soft,#5B6152)!important;font-size:12px!important;margin:0!important}
body.woocommerce-checkout .eu-ckt-col--form .place-order a,
body.woocommerce-checkout .eu-ckt-col--form .woocommerce-terms-and-conditions-link{
color:var(--wine,#6B1F2A)!important;text-decoration:underline!important;text-underline-offset:2px}
body.woocommerce-checkout .eu-ckt-col--form .place-order .required{
color:var(--wine,#6B1F2A)!important}
/* ---------- a acao, dentro do resumo, colada no total ---------- */
body.woocommerce-checkout .eu-ckt-acao{
order:8;margin:0!important;padding:0!important}
body.woocommerce-checkout .eu-ckt-acao:empty{display:none!important}
body.woocommerce-checkout .eu-ckt-acao #place_order{
width:100%!important;min-height:62px!important;
background:var(--green,#8BE01F)!important;color:var(--ink,#12150E)!important;
border:0!important;border-radius:var(--r,4px)!important;
font-family:var(--eu-display,Sora,system-ui,sans-serif)!important;
font-size:18px!important;font-weight:600!important;letter-spacing:-.01em!important;
padding:0 20px!important;margin:0!important;float:none!important;
text-transform:none!important;cursor:pointer!important}
/* ---------- o item do pedido, como no desenho ----------
Foto grande no topo do resumo: o cliente precisa ver o que esta
comprando, nao so ler o nome. */
body.woocommerce-checkout .shop_table tbody tr.cart_item{
display:grid!important;
grid-template-columns:minmax(0,1fr) auto!important;
gap:6px 14px!important;align-items:baseline!important;
padding:0 0 16px!important;
border-bottom:1px solid var(--glass-3,#20261A)!important}
body.woocommerce-checkout .eu-ckt-item-foto{
grid-column:1 / -1!important;grid-row:1!important;
display:block!important;width:100%!important;height:auto!important;
aspect-ratio:4/3!important;margin:0 0 4px!important;
background:var(--paper-2,#E4E7DD)!important;
border-radius:var(--r,4px)!important;overflow:hidden!important}
body.woocommerce-checkout .eu-ckt-thumb-img{
width:100%!important;height:100%!important;object-fit:contain!important;
mix-blend-mode:multiply;display:block!important;padding:10px!important}
body.woocommerce-checkout .eu-ckt-item-nome{
grid-column:1!important;grid-row:2!important;
font-size:16px!important;line-height:1.2!important}
body.woocommerce-checkout .shop_table tbody tr.cart_item .product-quantity{
grid-column:1!important;grid-row:3!important}
body.woocommerce-checkout .shop_table tbody tr.cart_item td.product-total{
grid-column:2!important;grid-row:2!important}
/* ---------- o bloco do Mercado Pago em papel ----------
O container deles vinha branco puro com regua cinza. O fundo
perdia para uma regra mais especifica do plugin; esta ganha. */
body.woocommerce-checkout div.mp-checkout-custom-container,
body.woocommerce-checkout div.mp-checkout-container,
body.woocommerce-checkout div.mp-card-form-container,
body.woocommerce-checkout .payment_box div[class*="mp-checkout"]{
background:var(--paper,#F2F3EF)!important;
background-color:var(--paper,#F2F3EF)!important;
border:0!important;
box-shadow:inset 0 0 0 1px var(--rule,#C6CABB)!important}
body.woocommerce-checkout .mp-checkout-custom-container [class*="mp-checkout-custom-card-row"],
body.woocommerce-checkout .mp-checkout-custom-container [class*="-container"]{
background:transparent!important}
/* a caixa da carteira salva deixa de ser um cartao dentro do cartao */
body.woocommerce-checkout .mp-checkout-custom-container [class*="wallet"]{
background:transparent!important;border:1px solid var(--rule,#C6CABB)!important;
border-radius:var(--r,4px)!important;box-shadow:none!important}
/* ---------- celular: o resumo vem antes do formulario ----------
No celular, ver o que esta comprando antes de digitar reduz a
desistencia. No desktop a ordem visual e a do desenho. */
@media (max-width:1100px){
body.woocommerce-checkout form.checkout{display:flex!important;flex-direction:column!important}
body.woocommerce-checkout .eu-ckt-col--resumo{order:1!important}
body.woocommerce-checkout .eu-ckt-col--form{order:2!important}
body.woocommerce-checkout .eu-ckt-acao{display:none!important}
}
/* O container do Mercado Pago seguia branco: a folha do plugin
carrega depois da nossa e usa !important na mesma especificidade.
Aqui a regra sobe um degrau (html + #payment) e ganha. O cartao
dentro do cartao some: ele passa a ser o proprio papel da placa. */
html body.woocommerce-checkout #payment div.mp-checkout-custom-container,
html body.woocommerce-checkout #payment div.mp-checkout-container,
html body.woocommerce-checkout #payment div.mp-card-form-container{
background:transparent!important;background-color:transparent!important;
border:0!important;box-shadow:none!important;padding:0!important}
html body.woocommerce-checkout #payment div.mp-checkout-custom-card-input{
background:#FFFFFF!important;
border:1px solid var(--rule,#C6CABB)!important;
border-radius:var(--r,4px)!important;min-height:50px!important}
/* Dois acabamentos da segunda demao.
1) O campo de cupom ficava SEMPRE aberto: eu tinha forcado
display:flex!important no form, e o WooCommerce abre e fecha
esse bloco por inline style. A tela comecava com uma caixa
branca grande que ninguem pediu. O display volta a ser dele. */
body.woocommerce-checkout form.checkout_coupon{
display:none;
border:0!important;border-radius:var(--r,4px)!important;
background:var(--paper,#F2F3EF)!important;
padding:18px!important;margin:0 0 16px!important}
body.woocommerce-checkout form.checkout_coupon .form-row{
display:inline-block!important;vertical-align:bottom!important;
width:auto!important;margin:0 10px 0 0!important}
body.woocommerce-checkout form.checkout_coupon .form-row-first{min-width:260px!important}
body.woocommerce-checkout form.checkout_coupon .form-row-last{margin-right:0!important}
body.woocommerce-checkout form.checkout_coupon .button{
min-height:50px!important;border-radius:var(--r,4px)!important;
background:var(--ink,#12150E)!important;color:var(--paper,#F2F3EF)!important;
font-family:var(--eu-display,Sora,system-ui,sans-serif)!important;
font-size:14.5px!important;font-weight:600!important;padding:0 22px!important}
/* 2) "Faltam R$ 509,10 para" saia grudado: o valor do WooCommerce e
inline-block e comia o espaco em volta. */
body.woocommerce-checkout .eu-ckt-frete-barra p strong{
margin:0 .28em!important;display:inline!important}
body.woocommerce-checkout .eu-ckt-frete-barra .woocommerce-Price-amount{
display:inline!important}
/* O WooCommerce renderiza o form do cupom com style="display:none" e
abre por jQuery. Meu display:flex!important ganhava do inline e ele
nascia aberto. Enquanto o inline disser "none", a folha cala. */
body.woocommerce-checkout form.checkout_coupon[style*="none"]{display:none!important}
/* ---------- terceira demão: o que a tela mostrou ----------
1) O radio ficava FORA do cartão. No WooCommerce o , não filho — eu tinha desenhado o cartão no label e
o botão sobrava solto em cima. O cartão passa para o . */
body.woocommerce-checkout ul.wc_payment_methods > li{
display:block!important;
border:1px solid var(--rule,#C6CABB)!important;
border-radius:var(--r,4px)!important;
background:var(--paper,#F2F3EF)!important;
padding:0!important;overflow:hidden!important}
body.woocommerce-checkout ul.wc_payment_methods > li:has(input:checked){
border-color:var(--ink,#12150E)!important;
box-shadow:inset 0 0 0 1px var(--ink,#12150E)!important}
body.woocommerce-checkout ul.wc_payment_methods > li > input[type="radio"]{
position:absolute!important;opacity:0!important;width:1px!important;height:1px!important}
body.woocommerce-checkout ul.wc_payment_methods > li > label{
display:flex!important;align-items:center!important;gap:13px!important;
min-height:60px!important;padding:16px 18px!important;
margin:0!important;border:0!important;border-radius:0!important;
background:transparent!important;cursor:pointer!important;
font-family:var(--eu-display,Sora,system-ui,sans-serif)!important;
font-size:16px!important;font-weight:600!important;letter-spacing:-.02em!important;
color:var(--ink,#12150E)!important}
/* o disco do radio, desenhado, dentro do cartao */
body.woocommerce-checkout ul.wc_payment_methods > li > label::before{
content:"";width:20px;height:20px;flex:none;border-radius:50%;
box-shadow:inset 0 0 0 1.5px var(--ink-soft,#5B6152)}
body.woocommerce-checkout ul.wc_payment_methods > li:has(input:checked) > label::before{
box-shadow:inset 0 0 0 1.5px var(--ink,#12150E), inset 0 0 0 5px var(--paper,#F2F3EF), inset 0 0 0 20px var(--green,#8BE01F)}
body.woocommerce-checkout ul.wc_payment_methods > li > label img{
max-height:20px!important;width:auto!important;margin:0 0 0 auto!important;
border:0!important;border-radius:0!important}
/* o logo da Linha de Credito e uma carinha de oculos escuros. Num
sistema que trocou emoji por icone desenhado, ela nao entra. */
body.woocommerce-checkout li[class*="mercado-pago-credits"] > label img,
body.woocommerce-checkout li[class*="credits"] > label img{display:none!important}
body.woocommerce-checkout .payment_box,
body.woocommerce-checkout div.payment_box{
margin:0!important;border:0!important;border-radius:0!important;
border-top:1px solid var(--rule,#C6CABB)!important;
background:var(--paper,#F2F3EF)!important;
padding:18px!important}
/* 2) o passo 3 subiu: o WooCommerce imprime os termos antes do
gancho onde o titulo entra. */
body.woocommerce-checkout .place-order .eu-ckt-passo{order:-1!important;margin:0!important}
body.woocommerce-checkout .eu-ckt-col--form .place-order .woocommerce-privacy-policy-text{order:1!important}
body.woocommerce-checkout .eu-ckt-col--form .place-order .woocommerce-terms-and-conditions-wrapper{order:2!important}
body.woocommerce-checkout .eu-ckt-col--form .place-order .form-row.eu-idade{order:3!important}
/* 3) o aceite dos termos vinha desmontado: o texto quebrava em tres
pedacos e o asterisco caia sozinho numa linha. */
body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .form-row,
body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .validate-required{
display:block!important;margin:0!important;padding:0!important;width:auto!important}
body.woocommerce-checkout label.woocommerce-form__label-for-checkbox,
body.woocommerce-checkout .place-order label.checkbox{
display:grid!important;
grid-template-columns:19px minmax(0,1fr)!important;
gap:0 11px!important;align-items:start!important;
text-align:left!important;line-height:1.45!important}
body.woocommerce-checkout label.woocommerce-form__label-for-checkbox > input,
body.woocommerce-checkout .place-order label.checkbox > input{
grid-column:1!important;margin:2px 0 0!important}
body.woocommerce-checkout .woocommerce-terms-and-conditions-checkbox-text{
display:inline!important;grid-column:2!important}
body.woocommerce-checkout label.woocommerce-form__label-for-checkbox > .required,
body.woocommerce-checkout .place-order label.checkbox > .required{
display:none!important}
/* 4) a fileira de bandeiras de cartao encolhe: e informacao de apoio */
body.woocommerce-checkout .mp-checkout-custom-container [class*="payment-methods"],
body.woocommerce-checkout .mp-checkout-custom-container [class*="card-row-logos"]{
border:0!important;padding:0 0 6px!important;background:transparent!important}
/* "Li e concordo com o(s) ... do site" tinha sumido: sobrou uma regra
da epoca em que o checkout era escuro, pintando TODO descendente de
label.checkbox de --paper. Sobre a placa de papel, papel sobre papel.
O mesmo erro que eu ja tinha cometido no herói: pintar pela faixa que
eu imaginava em vez de medir o fundo do ancestral. */
body.woocommerce-checkout .eu-ckt-col--form label.checkbox,
body.woocommerce-checkout .eu-ckt-col--form label.checkbox *,
body.woocommerce-checkout .eu-ckt-col--form .woocommerce-terms-and-conditions-checkbox-text,
body.woocommerce-checkout .eu-ckt-col--form .woocommerce-terms-and-conditions-checkbox-text *{
color:var(--ink,#12150E)!important}
body.woocommerce-checkout .eu-ckt-col--form label.checkbox a,
body.woocommerce-checkout .eu-ckt-col--form .woocommerce-terms-and-conditions-link{
color:var(--wine,#6B1F2A)!important;
text-decoration:underline!important;text-underline-offset:2px!important}
body.woocommerce-checkout .eu-ckt-col--form .woocommerce-privacy-policy-text,
body.woocommerce-checkout .eu-ckt-col--form .woocommerce-privacy-policy-text *{
color:var(--ink-soft,#5B6152)!important}
body.woocommerce-checkout .eu-ckt-col--form .woocommerce-privacy-policy-text a{
color:var(--wine,#6B1F2A)!important}
/* ---------- a lista do pedido: linha compacta, sempre ----------
A foto de 4:3 foi desenhada para UMA garrafa. Com tres, o resumo
virava uma torre e o total saia da vista — que e justamente o que
a proposta B existe para evitar. Agora a miniatura e de 64px e a
linha cresce por item, nao por altura de foto. */
body.woocommerce-checkout .shop_table tbody tr.cart_item{
display:grid!important;
grid-template-columns:64px minmax(0,1fr) auto!important;
gap:2px 14px!important;align-items:start!important;
padding:14px 0!important;
border-bottom:1px solid var(--glass-3,#20261A)!important}
body.woocommerce-checkout .shop_table tbody tr.cart_item:first-child{padding-top:0!important}
body.woocommerce-checkout .eu-ckt-item-foto{
grid-column:1!important;grid-row:1 / span 2!important;
display:block!important;width:64px!important;height:64px!important;
aspect-ratio:auto!important;margin:0!important;
background:var(--paper-2,#E4E7DD)!important;
border-radius:var(--r,4px)!important;overflow:hidden!important}
body.woocommerce-checkout .eu-ckt-thumb-img{
width:100%!important;height:100%!important;object-fit:contain!important;
mix-blend-mode:multiply;display:block!important;padding:5px!important}
body.woocommerce-checkout .eu-ckt-item-txt{
grid-column:2!important;grid-row:1!important;
display:flex!important;flex-direction:column!important;gap:2px!important;min-width:0!important}
body.woocommerce-checkout .eu-ckt-item-ficha{
font-family:var(--eu-mono,"JetBrains Mono",monospace)!important;
font-size:10px!important;letter-spacing:.12em!important;
text-transform:uppercase!important;color:var(--mute-2,#AFB6A4)!important}
body.woocommerce-checkout .eu-ckt-item-nome{
font-family:var(--eu-display,Sora,system-ui,sans-serif)!important;
font-size:14.5px!important;font-weight:600!important;
letter-spacing:-.02em!important;line-height:1.25!important;
color:var(--paper,#F2F3EF)!important}
body.woocommerce-checkout .eu-ckt-item-nome a{color:var(--paper,#F2F3EF)!important;text-decoration:none!important}
body.woocommerce-checkout .shop_table tbody tr.cart_item td.product-total{
grid-column:3!important;grid-row:1!important;
font-family:var(--eu-mono,"JetBrains Mono",monospace)!important;
font-size:13.5px!important;font-weight:700!important;
color:var(--paper,#F2F3EF)!important;text-align:right!important;
white-space:nowrap!important;font-variant-numeric:tabular-nums}
/* ---------- o seletor de quantidade ---------- */
body.woocommerce-checkout .eu-ckt-qtd{
grid-column:2!important;grid-row:2!important;
display:inline-flex!important;align-items:stretch!important;
width:max-content!important;margin:6px 0 0!important;
border-radius:var(--r,4px)!important;overflow:hidden!important;
box-shadow:inset 0 0 0 1px var(--glass-3,#20261A)!important;
transition:opacity .16s cubic-bezier(.23,1,.32,1)}
body.woocommerce-checkout .eu-ckt-qtd-espera{opacity:.45;pointer-events:none}
body.woocommerce-checkout .eu-ckt-qtd-btn{
width:34px!important;height:34px!important;
background:transparent!important;border:0!important;padding:0!important;
color:var(--mute-2,#AFB6A4)!important;cursor:pointer!important;
font-family:var(--eu-mono,"JetBrains Mono",monospace)!important;
font-size:16px!important;font-weight:700!important;line-height:1!important;
display:inline-flex!important;align-items:center!important;justify-content:center!important;
transition:background .16s cubic-bezier(.23,1,.32,1), color .16s cubic-bezier(.23,1,.32,1)}
@media (hover:hover) and (pointer:fine){
body.woocommerce-checkout .eu-ckt-qtd-btn:hover{
background:rgba(242,243,239,.08)!important;color:var(--paper,#F2F3EF)!important}
}
body.woocommerce-checkout .eu-ckt-qtd-n{
min-width:32px!important;display:inline-flex!important;
align-items:center!important;justify-content:center!important;
font-family:var(--eu-mono,"JetBrains Mono",monospace)!important;
font-size:13px!important;font-weight:700!important;
color:var(--paper,#F2F3EF)!important;font-variant-numeric:tabular-nums}
/* ---------- o carimbo do Pix no cartao do meio de pagamento ---------- */
body.woocommerce-checkout .eu-ckt-selo{
margin-left:auto!important;flex:none!important;
background:var(--green,#8BE01F)!important;color:var(--ink,#12150E)!important;
font-family:var(--eu-mono,"JetBrains Mono",monospace)!important;
font-size:10.5px!important;font-weight:700!important;
letter-spacing:.08em!important;text-transform:uppercase!important;
padding:5px 8px!important;border-radius:2px!important;line-height:1.2!important}
/* ---------- as garantias no pe da placa do formulario ---------- */
body.woocommerce-checkout .eu-ckt-garantias{
display:flex!important;flex-wrap:wrap!important;
gap:10px clamp(18px,2.4vw,32px)!important;
margin:4px 0 0!important;padding:20px 0 0!important;
border-top:1px solid var(--rule,#C6CABB)!important}
body.woocommerce-checkout .eu-ckt-garantias span{
display:inline-flex!important;align-items:center!important;gap:9px!important;
font-family:var(--eu-body,Archivo,system-ui,sans-serif)!important;
font-size:12.5px!important;line-height:1.4!important;
color:var(--ink-soft,#5B6152)!important}
body.woocommerce-checkout .eu-ckt-garantias .eu-ckt-ico{
width:16px;height:16px;flex:none;color:var(--ink-soft,#5B6152)}
/* A linha de parcela alinhada a direita quebrava em tres pedacos
escadinha. Texto corrido le melhor alinhado a esquerda. */
body.woocommerce-checkout .eu-ckt-parcela td{
text-align:left!important;line-height:1.8!important;
padding-top:8px!important}
/* =========================================================
PARCELAMENTO E SELO DO PIX — 25/09/2026
Pedido do Andre: (a) o parcelamento coerente com a regra real
(6x sem juros, parcela minima de R$ 89) e (b) "o ECONOMIZE R$ ali
dentro do pgto em PIX se desse pra ser pouco maior para mais
destaque". O carimbo estava a 10,5px, do tamanho de uma nota de
rodape, carregando a unica informacao da tela que faz o cliente
escolher o meio de pagamento que custa menos para a loja.
========================================================= */
/* 1) O CARIMBO DO PIX, MAIOR
13px em vez de 10,5. Continua caixa-alta em mono — e um DADO, nao
uma frase — mas agora tem peso de rotulo, nao de asterisco. */
body.woocommerce-checkout .eu-ckt-selo{
font-size:13px!important;
line-height:1.15!important;
letter-spacing:.05em!important;
padding:6px 11px!important;
border-radius:var(--r,4px)!important}
/* No celular a linha do meio de pagamento e estreita: o carimbo desce
para a sua propria linha em vez de espremer a palavra "Pix". */
@media(max-width:600px){
body.woocommerce-checkout .wc_payment_method label{
flex-wrap:wrap!important;row-gap:6px!important}
body.woocommerce-checkout .eu-ckt-selo{
font-size:12px!important;margin-left:0!important}
}
/* 2) A NOTA DA PARCELA MINIMA
Escrita pelo JS do snippet 4363 logo abaixo do de parcelas,
e so quando o teto do pedido e menor que 6 — quem ja tem direito ao
6x nao precisa ler uma regra que nao o atinge. */
body.woocommerce-checkout .eu-parcela-nota{
margin:6px 0 0!important;
font-family:var(--eu-body,Archivo,sans-serif)!important;
font-size:12.5px!important;
line-height:1.45!important;
color:var(--ink-soft,#5B6152)!important}
/* 3) A LINHA DE PARCELA SOB O TOTAL
Medida na tela: a linha inteira ja esta em mono 13,5px sobre o vidro
--glass-2, em --paper. Tudo no mesmo peso quer dizer que nada e o
ponto. O numero da parcela sobe para --paper e o resto da frase
desce para --mute-2, que sobre #171B12 continua folgado na norma. */
body.woocommerce-checkout .eu-ckt-parcela td{
color:var(--mute-2,#AFB6A4)!important}
body.woocommerce-checkout .eu-ckt-parcela td strong{
font-weight:700!important;
color:var(--paper,#F2F3EF)!important}
/* CORRECAO, mesma hora: a linha de parcela nao mudou de cor.
`.shop_table tfoot td` tem tres classes na conta de especificidade e
a minha regra tinha duas. Empate de !important quem ganha e o mais
especifico, e o mais especifico era o dele. Subo o meu seletor ao
mesmo terreno em vez de empilhar mais um !important, que nao resolve
nada — !important nao e uma escada, e um interruptor. */
body.woocommerce-checkout .shop_table tfoot tr.eu-ckt-parcela td{
color:var(--mute-2,#AFB6A4)!important}
body.woocommerce-checkout .shop_table tfoot tr.eu-ckt-parcela td strong{
font-weight:700!important;
color:var(--paper,#F2F3EF)!important}
/* =========================================================
O TRANSBORDO DE 39px NO CELULAR — 25/09/2026
Medido na sonda a 412: scrollWidth 451. O culpado e meu.
O Select2 esconde o nativo com a receita sr-only
(position:absolute; width:1px; clip). A minha regra do checkout
dizia `... select{width:100%!important}` e, carregando depois do
select2.css, esticou justamente o no que deveria estar do tamanho
de um pixel. Ele fica escondido pelo clip, mas continua ocupando
401px de largura de rolagem — dai o arrasta-para-o-lado.
Mesmo erro de familia dos outros dois desta semana: regra larga
engolindo um no que existia de proposito.
========================================================= */
body.woocommerce-checkout select.select2-hidden-accessible,
body.woocommerce select.select2-hidden-accessible{
position:absolute!important;
width:1px!important;
height:1px!important;
min-width:0!important;
max-width:1px!important;
padding:0!important;
margin:-1px!important;
border:0!important;
overflow:hidden!important;
clip:rect(0,0,0,0)!important;
white-space:nowrap!important}
/* A linha de parcela voltou a ficar alinhada a direita e quebrava em
escadinha ("SEM / JUROS", "ECONOMIA DE / R$ 13,13"). Mesma causa do
conserto de cor de cinco minutos atras: `.shop_table tfoot td` tem
uma classe a mais na conta e ganhava do meu seletor antigo. Subo ao
mesmo terreno. Alinhada a esquerda ela le como frase, nao como
coluna de numeros, e cada linha cabe inteira nos 352px. */
body.woocommerce-checkout .shop_table tfoot tr.eu-ckt-parcela td{
text-align:left!important;
font-size:12.5px!important;
line-height:1.75!important;
letter-spacing:-.005em!important;
padding-top:10px!important;
text-wrap:pretty}
/* =========================================================
CATÁLOGO — A LINHA QUE O TEMPLATE NUNCA TEVE. 25/09/2026
O crítico deu 7/40 e recusou a tela. A causa-raiz, medida:
o template "Product Archive euescolho" (4168) é uma PILHA de cinco
contêineres, todos flex-direction:column. Sem contêiner de linha, o
painel de filtros não tem como ficar AO LADO da grade — só por cima
dela. Daí saem, de uma vez, todos os sintomas:
/tipo/branco/ (85 rótulos, viewport 2560x1249)
painel de filtros ...... x1095 y608 360x1052
primeira garrafa ....... x615 y1818 320x546
documento .............. 6.259px
/produto-tag/oferta-semana/ (9 rótulos)
painel de filtros ...... x1096 y608 360x1359
primeira garrafa ....... x615 y2125
documento .............. 4.952px
Ou seja: 1.818px de rolagem antes da primeira garrafa numa loja de
vinhos, com 960px vazios ao lado do filtro. E 14 eixos de goteira,
os dois mais fortes (1098 e 1130, 138 elementos cada) pertencendo ao
painel de filtros, não ao conteúdo.
O conserto NÃO é mexer no template. Os cinco contêineres são filhos
diretos de .elementor-location-archive, que é um div display:block.
Transformar ESSE div em grade dá a linha sem tocar no Elementor, e
some apagando este bloco.
Cuidado medido: .eu-archive-trustwrap tem fundo rgb(14,16,12) e
.eu-archive-seowrap tem rgb(228,231,221). São faixas de ponta a
ponta. Elas continuam em 1/-1; só o par filtro+grade vai para as
colunas do meio, que somam exatamente --wrap (1320) — o mesmo eixo
do cabeçalho e do .e-con-inner das outras faixas.
========================================================= */
@media (min-width:1025px){
/* --- 1. A LINHA --- */
.elementor-location-archive.product{
--eu-rail:260px;
--eu-rail-gut:36px;
display:grid;
grid-template-columns:
minmax(var(--gut,clamp(16px,3vw,40px)), 1fr)
var(--eu-rail)
minmax(0, calc(var(--wrap,1320px) - var(--eu-rail)))
minmax(var(--gut,clamp(16px,3vw,40px)), 1fr);
align-items:start}
.elementor-location-archive.product > .eu-archive-hero,
.elementor-location-archive.product > .elementor-element-6d31013,
.elementor-location-archive.product > .eu-archive-trustwrap,
.elementor-location-archive.product > .elementor-element-a9f8cfa,
.elementor-location-archive.product > .eu-archive-seowrap,
.elementor-location-archive.product > .elementor-element-84b6538{
grid-column:1 / -1}
.elementor-location-archive.product > .elementor-element-6d31013{grid-row:1}
.elementor-location-archive.product > .eu-archive-filterbar,
.elementor-location-archive.product > .elementor-element-fecf66b{grid-column:2;grid-row:2}
.elementor-location-archive.product > .eu-archive-gridwrap,
.elementor-location-archive.product > .elementor-element-e55f727{grid-column:3;grid-row:2}
.elementor-location-archive.product > .elementor-element-a9f8cfa{grid-row:3}
.elementor-location-archive.product > .elementor-element-84b6538{grid-row:4}
/* Os dois da linha perdem o teto de 1320: a célula já é a medida.
A goteira de 36px entra como padding da grade, para que o card
não precise saber que existe um trilho à esquerda. */
.elementor-element-fecf66b > .e-con-inner,
.elementor-element-e55f727 > .e-con-inner{
max-width:none!important;width:100%!important;padding-inline:0!important}
.elementor-element-fecf66b{padding-left:0!important;padding-right:0!important}
.elementor-element-e55f727{
padding-left:var(--eu-rail-gut,36px)!important;padding-right:0!important}
/* --- 2. O TRILHO --- */
/* No desktop não existe painel que abre: existe uma coluna. O botão
"Filtros" some, porque controle que não controla nada é ruído, e
o rótulo da coluna vira um cabeçalho de dado, em mono, como o
resto do sistema. */
.elementor-element-fecf66b .eu-filters-toggle{display:none!important}
.elementor-element-fecf66b .eu-filters-list{display:block!important}
.elementor-element-fecf66b .eu-archive-filters{
position:sticky;top:24px;
max-height:calc(100vh - 48px);
overflow-y:auto;overscroll-behavior:contain;
padding-right:10px}
.elementor-element-fecf66b .eu-archive-filters::before{
content:"Filtrar";display:block;
font-family:var(--eu-mono,"JetBrains Mono",monospace);
font-size:11px;font-weight:700;letter-spacing:.14em;
text-transform:uppercase;color:var(--mute-2,#AFB6A4);
padding-bottom:12px;margin-bottom:16px;
border-bottom:1px solid rgba(242,243,239,.14)}
/* barra de rolagem discreta do trilho */
.elementor-element-fecf66b .eu-archive-filters{
scrollbar-width:thin;scrollbar-color:rgba(242,243,239,.22) transparent}
/* --- 3. A GRADE --- */
/* 1320 − 260 de trilho − 36 de goteira = 1024.
Quatro colunas de 238 com 24 de goteira. */
.elementor-element-e55f727 ul.products{
grid-template-columns:repeat(4, minmax(0,1fr))!important;
gap:28px 24px!important}
/* --- 4. O HERÓI ACHATADO E À ESQUERDA --- */
/* Era 311px de altura com tudo centralizado, num site que fala à
esquerda. Migalha em cima, nome e contagem na mesma linha de base. */
.elementor-element-6d31013{
padding-top:26px!important;padding-bottom:22px!important}
.elementor-element-6d31013 > .e-con-inner{
flex-direction:row!important;flex-wrap:wrap!important;
align-items:baseline!important;
column-gap:18px!important;row-gap:2px!important}
.elementor-element-6d31013 .eu-archive-breadcrumb{flex:0 0 100%!important}
.elementor-element-6d31013 .eu-arch-titulo-w,
.elementor-element-6d31013 .eu-arch-count-w{flex:0 0 auto!important;width:auto!important}
.elementor-element-6d31013 .eu-arch-crumbs,
.elementor-element-6d31013 .eu-arch-h1,
.elementor-element-6d31013 .eu-arch-count{text-align:left!important}
.elementor-element-6d31013 .eu-arch-h1{
font-size:clamp(30px,3.2vw,44px)!important;line-height:1.04!important;
margin:8px 0 0!important}
.elementor-element-6d31013 .eu-arch-count{
font-family:var(--eu-mono,"JetBrains Mono",monospace)!important;
font-size:12px!important;letter-spacing:.1em!important;
text-transform:uppercase!important;color:var(--mute-2,#AFB6A4)!important;
margin:0!important;position:relative;top:-2px}
}
/* CORREÇÃO, cinco minutos depois: o herói continuou centralizado.
Eu mirei em .elementor-element-6d31013 > .e-con-inner, e esse
contêiner é `e-con-full` — não tem .e-con-inner nenhum. Quem
segura os três widgets é o filho e6fe10d (`e-con-boxed`). O
text-align:left tinha entrado (medido: computed "left"); o que
continuava centralizado era a CAIXA de cada widget, não o texto
dentro dela. */
@media (min-width:1025px){
.elementor-element-e6fe10d > .e-con-inner{
flex-direction:row!important;flex-wrap:wrap!important;
align-items:baseline!important;justify-content:flex-start!important;
column-gap:18px!important;row-gap:2px!important}
.elementor-element-e6fe10d .eu-archive-breadcrumb{
flex:0 0 100%!important;width:100%!important}
.elementor-element-e6fe10d .eu-arch-titulo-w,
.elementor-element-e6fe10d .eu-arch-count-w{
flex:0 0 auto!important;width:auto!important;max-width:none!important}
}
/* Vale nas duas larguras: o texto encosta na goteira, não flutua. */
.elementor-element-e6fe10d .eu-arch-crumbs,
.elementor-element-e6fe10d .eu-arch-h1,
.elementor-element-e6fe10d .eu-arch-count{text-align:left!important}
.elementor-element-e6fe10d > .e-con-inner{align-items:flex-start}
/* CATÁLOGO — acabamento, mesma passada.
Depois da linha, medido em /tipo/branco/ a 2560x1249:
primeira garrafa ... y=1818 -> y=507 (4 cards inteiros na dobra)
documento .......... 6.259 -> 4.615px
trilho ............. x615 w260 grade x911 w1024 card 238
Sobraram três desalinhamentos e um emoji. */
/* 1) A BARRA DE CONFIANÇA E O TEXTO DE SEO FORA DO EIXO
Medido: barra em x=832 com 887 de largura; SEO em x=951 com 648.
A coluna-mestra da página é 615/1320. A barra passa a ocupar a
faixa inteira; o SEO MANTÉM a medida de 648 — texto corrido com
1320 de largura não se lê — mas encosta na goteira em vez de
flutuar no meio. */
.eu-arch-trust{
max-width:none!important;width:100%!important;
margin-left:0!important;margin-right:0!important}
.eu-arch-seo{
margin-left:0!important;margin-right:auto!important;
text-align:left!important}
/* 2) AS 24 BANDEIRAS TWEMOJI
O DESIGN.md diz "sem emoji", e estas eram 24 imagens buscadas em
s.w.org dentro do bloco que precisa pintar primeiro. Não são
informação perdida: o snippet 4533 já escreve o país por extenso na
ficha do cartão ("Portugal · Branco · Loureiro"), medido em todos os
cartões da página. A bandeira era a mesma informação, dita duas
vezes, uma delas fora do sistema. O title continua no span para
quem lê o DOM. */
li.product .eu-card-flag img.emoji,
.eu-card-flag img.emoji{display:none!important}
li.product .eu-card-flag{
width:0!important;height:0!important;overflow:hidden!important;
position:absolute!important;opacity:0!important}
/* 3) O RAIO ÓRFÃO DE 2px
O sistema define um raio: 4px. Medidos 24 nós em 2px, todos nas
caixas de marcar do filtro. */
.eu-filters-list input[type="checkbox"],
.woof input[type="checkbox"]{border-radius:var(--r,4px)!important}
/* 4) A BUSCA DO FILTRO SEM ESTILO
Caixa branca crua dentro do trilho escuro. Vira campo do sistema. */
.eu-archive-filters .woof_husky_txt-input,
.eu-archive-filters input[type="text"]:not(.woof_price_search_container input){
background:rgba(242,243,239,.06)!important;
border:1px solid rgba(242,243,239,.20)!important;
border-radius:var(--r,4px)!important;
color:var(--paper,#F2F3EF)!important;
font-family:var(--eu-body,Archivo,sans-serif)!important;
font-size:14px!important;padding:10px 12px!important;width:100%!important}
/* CORREÇÃO: a barra de confiança e o SEO continuaram fora do eixo
mesmo com width:100%. Medido: as minhas regras ENTRARAM (max-width
none, width 100%, margin-left 0) — o que está estreito é o PAI.
O .elementor-shortcode do rodapé da listagem tem 887px em x=832
(confiança) e 648px em x=951 (SEO). O filho preenche 100% de uma
caixa que já nasceu estreita e centrada. Consertar o filho não
adianta: o eixo se decide um nível acima.
O SEO mantém as 78ch de medida de leitura que o post-3768 lhe dá —
texto corrido com 1320 de largura não se lê. Ele só passa a
encostar na goteira em vez de flutuar no meio. */
.elementor-element-a9f8cfa .elementor-widget-container,
.elementor-element-a9f8cfa .elementor-shortcode,
.elementor-element-a9f8cfa .elementor-widget,
.elementor-element-84b6538 .elementor-widget-container,
.elementor-element-84b6538 .elementor-shortcode,
.elementor-element-84b6538 .elementor-widget{
width:100%!important;max-width:none!important;
margin-left:0!important;margin-right:0!important}
.elementor-element-a9f8cfa > .e-con-inner,
.elementor-element-84b6538 > .e-con-inner{
align-items:stretch!important}
/* CATÁLOGO NO CELULAR — medido na sonda a 412.
Filtros nascem fechados (display:none, aria-expanded="false") e a
grade é de 2 colunas de 171,5px: isso já estava certo.
Dois ajustes:
1. O H1 saía em x=147 — caixa centrada. O text-align:left entrou,
mas quem centraliza é o align-items do contêiner do Elementor, e
a minha regra estava sem !important contra a variável dele.
2. Do fim do botão "Filtros" (y=547) até a primeira garrafa (y=689)
havia 142px de nada. Vira 32. */
@media (max-width:1024px){
.elementor-element-e6fe10d > .e-con-inner{
align-items:flex-start!important}
.elementor-element-e6fe10d .eu-arch-titulo-w,
.elementor-element-e6fe10d .eu-arch-count-w,
.elementor-element-e6fe10d .eu-archive-breadcrumb{
width:100%!important;max-width:none!important;align-self:stretch!important}
.elementor-element-6d31013{padding-bottom:16px!important}
.elementor-element-fecf66b{padding-bottom:0!important}
.elementor-element-e55f727{padding-top:32px!important}
}
/* O SELO "MAIS VENDIDO" DESALINHAVA O CARD
Medido em /produto-tag/oferta-semana/: .eu-card-topseller é um
STATIC de 238x26 no topo do link do card, sem fundo. Duas
consequências: ele empurra a garrafa 26px para baixo, e só nos
cards que o têm — na primeira fileira o card 1 ficava com a foto
mais baixa que os três vizinhos. É a mesma família do rótulo
ESGOTADO que já desalinhou o card em 24/09: selo que participa do
fluxo em vez de flutuar.
Vira etiqueta no canto, como o "−10%" do lado oposto, e sai do
fluxo: a foto de todos os cards volta ao mesmo y. */
li.product{position:relative}
li.product .eu-card-topseller{
position:absolute!important;top:10px;right:10px;z-index:3;
width:auto!important;
font-family:var(--eu-mono,"JetBrains Mono",monospace)!important;
font-size:9.5px!important;font-weight:700!important;
letter-spacing:.1em!important;text-transform:uppercase!important;
line-height:1!important;
padding:5px 7px!important;
border-radius:var(--r,4px)!important;
background:var(--green,#8BE01F)!important;
color:var(--ink,#12150E)!important;
pointer-events:none}
/* =========================================================
A CAMADA DE TEXTO QUE FALTAVA EM BLOG, SOBRE E CLUBE
25/09/2026
Medido, com o fundo composto de cada ancestral:
/blog/ 16 falhas, 9 a 1,00:1 — o H1 "Blog euescolho", os dois
H2 e os SEIS títulos de artigo são rgb(14,16,12) sobre
rgb(14,16,12). A página estava, na prática, em branco.
/sobre/ 7 falhas, 4 invisíveis — "O que a gente faz", "Como
trabalhamos", "Fala com a gente". Mais o verde
rgb(139,224,31) sobre a placa clara, a 1,31:1.
/clube/ 51 falhas, 41 invisíveis — e aqui INVERTIDO: texto
--paper sobre placa --paper-2, 1,12:1. A tabela inteira
de "Quantas Escolhas você ganha" some.
/minha-conta/ 0 falhas. Já tinha sido consertada.
É o erro do item 13 das armadilhas, agora nas duas direções: cada
página tem UMA camada de texto onde precisa de duas. Quem pinta
fundo é pouca gente — sete elementos no clube, cinco no blog, oito
no sobre — então a correção é enumerável e não um chute global.
Mexer no h1,h2,h3,h4 global derrubaria as nove faixas claras da
home, que já estão certas.
========================================================= */
/* --- BLOG: o corpo é escuro; só .eu-blog-cross é placa clara --- */
.elementor-3790 h1, .elementor-3790 h2,
.elementor-3790 .elementor-heading-title,
.elementor-3790 .elementor-post__title,
.elementor-3790 .elementor-post__title a{
color:var(--paper,#F2F3EF)!important}
.elementor-3790 .elementor-post__excerpt,
.elementor-3790 .elementor-post__excerpt p,
.elementor-3790 .elementor-post__meta-data{
color:var(--mute-2,#AFB6A4)!important}
.elementor-3790 .elementor-widget-text-editor p{color:var(--mute-2,#AFB6A4)!important}
/* a faixa clara do fim volta para tinta */
.eu-blog-cross h1,.eu-blog-cross h2,.eu-blog-cross h3,.eu-blog-cross h4,
.eu-blog-cross .elementor-heading-title{color:var(--ink,#12150E)!important}
.eu-blog-cross p,.eu-blog-cross li,.eu-blog-cross span:not(.eu-card-pix){
color:var(--ink-soft,#5B6152)!important}
/* --- SOBRE: corpo escuro, quatro placas claras --- */
.page-id-3733 h2, .page-id-3733 h3,
body:has(.eu-qs-hero) h2:not(.eu-qs-hero h2){color:var(--paper,#F2F3EF)!important}
body:has(.eu-qs-hero) .eu-qs-corpo,
body:has(.eu-qs-hero) .eu-qs-texto p{color:var(--mute-2,#AFB6A4)!important}
.eu-qs-hero, .eu-qs-num, .eu-qs-pilar, .eu-qs-contato{color:var(--ink,#12150E)}
.eu-qs-hero h1,.eu-qs-hero h2,.eu-qs-hero h3,
.eu-qs-num h1,.eu-qs-num h2,.eu-qs-num h3,.eu-qs-num strong,
.eu-qs-pilar h1,.eu-qs-pilar h2,.eu-qs-pilar h3,.eu-qs-pilar strong,
.eu-qs-contato h1,.eu-qs-contato h2,.eu-qs-contato h3{
color:var(--ink,#12150E)!important}
.eu-qs-hero p,.eu-qs-num p,.eu-qs-num span,
.eu-qs-pilar p,.eu-qs-pilar span,.eu-qs-contato p{
color:var(--ink-soft,#5B6152)!important}
/* O verde do sistema não existe sobre placa clara: 1,31:1 medido.
Em faixa clara o acento é o vinho, que é o outro acento do sistema. */
.eu-qs-hero .eu-acento, .eu-qs-hero em, .eu-qs-hero strong,
.eu-qs-hero span[style*="139, 224, 31"], .eu-qs-hero .eu-verde{
color:var(--wine,#6B1F2A)!important}
/* --- CLUBE: corpo escuro, três placas claras --- */
.eu-clube-passos, .eu-clube-tabela-wrap, .eu-clube-faq{color:var(--ink,#12150E)}
.eu-clube-passos h1,.eu-clube-passos h2,.eu-clube-passos h3,.eu-clube-passos h4,
.eu-clube-tabela-wrap h1,.eu-clube-tabela-wrap h2,.eu-clube-tabela-wrap h3,.eu-clube-tabela-wrap h4,
.eu-clube-faq h1,.eu-clube-faq h2,.eu-clube-faq h3,.eu-clube-faq h4,
.eu-clube-passos strong,.eu-clube-tabela-wrap strong,.eu-clube-faq strong,
.eu-clube-tabela-wrap th,.eu-clube-tabela-wrap td,
.eu-clube-passos .elementor-heading-title,
.eu-clube-tabela-wrap .elementor-heading-title,
.eu-clube-faq .elementor-heading-title{
color:var(--ink,#12150E)!important}
.eu-clube-passos p,.eu-clube-passos span,.eu-clube-passos li,
.eu-clube-tabela-wrap p,.eu-clube-tabela-wrap span,.eu-clube-tabela-wrap li,
.eu-clube-faq p,.eu-clube-faq span,.eu-clube-faq li{
color:var(--ink-soft,#5B6152)!important}
/* Os quatro que sobraram, lidos no DOM em vez de adivinhados.
SOBRE — o verde é `.eu-qs-hero h1 span` (1,31:1 sobre a placa
clara). E os parágrafos que falham são só os FILHOS DIRETOS de
.eu-qs, que ficam sobre o fundo escuro; os que estão dentro de
.eu-qs-hero e .eu-qs-pilar já passam, porque aquelas placas são
claras — por isso o seletor é `>` e não descendente.
CLUBE — .eu-clube-passos é a placa mais escura das três
(rgb 198,202,187). --ink-soft ali dá 3,84:1, abaixo da norma por
pouco. Naquela faixa o corpo vai em --ink. */
.eu-qs-hero h1 span{color:var(--wine,#6B1F2A)!important}
.eu-qs > p{color:var(--mute-2,#AFB6A4)!important}
.eu-clube-passos p,.eu-clube-passos span,.eu-clube-passos li{
color:var(--ink,#12150E)!important}
/* =========================================================
BLOG — DESENHO. 25/09/2026
(a legibilidade foi consertada no bloco anterior; isto é o layout)
Medido a 2560x1249, antes:
dez eixos de goteira — 895 x6, 615 x5, 1065 x4, 1515 x4, mais
902, 945, 950, 1064, 1079, 1216. O H1, a chamada e os três H2
estão CENTRALIZADOS, e cada um cai num x diferente, porque cada
um tem uma largura diferente. Centralizar é o que produz eixo
frouxo: a caixa mede o texto, não a coluna.
bloco de temas .......... x=895, largura 759 dentro de 1320
primeiro artigo ......... y=1386, abaixo da dobra de 1249
documento ............... 3.630px
emoji ................... 5
O site fala à esquerda. O blog era a única página que não.
========================================================= */
/* --- 1. TUDO NO EIXO, NADA CENTRALIZADO --- */
.elementor-3790 .eu-blog-hero .elementor-heading-title,
.elementor-3790 .eu-blog-temas .elementor-heading-title,
.elementor-3790 .eu-blog-posts .elementor-heading-title,
.elementor-3790 .eu-blog-cross .elementor-heading-title,
.elementor-3790 .eu-blog-hero p,
.elementor-3790 .elementor-widget-text-editor p{
text-align:left!important}
.elementor-3790 > .e-con > .e-con-inner{align-items:stretch!important}
/* --- 2. O HERÓI ACHATADO ---
347px de altura para duas linhas de texto. 56px de H1 é tamanho de
home, não de cabeçalho de seção. */
.elementor-3790 .eu-blog-hero{
padding-top:34px!important;padding-bottom:26px!important}
.elementor-3790 .eu-blog-hero h1{
font-size:clamp(30px,3.2vw,44px)!important;line-height:1.04!important;
margin:0 0 10px!important}
.elementor-3790 .eu-blog-hero p{
font-size:17px!important;line-height:1.5!important;
max-width:62ch!important;margin:0!important}
/* --- 3. OS TRÊS TEMAS: UMA LINHA, NO EIXO ---
Estavam empilhados numa coluna de 759px inset 280px para dentro,
sem motivo. Viram três placas de vidro na largura toda. */
.elementor-3790 .eu-blog-temas{
padding-top:0!important;padding-bottom:34px!important}
.elementor-3790 .eu-blog-temas h2{
font-size:13px!important;
font-family:var(--eu-mono,"JetBrains Mono",monospace)!important;
font-weight:700!important;letter-spacing:.14em!important;
text-transform:uppercase!important;
color:var(--mute-2,#AFB6A4)!important;
margin:0 0 16px!important}
.elementor-3790 .eu-blog-temas-grid,
.elementor-3790 .eu-blog-temas-grid .elementor-widget-container{
width:100%!important;max-width:none!important}
.elementor-3790 .eu-blog-grid{
display:grid!important;
grid-template-columns:repeat(3, minmax(0,1fr))!important;
gap:20px!important;width:100%!important;max-width:none!important;
margin:0!important}
.elementor-3790 .eu-blog-card{
background:var(--glass-2,#171B12)!important;
border:1px solid rgba(242,243,239,.10)!important;
border-radius:var(--r,4px)!important;
padding:18px 20px 20px!important;
display:flex;flex-direction:column;gap:8px}
.elementor-3790 .eu-blog-ico{
width:22px;height:22px;display:block;color:var(--green,#8BE01F)}
.elementor-3790 .eu-blog-ico svg{width:22px;height:22px;display:block}
.elementor-3790 .eu-blog-card h3{
font-size:17px!important;line-height:1.2!important;margin:2px 0 0!important;
color:var(--paper,#F2F3EF)!important}
.elementor-3790 .eu-blog-card p{
font-size:14.5px!important;line-height:1.5!important;margin:0!important;
color:var(--mute-2,#AFB6A4)!important}
/* --- 4. "ARTIGOS" VIRA RÓTULO DE SEÇÃO, NÃO MANCHETE ---
32px centralizado competia com o título dos próprios artigos. */
.elementor-3790 .eu-blog-posts{padding-top:0!important}
.elementor-3790 .eu-blog-posts h2,
.elementor-3790 .eu-blog-cross h2{
font-size:13px!important;
font-family:var(--eu-mono,"JetBrains Mono",monospace)!important;
font-weight:700!important;letter-spacing:.14em!important;
text-transform:uppercase!important;
margin:0 0 18px!important}
.elementor-3790 .eu-blog-posts h2{color:var(--mute-2,#AFB6A4)!important}
.elementor-3790 .eu-blog-cross h2{color:var(--ink-soft,#5B6152)!important}
.elementor-3790 .eu-blog-cross{padding-top:44px!important;padding-bottom:44px!important}
/* A FAIXA MORTA DO BLOG ERA 96px EM CIMA E 96px EMBAIXO, NO INNER.
Medido: o herói tem 323px de altura interna para 107px de conteúdo
(H1 de 56 + chamada de 51). A diferença não era margem dos widgets
— os dois estão com margin 0 — era `padding:96px 0` no
.e-con-inner. Eu tinha ajustado o padding do contêiner de FORA, que
é outro elemento; o de dentro continuou com o padrão do Elementor.
É a terceira vez hoje que o alvo certo estava um nível adiante. */
.elementor-3790 .eu-blog-hero > .e-con-inner{padding-block:6px 0!important;gap:10px!important}
.elementor-3790 .eu-blog-temas > .e-con-inner{padding-block:0!important;gap:0!important}
.elementor-3790 .eu-blog-posts > .e-con-inner{padding-block:0!important;gap:0!important}
.elementor-3790 .eu-blog-cross > .e-con-inner{padding-block:0!important;gap:0!important}
/* BLOG — a linha de meta dizia "12 de março de 2026 /// Nenhum
comentário". O widget está configurado com meta_data:["date"] só,
então a contagem de comentários vem de fora dele. Numa loja, o
número de comentários de um artigo não ajuda ninguém a escolher
vinho — e "Nenhum" ainda sugere que ninguém leu. Fica a data. */
.elementor-3790 .elementor-post__comments,
.elementor-3790 .elementor-post__meta-data .elementor-post__comments{display:none!important}
.elementor-3790 .elementor-post__meta-data{
font-family:var(--eu-mono,"JetBrains Mono",monospace)!important;
font-size:11px!important;letter-spacing:.06em!important;
color:var(--mute-2,#AFB6A4)!important;
margin:6px 0 10px!important}
.elementor-3790 .elementor-post__title{margin-bottom:0!important}
.elementor-3790 .elementor-post__read-more{
font-family:var(--eu-mono,"JetBrains Mono",monospace)!important;
font-size:11.5px!important;letter-spacing:.08em!important;
text-transform:uppercase!important;color:var(--green,#8BE01F)!important}
/* =========================================================
CLUBE — DESENHO. 25/09/2026 (página 4190)
Medido a 2560x1249:
nove eixos, nenhum dominante — 964 x8, 997 x8, 849 x7, 615 x5,
655, 1435, 924, 664, 1063. Tudo centralizado outra vez.
seis seções com `padding:96px 0` NO .e-con-inner = ~1.150px de
respiro num documento de 3.930px.
nove emoji.
E o achado que explica o pior sintoma visual: os dois botões do
herói EXISTEM como e
, mas **essas classes não têm CSS
nenhum na folha viva**. Por isso os dois saem como texto corrido e
se leem como uma frase só: "CRIAR CONTA E GANHAR 50 ESCOLHAS JÁ SOU
MEMBRO". É o padrão do item 9 das armadilhas — a regra morava no
skin 3848, que foi desligado, e o HTML ficou órfão. O JS funciona,
o link funciona, e nada aparece.
========================================================= */
/* --- 1. O RESPIRO: 96px vira 52 --- */
.elementor-4190 .e-con > .e-con-inner{padding-block:52px!important}
.elementor-4190 .eu-clube-hero > .e-con-inner{padding-block:40px 48px!important}
/* --- 2. UM EIXO SÓ --- */
.elementor-4190 h1,.elementor-4190 h2,.elementor-4190 h3,
.elementor-4190 p,.elementor-4190 .eu-clube-h2{text-align:left!important}
.elementor-4190 .e-con > .e-con-inner{align-items:stretch!important}
/* --- 3. OS BOTÕES ÓRFÃOS --- */
.eu-clube-cta-row{
display:flex!important;flex-wrap:wrap!important;
gap:12px!important;margin-top:22px!important;align-items:center}
.eu-clube-btn-primario,.eu-clube-btn-ghost{
display:inline-flex!important;align-items:center;justify-content:center;
min-height:50px;padding:0 22px!important;
border-radius:var(--r,4px)!important;
font-family:var(--eu-display,Sora,sans-serif)!important;
font-size:14.5px!important;font-weight:600!important;
line-height:1.1!important;text-decoration:none!important;
letter-spacing:.005em!important;
transition:background .15s ease, color .15s ease, box-shadow .15s ease}
.eu-clube-btn-primario{
background:var(--green,#8BE01F)!important;color:var(--ink,#12150E)!important;
box-shadow:none!important;border:0!important}
.eu-clube-btn-primario:hover{background:#9BEE33!important;color:var(--ink,#12150E)!important}
.eu-clube-btn-ghost{
background:transparent!important;color:var(--paper,#F2F3EF)!important;
box-shadow:inset 0 0 0 1px rgba(242,243,239,.34)!important;border:0!important}
.eu-clube-btn-ghost:hover{
background:rgba(242,243,239,.09)!important;color:var(--paper,#F2F3EF)!important}
/* --- 4. A ETIQUETA DO TOPO --- */
.eu-clube-badge{
display:inline-block;
font-family:var(--eu-mono,"JetBrains Mono",monospace)!important;
font-size:11px!important;font-weight:700!important;letter-spacing:.14em!important;
text-transform:uppercase!important;color:var(--mute-2,#AFB6A4)!important;
margin:0 0 14px!important}
.eu-clube-h1{
font-size:clamp(30px,3.4vw,46px)!important;line-height:1.04!important;
margin:0 0 14px!important}
.eu-clube-sub{
font-size:17px!important;line-height:1.55!important;max-width:56ch!important;
color:var(--mute-2,#AFB6A4)!important;margin:0!important}
.eu-clube-sub strong{color:var(--paper,#F2F3EF)!important}
/* --- 5. A PLACA DO EXEMPLO ---
Estava solta no vazio à direita, sem fundo nem borda: quatro linhas
de texto flutuando. Vira placa de vidro, como o resumo do checkout,
que é a linguagem que o site já usa para "conta feita". */
.eu-clube-exemplo{
background:var(--glass-2,#171B12)!important;
border:1px solid rgba(242,243,239,.12)!important;
border-radius:var(--r,4px)!important;
padding:22px 24px!important;max-width:420px}
.eu-clube-exemplo-rotulo{
font-family:var(--eu-mono,"JetBrains Mono",monospace)!important;
font-size:11px!important;font-weight:700!important;letter-spacing:.14em!important;
text-transform:uppercase!important;color:var(--mute-2,#AFB6A4)!important;
margin:0 0 12px!important}
.eu-clube-exemplo p{margin:0 0 8px!important;font-size:15px!important;
color:var(--mute-2,#AFB6A4)!important}
.eu-clube-exemplo strong{
font-family:var(--eu-mono,"JetBrains Mono",monospace)!important;
color:var(--paper,#F2F3EF)!important;font-weight:700!important}
.eu-clube-exemplo-ganho strong{color:var(--green,#8BE01F)!important}
.eu-clube-exemplo-nota{
font-family:var(--eu-mono,"JetBrains Mono",monospace)!important;
font-size:11.5px!important;color:var(--mute-2,#AFB6A4)!important;
margin:12px 0 0!important;opacity:.85}
.eu-clube-trilho{
height:6px;border-radius:99px;background:rgba(242,243,239,.14);
margin:14px 0 12px!important;overflow:hidden}
.eu-clube-trilho span{display:block;height:100%;background:var(--green,#8BE01F)}
/* --- 6. OS NOVE EMOJI ---
Estão dentro do texto dos títulos ("Simples assim 👇", "Como usar
suas Escolhas 💰"). Escondo em vez de reescrever quatro widgets:
são decorativos, e o título continua inteiro sem eles. */
.elementor-4190 img.emoji{display:none!important}
/* --- 7. OS H2 DAS SEÇÕES --- */
.elementor-4190 .eu-clube-h2{
font-size:clamp(22px,2.2vw,30px)!important;line-height:1.1!important;
margin:0 0 22px!important}
/* SOBRE — o H1 da página ficava em x=430 e a coluna de leitura em
x=517: dois eixos na mesma tela. O H1 mora FORA do .eu-qs (é o
widget de título do Elementor), então não herdou a coluna de 860.
Passa a dividir a mesma caixa.
Decisão registrada: o Sobre CONTINUA com a coluna centrada de
860px, e não no eixo 615 do resto do site. É uma página de leitura
corrida — medida de leitura vence eixo de grade aqui, e a página é
internamente consistente. É a exceção, e é deliberada. */
.page-id-1133 .elementor-widget-theme-page-title,
.page-id-1133 .elementor-widget-heading:not(.eu-qs *){
max-width:860px!important;margin-inline:auto!important;width:100%!important}
.page-id-1133 .elementor-widget-theme-page-title .elementor-heading-title,
.page-id-1133 .elementor-widget-heading:not(.eu-qs *) .elementor-heading-title{
text-align:left!important;
font-size:clamp(26px,2.4vw,32px)!important;
color:var(--mute-2,#AFB6A4)!important;
margin:0 0 14px!important}
/* =========================================================
MINHA CONTA — DESENHO. 25/09/2026
Contraste já estava limpo (0 falhas na varredura). O problema é
estrutura, medido a 2560x1249:
.woocommerce-account .woocommerce ... x=705 largura 1140
.eu-conta-sidebar ................... x=705 largura 1140 y=297
.woocommerce-MyAccount-navigation ... x=705 largura 342 y=539
.eu-conta-ajuda ..................... x=705 largura 1140 y=539
.woocommerce-MyAccount-content ...... x=1070 largura 775 y=605
Dois achados. Primeiro: o bloco "Precisa de ajuda? / Falar no
WhatsApp" tem 1.140px de largura e começa no MESMO y do menu —
passa por baixo do conteúdo e por cima do menu, porque a barra
lateral é `display:block` e ele não sabe que é uma coluna.
Segundo: a página inteira mora em 1140 a partir de x=705, e o
resto do site agora mora em 1320 a partir de 615. Duas réguas.
Vira a mesma linha do catálogo: trilho à esquerda, conteúdo à
direita, no eixo do site. Um padrão para as duas telas de coluna
lateral, não dois.
========================================================= */
@media (min-width:1025px){
.woocommerce-account .woocommerce{
display:grid!important;
grid-template-columns:300px minmax(0,1fr)!important;
column-gap:36px!important;
align-items:start!important;
max-width:var(--wrap,1320px)!important;
margin-inline:auto!important;width:100%!important}
.woocommerce-account .eu-conta-sidebar{
grid-column:1!important;width:100%!important;max-width:none!important;
position:sticky;top:24px}
.woocommerce-account .woocommerce-MyAccount-content{
grid-column:2!important;width:100%!important;max-width:none!important;
float:none!important;margin:0!important}
.woocommerce-account .woocommerce-MyAccount-navigation{
width:100%!important;float:none!important;margin:0 0 16px!important}
.woocommerce-account .eu-conta-ajuda{
width:100%!important;max-width:none!important;margin:0!important}
/* o título da página no mesmo eixo do trilho */
.woocommerce-account .elementor-widget-theme-page-title,
.woocommerce-account .eu-conta-h1-w{
max-width:var(--wrap,1320px)!important;margin-inline:auto!important}
}
/* Os 12 emoji do painel — 🏠 📦 ⬇️ 📍 👤 🔒 🏆 🚪 no menu, 🌙 e 🍷 na
saudação, 💰 e 🎁 nos cartões. O DESIGN.md diz sem emoji, e um menu
de conta lê melhor sem eles do que com oito bandeirinhas de
tamanhos diferentes. */
.woocommerce-account img.emoji{display:none!important}
.woocommerce-account .eu-conta-card-icone{display:none!important}
.woocommerce-account .woocommerce-MyAccount-navigation a{
padding-left:0!important}
/* CONSERTO DO MEU PRÓPRIO CONSERTO, medido na tela:
ao esconder os emoji do menu da conta eu deixei o menu PELA METADE.
Oito itens: quatro usavam emoji (Painel, Downloads, Dados pessoais,
Sair) e sumiram; quatro usam glifo de ícone de verdade (Meus
pedidos, Endereços, Alterar senha, Minhas Escolhas) e ficaram. Um
menu com metade dos itens marcados é pior do que com todos ou com
nenhum — a marca vira ruído em vez de sinal.
Some com todos: menu de conta lê bem como texto puro. */
.woocommerce-account .woocommerce-MyAccount-navigation a > svg,
.woocommerce-account .woocommerce-MyAccount-navigation a > i,
.woocommerce-account .woocommerce-MyAccount-navigation a > span[class*="ico"],
.woocommerce-account .woocommerce-MyAccount-navigation li::before,
.woocommerce-account .woocommerce-MyAccount-navigation a::before{
display:none!important;content:none!important}
.woocommerce-account .woocommerce-MyAccount-navigation a{
display:block!important;padding-left:0!important}
/* o glifo solto no fim da linha de boas-vindas */
.woocommerce-account .eu-conta-bemvindo svg,
.woocommerce-account .eu-conta-bemvindo i{display:none!important}
/* Lido no DOM: o menu da conta tem DOIS tipos de marca. Quatro itens
têm — o SVG que o
snippet 4538 desenha no lugar do emoji. O 4538 só conhece parte dos
glifos, então metade converteu e metade não. Escondendo só os
`img.emoji` eu deixei o menu meio marcado, que é pior que os dois
extremos. Agora somem os dois tipos: menu de conta em texto puro. */
.woocommerce-account .woocommerce-MyAccount-navigation .eu-ico,
.woocommerce-account .woocommerce-MyAccount-navigation img.emoji{
display:none!important}
.woocommerce-account .woocommerce-MyAccount-navigation a{
padding-left:0!important;text-indent:0!important}
/* =========================================================
BUSCA — os resultados não eram cards. 25/09/2026
Medido em /?s=mum, 29 resultados:
ul.products existe, classe "products columns-4"
grid-template-columns .. repeat(4, minmax(0px, 1fr)) ← minha regra entrou
display ................ **block** ← e esta não
Ou seja: as colunas estavam declaradas e a grade não estava ligada.
Um em block com marcador de lista — daí a bolinha à esquerda de
cada vinho, a foto gigante e "R$ 59,00 Adicionar ao carrinho"
correndo numa linha só.
A causa: o `display:grid` do catálogo vem de uma regra presa às
classes de arquivo do . Na busca o corpo é
`search search-results`, não `archive tax-…`, então aquela regra não
casa — e sobrou a metade da minha que casa em qualquer lugar.
A busca usa o MESMO template do catálogo (o trilho de filtros está
lá, a contagem também): faltava só isto. */
body.search ul.products,
body.woocommerce ul.products,
.elementor-location-archive ul.products,
.elementor-element-e55f727 ul.products{
display:grid!important;
list-style:none!important;
margin:0!important;
padding:0!important}
body.search ul.products > li,
.elementor-element-e55f727 ul.products > li{
list-style:none!important;margin:0!important;float:none!important;width:auto!important}
/* O clearfix do WooCommerce vira item de grade quando a lista passa a
ser grid e rouba a primeira célula. Já tinha mordido em 24/09. */
body.search ul.products::before,
body.search ul.products::after,
.elementor-element-e55f727 ul.products::before,
.elementor-element-e55f727 ul.products::after{content:none!important;display:none!important}
/* ===== PAGINA DE PESQUISA — 25/09/2026 =====
* O template de arquivo atende busca e taxonomia com o mesmo HTML.
* Tres coisas so fazem sentido em taxonomia, e na busca mentem:
*
* 1. A MIGALHA. O H1 ja passou a dizer "Resultados para X" (filtro
* get_the_archive_title, snippet 4533). A migalha logo acima diz
* a mesma frase em caixa alta — medido: duas linhas com o mesmo
* conteudo, 11px sobre 54px. Some na busca. Resultado de busca
* nao e um lugar na hierarquia do site, e nao deve ser indexado.
*
* 2. O TEXTO SEO. "Curadoria de escolhida rotulo a rotulo"
* vira "Curadoria de Resultados para 'mum'" — frase quebrada.
* O bloco e boilerplate de arquivo de categoria; na busca sai.
*
* 3. O VAZIO. "Nenhum vinho encontrado com esses filtros / afrouxar
* a selecao" — na busca ninguem filtrou nada, digitou uma
* palavra. O texto e impresso pelo WPCode 4173, que nao e
* editavel por aqui, entao a troca e feita aqui: o texto errado
* sai por font-size, o certo entra por ::before, e o unico no
* que precisa sobreviver — o link "ver todos os vinhos" — volta
* ao tamanho normal.
*/
body.search .eu-arch-crumbs,
body.search .eu-arch-seo{display:none!important}
/* --- o vazio da busca --- */
body.search .eu-arch-vazio{
padding:56px 40px!important;
border:1px solid var(--rule,#C6CABB)!important;
border-radius:var(--r,4px)!important;
max-width:640px}
body.search .eu-arch-vazio > p:first-child > strong{display:none!important}
body.search .eu-arch-vazio > p:first-child::before{
content:"Nenhum vinho com esse nome.";
font-weight:700}
body.search .eu-arch-vazio > p:last-child{font-size:0!important}
body.search .eu-arch-vazio > p:last-child::before{
content:"Tente outra palavra — o nome do produtor, a uva ou o pais — ou ";
font-size:16px}
body.search .eu-arch-vazio > p:last-child a{font-size:16px!important}
body.search .eu-arch-vazio > p:last-child::after{
content:".";
font-size:16px}
/* correcao de acento no bloco acima (a regra repete, a ultima vence) */
body.search .eu-arch-vazio > p:last-child::before{
content:"Tente outra palavra \2014 o nome do produtor, a uva ou o pa\00ED s \2014 ou ";
font-size:16px}
/* o escape \2014 comia o espaco seguinte ("palavra —o nome"): literal resolve */
body.search .eu-arch-vazio > p:last-child::before{
content:"Tente outra palavra — o nome do produtor, a uva ou o país — ou ";
font-size:16px}
/* o unico link do vazio estava com a mesma cor do texto — na tela
* cheia de vidro escuro a placa e clara, entao o link vai de vinho
* sublinhado, que e o padrao de link em fundo claro no resto do site */
body.search .eu-arch-vazio > p:last-child a{
color:var(--wine,#6B1F2A)!important;
text-decoration:underline!important;
text-underline-offset:3px;
font-weight:700!important}
/* a placa do vazio no celular: 56px de cada lado num viewport de
* 412 deixaria 332px de texto. Aperta. */
@media (max-width:767px){
body.search .eu-arch-vazio{padding:32px 20px!important}
}
/* ===== CLUBE — RECONSTRUCAO DAS FAIXAS 25/09/2026 =====
* "o clube nao esta nem um pouco legal, principalmente apos o header
* e primeira dobra" — e estava certo. Medido antes: .eu-clube-grid3 e
* .eu-clube-grid2 em display:block (a folha da pagina nunca foi
* escrita), .eu-clube-cta-btn em display:inline sem fundo — o CTA era
* texto solto — e o do FAQ cru.
*
* Classes NOVAS (eu-cl2-*) de proposito: as antigas tem regra pela
* metade espalhada, e eu prefiro escrever limpo a caçar
* especificidade. As eu-clube-btn-* ficam, essas funcionam.
*
* NENHUM NUMERO DE REGRA MORA NO HTML. Todo valor do programa entra
* por [data-eu-clube], preenchido pelo script da calculadora a partir
* do window.EU_CLUBE (snippet 4713, que le o WPLoyalty). Se a regra
* mudar no plugin, a pagina inteira muda junto.
*/
/* --- 1. a primeira dobra: copy a esquerda, calculadora a direita --- */
.elementor-element-3dd6e7a > .e-con-inner{
display:flex!important; gap:48px!important; align-items:center!important}
.elementor-element-719c6ac{flex:1 1 auto!important; min-width:0!important}
.elementor-element-665ab99{flex:0 0 440px!important; max-width:440px!important}
.eu-cl2-badge{
display:inline-block; font-family:'JetBrains Mono',ui-monospace,monospace;
font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
color:var(--mute-2,#AFB6A4); margin-bottom:14px}
.eu-cl2-h1{
margin:0 0 14px!important; font-size:clamp(32px,4.4vw,48px)!important;
line-height:1.04!important; color:var(--paper,#F2F3EF)!important}
.eu-cl2-sub{
margin:0 0 24px!important; font-size:17px; line-height:1.55;
color:var(--mute-2,#AFB6A4); max-width:54ch}
.eu-cl2-sub strong{color:var(--paper,#F2F3EF); font-weight:700}
.eu-cl2-cta-row{display:flex; flex-wrap:wrap; gap:12px; align-items:stretch}
.eu-cl2-hero-nota{
margin:18px 0 0!important; font-size:13px; line-height:1.5;
color:var(--mute-2,#AFB6A4); opacity:1; max-width:52ch}
/* --- 2. a calculadora --- */
.eu-cl2-calc[hidden]{display:none!important}
.eu-cl2-calc{
background:var(--glass-2,#171B12); border:1px solid rgba(242,243,239,.12);
border-radius:var(--r,4px); padding:28px 30px}
.eu-cl2-calc-rot,.eu-cl2-calc-lab{
display:block; font-family:'JetBrains Mono',ui-monospace,monospace;
font-size:11px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
color:var(--mute-2,#AFB6A4)}
.eu-cl2-calc-rot{margin-bottom:14px}
.eu-cl2-calc-valor{
display:block; font-family:'JetBrains Mono',ui-monospace,monospace;
font-size:44px; font-weight:700; line-height:1; color:var(--paper,#F2F3EF);
margin-bottom:22px}
.eu-cl2-calc-range{
-webkit-appearance:none; appearance:none; width:100%; height:6px;
border-radius:99px; outline:none; cursor:pointer; margin:0 0 8px;
background:linear-gradient(90deg,
var(--green,#8BE01F) 0 var(--eu-pct,50%),
rgba(242,243,239,.18) var(--eu-pct,50%) 100%)}
.eu-cl2-calc-range::-webkit-slider-thumb{
-webkit-appearance:none; appearance:none; width:26px; height:26px;
border-radius:50%; background:var(--green,#8BE01F);
border:3px solid var(--glass-2,#171B12); cursor:pointer}
.eu-cl2-calc-range::-moz-range-thumb{
width:22px; height:22px; border-radius:50%; background:var(--green,#8BE01F);
border:3px solid var(--glass-2,#171B12); cursor:pointer}
.eu-cl2-calc-range:focus-visible{outline:2px solid var(--green,#8BE01F); outline-offset:5px}
.eu-cl2-calc-extremos{
display:flex; justify-content:space-between;
font-family:'JetBrains Mono',ui-monospace,monospace; font-size:11px;
color:var(--mute-2,#AFB6A4); margin-bottom:26px}
.eu-cl2-calc-num{
display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px;
padding-top:22px; border-top:1px solid rgba(242,243,239,.12)}
.eu-cl2-calc-num strong{
display:block; margin-top:7px;
font-family:'JetBrains Mono',ui-monospace,monospace; font-size:27px;
font-weight:700; color:var(--green,#8BE01F); line-height:1}
.eu-cl2-calc-saldo{
margin-top:22px; padding-top:22px; border-top:1px solid rgba(242,243,239,.12)}
.eu-cl2-calc-saldo strong{
display:block; margin-top:7px;
font-family:'JetBrains Mono',ui-monospace,monospace; font-size:38px;
font-weight:700; color:var(--paper,#F2F3EF); line-height:1}
.eu-cl2-calc-pe{
display:block; margin-top:8px; font-size:13.5px; line-height:1.5;
color:var(--mute-2,#AFB6A4)}
.eu-cl2-calc-rodape{
margin:20px 0 0!important; padding-top:16px;
border-top:1px solid rgba(242,243,239,.12);
font-size:13px; line-height:1.55; color:var(--mute-2,#AFB6A4)}
.eu-cl2-calc-rodape strong{color:var(--paper,#F2F3EF)}
/* --- 3. titulos das faixas claras --- */
.eu-cl2-h2{
margin:0 0 10px!important; font-size:clamp(24px,2.6vw,30px)!important;
line-height:1.12!important; color:var(--ink,#12150E)!important}
.eu-cl2-h2--claro{color:var(--paper,#F2F3EF)!important}
.eu-cl2-h2-sub{
margin:0 0 30px!important; font-size:16px; line-height:1.55;
color:var(--ink-soft,#5B6152); max-width:56ch}
/* --- 4. os tres passos --- */
.elementor-element-37d36fd{background-color:var(--paper,#F2F3EF)!important}
.eu-cl2-passos{
display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px;
margin-top:26px}
.eu-cl2-passo{
background:#FFF; border:1px solid var(--rule,#C6CABB);
border-radius:var(--r,4px); padding:24px 26px}
.eu-cl2-passo-n{
display:block; font-family:'JetBrains Mono',ui-monospace,monospace;
font-size:12px; font-weight:700; letter-spacing:.12em;
color:var(--wine,#6B1F2A); margin-bottom:12px}
.eu-cl2-passo-t{
margin:0 0 8px!important; font-size:18px!important; line-height:1.2!important;
color:var(--ink,#12150E)!important}
.eu-cl2-passo-p{
margin:0!important; font-size:15px; line-height:1.6; color:var(--ink-soft,#5B6152)}
.eu-cl2-passo-p strong{color:var(--ink,#12150E)}
.eu-cl2-passo-p a{color:var(--wine,#6B1F2A); text-decoration:underline; text-underline-offset:3px}
/* --- 5. a regra inteira --- */
.eu-cl2-regra{
display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px}
.eu-cl2-regra-item{
background:var(--paper,#F2F3EF); border:1px solid var(--rule,#C6CABB);
border-radius:var(--r,4px); padding:20px 22px}
.eu-cl2-regra-v{
display:block; font-family:'JetBrains Mono',ui-monospace,monospace;
font-size:24px; font-weight:700; color:var(--ink,#12150E);
line-height:1; margin-bottom:8px}
.eu-cl2-regra-d{
display:block; font-size:14.5px; line-height:1.5; color:var(--ink-soft,#5B6152)}
/* --- 6. no checkout, na pratica (faixa escura) --- */
.eu-cl2-checkout{display:flex; gap:40px; align-items:flex-start}
.eu-cl2-checkout-texto{flex:1 1 auto; min-width:0}
.eu-cl2-checkout-p{
margin:0 0 14px!important; font-size:15.5px; line-height:1.6;
color:var(--mute-2,#AFB6A4); max-width:58ch}
.eu-cl2-checkout-p strong{color:var(--paper,#F2F3EF)}
.eu-cl2-checkout-p a{color:var(--green,#8BE01F); text-decoration:underline; text-underline-offset:3px}
.eu-cl2-checkout-p--nota{margin-bottom:0!important; font-size:14px}
.eu-cl2-recibo{
flex:0 0 400px; max-width:400px;
background:var(--paper,#F2F3EF); border-radius:var(--r,4px); padding:24px 26px}
.eu-cl2-recibo-rot{
display:block; font-family:'JetBrains Mono',ui-monospace,monospace;
font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
color:var(--ink-soft,#5B6152); margin-bottom:16px}
.eu-cl2-recibo-linha{
display:flex; justify-content:space-between; gap:16px;
font-family:'JetBrains Mono',ui-monospace,monospace; font-size:14px;
color:var(--ink-soft,#5B6152); padding:9px 0;
border-top:1px solid var(--rule,#C6CABB)}
.eu-cl2-recibo-linha--verde{color:var(--wine,#6B1F2A); font-weight:700}
.eu-cl2-recibo-linha--total{
color:var(--ink,#12150E); font-weight:700; font-size:18px; padding-top:12px}
.eu-cl2-recibo-pe{
margin:14px 0 0!important; padding-top:12px;
border-top:1px solid var(--rule,#C6CABB);
font-size:13px; line-height:1.5; color:var(--ink-soft,#5B6152)}
/* --- 7. o fecho --- */
.eu-cl2-cta-h2{
margin:0 0 10px!important; font-size:clamp(24px,2.8vw,32px)!important;
line-height:1.1!important; color:var(--paper,#F2F3EF)!important}
.eu-cl2-cta-sub{
margin:0 0 24px!important; font-size:16.5px; line-height:1.55;
color:var(--mute-2,#AFB6A4)}
/* --- 8. celular: tudo empilha --- */
@media (max-width:1024px){
.elementor-element-3dd6e7a > .e-con-inner{
flex-direction:column!important; align-items:stretch!important; gap:32px!important}
.elementor-element-665ab99{flex:1 1 auto!important; max-width:none!important}
.eu-cl2-checkout{flex-direction:column; gap:28px}
.eu-cl2-recibo{flex:1 1 auto; max-width:none; width:100%}
.eu-cl2-passos{grid-template-columns:repeat(2,minmax(0,1fr))}
.eu-cl2-regra{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:767px){
.eu-cl2-passos,.eu-cl2-regra{grid-template-columns:1fr}
.eu-cl2-calc{padding:22px 20px}
.eu-cl2-calc-valor{font-size:36px}
.eu-cl2-calc-saldo strong{font-size:32px}
.eu-cl2-cta-row .eu-clube-btn-primario,
.eu-cl2-cta-row .eu-clube-btn-ghost{flex:1 1 100%; justify-content:center}
}
/* --- 9. o FAQ do Clube, que estava cru ---
* Medido: sem nenhuma regra — triangulo padrao do
* navegador, sem espaco entre itens, sem linha, resposta colada na
* pergunta. O shortcode e do WPCode 4189 e nao e editavel por aqui,
* entao a forma vem toda da folha. O marcador nativo sai e entra um
* sinal proprio, que gira ao abrir.
*/
.eu-clube-faq-lista{
display:grid; gap:0; margin-top:24px;
border-top:1px solid var(--rule,#C6CABB)}
.eu-clube-faq-item{
border-bottom:1px solid var(--rule,#C6CABB)}
.eu-clube-faq-item > summary{
list-style:none; cursor:pointer; position:relative;
display:flex; align-items:center; gap:16px;
padding:18px 44px 18px 0;
font-size:16.5px; font-weight:700; line-height:1.4;
color:var(--ink,#12150E)}
.eu-clube-faq-item > summary::-webkit-details-marker{display:none}
.eu-clube-faq-item > summary::marker{content:''}
.eu-clube-faq-item > summary::after{
content:''; position:absolute; right:6px; top:50%;
width:11px; height:11px; margin-top:-7px;
border-right:2px solid var(--wine,#6B1F2A);
border-bottom:2px solid var(--wine,#6B1F2A);
transform:rotate(45deg); transition:transform .18s ease}
.eu-clube-faq-item[open] > summary::after{
transform:rotate(-135deg); margin-top:-2px}
.eu-clube-faq-item > summary:hover{color:var(--wine,#6B1F2A)}
.eu-clube-faq-item > summary:focus-visible{
outline:2px solid var(--wine,#6B1F2A); outline-offset:3px}
.eu-clube-faq-resp{padding:0 44px 20px 0}
.eu-clube-faq-resp p{
margin:0!important; font-size:15.5px; line-height:1.65;
color:var(--ink-soft,#5B6152); max-width:74ch}
/* --- 10. a cabeca do recibo --- */
.eu-cl2-recibo-cabeca{
margin:0 0 16px!important; padding-bottom:14px;
border-bottom:1px solid var(--rule,#C6CABB);
font-size:14.5px; line-height:1.55; color:var(--ink-soft,#5B6152)}
.eu-cl2-recibo-cabeca strong{color:var(--ink,#12150E)}
.eu-cl2-recibo-linha:first-of-type{border-top:0}
/* ===== O FIM DA PÁGINA — 25/09/2026 =====
* "esse rodape imenso tbm esta meio estranho". Medido, do cupom ao
* fim: 1.367px, dos quais ~370px são só respiro. O que pesava:
*
* 1. O FILETE CUSTAVA 105px DE APROXIMAÇÃO PARA 2px DE LINHA. O
* container c094615 tinha margin 26px e o widget divider dentro
* dele outra margin-top de 26px, mais 29px de altura própria.
* A linha virou border-top da faixa legal e o container sai.
* 2. As faixas empilhadas somavam 288px só de padding: cupom 64+64,
* confiança 80+80. Numa sequência de três faixas escuras iguais,
* isso lê como vazio, não como respiro.
* 3. A COLUNA DE PAGAMENTO DESPERDIÇAVA 105px. A faixa legal é grade
* de duas colunas; a esquerda tinha 164px de pilha e a direita
* 59px flutuando embaixo. Agora as duas começam na mesma linha.
* 4. O aviso de 18 anos — exigência legal — flutuava dentro da
* coluna da esquerda e usava ⚠️ como ícone. Virou faixa própria
* de largura inteira, com SVG traçado.
*/
/* --- as duas faixas antes do rodapé --- */
.elementor-element-2217b40 > .e-con-inner{padding:44px 0!important}
.elementor-element-8791470{padding:44px 48px!important}
/* --- o corpo do rodapé --- */
.elementor-element-b906999{padding:44px 40px 36px!important}
/* --- o filete deixa de ser um elemento --- */
.elementor-element-c094615{display:none!important}
.elementor-element-c2b5115{
border-top:1px solid rgba(242,243,239,.14)!important;
padding:26px 40px 24px!important;
align-items:start!important;
gap:24px 56px!important}
.elementor-element-b8060db,.elementor-element-5a73f1a{align-self:start!important}
.eu-footer-legal-texto .eu-legal-linha{
margin:0 0 4px!important; line-height:1.55; font-size:13px}
.eu-footer-legal-texto .eu-legal-linha:last-child{margin-bottom:0!important}
/* a coluna de pagamento alinha o rótulo com a primeira linha legal */
.elementor-element-5a73f1a{gap:10px!important}
/* --- a faixa de 18 anos, largura inteira --- */
.eu-footer-18-w{
border-top:1px solid rgba(242,243,239,.14);
padding:14px 40px 18px!important;
width:100%}
.eu-footer-18{
display:flex; align-items:center; gap:10px;
margin:0!important;
max-width:var(--wrap,1320px); margin-inline:auto!important;
font-family:'JetBrains Mono',ui-monospace,monospace;
font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
line-height:1.5; color:var(--mute-2,#AFB6A4)}
.eu-footer-18-ico{flex-shrink:0; color:var(--green,#8BE01F)}
@media (max-width:767px){
.elementor-element-2217b40 > .e-con-inner{padding:32px 0!important}
.elementor-element-8791470{padding:32px 20px!important}
.elementor-element-b906999{padding:32px 20px 28px!important}
.elementor-element-c2b5115{padding:22px 20px 20px!important}
.eu-footer-18-w{padding:14px 20px 18px!important}
.eu-footer-18{align-items:flex-start; letter-spacing:.06em}
}
/* ===== AS PRATELEIRAS DA HOME — 25/09/2026 =====
* Antes: UMA prateleira, 6 vinhos, cartão de 431px em 3 colunas,
* 1.613px de faixa. Os seis eram tintos.
* Agora: quatro prateleiras de 8, filtradas por estoque, no MESMO
* cartão do catálogo. O cartão da home ser diferente do cartão do
* resto do site era inconsistência sem motivo — e custava altura.
*
* A grade vem daqui e não do widget porque quem monta a lista agora
* é o shortcode [eu_prateleira] (snippet 4736): a grade do Elementor
* não sabe filtrar estoque.
*/
.eu-prat ul.products{
display:grid!important;
grid-template-columns:repeat(4,minmax(0,1fr))!important;
gap:28px 24px!important;
list-style:none!important; margin:0!important; padding:0!important}
.eu-prat ul.products > li{
list-style:none!important; margin:0!important; float:none!important;
width:auto!important}
.eu-prat ul.products::before,.eu-prat ul.products::after{
content:none!important; display:none!important}
/* o cabeçalho de cada prateleira respira igual em todas */
.eu-ofertas > .e-con-inner > .eu-ofertas-header,
.eu-ofertas-header{margin-bottom:26px}
@media (max-width:1024px){
.eu-prat ul.products{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
@media (max-width:767px){
.eu-prat ul.products{grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:20px 14px!important}
}
/* ===== A MOLDURA DA GARRAFA — 25/09/2026 =====
* Bug visto pelo Andre: "as garrafas estao cada uma de um tamanho".
*
* MEDIDO em 30 cartoes da home: a foto do cartao sai como
* `attachment-full size-full`, ou seja, o ARQUIVO ORIGINAL, e o
* navegador herda a proporcao dele.
*
* 1300 x 1300 -> 312 x 312 (a maioria)
* 339 x 515 -> 312 x 474 (as antigas)
*
* Com object-fit:fill e aspect-ratio vindo do arquivo, cada foto
* mandava na altura do proprio cartao: as fileiras mediam 559, 660
* e 721px. Nao e a foto que decide o tamanho do cartao — e o
* contrario.
*
* A moldura passa a ser QUADRADA e fixa, e a foto entra por CONTAIN,
* nunca cover: cortar foto de garrafa corta a garrafa. Vale para a
* home e para o catalogo, porque o cartao e o mesmo.
*
* Pendencia de peso, nao de forma: servir 1300x1300 num quadro de
* 312 e desperdicio de banda. O recorte certo e o
* `woocommerce_thumbnail`; trocar isso mexe no tamanho de imagem de
* todo o catalogo e fica para uma passada propria.
*/
.woocommerce ul.products li.product img.attachment-full,
.woocommerce ul.products li.product img.attachment-woocommerce_thumbnail,
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link > img,
.eu-prat ul.products li.product img{
aspect-ratio:1/1!important;
width:100%!important;
height:auto!important;
max-height:none!important;
object-fit:contain!important;
object-position:center!important;
display:block!important}
/* o cartao inteiro passa a ter a mesma altura na fileira: o conteudo
se estica, a foto nao */
.eu-prat ul.products > li.product,
.woocommerce ul.products li.product{align-self:stretch!important}
/* ===== O CARTÃO PARA DE BALANÇAR — 25/09/2026 =====
* Segunda metade do mesmo bug. Com a foto já travada em 312px,
* MEDI a primeira fileira de "Até R$ 79" e os cartões tinham todos
* 551px de altura — mas o conteúdo dentro deles flutuava:
*
* Cartuxa EA Tinto 2022 título 2 linhas preço em y=469
* Chac Chac Malbec 2023 2 linhas preço em y=469
* Minimalista Malbec 1 linha preço em y=408
* Malma Chacra La Papay ... 3 linhas preço em y=504
*
* 96px de desencontro entre preços da MESMA fileira. Quem varre a
* prateleira com o olho procura o preço numa linha só; assim ele
* procura três.
*
* Duas regras resolvem:
* 1. o bloco do título reserva SEMPRE duas linhas (e corta na
* segunda). O nome inteiro continua na página do produto, e o
* snippet 4533 já encurta o título na listagem;
* 2. o preço é empurrado para o fim do cartão com margin-top:auto.
* Sobra ou falta de título vira espaço em cima do preço, nunca
* deslocamento dele.
*/
.woocommerce ul.products li.product,
.eu-prat ul.products > li.product{
display:flex!important;
flex-direction:column!important}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
display:-webkit-box!important;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
min-height:2.5em;
margin-bottom:0!important}
.woocommerce ul.products li.product .price{margin-top:auto!important}
/* ===== O CARTÃO, AGORA COM A CAUSA CERTA — 25/09/2026 =====
* A passada anterior errou o alvo. Abri a estrutura real:
*
* li.product flex column (ok, minha regra pegou)
* a.LoopProduct-link display:BLOCK, direction:row
* span.eu-card-flag
* span.onsale <- 17px NO FLUXO, só nos cartões em oferta
* img 312
* h2.title 35 ou 70 ou 106
* span.eu-card-meta 33
* span.price 17
* a.button
*
* Três erros meus, um por linha:
*
* 1. O SELO DE OFERTA ESTÁ NO FLUXO. Medido: título em y=320 no
* cartão sem selo e y=346 no cartão com selo — os 26px do selo.
* Selo de desconto é etiqueta colada na foto, não linha de texto.
* 2. O PREÇO NÃO É FILHO DO li, é filho da ÂNCORA — e a âncora é
* display:block. Meu margin-top:auto não tinha container flex
* para agir. Por isso o preço continuou em y=408/443/469/478/504.
* 3. O CLAMP DO TÍTULO PERDEU A ESPECIFICIDADE: computado voltou
* -webkit-line-clamp:none, display:block, min-height:0. Entre dois
* !important quem manda é o seletor mais específico, não a ordem.
* Daí o h2 nomeado e o li.product.product.
*
* Com o selo fora do fluxo e o título travado em duas linhas, todo
* elemento abaixo cai no mesmo lugar em todos os cartões — sem
* precisar de margem automática empurrando preço para longe da ficha.
*/
/* 1. o selo volta a ser etiqueta */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link{
position:relative!important}
.woocommerce ul.products li.product .onsale{
position:absolute!important;
top:12px!important; left:12px!important; right:auto!important;
margin:0!important; z-index:2}
/* 2. a âncora empilha de verdade e ocupa a altura do cartão */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link{
display:flex!important;
flex-direction:column!important;
flex:1 1 auto!important}
/* 3. o título ocupa sempre duas linhas — o nome inteiro fica na
página do produto, que é onde ele importa */
.woocommerce ul.products li.product.product h2.woocommerce-loop-product__title,
.woocommerce ul.products li.product.product .woocommerce-loop-product__title{
display:-webkit-box!important;
-webkit-line-clamp:2!important;
-webkit-box-orient:vertical!important;
overflow:hidden!important;
min-height:2.5em!important}
/* ===== O ÚLTIMO RESÍDUO DO CARTÃO — 25/09/2026 =====
* Com foto travada, selo fora do fluxo e título em duas linhas, o
* preço já alinhou: em "Ofertas" os 8 cartões têm o preço no MESMO
* y=407. Sobrou um desencontro de 16px no título, e a causa é a
* ficha:
*
* "ITÁLIA · TINTO · PINOT NOIR" 31px (uma linha)
* "ARGENTINA · TINTO · CABERNET SAUVIGNON" 47px (duas)
*
* A ficha reserva DUAS linhas sempre, em vez de cortar. Cortar
* economizaria os 16px mas perderia a casta, que é justamente o que
* o cartão desta loja promete mostrar antes do texto bonito. Linha
* vazia é mais barata que informação a menos.
*
* O clamp em 2 é trava de segurança: ficha de três castas não pode
* voltar a empurrar o cartão.
*/
.woocommerce ul.products li.product .eu-card-meta{
display:-webkit-box!important;
-webkit-line-clamp:2!important;
-webkit-box-orient:vertical!important;
overflow:hidden!important;
min-height:47px!important}
@media (max-width:767px){
.woocommerce ul.products li.product .eu-card-meta{min-height:44px!important}
}
/* ===== O "01" INVISÍVEL DO CLUBE NA HOME — 25/09/2026 =====
* Varredura de contraste depois das prateleiras: 403 textos
* visíveis, UM reprovado. O numerário .eu-passo-n saía em
* rgb(18,21,14) sobre rgb(18,21,14) — tinta sobre tinta, 1,00:1.
* Não é texto fraco: é texto que não existe na tela.
*
* É a mesma família do achado de 24/09: cor de texto escrita para
* faixa clara aplicada em faixa de vidro escuro. Aqui o numerário
* vira lima, que é a cor de marcação do sistema no escuro.
*/
.eu-clube-wrap .eu-passo-n,
.eu-clube-bloco .eu-passo-n,
.eu-clube-passos .eu-passo-n{
color:var(--green,#8BE01F)!important;
opacity:1!important}
/* ===== O BOTÃO FANTASMA NO HOVER — 25/09/2026 =====
* Achado pelo Andre: "OFERTAS DA SEMANA" vira um retângulo preto
* sólido, sem texto, quando o mouse passa.
*
* MEDIDO com o mouse em cima:
* wrapper .btn-secundario background rgb(14,16,12) color #fff
* âncora .elementor-button background transparente color rgb(14,16,12)
*
* A regra de hover estava no ELEMENTO ERRADO. A classe
* .btn-secundario mora no wrapper do widget, não no , então
* `.btn-secundario:hover { background: ...; color:#fff }` pintava o
* wrapper de tinta e mandava o branco por herança — mas a âncora tem
* cor própria e devolvia o texto para tinta. Tinta sobre tinta: o
* texto continua lá, só que invisível. Mesma família do "01" do
* Clube, achado na varredura de contraste de hoje.
*
* Agora quem muda é a âncora, e os dois valores andam juntos: fundo
* tinta E texto papel na mesma regra. Fundo e cor de texto que moram
* em elementos diferentes é como se cria um botão fantasma.
*/
/* o wrapper volta a ser só um wrapper */
.btn-secundario:hover,
.btn-secundario:focus-within{background:transparent!important}
/* a âncora inverte por inteiro */
.btn-secundario .elementor-button:hover,
.btn-secundario .elementor-button:focus-visible,
.btn-secundario:hover .elementor-button{
background-color:var(--ink,#12150E)!important;
border-color:var(--ink,#12150E)!important;
color:var(--paper,#F2F3EF)!important}
.btn-secundario .elementor-button:hover .elementor-button-text,
.btn-secundario:hover .elementor-button .elementor-button-text{
color:var(--paper,#F2F3EF)!important}
.btn-secundario .elementor-button:focus-visible{
outline:2px solid var(--green,#8BE01F)!important; outline-offset:3px}
/* ===== A BARRA DE FRETE GRÁTIS DO CARRINHO — 25/09/2026 =====
* Dois achados do Andre numa frase só: "se for branca vai dar mais
* destaque, e parece q ela nao esta funcionando corretamente".
*
* ELA NÃO ESTAVA MESMO. Medido na gaveta aberta:
*
* .eu-frete-barra-trilho 393 x 6px fundo rgba(18,21,14,.22)
* span de preenchimento style="width:26.59%" → 0 x 0
*
* A conta do PHP está certa (26,59% de R$ 599 com R$ 159,27 no
* carrinho bate com "faltam R$ 439,73"). O que falhava era o
* desenho: o preenchimento é um , que nasce `display:inline`
* — e elemento inline vazio não tem caixa, então largura em % não
* vira nada. O cliente via só o trilho e lia como barra cheia.
*
* SOBRE A COR: a placa era lima com texto tinta dentro de uma gaveta
* escura. Lima sobre escuro já é a cor de destaque do site inteiro,
* então ali ela competia com tudo e não destacava nada — e o verde
* não significava nada, porque cobria a placa toda.
*
* Agora a placa é PAPEL, que é o contraste mais forte possível
* contra o vidro da gaveta, e o lima passa a ser o PREENCHIMENTO:
* o verde cresce conforme o carrinho se aproxima dos R$ 599. A cor
* ganha função em vez de enfeite.
*/
.eu-frete-barra{
background:var(--paper,#F2F3EF)!important;
color:var(--ink,#12150E)!important;
border-radius:var(--r,4px)!important;
padding:14px 16px!important}
.eu-frete-barra .eu-frete-barra-txt,
.eu-frete-barra .eu-frete-barra-txt strong,
.eu-frete-barra .woocommerce-Price-amount,
.eu-frete-barra .woocommerce-Price-currencySymbol{
color:var(--ink,#12150E)!important}
.eu-frete-barra .eu-frete-barra-txt{
margin:0 0 10px!important; font-size:14px; line-height:1.45}
.eu-frete-barra .eu-frete-barra-txt strong{font-weight:700}
/* o trilho */
.eu-frete-barra .eu-frete-barra-trilho{
display:block!important;
height:8px!important;
border-radius:99px!important;
background:rgba(18,21,14,.14)!important;
overflow:hidden!important;
position:relative}
/* O PREENCHIMENTO — a correção que faz a barra existir.
display:block + height:100% dão caixa ao ; a largura em %
que o PHP escreve no style finalmente vira pixel. */
.eu-frete-barra .eu-frete-barra-trilho > span,
.eu-frete-barra .eu-frete-barra-trilho > i,
.eu-frete-barra .eu-frete-barra-trilho > div{
display:block!important;
height:100%!important;
min-width:6px!important;
border-radius:99px!important;
background:var(--green,#8BE01F)!important;
transition:width .35s ease}
/* quando o frete já é grátis, a barra enche e fica vinho de arremate */
.eu-frete-barra--conquistado .eu-frete-barra-trilho > span,
.eu-frete-barra--conquistado .eu-frete-barra-trilho > i{
width:100%!important}
@media (prefers-reduced-motion:reduce){
.eu-frete-barra .eu-frete-barra-trilho > span{transition:none}
}
/* ===== O MANIFESTO E O CUPOM VIRAM UMA FAIXA SÓ — 25/09/2026 =====
* Pedido do Andre, e a medição concorda: a faixa "Por que a ficha
* vem antes do texto bonito" tinha um cartão ocupando a esquerda e
* METADE DA LARGURA VAZIA à direita. O cupom PRIMEIRACOMPRA10 era
* uma faixa própria de 296px lá embaixo, sozinha.
*
* Juntos, cada um resolve um problema do outro: o manifesto ganha
* o par que faltava e o cupom ganha companhia — a razão de comprar
* ao lado do empurrão para comprar. E a home perde uma faixa.
*
* A ordem importa: o argumento à esquerda, o incentivo à direita.
* Cupom primeiro seria propaganda; depois do argumento, é conclusão.
*/
.elementor-element-ab386d5 > .e-con-inner{
display:grid!important;
grid-template-columns:1.15fr .85fr!important;
gap:40px!important;
align-items:center!important}
.elementor-element-ab386d5 .eu-nota-casa{margin:0}
/* o bloco do cupom encosta na altura do manifesto sem esticar */
.elementor-element-ab386d5 .eu-cupom-primeira-compra{
align-self:center!important;
width:100%!important;
max-width:none!important}
@media (max-width:1024px){
.elementor-element-ab386d5 > .e-con-inner{
grid-template-columns:1fr!important; gap:28px!important}
}
/* ===== O ÍCONE DA SACOLA NA GAVETA — 25/09/2026 =====
* Achado do Andre: "não dá pra ver o preto ali direito".
*
* MEDIDO: .xoo-wsch-bki saía em rgb(0,0,0) dentro de um cabeçalho
* com fundo rgb(14,16,12). Preto sobre quase-preto.
*
* E a causa é maior que o ícone: o PRÓPRIO .xoo-wsc-header carrega
* color:rgb(0,0,0). Ou seja, qualquer coisa que herde cor ali nasce
* invisível — o ícone só foi o primeiro a aparecer. Por isso a
* correção arruma os dois: a cor herdada do cabeçalho vira papel, e
* a sacola vira lima, que é a cor de marcação do sistema no escuro.
*
* Terceira vez hoje que o mesmo padrão aparece (o "01" do Clube, o
* botão fantasma no hover, agora a sacola): cor escrita para fundo
* claro aplicada em superfície escura.
*/
.xoo-wsc-header{color:var(--paper,#F2F3EF)!important}
.xoo-wsc-header .xoo-wsch-bki,
.xoo-wsch-bki.xoo-wsc-icon-shopping-bag1{
color:var(--green,#8BE01F)!important}
/* o contador de itens em cima da sacola acompanha */
.xoo-wsc-header .xoo-wsch-bki-count,
.xoo-wsc-header [class*="count"]{
color:var(--ink,#12150E)!important;
background:var(--green,#8BE01F)!important}
/* o título "Seu carrinho" e o lixinho ganham contraste de verdade */
.xoo-wsc-header .xoo-wsch-text{color:var(--paper,#F2F3EF)!important}
.xoo-wsc-modal .xoo-wsc-smr-del{color:var(--mute-2,#AFB6A4)!important}
.xoo-wsc-modal .xoo-wsc-smr-del:hover{color:var(--green,#8BE01F)!important}
/* ===== O CUPOM ALINHADO COM O MANIFESTO — 25/09/2026 =====
* Meu erro, e é a TERCEIRA vez que o Elementor me pega no mesmo
* lugar hoje (as outras duas foram no blog).
*
* Escrevi a grade em `.elementor-element-ab386d5 > .e-con-inner`.
* Essa faixa é `content_width: full` — e container full **não tem
* .e-con-inner**. A regra casou com nada.
*
* MEDIDO depois da mudança:
* manifesto x=615 largura 1320 (centrado, certo)
* cupom x=48 largura 2454 (sangrando a faixa inteira)
*
* Agora a grade vai no PRÓPRIO container. E ela não pode ganhar
* max-width: a faixa é escura e precisa sangrar de ponta a ponta —
* quem centra é a grade, com colunas fixas somando o wrap de 1320
* (760 + 40 de vão + 520) e justify-content:center. Capar o
* container apagaria o fundo nas laterais.
*/
.elementor-element-ab386d5{
display:grid!important;
grid-template-columns:minmax(0,760px) minmax(0,520px)!important;
justify-content:center!important;
align-items:center!important;
gap:40px!important;
padding:72px 48px!important}
.elementor-element-ab386d5 > .elementor-element-750e100,
.elementor-element-ab386d5 > .elementor-element-fca9b94{
width:auto!important;
max-width:none!important;
align-self:center!important}
.elementor-element-ab386d5 .eu-nota-casa{margin:0!important}
@media (max-width:1024px){
.elementor-element-ab386d5{
grid-template-columns:minmax(0,1fr)!important;
justify-content:stretch!important;
gap:28px!important;
padding:48px 24px!important}
}
/* ===== AS PROVAS NO RODAPÉ DO CARRINHO — 25/09/2026 =====
* Saíram "Compra segura · Envio rápido · Trocas fáceis". Eram três
* AFIRMAÇÕES que toda loja escreve — e "Envio rápido" ainda brigava
* com a barra de frete grátis 200px acima, duas mensagens de entrega
* no mesmo lugar.
*
* Entraram três PROVAS, e a diferença é essa: afirmação qualquer um
* escreve, prova é verificada por terceiro. Na hora do carrinho, o
* que trava a compra de uma loja desconhecida é "será que chega?" —
* e o selo do Mercado Livre responde exatamente isso. A terceira
* responde o medo específico de comprar vinho pela internet, que o
* selo não cobre: a garrafa chegar quebrada.
*
* REGRA DO ANDRE RESPEITADA: "o site é totalmente independente do
* Mercado Livre". A reputação é emprestada, o caminho não — NÃO HÁ
* LINK para o ML aqui. Dar uma porta de saída para quem já está com
* a sacola na mão seria o pior momento possível.
*
* ÍCONES: o campo do plugin passa por TinyMCE, que APAGA na
* hora de salvar (medido: 1.199 caracteres viraram 254, e o
* também sumiu — por isso a segunda linha é ). Então o desenho
* entra por mask-image aqui, e o campo guarda só texto. Emoji
* continua proibido pelo DESIGN.md.
*/
.eu-wsc-provas{
display:grid;
grid-template-columns:1fr;
gap:2px;
margin:4px 0 0;
border-top:1px solid rgba(242,243,239,.12);
padding-top:12px}
.eu-wsc-provas .eu-wsc-prova{
display:grid;
grid-template-columns:20px 1fr;
column-gap:10px;
align-items:baseline;
padding:7px 0;
text-align:left}
.eu-wsc-provas .eu-wsc-prova::before{
content:"";
grid-row:span 2;
width:17px; height:17px;
align-self:center;
background-color:var(--green,#8BE01F);
-webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
-webkit-mask-position:center; mask-position:center;
-webkit-mask-size:contain; mask-size:contain}
.eu-wsc-provas .eu-wsc-prova--selo::before{
-webkit-mask-image:url('data:image/svg+xml;utf8, e o
* viram itens diretos da linha do menu e aceitam `order`.
* Sem isso os dois ficariam grudados no fim, com a marca à direita —
* que é onde ninguém procura marca. */
body.eu-nav-fixa .eu-nav-compacta-w,
body.eu-nav-fixa .eu-nav-compacta{display:contents!important}
body.eu-nav-fixa .eu-navc-marca{order:-1; margin-right:26px}
body.eu-nav-fixa .eu-navc-carrinho{order:99; margin-left:auto}
/* A marca sai da barra condensada.
* O `order:-1` não pegou porque os links do menu moram dentro do
* widget de menu, então a marca é irmã do MENU inteiro, não dos
* itens — e acabava entre "A CASA" e o carrinho, que é onde ninguém
* procura marca. Com as categorias centradas no wrap de 1320, jogar
* a marca para a ponta esquerda a deixaria solta fora do wrap.
* Categorias no centro e carrinho à direita já dizem tudo: quem quer
* a home clica em "TODOS OS VINHOS" ou sobe. Menos peça, mais clareza. */
body.eu-nav-fixa .eu-navc-marca{display:none!important}
/* ===== AS PROVAS, AGORA DUAS LADO A LADO — 25/09/2026 =====
* "essa area nao ficou legal. empilhado."
*
* Três provas empilhadas viraram uma listinha de 177px no pé da
* gaveta — e listinha no pé de carrinho o olho pula. Com duas, lado
* a lado, viram um par: o selo e o volume, que é a mesma ideia dita
* duas vezes e por isso lê rápido.
*
* Saiu a embalagem, por decisão do Andre. Ela respondia um medo real
* (garrafa quebrada), mas esse argumento já está na barra de
* confiança da home e no cartão "Blindagem total" — aqui só engordava
* a pilha.
*
* O ÍCONE SOBE PARA CIMA DO TEXTO: numa coluna de ~170px, ícone ao
* lado comeria 30px de largura e "MERCADOLÍDER PLATINUM" quebraria
* feio. Empilhado, o texto usa a coluna inteira.
*/
.eu-wsc-provas{
grid-template-columns:1fr 1fr;
gap:14px;
padding-top:14px}
.eu-wsc-provas .eu-wsc-prova{
grid-template-columns:1fr;
row-gap:0;
padding:0}
.eu-wsc-provas .eu-wsc-prova::before{
grid-row:auto;
margin-bottom:7px}
.eu-wsc-provas .eu-wsc-prova b,
.eu-wsc-provas .eu-wsc-prova em{grid-column:1}
.eu-wsc-provas .eu-wsc-prova b{font-size:13px; line-height:1.25}
.eu-wsc-provas .eu-wsc-prova em{
font-size:9.5px; letter-spacing:.06em; line-height:1.4; margin-top:3px}
/* ===== AS TRÊS PROVAS, LADO A LADO — 25/09/2026 =====
* Duas correções de uma vez.
*
* 1. O BLOCO VAZAVA. Medido: o container do plugin
* (.xoo-wsc-info-cont) tem padding ZERO e 425px de largura, então
* o texto encostava nas duas bordas da gaveta e ficava desalinhado
* das linhas de produto logo acima. Não era o meu bloco: era a
* ausência de recuo no container. Agora o recuo vem daqui.
*
* 2. TRÊS EM 393px ÚTEIS dá 123px por coluna. Com "Loja Oficial /
* MERCADOLÍDER PLATINUM" isso quebraria feio. Então a hierarquia
* inverteu: o NÚMERO vem primeiro, grande, e o rótulo vira a linha
* pequena embaixo.
*
* Platinum +5.000 5,0/5
* MERCADOLÍDER VENDAS GOOGLE · 12
*
* Lido em voz alta é a mesma frase de antes, e cada rótulo cabe em
* uma linha. O "· 12" não é enfeite: 5,0 de 12 avaliações é uma
* coisa, 5,0 de 500 é outra — quem mostra a nota mostra a amostra.
*/
.eu-wsc-provas{
grid-template-columns:repeat(3,minmax(0,1fr))!important;
gap:12px!important;
padding:14px 16px 16px!important;
margin-top:0!important}
.eu-wsc-provas .eu-wsc-prova{text-align:left}
.eu-wsc-provas .eu-wsc-prova::before{
width:15px; height:15px; margin-bottom:6px}
.eu-wsc-provas .eu-wsc-prova b{
font-family:'JetBrains Mono',ui-monospace,monospace;
font-size:15px!important; font-weight:700; line-height:1.15;
letter-spacing:-.01em;
color:var(--paper,#F2F3EF)}
.eu-wsc-provas .eu-wsc-prova em{
font-size:9px!important; letter-spacing:.07em; line-height:1.35;
margin-top:4px!important;
color:var(--mute-2,#AFB6A4)}
/* a medalha do MercadoLíder */
.eu-wsc-provas .eu-wsc-prova--medalha::before{
-webkit-mask-image:url('data:image/svg+xml;utf8, interno com cor própria: rgb(242,243,239). Papel sobre
* papel, 1,00:1 — o link virou um sublinhado vazio.
*
* A lição é sempre a mesma: fundo e cor de texto que moram em
* elementos diferentes viram texto invisível na primeira vez que um
* dos dois muda. Quem muda o fundo muda a cor junto, no mesmo lugar. */
.eu-sp-whats,
.eu-sp-whats span,
.eu-sp-whats svg{color:var(--ink,#12150E)!important}
.eu-sp-whats:hover,
.eu-sp-whats:hover span,
.eu-sp-whats:hover svg{color:var(--wine,#6B1F2A)!important}
/* ==========================================================
26/09 - CONSERTO 1: o titulo da pagina /sobre/ vazava
----------------------------------------------------------
A regra do titulo grande de /sobre/ foi escrita com escopo
de PAGINA (.page-id-1133 .elementor-widget-heading
.elementor-heading-title) e sem escopo de REGIAO. Dentro de
/sobre/ o cabecalho (3850) e o rodape (3920) tambem estao
debaixo de .page-id-1133, entao os 3 rotulos do cabecalho e
os 4 titulos de coluna do rodape subiam de 11/15px para
clamp(26px,2.4vw,32px). Era por isso que "WHATSAPP" saia por
cima do carrinho.
Cada um volta aqui ao tamanho que tem nas outras paginas
(medido na home). Vai com !important porque a regra que
vazou tem !important - e entre dois !important quem vence e
a mais especifica, nao a que vem depois.
========================================================== */
.page-id-1133 .elementor-3850 .elementor-element.elementor-element-e8564c2 .elementor-heading-title,
.page-id-1133 .elementor-3850 .elementor-element.elementor-element-69c49ae .elementor-heading-title,
.page-id-1133 .elementor-3850 .elementor-element.elementor-element-409cdb5 .elementor-heading-title{
font-size: 11px !important;
line-height: 1.05 !important;
letter-spacing: .5px !important;
}
.page-id-1133 .elementor-3920 .elementor-element.elementor-element-33cb04a .elementor-heading-title,
.page-id-1133 .elementor-3920 .elementor-element.elementor-element-427773d .elementor-heading-title,
.page-id-1133 .elementor-3920 .elementor-element.elementor-element-2f6f3ed .elementor-heading-title{
font-size: 15px !important;
line-height: 1.05 !important;
letter-spacing: .5px !important;
}
.page-id-1133 .elementor-3920 .elementor-element.elementor-element-0b5e0bb .elementor-heading-title{
font-size: 11px !important;
line-height: 1.05 !important;
letter-spacing: 1.1px !important;
}
/* ==========================================================
26/09 - CONSERTO 2: a Nota do Escolhedor
----------------------------------------------------------
A medida de leitura (max-width ~497px, uns 68 caracteres)
foi escrita quando a coluna era estreita. Hoje a caixa tem
690px uteis: sobravam 193px de fundo cinza vazio e o texto
caia em 4 linhas com a ultima ocupando 47% da largura.
Medido em tela: 15px sem limite de medida = 3 linhas, ultima
linha em 86% da largura, e a caixa encolhe de 147px para
~130px. A medida nao some - ela passa a ser a propria coluna,
que ja encolhe sozinha nas telas menores.
========================================================== */
.eu-sp-nota-escolhedor p.eu-sp-nota-corpo{
max-width: none;
font-size: 15px;
line-height: 1.55;
}
/* ==========================================================
26/09 - VARREDURA: familia "cor de faixa clara em superficie
clara" (o mesmo defeito do "01" do Clube, do botao fantasma,
da sacolinha e do link do WhatsApp).
----------------------------------------------------------
ACHADO 1 - .eu-dest-btn ("Ver a ficha completa")
O hover trocava a cor do texto para --paper (#F2F3EF), que e
uma cor escrita para fundo escuro. So que esse botao nao tem
fundo proprio: ele fica sobre --paper-2 (#E4E7DD). Medido no
hover: 1,12:1. O link sumia justamente debaixo do cursor.
O ::after nao e um preenchimento, e uma seta de 15x11 que so
anda 3px - nunca houve fundo escuro para justificar o paper.
Hover passa a escurecer em vez de clarear: --wine sobre
--paper-2 mede 8,9:1, e a seta acompanha por currentcolor.
========================================================== */
.eu-dest-btn:hover,
.eu-dest-btn:focus-visible{
color: var(--wine,#6B1F2A);
}
/* a regra anterior de .eu-dest-btn:hover tem !important, entao a
correcao precisa do mesmo peso - entre dois !important vence a
mais especifica, e em empate a que vem depois. */
.eu-dest-btn:hover,
.eu-dest-btn:focus-visible{
color: var(--wine,#6B1F2A) !important;
}
/* ##################################################################
MENU POR HARMONIZACAO — 26/09
Faixa da home, painel do cabecalho, barra sem pilulas e a vitrine
filtrada. Depende dos snippets 4781 (motor) e 4791 (icone e
contagem no menu). Enquanto eles estiverem inativos, nada aqui
pinta nada — os seletores simplesmente nao encontram elemento.
################################################################## */
/* ---------- pecas compartilhadas ---------- */
.eu-harm-ico{
width: 22px; height: 22px;
flex: 0 0 22px;
display: block;
}
.eu-harm-marca{ display: inline-flex; color: var(--green,#8BE01F); }
.eu-harm-conta{
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px;
letter-spacing: .4px;
color: var(--mute-2,#AFB6A4);
opacity: .78;
}
/* ==================================================================
A. A FAIXA DA HOME
O fundo escuro vem do container do Elementor, nao daqui: assim a
faixa sangra de ponta a ponta e o conteudo continua preso ao
--wrap. Foi o erro do manifesto em 24/09 (grade no .e-con-inner de
um container "full", que nao existe) — aqui a grade e da secao.
================================================================== */
.eu-harm{
max-width: var(--wrap,1320px);
margin-inline: auto;
padding-inline: 24px;
display: flex;
flex-direction: column;
gap: 30px;
}
.eu-harm-topo{
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 40px;
}
.eu-harm-dizer{ display: flex; flex-direction: column; gap: 10px; }
.eu-harm-chapeu{
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px;
letter-spacing: 1.6px;
color: var(--green,#8BE01F);
}
.eu-harm-titulo{
margin: 0;
font-family: Sora, sans-serif;
font-size: clamp(28px, 3vw, 40px);
line-height: 1.05;
font-weight: 700;
letter-spacing: -1.4px;
color: var(--paper,#F2F3EF);
}
.eu-harm-linha{
margin: 0;
max-width: 620px;
font-size: 15px;
line-height: 1.5;
color: var(--mute-2,#AFB6A4);
}
.eu-harm-todos{
flex-shrink: 0;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 13px 22px;
border: 1px solid rgba(242,243,239,.28);
border-radius: var(--r,4px);
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 12px;
letter-spacing: 1.2px;
color: var(--paper,#F2F3EF);
text-decoration: none;
transition: border-color .18s ease, background-color .18s ease;
}
/* hover escurece o contorno e clareia o fundo, NUNCA a letra:
e a familia de defeito que a varredura de hoje cacou. */
.eu-harm-todos:hover,
.eu-harm-todos:focus-visible{
background: rgba(242,243,239,.08);
border-color: rgba(242,243,239,.55);
color: var(--paper,#F2F3EF);
}
.eu-harm-grade{
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
}
.eu-harm-item{
position: relative;
display: flex;
flex-direction: column;
gap: 11px;
padding: 20px;
border: 1px solid rgba(242,243,239,.16);
border-radius: var(--r,4px);
background: var(--glass-2,#171B12);
text-decoration: none;
transition: border-color .18s ease, background-color .18s ease;
}
.eu-harm-item:hover,
.eu-harm-item:focus-visible{
border-color: rgba(242,243,239,.42);
background: #1C2016;
}
/* o numero mora no canto, discreto: ele mede o TEXTO da
harmonizacao, nao o tamanho da adega. */
.eu-harm-item .eu-harm-conta{
position: absolute;
top: 16px;
right: 18px;
}
.eu-harm-item .eu-harm-nome{
font-family: Sora, sans-serif;
font-size: 17px;
font-weight: 600;
line-height: 1.2;
letter-spacing: -.3px;
color: var(--paper,#F2F3EF);
padding-right: 34px;
}
.eu-harm-ex{
font-size: 12.5px;
line-height: 1.45;
color: var(--mute-2,#AFB6A4);
}
@media (max-width: 1100px){
.eu-harm-grade{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.eu-harm-topo{ flex-direction: column; align-items: flex-start; gap: 22px; }
}
@media (max-width: 600px){
.eu-harm{ gap: 22px; padding-inline: 20px; }
.eu-harm-grade{ gap: 10px; }
.eu-harm-item{ padding: 15px; gap: 8px; }
.eu-harm-item .eu-harm-nome{ font-size: 14px; padding-right: 26px; }
.eu-harm-ex{ display: none; }
.eu-harm-todos{ width: 100%; justify-content: center; }
}
/* ==================================================================
B. O PAINEL DO CABECALHO
O submenu do item HARMONIZA vira um painel de duas colunas. Os
itens sao itens de menu de verdade: o teclado navega, o celular
abre no menu sanfona, e o Google le como link.
================================================================== */
.elementor-nav-menu .eu-menu-harmoniza > .sub-menu{
width: 700px !important;
max-width: calc(100vw - 48px) !important;
padding: 26px !important;
background: var(--glass-2,#171B12) !important;
border: 1px solid rgba(242,243,239,.2) !important;
border-radius: var(--r,4px) !important;
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 0 28px !important;
box-shadow: 0 24px 60px rgba(0,0,0,.45);
}
.elementor-nav-menu .eu-menu-harmoniza > .sub-menu > li{ width: auto !important; }
.elementor-nav-menu .eu-harm-mi > a{
display: flex !important;
align-items: center;
gap: 13px;
padding: 11px 0 !important;
border-bottom: 1px solid rgba(242,243,239,.1);
background: transparent !important;
font-family: Archivo, sans-serif !important;
font-size: 14.5px !important;
font-weight: 400 !important;
letter-spacing: 0 !important;
text-transform: none !important;
color: var(--paper,#F2F3EF) !important;
fill: currentColor;
}
.elementor-nav-menu .eu-harm-mi > a .eu-harm-nome{ flex-grow: 1; }
.elementor-nav-menu .eu-harm-mi > a .eu-harm-ico{ width: 19px; height: 19px; flex-basis: 19px; }
.elementor-nav-menu .eu-harm-mi > a:hover,
.elementor-nav-menu .eu-harm-mi > a:focus-visible{
color: var(--green,#8BE01F) !important;
background: transparent !important;
}
.elementor-nav-menu .eu-harm-mi > a:hover .eu-harm-conta{ opacity: 1; }
/* as duas ultimas linhas de cada coluna nao levam risco */
.elementor-nav-menu .eu-menu-harmoniza > .sub-menu > li:nth-last-child(-n+2) > a{
border-bottom: 0;
}
@media (max-width: 1024px){
.elementor-nav-menu .eu-menu-harmoniza > .sub-menu{
width: 100% !important;
max-width: none !important;
grid-template-columns: 1fr !important;
padding: 8px 0 !important;
border: 0 !important;
box-shadow: none !important;
background: transparent !important;
}
.elementor-nav-menu .eu-harm-mi > a{ padding: 12px 0 !important; }
}
/* ==================================================================
C. A BARRA SEM PILULAS
Antes: texto puro + pilula verde cheia (OFERTAS) + pilula vazada
(CLUBE). Tres jeitos de dizer "clique aqui" a 30px um do outro.
Agora: uma lingua so. OFERTAS mantem o destaque pela COR da
palavra, que e o jeito minimalista de destacar — nao por caixa.
================================================================== */
.elementor-nav-menu .eu-menu-ofertas > a,
.elementor-nav-menu .eu-menu-clube > a{
background: transparent !important;
background-image: none !important;
border: 0 !important;
border-radius: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
box-shadow: none !important;
}
.elementor-nav-menu .eu-menu-ofertas > a{ color: var(--green,#8BE01F) !important; }
.elementor-nav-menu .eu-menu-clube > a{ color: var(--paper,#F2F3EF) !important; }
/* um risco fino no hover, igual para todo item da barra */
.elementor-nav-menu > li > a{
position: relative;
transition: color .16s ease;
}
.elementor-nav-menu > li > a::after{
content: "";
position: absolute;
left: 0; right: 0; bottom: -3px;
height: 2px;
background: var(--green,#8BE01F);
transform: scaleX(0);
transform-origin: left center;
transition: transform .18s ease;
}
.elementor-nav-menu > li > a:hover::after,
.elementor-nav-menu > li > a:focus-visible::after,
.elementor-nav-menu > li.eu-harm-ativo > a::after{ transform: scaleX(1); }
.elementor-nav-menu > li.eu-harm-ativo > a{ color: var(--green,#8BE01F) !important; }
/* ==================================================================
D. A VITRINE FILTRADA
================================================================== */
.eu-harm-aviso{
margin: 0 0 18px;
font-size: 14px;
line-height: 1.5;
color: var(--ink-soft,#5B6152);
}
.eu-harm-aviso a{
color: var(--wine,#6B1F2A);
text-decoration: underline;
text-underline-offset: 3px;
}
/* ------------------------------------------------------------------
CORRECAO 26/09 — as pilulas moram sob .eu-header-root
A regra que pinta OFERTAS e ".eu-header-root .eu-menu-ofertas >
a.elementor-item { color: var(--ink) !important }" — 3 classes +
1 elemento. A minha, ".elementor-nav-menu .eu-menu-ofertas > a",
tem 2 classes + 1 elemento e perdia. Resultado medido: OFERTAS
ficou ink (#12150E) sobre a barra preta = 1,0:1, invisivel.
Isso e exatamente a familia que a varredura de hoje cacou — e eu
acabei de reintroduzir. Aqui vai com o mesmo escopo e uma classe
a mais, e com o fundo e a borda da pilula zerados junto.
------------------------------------------------------------------ */
.eu-header-root .elementor-nav-menu .eu-menu-ofertas > a.elementor-item,
.eu-header-root .elementor-nav-menu .eu-menu-clube > a.elementor-item{
background: transparent !important;
background-image: none !important;
border: 0 !important;
border-radius: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
box-shadow: none !important;
}
.eu-header-root .elementor-nav-menu .eu-menu-ofertas > a.elementor-item{
color: var(--green,#8BE01F) !important;
}
.eu-header-root .elementor-nav-menu .eu-menu-clube > a.elementor-item{
color: var(--paper,#F2F3EF) !important;
}
/* o hover nao clareia nem escurece a letra: so acende o risco.
Menos uma chance de repetir o defeito. */
.eu-header-root .elementor-nav-menu .eu-menu-ofertas > a.elementor-item:hover,
.eu-header-root .elementor-nav-menu .eu-menu-ofertas > a.elementor-item:focus-visible{
color: var(--green,#8BE01F) !important;
background: transparent !important;
}
.eu-header-root .elementor-nav-menu .eu-menu-clube > a.elementor-item:hover,
.eu-header-root .elementor-nav-menu .eu-menu-clube > a.elementor-item:focus-visible{
color: var(--paper,#F2F3EF) !important;
background: transparent !important;
}
/* o painel e o risco tambem precisam do escopo do cabecalho */
.eu-header-root .elementor-nav-menu .eu-harm-mi > a.elementor-item{
color: var(--paper,#F2F3EF) !important;
}
.eu-header-root .elementor-nav-menu .eu-harm-mi > a.elementor-item:hover,
.eu-header-root .elementor-nav-menu .eu-harm-mi > a.elementor-item:focus-visible{
color: var(--green,#8BE01F) !important;
}
/* ##################################################################
REFINO DO CABECALHO — 26/09
Quatro ajustes pedidos, todos na direcao de tirar peso de quem
nao precisa dele. Medido antes: logo 325x26, "Escolhas" em verde
(mesmo verde do preco e do OFERTAS), preco do carrinho em Sora
600, e a palavra WHATSAPP repetindo o que o icone ja diz.
################################################################## */
/* 1. O logo menor. 325px era quase um quarto da barra; a 250 ele
continua legivel e devolve espaco para a busca, que e o que a
pessoa realmente usa. A altura acompanha sozinha. */
.eu-header-root .elementor-widget-image img,
.eu-header-root img.wp-image-3789{
max-width: 250px !important;
height: auto !important;
}
/* 2. "0 Escolhas" em cinza claro. Era verde — o mesmo verde do
preco e do OFERTAS. Verde no site significa "aqui tem acao";
um contador de estado nao e acao. O icone fica verde, que e o
que amarra o bloco ao Clube.
Medido: #AFB6A4 sobre #0E100C = 8,6:1. */
.eu-header-root .eu-header-escolhas .eu-escolhas-label,
.eu-header-root .eu-header-escolhas .eu-escolhas-n,
.eu-header-root .eu-header-escolhas > *:not(.eu-escolhas-icon){
color: var(--mute-2,#AFB6A4) !important;
}
.eu-header-root .eu-header-escolhas .eu-escolhas-icon{
color: var(--green,#8BE01F) !important;
}
/* 3. O preco do carrinho sem negrito. Ele ja esta dentro de uma
pilula verde — o destaque vem do fundo, nao da espessura.
Sora 600 para 500: continua o elemento mais forte da barra,
sem gritar. A cor nao muda (ink sobre verde). */
.eu-header-root .elementor-menu-cart__toggle_button .elementor-button-text,
.eu-header-root .elementor-menu-cart__toggle_button .woocommerce-Price-amount,
.eu-header-root .elementor-menu-cart__toggle_button bdi{
font-weight: 500 !important;
}
/* 4. A palavra WHATSAPP sai da tela, mas NAO do HTML.
Apagar de vez deixaria um botao so de icone, que leitor de
tela anuncia como "link" e mais nada. Escondido assim, o olho
ve so o icone e quem usa leitor continua ouvindo "WhatsApp".
(E foi este mesmo widget que vazou para 32px em /sobre/ hoje
de manha — agora ele nao pode mais atrapalhar layout nenhum.) */
.eu-header-root .elementor-element-e8564c2{
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip-path: inset(50%) !important;
white-space: nowrap !important;
border: 0 !important;
}
/* ------------------------------------------------------------------
CORRECAO 26/09 — o painel HARMONIZA ficava aberto o tempo todo
------------------------------------------------------------------
Erro meu, e de um tipo que ja me pegou hoje: escrevi
"display: grid !important" no estado BASE do submenu para montar
as duas colunas. So que o estado base do submenu no Elementor e
"display: none" — e o !important atropelou justamente a regra que
mantem o painel fechado. Medido: POR PAIS fechado = display none,
altura 0. HARMONIZA = display grid, altura 209, sempre.
A licao e a mesma da manha: !important nao e enfase, e uma
promessa de vencer TODAS as regras daquela propriedade — inclusive
as que fazem o componente funcionar.
Agora as duas colunas so existem quando o painel esta aberto. O
seletor com [style*="block"] cobre o caso do Elementor abrir por
JavaScript (toque no celular), em que ele escreve o display direto
no elemento.
------------------------------------------------------------------ */
.elementor-nav-menu .eu-menu-harmoniza > .sub-menu{
display: none !important;
}
.elementor-nav-menu .eu-menu-harmoniza:hover > .sub-menu,
.elementor-nav-menu .eu-menu-harmoniza:focus-within > .sub-menu,
.elementor-nav-menu .eu-menu-harmoniza.elementor-active > .sub-menu,
.elementor-nav-menu .eu-menu-harmoniza > .sub-menu[style*="block"],
.elementor-nav-menu .eu-menu-harmoniza > .sub-menu.sm-nowrap-open{
display: grid !important;
}
/* ##################################################################
BARRA DE 7 ITENS — 26/09
TODOS OS VINHOS · POR TIPO · POR PAÍS · HARMONIZA · OFERTAS ·
CLUBE · SOBRE
Os cinco links soltos de tipo viraram um painel; BLOG e A CASA
viraram SOBRE. O ganho nao e so encurtar: tipo, pais e prato
agora tem a MESMA forma, entao as tres maneiras de escolher se
leem como um sistema, nao como links avulsos.
REGRA DE OURO DESTE BLOCO: nada aqui declara "display".
O estado fechado do submenu no Elementor e display:none, e foi
exatamente isso que eu atropelei hoje deixando o HARMONIZA aberto
o tempo todo. Duas colunas onde for preciso saem de column-count,
que nao mexe no display.
################################################################## */
/* ---------- o painel, uma familia so ---------- */
.eu-header-root .elementor-nav-menu--main > li > .sub-menu{
min-width: 236px;
padding: 14px 20px !important;
background: var(--glass-2,#171B12) !important;
border: 1px solid rgba(242,243,239,.2) !important;
border-radius: var(--r,4px) !important;
box-shadow: 0 24px 60px rgba(0,0,0,.45);
}
.eu-header-root .elementor-nav-menu--main > li > .sub-menu > li > a{
padding: 10px 0 !important;
border-bottom: 1px solid rgba(242,243,239,.1);
background: transparent !important;
font-family: Archivo, sans-serif !important;
font-size: 14px !important;
font-weight: 400 !important;
letter-spacing: 0 !important;
text-transform: none !important;
color: var(--paper,#F2F3EF) !important;
transition: color .16s ease;
}
.eu-header-root .elementor-nav-menu--main > li > .sub-menu > li:last-child > a{
border-bottom: 0;
}
.eu-header-root .elementor-nav-menu--main > li > .sub-menu > li > a:hover,
.eu-header-root .elementor-nav-menu--main > li > .sub-menu > li > a:focus-visible{
color: var(--green,#8BE01F) !important;
background: transparent !important;
}
/* ---------- POR PAÍS: 10 paises em coluna unica ficariam 400px
de altura. column-count resolve sem tocar em display. ---------- */
.eu-header-root .elementor-nav-menu--main > li.eu-menu-paises > .sub-menu{
min-width: 420px;
column-count: 2;
column-gap: 26px;
}
.eu-header-root .elementor-nav-menu--main > li.eu-menu-paises > .sub-menu > li{
break-inside: avoid;
}
.eu-header-root .elementor-nav-menu--main > li.eu-menu-paises > .sub-menu > li.eu-submenu-vertodos{
column-span: all;
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid rgba(242,243,239,.16);
}
.eu-header-root .elementor-nav-menu--main > li.eu-menu-paises > .sub-menu > li.eu-submenu-vertodos > a{
border-bottom: 0;
font-family: 'JetBrains Mono', ui-monospace, monospace !important;
font-size: 11.5px !important;
letter-spacing: 1.1px !important;
text-transform: uppercase !important;
color: var(--green,#8BE01F) !important;
}
/* ---------- HARMONIZA mantem o painel largo de duas colunas.
Reafirmado aqui porque a regra generica acima e mais
especifica que a que eu tinha escrito antes e roubaria o
padding e a largura. ---------- */
.eu-header-root .elementor-nav-menu--main > li.eu-menu-harmoniza > .sub-menu{
width: 700px;
min-width: 0;
max-width: calc(100vw - 48px);
padding: 26px !important;
column-count: initial;
}
.eu-header-root .elementor-nav-menu--main > li.eu-menu-harmoniza > .sub-menu > li > a{
padding: 11px 0 !important;
font-size: 14.5px !important;
}
/* ---------- POR TIPO e SOBRE: listas curtas, coluna unica ---------- */
.eu-header-root .elementor-nav-menu--main > li.eu-menu-tipos > .sub-menu{ min-width: 214px; }
.eu-header-root .elementor-nav-menu--main > li.eu-menu-sobre > .sub-menu{ min-width: 190px; }
/* No celular o menu vira sanfona: o painel perde caixa e colunas,
senao vira uma janelinha dentro da janela. */
@media (max-width: 1024px){
.eu-header-root .elementor-nav-menu--main > li > .sub-menu,
.eu-header-root .elementor-nav-menu--main > li.eu-menu-paises > .sub-menu,
.eu-header-root .elementor-nav-menu--main > li.eu-menu-harmoniza > .sub-menu{
width: 100%;
min-width: 0;
max-width: none;
padding: 6px 0 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
column-count: initial;
}
}
/* ------------------------------------------------------------------
CORRECAO 26/09 — o bloco anterior nao pegava nada
".elementor-nav-menu--main" NAO e a lista: e o que envolve
a lista. O e ".elementor-nav-menu". Ou seja, todo o bloco
"BARRA DE 7 ITENS" acima mirava em "> li" de um elemento que nao
tem li nenhum. Medido: querySelectorAll('.elementor-nav-menu--main
> li') devolveu ZERO.
Aqui vai o mesmo desenho com o caminho certo. Continua valendo a
regra de ouro: nenhuma declaracao de "display" neste bloco.
------------------------------------------------------------------ */
.eu-header-root .elementor-nav-menu--main .elementor-nav-menu > li > .sub-menu{
min-width: 236px;
padding: 14px 20px !important;
background: var(--glass-2,#171B12) !important;
border: 1px solid rgba(242,243,239,.2) !important;
border-radius: var(--r,4px) !important;
box-shadow: 0 24px 60px rgba(0,0,0,.45);
}
.eu-header-root .elementor-nav-menu--main .elementor-nav-menu > li > .sub-menu > li > a{
padding: 10px 0 !important;
border-bottom: 1px solid rgba(242,243,239,.1);
background: transparent !important;
font-family: Archivo, sans-serif !important;
font-size: 14px !important;
font-weight: 400 !important;
letter-spacing: 0 !important;
text-transform: none !important;
color: var(--paper,#F2F3EF) !important;
transition: color .16s ease;
}
.eu-header-root .elementor-nav-menu--main .elementor-nav-menu > li > .sub-menu > li:last-child > a{
border-bottom: 0;
}
.eu-header-root .elementor-nav-menu--main .elementor-nav-menu > li > .sub-menu > li > a:hover,
.eu-header-root .elementor-nav-menu--main .elementor-nav-menu > li > .sub-menu > li > a:focus-visible{
color: var(--green,#8BE01F) !important;
background: transparent !important;
}
/* POR PAÍS: 10 paises em coluna unica dariam ~400px de altura.
column-count faz duas colunas sem encostar em display. */
.eu-header-root .elementor-nav-menu--main .elementor-nav-menu > li.eu-menu-paises > .sub-menu{
min-width: 430px;
column-count: 2;
column-gap: 26px;
}
.eu-header-root .elementor-nav-menu--main .elementor-nav-menu > li.eu-menu-paises > .sub-menu > li{
break-inside: avoid;
}
.eu-header-root .elementor-nav-menu--main .elementor-nav-menu > li.eu-menu-paises > .sub-menu > li.eu-submenu-vertodos{
column-span: all;
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid rgba(242,243,239,.16);
}
.eu-header-root .elementor-nav-menu--main .elementor-nav-menu > li.eu-menu-paises > .sub-menu > li.eu-submenu-vertodos > a{
border-bottom: 0;
font-family: 'JetBrains Mono', ui-monospace, monospace !important;
font-size: 11.5px !important;
letter-spacing: 1.1px !important;
text-transform: uppercase !important;
color: var(--green,#8BE01F) !important;
}
/* HARMONIZA fica largo. Precisa vir com uma classe a mais que a
regra generica acima, senao ela rouba o padding de 26px. */
.eu-header-root .elementor-nav-menu--main .elementor-nav-menu > li.eu-menu-harmoniza > .sub-menu{
width: 700px !important;
min-width: 0;
max-width: calc(100vw - 48px) !important;
padding: 26px !important;
column-count: initial;
}
.eu-header-root .elementor-nav-menu--main .elementor-nav-menu > li.eu-menu-harmoniza > .sub-menu > li > a{
padding: 11px 0 !important;
font-size: 14.5px !important;
}
.eu-header-root .elementor-nav-menu--main .elementor-nav-menu > li.eu-menu-tipos > .sub-menu{ min-width: 214px; }
.eu-header-root .elementor-nav-menu--main .elementor-nav-menu > li.eu-menu-sobre > .sub-menu{ min-width: 190px; }
/* No celular o menu vira sanfona: o painel perde caixa e colunas. */
@media (max-width: 1024px){
.eu-header-root .elementor-nav-menu > li > .sub-menu{
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
padding: 6px 0 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
column-count: initial !important;
}
}
/* ------------------------------------------------------------------
CORRECAO 26/09 — o aviso da vitrine caiu na faixa ESCURA
------------------------------------------------------------------
Terceira vez hoje na mesma familia, e desta vez foi eu quem
plantou. Escrevi o aviso com --ink-soft no texto e --wine no link,
cores de superficie CLARA. Ele nasce acima da grade, que ali esta
sobre #0E100C. Medido ao vivo: texto 2,98:1 e link 1,69:1 — o
"ver todos os vinhos" praticamente nao existia.
O conserto nao e so trocar as cores: e tirar o elemento da
dependencia do que estiver atras dele. O aviso passa a ter
superficie propria, entao ele le igual caia onde cair — faixa
escura, fundo claro, ou o que vier depois.
Medido no fundo proprio: texto 7,9:1, link 10,6:1.
------------------------------------------------------------------ */
.eu-harm-aviso{
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 8px;
margin: 0 0 20px !important;
padding: 12px 16px;
background: var(--glass-2,#171B12);
border: 1px solid rgba(242,243,239,.16);
border-radius: var(--r,4px);
font-size: 14px;
line-height: 1.5;
color: var(--mute-2,#AFB6A4) !important;
}
.eu-harm-aviso a{
color: var(--green,#8BE01F) !important;
text-decoration: none;
border-bottom: 1px solid rgba(139,224,31,.45);
padding-bottom: 1px;
}
.eu-harm-aviso a:hover,
.eu-harm-aviso a:focus-visible{
color: var(--green,#8BE01F) !important;
border-bottom-color: var(--green,#8BE01F);
}
/* ------------------------------------------------------------------
POR PAÍS na mesma forma do HARMONIZA — 26/09
Os itens de pais agora usam as mesmas classes dos pratos, entao
herdam o ritmo sozinhos. Falta so o codigo do pais ocupar a casa
do icone e o painel ganhar a mesma largura.
Nada de "display" aqui: ver a regra de ouro mais acima.
------------------------------------------------------------------ */
.eu-pais-cod{
display: inline-flex;
justify-content: flex-start;
width: 19px;
flex: 0 0 19px;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px;
letter-spacing: .5px;
color: var(--green,#8BE01F);
}
/* mesmo painel largo de duas colunas dos pratos */
.eu-header-root .elementor-nav-menu--main .elementor-nav-menu > li.eu-menu-paises > .sub-menu{
width: 700px !important;
min-width: 0 !important;
max-width: calc(100vw - 48px) !important;
padding: 26px !important;
column-gap: 28px;
}
.eu-header-root .elementor-nav-menu--main .elementor-nav-menu > li.eu-menu-paises > .sub-menu > li > a{
padding: 11px 0 !important;
font-size: 14.5px !important;
}
@media (max-width: 1024px){
.eu-header-root .elementor-nav-menu > li.eu-menu-paises > .sub-menu{
width: 100% !important;
padding: 6px 0 !important;
}
}
/* ==================================================================
ALINHAMENTO DOS CARTOES NA LISTAGEM — 26/09
------------------------------------------------------------------
O QUE ACONTECIA (medido em quatro cartoes da mesma linha):
ficha e nome ja estavam alinhados (814 e 861 nos quatro). O preco
nao: 933, 933, 908, 933. A diferenca era exatamente 25px, e o
margin-top do preco vinha "25px, 25px, 0px, 25px".
A CAUSA nao estava no preco. O ".wlr-product-message" — o "Compre
e ganhe N Escolhas!" — quebra em duas linhas quando o numero e
maior, e passa de 45px para 70px. O cartao tem altura fixa, entao
esses 25px a mais sao roubados do bloco de cima; o preco, que
estava preso embaixo com margin-top:auto, subia junto.
Um texto la no rodape do cartao mexendo no preco tres linhas
acima: por isso "faltava alinhamento" sem causa aparente.
O CONSERTO tem duas partes, porque sao dois sintomas:
1. o preco deixa de depender de sobra de espaco (margem fixa);
2. a mensagem reserva a altura de duas linhas sempre, entao ela
mesma, o botao e o rodape do cartao param de dancar.
================================================================== */
/* 1. o preco para de flutuar com a sobra */
.woocommerce ul.products li.product .price{
margin-top: 16px !important;
margin-bottom: 0 !important;
}
/* 2. a mensagem do Clube reserva duas linhas em todo cartao */
.woocommerce ul.products li.product .wlr-product-message{
display: block;
min-height: 70px;
margin-top: 10px !important;
margin-bottom: 0 !important;
}
/* 3. ficha e nome continuam com casa fixa — reafirmado aqui para
que a listagem nao dependa de a prateleira da home ter sido
carregada antes */
.woocommerce ul.products li.product .eu-card-meta{ min-height: 47px; }
.woocommerce ul.products li.product h2.woocommerce-loop-product__title{ min-height: 48px; }
/* 4. o botao fecha o cartao sempre na mesma altura */
.woocommerce ul.products li.product .button{
margin-top: auto !important;
}
/* ==================================================================
VARREDURA — CHECKOUT, 25/09
------------------------------------------------------------------
ACHADO 1, e o mais caro do dia: os 9 rotulos do formulario
(Nome, Sobrenome, País, CEP, Endereço, Número...) estavam em
--mute-2 (#AFB6A4) sobre o papel (#F2F3EF). Medido: 1,87:1.
Rotulo de formulario ilegivel, na pagina onde o dinheiro entra.
A causa e a mesma familia do dia, so que espelhada: --mute-2 e
cor de texto secundario para FAIXA ESCURA. No checkout, que e
claro, ela some.
E tem um detalhe que explica por que ninguem viu: existem QUATRO
regras brigando pelo mesmo rotulo. Tres mandam --mute-2 com
!important e uma manda --ink-soft com !important. A mais
especifica das de mute-2 vencia. Esta aqui vence as quatro
(3 classes + 3 elementos) e encerra a briga.
Medido depois: #5B6152 sobre #F2F3EF = 5,6:1.
================================================================== */
body.woocommerce-checkout form.checkout .form-row label,
body.woocommerce-checkout form.checkout .form-row label.required_field,
body.woocommerce-checkout form.checkout label.required_field,
body.woocommerce-checkout .woocommerce-billing-fields .form-row label{
color: var(--ink-soft,#5B6152) !important;
}
/* o asterisco de obrigatorio continua marcando, mas sem virar alarme */
body.woocommerce-checkout form.checkout .form-row label .required{
color: var(--wine,#6B1F2A) !important;
text-decoration: none;
}
/* ------------------------------------------------------------------
ACHADO 2: o link dos termos do Mercado Pago, no hover, ficava em
#3483FA sobre #F9F9F9 — 3,46:1. E um link que a pessoa PRECISA
conseguir ler antes de pagar. So o hover falhava; escurece o azul
o suficiente para passar (5,3:1) sem deixar de ser azul de link.
------------------------------------------------------------------ */
.mp-checkout-container .mp-terms-and-conditions-link:hover,
.mp-checkout-container .mp-terms-and-conditions-link:focus-visible{
color: #2563C9 !important;
text-decoration: underline;
}
/* ------------------------------------------------------------------
ACHADO 3 do checkout: o link "como cuidamos da sua privacidade",
dentro do bloco do Mercado Pago, em #3483FA sobre #F9F9F9 —
3,46:1, abaixo do minimo para texto de 14px.
E widget de terceiro, entao mexo so na COR e so ali dentro: o
rodape de privacidade do Mercado Pago. Nenhuma regra de layout,
nenhum comportamento. Continua azul de link, so escuro o bastante
para ser lido antes de a pessoa digitar o cartao.
Medido depois: 5,3:1.
------------------------------------------------------------------ */
.mp-privacy-policy-footer a,
#mp-super-token-privacy-policy-footer a,
.payment_box.payment_method_woo-mercado-pago-custom .mp-privacy-policy-footer a{
color: #2563C9 !important;
}
.mp-privacy-policy-footer a:hover,
.mp-privacy-policy-footer a:focus-visible{
color: #1B4FA6 !important;
text-decoration: underline;
}
/* ------------------------------------------------------------------
O azul do Mercado Pago, agora pela raiz.
A regra anterior mirava nas classes do widget. Nao adianta: o
Mercado Pago renderiza em Svelte e as classes vem com hash
("extra-small-3d5jyx svelte-4zu6ru") — muda a cada versao deles e
a minha regra morre calada.
Entao a regra passa a ser por REGIAO: qualquer link dentro da
caixa de pagamento. Sobrevive a rebuild deles, e so mexe em cor.
------------------------------------------------------------------ */
#payment .payment_box a,
#payment .wc_payment_method a,
.woocommerce-checkout-payment .payment_box a{
color: #2563C9 !important;
}
#payment .payment_box a:hover,
#payment .payment_box a:focus-visible,
#payment .wc_payment_method a:hover,
#payment .wc_payment_method a:focus-visible{
color: #1B4FA6 !important;
text-decoration: underline;
}
/* ==================================================================
VARREDURA — MENU DO CELULAR, 25/09
------------------------------------------------------------------
O pior achado do dia, e o mais escondido: o menu do celular abria
com FUNDO BRANCO, e os sete itens usam as cores escritas para a
barra escura. Medido, forcando o menu aberto:
TODOS OS VINHOS / POR TIPO / POR PAÍS / HARMONIZA / SOBRE
#C3CAB6 sobre branco .............. 1,69:1
OFERTAS #8BE01F sobre branco ........ 1,64:1
CLUBE #F2F3EF sobre branco ........ 1,11:1
CLUBE a 1,11:1 e texto branco em fundo branco. No telefone, o
menu inteiro era um retangulo em branco.
POR QUE NINGUEM VIU: o Elementor usa a MESMA classe
(.elementor-nav-menu--dropdown) na raiz do menu do celular e em
cada submenu dentro dele. Os submenus pegaram o painel escuro que
eu escrevi hoje; a raiz continuou com o branco padrao do
Elementor. Do desktop nao aparece, porque a raiz fica escondida.
O conserto e dar a raiz a mesma superficie do cabecalho. As cores
dos itens nao mudam — elas ja estavam certas, era o chao que
estava errado.
================================================================== */
.eu-header-root .elementor-nav-menu--dropdown.elementor-nav-menu__container{
background-color: var(--glass,#0E100C) !important;
border-top: 1px solid rgba(242,243,239,.14);
}
.eu-header-root .elementor-nav-menu--dropdown.elementor-nav-menu__container
> ul.elementor-nav-menu > li > a{
border-bottom: 1px solid rgba(242,243,239,.1);
}
/* o item marcado como ativo vinha com um cinza-azulado de fora do
sistema (#3F444B). Volta para a familia da casa. */
.eu-header-root .elementor-nav-menu--dropdown .elementor-item.elementor-item-active,
.eu-header-root .elementor-nav-menu--dropdown a.current{
background-color: var(--glass-2,#171B12) !important;
color: var(--green,#8BE01F) !important;
}
/* o botao de abrir o menu acompanha a barra */
.eu-header-root .elementor-menu-toggle{
color: var(--paper,#F2F3EF) !important;
background: transparent !important;
}
/* ==================================================================
A PRATELEIRA "ESCOLHIDOS" — linha inteira ou nada, 25/09
------------------------------------------------------------------
A DECISAO: a pendencia pedia que eu marcasse 2 rotulos com a tag
"escolhido" para a prateleira fechar 8. Nao faco — escolher qual
vinho e "escolhido" e curadoria, e curadoria e sua, nao minha.
O problema real nao e a falta de dois vinhos: e a prateleira ter
sido escrita para um numero fixo. Medido na home: ofertas 8,
ate79 8, claros 8, escolhidos 6. Em quatro colunas, 6 deixa dois
buracos ao lado de tres prateleiras certinhas.
Entao a prateleira passa a mostrar LINHA INTEIRA OU NADA: com 6
ela mostra 4 e fica deliberada; no dia em que voce marcar mais
dois, ela fecha 8 sozinha, sem ninguem mexer em codigo.
Como funciona: "o primeiro item de uma linha que esteja entre os
tres ultimos" so pode ser o comeco de uma linha incompleta. Ele e
os seguintes somem. Com 8, nunca casa; com 5, 6 ou 7, sobra 4.
So no desktop: em duas colunas, 6 fecha tres linhas certinhas.
================================================================== */
@media (min-width: 1101px){
.eu-prat--escolhidos ul.products li.product:nth-child(4n+1):nth-last-child(-n+3),
.eu-prat--escolhidos ul.products li.product:nth-child(4n+1):nth-last-child(-n+3) ~ li.product{
display: none !important;
}
}
/* ==================================================================
A BARRA DE FINALIZAR DO CELULAR — 25/09
------------------------------------------------------------------
O QUE ERA: o snippet do checkout imprime um `div.eu-ckt-sticky`
com o total e o botao Finalizar, filho direto do BODY, pensado
para ser a barra fixa do rodape no celular.
Medido: existem ZERO regras de CSS para `.eu-ckt-sticky` na folha
inteira. Nenhuma. O HTML foi escrito e o estilo nunca chegou —
perdido em alguma das passadas da folha.
Sem estilo, o elemento cai no padrao: display block, position
static, 1910px de largura, parado no fim do documento, embaixo do
rodape. E o "botao perdido no canto" que voce viu.
O CONSERTO nao e esconder: a barra existe por um motivo bom. No
celular a coluna do resumo desempilha e o botao Finalizar some
muito acima do dedo. Entao ela vira o que deveria ser — barra
fixa no rodape ATE 1024px — e some no desktop, onde a coluna do
resumo ja e sticky e o botao esta sempre a vista.
================================================================== */
/* no desktop ela nao existe */
.eu-ckt-sticky{ display: none; }
@media (max-width: 1024px){
body.woocommerce-checkout .eu-ckt-sticky{
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
position: fixed;
left: 0; right: 0; bottom: 0;
z-index: 90;
padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
background: var(--glass,#0E100C);
border-top: 1px solid rgba(242,243,239,.16);
box-shadow: 0 -10px 30px rgba(0,0,0,.45);
}
.eu-ckt-sticky .eu-ckt-sticky-total{
display: flex;
flex-direction: column;
gap: 2px;
width: auto;
font-size: 12px;
line-height: 1.2;
color: var(--mute-2,#AFB6A4);
}
.eu-ckt-sticky .eu-ckt-sticky-valor,
.eu-ckt-sticky .woocommerce-Price-amount{
font-family: Sora, sans-serif;
font-size: 19px;
font-weight: 600;
letter-spacing: -.4px;
color: var(--paper,#F2F3EF);
}
.eu-ckt-sticky .eu-ckt-sticky-btn{
flex: 0 0 auto;
min-height: 48px;
padding: 0 22px;
border: 0;
border-radius: var(--r,4px);
background: var(--green,#8BE01F);
font-family: Sora, sans-serif;
font-size: 14px;
font-weight: 600;
letter-spacing: .2px;
color: var(--ink,#12150E);
cursor: pointer;
}
/* a barra cobre o fim da pagina; o rodape ganha folga do tamanho dela */
body.woocommerce-checkout{
padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
}
}
/* 29/09/2026 — Hero da home: botoes lado a lado e retangulares.
O widget ja foi ajustado para raio 4px, mas uma regra antiga de
.eu-btn-primario / .eu-btn-secundario com 999px vencia. Escopo
.elementor-3847 = so o conteudo da home, nao pega header nem rodape. */
.elementor-3847 .elementor-element-d2a5063 {
flex-direction: row !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 12px !important;
}
.elementor-3847 .elementor-element-d2a5063 > .elementor-element {
width: auto !important;
max-width: none !important;
}
.elementor-3847 .elementor-element-d2a5063 .elementor-button,
.elementor-3847 .elementor-element-d2a5063 a.elementor-button,
.elementor-3847 .elementor-element-d2a5063 .elementor-button-wrapper .elementor-button {
border-radius: 4px !important;
box-shadow: none !important;
}
/* 29/09/2026 — Card do hero: botao ao lado do preco.
Estrutura real do markup (lida no DOM): .eu-hv-compra > p.add_to_cart_inline
com tres filhos em linha — .woocommerce-Price-amount, .eu-card-pix e
a.add_to_cart_button. Grid com areas: preco em cima, pix embaixo,
botao a direita ocupando as duas linhas. No celular volta a empilhar. */
.eu-hv-compra .add_to_cart_inline {
display: grid !important;
grid-template-columns: auto 1fr;
grid-template-areas: "eupreco eubotao" "eupix eubotao";
align-items: center;
column-gap: 18px;
row-gap: 7px;
margin: 0 !important;
}
.eu-hv-compra .add_to_cart_inline > .woocommerce-Price-amount {
grid-area: eupreco;
font-size: 30px !important;
line-height: 1.1 !important;
}
.eu-hv-compra .add_to_cart_inline > .eu-card-pix {
grid-area: eupix;
justify-self: start;
}
.eu-hv-compra .add_to_cart_inline > .add_to_cart_button {
grid-area: eubotao;
justify-self: end;
align-self: center;
white-space: nowrap;
}
@media (max-width: 600px) {
.eu-hv-compra .add_to_cart_inline {
grid-template-columns: 1fr;
grid-template-areas: "eupreco" "eupix" "eubotao";
row-gap: 10px;
}
.eu-hv-compra .add_to_cart_inline > .woocommerce-Price-amount { font-size: 28px !important; }
.eu-hv-compra .add_to_cart_inline > .add_to_cart_button {
justify-self: stretch;
text-align: center;
}
}
/* 29/09/2026 (2a volta) — Card do hero: os tres numa linha so.
Andre pediu preco, botao e pilula do Pix lado a lado, nessa ordem.
Substitui o grid de duas linhas escrito acima: volta para flex e
zera as propriedades de grid para nao sobrar resquicio. */
.eu-hv-compra .add_to_cart_inline {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 12px !important;
grid-template-columns: none !important;
grid-template-areas: none !important;
row-gap: 10px !important;
}
.eu-hv-compra .add_to_cart_inline > .woocommerce-Price-amount {
grid-area: auto !important;
justify-self: auto !important;
order: 1;
font-size: 28px !important;
line-height: 1.1 !important;
}
.eu-hv-compra .add_to_cart_inline > .add_to_cart_button {
grid-area: auto !important;
justify-self: auto !important;
align-self: center !important;
order: 2;
white-space: nowrap;
padding-left: 18px !important;
padding-right: 18px !important;
}
.eu-hv-compra .add_to_cart_inline > .eu-card-pix {
grid-area: auto !important;
justify-self: auto !important;
order: 3;
}
@media (max-width: 600px) {
.eu-hv-compra .add_to_cart_inline {
grid-template-columns: none !important;
grid-template-areas: none !important;
}
.eu-hv-compra .add_to_cart_inline > .woocommerce-Price-amount { font-size: 26px !important; }
.eu-hv-compra .add_to_cart_inline > .add_to_cart_button { justify-self: auto !important; }
}
/* ===== CHECKOUT — aviso de Escolhas do Clube (29/09) =====
Linha propria dentro da tabela do resumo. O td perde padding e
borda para a caixa encostar nas bordas do resumo. */
.woocommerce-checkout .eu-ckt-clube-linha > td { padding: 0 !important; border: 0 !important; background: transparent !important; }
.woocommerce-checkout .eu-ckt-clube { margin: 14px 0 2px; padding: 14px 16px; border-radius: 4px; background: #E4E7DD; border-left: 3px solid #8BE01F; display: flex; flex-direction: column; gap: 6px; }
.woocommerce-checkout .eu-ckt-clube-selo { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 1.4px; color: #5B6152; }
.woocommerce-checkout .eu-ckt-clube-txt { margin: 0 !important; font-family: Archivo, sans-serif; font-size: 14px; line-height: 1.45; color: #12150E; }
.woocommerce-checkout .eu-ckt-clube-txt strong { font-weight: 600; color: #12150E; }
.woocommerce-checkout .eu-ckt-clube-txt .woocommerce-Price-amount { font-weight: 600; color: #12150E; }
.woocommerce-checkout .eu-ckt-clube-nota { font-family: Archivo, sans-serif; font-size: 11.5px; line-height: 1.45; color: #5B6152; }
/* =====================================================================
PAGINA /carrinho/ — 29/09/2026
A pagina saiu dos blocos do WooCommerce e voltou para o shortcode
[woocommerce_cart]. Isto veste o carrinho classico com a forma da
loja: papel, filete fino, raio 4px, Sora no que e titulo, JetBrains
Mono nos rotulos, verde so no botao que leva adiante.
display:contents no .cart-collaterals e o truque do layout: ele some
como caixa e seus dois filhos (totais e cross-sells) viram itens do
mesmo grid da tabela. Sem isso os totais nao sobem para a direita.
===================================================================== */
.woocommerce-cart .woocommerce { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 28px 32px; align-items: start; }
.woocommerce-cart .woocommerce-cart-form { grid-column: 1; grid-row: 1; margin: 0 !important; }
.woocommerce-cart .cart-collaterals { display: contents; width: auto !important; float: none !important; }
.woocommerce-cart .cart_totals { grid-column: 2; grid-row: 1; width: auto !important; float: none !important; }
.woocommerce-cart .cross-sells { grid-column: 1 / -1; grid-row: 2; width: auto !important; float: none !important; }
/* ---- tabela dos itens ---- */
.woocommerce-cart table.shop_table.cart { border: 1px solid #C6CABB !important; border-radius: 4px !important; border-collapse: separate !important; border-spacing: 0 !important; margin: 0 !important; background: #F2F3EF; }
.woocommerce-cart table.shop_table.cart thead th { padding: 12px 16px !important; border: 0 !important; border-bottom: 1px solid #C6CABB !important; background: #E4E7DD; font-family: "JetBrains Mono", monospace !important; font-size: 10px !important; font-weight: 500 !important; letter-spacing: 1.4px !important; text-transform: uppercase; color: #5B6152 !important; }
.woocommerce-cart table.shop_table.cart td { padding: 16px !important; border: 0 !important; border-bottom: 1px solid #C6CABB !important; vertical-align: middle !important; background: transparent !important; }
.woocommerce-cart table.shop_table.cart tr.cart_item:last-child td { border-bottom: 1px solid #C6CABB !important; }
.woocommerce-cart td.product-thumbnail { width: 76px; }
.woocommerce-cart td.product-thumbnail img { width: 60px !important; height: auto; border-radius: 4px; background: #E4E7DD; }
.woocommerce-cart td.product-name a { font-family: Sora, sans-serif; font-size: 14.5px; font-weight: 600; letter-spacing: -0.2px; line-height: 1.3; color: #12150E !important; text-decoration: none; }
.woocommerce-cart td.product-name a:hover { color: #6B1F2A !important; }
.woocommerce-cart td.product-price, .woocommerce-cart td.product-subtotal { font-family: Archivo, sans-serif; font-size: 14px; color: #12150E; white-space: nowrap; }
.woocommerce-cart td.product-subtotal { font-weight: 600; }
.woocommerce-cart td.product-remove a.remove { width: 22px; height: 22px; line-height: 20px; font-size: 18px; border-radius: 4px; color: #5B6152 !important; background: transparent !important; }
.woocommerce-cart td.product-remove a.remove:hover { color: #F2F3EF !important; background: #6B1F2A !important; }
/* ---- quantidade ---- */
.woocommerce-cart .quantity input.qty { width: 62px !important; height: 40px; box-sizing: border-box; padding: 0 6px; border: 1px solid #5B6152; border-radius: 4px; background: #FFF; font-family: Archivo, sans-serif; font-size: 14px; color: #12150E; text-align: center; }
/* ---- linha de acoes: cupom + atualizar ---- */
.woocommerce-cart td.actions { padding: 16px !important; border-bottom: 0 !important; background: #E4E7DD !important; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.woocommerce-cart td.actions .coupon { display: flex; gap: 8px; align-items: center; float: none !important; }
.woocommerce-cart td.actions .coupon label { display: none; }
.woocommerce-cart td.actions #coupon_code { width: 180px !important; height: 40px; box-sizing: border-box; padding: 0 12px; border: 1px solid #5B6152; border-radius: 4px; background: #FFF; font-family: Archivo, sans-serif; font-size: 13.5px; color: #12150E; }
.woocommerce-cart td.actions button { height: 40px; padding: 0 16px; border: 1px solid #12150E !important; border-radius: 4px !important; background: transparent !important; font-family: "JetBrains Mono", monospace !important; font-size: 11px !important; letter-spacing: 1.1px !important; color: #12150E !important; box-shadow: none !important; }
.woocommerce-cart td.actions button:hover:not(:disabled) { background: #12150E !important; color: #F2F3EF !important; }
.woocommerce-cart td.actions button:disabled { opacity: .45; }
/* ---- resumo (coluna da direita) ---- */
.woocommerce-cart .cart_totals h2 { margin: 0 0 12px !important; font-family: "JetBrains Mono", monospace !important; font-size: 10.5px !important; font-weight: 500 !important; letter-spacing: 1.5px !important; text-transform: uppercase; color: #5B6152 !important; }
.woocommerce-cart .cart_totals table.shop_table { border: 1px solid #C6CABB !important; border-radius: 4px !important; border-collapse: separate !important; border-spacing: 0 !important; margin: 0 !important; background: #F2F3EF; }
.woocommerce-cart .cart_totals table.shop_table th, .woocommerce-cart .cart_totals table.shop_table td { padding: 12px 16px !important; border: 0 !important; border-bottom: 1px solid #C6CABB !important; background: transparent !important; font-family: Archivo, sans-serif !important; font-size: 13.5px !important; color: #12150E !important; vertical-align: top; }
.woocommerce-cart .cart_totals table.shop_table th { font-weight: 400 !important; color: #5B6152 !important; }
.woocommerce-cart .cart_totals tr.order-total th, .woocommerce-cart .cart_totals tr.order-total td { border-bottom: 0 !important; }
.woocommerce-cart .cart_totals tr.order-total th { font-family: Sora, sans-serif !important; font-size: 15px !important; font-weight: 600 !important; color: #12150E !important; }
.woocommerce-cart .cart_totals tr.order-total .woocommerce-Price-amount { font-family: Sora, sans-serif; font-size: 24px; font-weight: 700; letter-spacing: -0.8px; color: #12150E; }
.woocommerce-cart .cart_totals .shipping-calculator-button { font-family: "JetBrains Mono", monospace; font-size: 10.5px; letter-spacing: 1px; color: #6B1F2A !important; border-bottom: 1px solid #C6CABB; text-decoration: none; }
.woocommerce-cart .cart_totals ul#shipping_method li { margin: 0 0 6px; }
.woocommerce-cart .cart_totals ul#shipping_method label { font-size: 13px; color: #12150E; }
/* ---- botao de finalizar ---- */
.woocommerce-cart .wc-proceed-to-checkout { padding: 14px 0 0 !important; }
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button { display: flex !important; align-items: center; justify-content: center; height: 54px; margin: 0 !important; padding: 0 20px !important; border-radius: 4px !important; background: #8BE01F !important; font-family: "JetBrains Mono", monospace !important; font-size: 12.5px !important; font-weight: 500 !important; letter-spacing: 1.3px !important; color: #12150E !important; text-transform: uppercase; box-shadow: none !important; }
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover { background: #7ACB18 !important; color: #12150E !important; }
/* ---- barra de frete gratis dentro do resumo ---- */
.woocommerce-cart .eu-frete-barra { margin: 0 0 14px; padding: 12px 14px; border-radius: 4px; background: #E4E7DD; }
.woocommerce-cart .eu-frete-barra-txt { margin: 0 0 8px !important; font-family: Archivo, sans-serif; font-size: 12.5px; line-height: 1.4; color: #12150E; }
.woocommerce-cart .eu-frete-barra--info .eu-frete-barra-txt, .woocommerce-cart .eu-frete-barra--neutro .eu-frete-barra-txt { margin: 0 !important; }
.woocommerce-cart .eu-frete-barra-trilho { height: 5px; border-radius: 3px; background: #C6CABB; overflow: hidden; }
.woocommerce-cart .eu-frete-barra-trilho span { display: block; height: 100%; background: #8BE01F; }
/* ---- cross-sells ---- */
.woocommerce-cart .cross-sells > h2 { margin: 0 0 16px !important; font-family: Sora, sans-serif !important; font-size: 22px !important; font-weight: 700 !important; letter-spacing: -0.7px !important; color: #12150E !important; }
/* ---- carrinho vazio ---- */
.woocommerce-cart .cart-empty { padding: 28px 0 !important; font-family: Sora, sans-serif !important; font-size: 20px !important; font-weight: 600 !important; letter-spacing: -0.4px; color: #12150E !important; border: 0 !important; background: transparent !important; }
.woocommerce-cart .return-to-shop a.button { display: inline-flex; align-items: center; height: 50px; padding: 0 26px; border-radius: 4px !important; background: #12150E !important; font-family: "JetBrains Mono", monospace !important; font-size: 12px !important; letter-spacing: 1.2px !important; color: #F2F3EF !important; box-shadow: none !important; }
@media (max-width: 1023px) {
.woocommerce-cart .woocommerce { grid-template-columns: minmax(0, 1fr); }
.woocommerce-cart .woocommerce-cart-form, .woocommerce-cart .cart_totals { grid-column: 1; }
.woocommerce-cart .cart_totals { grid-row: 2; }
.woocommerce-cart .cross-sells { grid-row: 3; }
}
@media (max-width: 767px) {
.woocommerce-cart table.shop_table.cart thead { display: none; }
.woocommerce-cart table.shop_table.cart tr.cart_item { display: grid; grid-template-columns: 60px minmax(0, 1fr) 26px; grid-template-areas: "foto nome apagar" "foto preco preco" "foto qtd sub"; gap: 4px 12px; padding: 14px 16px; border-bottom: 1px solid #C6CABB; }
.woocommerce-cart table.shop_table.cart tr.cart_item td { padding: 0 !important; border: 0 !important; }
.woocommerce-cart td.product-thumbnail { grid-area: foto; width: auto; }
.woocommerce-cart td.product-name { grid-area: nome; }
.woocommerce-cart td.product-remove { grid-area: apagar; text-align: right; }
.woocommerce-cart td.product-price { grid-area: preco; font-size: 12.5px; color: #5B6152; }
.woocommerce-cart td.product-quantity { grid-area: qtd; }
.woocommerce-cart td.product-subtotal { grid-area: sub; text-align: right; align-self: center; }
.woocommerce-cart td.actions { flex-direction: column; align-items: stretch; }
.woocommerce-cart td.actions .coupon { width: 100%; }
.woocommerce-cart td.actions #coupon_code { flex: 1 1 auto; width: auto !important; }
}
/* ===== /carrinho/ — correcao de 29/09 (2a volta) =====
A tabela nascia com 797px dentro de uma coluna de 728px: item de
grid tem min-width auto, entao ela transbordava e passava por
baixo do resumo. Trava a largura, fixa o layout da tabela e da
largura a cada coluna. A barra de frete herdava o raio 99px da
gaveta; aqui ela e um bloco do resumo. */
.woocommerce-cart .woocommerce-cart-form { min-width: 0 !important; max-width: 100% !important; }
.woocommerce-cart .cart_totals { min-width: 0 !important; }
.woocommerce-cart table.shop_table.cart { width: 100% !important; max-width: 100% !important; table-layout: fixed !important; }
.woocommerce-cart table.shop_table.cart .product-remove { width: 42px; }
.woocommerce-cart table.shop_table.cart .product-thumbnail { width: 78px; }
.woocommerce-cart table.shop_table.cart .product-price { width: 96px; }
.woocommerce-cart table.shop_table.cart .product-quantity { width: 100px; }
.woocommerce-cart table.shop_table.cart .product-subtotal { width: 116px; }
.woocommerce-cart table.shop_table.cart .product-name { width: auto; }
.woocommerce-cart table.shop_table.cart td.product-name a { display: block; word-break: normal; overflow-wrap: anywhere; }
.woocommerce-cart table.shop_table.cart td.product-thumbnail img { display: block; width: 58px !important; height: auto !important; max-width: none; }
.woocommerce-cart table.shop_table.cart td.actions { width: auto; }
.woocommerce-cart .cart_totals .eu-frete-barra { border-radius: 4px !important; box-shadow: none !important; }
.woocommerce-cart .cart_totals .eu-frete-barra-trilho { border-radius: 3px !important; }
@media (max-width: 767px) {
.woocommerce-cart table.shop_table.cart { table-layout: auto !important; }
.woocommerce-cart table.shop_table.cart .product-remove,
.woocommerce-cart table.shop_table.cart .product-thumbnail,
.woocommerce-cart table.shop_table.cart .product-price,
.woocommerce-cart table.shop_table.cart .product-quantity,
.woocommerce-cart table.shop_table.cart .product-subtotal { width: auto; }
}/* End custom CSS */