/* =========================================================
   SorvFood's — Site e Catálogo · CSS das telas do plugin
   (landing, catálogo /produtos/, /categoria/, /marca/ e página de produto)

   Visual da página final aprovada (landing/final/index.html): direção
   "Conversão direta" + enxertos do júri.
   Cores do logo: ouro #FFC20E, laranja #FF7A00, chocolate #5A2D12 → #6B3A1E, creme.
   Títulos e etiquetas: Barlow Condensed (negrito + leve). Texto: Barlow.
   Letra manuscrita (só no bilhete do exemplo de pedido): Caveat.

   Regras da casa:
   - TODAS as classes, variáveis e animações têm o prefixo sf- (os ganchos do JS
     são atributos data-sf-*).
   - As regras de elemento (img, a, ul, button...) valem só dentro de .sf-pagina,
     para não mexer na barra de admin (#wpadminbar) nem no widget de
     acessibilidade (Ally), que ficam fora dela.
   - Fontes dentro do plugin (sem Google Fonts), com font-display: swap.
     A Barlow Condensed 700 tem preload no <head> (class-assets.php).
   ========================================================= */

/* ---------- Fontes (latin, woff2, OFL: assets/fonts/OFL.txt) ---------- */
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/barlow-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/barlow-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/barlow-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/barlow-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/barlow-condensed-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/barlow-condensed-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Caveat";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/caveat-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --sf-creme: #FFF7EA;
  --sf-creme-2: #FBEBD0;
  --sf-papel: #FFFCF6;
  --sf-linha: #EBDAC0;
  --sf-linha-forte: #DCC29E;
  --sf-ouro: #FFC20E;
  --sf-ouro-claro: #FFCD3A;
  --sf-ouro-borda: #B98500;
  --sf-laranja: #FF7A00;
  --sf-laranja-texto: #A04B05;
  --sf-choco: #5A2D12;
  --sf-choco-2: #6B3A1E;
  --sf-choco-escuro: #3F1E0B;
  --sf-choco-fundo: #4A230D;
  --sf-texto: #3F2618;
  --sf-texto-suave: #6E513C;
  --sf-texto-claro: #FFF2DC;
  --sf-texto-ouro: #4A2C16;
  --sf-verde-wa: #25D366;
  --sf-erro: #B23A0B;
  --sf-f-titulo: "Barlow Condensed","Arial Narrow","Roboto Condensed",system-ui,sans-serif;
  --sf-f-texto: "Barlow",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --sf-f-mao: "Caveat","Segoe Print","Bradley Hand",cursive;
  --sf-topo-h: 76px;
  --sf-calda-h: clamp(56px, 7.64vw, 150px);
  --sf-anel: var(--sf-laranja);
}

@media (max-width:767px) {
  :root {
    --sf-topo-h: 64px;
  }
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--sf-topo-h) + 12px);
}

/* Com a barra de admin (logado), o topo fixo desce junto. */
html:has(> body.admin-bar) {
  scroll-padding-top: calc(var(--sf-topo-h) + 12px + var(--wp-admin--admin-bar--height, 32px));
}

@media (prefers-reduced-motion:no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

.sf-corpo {
  margin: 0;
  background: var(--sf-creme);
}

.sf-pagina {
  font: 400 17px/1.55 var(--sf-f-texto);
  color: var(--sf-texto);
  background: var(--sf-creme);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Regras de elemento só dentro de .sf-pagina. O :where() deixa a especificidade igual à da
   regra de elemento pura (0,0,1), para as classes dos componentes continuarem valendo por cima. */
:where(.sf-pagina),
:where(.sf-pagina) *,
:where(.sf-pagina) *::before,
:where(.sf-pagina) *::after {
  box-sizing: border-box;
}

:where(.sf-pagina) img,
:where(.sf-pagina) svg {
  display: block;
  max-width: 100%;
}

:where(.sf-pagina) img {
  height: auto;
}

:where(.sf-pagina) a {
  color: inherit;
  text-underline-offset: 3px;
}

:where(.sf-pagina) h1,
:where(.sf-pagina) h2,
:where(.sf-pagina) h3,
:where(.sf-pagina) h4,
:where(.sf-pagina) p,
:where(.sf-pagina) figure,
:where(.sf-pagina) blockquote,
:where(.sf-pagina) dl,
:where(.sf-pagina) dd {
  margin: 0;
}

:where(.sf-pagina) ul,
:where(.sf-pagina) ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

:where(.sf-pagina) button,
:where(.sf-pagina) input,
:where(.sf-pagina) textarea {
  font: inherit;
  color: inherit;
}

:where(.sf-pagina) button {
  cursor: pointer;
}

:where(.sf-pagina) :focus-visible {
  outline: 3px solid var(--sf-anel);
  outline-offset: 3px;
  border-radius: 8px;
}

:where(.sf-pagina) [hidden] {
  display: none !important;
}

.sf-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.sf-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.sf-pular {
  position: absolute;
  left: 16px;
  top: -80px;
  z-index: 100;
  background: var(--sf-choco);
  color: #fff;
  padding: 12px 18px;
  border-radius: 12px;
  font-weight: 600;
  text-decoration: none;
}

.sf-pular:focus {
  top: 12px;
}

.sf-wrap {
  width: min(1200px, calc(100% - 32px));
  margin-inline: auto;
}

@media (min-width:768px) {
  .sf-wrap {
    width: min(1200px, calc(100% - 64px));
  }
}

.sf-ico {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sf-ico-f {
  width: 20px;
  height: 20px;
  flex: none;
  fill: currentColor;
}

.sf-nw {
  white-space: nowrap;
}

.sf-so-cel {
  display: none;
}

@media (max-width:767px) {
  .sf-so-desk {
    display: none !important;
  }
  .sf-so-cel {
    display: revert;
  }
}

/* ---------- Tipografia ---------- */
.sf-sobre {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 700 15px/1.2 var(--sf-f-titulo);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sf-laranja-texto);
}

.sf-sobre::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 20%, transparent);
}

/* título de seção: primeira parte em negrito, segunda em peso leve */
.sf-t2 {
  margin-top: 12px;
  font: 700 clamp(36px, 2.1vw + 22px, 56px)/1 var(--sf-f-titulo);
  letter-spacing: -.004em;
  color: var(--sf-choco);
  text-wrap: balance;
}

.sf-t2 .sf-leve {
  display: block;
  font-weight: 400;
}

.sf-lead {
  margin-top: 16px;
  font-size: clamp(16px, .35vw + 15px, 19px);
  line-height: 1.55;
  color: var(--sf-texto-suave);
  max-width: 36em;
  text-wrap: pretty;
}

.sf-cab {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px 56px;
}

.sf-cab .sf-lead {
  margin-top: 0;
  max-width: 27em;
}

/* ---------- Botões ---------- */
.sf-btn {
  --sf-h: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--sf-h);
  padding: 0 22px;
  border: 0;
  border-radius: 14px;
  font: 700 16.5px/1.15 var(--sf-f-texto);
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease;
}

.sf-btn-ouro {
  background: var(--sf-ouro);
  color: var(--sf-choco-escuro);
  box-shadow: 0 4px 0 var(--sf-ouro-borda), 0 14px 26px -14px rgba(40,16,4,.55);
}

.sf-btn-ouro:hover {
  background: var(--sf-ouro-claro);
  transform: translateY(-2px);
  box-shadow: 0 6px 0 var(--sf-ouro-borda), 0 18px 30px -14px rgba(40,16,4,.55);
}

.sf-btn-ouro:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--sf-ouro-borda);
}

.sf-btn-xl {
  --sf-h: 62px;
  padding: 0 30px;
  font-size: 18.5px;
  border-radius: 16px;
}

.sf-btn-xl .sf-ico-f {
  width: 24px;
  height: 24px;
}

.sf-btn-choco {
  background: var(--sf-choco);
  color: #FFF4E2;
}

.sf-btn-choco:hover {
  background: var(--sf-choco-2);
}

.sf-btn-choco .sf-ico-f {
  color: var(--sf-verde-wa);
}

.sf-btn-linha {
  background: transparent;
  color: var(--sf-choco);
  box-shadow: inset 0 0 0 2px var(--sf-linha-forte);
}

.sf-btn-linha:hover {
  box-shadow: inset 0 0 0 2px var(--sf-choco);
}

/* ---------- Faixa fina (computador) ---------- */
.sf-faixa {
  display: none;
  background: var(--sf-choco-escuro);
  color: rgba(255,242,220,.86);
  font-size: 14px;
}

@media (min-width:1100px) {
  .sf-faixa {
    display: block;
  }
}

.sf-faixa .sf-wrap {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding-block: 8px;
}

