/* =============================================================================
   LIFE ACTIVEWEAR — Portal de Revenda (Atacado)
   Tema: classic  |  Estrutura herdada do preset "classic plus"

   Toda a identidade abaixo foi extraida do site oficial em producao
   https://www.lifeactivewear.com.br (plataforma VNDA) — :root, style.css,
   pages/home.css e pages/product.css. Os comentarios "site:" marcam o
   token/regra de origem, para conferencia futura.
   ============================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,100..900;1,100..900&family=Oxanium:wght@200..800&display=swap');

:root {
	/* ---------- cores — espelho do :root oficial ---------- */
	--primary: #000000;              /* site: --primary-color #000 */
	--primary-hover: #363636;        /* site: --gray-4 */
	--primary-active: #000000;
	--secondary: #DCDCDC;            /* site: --secondary-color / --gray-2 */
	--secondary-hover: #D0D0D0;
	--secondary-active: #C4C4C4;

	--green: #00893E;
	--green-hover: #027235;
	--green-active: #015C2A;

	--gray: #DCDCDC;                 /* site: --gray-2 */
	--gray-light: #F9F9F9;           /* site: --gray-1 */
	--gray-light-hover: #F2F2F2;
	--gray-light-active: #ECECEC;
	--white: #FFFFFF;

	--background: #FFFFFF;
	--text: #000000;                 /* site: --font-color-base */
	--text-black: #000000;
	--text-gray: #515151;            /* site: cor de texto secundario */
	--text-secondary: #707070;       /* site: --gray-3 */

	/* unico acento fora do preto e branco: bege das flags do card */
	--life-sand: #ECE7DC;
	/* borda de campo do site: rgba(0,0,0,.5) */
	--life-field-border: rgba(0, 0, 0, 0.5);
	/* ---------- cores ---------- */

	/* ---------- header — branco, sticky, fio inferior ----------
	   site: #header{background:#fff; position:sticky; border-bottom:1px solid rgba(0,0,0,.4)}
	   Importante: o site NAO usa header transparente sobre o banner da home. */
	--header-topbar-background-color: #000000;
	--header-topbar-text-color: #FFFFFF;
	--header-topbar-icon-color: #FFFFFF;
	--header-background-color: #FFFFFF;
	--header-border-color: rgba(0, 0, 0, 0.4);
	--header-color-text: #000000;
	--header-svg-color: #000000;
	--header-svg-width: 22px;
	--header-svg-height: 22px;
	--header-search-background-color: #FFFFFF;
	--header-search-background-color-focus: #FFFFFF;
	--header-search-color: #000000;
	--header-menu-background: #FFFFFF;
	--header-menu-color-text: #000000;
	--header-menu-color-text-hover: #000000;
	--header-menu-mobile-color-text: #000000;
	--header-menu-icon-color: #000000;
	--header-menu-mobile-icon-color: #000000;
	--header-menu-font-size: 12px;    /* site: .menu-list{font-size:1.2rem} */
	--header-menu-font-weight: 400;   /* site: --font-weight-base */
	--header-menu-text-height: 64px;
	/* ---------- header ---------- */

	/* ---------- footer — site: footer{background-color:var(--gray-2); color:var(--black)} ---------- */
	--footer-background-color: #DCDCDC;
	--footer-border-color: rgba(0, 0, 0, 0.12);
	--footer-color-text: #000000;
	--footer-space: 40px;
	/* ---------- footer ---------- */

	/* ---------- fontes ----------
	   site: --font-family-base "Oxanium" (UI/corpo)
	         --font-oxo2      "Exo 2"   (todos os titulos de secao)
	   O tema classic so consome --font-primary (body) e --font-secondary
	   (modulo fast buy); os titulos vao por seletor explicito mais abaixo. */
	--font-primary: 'Oxanium', sans-serif;
	--font-secondary: 'Exo 2', sans-serif;
	--font-title: 'Exo 2', sans-serif;
	/* ---------- fontes ---------- */

	/* ---------- botoes ----------
	   site: .button-default {border:1px solid #000; background:transparent;
	          border-radius:4.7rem} -> hover preenche preto */
	--btn-primary: var(--primary);
	--btn-primary-hover: var(--primary-hover);
	--btn-primary-active: var(--primary-active);
	--btn-secondary: var(--secondary);
	--btn-secondary-hover: var(--secondary-hover);
	--btn-secondary-active: var(--secondary-active);

	/* botao de compra do card: pill PRETO SOLIDO sobre a imagem
	   site: .comprar_text {background:#000; border-radius:4.7rem; color:#fff} */
	--btn-product-thumb-purchase: #000000;
	--btn-product-thumb-purchase-hover: #363636;
	--btn-product-thumb-purchase-active: #000000;
	--btn-product-thumb-purchase-color: #FFFFFF;
	--btn-product-thumb-view: #F4F4F4;
	--btn-product-thumb-view-hover: var(--gray-light);
	--btn-product-thumb-view-active: var(--gray-light-active);
	--btn-product-thumb-view-color: #000000;
	--btn-product-thumb-radius: 47px;

	/* CTA da pagina de produto: pill VAZADO de 55px, igual ao site
	   site: .product-infos .actions-wrapper .add-to-cart-button
	         {border:1px solid #000; border-radius:4.7rem; height:5.5rem;
	          font-size:1.8rem; text-transform:uppercase; width:100%}
	         :hover {background-color:transparent; color:#000} */
	--btn-add-cart: transparent;
	--btn-add-cart-hover: transparent;
	--btn-add-cart-active: transparent;
	--btn-add-cart-color: #000000;
	/* ---------- botoes ---------- */

	/* ---------- produto — site: .product-infos{gap:2.4rem; margin-bottom:3rem} ---------- */
	--spacing-sections-product: 64px;
	--spacing-product-column-right: 24px;
	--product-row-x: 16px;
	--product-row-y: 16px;
	--product-images-x: 2px;
	--product-images-y: 2px;
	/* ---------- produto ---------- */

	/* ---------- variacoes ----------
	   site: selecao por CONTORNO preto, nunca por preenchimento
	         .add-to-cart input:checked + .label .text {border:1px solid #000; color:#000}
	         label {border-radius:1.4rem; width:2.9rem; height:3.5rem} */
	--variant-button-background-color: #FFFFFF;
	--variant-button-color: #000000;
	--variant-button-border-color: transparent;
	--variant-button-selected-background-color: #FFFFFF;
	--variant-button-selected-color: #000000;
	--variant-button-selected-border-color: #000000;
	--variant-button-border-radius: 14px;
	/* ---------- variacoes ---------- */

	/* ---------- radius ----------
	   site: 4.7rem nos botoes e flags, 1.4rem nos chips de tamanho,
	         2.1rem no card do carrossel, 0 nos campos de formulario */
	--border-radius-default: 0px;
	--btn-border-radius: 47px;
	--input-border-radius: 0px;
	/* ---------- radius ---------- */

	/* ---------- geral ---------- */
	--products-gutter-x: 16px;
	--products-gutter-y: 16px;
	--plyr-color-main: #000000;
	--spacing-sections-home: 72px;
	--container-xxl: 1600px;
	--container-small: 1280px;
	--container-large: 1920px;
	--logo-max-height: 50px;         /* site: logo SVG 106x46, altura 45 */

	@media (max-width: 991px) {
		--header-svg-width: 18px;
		--header-svg-height: 18px;
		--header-menu-text-height: 56px;
		--spacing-sections-home: 48px;
		--footer-space: 24px;
		--logo-max-height: 36px;
		--products-gutter-x: 8px;
		--products-gutter-y: 8px;
	}
	/* ---------- geral ---------- */
}

