/* Página de produto replicada da PDP oficial do FlexStyle (medida em 16/10/2026, 1280 e 390 px).
   Fontes: o CSS da referência pede DM Sans e Proxima Nova, mas nenhuma das duas carrega lá (medido em
   document.fonts): o cliente vê a fonte do aparelho (Helvetica no iPhone/Mac, Roboto no Android). Aqui igual.
   Só a Open Sans (bloco da nota) carrega de verdade.
   Cores medidas: texto #000, cinza #6D6D6D, marrom #391F1B, verde estoque #008537, estrela #FAB400,
   caixas #FAFAFA / #F9F9F9, nota #303633 sobre #F5F6F8. Celular primeiro. */
.fx-pdp { --fx-marrom: #391F1B; --fx-cinza: #6D6D6D; --fx-verde: #008537; --fx-estrela: #FAB400; --fx-prox: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font: 400 16px/1.15 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #000; }
.fx-pdp p { margin: 0; }
.fx-pdp h1, .fx-pdp h2, .fx-pdp h3, .fx-pdp h4 { font-family: inherit; margin: 0; }
.fx-pdp strong { font-weight: 600; }

/* ---------- 1. galeria + painel */
.fx-gal { position: relative; }
.fx-gal__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.fx-gal__track::-webkit-scrollbar { display: none; }
.fx-gal__item { flex: 0 0 100%; scroll-snap-align: center; background: #fff; }
.fx-gal__item img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; }
.fx-thumbs { display: flex; gap: 8px; padding: 10px 10px 0; overflow-x: auto; scrollbar-width: none; }
.fx-thumbs::-webkit-scrollbar { display: none; }
.fx-thumb { flex: 0 0 auto; width: 64px; height: 64px; padding: 3px; border: 2px solid #E5E5E5; border-radius: 8px; background: #fff; cursor: pointer; }
.fx-thumb img { width: 100%; height: 100%; object-fit: contain; }
.fx-thumb.is-on { border-color: #000; }

.fx-info { padding: 30px 10px 0; }
.fx-title { font-size: 24px; font-weight: 600; line-height: 1.17; }
.fx-rate { display: inline-flex; align-items: center; gap: 4px; margin-top: 10px; text-decoration: none; color: var(--fx-estrela); font-size: 11px; }
.fx-stars { display: inline-flex; gap: 1px; color: var(--fx-estrela); }
.fx-star { position: relative; width: 18px; height: 18px; }
.fx-star svg { width: 18px; height: 18px; display: block; }
.fx-star__bg { color: #E3E3E3; }
.fx-star__fg { position: absolute; inset: 0; overflow: hidden; }
.fx-desc { margin-top: 20px !important; color: var(--fx-cinza); line-height: 1.15; }
.fx-hr { border: 0; border-top: 1px solid #E5E5E5; margin: 25px 0; }
.fx-price p:first-child { line-height: 36px; }
.fx-price__v { font-size: 24px; font-weight: 600; }
.fx-price__r { font-size: 12px; }
.fx-price__l { margin-top: 10px !important; }
.fx-pill { display: inline-block; margin-top: 12px !important; padding: 10px 15px; border-radius: 25px; box-shadow: 0 0 8px rgba(0, 0, 0, .2); font-size: 12px; font-weight: 600; line-height: 1.15; color: #353535; }
.fx-buy { display: flex; align-items: center; justify-content: center; width: 100%; height: 60px; margin-top: 20px; padding: 0 30px; border: 2px solid #000; border-radius: 50px; background: #000; color: #fff; font: 700 22px/1 var(--fx-prox); letter-spacing: .02em; cursor: pointer; transition: background .2s, color .2s; }
.fx-buy:hover { background: #fff; color: #000; }
.fx-stock { padding-top: 10px; font-size: 14px; font-weight: 500; line-height: 19px; color: var(--fx-verde); }
.fx-accs { margin-top: 10px; }
.fx-acc { border-bottom: 1px solid #E5E5E5; }
.fx-acc summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 10px; font: 600 20px/23px var(--fx-prox); cursor: pointer; }
.fx-acc summary::-webkit-details-marker { display: none; }
.fx-acc__ico { position: relative; width: 14px; height: 14px; flex: 0 0 auto; }
.fx-acc__ico::before, .fx-acc__ico::after { content: ""; position: absolute; left: 0; top: 6px; width: 14px; height: 2px; background: #000; }
.fx-acc__ico::after { transform: rotate(90deg); transition: transform .2s; }
.fx-acc[open] .fx-acc__ico::after { transform: rotate(0); }
.fx-acc__body { padding: 0 10px 20px; font-size: 16px; line-height: 1.4; color: #000; }
.fx-acc__body p + p { margin-top: 12px; }
.fx-acc__body ul { margin: 8px 0 0; padding-left: 20px; }

/* ---------- 2. abas */
.fx-tabs { display: flex; justify-content: center; gap: 10px; margin: 60px 0 22px; }
.fx-tabs a { display: inline-flex; align-items: center; height: 32px; padding: 0 16px; border: 1px solid #888; border-radius: 36px; color: var(--fx-cinza); font-size: 14px; font-weight: 500; text-decoration: none; }
.fx-tabs a.is-on { background: #000; border-color: #000; color: #fff; }

/* ---------- 3. carrossel infinito de takes 9:16 */
.fx-reel { overflow: hidden; padding: 4px 0; }
.fx-reel__track { display: flex; gap: 8px; width: max-content; animation: fx-giro 48s linear infinite; }
.fx-reel__item { flex: 0 0 auto; width: 190px; aspect-ratio: 9 / 16; border-radius: 12px; overflow: hidden; background: #EFEFEF; }
.fx-reel__item video { display: block; width: 100%; height: 100%; object-fit: cover; }
@keyframes fx-giro { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 4px)); } }
@media (prefers-reduced-motion: reduce) { .fx-reel { overflow-x: auto; } .fx-reel__track { animation: none; } }

/* ---------- 4. faixa dos cachos */
.fx-banner { position: relative; color: var(--fx-marrom); font-family: var(--fx-prox); }
.fx-banner__img { width: 100%; height: auto; aspect-ratio: 1600 / 793; object-fit: cover; }
.fx-banner__txt { padding: 15px 30px 0; }
.fx-banner__h { font-size: 36px; font-weight: 500; line-height: 1; }
.fx-banner__sub { margin-top: 30px !important; font-size: 20px; line-height: 1.2; }
.fx-chips { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 10px; }
.fx-chips li { padding: 20px; border-radius: 8px; background: #fff; box-shadow: 0 0 20px rgba(0, 0, 0, .1); font-size: 14px; line-height: 16.8px; }

/* ---------- 5. acessórios incluídos */
.fx-accesorios { padding: 64px 30px 0; color: var(--fx-marrom); }
.fx-accesorios__h { text-align: center; font-size: 20px; font-weight: 400; line-height: 24px; }
.fx-cards { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 80px 20px; padding-top: 90px; max-width: 1115px; }
.fx-card { position: relative; padding: 60px 10px 20px; border-radius: 10px; background: #FAFAFA; text-align: center; color: #000; }
.fx-card img { position: absolute; left: 50%; top: -60px; width: 100px; height: 100px; object-fit: contain; transform: translateX(-50%); }
.fx-card h3 { font-size: 16px; font-weight: 600; line-height: 1.2; }
.fx-card p { margin-top: 12px !important; font-size: 12px; line-height: 1.2; }

/* ---------- 6. lado a lado */
.fx-side { display: flex; flex-direction: column; margin-top: 64px; color: var(--fx-marrom); }
.fx-side__img { order: -1; width: 100%; height: auto; aspect-ratio: 790 / 562; object-fit: cover; }
.fx-side__txt { padding: 30px 16px 0; }
.fx-side__txt h2 { font-size: 36px; font-weight: 600; line-height: 1.07; }
.fx-side__txt p { margin-top: 20px !important; font-size: 16px; line-height: 19.2px; }

/* ---------- 7. especificações */
.fx-specs { margin: 50px auto 0; max-width: 1115px; padding: 30px; background: #F9F9F9; }
.fx-specs h3 { font-size: 24px; font-weight: 600; line-height: 28.8px; }
.fx-specs__grid { display: grid; gap: 25px; margin: 30px 0 0; }
.fx-specs dt { font-size: 18px; font-weight: 600; line-height: 21.6px; }
.fx-specs dd { margin: 10px 0 0; font-size: 14px; line-height: 16.8px; max-width: 330px; }

/* ---------- 8. nota real */
.fx-rev { padding: 60px 30px 0; text-align: center; font-family: 'Open Sans', sans-serif; color: #303633; }
.fx-rev__rot { font-size: 16px; }
.fx-rev__h { margin-top: 10px !important; font-size: 20px; font-weight: 400; line-height: 1.15; }
.fx-rev__pill { display: inline-block; margin-top: 16px !important; padding: 8px 16px; border-radius: 40px; background: #F5F6F8; font-size: 14px; line-height: 16px; }
.fx-rev__box { max-width: 320px; margin: 40px auto 0; padding: 30px; border: 1px solid #D9D9D9; text-align: left; }
.fx-rev__nota { font: 500 48px/1.2 var(--fx-prox); }
.fx-rev__stars { display: flex; align-items: center; gap: 6px; margin-top: 6px !important; font-size: 11px; color: #777; }
.fx-bars { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 7px; }
.fx-bars li { display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 14px; }
.fx-bars li > span:first-child { width: 26px; flex: 0 0 auto; }
.fx-bar { flex: 1; height: 8px; border: 1px solid #DDD; border-radius: 5px; background: #FAFAFA; overflow: hidden; }
.fx-bar span { display: block; height: 100%; background: var(--fx-estrela); border-radius: 0 10px 10px 0; }
.fx-rev__rec { margin-top: 40px !important; font: 400 15px/1.1 var(--fx-prox); color: var(--fx-verde); }

/* ---------- 9. por que comprar */
.fx-why { padding: 80px 25px 40px; }
.fx-why__h { font-size: 38px; font-weight: 600; line-height: 1; }
.fx-why__list { list-style: none; margin: 30px 0 0; padding: 0; }
.fx-why__list li { padding: 25px 4px; border-bottom: 1px solid #DDD; text-align: center; }
.fx-why__list img { width: 44px; height: 44px; margin: 0 auto; filter: brightness(0); } /* ícones em preto (pedido do Luiz) */
.fx-why__list h4 { margin-top: 15px; font-size: 25px; font-weight: 600; line-height: 1.15; }
.fx-why__list p { margin-top: 12px !important; font-size: 16px; line-height: 1.15; }

/* ---------- barra de compra (celular) */
.nd-float.fx-bar-buy { display: block; padding: 12px 14px calc(12px + env(safe-area-inset-bottom)); background: #fff; box-shadow: 0 -4px 20px rgba(0, 0, 0, .12); }
.fx-buy.fx-buy--bar { margin: 0; height: 60px; font-size: 22px; }
body.fx-com-barra .nd-footer { padding-bottom: 96px; }

/* faixa dos cachos: a partir de 750 px o texto fica SOBRE a foto (pedido do Luiz, 16/10/2026). Em 1280 px ou mais
   os números são os medidos na referência (48px, 40px, chips 360px); entre 750 e 1279 tudo escala com a largura
   para caber dentro da foto (a referência só sobrepõe a partir de 1024 e, em 1024, os chips vazam da foto). */
@media (min-width: 750px) {
	.fx-banner__txt { position: absolute; left: 10%; top: 10%; width: clamp(260px, 30.4vw, 389px); padding: 0; }
	.fx-banner__h { font-size: clamp(28px, 3.75vw, 48px); line-height: 1; }
	.fx-banner__sub { margin-top: clamp(14px, 3.125vw, 40px) !important; font-size: clamp(15px, 1.5625vw, 20px); }
	.fx-chips { width: clamp(240px, 28.125vw, 360px); margin-top: clamp(10px, 1.5625vw, 20px); gap: clamp(6px, .78vw, 10px); }
	.fx-chips li { padding: clamp(9px, 1.5625vw, 20px) clamp(12px, 1.5625vw, 20px); font-size: clamp(12.5px, 1.09vw, 14px); line-height: 1.2; }
}

/* ---------- computador (medido em 1280) */
@media (min-width: 1024px) {
	.fx-top { padding-top: 30px; }
	.fx-top { display: grid; grid-template-columns: minmax(0, 1fr) 344px; gap: 57px; padding-right: 20px; align-items: start; }
	.fx-gal__track { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; overflow: visible; }
	.fx-thumbs { display: none; }
	.fx-info { padding: 0; }
	.fx-accs { margin-top: 0; }
	.fx-acc summary { padding: 25px 10px; }
	.fx-tabs { margin: 100px 0 20px; gap: 12px; }
	.fx-tabs a { height: 40px; padding: 0 20px; font-size: 16px; }
	.fx-reel__track { gap: 12px; animation-duration: 60s; }
	.fx-reel__item { width: 260px; }
	@keyframes fx-giro { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 6px)); } }
	.fx-accesorios { padding: 64px 30px 0; }
	.fx-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 27px; padding-top: 130px; }
	.fx-card { padding: 100px 35px 20px; min-height: 274px; }
	.fx-card img { top: -100px; width: 188px; height: 188px; }
	.fx-card h3 { font-size: 20px; line-height: 24px; }
	.fx-card p { margin-top: 15px !important; font-size: 14px; line-height: 16.8px; }
	.fx-side { display: grid; grid-template-columns: 1fr 1fr; align-items: center; margin-top: 120px; }
	.fx-side__img { order: 0; }
	.fx-side__txt { padding: 0 60px 0 120px; }
	.fx-side__txt h2 { font-size: 48px; line-height: 48px; max-width: 380px; }
	.fx-side__txt p { max-width: 400px; margin-top: 37px !important; }
	.fx-specs { margin-top: 65px; }
	.fx-specs__grid { grid-template-columns: repeat(3, 1fr); gap: 32px 40px; }
	.fx-rev { padding-top: 90px; }
	.fx-rev__h { font-size: 24px; font-weight: 700; }
	.fx-why { padding: 110px 60px 60px; }
	.fx-why__list { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 45px; }
	.fx-why__list li { padding: 10px 25px 30px; border-bottom: 0; border-left: 1px solid #DDD; }
	.fx-why__list li:first-child { border-left: 0; }
	.nd-float.fx-bar-buy { display: none; }
	body.fx-com-barra .nd-footer { padding-bottom: 0; }
}

/* ---------- logo Sereno Beauty no cabeçalho (só nesta página) */
.nd-header__logo img.nd-header__logo--produto { height: 46px; width: auto; }
@media (min-width: 750px) { .nd-header__logo img.nd-header__logo--produto { height: 52px; } }

/* ---------- preto e branco nesta página (pedido do Luiz, 16/10/2026): o verde e o âmbar da loja viram preto
   no letreiro, cabeçalho, rodapé e formulário; texto que ficava escuro sobre o âmbar passa a branco. */
body.fx-pb { --verde: #000; --verde-hoja: #222; --terra: #000; --terra-borde: #000; --mostaza: #000; }
body.fx-pb .nd-badge, body.fx-pb .nd-buy, body.fx-pb .nd-btn, body.fx-pb .nd-submit { color: #fff; }
body.fx-pb .nd-offer.is-on, body.fx-pb .nd-bump, body.fx-pb .nd-rec__save { background: #F2F2F2; }
body.fx-pb .fx-pdp { --fx-verde: #000; }

/* faixa sem a foto (pedido do Luiz, 16/10/2026): título e quadros ficam no fluxo, centralizados */
.fx-banner--sem-img { padding: 50px 0 10px; }
.fx-banner--sem-img .fx-banner__txt { position: static; width: auto; max-width: 560px; margin: 0 auto; padding: 0 30px; text-align: center; }
.fx-banner--sem-img .fx-banner__h { font-size: 36px; line-height: 1; }
.fx-banner--sem-img .fx-banner__sub { margin-top: 24px !important; font-size: 20px; }
.fx-banner--sem-img .fx-chips { width: auto; margin: 20px auto 0; gap: 10px; }
.fx-banner--sem-img .fx-chips li { padding: 20px; font-size: 14px; }
@media (min-width: 750px) { .fx-banner--sem-img .fx-banner__h { font-size: 48px; } .fx-banner--sem-img .fx-chips { width: 420px; } }