.sf-faixa ul {
  display: flex;
  align-items: center;
  gap: 26px;
}

.sf-faixa li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sf-faixa .sf-ico {
  width: 16px;
  height: 16px;
  color: var(--sf-ouro);
}

.sf-faixa a {
  text-decoration: none;
}

.sf-faixa a:hover {
  color: var(--sf-ouro);
  text-decoration: underline;
}

/* ---------- Topo ---------- */
.sf-topo {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255,247,234,.95);
  -webkit-backdrop-filter: saturate(1.3) blur(12px);
  backdrop-filter: saturate(1.3) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s, box-shadow .2s;
}

.sf-topo.sf-rolou {
  border-color: var(--sf-linha);
  box-shadow: 0 10px 28px -20px rgba(90,45,18,.5);
}

.sf-topo-in {
  display: flex;
  align-items: center;
  gap: 28px;
  height: var(--sf-topo-h);
}

.sf-logo {
  flex: none;
  display: block;
  border-radius: 8px;
}

.sf-logo img {
  height: 46px;
  width: auto;
}

.sf-nav {
  display: flex;
  gap: 26px;
  margin-left: auto;
}

.sf-nav a {
  position: relative;
  padding: 10px 0;
  font: 500 16px/1 var(--sf-f-texto);
  color: var(--sf-choco);
  text-decoration: none;
  white-space: nowrap;
}

.sf-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 3px;
  border-radius: 3px;
  background: var(--sf-ouro);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s ease;
}

.sf-nav a:hover::after,
.sf-nav a[aria-current="true"]::after,
.sf-nav a[aria-current="page"]::after {
  transform: scaleX(1);
}

.sf-topo-cta {
  display: flex;
  align-items: center;
  gap: 20px;
}

.sf-topo-zap {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 600 15.5px/1 var(--sf-f-texto);
  color: var(--sf-choco);
  text-decoration: none;
  white-space: nowrap;
}

.sf-topo-zap .sf-ico-f {
  color: #1A9E4B;
  width: 18px;
  height: 18px;
}

.sf-topo-cta .sf-btn {
  --sf-h: 46px;
  padding: 0 20px;
  font-size: 15.5px;
  box-shadow: 0 3px 0 var(--sf-ouro-borda);
}

.sf-topo-wa {
  display: none;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-left: auto;
  border-radius: 50%;
  background: var(--sf-choco);
  color: var(--sf-verde-wa);
  box-shadow: 0 3px 0 var(--sf-choco-escuro);
}

.sf-topo-wa .sf-ico-f {
  width: 22px;
  height: 22px;
}

.sf-menu-btn {
  display: none;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 14px;
  border: 1.5px solid var(--sf-linha-forte);
  border-radius: 12px;
  background: #fff;
  font: 600 15.5px/1 var(--sf-f-texto);
  color: var(--sf-choco);
}

.sf-menu-painel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--sf-creme);
  border-bottom: 1px solid var(--sf-linha);
  box-shadow: 0 26px 40px -24px rgba(90,45,18,.55);
  padding: 6px 0 22px;
}

.sf-menu-painel a.sf-m-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 2px;
  border-bottom: 1px solid var(--sf-linha);
  font: 700 22px/1.2 var(--sf-f-titulo);
  color: var(--sf-choco);
  text-decoration: none;
}

.sf-menu-painel .sf-btn {
  width: 100%;
  margin-top: 18px;
}

.sf-menu-painel p {
  margin-top: 12px;
  font-size: 14px;
  color: var(--sf-texto-suave);
  text-align: center;
}

@media (max-width:1140px) {
  .sf-topo-zap {
    display: none;
  }
}

@media (max-width:980px) {
  .sf-nav,
  .sf-topo-cta {
    display: none;
  }
  .sf-menu-btn {
    display: inline-flex;
  }
  .sf-topo-wa {
    display: grid;
  }
  .sf-topo-in {
    gap: 10px;
  }
}

@media (max-width:767px) {
  .sf-logo img {
    height: 36px;
  }
}

/* ---------- Hero ---------- */
.sf-hero {
  --sf-anel: var(--sf-ouro);
  position: relative;
  overflow: clip;
  color: var(--sf-texto-claro);
  background: radial-gradient(780px 520px at 86% 6%, rgba(255,194,14,.16), transparent 64%), radial-gradient(520px 420px at 0% 0%, rgba(255,122,0,.10), transparent 60%), linear-gradient(180deg, #5C2E13 0%, var(--sf-choco-fundo) 100%);
  padding: 58px 0 38px;
}

.sf-hero-grid {
  display: grid;
  grid-template-columns: minmax(0,1.12fr) minmax(0,.88fr);
  gap: 56px;
  align-items: center;
}

.sf-hero .sf-sobre {
  color: var(--sf-ouro);
}

.sf-h1 {
  margin-top: 18px;
  font: 700 clamp(42px, 3.3vw + 18px, 74px)/.98 var(--sf-f-titulo);
  letter-spacing: -.006em;
  color: #FFF4E2;
  text-wrap: balance;
}

.sf-h1 em {
  display: block;
  width: fit-content;
  font-style: normal;
  color: var(--sf-ouro);
  background: linear-gradient(95deg, #FFC20E 0%, #FFB21A 45%, #FF8A0A 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.sf-hero-sub {
  margin-top: 20px;
  max-width: 31em;
  font-size: clamp(17px, .45vw + 15px, 20px);
  line-height: 1.5;
  color: rgba(255,242,220,.88);
  text-wrap: pretty;
}

.sf-hero-acoes {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
}

.sf-link-seta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 4px;
  border-bottom: 2px solid rgba(255,194,14,.55);
  font: 600 16.5px/1 var(--sf-f-texto);
  color: #FFF2DC;
  text-decoration: none;
}

.sf-link-seta:hover {
  border-color: var(--sf-ouro);
}

.sf-hero-nota {
  margin-top: 18px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 34em;
  font-size: 15.5px;
  line-height: 1.45;
  color: rgba(255,242,220,.86);
}

.sf-hero-nota .sf-ico {
  width: 20px;
  height: 20px;
  margin-top: 1px;
  color: var(--sf-ouro);
}

.sf-hero-nota b {
  font-weight: 600;
  color: #FFF4E2;
}

.sf-hero-hora {
  margin-top: 6px;
  padding-left: 30px;
  font-size: 14px;
  color: rgba(255,242,220,.7);
}

.sf-hero-provas {
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid rgba(255,242,220,.16);
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: start;
}

.sf-prova-item {
  padding: 0 30px;
  border-left: 1px solid rgba(255,242,220,.16);
}

.sf-prova-item:first-child {
  padding-left: 0;
  border-left: 0;
}

.sf-prova-item b {
  display: block;
  font: 700 32px/1 var(--sf-f-titulo);
  letter-spacing: .005em;
  color: var(--sf-ouro);
}

.sf-prova-item span {
  display: block;
  margin-top: 7px;
  font-size: 14px;
  line-height: 1.35;
  color: rgba(255,242,220,.76);
}

.sf-vitrine {
  position: relative;
}

.sf-vitrine-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.sf-tile {
  --sf-y: 0px;
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 10px 10px 15px;
  border-radius: 22px;
  background: #fff;
  color: var(--sf-choco);
  text-decoration: none;
  box-shadow: 0 22px 44px -24px rgba(0,0,0,.7);
  transform: translateY(var(--sf-y));
  transition: transform .2s ease, box-shadow .2s ease;
}

.sf-tile:nth-child(even) {
  --sf-y: 30px;
}

.sf-tile:hover {
  transform: translateY(calc(var(--sf-y) - 5px));
  box-shadow: 0 28px 50px -24px rgba(0,0,0,.8);
}

/* foto inteira, com respiro em volta (nunca cortada) */
.sf-tile-img {
  position: relative;
  display: block;
  aspect-ratio: 1/.84;
  border-radius: 14px;
  background: #fff;
}

.sf-tile-img img {
  position: absolute;
  inset: 3%;
  width: 94%;
  height: 94%;
  object-fit: contain;
}

.sf-tile-nome {
  display: block;
  margin-top: 8px;
  padding: 0 6px;
  font: 600 16px/1.25 var(--sf-f-texto);
}

.sf-tile-marcas {
  display: block;
  margin-top: 3px;
  padding: 0 6px;
  font-size: 13px;
  line-height: 1.3;
  color: var(--sf-texto-suave);
}

.sf-tile-seta {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--sf-ouro);
  color: var(--sf-choco-escuro);
  box-shadow: 0 3px 0 var(--sf-ouro-borda);
}

.sf-tile-seta .sf-ico {
  width: 17px;
  height: 17px;
  stroke-width: 2.4;
}

