.elementor-8417 .elementor-element.elementor-element-cea40a5{--display:flex;--min-height:100vh;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}:root{--page-title-display:none;}@media(min-width:768px){.elementor-8417 .elementor-element.elementor-element-cea40a5{--content-width:100%;}}/* Start custom CSS for shortcode, class: .elementor-element-6452ed2 *//* =====================================================
   SORVETE DO PARQUE — APP UI
   Apple Liquid Glass • Clean • Premium
   ===================================================== */

/* ---------- TOKENS ---------- */
:root{
  --accent-1:#ff7a18;
  --accent-2:#ffb347;

  --bg-dark:#0b0f14;
  --bg-light:#f5f5f7;

  --glass:rgba(255,255,255,.14);
  --glass-strong:rgba(255,255,255,.22);
  --glass-border:rgba(255,255,255,.28);

  --text-dark:#111827;
  --text-light:#f9fafb;

  --radius-xl:28px;
  --radius-lg:22px;
  --radius-pill:999px;

  --blur:20px;
}

/* ---------- BASE ---------- */
body{
  margin:0;
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(255,122,24,.22), transparent 55%),
    radial-gradient(800px 400px at 90% 10%, rgba(255,179,71,.22), transparent 55%),
    var(--bg-dark);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display",Inter,system-ui;
  color:var(--text-light);
}

body.sdp-light{
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(255,122,24,.12), transparent 55%),
    radial-gradient(800px 400px at 90% 10%, rgba(255,179,71,.12), transparent 55%),
    var(--bg-light);
  color:var(--text-dark);
}

/* ---------- APP WRAP ---------- */
.sdp-app{
  max-width:1100px;
  margin:auto;
  padding:14px;
}

/* =====================================================
   HEADER — LIQUID GLASS
   ===================================================== */
.sdp-topbar{
  position:sticky;
  top:10px;
  z-index:60;

  display:flex;
  align-items:center;
  gap:14px;

  padding:14px 18px;
  margin-bottom:14px;

  border-radius:var(--radius-xl);
  background:linear-gradient(135deg,rgba(255,255,255,.18),rgba(255,255,255,.06));
  border:1px solid var(--glass-border);
  backdrop-filter:blur(var(--blur)) saturate(1.3);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(1.3);

  box-shadow:
    0 22px 60px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.18);
}

body.sdp-light .sdp-topbar{
  background:linear-gradient(135deg,rgba(255,255,255,.85),rgba(255,255,255,.65));
  border-color:rgba(0,0,0,.08);
  box-shadow:0 18px 50px rgba(0,0,0,.12);
}

/* ---------- BRAND ---------- */
.sdp-brand{display:flex;align-items:center;}
.sdp-logo{
  height:46px;
  object-fit:contain;
}

/* =====================================================
   SEARCH — SINGLE PILL (SEM CAIXA INTERNA)
   ===================================================== */
.sdp-search-wrap{
  flex:1;
  display:flex;
  align-items:center;
  gap:10px;

  height:46px;
  padding:0 18px;
  border-radius:var(--radius-pill);

  background:rgba(255,255,255,.78);
  border:1px solid rgba(255,255,255,.55);

  backdrop-filter:blur(20px) saturate(1.35);
  -webkit-backdrop-filter:blur(20px) saturate(1.35);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    0 10px 28px rgba(0,0,0,.10);

  overflow:hidden;
}

.sdp-search-wrap:focus-within{
  background:rgba(255,255,255,.92);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    0 14px 34px rgba(255,122,24,.22);
}

.sdp-search-icon{
  font-size:18px;
  color:var(--accent-1);
}

.sdp-search{
  flex:1;
  height:100%;
  border:0;
  outline:0;
  background:transparent;
  box-shadow:none;

  font-size:16px;
  font-weight:600;
  color:inherit;

  -webkit-appearance:none;
  appearance:none;
}

.sdp-search::placeholder{opacity:.6;}

.sdp-search::-webkit-search-decoration,
.sdp-search::-webkit-search-cancel-button,
.sdp-search::-webkit-search-results-button,
.sdp-search::-webkit-search-results-decoration{
  display:none;
}

