/** Shopify CDN: Minification failed

Line 8896:11 Unexpected "*"

**/
/* ============================================
   ENISSATI — Custom overrides
   Aplicados sobre o tema Focal/Krunkers para
   alinhar ao DNA editorial Enissati.
   ============================================ */

/* ============================================
   1 · SLIDESHOW HERO — hierarchy editorial
   Aplicado via ui-ux-pro-max:
   - Ratio tipográfico: 12 → 48 (eyebrow → headline)
   - Body/lead substituído por subhead 16-18px
   - Button 14px com touch target 44×44 (a11y)
   ============================================ */

/* Subheading = eyebrow letterspaced chocolat */
.slideshow .heading.heading--small {
  font-family: var(--text-font-family);
  font-weight: 600;
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: rgb(122, 76, 50);
  margin-bottom: 0 !important;
  display: inline-block;
}

/* Title — mais contido e elegante (era 40-68px, virou 32-48px) */
.slideshow .heading.heading--large,
.slideshow h3.heading {
  font-family: var(--heading-font-family);
  font-weight: 400;
  font-size: clamp(32px, 3.6vw, 48px);
  line-height: 1.1;
  letter-spacing: -0.5px;
  color: rgb(36, 31, 33);
  margin-bottom: 10px !important;
  max-width: 14ch;
}

/* Frase de assurance entre título e botão */
.slideshow .text-container > p {
  font-size: 15px;
  line-height: 1.6;
  color: rgb(58, 44, 30);
  opacity: 0.85;
  margin-bottom: 28px;
  max-width: 42ch;
}

/* Botão primário do hero — mais discreto, com altura touch friendly */
.slideshow .button {
  padding: 16px 32px !important;
  font-size: 13px !important;
  letter-spacing: 1.8px !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
  min-height: 48px;
  border-radius: 9999px !important;
}

/* Container de texto com largura mais generosa para respiro */
.slideshow .content-box.content-box--text-middle_left,
.slideshow .content-box.content-box--middle_left {
  max-width: 520px;
}

/* Compensar o header transparente —
   o content-box do slideshow é centralizado com top:50% (ver custom_css do slideshow),
   isso ignora a altura do header. Empurra o conteúdo pra baixo metade da altura do header.
   Header desktop: ~84px → offset 42px
   Header mobile:  ~72px → offset 36px
*/
/* Hero começa no topo absoluto da página, enquanto o header fica sobreposto. */
.shopify-section--slideshow,
.shopify-section--slideshow + * {
  margin-top: 0 !important;
}
.shopify-section--slideshow:first-of-type,
#main > .shopify-section:first-child {
  margin-top: 0 !important;
}

#main > .shopify-section--slideshow:first-child {
  margin-top: 0 !important;
  margin-bottom: 0;
}

@media (max-width: 740px) {
  #main > .shopify-section--slideshow:first-child {
    margin-top: 0 !important;
    margin-bottom: 0;
  }
}

/* Padding interno do slide pra conteúdo respirar com header pill flutuante */
.slideshow__slide-inner {
  padding-top: 90px !important;
  padding-bottom: 60px !important;
}
@media (min-width: 1024px) {
  .slideshow__slide-inner {
    padding-top: 110px !important;
    padding-bottom: 80px !important;
  }
}

@media (max-width: 789px) {
  .slideshow .heading.heading--large,
  .slideshow h3.heading {
    font-size: 30px;
    line-height: 1.08;
  }

  #main > .shopify-section--slideshow:first-child .slideshow__slide-inner {
    padding-top: 0 !important;
    padding-bottom: 36px !important;
  }

  #main > .shopify-section--slideshow:first-child .slideshow__text-wrapper,
  #main > .shopify-section--slideshow:first-child .content-box {
    width: 100% !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }

  #main > .shopify-section--slideshow:first-child .content-box > * {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ============================================
   1.1 · LAYOUTS DO HERO ENISSATI
   Setting: enissati_layout
   - fullbleed (default Focal): imagem fundo, texto overlay
   - image-right: split 50/50, texto esquerda + imagem direita
   - image-left: split 50/50, imagem esquerda + texto direita
   - image-center: imagem centralizada, texto abaixo
   ============================================ */

/* IMAGE-RIGHT e IMAGE-LEFT — split 50/50 */
@media (min-width: 1024px) {
  .slideshow--enissati-image-right .slideshow__slide-inner,
  .slideshow--enissati-image-left .slideshow__slide-inner {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
  }
  /* Imagem ocupa metade do hero */
  .slideshow--enissati-image-right .slideshow__image-wrapper,
  .slideshow--enissati-image-left .slideshow__image-wrapper {
    position: relative !important;
    grid-column: 2;
    height: 100%;
    border-radius: 14px;
    overflow: hidden;
  }
  .slideshow--enissati-image-left .slideshow__image-wrapper {
    grid-column: 1;
  }
  /* Texto/conteúdo na metade oposta */
  .slideshow--enissati-image-right .slideshow__text-wrapper,
  .slideshow--enissati-image-left .slideshow__text-wrapper {
    grid-column: 1;
    grid-row: 1;
    padding: 0 20px !important;
  }
  .slideshow--enissati-image-left .slideshow__text-wrapper {
    grid-column: 2;
  }
  /* Content-box em flow normal pro texto */
  .slideshow--enissati-image-right .content-box,
  .slideshow--enissati-image-left .content-box {
    position: relative !important;
    transform: none !important;
    max-width: 480px !important;
  }
}

/* IMAGE-CENTER — imagem topo + texto abaixo */
@media (min-width: 1024px) {
  .slideshow--enissati-image-center .slideshow__slide-inner {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .slideshow--enissati-image-center .slideshow__image-wrapper {
    position: relative !important;
    width: 60%;
    max-width: 720px;
    margin: 0 auto 40px;
    border-radius: 14px;
    overflow: hidden;
  }
  .slideshow--enissati-image-center .slideshow__text-wrapper {
    text-align: center;
  }
  .slideshow--enissati-image-center .content-box {
    margin: 0 auto;
    text-align: center;
  }
}

/* Mobile: todos os layouts viram stack vertical */
@media (max-width: 1023px) {
  .slideshow--enissati-image-right .slideshow__slide-inner,
  .slideshow--enissati-image-left .slideshow__slide-inner,
  .slideshow--enissati-image-center .slideshow__slide-inner {
    display: flex !important;
    flex-direction: column;
  }
}

/* Frase de assurance em cinza sutil sob o botão */
.slideshow .text-container > *:last-child {
  font-size: 12px;
  opacity: 0.7;
  margin-top: 16px;
}

/* ============================================
   2 · HEADER — cleanup editorial + hover branco
   ============================================ */

/* HEADER PILL FLUTUANTE — estilo Kanva
   - Position fixed: sobrepõe o hero (hero atrás)
   - Pill format: border-radius totalmente arredondado
   - Contido com margem horizontal nas bordas
*/
.shopify-section--header,
#shopify-section-header,
[data-section-type="header"] {
  position: fixed !important;
  top: 32px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: calc(100% - 48px) !important;
  max-width: 1400px !important;
  margin: 0 !important;
  z-index: 100 !important;
  transition: top 0.3s ease, box-shadow 0.3s ease;
}

.header {
  background-color: #FFFFFF !important;
  border-radius: 9999px !important;
  box-shadow: 0 2px 16px rgba(36, 31, 33, 0.08);
  padding: 4px 28px !important;
  border-bottom: none !important;
  transition: box-shadow 0.3s ease;
}
/* Páginas !== home: padding interno maior pra compensar a falta de slideshow
   atrás (sem isso o header parece pequeno visualmente). */
body:not(.template-index) .header {
  padding: 14px 28px !important;
}
/* Páginas !== home: padding-top no <main> pra conteúdo não ficar embaixo do header fixed. */
body:not(.template-index) #main {
  padding-top: 110px;
}
@media (max-width: 740px) {
  body:not(.template-index) #main { padding-top: 80px; }
}

.header:hover {
  box-shadow: 0 4px 20px rgba(36, 31, 33, 0.12);
}

/* Remover padding do wrapper interno do header */
.header__wrapper {
  padding: 0 !important;
}

/* Logo dimensão equilibrada */
.header__logo-svg {
  width: 150px !important;
}
.header__logo-image {
  max-height: 48px !important;
}

/* Nav links mais finos */
.header__inline-navigation .header__linklist-item {
  font-size: 11px !important;
  letter-spacing: 1.6px !important;
}

/* Ícones mais discretos */
.header__icon-wrapper {
  font-size: 13px !important;
}

/* Mobile */
@media (max-width: 740px) {
  .shopify-section--header,
  #shopify-section-header,
  [data-section-type="header"] {
    width: calc(100% - 32px) !important;
    top: 12px !important;
  }
  .header {
    /* Lateral 6px (ícones perto da borda) + vertical 12px pra dar respiro ao pill (mobile) */
    padding: 12px 6px !important;
  }
  .header__logo-svg { width: 120px !important; }

}


/* Spacing dos itens do menu desktop */
.header__inline-navigation .header__linklist-item {
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 500;
}

/* Ícones direita um pouco mais espaçados */
.header__icon-list {
  gap: 4px;
}

/* Logo SVG inline — respeita currentColor */
.header__logo-svg {
  display: inline-block;
  width: 180px;
  max-width: 100%;
  color: #241F21; /* encre — usa currentColor no SVG */
  line-height: 0;
}
.header__logo-svg svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Logo no header transparente sobre hero crème */
.header--transparent .header__logo-svg,
[data-section-type="header"][data-transparent="true"] .header__logo-svg {
  color: #241F21;
}

@media (max-width: 740px) {
  .header__logo-svg { width: 130px; }
}

/* Header logo (mobile): centralizar verticalmente com os ícones.
   .header__logo-svg era inline-block → o SVG assentava na baseline e ficava
   ~4px acima do centro dos ícones (hambúrguer/busca/carrinho). Flex align-center corrige.
   min-height restaura a altura do pill (o flex tinha encolhido o wrapper 26→18px → header fino). */
@media (max-width: 740px) {
  .header__logo-link { display: flex !important; align-items: center !important; min-height: 26px !important; }
  .header__logo-svg { display: flex !important; align-items: center !important; }
}

/* Slideshow (mobile): botões do hero mais altos — estavam finos (44px → ~52px).
   Specificity alta (0,3,1) pra vencer a regra base do .button. */
@media (max-width: 740px) {
  .slideshow__text-wrapper .button-group__wrapper a.button {
    padding-top: 18px !important;
    padding-bottom: 18px !important;
  }
}

/* ============================================
   3 · ANNOUNCEMENT BAR — eyebrow style
   ============================================ */

.announcement-bar {
  font-family: var(--text-font-family);
  letter-spacing: 2.5px;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 400;
}

/* ============================================
   4 · BUTTONS GLOBAIS — refinamento
   ============================================ */

.button {
  letter-spacing: 1.2px;
  font-weight: 500;
}

/* Hover lift sutil em botões primários */
.button--primary:hover,
.button[data-type="primary"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(0, 172, 177, 0.18);
}

/* ============================================
   5 · UTILS — filete ornamental dourado
   ============================================ */

.enissati-filete {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: rgb(202, 164, 109);
  font-size: 13px;
  margin: 32px 0;
}
.enissati-filete::before,
.enissati-filete::after {
  content: '';
  flex: 0 1 80px;
  height: 1px;
  background: rgb(202, 164, 109);
  opacity: 0.6;
}

.enissati-eyebrow {
  font-family: var(--text-font-family);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: rgb(122, 76, 50);
}

/* ============================================
   6 · FORMS — input fields mais editoriais
   ============================================ */

.input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
textarea {
  border-radius: 6px !important;
}

/* ============================================
   7 · PRODUCT CARDS — tipografia
   ============================================ */

.product-item__title,
.product-card__name {
  font-family: var(--heading-font-family);
  font-weight: 400;
  letter-spacing: -0.3px;
}

/* ============================================
   8 · MOBILE — ajustes responsivos
   ============================================ */

@media screen and (max-width: 740px) {
  .slideshow .heading.heading--small {
    font-size: 10px;
    letter-spacing: 3px;
    margin-bottom: 16px;
  }
  .slideshow .heading.heading--large,
  .slideshow h3.heading {
    font-size: clamp(32px, 9vw, 44px);
  }
  .slideshow .button {
    padding: 18px 24px !important;
    font-size: 13px !important;
    letter-spacing: 1.6px !important;
    min-height: 56px !important;
    width: 100%;
    max-width: 360px;
    font-weight: 500 !important;
  }
  /* Botões mobile: gap menor + tamanho uniforme (Victor: estavam desproporcionais) */
  .shopify-section--slideshow .slideshow .button-group__wrapper,
  .slideshow .button-group,
  .slideshow .button-group__wrapper {
    gap: 8px !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  /* Reduzir espaço após o último texto (rating) embaixo */
  .slideshow .text-container,
  .slideshow .content-box {
    padding-bottom: 24px !important;
  }
  .slideshow .text-container > *:last-child {
    margin-bottom: 0 !important;
  }
}

/* ============================================
   9 · PDP — STICKY MEDIA COLUMN (desktop only)
   Hero 2 colunas: imagem fixa à esquerda + info scrollável à direita.
   Quando info termina, página inteira volta a rolar normalmente.
   ============================================ */

@media (min-width: 1024px) {
  .product .product__media {
    position: sticky;
    top: 120px; /* header pill 84px + 32px gap + 4px folga */
    align-self: flex-start;
    max-height: calc(100vh - 140px);
  }

  /* garantir que a imagem da media list não exceda altura disponível */
  .product .product__media-list-wrapper,
  .product .product__media-list,
  .product .product__media-item,
  .product .product__media-image-wrapper {
    max-height: calc(100vh - 160px);
  }

  .product .product__media-image-wrapper img,
  .product .product__media-image-wrapper .aspect-ratio img {
    object-fit: contain;
    max-height: calc(100vh - 160px);
  }

  /* coluna direita respira mais */
  .product .product__info {
    padding-left: 24px;
  }
}

/* Em mobile e tablet pequeno, layout empilhado normal */
@media (max-width: 1023px) {
  .product .product__media {
    position: static;
  }
}

/* ============================================
   10 · PDP BUNDLES — Combine & Save + Formation
   Visualmente "dentro" da coluna direita (info) enquanto
   a coluna esquerda (media) continua sticky.
   ============================================ */

@media (min-width: 1024px) {
  /* A section bundles aparece ABAIXO do main-product mas alinhada à direita
     na mesma largura/posição da coluna info, mantendo a imagem sticky visível. */
  .shopify-section--pdp-bundles {
    max-width: 1280px;
    margin: 0 auto;
    padding-left: var(--container-gutter, 24px);
    padding-right: var(--container-gutter, 24px);
  }
  .shopify-section--pdp-bundles > div {
    width: calc(50% - 24px);
    margin-left: auto;
  }
}

.pdp-bundles {
  background: var(--paper, #FAF8EE);
  padding: 32px 24px;
  border-radius: 14px;
  margin: 24px 0;
}

.pdp-bundles__eyebrow {
  font-family: var(--text-font-family);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: rgb(122, 76, 50);
  text-align: center;
  margin-bottom: 8px;
}

.pdp-bundles__title {
  font-family: var(--heading-font-family);
  font-weight: 400;
  font-size: 22px;
  text-align: center;
  color: rgb(36, 31, 33);
  margin: 0 0 24px 0;
}

.pdp-bundles__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.pdp-bundle {
  background: #fff;
  border: 1px solid #EBE3D2;
  border-radius: 12px;
  padding: 18px 14px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  position: relative;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.pdp-bundle:hover {
  border-color: rgb(0, 172, 177);
}

.pdp-bundle--popular {
  border: 2px solid rgb(0, 172, 177);
}

.pdp-bundle__ribbon {
  position: absolute;
  top: -10px;
  background: rgb(0, 172, 177);
  color: #fff;
  font-family: var(--text-font-family);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 1.2px;
  padding: 4px 10px;
  border-radius: 999px;
}

.pdp-bundle__qty {
  font-family: var(--heading-font-family);
  font-size: 36px;
  line-height: 1;
  color: rgb(36, 31, 33);
  margin-top: 4px;
}

.pdp-bundle__label {
  font-size: 11px;
  color: rgb(122, 76, 50);
  letter-spacing: 0.5px;
}

.pdp-bundle__price {
  font-family: var(--heading-font-family);
  font-size: 16px;
  color: rgb(36, 31, 33);
}

.pdp-bundle__unit {
  font-size: 10px;
  color: #9B9B9B;
}

.pdp-bundle__save {
  background: rgb(36, 31, 33);
  color: rgb(245, 242, 230);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.8px;
  padding: 4px 8px;
  border-radius: 999px;
  margin-top: 4px;
}

.pdp-formation {
  background: rgb(36, 31, 33);
  border-radius: 14px;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.pdp-formation__icon {
  width: 52px;
  height: 52px;
  border-radius: 999px;
  background: rgb(202, 164, 109);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
}

.pdp-formation__eyebrow {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 1.5px;
  color: rgb(202, 164, 109);
  text-transform: uppercase;
  display: block;
  margin-bottom: 2px;
}

.pdp-formation__title {
  font-family: var(--heading-font-family);
  font-weight: 400;
  font-size: 16px;
  color: rgb(245, 242, 230);
  margin: 0 0 2px 0;
}

.pdp-formation__sub {
  font-size: 12px;
  color: rgb(245, 242, 230);
  opacity: 0.75;
  margin: 0;
}

@media (max-width: 740px) {
  .pdp-bundles__row {
    grid-template-columns: 1fr;
  }
  .pdp-formation {
    flex-direction: column;
    text-align: center;
  }
}

/* ============================================
   11 · PDP COMPOSITION block (ingredientes-âncora)
   ============================================ */

.pdp-composition {
  background: rgb(235, 227, 210);
  border-radius: 14px;
  padding: 32px 28px;
  margin: 24px 0;
}

.pdp-composition__eyebrow {
  font-family: var(--text-font-family);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: rgb(122, 76, 50);
  text-align: center;
  margin-bottom: 6px;
}

.pdp-composition__title {
  font-family: var(--heading-font-family);
  font-weight: 400;
  font-size: 22px;
  text-align: center;
  color: rgb(36, 31, 33);
  margin: 0 0 20px 0;
}

.pdp-composition__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.pdp-ingredient {
  background: rgb(250, 248, 238);
  border-radius: 10px;
  padding: 16px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.pdp-ingredient__icon {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: rgb(202, 164, 109);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.pdp-ingredient__name {
  font-family: var(--heading-font-family);
  font-size: 14px;
  color: rgb(36, 31, 33);
  margin: 0 0 2px 0;
  letter-spacing: -0.2px;
}

.pdp-ingredient__desc {
  font-size: 12px;
  line-height: 1.5;
  color: rgb(58, 44, 30);
  opacity: 0.8;
  margin: 0;
}

@media (max-width: 740px) {
  .pdp-composition__grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   12 · HERO HOME (slideshow refresh — Figma 15:924)
   - Eyebrow letterspaced chocolat
   - Título Luxury Rigane 54px
   - Descrição Outfit Light 16px
   - 2 CTAs (primary teal + secondary outline)
   - Assurance line discreta
   ============================================ */

/* Container do hero: flex column gap 22px conforme Figma node 20:925.
   Os filhos têm order: explícito porque o markup do Krunkers coloca o título
   (h3) antes da eyebrow (h2). Reordenamos via order pra não tocar Liquid. */
.shopify-section--slideshow .slideshow .content-box.text-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
}

/* Eyebrow (subheading h2) — Tenor Sans 12px chocolat letterspaced */
.shopify-section--slideshow .slideshow .heading.heading--small {
  order: 1;
  font-family: var(--text-font-family);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: rgb(122, 76, 50);
  margin: 0 !important;
}

/* Headline (title h3) — Luxury Rigane 54/60 #3A2C1E */
.shopify-section--slideshow .slideshow .heading.heading--large,
.shopify-section--slideshow .slideshow h3.heading {
  order: 2;
  font-family: var(--heading-font-family);
  font-weight: 400;
  font-size: 54px;
  line-height: 60px;
  letter-spacing: 0.24px;
  color: rgb(58, 44, 30);
  margin: 0 !important;
  max-width: 14ch;
}

/* Body — Outfit Light 16/24 chocolat */
.shopify-section--slideshow .slideshow .hero__description,
.shopify-section--slideshow .slideshow .text-container > p.hero__description {
  order: 3;
  font-family: 'Outfit', var(--text-font-family);
  font-weight: 300;
  font-size: 16px;
  line-height: 24px;
  color: rgb(122, 76, 50) !important;
  max-width: 540px;
  margin: 0 !important;
}

/* Fallback pra outros <p> no slideshow (não-classed) */
.shopify-section--slideshow .slideshow .text-container > p:not(.hero__social):not(.hero__description) {
  font-family: 'Outfit', var(--text-font-family);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.5;
  color: rgb(58, 44, 30);
  opacity: 0.92;
  max-width: 540px;
  margin: 0;
}

/* Group de botões */
.shopify-section--slideshow .slideshow .button-group,
.shopify-section--slideshow .slideshow .button-wrapper {
  order: 4;
  margin: 0;
}
.shopify-section--slideshow .slideshow .button-group__wrapper {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

/* Base comum dos dois CTAs — Tenor Sans 15px UPPERCASE, padding 16/32, radius 8.
   line-height:1 + min-height:0 cancelam a regra do Krunkers
   (line-height: var(--button-height) ≈ 48px) que somava com nosso padding
   e deixava o botão ~80px de altura. */
.shopify-section--slideshow .button.button--primary,
.shopify-section--slideshow .button.button--outline {
  padding: 16px 32px !important;
  border-radius: 8px !important;
  font-family: var(--text-font-family) !important;
  font-size: 15px !important;
  line-height: 1 !important;
  min-height: 0 !important;
  height: auto !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  font-weight: 400 !important;
}

/* CTA primário — teal filled */
.shopify-section--slideshow .button.button--primary {
  background-color: rgb(0, 172, 177) !important;
  color: #fff !important;
  border: 1px solid rgb(0, 172, 177) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.shopify-section--slideshow .button.button--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(0, 172, 177, 0.25);
}

/* CTA secundário — outline. Background/border/text vêm de custom properties
   setadas inline no <a> (driven pelo customizer). Fallbacks = Figma defaults. */
.shopify-section--slideshow .button.button--outline {
  background-color: var(--enissati-btn2-bg, transparent) !important;
  color: var(--enissati-btn2-text, rgb(36, 31, 33)) !important;
  border: 1px solid var(--enissati-btn2-border, rgb(36, 31, 33)) !important;
  transition: background 0.2s ease, color 0.2s ease;
}
.shopify-section--slideshow .button.button--outline:hover {
  background-color: var(--enissati-btn2-border, rgb(36, 31, 33)) !important;
  color: #fff !important;
}

/* Assurance (★★★★★ · 4,8/5 · 470+ avis · …) — Tenor Sans 11px letter 1px chocolat */
.shopify-section--slideshow .slideshow .hero__social {
  order: 5;
  font-family: var(--text-font-family);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 1px;
  margin: 0 !important;
  color: rgb(122, 76, 50) !important;
}

/* Mobile (até 740px): headline reduz e gap fica menor */
@media (max-width: 740px) {
  .shopify-section--slideshow .slideshow .content-box.text-container {
    gap: 18px;
  }
  .shopify-section--slideshow .slideshow .heading.heading--large,
  .shopify-section--slideshow .slideshow h3.heading {
    font-size: clamp(34px, 9vw, 44px);
    line-height: 1.1;
    max-width: 100%;
  }
  .shopify-section--slideshow .button.button--primary,
  .shopify-section--slideshow .button.button--outline {
    padding: 14px 24px !important;
    font-size: 14px !important;
  }
}

/* ============================================
   13 · FLOATING CARD "Formation OFFERTE"
   Card fica fora do <slide-show>, no canto inferior do hero (desktop).
   No mobile: flui logo abaixo do banner com margem negativa (overlap leve).
   ============================================ */

.shopify-section--slideshow {
  position: relative;
  overflow: visible !important;
}
.shopify-section--slideshow .section--flush,
.shopify-section--slideshow slide-show,
.shopify-section--slideshow .slideshow {
  position: relative;
  overflow: visible !important;
}
/* Krunkers seta cursor:grab nos slides — neutralizar (não é slider drag de UX). */
.shopify-section--slideshow .slideshow__slide,
.shopify-section--slideshow .slideshow__slide-inner,
.shopify-section--slideshow .slideshow__image-wrapper,
.shopify-section--slideshow .content-box,
.shopify-section--slideshow .text-container { cursor: default !important; }
.shopify-section--slideshow .button,
.shopify-section--slideshow a,
.shopify-section--slideshow button { cursor: pointer !important; }

.enissati-floating-card {
  position: absolute;
  bottom: 32px;
  right: 32px;
  z-index: 10;
  display: flex;
  align-items: stretch;
  width: 352px;
  height: 78px;
  background: #F5F2E6;
  border-radius: 14px;
  box-shadow: 0 6px 20px rgba(36, 31, 33, 0.08);
  text-decoration: none;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.enissati-floating-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(36, 31, 33, 0.14);
}

.enissati-floating-card__avatar {
  flex-shrink: 0;
  width: 78px;
  background-color: rgb(202, 164, 109);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  line-height: 1;
}

.enissati-floating-card__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 0 14px;
  font-family: 'Outfit', var(--text-font-family);
  color: rgb(36, 31, 33);
}

.enissati-floating-card__title {
  font-family: var(--heading-font-family);
  font-size: 14px;
  line-height: 1.2;
}
.enissati-floating-card__title-1 {
  letter-spacing: 0.4px;
  color: rgb(36, 31, 33);
}
.enissati-floating-card__title-2 {
  letter-spacing: 1.5px;
  color: rgb(202, 164, 109);
  font-weight: 600;
}

.enissati-floating-card__sub {
  font-size: 11px;
  letter-spacing: 0.2px;
  font-weight: 300;
  color: rgb(122, 76, 50);
}

.enissati-floating-card__value {
  font-size: 10px;
  letter-spacing: 0.3px;
  font-weight: 300;
  color: rgb(202, 164, 109);
}

.enissati-floating-card__media {
  flex-shrink: 0;
  width: 78px;
  background-color: transparent;
  color: rgb(36, 31, 33);
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 1023px) {
  .enissati-floating-card {
    bottom: 16px;
    right: 16px;
    width: 280px;
    height: 64px;
  }
  .enissati-floating-card__avatar {
    width: 64px;
    font-size: 22px;
  }
  .enissati-floating-card__media {
    width: 64px;
  }
  .enissati-floating-card__media svg {
    width: 34px;
    height: 34px;
  }
}

@media (max-width: 740px) {
  /* Card mobile flui abaixo do banner, levemente sobreposto ao topo da próxima section.
     Outline fino dourado pra delimitar contra o bg creme. */
  .enissati-floating-card {
    position: relative;
    bottom: auto;
    right: auto;
    margin: -32px auto 16px;
    width: calc(100% - 32px);
    max-width: 360px;
    border: 1px solid rgba(202, 164, 109, 0.4);
  }
  /* Bg do content area (sob a imagem) usa o creme do body, não o bege placeholder */
  .shopify-section--slideshow,
  .shopify-section--slideshow slide-show,
  .shopify-section--slideshow slide-show-item {
    background: #F5F2E6 !important;
  }
  /* Respiro entre eyebrow ("LISSAGE BRÉSILIEN…") e título */
  .shopify-section--slideshow .heading.heading--small {
    margin-bottom: 18px !important;
  }
}

/* ============================================
   14 · USP STRIP (Enissati) — barra do topo do site
   Section: sections/ss-usp-strip.liquid · Figma 76:897
   ============================================ */
.ss-usp-strip {
  width: 100%;
  padding: 14px 24px;
  text-align: center;
}
.ss-usp-strip__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 40px;
  max-width: 1728px;
  margin: 0 auto;
}
.ss-usp-strip__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ss-usp-strip__icon {
  font-size: 12px;
  line-height: 1;
}
.ss-usp-strip__text {
  font-family: var(--text-font-family);
  font-size: 11px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  font-weight: 400;
  white-space: nowrap;
}
.ss-usp-strip__sep {
  font-size: 14px;
  line-height: 1;
  opacity: 0.5;
}

/* Marquee mobile: escondido por padrão (desktop usa o layout estático) */
.ss-usp-strip__marquee { display: none; }

@media (max-width: 1023px) {
  .ss-usp-strip__inner--static { gap: 24px; }
}

@media (max-width: 740px) {
  .ss-usp-strip { padding: 10px 0; }
  .ss-usp-strip__text { font-size: 10px; letter-spacing: 1.5px; }
  .ss-usp-strip__sep { font-size: 12px; opacity: 0.6; }

  /* Esconde o layout estático, mostra o marquee infinito */
  .ss-usp-strip__inner--static { display: none; }
  .ss-usp-strip__marquee {
    display: block;
    overflow: hidden;
    width: 100%;
    /* Mask gradient nos lados pra fade-in/out elegante */
    mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
  }
  .ss-usp-strip__track {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    width: max-content;
    white-space: nowrap;
    animation: ss-usp-marquee 30s linear infinite;
    will-change: transform;
  }
  /* Pausa ao tocar/hover (acessibilidade — usuário pode ler com calma) */
  .ss-usp-strip__marquee:hover .ss-usp-strip__track,
  .ss-usp-strip__marquee:focus-within .ss-usp-strip__track {
    animation-play-state: paused;
  }
}

@keyframes ss-usp-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Respeita prefers-reduced-motion: usuários com motion-sensitivity */
@media (prefers-reduced-motion: reduce) {
  .ss-usp-strip__track {
    animation: none;
    transform: translateX(0);
  }
}

/* ============================================
   15 · EYEBROW STRIP (Enissati) — tagline abaixo do hero
   Section: sections/ss-eyebrow-strip.liquid · Figma 11:1208
   Default: "— LISSAGE BRÉSILIEN PREMIUM · DEPUIS PARIS —"
   ============================================ */
.ss-eyebrow-strip {
  width: 100%;
  text-align: center;
}
.ss-eyebrow-strip__text {
  font-family: 'Outfit', var(--text-font-family);
  font-weight: 200;
  line-height: 1.28;
  margin: 0;
  white-space: nowrap;
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 740px) {
  .ss-eyebrow-strip__text {
    font-size: 12px !important;
    letter-spacing: 2.5px !important;
    white-space: normal;
  }
}

/* ============================================
   16 · HEADER — scroll-hide/reveal + compact-on-scroll
   Comportamento em três estados:
   1. Topo (scroll < 200): offset bumpado pra compensar USP strip,
      sem shadow/blur. Header "respira" no contexto do USP strip.
   2. Scrolled (body.has-scrolled, scroll > 200): offset reduzido,
      adiciona shadow drop + backdrop-blur (glass). Sensação compacta
      de "modo navegação".
   3. Hidden (.is-hidden): translateY(-100%) + opacity 0, transition
      rápida 200ms ease-out (snappy hide). Reveal usa 450ms ease-out-expo
      (suave + elegante).
   ============================================ */
:root {
  --ss-usp-strip-height: 44px;
}
@media (max-width: 740px) {
  :root { --ss-usp-strip-height: 36px; }
}

/* Estado base (no topo).
   Home: respiro grande pra dar destaque ao slideshow (44 + 24 = 68px).
   Outras páginas: respiro médio (40px) — header logo abaixo do USP strip mas não colado. */
#shopify-section-header {
  --header-floating-offset: 40px !important;
  margin-top: 40px !important;
  transition:
    transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    margin-top 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    backdrop-filter 0.4s ease,
    -webkit-backdrop-filter 0.4s ease,
    filter 0.4s ease;
  will-change: transform, opacity;
}
/* Home: respiro grande no desktop (slideshow merece destaque) */
body.template-index #shopify-section-header {
  --header-floating-offset: calc(var(--ss-usp-strip-height) + 24px) !important;
  margin-top: calc(var(--ss-usp-strip-height) + 24px) !important;
}
/* Home mobile: respiro reduzido (header mais próximo do USP strip, sem colar) */
@media (max-width: 740px) {
  body.template-index #shopify-section-header {
    --header-floating-offset: calc(var(--ss-usp-strip-height) + 10px) !important;
    margin-top: calc(var(--ss-usp-strip-height) + 10px) !important;
  }
}

/* Modo navegação: scroll > 200. Compacto + glass (em qualquer template). */
body.has-scrolled #shopify-section-header {
  --header-floating-offset: 16px !important;
  margin-top: 16px !important;
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  filter: drop-shadow(0 6px 20px rgba(36, 31, 33, 0.10));
}

/* Hide (descendo): snappy ease-out 200ms, transition específica.
   IMPORTANTE: resetar backdrop-filter pra evitar "fantasma" visual
   (a regra .has-scrolled aplica blur(10px); sem reset, o blur fica
   persistindo na área onde o header estava mesmo com translateY -100%). */
#shopify-section-header.is-hidden {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
  transition:
    transform 0.2s cubic-bezier(0.4, 0, 0.6, 1),
    opacity 0.2s cubic-bezier(0.4, 0, 0.6, 1);
}


/* ============================================
   17 · BESTSELLERS (Enissati) — grid de cards de produto
   Section: sections/ss-bestsellers.liquid · Figma 14:945
   Card: 280×480 (media 240 top + body 226 bottom).
   ============================================ */
.ss-bestsellers {
  padding: 56px 24px 80px;
  text-align: center;
}
.ss-bestsellers__container {
  max-width: 1240px;
  margin: 0 auto;
}
.ss-bestsellers__eyebrow {
  font-family: var(--text-font-family);
  font-size: 11px;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: rgb(122, 76, 50);
  margin: 0 0 24px;
  font-weight: 400;
}
.ss-bestsellers__title {
  font-family: var(--heading-font-family);
  font-size: 48px;
  line-height: 1.1;
  letter-spacing: 0.24px;
  color: rgb(36, 31, 33);
  margin: 0 0 56px;
  font-weight: 400;
}

.ss-bestsellers__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.ss-bs-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  text-align: left;
  box-shadow: 0 1px 3px rgba(36, 31, 33, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.ss-bs-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(36, 31, 33, 0.10);
}

.ss-bs-card__media {
  width: 100%;
  aspect-ratio: 280 / 240;
  background: rgb(235, 227, 210);
  overflow: hidden;
}
.ss-bs-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.5s ease;
}
.ss-bs-card:hover .ss-bs-card__media img {
  transform: scale(1.04);
}