.sf-vitrine-mais {
  margin-top: 48px;
  font-size: 14.5px;
  line-height: 1.5;
  color: rgba(255,242,220,.78);
}

.sf-vitrine-mais a {
  color: #FFF2DC;
  font-weight: 600;
  text-decoration-color: rgba(255,194,14,.75);
  text-decoration-thickness: 2px;
}

.sf-selo {
  position: absolute;
  z-index: 2;
  left: -58px;
  top: -46px;
  width: 118px;
  height: 118px;
  filter: drop-shadow(0 12px 18px rgba(0,0,0,.35));
}

.sf-selo text {
  font-family: var(--sf-f-titulo);
  font-weight: 700;
  font-size: 13.4px;
  letter-spacing: 1.4px;
  fill: var(--sf-choco-escuro);
}

@media (prefers-reduced-motion:no-preference) {
  .sf-selo .sf-giro {
    transform-origin: 60px 60px;
    animation: sf-giro 28s linear infinite;
  }
}

@keyframes sf-giro {
  to {
    transform: rotate(360deg);
  }
}

/* calda escorrendo: transição entre faixas */
.sf-calda {
  position: absolute;
  left: 0;
  top: -1px;
  width: 100%;
  height: var(--sf-calda-h);
  pointer-events: none;
}

/* ---------- Marcas (prova) ---------- */
.sf-marcas {
  position: relative;
  padding: calc(var(--sf-calda-h) + 34px) 0 92px;
  background: var(--sf-creme);
}

.sf-marcas .sf-calda {
  fill: var(--sf-choco-fundo);
}

.sf-marcas-grade {
  margin-top: 36px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 14px;
}

.sf-marcas-grade li {
  display: flex;
}

.sf-marca {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 22px 22px 18px;
  border: 1.5px solid var(--sf-linha);
  border-radius: 18px;
  background: var(--sf-papel);
  color: var(--sf-choco);
  text-decoration: none;
  transition: border-color .2s, transform .2s, box-shadow .2s;
}

.sf-marca:hover {
  border-color: var(--sf-ouro);
  transform: translateY(-3px);
  box-shadow: 0 18px 34px -24px rgba(90,45,18,.55);
}

.sf-marca-nome {
  font: 700 clamp(25px, .9vw + 16px, 32px)/1 var(--sf-f-titulo);
  letter-spacing: -.003em;
}

.sf-marca-linha {
  margin-top: 7px;
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--sf-texto-suave);
}

.sf-marca-ver {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 16px;
  font: 600 15px/1 var(--sf-f-texto);
  color: var(--sf-laranja-texto);
}

.sf-marca-ver .sf-ico {
  width: 16px;
  height: 16px;
  transition: transform .2s;
}

.sf-marca:hover .sf-marca-ver .sf-ico {
  transform: translateX(3px);
}

.sf-marcas-nota {
  margin-top: 22px;
  font-size: 15.5px;
  color: var(--sf-texto-suave);
}

.sf-marcas-nota a {
  font-weight: 600;
  color: var(--sf-choco);
}

/* ---------- Cotação: dores + exemplo + formulário ---------- */
.sf-cotacao {
  --sf-anel: var(--sf-choco);
  position: relative;
  padding: 96px 0;
  color: var(--sf-choco-escuro);
  background: radial-gradient(900px 520px at 0% 0%, rgba(255,255,255,.26), transparent 62%), var(--sf-ouro);
}

.sf-cotacao .sf-sobre {
  color: var(--sf-choco);
}

.sf-cotacao .sf-t2 {
  color: var(--sf-choco-escuro);
}

.sf-cotacao .sf-lead {
  color: var(--sf-texto-ouro);
}

.sf-cot-grid {
  display: grid;
  grid-template-columns: minmax(0,.95fr) minmax(0,1.05fr);
  gap: 64px;
  align-items: start;
}

.sf-cot-esq,
.sf-cot-dir {
  display: flex;
  flex-direction: column;
  gap: 28px;
  min-width: 0;
}

/* "do jeito que costuma ser × com a SorvFood's" */
.sf-dores-tit {
  font: 700 clamp(25px, .8vw + 18px, 30px)/1.08 var(--sf-f-titulo);
  color: var(--sf-choco-escuro);
  text-wrap: balance;
}

.sf-dores-sub {
  margin-top: 6px;
  font-size: 16px;
  line-height: 1.45;
  color: var(--sf-texto-ouro);
}

.sf-dias {
  display: none;
}

.sf-cenas {
  margin-top: 16px;
  display: grid;
  gap: 10px;
}

.sf-cena {
  display: grid;
  grid-template-columns: 96px minmax(0,1fr);
  gap: 8px 16px;
  padding: 16px 18px;
  border-radius: 18px;
  background: rgba(255,255,255,.5);
  border: 1px solid rgba(63,30,11,.1);
}

.sf-cena-dia {
  grid-row: span 2;
  padding-top: 1px;
  font: 700 18px/1.15 var(--sf-f-titulo);
  color: var(--sf-choco);
}

.sf-cena-antes,
.sf-cena-depois {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  line-height: 1.42;
}

.sf-cena-antes {
  color: #5E3B1F;
}

.sf-cena-depois {
  font-weight: 600;
  color: var(--sf-choco-escuro);
}

.sf-sinal {
  display: grid;
  place-items: center;
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 0;
  border-radius: 50%;
}

.sf-sinal .sf-ico {
  width: 12px;
  height: 12px;
  stroke-width: 3;
}

.sf-sinal-x {
  border: 1.5px solid rgba(63,30,11,.35);
  color: rgba(63,30,11,.6);
}

.sf-sinal-ok {
  background: var(--sf-choco);
  color: var(--sf-ouro);
}

.sf-cena-rot {
  display: block;
  font: 700 12px/1.3 var(--sf-f-titulo);
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .75;
}

/* exemplo de pedido (conversa) */
.sf-exemplo {
  margin: 0;
}

.sf-exemplo-rot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font: 700 14px/1 var(--sf-f-titulo);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sf-choco);
}

.sf-exemplo-rot .sf-ico {
  width: 16px;
  height: 16px;
}

.sf-chat {
  overflow: hidden;
  border-radius: 22px;
  background: #F4EADB;
  border: 1px solid rgba(63,30,11,.14);
  box-shadow: 0 26px 48px -32px rgba(63,30,11,.7);
}

.sf-chat-topo {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: var(--sf-choco);
  color: #FFF4E2;
}

.sf-chat-topo img {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #fff;
}

.sf-chat-topo b {
  display: block;
  font-size: 15.5px;
  line-height: 1.2;
}

.sf-chat-topo small {
  display: block;
  font-size: 12.5px;
  line-height: 1.3;
  color: rgba(255,244,226,.78);
}

.sf-chat-corpo {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 14px 16px;
  background-image: radial-gradient(rgba(90,45,18,.08) 1px, transparent 1px);
  background-size: 14px 14px;
}

.sf-balao {
  max-width: 86%;
  padding: 8px 12px 9px;
  border-radius: 14px;
  font-size: 15px;
  line-height: 1.4;
  color: var(--sf-texto);
  box-shadow: 0 1px 1px rgba(63,30,11,.14);
}

.sf-balao-eu {
  align-self: flex-end;
  background: #FFF0C2;
  border-top-right-radius: 4px;
}

.sf-balao-eles {
  align-self: flex-start;
  background: #fff;
  border-top-left-radius: 4px;
}

.sf-balao-foto {
  padding: 6px;
}

.sf-caderno {
  width: 212px;
  padding: 6px 12px 7px 32px;
  border-radius: 8px;
  transform: rotate(-1.5deg);
  font: 700 21px/26px var(--sf-f-mao);
  color: #283C6E;
  background: linear-gradient(90deg, transparent 22px, rgba(214,64,64,.5) 22px 23.5px, transparent 23.5px), repeating-linear-gradient(180deg, #fff 0 25px, rgba(70,120,200,.3) 25px 26px);
}

.sf-passos {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
  counter-reset: passo;
}

.sf-passos li {
  counter-increment: passo;
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 14px;
  line-height: 1.35;
  color: var(--sf-texto-ouro);
}

.sf-passos li::before {
  content: counter(passo);
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--sf-choco);
  font: 700 14px/1 var(--sf-f-titulo);
  color: var(--sf-ouro);
}

.sf-passos b {
  display: block;
  font-weight: 600;
  color: var(--sf-choco-escuro);
}

/* quem atende */
.sf-quem {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(255,255,255,.5);
  border: 1px solid rgba(63,30,11,.1);
}

.sf-quem img {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 2px var(--sf-choco);
}

.sf-quem b {
  display: block;
  font: 700 19px/1.15 var(--sf-f-titulo);
  color: var(--sf-choco-escuro);
}