/* Dark mode search */
body:not(.sdp-light) .sdp-search-wrap{
  background:rgba(255,255,255,.16);
  border-color:rgba(255,255,255,.22);
}
body:not(.sdp-light) .sdp-search{color:#f9fafb;}

/* =====================================================
   TOP ACTIONS
   ===================================================== */
.sdp-top-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

.sdp-theme-toggle{
  width:46px;height:46px;
  border-radius:var(--radius-pill);
  border:1px solid var(--glass-border);
  background:var(--glass);
  backdrop-filter:blur(14px);
  cursor:pointer;
}

.sdp-cart-pill{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 16px;
  border-radius:var(--radius-pill);
  border:none;

  background:linear-gradient(135deg,var(--accent-1),var(--accent-2));
  color:#2a1400;
  font-weight:900;

  box-shadow:0 18px 45px rgba(255,122,24,.45);
}

/* =====================================================
   CATEGORIES — PILLS
   ===================================================== */
.sdp-cats{
  display:flex;
  gap:12px;
  overflow-x:auto;
  padding:10px 2px 14px;
}

.sdp-chip{
  padding:14px 22px;
  border-radius:var(--radius-pill);
  border:1px solid var(--glass-border);
  background:var(--glass);
  backdrop-filter:blur(var(--blur));
  font-weight:900;
  white-space:nowrap;
  cursor:pointer;
}

.sdp-chip.is-active{
  background:linear-gradient(135deg,var(--accent-1),var(--accent-2));
  color:#2a1400;
  border:none;
  box-shadow:0 10px 30px rgba(255,122,24,.45);
}

/* =====================================================
   PRODUCT GRID
   ===================================================== */
.sdp-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:18px;
  margin-top:18px;
}

.sdp-card{
  background:var(--glass);
  backdrop-filter:blur(var(--blur));
  border:1px solid var(--glass-border);
  border-radius:var(--radius-xl);
  overflow:hidden;
  box-shadow:0 22px 55px rgba(0,0,0,.45);
}

.sdp-img{
  aspect-ratio:1/1;
  object-fit:cover;
}

.sdp-card-body{padding:14px;}
.sdp-name{font-weight:900;font-size:15px;}