.ss-bs-card__body {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ss-bs-card__discount {
  font-family: var(--text-font-family);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgb(0, 172, 177);
  margin: 0;
  min-height: 14px;
}

.ss-bs-card__title {
  font-family: var(--heading-font-family);
  font-size: 20px;
  line-height: 1.2;
  /* Reserva sempre 2 linhas (2 × line-height) pra que categoria/estrelas/preço
     fiquem na mesma altura em todos os cards, quebre o nome ou não.
     Em 'em' → se adapta sozinho ao font-size de cada breakpoint. */
  min-height: 2.4em;
  margin: 0;
  color: rgb(36, 31, 33);
  font-weight: 400;
}

.ss-bs-card__label {
  font-family: var(--text-font-family);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgb(122, 76, 50);
  margin: 0;
}

.ss-bs-card__desc {
  font-family: 'Outfit', var(--text-font-family);
  font-weight: 300;
  font-size: 13px;
  line-height: 1.4;
  color: rgb(122, 76, 50);
  margin: 0;
}

.ss-bs-card__stars {
  color: rgb(202, 164, 109);
  font-size: 12px;
  letter-spacing: 1px;
  line-height: 1;
  margin: 0;
}

.ss-bs-card__price {
  margin: 0 0 12px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-weight: 400;
  line-height: 1;
}
.ss-bs-card__price-now {
  font-family: var(--heading-font-family);
  font-size: 20px;
  color: rgb(0, 172, 177);
}
.ss-bs-card__price-was {
  font-family: var(--text-font-family);
  font-size: 13px;
  color: rgb(155, 155, 155);
  text-decoration: line-through;
}

.ss-bs-card__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  background: rgb(0, 172, 177);
  color: #fff;
  font-family: var(--text-font-family);
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border-radius: 8px;
  margin-top: auto;
  transition: background 0.2s ease;
}
.ss-bs-card:hover .ss-bs-card__cta {
  background: rgb(0, 152, 157);
}

@media (max-width: 1023px) {
  .ss-bestsellers { padding: 40px 16px 56px; }
  .ss-bestsellers__title { font-size: 36px; margin-bottom: 32px; }
  .ss-bestsellers__grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
@media (max-width: 640px) {
  .ss-bestsellers__title { font-size: 28px; }
  /* Grid mantém 2 colunas no mobile (Victor: sempre 2-col) */
  .ss-bestsellers__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

/* ============================================
   18 · HOW IT WORKS (Enissati) — "3 étapes pour réussir"
   Section: sections/ss-how-it-works.liquid · Figma 70:897
   ============================================ */
.ss-how {
  padding: 64px 24px 80px;
  text-align: center;
}
.ss-how__container {
  max-width: 1200px;
  margin: 0 auto;
}

.ss-how__header { margin-bottom: 48px; }
.ss-how__eyebrow {
  font-family: var(--text-font-family);
  font-size: 11px;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: rgb(122, 76, 50);
  margin: 0 0 18px;
  font-weight: 400;
}
.ss-how__title {
  font-family: var(--heading-font-family);
  font-size: 54px;
  line-height: 1.1;
  letter-spacing: 0.24px;
  color: rgb(36, 31, 33);
  margin: 0 0 18px;
  font-weight: 400;
}
.ss-how__subtitle {
  font-family: 'Outfit', var(--text-font-family);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.5;
  color: rgb(122, 76, 50);
  margin: 0 auto;
  max-width: 540px;
}

.ss-how__sep {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 28px auto 0;
  width: max-content;
  color: rgb(202, 164, 109);
}
.ss-how__sep-line {
  display: inline-block;
  width: 60px;
  height: 1px;
  background: currentColor;
}
.ss-how__sep-diamond {
  font-size: 14px;
  line-height: 1;
}

/* Layout 2 colunas: form esquerda + etapas vertical direita.
   minmax(0,1fr) + min-width:0 garante que conteúdo (Klaviyo embed) não estoure.
   align-items: start → cards mantêm altura natural (não esticam até a col mais alta). */
.ss-how__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 28px;
  margin-bottom: 40px;
  text-align: left;
  align-items: start;
}
.ss-how__layout-col {
  width: 100%;
  min-width: 0;
}

/* Card das etapas (lista vertical compacta) */
.ss-how__steps-card {
  border-radius: 14px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.ss-how__step--inline {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 18px;
  align-items: start;
  padding: 22px 0;
  border-bottom: 1px solid rgba(36, 31, 33, 0.08);
}
.ss-how__step--inline:first-child { padding-top: 0; }
.ss-how__step--inline:last-child { padding-bottom: 0; border-bottom: 0; }
.ss-how__step--inline .ss-how__step-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Step legacy (cards 3-col) — mantém compatibilidade caso seja usado em outra page */
.ss-how__step:not(.ss-how__step--inline) {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 40px 36px;
  border-radius: 14px;
  overflow: hidden;
}

.ss-how__num {
  font-family: var(--heading-font-family);
  font-size: 64px;
  line-height: 1;
  color: rgb(202, 164, 109);
  margin: 0;
  font-weight: 400;
}
.ss-how__step--inline .ss-how__num {
  font-size: 52px;
  text-align: left;
}

.ss-how__step-title {
  font-family: var(--heading-font-family);
  font-size: 24px;
  line-height: 1.2;
  color: rgb(36, 31, 33);
  margin: 0;
  font-weight: 400;
}
.ss-how__step--inline .ss-how__step-title { font-size: 20px; }

.ss-how__step-desc {
  font-family: 'Outfit', var(--text-font-family);
  font-weight: 300;
  font-size: 15px;
  line-height: 24px;
  color: rgb(122, 76, 50);
  margin: 0;
}
.ss-how__step--inline .ss-how__step-desc { font-size: 14px; line-height: 1.5; }

.ss-how__pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgb(235, 227, 210);
  border-radius: 4px;
  color: rgb(122, 76, 50);
  align-self: flex-start;
  margin-top: auto;
}
.ss-how__pill-icon {
  font-size: 12px;
  line-height: 1;
}
.ss-how__pill-text {
  font-family: var(--text-font-family);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.ss-how__hook {
  margin: 0 auto;
  font-family: 'Outfit', var(--text-font-family);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.5;
  color: rgb(122, 76, 50);
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  justify-content: center;
  max-width: 720px;
}
.ss-how__hook-icon {
  color: rgb(202, 164, 109);
  font-size: 14px;
  flex-shrink: 0;
}

@media (max-width: 1023px) {
  .ss-how { padding: 64px 16px; }
  .ss-how__title { font-size: 40px; }
  .ss-how__layout { grid-template-columns: 1fr; gap: 24px; }
  .ss-how__steps-card { padding: 24px; }
  .ss-how__step:not(.ss-how__step--inline) { padding: 32px 28px; }
}
@media (max-width: 640px) {
  .ss-how__title { font-size: 32px; }
  .ss-how__step--inline { grid-template-columns: 56px 1fr; gap: 14px; padding: 18px 0; }
  .ss-how__step--inline .ss-how__num { font-size: 44px; }
  .ss-how__step--inline .ss-how__step-title { font-size: 18px; }
}

/* Ebook form card (coluna esquerda do layout 2-col). CSS mínimo, sem hacks. */
.ss-how__ebook {
  background: rgb(245, 242, 230);
  border-radius: 14px;
  padding: 36px 28px;
  text-align: center;
  box-shadow: 0 12px 40px rgba(36, 31, 33, 0.05);
  min-width: 0;
}
.ss-how__ebook-inner { display: flex; flex-direction: column; gap: 14px; }
.ss-how__ebook-eyebrow {
  font-family: var(--text-font-family);
  font-size: 11px;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: rgb(122, 76, 50);
  margin: 0;
  font-weight: 400;
}
.ss-how__ebook-title {
  font-family: var(--heading-font-family);
  font-size: 28px;
  line-height: 1.2;
  color: rgb(36, 31, 33);
  margin: 0;
  font-weight: 400;
}
.ss-how__ebook-subtitle {
  font-family: 'Outfit', var(--text-font-family);
  font-size: 14px;
  line-height: 1.5;
  color: rgb(122, 76, 50);
  margin: 0;
  font-weight: 300;
}
.ss-how__ebook-form { margin-top: 10px; min-width: 0; }
.ss-how__ebook-placeholder {
  padding: 18px;
  background: rgba(202, 164, 109, 0.08);
  border: 1px dashed rgb(202, 164, 109);
  border-radius: 8px;
  font-family: 'Outfit', var(--text-font-family);
  font-size: 12px;
  color: rgb(122, 76, 50);
  text-align: left;
}
.ss-how__ebook-placeholder p { margin: 0 0 4px; }
.ss-how__ebook-placeholder p:last-child { margin-bottom: 0; }
.ss-how__ebook-trust {
  font-family: 'Outfit', var(--text-font-family);
  font-size: 11px;
  color: rgb(122, 76, 50);
  font-weight: 300;
  margin: 4px 0 0;
}
.ss-how__ebook-trust p { margin: 0; }
.ss-how__ebook-legal {
  font-family: 'Outfit', var(--text-font-family);
  font-size: 10px;
  color: rgb(155, 155, 155);
  font-weight: 300;
  margin: 6px 0 0;
}
.ss-how__ebook-legal p { margin: 0; }

@media (max-width: 640px) {
  /* Reduzir spacing global do header → ebook (Victor: tava muito grande) */
  .ss-how__header { margin-bottom: 16px !important; }
  .ss-how__title { margin-bottom: 10px !important; }
  .ss-how__sep { margin-top: 14px !important; }
  .ss-how__layout { gap: 16px !important; }

  /* Ebook card mobile: SEM margin-top (era 40px gigante) */
  .ss-how__ebook {
    padding: 24px 20px !important;
    margin-top: 0 !important;
  }
  .ss-how__ebook-title { font-size: 22px; }
  .ss-how__ebook-inner { gap: 10px !important; }

  /* Defensive: richtext (trust/legal) com <p> não cria margem extra */
  .ss-how__ebook-trust,
  .ss-how__ebook-legal { line-height: 1.4; }
  .ss-how__ebook-trust p,
  .ss-how__ebook-trust p:last-child,
  .ss-how__ebook-legal p,
  .ss-how__ebook-legal p:last-child { margin: 0 !important; padding: 0 !important; }
  .ss-how__ebook-trust p + p,
  .ss-how__ebook-legal p + p { margin-top: 4px !important; }
}

/* ============================================
   19 · EBOOK FORM (Enissati) — captura email + quiz preview card
   Section: sections/ss-ebook-form.liquid · Figma 45:897
   Layout 2 colunas (text + visual quiz card). Mobile: stack.
   Form Klaviyo nativo na esquerda; card direito é decorativo.
   ============================================ */
.ss-ebook {
  padding: 96px 24px;
}
.ss-ebook__container {
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 96px;
  align-items: center;
}

.ss-ebook__col--text {
  text-align: left;
  max-width: 540px;
  justify-self: end;
  width: 100%;
}
.ss-ebook__col--card {
  justify-self: start;
  width: 100%;
  max-width: 480px;
}

.ss-ebook__eyebrow {
  font-family: var(--text-font-family);
  font-size: 11px;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: rgb(122, 76, 50);
  margin: 0 0 18px;
  font-weight: 400;
}

.ss-ebook__title {
  font-family: var(--heading-font-family);
  font-size: 48px;
  line-height: 1.08;
  letter-spacing: 0.24px;
  color: rgb(36, 31, 33);
  margin: 0 0 18px;
  font-weight: 400;
}

.ss-ebook__subtitle {
  font-family: 'Outfit', var(--text-font-family);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.55;
  color: rgb(122, 76, 50);
  margin: 0 0 28px;
}

.ss-ebook__bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ss-ebook__bullet {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: 'Outfit', var(--text-font-family);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.4;
  color: rgb(36, 31, 33);
}
.ss-ebook__bullet-icon {
  color: rgb(0, 172, 177);
  font-size: 12px;
  line-height: 1;
  flex-shrink: 0;
  font-weight: 500;
}

.ss-ebook__form-wrap {
  margin-top: 8px;
  max-width: 540px;
}
.ss-ebook__klaviyo {
  width: 100%;
}
.ss-ebook__placeholder {
  padding: 24px;
  background: rgba(202, 164, 109, 0.08);
  border: 1px dashed rgb(202, 164, 109);
  border-radius: 8px;
  font-family: 'Outfit', var(--text-font-family);
  font-size: 13px;
  color: rgb(122, 76, 50);
}
.ss-ebook__placeholder p { margin: 0 0 6px; }
.ss-ebook__placeholder p:last-child { margin-bottom: 0; }

.ss-ebook__trust {
  margin: 16px 0 0;
  font-family: 'Outfit', var(--text-font-family);
  font-size: 11px;
  line-height: 1.5;
  color: rgb(122, 76, 50);
  font-weight: 300;
}
.ss-ebook__trust p { margin: 0; }

.ss-ebook__legal {
  margin: 12px 0 0;
  font-family: 'Outfit', var(--text-font-family);
  font-size: 10px;
  line-height: 1.4;
  color: rgb(155, 155, 155);
  font-weight: 300;
}
.ss-ebook__legal p { margin: 0; }

/* Quiz preview card (decorativo) */
.ss-ebook__quiz {
  background: #FFFFFF;
  border-radius: 14px;
  padding: 28px 28px 32px;
  box-shadow: 0 12px 40px rgba(36, 31, 33, 0.06);
}
.ss-ebook__quiz-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.ss-ebook__quiz-eyebrow {
  font-family: var(--text-font-family);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgb(0, 172, 177);
  font-weight: 500;
}
.ss-ebook__quiz-step {
  font-family: var(--text-font-family);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgb(122, 76, 50);
  font-weight: 400;
}
.ss-ebook__quiz-progress {
  height: 4px;
  background: rgb(235, 227, 210);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 22px;
}
.ss-ebook__quiz-progress-fill {
  display: block;
  height: 100%;
  background: rgb(0, 172, 177);
  border-radius: 999px;
  transition: width 0.4s ease;
}
.ss-ebook__quiz-question {
  font-family: var(--heading-font-family);
  font-size: 20px;
  line-height: 1.3;
  color: rgb(36, 31, 33);
  margin: 0 0 18px;
  font-weight: 400;
}
.ss-ebook__quiz-options {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ss-ebook__quiz-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: #FFFFFF;
  border: 1px solid rgb(235, 227, 210);
  border-radius: 10px;
  font-family: 'Outfit', var(--text-font-family);
  font-weight: 300;
  font-size: 14px;
  color: rgb(36, 31, 33);
  transition: border-color 0.2s ease, background 0.2s ease;
  cursor: default;
}
.ss-ebook__quiz-option:hover {
  border-color: rgb(0, 172, 177);
}
.ss-ebook__quiz-option--selected {
  border-color: rgb(0, 172, 177);
  background: rgba(0, 172, 177, 0.04);
}
.ss-ebook__quiz-option-icon {
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
}
.ss-ebook__quiz-option-label {
  flex: 1;
}
.ss-ebook__quiz-option-arrow {
  color: rgb(155, 155, 155);
  font-size: 16px;
  flex-shrink: 0;
}
.ss-ebook__quiz-option--selected .ss-ebook__quiz-option-arrow {
  color: rgb(0, 172, 177);
}

@media (max-width: 1023px) {
  .ss-ebook__container {
    grid-template-columns: 1fr;
    gap: 56px;
    max-width: 540px;
  }
  .ss-ebook__col--text { max-width: 100%; justify-self: stretch; }
  .ss-ebook__col--card { justify-self: stretch; max-width: 100%; }
  .ss-ebook__title { font-size: 36px; }
}
@media (max-width: 740px) {
  .ss-ebook { padding: 64px 16px; }
  .ss-ebook__title { font-size: 28px; }
  .ss-ebook__quiz { padding: 22px 20px 26px; }
  .ss-ebook__quiz-question { font-size: 17px; }
  .ss-ebook__quiz-option { font-size: 13px; padding: 12px 14px; }
}

/* ============================================
   20 · DECISION TREE (Enissati) — "Hydra ou Nigella ?"
   Section: sections/ss-decision-tree.liquid · Figma 37:897
   Header centrado + 2 cards lado a lado com bg colorido.
   Cada card é 2-col interno: copy esquerda + image space direita.
   ============================================ */
.ss-dt {
  padding: 96px 24px;
}
.ss-dt__container {
  max-width: 1440px;
  margin: 0 auto;
}
.ss-dt__header {
  text-align: center;
  margin-bottom: 48px;
}
.ss-dt__eyebrow {
  font-family: var(--text-font-family);
  font-size: 11px;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: rgb(122, 76, 50);
  margin: 0 0 18px;
  font-weight: 400;
}
.ss-dt__title {
  font-family: var(--heading-font-family);
  font-size: 48px;
  line-height: 1.1;
  letter-spacing: 0.2px;
  color: rgb(36, 31, 33);
  margin: 0 0 16px;
  font-weight: 400;
}
.ss-dt__subtitle {
  font-family: 'Outfit', var(--text-font-family);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.5;
  color: rgb(122, 76, 50);
  margin: 0 auto;
  max-width: 580px;
}
.ss-dt__sep {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 28px auto 0;
  width: max-content;
  color: rgb(202, 164, 109);
}
.ss-dt__sep-line { width: 60px; height: 1px; background: currentColor; }
.ss-dt__sep-diamond { font-size: 14px; line-height: 1; }

.ss-dt__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
}

.ss-dt-card {
  border-radius: 18px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  min-height: 460px;
  box-shadow: 0 12px 40px rgba(36, 31, 33, 0.08);
  position: relative;
}
.ss-dt-card__copy {
  padding: 36px 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
}
.ss-dt-card__pill {
  font-family: var(--text-font-family);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  font-weight: 600;
  line-height: 1;
}
.ss-dt-card__title {
  font-family: var(--heading-font-family);
  font-size: 42px;
  line-height: 1.05;
  margin: 4px 0 0;
  font-weight: 400;
  color: currentColor;
}
.ss-dt-card__subtitle {
  font-family: 'Outfit', var(--text-font-family);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
  opacity: 0.95;
}
.ss-dt-card__bullets {
  list-style: none;
  padding: 0;
  margin: 6px 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ss-dt-card__bullets li {
  font-family: 'Outfit', var(--text-font-family);
  font-weight: 300;
  font-size: 13px;
  line-height: 1.4;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.ss-dt-card__check {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 500;
}
.ss-dt-card__price-label {
  font-family: var(--text-font-family);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 14px 0 0;
  opacity: 0.85;
  font-weight: 400;
  text-align: center;
  align-self: stretch;
}
.ss-dt-card__price {
  font-family: var(--heading-font-family);
  font-size: 28px;
  line-height: 1;
  margin: 4px 0 14px;
  font-weight: 400;
  text-align: center;
  align-self: stretch;
}
.ss-dt-card__cta {
  display: block;
  text-align: center;
  text-decoration: none;
  font-family: var(--text-font-family);
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 16px 28px;
  border-radius: 8px;
  align-self: stretch;
  font-weight: 600;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  margin-top: 18px;
  margin-bottom: 0;
}
.ss-dt-card__cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

.ss-dt-card__media {
  background: rgba(255, 255, 255, 0.08);
  display: block;
  padding: 0;
  overflow: hidden;
  position: relative;
}
.ss-dt-card__media img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  object-position: center;
  display: block;
  position: absolute;
  inset: 0;
}
.ss-dt-card__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  opacity: 0.85;
}
.ss-dt-card__placeholder-icon {
  font-size: 36px;
  color: rgb(202, 164, 109);
  line-height: 1;
}
.ss-dt-card__placeholder-label {
  font-family: var(--text-font-family);
  font-size: 10px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  font-weight: 500;
  opacity: 0.7;
}
.ss-dt-card__placeholder-caption {
  font-family: 'Outfit', var(--text-font-family);
  font-weight: 300;
  font-size: 12px;
  line-height: 1.4;
  opacity: 0.6;
  max-width: 220px;
}

.ss-dt__bottom {
  text-align: center;
  margin: 40px 0 0;
}
.ss-dt__bottom-link {
  font-family: 'Outfit', var(--text-font-family);
  font-size: 14px;
  color: rgb(122, 76, 50);
  text-decoration: underline;
  text-underline-offset: 4px;
  font-weight: 300;
}

@media (max-width: 1023px) {
  .ss-dt { padding: 64px 16px; }
  .ss-dt__title { font-size: 36px; }
  .ss-dt__cards { grid-template-columns: 1fr; }
  .ss-dt-card { min-height: 0; grid-template-columns: 1fr; }
  /* Mobile/tablet: mostra mais imagem (era 200px). Usa a "Image mobile" se definida. */
  .ss-dt-card__media { min-height: 300px; }
}
@media (max-width: 640px) {
  .ss-dt__title { font-size: 28px; }
  .ss-dt-card__title { font-size: 32px; }
  .ss-dt-card__copy { padding: 28px 24px; }
}

/* ============================================
   21 · PACK SIGNATURE (Enissati) — Figma 68:897
   2-col horizontal: packshot esquerda + copy/items/preço/CTA direita
   ============================================ */
.ss-pack {
  padding: 96px 24px;
}
.ss-pack__container {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 80px;
  align-items: center;
}

.ss-pack__media {
  background: rgb(235, 227, 210);
  border-radius: 18px;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  overflow: hidden;
}
.ss-pack__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.ss-pack__placeholder {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.ss-pack__placeholder-icon {
  font-size: 56px;
  color: rgb(202, 164, 109);
  line-height: 1;
}
.ss-pack__placeholder-label {
  font-family: var(--text-font-family);
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgb(122, 76, 50);
  font-weight: 500;
}
.ss-pack__placeholder-caption {
  font-family: 'Outfit', var(--text-font-family);
  font-weight: 300;
  font-size: 12px;
  line-height: 1.4;
  color: rgb(122, 76, 50);
  opacity: 0.7;
  max-width: 280px;
}

.ss-pack__copy { display: flex; flex-direction: column; gap: 18px; }
.ss-pack__eyebrow {
  font-family: var(--text-font-family);
  font-size: 11px;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: rgb(122, 76, 50);
  margin: 0;
  font-weight: 400;
}
.ss-pack__title {
  font-family: var(--heading-font-family);
  font-size: 54px;
  line-height: 1.05;
  letter-spacing: 0.2px;
  color: rgb(36, 31, 33);
  margin: 0;
  font-weight: 400;
}
.ss-pack__subtitle {
  font-family: 'Outfit', var(--text-font-family);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.55;
  color: rgb(122, 76, 50);
  margin: 0 0 8px;
}

.ss-pack__sep {
  height: 1px;
  width: 60px;
  background: rgb(202, 164, 109);
  margin: 0;
  border: 0;
}

.ss-pack__items {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ss-pack__item {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  gap: 12px;
  align-items: baseline;
  font-family: 'Outfit', var(--text-font-family);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.3;
  color: rgb(36, 31, 33);
}
.ss-pack__item-check {
  color: rgb(0, 172, 177);
  font-weight: 500;
}
.ss-pack__item-meta {
  color: rgb(155, 155, 155);
  font-size: 12px;
  white-space: nowrap;
}

.ss-pack__price-box {
  background: rgb(235, 227, 210);
  border-radius: 12px;
  padding: 22px 24px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: center;
}
.ss-pack__price-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.ss-pack__price-old {
  font-family: 'Outfit', var(--text-font-family);
  font-size: 14px;
  color: rgb(155, 155, 155);
  text-decoration: line-through;
  font-weight: 300;
}
.ss-pack__price-now {
  font-family: var(--heading-font-family);
  font-size: 36px;
  line-height: 1;
  color: rgb(36, 31, 33);
  font-weight: 400;
}
.ss-pack__price-save {
  font-family: var(--text-font-family);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgb(0, 172, 177);
  font-weight: 600;
}
.ss-pack__cta {
  background: rgb(0, 172, 177);
  color: #FFFFFF;
  font-family: var(--text-font-family);
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
  padding: 18px 28px;
  border-radius: 8px;
  font-weight: 600;
  white-space: nowrap;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ss-pack__cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 172, 177, 0.3);
}

.ss-pack__trust {
  font-family: 'Outfit', var(--text-font-family);
  font-weight: 300;
  font-size: 12px;
  color: rgb(122, 76, 50);
  margin: 0;
}
.ss-pack__trust p { margin: 0; }

@media (max-width: 1023px) {
  .ss-pack { padding: 64px 16px; }
  .ss-pack__container { grid-template-columns: 1fr; gap: 40px; }
  .ss-pack__title { font-size: 40px; }
}
@media (max-width: 640px) {
  .ss-pack__title { font-size: 32px; }
  .ss-pack__price-box { grid-template-columns: 1fr; text-align: center; }
  .ss-pack__price-stack { align-items: center; }
  .ss-pack__cta { text-align: center; }
}

/* ============================================
   22 · INGREDIENT TICKER (Enissati) — Figma 38:897
   Strip marquee infinita, 64px alto, bg marrom.
   ============================================ */
.ss-ticker {
  height: 64px;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
}
.ss-ticker__viewport {
  width: 100%;
  overflow: hidden;
  display: flex;
}
.ss-ticker__track {
  display: flex;
  align-items: center;
  gap: 48px;
  animation: ss-ticker-scroll linear infinite;
  white-space: nowrap;
}
.ss-ticker__viewport:hover .ss-ticker__track {
  animation-play-state: paused;
}
.ss-ticker__group {
  display: flex;
  align-items: center;
  gap: 48px;
  flex-shrink: 0;
}
.ss-ticker__item {
  font-family: var(--text-font-family, 'Tenor Sans'), Georgia, serif;
  font-size: 13px;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: currentColor;
  font-weight: 400;
}
.ss-ticker__sep {
  font-size: 12px;
  line-height: 1;
  flex-shrink: 0;
}
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

@keyframes ss-ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (max-width: 740px) {
  .ss-ticker__item { font-size: 11px; letter-spacing: 2.5px; }
  .ss-ticker__track, .ss-ticker__group { gap: 32px; }
}

/* ============================================
   23 · VÍDEOS CLIENTES (Enissati) — Figma 44:897
   Header 2-col + slider horizontal scroll-snap + modal player.
   Cards 9:16 com cover + pill + duration + play + quote + product mini.
   ============================================ */
.ss-vs {
  padding: 80px 24px;
}
.ss-vs__container {
  max-width: 1440px;
  margin: 0 auto;
}
.ss-vs__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 40px;
}
.ss-vs__copy { max-width: 640px; }
.ss-vs__eyebrow {
  font-family: var(--text-font-family);
  font-size: 11px;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: rgb(122, 76, 50);
  margin: 0 0 14px;
  font-weight: 400;
}
.ss-vs__title {
  font-family: var(--heading-font-family);
  font-size: 44px;
  line-height: 1.05;
  color: rgb(36, 31, 33);
  margin: 0 0 10px;
  font-weight: 400;
}
.ss-vs__subtitle {
  font-family: 'Outfit', var(--text-font-family);
  font-weight: 300;
  font-size: 14px;
  color: rgb(122, 76, 50);
  margin: 0;
}

.ss-vs__nav { display: flex; gap: 10px; }
.ss-vs__nav-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgb(202, 164, 109);
  border: 0;
  color: #FFFFFF;
  font-size: 18px;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, transform 0.2s ease;
}
.ss-vs__nav-btn:hover { background: rgb(58, 44, 30); }
.ss-vs__nav-btn:disabled { opacity: 0.35; cursor: not-allowed; transform: none; }

/* Slider — scroll-snap horizontal */
.ss-vs__slider {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 4px 0 20px;
  -webkit-overflow-scrolling: touch;
}
.ss-vs__slider::-webkit-scrollbar { display: none; }

.ss-vs__card {
  flex: 0 0 auto;
  width: 220px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ss-vs__media {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  border: 0;
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  background: rgb(36, 31, 33);
  padding: 0;
  display: block;
  font-family: inherit;
  color: #FFFFFF;
}
.ss-vs__cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ss-vs__card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(36,31,33,0.45) 0%, rgba(36,31,33,0) 30%, rgba(36,31,33,0) 60%, rgba(36,31,33,0.7) 100%);
  pointer-events: none;
}
.ss-vs__pill {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(58, 44, 30, 0.65);
  color: rgb(202, 164, 109);
  font-family: var(--text-font-family);
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 600;
  backdrop-filter: blur(8px);
}
.ss-vs__duration {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(58, 44, 30, 0.65);
  color: #FFFFFF;
  font-family: var(--text-font-family);
  font-size: 10px;
  letter-spacing: 0.5px;
  padding: 4px 8px;
  border-radius: 999px;
  backdrop-filter: blur(8px);
}
.ss-vs__play-icon {
  display: none !important;
}
.ss-vs__quote {
  display: none !important;
}
.ss-vs__product-mini {
  position: absolute;
  left: 12px;
  bottom: 12px;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(245, 242, 230, 0.95);
  display: block;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
  transition: transform 0.2s ease;
}
.ss-vs__product-mini:hover { transform: translateY(-2px); }
.ss-vs__product-mini img {
  width: 100%; height: 100%; object-fit: contain; display: block;
}