.sf-quem span {
  display: block;
  margin-top: 2px;
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--sf-texto-ouro);
}

/* formulário */
.sf-form-card {
  position: relative;
  padding: 34px 34px 28px;
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 36px 70px -34px rgba(63,30,11,.65), 0 2px 0 rgba(63,30,11,.08);
}

.sf-form-card h3 {
  font: 700 32px/1.05 var(--sf-f-titulo);
  color: var(--sf-choco);
}

.sf-form-sub {
  margin-top: 6px;
  font-size: 15.5px;
  color: var(--sf-texto-suave);
}

.sf-form-alerta {
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #FDEEE6;
  border: 1px solid #F2C1A8;
  font-size: 15px;
  font-weight: 600;
  color: var(--sf-erro);
}

.sf-campos {
  margin-top: 22px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.sf-campo {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.sf-campo-full {
  grid-column: 1 / -1;
}

.sf-campo label,
.sf-campo legend {
  padding: 0;
  font: 600 15px/1.2 var(--sf-f-texto);
  color: var(--sf-choco);
}

.sf-campo legend {
  margin-bottom: 7px;
}

.sf-opc {
  font-weight: 400;
  color: var(--sf-texto-suave);
}

.sf-inp {
  width: 100%;
  height: 52px;
  padding: 0 16px;
  border: 1.5px solid #E3CDAE;
  border-radius: 12px;
  background: #FFFBF4;
  font-size: 16px;
  color: var(--sf-texto);
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}

.sf-inp::placeholder {
  color: #7F6552;
  opacity: 1;
}

.sf-inp:hover {
  border-color: #D2B48B;
}

.sf-inp:focus {
  outline: none;
  border-color: var(--sf-choco);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(255,194,14,.5);
}

textarea.sf-inp {
  height: auto;
  min-height: 90px;
  padding: 13px 16px;
  line-height: 1.45;
  resize: vertical;
}

.sf-tipos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 8px;
}

.sf-tipo {
  position: relative;
}

.sf-tipo input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}

.sf-tipo span {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  padding: 0 6px;
  border: 1.5px solid #E3CDAE;
  border-radius: 12px;
  background: #FFFBF4;
  font: 600 15px/1.1 var(--sf-f-texto);
  text-align: center;
  color: var(--sf-choco);
  transition: background-color .15s, border-color .15s, color .15s;
}

.sf-tipo:hover span {
  border-color: #D2B48B;
}

.sf-tipo input:checked + span {
  background: var(--sf-choco);
  border-color: var(--sf-choco);
  color: #FFF4E2;
}

.sf-tipo input:focus-visible + span {
  outline: 3px solid var(--sf-laranja);
  outline-offset: 2px;
}

.sf-erro {
  display: none;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--sf-erro);
}

/* O JS (marca()) e o envio sem JS (form-cotacao.php) marcam o campo com data-sf-erro. */
.sf-campo[data-sf-erro] .sf-erro {
  display: block;
}

.sf-campo[data-sf-erro] .sf-inp,
.sf-campo[data-sf-erro] .sf-tipo span {
  border-color: #C2410C;
}

.sf-campo[data-sf-erro] .sf-inp {
  background: #FFF8F4;
}

.sf-hp {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.sf-form-enviar {
  margin-top: 22px;
  width: 100%;
}

.sf-form-nota {
  margin-top: 14px;
  display: flex;
  gap: 9px;
  align-items: flex-start;
  font-size: 14px;
  line-height: 1.45;
  color: var(--sf-texto-suave);
}

.sf-form-nota .sf-ico {
  width: 16px;
  height: 16px;
  margin-top: 2px;
}

.sf-form-ok {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 14px;
  background: #EAF7EE;
  color: #1F5130;
  font-size: 15.5px;
  line-height: 1.45;
}

.sf-form-ok a {
  font-weight: 600;
}

/* ---------- Catálogo ---------- */
.sf-catalogo {
  padding: 104px 0 96px;
  background: var(--sf-creme);
}

.sf-cat-cab {
  display: grid;
  grid-template-columns: minmax(0,1fr) 400px;
  gap: 40px;
  align-items: end;
}

.sf-busca {
  position: relative;
}

.sf-busca > .sf-ico {
  position: absolute;
  left: 17px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--sf-texto-suave);
  pointer-events: none;
}

.sf-busca .sf-inp {
  height: 56px;
  padding: 0 50px 0 50px;
  border-radius: 16px;
  background: #fff;
  border-color: var(--sf-linha-forte);
}

.sf-busca .sf-inp::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

.sf-busca-limpar {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--sf-texto-suave);
}

.sf-busca-limpar:hover {
  background: var(--sf-creme-2);
  color: var(--sf-choco);
}

/* sem JS: os chips continuam (são links para /categoria/...); a busca e a linha de contagem somem */
html:not(.sf-js) .sf-busca,
html:not(.sf-js) .sf-cat-linha {
  display: none;
}

.sf-cat-corpo {
  margin-top: 30px;
}

.sf-cat-rot {
  display: none;
}

.sf-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sf-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 10px 0 16px;
  border: 1.5px solid var(--sf-linha-forte);
  border-radius: 999px;
  background: #fff;
  font: 600 15px/1 var(--sf-f-texto);
  color: var(--sf-choco);
  white-space: nowrap;
  transition: background-color .15s, border-color .15s, color .15s;
}

.sf-chip:hover {
  border-color: var(--sf-choco);
}

.sf-chip-n {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--sf-creme-2);
  font-size: 13px;
  font-weight: 700;
  color: var(--sf-choco);
}

.sf-chip[aria-pressed="true"],
.sf-chip[aria-current] {
  background: var(--sf-choco);
  border-color: var(--sf-choco);
  color: #FFF4E2;
}

.sf-chip[aria-pressed="true"] .sf-chip-n,
.sf-chip[aria-current] .sf-chip-n {
  background: var(--sf-ouro);
  color: var(--sf-choco-escuro);
}

.sf-chip--zero {
  color: var(--sf-texto-suave);
}

.sf-chip--zero .sf-chip-n {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--sf-linha-forte);
}

.sf-cat-linha {
  margin-top: 20px;
  min-height: 1.5em;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
}

.sf-cat-info {
  font-size: 15px;
  color: var(--sf-texto-suave);
}

.sf-cat-ativos {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 6px 0 12px;
  border-radius: 999px;
  background: var(--sf-choco);
  font-size: 14.5px;
  color: #FFF4E2;
}

.sf-cat-ativos b {
  font-weight: 600;
}

.sf-cat-ativos button {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  background: rgba(255,244,226,.16);
  color: #FFF4E2;
}

.sf-cat-ativos button .sf-ico {
  width: 14px;
  height: 14px;
  stroke-width: 2.6;
}

.sf-grade {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 20px;
}

/* Card de produto: um componente só, repetido (no WordPress, o partial card-produto.php no loop) */
.sf-card {
  display: flex;
  min-width: 0;
}

.sf-card-in {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  border: 1px solid #EEDFC8;
  border-radius: 20px;
  background: #fff;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.sf-card-in:hover {
  transform: translateY(-4px);
  border-color: #E5C78F;
  box-shadow: 0 24px 44px -26px rgba(90,45,18,.5);
}

.sf-card-media {
  position: relative;
  aspect-ratio: 1/1;
  background: #fff;
  border-bottom: 1px solid #F4E9D8;
}

.sf-card-media img {
  position: absolute;
  inset: 14px;
  width: calc(100% - 28px);
  height: calc(100% - 28px);
  object-fit: contain;
}

.sf-card-selo {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--sf-ouro);
  font: 700 12.5px/1 var(--sf-f-titulo);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sf-choco-escuro);
}

.sf-card-selo--indisp {
  background: var(--sf-creme-2);
  color: var(--sf-choco);
}

.sf-card-corpo {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 16px 18px 18px;
}

.sf-card-marca {
  font: 700 13px/1 var(--sf-f-titulo);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sf-laranja-texto);
}