/* =============================================================================
   TIPOGRAFIA
   site: corpo Oxanium 400 / 1.4rem / line-height 1.5
         titulos Exo 2 400 em caixa alta com tracking largo
         (no fullbanner chega a letter-spacing:10px)
   ============================================================================= */
body {
	font-family: var(--font-primary);
	font-weight: 400;
	font-size: 14px;
	line-height: 1.5;
	color: #000000;
	background: #FFFFFF;
}

h1, h2, h3, h4,
.heading-title,
.section-title,
.newsletter-title,
.newsletter-description,
.carousel-categories-title {
	font-family: var(--font-title);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	line-height: 1.2;
	color: #000000;
}

.heading-title {font-size: 28px; margin-bottom: 32px;}
@media (max-width: 991px) {
	.heading-title {font-size: 20px; margin-bottom: 20px;}
}

/* titulo sobreposto ao banner principal — a assinatura tipografica da marca */
.slideshow .title,
.slideshow h2,
.banner-home .title {
	font-family: var(--font-title);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.22em;    /* site: 10px sobre 36px */
	font-size: 36px;
	color: #FFFFFF;
}
@media (max-width: 991px) {
	.slideshow .title, .slideshow h2, .banner-home .title {
		font-size: 22px; letter-spacing: 0.16em;
	}
}

/* =============================================================================
   BOTOES
   site: .button-default — pill vazado de 1px preto que inverte no hover
   ============================================================================= */