/* Info abaixo do card */
.ss-vs__info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 4px;
}
.ss-vs__stars {
  color: rgb(202, 164, 109);
  font-size: 11px;
  letter-spacing: 1px;
  margin: 0;
  line-height: 1;
}
.ss-vs__product-name {
  font-family: var(--text-font-family);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgb(36, 31, 33);
  margin: 4px 0 0;
  font-weight: 500;
  line-height: 1.2;
}
.ss-vs__product-price {
  font-family: 'Outfit', var(--text-font-family);
  font-weight: 400;
  font-size: 14px;
  color: rgb(36, 31, 33);
  margin: 2px 0 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.ss-vs__buy {
  font-family: var(--text-font-family);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgb(122, 76, 50);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  font-weight: 500;
}
.ss-vs__buy:hover { color: rgb(0, 172, 177); }

/* Modal */
.ss-vs__modal {
  position: fixed;
  inset: 0;
  background: rgba(36, 31, 33, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 32px;
}
.ss-vs__modal[hidden] { display: none; }
.ss-vs__modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  color: #FFFFFF;
  border: 0;
  font-size: 24px;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.ss-vs__modal-close:hover { background: rgba(255,255,255,0.25); }
.ss-vs__modal-body {
  width: 100%;
  max-width: 420px;
  aspect-ratio: 9 / 16;
  max-height: 80vh;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
}
.ss-vs__modal-body video,
.ss-vs__modal-body iframe {
  width: 100%; height: 100%;
  display: block;
  border: 0;
}
body.ss-vs-modal-open { overflow: hidden; }

@media (max-width: 1023px) {
  .ss-vs__header { flex-direction: column; align-items: flex-start; gap: 16px; }
  .ss-vs__title { font-size: 32px; }
}
@media (max-width: 640px) {
  .ss-vs { padding: 56px 16px; }
  .ss-vs__title { font-size: 26px; }
  .ss-vs__card { width: 180px; }
  .ss-vs__modal { padding: 16px; }
  .ss-vs__modal-body { max-width: 100%; }
}

/* ============================================
   24 · AVANT/APRÈS + AVIS (Enissati) — Figma 40:897
   Compare slider (drag handle clip-path) + reviews 3-col + bottom link.
   ============================================ */
.ss-aa {
  padding: 80px 24px;
  background: var(--aa-bg, #F5F2E6);
  color: var(--aa-text, #241F21);
}
.ss-aa__container {
  max-width: 1392px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
}

/* Headers — slider + reviews */
.ss-aa__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
}
.ss-aa__eyebrow {
  font-family: var(--text-font-family);
  font-size: 11px;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: rgb(122, 76, 50);
  margin: 0;
  font-weight: 400;
}
.ss-aa__title {
  font-family: var(--heading-font-family);
  font-size: 44px;
  line-height: 1.1;
  color: var(--aa-text, #241F21);
  margin: 0;
  font-weight: 400;
}
.ss-aa__title--reviews { font-size: 36px; }
.ss-aa__subtitle {
  font-family: 'Outfit', var(--text-font-family);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.5;
  color: rgb(122, 76, 50);
  margin: 0;
  max-width: 600px;
}

/* Slider container */
.ss-aa__slider {
  position: relative;
  width: 100%;
  max-width: 1280px;
  aspect-ratio: 2 / 1;
  border-radius: 14px;
  overflow: hidden;
  user-select: none;
  touch-action: pan-y;
  cursor: ew-resize;
}
.ss-aa__slider-track {
  position: absolute;
  inset: 0;
}
.ss-aa__slider-half {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.ss-aa__slider-half--avant {
  /* Clipped via inline style JS sets clip-path */
  z-index: 2;
}
.ss-aa__slider-half--apres { z-index: 1; }
.ss-aa__slider-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.ss-aa__placeholder {
  font-family: var(--text-font-family);
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(245, 242, 230, 0.85);
  text-align: center;
  padding: 0 24px;
  pointer-events: none;
}

/* Labels AVANT / APRÈS */
.ss-aa__label {
  position: absolute;
  top: 30px;
  padding: 8px 16px;
  border-radius: 4px;
  font-family: var(--text-font-family);
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  z-index: 4;
  pointer-events: none;
}
.ss-aa__label--avant { left: 30px; }
.ss-aa__label--apres { right: 30px; }

/* Divider + Handle */
.ss-aa__divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 3px;
  background: #FFFFFF;
  transform: translateX(-50%);
  z-index: 5;
  pointer-events: none;
  box-shadow: 0 0 12px rgba(0,0,0,0.18);
}
.ss-aa__handle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 1px solid #241F21;
  color: #241F21;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: ew-resize;
  transform: translate(-50%, -50%);
  z-index: 6;
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  padding: 0;
}
.ss-aa__handle:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.24); }
.ss-aa__handle.is-dragging { transform: translate(-50%, -50%) scale(1.06); }
.ss-aa__handle:focus-visible { outline: 2px solid #CAA46D; outline-offset: 4px; }

/* Caption sous slider */
.ss-aa__caption {
  font-family: 'Outfit', var(--text-font-family);
  font-weight: 300;
  font-size: 13px;
  line-height: 1.4;
  color: rgb(122, 76, 50);
  text-align: center;
  max-width: 600px;
  margin: 0;
}

/* Séparateur ◆ */
.ss-aa__sep {
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgb(202, 164, 109);
}
.ss-aa__sep-line {
  display: block;
  width: 80px;
  height: 1px;
  background: rgb(202, 164, 109);
}
.ss-aa__sep-icon {
  font-size: 14px;
  line-height: 1;
}

/* Reviews grid */
.ss-aa__reviews {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  width: 100%;
  max-width: 1320px;
}
.ss-aa__review {
  background: #FFFFFF;
  border-radius: 14px;
  padding: 36px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  box-shadow: 0 2px 12px rgba(36, 31, 33, 0.04);
}
.ss-aa__review-quote-mark {
  font-family: var(--heading-font-family);
  font-size: 56px;
  line-height: 0.6;
  color: rgb(202, 164, 109);
  font-weight: 400;
  margin: 0;
  display: block;
}
.ss-aa__review-quote {
  font-family: 'Outfit', var(--text-font-family);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.45;
  color: var(--aa-text, #241F21);
  margin: 0;
  flex: 1;
}
.ss-aa__review-stars {
  font-family: var(--text-font-family);
  font-size: 14px;
  letter-spacing: 2px;
  color: rgb(202, 164, 109);
  margin: 0;
  line-height: 1;
}
.ss-aa__review-divider {
  display: block;
  height: 1px;
  background: rgb(235, 227, 210);
  width: 100%;
}
.ss-aa__review-author {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ss-aa__review-name {
  font-family: var(--text-font-family);
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--aa-text, #241F21);
  margin: 0;
}
.ss-aa__review-meta {
  font-family: 'Outfit', var(--text-font-family);
  font-weight: 300;
  font-size: 11px;
  line-height: 1.4;
  color: rgb(122, 76, 50);
  margin: 0;
}

/* Bottom link */
.ss-aa__bottom-link {
  font-family: var(--text-font-family);
  font-size: 13px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgb(122, 76, 50);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color 0.2s ease, transform 0.2s ease;
  margin-top: 6px;
}
.ss-aa__bottom-link:hover {
  color: rgb(202, 164, 109);
  transform: translateX(2px);
}

/* Responsive */
@media (max-width: 1023px) {
  .ss-aa { padding: 64px 20px; }
  .ss-aa__container { gap: 28px; }
  .ss-aa__title { font-size: 36px; }
  .ss-aa__title--reviews { font-size: 30px; }
  .ss-aa__subtitle { font-size: 15px; }
  .ss-aa__label--avant { left: 18px; }
  .ss-aa__label--apres { right: 18px; }
  .ss-aa__label { top: 18px; }
  .ss-aa__reviews { grid-template-columns: 1fr; gap: 16px; max-width: 600px; }
  .ss-aa__review { padding: 28px; }
  .ss-aa__review-quote { font-size: 16px; }
}
@media (max-width: 640px) {
  .ss-aa { padding: 48px 16px; }
  .ss-aa__container { gap: 24px; }
  .ss-aa__title { font-size: 28px; }
  .ss-aa__title--reviews { font-size: 24px; }
  .ss-aa__slider { aspect-ratio: 4 / 5; border-radius: 12px; }
  .ss-aa__handle { width: 44px; height: 44px; }
  .ss-aa__label { font-size: 10px; padding: 6px 10px; top: 14px; letter-spacing: 2px; }
  .ss-aa__label--avant { left: 14px; }
  .ss-aa__label--apres { right: 14px; }
  .ss-aa__sep-line { width: 50px; }
  .ss-aa__caption { font-size: 12px; }
  .ss-aa__bottom-link { font-size: 12px; letter-spacing: 2px; }
}

/* ============================================
   25 · FORMATION OFFERTE (Enissati) — Figma 71:897
   2-col card portrait + copy/bullets/CTA sobre fundo chocolat noir.
   ============================================ */
.ss-fo {
  padding: 120px 24px;
  background: var(--fo-bg, #241F21);
  color: var(--fo-text, #F5F2E6);
}
.ss-fo__container {
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 540px 1fr;
  gap: 96px;
  align-items: center;
}

/* Card portrait */
.ss-fo__card {
  width: 100%;
  max-width: 540px;
  aspect-ratio: 9 / 10;
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  background: var(--fo-card-bg, #7A4C32);
}
.ss-fo__card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ss-fo__card-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 40px;
  text-align: center;
}
.ss-fo__card-icon {
  font-family: var(--text-font-family);
  font-size: 56px;
  color: var(--fo-accent, #CAA46D);
  line-height: 1;
}
.ss-fo__card-label {
  font-family: var(--text-font-family);
  font-size: 11px;
  letter-spacing: 3.5px;
  color: var(--fo-accent, #CAA46D);
  text-transform: uppercase;
}
.ss-fo__card-caption {
  font-family: 'Outfit', var(--text-font-family);
  font-weight: 300;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(245, 242, 230, 0.6);
  margin: 0;
}
.ss-fo__card-quote {
  font-family: var(--heading-font-family);
  font-size: 24px;
  line-height: 1.33;
  color: var(--fo-text, #F5F2E6);
  margin: 0;
}

/* Body */
.ss-fo__body {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 720px;
}
.ss-fo__eyebrow-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.ss-fo__eyebrow {
  font-family: var(--text-font-family);
  font-size: 12px;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: var(--fo-accent, #CAA46D);
  margin: 0;
}
.ss-fo__pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 4px;
  font-family: var(--text-font-family);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.ss-fo__title {
  font-family: var(--heading-font-family);
  font-size: 52px;
  line-height: 1.15;
  font-weight: 400;
  margin: 0;
  color: var(--fo-text, #F5F2E6);
}
.ss-fo__title p { margin: 0; }
.ss-fo__subtitle {
  font-family: 'Outfit', var(--text-font-family);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.625;
  color: var(--fo-accent, #CAA46D);
  margin: 0;
}
.ss-fo__subtitle p { margin: 0; }
.ss-fo__divider {
  display: block;
  width: 60px;
  height: 1px;
  background: var(--fo-accent, #CAA46D);
}

/* Bullets grid 2-col */
.ss-fo__bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px 32px;
}
.ss-fo__bullet {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Outfit', var(--text-font-family);
  font-weight: 500;
  font-size: 14px;
  color: var(--fo-text, #F5F2E6);
}
.ss-fo__bullet-marker {
  color: var(--fo-accent, #CAA46D);
  font-family: var(--text-font-family);
}

/* CTA row */
.ss-fo__cta-row {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  padding-top: 12px;
}
.ss-fo__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 16px 28px;
  border-radius: 8px;
  border: 1px solid var(--fo-accent, #CAA46D);
  background: transparent;
  font-family: var(--text-font-family);
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--fo-accent, #CAA46D);
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}
.ss-fo__cta:hover {
  background: var(--fo-accent, #CAA46D);
  color: var(--fo-bg, #241F21);
}
.ss-fo__cta-note {
  font-family: 'Outfit', var(--text-font-family);
  font-weight: 300;
  font-size: 13px;
  color: rgba(245, 242, 230, 0.7);
  margin: 0;
}
.ss-fo__cta-note p { margin: 0; }

/* Responsive */
@media (max-width: 1023px) {
  .ss-fo { padding: 80px 20px; }
  .ss-fo__container { grid-template-columns: 1fr; gap: 48px; }
  .ss-fo__card { max-width: 480px; margin: 0 auto; }
  .ss-fo__title { font-size: 40px; }
}
@media (max-width: 640px) {
  .ss-fo { padding: 56px 16px; }
  .ss-fo__container { gap: 36px; }
  .ss-fo__title { font-size: 30px; }
  .ss-fo__subtitle { font-size: 15px; }
  .ss-fo__bullets { grid-template-columns: 1fr; gap: 12px; }
  .ss-fo__card-quote { font-size: 20px; }
}

/* ============================================
   26 · TOUT SUR LE RITUEL (Enissati) — Figma 81:897
   Header centré + 2-col : articles (esq) + FAQ accordion (dir).
   Consome blog.articles em read-only. Native <details>.
   ============================================ */
.ss-ri {
  padding: 120px 24px;
  background: var(--ri-bg, #EBE3D2);
  color: var(--ri-text, #241F21);
}
.ss-ri__container {
  max-width: 1760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 56px;
}

/* Header */
.ss-ri__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}
.ss-ri__eyebrow {
  font-family: var(--text-font-family);
  font-size: 12px;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: rgb(122, 76, 50);
  margin: 0;
}
.ss-ri__title {
  font-family: var(--heading-font-family);
  font-size: 56px;
  line-height: 1.14;
  font-weight: 400;
  color: var(--ri-text, #241F21);
  margin: 0;
}
.ss-ri__subtitle {
  font-family: 'Outfit', var(--text-font-family);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.625;
  color: rgb(122, 76, 50);
  margin: 0;
}
.ss-ri__sep {
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgb(202, 164, 109);
}
.ss-ri__sep-line {
  display: block;
  width: 60px;
  height: 1px;
  background: rgb(202, 164, 109);
}
.ss-ri__sep-icon {
  font-size: 12px;
  line-height: 1;
}

/* Body 2-col */
.ss-ri__body {
  display: grid;
  grid-template-columns: minmax(0, 1024px) 640px;
  gap: 64px;
  justify-content: center;
  align-items: start;
}
.ss-ri__articles, .ss-ri__faq {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

.ss-ri__col-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.ss-ri__col-label {
  font-family: var(--text-font-family);
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgb(122, 76, 50);
}
.ss-ri__col-link {
  font-family: var(--text-font-family);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ri-accent, #00ACB1);
  text-decoration: none;
  transition: opacity 0.2s ease;
}
.ss-ri__col-link:hover { opacity: 0.75; }

/* Articles — Featured */
.ss-ri__featured {
  background: #F5F2E6;
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.ss-ri__featured:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(36, 31, 33, 0.10);
}
.ss-ri__featured-media {
  width: 100%;
  aspect-ratio: 1024 / 480;
  position: relative;
  overflow: hidden;
}
.ss-ri__featured-img,
.ss-ri__small-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ss-ri__media-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.ss-ri__media-icon {
  font-family: var(--text-font-family);
  font-size: 72px;
  color: rgb(202, 164, 109);
  line-height: 1;
}
.ss-ri__media-icon--small { font-size: 44px; }
.ss-ri__media-label {
  font-family: var(--text-font-family);
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #F5F2E6;
}
.ss-ri__featured-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 32px 28px;
}
.ss-ri__meta,
.ss-ri__small-meta {
  font-family: var(--text-font-family);
  font-size: 10px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgb(122, 76, 50);
  margin: 0;
}
.ss-ri__featured-title {
  font-family: var(--heading-font-family);
  font-size: 32px;
  line-height: 1.25;
  font-weight: 400;
  color: var(--ri-text, #241F21);
  margin: 0;
}
.ss-ri__featured-excerpt {
  font-family: 'Outfit', var(--text-font-family);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.6;
  color: rgb(122, 76, 50);
  margin: 0;
}
.ss-ri__featured-link,
.ss-ri__small-link {
  font-family: var(--text-font-family);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ri-accent, #00ACB1);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: opacity 0.2s ease;
  position: static;
}
.ss-ri__featured-link:hover,
.ss-ri__small-link:hover { opacity: 0.75; }

/* Stretched link — pseudo-elemento que cobre o card todo,
   tornando o card inteiro clicável mantendo o &lt;a&gt; semanticamente correto. */
.ss-ri__featured-link::after,
.ss-ri__small-link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}
.ss-ri__featured-link:focus-visible,
.ss-ri__small-link:focus-visible {
  outline: 0;
}
.ss-ri__featured:focus-within,
.ss-ri__small:focus-within {
  outline: 2px solid var(--ri-accent, #00ACB1);
  outline-offset: 4px;
}

/* Small row */
.ss-ri__small-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.ss-ri__small {
  background: #F5F2E6;
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.ss-ri__small:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(36, 31, 33, 0.10);
}
.ss-ri__small-media {
  width: 100%;
  aspect-ratio: 5 / 3;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ss-ri__small-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px;
}
.ss-ri__small-title {
  font-family: var(--heading-font-family);
  font-size: 18px;
  line-height: 1.33;
  font-weight: 400;
  color: var(--ri-text, #241F21);
  margin: 0;
}
.ss-ri__small-excerpt {
  font-family: 'Outfit', var(--text-font-family);
  font-weight: 300;
  font-size: 13px;
  line-height: 1.54;
  color: rgb(122, 76, 50);
  margin: 0;
}

/* FAQ accordion */
.ss-ri__faq-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ss-ri__faq-item {
  background: transparent;
  border: 1px solid rgba(122, 76, 50, 0.18);
  border-radius: 8px;
  padding: 0;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.ss-ri__faq-item[open] {
  background: #F5F2E6;
  border-color: transparent;
}
.ss-ri__faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  cursor: pointer;
  list-style: none;
  font-family: 'Outfit', var(--text-font-family);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.47;
  color: var(--ri-text, #241F21);
}
.ss-ri__faq-q::-webkit-details-marker { display: none; }
.ss-ri__faq-q-icon {
  width: 14px;
  height: 14px;
  position: relative;
  flex-shrink: 0;
  color: rgb(122, 76, 50);
  font-family: var(--text-font-family);
}
.ss-ri__faq-q-icon::before,
.ss-ri__faq-q-icon::after {
  content: '';
  position: absolute;
  background: currentColor;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.ss-ri__faq-q-icon::before {
  top: 50%; left: 0; right: 0;
  height: 1.5px;
  transform: translateY(-50%);
}
.ss-ri__faq-q-icon::after {
  left: 50%; top: 0; bottom: 0;
  width: 1.5px;
  transform: translateX(-50%);
}
.ss-ri__faq-item[open] .ss-ri__faq-q-icon {
  color: var(--ri-accent, #00ACB1);
}
.ss-ri__faq-item[open] .ss-ri__faq-q-icon::after {
  opacity: 0;
}
.ss-ri__faq-a {
  padding: 0 24px 20px;
  font-family: 'Outfit', var(--text-font-family);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.57;
  color: rgb(122, 76, 50);
}
.ss-ri__faq-a p:first-child { margin-top: 0; }
.ss-ri__faq-a p:last-child { margin-bottom: 0; }

.ss-ri__faq-contact {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #F5F2E6;
  border-radius: 8px;
  padding: 16px 20px;
  text-decoration: none;
  font-family: 'Outfit', var(--text-font-family);
  font-weight: 300;
  font-size: 13px;
  color: var(--ri-text, #241F21);
  margin-top: 8px;
  transition: background 0.2s ease;
}
.ss-ri__faq-contact:hover { background: #EFE9D8; }
.ss-ri__faq-contact-icon {
  font-family: var(--text-font-family);
  font-size: 14px;
  color: rgb(202, 164, 109);
}

/* Responsive */
@media (max-width: 1279px) {
  .ss-ri__body { grid-template-columns: 1fr; gap: 48px; max-width: 720px; margin: 0 auto; }
  .ss-ri__faq { width: 100%; }
}
@media (max-width: 1023px) {
  .ss-ri { padding: 80px 20px; }
  .ss-ri__title { font-size: 40px; }
  .ss-ri__featured-title { font-size: 26px; }
}
@media (max-width: 640px) {
  .ss-ri { padding: 40px 14px !important; }
  .ss-ri__container { gap: 24px; }
  .ss-ri__header { margin-bottom: 8px; }
  .ss-ri__title { font-size: 26px; line-height: 1.15; }
  .ss-ri__subtitle { font-size: 13px; margin-top: 6px; }
  .ss-ri__body { gap: 32px !important; }
  .ss-ri__articles { display: grid; grid-template-columns: 1fr; gap: 12px; }

  /* Featured article: compacto, imagem com aspect-ratio reduzido */
  .ss-ri__featured { display: grid; grid-template-columns: 1fr; gap: 0; }
  .ss-ri__featured-media { aspect-ratio: 16 / 10; }
  .ss-ri__featured-body { padding: 14px 14px 16px; gap: 6px; }
  .ss-ri__meta, .ss-ri__small-meta { font-size: 9px; letter-spacing: 1.5px; }
  .ss-ri__featured-title { font-size: 18px; line-height: 1.2; margin: 4px 0 6px; }
  .ss-ri__featured-excerpt { font-size: 12px; line-height: 1.4; margin: 0 0 8px; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
  .ss-ri__featured-link, .ss-ri__small-link { font-size: 10px; letter-spacing: 1.5px; }

  /* Small articles: MOSAICO 2-col compacto */
  .ss-ri__small-row {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px;
  }
  .ss-ri__small {
    display: flex !important;
    flex-direction: column !important;
    border-radius: 12px;
    overflow: hidden;
  }
  .ss-ri__small-media {
    aspect-ratio: 1 / 1;
    width: 100%;
  }
  .ss-ri__small-body {
    padding: 10px 10px 12px !important;
    gap: 4px;
  }
  .ss-ri__small-title { font-size: 13px; line-height: 1.25; margin: 2px 0 4px; }
  .ss-ri__small-excerpt {
    font-size: 11px;
    line-height: 1.35;
    margin: 0 0 6px;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .ss-ri__small-meta { font-size: 8px; }
  .ss-ri__small-link { font-size: 9px; letter-spacing: 1px; }

  /* Col head + label compacto */
  .ss-ri__col-head { margin-bottom: 8px; }
  .ss-ri__col-label { font-size: 10px; letter-spacing: 1.5px; }
  .ss-ri__col-link { font-size: 10px; letter-spacing: 1px; }

  /* FAQ compacto */
  .ss-ri__faq-q { padding: 14px 16px; font-size: 13px; }
  .ss-ri__faq-a { padding: 0 16px 14px; font-size: 12px; }
}

/* 375px refinement — apertar ainda mais */
@media (max-width: 375px) {
  .ss-ri { padding: 36px 12px !important; }
  .ss-ri__title { font-size: 24px; }
  .ss-ri__featured-title { font-size: 16px; }
  .ss-ri__small-title { font-size: 12px; }
  .ss-ri__small-row { gap: 8px; }
  .ss-ri__small-body { padding: 8px 8px 10px !important; }
}

/* ============================================
   27 · GUIDE PDF GRATUIT (Enissati) — Figma 45:939
   2-col : mockup PDF (esq) + copy/bullets/form Klaviyo (dir).
   ============================================ */
.ss-gp {
  padding: 96px 24px;
  background: var(--gp-bg, #3A2C1E);
  color: var(--gp-text, #F5F2E6);
}
.ss-gp__container {
  max-width: 1340px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 80px;
  align-items: center;
  justify-content: center;
}

/* Mockup PDF */
.ss-gp__mockup {
  position: relative;
  width: 380px;
  height: 480px;
}
.ss-gp__mockup-shadow {
  position: absolute;
  top: 0;
  left: 0;
  width: 340px;
  height: 480px;
  background: rgba(36, 31, 33, 0.5);
  border-radius: 6px;
  transform: translate(0, 8px);
}
.ss-gp__mockup-cover {
  position: absolute;
  top: 0;
  left: 20px;
  width: 340px;
  height: 480px;
  background: #F5F2E6;
  border: 1px solid var(--gp-accent, #CAA46D);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  padding: 48px 36px;
  overflow: hidden;
}
.ss-gp__cover-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ss-gp__cover-brand {
  font-family: var(--text-font-family);
  font-size: 14px;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: rgb(122, 76, 50);
}
.ss-gp__cover-rule {
  display: block;
  width: 40px;
  height: 1px;
  background: var(--gp-accent, #CAA46D);
}
.ss-gp__cover-eyebrow {
  font-family: var(--text-font-family);
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gp-accent, #CAA46D);
  align-self: center;
  margin-top: 32px;
}
.ss-gp__cover-title {
  font-family: var(--heading-font-family);
  font-size: 36px;
  line-height: 1.17;
  color: rgb(36, 31, 33);
  text-align: center;
  width: 100%;
}
.ss-gp__cover-title p { margin: 0; }
.ss-gp__cover-subtitle {
  font-family: 'Outfit', var(--text-font-family);
  font-weight: 300;
  font-size: 13px;
  color: rgb(122, 76, 50);
  align-self: center;
}
.ss-gp__cover-author {
  font-family: 'Outfit', var(--text-font-family);
  font-weight: 300;
  font-size: 10px;
  color: rgb(122, 76, 50);
  align-self: center;
  margin-top: auto;
}

/* Body */
.ss-gp__body {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 760px;
}
.ss-gp__eyebrow {
  font-family: var(--text-font-family);
  font-size: 11px;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: var(--gp-accent, #CAA46D);
  margin: 0;
}
.ss-gp__title {
  font-family: var(--heading-font-family);
  font-size: 46px;
  line-height: 1.13;
  font-weight: 400;
  color: var(--gp-text, #F5F2E6);
  margin: 0;
}
.ss-gp__title p { margin: 0; }
.ss-gp__subtitle {
  font-family: 'Outfit', var(--text-font-family);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.5;
  color: var(--gp-accent, #CAA46D);
  margin: 0;
  max-width: 680px;
}
.ss-gp__subtitle p { margin: 0; }

.ss-gp__bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ss-gp__bullet {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Outfit', var(--text-font-family);
  font-weight: 300;
  font-size: 14px;
  color: var(--gp-text, #F5F2E6);
}
.ss-gp__bullet-marker {
  color: var(--gp-accent, #CAA46D);
  font-family: var(--text-font-family);
  font-size: 13px;
}

/* Form */
.ss-gp__form {
  display: flex;
  height: 60px;
  max-width: 540px;
  margin-top: 8px;
}
.ss-gp__form--klaviyo {
  height: auto;
  display: block;
}
.ss-gp__input {
  flex: 1;
  background: #F5F2E6;
  border: 0;
  border-radius: 8px 0 0 8px;
  padding: 0 20px;
  font-family: 'Outfit', var(--text-font-family);
  font-weight: 300;
  font-size: 15px;
  color: rgb(36, 31, 33);
  outline: 0;
  min-width: 0;
}
.ss-gp__input::placeholder { color: #9B9B9B; }
.ss-gp__submit {
  width: 180px;
  flex-shrink: 0;
  background: var(--gp-accent, #CAA46D);
  border: 0;
  border-radius: 0 8px 8px 0;
  padding: 0 20px;
  font-family: var(--text-font-family);
  font-size: 13px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--gp-bg, #3A2C1E);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: filter 0.2s ease;
  line-height: 1 !important;
  min-height: 0 !important;
}
.ss-gp__submit:hover { filter: brightness(0.95); }

.ss-gp__trust {
  font-family: 'Outfit', var(--text-font-family);
  font-weight: 300;
  font-size: 11px;
  line-height: 1.45;
  color: var(--gp-accent, #CAA46D);
  margin: 0;
}

/* Responsive */
@media (max-width: 1023px) {
  .ss-gp { padding: 64px 20px; }
  .ss-gp__container { grid-template-columns: 1fr; gap: 48px; }
  .ss-gp__mockup { margin: 0 auto; }
  .ss-gp__title { font-size: 36px; }
}
@media (max-width: 640px) {
  .ss-gp { padding: 48px 16px; }
  .ss-gp__container { gap: 32px; }
  .ss-gp__mockup { width: 280px; height: 380px; transform: scale(0.95); }
  .ss-gp__mockup-shadow,
  .ss-gp__mockup-cover { width: 260px; height: 380px; left: 16px; padding: 36px 28px; }
  .ss-gp__cover-title { font-size: 28px; }
  .ss-gp__title { font-size: 28px; }
  .ss-gp__form { flex-direction: column; height: auto; gap: 8px; }
  .ss-gp__input { border-radius: 8px; height: 52px; }
  .ss-gp__submit { width: 100%; border-radius: 8px; height: 52px; }
}

/* ============================================
   28 · FOOTER (Enissati) — Figma 14:1097
   4-col (logo + 3 colunas dinâmicas) + bottom row.
   Substituí sections/footer.liquid (Krunkers) no theme.liquid.
   ============================================ */
.ss-footer {
  background: #F5F2E6;
  color: #241F21;
  padding: 56px 96px;
  font-family: 'Outfit', var(--text-font-family);
  font-weight: 300;
}
.ss-footer__container {
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 36px;
}

/* Top: 4 cols iguais (cada uma 280px no Figma, gap 48px) */
.ss-footer__cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 48px;
  align-items: start;
}
.ss-footer__col {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.ss-footer__col--logo { gap: 18px; }

/* Col 1 — Logo */
.ss-footer__logo-link {
  display: inline-block;
  color: rgb(122, 76, 50);
  text-decoration: none;
  transition: color 0.2s ease;
}
.ss-footer__logo-link:hover { color: rgb(202, 164, 109); }
.ss-footer__logo-img {
  max-width: 160px;
  height: auto;
  display: block;
}
.ss-footer__logo-svg {
  display: inline-block;
  line-height: 0;
}
.ss-footer__logo-svg svg {
  display: block;
  width: 160px;
  height: auto;
  /* SVG usa fill: currentColor — herda do .ss-footer__logo-link */
}
.ss-footer__tagline {
  font-family: 'Outfit', var(--text-font-family);
  font-weight: 300;
  font-size: 13px;
  line-height: 1.54;
  color: rgb(122, 76, 50);
  max-width: 260px;
}
.ss-footer__tagline p { margin: 0; }
/* Réseaux sociaux — ícones limpos (sobrescreve os botões 45/55px do Krunkers) */
.ss-footer__socials {
  margin: 2px 0 0;
}
.ss-footer__socials .social-media {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  margin: 0 0 0 -9px; /* alinha o 1º ícone flush à esquerda do logo/tagline */
  padding: 0;
  list-style: none;
  border: none !important;
  border-radius: 0 !important;
  overflow: visible;
}
.ss-footer__socials .social-media__item {
  border: none !important;
  border-radius: 0 !important;
  overflow: visible;
  background: none !important;
}
.ss-footer__socials .social-media__item::before,
.ss-footer__socials .social-media__item::after {
  display: none !important;
  content: none !important;
}
.ss-footer__socials .social-media__link,
.ss-footer__socials .social-media__item:hover .social-media__link {
  width: 38px;
  height: 38px;
  color: #241F21;
  background: transparent !important;
  transition: color 0.2s ease, transform 0.2s ease;
}
.ss-footer__socials .social-media__link svg {
  width: 19px;
  height: 19px;
  fill: currentColor;
}
.ss-footer__socials .social-media__item:hover .social-media__link {
  color: #7A4C32; /* accent brun au survol, sans remplissage */
  transform: translateY(-1px);
}

/* Cols 2-4 — Heading + links */
.ss-footer__col-heading {
  font-family: var(--text-font-family);
  font-size: 11px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgb(122, 76, 50);
  margin: 0 0 4px;
  font-weight: 400;
}
.ss-footer__links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ss-footer__link {
  font-family: 'Outfit', var(--text-font-family);
  font-weight: 300;
  font-size: 13px;
  line-height: 1.54;
  color: #241F21;
  text-decoration: none;
  transition: color 0.2s ease;
}
.ss-footer__link:hover { color: rgb(202, 164, 109); }

/* free_links (richtext com <p><a>...) — mesmo visual dos links de menu */
.ss-footer__free-text {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ss-footer__free-text p {
  margin: 0;
  font-family: 'Outfit', var(--text-font-family);
  font-weight: 300;
  font-size: 13px;
  line-height: 1.54;
}
.ss-footer__free-text a {
  color: #241F21;
  text-decoration: none;
  transition: color 0.2s ease;
}
.ss-footer__free-text a:hover { color: rgb(202, 164, 109); }

.ss-footer__paragraph {
  font-family: 'Outfit', var(--text-font-family);
  font-weight: 300;
  font-size: 13px;
  line-height: 1.54;
  color: #241F21;
}
.ss-footer__paragraph p { margin: 0 0 10px; }
.ss-footer__paragraph p:last-child { margin-bottom: 0; }

/* Bottom row */
.ss-footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  min-height: 40px;
}
.ss-footer__bottom-text {
  font-family: 'Outfit', var(--text-font-family);
  font-weight: 300;
  font-size: 12px;
  color: rgb(122, 76, 50);
  margin: 0;
}
.ss-footer__bottom-text--right { text-align: right; }

/* Responsive */
@media (max-width: 1399px) {
  .ss-footer { padding: 56px 48px; }
  .ss-footer__cols { gap: 36px; }
}
@media (max-width: 1023px) {
  .ss-footer { padding: 48px 20px; }
  .ss-footer__cols { grid-template-columns: 1fr 1fr; gap: 36px; }
}
@media (max-width: 640px) {
  .ss-footer { padding: 40px 16px; }
  .ss-footer__container { gap: 28px; }
  .ss-footer__cols { grid-template-columns: 1fr; gap: 28px; }
  .ss-footer__bottom { flex-direction: column; align-items: flex-start; gap: 8px; }
  .ss-footer__bottom-text--right { text-align: left; }
  .ss-footer__logo-text { font-size: 18px; letter-spacing: 5px; }
}

/* ============================================
   29a · COLLECTION HERO (Enissati) — Figma 133:932
   Eyebrow + título + descrição + breadcrumb. Default em todas as coleções.
   ============================================ */
.ss-ch {
  padding: 40px 24px 16px;
  background: #F5F2E6;
  color: #241F21;
}
/* Collection page: bg consistente em todo o #main (header tem pill flutuante,
   o espaço atrás dele precisa do mesmo crème pra não haver "2 cores"). */
body.template-collection #main,
body.template-list-collections #main,
body.template-product #main,
body.template-page #main,
body.template-article #main,
body.template-blog #main,
body.template-search #main {
  background: #F5F2E6;
}
.ss-ch__container {
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}
.ss-ch__eyebrow {
  font-family: var(--text-font-family);
  font-size: 12px;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: rgb(122, 76, 50);
  margin: 0;
  font-weight: 400;
}
.ss-ch__title {
  font-family: var(--heading-font-family);
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1.1;
  font-weight: 400;
  color: var(--ch-text, #241F21);
  margin: 0;
}
.ss-ch__desc {
  font-family: 'Outfit', var(--text-font-family);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.625;
  color: rgb(122, 76, 50);
  max-width: 720px;
}
.ss-ch__desc p { margin: 0; }
.ss-ch__breadcrumb {
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Outfit', var(--text-font-family);
  font-weight: 300;
  font-size: 12px;
  margin-top: 12px;
  padding: 0 calc(8.33vw - 32px);
}
.ss-ch__crumb {
  color: rgb(122, 76, 50);
  text-decoration: none;
  transition: color 0.2s ease;
}
.ss-ch__crumb:hover { color: rgb(202, 164, 109); }
.ss-ch__crumb--current { color: var(--ch-text, #241F21); cursor: default; }
.ss-ch__crumb-sep { color: rgba(122, 76, 50, 0.4); }

@media (max-width: 1023px) {
  .ss-ch { padding: 28px 20px 12px; }
  .ss-ch__container { gap: 16px; }
  .ss-ch__breadcrumb { padding: 0; align-self: center; }
}

/* ============================================
   29b · COLLECTION GRID + FILTERS (Enissati) — Figma 134:897 + 135:897
   Filter bar nativo Shopify + grid 3-col + cards customizados + AJAX add-to-cart.
   ============================================ */
.ss-cg {
  background: #F5F2E6;
}

/* Filter bar */
.ss-cg__filterbar {
  border-top: 1px solid rgba(122, 76, 50, 0.15);
  border-bottom: 1px solid rgba(122, 76, 50, 0.15);
}
.ss-cg__filterbar-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  align-items: center;
}
.ss-cg__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.ss-cg__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: 24px;
  border: 1px solid rgba(122, 76, 50, 0.3);
  background: transparent;
  font-family: var(--text-font-family);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #241F21;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  white-space: nowrap;
}
.ss-cg__pill:hover {
  border-color: rgba(122, 76, 50, 0.6);
  background: rgba(122, 76, 50, 0.05);
}
.ss-cg__pill--active {
  background: #241F21;
  color: #FFFFFF;
  border-color: #241F21;
}
.ss-cg__pill--active:hover { background: #241F21; color: #FFFFFF; }
.ss-cg__pill-caret {
  font-size: 10px;
  line-height: 1;
  transition: transform 0.2s ease;
}
.ss-cg__pill-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  background: rgb(202, 164, 109);
  color: #FFFFFF;
  font-size: 10px;
  letter-spacing: 0;
  padding: 0 5px;
}

/* Filter dropdown (<details>) */
.ss-cg__filter {
  position: relative;
}
.ss-cg__filter > summary {
  list-style: none;
}
.ss-cg__filter > summary::-webkit-details-marker { display: none; }
.ss-cg__filter[open] .ss-cg__pill-caret { transform: rotate(180deg); }
.ss-cg__filter[open] .ss-cg__pill--filter {
  border-color: #241F21;
  color: #241F21;
}
.ss-cg__filter-pop {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 20;
  min-width: 240px;
  max-width: 320px;
  background: #FFFFFF;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(36, 31, 33, 0.12);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ss-cg__filter-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 280px;
  overflow-y: auto;
}
.ss-cg__filter-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 6px;
  cursor: pointer;
  font-family: 'Outfit', var(--text-font-family);
  font-weight: 400;
  font-size: 13px;
  color: #241F21;
  border-radius: 6px;
  transition: background 0.15s ease;
}
.ss-cg__filter-opt:hover { background: rgba(122, 76, 50, 0.06); }
.ss-cg__filter-opt input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #00ACB1;
  margin: 0;
}
.ss-cg__filter-opt-label { flex: 1; }
.ss-cg__filter-opt-count {
  color: rgb(155, 155, 155);
  font-size: 12px;
}
.ss-cg__filter-opt.is-disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.ss-cg__filter-clear {
  align-self: flex-end;
  font-family: var(--text-font-family);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgb(122, 76, 50);
  text-decoration: underline;
  margin-top: 4px;
}
.ss-cg__filter-pop--price {
  min-width: 280px;
}
.ss-cg__price-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.ss-cg__price-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--text-font-family);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgb(122, 76, 50);
}
.ss-cg__price-field input {
  padding: 10px 12px;
  border: 1px solid rgba(122, 76, 50, 0.25);
  border-radius: 6px;
  font-family: 'Outfit', var(--text-font-family);
  font-size: 14px;
  color: #241F21;
  background: #FFFFFF;
  outline: 0;
  letter-spacing: 0;
  text-transform: none;
}
.ss-cg__price-field input:focus { border-color: #00ACB1; }

/* Sort */
.ss-cg__sort {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ss-cg__sort-label {
  font-family: var(--text-font-family);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgb(122, 76, 50);
}
.ss-cg__sort-select {
  border: 0;
  background: transparent;
  font-family: 'Outfit', var(--text-font-family);
  font-weight: 500;
  font-size: 13px;
  color: #241F21;
  cursor: pointer;
  padding-right: 16px;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2 4l3 3 3-3' fill='none' stroke='%23241F21' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 10px;
  outline: 0;
}

/* Grid + Cards */
.ss-cg__grid-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 64px 24px 96px;
}
.ss-cg__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px 20px;
}
.ss-cg__card {
  background: #FFFFFF;
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  box-shadow: 0 1px 3px rgba(36, 31, 33, 0.05);
  text-align: left;
}
.ss-cg__card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(36, 31, 33, 0.10);
}
.ss-cg__card:hover .ss-cg__card-img { transform: scale(1.04); }
.ss-cg__card-link {
  position: relative;
  display: block;
  text-decoration: none;
  color: inherit;
}
.ss-cg__card-media {
  position: relative;
  aspect-ratio: 280 / 240;
  background: rgb(235, 227, 210);
  overflow: hidden;
}
.ss-cg__card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.5s ease;
}
.ss-cg__card-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: rgb(202, 164, 109);
}
.ss-cg__card-icon {
  font-family: var(--text-font-family);
  font-size: 56px;
  line-height: 1;
}
.ss-cg__card-placeholder-label {
  font-family: var(--text-font-family);
  font-size: 10px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(122, 76, 50, 0.6);
}
/* Badge: texto teal pequeno no body (alinhado com ss-bs-card da home) */
.ss-cg__card-badge {
  font-family: var(--text-font-family);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgb(0, 172, 177);
  margin: 0;
  min-height: 14px;
}
/* Variante INDISPONIBLE: cor cinza discreta (substitui o teal de promo) */
.ss-cg__card-badge--unavailable {
  color: rgb(155, 155, 155);
}

/* Card body — tipografia proporcional ao card menor (grid 4-col, max 1200) */
.ss-cg__card-body {
  padding: 18px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.ss-cg__card-hair {
  font-family: var(--text-font-family);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgb(122, 76, 50);
  margin: 0;
}
.ss-cg__card-title {
  font-family: var(--heading-font-family);
  font-size: 20px;
  line-height: 1.2;
  font-weight: 400;
  color: rgb(36, 31, 33);
  margin: 0;
}
.ss-cg__card-title a {
  color: inherit;
  text-decoration: none;
}
.ss-cg__card-title a:hover { color: rgb(202, 164, 109); }
.ss-cg__card-desc {
  font-family: 'Outfit', var(--text-font-family);
  font-weight: 300;
  font-size: 12px;
  line-height: 1.45;
  color: rgb(122, 76, 50);
  margin: 0;
}
.ss-cg__card-rating {
  padding-top: 4px;
  min-height: 18px; /* reserva espaço enquanto Loox carrega, evita layout shift */
}
.ss-cg__card-rating:empty { display: none; } /* esconde se Loox não preencher (produto sem reviews) */
.ss-cg__card-footer {
  margin-top: auto;
  padding-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.ss-cg__card-price {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  line-height: 1;
}
.ss-cg__card-price-old {
  font-family: 'Outfit', var(--text-font-family);
  font-weight: 300;
  font-size: 12px;
  color: rgb(155, 155, 155);
  text-decoration: line-through;
  line-height: 1;
}
.ss-cg__card-price-now {
  font-family: var(--heading-font-family);
  font-weight: 400;
  font-size: 20px;
  color: rgb(0, 172, 177);
  line-height: 1;
}
.ss-cg__card-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 44px;
  padding: 0 14px;
  background: rgb(0, 172, 177);
  color: #FFFFFF;
  border: 0;
  border-radius: 8px;
  font-family: var(--text-font-family);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease;
  text-decoration: none;
  line-height: 1 !important;
  min-height: 0 !important;
  white-space: nowrap;
}
.ss-cg__card-add:hover { background: rgb(0, 152, 157); transform: translateY(-1px); }
.ss-cg__card-add.is-loading { opacity: 0.7; cursor: wait; }
.ss-cg__card-add.is-success { background: rgb(46, 158, 123); }
.ss-cg__card-add.is-error { background: rgb(222, 42, 42); }
.ss-cg__card-add--unavailable {
  background: rgb(155, 155, 155);
  cursor: not-allowed;
  pointer-events: none;
}

/* Empty state */
.ss-cg__empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 20px;
  font-family: 'Outfit', var(--text-font-family);
  font-weight: 300;
  font-size: 16px;
  color: rgb(122, 76, 50);
}
.ss-cg__empty-clear {
  display: inline-block;
  margin-top: 12px;
  font-family: var(--text-font-family);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgb(0, 172, 177);
  text-decoration: underline;
}

/* Pagination */
.ss-cg__pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin-top: 48px;
}
.ss-cg__page-link {
  font-family: var(--text-font-family);
  font-size: 12px;
  letter-spacing: 1.5px;
  color: rgb(122, 76, 50);
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 6px;
  transition: background 0.2s ease;
}
.ss-cg__page-link:hover { background: rgba(122, 76, 50, 0.08); }
.ss-cg__page-link--current {
  background: #241F21;
  color: #FFFFFF;
}

/* Responsive */
@media (max-width: 1199px) {
  .ss-cg__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
  .ss-cg__filterbar-inner { padding: 16px 20px; }
  .ss-cg__grid-wrap { padding: 48px 20px 72px; }
  .ss-cg__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 16px; }
  .ss-cg__card-body { padding: 20px 22px 22px; }
  .ss-cg__card-title { font-size: 20px; }
}
@media (max-width: 640px) {
  .ss-cg__grid-wrap { padding: 36px 16px 56px; }
  .ss-cg__grid { gap: 24px 12px; }
  .ss-cg__card-body { padding: 18px 18px 20px; gap: 6px; }
  .ss-cg__card-title { font-size: 18px; }
  .ss-cg__card-price-now { font-size: 20px; }

  /* Mobile: esconde o botão AJOUTER E o pill INDISPONIBLE do footer
     (estavam cortados/transbordando). A indisponibilidade agora aparece
     como badge cinza no topo do card (substitui o badge ÉCONOMISEZ). */
  .ss-cg__card-add,
  .ss-cg__card-add--unavailable { display: none !important; }
  /* Footer fica só com o preço */
  .ss-cg__card-footer { justify-content: flex-start; }

  .ss-cg__filterbar-inner { flex-direction: column; align-items: stretch; gap: 12px; }
  .ss-cg__pills { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
  .ss-cg__sort { justify-content: flex-end; }
  .ss-cg__filter-pop { left: 0; right: 0; min-width: 0; }
}

/* ============================================
   29c · COLLECTION SEO 3 cols (Enissati) — Figma 136:897
   Eyebrow + título + 3 cols (Hydra / Nigella / BTX).
   ============================================ */
.ss-cs {
  background: #EBE3D2;
  color: #241F21;
  padding: 50px 24px 96px;
}
.ss-cs__container {
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}
.ss-cs__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}
.ss-cs__eyebrow {
  font-family: var(--text-font-family);
  font-size: 12px;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: rgb(122, 76, 50);
  margin: 0;
  font-weight: 400;
}
.ss-cs__title {
  font-family: var(--heading-font-family);
  font-size: clamp(28px, 3.5vw, 44px);
  line-height: 1.18;
  font-weight: 400;
  color: #241F21;
  margin: 0;
  max-width: 900px;
}
.ss-cs__cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 48px;
  width: 100%;
  max-width: 1440px;
  padding-top: 24px;
}
.ss-cs__col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.ss-cs__col-heading {
  font-family: var(--heading-font-family);
  font-size: 22px;
  line-height: 1.18;
  font-weight: 400;
  color: #241F21;
  margin: 0;
}
.ss-cs__col-divider {
  display: block;
  width: 40px;
  height: 1px;
  background: rgb(202, 164, 109);
}
.ss-cs__col-text {
  font-family: 'Outfit', var(--text-font-family);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.57;
  color: rgb(122, 76, 50);
}
.ss-cs__col-text p { margin: 0 0 8px; }
.ss-cs__col-text p:last-child { margin-bottom: 0; }

@media (max-width: 1023px) {
  .ss-cs { padding: 40px 20px 72px; }
  .ss-cs__cols { grid-template-columns: 1fr; gap: 28px; max-width: 600px; }
}
@media (max-width: 640px) {
  .ss-cs { padding: 32px 16px 56px; }
}

/* ============================================
   31 · PDP MAIN (Enissati) — Figma 143:897
   Section custom completa que substitui main-product Krunkers.
   Container contido (max-width), bg herda do body.
   ============================================ */
.ss-pm {
  padding: 0 0 48px;
  background: transparent; /* herda body — não 100% width pintado */
}
.ss-pm__container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 580px;
  gap: 80px;
  align-items: start;
}

/* ─────────────────────────────────────────
   GALERIA — 2 layouts via section.settings.thumbs_position
   ───────────────────────────────────────── */

/* DEFAULT: thumbs à esquerda (vertical, sticky)
   FIX: align-self + height fit-content explicit → sticky engata
   mesmo dentro de grid container. Sem isso, grid item estica pra
   altura do irmão (info column) e sticky morre. */
.ss-pm--thumbs-left .ss-pm__gallery {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  grid-template-rows: auto;
  gap: 16px;
  position: sticky;
  top: 110px;
  align-items: start;
  align-self: start;
  height: fit-content;
}
.ss-pm--thumbs-left .ss-pm__thumbs {
  display: flex;
  flex-direction: column;
  gap: 12px;
  grid-column: 1;
  grid-row: 1;
  width: 72px;
  /* Limita altura à da imagem principal — scroll interno fino se passar */
  max-height: clamp(400px, 80vh, 720px);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(122, 76, 50, 0.3) transparent;
}
.ss-pm--thumbs-left .ss-pm__thumbs::-webkit-scrollbar { width: 4px; }
.ss-pm--thumbs-left .ss-pm__thumbs::-webkit-scrollbar-track { background: transparent; }
.ss-pm--thumbs-left .ss-pm__thumbs::-webkit-scrollbar-thumb {
  background: rgba(122, 76, 50, 0.3);
  border-radius: 2px;
}
.ss-pm--thumbs-left .ss-pm__media {
  grid-column: 2;
  grid-row: 1;
}

/* ALT: thumbs embaixo (horizontal) */
.ss-pm--thumbs-below .ss-pm__gallery {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: 110px;
  align-self: start;
  height: fit-content;
}
.ss-pm--thumbs-below .ss-pm__thumbs {
  display: flex;
  flex-direction: row;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: none;
}
.ss-pm--thumbs-below .ss-pm__thumbs::-webkit-scrollbar { display: none; }
.ss-pm--thumbs-below .ss-pm__thumb { flex-shrink: 0; }
.ss-pm__thumb {
  width: 72px;
  height: 96px;
  border: 2px solid transparent;
  border-radius: 8px;
  background: #EBE3D2;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.2s ease;
}
.ss-pm__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ss-pm__thumb.is-active {
  border-color: #241F21;
}
.ss-pm__thumb:hover:not(.is-active) {
  border-color: rgba(36, 31, 33, 0.3);
}
.ss-pm__media {
  position: relative;
  background: #EBE3D2;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  max-width: 100%;
  /* Permite scroll vertical normal mas captura swipe horizontal pro JS */
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}
.ss-pm__media-track {
  position: relative;
  width: 100%;
  height: 100%;
}
.ss-pm__media-item {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.ss-pm__media-item.is-active {
  opacity: 1;
  pointer-events: auto;
}
.ss-pm__media-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Impede drag nativo da imagem (que captura touchstart antes do nosso JS) */
  -webkit-user-drag: none;
  user-drag: none;
  pointer-events: none;
}
.ss-pm__media--placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.ss-pm__media-icon {
  font-family: var(--text-font-family);
  font-size: 80px;
  color: #CAA46D;
  line-height: 1;
}
.ss-pm__media-label {
  font-family: var(--text-font-family);
  font-size: 11px;
  letter-spacing: 3px;
  color: rgba(122, 76, 50, 0.5);
}
.ss-pm__badge {
  position: absolute;
  top: 24px;
  left: 24px;
  z-index: 2;
  background: #241F21;
  color: #FFFFFF;
  font-family: var(--text-font-family);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 4px;
}

/* Setas prev/next sobre a imagem principal */
.ss-pm__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(36, 31, 33, 0.08);
  color: #241F21;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 4px 14px rgba(36, 31, 33, 0.08);
  transition: background 0.2s ease, transform 0.15s ease, opacity 0.2s ease;
  opacity: 0;
}
.ss-pm__media:hover .ss-pm__nav,
.ss-pm__nav:focus-visible { opacity: 1; }
.ss-pm__nav:hover {
  background: #FFFFFF;
  transform: translateY(-50%) scale(1.05);
}
.ss-pm__nav--prev { left: 16px; }
.ss-pm__nav--next { right: 16px; }

/* Dots de paginação — escondidos no desktop, visíveis só no mobile */
.ss-pm__dots {
  display: none;
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  gap: 6px;
  z-index: 2;
  pointer-events: none;
}
.ss-pm__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(36, 31, 33, 0.25);
  transition: background 0.2s ease, transform 0.2s ease;
}
.ss-pm__dot.is-active {
  background: rgba(36, 31, 33, 0.9);
  transform: scale(1.3);
}

/* Mobile: navegação só por swipe — esconde setas e thumbs.
   Remove qualquer click handler conflitante; o pointerdown na .ss-pm__media
   fica livre pra ser capturado pelo JS de swipe. */
@media (max-width: 740px) {
  .ss-pm__nav,
  .ss-pm__thumbs { display: none !important; }
  .ss-pm__dots { display: flex; }
  /* O .ss-pm vira 1 coluna sem thumbs */
  .ss-pm--thumbs-left .ss-pm__media,
  .ss-pm--thumbs-below .ss-pm__media {
    grid-column: 1 / -1;
    grid-row: 1;
  }
  /* Dica visual: cursor de "agarrar" + hint de paginação */
  .ss-pm__media { cursor: grab; }
  .ss-pm__media:active { cursor: grabbing; }
}

/* Regra antiga (setas menores no mobile) — DESATIVADA: setas escondidas no mobile
   pela regra acima. Mantida só pra histórico de fallback. */

/* ─────────────────────────────────────────
   BUY BOX (direita)
   ───────────────────────────────────────── */
.ss-pm__info {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.ss-pm__hair-pill {
  align-self: flex-start;
  background: #EBE3D2;
  border-radius: 12px;
  padding: 6px 12px;
  font-family: var(--text-font-family);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgb(122, 76, 50);
}
.ss-pm__title {
  font-family: var(--heading-font-family);
  font-weight: 400;
  font-size: 56px;
  line-height: 64px;
  letter-spacing: -0.3px;
  color: #241F21;
  margin: 0;
}
.ss-pm__subtitle {
  font-family: 'Outfit', var(--text-font-family);
  font-weight: 300;
  font-size: 16px;
  line-height: 26px;
  color: rgb(122, 76, 50);
  margin: 0;
}
.ss-pm__subtitle p { margin: 0; }
.ss-pm__rating {
  min-height: 22px;
  font-size: 16px;
  color: rgb(202, 164, 109);
}
.ss-pm__rating:empty { display: none; }
.ss-pm__filete {
  display: block;
  width: 60px;
  height: 1px;
  background: rgb(202, 164, 109);
  margin: 6px 0;
}
.ss-pm__price {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
}
.ss-pm__price-old {
  font-family: 'Outfit', var(--text-font-family);
  font-weight: 300;
  font-size: 20px;
  color: rgb(155, 155, 155);
  text-decoration: line-through;
}
.ss-pm__price-now {
  font-family: var(--heading-font-family);
  font-weight: 400;
  font-size: 40px;
  line-height: 1;
  color: #241F21;
}
.ss-pm__price-save {
  background: rgb(0, 172, 177);
  color: #FFFFFF;
  font-family: var(--text-font-family);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 4px;
}
.ss-pm__subprice {
  font-family: 'Outfit', var(--text-font-family);
  font-weight: 300;
  font-size: 12px;
  color: rgb(122, 76, 50);
  margin: 0;
}

/* Format switch — 2 cards lado-a-lado */
.ss-pm__format {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 16px;
}
.ss-pm__format-label {
  font-family: var(--text-font-family);
  font-size: 11px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgb(122, 76, 50);
  margin: 0;
}
.ss-pm__format-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.ss-pm__format-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 20px;
  border-radius: 12px;
  min-height: 80px;
  text-decoration: none;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.ss-pm__format-item--current {
  background: #FFFFFF;
  border: 2px solid rgb(0, 172, 177);
}
.ss-pm__format-item--link {
  background: transparent;
  border: 1px solid rgba(122, 76, 50, 0.3);
  cursor: pointer;
}
.ss-pm__format-item--link:hover {
  border-color: rgb(0, 172, 177);
  transform: translateY(-1px);
}
.ss-pm__format-item--soldout {
  background: transparent;
  border: 1px solid rgba(122, 76, 50, 0.2);
  cursor: default;
}
.ss-pm__format-item--soldout .ss-pm__format-item-label,
.ss-pm__format-item--soldout .ss-pm__format-item-meta {
  color: rgba(36, 31, 33, 0.55);
}
/* Head: label à esquerda + chip "Indisponible" à direita */
.ss-pm__format-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
/* Chip "Indisponível" — discreto, cinza muted */
.ss-pm__format-item-tag {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(155, 155, 155, 0.15);
  color: rgb(122, 122, 122);
  font-family: var(--text-font-family);
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 500;
  white-space: nowrap;
}
.ss-pm__format-item-label {
  font-family: 'Outfit', var(--text-font-family);
  font-weight: 500;
  font-size: 16px;
  color: #241F21;
  margin: 0;
}
.ss-pm__format-item-meta {
  font-family: 'Outfit', var(--text-font-family);
  font-weight: 300;
  font-size: 12px;
  color: rgb(122, 76, 50);
  margin: 0;
}
.ss-pm__format-item-status {
  font-family: var(--text-font-family);
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin: 0;
  margin-top: auto;
}
.ss-pm__format-item--current .ss-pm__format-item-status {
  color: rgb(0, 172, 177);
}
.ss-pm__format-item--link .ss-pm__format-item-status {
  color: rgb(122, 76, 50);
}

/* Actions — ATC + Buy Now */
.ss-pm__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 16px;
}
.ss-pm__atc {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 64px;
  background: rgb(0, 172, 177);
  color: #F5F2E6;
  border: 0;
  border-radius: 8px;
  font-family: var(--text-font-family);
  font-size: 16px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 172, 177, 0.25);
  transition: background 0.2s ease, transform 0.1s ease;
  line-height: 1.2;
}
.ss-pm__atc:hover { background: rgb(58, 44, 30); }
.ss-pm__atc:active { transform: translateY(1px); }
.ss-pm__atc:disabled { cursor: not-allowed; }
.ss-pm__atc.is-added { background: rgb(46, 158, 123); }
.ss-pm__atc.is-error { background: rgb(222, 42, 42); }
.ss-pm__atc--soldout {
  background: rgb(155, 155, 155);
  cursor: not-allowed;
}
.ss-pm__buy-now {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  background: transparent;
  color: #241F22;
  border: 1.5px solid #241F22;
  border-radius: 8px;
  font-family: 'Outfit', var(--text-font-family);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}
.ss-pm__buy-now:hover {
  background: #241F22;
  color: #F5F2E6;
}

/* USP line */
.ss-pm__usps {
  list-style: none;
  padding: 8px 0 0;
  margin: 0;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.ss-pm__usps li {
  font-family: 'Outfit', var(--text-font-family);
  font-weight: 300;
  font-size: 11px;
  color: rgb(122, 76, 50);
}

/* Responsive */
@media (max-width: 1199px) {
  .ss-pm__container {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    padding: 0 24px !important;
  }
  /* Override do --thumbs-left: vira layout vertical (media em cima, thumbs row embaixo).
     Sem !important o seletor mais específico `.ss-pm--thumbs-left .ss-pm__gallery`
     vence e a galeria fica espremida em 2-col 72px+1fr dentro de viewport 1024px. */
  .ss-pm__gallery,
  .ss-pm--thumbs-left .ss-pm__gallery,
  .ss-pm--thumbs-below .ss-pm__gallery {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    position: static !important;
    max-width: 720px !important;
    margin: 0 auto !important;
    gap: 12px !important;
    height: auto !important;
  }
  .ss-pm__media,
  .ss-pm--thumbs-left .ss-pm__media {
    grid-column: auto !important;
    grid-row: auto !important;
    order: 1;
    width: 100%;
    max-width: 100%;
  }
  .ss-pm__thumbs,
  .ss-pm--thumbs-left .ss-pm__thumbs {
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
    max-height: none !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    order: 2;
    grid-column: auto !important;
    grid-row: auto !important;
    gap: 10px !important;
    scrollbar-width: none;
  }
  .ss-pm__thumbs::-webkit-scrollbar { display: none; }
  .ss-pm__thumb { flex-shrink: 0; }

  .ss-pm__info { max-width: 720px; margin: 0 auto; width: 100%; }
  .ss-pm__title { font-size: 40px; line-height: 1.1; }
}
@media (max-width: 740px) {
  .ss-pm { padding: 16px 0; }
  .ss-pm__container { padding: 0 16px; gap: 24px; }
  .ss-pm__gallery { grid-template-columns: 1fr; }
  /* Thumbs forçadas a NÃO renderizar no mobile (regras antigas removidas
     pra evitar conflito com display:none acima). */
  .ss-pm__thumbs,
  .ss-pm--thumbs-left .ss-pm__thumbs,
  .ss-pm--thumbs-below .ss-pm__thumbs { display: none !important; }
  .ss-pm__media { order: 1; }
  .ss-pm__title { font-size: 32px; line-height: 1.1; }
  .ss-pm__price-now { font-size: 32px; }
  .ss-pm__price-old { font-size: 16px; }
  .ss-pm__format-list { grid-template-columns: 1fr; }
  .ss-pm__atc { font-size: 14px; height: 56px; }
}

/* ============================================
   32 · PDP HERO EXTRAS (Enissati) — Figma 143:897 col right
   8 features renderizadas DENTRO de .ss-pm__info (buy box) — rolam junto
   com a galeria sticky. Sem container próprio.
   ============================================ */
/* Espaço entre os elementos extras dentro do .ss-pm__info já vem do
   gap: 18px nativo do .ss-pm__info (flex column). Cada feature gerencia
   seu próprio padding interno. */

/* Card base reutilizado */
.ss-phe__card {
  background: #FFFFFF;
  border: 1px solid #EBE3D2;
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(36, 31, 34, 0.06);
}

/* ─── 1. INCLUS AVEC L'ACHAT ─── */
.ss-phe__incl { overflow: hidden; }
.ss-phe__incl-banner {
  background: #F4EDDE;
  padding: 8px 20px;
  display: flex; align-items: center; gap: 6px;
  font-family: 'Outfit', var(--text-font-family);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 2px;
  color: #7A4C32;
}
.ss-phe__incl-body {
  padding: 20px;
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
}
.ss-phe__incl-icon-box {
  width: 90px; height: 90px;
  background: #F5F2E6;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
}
.ss-phe__incl-icon { font-size: 38px; line-height: 1; }
.ss-phe__incl-text {
  display: flex; flex-direction: column; gap: 6px;
  min-width: 0;
}
.ss-phe__incl-eyebrow {
  font-family: 'Outfit', var(--text-font-family);
  font-weight: 500; font-size: 10px; letter-spacing: 1.8px;
  color: #CAA46D; margin: 0; line-height: 1;
}
.ss-phe__incl-title {
  font-family: var(--heading-font-family); font-weight: 400;
  font-size: 19px; color: #241F22; margin: 0; line-height: 1.2;
}
.ss-phe__incl-sub {
  font-family: 'Outfit', var(--text-font-family);
  font-weight: 300; font-size: 12px; color: #4D453D;
  margin: 0; line-height: 1.4;
}
.ss-phe__incl-price {
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 2px; white-space: nowrap;
}
.ss-phe__incl-valeur {
  font-family: 'Outfit', var(--text-font-family);
  font-weight: 300; font-size: 10px; letter-spacing: 1.5px;
  color: #898989; margin: 0; line-height: 1;
}
.ss-phe__incl-price-row { display: flex; align-items: center; gap: 8px; }
.ss-phe__incl-old {
  font-family: 'Outfit', var(--text-font-family);
  font-weight: 300; font-size: 14px;
  color: #898989; text-decoration: line-through; line-height: 1;
}
.ss-phe__incl-now {
  font-family: var(--heading-font-family);
  font-size: 22px; color: #241F22; line-height: 1;
}

/* ─── 1.5. SLOT DE APP BLOCKS (Koala Gifts / Bundles) ─────
   Renderiza o widget Koala em seu design nativo. Customização visual
   feita no admin do plugin Koala, não aqui. Spacing apertado em cima
   pra ficar próximo do form de compra (sem gap grande). */
.ss-phe__apps {
  margin-top: 10px;
  margin-bottom: 6px;
}
@media (max-width: 740px) {
  .ss-phe__apps { margin-top: 8px; margin-bottom: 4px; }
}

/* ─── 2. POUR QUEL TYPE ─── */
.ss-phe__pq {
  padding: 20px 4px;
  display: flex; flex-direction: column; gap: 16px;
}
.ss-phe__pq-eyebrow {
  font-family: var(--text-font-family);
  font-size: 11px; letter-spacing: 3.5px;
  color: #7A4C32; margin: 0;
}
.ss-phe__pq-title {
  font-family: var(--heading-font-family); font-weight: 400;
  font-size: 22px; color: #241F22; margin: 0;
}
.ss-phe__pq-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.ss-phe__pq-list li {
  display: flex; gap: 12px; align-items: baseline;
  font-family: 'Outfit', var(--text-font-family);
  font-weight: 300; font-size: 14px; line-height: 22px;
  color: #241F22;
}
.ss-phe__pq-list li > span:first-child { color: #7A4C32; font-weight: 500; flex-shrink: 0; }

/* ─── 3. AVIS — Loox widget wrapper ─── */
.ss-phe__loox-wrap {
  /* Loox JS injeta o widget dentro de #looxReviews.
     Wrapper só garante margem consistente com os outros extras. */
  margin: 0;
  min-height: 40px; /* placeholder enquanto Loox carrega */
}
.ss-phe__loox-wrap:empty { display: none; }

/* ─── 3-LEGACY. MINI REVIEWS (não renderizado, kept for reference) ─── */
.ss-phe__mr-wrap { display: flex; flex-direction: column; gap: 14px; }
.ss-phe__mr-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ss-phe__mr-stars { color: #CAA46D; font-size: 18px; }
.ss-phe__mr-rating { font-family: var(--heading-font-family); font-size: 18px; color: #241F22; }
.ss-phe__mr-count { font-family: 'Outfit', var(--text-font-family); font-weight: 300; font-size: 13px; color: #4D453D; }
.ss-phe__mr-link {
  margin-left: auto;
  font-family: 'Outfit', var(--text-font-family); font-weight: 500;
  font-size: 11px; letter-spacing: 1.2px;
  color: #7A4C32; text-decoration: none;
}
.ss-phe__mr-link:hover { color: #CAA46D; }
.ss-phe__mr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ss-phe__mr-card {
  background: #FFFFFF; border: 1px solid #EBE3D2; border-radius: 12px;
  padding: 18px; display: flex; flex-direction: column; gap: 10px;
}
.ss-phe__mr-card-head { display: flex; align-items: center; gap: 8px; }
.ss-phe__mr-card-stars { color: #CAA46D; font-size: 12px; }
.ss-phe__mr-card-verified {
  font-family: 'Outfit', var(--text-font-family); font-weight: 300;
  font-size: 10px; letter-spacing: 0.8px;
  color: #00ACB1;
}
.ss-phe__mr-card-quote {
  font-family: var(--heading-font-family);
  font-size: 14px; line-height: 22px;
  color: #241F22; margin: 0;
}
.ss-phe__mr-card-author { display: flex; align-items: center; gap: 10px; }
.ss-phe__mr-card-avatar {
  width: 32px; height: 32px; border-radius: 999px;
  background: #F4E1CE; display: flex; align-items: center; justify-content: center;
  font-size: 16px;
}
.ss-phe__mr-card-name { font-family: 'Outfit', var(--text-font-family); font-weight: 500; font-size: 12px; color: #241F22; margin: 0; }
.ss-phe__mr-card-meta { font-family: 'Outfit', var(--text-font-family); font-weight: 300; font-size: 10px; color: #898989; margin: 0; }

/* ─── 4. DECISION TREE ─── */
.ss-phe__dec {
  padding: 20px;
  display: flex; flex-direction: column; gap: 14px;
}
.ss-phe__dec-head { text-align: center; display: flex; flex-direction: column; gap: 4px; }
.ss-phe__dec-eyebrow {
  font-family: var(--text-font-family);
  font-size: 10px; letter-spacing: 3px;
  color: #7A4C32; margin: 0;
}
.ss-phe__dec-title {
  font-family: var(--heading-font-family); font-weight: 400;
  font-size: 18px; color: #241F22; margin: 0;
}
.ss-phe__dec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ss-phe__dec-card {
  padding: 14px; border-radius: 10px;
  display: flex; flex-direction: column; gap: 8px;
  min-height: 132px;
}
.ss-phe__dec-card--current { background: #F4EDDE; }
.ss-phe__dec-label {
  font-family: 'Outfit', var(--text-font-family); font-weight: 500;
  font-size: 9px; letter-spacing: 1.5px; margin: 0;
}
.ss-phe__dec-name {
  font-family: var(--heading-font-family); font-weight: 400;
  font-size: 16px; color: #241F22; margin: 0;
}
.ss-phe__dec-bullets { display: flex; flex-direction: column; gap: 4px; }
.ss-phe__dec-bullets p {
  display: flex; gap: 6px;
  font-family: 'Outfit', var(--text-font-family); font-weight: 300;
  font-size: 11px; color: #4D453D;
  margin: 0;
}
.ss-phe__dec-bullets p::before {
  content: '·'; color: var(--bc, #CAA46D); font-weight: 600; flex-shrink: 0;
}
.ss-phe__dec-cta {
  font-family: 'Outfit', var(--text-font-family); font-weight: 500;
  font-size: 11px; letter-spacing: 1.2px;
  color: #7A4C32; text-decoration: none; text-align: center;
}
.ss-phe__dec-cta:hover { color: #CAA46D; }

/* ─── 5. UGC — Tolstoy widget wrapper ─── */
.ss-phe__ugc-wrap {
  /* Tolstoy SDK injeta o carousel dentro de .tolstoy[data-publish-id].
     Wrapper só garante margem consistente. */
  margin: 0;
  min-height: 100px; /* placeholder enquanto Tolstoy carrega */
}
.ss-phe__ugc-wrap:empty { display: none; }

/* ─── 5-LEGACY. UGC CAROUSEL (não renderizado, kept for reference) ─── */
.ss-phe__ugc {
  display: flex; gap: 14px; align-items: center;
  overflow-x: auto;
  scrollbar-width: none;
}
.ss-phe__ugc::-webkit-scrollbar { display: none; }
.ss-phe__ugc-item {
  width: 100px; height: 100px;
  border-radius: 999px;
  background: #EBE3D2;
  border: 3px solid #ED7C8F;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  font-size: 30px;
}
.ss-phe__ugc-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ss-phe__ugc-arrow {
  font-family: 'Outfit', var(--text-font-family); font-weight: 300;
  font-size: 24px; color: #303030; flex-shrink: 0;
}

/* ─── 6. DELIVERY BANNER ─── */
.ss-phe__delivery {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; padding: 14px;
  font-family: 'Outfit', var(--text-font-family); font-weight: 400;
  font-size: 14px;
  color: #303030;
}
.ss-phe__delivery p { margin: 0; display: inline; }
.ss-phe__delivery strong { font-weight: 500; color: #7A4C32; }

/* Variante "sous le prix" — ligne discrète alignée à gauche dans la buy box */
.ss-phe__delivery--underprice {
  justify-content: flex-start;
  gap: 7px;
  padding: 10px 0 2px;
  margin-top: 2px;
  font-size: 13px;
  color: #5B5552;
}
.ss-phe__delivery--underprice strong { color: #241F21; }

/* ─── 7. TRUST STRIP 2×3 ─── */
.ss-phe__trust {
  border-radius: 8px;
  padding: 28px;
}
.ss-phe__trust-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ss-phe__trust-item { display: flex; gap: 14px; align-items: center; }
.ss-phe__trust-icon {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Outfit', var(--text-font-family);
  font-weight: 300; font-size: 22px;
  flex-shrink: 0;
  color: inherit;
}
/* SVG inline herda currentColor; reset stroke pra weight consistente */
.ss-phe__trust-icon svg {
  width: 28px; height: 28px;
  display: block;
  color: inherit;
}
.ss-phe__trust-text {
  font-family: 'Outfit', var(--text-font-family); font-weight: 400;
  font-size: 13px;
  margin: 0; color: inherit;
}

/* ─── 8. ACCORDIONS ─── */
.ss-phe__acc-list { display: flex; flex-direction: column; }
.ss-phe__acc { border-bottom: 1px solid #EBE3D2; }
.ss-phe__acc-sum {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 4px;
  cursor: pointer; list-style: none;
  font-family: 'Outfit', var(--text-font-family); font-weight: 500;
  font-size: 15px; color: #241F22;
}
.ss-phe__acc-sum::-webkit-details-marker { display: none; }
.ss-phe__acc-ic {
  width: 28px; height: 28px;
  border: 1px solid #241F22; border-radius: 999px;
  position: relative; flex-shrink: 0;
}
.ss-phe__acc-ic::before,
.ss-phe__acc-ic::after {
  content: ''; position: absolute; background: #241F22;
  transition: opacity 0.2s ease;
}
.ss-phe__acc-ic::before {
  top: 50%; left: 6px; right: 6px; height: 1px;
  transform: translateY(-50%);
}
.ss-phe__acc-ic::after {
  left: 50%; top: 6px; bottom: 6px; width: 1px;
  transform: translateX(-50%);
}
.ss-phe__acc[open] .ss-phe__acc-ic::after { opacity: 0; }
.ss-phe__acc-c {
  padding: 0 4px 18px;
  font-family: 'Outfit', var(--text-font-family); font-weight: 300;
  font-size: 14px; line-height: 1.65;
  color: #4D453D;
}
.ss-phe__acc-c p:first-child { margin-top: 0; }
.ss-phe__acc-c p:last-child { margin-bottom: 0; }

/* Responsive */
@media (max-width: 740px) {
  .ss-phe__container { padding: 0 16px; gap: 20px; }
  .ss-phe__incl-body { grid-template-columns: 64px minmax(0, 1fr); gap: 14px; }
  .ss-phe__incl-icon-box { width: 64px; height: 64px; }
  .ss-phe__incl-icon { font-size: 28px; }
  .ss-phe__incl-price { grid-column: 1 / -1; align-items: flex-start; flex-direction: row; gap: 8px; }
  .ss-phe__mr-grid { grid-template-columns: 1fr; }
  .ss-phe__dec-grid { grid-template-columns: 1fr; }
  .ss-phe__trust-grid { grid-template-columns: 1fr; gap: 14px; }
  .ss-phe__ugc-item { width: 72px; height: 72px; font-size: 22px; }
}

/* ============================================
   33 · PDP DESCRIPTION EDITORIAL
   Figma 144:914 — bg crème, 2 col 680px cada, gap 80px, pad 96/240.
   Coluna esq: eyebrow letterspaced + título Tenor 36/44 + 2 parágrafos
   Outfit Light 15/26 (2º paragraphe em chocolate accent).
   Coluna dir: imagem 680x480 rounded 16, com overlay ❋ + tag mood.
   ============================================ */
.ss-pdp-desc {
  background: var(--pdp-desc-bg, #F5F2E6);
  color: var(--pdp-desc-fg, #241F21);
}
.ss-pdp-desc__container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 240px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

/* ─── Coluna texto ─── */
.ss-pdp-desc__text {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.ss-pdp-desc__eyebrow {
  font-family: 'Tenor Sans', var(--heading-font-family);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: var(--pdp-desc-accent, #7A4C32);
  margin: 0;
  white-space: nowrap;
}
.ss-pdp-desc__title {
  font-family: 'Tenor Sans', var(--heading-font-family);
  font-weight: 400;
  font-size: 36px;
  line-height: 44px;
  letter-spacing: 0;
  color: var(--pdp-desc-fg, #241F21);
  margin: 0;
}
.ss-pdp-desc__body {
  font-family: 'Outfit', var(--text-font-family);
  font-weight: 300;
  font-size: 15px;
  line-height: 26px;
  color: var(--pdp-desc-fg, #241F21);
  margin: 0;
}
.ss-pdp-desc__body--accent {
  color: var(--pdp-desc-accent, #7A4C32);
}
.ss-pdp-desc__body p { margin: 0; }
.ss-pdp-desc__body strong { font-weight: 500; color: inherit; }
.ss-pdp-desc__body a { color: var(--pdp-desc-accent, #7A4C32); text-decoration: underline; text-underline-offset: 3px; }
.ss-pdp-desc__body a:hover { color: var(--pdp-desc-gold, #CAA46D); }

/* ─── Coluna imagem com overlay editorial ─── */
.ss-pdp-desc__media {
  position: relative;
  width: 100%;
  height: 480px;
  border-radius: 16px;
  overflow: hidden;
  background: #EBE3D2;
}
.ss-pdp-desc__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ss-pdp-desc__img--placeholder {
  background: #B4A28A;
  fill: rgba(255, 255, 255, 0.4);
}

/* Overlay editorial: símbolo ❋ + tag mood centralizado */
.ss-pdp-desc__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  pointer-events: none;
  padding: 24px;
}
.ss-pdp-desc__overlay-symbol {
  font-family: 'Tenor Sans', var(--heading-font-family);
  font-weight: 400;
  font-size: 64px;
  line-height: 1;
  color: var(--pdp-desc-gold, #CAA46D);
}
.ss-pdp-desc__overlay-tag {
  font-family: 'Tenor Sans', var(--heading-font-family);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 3px;
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
}

/* ─── Responsive ─── */
@media (max-width: 1280px) {
  .ss-pdp-desc__container {
    padding: 0 80px;
    gap: 56px;
  }
}
@media (max-width: 1024px) {
  .ss-pdp-desc__container {
    grid-template-columns: 1fr;
    padding: 0 40px;
    gap: 40px;
  }
  .ss-pdp-desc__media {
    height: 360px;
    order: -1;
  }
  .ss-pdp-desc__eyebrow {
    white-space: normal;
  }
}
@media (max-width: 640px) {
  .ss-pdp-desc__container { padding: 0 24px; gap: 32px; }
  .ss-pdp-desc__title { font-size: 28px; line-height: 36px; }
  .ss-pdp-desc__media { height: 280px; }
  .ss-pdp-desc__overlay-symbol { font-size: 48px; }
  .ss-pdp-desc__overlay-tag { font-size: 10px; letter-spacing: 2px; }
}

/* ============================================
   34 · PDP PRÉCAUTIONS
   Figma 211:45 — bg crème, header centro + pill safety + grid 2 cards +
   box CTA email capture + disclaimer footer.
   ============================================ */
.ss-pdp-prec {
  background: var(--prec-bg, #F5F2E6);
  color: var(--prec-fg, #241F22);
}
.ss-pdp-prec__container {
  max-width: 1920px;
  margin: 0 auto;
  padding: 0 240px;
}

/* ─── Header centrado ─── */
.ss-pdp-prec__header {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  margin-bottom: 40px;
}
.ss-pdp-prec__eyebrow {
  font-family: 'Tenor Sans', var(--heading-font-family);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: var(--prec-accent, #7A4C32);
  margin: 0;
  white-space: nowrap;
}
.ss-pdp-prec__title {
  font-family: 'Tenor Sans', var(--heading-font-family);
  font-weight: 400;
  font-size: 40px;
  line-height: 1.15;
  color: var(--prec-fg, #241F22);
  margin: 0;
}

/* ─── Pill safety ─── */
.ss-pdp-prec__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--prec-pill-bg, #F4EDDE);
  color: var(--prec-accent, #7A4C32);
  font-family: 'Outfit', var(--text-font-family);
  font-weight: 300;
  font-size: 11px;
  letter-spacing: 1px;
  height: 40px;
  padding: 0 20px;
  border-radius: 8px;
  margin-bottom: 24px;
}

/* ─── Grid 2 cards ─── */
.ss-pdp-prec__grid {
  display: grid;
  gap: 32px;
  margin-bottom: 40px;
}
.ss-pdp-prec__grid[data-cols="1"] { grid-template-columns: 1fr; }
.ss-pdp-prec__grid[data-cols="2"] { grid-template-columns: repeat(2, 1fr); }
.ss-pdp-prec__grid[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }
.ss-pdp-prec__grid[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }

.ss-pdp-prec__card {
  background: var(--prec-card-bg, #FFFFFF);
  border: 1px solid var(--prec-card-border, #EBE3D2);
  border-radius: 14px;
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ss-pdp-prec__card-title {
  font-family: 'Tenor Sans', var(--heading-font-family);
  font-weight: 400;
  font-size: 22px;
  color: var(--prec-accent, #7A4C32);
  margin: 0;
}
.ss-pdp-prec__card-text {
  font-family: 'Outfit', var(--text-font-family);
  font-weight: 300;
  font-size: 14px;
  line-height: 22px;
  color: var(--prec-muted, #4D453D);
  margin: 0;
}

/* ─── Box CTA email capture ─── */
.ss-pdp-prec__cta {
  background: var(--prec-cta-bg, #EBE3D2);
  border: 2px solid var(--prec-gold, #CAA46D);
  border-radius: 16px;
  padding: 40px 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}
.ss-pdp-prec__cta-icon {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: var(--prec-gold, #CAA46D);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  line-height: 1;
}
.ss-pdp-prec__cta-title {
  font-family: 'Tenor Sans', var(--heading-font-family);
  font-weight: 400;
  font-size: 26px;
  color: var(--prec-fg, #241F22);
  margin: 0;
}
.ss-pdp-prec__cta-subtitle {
  font-family: 'Outfit', var(--text-font-family);
  font-weight: 300;
  font-size: 14px;
  color: var(--prec-muted, #4D453D);
  margin: 0;
  max-width: 56ch;
}
/* Klaviyo embed container (quando section.settings.klaviyo_form_id está preenchido).
   O Klaviyo injeta o form dentro dessa div — só damos respiro lateral consistente. */
.ss-pdp-prec__klaviyo {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}
.ss-pdp-prec__klaviyo:empty {
  /* Reserva altura mínima enquanto Klaviyo script carrega, evita layout shift */
  min-height: 120px;
}

.ss-pdp-prec__form {
  display: flex;
  gap: 12px;
  width: 100%;
  max-width: 600px;
}
.ss-pdp-prec__form-input {
  flex: 1;
  height: 56px;
  background: #FFFFFF;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 0 18px;
  font-family: 'Outfit', var(--text-font-family);
  font-weight: 300;
  font-size: 14px;
  color: var(--prec-fg, #241F22);
  transition: border-color 0.2s ease;
}
.ss-pdp-prec__form-input::placeholder { color: #898989; }
.ss-pdp-prec__form-input:focus {
  outline: none;
  border-color: var(--prec-gold, #CAA46D);
}
.ss-pdp-prec__form-btn {
  height: 56px;
  background: var(--prec-fg, #241F22);
  color: #F5F2E6;
  font-family: 'Outfit', var(--text-font-family);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 1.5px;
  padding: 0 28px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 0.2s ease;
  white-space: nowrap;
}
.ss-pdp-prec__form-btn:hover { background: #3a2f24; }
.ss-pdp-prec__cta-footer {
  font-family: 'Outfit', var(--text-font-family);
  font-weight: 300;
  font-size: 11px;
  color: #898989;
  margin: 0;
}

/* ─── Disclaimer rodapé ─── */
.ss-pdp-prec__disclaimer {
  font-family: 'Outfit', var(--text-font-family);
  font-weight: 300;
  font-size: 11px;
  line-height: 18px;
  color: var(--prec-muted, #4D453D);
  opacity: 0.65;
  margin-top: 32px;
}
.ss-pdp-prec__disclaimer p { margin: 0; }

/* a11y */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ─── Responsive ─── */
@media (max-width: 1440px) {
  .ss-pdp-prec__container { padding: 0 80px; }
}
@media (max-width: 1024px) {
  .ss-pdp-prec__container { padding: 0 40px; }
  .ss-pdp-prec__grid[data-cols="2"] { grid-template-columns: 1fr; }
  .ss-pdp-prec__cta { padding: 32px 32px; }
  .ss-pdp-prec__title { font-size: 32px; }
  .ss-pdp-prec__pill { white-space: normal; height: auto; padding: 8px 16px; text-align: center; }
}
@media (max-width: 640px) {
  .ss-pdp-prec__container { padding: 0 20px; }
  .ss-pdp-prec__title { font-size: 26px; }
  .ss-pdp-prec__card { padding: 24px 22px; }
  .ss-pdp-prec__card-title { font-size: 20px; }
  .ss-pdp-prec__cta { padding: 28px 20px; }
  .ss-pdp-prec__cta-title { font-size: 22px; }
  .ss-pdp-prec__form { flex-direction: column; gap: 8px; }
  .ss-pdp-prec__form-btn { width: 100%; justify-content: center; }
  .ss-pdp-prec__eyebrow { white-space: normal; font-size: 10px; }
}

/* ============================================
   35 · PDP SANS (formule propre)
   Figma 212:40 — bg #F5F2E6, header centro + grid cartes 280px largura
   avec border gold + icône Outfit Light 36 + label Tenor 15 + sub 11.
   ============================================ */
.ss-pdp-sans {
  background: var(--sans-bg, #F5F2E6);
  color: var(--sans-fg, #241F22);
}
.ss-pdp-sans__container {
  max-width: 1920px;
  margin: 0 auto;
  padding: 0 240px;
}

/* ─── Header centrado ─── */
.ss-pdp-sans__header {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  margin-bottom: 60px;
}
.ss-pdp-sans__eyebrow {
  font-family: 'Tenor Sans', var(--heading-font-family);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: var(--sans-accent, #7A4C32);
  margin: 0;
  white-space: nowrap;
}
.ss-pdp-sans__title {
  font-family: 'Tenor Sans', var(--heading-font-family);
  font-weight: 400;
  font-size: 34px;
  line-height: 1.15;
  color: var(--sans-fg, #241F22);
  margin: 0;
}

/* ─── Grid 5 cards ─── */
.ss-pdp-sans__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}
.ss-pdp-sans__card {
  background: var(--sans-card-bg, #FFFFFF);
  border: 1px solid var(--sans-gold, #CAA46D);
  border-radius: 14px;
  padding: 28px 20px;
  height: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
}
.ss-pdp-sans__icon {
  font-family: 'Outfit', var(--text-font-family);
  font-weight: 300;
  font-size: 36px;
  line-height: 1;
  color: var(--sans-gold, #CAA46D);
  display: inline-block;
}
.ss-pdp-sans__label {
  font-family: 'Tenor Sans', var(--heading-font-family);
  font-weight: 400;
  font-size: 15px;
  color: var(--sans-fg, #241F22);
  margin: 0;
}
.ss-pdp-sans__sub {
  font-family: 'Outfit', var(--text-font-family);
  font-weight: 300;
  font-size: 11px;
  color: var(--sans-muted, #4D453D);
  margin: 0;
}

/* ─── Responsive ─── */
@media (max-width: 1440px) {
  .ss-pdp-sans__container { padding: 0 80px; }
}
@media (max-width: 1024px) {
  .ss-pdp-sans__container { padding: 0 40px; }
  .ss-pdp-sans__grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .ss-pdp-sans__title { font-size: 28px; }
}
@media (max-width: 640px) {
  .ss-pdp-sans__container { padding: 0 20px; }
  .ss-pdp-sans__grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .ss-pdp-sans__card { height: 180px; padding: 20px 14px; }
  .ss-pdp-sans__icon { font-size: 30px; }
  .ss-pdp-sans__title { font-size: 24px; }
  .ss-pdp-sans__eyebrow { font-size: 10px; white-space: normal; }
}

/* ============================================
   36 · PDP GALERIE UGC + CTA FINAL
   ============================================ */
.ss-pdp-galerie {
  background: var(--pdp-gal-bg, #F7F2E7);
  color: var(--pdp-gal-fg, #241F21);
}
.ss-pdp-galerie__container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 32px;
}
.ss-pdp-galerie__header {
  text-align: center;
  margin-bottom: 56px;
}
.ss-pdp-galerie__eyebrow {
  font-family: var(--text-font-family);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--pdp-gal-accent, #7A4C32);
  margin: 0 0 16px;
}
.ss-pdp-galerie__title {
  font-family: var(--heading-font-family);
  font-weight: 400;
  font-size: clamp(32px, 3.8vw, 48px);
  line-height: 1.1;
  letter-spacing: -0.5px;
  color: inherit;
  margin: 0 0 16px;
}
.ss-pdp-galerie__sub {
  font-family: 'Outfit', var(--text-font-family);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(36, 31, 33, 0.75);
  max-width: 56ch;
  margin: 0 auto;
}
.ss-pdp-galerie__sub p { margin: 0; }
.ss-pdp-galerie__sub strong { font-weight: 600; color: var(--pdp-gal-accent, #7A4C32); }

.ss-pdp-galerie__grid {
  display: grid;
  gap: 12px;
  margin-bottom: 56px;
}
.ss-pdp-galerie__grid[data-cols="2"] { grid-template-columns: repeat(2, 1fr); }
.ss-pdp-galerie__grid[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }
.ss-pdp-galerie__grid[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }
.ss-pdp-galerie__grid[data-cols="5"] { grid-template-columns: repeat(5, 1fr); }
.ss-pdp-galerie__grid[data-cols="6"] { grid-template-columns: repeat(6, 1fr); }

.ss-pdp-galerie__item {
  display: block;
  overflow: hidden;
  border-radius: 4px;
  background: #EBE3D2;
  aspect-ratio: 1 / 1;
  text-decoration: none;
  position: relative;
  transition: transform 0.3s ease;
}
.ss-pdp-galerie__item:hover { transform: scale(1.02); }
.ss-pdp-galerie__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ss-pdp-galerie__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(122, 76, 50, 0.4);
}

.ss-pdp-galerie__cta-wrap {
  text-align: center;
  padding-top: 8px;
}
.ss-pdp-galerie__cta-intro {
  font-family: var(--heading-font-family);
  font-weight: 400;
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1.25;
  color: inherit;
  margin: 0 0 20px;
}
.ss-pdp-galerie__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 36px;
  background: var(--pdp-gal-accent, #7A4C32);
  color: #FFFFFF;
  font-family: var(--text-font-family);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 999px;
  transition: background 0.2s ease, transform 0.2s ease;
}
.ss-pdp-galerie__cta:hover {
  background: #CAA46D;
  transform: translateY(-1px);
}

@media (max-width: 900px) {
  .ss-pdp-galerie__grid[data-cols="4"],
  .ss-pdp-galerie__grid[data-cols="5"],
  .ss-pdp-galerie__grid[data-cols="6"] { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .ss-pdp-galerie__header { margin-bottom: 36px; }
  .ss-pdp-galerie__grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px; margin-bottom: 36px; }
}

/* ============================================
   37 · PDP RITUEL 4 TEMPS
   Figma 211:14 — bg #F6F3E8, header centrado + banner editorial
   1520×426 com quote overlay + grid 4 cards sem imagem (número gold).
   ============================================ */
.ss-pdp-rit {
  background: var(--rit-bg, #F6F3E8);
  color: var(--rit-fg, #241F22);
}
.ss-pdp-rit__container {
  max-width: 1920px;
  margin: 0 auto;
  padding: 0 200px;
}

/* ─── Header centrado ─── */
.ss-pdp-rit__header {
  text-align: center;
  max-width: 1000px;
  margin: 0 auto 40px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}
.ss-pdp-rit__eyebrow {
  font-family: 'Tenor Sans', var(--heading-font-family);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: var(--rit-accent, #7A4C32);
  margin: 0;
  white-space: nowrap;
}
.ss-pdp-rit__title {
  font-family: 'Tenor Sans', var(--heading-font-family);
  font-weight: 400;
  font-size: 40px;
  line-height: 1.15;
  color: var(--rit-fg, #241F22);
  margin: 0;
}
.ss-pdp-rit__sub {
  font-family: 'Outfit', var(--text-font-family);
  font-weight: 300;
  font-size: 14px;
  line-height: 22px;
  color: var(--rit-muted, #4D453D);
  margin: 0;
  max-width: 760px;
}

/* ─── Banner editorial (imagem + overlay quote) ─── */
.ss-pdp-rit__banner {
  position: relative;
  height: 426px;
  border-radius: 16px;
  overflow: hidden;
  background: #3a2f24;
  margin-bottom: 40px;
}
.ss-pdp-rit__banner-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ss-pdp-rit__banner-img--placeholder {
  background: #3a2f24;
  fill: rgba(245, 242, 230, 0.4);
}

/* ─── Vídeo no banner do rituel: herda layout de .ss-pdp-rit__banner-img.
       Esconde controles nativos do <video>. ─── */
.ss-pdp-rit__banner-video {
  pointer-events: none;
  background: #3a2f24;
}
.ss-pdp-rit__banner-video::-webkit-media-controls,
.ss-pdp-rit__banner-video::-webkit-media-controls-enclosure,
.ss-pdp-rit__banner-video::-webkit-media-controls-start-playback-button { display: none !important; }

/* Mobile: quando tem vídeo, usa aspect-ratio 4:5 (1080×1350)
   em vez da altura fixa atual (320/240) — vídeo enche sem corte. */
@media (max-width: 740px) {
  .ss-pdp-rit__banner--has-video {
    height: auto !important;
    aspect-ratio: 4 / 5;
  }
}
/* Mobile: banner-vídeo em DESTAQUE — full-width 4:5 (maior).
   Specificity 0,3,0 vence os overrides height:200/180px dos breakpoints menores
   que travavam a largura em 160px (altura fixa × aspect 4:5). */
@media (max-width: 740px) {
  .ss-pdp-rit .ss-pdp-rit__banner.ss-pdp-rit__banner--has-video {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 5;
    margin-bottom: 24px !important;
  }
}
.ss-pdp-rit__banner-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px;
  text-align: center;
  background: linear-gradient(180deg, rgba(36,31,34,0.15) 0%, rgba(36,31,34,0.35) 100%);
  pointer-events: none;
}
.ss-pdp-rit__banner-tag {
  margin: 0;
  font-family: 'Outfit', var(--text-font-family);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 1.5px;
  color: #F5F2E6;
  opacity: 0.6;
}
.ss-pdp-rit__banner-quote {
  margin: 0;
  font-family: 'Tenor Sans', var(--heading-font-family);
  font-weight: 400;
  font-size: 28px;
  line-height: 1.2;
  color: #F5F2E6;
  opacity: 0.85;
}

/* ─── Grid 4 cards ─── */
.ss-pdp-rit__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.ss-pdp-rit__card {
  background: var(--rit-card-bg, #FFFFFF);
  border: 1px solid var(--rit-card-border, #EBE3D2);
  border-radius: 14px;
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  /* Altura: cresce pelo conteúdo (removido min-height 500px do Figma).
     Cards mantêm altura igual via grid stretch automaticamente. */
}
.ss-pdp-rit__num {
  font-family: 'Tenor Sans', var(--heading-font-family);
  font-weight: 400;
  font-size: 56px;
  line-height: 1;
  color: var(--rit-gold, #CAA46D);
}
.ss-pdp-rit__card-title {
  font-family: 'Tenor Sans', var(--heading-font-family);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.2;
  color: var(--rit-fg, #241F22);
  margin: 0;
}
.ss-pdp-rit__pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--rit-pill-bg, #F4EDDE);
  color: var(--rit-accent, #7A4C32);
  font-family: 'Outfit', var(--text-font-family);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 1px;
  padding: 4px 10px;
  border-radius: 999px;
}
.ss-pdp-rit__pill-icon {
  font-size: 12px;
  line-height: 1;
}
.ss-pdp-rit__card-desc {
  font-family: 'Outfit', var(--text-font-family);
  font-weight: 300;
  font-size: 13px;
  line-height: 22px;
  color: var(--rit-muted, #4D453D);
  margin: 0;
}
.ss-pdp-rit__note {
  background: var(--rit-note-bg, #F5F2E6);
  border-radius: 6px;
  padding: 10px 12px;
  font-family: 'Outfit', var(--text-font-family);
  font-weight: 300;
  font-size: 11px;
  line-height: 18px;
  color: var(--rit-accent, #7A4C32);
  display: flex;
  gap: 6px;
  align-items: flex-start;
  width: 100%;
}
.ss-pdp-rit__note-icon { flex-shrink: 0; }

/* ─── Responsive ─── */
@media (max-width: 1440px) {
  .ss-pdp-rit__container { padding: 0 80px; }
}
@media (max-width: 1024px) {
  .ss-pdp-rit__container { padding: 0 40px; }
  .ss-pdp-rit__grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .ss-pdp-rit__card { min-height: auto; padding: 28px 22px; }
  .ss-pdp-rit__banner { height: 320px; }
  .ss-pdp-rit__banner-quote { font-size: 22px; }
  .ss-pdp-rit__title { font-size: 32px; }
}
@media (max-width: 640px) {
  .ss-pdp-rit__container { padding: 0 20px; }
  .ss-pdp-rit__grid { grid-template-columns: 1fr; }
  .ss-pdp-rit__banner { height: 240px; }
  .ss-pdp-rit__banner-tag { font-size: 10px; letter-spacing: 1px; }
  .ss-pdp-rit__banner-quote { font-size: 18px; }
  .ss-pdp-rit__eyebrow { white-space: normal; font-size: 10px; }
  .ss-pdp-rit__title { font-size: 26px; }
  .ss-pdp-rit__sub { font-size: 13px; }
  .ss-pdp-rit__num { font-size: 48px; }
}

/* ============================================
   38 · PLACEHOLDERS Shopify nativos
   Style consistente pra SVG placeholders em todas as sections PDP.
   ============================================ */
.ss-pdp-desc__img--placeholder,
.ss-pdp-galerie__img--placeholder {
  width: 100%;
  height: 100%;
  display: block;
  background: #EBE3D2;
  fill: rgba(122, 76, 50, 0.25);
  object-fit: cover;
}
.ss-pdp-desc__img--placeholder {
  aspect-ratio: 4 / 5;
}
.ss-pdp-desc--image-top .ss-pdp-desc__img--placeholder {
  aspect-ratio: 16 / 10;
}

/* ============================================
   39 · PDP BANNER CINÉMATOGRAPHIQUE
   Figma 216:2 — full-bleed 100vw, altura 600px.
   Imagem golden hour + mood tag topo-esq + quote central editorial.
   ============================================ */
.ss-pdp-cine {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  height: var(--cine-height, 600px);
  background: var(--cine-bg, #241F21);
  color: var(--cine-fg, #F5F2E6);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ─── Imagem de fundo ─── */
.ss-pdp-cine__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.ss-pdp-cine__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ss-pdp-cine__img--placeholder {
  background: #3a2f24;
  fill: rgba(202, 164, 109, 0.4);
}

/* (CSS de vídeo para o banner cine foi removido — vídeo agora vai
   no banner do rituel, não aqui. Veja .ss-pdp-rit__banner-video.) */
.ss-pdp-cine__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(36, 31, 33, 0.35) 0%, rgba(36, 31, 33, 0.55) 100%);
  pointer-events: none;
}

/* ─── Mood tag (topo esquerda — style magazine) ─── */
.ss-pdp-cine__mood {
  position: absolute;
  top: 30px;
  left: 240px;
  margin: 0;
  font-family: 'Outfit', var(--text-font-family);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 1.5px;
  color: var(--cine-fg, #F5F2E6);
  opacity: 0.4;
  white-space: nowrap;
  z-index: 2;
  pointer-events: none;
}

/* ─── Quote bloco central ─── */
.ss-pdp-cine__quote-wrap {
  position: relative;
  z-index: 2;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 0 24px;
  max-width: 1000px;
  text-align: center;
}
.ss-pdp-cine__quote-mark {
  font-family: 'Tenor Sans', var(--heading-font-family);
  font-weight: 400;
  font-size: 60px;
  line-height: 1;
  color: var(--cine-accent, #CAA46D);
}
.ss-pdp-cine__quote {
  margin: 0;
  font-family: 'Tenor Sans', var(--heading-font-family);
  font-weight: 400;
  font-size: 36px;
  line-height: 48px;
  color: var(--cine-fg, #F5F2E6);
}
.ss-pdp-cine__attrib {
  font-family: 'Outfit', var(--text-font-family);
  font-weight: 300;
  font-size: 13px;
  letter-spacing: 2px;
  color: var(--cine-accent, #CAA46D);
  white-space: nowrap;
}

/* ─── Responsive ─── */
@media (max-width: 1280px) {
  .ss-pdp-cine__mood { left: 80px; }
}
@media (max-width: 1024px) {
  .ss-pdp-cine { height: 480px; }
  .ss-pdp-cine__mood { left: 40px; font-size: 10px; letter-spacing: 1px; white-space: normal; max-width: 50%; }
  .ss-pdp-cine__quote { font-size: 28px; line-height: 38px; }
  .ss-pdp-cine__quote-mark { font-size: 48px; }
}
@media (max-width: 640px) {
  .ss-pdp-cine { height: 420px; }
  .ss-pdp-cine__mood { left: 20px; top: 20px; font-size: 9px; max-width: 75%; }
  .ss-pdp-cine__quote { font-size: 22px; line-height: 30px; }
  .ss-pdp-cine__quote-mark { font-size: 40px; }
  .ss-pdp-cine__attrib { font-size: 11px; letter-spacing: 1.5px; white-space: normal; }
}

/* ============================================
   40 · PDP COMPOSÉ DE (ingredients)
   Figma 212:2 — bg #F6F3E8, header centro + section title + grid 4
   cartes huile (com imagem) + grid 2 cartes complement + box INCI dark.
   ============================================ */
.ss-pdp-ing {
  background: var(--ing-bg, #F6F3E8);
  color: var(--ing-fg, #241F22);
}
.ss-pdp-ing__container {
  max-width: 1920px;
  margin: 0 auto;
  padding: 0 240px;
}

/* ─── Header centrado ─── */
.ss-pdp-ing__header {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  margin-bottom: 60px;
}
.ss-pdp-ing__eyebrow {
  font-family: 'Tenor Sans', var(--heading-font-family);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: var(--ing-accent, #7A4C32);
  margin: 0;
  white-space: nowrap;
}
.ss-pdp-ing__title {
  font-family: 'Tenor Sans', var(--heading-font-family);
  font-weight: 400;
  font-size: 40px;
  line-height: 1.15;
  color: var(--ing-fg, #241F22);
  margin: 0;
}
.ss-pdp-ing__sub {
  font-family: 'Outfit', var(--text-font-family);
  font-weight: 300;
  font-size: 15px;
  color: var(--ing-muted, #4D453D);
  margin: 0;
  max-width: 64ch;
}

/* ─── Section title (left aligned) ─── */
.ss-pdp-ing__section-title {
  font-family: 'Tenor Sans', var(--heading-font-family);
  font-weight: 400;
  font-size: 18px;
  color: var(--ing-fg, #241F22);
  margin: 0 0 16px;
}

/* ─── Grid huiles 4-col ─── */
.ss-pdp-ing__grid--huiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 30px;
}
.ss-pdp-ing__huile {
  background: var(--ing-card-bg, #FFFFFF);
  border: 1px solid var(--ing-card-border, #EBE3D2);
  border-radius: 14px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ss-pdp-ing__huile-media {
  width: 100%;
  height: 140px;
  border-radius: 8px;
  overflow: hidden;
  background: #EBE3D2;
}
.ss-pdp-ing__huile-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ss-pdp-ing__huile-img--placeholder {
  fill: rgba(122, 76, 50, 0.3);
  background: #EBE3D2;
}
.ss-pdp-ing__huile-name {
  font-family: 'Tenor Sans', var(--heading-font-family);
  font-weight: 400;
  font-size: 18px;
  color: var(--ing-fg, #241F22);
  margin: 0;
}
.ss-pdp-ing__huile-subname {
  font-family: 'Outfit', var(--text-font-family);
  font-weight: 300;
  font-style: italic;
  font-size: 11px;
  color: var(--ing-accent, #7A4C32);
  margin: -6px 0 0;
}
.ss-pdp-ing__huile-desc {
  font-family: 'Outfit', var(--text-font-family);
  font-weight: 300;
  font-size: 12px;
  line-height: 20px;
  color: var(--ing-muted, #4D453D);
  margin: 0;
}

/* ─── Grid compléments 2-col (alinhado com huiles 4-col: gap 10px) ─── */
.ss-pdp-ing__grid--complements {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 40px;
}
.ss-pdp-ing__comp {
  background: var(--ing-card-bg, #FFFFFF);
  border: 1px solid var(--ing-card-border, #EBE3D2);
  border-radius: 14px;
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ss-pdp-ing__comp-title {
  font-family: 'Tenor Sans', var(--heading-font-family);
  font-weight: 400;
  font-size: 22px;
  color: var(--ing-accent, #7A4C32);
  margin: 0;
}
.ss-pdp-ing__comp-desc {
  font-family: 'Outfit', var(--text-font-family);
  font-weight: 300;
  font-size: 14px;
  line-height: 22px;
  color: var(--ing-muted, #4D453D);
  margin: 0;
}

/* ─── Box INCI dark (collapsible <details>) ─── */
.ss-pdp-ing__inci {
  background: var(--ing-inci-bg, #241F22);
  border-radius: 14px;
  padding: 28px 48px;
}
.ss-pdp-ing__inci > summary { list-style: none; }
.ss-pdp-ing__inci > summary::-webkit-details-marker { display: none; }

/* Summary clicável (header) */
.ss-pdp-ing__inci-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  cursor: pointer;
  user-select: none;
  outline: none;
}
.ss-pdp-ing__inci-summary:focus-visible {
  outline: 2px solid var(--ing-gold, #CAA46D);
  outline-offset: 4px;
  border-radius: 4px;
}
.ss-pdp-ing__inci-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ss-pdp-ing__inci-eyebrow {
  font-family: 'Outfit', var(--text-font-family);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--ing-gold, #CAA46D);
  margin: 0;
}
.ss-pdp-ing__inci-title {
  font-family: 'Tenor Sans', var(--heading-font-family);
  font-weight: 400;
  font-size: 20px;
  color: var(--ing-inci-fg, #F5F2E6);
  margin: 0;
}

/* Toggle chevron — rotaciona 180° quando aberto */
.ss-pdp-ing__inci-toggle {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: rgba(245, 242, 230, 0.08);
  color: var(--ing-inci-fg, #F5F2E6);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s ease, background 0.2s ease;
}
.ss-pdp-ing__inci-summary:hover .ss-pdp-ing__inci-toggle {
  background: rgba(245, 242, 230, 0.15);
}
.ss-pdp-ing__inci[open] .ss-pdp-ing__inci-toggle {
  transform: rotate(180deg);
}

/* Texto INCI — separado por divider sutil quando aberto */
.ss-pdp-ing__inci-text {
  font-family: 'Outfit', var(--text-font-family);
  font-weight: 300;
  font-size: 12px;
  line-height: 20px;
  color: var(--ing-inci-fg, #F5F2E6);
  opacity: 0.85;
  margin: 18px 0 0;
  padding-top: 18px;
  border-top: 1px solid rgba(245, 242, 230, 0.12);
  word-break: break-word;
}

/* ─── Responsive ─── */
@media (max-width: 1440px) {
  .ss-pdp-ing__container { padding: 0 80px; }
}
@media (max-width: 1024px) {
  .ss-pdp-ing__container { padding: 0 40px; }
  .ss-pdp-ing__grid--huiles { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .ss-pdp-ing__grid--complements { grid-template-columns: 1fr; gap: 16px; }
  .ss-pdp-ing__inci { padding: 28px 32px; }
  .ss-pdp-ing__title { font-size: 32px; }
}
@media (max-width: 640px) {
  .ss-pdp-ing__container { padding: 0 20px; }
  .ss-pdp-ing__grid--huiles { grid-template-columns: 1fr; }
  .ss-pdp-ing__huile-media { height: 180px; }
  .ss-pdp-ing__title { font-size: 26px; }
  .ss-pdp-ing__sub { font-size: 13px; }
  .ss-pdp-ing__eyebrow { white-space: normal; font-size: 10px; }
  .ss-pdp-ing__inci { padding: 24px 22px; }
  .ss-pdp-ing__inci-text { font-size: 11px; }
}

/* ============================================
   41 · PDP MOSAÏQUE TRIO LIFESTYLE
   Figma 216:8 — bg #F6F3E8, header centro + 3 images 460×340/380,
   rounded 14, com mood tag overlay opcional.
   ============================================ */
.ss-pdp-mos {
  background: var(--mos-bg, #F6F3E8);
  color: var(--mos-fg, #241F22);
}
.ss-pdp-mos__container {
  max-width: 1920px;
  margin: 0 auto;
  padding: 0 240px;
}

/* ─── Header ─── */
.ss-pdp-mos__header {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
  margin-bottom: 50px;
}
.ss-pdp-mos__eyebrow {
  font-family: 'Tenor Sans', var(--heading-font-family);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: var(--mos-accent, #7A4C32);
  margin: 0;
  white-space: nowrap;
}
.ss-pdp-mos__title {
  font-family: 'Tenor Sans', var(--heading-font-family);
  font-weight: 400;
  font-size: 32px;
  line-height: 1.15;
  color: var(--mos-fg, #241F22);
  margin: 0;
}

/* ─── Grid 3 imagens ─── */
.ss-pdp-mos__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  align-items: center; /* permite featured maior verticalmente */
}
.ss-pdp-mos__tile {
  position: relative;
  height: 340px;
  border-radius: 14px;
  overflow: hidden;
  background: #EBE3D2;
}
.ss-pdp-mos__tile--featured {
  height: 380px; /* +40px vs laterais → efeito mosaico */
}
.ss-pdp-mos__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ss-pdp-mos__img--placeholder {
  fill: rgba(122, 76, 50, 0.3);
  background: #EBE3D2;
}

/* Overlay mood tag */
.ss-pdp-mos__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
  pointer-events: none;
}
.ss-pdp-mos__overlay span {
  font-family: 'Outfit', var(--text-font-family);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  opacity: 0.6;
  line-height: 1.4;
}
.ss-pdp-mos__overlay[data-tone="light"] span { color: #F5F2E6; }
.ss-pdp-mos__overlay[data-tone="dark"] span { color: #241F22; }

/* ─── Responsive ─── */
@media (max-width: 1440px) {
  .ss-pdp-mos__container { padding: 0 80px; }
}
@media (max-width: 1024px) {
  .ss-pdp-mos__container { padding: 0 40px; }
  .ss-pdp-mos__grid { grid-template-columns: 1fr; gap: 16px; }
  .ss-pdp-mos__tile,
  .ss-pdp-mos__tile--featured { height: 280px; }
  .ss-pdp-mos__title { font-size: 26px; }
}
@media (max-width: 640px) {
  .ss-pdp-mos__container { padding: 0 20px; }
  .ss-pdp-mos__tile,
  .ss-pdp-mos__tile--featured { height: 220px; }
  .ss-pdp-mos__title { font-size: 22px; }
  .ss-pdp-mos__eyebrow { font-size: 10px; white-space: normal; }
}

/* ============================================
   42 · PDP COMPARATIF (tableau 2 produits)
   Figma 200:2 — bg #F5F2E6, header centro + carte tableau 3-col
   (label + col A + col B) + zebra rows + footer commun + CTA.
   ============================================ */
.ss-pdp-cmp {
  background: var(--cmp-bg, #F5F2E6);
  color: var(--cmp-fg, #241F22);
}
.ss-pdp-cmp__container {
  max-width: 1920px;
  margin: 0 auto;
  padding: 0 240px;
}

/* ─── Header centrado ─── */
.ss-pdp-cmp__header {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  margin-bottom: 40px;
}
.ss-pdp-cmp__eyebrow {
  font-family: 'Tenor Sans', var(--heading-font-family);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: var(--cmp-accent, #7A4C32);
  margin: 0;
  white-space: nowrap;
}
.ss-pdp-cmp__title {
  font-family: 'Tenor Sans', var(--heading-font-family);
  font-weight: 400;
  font-size: 36px;
  line-height: 1.15;
  color: var(--cmp-fg, #241F22);
  margin: 0;
}
.ss-pdp-cmp__sub {
  font-family: 'Outfit', var(--text-font-family);
  font-weight: 300;
  font-size: 14px;
  color: var(--cmp-muted, #4D453D);
  margin: 0;
  max-width: 64ch;
}

/* ─── Carte tabela ─── */
.ss-pdp-cmp__card {
  background: var(--cmp-card-bg, #FFFFFF);
  border: 1px solid var(--cmp-card-border, #EBE3D2);
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 28px;
}
.ss-pdp-cmp__table {
  display: flex;
  flex-direction: column;
}

/* Linhas (header + rows + common) — grid 3-col 1fr 1fr 1fr */
.ss-pdp-cmp__head,
.ss-pdp-cmp__row,
.ss-pdp-cmp__common {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 1fr 1fr;
  align-items: center;
  padding: 0 60px;
}

/* Header tabela (col labels + nomes produtos) */
.ss-pdp-cmp__head {
  padding-top: 28px;
  padding-bottom: 20px;
  border-bottom: 2px solid var(--cmp-fg, #241F22);
}
.ss-pdp-cmp__col-label {
  display: block;
  font-family: 'Outfit', var(--text-font-family);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 1.5px;
  margin-bottom: 6px;
}
.ss-pdp-cmp__col-name {
  display: block;
  font-family: 'Tenor Sans', var(--heading-font-family);
  font-weight: 400;
  font-size: 22px;
  color: var(--cmp-fg, #241F22);
}

/* Rows */
.ss-pdp-cmp__row {
  min-height: 40px;
  padding-top: 10px;
  padding-bottom: 10px;
}
.ss-pdp-cmp__row--zebra {
  background: var(--cmp-zebra-bg, #F5F2E6);
}

/* Cells */
.ss-pdp-cmp__cell {
  font-family: 'Outfit', var(--text-font-family);
  font-size: 13px;
  line-height: 1.4;
}
.ss-pdp-cmp__cell--label {
  font-weight: 500;
  color: var(--cmp-accent, #7A4C32);
}
.ss-pdp-cmp__cell--col-a {
  font-weight: 500;
  color: var(--cmp-fg, #241F22);
}
.ss-pdp-cmp__cell--col-b {
  font-weight: 300;
  color: var(--cmp-muted, #4D453D);
}

/* Footer commun */
.ss-pdp-cmp__common {
  grid-template-columns: 1fr;
  min-height: 50px;
  background: var(--cmp-footer-bg, #F4EDDE);
  padding: 14px 60px;
  text-align: center;
}
.ss-pdp-cmp__cell--common {
  font-family: 'Outfit', var(--text-font-family);
  font-weight: 300;
  font-size: 12px;
  color: var(--cmp-accent, #7A4C32);
}

/* ─── CTA externo ─── */
.ss-pdp-cmp__cta-wrap {
  text-align: center;
  margin-top: 20px;
}
.ss-pdp-cmp__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Outfit', var(--text-font-family);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--cmp-fg, #241F22);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: border-color 0.2s ease, color 0.2s ease;
}
a.ss-pdp-cmp__cta:hover {
  border-color: currentColor;
}

/* ─── Responsive ─── */
@media (max-width: 1440px) {
  .ss-pdp-cmp__container { padding: 0 80px; }
  .ss-pdp-cmp__head,
  .ss-pdp-cmp__row { padding-left: 32px; padding-right: 32px; }
  .ss-pdp-cmp__common { padding-left: 32px; padding-right: 32px; }
}
@media (max-width: 1024px) {
  .ss-pdp-cmp__container { padding: 0 40px; }
  .ss-pdp-cmp__title { font-size: 28px; }
  .ss-pdp-cmp__head,
  .ss-pdp-cmp__row { grid-template-columns: minmax(140px, 1fr) 1fr 1fr; padding-left: 20px; padding-right: 20px; }
  .ss-pdp-cmp__col-name { font-size: 18px; }
  .ss-pdp-cmp__cell { font-size: 12px; }
}
@media (max-width: 640px) {
  .ss-pdp-cmp__container { padding: 0 20px; }
  /* Mobile: tableau vira lista vertical por produto */
  .ss-pdp-cmp__head {
    grid-template-columns: 1fr 1fr;
    padding: 20px 16px;
  }
  .ss-pdp-cmp__head .ss-pdp-cmp__cell--label { display: none; }
  .ss-pdp-cmp__row {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 14px 16px;
  }
  .ss-pdp-cmp__cell--label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.7;
  }
  .ss-pdp-cmp__cell--col-b {
    padding-left: 0;
    border-left: none;
    margin-top: 2px;
  }
  .ss-pdp-cmp__cell--col-b::before {
    content: "vs ";
    color: var(--cmp-accent, #7A4C32);
    font-weight: 500;
  }
  .ss-pdp-cmp__common { padding: 16px; }
  .ss-pdp-cmp__cell--common { font-size: 11px; }
  .ss-pdp-cmp__title { font-size: 22px; }
  .ss-pdp-cmp__eyebrow { font-size: 10px; white-space: normal; }
}

/* ============================================
   43 · PDP AVANT/APRÈS
   Figma 145:924 — bg #EBE3D2 crème foncé, header centro + grid 2 panels
   imagem 720×480 com overlay label (white/gold) + sub.
   ============================================ */
.ss-pdp-aa {
  background: var(--aa-bg, #EBE3D2);
  color: var(--aa-fg, #241F21);
}
.ss-pdp-aa__container {
  max-width: 1920px;
  margin: 0 auto;
  padding: 0 240px;
  display: flex;
  flex-direction: column;
  gap: 48px;
  align-items: center;
}

/* ─── Header ─── */
.ss-pdp-aa__header {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}
.ss-pdp-aa__eyebrow {
  font-family: 'Tenor Sans', var(--heading-font-family);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: var(--aa-accent, #7A4C32);
  margin: 0;
  white-space: nowrap;
}
.ss-pdp-aa__title {
  font-family: 'Tenor Sans', var(--heading-font-family);
  font-weight: 400;
  font-size: 44px;
  line-height: 1.15;
  color: var(--aa-fg, #241F21);
  margin: 0;
}

/* ─── Grid 2 panels (rounded 14, sem gap) ─── */
.ss-pdp-aa__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
  gap: 0;
}
.ss-pdp-aa__panel {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #3a2f24;
}
.ss-pdp-aa__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ss-pdp-aa__img--placeholder {
  background: #3a2f24;
  fill: rgba(245, 242, 230, 0.4);
}

/* Veil sutil pra legibilidade do overlay */
.ss-pdp-aa__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(36, 31, 33, 0.10) 0%, rgba(36, 31, 33, 0.40) 100%);
  pointer-events: none;
}

/* Overlay textual (label + sub centrado) */
.ss-pdp-aa__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px;
  text-align: center;
  pointer-events: none;
}
.ss-pdp-aa__label {
  margin: 0;
  font-family: 'Tenor Sans', var(--heading-font-family);
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 3px;
  text-transform: uppercase;
  /* color setado inline (white/gold) */
}
.ss-pdp-aa__sub {
  margin: 0;
  font-family: 'Outfit', var(--text-font-family);
  font-weight: 300;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
}

/* ─── Responsive ─── */
@media (max-width: 1440px) {
  .ss-pdp-aa__container { padding: 0 80px; }
}
@media (max-width: 1024px) {
  .ss-pdp-aa__container { padding: 0 40px; gap: 36px; }
  .ss-pdp-aa__title { font-size: 32px; }
}
@media (max-width: 640px) {
  .ss-pdp-aa__container { padding: 0 20px; gap: 28px; }
  .ss-pdp-aa__grid { grid-template-columns: 1fr; gap: 0; }
  .ss-pdp-aa__title { font-size: 24px; }
  .ss-pdp-aa__eyebrow { font-size: 10px; white-space: normal; }
}

/* ============================================
   44 · PDP FAQ avec tabs
   Figma 178:2 — bg #F5F2E6, header centro + pill tabs (categoria
   ativa preta + crème, outras white) + accordions FAQ + CTA contact.
   ============================================ */
.ss-pdp-faq {
  background: var(--faq-bg, #F5F2E6);
  color: var(--faq-fg, #241F22);
}
.ss-pdp-faq__container {
  max-width: 1920px;
  margin: 0 auto;
  padding: 0 240px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: center;
}

/* ─── Header centrado ─── */
.ss-pdp-faq__header {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}
.ss-pdp-faq__eyebrow {
  font-family: 'Tenor Sans', var(--heading-font-family);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: var(--faq-accent, #7A4C32);
  margin: 0;
  white-space: nowrap;
}
.ss-pdp-faq__title {
  font-family: 'Tenor Sans', var(--heading-font-family);
  font-weight: 400;
  font-size: 40px;
  line-height: 1.15;
  color: var(--faq-fg, #241F22);
  margin: 0;
}
.ss-pdp-faq__sub {
  font-family: 'Outfit', var(--text-font-family);
  font-weight: 300;
  font-size: 14px;
  color: var(--faq-muted, #4D453D);
  margin: 0;
}

/* ─── Tabs pill bar ─── */
.ss-pdp-faq__tabs {
  display: inline-flex;
  gap: 8px;
  padding: 6px;
  background: #FFFFFF;
  border-radius: 999px;
  align-self: center;
}
.ss-pdp-faq__tab {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--faq-fg, #241F22);
  font-family: 'Outfit', var(--text-font-family);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 12px 22px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
  white-space: nowrap;
}
.ss-pdp-faq__tab.is-active {
  background: var(--faq-active-bg, #241F22);
  color: var(--faq-active-fg, #F5F2E6);
}
.ss-pdp-faq__tab:not(.is-active):hover {
  background: rgba(36, 31, 34, 0.05);
}

/* ─── FAQ cards (accordions) ─── */
.ss-pdp-faq__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 960px;
}
.ss-pdp-faq__card {
  background: var(--faq-card-bg, #FFFFFF);
  border: 1px solid var(--faq-card-border, #EBE3D2);
  border-radius: 12px;
  padding: 22px 28px;
}
.ss-pdp-faq__card.is-hidden { display: none; }
.ss-pdp-faq__card > summary { list-style: none; outline: none; }
.ss-pdp-faq__card > summary::-webkit-details-marker { display: none; }
.ss-pdp-faq__card > summary:focus-visible {
  outline: 2px solid var(--faq-toggle-open, #00ACB1);
  outline-offset: 4px;
  border-radius: 4px;
}

.ss-pdp-faq__sum {
  display: flex;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  user-select: none;
}
.ss-pdp-faq__q {
  flex: 1;
  font-family: 'Tenor Sans', var(--heading-font-family);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.3;
  color: var(--faq-fg, #241F22);
}

/* Toggle: "+" fechado em chocolat, "−" aberto em teal */
.ss-pdp-faq__toggle {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Outfit', var(--text-font-family);
  font-weight: 300;
  font-size: 22px;
  line-height: 1;
  color: var(--faq-accent, #7A4C32);
}
.ss-pdp-faq__toggle::before {
  content: "+";
}
.ss-pdp-faq__card[open] .ss-pdp-faq__toggle::before {
  content: "−";
  color: var(--faq-toggle-open, #00ACB1);
}
.ss-pdp-faq__card[open] .ss-pdp-faq__toggle {
  color: var(--faq-toggle-open, #00ACB1);
}

.ss-pdp-faq__a {
  margin-top: 14px;
  font-family: 'Outfit', var(--text-font-family);
  font-weight: 300;
  font-size: 14px;
  line-height: 24px;
  color: var(--faq-muted, #4D453D);
}
.ss-pdp-faq__a p { margin: 0 0 8px; }
.ss-pdp-faq__a p:last-child { margin-bottom: 0; }
.ss-pdp-faq__a a {
  color: var(--faq-accent, #7A4C32);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ─── Footer CTA ─── */
.ss-pdp-faq__footer {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 8px;
}
.ss-pdp-faq__footer-text {
  margin: 0;
  font-family: 'Outfit', var(--text-font-family);
  font-weight: 300;
  font-size: 13px;
  color: var(--faq-muted, #4D453D);
}
.ss-pdp-faq__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Outfit', var(--text-font-family);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--faq-fg, #241F22);
  border: 1px solid var(--faq-fg, #241F22);
  border-radius: 8px;
  padding: 12px 24px;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}
.ss-pdp-faq__cta:hover {
  background: var(--faq-fg, #241F22);
  color: var(--faq-active-fg, #F5F2E6);
}

/* ─── Responsive ─── */
@media (max-width: 1440px) {
  .ss-pdp-faq__container { padding: 0 80px; }
}
@media (max-width: 1024px) {
  .ss-pdp-faq__container { padding: 0 40px; gap: 28px; }
  .ss-pdp-faq__title { font-size: 32px; }
}
@media (max-width: 640px) {
  .ss-pdp-faq__container { padding: 0 20px; gap: 24px; }
  .ss-pdp-faq__title { font-size: 26px; }
  .ss-pdp-faq__eyebrow { font-size: 10px; white-space: normal; }
  .ss-pdp-faq__tabs {
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    flex-wrap: nowrap;
    justify-content: flex-start;
    border-radius: 12px;
    padding: 4px;
  }
  .ss-pdp-faq__tabs::-webkit-scrollbar { display: none; }
  .ss-pdp-faq__tab { padding: 10px 16px; font-size: 11px; letter-spacing: 1px; flex-shrink: 0; }
  .ss-pdp-faq__card { padding: 18px 20px; }
  .ss-pdp-faq__q { font-size: 15px; }
  .ss-pdp-faq__a { font-size: 13px; line-height: 22px; }
  .ss-pdp-faq__footer { flex-direction: column; gap: 12px; text-align: center; }
}

/* ============================================
   45 · PDP PACK COMPLET (souvent achetés ensemble)
   Figma 145:961 — bg #EBE3D2, header centro + 3 cards 360×360
   avec badge + ❋ + nom + prix teal + séparateur "+" + CTA pack dark.
   ============================================ */
.ss-pdp-pck {
  background: var(--pck-bg, #EBE3D2);
  color: var(--pck-fg, #241F21);
}
.ss-pdp-pck__container {
  max-width: 1920px;
  margin: 0 auto;
  padding: 0 240px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: center;
}

/* ─── Header ─── */
.ss-pdp-pck__header {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}
.ss-pdp-pck__eyebrow {
  font-family: 'Tenor Sans', var(--heading-font-family);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: var(--pck-accent, #7A4C32);
  margin: 0;
  white-space: nowrap;
}
.ss-pdp-pck__title {
  font-family: 'Tenor Sans', var(--heading-font-family);
  font-weight: 400;
  font-size: 40px;
  line-height: 1.15;
  color: var(--pck-fg, #241F21);
  margin: 0;
}

/* ─── Grid 3 cards + separadores ─── */
.ss-pdp-pck__row {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: nowrap;
  max-width: 100%;
}
.ss-pdp-pck__plus {
  font-family: 'Tenor Sans', var(--heading-font-family);
  font-weight: 400;
  font-size: 28px;
  color: rgba(122, 76, 50, 0.5);
  flex-shrink: 0;
  user-select: none;
}

/* ─── Card produit (360×360 quadrado) ─── */
.ss-pdp-pck__card {
  width: 360px;
  height: 360px;
  background: var(--pck-card-bg, #F5F2E6);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  flex-shrink: 0;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
a.ss-pdp-pck__card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(36, 31, 33, 0.08);
}

/* Media (bloc haut 360×240 com badge + ❋) */
.ss-pdp-pck__media {
  position: relative;
  width: 100%;
  height: 240px;
  background: var(--pck-card-media-bg, #EBE3D2);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.ss-pdp-pck__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ss-pdp-pck__mark {
  font-family: 'Tenor Sans', var(--heading-font-family);
  font-weight: 400;
  font-size: 40px;
  line-height: 1;
  color: var(--pck-gold, #CAA46D);
}
.ss-pdp-pck__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--pck-badge-bg, #241F21);
  color: #FFFFFF;
  font-family: 'Tenor Sans', var(--heading-font-family);
  font-weight: 400;
  font-size: 9px;
  letter-spacing: 1px;
  padding: 5px 10px;
  border-radius: 4px;
  z-index: 1;
}

/* Info (bloc bas 360×120 com catégorie + nom + prix) */
.ss-pdp-pck__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 16px 20px 20px;
}
.ss-pdp-pck__cat {
  font-family: 'Tenor Sans', var(--heading-font-family);
  font-weight: 400;
  font-size: 9px;
  letter-spacing: 1.5px;
  color: var(--pck-accent, #7A4C32);
  margin: 0;
}
.ss-pdp-pck__name {
  font-family: 'Tenor Sans', var(--heading-font-family);
  font-weight: 400;
  font-size: 18px;
  color: var(--pck-fg, #241F21);
  margin: 0;
}
.ss-pdp-pck__price {
  font-family: 'Outfit', var(--text-font-family);
  font-weight: 500;
  font-size: 16px;
  color: var(--pck-price, #00ACB1);
  margin: 0;
}

/* ─── CTA pack avec total ─── */
.ss-pdp-pck__cta {
  background: var(--pck-cta-bg, #241F21);
  color: #FFFFFF;
  border: none;
  border-radius: 8px;
  padding: 16px 32px;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
  transition: opacity 0.2s ease;
}
.ss-pdp-pck__cta:hover { opacity: 0.92; }
.ss-pdp-pck__cta-intro {
  font-family: 'Outfit', var(--text-font-family);
  font-weight: 300;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
}
.ss-pdp-pck__cta-old {
  font-family: 'Outfit', var(--text-font-family);
  font-weight: 300;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
  text-decoration: line-through;
}
.ss-pdp-pck__cta-new {
  font-family: 'Outfit', var(--text-font-family);
  font-weight: 500;
  font-size: 18px;
  color: var(--pck-gold, #CAA46D);
}
.ss-pdp-pck__cta-label {
  font-family: 'Tenor Sans', var(--heading-font-family);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 2px;
  color: #FFFFFF;
  display: inline-flex;
  gap: 4px;
  align-items: center;
}

/* ─── Responsive ─── */
@media (max-width: 1440px) {
  .ss-pdp-pck__container { padding: 0 80px; }
}
@media (max-width: 1280px) {
  .ss-pdp-pck__card { width: 280px; height: 320px; }
  .ss-pdp-pck__media { height: 200px; }
  .ss-pdp-pck__info { padding: 14px 16px 18px; }
}
@media (max-width: 1024px) {
  .ss-pdp-pck__container { padding: 0 40px; }
  .ss-pdp-pck__row { flex-wrap: wrap; justify-content: center; }
  .ss-pdp-pck__title { font-size: 32px; }
  .ss-pdp-pck__cta { flex-wrap: wrap; justify-content: center; text-align: center; }
}
@media (max-width: 640px) {
  .ss-pdp-pck__container { padding: 0 20px; gap: 24px; }
  .ss-pdp-pck__row { gap: 12px; }
  .ss-pdp-pck__plus { display: none; }
  .ss-pdp-pck__card { width: 100%; max-width: 320px; height: auto; min-height: 320px; }
  .ss-pdp-pck__media { height: 180px; }
  .ss-pdp-pck__title { font-size: 26px; }
  .ss-pdp-pck__eyebrow { font-size: 10px; white-space: normal; }
  .ss-pdp-pck__cta {
    flex-direction: column;
    gap: 8px;
    padding: 16px 24px;
    width: 100%;
    max-width: 320px;
  }
}

/* ============================================
   46 · POLISH MOBILE/TABLET PDP
   Override final dos breakpoints — sliders horizontais nas sections
   com muitos cards, padding tablet consistente, fix hero mobile.
   ============================================ */

/* ─── TABLET (≤1024px) — padding lateral unificado em 32px ─── */
@media (max-width: 1024px) {
  .ss-pdp-rit__container,
  .ss-pdp-prec__container,
  .ss-pdp-ing__container,
  .ss-pdp-sans__container,
  .ss-pdp-mos__container,
  .ss-pdp-cmp__container,
  .ss-pdp-aa__container,
  .ss-pdp-faq__container,
  .ss-pdp-pck__container,
  .ss-pdp-cine__mood,
  .ss-pdp-desc__container {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
}

/* ════════════════════════════════════════════
   MOBILE (≤640px) — sliders horizontais + polish
   ════════════════════════════════════════════ */

/* Padrão genérico do slider horizontal (reutilizado) */
@media (max-width: 640px) {

  /* ─── 04. RITUEL — slider 4 cards ─── */
  .ss-pdp-rit__grid {
    display: flex !important;
    flex-direction: row !important;
    grid-template-columns: none !important;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 12px;
    margin: 0 -20px;
    padding: 4px 20px 12px;
  }
  .ss-pdp-rit__grid::-webkit-scrollbar { display: none; }
  .ss-pdp-rit__card {
    flex: 0 0 78%;
    max-width: 300px;
    scroll-snap-align: start;
    min-height: 0;
  }

  /* ─── 06. COMPOSÉ DE — slider 4 huiles ─── */
  .ss-pdp-ing__grid--huiles {
    display: flex !important;
    flex-direction: row !important;
    grid-template-columns: none !important;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 12px;
    margin: 0 -20px;
    padding: 4px 20px 12px;
  }
  .ss-pdp-ing__grid--huiles::-webkit-scrollbar { display: none; }
  .ss-pdp-ing__huile {
    flex: 0 0 72%;
    max-width: 280px;
    scroll-snap-align: start;
  }
  .ss-pdp-ing__huile-media { height: 140px; }

  /* ─── 07. SANS — slider 5 cards ─── */
  .ss-pdp-sans__grid {
    display: flex !important;
    flex-direction: row !important;
    grid-template-columns: none !important;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 12px;
    margin: 0 -20px;
    padding: 4px 20px 12px;
  }
  .ss-pdp-sans__grid::-webkit-scrollbar { display: none; }
  .ss-pdp-sans__card {
    flex: 0 0 50%;
    max-width: 180px;
    height: 200px;
    scroll-snap-align: start;
  }

  /* ─── 07.5 MOSAÏQUE — slider 3 imagens ─── */
  .ss-pdp-mos__grid {
    display: flex !important;
    flex-direction: row !important;
    grid-template-columns: none !important;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 12px;
    margin: 0 -20px;
    padding: 4px 20px 12px;
  }
  .ss-pdp-mos__grid::-webkit-scrollbar { display: none; }
  .ss-pdp-mos__tile {
    flex: 0 0 84%;
    max-width: 320px;
    height: 280px !important;
    scroll-snap-align: start;
  }

  /* ─── 06 AVANT/APRÈS — mantém stack vertical (2 panels grandes) ─── */
  /* Já configurado nos breakpoints originais. */

  /* ─── 05 PRÉCAUTIONS — 2 cards stack (não slider, são poucos) ─── */
  /* Já configurado nos breakpoints originais. */

  /* ─── 03 DESCRIPTION — stack 1-col vertical ─── */
  /* Já configurado. */
}

/* ════════════════════════════════════════════
   HERO PDP (.ss-pm + .ss-phe__*) — fixes mobile
   ════════════════════════════════════════════ */

/* Trust strip 2×3 → slider horizontal mobile */
@media (max-width: 640px) {
  .ss-phe__trust { padding: 18px 14px; border-radius: 12px; }
  .ss-phe__trust-grid {
    display: flex !important;
    flex-direction: row !important;
    grid-template-columns: none !important;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 14px;
    margin: 0 -14px;
    padding: 0 14px 6px;
  }
  .ss-phe__trust-grid::-webkit-scrollbar { display: none; }
  .ss-phe__trust-item {
    flex: 0 0 75%;
    max-width: 240px;
    scroll-snap-align: start;
    background: rgba(255, 255, 255, 0.08);
    padding: 10px 12px;
    border-radius: 8px;
  }

  /* Decision tree (Nigella vs Hydra) — 2 cards stack vertical */
  .ss-phe__dec-grid { grid-template-columns: 1fr !important; gap: 12px; }

  /* Mini-reviews Loox wrapper — força responsive */
  .ss-phe__loox-wrap { min-height: 80px; }

  /* Hero galeria nav arrows — sempre visíveis */
  .ss-pm__nav { opacity: 1 !important; }

  /* Thumbs mobile — touch-friendly */
  .ss-pm--thumbs-left .ss-pm__thumbs {
    flex-direction: row !important;
    overflow-x: auto;
    overflow-y: hidden;
    max-height: none !important;
    width: 100% !important;
    margin-top: 8px;
    padding-bottom: 4px;
  }
  .ss-pm--thumbs-left .ss-pm__thumbs::-webkit-scrollbar { display: none; }
  .ss-pm--thumbs-left .ss-pm__thumb { flex-shrink: 0; width: 56px; height: 72px; }
  .ss-pm--thumbs-left .ss-pm__gallery {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important;
    position: static !important;
  }
  .ss-pm--thumbs-left .ss-pm__media {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }
  .ss-pm--thumbs-left .ss-pm__thumbs {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }

  /* Format switch buttons mobile — full width */
  .ss-pm__format-item {
    min-height: 64px;
    padding: 14px 16px;
  }
  .ss-pm__format-item-label { font-size: 14px; }
  .ss-pm__format-item-meta { font-size: 11px; }
  .ss-pm__format-item-status { font-size: 8px; }

  /* Buy box — espaçamento interno mobile */
  .ss-pm__info { gap: 14px; }
  .ss-pm__price-now { font-size: 28px; }
  .ss-pm__atc, .ss-pm__buy-now { font-size: 13px; letter-spacing: 1.5px; }

  /* Inclus card (apps slot Koala) — empilhar elementos */
  .ss-phe__incl-body {
    grid-template-columns: 60px 1fr !important;
    gap: 12px;
    padding: 14px;
  }
  .ss-phe__incl-icon-box { width: 60px; height: 60px; }
  .ss-phe__incl-icon { font-size: 28px; }
  .ss-phe__incl-title { font-size: 16px; }
  .ss-phe__incl-sub { font-size: 11px; }
  .ss-phe__incl-price {
    grid-column: 1 / -1;
    align-items: flex-start;
    border-top: 1px solid rgba(122, 76, 50, 0.1);
    padding-top: 10px;
  }
}

/* ─── Tablet hero (1025-1199px): mantém grid 2-col mas reduz padding ─── */
@media (min-width: 1025px) and (max-width: 1199px) {
  .ss-pm__container {
    grid-template-columns: minmax(0, 1fr) 480px !important;
    gap: 48px;
    padding: 0 32px !important;
  }
}

/* ════════════════════════════════════════════
   FAQ TABS — tabs mobile melhor scroll
   ════════════════════════════════════════════ */
@media (max-width: 640px) {
  /* Snap scroll suave nas tabs */
  .ss-pdp-faq__tabs {
    scroll-snap-type: x mandatory;
    padding: 4px;
  }
  .ss-pdp-faq__tab {
    scroll-snap-align: start;
    flex-shrink: 0;
  }
}

/* ════════════════════════════════════════════
   COMPARATIF — tabela mobile mais escaneável
   ════════════════════════════════════════════ */
@media (max-width: 640px) {
  /* Aumenta gap entre rows pra melhor leitura mobile */
  .ss-pdp-cmp__row { padding: 16px 20px !important; gap: 6px; }
  .ss-pdp-cmp__cell--label {
    font-size: 9px !important;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--cmp-accent, #7A4C32);
    margin-bottom: 2px;
  }
  .ss-pdp-cmp__cell--col-a {
    font-size: 14px !important;
    font-weight: 500;
  }
  .ss-pdp-cmp__cell--col-a::before {
    content: attr(data-label) " ";
  }
  .ss-pdp-cmp__cell--col-b {
    font-size: 13px !important;
    opacity: 0.85;
  }
}

/* ════════════════════════════════════════════
   BANNER CINEMA — quote menor mobile
   ════════════════════════════════════════════ */
@media (max-width: 640px) {
  .ss-pdp-cine { margin-left: 0; margin-right: 0; width: 100%; }
  .ss-pdp-cine__quote-wrap { padding: 0 20px; }
}

/* ════════════════════════════════════════════
   AVANT/APRÈS — overlay mobile maior touch target
   ════════════════════════════════════════════ */
@media (max-width: 640px) {
  /* Aspect-ratio 4/5 mantém proporção — sem min-height override */
  .ss-pdp-aa__label { font-size: 12px; letter-spacing: 2.5px; }
  .ss-pdp-aa__sub { font-size: 11px; }
}

/* ════════════════════════════════════════════
   Visual hint do slider — "swipe" dots
   ════════════════════════════════════════════ */
@media (max-width: 640px) {
  /* Indica visualmente que tem mais conteúdo lateral */
  .ss-pdp-rit__grid::after,
  .ss-pdp-ing__grid--huiles::after,
  .ss-pdp-sans__grid::after,
  .ss-pdp-mos__grid::after {
    content: "";
    flex: 0 0 8px;
  }
}

/* ============================================
   47 · MOBILE ≤375px e ≤320px — refinamento fino
   Override pra small phones (iPhone SE, dispositivos antigos).
   Padding lateral 16px, cards slider 85%, tipografia compacta.
   ============================================ */

/* ════════════════════════════════════════════
   ≤375px (iPhone SE, padrão moderno)
   ════════════════════════════════════════════ */
@media (max-width: 375px) {

  /* ─── Padding lateral global das sections PDP: 16px ─── */
  .ss-pdp-rit__container,
  .ss-pdp-prec__container,
  .ss-pdp-ing__container,
  .ss-pdp-sans__container,
  .ss-pdp-mos__container,
  .ss-pdp-cmp__container,
  .ss-pdp-aa__container,
  .ss-pdp-faq__container,
  .ss-pdp-desc__container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Hero PDP padding mobile menor */
  .ss-pm__container { padding: 0 16px !important; gap: 20px !important; }

  /* ─── HEADERS de section: typography compacta ─── */
  .ss-pdp-rit__title,
  .ss-pdp-prec__title,
  .ss-pdp-ing__title,
  .ss-pdp-sans__title,
  .ss-pdp-mos__title,
  .ss-pdp-cmp__title,
  .ss-pdp-aa__title,
  .ss-pdp-faq__title,
  .ss-pdp-desc__title {
    font-size: 22px !important;
    line-height: 1.2 !important;
  }
  .ss-pdp-rit__eyebrow,
  .ss-pdp-prec__eyebrow,
  .ss-pdp-ing__eyebrow,
  .ss-pdp-sans__eyebrow,
  .ss-pdp-mos__eyebrow,
  .ss-pdp-cmp__eyebrow,
  .ss-pdp-aa__eyebrow,
  .ss-pdp-faq__eyebrow,
  .ss-pdp-desc__eyebrow {
    font-size: 9px !important;
    letter-spacing: 2px !important;
    white-space: normal !important;
  }
  .ss-pdp-rit__sub,
  .ss-pdp-ing__sub,
  .ss-pdp-cmp__sub,
  .ss-pdp-faq__sub {
    font-size: 12px !important;
    line-height: 1.5 !important;
  }

  /* ─── SLIDERS: cards 85% viewport, full-bleed contido ─── */
  .ss-pdp-rit__grid,
  .ss-pdp-ing__grid--huiles,
  .ss-pdp-sans__grid,
  .ss-pdp-mos__grid {
    margin: 0 -16px !important;
    padding: 4px 16px 12px !important;
    gap: 10px !important;
  }

  /* 04 Rituel cards mobile */
  .ss-pdp-rit__card {
    flex: 0 0 86% !important;
    max-width: 280px !important;
    padding: 20px 18px !important;
    gap: 10px !important;
  }
  .ss-pdp-rit__num { font-size: 44px !important; }
  .ss-pdp-rit__card-title { font-size: 18px !important; }
  .ss-pdp-rit__card-desc { font-size: 12px !important; line-height: 18px !important; }
  .ss-pdp-rit__banner { height: 200px !important; margin-bottom: 24px !important; }
  .ss-pdp-rit__banner-quote { font-size: 16px !important; line-height: 1.3 !important; }

  /* 06 Composé huiles cards mobile */
  .ss-pdp-ing__huile {
    flex: 0 0 82% !important;
    max-width: 260px !important;
    padding: 18px !important;
  }
  .ss-pdp-ing__huile-media { height: 120px !important; }
  .ss-pdp-ing__huile-name { font-size: 16px !important; }
  .ss-pdp-ing__huile-desc { font-size: 11px !important; line-height: 17px !important; }

  /* 06 Composé complements 2-col → 1-col */
  .ss-pdp-ing__grid--complements {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-bottom: 24px !important;
  }
  .ss-pdp-ing__comp { padding: 20px 18px !important; }
  .ss-pdp-ing__comp-title { font-size: 18px !important; }
  .ss-pdp-ing__comp-desc { font-size: 13px !important; line-height: 20px !important; }

  /* 06 Composé INCI dark box */
  .ss-pdp-ing__inci { padding: 20px 18px !important; }
  .ss-pdp-ing__inci-title { font-size: 16px !important; }
  .ss-pdp-ing__inci-eyebrow { font-size: 10px !important; }
  .ss-pdp-ing__inci-text { font-size: 10px !important; line-height: 17px !important; }

  /* 07 Sans cards — 2 visíveis ao mesmo tempo */
  .ss-pdp-sans__card {
    flex: 0 0 calc(50% - 5px) !important;
    max-width: 160px !important;
    height: 170px !important;
    padding: 16px 10px !important;
    gap: 8px !important;
  }
  .ss-pdp-sans__icon { font-size: 28px !important; }
  .ss-pdp-sans__label { font-size: 13px !important; line-height: 1.25 !important; }
  .ss-pdp-sans__sub { font-size: 10px !important; }

  /* 07.5 Mosaïque tiles */
  .ss-pdp-mos__tile {
    flex: 0 0 88% !important;
    max-width: 280px !important;
    height: 240px !important;
  }
  .ss-pdp-mos__overlay-symbol,
  .ss-pdp-mos__overlay span { font-size: 10px !important; letter-spacing: 1.5px !important; }

  /* 03 Description editorial mobile */
  .ss-pdp-desc__container { gap: 28px !important; padding-top: 0; padding-bottom: 0; }
  .ss-pdp-desc__media { height: 240px !important; }
  .ss-pdp-desc__title { font-size: 24px !important; line-height: 30px !important; }
  .ss-pdp-desc__body { font-size: 13px !important; line-height: 22px !important; }
  .ss-pdp-desc__overlay-symbol { font-size: 40px !important; }
  .ss-pdp-desc__overlay-tag { font-size: 9px !important; }

  /* 02.7 Banner cinema mobile */
  .ss-pdp-cine { height: 360px !important; }
  .ss-pdp-cine__quote { font-size: 19px !important; line-height: 26px !important; }
  .ss-pdp-cine__quote-mark { font-size: 36px !important; }
  .ss-pdp-cine__attrib { font-size: 10px !important; letter-spacing: 1.2px !important; }

  /* 05 Précautions */
  .ss-pdp-prec__pill {
    height: auto !important;
    padding: 8px 14px !important;
    font-size: 10px !important;
    text-align: center;
    width: 100%;
    max-width: 320px;
  }
  .ss-pdp-prec__card { padding: 20px 18px !important; }
  .ss-pdp-prec__card-title { font-size: 18px !important; }
  .ss-pdp-prec__card-text { font-size: 12px !important; line-height: 18px !important; }
  .ss-pdp-prec__cta { padding: 24px 16px !important; }
  .ss-pdp-prec__cta-title { font-size: 19px !important; }
  .ss-pdp-prec__cta-subtitle { font-size: 12px !important; line-height: 1.45 !important; }
  .ss-pdp-prec__cta-icon { width: 48px !important; height: 48px !important; font-size: 22px !important; }
  .ss-pdp-prec__form-input,
  .ss-pdp-prec__form-btn { height: 48px !important; font-size: 13px !important; }
  .ss-pdp-prec__form-input { padding: 0 14px !important; }
  .ss-pdp-prec__form-btn { padding: 0 20px !important; letter-spacing: 1.2px !important; }
  .ss-pdp-prec__disclaimer { font-size: 10px !important; line-height: 16px !important; }

  /* 03.5 Comparatif — tabela mobile escaneável */
  .ss-pdp-cmp__head {
    grid-template-columns: 1fr 1fr !important;
    padding: 14px 14px !important;
  }
  .ss-pdp-cmp__col-name { font-size: 15px !important; }
  .ss-pdp-cmp__col-label { font-size: 8px !important; letter-spacing: 1px !important; }
  .ss-pdp-cmp__row {
    grid-template-columns: 1fr !important;
    padding: 12px 14px !important;
    gap: 4px !important;
    min-height: auto !important;
  }
  .ss-pdp-cmp__cell--label {
    font-size: 8px !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase;
    opacity: 0.75;
    margin-bottom: 0;
  }
  .ss-pdp-cmp__cell--col-a { font-size: 12px !important; }
  .ss-pdp-cmp__cell--col-b { font-size: 11.5px !important; }
  .ss-pdp-cmp__common { padding: 12px 14px !important; }
  .ss-pdp-cmp__cell--common { font-size: 10px !important; line-height: 14px !important; }
  .ss-pdp-cmp__cta { font-size: 10px !important; letter-spacing: 1.2px !important; }

  /* 06 Avant/Après — aspect-ratio 4/5 herda da regra base */
  .ss-pdp-aa__label { font-size: 11px !important; letter-spacing: 2px !important; }
  .ss-pdp-aa__sub { font-size: 10px !important; padding: 0 14px; }

  /* 07 FAQ tabs */
  .ss-pdp-faq__tab {
    padding: 9px 14px !important;
    font-size: 10px !important;
    letter-spacing: 0.8px !important;
  }
  .ss-pdp-faq__card { padding: 16px 16px !important; }
  .ss-pdp-faq__q { font-size: 13px !important; line-height: 1.35 !important; }
  .ss-pdp-faq__toggle { font-size: 20px !important; width: 20px !important; height: 20px !important; }
  .ss-pdp-faq__a { font-size: 12px !important; line-height: 20px !important; margin-top: 12px !important; }
  .ss-pdp-faq__footer { gap: 10px !important; }
  .ss-pdp-faq__footer-text { font-size: 12px !important; }
  .ss-pdp-faq__cta {
    font-size: 10px !important;
    letter-spacing: 1.2px !important;
    padding: 10px 18px !important;
  }

  /* ════════════════════════════════════════════
     HERO PDP mobile — refinamento crítico
     ════════════════════════════════════════════ */

  /* Galeria container reduzido */
  .ss-pm { padding: 0 0 32px !important; }
  .ss-pm__info { gap: 12px !important; }

  /* Galeria thumbs */
  .ss-pm--thumbs-left .ss-pm__thumb { width: 48px !important; height: 60px !important; }
  .ss-pm__thumb img { border-radius: 4px; }

  /* Galeria image bigger */
  .ss-pm__media { aspect-ratio: 4 / 5 !important; }
  .ss-pm__badge {
    top: 10px; left: 10px;
    padding: 4px 8px;
    font-size: 9px;
    letter-spacing: 1px;
  }
  .ss-pm__nav { width: 32px !important; height: 32px !important; }
  .ss-pm__nav svg { width: 16px !important; height: 16px !important; }

  /* Hair type pill */
  .ss-pm__hair-pill {
    font-size: 9px !important;
    letter-spacing: 1.5px !important;
    padding: 4px 10px !important;
  }

  /* Title + subtitle */
  .ss-pm__title { font-size: 24px !important; line-height: 1.15 !important; }
  .ss-pm__subtitle { font-size: 12px !important; line-height: 1.5 !important; }

  /* Loox rating */
  .ss-pm__rating { font-size: 11px !important; }

  /* Filete */
  .ss-pm__filete { margin: 6px 0 !important; width: 32px !important; }

  /* Price */
  .ss-pm__price-now { font-size: 26px !important; }
  .ss-pm__price-old { font-size: 14px !important; }
  .ss-pm__price-save { font-size: 9px !important; padding: 3px 8px !important; }
  .ss-pm__subprice { font-size: 10px !important; }

  /* Format switch */
  .ss-pm__format-label { font-size: 9px !important; letter-spacing: 1.5px !important; }
  .ss-pm__format-item {
    min-height: 56px !important;
    padding: 12px 14px !important;
  }
  .ss-pm__format-item-label { font-size: 13px !important; }
  .ss-pm__format-item-meta { font-size: 10px !important; }
  .ss-pm__format-item-status { font-size: 8px !important; letter-spacing: 1.2px !important; }

  /* Actions */
  .ss-pm__actions { padding-top: 8px !important; gap: 10px !important; }
  .ss-pm__atc,
  .ss-pm__buy-now {
    height: 52px !important;
    font-size: 12px !important;
    letter-spacing: 1.2px !important;
  }

  /* USP line */
  .ss-pm__usps { padding-top: 6px !important; gap: 10px !important; }
  .ss-pm__usps li { font-size: 10px !important; }

  /* ─── Hero extras 8 cards (.ss-phe__*) ─── */

  /* App slot (Koala) */
  .ss-phe__incl-banner { padding: 6px 14px !important; font-size: 9px !important; letter-spacing: 1.5px !important; }
  .ss-phe__incl-body { padding: 14px !important; gap: 10px !important; }
  .ss-phe__incl-icon-box { width: 56px !important; height: 56px !important; }
  .ss-phe__incl-icon { font-size: 24px !important; }
  .ss-phe__incl-eyebrow { font-size: 9px !important; letter-spacing: 1.5px !important; }
  .ss-phe__incl-title { font-size: 15px !important; }
  .ss-phe__incl-sub { font-size: 11px !important; line-height: 1.4 !important; }
  .ss-phe__incl-valeur { font-size: 9px !important; }
  .ss-phe__incl-old { font-size: 12px !important; }
  .ss-phe__incl-now { font-size: 18px !important; }

  /* Pour qui */
  .ss-phe__pq { padding: 18px 14px !important; }
  .ss-phe__pq-eyebrow { font-size: 9px !important; letter-spacing: 1.5px !important; }
  .ss-phe__pq-title { font-size: 18px !important; }
  .ss-phe__pq-list li { font-size: 12px !important; line-height: 1.5 !important; }

  /* Decision tree (Nigella vs Hydra) */
  .ss-phe__dec { padding: 18px 14px !important; }
  .ss-phe__dec-eyebrow { font-size: 9px !important; }
  .ss-phe__dec-title { font-size: 18px !important; }
  .ss-phe__dec-card { padding: 14px 12px !important; }
  .ss-phe__dec-name { font-size: 17px !important; }
  .ss-phe__dec-label { font-size: 9px !important; letter-spacing: 1.2px !important; }
  .ss-phe__dec-bullets { font-size: 11px !important; }
  .ss-phe__dec-cta { font-size: 9px !important; letter-spacing: 1.2px !important; padding: 10px 16px !important; }

  /* Delivery banner */
  .ss-phe__delivery { padding: 12px 14px !important; font-size: 11px !important; }

  /* Trust strip slider — cards menores */
  .ss-phe__trust { padding: 14px 12px !important; }
  .ss-phe__trust-grid {
    margin: 0 -12px !important;
    padding: 0 12px 4px !important;
    gap: 10px !important;
  }
  .ss-phe__trust-item {
    flex: 0 0 78% !important;
    max-width: 200px !important;
    padding: 8px 10px !important;
    gap: 8px;
  }
  .ss-phe__trust-icon { width: 28px !important; height: 28px !important; }
  .ss-phe__trust-icon svg { width: 22px !important; height: 22px !important; }
  .ss-phe__trust-text { font-size: 11px !important; line-height: 1.35 !important; }

  /* Accordions FAQ no hero */
  .ss-phe__acc-sum { padding: 14px 4px !important; font-size: 14px !important; }
  .ss-phe__acc-c { padding: 0 4px 14px !important; font-size: 12px !important; line-height: 1.5 !important; }
}

/* ════════════════════════════════════════════
   ≤320px (iPhone SE 1st gen, dispositivos antigos)
   ════════════════════════════════════════════ */
@media (max-width: 320px) {
  /* Padding ainda menor */
  .ss-pdp-rit__container,
  .ss-pdp-prec__container,
  .ss-pdp-ing__container,
  .ss-pdp-sans__container,
  .ss-pdp-mos__container,
  .ss-pdp-cmp__container,
  .ss-pdp-aa__container,
  .ss-pdp-faq__container,
  .ss-pdp-desc__container {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .ss-pm__container { padding: 0 12px !important; }

  /* Sliders ainda mais full-bleed */
  .ss-pdp-rit__grid,
  .ss-pdp-ing__grid--huiles,
  .ss-pdp-sans__grid,
  .ss-pdp-mos__grid,
  .ss-phe__trust-grid {
    margin: 0 -12px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    gap: 8px !important;
  }

  /* Title sizes ainda menores */
  .ss-pdp-rit__title,
  .ss-pdp-prec__title,
  .ss-pdp-ing__title,
  .ss-pdp-sans__title,
  .ss-pdp-mos__title,
  .ss-pdp-cmp__title,
  .ss-pdp-aa__title,
  .ss-pdp-faq__title,
  .ss-pdp-desc__title {
    font-size: 20px !important;
    line-height: 1.18 !important;
  }

  /* Hero PDP */
  .ss-pm__title { font-size: 22px !important; }
  .ss-pm__price-now { font-size: 24px !important; }
  .ss-pm__atc, .ss-pm__buy-now { font-size: 11px !important; height: 48px !important; }

  /* Format switch ainda mais compacto */
  .ss-pm__format-item { padding: 10px 12px !important; min-height: 52px !important; }
  .ss-pm__format-item-label { font-size: 12px !important; }
  .ss-pm__format-item-meta { font-size: 9px !important; }

  /* Sliders cards */
  .ss-pdp-rit__card,
  .ss-pdp-ing__huile {
    flex: 0 0 90% !important;
  }
  .ss-pdp-sans__card {
    flex: 0 0 calc(50% - 4px) !important;
    height: 150px !important;
    padding: 12px 8px !important;
  }
  .ss-pdp-sans__icon { font-size: 24px !important; }
  .ss-pdp-sans__label { font-size: 12px !important; }
  .ss-pdp-sans__sub { font-size: 9px !important; }

  /* Cards inci, complement, faq menores */
  .ss-pdp-ing__inci-text,
  .ss-pdp-faq__a { font-size: 11px !important; line-height: 17px !important; }

  /* Précautions CTA mais compacto */
  .ss-pdp-prec__cta { padding: 20px 14px !important; gap: 14px !important; }
  .ss-pdp-prec__cta-title { font-size: 17px !important; }
  .ss-pdp-prec__cta-subtitle { font-size: 11px !important; }
}

/* ============================================
   48 · FIX MOBILE — overflow + header overlap
   Corrige scroll lateral, USP strip multi-line empurrando header,
   imagens vazando, nav arrows fora da tela.
   ============================================ */

/* ─── Global mobile: prevenir scroll horizontal ─── */
@media (max-width: 740px) {
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
  /* Sections nunca devem extrapolar viewport */
  .shopify-section,
  .ss-pm,
  .ss-pdp-desc,
  .ss-pdp-cine,
  .ss-pdp-rit,
  .ss-pdp-prec,
  .ss-pdp-ing,
  .ss-pdp-sans,
  .ss-pdp-mos,
  .ss-pdp-cmp,
  .ss-pdp-aa,
  .ss-pdp-faq {
    max-width: 100vw !important;
    overflow-x: hidden;
    box-sizing: border-box;
  }
}

/* ─── USP STRIP mobile: scroll horizontal, altura fixa ─── */
@media (max-width: 740px) {
  .ss-usp-strip {
    padding: 0 !important;
    height: 36px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .ss-usp-strip::-webkit-scrollbar { display: none; }
  .ss-usp-strip__inner {
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    gap: 18px !important;
    padding: 0 16px;
    height: 100%;
    width: max-content;
    min-width: 100%;
  }
  .ss-usp-strip__item { flex-shrink: 0; }
  .ss-usp-strip__sep { display: inline-flex !important; flex-shrink: 0; }
}

/* ─── HERO PDP mobile — fix imagem vazando + box-sizing ─── */
@media (max-width: 740px) {
  .ss-pm__container {
    width: 100%;
    max-width: 100% !important;
    box-sizing: border-box;
  }
  .ss-pm__gallery {
    width: 100%;
    max-width: 100% !important;
    box-sizing: border-box;
    overflow: hidden;
  }
  .ss-pm__media {
    width: 100%;
    max-width: 100% !important;
    box-sizing: border-box;
    aspect-ratio: 4 / 5;
  }
  .ss-pm__media-track {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  .ss-pm__media-item {
    width: 100%;
    max-width: 100%;
  }
  .ss-pm__media-img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    object-fit: cover;
    display: block;
  }
  /* Info column também não pode vazar */
  .ss-pm__info {
    width: 100%;
    max-width: 100% !important;
    box-sizing: border-box;
    overflow-wrap: break-word;
    word-wrap: break-word;
  }

  /* Nav arrows: garantir que ambas fiquem visíveis dentro da media */
  .ss-pm__nav {
    position: absolute !important;
    width: 36px !important;
    height: 36px !important;
    opacity: 1 !important;
    background: rgba(255, 255, 255, 0.9) !important;
    z-index: 2;
  }
  .ss-pm__nav--prev { left: 10px !important; right: auto !important; }
  .ss-pm__nav--next { right: 10px !important; left: auto !important; }

  /* Badge dentro da media, não solto */
  .ss-pm__badge {
    position: absolute !important;
    top: 12px !important;
    left: 12px !important;
    z-index: 2;
  }
}

/* ─── Containers de section: nunca passar viewport mobile ─── */
@media (max-width: 740px) {
  .ss-pdp-desc__container,
  .ss-pdp-rit__container,
  .ss-pdp-prec__container,
  .ss-pdp-ing__container,
  .ss-pdp-sans__container,
  .ss-pdp-mos__container,
  .ss-pdp-cmp__container,
  .ss-pdp-aa__container,
  .ss-pdp-faq__container {
    width: 100%;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  /* Imagens em todas as sections respondem ao container */
  .ss-pdp-desc__img,
  .ss-pdp-rit__banner-img,
  .ss-pdp-mos__img,
  .ss-pdp-ing__huile-img,
  .ss-pdp-aa__img,
  .ss-pdp-cine__img {
    max-width: 100% !important;
    width: 100% !important;
    object-fit: cover;
  }
}

/* ─── Banner cinema mobile: garantir que não vaze ─── */
@media (max-width: 740px) {
  .ss-pdp-cine {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;
  }
}

/* ─── Sliders: garantir scroll suave sem overflow-x do parent ─── */
@media (max-width: 740px) {
  .ss-pdp-rit__grid,
  .ss-pdp-ing__grid--huiles,
  .ss-pdp-sans__grid,
  .ss-pdp-mos__grid,
  .ss-phe__trust-grid {
    /* Padding já tá no bloco 47, garantir box-sizing */
    box-sizing: border-box;
    max-width: 100vw;
  }
}

/* ─── Header floating: garantir que não sobreponha USP strip ─── */
@media (max-width: 740px) {
  /* USP strip agora tem altura fixa 36px (scroll horiz) — header offset OK */
  #shopify-section-header {
    /* Mantém 40px offset, mas agora USP é 36px fixo (não múltiplas linhas) */
    margin-top: 40px !important;
  }
}

/* ============================================
   49 · FIX MOBILE OVERFLOW v2 — agressivo
   PDP estava vazando pra direita por causa do grid 580px + flex
   children sem min-width: 0. Override hard.
   ============================================ */

@media (max-width: 1023px) {
  /* Container hero PDP — força grid 1-col em qualquer viewport <1024 */
  .ss-pm__container,
  .ss-pm--thumbs-left .ss-pm__container,
  .ss-pm--thumbs-below .ss-pm__container {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 24px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
  }

  /* Gallery + info — width 100% e min-width 0 (crítico pra flex/grid children) */
  .ss-pm__gallery,
  .ss-pm__info {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* Gallery internal grid (thumbs + media) — também 1-col */
  .ss-pm__gallery {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important;
  }
  .ss-pm__media {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .ss-pm__thumbs {
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ─── Texto longo: word-wrap + min-width 0 ─── */
@media (max-width: 740px) {
  .ss-pm__title,
  .ss-pm__subtitle,
  .ss-pm__info > *,
  .ss-phe__* {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
    word-break: break-word !important;
    box-sizing: border-box !important;
  }

  /* Hair type pill quebra se precisar */
  .ss-pm__hair-pill {
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
  }

  /* Botões ATC e Buy Now nunca passar viewport */
  .ss-pm__atc,
  .ss-pm__buy-now,
  .ss-pm__actions > * {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* USP line: items nunca passar */
  .ss-pm__usps {
    width: 100% !important;
    max-width: 100% !important;
    flex-wrap: wrap !important;
  }
  .ss-pm__usps li {
    flex-shrink: 1 !important;
    min-width: 0 !important;
    overflow-wrap: break-word !important;
  }

  /* Price row: badge "ÉCONOMISEZ" nunca passar */
  .ss-pm__price,
  .ss-pm__price-row {
    flex-wrap: wrap !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 8px !important;
  }
  .ss-pm__price-save {
    flex-shrink: 0;
    max-width: 100%;
  }

  /* Format switch: items nunca passar viewport */
  .ss-pm__format,
  .ss-pm__format-list {
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: 1fr !important;
  }
  .ss-pm__format-item {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* ─── Containers de section também forçar 100% ─── */
@media (max-width: 740px) {
  .ss-pdp-desc__container,
  .ss-pdp-rit__container,
  .ss-pdp-prec__container,
  .ss-pdp-ing__container,
  .ss-pdp-sans__container,
  .ss-pdp-mos__container,
  .ss-pdp-cmp__container,
  .ss-pdp-aa__container,
  .ss-pdp-faq__container {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Todos os children diretos dos containers */
  .ss-pdp-desc__container > *,
  .ss-pdp-rit__container > *,
  .ss-pdp-prec__container > *,
  .ss-pdp-ing__container > *,
  .ss-pdp-sans__container > *,
  .ss-pdp-mos__container > *,
  .ss-pdp-cmp__container > *,
  .ss-pdp-aa__container > *,
  .ss-pdp-faq__container > * {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* Headings/titles wrap */
  .ss-pdp-desc__title,
  .ss-pdp-rit__title,
  .ss-pdp-prec__title,
  .ss-pdp-ing__title,
  .ss-pdp-sans__title,
  .ss-pdp-mos__title,
  .ss-pdp-cmp__title,
  .ss-pdp-aa__title,
  .ss-pdp-faq__title {
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
    max-width: 100% !important;
    white-space: normal !important;
  }
}

/* ─── Sliders horizontais: garantir parents permitem overflow ─── */
@media (max-width: 740px) {
  /* Os GRID parents devem ter overflow visible pra os sliders funcionarem */
  .ss-pdp-rit__container,
  .ss-pdp-ing__container,
  .ss-pdp-sans__container,
  .ss-pdp-mos__container {
    overflow-x: hidden !important; /* container esconde overflow externo */
  }

  /* Mas o slider interno permite scroll-x */
  .ss-pdp-rit__grid,
  .ss-pdp-ing__grid--huiles,
  .ss-pdp-sans__grid,
  .ss-pdp-mos__grid,
  .ss-phe__trust-grid {
    overflow-x: auto !important;
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }
}

/* ─── Body / html: garante zero scroll horizontal ─── */
@media (max-width: 1023px) {
  html {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
  }
  body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
    position: relative;
  }
}

/* ============================================
   50 · MOBILE SLIDERS — peeking elegante (não cortar feio)
   Ajusta width dos cards pra sempre mostrar parte do próximo card
   no scroll horizontal. Padding-right maior pro último card respirar.
   ============================================ */

@media (max-width: 740px) {
  /* ─── Slider geral: peek do próximo card sempre visível ─── */
  .ss-pdp-rit__grid,
  .ss-pdp-ing__grid--huiles,
  .ss-pdp-sans__grid,
  .ss-pdp-mos__grid {
    /* Full-bleed: estende até a borda da viewport */
    margin: 0 -20px !important;
    /* Padding-left: respiro inicial. Padding-right: 50px pro último card respirar */
    padding: 4px 20px 12px !important;
    /* Scroll-padding alinha o snap considerando o padding */
    scroll-padding-left: 20px !important;
    /* Importante pra peeking funcionar suave */
    scroll-behavior: smooth;
  }

  /* Trust strip (hero) */
  .ss-phe__trust-grid {
    margin: 0 -14px !important;
    padding: 0 14px 4px !important;
    scroll-padding-left: 14px !important;
    scroll-behavior: smooth;
  }
}

/* ─── 04 RITUEL: card 75% viewport (mostra 1.3 cards) ─── */
@media (max-width: 740px) {
  .ss-pdp-rit__card {
    flex: 0 0 calc(82% - 6px) !important;
    max-width: 320px !important;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  /* Spacer pra dar respiro no fim do slider (peeking elegante do "fim") */
  .ss-pdp-rit__grid::after {
    content: "";
    flex: 0 0 4px;
  }
}

/* ─── 06 COMPOSÉ HUILES: card 70% viewport (mostra 1.4 cards) ─── */
@media (max-width: 740px) {
  .ss-pdp-ing__huile {
    flex: 0 0 calc(75% - 6px) !important;
    max-width: 280px !important;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  .ss-pdp-ing__grid--huiles::after {
    content: "";
    flex: 0 0 4px;
  }
}

/* ─── 07 SANS: card ~42% viewport (mostra 2.2 cards) ─── */
@media (max-width: 740px) {
  .ss-pdp-sans__card {
    flex: 0 0 calc(45% - 5px) !important;
    max-width: 180px !important;
    min-width: 140px !important;
    height: 200px !important;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  .ss-pdp-sans__grid::after {
    content: "";
    flex: 0 0 4px;
  }
}

/* ─── 07.5 MOSAÏQUE: card 80% viewport (mostra 1.2 cards) ─── */
@media (max-width: 740px) {
  .ss-pdp-mos__tile {
    flex: 0 0 calc(82% - 6px) !important;
    max-width: 320px !important;
    height: 280px !important;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  .ss-pdp-mos__grid::after {
    content: "";
    flex: 0 0 4px;
  }
}

/* ─── Trust strip hero: cards 70% (mostra 1.4) ─── */
@media (max-width: 740px) {
  .ss-phe__trust-item {
    flex: 0 0 calc(75% - 6px) !important;
    max-width: 240px !important;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  .ss-phe__trust-grid::after {
    content: "";
    flex: 0 0 4px;
  }
}

/* ─── Refinement 375px: ajustar percentuais ─── */
@media (max-width: 375px) {
  .ss-pdp-rit__card,
  .ss-pdp-ing__huile,
  .ss-pdp-mos__tile {
    flex: 0 0 calc(85% - 6px) !important;
  }
  .ss-pdp-sans__card {
    flex: 0 0 calc(46% - 5px) !important;
    min-width: 130px !important;
    height: 180px !important;
  }
  .ss-phe__trust-item {
    flex: 0 0 calc(78% - 6px) !important;
    max-width: 220px !important;
  }
}

/* ─── Refinement 320px: ainda mais conservador ─── */
@media (max-width: 320px) {
  .ss-pdp-rit__card,
  .ss-pdp-ing__huile,
  .ss-pdp-mos__tile {
    flex: 0 0 calc(88% - 5px) !important;
  }
  .ss-pdp-sans__card {
    flex: 0 0 calc(48% - 4px) !important;
    min-width: 120px !important;
    height: 165px !important;
  }
}

/* ============================================
   51 · SLIDERS TABLET (741-1023px) — peek 2 cards
   Em iPad portrait, mostrar 2 cards inteiros + peek do 3º.
   Antes só pegava ≤740px (mobile), agora cobre todo intervalo.
   ============================================ */

@media (min-width: 741px) and (max-width: 1023px) {

  /* Containers full-bleed */
  .ss-pdp-rit__grid,
  .ss-pdp-ing__grid--huiles,
  .ss-pdp-sans__grid,
  .ss-pdp-mos__grid {
    display: flex !important;
    flex-direction: row !important;
    grid-template-columns: none !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 16px !important;
    margin: 0 -32px !important;
    padding: 4px 32px 16px !important;
    scroll-padding-left: 32px !important;
    scroll-behavior: smooth;
    box-sizing: border-box;
    max-width: 100vw !important;
  }
  .ss-pdp-rit__grid::-webkit-scrollbar,
  .ss-pdp-ing__grid--huiles::-webkit-scrollbar,
  .ss-pdp-sans__grid::-webkit-scrollbar,
  .ss-pdp-mos__grid::-webkit-scrollbar { display: none; }

  /* Spacer fim — respiro pro último card */
  .ss-pdp-rit__grid::after,
  .ss-pdp-ing__grid--huiles::after,
  .ss-pdp-sans__grid::after,
  .ss-pdp-mos__grid::after {
    content: "";
    flex: 0 0 16px;
  }

  /* ─── 04 RITUEL: 2 cards visíveis + peek ─── */
  .ss-pdp-rit__card {
    flex: 0 0 calc(45% - 8px) !important;
    max-width: 320px !important;
    min-width: 240px !important;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    padding: 24px 22px !important;
  }

  /* ─── 06 COMPOSÉ HUILES: 2 cards visíveis + peek ─── */
  .ss-pdp-ing__huile {
    flex: 0 0 calc(45% - 8px) !important;
    max-width: 320px !important;
    min-width: 220px !important;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  /* Complements 2-col em tablet (não slider, são poucos) */
  .ss-pdp-ing__grid--complements {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }

  /* ─── 07 SANS: 3 cards visíveis + peek ─── */
  .ss-pdp-sans__card {
    flex: 0 0 calc(32% - 8px) !important;
    max-width: 220px !important;
    min-width: 160px !important;
    height: 210px !important;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  /* ─── 07.5 MOSAÏQUE: 2 cards visíveis + peek ─── */
  .ss-pdp-mos__tile {
    flex: 0 0 calc(48% - 8px) !important;
    max-width: 360px !important;
    min-width: 240px !important;
    height: 280px !important;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  /* Featured ainda mais alto */
  .ss-pdp-mos__tile--featured {
    height: 320px !important;
  }

  /* ─── Trust strip (hero): 2 cards visíveis + peek ─── */
  .ss-phe__trust-grid {
    display: flex !important;
    flex-direction: row !important;
    grid-template-columns: none !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 14px !important;
    margin: 0 -14px !important;
    padding: 0 14px 6px !important;
    scroll-padding-left: 14px !important;
    scroll-behavior: smooth;
  }
  .ss-phe__trust-grid::-webkit-scrollbar { display: none; }
  .ss-phe__trust-item {
    flex: 0 0 calc(48% - 8px) !important;
    max-width: 240px !important;
    min-width: 160px !important;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  .ss-phe__trust-grid::after {
    content: "";
    flex: 0 0 14px;
  }

  /* Padding section tablet — 32px lateral consistente */
  .ss-pdp-desc__container,
  .ss-pdp-rit__container,
  .ss-pdp-prec__container,
  .ss-pdp-ing__container,
  .ss-pdp-sans__container,
  .ss-pdp-mos__container,
  .ss-pdp-cmp__container,
  .ss-pdp-aa__container,
  .ss-pdp-faq__container {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
}

/* ─── Refinement médio (~ 600-740px): híbrido entre tablet e mobile ─── */
@media (min-width: 600px) and (max-width: 740px) {
  /* Nesse intervalo, peek de 1.5 cards (não 2) */
  .ss-pdp-rit__card,
  .ss-pdp-ing__huile,
  .ss-pdp-mos__tile {
    flex: 0 0 calc(58% - 8px) !important;
    max-width: 300px !important;
    min-width: 220px !important;
  }
  .ss-pdp-sans__card {
    flex: 0 0 calc(36% - 7px) !important;
    max-width: 180px !important;
    min-width: 150px !important;
  }
}

/* ============================================
   52 · 320PX REFINEMENT — peek decente em viewport mínimo
   320px viewport - 12padding*2 = 296px disponível.
   Calculado pra mostrar ~30-40% do próximo card como peek claro.
   ============================================ */

@media (max-width: 320px) {
  /* Padding container menor pra dar mais respiro */
  .ss-pdp-rit__grid,
  .ss-pdp-ing__grid--huiles,
  .ss-pdp-sans__grid,
  .ss-pdp-mos__grid {
    margin: 0 -12px !important;
    padding: 4px 12px 12px !important;
    scroll-padding-left: 12px !important;
    gap: 8px !important;
  }
  .ss-phe__trust-grid {
    margin: 0 -10px !important;
    padding: 0 10px 4px !important;
    scroll-padding-left: 10px !important;
    gap: 10px !important;
  }

  /* ─── Cards single-peek: ~75% viewport (peek 25%) ─── */
  .ss-pdp-rit__card,
  .ss-pdp-ing__huile,
  .ss-pdp-mos__tile {
    flex: 0 0 calc(75% - 4px) !important;
    max-width: 240px !important;
    min-width: 0 !important;
  }

  /* ─── 07 SANS: 2 cards visíveis + peek 25% ─── */
  .ss-pdp-sans__card {
    flex: 0 0 calc(40% - 4px) !important;
    max-width: 140px !important;
    min-width: 110px !important;
    height: 160px !important;
    padding: 12px 8px !important;
  }
  .ss-pdp-sans__icon { font-size: 24px !important; }
  .ss-pdp-sans__label { font-size: 12px !important; line-height: 1.2 !important; }
  .ss-pdp-sans__sub { font-size: 9px !important; }

  /* ─── Trust strip hero: ~72% (peek 28%) ─── */
  .ss-phe__trust-item {
    flex: 0 0 calc(72% - 5px) !important;
    max-width: 200px !important;
    min-width: 0 !important;
    padding: 8px 10px !important;
  }
  .ss-phe__trust-text { font-size: 10px !important; line-height: 1.3 !important; }

  /* ─── Spacer fim menor ─── */
  .ss-pdp-rit__grid::after,
  .ss-pdp-ing__grid--huiles::after,
  .ss-pdp-sans__grid::after,
  .ss-pdp-mos__grid::after {
    flex: 0 0 4px !important;
  }
  .ss-phe__trust-grid::after {
    flex: 0 0 4px !important;
  }

  /* Mosaïque mantém altura mas card menor */
  .ss-pdp-mos__tile { height: 220px !important; }
  .ss-pdp-mos__tile--featured { height: 240px !important; }

  /* Rituel banner mais compacto */
  .ss-pdp-rit__banner { height: 180px !important; }
  .ss-pdp-rit__banner-quote { font-size: 15px !important; line-height: 1.3 !important; }
  .ss-pdp-rit__banner-tag { font-size: 9px !important; letter-spacing: 1px !important; }

  /* Composé huile card mais compacto */
  .ss-pdp-ing__huile { padding: 14px 12px !important; }
  .ss-pdp-ing__huile-media { height: 100px !important; }
  .ss-pdp-ing__huile-name { font-size: 15px !important; }
  .ss-pdp-ing__huile-desc { font-size: 10px !important; line-height: 16px !important; }
  .ss-pdp-ing__huile-subname { font-size: 10px !important; }

  /* Rituel card mais compacto */
  .ss-pdp-rit__card { padding: 16px 14px !important; gap: 8px !important; }
  .ss-pdp-rit__num { font-size: 38px !important; }
  .ss-pdp-rit__card-title { font-size: 16px !important; }
  .ss-pdp-rit__card-desc { font-size: 11px !important; line-height: 17px !important; }
  .ss-pdp-rit__pill {
    font-size: 9px !important;
    padding: 3px 8px !important;
  }
}

/* ============================================
   53 · SLIDERS — fade-out elegante + peek sutil
   Reduz peek pra 15-20% (em vez de 40-50%) e adiciona mask-image
   pra suavizar a borda direita (não ficar "linha riscada" feia).
   ============================================ */

/* ─── Container parent dos sliders permite mask sem cortar scroll ─── */
@media (max-width: 1023px) {
  .ss-pdp-rit__container,
  .ss-pdp-ing__container,
  .ss-pdp-sans__container,
  .ss-pdp-mos__container {
    /* Remove overflow-x hidden do container — deixa o slider gerenciar */
    overflow-x: clip !important;
    overflow-y: visible !important;
  }

  /* Fade-out elegante na borda direita do slider */
  .ss-pdp-rit__grid,
  .ss-pdp-ing__grid--huiles,
  .ss-pdp-sans__grid,
  .ss-pdp-mos__grid,
  .ss-phe__trust-grid {
    -webkit-mask-image: linear-gradient(
      to right,
      black 0%,
      black 88%,
      rgba(0, 0, 0, 0.6) 96%,
      transparent 100%
    );
    mask-image: linear-gradient(
      to right,
      black 0%,
      black 88%,
      rgba(0, 0, 0, 0.6) 96%,
      transparent 100%
    );
  }
}

/* ─── TABLET (741-1023px): peek 20% (não 50%) ─── */
@media (min-width: 741px) and (max-width: 1023px) {
  .ss-pdp-rit__card {
    flex: 0 0 calc(82% - 14px) !important;
    max-width: 460px !important;
    min-width: 320px !important;
  }
  .ss-pdp-ing__huile {
    flex: 0 0 calc(82% - 14px) !important;
    max-width: 460px !important;
    min-width: 320px !important;
  }
  .ss-pdp-mos__tile {
    flex: 0 0 calc(82% - 14px) !important;
    max-width: 500px !important;
    min-width: 320px !important;
    height: 300px !important;
  }
  .ss-pdp-mos__tile--featured { height: 340px !important; }

  /* Sans: 3 cards visíveis + peek pequeno */
  .ss-pdp-sans__card {
    flex: 0 0 calc(30% - 11px) !important;
    max-width: 200px !important;
    min-width: 140px !important;
  }

  /* Trust hero: peek menor */
  .ss-phe__trust-item {
    flex: 0 0 calc(78% - 12px) !important;
    max-width: 320px !important;
  }
}

/* ─── Tablet pequeno (600-740): peek 20% ─── */
@media (min-width: 600px) and (max-width: 740px) {
  .ss-pdp-rit__card,
  .ss-pdp-ing__huile,
  .ss-pdp-mos__tile {
    flex: 0 0 calc(82% - 12px) !important;
    max-width: 420px !important;
    min-width: 280px !important;
  }
  .ss-pdp-sans__card {
    flex: 0 0 calc(40% - 10px) !important;
    max-width: 180px !important;
    min-width: 140px !important;
  }
  .ss-phe__trust-item {
    flex: 0 0 calc(80% - 10px) !important;
    max-width: 280px !important;
  }
}

/* ─── Sans mobile/small: 2 cards + peek decente ─── */
@media (max-width: 599px) {
  .ss-pdp-sans__card {
    flex: 0 0 calc(45% - 6px) !important;
  }
}

/* ============================================
   54 · SLIDERS — formato carousel (card vaza pra fora)
   Remove mask-image (degrade). Container overflow visible
   permite o card "sair" da viewport naturalmente.
   Body/html mantém overflow-x hidden pra não criar scroll global.
   ============================================ */

/* ─── Remove fade-out do bloco 53 ─── */
@media (max-width: 1023px) {
  .ss-pdp-rit__grid,
  .ss-pdp-ing__grid--huiles,
  .ss-pdp-sans__grid,
  .ss-pdp-mos__grid,
  .ss-phe__trust-grid {
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }

  /* Container: permite card vazar pra direita visualmente */
  .ss-pdp-rit__container,
  .ss-pdp-ing__container,
  .ss-pdp-sans__container,
  .ss-pdp-mos__container {
    overflow-x: visible !important;
  }
}

/* ─── Slider real: overflow auto pra scroll touch ─── */
@media (max-width: 1023px) {
  .ss-pdp-rit__grid,
  .ss-pdp-ing__grid--huiles,
  .ss-pdp-sans__grid,
  .ss-pdp-mos__grid,
  .ss-phe__trust-grid {
    overflow-x: auto !important;
    overflow-y: visible !important;
    width: 100vw !important;
    max-width: 100vw !important;
  }
}

/* ─── Body/html garantem zero scroll global ─── */
@media (max-width: 1023px) {
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
}

/* ─── TABLET (741-1023px): card 80% + peek natural ─── */
@media (min-width: 741px) and (max-width: 1023px) {
  .ss-pdp-rit__card,
  .ss-pdp-ing__huile,
  .ss-pdp-mos__tile {
    flex: 0 0 80% !important;
    max-width: 460px !important;
    min-width: 320px !important;
  }
  .ss-pdp-sans__card {
    flex: 0 0 28% !important;
    max-width: 200px !important;
    min-width: 140px !important;
  }
  .ss-phe__trust-item {
    flex: 0 0 75% !important;
    max-width: 320px !important;
  }
}

/* ─── Tablet pequeno 600-740 ─── */
@media (min-width: 600px) and (max-width: 740px) {
  .ss-pdp-rit__card,
  .ss-pdp-ing__huile,
  .ss-pdp-mos__tile {
    flex: 0 0 78% !important;
    max-width: 420px !important;
    min-width: 280px !important;
  }
  .ss-pdp-sans__card {
    flex: 0 0 38% !important;
    max-width: 180px !important;
  }
  .ss-phe__trust-item {
    flex: 0 0 72% !important;
    max-width: 280px !important;
  }
}

/* ─── Mobile 376-599 ─── */
@media (min-width: 376px) and (max-width: 599px) {
  .ss-pdp-rit__card,
  .ss-pdp-ing__huile,
  .ss-pdp-mos__tile {
    flex: 0 0 78% !important;
  }
  .ss-pdp-sans__card {
    flex: 0 0 42% !important;
  }
  .ss-phe__trust-item {
    flex: 0 0 72% !important;
  }
}

/* ─── Small mobile ≤375 ─── */
@media (max-width: 375px) {
  .ss-pdp-rit__card,
  .ss-pdp-ing__huile,
  .ss-pdp-mos__tile {
    flex: 0 0 80% !important;
  }
  .ss-pdp-sans__card {
    flex: 0 0 44% !important;
  }
  .ss-phe__trust-item {
    flex: 0 0 75% !important;
  }
}

/* ─── 320px conservador ─── */
@media (max-width: 320px) {
  .ss-pdp-rit__card,
  .ss-pdp-ing__huile,
  .ss-pdp-mos__tile {
    flex: 0 0 82% !important;
  }
  .ss-pdp-sans__card {
    flex: 0 0 46% !important;
  }
  .ss-phe__trust-item {
    flex: 0 0 78% !important;
  }
}

/* ============================================
   55 · MOBILE — reduzir paddings/margins
   Diminui scroll vertical total. Padding vertical das sections
   de 80-96 pra 32-40. Margins internas reduzidas.
   ============================================ */

@media (max-width: 1023px) {

  /* ─── Padding vertical de TODAS as sections PDP ─── */
  .ss-pdp-desc,
  .ss-pdp-rit,
  .ss-pdp-prec,
  .ss-pdp-ing,
  .ss-pdp-sans,
  .ss-pdp-mos,
  .ss-pdp-cmp,
  .ss-pdp-aa,
  .ss-pdp-faq {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }

  /* Containers gap menores */
  .ss-pdp-aa__container { gap: 28px !important; }
  .ss-pdp-faq__container { gap: 20px !important; }

  /* ─── Headers margin-bottom reduzido ─── */
  .ss-pdp-rit__header,
  .ss-pdp-prec__header,
  .ss-pdp-ing__header,
  .ss-pdp-sans__header,
  .ss-pdp-mos__header,
  .ss-pdp-cmp__header,
  .ss-pdp-faq__header {
    margin-bottom: 28px !important;
    gap: 8px !important;
  }

  /* ─── Banner do rituel ─── */
  .ss-pdp-rit__banner { margin-bottom: 24px !important; }

  /* ─── Composé section title ─── */
  .ss-pdp-ing__section-title { margin-bottom: 12px !important; }

  /* ─── Grids margin-bottom ─── */
  .ss-pdp-ing__grid--huiles { margin-bottom: 20px !important; }
  .ss-pdp-ing__grid--complements { margin-bottom: 24px !important; }
  .ss-pdp-rit__grid { padding-bottom: 8px !important; }

  /* ─── Précautions ─── */
  .ss-pdp-prec__pill { margin-bottom: 16px !important; }
  .ss-pdp-prec__grid { gap: 16px !important; margin-bottom: 24px !important; }
  .ss-pdp-prec__cta { gap: 14px !important; padding: 28px 24px !important; }
  .ss-pdp-prec__disclaimer { margin-top: 20px !important; }

  /* ─── Comparatif ─── */
  .ss-pdp-cmp__card { margin-bottom: 20px !important; }
  .ss-pdp-cmp__head { padding-top: 20px !important; padding-bottom: 14px !important; }

  /* ─── FAQ ─── */
  .ss-pdp-faq__list { gap: 8px !important; }
  .ss-pdp-faq__footer { margin-top: 4px !important; }
  .ss-pdp-faq__tabs { padding: 4px !important; }

  /* ─── INCI box ─── */
  .ss-pdp-ing__inci { padding: 22px 22px !important; }

  /* ─── Description ─── */
  .ss-pdp-desc__text { gap: 14px !important; }

  /* ─── Description body interno ─── */
  .ss-pdp-desc__body { line-height: 22px !important; }

  /* ─── Hero PDP padding bottom ─── */
  .ss-pm { padding: 0 0 24px !important; }
  .ss-pm__info { gap: 12px !important; }

  /* ─── Hero extras (Koala, decision, trust, etc) ─── */
  .ss-phe__card,
  .ss-phe__incl,
  .ss-phe__pq,
  .ss-phe__dec,
  .ss-phe__trust { margin: 0 !important; }

  /* Banner cinema mais baixo */
  .ss-pdp-cine { height: 320px !important; }
}

/* ─── Mobile pequeno (≤640px) — paddings ainda menores ─── */
@media (max-width: 640px) {
  .ss-pdp-desc,
  .ss-pdp-rit,
  .ss-pdp-prec,
  .ss-pdp-ing,
  .ss-pdp-sans,
  .ss-pdp-mos,
  .ss-pdp-cmp,
  .ss-pdp-aa,
  .ss-pdp-faq {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }

  .ss-pdp-rit__header,
  .ss-pdp-prec__header,
  .ss-pdp-ing__header,
  .ss-pdp-sans__header,
  .ss-pdp-mos__header,
  .ss-pdp-cmp__header,
  .ss-pdp-faq__header {
    margin-bottom: 20px !important;
  }

  .ss-pdp-rit__banner { height: 200px !important; margin-bottom: 20px !important; }
  .ss-pdp-rit__grid { padding-bottom: 4px !important; }

  .ss-pdp-prec__grid { margin-bottom: 20px !important; }
  .ss-pdp-prec__cta { padding: 24px 20px !important; gap: 12px !important; }

  .ss-pdp-aa__container { gap: 20px !important; }

  .ss-pdp-cine { height: 280px !important; }
}

/* ─── 320px ainda mais compacto ─── */
@media (max-width: 320px) {
  .ss-pdp-desc,
  .ss-pdp-rit,
  .ss-pdp-prec,
  .ss-pdp-ing,
  .ss-pdp-sans,
  .ss-pdp-mos,
  .ss-pdp-cmp,
  .ss-pdp-aa,
  .ss-pdp-faq {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }

  .ss-pdp-rit__header,
  .ss-pdp-prec__header,
  .ss-pdp-ing__header,
  .ss-pdp-sans__header,
  .ss-pdp-mos__header,
  .ss-pdp-cmp__header,
  .ss-pdp-faq__header {
    margin-bottom: 16px !important;
  }

  .ss-pdp-rit__banner { height: 180px !important; }
  .ss-pdp-cine { height: 240px !important; }
}

/* ============================================
   56 · TRUST STRIP — slider 2 linhas stacked (mobile/tablet)
   Em vez de 1 linha com 6 cards horizontais, faz 2 linhas × 3 colunas.
   Scroll horizontal continua. Cards 1-2 row 1-2 da col 1, etc.
   ============================================ */

@media (max-width: 1023px) {
  .ss-phe__trust-grid {
    display: grid !important;
    grid-template-rows: 1fr 1fr !important;
    grid-auto-flow: column !important;
    grid-auto-columns: minmax(180px, 60%) !important;
    grid-template-columns: none !important;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 10px;
    margin: 0 -14px;
    padding: 4px 14px 12px;
    scroll-padding-left: 14px;
    scroll-behavior: smooth;
    width: 100vw;
    max-width: 100vw;
    box-sizing: border-box;
  }
  .ss-phe__trust-grid::-webkit-scrollbar { display: none; }

  /* Cada card ocupa 1 célula do grid (1 row x 1 col) */
  .ss-phe__trust-item {
    flex: none !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    scroll-snap-align: start;
    background: rgba(255, 255, 255, 0.10);
    padding: 10px 12px !important;
    border-radius: 8px;
    box-sizing: border-box;
  }

  /* Cada DUPLA de cards (col 1, col 2, col 3) alinha o scroll-snap na col 1 */
  .ss-phe__trust-item:nth-child(odd) {
    scroll-snap-align: start;
  }
  .ss-phe__trust-item:nth-child(even) {
    scroll-snap-align: none;
  }

  /* Spacer fim */
  .ss-phe__trust-grid::after {
    content: "";
    grid-row: 1 / -1;
    width: 8px;
  }
}

/* ─── Tablet médio (741-1023): colunas mais largas ─── */
@media (min-width: 741px) and (max-width: 1023px) {
  .ss-phe__trust-grid {
    grid-auto-columns: minmax(220px, 40%) !important;
  }
}

/* ─── Mobile small (≤375): colunas mais conservadoras ─── */
@media (max-width: 375px) {
  .ss-phe__trust-grid {
    grid-auto-columns: minmax(160px, 65%) !important;
  }
}

/* ─── 320px: colunas ainda menores ─── */
@media (max-width: 320px) {
  .ss-phe__trust-grid {
    grid-auto-columns: minmax(140px, 68%) !important;
  }
}

/* ============================================
   57 · TRUST STRIP MOBILE — bg transparente + cards próprios
   No mobile, container sem bg (transparente sobre crème da página).
   Cards individuais com bg sólido próprio + borda sutil.
   ============================================ */

@media (max-width: 1023px) {
  /* Container sem bg/padding extra */
  .ss-phe__trust {
    background: transparent !important;
    padding: 0 !important;
    color: var(--prec-fg, #241F22) !important;
  }

  /* Cards: bg crème suave + borda sutil */
  .ss-phe__trust-item {
    background: #F4EDDE !important;
    border: 1px solid rgba(122, 76, 50, 0.12) !important;
    color: #241F22 !important;
    padding: 12px 14px !important;
    gap: 10px;
    align-items: center;
  }

  /* Texto e ícone usam cor escura legível sobre crème */
  .ss-phe__trust-icon {
    color: #7A4C32 !important;
  }
  .ss-phe__trust-text {
    color: #241F22 !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
  }
}

/* ============================================
   58 · TRUST STRIP — 1 coluna inteira + peek da segunda
   Aumenta grid-auto-columns pra coluna 1 ocupar quase toda viewport.
   ============================================ */

/* Mobile 376-740: coluna inteira + peek 22% */
@media (min-width: 376px) and (max-width: 740px) {
  .ss-phe__trust-grid {
    grid-auto-columns: 78% !important;
  }
}

/* iPhone ≤375: coluna inteira + peek 20% */
@media (max-width: 375px) {
  .ss-phe__trust-grid {
    grid-auto-columns: 80% !important;
  }
}

/* Tablet 741-1023: 2 colunas inteiras + peek da 3ª */
@media (min-width: 741px) and (max-width: 1023px) {
  .ss-phe__trust-grid {
    grid-auto-columns: 45% !important;
  }
}

/* 320px: peek 18% */
@media (max-width: 320px) {
  .ss-phe__trust-grid {
    grid-auto-columns: 82% !important;
  }
}

/* ============================================
   59 · HERO HOME (slideshow) — fixes mobile
   - Centralizar botões "JE PRÉCOMMANDE / VOIR PRODUITS"
   - Esconder floating card "Formation OFFERTE"
   ============================================ */

@media (max-width: 740px) {
  /* ─── Centralizar botões do hero ─── */
  .slideshow .button-group,
  .slideshow .button-group__wrapper {
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
  .slideshow .button-group .button,
  .slideshow .button {
    margin-left: auto !important;
    margin-right: auto !important;
    display: inline-flex !important;
    justify-content: center;
    max-width: 100%;
  }

  /* Texto content do hero centralizado (caso ainda esteja em left) */
  .slideshow .hero__content,
  .slideshow .hero__content__wrapper,
  .slideshow .text-container {
    text-align: center !important;
  }
  .slideshow .hero__content > *,
  .slideshow .text-container > * {
    margin-left: auto;
    margin-right: auto;
  }

  /* Subheading + título + descrição centrados */
  .slideshow .heading.heading--small,
  .slideshow .heading.heading--large,
  .slideshow h3.heading,
  .slideshow .text-container > p {
    text-align: center !important;
  }

  /* Rating (★★★★★ 4,8/5 ...) centralizado */
  .slideshow .hero__description,
  .slideshow [class*="assurance"] {
    text-align: center !important;
  }

  /* ─── Esconder Formation OFFERTE floating card no mobile ─── */
  .enissati-floating-card {
    display: none !important;
  }
}

/* ============================================
   60 · HOME MOBILE POLISH — todas as sections custom
   Padding vertical reduzido, padding lateral consistente,
   tipografia centralizada, cards full-width onde faz sentido.
   ============================================ */

@media (max-width: 740px) {
  /* ─── Padding vertical reduzido em todas as sections custom da home ─── */
  .ss-bestsellers,
  .ss-eyebrow-strip,
  .ss-quiz,
  .ss-how-it-works,
  .ss-decision-tree,
  .ss-pack-signature,
  .ss-ingredient-ticker,
  .ss-video-stories,
  .ss-avant-apres,
  .ss-formation,
  .ss-rituel,
  .ss-guide-pdf {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }

  /* Padding lateral consistente */
  .ss-bestsellers__container,
  .ss-quiz__container,
  .ss-how-it-works__container,
  .ss-decision-tree__container,
  .ss-pack-signature__container,
  .ss-ingredient-ticker__container,
  .ss-video-stories__container,
  .ss-avant-apres__container,
  .ss-formation__container,
  .ss-rituel__container,
  .ss-guide-pdf__container {
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box;
  }

  /* Containers nunca passar viewport */
  .ss-bestsellers,
  .ss-quiz,
  .ss-how-it-works,
  .ss-decision-tree,
  .ss-pack-signature,
  .ss-ingredient-ticker,
  .ss-video-stories,
  .ss-avant-apres,
  .ss-formation,
  .ss-rituel,
  .ss-guide-pdf {
    max-width: 100vw !important;
    overflow-x: hidden;
    box-sizing: border-box;
  }

  /* ─── Headers centralizados em todas as sections ─── */
  .ss-bestsellers__eyebrow,
  .ss-bestsellers__title,
  .ss-quiz__eyebrow,
  .ss-quiz__title,
  .ss-how-it-works__eyebrow,
  .ss-how-it-works__title,
  .ss-how-it-works__subtitle,
  .ss-decision-tree__title,
  .ss-pack-signature__title,
  .ss-avant-apres__title,
  .ss-formation__title,
  .ss-rituel__title,
  .ss-guide-pdf__title {
    text-align: center !important;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    overflow-wrap: break-word;
  }

  /* ─── Bestsellers grid mobile: 2-col stack (Victor: sempre 2-col mobile) ─── */
  .ss-bestsellers__grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .ss-bs-card {
    min-width: 0 !important;
  }
  .ss-bs-card__media img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
  }
  /* Tipografia menor pra caber bem em 2 cols */
  .ss-bs-card__body { padding: 14px 12px !important; gap: 4px !important; }
  .ss-bs-card__title { font-size: 16px !important; line-height: 1.2 !important; }
  .ss-bs-card__price-now { font-size: 17px !important; }
  .ss-bs-card__price-was { font-size: 12px !important; }
  .ss-bs-card__label { font-size: 9px !important; letter-spacing: 1.5px !important; }
  .ss-bs-card__discount { font-size: 10px !important; letter-spacing: 1.5px !important; }

  /* ─── How it works mobile: stack steps ─── */
  .ss-how-it-works__container .steps,
  .ss-how-it-works__steps {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* ─── Decision tree mobile: 1-col stack ─── */
  .ss-decision-tree__options,
  .ss-decision-tree__grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* ─── Pack signature: stack ─── */
  .ss-pack-signature__container > div,
  .ss-pack-signature__grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* ─── Avant/Après stack panels ─── */
  .ss-avant-apres__container .panels,
  .ss-avant-apres__grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* ─── Formation card mobile ─── */
  .ss-formation__card,
  .ss-formation__container {
    padding: 24px 16px !important;
    box-sizing: border-box;
  }

  /* ─── Rituel mobile (cards artigo) ─── */
  .ss-rituel__cards,
  .ss-rituel__grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* ─── Guide PDF stack ─── */
  .ss-guide-pdf__container {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  /* ─── Body/html garantir overflow hidden ─── */
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  /* ─── Eyebrow strip não vazar ─── */
  .ss-eyebrow-strip {
    text-align: center;
    padding: 12px 16px !important;
    font-size: 11px !important;
    letter-spacing: 1.5px !important;
  }

  /* ─── Ingredient ticker mantém scroll horizontal (intencional) ─── */
  /* Sem fix — já é scroll automático */

  /* ─── Video stories mantém scroll horizontal ─── */
  /* Sem fix */
}

/* ─── 375px refinements ─── */
@media (max-width: 375px) {
  .ss-bestsellers,
  .ss-quiz,
  .ss-how-it-works,
  .ss-decision-tree,
  .ss-pack-signature,
  .ss-video-stories,
  .ss-avant-apres,
  .ss-formation,
  .ss-rituel,
  .ss-guide-pdf {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }
  .ss-bestsellers__container,
  .ss-quiz__container,
  .ss-how-it-works__container,
  .ss-decision-tree__container,
  .ss-pack-signature__container,
  .ss-video-stories__container,
  .ss-avant-apres__container,
  .ss-formation__container,
  .ss-rituel__container,
  .ss-guide-pdf__container {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}

/* ─── 320px conservador ─── */
@media (max-width: 320px) {
  .ss-bestsellers__container,
  .ss-quiz__container,
  .ss-how-it-works__container,
  .ss-decision-tree__container,
  .ss-pack-signature__container,
  .ss-video-stories__container,
  .ss-avant-apres__container,
  .ss-formation__container,
  .ss-rituel__container,
  .ss-guide-pdf__container {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/* ============================================
   61 · DECISION TREE — slider horizontal mobile
   Cards Hydra Complex / Nigella viram carousel com peek.
   ============================================ */

@media (max-width: 1023px) {
  /* Container parent permite card vazar */
  .ss-decision-tree {
    overflow-x: clip !important;
  }

  /* Cards viram slider horizontal */
  .ss-dt__cards {
    display: flex !important;
    flex-direction: row !important;
    grid-template-columns: none !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 12px !important;
    margin: 0 -20px !important;
    padding: 4px 20px 12px !important;
    scroll-padding-left: 20px !important;
    scroll-behavior: smooth;
    width: 100vw !important;
    max-width: 100vw !important;
    box-sizing: border-box;
  }
  .ss-dt__cards::-webkit-scrollbar { display: none; }

  /* Spacer fim */
  .ss-dt__cards::after {
    content: "";
    flex: 0 0 8px;
  }

  /* Card individual */
  .ss-dt-card {
    flex: 0 0 78% !important;
    max-width: 360px !important;
    min-width: 260px !important;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    width: auto !important;
  }
}

/* Tablet 741-1023: 2 cards + peek */
@media (min-width: 741px) and (max-width: 1023px) {
  .ss-dt-card {
    flex: 0 0 calc(50% - 6px) !important;
    max-width: 460px !important;
    min-width: 280px !important;
  }
}

/* iPhone ≤375 */
@media (max-width: 375px) {
  .ss-dt__cards {
    margin: 0 -16px !important;
    padding: 4px 16px 12px !important;
    scroll-padding-left: 16px !important;
  }
  .ss-dt-card {
    flex: 0 0 82% !important;
  }
}

/* 320px */
@media (max-width: 320px) {
  .ss-dt__cards {
    margin: 0 -12px !important;
    padding: 4px 12px 12px !important;
    scroll-padding-left: 12px !important;
  }
  .ss-dt-card {
    flex: 0 0 84% !important;
  }
}

/* ============================================
   62 · VIDEO STORIES — vídeo inline autoplay
   Garante video tag herda mesmo style do .ss-vs__cover
   ============================================ */
.ss-vs__video {
  pointer-events: none; /* não atrapalha o button do parent */
  background: #000;
}
/* Esconde controles nativos do video (caso algum browser ative) */
.ss-vs__video::-webkit-media-controls { display: none !important; }
.ss-vs__video::-webkit-media-controls-enclosure { display: none !important; }

/* ============================================
   63 · HEADER MOBILE — fix retângulo fantasma quando esconde
   Bug: header.is-hidden tinha translateY -100% + opacity 0 mas
   backdrop-filter blur continuava ativo no espaço original,
   criando uma área retangular borrada/transparente.
   ============================================ */
#shopify-section-header.is-hidden {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
  box-shadow: none !important;
}

/* ============================================
   64 · HERO HOME — desktop = alinhado esquerda + botões padronizados
                    mobile = tudo centralizado (stack vertical)
   Substitui o bloco anterior que forçava center em todos viewports.
   ============================================ */

/* ─── Esconder Formation OFFERTE floating card em TODOS viewports ─── */
.enissati-floating-card {
  display: none !important;
}

/* ─── DESKTOP (≥741px): conteúdo alinhado à esquerda (default Krunkers) ─── */
@media (min-width: 741px) {
  /* Botões padronizados: mesma altura, padding, min-width */
  .shopify-section--slideshow .slideshow .button-group__wrapper,
  .slideshow .button-group__wrapper {
    display: flex !important;
    flex-direction: row !important;
    gap: 12px !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    flex-wrap: wrap;
  }
  .slideshow .button-group__wrapper .button,
  .slideshow .button {
    min-width: 220px !important;
    min-height: 52px !important;
    padding: 14px 28px !important;
    font-size: 13px !important;
    letter-spacing: 1.5px !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    box-sizing: border-box;
  }

  /* Rating frase: reduzir tamanho e gap pro topo (Victor: quebrava em 2 linhas) */
  .slideshow .text-container > *:last-child {
    margin-top: 18px !important;
    font-size: 12px !important;
    max-width: none;
  }
}

/* ─── MOBILE (≤740px): centralização aplicada em outras regras já existentes ─── */
@media (max-width: 740px) {
  .slideshow .button-group,
  .slideshow .button-group__wrapper {
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    width: 100%;
  }
  .slideshow .hero__content,
  .slideshow .text-container {
    text-align: center !important;
  }
}

/* ============================================
   FINAL OVERRIDE — só PDP gallery (setas + thumbs escondidas no mobile).
   Header ajustes revertidos — voltam a regras anteriores estáveis.
   ============================================ */
@media (max-width: 740px) {
  .ss-pm__nav,
  .ss-pm__nav--prev,
  .ss-pm__nav--next,
  .ss-pm__thumbs,
  .ss-pm--thumbs-left .ss-pm__thumbs,
  .ss-pm--thumbs-below .ss-pm__thumbs,
  .ss-pm--thumbs-left .ss-pm__thumb,
  .ss-pm--thumbs-below .ss-pm__thumb {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* Hero home mobile: zera padding-bottom do content (texto + CTAs) pra não
     somar com padding-top da próxima section (eyebrow strip). */
  .slideshow .slideshow__text-wrapper,
  .slideshow .slideshow__text-wrapper.vertical-breather { padding-bottom: 0 !important; }
  .slideshow .content-box,
  .slideshow .content-box.text-container { padding-bottom: 0 !important; }
}

/* ============================================================
   AUDITORIA SITE 2026 — contraste do teal usado como TEXTO/PREÇO
   Teal #00acb1 sobre fundo claro ≈ 2.6:1 (abaixo de AA 4.5). Escurece o
   teal só onde ele é TEXTO (preço destacado) — não toca em fundos/botões.
   Afeta cards legados (featured-collections), busca e carrinho do Krunkers.
   #00767a sobre branco ≈ 5.1:1 · sobre crème ≈ 4.8:1 → AA ok.
   ============================================================ */
.price--highlight,
.price-list .price--highlight {
  color: #00767a !important;
}

/* ============================================================
   AUDITORIA SITE 2026 — RESTYLE DNA Enissati (páginas de conteúdo/blog)
   Escopo: sections LEGADAS do Krunkers, que só aparecem em páginas de
   conteúdo, blog e artigo (home/PDP/coleção usam ss-* e não são afetadas).
   Aplica tipografia Tenor Sans/Outfit, paleta crème/dark, molduras 16px,
   ritmo de espaçamento e formulário/cards no padrão da marca.
   ============================================================ */
:root {
  --ss-ink: #241F21;
  --ss-cream: #F5F2E6;
  --ss-brown: #7A4C32;
  --ss-gold: #CAA46D;
  --ss-line: #EBE3D2;
}

/* ---- Tipografia das sections editoriais legadas ---- */
.shopify-section--image-with-text .heading,
.shopify-section--image-with-text-overlay .heading,
.shopify-section--rich-text .heading,
.shopify-section--main-page .heading,
.shopify-section--main-page h1,
.shopify-section--main-blog .heading,
.shopify-section--main-article .heading,
.shopify-section--colum-text-slider .heading,
.shopify-section--featured-collections .heading,
.article-template__title,
.blog-articles__title {
  font-family: 'Tenor Sans', var(--heading-font-family);
  font-weight: 400;
  color: var(--ss-ink);
  letter-spacing: 0;
}

.shopify-section--image-with-text .rte,
.shopify-section--image-with-text .rte p,
.shopify-section--rich-text .rte,
.shopify-section--rich-text .rte p,
.shopify-section--main-page .rte,
.shopify-section--main-page .rte p,
.article-template__content .rte,
.article-template__content .rte p {
  font-family: 'Outfit', var(--text-font-family);
  font-weight: 300;
  line-height: 1.75;
  color: var(--ss-ink);
}

/* ---- Molduras de imagem da marca ---- */
.shopify-section--image-with-text .image-with-text__image-wrapper,
.shopify-section--image-with-text-overlay .image-with-text__image-wrapper,
.shopify-section--rich-text .rich-text img,
.shopify-section--colum-text-slider img,
.article-template__hero-container,
.article-card__image-wrapper,
.blog-articles__article-image-wrapper {
  border-radius: 16px;
  overflow: hidden;
}

/* ---- Botões legados no estilo da marca (mantém teal de fundo) ---- */
.shopify-section--image-with-text .button,
.shopify-section--rich-text .button,
.shopify-section--main-page .button,
.shopify-section--main-article .button {
  border-radius: 999px;
  font-family: 'Outfit', var(--text-font-family);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-size: 13px;
}

/* ============================================================
   CONTATO — formulário no padrão da marca (crème, card centrado)
   ============================================================ */
.template-page .contact-form,
.shopify-section--contact-form {
  max-width: 680px;
  margin: 0 auto;
}
.template-page .contact .field__input,
.template-page .contact textarea,
.contact-form .field__input,
.contact-form textarea {
  border: 1px solid var(--ss-line) !important;
  border-radius: 12px !important;
  background: #fff !important;
  font-family: 'Outfit', var(--text-font-family) !important;
  color: var(--ss-ink) !important;
}
.template-page .contact .field__input:focus,
.contact-form .field__input:focus,
.contact-form textarea:focus {
  border-color: var(--ss-gold) !important;
  box-shadow: 0 0 0 3px rgba(202,164,109,.18) !important;
}

/* ============================================================
   BLOG — listagem de artigos no padrão da marca
   ============================================================ */
.shopify-section--main-blog .article-card,
.shopify-section--main-blog .blog-articles__article {
  background: #fff;
  border: 1px solid var(--ss-line);
  border-radius: 16px;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}
.shopify-section--main-blog .article-card:hover,
.shopify-section--main-blog .blog-articles__article:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(36,31,33,.08);
}
.shopify-section--main-blog .article-card__title,
.shopify-section--main-blog .article-card .h3 {
  font-family: 'Tenor Sans', var(--heading-font-family);
  font-weight: 400;
  color: var(--ss-ink);
}

/* ============================================================
   ARTIGO — leitura confortável + acentos da marca
   ============================================================ */
.article-template__content,
.shopify-section--main-article .rte {
  max-width: 740px;
  margin-left: auto;
  margin-right: auto;
}
.article-template__content .rte h2,
.article-template__content .rte h3 {
  font-family: 'Tenor Sans', var(--heading-font-family);
  font-weight: 400;
  color: var(--ss-ink);
  margin-top: 1.6em;
}
.article-template__content .rte a {
  color: var(--ss-brown);
  text-underline-offset: 3px;
}
.article-template__content .rte a:hover { color: var(--ss-gold); }

/* ============================================================
   PDP · Sans → EYEBROW ANIMADO (marquee contínuo)
   Substitui o grid de cards por um strip horizontal que passa os
   itens "Sans …". Pausa no hover e respeita prefers-reduced-motion.
   ============================================================ */
.ss-pdp-sans--marquee {
  background: var(--sans-bg, #F5F2E6);
  overflow: hidden;
}
.ss-pdp-sans__marquee {
  width: 100%;
  overflow: hidden;
  padding: 16px 0;
  border-top: 1px solid rgba(202, 164, 109, .4);
  border-bottom: 1px solid rgba(202, 164, 109, .4);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.ss-pdp-sans__track {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  will-change: transform;
  animation: ss-pdp-sans-scroll var(--sans-speed, 32s) linear infinite;
}
@keyframes ss-pdp-sans-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.ss-pdp-sans__item {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 0 26px;
}
.ss-pdp-sans__item-icon {
  color: var(--sans-gold, #CAA46D);
  font-size: 17px;
  line-height: 1;
}
.ss-pdp-sans__item-label {
  font-family: 'Tenor Sans', var(--heading-font-family);
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 13px;
  color: var(--sans-fg, #241F22);
  white-space: nowrap;
}
.ss-pdp-sans__sep {
  color: var(--sans-gold, #CAA46D);
  font-size: 8px;
  opacity: .65;
}
.ss-pdp-sans--marquee:hover .ss-pdp-sans__track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .ss-pdp-sans__track { animation: none; transform: none; }
  .ss-pdp-sans__marquee { overflow-x: auto; }
}
@media (max-width: 740px) {
  .ss-pdp-sans__item { padding: 0 18px; }
  .ss-pdp-sans__item-label { font-size: 12px; letter-spacing: 2.5px; }
}

/* ============================================================
   Koala gift card — sem flash de posição
   O card fica invisível enquanto o Koala o injeta/reposiciona;
   o pin (pdp-main.js) adiciona .ss-koala-ready depois de fixá-lo
   logo abaixo dos botões → fade-in só na posição final.
   ============================================================ */
.ss-pm__info koala-gifts-reward-showcase {
  opacity: 0;
  transition: opacity .3s ease;
}
.ss-pm__info koala-gifts-reward-showcase.ss-koala-ready {
  opacity: 1;
}

/* ════════════════════════════════════════════
   07.5 MOSAÏQUE — MOBILE : mosaïque 1 + 2
   1 grande image en haut (pleine largeur) + 2 plus petites côte à côte.
   Remplace le carrousel horizontal sur mobile. Uniquement ≤640px —
   le desktop garde la mosaïque 3 colonnes. (bloco final = vence a cascata)
   ════════════════════════════════════════════ */
@media (max-width: 640px) {
  .ss-pdp-mos__grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
  }
  .ss-pdp-mos__grid::after,
  .ss-pdp-mos__grid::before {
    display: none !important;
    content: none !important;
  }
  /* reset dos restos do carrossel horizontal em qualquer tile */
  .ss-pdp-mos__grid > .ss-pdp-mos__tile {
    flex: initial !important;
    max-width: none !important;
    min-width: 0 !important;
    scroll-snap-align: none !important;
  }
  /* 1ª imagem = grande, largura toda */
  .ss-pdp-mos__grid > .ss-pdp-mos__tile:first-child {
    grid-column: 1 / -1 !important;
    height: 250px !important;
  }
  /* 2ª e 3ª = menores lado a lado */
  .ss-pdp-mos__grid > .ss-pdp-mos__tile:nth-child(2),
  .ss-pdp-mos__grid > .ss-pdp-mos__tile:nth-child(3),
  .ss-pdp-mos__grid > .ss-pdp-mos__tile--featured {
    height: 175px !important;
  }
}

/* ════════════════════════════════════════════
   PDP · PAIEMENT — Klarna badge + icônes de paiement
   Klarna: widget oficial (On-Site Messaging) sob o preço.
   Ícones: shop.enabled_payment_types (conectado ao admin).
   ════════════════════════════════════════════ */
.ss-pm__klarna {
  margin: 2px 0 0;
  min-height: 0; /* o widget define a própria altura quando carrega */
}
.ss-pm__klarna klarna-placement {
  display: block;
}

.ss-pm__payments {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(36, 31, 33, 0.08);
}
.ss-pm__payments-label {
  font-family: var(--text-font-family);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgb(122, 76, 50);
  opacity: 0.85;
}
.ss-pm__payments-icons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.ss-pm__payment-icon {
  width: 38px;
  height: 24px;
  border-radius: 3px;
  opacity: 0.9;
}
@media (max-width: 740px) {
  .ss-pm__payment-icon { width: 34px; height: 22px; }
}

/* Bestsellers — badge ÉPUISÉ (produto esgotado no card da home) */
.ss-bs-card__discount--soldout {
  color: rgb(155, 155, 155);
}