.sf-card-nome {
  margin-top: 8px;
  font: 600 18px/1.25 var(--sf-f-texto);
  color: var(--sf-choco);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sf-card-desc {
  margin-top: 6px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--sf-texto-suave);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sf-card-meta {
  margin: 12px 0 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  font-size: 14px;
  color: var(--sf-texto-suave);
}

.sf-card-peso {
  padding: 4px 8px;
  border-radius: 8px;
  background: var(--sf-creme-2);
  font-weight: 600;
  color: var(--sf-choco);
}

.sf-card-preco.sf-tem {
  font: 700 18px/1.2 var(--sf-f-texto);
  color: var(--sf-choco);
}

.sf-card-btn {
  --sf-h: 46px;
  width: 100%;
  margin-top: auto;
  padding: 0 14px;
  font-size: 15.5px;
  border-radius: 12px;
}

.sf-vazio {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 48px 24px;
  border: 1.5px solid var(--sf-linha);
  border-radius: 22px;
  background: var(--sf-papel);
  text-align: center;
}

.sf-vazio-tit {
  font: 700 27px/1.15 var(--sf-f-titulo);
  color: var(--sf-choco);
  text-wrap: balance;
}

.sf-vazio p {
  max-width: 34em;
  color: var(--sf-texto-suave);
}

.sf-vazio .sf-btn {
  margin-top: 6px;
  white-space: normal;
}

.sf-cat-mais {
  margin-top: 32px;
  display: flex;
  justify-content: center;
}

.sf-cat-mais .sf-btn {
  --sf-h: 52px;
  padding: 0 26px;
}

.sf-cat-ajuda {
  margin-top: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 28px;
  border-radius: 20px;
  background: var(--sf-creme-2);
}

.sf-cat-ajuda b {
  display: block;
  font: 700 23px/1.15 var(--sf-f-titulo);
  color: var(--sf-choco);
}

.sf-cat-ajuda span {
  display: block;
  margin-top: 4px;
  font-size: 15.5px;
  color: var(--sf-texto-suave);
}

/* Catálogo grande (mais de ~30 produtos): filtros numa barra lateral no computador */
@media (min-width:1100px) {
  .sf-catalogo--lateral .sf-cat-corpo {
    display: grid;
    grid-template-columns: 260px minmax(0,1fr);
    gap: 32px;
    align-items: start;
  }
  .sf-catalogo--lateral .sf-cat-lado {
    position: sticky;
    top: calc(var(--sf-topo-h) + 20px);
  }
  .sf-catalogo--lateral .sf-cat-rot {
    display: block;
    margin: 0 0 10px 4px;
    font: 700 14px/1 var(--sf-f-titulo);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--sf-texto-suave);
  }
  .sf-catalogo--lateral .sf-chips {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 6px;
  }
  .sf-catalogo--lateral .sf-chip {
    justify-content: space-between;
    width: 100%;
    height: 46px;
    border-radius: 14px;
  }
  .sf-catalogo--lateral .sf-cat-linha {
    margin-top: 0;
  }
  .sf-catalogo--lateral .sf-grade {
    grid-template-columns: repeat(3, minmax(0,1fr));
  }
}

/* ---------- Loja + cursos ---------- */
.sf-visite {
  padding: 100px 0 calc(var(--sf-calda-h) + 70px);
  background: var(--sf-creme-2);
}

.sf-visite-grid {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 24px;
}

.sf-bloco {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-radius: 26px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(90,45,18,.06), 0 24px 48px -36px rgba(90,45,18,.5);
}

.sf-bloco-corpo {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 30px 32px 32px;
}

.sf-bloco h3 {
  margin-top: 12px;
  font: 700 clamp(28px, .9vw + 20px, 36px)/1.05 var(--sf-f-titulo);
  color: var(--sf-choco);
}

.sf-bloco-corpo > p {
  margin-top: 12px;
  color: var(--sf-texto-suave);
}

.sf-bloco-sub {
  margin-top: 6px !important;
  font-size: 15.5px;
  font-weight: 500;
}

.sf-lista-check {
  margin-top: 18px;
  display: grid;
  gap: 11px;
}

.sf-lista-check li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  line-height: 1.4;
}

.sf-bolinha {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-top: -1px;
  border-radius: 50%;
  background: var(--sf-ouro);
  color: var(--sf-choco-escuro);
}

.sf-bolinha .sf-ico {
  width: 14px;
  height: 14px;
  stroke-width: 3;
}

.sf-horas {
  margin-top: 20px;
  border-top: 1px solid var(--sf-linha);
}

.sf-horas div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--sf-linha);
}

.sf-horas dt {
  color: var(--sf-texto-suave);
}

.sf-horas dd {
  font-weight: 600;
  color: var(--sf-choco);
  text-align: right;
}

.sf-horas a {
  text-decoration: none;
}

.sf-horas a:hover {
  text-decoration: underline;
}

.sf-bloco-acoes {
  margin-top: auto;
  padding-top: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* foto real de produto em destaque, com legenda "marca · peso" */
.sf-foto-real {
  position: relative;
  margin: 0;
  aspect-ratio: 16/10;
  background: radial-gradient(110% 90% at 50% 34%, #FFFFFF 0%, #FBF4E8 46%, #F1E2C8 100%);
}

.sf-foto-real img {
  position: absolute;
  left: 24px;
  right: 24px;
  top: 22px;
  bottom: 50px;
  width: calc(100% - 48px);
  height: calc(100% - 72px);
  object-fit: contain;
  filter: drop-shadow(0 16px 18px rgba(63,30,11,.22));
}

.sf-foto-real figcaption {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: var(--sf-texto-suave);
}

.sf-foto-real figcaption b {
  font-weight: 600;
  color: var(--sf-choco);
}

.sf-foto-real .sf-regua {
  flex: 1;
  height: 1px;
  background: var(--sf-linha-forte);
}

/* foto que ainda vai ser feita: textura de casquinha, marcas de corte e a descrição da foto ideal */
.sf-ph {
  --sf-mark: rgba(90,45,18,.38);
  position: relative;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 28px;
  aspect-ratio: 16/10;
  overflow: hidden;
  background-color: #F3E3C8;
  background-image: repeating-linear-gradient(45deg, rgba(90,45,18,.075) 0 1px, transparent 1px 18px), repeating-linear-gradient(-45deg, rgba(90,45,18,.075) 0 1px, transparent 1px 18px);
}

.sf-ph::before {
  content: "";
  position: absolute;
  inset: 14px;
  pointer-events: none;
  background: linear-gradient(var(--sf-mark),var(--sf-mark)) left top/18px 1px no-repeat, linear-gradient(var(--sf-mark),var(--sf-mark)) left top/1px 18px no-repeat, linear-gradient(var(--sf-mark),var(--sf-mark)) right top/18px 1px no-repeat, linear-gradient(var(--sf-mark),var(--sf-mark)) right top/1px 18px no-repeat, linear-gradient(var(--sf-mark),var(--sf-mark)) left bottom/18px 1px no-repeat, linear-gradient(var(--sf-mark),var(--sf-mark)) left bottom/1px 18px no-repeat, linear-gradient(var(--sf-mark),var(--sf-mark)) right bottom/18px 1px no-repeat, linear-gradient(var(--sf-mark),var(--sf-mark)) right bottom/1px 18px no-repeat;
}

.sf-ph-card {
  position: relative;
  max-width: 36ch;
  padding: 16px 18px 18px;
  border-radius: 12px;
  background: rgba(255,252,246,.95);
  box-shadow: 0 0 0 1px var(--sf-linha);
}

.sf-ph-tag {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font: 700 13px/1 var(--sf-f-titulo);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sf-laranja-texto);
}

.sf-ph-tag .sf-ico {
  width: 16px;
  height: 16px;
}

.sf-ph-desc {
  font-size: 15px;
  line-height: 1.5;
  color: var(--sf-texto);
}

/* ---------- Chamada final ---------- */
.sf-final {
  --sf-anel: var(--sf-ouro);
  position: relative;
  padding: calc(var(--sf-calda-h) + 60px) 0 104px;
  text-align: center;
  color: var(--sf-texto-claro);
  background: radial-gradient(640px 320px at 50% 66%, rgba(255,194,14,.11), transparent 70%), linear-gradient(180deg, var(--sf-choco-fundo), #5A2D12);
}

.sf-final .sf-calda {
  fill: var(--sf-creme-2);
}

/* no catálogo e no produto, a seção de cima é creme: a calda escorre creme */
.sf-final--creme .sf-calda {
  fill: var(--sf-creme);
}

.sf-final h2 {
  margin-inline: auto;
  max-width: 14em;
  font: 700 clamp(36px, 2.8vw + 20px, 62px)/1 var(--sf-f-titulo);
  color: #FFF4E2;
  text-wrap: balance;
}

.sf-final h2 .sf-leve {
  display: block;
  font-weight: 400;
  color: var(--sf-ouro);
}

.sf-final p {
  margin: 18px auto 0;
  max-width: 34em;
  font-size: clamp(16px, .45vw + 15px, 19px);
  color: rgba(255,242,220,.86);
}

.sf-final .sf-btn {
  margin-top: 32px;
}

.sf-final-contatos {
  margin-top: 22px !important;
  font-size: 15px !important;
  color: rgba(255,242,220,.74) !important;
}

.sf-final-contatos a {
  color: #FFF2DC;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.sf-final-contatos a:hover {
  text-decoration: underline;
}

/* ---------- Rodapé ---------- */
.sf-rodape {
  padding: 60px 0 28px;
  background: var(--sf-creme);
  border-top: 1px solid var(--sf-linha);
}

.sf-rod-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1.1fr .8fr;
  gap: 44px;
}

.sf-rod-logo img {
  height: 54px;
  width: auto;
}

.sf-rod-desc {
  margin-top: 16px;
  max-width: 28em;
  font-size: 15px;
  color: var(--sf-texto-suave);
}

.sf-redes {
  margin-top: 18px;
  display: flex;
  gap: 10px;
}

.sf-redes a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--sf-linha);
  border-radius: 12px;
  background: #fff;
  color: var(--sf-choco);
  transition: background-color .15s, color .15s, border-color .15s;
}

