/* Fonte oficial do manual da marca New Agrícola: Exo 2 (única família, peso varia por hierarquia) */
@import url('https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,400;0,500;0,600;0,700;0,800;1,600;1,700;1,800&display=swap');

/* ============================================================
   NEW AGRÍCOLA — Diretiva visual
   Conceito: lavoura + engrenagem + sol nascente, em formato de escudo.
   Robustez, confiança e agilidade para quem não pode ficar com a
   máquina parada. Verde institucional estrutura a loja; amarelo
   concentra a energia e a ação (CTAs de compra).
   ============================================================ */

:root {
	/* ---------- paleta oficial da marca ---------- */
	--na-yellow: #FDC212;
	--na-yellow-bright: #FEE311;
	--na-yellow-active: #E6AE0A;

	--na-green-dark: #184D24;
	--na-green-dark-hover: #123c1c;
	--na-green: #126936;
	--na-green-hover: #184D24;
	--na-green-active: #0d4d27;
	--na-green-light: #96BF1F;

	--na-surface: #F7F8F5;
	--na-border: #E7E7E7;
	--na-gray-600: #666666;
	--na-gray-800: #2D2D2D;
	/* paleta */

	/* cores — mapeamento p/ variáveis do tema:
	   verde principal = cor funcional (botões, links, hover, badges)
	   verde escuro    = cor estrutural (topo, rodapé, institucional) */
    --primary: var(--na-green);
    --primary-hover: var(--na-green-hover);
    --primary-active: var(--na-green-active);
    --secondary: var(--na-green-dark);
    --secondary-hover: var(--na-green-dark-hover);
    --secondary-active: #0e2e15;
	--green: var(--primary);
	--green-hover: var(--primary-hover);
	--green-active: var(--primary-active);
	--yellow: var(--na-yellow);
	--yellow-hover: var(--na-yellow-bright);
	--yellow-active: var(--na-yellow-active);
	/* cores */

	/* header */
	--header-topbar-background-color: var(--na-green-dark);
	--header-topbar-text-color: #fafafa;
	--header-topbar-icon-color: #fafafa;
	--header-background-color: #fff;
	--header-border-color: var(--na-border);
	--header-color-text: var(--text);
	--header-svg-color: var(--primary);
	--header-svg-width: 20px;
	--header-svg-height: 20px;
	--header-search-background-color: none;
	--header-search-background-color-focus: var(--na-surface);
	--header-search-color: var(--text);
	--header-menu-color-text: var(--text);
	--header-menu-color-text-hover: var(--primary);
	--header-menu-mobile-color-text: var(--text);
	--header-menu-icon-color: var(--text);
	--header-menu-mobile-icon-color: var(--text);
	--header-menu-font-size: 14px;
	--header-menu-text-height: 56px;
	/* header */

	/* footer — rodapé institucional em verde escuro, texto claro */
	--footer-background-color: var(--na-green-dark);
	--footer-border-color: rgba(255,255,255,.12);
	--footer-color-text: rgba(255,255,255,.82);
	--footer-color-text-secondary: rgba(255,255,255,.60);
	--footer-space: 40px;
	/* footer */

	/* fontes */
    --font-primary: 'Exo 2', sans-serif;
    --font-secondary: 'Exo 2', sans-serif;
	/* fontes */

	/* botões
	   primário = amarelo (CTA de maior importância: comprar, promoções)
	   secundário = verde principal (ações de apoio)
	   card/PDP  = amarelo, mesma linguagem do CTA de compra, texto verde escuro
	   (nunca branco sobre amarelo — contraste insuficiente) */
	--btn-primary: var(--yellow);
	--btn-primary-hover: var(--yellow-hover);
	--btn-primary-active: var(--yellow-active);
	--btn-secondary: var(--primary);
	--btn-secondary-hover: var(--primary-hover);
	--btn-secondary-active: var(--primary-active);

	--btn-product-thumb: var(--yellow);
	--btn-product-thumb-hover: var(--yellow-hover);
	--btn-product-thumb-active: var(--yellow-active);
	--btn-product-thumb-color: var(--na-green-dark);
	--btn-product-thumb-radius: 8px;

	--btn-add-cart: var(--yellow);
	--btn-add-cart-hover: var(--yellow-hover);
	--btn-add-cart-active: var(--yellow-active);
	--btn-add-cart-color: var(--na-green-dark);
	/* botões */

	/* thumb */
	--thumb-product-title-color: var(--na-gray-800);
	/* thumb */

	/* variações — selecionada em verde principal */
	--variant-button-background-color: #fff;
	--variant-button-color: var(--text);
	--variant-button-border-color: var(--na-border);
	--variant-button-selected-background-color: var(--primary);
	--variant-button-selected-color: #fff;
	--variant-button-selected-border-color: var(--primary);
	--variant-button-border-radius: var(--border-radius-default);
	/* variações */

	/* radius — cantos suaves, mas sem exagero (a marca também é força e seriedade) */
	--radius-sm: 6px;
	--radius-md: 10px;
	--radius-lg: 14px;
	--border-radius-default: var(--radius-md);
	--btn-border-radius: 8px;
	--input-border-radius: var(--radius-sm);
	/* radius */

	/* sombras — sólidas e discretas, nunca flutuantes */
	--shadow-sm: 0 2px 8px rgba(0,0,0,.05);
	--shadow-md: 0 6px 20px rgba(0,0,0,.06);
	/* sombras */

	/* geral */
	--product-thumb-spacing: 4px;
	--plyr-color-main: var(--primary);
	--spacing-sections-home: 64px;
    --text: var(--na-gray-800);
    --text-gray: var(--na-gray-600);
	--text-secondary: var(--na-gray-600);
	--background: #fff;
	--background-secondary: var(--na-surface);
	--coupons-available-bg: var(--na-surface);
    --container-small: 1530px;
    --container-xxl: 1760px;
    --container-large: 1920px;
    --logo-max-height: 55px;
	@media (max-width: 991px) {
		--spacing-sections-home: 36px;
		--footer-space: 24px;
		--logo-max-height: 36px;
	}
	/* geral */
}