.sdp-price{
  font-weight:900;
  background:linear-gradient(135deg,var(--accent-1),var(--accent-2));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.sdp-add{
  margin-top:8px;
  padding:14px 22px;
  border-radius:var(--radius-pill);
  border:none;
  background:linear-gradient(135deg,var(--accent-1),var(--accent-2));
  color:#2a1400;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 12px 30px rgba(255,122,24,.45);
}

/* =====================================================
   MOBILE
   ===================================================== */
@media(max-width:640px){
  .sdp-topbar{flex-wrap:wrap;}
  .sdp-grid{grid-template-columns:1fr;}
}

/* =========================
   CATEGORIA ATIVA — LARANJA LIMPO (SEM “QUADRADO”)
   cole NO FINAL do CSS
   ========================= */

/* remove o highlight/focus padrão que vira esse “quadrado” */
.sdp-chip,
.sdp-chip:focus,
.sdp-chip:focus-visible,
.sdp-chip:active{
  outline: none !important;
  box-shadow: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* estado normal */
.sdp-chip{
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  color: inherit !important;
}

/* estado ativo (laranja destaque, sem gradiente estranho) */
.sdp-chip.is-active{
  background: linear-gradient(135deg, #ff7a18 0%, #ffb25a 100%) !important;
  border: 0 !important;
  color: #2a1400 !important;
  box-shadow: 0 14px 34px rgba(255,122,24,.30) !important;
}

/* no light mode, mantém o mesmo destaque */
body.sdp-light .sdp-chip.is-active{
  background: linear-gradient(135deg, #ff7a18 0%, #ffb25a 100%) !important;
  border: 0 !important;
  color: #2a1400 !important;
}

/* =========================
   FIX FINAL — REMOVE GRADIENTE FEIO ATRÁS DAS CATEGORIAS
   ========================= */

/* container das categorias SEM fundo algum */
.sdp-cats{
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* chip normal mais suave */
.sdp-chip{
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08) !important;
  transition: background .25s ease, box-shadow .25s ease, transform .2s ease;
}

/* chip ativo — laranja LIMPO, sem bloco atrás */
.sdp-chip.is-active{
  background: linear-gradient(135deg,#ff7a18,#ffb25a) !important;
  color:#2a1400 !important;
  border:0 !important;

  /* sombra elegante, sem “quadrado” */
  box-shadow:
    0 10px 24px rgba(255,122,24,.35),
    inset 0 1px 0 rgba(255,255,255,.35) !important;
}

/* light mode consistente */
body.sdp-light .sdp-chip{
  background: rgba(255,255,255,.75) !important;
  border: 1px solid rgba(0,0,0,.06) !important;
}

body.sdp-light .sdp-chip.is-active{
  background: linear-gradient(135deg,#ff7a18,#ffb25a) !important;
  color:#2a1400 !important;
  box-shadow: 0 10px 24px rgba(255,122,24,.30) !important;
}

/* remove QUALQUER highlight estranho de foco/clique */
.sdp-chip,
.sdp-chip:focus,
.sdp-chip:active,
.sdp-chip:focus-visible{
  outline:none !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* =========================
   FIX FINAL — REMOVE GRADIENTE FEIO ATRÁS DAS CATEGORIAS
   ========================= */

/* container das categorias SEM fundo algum */
.sdp-cats{
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* chip normal mais suave */
.sdp-chip{
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08) !important;
  transition: background .25s ease, box-shadow .25s ease, transform .2s ease;
}

/* chip ativo — laranja LIMPO, sem bloco atrás */
.sdp-chip.is-active{
  background: linear-gradient(135deg,#ff7a18,#ffb25a) !important;
  color:#2a1400 !important;
  border:0 !important;

  /* sombra elegante, sem “quadrado” */
  box-shadow:
    0 10px 24px rgba(255,122,24,.35),
    inset 0 1px 0 rgba(255,255,255,.35) !important;
}

/* light mode consistente */
body.sdp-light .sdp-chip{
  background: rgba(255,255,255,.75) !important;
  border: 1px solid rgba(0,0,0,.06) !important;
}

body.sdp-light .sdp-chip.is-active{
  background: linear-gradient(135deg,#ff7a18,#ffb25a) !important;
  color:#2a1400 !important;
  box-shadow: 0 10px 24px rgba(255,122,24,.30) !important;
}

/* remove QUALQUER highlight estranho de foco/clique */
.sdp-chip,
.sdp-chip:focus,
.sdp-chip:active,
.sdp-chip:focus-visible{
  outline:none !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* =========================
   SUAVIZAR GRADIENTE DO CHIP ATIVO
   ========================= */

.sdp-chip.is-active{
  /* gradiente mais fraco */
  background: linear-gradient(
    135deg,
    rgba(255,122,24,.75),
    rgba(255,178,90,.65)
  ) !important;

  /* sombra mais leve e difusa */
  box-shadow:
    0 6px 16px rgba(255,122,24,.22),
    inset 0 1px 0 rgba(255,255,255,.25) !important;
}

/* light mode ainda mais clean */
body.sdp-light .sdp-chip.is-active{
  background: linear-gradient(
    135deg,
    rgba(255,122,24,.65),
    rgba(255,178,90,.55)
  ) !important;

  box-shadow:
    0 5px 14px rgba(255,122,24,.20) !important;
}

/* 1) RESET TOTAL do link do logo (não vira bloco gigante) */
.sdp-brand a{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  text-decoration:none !important;
  background:transparent !important;
  box-shadow:none !important;
  border:0 !important;
  padding:0 !important;
  margin:0 !important;
  line-height:0 !important;
}

/* 2) garante que o logo não “estique” */
.sdp-logo{
  display:block !important;
  height:46px !important;
  width:auto !important;
  max-width:160px !important;
}

/* 3) topo em 1 linha (desktop) */
.sdp-topbar{
  flex-wrap:nowrap !important;
}

/* 4) se faltar espaço no mobile, aí sim quebra bonito */
@media (max-width: 640px){
  .sdp-topbar{
    flex-wrap:wrap !important;
  }
  .sdp-search-wrap{
    flex: 1 1 100% !important;
    order: 3 !important;
  }
  .sdp-top-actions{
    order: 2 !important;
  }
}

/* LOGO — maior, sem estourar o header */
.sdp-logo{
  height:56px !important;      /* antes estava ~46px */
  max-width:200px !important;  /* controla no desktop */
  width:auto !important;
}

/* Ajuste fino no mobile */
@media (max-width: 640px){
  .sdp-logo{
    height:48px !important;
    max-width:160px !important;
  }
}

/* ===== FIX HEADER: não quebra ao aumentar logo ===== */
.sdp-topbar{
  min-height:82px !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
}

.sdp-brand{
  flex:0 0 auto !important;
}

.sdp-logo{
  height:56px !important;
  width:auto !important;
  max-width:220px !important;
}

.sdp-search-wrap{
  flex:1 1 auto !important;
  min-width:260px !important;
}

.sdp-top-actions{
  flex:0 0 auto !important;
}

/* mobile: permite quebrar em 2 linhas sem bagunçar */
@media (max-width: 640px){
  .sdp-topbar{
    flex-wrap:wrap !important;
    min-height:unset !important;
  }
  .sdp-brand{width:100% !important;}
  .sdp-search-wrap{width:100% !important; min-width:0 !important;}
  .sdp-top-actions{width:100% !important; justify-content:flex-end !important;}
  .sdp-logo{height:52px !important; max-width:200px !important;}
}

/* ===== HEADER FIX DEFINITIVO (desktop + tablet em 1 linha) ===== */
.sdp-topbar{
  display:flex !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
  gap:14px !important;
  padding:14px 16px !important;
}

.sdp-brand{flex:0 0 auto !important;}
.sdp-logo{
  height:58px !important;     /* logo maior */
  width:auto !important;
  max-width:240px !important; /* trava pra não “estourar” */
}

.sdp-search-wrap{
  flex:1 1 auto !important;
  min-width:0 !important;     /* ESSENCIAL: permite encolher sem quebrar */
}

.sdp-search{
  width:100% !important;
  min-width:0 !important;
}

.sdp-top-actions{
  flex:0 0 auto !important;
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
}

/* Só empilha em telas MUITO pequenas */
@media (max-width: 520px){
  .sdp-topbar{
    flex-wrap:wrap !important;
  }
  .sdp-brand{width:100% !important;}
  .sdp-search-wrap{width:100% !important;}
  .sdp-top-actions{
    width:100% !important;
    justify-content:flex-end !important;
  }
  .sdp-logo{
    height:52px !important;
    max-width:220px !important;
  }
}

/* ===== HEADER FIX DEFINITIVO ===== */
.sdp-topbar{
  display:flex;
  align-items:center;
  gap:14px;
}

/* link do logo não pode quebrar o flex */
.sdp-brand-link{
  display:inline-flex;
  align-items:center;
}

/* tamanho correto do logo */
.sdp-logo{
  height:56px;
  width:auto;
  display:block;
}

/* busca cresce corretamente */
.sdp-search-wrap{
  flex:1;
  min-width:0;
}

/* input nunca quebra layout */
.sdp-search{
  min-width:0;
}

/* botões sempre colados à direita */
.sdp-top-actions{
  flex-shrink:0;
}

/* ===== Carrinho: alinhar coluna da direita ===== */
.sdp-cart-right{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;
}

/* ===== Qty: centralizar tudo certinho ===== */
.sdp-qty{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;
}

.sdp-qty-btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  width:34px !important;
  height:34px !important;
  padding:0 !important;

  line-height:1 !important;
  font-size:18px !important;
}

/* número central */
.sdp-qty-val{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-width:20px !important;
  line-height:1 !important;
}

/* botão Remover alinhado e com altura consistente */
.sdp-cart-remove{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  height:36px !important;
  padding:0 14px !important;
  line-height:1 !important;
}

/* X do carrinho: centralização perfeita */
.sdp-cart-close{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  width:44px !important;
  height:44px !important;
  padding:0 !important;

  line-height:1 !important;
  font-size:20px !important;
}

/* remove qualquer “empurrão” do texto */
.sdp-cart-close::before,
.sdp-cart-close::after

/* MOBILE: logo + ações na mesma linha, busca embaixo */
@media (max-width: 520px){

  .elementor-shortcode .sdp-app .sdp-topbar{
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-areas:
      "brand actions"
      "search search" !important;
    gap: 10px !important;
    align-items: center !important;
  }

  .elementor-shortcode .sdp-app .sdp-topbar .sdp-brand{
    grid-area: brand !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
  }

  /* trava o logo pra não “explodir” */
  .elementor-shortcode .sdp-app .sdp-topbar .sdp-brand img,
  .elementor-shortcode .sdp-app .sdp-topbar .sdp-brand svg{
    max-width: 150px !important;
    height: auto !important;
  }

  .elementor-shortcode .sdp-app .sdp-topbar .sdp-top-actions{
    grid-area: actions !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
  }

  .elementor-shortcode .sdp-app .sdp-topbar .sdp-search-wrap{
    grid-area: search !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  /* a busca preencher até o final */
  .elementor-shortcode .sdp-app .sdp-topbar .sdp-search-wrap input,
  .elementor-shortcode .sdp-app .sdp-topbar .sdp-search-wrap .sdp-search{
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}/* End custom CSS */