.sf-redes a:hover {
  background: var(--sf-choco);
  border-color: var(--sf-choco);
  color: #FFF4E2;
}

.sf-rod-col h2 {
  font: 700 15px/1.2 var(--sf-f-titulo);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--sf-laranja-texto);
}

.sf-rod-col ul {
  margin-top: 14px;
  display: grid;
  gap: 9px;
  font-size: 15px;
}

.sf-rod-col a {
  text-decoration: none;
}

.sf-rod-col a:hover {
  text-decoration: underline;
}

.sf-rod-col span {
  color: var(--sf-texto-suave);
}

.sf-rod-base {
  margin-top: 44px;
  padding-top: 20px;
  border-top: 1px solid var(--sf-linha);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  font-size: 13.5px;
  color: var(--sf-texto-suave);
}

/* ---------- Barra fixa do celular ---------- */
.sf-barra {
  display: none;
}

@media (max-width:767px) {
  /* escondida = fora da tela + inert (o JS liga e desliga), então não aparece nem recebe foco */
  .sf-barra {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 55;
    display: block;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255,247,234,.97);
    border-top: 1px solid var(--sf-linha);
    box-shadow: 0 -12px 30px -18px rgba(90,45,18,.55);
    opacity: 0;
    transform: translateY(115%);
    transition: transform .25s ease, opacity .2s ease;
  }
  .sf-barra.sf-on {
    opacity: 1;
    transform: none;
  }
  .sf-barra .sf-btn {
    width: 100%;
    --sf-h: 54px;
    font-size: 17.5px;
  }
  .sf-menu-on .sf-barra {
    opacity: 0;
    transform: translateY(115%);
  }
}

/* ---------- Entrada suave (só com movimento liberado) ---------- */
.sf-js-anim [data-sf-rev] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1);
}

.sf-js-anim [data-sf-rev].sf-vis {
  opacity: 1;
  transform: none;
}

@media print {
  .sf-js-anim [data-sf-rev] {
    opacity: 1 !important;
    transform: none !important;
  }
  .sf-barra,
  .sf-topo {
    position: static;
  }
}

@media (prefers-reduced-motion:reduce) {
  :where(.sf-pagina) *,
  :where(.sf-pagina) *::before,
  :where(.sf-pagina) *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* =========================================================
   Peças do plugin (além da página final)
   ========================================================= */

/* ---------- Topo com a barra de admin (só para quem está logado) ---------- */
.admin-bar .sf-topo {
  top: var(--wp-admin--admin-bar--height, 32px);
}

@media screen and (max-width:600px) {
  /* nessa largura a barra de admin rola junto com a página: o topo fixo e as âncoras não descontam a altura dela */
  .admin-bar .sf-topo {
    top: 0;
  }
  html:has(> body.admin-bar) {
    scroll-padding-top: calc(var(--sf-topo-h) + 12px);
  }
}

/* ---------- Sem JS: o botão "Menu" não abre nada; a navegação do rodapé aparece ---------- */
html:not(.sf-js) .sf-menu-btn {
  display: none !important;
}

/* ---------- Links que são filtros: chips, card e atalhos ---------- */
.sf-chip {
  text-decoration: none;
}

.sf-card-foto {
  position: absolute;
  inset: 0;
  display: block;
}

.sf-card-nome a {
  text-decoration: none;
}

.sf-card-nome a:hover {
  text-decoration: underline;
  text-decoration-color: var(--sf-ouro);
  text-decoration-thickness: 2px;
}

/* Antes do JS rodar, os cards depois do primeiro "ver mais" já ficam escondidos (sem pulo). */
.sf-js .sf-catalogo:not(.sf-catalogo--pronto) .sf-card--alem {
  display: none;
}

.sf-card-peso--leve {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--sf-linha-forte);
  font-weight: 500;
}

/* Produto sem foto: o ícone da marca, claro, sobre creme (o card nunca mostra uma caixa vazia) */
.sf-card--sem-foto .sf-card-media {
  background: var(--sf-creme);
}

.sf-card-media .sf-card-sem-foto img {
  inset: auto;
  left: 50%;
  top: 50%;
  width: 34%;
  height: auto;
  transform: translate(-50%, -50%);
  opacity: .35;
  /* o disco branco atrás do "S" some no creme */
  mix-blend-mode: multiply;
}

/* Página de produto sem foto: sem a moldura; o texto ocupa a largura (até uma linha confortável) */
.sf-produto-grid.sf-produto-grid--sem-foto {
  grid-template-columns: minmax(0,1fr);
  max-width: 760px;
}

.sf-produto-selo {
  margin-bottom: 14px;
}

.sf-produto-selo .sf-card-selo {
  position: static;
  display: inline-block;
}

/* foto de quem atende (configurações): redonda, sem distorcer */
.sf-quem img {
  object-fit: cover;
}

.sf-form-enviar[aria-busy="true"] {
  opacity: .78;
  cursor: progress;
}

/* produto que veio do botão "Pedir cotação" de um card (WhatsApp do comercial não configurado) */
.sf-form-produto {
  margin-top: 16px;
  padding: 11px 14px;
  border-radius: 12px;
  background: var(--sf-creme);
  border: 1px solid var(--sf-linha);
  font-size: 15px;
  line-height: 1.4;
  color: var(--sf-texto-suave);
}

.sf-form-produto b {
  font-weight: 600;
  color: var(--sf-choco);
}

.sf-form-alerta a {
  color: inherit;
}

/* ---------- Trilha (catálogo e produto) ---------- */
.sf-trilha {
  margin-bottom: 28px;
  font-size: 14.5px;
  color: var(--sf-texto-suave);
}

.sf-trilha ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: 4px;
}

.sf-trilha li {
  display: flex;
  align-items: center;
}

/* a barra fica no fim do item anterior: quando a trilha quebra, a linha de baixo não começa com "/";
   o leitor de tela não lê a barra (texto alternativo vazio) */
.sf-trilha li:not(:last-child)::after {
  content: "/";
  content: "/" / "";
  margin: 0 10px;
  color: var(--sf-linha-forte);
}

.sf-trilha a {
  font-weight: 500;
  color: var(--sf-choco);
  text-decoration: none;
}

.sf-trilha a:hover {
  text-decoration: underline;
}

/* ---------- Catálogo como página (/produtos/, /categoria/, /marca/) ---------- */
.sf-catalogo--pagina {
  padding: 32px 0 96px;
}

/* ---------- Topo com o caminhão: atalhos numa faixa no pé do topo (o resto em sorvfoods-caminhao.css) ---------- */
.sf-vitrine-grid--faixa {
  grid-template-columns: repeat(4, minmax(0,1fr));
}

.sf-vitrine-grid--faixa .sf-tile:nth-child(even) {
  --sf-y: 0px;
}

/* ---------- Fotos reais escolhidas nas configurações (cursos e fachada) ---------- */
.sf-foto-real--foto,
.sf-foto-loja {
  position: relative;
  margin: 0;
  aspect-ratio: 16/10;
  overflow: hidden;
  background: var(--sf-creme-2);
}

.sf-foto-real--foto img,
.sf-foto-loja img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: none;
}

/* ---------- Fachada sem foto: o bloco da foto some para o público (como manda a página final) ----------
   O card fica só com o texto; no computador, os dois cards alinham pelo topo (sem um vão no meio do card). */
@media (min-width:861px) {
  .sf-bloco--sem-foto {
    align-self: start;
  }
}

/* Só quem edita vê o "Foto a produzir", com a dica: o bloco cresce com o texto (sem cortar a borda). */
.sf-ph--dica {
  overflow: visible;
}

/* dica para quem edita o site (o público não vê o bloco "Foto a produzir") */
.sf-ph-dica {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--sf-linha-forte);
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--sf-texto-suave);
}

.sf-ph-dica a {
  font-weight: 600;
  color: var(--sf-choco);
}

/* ---------- Depoimentos (só com 2 ou mais reais publicados) ---------- */
.sf-depoimentos {
  margin-top: 72px;
  padding-top: 56px;
  border-top: 1px solid var(--sf-linha);
}

