:root{--vf-navy:#36455d;--vf-navy-dark:#2b3544;--vf-border:#dfe4ec;--vf-mint:#9dc9c4;--vf-ink:#36455d}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body.vf-page{margin:0;background:#fff;color:var(--vf-ink);font:15px/1.5 Arial,Helvetica,sans-serif}
.vf-page button,.vf-page input,.vf-page select{font:inherit}
.vf-page button{cursor:pointer}
.vf-page a{color:inherit;text-decoration:none}
.vf-width{width:min(100% - 36px,1390px);margin-inline:auto}
.vf-site-header{background:var(--vf-navy);color:#fff;position:relative;z-index:30}
.vf-header-main{min-height:168px;display:grid;grid-template-columns:135px minmax(200px,1fr) 330px;align-items:center;gap:30px}
.vf-brand img{width:108px;height:108px;object-fit:contain}
.vf-site-search{display:flex;align-items:center;background:#fff;border-radius:11px;max-width:970px;width:100%;height:48px;margin:auto;overflow:hidden;color:var(--vf-ink)}
.vf-site-search input{width:100%;min-width:0;flex:1;border:0;padding:0 18px;outline:none;color:var(--vf-ink)}
.vf-site-search button{width:50px;height:48px;border:0;background:#fff;color:var(--vf-ink)}
.vf-site-search svg{width:26px;stroke:currentColor;stroke-width:1.7;fill:none}
.vf-header-actions{display:flex;align-items:center;justify-content:flex-end;gap:34px}
.vf-header-actions a,.vf-header-actions button{color:#fff;text-align:center;display:flex;align-items:center;flex-direction:column;justify-content:center;white-space:nowrap;gap:2px;font-size:26px;border:0;background:none;padding:0;position:relative}
.vf-header-actions small{font-size:12px;font-weight:400}
.vf-header-actions svg{width:30px;height:30px;stroke:#fff;stroke-width:1.25;fill:none}
.vf-header-actions b{font-size:12px;position:absolute;right:-10px;top:-4px}
.vf-menu-toggle{display:none}
.vf-main-nav{border-top:1px solid #ffffff3a}
.vf-main-nav .vf-width{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:32px;min-height:54px}
.vf-main-nav a{padding:15px 0;font-size:14px;letter-spacing:.06em}
.vf-main-nav a:hover,.vf-header-actions a:hover{color:#c3e5e2}
.vf-nav-account{display:none}
.vf-banner{position:relative;min-height:530px;background:#edf1f2;overflow:hidden}
.vf-banner img{display:block;width:100%;height:530px;object-fit:cover;object-position:center 30%}
.vf-banner-copy{position:absolute;left:max(4vw,calc((100vw - 1390px)/2));top:50%;transform:translateY(-50%);background:#ffffffea;padding:36px 45px;max-width:410px}
.vf-banner-copy small,.vf-eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.2em;font-weight:700;color:#6f9f9a}
.vf-banner-copy h1{font:400 clamp(36px,3.4vw,58px)/1 Georgia,serif;margin:12px 0;color:#263343}
.vf-banner-copy p{margin:0 0 20px;color:#5b6675}
.vf-primary{display:inline-flex;align-items:center;justify-content:center;border:0;background:var(--vf-navy);color:#fff!important;padding:12px 22px;border-radius:25px;text-align:center;font-weight:700;text-transform:uppercase;letter-spacing:.09em;font-size:12px}
.vf-primary:hover{background:#243249}
.vf-home-section{padding:58px 0}
.vf-home-section h2{font-size:28px;margin:4px 0 26px;color:var(--vf-ink)}
.vf-title-row{display:flex;align-items:flex-end;justify-content:space-between;gap:20px}
.vf-title-row a{font-size:13px;text-decoration:underline}
.vf-product-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px}
.vf-card{border:1px solid var(--vf-border);border-radius:20px;overflow:hidden;text-align:center;min-width:0;position:relative;background:#fff;transition:box-shadow .2s}
.vf-card:hover{box-shadow:0 6px 14px #36455d28}
.vf-card-photo{display:block;aspect-ratio:1/1.14;overflow:hidden;background:#f7f8fa;border-bottom:4px solid var(--vf-navy)}
.vf-card-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.vf-card-info{padding:17px 14px 18px;min-height:100px}
.vf-card-info h3{margin:0 0 9px;font-size:14px;line-height:1.3;font-weight:400;min-height:36px}
.vf-card-info strong{font-size:20px}
.vf-card-actions{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:7px;padding:0 12px 14px}
.vf-card-actions form{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:5px;width:100%}
.vf-card-actions select{min-width:0;width:calc(50% - 4px);border:1px solid var(--vf-border);background:#fff;padding:7px 4px;border-radius:6px;font-size:12px}
.vf-card-actions button,.vf-card-actions a{border-radius:20px;background:var(--vf-navy);color:#fff;padding:8px 15px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;border:0}
.vf-card-actions a{background:#fff;color:var(--vf-navy);border:1px solid var(--vf-navy)}
.vf-card-actions .vf-unavailable{font-size:12px;color:#777}
.vf-preview{max-width:min(800px,95vw);width:100%;border:0;border-radius:14px;padding:25px;box-shadow:0 18px 60px #0004;grid-template-columns:45% 1fr;gap:25px}
.vf-preview[open]{display:grid}.vf-preview::backdrop{background:#0008}.vf-preview>img{width:100%;height:380px;object-fit:cover}.vf-preview h2{font-size:23px;margin:15px 0}.vf-preview strong{font-size:21px}.vf-preview form{display:grid;gap:10px;margin:25px 0}.vf-preview select{padding:12px;border:1px solid var(--vf-border)}.vf-preview-close{position:absolute;right:10px;top:10px;border:0;background:none;font-size:28px}.vf-preview a{text-decoration:underline}
.vf-promo-band{background:#f1f4f6;text-align:center;padding:35px 16px}
.vf-promo-band h2{font-size:22px;margin:0 0 5px}
.vf-promo-band p{margin:0}
.vf-breadcrumb{margin:28px 0 34px;font-size:13px;color:#8791a2}
.vf-breadcrumb a:hover{text-decoration:underline}
.vf-catalog-head{display:flex;justify-content:space-between;align-items:center;gap:20px;margin:25px 0 34px}
.vf-catalog-head h1{font-size:24px;margin:0}
.vf-sort{display:flex;align-items:center;gap:8px;font-size:12px}
.vf-sort select{padding:10px 12px;min-width:205px;border:1px solid var(--vf-border);border-radius:12px;color:var(--vf-ink);background:#fff;font-weight:700}
.vf-catalog-body{display:grid;grid-template-columns:205px minmax(0,1fr);gap:34px;padding-bottom:65px}
.vf-filters h2{font-size:18px;margin:0 0 22px}
.vf-filters fieldset{border:0;border-top:1px solid var(--vf-border);margin:0 0 24px;padding:18px 0 0}
.vf-filters legend{font-size:14px;font-weight:700;padding-top:6px}
.vf-filters label,.vf-filters a{display:flex;align-items:center;gap:9px;font-size:13px;margin:8px 0}
.vf-filters input[type=radio]{appearance:none;width:19px;height:19px;border:1px solid var(--vf-navy);border-radius:4px;margin:0;flex:none}
.vf-filters input[type=radio]:checked{background:var(--vf-navy);box-shadow:inset 0 0 0 4px white}
.vf-price-range{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.vf-price-range input{width:100%;padding:9px;border:1px solid var(--vf-border);border-radius:8px}
.vf-filters button{border:1px solid var(--vf-navy);background:#fff;border-radius:8px;padding:8px 15px;color:var(--vf-ink)}
.vf-mobile-filter-button{display:none}
.vf-pagination{display:flex;justify-content:center;gap:18px;align-items:center;padding:30px 0}
.vf-pagination a{text-decoration:underline}
.vf-empty-state{padding:50px 20px;text-align:center;background:#f8f9fa}
.vf-footer{border-top:1px solid var(--vf-border);background:#f7f8fa;padding:46px 0 18px}
.vf-footer-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}
.vf-footer h3{font-size:15px;margin:0 0 15px}
.vf-footer a,.vf-footer p{display:block;margin:0 0 8px;font-size:13px;color:#536072}
.vf-footer-bottom{border-top:1px solid var(--vf-border);padding-top:18px;margin-top:30px;font-size:12px;color:#777}
.vf-drawer-backdrop{position:fixed;inset:0;background:#0006;z-index:49}
.vf-drawer-backdrop[hidden]{display:none}
.vf-drawer{position:fixed;top:0;right:0;bottom:0;width:min(100vw,530px);background:#fff;z-index:50;transform:translateX(101%);transition:transform .25s;display:flex;flex-direction:column;box-shadow:-12px 0 35px #101a2a33}
.vf-drawer[aria-hidden=false]{transform:translateX(0)}
.vf-drawer-heading{background:var(--vf-navy);color:#fff;padding:15px 20px;font-size:20px;display:flex;align-items:center;justify-content:space-between}
.vf-drawer-heading button{color:#fff;background:none;border:1px solid #fff;border-radius:50%;font-size:28px;width:34px;height:34px;line-height:26px}
.vf-drawer-content{padding:18px 20px;overflow:auto}
.vf-empty-cart{text-align:center;padding:70px 0}
.vf-drawer-line{display:grid;grid-template-columns:70px 1fr auto;gap:13px;padding:15px 0;border-bottom:1px solid var(--vf-border);font-size:13px}
.vf-drawer-line img{width:70px;height:84px;object-fit:cover}
.vf-drawer-line small{display:block;margin:5px 0;color:#777}
.vf-drawer-line-end{display:flex;align-items:flex-end;justify-content:space-between;flex-direction:column;white-space:nowrap}
.vf-drawer-line-end button{border:0;background:none;font-size:22px;color:#6d7885}
.vf-qty{display:inline-flex;align-items:center;border:1px solid var(--vf-border);border-radius:9px;overflow:hidden}
.vf-qty button{border:0;background:#fff;padding:4px 10px;font-size:18px;color:var(--vf-ink)}
.vf-qty span{padding:0 8px}
.vf-drawer-summary{padding-top:25px;text-align:center}
.vf-drawer-summary p{display:flex;justify-content:space-between;gap:15px;margin:7px 0;text-align:left}
.vf-drawer-summary .vf-drawer-total{border-top:1px solid var(--vf-border);margin:20px 0;padding-top:18px;font-size:20px;font-weight:700}
.vf-drawer-summary .vf-primary{display:flex;width:100%;margin:15px 0 12px}
.vf-drawer-cep{padding:18px 0;margin-bottom:20px;border-bottom:1px solid var(--vf-border);text-align:left}.vf-drawer-cep label{display:block;margin-bottom:7px}.vf-drawer-cep div{display:flex}.vf-drawer-cep input{min-width:0;width:100%;border:1px solid var(--vf-border);padding:10px}.vf-drawer-cep button{background:#fff;border:1px solid var(--vf-navy);color:var(--vf-ink);padding:9px 18px}.vf-drawer-cep small{display:block;color:#778;line-height:1.4;margin-top:5px}
.vf-product-layout{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:54px;padding:10px 0 70px}
.vf-product-main-image{border:1px solid var(--vf-border);border-radius:18px;overflow:hidden;background:#f8f9fa}
.vf-product-main-image img,.vf-product-main-image video{width:100%;height:min(68vw,650px);object-fit:contain;display:block}
.vf-thumbnails{display:flex;flex-wrap:wrap;gap:10px;margin-top:15px}
.vf-thumbnails button{border:1px solid var(--vf-border);background:#fff;padding:0;border-radius:8px;overflow:hidden}
.vf-thumbnails img{width:76px;height:82px;object-fit:cover;display:block}
.vf-product-details h1{font-size:32px;line-height:1.2;margin:4px 0 20px}
.vf-product-price{font-weight:700;font-size:30px;margin:0 0 22px}
.vf-product-details label{display:block;font-weight:700;margin:18px 0 7px}
.vf-product-details select,.vf-product-details input[type=number]{width:100%;max-width:320px;padding:11px;border:1px solid var(--vf-border);border-radius:8px;background:#fff}
.vf-product-details .vf-primary{width:100%;max-width:420px;margin-top:24px}
.vf-product-note{padding:18px 0;border-top:1px solid var(--vf-border);margin-top:22px;font-size:13px}
.vf-product-description{border-top:1px solid var(--vf-border);padding:22px 0;margin-top:20px;white-space:pre-line}
.vf-cart-page{padding-bottom:70px}
.vf-cart-page h1{font-size:30px;margin:32px 0}
.vf-cart-page-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:35px}
.vf-cart-row{display:grid;grid-template-columns:115px 1fr auto;gap:20px;padding:20px 0;border-bottom:1px solid var(--vf-border)}
.vf-cart-row img{width:115px;height:130px;object-fit:cover}
.vf-cart-row h2{font-size:17px;margin:0 0 7px}
.vf-cart-row p{margin:4px 0;font-size:13px}
.vf-cart-row form{margin-top:10px}
.vf-cart-row button:not(.vf-qty button){border:0;background:none;color:#777;text-decoration:underline;font-size:12px;padding:0}
.vf-cart-summary{border:1px solid var(--vf-border);padding:22px;border-radius:12px;height:max-content}
.vf-cart-summary h2{margin:0 0 20px;font-size:20px}
.vf-cart-summary p{display:flex;justify-content:space-between}
.vf-cart-summary .vf-primary{width:100%;margin:20px 0}
.vf-cart-error{color:#ae2929;font-size:12px}
@media(max-width:1000px){.vf-header-main{grid-template-columns:110px 1fr 195px;gap:15px}.vf-header-actions{gap:16px}.vf-contact-action{display:none!important}.vf-main-nav .vf-width{gap:18px}.vf-product-grid{gap:15px}}
@media(max-width:720px){
 .vf-width{width:min(100% - 28px,1390px)}
 .vf-header-main{min-height:148px;grid-template-columns:50px 1fr 65px;grid-template-rows:80px 54px;gap:0}
 .vf-menu-toggle{display:block;border:0;background:none;color:#fff;font-size:29px;text-align:left}
 .vf-brand{text-align:center}.vf-brand img{width:70px;height:70px}
 .vf-header-actions{justify-content:flex-end}.vf-header-actions .vf-account-action{display:none}.vf-header-actions .vf-cart-action small{display:none}
 .vf-site-search{grid-column:1/-1;grid-row:2;height:46px;margin:0 0 10px}.vf-site-search button{height:46px}
 .vf-main-nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--vf-navy);box-shadow:0 12px 20px #0003;max-height:70vh;overflow:auto}
 .vf-main-nav.is-open{display:block}.vf-main-nav .vf-width{display:block;padding:10px 18px}.vf-main-nav a,.vf-nav-account{display:block;padding:11px 4px;border-bottom:1px solid #ffffff25}
 .vf-banner,.vf-banner img{height:490px;min-height:0}.vf-banner img{object-position:55% top}
 .vf-banner-copy{left:14px;right:14px;top:auto;bottom:15px;transform:none;padding:18px 22px;max-width:none}.vf-banner-copy h1{font-size:34px;margin:5px 0}.vf-banner-copy p{font-size:13px;margin-bottom:10px}
 .vf-home-section{padding:36px 0}.vf-home-section h2{font-size:24px}
 .vf-product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.vf-card{border-radius:13px}.vf-card-info{padding:12px 8px;min-height:94px}.vf-card-info h3{font-size:12px}.vf-card-info strong{font-size:16px}.vf-card-actions{padding:0 7px 12px}.vf-card-actions button,.vf-card-actions a{font-size:10px;padding:7px 10px}
 .vf-catalog-head{display:block}.vf-sort{margin-top:16px}.vf-catalog-body{display:block}.vf-filters{display:none;padding:15px;border:1px solid var(--vf-border);margin-bottom:20px}.vf-filters.is-open{display:block}.vf-mobile-filter-button{display:inline-block;margin:12px 0;border:1px solid var(--vf-border);border-radius:8px;background:#fff;padding:10px 20px}
 .vf-footer-grid{grid-template-columns:repeat(2,1fr);gap:22px}.vf-product-layout,.vf-cart-page-grid{display:block}.vf-product-details{margin-top:28px}.vf-product-main-image img,.vf-product-main-image video{height:430px}.vf-cart-summary{margin-top:28px}
 .vf-preview[open]{display:block}.vf-preview>img{height:270px}.vf-preview h2{font-size:20px}
}
@media(max-width:380px){.vf-card-actions form{display:block}.vf-card-actions select{width:100%;margin-bottom:5px}.vf-card-actions button{width:100%}.vf-cart-row{grid-template-columns:80px 1fr;gap:12px}.vf-cart-row img{width:80px;height:105px}.vf-cart-row>strong{grid-column:2}.vf-footer-grid{grid-template-columns:1fr}}

/* VIVA_BANNER_FOTO_VISIVEL_20260923 */
@media(min-width:721px){
 .vf-banner{display:grid;grid-template-columns:42% 58%;min-height:680px;background:#f7f5f1}
 .vf-banner img{grid-column:2;grid-row:1;width:100%;height:680px;object-fit:cover;object-position:center top}
 .vf-banner-copy{grid-column:1;grid-row:1;position:static;transform:none;max-width:none;background:#f7f5f1;padding:40px clamp(24px,4vw,80px) 40px max(32px,calc((100vw - 1390px)/2));display:flex;flex-direction:column;justify-content:center}
}
@media(max-width:720px){
 .vf-banner{display:flex;flex-direction:column;height:auto;min-height:0}
 .vf-banner img{order:0;width:100%;height:min(115vw,520px);object-fit:cover;object-position:center top}
 .vf-banner-copy{order:1;position:static;transform:none;max-width:none;margin:0;padding:24px 20px;background:#f7f5f1}
}

/* ========================================================================
   VIVA_BRAND_PALETTE_V2

   CORES OFICIAIS EXTRAIDAS DA LOGO:
   VERDE AGUA : #C7E6E0
   OFF-WHITE  : #FBF3F0

   Tons escuros sao usados somente em texto/icones para contraste.
   Nao existem grandes superficies azul-marinho ou grafite.
   ======================================================================== */

:root{
    --vf-mint:#C7E6E0;
    --vf-ivory:#FBF3F0;

    /* compatibilidade com componentes existentes */
    --vf-navy:#C7E6E0;
    --vf-teal:#C7E6E0;

    /* neutro funcional: somente texto e icones */
    --vf-ink:#303837;

    --vf-border:rgba(48,56,55,.13);
}


/* ------------------------------------------------------------------------
   BASE
   ------------------------------------------------------------------------ */

html{
    background:#FBF3F0;
}

body,
body.vf-page{
    background:#FBF3F0;
    color:#303837;
}


/* ------------------------------------------------------------------------
   CABECALHO
   ------------------------------------------------------------------------ */

.vf-header,
.vf-header-main{
    background:#C7E6E0 !important;
    color:#303837;
}

.vf-header-main{
    border-bottom:
        1px solid
        rgba(48,56,55,.08);
}

.vf-brand img{
    filter:none;
}

.vf-header-actions,
.vf-header-actions a,
.vf-header-actions button,
.vf-header-actions small,
.vf-contact-action,
.vf-account-action,
.vf-cart-action,
.vf-menu-toggle{
    color:#303837 !important;
}

.vf-header-actions svg{
    stroke:currentColor;
}


/* ------------------------------------------------------------------------
   BUSCA
   ------------------------------------------------------------------------ */

.vf-site-search{
    background:#FBF3F0 !important;

    border:
        1px solid
        rgba(48,56,55,.12) !important;

    box-shadow:none !important;

    color:#303837;
}

.vf-site-search input{
    background:transparent;
    color:#303837;
}

.vf-site-search input::placeholder{
    color:rgba(48,56,55,.62);
}

.vf-site-search button{
    color:#303837;
}

.vf-site-search svg{
    stroke:currentColor;
}

.vf-site-search:focus-within{
    border-color:
        rgba(48,56,55,.32) !important;

    box-shadow:
        0 0 0 3px
        rgba(251,243,240,.58) !important;
}


/* ------------------------------------------------------------------------
   NAVEGACAO
   ------------------------------------------------------------------------ */

.vf-main-nav{
    background:#FBF3F0 !important;

    border-top:
        1px solid
        rgba(48,56,55,.07);

    border-bottom:
        1px solid
        rgba(48,56,55,.10);

    box-shadow:none;
}

.vf-main-nav a,
.vf-nav-account{
    color:#303837 !important;
}

.vf-main-nav a:hover,
.vf-nav-account:hover{
    color:#303837 !important;
    opacity:.62;
}


/* ------------------------------------------------------------------------
   HERO
   ------------------------------------------------------------------------ */

.vf-banner,
.vf-banner-copy{
    background:#FBF3F0 !important;
}

.vf-banner-copy{
    color:#303837;
}

.vf-banner-copy small,
.vf-eyebrow{
    color:#303837 !important;
    opacity:.62;

    font-size:11px;
    font-weight:700;
    letter-spacing:.22em;
}

.vf-banner-copy h1{
    color:#303837 !important;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(46px,4.5vw,72px);

    font-weight:400;
    line-height:.98;
    letter-spacing:-.035em;
}

.vf-banner-copy p{
    color:#303837 !important;
    opacity:.72;

    line-height:1.7;
}


/* ------------------------------------------------------------------------
   BOTOES
   ------------------------------------------------------------------------ */

.vf-primary,
.vf-card-actions button{
    background:#C7E6E0 !important;
    color:#303837 !important;

    border:
        1px solid
        rgba(48,56,55,.16) !important;

    border-radius:999px;

    box-shadow:none;

    font-weight:700;
}

.vf-primary:hover,
.vf-card-actions button:hover{
    background:#FBF3F0 !important;
    color:#303837 !important;

    border-color:
        rgba(48,56,55,.30) !important;
}

.vf-banner-copy .vf-primary{
    width:max-content;
    min-width:228px;
    max-width:100%;

    padding-left:30px;
    padding-right:30px;
}


/* ------------------------------------------------------------------------
   SECOES
   ------------------------------------------------------------------------ */

main,
.vf-home-section,
.vf-catalog-page,
.vf-product-page,
.vf-cart-page{
    background:#FBF3F0;
}

.vf-home-section h2,
.vf-catalog-head h1,
.vf-product-details h1,
.vf-cart-page h1{
    color:#303837;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-weight:400;
}

.vf-title-row{
    border-color:
        rgba(48,56,55,.12);
}

.vf-title-row a{
    color:#303837;
    opacity:.65;
}


/* ------------------------------------------------------------------------
   CARDS DE PRODUTO
   ------------------------------------------------------------------------ */

.vf-card{
    background:#FBF3F0;

    border:
        1px solid
        rgba(48,56,55,.11);

    border-radius:14px;

    box-shadow:none;

    text-align:left;

    transition:
        transform .22s ease,
        border-color .22s ease,
        box-shadow .22s ease;
}

.vf-card:hover{
    transform:translateY(-3px);

    border-color:
        rgba(48,56,55,.22);

    box-shadow:
        0 14px 30px
        rgba(48,56,55,.08);
}

.vf-card-photo{
    background:#C7E6E0;

    border-bottom:
        1px solid
        rgba(48,56,55,.09);
}

.vf-card-info{
    padding:17px 15px 13px;
}

.vf-card-info h3,
.vf-card-info strong{
    color:#303837;
}

.vf-card-info h3{
    font-weight:500;
}

.vf-card-actions{
    padding:0 15px 17px;
}

.vf-card-actions select{
    background:#FBF3F0;
    color:#303837;

    border:
        1px solid
        rgba(48,56,55,.16);

    border-radius:8px;
}


/* ------------------------------------------------------------------------
   PROMO / BLOCOS INSTITUCIONAIS
   ------------------------------------------------------------------------ */

.vf-promo-band{
    background:#C7E6E0 !important;

    border-top:
        1px solid
        rgba(48,56,55,.08);

    border-bottom:
        1px solid
        rgba(48,56,55,.08);
}

.vf-promo-band h2,
.vf-promo-band p{
    color:#303837;
}


/* ------------------------------------------------------------------------
   CATALOGO / FILTROS
   ------------------------------------------------------------------------ */

.vf-sort select,
.vf-price-range input,
.vf-product-details select,
.vf-product-details input[type=number],
.vf-mobile-filter-button,
.vf-filters button{
    background:#FBF3F0;
    color:#303837;

    border-color:
        rgba(48,56,55,.17);
}

.vf-filters fieldset{
    border-color:
        rgba(48,56,55,.13);
}

.vf-filters input[type=radio]{
    border-color:#C7E6E0;
}

.vf-filters input[type=radio]:checked{
    background:#C7E6E0;

    box-shadow:
        inset 0 0 0 4px
        #FBF3F0;
}


/* ------------------------------------------------------------------------
   PRODUTO
   ------------------------------------------------------------------------ */

.vf-product-main-image{
    background:#FBF3F0;

    border-color:
        rgba(48,56,55,.12);
}

.vf-product-price,
.vf-product-details h1{
    color:#303837;
}

.vf-product-note,
.vf-product-description{
    border-color:
        rgba(48,56,55,.12);
}


/* ------------------------------------------------------------------------
   CARRINHO LATERAL
   ------------------------------------------------------------------------ */

.vf-drawer{
    background:#FBF3F0;
}

.vf-drawer-heading{
    background:#C7E6E0 !important;
    color:#303837 !important;
}

.vf-drawer-heading button{
    color:#303837 !important;

    border-color:
        rgba(48,56,55,.28) !important;
}

.vf-drawer-line,
.vf-drawer-cep,
.vf-drawer-summary .vf-drawer-total{
    border-color:
        rgba(48,56,55,.12);
}

.vf-drawer-cep button{
    background:#C7E6E0;
    color:#303837;

    border-color:
        rgba(48,56,55,.15);
}


/* ------------------------------------------------------------------------
   CARRINHO / RESUMOS
   ------------------------------------------------------------------------ */

.vf-cart-summary{
    background:#FBF3F0;

    border-color:
        rgba(48,56,55,.13);
}


/* ------------------------------------------------------------------------
   RODAPE
   ------------------------------------------------------------------------ */

.vf-footer{
    background:#C7E6E0 !important;
    color:#303837 !important;

    border-top:
        1px solid
        rgba(48,56,55,.08);
}

.vf-footer h3,
.vf-footer p,
.vf-footer a{
    color:#303837 !important;
}

.vf-footer a:hover{
    opacity:.62;
}

.vf-footer-bottom{
    color:#303837 !important;

    border-color:
        rgba(48,56,55,.12) !important;
}


/* ------------------------------------------------------------------------
   WHATSAPP ATIVO DA LOJA
   ------------------------------------------------------------------------ */

/*
   O WhatsApp antigo adicionado em includes/rodape.php
   fica desativado para evitar duplicidade.
*/
.vf-whatsapp-float{
    display:none !important;
}

.vf-whatsapp-active{
    position:fixed;

    right:22px;
    bottom:22px;

    z-index:99999;

    display:flex;
    align-items:center;
    justify-content:center;

    gap:10px;

    min-height:58px;

    padding:
        8px 18px
        8px 8px;

    background:#C7E6E0;

    color:#303837 !important;

    border:
        2px solid
        #FBF3F0;

    border-radius:999px;

    text-decoration:none !important;

    font-size:13px;
    font-weight:700;

    box-shadow:
        0 10px 28px
        rgba(48,56,55,.18);

    transition:
        transform .18s ease,
        box-shadow .18s ease;
}

.vf-whatsapp-active:hover{
    transform:translateY(-2px);

    box-shadow:
        0 14px 34px
        rgba(48,56,55,.22);
}

.vf-whatsapp-active__icon{
    width:42px;
    height:42px;

    flex:0 0 42px;

    display:grid;
    place-items:center;

    background:#FBF3F0;

    border-radius:50%;
}

.vf-whatsapp-active__icon img{
    display:block;

    width:28px;
    height:28px;

    object-fit:contain;
}

.vf-whatsapp-active__text{
    white-space:nowrap;
}


/* ------------------------------------------------------------------------
   DESKTOP - HEADER REFINADO
   ------------------------------------------------------------------------ */

@media(min-width:1001px){

    .vf-header-main{
        min-height:112px;

        grid-template-columns:
            118px
            minmax(0,1fr)
            255px;

        gap:26px;
    }

    .vf-brand{
        display:flex;
        align-items:center;
        justify-content:flex-start;
    }

    .vf-brand img{
        width:94px;
        height:94px;

        object-fit:contain;
    }

    .vf-site-search{
        width:92%;
        max-width:720px;
        height:44px;

        margin-left:auto;
        margin-right:auto;
    }

    .vf-main-nav .vf-width{
        gap:28px;
    }

    .vf-main-nav a,
    .vf-nav-account{
        padding-top:12px;
        padding-bottom:12px;

        font-size:13px;
        letter-spacing:.055em;
    }

}


/* ------------------------------------------------------------------------
   TABLET
   ------------------------------------------------------------------------ */

@media(min-width:721px) and (max-width:1000px){

    .vf-header-main{
        min-height:106px;

        grid-template-columns:
            96px
            minmax(0,1fr)
            190px;

        gap:16px;
    }

    .vf-brand img{
        width:82px;
        height:82px;
    }

    .vf-site-search{
        width:94%;
        max-width:620px;
        height:44px;
    }

}


/* ------------------------------------------------------------------------
   MOBILE
   ------------------------------------------------------------------------ */

@media(max-width:720px){

    .vf-header,
    .vf-header-main{
        background:#C7E6E0 !important;
    }

    .vf-main-nav{
        background:#FBF3F0 !important;
    }

    .vf-main-nav a,
    .vf-nav-account{
        color:#303837 !important;

        border-bottom:
            1px solid
            rgba(48,56,55,.10);
    }

    .vf-menu-toggle{
        color:#303837 !important;
    }

    .vf-site-search{
        background:#FBF3F0 !important;
    }

    .vf-banner-copy{
        background:#FBF3F0 !important;
    }

    .vf-banner-copy .vf-primary{
        width:100%;
        max-width:360px;
    }

    .vf-product-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr));

        gap:14px 10px;
    }

    .vf-card{
        border-radius:11px;
    }

    .vf-card-info{
        padding:12px 9px 10px;
    }

    .vf-card-info h3{
        font-size:12px;
        line-height:1.35;
    }

    .vf-card-info strong{
        font-size:16px;
    }

    .vf-card-actions{
        padding:0 9px 12px;
    }

    .vf-whatsapp-active{
        right:15px;
        bottom:15px;

        width:58px;
        height:58px;
        min-height:58px;

        padding:7px;
    }

    .vf-whatsapp-active__text{
        position:absolute;

        width:1px;
        height:1px;

        padding:0;
        margin:-1px;

        overflow:hidden;

        clip:rect(0,0,0,0);

        white-space:nowrap;

        border:0;
    }

}


/* ------------------------------------------------------------------------
   MOBILE ESTREITO
   ------------------------------------------------------------------------ */

@media(max-width:380px){

    .vf-product-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr));

        gap:10px 8px;
    }

    .vf-card-actions form{
        display:block;
    }

    .vf-card-actions select{
        width:100%;
        margin-bottom:5px;
    }

    .vf-card-actions button{
        width:100%;
    }

}

/* ========================================================================
   VIVA_PREMIUM_SCALE_V3
   Escala premium sem alterar a paleta oficial.
   ======================================================================== */

.vf-home-section{
    margin-left:auto;
    margin-right:auto;
}

.vf-home-section h2{
    margin-bottom:28px;
    color:#303837;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:36px;
    font-weight:400;
    line-height:1.08;
}

.vf-title-row{
    margin-bottom:28px;
}

.vf-title-row a{
    font-size:13px;
}


/* CARD */

.vf-card-info h3{
    font-size:15px;
    line-height:1.42;
}

.vf-card-info strong{
    font-size:21px;
    line-height:1.2;
}

.vf-card-actions select{
    min-height:42px;
    padding:8px 10px;
    font-size:13px;
}

.vf-card-actions button,
.vf-card-actions a{
    min-height:42px;
    padding:10px 18px;
    font-size:11px;
}


/* FOOTER */

.vf-footer{
    padding-top:54px;
    padding-bottom:24px;
}

.vf-footer-grid{
    gap:42px;
}

.vf-footer h3{
    margin-bottom:16px;
    font-size:16px;
    line-height:1.3;
}

.vf-footer a,
.vf-footer p{
    margin-bottom:10px;
    font-size:14px;
    line-height:1.5;
}

.vf-footer-bottom{
    margin-top:34px;
    padding-top:20px;
    font-size:13px;
}


/* DESKTOP */

@media(min-width:1001px){

    .vf-home-section{
        width:min(84vw,1440px);

        padding-top:68px;
        padding-bottom:68px;
    }

    .vf-product-grid{
        grid-template-columns:
            repeat(4,minmax(0,1fr));

        gap:32px 26px;
    }

    .vf-card-photo{
        aspect-ratio:4/5;
    }

    .vf-card-info{
        min-height:112px;
        padding:20px 18px 15px;
    }

    .vf-card-actions{
        padding:0 18px 20px;
    }


    /* HEADER / LOGO */

    .vf-header-main{
        grid-template-columns:
            150px
            minmax(0,1fr)
            255px;
    }

    .vf-brand{
        width:136px;
        height:84px;

        overflow:hidden;

        display:flex;
        align-items:center;
        justify-content:center;
    }

    .vf-brand img{
        width:132px;
        height:80px;

        object-fit:contain;
    }


    /* FOOTER */

    .vf-footer .vf-width{
        width:min(84vw,1440px);
    }

}


/* TABLET */

@media(min-width:721px) and (max-width:1000px){

    .vf-home-section{
        width:min(
            calc(100% - 48px),
            940px
        );

        padding-top:54px;
        padding-bottom:54px;
    }

    .vf-product-grid{
        grid-template-columns:
            repeat(3,minmax(0,1fr));

        gap:24px 18px;
    }

    .vf-card-info h3{
        font-size:14px;
    }

    .vf-card-info strong{
        font-size:19px;
    }

    .vf-brand{
        width:108px;
        height:70px;

        overflow:hidden;

        display:flex;
        align-items:center;
        justify-content:center;
    }

    .vf-brand img{
        width:104px;
        height:66px;
        object-fit:contain;
    }

}


/* MOBILE */

@media(max-width:720px){

    .vf-home-section{
        width:min(
            calc(100% - 28px),
            1390px
        );

        padding-top:42px;
        padding-bottom:42px;
    }

    .vf-home-section h2{
        margin-bottom:20px;
        font-size:28px;
    }

    .vf-product-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr));

        gap:14px 10px;
    }

    .vf-card-info{
        min-height:94px;
        padding:12px 10px 10px;
    }

    .vf-card-info h3{
        font-size:12.5px;
        line-height:1.35;
    }

    .vf-card-info strong{
        font-size:17px;
    }

    .vf-card-actions{
        padding:0 9px 12px;
    }

    .vf-card-actions select{
        min-height:36px;
        padding:6px 5px;
        font-size:10.5px;
    }

    .vf-card-actions button,
    .vf-card-actions a{
        min-height:36px;
        padding:7px 10px;
        font-size:9.5px;
    }

    .vf-brand{
        width:90px;
        height:58px;

        overflow:hidden;

        display:flex;
        align-items:center;
        justify-content:center;
    }

    .vf-brand img{
        width:86px;
        height:54px;
        object-fit:contain;
    }

    .vf-footer{
        padding-top:42px;
    }

    .vf-footer h3{
        font-size:15px;
    }

    .vf-footer a,
    .vf-footer p{
        font-size:13px;
    }

}


@media(max-width:380px){

    .vf-product-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr));

        gap:10px 8px;
    }

    .vf-card-info h3{
        font-size:12px;
    }

    .vf-card-info strong{
        font-size:16px;
    }

}

/* ========================================================================
   VIVA_LOGO_CONTRAST_V4
   Refina a presença da logo no header sem sair da paleta oficial.
   ======================================================================== */

.vf-brand{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;

    padding:8px;
    border-radius:18px;

    background:
        linear-gradient(
            180deg,
            rgba(251,243,240,.58) 0%,
            rgba(251,243,240,.34) 100%
        );

    border:1px solid rgba(48,56,55,.10);

    box-shadow:
        0 10px 26px rgba(48,56,55,.08),
        inset 0 1px 0 rgba(255,255,255,.45);

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease;
}

.vf-brand:hover{
    transform:translateY(-1px);

    box-shadow:
        0 14px 30px rgba(48,56,55,.10),
        inset 0 1px 0 rgba(255,255,255,.52);
}

.vf-brand img{
    display:block;
    border-radius:14px;

    filter:drop-shadow(0 6px 14px rgba(48,56,55,.08));
}


/* DESKTOP */
@media(min-width:1001px){

    .vf-header-main{
        grid-template-columns:
            164px
            minmax(0,1fr)
            255px;
    }

    .vf-brand{
        width:146px;
        height:92px;
    }

    .vf-brand img{
        width:136px;
        height:84px;
        object-fit:contain;
    }
}


/* TABLET */
@media(min-width:721px) and (max-width:1000px){

    .vf-brand{
        width:128px;
        height:82px;
        padding:7px;
    }

    .vf-brand img{
        width:118px;
        height:72px;
        object-fit:contain;
    }
}


/* MOBILE */
@media(max-width:720px){

    .vf-brand{
        width:110px;
        height:72px;
        padding:6px;
        border-radius:14px;
    }

    .vf-brand img{
        width:100px;
        height:62px;
        object-fit:contain;
    }
}

/* ========================================================================
   VIVA_PRODUCT_CARDS_PREMIUM_V4

   Refinamento editorial da vitrine:
   - fotografia protagonista
   - menos aparencia de formulario
   - hierarquia melhor entre nome / preco / variacoes
   - CTA Comprar mais presente
   - paleta oficial preservada
   ======================================================================== */


/* ------------------------------------------------------------------------
   GRID
   ------------------------------------------------------------------------ */

.vf-product-grid{
    align-items:stretch;
}


/* ------------------------------------------------------------------------
   CARD
   ------------------------------------------------------------------------ */

.vf-card{
    position:relative;

    display:flex;
    flex-direction:column;

    overflow:hidden;

    background:#FBF3F0;

    border:
        1px solid
        rgba(48,56,55,.09);

    border-radius:18px;

    box-shadow:
        0 3px 14px
        rgba(48,56,55,.035);

    transition:
        transform .24s ease,
        box-shadow .24s ease,
        border-color .24s ease;
}

.vf-card:hover{
    transform:translateY(-4px);

    border-color:
        rgba(48,56,55,.16);

    box-shadow:
        0 18px 38px
        rgba(48,56,55,.09);
}


/* ------------------------------------------------------------------------
   FOTO
   ------------------------------------------------------------------------ */

.vf-card-photo{
    position:relative;

    overflow:hidden;

    background:#FBF3F0;

    border-bottom:
        1px solid
        rgba(48,56,55,.07);
}

.vf-card-photo img{
    display:block;

    width:100%;

    transition:
        transform .42s ease,
        filter .32s ease;
}

.vf-card:hover .vf-card-photo img{
    transform:scale(1.012);

    filter:
        saturate(1.015)
        contrast(1.01);
}


/* ------------------------------------------------------------------------
   INFORMACOES
   ------------------------------------------------------------------------ */

.vf-card-info{
    flex:1;

    display:flex;
    flex-direction:column;
    justify-content:flex-start;

    min-height:118px;

    padding:
        20px 18px
        15px;
}

.vf-card-info h3{
    min-height:42px;

    margin:
        0
        0
        14px;

    color:#303837;

    font-size:14px;
    font-weight:500;
    line-height:1.45;

    letter-spacing:-.01em;
}

.vf-card-info strong{
    display:block;

    margin-top:auto;

    color:#303837;

    font-size:21px;
    font-weight:700;
    line-height:1.1;

    letter-spacing:-.025em;
}


/* ------------------------------------------------------------------------
   AREA DE COMPRA
   ------------------------------------------------------------------------ */

.vf-card-actions{
    padding:
        0
        18px
        20px;
}

.vf-card-actions form{
    width:100%;

    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        minmax(0,1fr);

    gap:8px;
}

.vf-card-actions select{
    width:100%;

    min-width:0;
    height:42px;

    padding:
        0
        34px
        0
        12px;

    background:#FBF3F0;

    color:#303837;

    border:
        1px solid
        rgba(48,56,55,.14);

    border-radius:10px;

    font-size:12px;
    font-weight:400;

    box-shadow:none;

    cursor:pointer;

    transition:
        border-color .18s ease,
        background .18s ease,
        box-shadow .18s ease;
}

.vf-card-actions select:hover{
    border-color:
        rgba(48,56,55,.24);
}

.vf-card-actions select:focus{
    outline:none;

    border-color:
        rgba(48,56,55,.30);

    box-shadow:
        0 0 0 3px
        rgba(199,230,224,.55);
}


/* ------------------------------------------------------------------------
   BOTAO COMPRAR
   ------------------------------------------------------------------------ */

.vf-card-actions form button{
    grid-column:1 / -1;

    width:100%;

    min-height:44px;

    margin-top:3px;

    padding:
        10px
        18px;

    background:#C7E6E0 !important;

    color:#303837 !important;

    border:
        1px solid
        rgba(48,56,55,.14) !important;

    border-radius:999px;

    font-size:11px;
    font-weight:700;

    letter-spacing:.12em;

    text-transform:uppercase;

    box-shadow:none;

    transition:
        transform .18s ease,
        background .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}

.vf-card-actions form button:hover{
    transform:translateY(-1px);

    background:#FBF3F0 !important;

    border-color:
        rgba(48,56,55,.28) !important;

    box-shadow:
        0 8px 20px
        rgba(48,56,55,.08);
}


/* ------------------------------------------------------------------------
   DESKTOP
   ------------------------------------------------------------------------ */

@media(min-width:1001px){

    .vf-product-grid{
        gap:
            34px
            24px;
    }

    .vf-card-info{
        min-height:122px;

        padding:
            20px
            18px
            15px;
    }

    .vf-card-info h3{
        font-size:14px;
    }

    .vf-card-info strong{
        font-size:21px;
    }

}


/* ------------------------------------------------------------------------
   TABLET
   ------------------------------------------------------------------------ */

@media(min-width:721px) and (max-width:1000px){

    .vf-card{
        border-radius:16px;
    }

    .vf-card-info{
        min-height:112px;

        padding:
            17px
            14px
            13px;
    }

    .vf-card-info h3{
        min-height:40px;

        margin-bottom:12px;

        font-size:13.5px;
    }

    .vf-card-info strong{
        font-size:19px;
    }

    .vf-card-actions{
        padding:
            0
            14px
            16px;
    }

    .vf-card-actions select{
        height:40px;

        padding-left:10px;

        font-size:11px;
    }

    .vf-card-actions form button{
        min-height:42px;
    }

}


/* ------------------------------------------------------------------------
   MOBILE
   Mantem dois produtos por linha.
   ------------------------------------------------------------------------ */

@media(max-width:720px){

    .vf-card{
        border-radius:13px;

        box-shadow:
            0 2px 8px
            rgba(48,56,55,.03);
    }

    .vf-card:hover{
        transform:none;
    }

    .vf-card-info{
        min-height:98px;

        padding:
            12px
            10px
            10px;
    }

    .vf-card-info h3{
        min-height:34px;

        margin-bottom:9px;

        font-size:12px;
        line-height:1.35;
    }

    .vf-card-info strong{
        font-size:16.5px;
    }

    .vf-card-actions{
        padding:
            0
            9px
            11px;
    }

    .vf-card-actions form{
        grid-template-columns:
            minmax(0,1fr)
            minmax(0,1fr);

        gap:5px;
    }

    .vf-card-actions select{
        height:35px;

        padding:
            0
            24px
            0
            7px;

        border-radius:8px;

        font-size:10px;
    }

    .vf-card-actions form button{
        min-height:36px;

        margin-top:1px;

        padding:
            7px
            8px;

        font-size:9px;

        letter-spacing:.08em;
    }

}


/* ------------------------------------------------------------------------
   MOBILE ESTREITO
   ------------------------------------------------------------------------ */

@media(max-width:380px){

    .vf-card-info{
        min-height:94px;

        padding:
            11px
            8px
            9px;
    }

    .vf-card-info h3{
        font-size:11.5px;
    }

    .vf-card-info strong{
        font-size:16px;
    }

    .vf-card-actions{
        padding:
            0
            8px
            10px;
    }

    .vf-card-actions form{
        display:grid;

        grid-template-columns:
            minmax(0,1fr)
            minmax(0,1fr);
    }

    .vf-card-actions select{
        width:100%;

        margin:0;

        font-size:9.5px;
    }

    .vf-card-actions form button{
        width:100%;
    }

}

/* ========================================================================
   VIVA_HEADER_FOOTER_REFINEMENT_V6

   HEADER:
   - remove caixa da marca
   - logo transparente diretamente sobre o verde oficial

   FOOTER:
   - remove bloco verde pesado
   - fundo off-white
   - verde usado apenas como assinatura visual
   ======================================================================== */


/* ------------------------------------------------------------------------
   LOGO LIMPA
   ------------------------------------------------------------------------ */

.vf-brand{
    position:relative;

    padding:0 !important;

    background:
        transparent !important;

    border:
        0 !important;

    border-radius:
        0 !important;

    box-shadow:
        none !important;

    overflow:
        visible !important;
}

.vf-brand:hover{
    transform:none !important;

    background:
        transparent !important;

    border:
        0 !important;

    box-shadow:
        none !important;
}

.vf-brand img{
    display:block;

    border-radius:
        0 !important;

    filter:
        none !important;

    box-shadow:
        none !important;
}


/* ------------------------------------------------------------------------
   FOOTER PREMIUM
   ------------------------------------------------------------------------ */

.vf-footer{
    position:relative;

    padding:
        46px
        0
        0 !important;

    background:
        #FBF3F0 !important;

    color:
        #303837 !important;

    border-top:
        0 !important;

    box-shadow:
        none !important;
}

.vf-footer::before{
    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:7px;

    background:#C7E6E0;
}

.vf-footer .vf-width{
    width:min(84vw,1440px);
}

.vf-footer-grid{
    align-items:start;

    gap:
        56px;

    padding:
        4px
        0
        36px;
}


/* TITULOS */

.vf-footer h3{
    position:relative;

    display:inline-block;

    margin:
        0
        0
        18px;

    padding-bottom:
        10px;

    color:
        #303837 !important;

    font-size:
        14px;

    font-weight:
        700;

    line-height:
        1.25;

    letter-spacing:
        .025em;
}

.vf-footer h3::after{
    content:"";

    position:absolute;

    left:0;
    bottom:0;

    width:34px;
    height:3px;

    border-radius:
        999px;

    background:
        #C7E6E0;
}


/* LINKS / TEXTOS */

.vf-footer p,
.vf-footer a{
    color:
        #303837 !important;

    font-size:
        13px;

    line-height:
        1.55;
}

.vf-footer a{
    text-decoration:
        none;

    transition:
        opacity .16s ease;
}

.vf-footer a:hover{
    color:
        #303837 !important;

    opacity:.58;
}


/* RODAPE INFERIOR */

.vf-footer-bottom{
    margin-top:
        0 !important;

    padding:
        18px
        0
        20px !important;

    color:
        rgba(48,56,55,.72) !important;

    border-top:
        1px solid
        rgba(48,56,55,.10) !important;

    font-size:
        12px;

    line-height:
        1.45;
}


/* ------------------------------------------------------------------------
   DESKTOP
   ------------------------------------------------------------------------ */

@media(min-width:1001px){

    .vf-brand{
        width:146px;
        height:92px;
    }

    .vf-brand img{
        width:142px;
        height:88px;

        object-fit:
            contain;
    }

}


/* ------------------------------------------------------------------------
   TABLET
   ------------------------------------------------------------------------ */

@media(min-width:721px) and (max-width:1000px){

    .vf-brand{
        width:124px;
        height:78px;
    }

    .vf-brand img{
        width:120px;
        height:74px;

        object-fit:
            contain;
    }

    .vf-footer-grid{
        gap:
            34px;
    }

}


/* ------------------------------------------------------------------------
   MOBILE
   ------------------------------------------------------------------------ */

@media(max-width:720px){

    .vf-brand{
        width:98px;
        height:64px;
    }

    .vf-brand img{
        width:94px;
        height:60px;

        object-fit:
            contain;
    }

    .vf-footer{
        padding-top:
            38px !important;
    }

    .vf-footer::before{
        height:
            5px;
    }

    .vf-footer-grid{
        gap:
            28px 22px;

        padding-bottom:
            28px;
    }

    .vf-footer h3{
        margin-bottom:
            14px;

        font-size:
            13px;
    }

    .vf-footer p,
    .vf-footer a{
        font-size:
            12px;
    }

    .vf-footer-bottom{
        padding:
            16px
            0
            18px !important;

        font-size:
            11px;
    }

}

/* ========================================================================
   VIVA_PRODUCT_PAGE_PREMIUM_V7

   Pagina individual:
   - fotografia protagonista
   - painel de compra editorial
   - formulario refinado
   - hierarquia premium
   - paleta oficial Viva
   ======================================================================== */


/* ------------------------------------------------------------------------
   PAGINA / BREADCRUMB
   ------------------------------------------------------------------------ */

.vf-page > main.vf-width{
    width:min(84vw,1440px);
}

.vf-breadcrumb{
    margin:
        30px
        0
        24px;

    color:
        rgba(48,56,55,.54);

    font-size:
        12px;

    line-height:
        1.5;
}

.vf-breadcrumb a{
    color:#303837;

    text-decoration:none;

    opacity:.68;
}

.vf-breadcrumb a:hover{
    opacity:1;
}


/* ------------------------------------------------------------------------
   LAYOUT
   ------------------------------------------------------------------------ */

.vf-product-layout{
    display:grid;

    grid-template-columns:
        minmax(0,1.08fr)
        minmax(380px,.92fr);

    align-items:start;

    gap:
        clamp(44px,5vw,82px);

    padding:
        8px
        0
        88px;
}


/* ------------------------------------------------------------------------
   IMAGEM PRINCIPAL
   ------------------------------------------------------------------------ */

.vf-product-main-image{
    overflow:hidden;

    background:#FBF3F0;

    border:
        1px solid
        rgba(48,56,55,.09);

    border-radius:20px;

    box-shadow:
        0 6px 24px
        rgba(48,56,55,.045);
}

.vf-product-main-image img,
.vf-product-main-image video{
    display:block;

    width:100%;

    height:
        min(70vw,720px);

    object-fit:contain;

    background:#FBF3F0;
}


/* ------------------------------------------------------------------------
   MINIATURAS
   ------------------------------------------------------------------------ */

.vf-thumbnails{
    display:flex;
    flex-wrap:wrap;

    gap:10px;

    margin-top:14px;
}

.vf-thumbnails button{
    position:relative;

    overflow:hidden;

    width:82px;
    height:94px;

    padding:0;

    background:#FBF3F0;

    color:#303837;

    border:
        1px solid
        rgba(48,56,55,.12);

    border-radius:11px;

    cursor:pointer;

    transition:
        transform .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}

.vf-thumbnails button:hover{
    transform:translateY(-2px);

    border-color:
        rgba(48,56,55,.28);

    box-shadow:
        0 8px 18px
        rgba(48,56,55,.07);
}

.vf-thumbnails img{
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;
}

.vf-thumbnails button[data-video]{
    display:grid;
    place-items:center;

    padding:8px;

    font-size:11px;
    font-weight:700;

    letter-spacing:.03em;
}


/* ------------------------------------------------------------------------
   PAINEL DE INFORMACOES
   ------------------------------------------------------------------------ */

.vf-product-details{
    position:sticky;

    top:24px;

    padding:
        8px
        0
        0;
}

.vf-product-details .vf-eyebrow{
    margin-bottom:10px;

    color:#303837 !important;

    opacity:.55;

    font-size:10px;
    font-weight:700;

    letter-spacing:.22em;

    text-transform:uppercase;
}

.vf-product-details h1{
    max-width:620px;

    margin:
        0
        0
        18px;

    color:#303837;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(34px,3vw,48px);

    font-weight:400;

    line-height:1.08;

    letter-spacing:-.035em;
}

.vf-product-price{
    margin:
        0
        0
        30px;

    color:#303837;

    font-size:
        30px;

    font-weight:700;

    line-height:1.1;

    letter-spacing:-.025em;
}


/* ------------------------------------------------------------------------
   FORMULARIO
   ------------------------------------------------------------------------ */

#vf-product-form{
    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        minmax(0,1fr);

    gap:
        10px
        12px;

    max-width:560px;

    padding:
        26px;

    background:
        rgba(251,243,240,.72);

    border:
        1px solid
        rgba(48,56,55,.10);

    border-radius:18px;

    box-shadow:
        0 10px 28px
        rgba(48,56,55,.045);
}

#vf-product-form label{
    margin:
        0
        0
        -3px;

    color:#303837;

    font-size:11px;

    font-weight:700;

    letter-spacing:.055em;

    text-transform:uppercase;
}

#vf-product-form label[for="vf-color"]{
    grid-column:1;
}

#vf-color{
    grid-column:1;
}

#vf-product-form label[for="vf-size"]{
    grid-column:2;
    grid-row:1;
}

#vf-size{
    grid-column:2;
    grid-row:2;
}

#vf-product-form label[for="vf-quantity"]{
    grid-column:1 / -1;

    margin-top:5px;
}

#vf-quantity{
    grid-column:1 / -1;
}


/* ------------------------------------------------------------------------
   CAMPOS
   ------------------------------------------------------------------------ */

.vf-product-details select,
.vf-product-details input[type=number]{
    width:100%;

    max-width:none;

    height:46px;

    padding:
        0
        13px;

    background:#FBF3F0;

    color:#303837;

    border:
        1px solid
        rgba(48,56,55,.14);

    border-radius:10px;

    font-size:13px;

    box-shadow:none;

    transition:
        border-color .18s ease,
        box-shadow .18s ease;
}

.vf-product-details select:focus,
.vf-product-details input[type=number]:focus{
    outline:none;

    border-color:
        rgba(48,56,55,.32);

    box-shadow:
        0 0 0 3px
        rgba(199,230,224,.50);
}


/* ------------------------------------------------------------------------
   CTA
   ------------------------------------------------------------------------ */

.vf-product-details .vf-primary{
    grid-column:1 / -1;

    width:100%;

    max-width:none;

    min-height:50px;

    margin-top:10px;

    padding:
        12px
        24px;

    background:#C7E6E0 !important;

    color:#303837 !important;

    border:
        1px solid
        rgba(48,56,55,.14) !important;

    border-radius:999px;

    font-size:11px;

    font-weight:700;

    letter-spacing:.13em;

    text-transform:uppercase;

    transition:
        transform .18s ease,
        background .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}

.vf-product-details .vf-primary:hover{
    transform:translateY(-1px);

    background:#FBF3F0 !important;

    border-color:
        rgba(48,56,55,.28) !important;

    box-shadow:
        0 9px 22px
        rgba(48,56,55,.08);
}


/* ------------------------------------------------------------------------
   ERROS
   ------------------------------------------------------------------------ */

.vf-product-details .vf-cart-error{
    max-width:560px;

    margin:
        0
        0
        16px;

    padding:
        12px
        14px;

    background:
        rgba(174,41,41,.06);

    color:#8D2424;

    border:
        1px solid
        rgba(174,41,41,.14);

    border-radius:10px;

    font-size:12px;

    line-height:1.45;
}


/* ------------------------------------------------------------------------
   INFORMACOES DE ENTREGA / PAGAMENTO
   ------------------------------------------------------------------------ */

.vf-product-note{
    max-width:560px;

    margin-top:22px;

    padding:
        18px
        0;

    color:
        rgba(48,56,55,.68);

    border-top:
        1px solid
        rgba(48,56,55,.10);

    border-bottom:
        1px solid
        rgba(48,56,55,.10);

    font-size:12.5px;

    line-height:1.7;
}


/* ------------------------------------------------------------------------
   DESCRICAO
   ------------------------------------------------------------------------ */

.vf-product-description{
    max-width:560px;

    margin-top:26px;

    padding:
        0;

    color:
        rgba(48,56,55,.76);

    border-top:0;

    font-size:13px;

    line-height:1.75;

    white-space:pre-line;
}

.vf-product-description h2{
    position:relative;

    margin:
        0
        0
        17px;

    padding-bottom:11px;

    color:#303837;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:23px;

    font-weight:400;
}

.vf-product-description h2::after{
    content:"";

    position:absolute;

    left:0;
    bottom:0;

    width:38px;
    height:3px;

    background:#C7E6E0;

    border-radius:999px;
}


/* ------------------------------------------------------------------------
   TABLET
   ------------------------------------------------------------------------ */

@media(min-width:721px) and (max-width:1000px){

    .vf-page > main.vf-width{
        width:min(
            calc(100% - 48px),
            940px
        );
    }

    .vf-product-layout{
        grid-template-columns:
            minmax(0,1fr)
            minmax(330px,.9fr);

        gap:34px;
    }

    .vf-product-main-image img,
    .vf-product-main-image video{
        height:min(68vw,600px);
    }

    .vf-product-details{
        position:static;
    }

    .vf-product-details h1{
        font-size:34px;
    }

    #vf-product-form{
        padding:20px;
    }

}


/* ------------------------------------------------------------------------
   MOBILE
   ------------------------------------------------------------------------ */

@media(max-width:720px){

    .vf-page > main.vf-width{
        width:min(
            calc(100% - 28px),
            1390px
        );
    }

    .vf-breadcrumb{
        margin:
            20px
            0
            18px;

        font-size:11px;
    }

    .vf-product-layout{
        display:block;

        padding:
            0
            0
            56px;
    }

    .vf-product-main-image{
        border-radius:14px;
    }

    .vf-product-main-image img,
    .vf-product-main-image video{
        height:min(116vw,520px);
    }

    .vf-thumbnails{
        gap:7px;

        margin-top:10px;
    }

    .vf-thumbnails button{
        width:66px;
        height:76px;

        border-radius:8px;
    }

    .vf-product-details{
        position:static;

        margin-top:30px;

        padding:0;
    }

    .vf-product-details h1{
        margin-bottom:14px;

        font-size:
            clamp(29px,9vw,38px);
    }

    .vf-product-price{
        margin-bottom:24px;

        font-size:25px;
    }

    #vf-product-form{
        grid-template-columns:
            minmax(0,1fr)
            minmax(0,1fr);

        gap:8px;

        max-width:none;

        padding:
            18px
            14px;

        border-radius:14px;
    }

    #vf-product-form label{
        font-size:10px;
    }

    .vf-product-details select,
    .vf-product-details input[type=number]{
        height:43px;

        padding:
            0
            9px;

        font-size:12px;
    }

    .vf-product-details .vf-primary{
        min-height:47px;

        margin-top:8px;

        font-size:10px;
    }

    .vf-product-note,
    .vf-product-description{
        max-width:none;
    }

}


/* ------------------------------------------------------------------------
   MOBILE ESTREITO
   ------------------------------------------------------------------------ */

@media(max-width:380px){

    #vf-product-form{
        display:block;
    }

    #vf-product-form label{
        display:block;

        margin:
            13px
            0
            6px;
    }

    #vf-product-form label:first-of-type{
        margin-top:0;
    }

    .vf-product-details select,
    .vf-product-details input[type=number]{
        display:block;

        width:100%;

        margin:0;
    }

    .vf-product-details .vf-primary{
        display:block;

        width:100%;

        margin-top:18px;
    }

}

/* ========================================================================
   VIVA_PRODUCT_PAGE_REFINEMENT_V7_1

   Refinamento visual da pagina individual:
   - galeria em proporcao vertical mais adequada
   - menos area vazia
   - titulo mais equilibrado
   - formulario visualmente mais leve
   - descricao mais confortavel
   ======================================================================== */


/* ------------------------------------------------------------------------
   LAYOUT DESKTOP
   ------------------------------------------------------------------------ */

@media(min-width:1001px){

    .vf-product-layout{
        grid-template-columns:
            minmax(460px,.92fr)
            minmax(430px,1.08fr);

        gap:
            clamp(50px,5vw,78px);
    }

    /*
       Limita a coluna de fotografia para a imagem vertical
       nao ficar perdida dentro de uma caixa muito larga.
    */

    .vf-product-layout > div:first-child{
        width:100%;

        max-width:620px;

        justify-self:center;
    }

}


/* ------------------------------------------------------------------------
   IMAGEM PRINCIPAL
   ------------------------------------------------------------------------ */

.vf-product-main-image{
    width:100%;

    aspect-ratio:4 / 5;

    display:flex;
    align-items:center;
    justify-content:center;

    background:#FBF3F0;

    border:
        1px solid
        rgba(48,56,55,.085);

    border-radius:18px;

    box-shadow:
        0 5px 18px
        rgba(48,56,55,.035);
}

.vf-product-main-image img,
.vf-product-main-image video{
    width:100%;

    height:100%;

    object-fit:contain;

    object-position:center;

    background:#FBF3F0;
}


/* ------------------------------------------------------------------------
   MINIATURAS
   ------------------------------------------------------------------------ */

.vf-thumbnails{
    justify-content:flex-start;

    margin-top:12px;
}

.vf-thumbnails button{
    width:76px;
    height:88px;

    border-radius:9px;

    background:#FBF3F0;

    border:
        1px solid
        rgba(48,56,55,.11);
}


/* ------------------------------------------------------------------------
   TITULO / PRECO
   ------------------------------------------------------------------------ */

.vf-product-details h1{
    max-width:590px;

    margin-bottom:16px;

    font-size:
        clamp(32px,2.65vw,44px);

    line-height:1.06;

    letter-spacing:-.032em;
}

.vf-product-price{
    margin-bottom:27px;

    font-size:29px;
}


/* ------------------------------------------------------------------------
   FORMULARIO MAIS LEVE
   ------------------------------------------------------------------------ */

#vf-product-form{
    padding:
        22px
        22px
        23px;

    background:
        rgba(251,243,240,.32);

    border:
        1px solid
        rgba(48,56,55,.085);

    border-radius:16px;

    box-shadow:none;
}

#vf-product-form label{
    color:
        rgba(48,56,55,.82);

    font-size:10.5px;
}

.vf-product-details select,
.vf-product-details input[type=number]{
    background:
        rgba(251,243,240,.72);

    border-color:
        rgba(48,56,55,.13);

    border-radius:9px;
}


/* ------------------------------------------------------------------------
   CTA
   ------------------------------------------------------------------------ */

.vf-product-details .vf-primary{
    min-height:50px;

    margin-top:9px;

    font-size:10.5px;

    letter-spacing:.115em;
}


/* ------------------------------------------------------------------------
   NOTA
   ------------------------------------------------------------------------ */

.vf-product-note{
    max-width:590px;

    margin-top:20px;

    padding:
        17px
        0;

    font-size:13px;

    line-height:1.75;
}


/* ------------------------------------------------------------------------
   DESCRICAO
   ------------------------------------------------------------------------ */

.vf-product-description{
    max-width:620px;

    margin-top:27px;

    color:
        rgba(48,56,55,.79);

    font-size:14px;

    line-height:1.82;
}

.vf-product-description h2{
    margin-bottom:18px;

    font-size:24px;
}


/* ------------------------------------------------------------------------
   TABLET
   ------------------------------------------------------------------------ */

@media(min-width:721px) and (max-width:1000px){

    .vf-product-layout{
        grid-template-columns:
            minmax(0,.96fr)
            minmax(330px,1.04fr);

        gap:32px;
    }

    .vf-product-layout > div:first-child{
        max-width:540px;

        margin-left:auto;
        margin-right:auto;
    }

    .vf-product-main-image{
        aspect-ratio:4 / 5;
    }

    .vf-product-main-image img,
    .vf-product-main-image video{
        height:100%;
    }

    .vf-product-details h1{
        font-size:
            clamp(29px,4vw,36px);
    }

}


/* ------------------------------------------------------------------------
   MOBILE
   ------------------------------------------------------------------------ */

@media(max-width:720px){

    .vf-product-layout > div:first-child{
        width:100%;

        max-width:none;
    }

    .vf-product-main-image{
        aspect-ratio:4 / 5;

        border-radius:13px;
    }

    .vf-product-main-image img,
    .vf-product-main-image video{
        width:100%;

        height:100%;

        object-fit:contain;
    }

    .vf-thumbnails button{
        width:64px;
        height:74px;
    }

    .vf-product-details{
        margin-top:28px;
    }

    .vf-product-details h1{
        font-size:
            clamp(28px,8.2vw,36px);

        line-height:1.08;
    }

    .vf-product-price{
        font-size:25px;
    }

    #vf-product-form{
        padding:
            17px
            13px
            18px;

        background:
            rgba(251,243,240,.28);
    }

    .vf-product-description{
        font-size:13.5px;

        line-height:1.78;
    }

}


/* ------------------------------------------------------------------------
   MOBILE ESTREITO
   ------------------------------------------------------------------------ */

@media(max-width:380px){

    .vf-product-details h1{
        font-size:27px;
    }

    .vf-product-main-image{
        aspect-ratio:4 / 5;
    }

}

/* ========================================================================
   VIVA_CART_PREMIUM_V8

   Carrinho completo:
   - pagina carrinho.php
   - drawer lateral
   - imagens e informacoes com hierarquia premium
   - quantidade refinada
   - resumo de compra mais elegante
   - paleta oficial Viva
   ======================================================================== */


/* ========================================================================
   PAGINA CARRINHO
   ======================================================================== */

.vf-cart-page{
    padding-bottom:86px;
}

.vf-cart-page .vf-breadcrumb{
    margin-bottom:22px;
}

.vf-cart-page > h1{
    margin:
        0
        0
        34px;

    color:#303837;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(34px,3vw,44px);

    font-weight:400;

    line-height:1.08;

    letter-spacing:-.03em;
}


/* ------------------------------------------------------------------------
   GRID PRINCIPAL
   ------------------------------------------------------------------------ */

.vf-cart-page-grid{
    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        minmax(320px,370px);

    align-items:start;

    gap:
        clamp(34px,4vw,58px);
}


/* ------------------------------------------------------------------------
   ITEM DO CARRINHO
   ------------------------------------------------------------------------ */

.vf-cart-row{
    display:grid;

    grid-template-columns:
        112px
        minmax(0,1fr)
        auto;

    align-items:start;

    gap:20px;

    margin-bottom:12px;

    padding:18px;

    background:
        rgba(251,243,240,.48);

    border:
        1px solid
        rgba(48,56,55,.09);

    border-radius:16px;

    box-shadow:
        0 4px 14px
        rgba(48,56,55,.025);
}

.vf-cart-row > a{
    display:block;
}

.vf-cart-row img{
    display:block;

    width:112px;
    height:134px;

    object-fit:cover;

    border-radius:11px;

    border:
        1px solid
        rgba(48,56,55,.07);
}


/* NOME */

.vf-cart-row h2{
    margin:
        1px
        0
        7px;

    color:#303837;

    font-size:15px;

    font-weight:600;

    line-height:1.4;
}

.vf-cart-row h2 a:hover{
    opacity:.65;
}


/* VARIANTES */

.vf-cart-row p{
    margin:
        3px
        0;

    color:
        rgba(48,56,55,.66);

    font-size:12.5px;

    line-height:1.45;
}


/* PRECO */

.vf-cart-row > strong{
    padding-top:2px;

    color:#303837;

    font-size:17px;

    font-weight:700;

    line-height:1.25;

    white-space:nowrap;
}


/* ------------------------------------------------------------------------
   QUANTIDADE
   ------------------------------------------------------------------------ */

.vf-cart-row .vf-qty,
.vf-drawer-line .vf-qty{
    display:inline-grid;

    grid-template-columns:
        34px
        34px
        34px;

    align-items:center;

    margin-top:11px;

    overflow:hidden;

    background:#FBF3F0;

    border:
        1px solid
        rgba(48,56,55,.13);

    border-radius:999px;
}

.vf-cart-row .vf-qty button,
.vf-drawer-line .vf-qty button{
    display:grid;

    place-items:center;

    width:34px;
    height:34px;

    padding:0;

    background:
        transparent;

    color:#303837;

    border:0;

    font-size:17px;

    line-height:1;

    transition:
        background .15s ease;
}

.vf-cart-row .vf-qty button:hover,
.vf-drawer-line .vf-qty button:hover{
    background:
        rgba(199,230,224,.58);
}

.vf-cart-row .vf-qty span,
.vf-drawer-line .vf-qty span{
    display:grid;

    place-items:center;

    min-width:34px;

    padding:0;

    color:#303837;

    font-size:12px;

    font-weight:600;
}


/* ------------------------------------------------------------------------
   REMOVER
   ------------------------------------------------------------------------ */

.vf-cart-row form{
    margin-top:0;
}

.vf-cart-row form:not(.vf-qty){
    margin-top:10px;
}

.vf-cart-row button:not(.vf-qty button){
    padding:0;

    background:none;

    color:
        rgba(48,56,55,.57);

    border:0;

    font-size:11px;

    text-decoration:none;

    letter-spacing:.02em;
}

.vf-cart-row button:not(.vf-qty button):hover{
    color:#303837;

    text-decoration:underline;
}


/* ------------------------------------------------------------------------
   ERRO DE ESTOQUE
   ------------------------------------------------------------------------ */

.vf-cart-row .vf-cart-error,
.vf-cart-summary .vf-cart-error{
    margin-top:12px;

    padding:
        10px
        12px;

    background:
        rgba(174,41,41,.055);

    color:#8D2424;

    border:
        1px solid
        rgba(174,41,41,.13);

    border-radius:9px;

    font-size:11.5px;

    line-height:1.45;
}


/* ------------------------------------------------------------------------
   CONTINUAR COMPRANDO
   ------------------------------------------------------------------------ */

.vf-cart-page-grid section > p:last-child{
    margin:
        24px
        0
        0;
}

.vf-cart-page-grid section > p:last-child a{
    display:inline-flex;

    align-items:center;

    gap:6px;

    color:#303837;

    font-size:12.5px;

    font-weight:600;
}

.vf-cart-page-grid section > p:last-child a:hover{
    opacity:.62;
}


/* ------------------------------------------------------------------------
   RESUMO
   ------------------------------------------------------------------------ */

.vf-cart-summary{
    position:sticky;

    top:24px;

    height:max-content;

    padding:
        25px
        24px;

    background:
        rgba(251,243,240,.56);

    border:
        1px solid
        rgba(48,56,55,.10);

    border-radius:17px;

    box-shadow:
        0 7px 24px
        rgba(48,56,55,.035);
}

.vf-cart-summary h2{
    margin:
        0
        0
        22px;

    color:#303837;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:23px;

    font-weight:400;
}

.vf-cart-summary p{
    display:flex;

    align-items:flex-start;

    justify-content:space-between;

    gap:20px;

    margin:
        0
        0
        13px;

    color:
        rgba(48,56,55,.72);

    font-size:13px;

    line-height:1.45;
}

.vf-cart-summary p strong{
    color:#303837;

    font-size:14px;

    white-space:nowrap;
}

.vf-cart-summary .vf-primary{
    display:flex;

    width:100%;

    min-height:48px;

    margin:
        24px
        0
        0;

    background:#C7E6E0 !important;

    color:#303837 !important;

    border:
        1px solid
        rgba(48,56,55,.14) !important;

    border-radius:999px;

    font-size:10.5px;

    font-weight:700;

    letter-spacing:.12em;
}


/* ------------------------------------------------------------------------
   CARRINHO VAZIO
   ------------------------------------------------------------------------ */

.vf-cart-page .vf-empty-state{
    max-width:720px;

    margin:
        18px
        auto
        70px;

    padding:
        54px
        28px;

    background:
        rgba(251,243,240,.54);

    border:
        1px solid
        rgba(48,56,55,.09);

    border-radius:18px;

    text-align:center;
}

.vf-cart-page .vf-empty-state p{
    margin:
        0
        0
        23px;

    color:
        rgba(48,56,55,.72);

    font-size:15px;
}


/* ========================================================================
   DRAWER DO CARRINHO
   ======================================================================== */

.vf-drawer-backdrop{
    background:
        rgba(48,56,55,.48);
}

.vf-drawer{
    width:
        min(100vw,560px);

    background:#FBF3F0;

    box-shadow:
        -18px
        0
        42px
        rgba(48,56,55,.15);
}


/* CABECALHO */

.vf-drawer-heading{
    min-height:68px;

    padding:
        16px
        20px;

    background:#C7E6E0 !important;

    color:#303837 !important;

    border-bottom:
        1px solid
        rgba(48,56,55,.08);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:20px;

    font-weight:400;
}

.vf-drawer-heading button{
    display:grid;

    place-items:center;

    width:34px;
    height:34px;

    padding:0;

    background:
        transparent !important;

    color:#303837 !important;

    border:
        1px solid
        rgba(48,56,55,.20) !important;

    border-radius:50%;

    font-size:24px;

    line-height:1;
}


/* CONTEUDO */

.vf-drawer-content{
    padding:
        14px
        20px
        28px;

    background:#FBF3F0;
}


/* ITEM */

.vf-drawer-line{
    display:grid;

    grid-template-columns:
        66px
        minmax(0,1fr)
        auto;

    gap:12px;

    padding:
        14px
        0;

    border-bottom:
        1px solid
        rgba(48,56,55,.10);

    color:#303837;

    font-size:12.5px;
}

.vf-drawer-line img{
    display:block;

    width:66px;
    height:82px;

    object-fit:cover;

    border-radius:8px;

    border:
        1px solid
        rgba(48,56,55,.07);
}

.vf-drawer-line > div:nth-child(2){
    min-width:0;
}

.vf-drawer-line a{
    color:#303837;

    line-height:1.4;
}

.vf-drawer-line small{
    display:block;

    margin:
        4px
        0
        0;

    color:
        rgba(48,56,55,.57);

    font-size:11px;
}


/* PRECO / REMOVER */

.vf-drawer-line-end{
    display:flex;

    align-items:flex-end;

    justify-content:space-between;

    flex-direction:column;

    min-width:82px;

    white-space:nowrap;
}

.vf-drawer-line-end strong{
    color:#303837;

    font-size:12.5px;
}

.vf-drawer-line-end button{
    width:28px;
    height:28px;

    padding:0;

    background:none;

    color:
        rgba(48,56,55,.55);

    border:0;

    font-size:18px;
}

.vf-drawer-line-end button:hover{
    color:#303837;
}


/* ------------------------------------------------------------------------
   CEP NO DRAWER
   ------------------------------------------------------------------------ */

.vf-drawer-cep{
    margin:
        20px
        0
        0;

    padding:
        20px
        0;

    border-bottom:
        1px solid
        rgba(48,56,55,.10);

    text-align:left;
}

.vf-drawer-cep label{
    display:block;

    margin-bottom:8px;

    color:#303837;

    font-size:13px;

    font-weight:600;
}

.vf-drawer-cep div{
    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        auto;
}

.vf-drawer-cep input{
    width:100%;

    min-width:0;

    height:42px;

    padding:
        0
        12px;

    background:#FBF3F0;

    color:#303837;

    border:
        1px solid
        rgba(48,56,55,.14);

    border-radius:
        9px
        0
        0
        9px;
}

.vf-drawer-cep button{
    min-height:42px;

    padding:
        0
        17px;

    background:#C7E6E0;

    color:#303837;

    border:
        1px solid
        rgba(48,56,55,.14);

    border-left:0;

    border-radius:
        0
        9px
        9px
        0;

    font-size:12px;

    font-weight:600;
}

.vf-drawer-cep small{
    display:block;

    margin-top:7px;

    color:
        rgba(48,56,55,.55);

    font-size:10.5px;

    line-height:1.45;
}


/* ------------------------------------------------------------------------
   RESUMO DRAWER
   ------------------------------------------------------------------------ */

.vf-drawer-summary{
    padding-top:20px;

    color:#303837;

    text-align:left;
}

.vf-drawer-summary p{
    display:flex;

    justify-content:space-between;

    gap:20px;

    margin:
        9px
        0;

    color:
        rgba(48,56,55,.74);

    font-size:13px;

    text-align:left;
}

.vf-drawer-summary .vf-drawer-total{
    margin:
        20px
        0
        0;

    padding-top:18px;

    color:#303837;

    border-top:
        1px solid
        rgba(48,56,55,.12);

    font-size:18px;

    font-weight:700;
}

.vf-drawer-summary .vf-primary{
    display:flex;

    width:100%;

    min-height:48px;

    margin:
        18px
        0
        10px;

    background:#C7E6E0 !important;

    color:#303837 !important;

    border:
        1px solid
        rgba(48,56,55,.14) !important;

    border-radius:999px;

    font-size:10.5px;

    letter-spacing:.11em;
}


/* ========================================================================
   TABLET
   ======================================================================== */

@media(min-width:721px) and (max-width:1000px){

    .vf-cart-page-grid{
        grid-template-columns:
            minmax(0,1fr)
            300px;

        gap:26px;
    }

    .vf-cart-row{
        grid-template-columns:
            96px
            minmax(0,1fr)
            auto;

        gap:15px;

        padding:15px;
    }

    .vf-cart-row img{
        width:96px;
        height:116px;
    }

    .vf-cart-summary{
        padding:
            20px
            18px;
    }

}


/* ========================================================================
   MOBILE
   ======================================================================== */

@media(max-width:720px){

    .vf-cart-page{
        padding-bottom:56px;
    }

    .vf-cart-page > h1{
        margin-bottom:24px;

        font-size:31px;
    }

    .vf-cart-page-grid{
        display:block;
    }

    .vf-cart-row{
        grid-template-columns:
            82px
            minmax(0,1fr);

        gap:12px;

        padding:
            13px
            12px;

        border-radius:13px;
    }

    .vf-cart-row img{
        width:82px;
        height:102px;

        border-radius:8px;
    }

    .vf-cart-row h2{
        font-size:13px;
    }

    .vf-cart-row p{
        font-size:11.5px;
    }

    .vf-cart-row > strong{
        grid-column:2;

        margin-top:2px;

        padding-top:0;

        font-size:15px;
    }

    .vf-cart-summary{
        position:static;

        margin-top:30px;

        padding:
            21px
            17px;

        border-radius:14px;
    }

    .vf-cart-summary h2{
        font-size:21px;
    }


    /* DRAWER */

    .vf-drawer{
        width:100vw;

        max-width:none;
    }

    .vf-drawer-heading{
        min-height:62px;

        padding:
            14px
            15px;

        font-size:19px;
    }

    .vf-drawer-content{
        padding:
            10px
            14px
            24px;
    }

    .vf-drawer-line{
        grid-template-columns:
            60px
            minmax(0,1fr)
            auto;

        gap:10px;
    }

    .vf-drawer-line img{
        width:60px;
        height:74px;
    }

    .vf-drawer-line-end{
        min-width:70px;
    }

    .vf-drawer-line .vf-qty{
        grid-template-columns:
            30px
            30px
            30px;
    }

    .vf-drawer-line .vf-qty button{
        width:30px;
        height:30px;
    }

    .vf-drawer-line .vf-qty span{
        min-width:30px;
    }

}


/* ========================================================================
   MOBILE ESTREITO
   ======================================================================== */

@media(max-width:380px){

    .vf-cart-row{
        grid-template-columns:
            74px
            minmax(0,1fr);
    }

    .vf-cart-row img{
        width:74px;
        height:94px;
    }

    .vf-drawer-line{
        grid-template-columns:
            54px
            minmax(0,1fr)
            64px;
    }

    .vf-drawer-line img{
        width:54px;
        height:68px;
    }

    .vf-drawer-line-end{
        min-width:64px;
    }

    .vf-drawer-line a{
        font-size:11.5px;
    }

}

/* ========================================================================
   VIVA_FOOTER_LUXURY_V8

   Rodape editorial premium:
   - identidade Viva preservada
   - logo sem caixa
   - hierarquia tipografica
   - sem emojis
   - informacao organizada
   - responsivo desktop / tablet / mobile
   ======================================================================== */

.vf-footer{
    position:relative;

    margin-top:0;

    padding:
        0 !important;

    background:
        #FBF3F0 !important;

    color:
        #303837 !important;

    border:
        0 !important;
}

.vf-footer::before{
    content:"";

    display:block;

    position:static;

    width:100%;
    height:1px;

    background:
        rgba(111,162,153,.42);
}


/* ESTRUTURA PRINCIPAL */

.vf-footer-main{
    display:grid;

    grid-template-columns:
        minmax(260px,1.42fr)
        minmax(160px,.78fr)
        minmax(210px,1fr)
        minmax(210px,1fr);

    gap:
        clamp(36px,4vw,72px);

    align-items:start;

    padding:
        68px
        0
        54px;
}


/* MARCA */

.vf-footer-brand-block{
    max-width:
        390px;
}

.vf-footer-logo{
    display:inline-block !important;

    width:
        176px;

    margin:
        0
        0
        24px !important;

    opacity:
        1 !important;
}

.vf-footer-logo:hover{
    opacity:
        1 !important;
}

.vf-footer-logo img{
    display:block;

    width:100%;
    height:auto;

    object-fit:contain;
}

.vf-footer-tagline{
    max-width:
        35ch;

    margin:
        0
        0
        26px !important;

    color:
        rgba(48,56,55,.78) !important;

    font-size:
        14px !important;

    line-height:
        1.75 !important;
}


/* INSTAGRAM */

.vf-footer-instagram{
    display:inline-flex !important;

    align-items:center;

    gap:
        10px;

    margin:
        0 !important;

    padding:
        10px
        14px;

    border:
        1px solid
        rgba(111,162,153,.34);

    border-radius:
        999px;

    background:
        rgba(199,230,224,.22);

    color:
        #303837 !important;

    font-size:
        12px !important;

    line-height:
        1 !important;

    transition:
        background .18s ease,
        border-color .18s ease,
        transform .18s ease !important;
}

.vf-footer-instagram span{
    color:
        rgba(48,56,55,.62);
}

.vf-footer-instagram strong{
    font-weight:
        700;
}

.vf-footer-instagram:hover{
    opacity:
        1 !important;

    transform:
        translateY(-1px);

    background:
        rgba(199,230,224,.42);

    border-color:
        rgba(111,162,153,.58);
}


/* COLUNAS */

.vf-footer-column{
    min-width:
        0;
}

.vf-footer-kicker{
    display:block;

    margin:
        0
        0
        10px;

    color:
        #6F9F97;

    font-size:
        10px;

    font-weight:
        800;

    line-height:
        1.2;

    letter-spacing:
        .20em;

    text-transform:
        uppercase;
}

.vf-footer h3{
    display:block !important;

    margin:
        0
        0
        22px !important;

    padding:
        0 !important;

    color:
        #303837 !important;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        19px !important;

    font-weight:
        500 !important;

    line-height:
        1.25 !important;

    letter-spacing:
        -.015em !important;
}

.vf-footer h3::after{
    display:none !important;
}

.vf-footer-column > a{
    display:block !important;

    width:
        fit-content;

    margin:
        0
        0
        11px !important;

    color:
        rgba(48,56,55,.82) !important;

    font-size:
        13px !important;

    line-height:
        1.45 !important;

    text-decoration:
        none;

    transition:
        color .16s ease,
        transform .16s ease !important;
}

.vf-footer-column > a:hover{
    opacity:
        1 !important;

    color:
        #557E77 !important;

    transform:
        translateX(2px);
}

.vf-footer-note{
    max-width:
        29ch;

    margin:
        18px
        0
        0 !important;

    color:
        rgba(48,56,55,.62) !important;

    font-size:
        12px !important;

    line-height:
        1.65 !important;
}


/* PAGAMENTO */

.vf-footer-payment{
    display:flex;

    flex-wrap:
        wrap;

    gap:
        7px;

    margin:
        0
        0
        18px;
}

.vf-footer-payment span{
    display:inline-flex;

    align-items:center;

    min-height:
        30px;

    padding:
        6px
        10px;

    border:
        1px solid
        rgba(48,56,55,.12);

    border-radius:
        7px;

    background:
        rgba(255,255,255,.46);

    color:
        rgba(48,56,55,.78);

    font-size:
        10px;

    font-weight:
        800;

    line-height:
        1;

    letter-spacing:
        .035em;

    text-transform:
        uppercase;
}


/* FAIXA INFERIOR */

.vf-footer-bottom{
    display:flex;

    align-items:center;
    justify-content:space-between;

    gap:
        24px;

    margin-top:
        0 !important;

    padding:
        20px
        0
        24px !important;

    border-top:
        1px solid
        rgba(48,56,55,.10) !important;

    color:
        rgba(48,56,55,.56) !important;

    font-size:
        11px !important;

    line-height:
        1.45 !important;
}

.vf-footer-bottom-signature{
    text-align:right;

    letter-spacing:
        .025em;
}


/* TABLET */

@media(max-width:1000px){

    .vf-footer-main{
        grid-template-columns:
            minmax(0,1.15fr)
            minmax(0,.85fr);

        gap:
            44px
            56px;

        padding:
            56px
            0
            46px;
    }

    .vf-footer-brand-block{
        max-width:
            430px;
    }
}


/* MOBILE */

@media(max-width:720px){

    .vf-footer-main{
        grid-template-columns:
            1fr;

        gap:
            34px;

        padding:
            44px
            0
            36px;
    }

    .vf-footer-brand-block{
        max-width:
            none;
    }

    .vf-footer-logo{
        width:
            148px;

        margin-bottom:
            20px !important;
    }

    .vf-footer-tagline{
        max-width:
            40ch;

        font-size:
            13px !important;
    }

    .vf-footer h3{
        margin-bottom:
            17px !important;

        font-size:
            18px !important;
    }

    .vf-footer-column > a{
        font-size:
            13px !important;
    }

    .vf-footer-bottom{
        flex-direction:
            column;

        align-items:flex-start;

        gap:
            6px;

        padding:
            18px
            0
            22px !important;
    }

    .vf-footer-bottom-signature{
        text-align:left;
    }
}

/* ========================================================================
   VIVA_FOOTER_LUXURY_V8_1
   Refinamento visual apos preview local.
   ======================================================================== */

@media(min-width:1001px){

    .vf-footer-main{
        grid-template-columns:
            minmax(300px,1.48fr)
            minmax(170px,.78fr)
            minmax(210px,.95fr)
            minmax(220px,1fr);

        gap:52px;

        padding:
            60px
            0
            48px;
    }

    .vf-footer-brand-block{
        max-width:400px;

        padding-right:46px;

        border-right:
            1px solid
            rgba(48,56,55,.09);
    }

    .vf-footer-logo{
        width:168px;

        margin-bottom:
            22px !important;
    }

    .vf-footer-tagline{
        max-width:33ch;

        font-size:
            14px !important;

        line-height:
            1.7 !important;
    }

    .vf-footer h3{
        font-size:
            20px !important;
    }

    .vf-footer-bottom{
        padding-right:
            205px !important;
    }
}


/* LOGO */

.vf-footer-logo img{
    max-height:96px;

    object-position:left center;
}


/* TITULOS */

.vf-footer-kicker{
    color:#668F88;

    font-weight:800;

    letter-spacing:.22em;
}


/* PAGAMENTO */

.vf-footer-payment span{
    border-radius:999px;

    background:
        rgba(255,255,255,.60);

    border-color:
        rgba(48,56,55,.11);
}


/* INSTAGRAM */

.vf-footer-instagram{
    background:
        rgba(199,230,224,.30);
}


/* MOBILE */

@media(max-width:720px){

    .vf-footer-logo{
        width:142px;
    }

    .vf-footer-main{
        padding-top:42px;
    }

    .vf-footer-bottom{
        padding-bottom:
            84px !important;
    }
}

/* ========================================================================
   VIVA_FOOTER_GREEN_V8_2
   Rodape no mesmo verde oficial do cabecalho.
   ======================================================================== */

.vf-footer{
    background:#C7E6E0 !important;
    color:#303837 !important;
}

.vf-footer::before{
    height:1px !important;
    background:rgba(48,56,55,.10) !important;
}

.vf-footer-brand-block{
    border-right-color:rgba(48,56,55,.11) !important;
}

.vf-footer h3,
.vf-footer p,
.vf-footer a{
    color:#303837 !important;
}

.vf-footer-kicker{
    color:#557C75 !important;
}

.vf-footer-tagline{
    color:rgba(48,56,55,.78) !important;
}

.vf-footer-column > a{
    color:rgba(48,56,55,.80) !important;
}

.vf-footer-column > a:hover{
    color:#26302F !important;
}

.vf-footer-note{
    color:rgba(48,56,55,.66) !important;
}

.vf-footer-instagram{
    background:rgba(251,243,240,.58) !important;
    border-color:rgba(48,56,55,.12) !important;
}

.vf-footer-instagram:hover{
    background:rgba(251,243,240,.82) !important;
    border-color:rgba(48,56,55,.18) !important;
}

.vf-footer-payment span{
    background:rgba(251,243,240,.70) !important;
    border-color:rgba(48,56,55,.11) !important;
    color:#303837 !important;
}

.vf-footer-bottom{
    border-top-color:rgba(48,56,55,.12) !important;
    color:rgba(48,56,55,.58) !important;
}

/* ========================================================================
   VIVA_FOOTER_SIMPLIFIED_V8_3
   Rodape mais limpo:
   - marca + Instagram
   - atendimento
   - compra segura
   ======================================================================== */

@media(min-width:1001px){

    .vf-footer-main{
        grid-template-columns:
            minmax(260px,1.15fr)
            minmax(240px,1fr)
            minmax(260px,1fr);

        gap:
            clamp(64px,7vw,120px);
    }

    .vf-footer-brand-block{
        max-width:330px;
    }

    .vf-footer-logo{
        margin-bottom:
            26px !important;
    }
}

@media(min-width:721px) and (max-width:1000px){

    .vf-footer-main{
        grid-template-columns:
            1fr
            1fr;
    }

    .vf-footer-brand-block{
        grid-column:
            1 / -1;

        max-width:none;

        padding-right:0;

        padding-bottom:34px;

        border-right:0 !important;

        border-bottom:
            1px solid
            rgba(48,56,55,.10);
    }
}

@media(max-width:720px){

    .vf-footer-brand-block{
        padding-bottom:30px;

        border-bottom:
            1px solid
            rgba(48,56,55,.10);
    }
}

/* ========================================================================
   VIVA_PRODUCT_CARDS_PREMIUM_V9

   Refinamento editorial da vitrine:
   - imagem com maior protagonismo
   - card menos pesado
   - hierarquia mais limpa
   - seletores refinados
   - CTA coerente com a identidade Viva
   - desktop / tablet / mobile
   ======================================================================== */


/* ------------------------------------------------------------------------
   GRID
   ------------------------------------------------------------------------ */

.vf-product-grid{
    align-items:stretch;
}


/* ------------------------------------------------------------------------
   CARD
   ------------------------------------------------------------------------ */

.vf-product-grid .vf-card{
    display:flex;
    flex-direction:column;

    min-width:0;
    overflow:hidden;

    background:
        rgba(255,255,255,.24);

    border:
        1px solid
        rgba(48,56,55,.085);

    border-radius:
        16px;

    box-shadow:
        0 3px 14px
        rgba(48,56,55,.035);

    transition:
        transform .22s ease,
        box-shadow .22s ease,
        border-color .22s ease,
        background .22s ease;
}


/* ------------------------------------------------------------------------
   FOTO
   ------------------------------------------------------------------------ */

.vf-product-grid .vf-card-photo{
    display:block;

    position:relative;

    width:100%;

    aspect-ratio:
        4 / 5;

    overflow:hidden;

    background:
        #F4EFEC;

    border-bottom:
        1px solid
        rgba(48,56,55,.07);
}

.vf-product-grid .vf-card-photo img{
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;
    object-position:center top;

    transition:
        transform .45s ease,
        filter .30s ease;
}


/* ------------------------------------------------------------------------
   INFORMACOES
   ------------------------------------------------------------------------ */

.vf-product-grid .vf-card-info{
    display:flex;
    flex-direction:column;

    min-height:
        118px;

    padding:
        18px
        17px
        13px;
}

.vf-product-grid .vf-card-info h3{
    display:-webkit-box;

    min-height:
        39px;

    margin:
        0
        0
        13px;

    overflow:hidden;

    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;

    color:
        #303837;

    font-size:
        13.5px;

    font-weight:
        500;

    line-height:
        1.42;

    letter-spacing:
        -.008em;
}

.vf-product-grid .vf-card-info strong{
    display:block;

    margin-top:auto;

    color:
        #303837;

    font-size:
        20px;

    font-weight:
        750;

    line-height:
        1.15;

    letter-spacing:
        -.025em;
}


/* ------------------------------------------------------------------------
   ACOES
   ------------------------------------------------------------------------ */

.vf-product-grid .vf-card-actions{
    display:flex;
    flex-direction:column;

    margin-top:auto;

    padding:
        0
        17px
        18px;
}

.vf-product-grid .vf-card-actions form{
    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        minmax(0,1fr);

    gap:
        8px;

    width:100%;
}


/* SELECTS */

.vf-product-grid .vf-card-actions select{
    width:100%;
    min-width:0;

    height:
        41px;

    padding:
        0
        31px
        0
        11px;

    border:
        1px solid
        rgba(48,56,55,.14);

    border-radius:
        9px;

    outline:none;

    background-color:
        rgba(251,243,240,.68);

    color:
        #303837;

    font-family:
        inherit;

    font-size:
        11px;

    line-height:
        1;

    transition:
        background .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}

.vf-product-grid .vf-card-actions select:hover{
    border-color:
        rgba(48,56,55,.26);

    background-color:
        rgba(255,255,255,.72);
}

.vf-product-grid .vf-card-actions select:focus{
    border-color:
        rgba(85,124,117,.52);

    box-shadow:
        0 0 0 3px
        rgba(199,230,224,.42);
}


/* BOTAO */

.vf-product-grid .vf-card-actions form button{
    grid-column:
        1 / -1;

    width:100%;

    min-height:
        42px;

    margin-top:
        1px;

    padding:
        9px
        16px;

    border:
        1px solid
        rgba(48,56,55,.15) !important;

    border-radius:
        999px;

    background:
        #C7E6E0 !important;

    color:
        #303837 !important;

    font-size:
        10px;

    font-weight:
        800;

    line-height:
        1;

    letter-spacing:
        .15em;

    text-transform:
        uppercase;

    box-shadow:
        none;

    transition:
        background .18s ease,
        border-color .18s ease,
        transform .18s ease,
        box-shadow .18s ease;
}

.vf-product-grid .vf-card-actions form button:hover{
    background:
        #B9DDD6 !important;

    border-color:
        rgba(48,56,55,.22) !important;
}


/* LINK / INDISPONIVEL */

.vf-product-grid .vf-card-actions > a{
    display:flex;

    align-items:center;
    justify-content:center;

    width:100%;

    min-height:
        42px;

    border:
        1px solid
        rgba(48,56,55,.14);

    border-radius:
        999px;

    background:
        rgba(255,255,255,.42);

    color:
        #303837;

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        .12em;

    text-transform:
        uppercase;
}

.vf-product-grid .vf-unavailable{
    width:100%;

    padding:
        12px
        8px;

    color:
        rgba(48,56,55,.56);

    font-size:
        11px;

    text-align:center;
}


/* ------------------------------------------------------------------------
   DESKTOP HOVER
   ------------------------------------------------------------------------ */

@media(hover:hover) and (pointer:fine){

    .vf-product-grid .vf-card:hover{
        transform:
            translateY(-4px);

        border-color:
            rgba(85,124,117,.20);

        background:
            rgba(255,255,255,.38);

        box-shadow:
            0 16px 34px
            rgba(48,56,55,.075);
    }

    .vf-product-grid .vf-card:hover .vf-card-photo img{
        transform:
            scale(1.018);

        filter:
            saturate(1.015);
    }

    .vf-product-grid .vf-card-actions form button:hover{
        transform:
            translateY(-1px);

        box-shadow:
            0 7px 16px
            rgba(48,56,55,.07);
    }
}


/* ------------------------------------------------------------------------
   DESKTOP
   ------------------------------------------------------------------------ */

@media(min-width:1001px){

    .vf-product-grid{
        grid-template-columns:
            repeat(4,minmax(0,1fr));

        gap:
            34px
            22px;
    }

    .vf-product-grid .vf-card-info{
        min-height:
            120px;

        padding:
            19px
            17px
            14px;
    }

    .vf-product-grid .vf-card-actions{
        padding-bottom:
            19px;
    }
}


/* ------------------------------------------------------------------------
   TABLET
   ------------------------------------------------------------------------ */

@media(min-width:721px) and (max-width:1000px){

    .vf-product-grid{
        grid-template-columns:
            repeat(3,minmax(0,1fr));

        gap:
            24px
            17px;
    }

    .vf-product-grid .vf-card{
        border-radius:
            14px;
    }

    .vf-product-grid .vf-card-info{
        min-height:
            108px;

        padding:
            15px
            13px
            12px;
    }

    .vf-product-grid .vf-card-info h3{
        min-height:
            37px;

        margin-bottom:
            10px;

        font-size:
            12.5px;
    }

    .vf-product-grid .vf-card-info strong{
        font-size:
            18px;
    }

    .vf-product-grid .vf-card-actions{
        padding:
            0
            13px
            15px;
    }

    .vf-product-grid .vf-card-actions select{
        height:
            38px;

        padding-left:
            9px;

        font-size:
            10.5px;
    }

    .vf-product-grid .vf-card-actions form button{
        min-height:
            40px;
    }
}


/* ------------------------------------------------------------------------
   MOBILE
   Mantem 2 produtos por linha.
   ------------------------------------------------------------------------ */

@media(max-width:720px){

    .vf-product-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr));

        gap:
            14px
            9px;
    }

    .vf-product-grid .vf-card{
        border-radius:
            12px;

        box-shadow:
            0 2px 8px
            rgba(48,56,55,.025);
    }

    .vf-product-grid .vf-card-photo{
        aspect-ratio:
            4 / 5;
    }

    .vf-product-grid .vf-card-info{
        min-height:
            93px;

        padding:
            11px
            9px
            9px;
    }

    .vf-product-grid .vf-card-info h3{
        min-height:
            33px;

        margin-bottom:
            8px;

        font-size:
            11.5px;

        line-height:
            1.35;
    }

    .vf-product-grid .vf-card-info strong{
        font-size:
            16px;

        letter-spacing:
            -.02em;
    }

    .vf-product-grid .vf-card-actions{
        padding:
            0
            8px
            10px;
    }

    .vf-product-grid .vf-card-actions form{
        gap:
            5px;
    }

    .vf-product-grid .vf-card-actions select{
        height:
            34px;

        padding:
            0
            23px
            0
            7px;

        border-radius:
            7px;

        font-size:
            9.5px;
    }

    .vf-product-grid .vf-card-actions form button{
        min-height:
            35px;

        padding:
            7px
            8px;

        font-size:
            8.5px;

        letter-spacing:
            .11em;
    }
}


/* ------------------------------------------------------------------------
   MOBILE ESTREITO
   ------------------------------------------------------------------------ */

@media(max-width:380px){

    .vf-product-grid{
        gap:
            11px
            7px;
    }

    .vf-product-grid .vf-card-info{
        padding-left:
            8px;

        padding-right:
            8px;
    }

    .vf-product-grid .vf-card-info h3{
        font-size:
            11px;
    }

    .vf-product-grid .vf-card-info strong{
        font-size:
            15.5px;
    }

    .vf-product-grid .vf-card-actions{
        padding-left:
            7px;

        padding-right:
            7px;
    }
}

/* ============================================================
   VIVA_HOME_BANNER_CAROUSEL_V1
   Troca somente a fotografia do hero.
   Estrutura, texto e CTA permanecem fixos.
   ============================================================ */

.vf-banner > img[data-vf-banner-image] {
    opacity: 1;
    transition: opacity 420ms ease-in-out;
    will-change: opacity;
}

.vf-banner > img[data-vf-banner-image].vf-banner-is-fading {
    opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
    .vf-banner > img[data-vf-banner-image] {
        transition: none;
    }
}