.btn {
	font-family: var(--font-primary);
	font-size: 14px;
	font-weight: 400;
	line-height: normal;
	padding: 13px 28px;
	border-radius: var(--btn-border-radius);
	transition: all 0.4s ease;
}
.btn:has(svg) {display: inline-flex; align-items: center; justify-content: center; gap: 12px;}
.btn svg {width: 15px; height: 12px; margin: 0;}

.btn.btn-primary,
.btn.btn-primary:focus {
	background: transparent;
	border: 1px solid #000000;
	color: #000000;
	min-width: 170px;          /* site: .button-default{min-width:17rem} */
}
.btn.btn-primary:hover,
.btn.btn-primary:active {
	background: #000000;
	border-color: #000000;
	color: #FFFFFF;
}
.btn.btn-primary svg {fill: #000000;}
.btn.btn-primary:hover svg,
.btn.btn-primary:active svg {fill: #FFFFFF;}

/* variante solida, para quando o botao cai sobre foto ou fundo preto */
.btn.btn-secondary,
.btn.btn-secondary:focus {
	background: #000000;
	border: 1px solid #000000;
	color: #FFFFFF;
}
.btn.btn-secondary:hover,
.btn.btn-secondary:active {
	background: transparent;
	color: #000000;
}
.btn.btn-secondary svg {fill: #FFFFFF;}
.btn.btn-secondary:hover svg, .btn.btn-secondary:active svg {fill: #000000;}

.btn.btn-white,
.btn.btn-white:focus {
	background: transparent; border: 1px solid #FFFFFF; color: #FFFFFF;
}
.btn.btn-white:hover, .btn.btn-white:active {
	background: #FFFFFF; border-color: #FFFFFF; color: #000000;
}
.btn.btn-white svg {fill: #FFFFFF;}
.btn.btn-white:hover svg {fill: #000000;}

/* campos: retos, fio fino preto — site: .search-form{border:1px solid rgba(0,0,0,.5)} */
.form-control, .form-select, input[type="text"], input[type="email"], input[type="tel"] {
	border-radius: 0;
	border: 1px solid var(--life-field-border);
	font-family: var(--font-primary);
	font-size: 14px;
}
.form-control:focus, .form-select:focus {
	border-color: #000000; box-shadow: none;
}

/* =============================================================================
   BARRA NO TOPO
   site: swiper rotativo, Exo 2 1.2rem, centralizado — e exatamente o formato
   das tres mensagens comerciais previstas no briefing.
   ============================================================================= */
.top-bar {padding: 6px 0;}
.top-bar, .top-bar a, .top-bar p, .top-bar strong, .top-bar span {
	font-family: var(--font-title);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-align: center;
}
.top-bar a {border-bottom: 1px solid transparent; transition: all 0.4s ease; width: fit-content;}
.top-bar a:hover {border-color: currentColor;}

/* =============================================================================
   HEADER
   ============================================================================= */
header, #header {box-shadow: none;}
#header {border-bottom: 1px solid var(--header-border-color);}
#header .logo {min-width: auto;}
.logo-wrapper {margin-right: 16px;}
.header-wrapper, .header-left, .header-right {gap: 24px;}
#cart-total .items {background: #000000; color: #FFFFFF;}
.header-wrapper .search svg {fill: #000000;}

/* busca: painel reto com fio fino, sem cantos arredondados */
.header-search .search-form,
#search input, .smart-search-input {
	border-radius: 0;
	border: 1px solid var(--life-field-border);
}

/* -----------------------------------------------------------------------------
   MENU (modulo extension/module/menu_smart)
   O tema traz .menu-smart-level-1 com justify-content:space-between, que
   distribui as categorias por toda a largura do container (1600px) e deixa
   buracos enormes entre elas. O site oficial usa lista encostada a esquerda
   com gap fixo: .menu>.menu-list{display:flex; gap:2rem; justify-content:flex-start}
   ----------------------------------------------------------------------------- */
.menu-smart-level-1 {
	justify-content: flex-start;
	gap: 20px;                 /* site: gap: 2rem */
}

/* site: .menu-list .menu-item{min-height:4.2rem} */
.menu-smart-item-level-1 {min-height: 42px;}

/* caixa mista e 12px, como no site — o menu oficial nao e em caixa alta */
.menu-smart-link-level-1 {
	font-family: var(--font-primary);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0.02em;
	text-transform: none;
	padding: 4px 0;
	color: #000000;
}

/* sublinhado de 1px que cresce — site: .menu>.menu-list a:not(.banner):before */
.menu-smart-item-name {position: relative;}
.menu-smart-item-name::before {
	content: '';
	position: absolute; left: 0; bottom: -2px;
	width: 100%; height: 0;
	background: currentColor;
	transition: height 0.4s ease;
}
.menu-smart-link-level-1:hover .menu-smart-item-name::before,
.menu-smart-link-level-1:focus .menu-smart-item-name::before {height: 1px;}

/* a seta do "tem filhos" fica discreta, colada no texto */
.menu-smart-item-level-1.has-children .menu-smart-item-name::after {
	font-size: 9px;
	margin-left: 2px;
}

@media (max-width: 1400px) {
	.menu-smart-level-1 {gap: 16px;}
}

@media (max-width: 991px) {
	.header-wrapper, .header-left, .header-right {gap: 16px;}
}

/* =============================================================================
   BARRA PROMOCIONAL / BENEFICIOS
   ============================================================================= */
.promotional-bar .container {max-width: var(--container-small);}
#product-category .promotional-bar {background: var(--gray-light); padding: 24px 0;}
.promotional-bar svg, .promotional-bar svg path {fill: #000000;}
.promotional-bar .block {flex-direction: row; gap: 10px; text-align: start; justify-content: center;}
.promotional-bar .title {
	color: #000000;
	font-family: var(--font-title);
	font-size: 12px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}
.promotional-bar .content {color: var(--text-gray); font-size: 12px;}
.promotional-bar .icon-arrow {width: 15px; height: 12px;}

/* =============================================================================
   CARD DE PRODUTO
   site: imagem 1:1.44 | flag pill bege | nome Oxanium 14/400 |
         preco 15/600 | del 11px #515151 | parcelas 13/400 |
         botao COMPRAR pill preto solido sobre a imagem
   ============================================================================= */
.product-thumb .image img {
	aspect-ratio: 1 / 1.44;     /* site: --product-image-height: 144% */
	object-fit: cover;
	width: 100%;
}
.product-thumb .product-thumb-top {margin: 0;}
.product-thumb .caption {text-align: center; padding: 16px 8px;}

/* flag/selo — site: .flag{background:#ece7dc; color:#000; border-radius:4.7rem;
   font-size:1rem; font-weight:600; width:7.9rem; top:1.3rem} */
.product-thumb .promo-tag,
.product-thumb .product-tag {
	background: var(--life-sand);
	color: #000000;
	font-family: var(--font-primary);
	font-size: 10px;
	font-weight: 600;
	line-height: 20px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	border-radius: 47px;
	padding: 0 8px;
	min-width: 79px;
	text-align: center;
}

.product-thumb .product-thumb-title {
	font-family: var(--font-primary);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0.01em;
}
.product-thumb .product-thumb-title a {color: #000000;}

.product-thumb .product-price-thumb {align-items: center;}
.product-thumb .product-price-value {font-size: 15px; font-weight: 600; color: #000000;}
.product-thumb .product-price-old-value {font-size: 11px; font-weight: 400; color: var(--text-gray);}
.product-thumb .product-short-installments {margin: 4px 0 0; color: #000000; font-size: 13px; font-weight: 400;}
.product-thumb .product-pix {order: 3; margin: 4px 0 0;}
.product-thumb .product-pix-value {font-size: 13px; font-weight: 400;}

.product-thumb .wishlist {display: flex; opacity: 1; background: transparent;}
.product-thumb .wishlist:hover {background: transparent;}
.product-thumb .wishlist svg {fill: #000000;}

/* botao COMPRAR do card — site: .comprar_text, pill preto solido, 12px */
.product-thumb .btn-product-thumb-purchase {
	background: #F4F4F4 !important;
	border: 1px solid rgba(0, 0, 0, 0.08) !important;
	color: #000000 !important;
	border-radius: 47px;
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 6px 24px;
	gap: 12px;
}
.product-thumb .btn-product-thumb-purchase:hover {
	background: #E7E7E7 !important;
	border-color: rgba(0, 0, 0, 0.14) !important;
	color: #000000 !important;
}
.product-thumb .btn-product-thumb-purchase svg {fill: #000000;}
.product-thumb .product-thumb-purchase .bootstrap-touchspin {
	background: #F4F4F4;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 47px;
	overflow: hidden;
}
.product-thumb .product-thumb-purchase .bootstrap-touchspin .btn,
.product-thumb .product-thumb-purchase .bootstrap-touchspin .form-control {
	background: transparent !important;
	border: none !important;
	color: #000000 !important;
	box-shadow: none !important;
}
.product-thumb .product-thumb-buttons .btn.btn-product-thumb.btn-product-thumb-view {
	background: #F4F4F4 !important;
	border: 1px solid rgba(0, 0, 0, 0.08) !important;
	color: #000000 !important;
	border-radius: 47px;
	font-size: 12px;
	padding: 6px 24px;
}
.product-thumb .product-thumb-buttons .btn.btn-product-thumb.btn-product-thumb-view:hover {
	background: #E7E7E7 !important;
	border-color: rgba(0, 0, 0, 0.14) !important;
	color: #000000 !important;
}

/* card do carrossel de vitrine — site: border 1px #eee, radius 2.1rem */
.product-list-content .swiper, .carousel-products-wrapper {border-radius: 21px;}

@media (max-width: 991px) {
	.product-thumb .caption {padding: 12px 6px;}
	.product-thumb .product-thumb-title {font-size: 13px;}
	.product-thumb .product-price-value {font-size: 14px;}
	.product-thumb .product-price-wrapper {margin: 0;}
}

/* =============================================================================
   VARIACOES — cor e tamanho
   site: swatch de cor = retangulo arredondado 2.1x2.7rem, radius 1.8rem,
         ativo com anel preto de 2px; branco recebe anel cinza;
         indisponivel recebe risco diagonal.
         chip de tamanho = 2.9x3.5rem, radius 1.4rem, selecao por contorno preto.
   ============================================================================= */
.variations .variant-button.variant-color,
.product-thumb .product-variation-wrapper .variant-button.variant-color {
	width: 21px;
	height: 27px;
	border-radius: 18px;
	border: 2px solid transparent;
	padding: 0;
	overflow: hidden;
	position: relative;
	transition: box-shadow 0.2s ease;
}
.variations .variant-button.variant-color.active,
.product-thumb .product-variation-wrapper .variant-button.variant-color.active {
	box-shadow: 0 0 0 2px #000000;
}
/* swatch branco precisa de contorno proprio para nao sumir no fundo */
.variations .variant-button.variant-color[style*="255, 255, 255"],
.variations .variant-button.variant-color[style*="#fff"] {
	box-shadow: 0 0 0 1px var(--gray);
}
/* variacao esgotada: risco diagonal, igual ao .colors:after do site */
.variations .variant-button.variant-color.disabled::after,
.variations .variant-button.variant-color.unavailable::after {
	content: '';
	position: absolute; top: 50%; left: 50%;
	width: 85%; height: 1px;
	background: #FFFFFF;
	transform: translate(-50%, -50%) rotate(-45deg);
}

.variations .variant-button:not(.variant-color) {
	min-width: 29px;
	height: 35px;
	border: 1px solid transparent;
	border-radius: 14px;
	background: #FFFFFF;
	color: #000000;
	font-family: var(--font-primary);
	font-size: 13px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	transition: all 0.3s ease;
}
.variations .variant-button:not(.variant-color):hover {border-color: var(--gray);}
.variations .variant-button:not(.variant-color).active {
	border: 1px solid #000000;
	background: #FFFFFF;
	color: #000000;
}

/* rotulo da opcao — site: .topic-title{font-size:1.2rem; font-weight:400} */
.variations .variant-group-label, .product-infos .topic-title {
	font-size: 12px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #000000;
	margin-bottom: 8px;
}

.product-thumb .product-thumb-variations {
	margin: 10px 0 12px;
	text-align: left;
}
.product-thumb .product-variation-wrapper {
	display: flex !important;
	flex-direction: column;
	width: 100%;
}
.product-thumb .product-variation-wrapper .variations {
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 100%;
	padding: 12px;
	background: rgba(244, 244, 244, 0.92);
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 8px;
}
.product-thumb .variants-group {margin: 0;}
.product-thumb .variant-group-label {
	margin-bottom: 8px;
	color: #000000;
	text-shadow: none;
}
.product-thumb .variant-selected-option {font-weight: 500;}
.product-thumb .variant-options-wrapper {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}
.product-thumb .variant-option-color .color-button.variant-button {
	width: 30px;
	height: 30px;
	border: 1px solid #FFFFFF;
	border-radius: 50%;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
	padding: 0;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.product-thumb .variant-option-color.active .color-button.variant-button,

.product-thumb .variant-option-color .color-button.variant-button:hover {transform: translateY(-1px);}
.product-thumb .variant-option-radio .variant-button {
	min-width: 44px;
	height: 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(0, 0, 0, 0.16);
	background: #FFFFFF;
}
.product-thumb .variant-option-radio .variant-button.active {
	border-color: #000000;
	box-shadow: inset 0 0 0 1px #000000;
}

/* =============================================================================
   HOME
   ============================================================================= */
.banners-home-gy {--bs-gutter-y: 0px;}   /* site: banner-grid com gap 0 */
.banners-home-gx {--bs-gutter-x: 0px;}

.carousel-categories .container {--container-xxl: 1920px; padding: 0;}
.carousel-categories .swiper {max-width: none;}
.carousel-categories .wrapper-bg-image {overflow: hidden; width: 100%;}
.carousel-categories .wrapper-bg-image::after {
	content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.28);
}
.carousel-categories .wrapper-bg-image img {max-width: none; transform: none;}
.carousel-categories .category-item:hover img {
	transform: scale(1.15);
	transition: transform 1.6s ease-out;
}
.carousel-categories .carousel-categories-title {
	position: absolute; top: 50%; left: 0; right: 0;
	transform: translateY(-50%);
	color: #FFFFFF;
	font-size: 18px;
	letter-spacing: 0.16em;
	margin: 0;
	text-align: center;
}
.carousel-categories .vowt-pagination {display: none;}
.carousel-categories .container-arrow {border: 1px solid #FFFFFF; background: transparent;}
.carousel-categories .container-arrow svg {fill: #FFFFFF;}
.carousel-categories .vowt-next {right: 12px;}
.carousel-categories .vowt-prev {left: 12px;}

.container-arrow {border: none; background: transparent;}
.container-arrow:hover, .swiper-button-disabled .container-arrow:hover {background: transparent;}
.container-arrow i {color: #000000;}
.icon-arrow {width: 15px; height: 12px; display: flex;}

.home .product-tabs .nav-link {
	font-family: var(--font-title);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	border-bottom: none !important;
}
.home .product-tabs .nav-link.active {
	color: #000000;
	border-bottom: 1px solid #000000 !important;
}
.home .product-tabs .product-list-link-tabs a {white-space: nowrap;}
.product-list-content {margin-bottom: 24px;}

.section-marquee {
	font-family: var(--font-title);
	font-weight: 200;
	color: #000000;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}
.section-marquee .swiper-slide-content::after {background: #000000; width: 8px; height: 8px;}
@media (max-width: 991px) {
	.section-marquee {font-size: 32px;}
	.section-marquee .swiper-slide-content::after {width: 6px; height: 6px;}
}

/* FAQ */
.questions {background: var(--gray-light); padding-bottom: var(--spacing-sections-home);}
.questions .container {max-width: 960px;}
.questions .heading-title {margin: 40px 0;}
.questions .accordion-item {border: none; background: transparent;}
.questions .accordion-item:not(:last-child) {margin-bottom: 8px;}
.questions .accordion-button {
	padding: 24px 28px;
	font-family: var(--font-primary);
	font-size: 14px;
	font-weight: 500;
	background: #FFFFFF;
	color: #000000;
	border-radius: 0 !important;
	box-shadow: none;
}
.questions .accordion-button::after {
	content: '\F4FE';
	font-family: bootstrap-icons;
	background-image: none;
	width: 24px; height: 24px;
	display: flex; align-items: center; justify-content: center;
	font-size: 18px;
}
.questions .accordion-button:not(.collapsed)::after {content: '\F2EA';}
.questions .accordion-body {
	padding: 0 28px 28px;
	background: #FFFFFF;
	color: var(--text-gray);
	font-size: 13px;
	line-height: 1.75;
}
@media (max-width: 991px) {
	.questions .accordion-item:not(:last-child) {margin-bottom: 12px;}
	.questions .accordion-button {font-size: 13px; padding: 16px 20px;}
	.questions .accordion-body {padding: 0 20px 20px;}
}

.depoiments .container {width: var(--container-small); max-width: 100%;}
.depoiments .depoiments-thumb {text-align: start; background: var(--gray-light);}
.depoiments .depoiment-stars {justify-content: start;}
.bi-star-fill {color: #000000;}

.feed-instagram .container {max-width: 100%; padding: 0;}

/* newsletter: bloco preto, botao pill vazado branco */
.section-newsletter {
	background: #000000;
	padding: 56px 0;

	.newsletter-title, .newsletter-description {
		color: #FFFFFF;
		font-family: var(--font-title);
		font-size: 28px;
		font-weight: 400;
		text-transform: uppercase;
		letter-spacing: 0.08em;
	}
	.newsletter-text {margin-bottom: 32px;}
	#form-newsletter {max-width: 900px;}
	.btn-newsletter {
		background: transparent;
		border: 1px solid #FFFFFF;
		color: #FFFFFF;
		border-radius: 47px;
		text-transform: uppercase;
		letter-spacing: 0.06em;
	}
	.btn-newsletter:hover, .btn-newsletter:active, .btn-newsletter:focus {
		background: #FFFFFF; color: #000000;
	}
	.newsletter-terms, .newsletter-terms a {color: #FFFFFF;}
	#newsletter-terms, #newsletter-terms::after {border-color: #FFFFFF;}
	#newsletter-terms:checked {border-color: #FFFFFF; background: #FFFFFF;}
}
@media (max-width: 991px) {
	.section-newsletter .newsletter-title,
	.section-newsletter .newsletter-description {font-size: 18px;}
}

/* =============================================================================
   FOOTER — site: fundo #dcdcdc com texto preto (nao e footer preto)
   ============================================================================= */
footer {margin-top: 0;}
footer .footer-info__title,
footer .footer-seal__title,
footer .social-media-title {
	font-family: var(--font-title);
	font-weight: 400;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-bottom: 24px;
}
footer .footer-list {margin-bottom: 16px;}
footer .footer-informations p {color: #000000; font-size: 13px; line-height: 1.75; max-width: 320px;}
footer .list-contact__item i {color: #000000; font-size: 16px;}
footer .list-contact__label {display: none;}
footer .footer-seals-safe {display: flex; align-items: center; justify-content: end;}
footer .footer-seals-payment-methods {display: flex; align-items: center; justify-content: start;}
footer .footer-seals-safe img {height: 28px;}
footer .vowt svg g path {fill: #000000;}
@media (max-width: 991px) {
	footer .footer-seals-safe, footer .footer-seals-payment-methods {justify-content: center;}
}

/* =============================================================================
   CATEGORIA
   ============================================================================= */
.category-row {--bs-gutter-y: 1rem; --bs-gutter-x: 1rem;}
.filter {border: none;}
.btn.btn-toolbar,
#productToolbar .nice-select {
	padding: 11px 28px 11px 16px;
	background: #FFFFFF;
	border: 1px solid var(--life-field-border);
	border-radius: 0;
	font-family: var(--font-primary);
	font-size: 12px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #000000;
}
.filter .filter-title, .filter .accordion-button {
	font-family: var(--font-title);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 13px;
	font-weight: 400;
}
@media (max-width: 991px) {
	.category-header {flex-direction: column;}
	.btn.btn-toolbar, #productToolbar .nice-select {padding: 11px 24px 11px 12px;}
}

/* =============================================================================
   PAGINA DE PRODUTO
   site: h1 3.2rem/400 | reference 1.2rem #dcdcdc | blocos com gap 2.4rem
         CTA pill vazado de 5.5rem de altura, 1.8rem, caixa alta, 100% de largura
   ============================================================================= */
@media (min-width: 992px) {
	.product-images-grid {display: block;}
	.product-images-carousel {display: none;}
}

.product-column-right {padding-left: 24px;}
#product h1 {
	font-family: var(--font-title);
	font-weight: 400;
	font-size: 32px;
	line-height: 1.2;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #000000;
}
.product-infos {
	display: block;
	font-size: 12px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
@media (max-width: 991px) {
	.product-column-right {padding: 0;}
	#product h1 {font-size: 22px;}
}

/* CTA principal — pill vazado, alto e de largura total, como no site.
   Observacao: o site declara letter-spacing:22%, que e invalido em CSS e o
   navegador descarta; aqui virou 0.06em para render o mesmo efeito pretendido. */
.btn.btn-add-cart,
.btn.btn-add-cart:focus {
	background: transparent;
	border: 1px solid #000000;
	color: #000000;
	border-radius: 47px;
	height: 55px;
	width: 100%;
	font-size: 18px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	gap: 12px;
}
.btn.btn-add-cart:hover,
.btn.btn-add-cart:active {
	background: #000000;
	border-color: #000000;
	color: #FFFFFF;
}
.btn.btn-add-cart i {display: none;}
.btn.btn-add-cart svg {width: 16px; height: 21px; fill: #000000;}
.btn.btn-add-cart:hover svg {fill: #FFFFFF;}
.btn.btn-product-wishlist {display: none;}
@media (max-width: 991px) {
	.btn.btn-add-cart {height: 48px; font-size: 15px;}
}

.product-price {gap: 8px;}
.product-price .product-price-value {font-size: 15px; font-weight: 600; color: #000000;}
.product-price .product-price-old-value {color: var(--text-gray); font-size: 11px; font-weight: 400;}
.product-price .product-short-installments {order: 3; color: #000000; font-size: 13px; font-weight: 400;}
.product-price .product-short-installments i {display: none;}
.product-price .product-pix {background: transparent; padding: 0; margin: 0;}
.product-price .product-pix-text {color: var(--text-gray);}
.product-price .product-pix-icon {display: none;}
.product-price .product-tag {background: var(--life-sand); color: #000000;}
#product .btn-installment {color: var(--text-gray); font-size: 13px;}

/* link "guia de medidas" — site: .btn-medidas 1rem/600 com sublinhado animado */
.btn-medidas,
.link-tabela-medidas,
a[href*="medida"] {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-left: auto;
	color: #000000;
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	position: relative;
	padding-bottom: 4px;
}
.btn-medidas::after,
.link-tabela-medidas::after {
	content: '';
	position: absolute; left: 0; bottom: 0;
	width: 100%; height: 1px;
	background: #000000;
	transform: scaleX(1);
	transform-origin: 0 50%;
	transition: transform 0.4s ease;
}
@media (min-width: 992px) {
	.btn-medidas::after, .link-tabela-medidas::after {transform: scaleX(0);}
	.btn-medidas:hover::after, .link-tabela-medidas:hover::after {transform: scaleX(1);}
}

#productAccordion .accordion-item {
	border: none;
	border-bottom: 1px solid var(--gray);
	background: transparent;
	border-radius: 0;
}
#productAccordion .accordion-button {
	padding: 24px 0;
	background: transparent;
	color: #000000;
	font-family: var(--font-title);
	font-size: 13px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	box-shadow: none;
}
#productAccordion .accordion-button::after {
	background-image: none;
	content: '\F2EA';
	font-family: bootstrap-icons;
	transform: none;
	font-size: 18px;
}
#productAccordion .accordion-button.collapsed::after {content: '\F4FE';}
#productAccordion .accordion-body {padding: 0 0 28px;}

#product .product-description,
#product-product .product-description {
	margin: 0;
	font-size: 13px;
	color: var(--text-gray);
	line-height: 1.75;
}
.product-qualities .product-quality-title {font-size: 12px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.04em;}
.product-qualities .product-quality-icon svg {width: 40px; height: 40px;}

#product .shipping-simulator .shipping-simulator-input {background: transparent; border-radius: 0;}
#product .shipping-simulator-bottom {display: flex;}
.shipping-simulator-tag {display: none;}
.btn-shipping-simulator,
.btn-shipping-simulator:hover,
.btn-shipping-simulator:active,
.btn-shipping-simulator:focus {background: #000000 !important; color: #FFFFFF; border-radius: 47px;}

.product-attributes {display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;}
.product-attribute {background: var(--gray-light); padding: 8px 12px; display: flex; align-items: center; gap: 4px;}
.product-attribute-name {font-weight: 500; font-size: 14px;}
.product-attribute-image {max-width: 38px;}

@media (max-width: 991px) {
	#review_write {text-align: center;}
	#review_write div:has(.bi-star) {justify-content: center;}
}

/* =============================================================================
   COMPRA RAPIDA (fast buy) — o motor de pedido do lojista no atacado.
   O template embute estilo italico/uppercase pesado por padrao; neutralizado
   aqui para caber no preto e branco da marca.
   ============================================================================= */
.btn.btn-open-fast-purchase {
	background: #000000 !important;
	color: #FFFFFF !important;
	font-family: var(--font-title) !important;
	font-style: normal !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border-radius: 47px !important;
	padding: 14px 24px !important;
}
.btn.btn-open-fast-purchase:hover {background: #363636 !important;}
.icon-fast-purchase {fill: #FFFFFF;}

.fast-purchase .offcanvas {
	border-radius: 0 !important;
	margin: 0 !important;
	max-width: 600px;
	transform: translateX(100%);
}
.fast-purchase .offcanvas-header {background: #000000 !important; border-radius: 0 !important;}
.fast-purchase .offcanvas-title {
	font-family: var(--font-title) !important;
	font-style: normal !important;
	font-weight: 400 !important;
	font-size: 20px !important;
	letter-spacing: 0.08em;
	color: #FFFFFF !important;
	text-transform: uppercase;
}
.fast-purchase .btn-close {position: static; filter: invert(1); opacity: 1;}
.fast-purchase .offcanvas-footer {
	background: var(--gray-light) !important;
	border-radius: 0 !important;
	color: var(--text-gray);
}
.fast-purchase .fast-purchase-total-title {font-size: 14px; font-weight: 500; color: #000000;}
.fast-purchase .fast-purchase-total {color: #000000 !important; font-size: 22px; font-weight: 600;}
.fast-purchase .product-thumb img {border-radius: 0;}
@media (max-width: 991px) {
	.fast-purchase .offcanvas {max-width: 100vw;}
	.fast-purchase .offcanvas-header, .fast-purchase .offcanvas-footer {border-radius: 0 !important;}
}

/* =============================================================================
   DIVERSOS
   ============================================================================= */
.product-thumb .countdown-timer {bottom: 32px;}
.video-commerce-carousel .container {max-width: var(--container-small);}
.pv-trigger {border-radius: 47px;}
#product-buttons-cart {display: flex; flex-direction: column; gap: 12px;}
.homepage-card-title {font-size: 25px!important;}

.homepage-card-description {min-height: 98px;}
.product-thumb-purchase-wrapper {display: block;}
.product-thumb-bottom{left: 0}
#header .logo {margin: 15px;}