.sf-dep-tit {
  margin-top: 12px;
  font: 700 clamp(28px, 1.2vw + 18px, 38px)/1.05 var(--sf-f-titulo);
  color: var(--sf-choco);
  text-wrap: balance;
}

.sf-dep-grade {
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

.sf-dep-grade li {
  display: flex;
}

.sf-dep {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 24px 24px 22px;
  border: 1.5px solid var(--sf-linha);
  border-radius: 18px;
  background: var(--sf-papel);
}

.sf-dep-texto {
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--sf-texto);
}

.sf-dep-texto::before {
  content: "\201C";
  display: block;
  height: 30px;
  margin-bottom: 4px;
  font: 700 64px/1 var(--sf-f-titulo);
  color: var(--sf-ouro);
}

.sf-dep-quem {
  margin-top: auto;
  padding-top: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.sf-dep-foto {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 2px var(--sf-ouro);
}

.sf-dep-quem b {
  display: block;
  font-weight: 600;
  line-height: 1.25;
  color: var(--sf-choco);
}

.sf-dep-quem span span {
  display: block;
  font-size: 14px;
  line-height: 1.35;
  color: var(--sf-texto-suave);
}

/* ---------- Página do produto ---------- */
.sf-produto-pg {
  padding: 32px 0 88px;
  background: var(--sf-creme);
}

.sf-produto-grid {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 56px;
  align-items: start;
}

/* foto grande em fundo claro (branco, como nos cards: as fotos de embalagem têm fundo branco), inteira */
.sf-produto-foto {
  position: relative;
  aspect-ratio: 1/1;
  border: 1px solid #EEDFC8;
  border-radius: 28px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 1px 0 rgba(90,45,18,.06), 0 30px 60px -40px rgba(90,45,18,.55);
}

.sf-produto-foto img {
  position: absolute;
  inset: 6%;
  width: 88%;
  height: 88%;
  object-fit: contain;
}

.sf-produto-foto .sf-card-selo {
  top: 18px;
  left: 18px;
  padding: 8px 12px;
  font-size: 13.5px;
}

.sf-produto-info {
  padding-top: 6px;
}

.sf-produto-marca {
  font: 700 15px/1.2 var(--sf-f-titulo);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sf-laranja-texto);
}

.sf-produto-marca a {
  text-decoration: none;
}

.sf-produto-marca a:hover {
  text-decoration: underline;
}

.sf-produto-nome {
  margin-top: 12px;
  font: 700 clamp(38px, 2.2vw + 22px, 60px)/1 var(--sf-f-titulo);
  letter-spacing: -.004em;
  color: var(--sf-choco);
  text-wrap: balance;
}

.sf-produto-meta {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  font-size: 15px;
  color: var(--sf-texto-suave);
}

.sf-produto-meta .sf-card-peso {
  padding: 6px 10px;
  font-size: 15px;
}

.sf-produto-preco.sf-tem {
  font: 700 26px/1.1 var(--sf-f-texto);
  color: var(--sf-choco);
}

.sf-produto-resumo {
  margin-top: 18px;
  max-width: 34em;
  font-size: clamp(17px, .35vw + 15.5px, 19px);
  line-height: 1.55;
  color: var(--sf-texto-suave);
  text-wrap: pretty;
}

.sf-produto-acoes {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.sf-produto-nota {
  margin-top: 14px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 34em;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--sf-texto-suave);
}

.sf-produto-nota .sf-ico {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  color: var(--sf-laranja-texto);
}

.sf-produto-dados {
  margin-top: 28px;
  max-width: 34em;
}

.sf-produto-dados a {
  color: var(--sf-choco);
}

.sf-produto-desc {
  margin-top: 56px;
  max-width: 46em;
  padding-top: 32px;
  border-top: 1px solid var(--sf-linha);
}

.sf-produto-desc-tit {
  font: 700 clamp(26px, .8vw + 19px, 32px)/1.1 var(--sf-f-titulo);
  color: var(--sf-choco);
}

.sf-texto {
  margin-top: 12px;
}

.sf-texto > * + * {
  margin-top: 12px;
}

.sf-texto ul {
  padding-left: 1.3em;
  list-style: disc;
}

.sf-texto ol {
  padding-left: 1.3em;
  list-style: decimal;
}

/* relacionados ("Ver mais de ...") */
.sf-relacionados {
  padding: 88px 0 96px;
  background: var(--sf-creme-2);
}

.sf-relacionados .sf-cab .sf-btn {
  flex: none;
}

.sf-grade--relacionados {
  margin-top: 32px;
}

/* =========================================================
   Responsivo
   ========================================================= */
@media (max-width:1100px) {
  .sf-grade {
    grid-template-columns: repeat(3, minmax(0,1fr));
  }
  .sf-rod-grid {
    grid-template-columns: 1fr 1fr;
  }
  .sf-marcas-grade {
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 12px;
  }
  .sf-marca {
    padding: 18px 16px 16px;
  }
}