/* ============================================================
   TIPOGRAFIA — Exo 2, pesos conforme hierarquia do manual
   ============================================================ */
h1, h2, h3, h4, h5, h6 { font-family: var(--font-primary); font-weight: 700; }

/* customizações gerais */
.vowt-prev .container-arrow, .vowt-next .container-arrow {background: var(--primary); border: 1px solid var(--primary);}
.vowt-prev .container-arrow i, .vowt-next .container-arrow i {color: #fff;}
/* Header */
/* Top-bar */
.top-bar {padding: 10px 0;}
/* Top-bar */
.header-wrapper {gap: 24px;}
.header-wrapper .search {border-radius: 8px; border: 1px solid var(--na-border) !important; margin: 0 43px; height: 52px;}
.header-wrapper .search:focus-within {border-color: var(--primary) !important; box-shadow: 0 0 0 3px rgba(18, 105, 54, 0.10);}
.header-wrapper .search .btn {background: var(--na-yellow); color: var(--na-green-dark); font-weight: 700;}
.header-wrapper .search .btn:hover {background: var(--na-yellow-bright);}
/* Menu */

/* Menu */
/* Header */

/* Barra-promocional (benefícios) */
.promotional-bar path {fill: var(--primary);}
.promotional-bar .title {color: var(--na-green-dark);}
/* Barra-promocional */

/* Categorias-destaques */
@media (max-width: 991px) {
	.container-arrow {display: none;}
}
/* Categorias-destaques */
.menu-smart {--menu-smart-panel-height : 69vh}
.menu-smart-level-1 {justify-content: center;}
.menu-smart-link-level-1 {text-transform: uppercase;}

.heading-title {font-size: 45px; margin-top: 0; color: var(--na-green-dark); font-weight: 800;}
.product-thumb-title {text-align: center; margin-bottom: 0; color: var(--na-gray-800); font-weight: 600; line-height: 1.35;}
.product-thumb-title a {color: inherit;}
/* Lista de produtos */
.product-thumb .product-price-wrapper {display: none;}
.product-thumb .product-price-value {display: none;}
.product-pix .product-pix-icon {display: none;}
.product-thumb .product-pix-value {color: var(--primary); font-weight: 700;}
.product-thumb .product-pix {order: 0; background: none;}
.product-thumb .product-short-installments {text-align: center;}
.product-list .product-list-link a {padding: 0; border: none;}
.product-list-description {display: none;}

/* Badge de promoção do card (etiqueta de desconto) */
.promo-tag {background: var(--na-yellow); color: var(--na-green-dark); font-weight: 700; border-radius: var(--radius-sm);}

.btn-green {background: var(--primary); border: 1px solid var(--primary); color: #fff;}
.btn-green:hover {background: var(--primary-hover); border: 1px solid var(--primary-hover);}
.btn-green:focus {background-color: var(--primary-active) !important; border: 1px solid var(--primary-active) !important;}

/* Botão de compra (PDP) — o elemento mais forte da página do produto */
.btn.btn-add-cart {font-weight: 800; min-height: 52px;}

/* Especificações técnicas (aba "Atributos") — organização técnica clara */
#product .product-attributes table {border: 1px solid var(--na-border); border-radius: var(--radius-sm); overflow: hidden;}
#product .product-attributes table th {color: var(--na-green-dark); font-weight: 700; background: var(--na-surface);}
#product .product-attributes table td {color: var(--text);}

/* Informações do produto (código, marca, modelo, estoque) */
#product .product-info-label {color: var(--na-gray-600); font-weight: 500;}
#product .product-info-value {color: var(--na-green-dark); font-weight: 700;}

/* Perguntas frequentes */
#questions .accordion-button i {color: var(--primary);}
#questions .accordion-button:not(.collapsed) {color: var(--na-green-dark); background: var(--na-surface);}

/* Banners Médios */
.banners-home {justify-items: center;}
.banners-home .flex-lg-row {gap: 10px;}

/* Banner destaque */
.banner-destaque .banner-destaque-content {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1;}
.banner-destaque .banner-destaque-item {border-radius: 16px; overflow: hidden;}
.banner-destaque .banner-destaque-item:hover img {transform: scale(1.1);}
.banner-destaque .banner-destaque-item::before {content: ''; position: absolute; width: 100%; height: 100%; background: linear-gradient(0deg, rgba(24, 77, 36, 0.45) 0%, rgba(24, 77, 36, 0.45) 100%), linear-gradient(180deg, rgba(24, 77, 36, 0.00) 25%, rgba(24, 77, 36, 0.85) 100%); z-index: 1;}
.banner-destaque .banner-destaque-title {font-size: 24px; font-weight: 800; font-style: italic; font-family: var(--font-secondary); color: #fff; text-transform: uppercase;}
@media (max-width: 991px) {
	.banner-destaque .banner-destaque-title {font-size: 20px;}
	.banner-destaque .vowt-prev, .banner-destaque .vowt-next {display: none;}
}
/* Banner destaque */

/* Marcar */
#manufacturer {overflow: hidden; padding: 4px 0;}
.swiper-slide {display: flex; justify-content: center; align-items: center;}
.carousel-link img {max-height: auto; transition: transform 0.3s ease;}

/* FOOTER */
footer {margin-top: 1px;}
footer a {transition: color .2s ease;}
footer a:hover {color: var(--na-yellow);}
footer .list-contact__info {color: #fff;}
footer .list-contact__label {color: rgba(255,255,255,.75);}
footer .list-contact__item.list-contact__item--time .list-contact__info,
footer .list-contact__item.list-contact__item--geocode .list-contact__info {color: rgba(255,255,255,.65);}
footer .vowt svg g path {fill: rgba(255,255,255,.55);}

/* PÁGINAS INTERNAS */
/* Produtos */
.product-column-left {position: inherit !important;}
.product-infos {display: block; font-size: 13px;}
.btn-whatsapp {background: #13b110; border: 1px solid #13b110; color: #fff;}
.btn-whatsapp:hover {background: #fff !important; border: 1px solid #13b110; color: #13b110;}
.btn-whatsapp:active {background: #13b110 !important; border: 1px solid #13b110; color: #fff !important;}
#accordionProduct .accordion-item {border-top: 1px solid var(--na-border); margin-top: 15px;}
.product-flex-images .swiper-slide {filter: none;}

.menu-advanced .lista-nivel-1 {align-items: center; position: relative; margin-top: 12px; gap: 12px;}
.menu-advanced .item-nivel-1 .item-nivel-1-text {padding: 10px;}
.menu-advanced .item-nivel-1 .item-nivel-1-text:hover {color: var(--primary);}
.menu-advanced .item-nivel-1.all-categories {position: relative;}
.menu-advanced .all-categories .submenu-column {padding: 0; min-height: 420px; width: fit-content;}
.menu-advanced .title-principal {display: none;}
.menu-advanced .all-categories .categories-list {row-gap: 4px; flex-direction: column; direction: rtl; flex-wrap: nowrap;}
.menu-advanced .all-categories .all-categories-submenu {position: absolute; left: 80%; width: 100%; background: #fff; top: 0; padding: 8px 24px; opacity: 0; visibility: hidden;  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06); height: 100%; width: max-content; margin-top: 0;}
.menu-advanced .menu-advanced-see-all {display: none !important;}
.menu-advanced .item-nivel-2 {width: 240px; direction: ltr; gap: 0px}
.menu-advanced .item-nivel-2 > a {width: auto;}
.menu-advanced .all-categories .item-nivel-2 > a {font-size: 14px; justify-content: space-between; display: flex; align-items: center; gap: 12px; text-wrap: auto; padding: 16px 16px 16px 8px; border-bottom: 1px solid #eee;}
.menu-advanced .all-categories .category-item i {display: flex;}
.menu-advanced .all-categories .all-categories-submenu .all-categories-submenu-header {padding: 10px 0; border-bottom: 1px solid #eee; margin-bottom: 10px;}
.menu-advanced .all-categories .all-categories-title {display: block;}
.menu-advanced .all-categories .all-categories-submenu-items {max-height: 320px; gap: 16px; column-gap: 96px; overflow: auto; padding-right: 20px;}
.menu-advanced .all-categories-lista-nivel-2 > a {font-size: 14px;}
.item-nivel-1-text .submenu-column {padding: 16px;}
.menu-advanced .lista-nivel-2 {column-gap: 80px; font-size: 15px; flex: 1; gap: 12px; max-height: 65vh;}
.menu-advanced .lista-nivel-3 {font-size: 13px; font-weight: 400;}

.menu-advanced .all-categories .all-categories-title {font-size: 20px;}

.menu-advanced .all-categories-lista-nivel-3 {margin-left: 0px; margin-top: 4px; margin-bottom: 4px;}
.menu-advanced .all-categories-lista-nivel-3 li > a {gap: 4px;}
.menu-advanced ul {font-weight: 500;}

.menu-advanced .lista-nivel-3 {margin-top: 0px;}

.banners-home img {border-radius: 16px;}

.carousel-categories .carousel-categories-title {-webkit-line-clamp: 2;}

.carousel-categories .container {max-width: 960px;}

#swipper-supplements-type img {border-radius: 16px;}

/* Item de destaque do menu (ex.: ofertas) — usa o amarelo de energia/ação */
.item-custom {background: var(--na-yellow); padding: 8px 4px; border-radius: 999px; max-height: 36px;}
.item-custom .item-nivel-1-text {color: var(--na-green-dark) !important;}
.menu-advanced-icon svg path {fill: var(--na-green-dark) !important;}

.submenu-column {padding: 32px 40px;}