@media (max-width:980px) {
  .sf-hero-grid {
    grid-template-columns: 1fr;
    gap: 44px;
  }
  .sf-vitrine-grid {
    grid-template-columns: repeat(4, minmax(0,1fr));
  }
  .sf-tile:nth-child(even) {
    --sf-y: 0px;
  }
  .sf-selo {
    display: none;
  }
  .sf-vitrine-mais {
    margin-top: 20px;
  }
  .sf-cab {
    flex-direction: column;
    align-items: flex-start;
  }
  /* uma coluna: título → semana → exemplo → formulário → quem atende */
  .sf-cot-grid {
    display: flex;
    flex-direction: column;
    gap: 28px;
  }
  .sf-cot-esq,
  .sf-cot-dir {
    display: contents;
  }
  .sf-cot-cab {
    order: 1;
  }
  .sf-dores {
    order: 2;
  }
  .sf-exemplo {
    order: 3;
  }
  .sf-form-card {
    order: 4;
  }
  .sf-quem {
    order: 5;
  }
  .sf-cat-cab {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .sf-marcas-grade {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}

@media (max-width:860px) {
  .sf-grade {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
  .sf-visite-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width:767px) {
  .sf-pagina {
    font-size: 16px;
  }
  .sf-btn {
    max-width: 100%;
    white-space: normal;
  }
  .sf-t2 {
    font-size: clamp(32px, 9vw, 38px);
  }
  .sf-lead {
    margin-top: 12px;
  }
  .sf-hero {
    padding: 26px 0 22px;
  }
  .sf-h1 {
    margin-top: 12px;
    font-size: clamp(34px, 9.7vw, 40px);
  }
  .sf-hero-sub {
    margin-top: 14px;
    font-size: 17px;
  }
  .sf-hero-acoes {
    margin-top: 22px;
  }
  .sf-hero-acoes .sf-btn {
    width: 100%;
  }
  .sf-hero-nota {
    margin-top: 14px;
    font-size: 14.5px;
  }
  .sf-hero-hora {
    margin-top: 4px;
    font-size: 13.5px;
  }
  .sf-hero-provas {
    margin-top: 22px;
    padding-top: 18px;
    grid-template-columns: repeat(var(--sf-provas, 3), minmax(0,1fr));
  }
  .sf-prova-item {
    padding: 0 10px;
  }
  .sf-prova-item b {
    font-size: 23px;
  }
  .sf-prova-item span {
    margin-top: 5px;
    font-size: 12.5px;
  }
  /* no celular a vitrine vira uma faixa de 4 atalhos */
  .sf-vitrine-grid {
    gap: 8px;
  }
  .sf-tile {
    padding: 5px 5px 9px;
    border-radius: 14px;
  }
  .sf-tile-img {
    aspect-ratio: 1/1;
    border-radius: 10px;
  }
  .sf-tile-nome {
    margin-top: 6px;
    padding: 0;
    font-size: 12.5px;
    line-height: 1.15;
    text-align: center;
  }
  .sf-tile-marcas,
  .sf-tile-seta {
    display: none;
  }
  .sf-vitrine-mais {
    margin-top: 14px;
    font-size: 14px;
    text-align: center;
  }
  .sf-marcas {
    padding: calc(var(--sf-calda-h) + 22px) 0 56px;
  }
  .sf-marcas-grade {
    margin-top: 22px;
    gap: 8px;
  }
  .sf-marca {
    padding: 13px 13px 12px;
    border-radius: 14px;
  }
  .sf-marca-nome {
    font-size: 22px;
  }
  .sf-marca-linha {
    margin-top: 4px;
    font-size: 13.5px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .sf-marca-ver {
    padding-top: 9px;
    font-size: 13.5px;
  }
  .sf-marcas-nota {
    margin-top: 16px;
    font-size: 15px;
  }
  .sf-cotacao {
    padding: 48px 0 50px;
  }
  .sf-cot-grid {
    gap: 26px;
  }
  /* "do outro lado, gente da loja" fica nas telas maiores; no celular a nota do formulário já diz quem responde */
  .sf-quem {
    display: none;
  }
  .sf-dores-sub {
    font-size: 15px;
  }
  .sf-dores--abas .sf-dias {
    display: flex;
    gap: 6px;
    margin-top: 14px;
  }
  .sf-dias button {
    flex: 1;
    min-width: 0;
    height: 42px;
    padding: 0 4px;
    border: 1.5px solid rgba(63,30,11,.28);
    border-radius: 999px;
    background: transparent;
    font: 600 14.5px/1 var(--sf-f-texto);
    color: var(--sf-choco-escuro);
  }
  .sf-dias button[aria-selected="true"] {
    background: var(--sf-choco);
    border-color: var(--sf-choco);
    color: #FFF4E2;
  }
  .sf-dores--abas .sf-cenas {
    margin-top: 10px;
  }
  .sf-cena {
    grid-template-columns: 1fr;
    gap: 9px;
    padding: 14px 14px 15px;
  }
  .sf-cena-dia {
    grid-row: auto;
  }
  .sf-passos {
    display: none;
  }
  .sf-chat-corpo {
    padding: 12px 12px 14px;
  }
  .sf-balao-1 {
    display: none;
  }
  .sf-caderno {
    width: 196px;
    padding: 5px 10px 6px 30px;
    font-size: 19px;
    line-height: 23px;
    background: linear-gradient(90deg, transparent 21px, rgba(214,64,64,.5) 21px 22.5px, transparent 22.5px), repeating-linear-gradient(180deg, #fff 0 22px, rgba(70,120,200,.3) 22px 23px);
  }
  .sf-form-card {
    padding: 24px 16px 20px;
    border-radius: 24px;
  }
  .sf-form-card h3 {
    font-size: 28px;
  }
  .sf-campos {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .sf-tipo span {
    height: 46px;
    font-size: 14.5px;
  }
  textarea.sf-inp {
    min-height: 80px;
  }
  .sf-form-nota {
    font-size: 13.5px;
  }
  .sf-catalogo {
    padding: 54px 0 56px;
  }
  .sf-cat-corpo {
    margin-top: 22px;
  }
  /* fileira de chips rola para o lado; o esmaecido à direita mostra que tem mais */
  .sf-chips {
    margin: 0 -16px;
    padding: 2px 44px 6px 16px;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-padding-inline: 16px;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent);
  }
  .sf-chips::-webkit-scrollbar {
    display: none;
  }
  .sf-chip {
    flex: none;
    height: 42px;
  }
  .sf-cat-linha {
    margin-top: 12px;
  }
  .sf-cat-info {
    font-size: 14.5px;
  }
  .sf-cat-ajuda {
    margin-top: 32px;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    padding: 18px;
  }
  .sf-cat-ajuda b {
    font-size: 22px;
  }
  .sf-cat-ajuda .sf-btn {
    width: 100%;
  }
  .sf-visite {
    padding: 60px 0 calc(var(--sf-calda-h) + 40px);
  }
  .sf-visite-grid {
    margin-top: 26px;
    gap: 16px;
  }
  .sf-bloco {
    border-radius: 22px;
  }
  .sf-bloco-corpo {
    padding: 22px 20px 22px;
  }
  .sf-bloco-acoes {
    padding-top: 22px;
  }
  .sf-bloco-acoes .sf-btn {
    flex: 1 1 auto;
  }
  .sf-foto-real img {
    left: 16px;
    right: 16px;
    top: 14px;
    bottom: 40px;
    width: calc(100% - 32px);
    height: calc(100% - 54px);
  }
  .sf-foto-real figcaption {
    left: 16px;
    right: 16px;
    bottom: 12px;
    font-size: 13px;
  }
  /* a foto da fachada ainda vai ser feita: no celular o espaço fica só no computador */
  .sf-bloco .sf-ph {
    display: none;
  }
  .sf-final {
    padding: calc(var(--sf-calda-h) + 40px) 0 76px;
  }
  .sf-final .sf-btn {
    width: 100%;
  }
  .sf-final-contatos {
    line-height: 1.9;
  }
  .sf-final-contatos .sf-sep {
    display: none;
  }
  .sf-final-contatos > span {
    display: block;
  }
  .sf-rodape {
    padding: 36px 0 24px;
  }
  .sf-rod-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  /* logo e redes na mesma linha; a descrição já está no topo da página */
  .sf-rod-marca {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  .sf-rod-logo img {
    height: 40px;
  }
  .sf-rod-desc {
    display: none;
  }
  .sf-redes {
    margin-top: 0;
    gap: 8px;
  }
  .sf-rod-col ul {
    margin-top: 10px;
    gap: 6px;
  }
  .sf-rod-nav {
    display: none;
  }
  .sf-rod-base {
    margin-top: 26px;
    flex-direction: column;
  }
}

@media (min-width:375px) and (max-width:767px) {
  /* cidade e WhatsApp lado a lado: o formulário fica uma tela mais curto */
  .sf-campo-cidade,
  .sf-campo-whats {
    grid-column: auto;
  }
  .sf-campos {
    grid-template-columns: 1fr 1fr;
    column-gap: 12px;
  }
  .sf-campos > .sf-campo:not(.sf-campo-cidade):not(.sf-campo-whats) {
    grid-column: 1 / -1;
  }
  .sf-campo-cidade .sf-inp,
  .sf-campo-whats .sf-inp {
    padding: 0 12px;
  }
}

@media (max-width:639px) {
  /* no celular o card vira linha: foto à esquerda (mesmo tamanho para todas), dados e botão à direita */
  .sf-grade {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .sf-card-in {
    display: grid;
    grid-template-columns: 118px minmax(0,1fr);
    border-radius: 18px;
  }
  .sf-card-in:hover {
    transform: none;
  }
  .sf-card-media {
    aspect-ratio: auto;
    min-height: 100%;
    border-bottom: 0;
    border-right: 1px solid #F4E9D8;
  }
  .sf-card-media img {
    inset: auto 7px;
    top: 50%;
    width: 104px;
    height: 104px;
    transform: translateY(-50%);
  }
  .sf-card-media .sf-card-sem-foto img {
    inset: auto;
    left: 50%;
    top: 50%;
    width: 46px;
    height: auto;
    transform: translate(-50%, -50%);
  }
  .sf-card-selo {
    top: 7px;
    left: 7px;
    padding: 5px 7px;
    font-size: 11px;
  }
  .sf-card-corpo {
    padding: 12px 14px 13px;
  }
  .sf-card-nome {
    margin-top: 6px;
    font-size: 16.5px;
  }
  .sf-card-desc {
    display: none;
  }
  .sf-card-meta {
    margin: 7px 0 11px;
    gap: 6px 8px;
    font-size: 13.5px;
  }
  .sf-card-btn {
    --sf-h: 42px;
    font-size: 15px;
    gap: 8px;
  }
  .sf-card-btn .sf-ico-f {
    width: 18px;
    height: 18px;
  }
}

@media (max-width:374px) {
  .sf-tipos {
    grid-template-columns: 1fr 1fr;
  }
  .sf-dias button {
    font-size: 13.5px;
  }
}

/* =========================================================
   Responsivo das peças do plugin
   ========================================================= */
@media (max-width:860px) {
  .sf-produto-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .sf-produto-foto {
    width: 100%;
    max-width: 520px;
  }
}

@media (max-width:767px) {
  html:not(.sf-js) .sf-rod-nav {
    display: block;
  }
  .sf-catalogo--pagina {
    padding: 18px 0 56px;
  }
  .sf-trilha {
    margin-bottom: 18px;
    font-size: 14px;
  }
  .sf-vitrine-grid--faixa {
    gap: 8px;
  }
  .sf-depoimentos {
    margin-top: 48px;
    padding-top: 40px;
  }
  .sf-dep {
    padding: 20px 18px 18px;
  }
  .sf-produto-pg {
    padding: 18px 0 56px;
  }
  .sf-produto-nome {
    font-size: clamp(32px, 9vw, 40px);
  }
  .sf-produto-acoes .sf-btn {
    width: 100%;
  }
  .sf-produto-desc {
    margin-top: 36px;
    padding-top: 24px;
  }
  .sf-relacionados {
    padding: 56px 0 60px;
  }
  .sf-relacionados .sf-cab .sf-btn {
    width: 100%;
  }
}

@media (max-width:639px) {
  .sf-js .sf-catalogo:not(.sf-catalogo--pronto) .sf-card--alem-cel {
    display: none;
  }
}