/*
 Theme Name:   Astra Canele Child
 Theme URI:    https://caneletron.com.br
 Description:  Tema filho do Astra — visual baseado no Canele Digital Menu (Lovable)
 Author:       Caneletron
 Template:     astra
 Version:      2.4.3
 Text Domain:  astra-canele-child
*/

/* ============================================================
   DESIGN SYSTEM — extraído do Lovable (index.css / tailwind)
   ============================================================
   --bg           hsl(50 27% 97%)   ≈ #F9F8F5  off-white
   --fg           hsl(25 25% 15%)   ≈ #302218  marrom profundo
   --primary      hsl(19 56% 40%)   ≈ #A0522D  terracota
   --primary-glow hsl(19 56% 50%)   ≈ #B85F35
   --primary-fg   hsl(50 27% 97%)   ≈ #F9F8F5
   --secondary    hsl(50 20% 92%)   ≈ #EDE9DF
   --muted-fg     hsl(25 10% 42%)   ≈ #786960
   --accent       hsl(80 45% 25%)   ≈ #4A5D23  verde musgo
   --highlight    hsl(29 60% 50%)   ≈ #CD7F32  bronze
   --border       hsl(30 15% 88%)   ≈ #E3DDD5
   --card         #ffffff
   ============================================================ */

:root {
  --clr-bg:          hsl(50, 27%, 97%);
  --clr-fg:          hsl(25, 25%, 15%);
  --clr-primary:     hsl(19, 56%, 40%);
  --clr-primary-glow:hsl(19, 56%, 50%);
  --clr-primary-fg:  hsl(50, 27%, 97%);
  --clr-secondary:   hsl(50, 20%, 92%);
  --clr-muted-fg:    hsl(25, 10%, 42%);
  --clr-accent:      hsl(80, 45%, 25%);
  --clr-highlight:   hsl(29, 60%, 50%);
  --clr-border:      hsl(30, 15%, 88%);
  --clr-card:        #ffffff;

  --gradient-warm:   linear-gradient(135deg, hsl(19,56%,40%), hsl(29,60%,50%));

  --shadow-soft:     0 4px 16px -4px hsl(25 25% 15% / 0.08);
  --shadow-card:     0 2px 8px  -2px hsl(25 25% 15% / 0.06);
  --shadow-elevated: 0 12px 32px -8px hsl(25 25% 15% / 0.18);

  --radius-xl:  0.75rem;   /* 12px — rounded-xl */
  --radius-2xl: 1rem;      /* 16px — rounded-2xl */
  --radius-full:9999px;

  --header-h:  56px;   /* h-14 */
  --nav-h:     44px;
  --bottom-h:  96px;   /* pill + pb-4 (16px) + height 56px + 8px */

  --font-display: 'Libre Baskerville', Georgia, serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --max-w:        42rem; /* max-w-2xl = 672px */
}

/* ============================================================
   RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

/* ============================================================
   BODY
   ============================================================ */
body {
  background-color: var(--clr-bg);
  color: var(--clr-fg);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  margin: 0;
  padding-top: var(--header-h);
  padding-bottom: var(--bottom-h);
}

h1, h2, h3, h4, .font-display {
  font-family: var(--font-display);
}

/* Remove margens/paddings do Astra */
.ast-container,
.ast-article-inner-content,
#primary,
#content,
.site-content,
.entry-content,
.woocommerce-page #content {
  max-width: 100% !important;
  padding-left: 0   !important;
  padding-right: 0  !important;
  padding-top: 0    !important;
  margin-left: 0    !important;
  margin-right: 0   !important;
  margin-top: 0     !important;
}

/* Remove top-padding do wrapper principal do conteúdo (Astra adiciona em vários contextos) */
.site-main,
#main {
  padding-top: 0 !important;
  margin-top: 0  !important;
}

/* ============================================================
   KEYFRAMES
   ============================================================ */
@keyframes canele-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0);   }
}
@keyframes canele-scale-in {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1);    }
}
@keyframes canele-slide-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0);    }
}
@keyframes canele-bounce-add {
  0%,100% { transform: scale(1);    }
  40%     { transform: scale(1.25); }
  70%     { transform: scale(0.92); }
}
@keyframes canele-pulse {
  0%,100% { opacity: 1;   }
  50%     { opacity: 0.5; }
}

/* ============================================================
   HEADER  — off-white sticky com blur (igual ao Lovable)
   ============================================================ */
.site-header,
#masthead,
.ast-site-header-wrap {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: var(--header-h) !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: none !important;
  transition: background-color 0.3s ease, box-shadow 0.25s ease;
  z-index: 1000 !important;
  padding: 0 !important;
}

/* Sombra sutil ao sair do topo (scroll > 8px) */
.site-header.canele-scrolled,
#masthead.canele-scrolled {
  box-shadow: var(--shadow-soft) !important;
}

/* Fundo sólido quando o cardápio quase toca o header (scroll > 160px) */
.site-header.is-solid,
#masthead.is-solid {
  background: #fcf8f2 !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  box-shadow: var(--shadow-soft) !important;
}

/* Inner centrado */
.ast-main-header-bar,
.ast-builder-grid-row,
.ast-builder-header-main-layout {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  max-width: var(--max-w) !important;
  margin: 0 auto !important;
  height: var(--header-h) !important;
  padding: 0 1rem !important;
}

/* Logo / nome centralizado */
.ast-site-identity,
.site-title,
.ast-site-name-wrap {
  display: none !important;
}

.site-title a,
.ast-site-name-wrap a {
  font-family: var(--font-display) !important;
  font-size: 1.5rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  color: var(--clr-primary) !important;
  text-decoration: none !important;
}

.custom-logo {
  max-height: 36px !important;
  width: auto !important;
}

/* Ícone de busca nativo do Astra — substituído pelos botões customizados */
.ast-search-icon,
.ast-search-menu-icon,
.ast-header-search {
  display: none !important;
}

/* Esconde elementos desnecessários do header Astra */
.main-navigation,
.ast-mobile-menu-buttons,
.ast-menu-toggle,
.ast-above-header-wrap,
.ast-below-header-wrap,
nav.ast-flex,
#ast-hf-menu-1,
.ast-mobile-header-wrap,
.ast-mobile-header-content,
.ast-site-header-cart,
.ast-addon-cart-wrap,
.widget_shopping_cart {
  display: none !important;
}

/* Clipar overflow do Astra (altura nativa 90px vs nossos 56px → header duplo) */
#masthead,
#ast-desktop-header {
  overflow: hidden !important;
}

/* Inner bars transparentes — background vem só do #masthead */
.ast-main-header-wrap,
.ast-primary-header-bar,
.main-header-bar,
.site-primary-header-wrap {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* ============================================================
   HERO — gradiente arredondado (igual ao Lovable)
   ============================================================ */
/* ============================================================
   HERO BANNER — foto fixada + card deslizante (estilo Keeta)
   ============================================================ */

/* Banner fixo na camada de fundo — travado, não rola com o conteúdo */
.canele-hero__banner {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 220px !important;
  z-index: 1 !important;
  background-image: url('assets/images/banner.png');
  background-size: cover;
  background-position: center 45%;
  background-repeat: no-repeat;
}

/*
 * Card deslizante — cortina que sobe sobre o banner fixo.
 *
 * margin-top = altura do banner (220px) − padding-top do body (var(--header-h) = 56px)
 * = 164px → card começa exatamente onde o banner termina no scroll 0.
 *
 * SEM min-height: 100vh — em iOS Safari a URL bar dinâmica causa salto de layout.
 * SEM animation — animação no pai cria compositing layer e quebra position:fixed dos filhos.
 */
.canele-hero {
  position: relative;
  z-index: 3;
  width: 100%;
  box-sizing: border-box;
  max-width: var(--max-w);
  margin: calc(220px - var(--header-h)) auto 0;
  padding: 0 0 0.25rem;
  background-color: #fcf8f2;
  border-radius: 28px 28px 0 0;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.10);
}

/*
 * Conteúdo principal e rodapé: z-index > banner (1) + background sólido obrigatório.
 * Sem background explícito, o banner fixo (z-index 1) aparece através da área transparente.
 */
#content,
.site-footer,
#colophon {
  position: relative;
  z-index: 3;
  background: var(--clr-bg);
}

/* ⓘ botão de informações — dentro do card (contexto claro) */
.cnl-hero-info-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--clr-secondary);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--clr-muted-fg);
  transition: background 0.15s, color 0.15s;
  padding: 0;
  flex-shrink: 0;
}
.cnl-hero-info-btn:hover,
.cnl-hero-info-btn:focus-visible {
  background: var(--clr-border);
  color: var(--clr-fg);
  outline: none;
}

/* Linha identidade: logo (esq.) + meta (centro) + ações (dir.) */
.canele-hero__identity {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem 1rem 0.5rem;
  position: relative;
  z-index: 3;
}

/* Botões de share e ⓘ no canto direito da identidade */
.canele-hero__actions {
  display: flex;
  gap: 0.25rem;
  align-items: center;
  flex-shrink: 0;
  padding-top: 0.1rem;
}
.canele-hero__actions .cnl-hdr-btn {
  width: 34px;
  height: 34px;
  background: var(--clr-secondary);
  color: var(--clr-muted-fg);
  opacity: 1;
  border-radius: 50%;
}
.canele-hero__actions .cnl-hdr-btn:hover,
.canele-hero__actions .cnl-hdr-btn:focus-visible {
  background: var(--clr-border);
  color: var(--clr-fg);
}

.canele-hero__seal-wrap {
  flex-shrink: 0;
}
.canele-hero__seal {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 3px solid var(--clr-bg);
  background: var(--clr-bg);
  box-shadow: 0 3px 18px rgba(0, 0, 0, 0.18);
  object-fit: contain;
  display: block;
}

/* Nome e slogan à direita do selo */
.canele-hero__meta {
  flex: 1;
  min-width: 0;
  padding-bottom: 0.15rem;
}
.canele-hero__nome {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--clr-fg);
  margin: 0 0 0.15rem;
  line-height: 1.2;
}
.canele-hero__slogan {
  font-size: 0.76rem;
  line-height: 1.45;
  color: var(--clr-muted-fg);
  margin: 0;
}

/* Badges: status + pedido mínimo */
.canele-hero__card {
  padding: 0 1rem 0.85rem;
}
.canele-hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.canele-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: var(--radius-full);
  padding: 0.22rem 0.65rem;
  font-size: 0.7rem;
  font-weight: 500;
  background: var(--clr-secondary);
  color: var(--clr-fg);
}
.canele-hero__badge--open {
  background: hsl(120, 38%, 34%);
  color: #fff;
}
.canele-hero__badge--closed {
  background: hsl(0, 55%, 42%);
  color: #fff;
}
.canele-hero__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  display: inline-block;
  flex-shrink: 0;
}
.cnl-delivery-line {
  margin-top: 0.75rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--clr-border);
  font-size: 0.72rem;
  color: var(--clr-muted-fg);
  font-weight: 500;
  line-height: 1.3;
}

/* ============================================================
   CATEGORY NAV — sticky, blur, underline animado
   ============================================================ */
.canele-cat-nav {
  position: sticky;
  top: calc(var(--header-h) + env(safe-area-inset-top, 0px));
  z-index: 100;
  background: color-mix(in srgb, var(--clr-bg) 95%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid var(--clr-border);
  border-bottom: 1px solid var(--clr-border);
  width: 100%;
  will-change: transform;
  contain: layout style;
}

.canele-cat-nav__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  gap: 0.25rem;
  overflow-x: auto;
  padding: 0.5rem 1rem;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  will-change: scroll-position;
}

.canele-cat-nav__inner::-webkit-scrollbar { display: none; }

.canele-cat-nav__item { flex-shrink: 0; }

.canele-cat-nav__btn {
  position: relative;
  display: inline-block;
  padding: 0.5rem 0.75rem;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--clr-muted-fg);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.18s;
  white-space: nowrap;
}

.canele-cat-nav__btn::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0.5rem;
  right: 0.5rem;
  height: 2px;
  border-radius: var(--radius-full);
  background: var(--clr-primary);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.canele-cat-nav__item.ativo .canele-cat-nav__btn,
.canele-cat-nav__btn:hover,
.canele-cat-nav__btn:focus {
  color: var(--clr-primary);
  background: none;
  outline: none;
}

.canele-cat-nav__item.ativo .canele-cat-nav__btn::after,
.canele-cat-nav__btn:hover::after {
  transform: scaleX(1);
}

/* ============================================================
   SECTION TITLE (nome da categoria)
   ============================================================ */
.canele-section {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 1rem 1rem 0;
  scroll-margin-top: calc(var(--header-h) + var(--nav-h) + 8px);
}

.canele-section__title {
  font-family: var(--font-display);
  font-size: 1.25rem; /* text-xl */
  font-weight: 600;
  color: var(--clr-fg);
  margin: 0 0 0.75rem;
}

/* ============================================================
   PRODUTO — card iFood (texto esquerda | foto direita)
   ============================================================ */

/* Lista: coluna única */
.woocommerce ul.products,
ul.products {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ── Card (li.product) ── */
.woocommerce ul.products li.product,
.woocommerce ul.products li.canele-item {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 0.75rem !important;
  position: relative !important;
  overflow: visible !important;
  max-width: var(--max-w) !important;
  margin: 0 auto 0.75rem !important;
  width: calc(100% - 2rem) !important;
  padding: 0.75rem !important;
  background: var(--clr-card) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-card) !important;
  float: none !important;
  clear: both !important;
  animation: canele-scale-in 0.2s ease-out;
  transition: box-shadow 0.2s;
}

.woocommerce ul.products li.product:hover,
.woocommerce ul.products li.canele-item:hover {
  box-shadow: var(--shadow-soft) !important;
}

/* Esconde tudo que o Astra injecta (usamos nosso content-product.php) */
.woocommerce ul.products li.product .astra-shop-thumbnail-wrap,
.woocommerce ul.products li.product .astra-shop-summary-wrap,
.woocommerce ul.products li.product > a.woocommerce-LoopProduct-link,
.woocommerce ul.products li.product > a.ast-loop-product__link,
.ast-woo-thumbnail-bg,
.add-to-cart-wrap.button-on-image,
.ast-shop-product-actions {
  display: none !important;
}

/* ── Texto (esquerda) ── */
.woocommerce ul.products li.product .canele-card-text {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  order: 1 !important;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--font-body) !important;
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  color: var(--clr-fg) !important;
  margin: 0 0 0.25rem !important;
  padding: 0 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title a {
  color: inherit !important;
  text-decoration: none !important;
}

.woocommerce ul.products li.product .canele-card-desc {
  font-size: 0.8rem !important;
  color: var(--clr-muted-fg) !important;
  line-height: 1.45 !important;
  margin: 0 0 0.4rem !important;
  padding: 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.woocommerce ul.products li.product .price {
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  color: var(--clr-fg) !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
}

.woocommerce ul.products li.product .price .woocommerce-Price-amount,
.woocommerce ul.products li.product .price .amount {
  color: var(--clr-fg) !important;
  font-weight: 600 !important;
}

.woocommerce ul.products li.product .price del,
.woocommerce ul.products li.product .price del .amount {
  color: var(--clr-muted-fg) !important;
  font-size: 0.78rem !important;
  font-weight: 400 !important;
  opacity: 0.7;
}

/* ── Foto (direita) ── */
.woocommerce ul.products li.product .canele-card-img-wrap {
  flex-shrink: 0 !important;
  order: 2 !important;
  width: 80px !important;
  height: 80px !important;
  position: relative !important;
  border-radius: var(--radius-xl) !important;
  overflow: visible !important;
}

.woocommerce ul.products li.product .canele-card-img-wrap > a {
  display: block !important;
  width: 80px !important;
  height: 80px !important;
  border-radius: var(--radius-xl) !important;
  overflow: hidden !important;
}

.woocommerce ul.products li.product .canele-card-img-wrap img,
.woocommerce ul.products li.product .canele-card-img-wrap .attachment-woocommerce_thumbnail {
  width: 80px !important;
  height: 80px !important;
  object-fit: cover !important;
  border-radius: var(--radius-xl) !important;
  display: block !important;
  transition: opacity 0.2s, filter 0.2s;
}

/* ── Esgotado ── */
.woocommerce ul.products li.product .canele-card-img-wrap.canele-oos > a img {
  opacity: 0.3 !important;
  filter: grayscale(70%) !important;
}

.canele-oos-badge {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  font-size: 0.6rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.07em !important;
  color: var(--clr-fg) !important;
  background: hsl(50 27% 97% / 0.9) !important;
  padding: 3px 6px !important;
  border-radius: 4px !important;
  white-space: nowrap !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* ── Botão + terracota (canto inferior direito da foto) ── */
.woocommerce ul.products li.product .canele-card-img-wrap a.button,
.woocommerce ul.products li.product .canele-card-img-wrap .add_to_cart_button,
.woocommerce ul.products li.product .canele-card-img-wrap .button {
  position: absolute !important;
  bottom: -8px !important;
  right: -8px !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: var(--radius-full) !important;
  background: var(--clr-primary) !important;
  color: transparent !important;
  font-size: 0 !important;
  border: none !important;
  cursor: pointer !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  text-decoration: none !important;
  box-shadow: 0 3px 10px hsl(19 56% 40% / 0.5) !important;
  transition: background 0.18s, transform 0.15s !important;
  margin: 0 !important;
  line-height: 1 !important;
  min-height: unset !important;
  z-index: 2 !important;
}

.woocommerce ul.products li.product .canele-card-img-wrap a.button::after,
.woocommerce ul.products li.product .canele-card-img-wrap .add_to_cart_button::after {
  content: '+' !important;
  font-size: 1.375rem !important;
  font-weight: 300 !important;
  color: var(--clr-primary-fg) !important;
  line-height: 1 !important;
  font-family: var(--font-body) !important;
  display: block !important;
}

.woocommerce ul.products li.product .canele-card-img-wrap a.button.added::after {
  content: '✓' !important;
  font-size: 1rem !important;
}

.woocommerce ul.products li.product .canele-card-img-wrap a.button:hover,
.woocommerce ul.products li.product .canele-card-img-wrap .add_to_cart_button:hover {
  background: var(--clr-primary-glow) !important;
  transform: scale(1.08) !important;
}

.woocommerce ul.products li.product .canele-card-img-wrap a.button.canele-bounce {
  animation: canele-bounce-add 0.45s ease-out !important;
}

/* ============================================================
   STICKY BAR NATIVA — barra fixa de rodapé mobile
   ============================================================ */

/* Resíduos de plugins WPClever removidos — garantia defensiva */
.woofc-area, .woofc-canvas, .woofc-cart-link,
.woofc-bar, .woofc-sticky, .woofc-count,
.woofc-menu-item { display: none !important; }

/* Cápsula flutuante — contêiner isolado, independente do Astra */
.cnl-cart-capsule-wrapper {
  position: fixed !important;
  bottom: 85px !important;
  left: 15px !important;
  right: 15px !important;
  width: calc(100% - 30px) !important;
  max-width: none !important;
  z-index: 9999 !important;
  box-sizing: border-box !important;
  transform: translateY(300%);
  transition: transform 0.35s cubic-bezier(0.34, 1.4, 0.64, 1);
  will-change: transform;
  pointer-events: none;
  padding: 0;
  margin: 0;
  background: transparent;
}

.cnl-cart-capsule-wrapper--visible {
  transform: translateY(0) !important;
  pointer-events: auto !important;
}

/* ── Cápsula flutuante: "Ver sacola" — layout vertical centrado ── */
.canele-sticky-bar__cta {
  border: none;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  width: 100%;
  box-sizing: border-box;
  background: var(--clr-primary);
  color: #fff;
  text-decoration: none;
  padding: 0.75rem 1.25rem;
  border-radius: 30px;
  min-height: 58px;
  box-shadow: 0 8px 32px hsl(19 56% 35% / 0.45), 0 2px 8px hsl(19 56% 35% / 0.3);
  transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
  text-align: center;
}
.canele-sticky-bar__cta:hover,
.canele-sticky-bar__cta:focus {
  background: var(--clr-primary-glow);
  color: #fff;
  text-decoration: none;
  outline: none;
  transform: translateY(-2px);
  box-shadow: 0 12px 36px hsl(19 56% 35% / 0.5), 0 4px 12px hsl(19 56% 35% / 0.35);
}
.canele-sticky-bar__cta:active {
  transform: translateY(0);
}

.canele-sticky-bar__cta-left {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.canele-sticky-bar__label {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.cnl-bag-icon {
  flex-shrink: 0;
  vertical-align: middle;
}

.cnl-trash-icon {
  display: block;
  flex-shrink: 0;
}

.canele-sticky-bar__count {
  font-size: 0.75rem;
  font-weight: 400;
  opacity: 0.88;
  letter-spacing: 0;
  line-height: 1.3;
}

/* Pill total dentro do contador — sem a bolha escura */
#cnl-pill-total {
  font-weight: 600;
  background: none;
  padding: 0;
  border-radius: 0;
  font-size: inherit;
  color: inherit;
}

.canele-sticky-bar__total {
  font-size: 1.05rem;
  font-weight: 800;
  white-space: nowrap;
  background: hsl(0 0% 0% / 0.18);
  border-radius: 20px;
  padding: 0.3rem 0.85rem;
  color: #fff;
}

/* ── Estado "abaixo do mínimo": cápsula âmbar ── */
.canele-sticky-bar__warning {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: hsl(45 100% 51%);
  color: hsl(30 60% 12%);
  padding: 0.9rem 1.25rem;
  border-radius: 30px;
  min-height: 58px;
  box-shadow: 0 8px 28px hsl(45 80% 40% / 0.4), 0 2px 8px hsl(45 80% 40% / 0.25);
}

.canele-sticky-bar__warn-icon {
  font-size: 1.3rem;
  flex-shrink: 0;
}

.canele-sticky-bar__warn-text {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  flex: 1;
  min-width: 0;
}
.canele-sticky-bar__warn-text strong {
  font-size: 0.875rem;
  font-weight: 700;
}
.canele-sticky-bar__warn-text span {
  font-size: 0.78rem;
  opacity: 0.75;
  display: none;
}

.canele-sticky-bar__warn-falta {
  font-size: 0.95rem;
  font-weight: 800;
  white-space: nowrap;
  background: hsl(45 100% 40% / 0.25);
  border-radius: 20px;
  padding: 0.2rem 0.65rem;
  color: hsl(30 60% 10%);
}

/* ============================================================
   SKELETON LOADING
   ============================================================ */
.canele-skeleton {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 1.5rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.canele-skeleton__card {
  display: flex;
  gap: 0.75rem;
  border-radius: var(--radius-xl);
  background: var(--clr-card);
  padding: 0.75rem;
  box-shadow: var(--shadow-card);
}

.canele-skeleton__lines {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-top: 0.25rem;
}

.canele-skeleton__line {
  height: 14px;
  border-radius: 4px;
  background: var(--clr-secondary);
  animation: canele-pulse 1.5s ease-in-out infinite;
}

.canele-skeleton__line--sm   { width: 33%; }
.canele-skeleton__line--md   { width: 100%; }
.canele-skeleton__line--lg   { width: 66%; }

.canele-skeleton__img {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-xl);
  background: var(--clr-secondary);
  flex-shrink: 0;
  animation: canele-pulse 1.5s ease-in-out infinite;
}

/* ============================================================
   BUSCA — campo expansível abaixo do header
   ============================================================ */
.canele-search-bar {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 1rem 0.75rem;
  animation: canele-fade-in 0.35s ease-out;
}

.canele-search-bar input {
  height: 44px;
  width: 100%;
  border-radius: var(--radius-xl);
  border: 1px solid var(--clr-border);
  background: var(--clr-card);
  padding: 0 1rem;
  font-size: 0.875rem;
  font-family: var(--font-body);
  color: var(--clr-fg);
  outline: none;
  transition: box-shadow 0.18s;
}

.canele-search-bar input:focus {
  box-shadow: 0 0 0 2px hsl(19 56% 40% / 0.3);
}

/* ============================================================
   SIDEBAR / BREADCRUMB / HEADER PAGE — removidos
   ============================================================ */
/* Botão flutuante do WPC Fly Cart — ocultamos; a barra "Ver carrinho" faz esse papel */
.woofc-count {
  display: none !important;
}

#secondary,
.widget-area,
.ast-right-sidebar,
.ast-left-sidebar,
.ast-breadcrumbs-wrapper,
.woocommerce-breadcrumb,
.ast-archive-description,
.woocommerce-products-header,
.ast-archive-title,
.woocommerce-result-count,
.woocommerce-ordering {
  display: none !important;
}

/* Força coluna única — elimina espaço fantasma de sidebar */
#primary.content-area,
#primary,
.ast-right-sidebar #primary,
.ast-left-sidebar #primary,
.ast-layout--right-sidebar #primary,
.ast-layout--left-sidebar #primary {
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Backup CSS: garante que na loja o container Astra seja full-width
   independente do body class gerado pela opção normal-width-container */
body.woocommerce #primary,
body.woocommerce-page #primary,
body.woocommerce.archive #primary,
body.woocommerce.tax-product_cat #primary {
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
}
body.woocommerce #secondary,
body.woocommerce-page #secondary,
body.woocommerce.archive #secondary {
  display: none !important;
}
/* Neutraliza o max-width do container Astra na loja */
body.woocommerce .ast-container,
body.woocommerce-page .ast-container,
body.woocommerce .entry-content-wrap,
body.woocommerce-page .entry-content-wrap {
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Títulos de seção de categoria — alinhados com os cards (mesmo recuo de 1rem) */
.canele-cat-section__title {
  display: block !important;
  font-size: 1.125rem !important;
  font-weight: 700 !important;
  max-width: var(--max-w) !important;
  margin: 2rem auto 0.75rem !important;
  padding: 0 1rem !important;
  color: var(--clr-fg) !important;
}

/* ============================================================
   FEATURED / MAIS PEDIDOS — grade 3×2
   ============================================================ */
.canele-featured {
  border-top: 1px solid var(--clr-border);
  padding: 0.65rem 0 0;
  max-width: var(--max-w);
  margin: 0 auto 0.25rem;
}

.canele-featured__inner {
  padding: 0;
}

.canele-featured__title {
  font-family: var(--font-display);
  font-size: 1.125rem;
  margin: 0 0 0.25rem;
  padding: 0 1rem;
}

/* Grade 3 colunas × 2 linhas (máx 6 itens) */
.canele-featured-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  padding: 0.5rem 1rem 1rem;
  list-style: none;
  margin: 0;
}

/* ── Card individual da grade ── */
.canele-feat-card {
  position: relative;
  border-radius: var(--radius-xl);
  background: var(--clr-card);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  overflow: visible;
  transition: box-shadow 0.2s;
}
.canele-feat-card:hover { box-shadow: var(--shadow-soft); }

/* Imagem do card de destaque */
.canele-feat-card__img-wrap {
  position: relative;
  width: 100%;
  height: 90px;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  overflow: hidden;
}
.canele-feat-card__img-wrap > a {
  display: block;
  width: 100%;
  height: 100%;
}
.canele-feat-card__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.2s, filter 0.2s;
}
.canele-feat-card.canele-oos .canele-feat-card__img-wrap img {
  opacity: 0.3;
  filter: grayscale(70%);
}

/* Botão + no card de destaque (espelha o do card principal) */
.canele-feat-card__img-wrap a.button,
.canele-feat-card__img-wrap .add_to_cart_button,
.canele-feat-card__img-wrap .button {
  position: absolute !important;
  bottom: -8px !important;
  right: -8px !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: var(--radius-full) !important;
  background: var(--clr-primary) !important;
  color: transparent !important;
  font-size: 0 !important;
  border: none !important;
  cursor: pointer !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  text-decoration: none !important;
  box-shadow: 0 3px 10px hsl(19 56% 40% / 0.5) !important;
  transition: background 0.18s, transform 0.15s !important;
  margin: 0 !important;
  line-height: 1 !important;
  min-height: unset !important;
  z-index: 3 !important;
}
.canele-feat-card__img-wrap a.button::after,
.canele-feat-card__img-wrap .add_to_cart_button::after {
  content: '+' !important;
  font-size: 1.375rem !important;
  font-weight: 300 !important;
  color: var(--clr-primary-fg) !important;
  line-height: 1 !important;
  font-family: var(--font-body) !important;
  display: block !important;
}
.canele-feat-card__img-wrap a.button.added::after { content: '✓' !important; font-size: 1rem !important; }
.canele-feat-card__img-wrap a.button:hover,
.canele-feat-card__img-wrap .add_to_cart_button:hover {
  background: var(--clr-primary-glow) !important;
  transform: scale(1.08) !important;
}
/* Variável: overlay intercepta, botão fica invisível */
.canele-feat-card__img-wrap .product_type_variable.add_to_cart_button {
  z-index: 0 !important;
  pointer-events: none !important;
}
/* Simples: fica acima do overlay */
.canele-feat-card__img-wrap .add_to_cart_button:not(.product_type_variable) {
  z-index: 3 !important;
}

/* Texto do card de destaque */
.canele-feat-card__body {
  padding: 0.5rem 0.5rem 0.65rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  flex: 1;
}
.canele-feat-card__title {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--clr-fg);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.canele-feat-card__title a {
  color: inherit;
  text-decoration: none;
}
.canele-feat-card .price {
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  color: var(--clr-fg) !important;
  margin: 0 !important;
}

/* Overlay cobre o card inteiro (z-index 1, acima do fundo, abaixo do botão +) */
.canele-feat-card .canele-card-overlay {
  border-radius: var(--radius-xl);
}


/* ============================================================
   FOOTER
   ============================================================ */
.site-footer,
#colophon {
  background: transparent !important;
  border-top: 1px solid var(--clr-border) !important;
  color: var(--clr-muted-fg) !important;
  text-align: center !important;
  padding: 1.5rem 1rem 1rem !important;
  font-size: 0.75rem !important;
  font-family: var(--font-body) !important;
  margin-bottom: 0 !important;
}

/* Remove espaço vazio excessivo gerado dinamicamente pelo Astra footer builder */
.site-above-footer-wrap { display: none !important; }
.site-primary-footer-wrap { padding-top: 0 !important; padding-bottom: 0 !important; }
.site-footer .ast-footer-navigation,
.site-footer .ast-builder-menu,
.site-footer [class*="ast-hfb-footer"] .site-footer-section:first-child { display: none !important; }
/* Força a seção do copyright a ocupar largura total e centralizar */
.ast-footer-copyright {
  width: 100% !important;
  text-align: center !important;
  justify-content: center !important;
  flex-direction: column !important;
}

/* Ícones de redes sociais */
.cnl-social-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.25rem;
}
.cnl-social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  min-width: 48px;
  border-radius: 50%;
  background: var(--clr-primary);
  color: #fff;
  line-height: 0;
  flex-shrink: 0;
  transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
}
.cnl-social-link:hover,
.cnl-social-link:focus-visible {
  background: hsl(19 56% 28%);
  transform: scale(1.1);
  box-shadow: 0 4px 14px hsl(19 56% 35% / 0.38);
  outline: none;
}

/* Botão flutuante WhatsApp (Viví) */
#cnl-wa-vivi {
  position: fixed;
  left: 1rem;
  bottom: 1.5rem;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  text-decoration: none;
  box-shadow: 0 4px 18px rgba(37, 211, 102, 0.45);
  z-index: 10000;
  transition: bottom 0.3s cubic-bezier(0.4,0,0.2,1), transform 0.15s, box-shadow 0.15s;
}
#cnl-wa-vivi:hover,
#cnl-wa-vivi:focus-visible {
  transform: scale(1.09);
  box-shadow: 0 6px 22px rgba(37, 211, 102, 0.58);
  outline: none;
  text-decoration: none;
  color: #fff;
}
#cnl-wa-vivi.cnl-wa-above-bar {
  bottom: calc(85px + 62px + 0.75rem);
}

/* ============================================================
   PÁGINA DE PRODUTO INDIVIDUAL
   ============================================================ */
.single-product {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 1rem;
}

.single-product .woocommerce-product-gallery {
  border-radius: var(--radius-2xl);
  overflow: hidden;
}

.single-product .product_title {
  font-family: var(--font-display) !important;
  font-size: 1.5rem !important;
  font-weight: 600 !important;
  color: var(--clr-fg) !important;
}

.single-product .price .woocommerce-Price-amount {
  color: var(--clr-primary) !important;
  font-size: 1.25rem !important;
  font-weight: 600 !important;
}

.single-product .single_add_to_cart_button {
  height: 48px !important;
  width: 100% !important;
  border-radius: var(--radius-full) !important;
  background: var(--clr-primary) !important;
  color: var(--clr-primary-fg) !important;
  font-family: var(--font-body) !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  border: none !important;
  cursor: pointer !important;
  transition: background 0.18s !important;
}

.single-product .single_add_to_cart_button:hover {
  background: var(--clr-primary-glow) !important;
}

/* ============================================================
   WOOCOMMERCE — CART, CHECKOUT
   ============================================================ */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #place_order {
  background: var(--clr-primary) !important;
  color: var(--clr-primary-fg) !important;
  border-radius: var(--radius-xl) !important;
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  border: none !important;
  transition: background 0.18s !important;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover {
  background: var(--clr-primary-glow) !important;
}

.woocommerce-cart-form th,
.woocommerce-checkout h3,
.woocommerce-checkout h2 {
  font-family: var(--font-display) !important;
  color: var(--clr-fg) !important;
}

/* ============================================================
   CARD OVERLAY — clique em área total do card
   ============================================================ */

/* Overlay transparente cobre o card inteiro (z-index 1) */
.canele-card-overlay {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  cursor: pointer !important;
  background: transparent !important;
  -webkit-tap-highlight-color: transparent !important;
  border-radius: var(--radius-xl) !important;
}

/* Botão + de produto simples fica ACIMA do overlay */
.woocommerce ul.products li.product .canele-card-img-wrap
  .add_to_cart_button:not(.product_type_variable) {
  z-index: 3 !important;
}

/* Link "Selecionar opções" de produto variável fica ABAIXO do overlay
   (o overlay intercepta e abre o Bottom Sheet) */
.woocommerce ul.products li.product .canele-card-img-wrap
  .product_type_variable.add_to_cart_button {
  z-index: 0 !important;
  pointer-events: none !important;
}

/* ============================================================
   BOTTOM SHEET / MODAL (Quick Shop)
   ============================================================ */

#canele-bottom-sheet {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99999;
}
#canele-bottom-sheet.csb-open { display: block; }

/* Fundo escuro */
.csb-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.48);
  animation: canele-fade-in 0.22s ease;
}

/* ── Painel: mobile = bottom sheet ── */
.csb-panel {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  max-height: 88vh;
  background: var(--clr-card);
  border-radius: 16px 16px 0 0;
  overflow-y: auto;
  animation: canele-slide-up 0.3s cubic-bezier(0.32, 0.72, 0, 1);
  padding: 0 1rem calc(env(safe-area-inset-bottom, 0px) + 1.5rem);
  z-index: 1;
}

/* ── Painel: desktop = popup centralizado ── */
@media (min-width: 640px) {
  .csb-panel {
    bottom: auto;
    top: 50%;
    left: 50%;
    right: auto;
    transform: translate(-50%, -50%);
    width: min(480px, 92vw);
    max-height: 85vh;
    border-radius: 16px;
    animation: canele-scale-in 0.22s ease;
    padding: 1.25rem;
  }
}

/* Quickshop (mobile): painel cobre a tela inteira de baixo a cima, parando
   logo abaixo da status bar (safe-area-inset-top). Com top+bottom definidos,
   a height é calculada automaticamente — consistente em todos os produtos.
   Não afeta a sacola (#cnl-cart-sheet) nem o popup desktop (min-width:640px). */
@media (max-width: 639px) {
  #canele-bottom-sheet .csb-panel {
    top: env(safe-area-inset-top, 0px);
    max-height: none;
  }
}

/* Indicador de arrasto (mobile) */
.csb-drag-handle {
  width: 40px;
  height: 4px;
  background: var(--clr-border);
  border-radius: var(--radius-full);
  margin: 0.75rem auto 0.25rem;
}
@media (min-width: 640px) { .csb-drag-handle { display: none; } }

/* Seta de swipe (chevron) — PURAMENTE decorativa, centralizada logo abaixo da
   alça de arrasto, fundo transparente, NÃO clicável. Sinaliza "arraste p/ fechar".
   Vale p/ o quickshop (.csb-swipe-hint) e a sacola (.cnl-cs-swipe-hint). */
.csb-swipe-hint,
.cnl-cs-swipe-hint {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 0.15rem;
  color: var(--clr-muted-fg);
  opacity: 0.5;
  pointer-events: none;   /* mobile: decorativa (sinaliza swipe), não clicável */
}
.csb-swipe-hint svg,
.cnl-cs-swipe-hint svg { display: block; pointer-events: none; }
/* Desktop = popup com mouse: a MESMA seta vira um fechar clicável (centralizado). */
@media (min-width: 640px) {
  .csb-swipe-hint,
  .cnl-cs-swipe-hint {
    pointer-events: auto;
    cursor: pointer;
    opacity: 0.7;
    padding: 0.15rem 0.75rem;
    border-radius: var(--radius-full);
    transition: opacity 0.15s, color 0.15s;
  }
  .csb-swipe-hint:hover,
  .cnl-cs-swipe-hint:hover { opacity: 1; color: var(--clr-fg); }
}

/* ── Área de conteúdo ── */
.csb-content {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding-top: 0.5rem;
}

.csb-img-wrap { text-align: center; }
.csb-img-wrap img.csb-img {
  max-height: 220px;
  width: 100%;
  object-fit: cover;
  border-radius: var(--radius-xl);
  display: block;
}

/* ── Quickshop: botão fechar + imagem full-bleed (sacola não tem imagem — tudo escopado ao #canele-bottom-sheet) ── */
#canele-bottom-sheet .csb-close-btn {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 3;
  width: 36px;
  height: 36px;
  min-width: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #fff;
  padding: 0;
  box-shadow: none;
}
#canele-bottom-sheet .csb-close-btn:hover,
#canele-bottom-sheet .csb-close-btn:focus,
#canele-bottom-sheet .csb-close-btn:active {
  background: rgba(0, 0, 0, 0.45);
  background-color: rgba(0, 0, 0, 0.45);
  color: #fff;
  box-shadow: none;
  outline: none;
}
#canele-bottom-sheet .csb-content {
  padding-top: 0;
}
#canele-bottom-sheet .csb-img-wrap {
  margin: 0 -1rem;
}
#canele-bottom-sheet .csb-img-wrap:empty {
  display: none;
}
#canele-bottom-sheet .csb-img-wrap img.csb-img {
  border-radius: 16px 16px 0 0;
  max-height: 260px;
}
@media (min-width: 640px) {
  #canele-bottom-sheet .csb-img-wrap {
    margin: -1.25rem -1.25rem 0;
  }
  #canele-bottom-sheet .csb-img-wrap img.csb-img {
    max-height: 280px;
  }
}

/* ── Quickshop: carrossel foto + vídeo ──────────────────────────────────── */
.csb-carousel {
  display: flex;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.csb-carousel::-webkit-scrollbar { display: none; }
.csb-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
}
.csb-slide--video {
  background: #000;
  overflow: hidden;
}
.csb-yt-hold,
.csb-yt-frame {
  width: 100%;
  height: 220px;
  display: block;
  border: 0;
  background: #000;
}
.csb-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 0.45rem 0 0;
}
.csb-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--clr-border);
  transition: background 0.2s;
  cursor: pointer;
}
.csb-dot--on { background: var(--clr-primary); }

/* Full-bleed no quickshop (mesmo comportamento do .csb-img-wrap) */
#canele-bottom-sheet .csb-carousel {
  margin: 0 -1rem;
}
#canele-bottom-sheet .csb-slide--img img.csb-img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  display: block;
  border-radius: 16px 16px 0 0;
}
#canele-bottom-sheet .csb-slide--video {
  border-radius: 16px 16px 0 0;
}
#canele-bottom-sheet .csb-yt-hold,
#canele-bottom-sheet .csb-yt-frame {
  height: 260px;
}
@media (min-width: 640px) {
  #canele-bottom-sheet .csb-carousel {
    margin: -1.25rem -1.25rem 0;
  }
  #canele-bottom-sheet .csb-slide--img img.csb-img {
    height: 280px;
  }
  #canele-bottom-sheet .csb-yt-hold,
  #canele-bottom-sheet .csb-yt-frame {
    height: 280px;
  }
}

.csb-meta { display: flex; flex-direction: column; gap: 0.3rem; }

.csb-title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--clr-fg);
  margin: 0;
}

.csb-price .woocommerce-Price-amount,
.csb-price .amount {
  color: var(--clr-primary);
  font-weight: 700;
  font-size: 1.05rem;
}

.csb-desc {
  font-size: 0.85rem;
  color: var(--clr-muted-fg);
  line-height: 1.5;
  margin: 0;
}
.csb-desc p { color: inherit; margin: 0; }

/* ── Variações ── */
.csb-attrs { display: flex; flex-direction: column; gap: 0.75rem; }
.csb-attr-group { display: flex; flex-direction: column; gap: 0.35rem; }

.csb-attr-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--clr-muted-fg);
}
.csb-attr-badge {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 4px;
  padding: 2px 5px;
  line-height: 1.4;
  flex-shrink: 0;
}
.csb-attr-badge--required { background: hsl(25 30% 18%); color: #fff; }
.csb-attr-badge--done { background: transparent; color: #22a75c; padding: 0; font-size: 0.85rem; letter-spacing: 0; }

/* ── Cabeçalho iFood para Seleção Única ── */
.csb-attr-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: hsl(30 12% 94%);
  padding: 0.45rem 0.75rem;
  border-radius: 6px;
}
.csb-attr-header-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.csb-attr-header-title {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--clr-fg);
}
.csb-attr-header-sub {
  font-size: 0.75rem;
  color: var(--clr-muted-fg);
}

.csb-attr-select {
  height: 44px;
  border: 1.5px solid var(--clr-border);
  border-radius: var(--radius-xl);
  background: var(--clr-bg);
  padding: 0 2rem 0 0.75rem;
  font-size: 0.9rem;
  font-family: var(--font-body);
  color: var(--clr-fg);
  outline: none;
  cursor: pointer;
  transition: border-color 0.15s;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23786960' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  width: 100%;
}
.csb-attr-select:focus { border-color: var(--clr-primary); }

/* ── Radio buttons (Seleção Única e Kit Celebra) ── */
.csb-radio-group {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.csb-radio-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  cursor: pointer;
  padding: 0.6rem 0;
  font-size: 0.9rem;
  color: var(--clr-fg);
  user-select: none;
  border-bottom: 1px solid var(--clr-border);
}
.csb-radio-opt:last-child { border-bottom: none; }
/* Corpo do item (label + preço opcional) — cresce para empurrar o indicator para a direita */
.csb-radio-opt-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.csb-radio-opt-lbl { /* fallback para itens sem wrapper (Kit) */ flex: 1; }
.csb-radio-opt-price {
  font-size: 0.78rem;
  color: var(--clr-muted-fg);
}
.csb-radio-opt-price .woocommerce-Price-amount,
.csb-radio-opt-price .price { font-size: 0.78rem; }
.csb-radio-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.csb-radio-indicator {
  width: 20px;
  height: 20px;
  border: 2px solid var(--clr-border);
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
  transition: border-color 0.15s;
}
.csb-radio-indicator::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 10px;
  height: 10px;
  background: var(--clr-primary);
  border-radius: 50%;
  transition: transform 0.15s;
}
/* ~ (general sibling) permite elementos entre o input e o indicator no DOM */
.csb-radio-input:checked ~ .csb-radio-indicator { border-color: var(--clr-primary); }
.csb-radio-input:checked ~ .csb-radio-indicator::after { transform: translate(-50%, -50%) scale(1); }
.csb-radio-opt--oos { opacity: 0.45; }

/* ── Grupos de Opcionais (estilo iFood: recheios/adicionais) ── */
.csb-opt-groups { display: flex; flex-direction: column; gap: 0.9rem; }
.csb-opt-group { display: flex; flex-direction: column; gap: 0.25rem; }
.csb-opt-group-header {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  background: hsl(30 12% 94%);
  padding: 0.45rem 0.75rem;
  border-radius: 6px;
}
.csb-opt-group-title {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--clr-fg);
}
.csb-opt-group-rule {
  font-size: 0.75rem;
  color: var(--clr-muted-fg);
}
.csb-opt-group-items {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.csb-opt-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  cursor: pointer;
  padding: 0.6rem 0;
  font-size: 0.9rem;
  color: var(--clr-fg);
  user-select: none;
  border-bottom: 1px solid var(--clr-border);
}
.csb-opt-item:last-child { border-bottom: none; }
.csb-opt-item--disabled { opacity: 0.45; cursor: not-allowed; }
.csb-opt-item-lbl { flex: 1; }
.csb-opt-item-price {
  font-size: 0.78rem;
  color: var(--clr-muted-fg);
  flex-shrink: 0;
}
.csb-opt-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.csb-opt-indicator {
  width: 20px;
  height: 20px;
  border: 2px solid var(--clr-border);
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
  transition: border-color 0.15s;
}
.csb-opt-input[type="checkbox"] ~ .csb-opt-indicator { border-radius: 4px; }
.csb-opt-indicator::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 10px;
  height: 10px;
  background: var(--clr-primary);
  border-radius: 50%;
  transition: transform 0.15s;
}
.csb-opt-input[type="checkbox"] ~ .csb-opt-indicator::after { border-radius: 2px; width: 11px; height: 11px; }
.csb-opt-input:checked ~ .csb-opt-indicator { border-color: var(--clr-primary); }
.csb-opt-input:checked ~ .csb-opt-indicator::after { transform: translate(-50%, -50%) scale(1); }
.csb-opt-input:disabled ~ .csb-opt-indicator { opacity: 0.35; }

/* Rodapé: aviso de opcional obrigatório pendente (mesmo padrão do csb-ms-progress) */
.csb-opt-hint {
  flex-basis: 100%;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--clr-primary);
}
.csb-opt-hint[hidden] { display: none; }

/* ── Rodapé: quantidade + botão ── */
.csb-footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--clr-border);
}

/* Monte o Seu — resumo sticky no rodapé (progresso + total c/ desconto) */
.csb-ms-summary {
  flex-basis: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.csb-ms-summary[hidden] { display: none; }
.csb-ms-progress {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--clr-muted-fg);
}
.csb-ms-progress--warn { color: var(--clr-primary); }
.csb-ms-total { font-size: 0.9rem; }
.csb-ms-total-old {
  text-decoration: line-through;
  color: var(--clr-muted-fg);
  font-size: 0.8rem;
}
.csb-ms-total-new {
  font-weight: 700;
  color: var(--clr-fg);
}
.csb-ms-total-off {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--clr-primary);
  background: hsl(19, 40%, 92%);
  padding: 1px 6px;
  border-radius: 4px;
}

.csb-qty-row {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  background: var(--clr-secondary);
  border-radius: var(--radius-full);
  padding: 4px;
  flex-shrink: 0;
}

.csb-qty-btn {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  border-radius: var(--radius-full);
  font-size: 1.1rem;
  cursor: pointer;
  color: var(--clr-fg);
  display: grid;
  place-items: center;
  transition: background 0.15s;
  line-height: 1;
}
.csb-qty-btn:hover { background: var(--clr-border); }

.csb-qty-val {
  min-width: 24px;
  text-align: center;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--clr-fg);
}

/* Botão "Adicionar à Sacola" */
.csb-add-btn {
  flex: 1;
  height: 48px;
  background: var(--clr-primary);
  color: var(--clr-primary-fg);
  border: none;
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s, transform 0.1s;
}
.csb-add-btn:not(:disabled):hover {
  background: var(--clr-primary-glow);
  transform: translateY(-1px);
}
.csb-add-btn:disabled {
  background: var(--clr-border);
  color: var(--clr-muted-fg);
  cursor: not-allowed;
}

/* ── Monte o Seu: seções por categoria (nível-1 colapsável) ── */
.csb-ms { display: flex; flex-direction: column; gap: 0.6rem; }
.csb-ms-cat {
  border: 1px solid var(--clr-border);
  border-radius: 12px;
  overflow: hidden;
}
/* Cabeçalhos colapsáveis (categoria nível-1 e caixa nível-2): fundo cinza-quente */
.csb-ms-cat-head,
.csb-ms-box-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  margin: 0;
  padding: 1rem 0.85rem;
  background: var(--clr-secondary);
  color: var(--clr-fg);
  border: none;
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  transition: background 0.15s;
}
.csb-ms-cat-head:hover,
.csb-ms-box-head:hover {
  background: var(--clr-border);
  color: var(--clr-fg);
}
/* Sobrescreve o estilo de <button> do tema (evita terracota forte no foco/ativo) */
.csb-ms-cat-head:focus,
.csb-ms-box-head:focus,
.csb-ms-cat-head:active,
.csb-ms-box-head:active {
  background: var(--clr-secondary);
  color: var(--clr-fg);
  box-shadow: none;
  outline: none;
}
/* Estado EXPANDIDO: terracota bem suave/dessaturado (em vez do tom forte) */
.csb-ms-cat[data-collapsed="0"] > .csb-ms-cat-head,
.csb-ms-box[data-collapsed="0"] .csb-ms-box-head,
.csb-ms-cat[data-collapsed="0"] > .csb-ms-cat-head:focus,
.csb-ms-box[data-collapsed="0"] .csb-ms-box-head:focus {
  background: hsl(19, 40%, 92%);
  color: var(--clr-fg);
}
.csb-ms-cat-title {
  flex: 1;
  min-width: 0;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--clr-fg);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.csb-ms-cat-chevron {
  flex-shrink: 0;
  width: 12px;
  height: 8px;
  background: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23786960' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  transition: transform 0.2s;
}
.csb-ms-cat[data-collapsed="0"] > .csb-ms-cat-head .csb-ms-cat-chevron { transform: rotate(180deg); }
.csb-ms-cat-body { padding: 0 0.75rem; }
.csb-ms-cat[data-collapsed="1"] > .csb-ms-cat-body { display: none; }
/* Caixas nível-2 dentro do corpo da categoria respiram um pouco */
.csb-ms-cat-body > .csb-ms-box:first-child { margin-top: 0.6rem; }
.csb-ms-cat-body > .csb-ms-box:last-child  { margin-bottom: 0.6rem; }
.csb-ms-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.85rem 0;
}
.csb-ms-row + .csb-ms-row { border-top: 1px solid var(--clr-border); }
.csb-ms-row-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.csb-ms-row-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--clr-fg);
}
.csb-ms-row-price .woocommerce-Price-amount,
.csb-ms-row-price .amount {
  color: var(--clr-primary);
  font-weight: 700;
  font-size: 0.85rem;
}
.csb-ms-row-tag {
  align-self: flex-start;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--clr-muted-fg);
  background: var(--clr-secondary);
  padding: 2px 6px;
  border-radius: 4px;
}
.csb-ms-flavor {
  height: 38px;
  max-width: 240px;
  border: 1.5px solid var(--clr-border);
  border-radius: var(--radius-xl);
  background: var(--clr-bg);
  padding: 0 2rem 0 0.6rem;
  font-size: 0.82rem;
  font-family: var(--font-body);
  color: var(--clr-fg);
  outline: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23786960' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.6rem center;
}
.csb-ms-flavor:focus { border-color: var(--clr-primary); }

.csb-ms-qty {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  background: var(--clr-secondary);
  border-radius: var(--radius-full);
  padding: 3px;
  flex-shrink: 0;
}
.csb-ms-qty-btn {
  width: 30px;
  height: 30px;
  border: none;
  background: transparent;
  border-radius: var(--radius-full);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  color: var(--clr-fg);
  display: grid;
  place-items: center;
  transition: background 0.15s;
}
.csb-ms-qty-btn:not(:disabled):hover { background: var(--clr-border); }
.csb-ms-qty-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.csb-ms-qty-val {
  min-width: 22px;
  text-align: center;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--clr-fg);
}
.csb-ms-row--oos { opacity: 0.65; }
.csb-ms-row--oos .csb-ms-row-name,
.csb-ms-row--disabled .csb-ms-row-name { color: var(--clr-muted-fg); }

/* Monte o Seu — miniatura por linha (variação → pai → placeholder) */
.csb-ms-row-img {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  object-fit: cover;
  border-radius: 10px;
  background: var(--clr-secondary);
}

/* Monte o Seu — caixa nível-2 (acordeão por produto, colapsada por padrão) */
.csb-ms-box {
  border: 1px solid var(--clr-border);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 0.5rem;
}
/* layout/fundo do .csb-ms-box-head vêm da regra compartilhada com .csb-ms-cat-head */
.csb-ms-box-img {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  object-fit: cover;
  border-radius: 10px;
  background: var(--clr-secondary);
}
.csb-ms-box-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.csb-ms-box-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--clr-fg);
}
.csb-ms-box-price .woocommerce-Price-amount,
.csb-ms-box-price .amount {
  color: var(--clr-primary);
  font-weight: 700;
  font-size: 0.82rem;
}
.csb-ms-box-chevron {
  flex-shrink: 0;
  width: 12px;
  height: 8px;
  background: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23786960' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  transition: transform 0.2s;
}
.csb-ms-box[data-collapsed="0"] .csb-ms-box-chevron { transform: rotate(180deg); }
.csb-ms-box-body {
  padding: 0 0.6rem;
  border-top: 1px solid var(--clr-border);
}
.csb-ms-box[data-collapsed="1"] .csb-ms-box-body { display: none; }
.csb-ms-box-body .csb-ms-row:first-child { border-top: none; }

/* ── Loading dots ── */
.csb-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 2.5rem 0;
}
.csb-loading span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--clr-primary);
  animation: canele-pulse 1.2s ease-in-out infinite;
}
.csb-loading span:nth-child(2) { animation-delay: 0.2s; }
.csb-loading span:nth-child(3) { animation-delay: 0.4s; }

.csb-error {
  color: var(--clr-muted-fg);
  text-align: center;
  padding: 2rem 0;
  font-size: 0.9rem;
}

/* ============================================================
   CHECKOUT — Estilo estilo aplicativo (mobile-first)
   ============================================================ */

/* Layout geral da página de checkout */
body.woocommerce-checkout #primary,
body.woocommerce-checkout .entry-content {
  max-width: var(--max-w) !important;
  margin: 0 auto !important;
  padding: 0 1rem 6rem !important;
}

body.woocommerce-checkout .woocommerce {
  max-width: 100% !important;
}

/* Esconde título "Finalizar compra" */
body.woocommerce-checkout h1.entry-title,
body.woocommerce-checkout .woocommerce-checkout h3,
body.woocommerce-checkout .post-title {
  display: none !important;
}

/* ============================================================
   CHECKOUT WIZARD — 3 Etapas
   ============================================================ */

/* Wrapper geral */
.cnl-wizard-wrap {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 1rem 6rem;
}

/* ── Indicador de etapas ── */
.cnl-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin: 1rem 0 1.5rem;
}

.cnl-steps__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  flex: 1;
  position: relative;
}

.cnl-steps__num {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: var(--clr-border);
  color: var(--clr-muted-fg);
  font-size: 0.85rem;
  font-weight: 700;
  display: grid;
  place-items: center;
  transition: background 0.25s, color 0.25s;
}

.cnl-steps__lbl {
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--clr-muted-fg);
  white-space: nowrap;
  transition: color 0.25s;
}

.cnl-steps__sep {
  flex: 1;
  height: 2px;
  background: var(--clr-border);
  margin-bottom: 1.25rem;
  transition: background 0.25s;
}

.cnl-steps__item--active .cnl-steps__num {
  background: var(--clr-primary);
  color: var(--clr-primary-fg);
  box-shadow: 0 0 0 4px hsl(19 56% 40% / 0.15);
}
.cnl-steps__item--active .cnl-steps__lbl { color: var(--clr-primary); font-weight: 600; }

.cnl-steps__item--done .cnl-steps__num {
  background: var(--clr-accent);
  color: #fff;
}
.cnl-steps__item--done .cnl-steps__lbl { color: var(--clr-accent); }
.cnl-steps__item--done + .cnl-steps__sep { background: var(--clr-accent); }

/* ── Bloco de cada etapa ── */
.cnl-step {
  opacity: 0;
  transform: translateX(24px);
  transition: opacity 0.28s ease, transform 0.28s ease;
}

.cnl-step--active {
  opacity: 1;
  transform: translateX(0);
  display: block;
}

.cnl-step[hidden] { display: none !important; }

/* ── Card interno de cada etapa ── */
.cnl-step__card {
  background: var(--clr-card);
  border-radius: var(--radius-2xl);
  padding: 1.25rem;
  margin-bottom: 1rem;
  box-shadow: var(--shadow-card);
  border: 1px solid var(--clr-border);
}

.cnl-step__title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--clr-fg);
  margin: 0 0 0.25rem;
}

.cnl-step__desc {
  font-size: 0.85rem;
  color: var(--clr-muted-fg);
  margin: 0 0 1.25rem;
}

/* ── Botões de navegação ── */
.cnl-btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 56px;
  width: 100%;
  border-radius: var(--radius-full);
  background: var(--clr-primary);
  color: var(--clr-primary-fg);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: background 0.18s, transform 0.1s;
  box-shadow: 0 4px 16px hsl(19 56% 40% / 0.3);
  letter-spacing: 0.01em;
  margin-bottom: 0.5rem;
}
.cnl-btn-primary:hover { background: var(--clr-primary-glow); transform: translateY(-1px); }
.cnl-btn-primary:active { transform: translateY(0); }

.cnl-step__nav {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.cnl-btn-back {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  height: 44px;
  padding: 0 1rem;
  background: var(--clr-secondary);
  border: none;
  border-radius: var(--radius-full);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--clr-muted-fg);
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
}
.cnl-btn-back:hover { background: var(--clr-border); color: var(--clr-fg); }

.cnl-step__nav .cnl-btn-next { flex: 1; margin-bottom: 0; }

/* Nav com apenas botão Voltar (etapa 2 usa o Place Order do WooCommerce) */
.cnl-step__nav--back-only { justify-content: flex-start; margin-top: 0.5rem; }

/* Card de pagamento — separa visualmente dos cards de entrega */
.cnl-step__card--payment { margin-top: 0.75rem; }

/* ── E-mail toggle ── */
.cnl-email-toggle-wrap { margin-top: 0.75rem; }

.cnl-email-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: 1.5px dashed var(--clr-border);
  border-radius: var(--radius-xl);
  padding: 0.6rem 1rem;
  font-size: 0.85rem;
  color: var(--clr-muted-fg);
  cursor: pointer;
  width: 100%;
  text-align: left;
  transition: border-color 0.15s, color 0.15s;
}
.cnl-email-toggle:hover { border-color: var(--clr-primary); color: var(--clr-primary); }

.cnl-email-toggle__arrow {
  margin-left: auto;
  font-size: 1.1rem;
  line-height: 1;
}

.cnl-email-field { margin-top: 0.75rem; }

/* ── Cards de entrega ── */
.cnl-delivery-opts {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.cnl-delivery-opt {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 1rem;
  background: var(--clr-bg);
  border: 2px solid var(--clr-border);
  border-radius: var(--radius-xl);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.18s, background 0.18s, box-shadow 0.18s;
  width: 100%;
}

.cnl-delivery-opt:hover {
  border-color: var(--clr-primary);
  background: hsl(19 56% 40% / 0.04);
}

.cnl-delivery-opt--selected {
  border-color: var(--clr-primary);
  background: hsl(19 56% 40% / 0.06);
  box-shadow: 0 0 0 3px hsl(19 56% 40% / 0.12);
}

.cnl-delivery-opt__icon {
  font-size: 1.5rem;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-xl);
  background: var(--clr-secondary);
  display: grid;
  place-items: center;
}

.cnl-delivery-opt__body {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  flex: 1;
}

.cnl-delivery-opt__name {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--clr-fg);
}

.cnl-delivery-opt__desc {
  font-size: 0.8rem;
  color: var(--clr-muted-fg);
}

.cnl-delivery-opt__check {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--clr-border);
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s;
  display: grid;
  place-items: center;
}

.cnl-delivery-opt--selected .cnl-delivery-opt__check {
  background: var(--clr-primary);
  border-color: var(--clr-primary);
}
.cnl-delivery-opt--selected .cnl-delivery-opt__check::after {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
}

.cnl-delivery-error {
  color: #c0392b;
  font-size: 0.85rem;
  font-weight: 500;
  margin: 0;
  padding: 0.5rem 0;
}

/* Aviso de fechamento excepcional — Tela 2 do checkout */
.cnl-loja-fechada-notice {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: var(--clr-secondary);
  border: 1px solid hsl(19 56% 40% / 0.45);
  border-radius: var(--radius-xl);
  margin-bottom: 1rem;
  font-size: 0.875rem;
  color: var(--clr-fg);
  line-height: 1.45;
}
.cnl-loja-fechada-notice__icon {
  flex-shrink: 0;
  font-size: 1rem;
  line-height: 1.45;
}
.cnl-loja-fechada-notice__text strong {
  color: var(--clr-primary);
}

/* ── Campos de endereço dentro do wizard ── */
.cnl-address-fields__inner {
  padding-top: 1rem;
  border-top: 1px solid var(--clr-border);
  margin-top: 0;
}

/* ── Hint proativo do endereço (o que falta pro frete calcular) ── */
/* clear: both — os últimos campos de .cnl-address-fields__inner (Cidade/Estado) são
   .form-row-first/.form-row-last flutuantes no desktop (ver regra mais abaixo). Sem
   clear, .cnl-address-hint (seguinte, em fluxo normal) some espremido na estreita
   sobra de espaço entre os dois campos flutuantes — sintoma: texto quebrando letra a
   letra. No mobile os campos empilham (float: none), então nunca há float pra limpar
   — clear: both não tem efeito nenhum ali, mas precisa continuar aqui pro desktop. */
.cnl-address-hint {
  clear: both;
  margin: 0.75rem 0 0;
  padding: 0.65rem 0.875rem;
  background: var(--clr-secondary);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-xl);
  font-size: 0.85rem;
  color: var(--clr-muted-fg);
}
.cnl-address-hint[hidden] { display: none !important; }

/* ── Busca reversa de CEP ("Não sei meu CEP") ── */
/* margin-bottom — .form-row (campo Rua, logo abaixo) só tem margin-top:0 (só usa
   bottom-margin pra espaçar do PRÓXIMO campo, ver ".woocommerce-checkout .form-row"),
   então sem isso o link fica colado no campo seguinte. Reforçado no mobile (ver media
   query mais abaixo) — é onde fica mais apertado. */
.cnl-cep-reverse-toggle {
  display: inline-block;
  margin: 0.4rem 0 0.625rem;
  padding: 0;
  background: none;
  border: none;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--clr-primary);
  text-decoration: underline;
  cursor: pointer;
}
.cnl-cep-reverse-toggle:hover,
.cnl-cep-reverse-toggle:focus,
.cnl-cep-reverse-toggle:focus-visible,
.cnl-cep-reverse-toggle:active {
  color: var(--clr-primary);
  background: none;
}

.cnl-cep-reverse-form {
  margin-top: 0.625rem;
  padding: 0.875rem;
  background: var(--clr-secondary);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-xl);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.cnl-cep-reverse-form[hidden] { display: none !important; }

.cnl-cep-reverse-form__row {
  display: flex;
  gap: 0.5rem;
}

.cnl-cep-reverse-form__uf {
  flex: 0 0 4.5rem;
}

.cnl-cep-reverse-form__cidade,
.cnl-cep-reverse-form__rua {
  flex: 1;
  min-width: 0;
}

.cnl-cep-reverse-form__buscar {
  align-self: flex-start;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--clr-primary);
  background: none;
  border: 1.5px solid var(--clr-primary);
  border-radius: var(--radius-xl);
  padding: 0.5em 1.1em;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.cnl-cep-reverse-form__buscar:hover,
.cnl-cep-reverse-form__buscar:focus,
.cnl-cep-reverse-form__buscar:focus-visible,
.cnl-cep-reverse-form__buscar:active {
  background: var(--clr-primary);
  color: #fff;
}
.cnl-cep-reverse-form__buscar:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  background: none;
  color: var(--clr-primary);
}

.cnl-cep-reverse-form__msg {
  margin: 0;
  font-size: 0.8rem;
  color: var(--clr-muted-fg);
}
.cnl-cep-reverse-form__msg[hidden] { display: none !important; }

.cnl-cep-reverse-results {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-xl);
  background: var(--clr-card);
}
.cnl-cep-reverse-results[hidden] { display: none !important; }

.cnl-cep-reverse-results__item {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.6rem 0.75rem;
  cursor: pointer;
  border-bottom: 1px solid var(--clr-border);
  transition: background 0.12s;
}
.cnl-cep-reverse-results__item:last-child { border-bottom: none; }
.cnl-cep-reverse-results__item:hover,
.cnl-cep-reverse-results__item:focus,
.cnl-cep-reverse-results__item:focus-visible {
  background: var(--clr-card);
  filter: brightness(0.97);
  outline: none;
}

.cnl-cep-reverse-results__rua {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--clr-fg);
}

.cnl-cep-reverse-results__meta {
  font-size: 0.78rem;
  color: var(--clr-muted-fg);
}

/* ── Status/fallback do cálculo de frete (Entrega no Endereço) ── */
.cnl-frete-status {
  margin: 0.75rem 0 0;
  padding: 0.65rem 0.875rem;
  background: hsl(19 56% 40% / 0.06);
  border: 1px solid hsl(19 56% 40% / 0.25);
  border-radius: var(--radius-xl);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--clr-primary);
}
.cnl-frete-status[hidden] { display: none !important; }

.cnl-frete-fallback {
  margin-top: 0.75rem;
  padding: 0.875rem 1rem;
  background: var(--clr-secondary);
  border: 1px solid hsl(19 56% 40% / 0.35);
  border-radius: var(--radius-xl);
}
.cnl-frete-fallback[hidden] { display: none !important; }

.cnl-frete-fallback__msg {
  margin: 0 0 0.75rem;
  font-size: 0.85rem;
  color: var(--clr-fg);
  line-height: 1.45;
}

.cnl-frete-fallback__actions {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.cnl-frete-fallback__btn {
  padding: 0.6rem 1rem;
  background: var(--clr-primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-xl);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}
/* Astra Customizer injeta button:hover { background-color: var(--ast-global-color-1) } —
   sobrescrever explicitamente em todo estado interativo (ver known-issues.md). */
.cnl-frete-fallback__btn:hover,
.cnl-frete-fallback__btn:focus,
.cnl-frete-fallback__btn:focus-visible,
.cnl-frete-fallback__btn:active {
  background: var(--clr-primary);
  color: #fff;
  opacity: 0.9;
}

.cnl-frete-combinar-wrap {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: var(--clr-muted-fg);
  cursor: pointer;
  line-height: 1.4;
}
.cnl-frete-combinar-wrap[hidden] { display: none !important; }
.cnl-frete-combinar-wrap input[type="checkbox"] {
  margin-top: 0.15rem;
  flex-shrink: 0;
}

/* ── Seletor de loja (sub-passo de Retirada na Loja) ── */
.cnl-store-picker {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--clr-border);
}
.cnl-store-picker[hidden] { display: none !important; }

.cnl-store-picker__label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--clr-muted-fg);
  margin: 0 0 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.cnl-store-opt {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.875rem 1rem;
  background: var(--clr-bg);
  border: 2px solid var(--clr-border);
  border-radius: var(--radius-xl);
  cursor: pointer;
  transition: border-color 0.18s, background 0.18s, box-shadow 0.18s;
}
.cnl-store-opt:hover {
  border-color: var(--clr-primary);
  background: hsl(19 56% 40% / 0.04);
}
.cnl-store-opt--selected {
  border-color: var(--clr-primary);
  background: hsl(19 56% 40% / 0.06);
  box-shadow: 0 0 0 3px hsl(19 56% 40% / 0.12);
}
.cnl-store-opt input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.cnl-store-opt__body {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  flex: 1;
}
.cnl-store-opt__name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--clr-fg);
}
.cnl-store-opt__address {
  font-size: 0.775rem;
  color: var(--clr-muted-fg);
  line-height: 1.3;
}
.cnl-store-opt__check {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--clr-border);
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s;
  display: grid;
  place-items: center;
}
.cnl-store-opt--selected .cnl-store-opt__check {
  background: var(--clr-primary);
  border-color: var(--clr-primary);
}
.cnl-store-opt--selected .cnl-store-opt__check::after {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
}

/* ── Seção de pagamento — Passo 3 ── */
.cnl-payment-section { padding: 0; }

/* ── Gaveta de métodos de pagamento — estilo igual às opções de entrega ── */

/* Lista de métodos: coluna, sem marcadores */
#order_review ul.wc_payment_methods,
#payment ul.wc_payment_methods {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Cada método: card com borda */
#order_review .wc_payment_method,
#payment .wc_payment_method {
  border: 2px solid var(--clr-border);
  border-radius: var(--radius-xl);
  background: var(--clr-bg);
  overflow: hidden;
  transition: border-color 0.18s, box-shadow 0.18s;
}

/* Radio nativo: invisível mas funcional para WC */
#order_review .wc_payment_method > input[type="radio"],
#payment .wc_payment_method > input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}

/* Label = cabeçalho clicável (espelha .cnl-delivery-opt) */
#order_review .wc_payment_method > label,
#payment .wc_payment_method > label {
  display: flex !important;
  align-items: center !important;
  gap: 0.875rem !important;
  padding: 1rem !important;
  cursor: pointer;
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  color: var(--clr-fg) !important;
  width: 100% !important;
  user-select: none;
  transition: background 0.15s;
  margin: 0 !important;
}

/* Ícone injetado pelo JS */
.cnl-pay-icon {
  font-size: 1.1rem;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-xl);
  background: var(--clr-secondary);
  display: grid;
  place-items: center;
}

/* Ícone SVG do cartão (nativo do Stripe) — mantém no label mas pequeno */
.stripe-cards-icon {
  height: 18px !important;
  width: auto !important;
  margin-left: auto;
  opacity: 0.55;
  flex-shrink: 0;
}

/* Indicador de seleção (círculo) */
.cnl-pay-check {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--clr-border);
  flex-shrink: 0;
  margin-left: auto;
  transition: background 0.15s, border-color 0.15s;
  display: grid;
  place-items: center;
}

/* Estado aberto */
#order_review .wc_payment_method.cnl-payment--open,
#payment .wc_payment_method.cnl-payment--open {
  border-color: var(--clr-primary);
  box-shadow: 0 0 0 3px hsl(19 56% 40% / 0.12);
}

#order_review .wc_payment_method.cnl-payment--open > label,
#payment .wc_payment_method.cnl-payment--open > label {
  background: hsl(19 56% 40% / 0.04);
}

.cnl-payment--open .cnl-pay-check {
  background: var(--clr-primary);
  border-color: var(--clr-primary);
}

.cnl-payment--open .cnl-pay-check::after {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
}

/* Gaveta: max-height + display:block!important (previne slideUp do jQuery WC) */
.payment_box {
  display: block !important;
  max-height: 0 !important;
  overflow: hidden !important;
  opacity: 0;
  padding: 0 !important;
  border-top: 0 solid var(--clr-border) !important;
  transition: max-height 0.38s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.28s ease,
              padding 0.25s ease,
              border-top-width 0.25s !important;
}

.cnl-payment--open .payment_box {
  max-height: 900px !important;
  opacity: 1 !important;
  padding: 0.875rem 0 !important;
  border-top-width: 1px !important;
}

/* Casca externa do WC/Stripe — largura total, sem recuos laterais */
.payment_box.payment_method_stripe,
.payment_box.payment_method_wc_stripe,
.wc-stripe-card-elements-container {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 10px 0 !important;
  box-sizing: border-box !important;
}

/* Stripe UPE fieldset e elemento: largura total, sem padding/border nativos */
#wc-stripe-upe-form,
.wc-upe-form,
.wc-payment-form {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  box-sizing: border-box !important;
}

.wc-stripe-upe-element,
.wc-stripe-upe-element > * {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Neutralização do contêiner intermediário (secondary wrapper) entre .payment_box e o formulário Stripe */
.payment_box.payment_method_stripe > *,
.payment_box.payment_method_wc_stripe > *,
.payment_box.payment_method_stripe fieldset,
.payment_box.payment_method_wc_stripe fieldset,
.payment_box.payment_method_stripe > div,
.payment_box.payment_method_wc_stripe > div {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  border: none !important;
  background: transparent !important;
  box-sizing: border-box !important;
}

/* Checkbox "Salvar dados de pagamento" dentro da gaveta */
.woocommerce-SavedPaymentMethods-saveNew {
  margin-top: 0.75rem !important;
  padding-top: 0.75rem !important;
  border-top: 1px dashed var(--clr-border) !important;
}

.woocommerce-SavedPaymentMethods-saveNew label {
  font-size: 0.82rem !important;
  font-weight: 400 !important;
  color: var(--clr-muted-fg) !important;
  padding: 0 !important;
  display: inline !important;
  width: auto !important;
  cursor: pointer;
  text-transform: none !important;
  letter-spacing: normal !important;
  background: none !important;
}

.woocommerce-SavedPaymentMethods-saveNew input[type="checkbox"] {
  width: 16px !important;
  height: 16px !important;
  opacity: 1 !important;
  position: static !important;
  pointer-events: auto !important;
  margin-right: 0.4rem;
  vertical-align: middle;
}

/* Ordem do Stripe entre os métodos de pagamento (JS já reforça via style.order inline) */
.payment_method_stripe { order: 3 !important; }

/* Express Checkout dentro do Card 3 — Apple Pay / Google Pay */
#wc-stripe-express-checkout-element {
  margin: 0 0 0 !important; /* Stripe já controla margin-top via style inline */
  width: 100% !important;
  min-height: 48px;
}

/* Separador "— OR —" do Stripe */
#wc-stripe-express-checkout-button-separator {
  color: var(--clr-muted-fg) !important;
  font-size: 0.8rem !important;
  margin: 0.75rem 0 !important;
  letter-spacing: 0.05em;
}

.wc-block-components-express-payment,
.wc-stripe-express-checkout-wrapper {
  width: 100% !important;
  margin-bottom: 0;
}

/* ── Mercado Pago Pix — comprime a gaveta (logo grande + textos empurravam o botão
   "Finalizar Pedido" pra fora da tela no mobile). Escopado ao payment_box real do
   gateway Pix do MP, confirmado no DOM renderizado da T3:
   .payment_box.payment_method_woo-mercado-pago-pix
   O conteúdo (<pix-template>/<terms-and-conditions>) é renderizado como DOM comum
   pelo JS do plugin (sem Shadow DOM — confirmado lendo mp-plugins-components.min.js),
   então os elementos internos (.mp-pix-template-image/-title/-subtitle,
   .mp-terms-and-conditions-text/-link) são alcançáveis normalmente.

   CORREÇÃO 2026-07-10 (a tentativa anterior, só com classes, NÃO funcionou pro
   container/imagem/título/subtítulo/bloco de termos): o CSS real do MP
   (mp-plugins-components.min.css) NÃO usa seletores de 1 classe como parecia —
   ex. o seletor real do título é
     .mp-checkout-container #mp-checkout-pix-root.mp-checkout-pix-container .mp-pix-template-title
   que tem 1 ID (#mp-checkout-pix-root) + 3 classes = especificidade (1,3,0), MUITO
   maior que (0,3,0) de ".payment_box.payment_method_woo-mercado-pago-pix .mp-pix-template-title"
   usada antes — e como o CSS do MP carrega DEPOIS do nosso no <head>, um empate de
   especificidade também perderia pra ele. Confirmado via leitura completa e
   estruturada (não regex superficial) de TODAS as regras do arquivo que mencionam
   mp-pix-template/mp-checkout-pix/mp-terms-and-conditions — o MESMO problema afeta
   o container, a imagem e o bloco de termos (todos com o ID), não só o texto.
   Correção: incluir o MESMO #mp-checkout-pix-root em toda regra abaixo, combinado
   com o prefixo real .payment_box.payment_method_woo-mercado-pago-pix (também um
   ancestro de verdade no DOM) — a soma dá 1 ID + 4 classes em cada regra abaixo,
   que excede a especificidade de QUALQUER regra correspondente do MP (a maior é
   1 ID + 3 classes), vencendo por especificidade sempre, independente da ordem de
   carregamento das folhas de estilo. Nunca voltar a escopar essas regras só com
   classes — o ID do MP sempre vai vencer um seletor sem ID, com ou sem !important.
   IMPORTANTE: curl NÃO valida isto — só confirma que a regra existe no arquivo, não
   resolve cascata/especificidade. Validar sempre no DevTools → Computed do navegador
   (ver CLAUDE.md). */
.payment_box.payment_method_woo-mercado-pago-pix #mp-checkout-pix-root.mp-checkout-pix-container {
  padding: 0.75rem 1rem !important;
}
.payment_box.payment_method_woo-mercado-pago-pix #mp-checkout-pix-root.mp-checkout-pix-container .mp-pix-template-image {
  height: auto !important;
  max-height: 52px !important;
  width: auto !important;
  max-width: 100% !important;
  padding-bottom: 0.5rem !important;
}
.payment_box.payment_method_woo-mercado-pago-pix #mp-checkout-pix-root.mp-checkout-pix-container .mp-pix-template-title {
  font-size: 0.95rem !important;
  line-height: 1.25 !important;
  padding-bottom: 0.4rem !important;
}
.payment_box.payment_method_woo-mercado-pago-pix #mp-checkout-pix-root.mp-checkout-pix-container .mp-pix-template-subtitle {
  font-size: 0.8rem !important;
  line-height: 1.2 !important;
}
.payment_box.payment_method_woo-mercado-pago-pix #mp-checkout-pix-root.mp-checkout-pix-container .mp-checkout-pix-terms-and-conditions {
  padding-top: 0.75rem !important;
}
.payment_box.payment_method_woo-mercado-pago-pix #mp-checkout-pix-root.mp-checkout-pix-container .mp-terms-and-conditions-text,
.payment_box.payment_method_woo-mercado-pago-pix #mp-checkout-pix-root.mp-checkout-pix-container .mp-terms-and-conditions-link {
  font-size: 0.75rem !important;
  line-height: 1.2 !important;
}

/* ── Resumo do pedido — entre etapa 2 (entrega) e etapa 3 (pagamento) ── */
.cnl-order-summary {
  background: var(--clr-card);
  border-radius: var(--radius-2xl);
  border: 1px solid var(--clr-border);
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
}

.cnl-order-summary__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0;
  font-size: 0.9rem;
  color: var(--clr-muted-fg);
  border-bottom: 1px solid var(--clr-border);
}
.cnl-order-summary__row:last-child { border-bottom: none; }
/* display:flex acima sobrescreveria o [hidden]{display:none} do UA (padrão
   documentado em CLAUDE.md) — obrigatório pras linhas condicionais (desconto,
   frete "a combinar") que nascem com o atributo hidden. */
.cnl-order-summary__row[hidden] { display: none !important; }

.cnl-order-summary__row--fee {
  font-size: 0.85rem;
}

.cnl-order-summary__row--total {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--clr-fg);
  border-top: 2px solid var(--clr-border);
  border-bottom: none;
  margin-top: 0.25rem;
  padding-top: 0.75rem;
}

.cnl-order-summary__val { font-weight: 600; color: var(--clr-fg); }
.cnl-order-summary__row--total .cnl-order-summary__val { color: var(--clr-primary); }

.cnl-order-summary__delivery {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-top: 0.75rem;
  font-size: 0.8rem;
  color: var(--clr-muted-fg);
}

.cnl-order-summary__label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--clr-muted-fg);
  margin: 0 0 0.75rem;
}

.cnl-order-items {
  list-style: none;
  margin: 0 0 0.25rem;
  padding: 0;
}

.cnl-order-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  padding: 0.45rem 0;
  font-size: 0.875rem;
  color: var(--clr-fg);
  border-bottom: 1px solid var(--clr-border);
}
.cnl-order-item:last-child { border-bottom: none; }

.cnl-order-item__thumb {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.cnl-order-item-img {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px;
  min-height: 40px;
  max-width: 40px;
  max-height: 40px;
  object-fit: cover;
  display: block;
}

.cnl-order-item--stacked { align-items: flex-start; }

.cnl-order-item__main {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  gap: 0.15rem;
}

.cnl-order-item__qty-name {
  display: flex;
  gap: 0.35rem;
  min-width: 0;
}

.cnl-order-item__qty {
  flex-shrink: 0;
  color: var(--clr-muted-fg);
  font-size: 0.8rem;
}

.cnl-order-item__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cnl-order-item__opt {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
}

.cnl-order-item__opt-line {
  font-size: 0.72rem;
  color: var(--clr-muted-fg);
  line-height: 1.3;
}

.cnl-order-item__price {
  flex-shrink: 0;
  font-weight: 600;
  color: var(--clr-fg);
}

.cnl-order-summary__divider {
  height: 1px;
  background: var(--clr-border);
  margin: 0.5rem 0;
}

/* ── CEP loading spinner ── */
#billing_postcode.cnl-cep-loading {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23A0522D' stroke-width='2'%3E%3Cpath d='M21 12a9 9 0 1 1-6.219-8.56'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 1rem center !important;
  background-size: 20px !important;
}

/* ── Oculta o título da página de checkout ── */
body.woocommerce-checkout h1.entry-title,
body.woocommerce-checkout .post-title { display: none !important; }

/* ── Checkout: oculta Fly Cart e barra de carrinho (wizard tem sua própria navegação) ── */
/* ── Fly Cart: linha de taxa de serviço ── */
.woofc-fee.woofc-data {
    border-top: 1px dashed var(--clr-border);
    padding-top: 0.35rem;
    margin-top: 0.25rem;
    color: var(--clr-muted-fg);
    font-size: 0.85rem;
    font-style: italic;
}
.woofc-fee .woofc-data-right { font-weight: 600; color: var(--clr-fg); }

/* ── Responsivo mobile ── */
@media (max-width: 480px) {
  .cnl-wizard-wrap { padding: 0 0.75rem 6rem; }
  .cnl-step__card { padding: 1rem; border-radius: var(--radius-xl); }
  .cnl-steps__lbl { font-size: 0.62rem; }
}

/* ── Badge pedido mínimo no hero ── */
.canele-hero__badge--minimo {
  background: var(--clr-secondary);
  color: var(--clr-fg);
  font-size: 0.72rem;
  font-weight: 600;
}

/* CTA "Encomendas" (WhatsApp): mesma pílula dos badges, em terracota = clicável.
   Largura fixa + overflow hidden: o texto do ticker nunca pode alterar o tamanho
   externo do badge. Sem ícone fixo — quem quiser emoji inclui no próprio texto
   da mensagem via Customizer (pensando em SaaS: nada hardcoded fora do texto). */
.canele-hero__badge--encomendas {
  background: var(--clr-primary);
  color: var(--clr-primary-fg);
  font-size: 0.72rem;
  font-weight: 600;
  text-decoration: none;
  width: 6.75rem;
  overflow: hidden;
}
/* Sem feedback de cor/posição no hover/focus/active — resting state = único estado */
.canele-hero__badge--encomendas:hover,
.canele-hero__badge--encomendas:focus,
.canele-hero__badge--encomendas:focus-visible,
.canele-hero__badge--encomendas:active {
  background: var(--clr-primary);
  color: var(--clr-primary-fg);
}

/* Viewport: máscara com overflow hidden onde o texto desliza, preenchendo toda
   a largura do badge (não há mais ícone disputando espaço). */
.cnl-badge-encomendas__viewport {
  position: relative;
  width: 100%;
  overflow: hidden;
  height: 1.2em;
}

/* Ticker: entra pela direita, desliza para a esquerda, sai — contínuo, sem lacuna.
   --cnl-tick-vw (largura do viewport) e --cnl-tick-tw (largura do texto da
   mensagem atual) são medidas em px via JS a cada mensagem — usar esses valores
   no transform, em vez de translateX(100%)/(-100%) (que são relativos à largura
   do PRÓPRIO texto, não à do badge), garante que o texto sai exatamente da borda
   direita e desaparece exatamente na borda esquerda, sem percurso desperdiçado
   parado fora da área visível. Fallback 100%/-100% via var() cobre o cenário
   sem JS — funcional, só não otimizado. */
.cnl-badge-encomendas__ticker {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  white-space: nowrap;
  animation-name: cnl-badge-ticker;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  /* animation-duration definida inline via style (Customizer > Badge Encomendas) */
}
@keyframes cnl-badge-ticker {
  0%   { transform: translateX(var(--cnl-tick-vw, 100%)); }
  100% { transform: translateX(calc(-1 * var(--cnl-tick-tw, 100%))); }
}

/* ── Checkout: oculta sticky bar (wizard é a interface de checkout) ── */
.woocommerce-checkout .cnl-cart-capsule-wrapper { display: none !important; }

/* ── Linha "Taxa de Serviço" no totais do carrinho/checkout ── */
.woocommerce .cart-collaterals .cart_totals .fee th,
.woocommerce-checkout .order-total + .fee th,
.woocommerce table.shop_table .fee th,
.woocommerce table.shop_table tfoot .fee th {
  font-weight: 600 !important;
  color: var(--clr-muted-fg) !important;
  font-size: 0.875rem !important;
}

.woocommerce table.shop_table tfoot .fee td,
.woocommerce table.shop_table .fee td {
  font-weight: 600 !important;
  color: var(--clr-fg) !important;
  font-size: 0.875rem !important;
}

/* Linha de fee com separador sutil */
.woocommerce table.shop_table tfoot .fee {
  border-top: 1px dashed var(--clr-border) !important;
}

/* ============================================================
   CHECKOUT PÁGINA ÚNICA — Cards empilhados
   ============================================================ */

/* Wrapper */
.cnl-checkout-page {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 1rem calc(100px + env(safe-area-inset-bottom, 0px));
}

/* Card genérico */
.cnl-card {
  background: var(--clr-card);
  border-radius: var(--radius-2xl);
  padding: 1.25rem;
  margin-bottom: 1rem;
  box-shadow: var(--shadow-card);
  border: 1px solid var(--clr-border);
}

/* Título do card com número de seção */
.cnl-card__title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--clr-fg);
  margin: 0 0 1.1rem;
}

.cnl-card__num {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--clr-primary);
  color: var(--clr-primary-fg);
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
  flex-shrink: 0;
}

/* Mobile */
@media (max-width: 480px) {
  .cnl-checkout-page { padding: 0 0.75rem calc(100px + env(safe-area-inset-bottom, 0px)); }
  .cnl-card { padding: 1rem; border-radius: var(--radius-xl); }
}

/* ── Botão Voltar para o Cardápio ── */
.canele-checkout-back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--clr-muted-fg);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  padding: 0.75rem 0;
  margin-bottom: 0.5rem;
  transition: color 0.18s;
}
.canele-checkout-back:hover {
  color: var(--clr-primary);
  text-decoration: none;
}
.canele-checkout-back svg {
  flex-shrink: 0;
  transition: transform 0.18s;
}
.canele-checkout-back:hover svg {
  transform: translateX(-3px);
}

/* ── Seção Express Checkout (Apple Pay / Google Pay) ── */
.canele-express-checkout {
  background: var(--clr-card);
  border-radius: var(--radius-2xl);
  padding: 1.25rem;
  margin-bottom: 1.25rem;
  box-shadow: var(--shadow-card);
  border: 1px solid var(--clr-border);
}

.canele-express-checkout__label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--clr-muted-fg);
  margin: 0 0 0.75rem;
  text-align: center;
}

.wc-express-checkout-element,
.wc-stripe-express-checkout-element,
#wc-stripe-express-checkout-element,
.wc-block-components-express-payment,
.wc-stripe-express-checkout-wrapper {
  width: 100% !important;
  min-height: 44px;
}

.canele-express-checkout__divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1rem;
  color: var(--clr-muted-fg);
  font-size: 0.8rem;
}
.canele-express-checkout__divider::before,
.canele-express-checkout__divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--clr-border);
}

/* ── Seção do formulário de dados ── */
.woocommerce-checkout #customer_details,
.woocommerce-checkout .col-1,
.woocommerce-checkout .col-2 {
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
}

.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-shipping-fields {
  background: var(--clr-card);
  border-radius: var(--radius-2xl);
  padding: 1.25rem;
  margin-bottom: 1.25rem;
  box-shadow: var(--shadow-card);
  border: 1px solid var(--clr-border);
}

.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > h3 {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--clr-fg);
  margin: 0 0 1rem;
  padding: 0;
  display: block !important;
}

/* ── Inputs estilo app ── */
.woocommerce-checkout .form-row {
  margin: 0 0 0.75rem !important;
  padding: 0 !important;
}

.woocommerce-checkout .form-row label {
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  color: var(--clr-muted-fg) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  margin-bottom: 0.35rem !important;
  display: block !important;
}

.woocommerce-checkout .form-row input[type="text"],
.woocommerce-checkout .form-row input[type="email"],
.woocommerce-checkout .form-row input[type="tel"],
.woocommerce-checkout .form-row input[type="password"],
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row textarea {
  height: 52px !important;
  width: 100% !important;
  border: 1.5px solid var(--clr-border) !important;
  border-radius: var(--radius-xl) !important;
  background: var(--clr-bg) !important;
  padding: 0 1rem !important;
  font-size: 1rem !important;
  font-family: var(--font-body) !important;
  color: var(--clr-fg) !important;
  outline: none !important;
  transition: border-color 0.18s, box-shadow 0.18s !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

.woocommerce-checkout .form-row input:focus,
.woocommerce-checkout .form-row select:focus {
  border-color: var(--clr-primary) !important;
  box-shadow: 0 0 0 3px hsl(19 56% 40% / 0.12) !important;
  background: #fff !important;
}

/* Placeholder */
.woocommerce-checkout .form-row input::placeholder {
  color: hsl(25 10% 65%) !important;
  font-size: 0.95rem !important;
}

/* ── Destaque visual no campo Número ── */
.canele-field-number input {
  border-color: var(--clr-primary) !important;
  font-weight: 600 !important;
  font-size: 1.1rem !important;
}

/* ── Row com dois campos (Número + Complemento) ── */
.form-row-first,
.form-row-last {
  width: calc(50% - 0.375rem) !important;
  float: left !important;
}
.form-row-first { margin-right: 0.75rem !important; }
.form-row-last  { float: right !important; margin-right: 0 !important; }
.form-row-wide  { clear: both !important; width: 100% !important; float: none !important; }

/* ── Campo oculto (país / sobrenome) ── */
.canele-hidden-field,
#billing_last_name_field,
#billing_country_field {
  display: none !important;
}

/* ── Resumo do pedido ── */
.woocommerce-checkout-review-order {
  background: var(--clr-card);
  border-radius: var(--radius-2xl);
  padding: 1.25rem;
  margin-bottom: 1.25rem;
  box-shadow: var(--shadow-card);
  border: 1px solid var(--clr-border);
}

.woocommerce-checkout-review-order table {
  width: 100%;
  border-collapse: collapse;
}

.woocommerce-checkout-review-order table th,
.woocommerce-checkout-review-order table td {
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--clr-border);
  font-size: 0.9rem;
}

.woocommerce-checkout-review-order table tfoot tr:last-child th,
.woocommerce-checkout-review-order table tfoot tr:last-child td {
  font-size: 1rem;
  font-weight: 700;
  border-bottom: none;
  padding-top: 0.75rem;
}

/* ── Pagamento ── */
/* Astra inline CSS limita #order_review a width:40%;float:right no checkout. Anula. */
#order_review {
  width: 100% !important;
  float: none !important;
  padding: 0 !important;
  border: none !important;
  box-sizing: border-box !important;
}

#payment {
  background: var(--clr-card);
  border-radius: var(--radius-2xl);
  padding: 1.25rem;
  box-shadow: var(--shadow-card);
  border: 1px solid var(--clr-border);
}

#payment .payment_methods {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
}

#payment .payment_methods li label {
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
}

/* ── Botão "Finalizar Pedido" ── */
#place_order {
  height: 56px !important;
  width: 100% !important;
  border-radius: var(--radius-full) !important;
  background: var(--clr-primary) !important;
  color: var(--clr-primary-fg) !important;
  font-family: var(--font-body) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  border: none !important;
  cursor: pointer !important;
  transition: background 0.18s, transform 0.1s !important;
  box-shadow: 0 4px 16px hsl(19 56% 40% / 0.35) !important;
  margin-top: 0.5rem !important;
}

#place_order:hover {
  background: var(--clr-primary-glow) !important;
  transform: translateY(-1px) !important;
}

/* Notices de erro */
.woocommerce-error,
.woocommerce-message,
.woocommerce-info {
  border-radius: var(--radius-xl) !important;
  font-size: 0.875rem !important;
  margin-bottom: 1rem !important;
}

/* ── Stripe: oculta aviso "Test mode: use card 4242..." (só aparece em modo teste) ── */
p.testmode-info {
  display: none !important;
}

/* ── Texto de privacidade do WooCommerce — discreto, menor ── */
.woocommerce-privacy-policy-text {
  font-size: 0.78rem !important;
  color: var(--clr-muted-fg) !important;
  line-height: 1.5 !important;
  margin: 0.75rem 0 !important;
  text-align: center;
}
.woocommerce-privacy-policy-text a {
  color: var(--clr-primary) !important;
  text-decoration: underline !important;
}

/* ── Mobile: tela cheia sem padding extra ── */
@media (max-width: 600px) {
  body.woocommerce-checkout #primary,
  body.woocommerce-checkout .entry-content {
    padding: 0 0.75rem 6rem !important;
  }

  .woocommerce-checkout .woocommerce-billing-fields,
  .canele-express-checkout,
  .woocommerce-checkout-review-order,
  #payment {
    border-radius: var(--radius-xl) !important;
    padding: 1rem !important;
  }

  .form-row-first,
  .form-row-last {
    width: 100% !important;
    float: none !important;
    margin-right: 0 !important;
  }

  /* Mais respiro que no desktop — é onde "Não sei meu CEP" fica mais colado no campo Rua */
  .cnl-cep-reverse-toggle {
    margin-bottom: 1.1rem;
  }
}

/* ── Botão scroll-to-top Astra: fica abaixo da cápsula flutuante ── */
#ast-scroll-top,
.ast-scroll-to-top,
.ast-scroll-top,
.scroll-to-top {
  bottom: 20px !important;
  right: 20px !important;
}

/* ══════════════════════════════════════════════════════════════
   GAVETA DE REVISÃO DO CARRINHO — #cnl-cart-sheet
   ══════════════════════════════════════════════════════════════ */
#cnl-cart-sheet {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99999;
}
#cnl-cart-sheet.csb-open { display: block; }

/* Mobile: sacola sobe quase até o topo (padrão iFood).
   min-height > max-height global (88vh) → min vence por spec, painel fica em 92vh.
   Não afeta quickshop (#canele-bottom-sheet) nem popup desktop (min-width:640px). */
@media (max-width: 639px) {
  #cnl-cart-sheet .csb-panel {
    min-height: 92vh;
  }
}

/* Cabeçalho: título + botão Limpar */
.cnl-cs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0 0.75rem;
  border-bottom: 1px solid var(--clr-border);
  margin-bottom: 0.75rem;
}

.cnl-cs-title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--clr-fg);
  margin: 0;
}

.cnl-cs-clear {
  background: none;
  border: none;
  font-size: 0.8rem;
  color: var(--clr-muted-fg);
  cursor: pointer;
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius-full);
  transition: color 0.15s, background 0.15s;
  font-family: inherit;
}
.cnl-cs-clear:hover { color: var(--clr-fg); background: var(--clr-secondary); }

/* Lista de itens */
.cnl-cs-items {
  list-style: none;
  margin: 0 0 0.75rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  /* Lista é a parte flexível: com o cabeçalho + totais + botão por cima, o painel
     (cap de 88vh no .csb-panel) chega a ~85-90% da tela antes do scroll interno. */
  max-height: 64vh;
  overflow-y: auto;
}

.cnl-cs-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}
/* Elimina delay de 300ms e interferência de gestos de scroll em todos os filhos do item */
.cnl-cs-item * { touch-action: manipulation; }

.cnl-cs-item-thumb {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--clr-secondary);
}

.cnl-cs-item-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cnl-cs-item-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.cnl-cs-item-name {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--clr-fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cnl-cs-item-price {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--clr-primary);
}

/* ── Controles de quantidade ── */
.cnl-cs-qty-ctrl {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  background: var(--clr-secondary);
  border-radius: var(--radius-full);
  transition: none !important;
}

.cnl-cs-qty-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  font-family: inherit;
  color: var(--clr-fg);
  border-radius: var(--radius-full);
  transition: none !important;
  animation: none !important;
  line-height: 1;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}
/* Garante que e.target seja sempre o <button>, nunca filho SVG/path */
.cnl-cs-qty-btn svg,
.cnl-cs-qty-btn svg * { pointer-events: none; }
.cnl-cs-qty-btn:hover  { background: var(--clr-border); }
.cnl-cs-qty-btn:disabled { opacity: 0.38; cursor: not-allowed; }

.cnl-cs-qty-val {
  min-width: 22px;
  text-align: center;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--clr-fg);
  pointer-events: none;
  user-select: none;
}

/* Kit-Festa: subtexto de sabores e separador de preço */
.cnl-cs-kit-flavors,
.cnl-cs-item-sublabel {
  font-size: 0.75rem;
  color: var(--clr-muted, #888);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cnl-cs-kit-price-sep {
  font-weight: 400;
  color: var(--clr-muted, #888);
}

/* Card agrupado "Monte o Seu" na sacola (lista + total + lixeira) */
.cnl-cs-ms-group { align-items: flex-start; }
.cnl-cs-ms-list {
  list-style: none;
  margin: 0.3rem 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
}
.cnl-cs-ms-list li {
  font-size: 0.75rem;
  color: var(--clr-muted-fg);
  line-height: 1.35;
}

/* Grupos de Opcionais na sacola (ex.: "Recheio: Queijo, Carne do Sol") */
.cnl-cs-opt-list {
  list-style: none;
  margin: 0.15rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.cnl-cs-opt-list li {
  font-size: 0.75rem;
  color: var(--clr-muted-fg);
  line-height: 1.3;
}
.cnl-cs-ms-remove {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border: none;
  background: transparent;
  border-radius: var(--radius-full);
  cursor: pointer;
  color: var(--clr-fg);
  transition: background 0.15s;
}
.cnl-cs-ms-remove:hover { background: var(--clr-border); }
.cnl-cs-ms-remove svg, .cnl-cs-ms-remove svg * { pointer-events: none; }

/* Botão "Editar" nos cards de kit, Monte o Seu e Grupos de Opcionais (sacola) */
.cnl-cs-kit-edit,
.cnl-cs-ms-edit,
.cnl-cs-opt-edit {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  align-self: flex-start;
  margin-top: 0.25rem;
  padding: 2px 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--clr-primary);
}
.cnl-cs-kit-edit:hover, .cnl-cs-ms-edit:hover, .cnl-cs-opt-edit:hover { text-decoration: underline; }
.cnl-cs-kit-edit svg, .cnl-cs-ms-edit svg, .cnl-cs-opt-edit svg { flex-shrink: 0; }
.cnl-cs-ms-edit svg, .cnl-cs-ms-edit svg *,
.cnl-cs-opt-edit svg, .cnl-cs-opt-edit svg * { pointer-events: none; }

/* Totais */
/* Upsell "Peça também" */
.cnl-cs-upsell {
  padding: 0.6rem 0 0.5rem;
  border-top: 1px solid var(--clr-border);
  margin-bottom: 0.75rem;
}

.cnl-cs-upsell-title {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--clr-muted-fg);
  margin: 0 0 0.6rem;
}

.cnl-cs-upsell-row {
  display: flex;
  gap: 0.6rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 0.25rem;
}
.cnl-cs-upsell-row::-webkit-scrollbar { height: 0; }

.cnl-cs-upsell-card {
  flex: 0 0 88px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  scroll-snap-align: start;
}

.cnl-cs-upsell-img-wrap {
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  position: relative;
}

#cnl-cart-sheet .cnl-cs-upsell-img-wrap img {
  width: 72px;
  height: 72px;
  min-width: 72px;
  min-height: 72px;
  max-width: 72px;
  max-height: 72px;
  object-fit: cover;
  display: block;
  border-radius: 10px;
}

.cnl-cs-upsell-name {
  font-size: 0.72rem;
  line-height: 1.3;
  text-align: center;
  color: var(--clr-fg);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  width: 100%;
}

.cnl-cs-upsell-price {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--clr-primary);
  text-align: center;
}

.cnl-cs-upsell-btn {
  position: absolute;
  bottom: 4px;
  right: 4px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: #fff;
  color: var(--clr-primary);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.22);
  transition: opacity 0.15s;
  font-family: inherit;
}
.cnl-cs-upsell-btn:hover { opacity: 0.82; }
.cnl-cs-upsell-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.cnl-cs-totals {
  border-top: 1px solid var(--clr-border);
  padding-top: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-bottom: 1.1rem;
}

.cnl-cs-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.88rem;
  color: var(--clr-muted-fg);
}

.cnl-cs-row--total {
  font-size: 1rem;
  color: var(--clr-fg);
  padding-top: 0.45rem;
  border-top: 1px solid var(--clr-border);
  margin-top: 0.2rem;
}

/* Linha de desconto "Monte o Seu" no resumo da sacola */
.cnl-cs-row--discount { color: var(--clr-primary); font-weight: 600; }

/* Banner "flash" no topo da gaveta (cascata Monte o Seu) */
.cnl-cs-flash {
  background: hsl(19, 40%, 92%);
  border: 1px solid var(--clr-primary);
  color: hsl(30 60% 22%);
  font-size: 0.82rem;
  font-weight: 600;
  border-radius: 10px;
  padding: 0.6rem 0.75rem;
  margin: 0 0 0.75rem;
}

/* Carrinho vazio */
.cnl-cs-empty {
  text-align: center;
  color: var(--clr-muted-fg);
  font-size: 0.9rem;
  padding: 2rem 0 1.5rem;
  margin: 0;
}

/* Aviso de pedido mínimo dentro da gaveta */
.cnl-cs-warning {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  background: hsl(45 100% 51% / 0.14);
  border: 1px solid hsl(45 90% 55%);
  color: hsl(30 60% 22%);
  border-radius: var(--radius-xl);
  padding: 0.65rem 0.85rem;
  font-size: 0.82rem;
  line-height: 1.45;
  margin-bottom: 0.85rem;
}

/* Botões de ação */
.cnl-cs-actions {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.cnl-cs-btn {
  display: block;
  width: 100%;
  padding: 0.88rem 1rem;
  border-radius: var(--radius-full);
  font-size: 0.95rem;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
  text-decoration: none;
  border: none;
  font-family: inherit;
  box-sizing: border-box;
}
.cnl-cs-btn:active { transform: scale(0.98); }

.cnl-cs-btn--primary {
  background: var(--clr-primary);
  color: #fff !important;
}
.cnl-cs-btn--primary:hover { opacity: 0.9; text-decoration: none; }

.cnl-cs-btn--secondary {
  background: none;
  color: var(--clr-muted-fg);
  font-weight: 400;
}
.cnl-cs-btn--secondary:hover { color: var(--clr-fg); }

.cnl-cs-btn--disabled {
  opacity: 0.42;
  cursor: not-allowed;
  pointer-events: none;
}

/* Remove botão + dos cards de produto */
.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product .add_to_cart_button {
    display: none !important;
}

/* Remove botão + dos cards - seletores específicos */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .add_to_cart_button,
ul.products li.product a.button,
.canele-card-img-wrap a.button,
.canele-card-img-wrap .add_to_cart_button,
li.product .ast-shop-product-actions,
li.product .astra-shop-add-to-cart {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Remove botão + do carrossel Mais Pedidos */
.canele-featured-track .button,
.canele-featured-track .add_to_cart_button,
.canele-featured-card .button,
.canele-featured-card .add_to_cart_button,
.canele-featured-card a.button {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Remove botão + do carrossel Mais Pedidos */
.canele-item .button,
.canele-item .add_to_cart_button,
.canele-featured-list .button,
.canele-featured-list .add_to_cart_button {
    display: none !important;
}

/* ============================================================
   TRIGGER "INFORMAÇÕES DA LOJA" — botão pill abaixo do hero
   ============================================================ */
.cnl-info-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: transparent;
  border: 1px solid var(--clr-border);
  color: var(--clr-muted-fg);
  border-radius: var(--radius-full);
  padding: 0.32rem 0.75rem;
  font-size: 0.72rem;
  font-weight: 500;
  font-family: var(--font-body);
  text-transform: none !important;
  letter-spacing: 0;
  cursor: pointer;
  margin-top: 0.5rem;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
  line-height: 1.4;
}
.cnl-info-trigger:hover,
.cnl-info-trigger:focus-visible {
  color: var(--clr-fg);
  border-color: var(--clr-muted-fg);
  background: var(--clr-secondary);
  outline: none;
}

/* ============================================================
   GAVETA DE INFORMAÇÕES — #cnl-store-info-sheet
   ============================================================ */
#cnl-store-info-sheet {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99999;
}
#cnl-store-info-sheet.csb-open { display: block; }

/* Painel — bottom sheet (mobile e desktop) */
.cnl-si-panel {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(var(--max-w), 100%);
  max-height: 90vh;
  background: var(--clr-card);
  border-radius: 16px 16px 0 0;
  display: flex;
  flex-direction: column;
  animation: canele-slide-up 0.3s cubic-bezier(0.32, 0.72, 0, 1);
  z-index: 1;
}

/* Alça de arrasto — touch-action: none isola o gesto de swipe do scroll interno */
.cnl-si-drag-handle {
  flex-shrink: 0;
  width: 40px;
  height: 4px;
  background: var(--clr-border);
  border-radius: var(--radius-full);
  margin: 0.75rem auto 0;
  touch-action: none;
  cursor: grab;
}

/* Cabeçalho fixo */
.cnl-si-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--clr-border);
}
.cnl-si-title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--clr-fg);
  margin: 0;
}
.cnl-si-close {
  margin-left: auto;
  flex-shrink: 0;
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  color: var(--clr-muted-fg);
  cursor: pointer;
  border-radius: var(--radius-full);
  transition: color 0.15s;
}
.cnl-si-close:hover { color: var(--clr-fg); }
.cnl-si-close svg { pointer-events: none; }

/* Corpo scrollável — touch-action: pan-y permite scroll vertical sem conflito */
.cnl-si-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 1.5rem);
}

/* Seções */
.cnl-si-section { padding: 1rem; }
.cnl-si-section + .cnl-si-section { border-top: 1px solid var(--clr-border); }

.cnl-si-section-title {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--clr-muted-fg);
  margin: 0 0 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Descrição */
.cnl-si-desc {
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--clr-muted-fg);
  margin: 0;
}

/* Accordion de horários */
.cnl-si-accord-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-body);
  text-align: left;
}
.cnl-si-accord-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.cnl-si-hours-status {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--clr-fg);
}
.cnl-si-hours-summary {
  font-size: 0.8rem;
  color: var(--clr-muted-fg);
}
.cnl-si-chevron {
  color: var(--clr-muted-fg);
  transition: transform 0.25s ease;
  flex-shrink: 0;
}
.cnl-si-accord-open .cnl-si-chevron { transform: rotate(180deg); }

/* Animação de expansão via max-height */
.cnl-si-accord-body {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.cnl-si-accord-body.cnl-si-accord-body--open { max-height: 620px; }

/* Tabela de horários */
.cnl-si-hours-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.75rem;
  font-size: 0.85rem;
}
.cnl-si-hours-table td {
  padding: 0.38rem 0;
  color: var(--clr-fg);
}
.cnl-si-hours-table td:first-child { width: 55%; }
.cnl-si-hours-table td:last-child  { text-align: right; }
.cnl-si-today td { font-weight: 600; color: var(--clr-primary); }
.cnl-si-today-label {
  display: inline-block;
  margin-left: 0.4rem;
  background: hsl(19 56% 40% / 0.12);
  color: var(--clr-primary);
  border-radius: var(--radius-full);
  padding: 0.05rem 0.45rem;
  font-size: 0.68rem;
  font-weight: 600;
  vertical-align: middle;
}
.cnl-si-closed     { color: var(--clr-muted-fg) !important; font-weight: 400 !important; }
.cnl-si-open-time  { color: var(--clr-fg); }

/* Formas de pagamento */
.cnl-si-row-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.6rem;
}
.cnl-si-ver-mais {
  background: none;
  border: none;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--clr-primary);
  cursor: pointer;
  padding: 0;
  font-family: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cnl-si-ver-mais:hover { color: var(--clr-primary-glow); }
.cnl-si-payment-chips {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.cnl-si-chip {
  background: var(--clr-secondary);
  border-radius: var(--radius-full);
  padding: 0.3rem 0.75rem;
  font-size: 0.8rem;
  color: var(--clr-fg);
}

/* Endereço */
.cnl-si-address {
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--clr-muted-fg);
  font-style: normal;
  margin: 0 0 0.75rem;
}

/* Preview do mapa — grade CSS simula ruas */
.cnl-si-map-link { display: block; text-decoration: none; }
.cnl-si-map-preview {
  position: relative;
  height: 110px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background-image:
    linear-gradient(hsl(0 0% 100% / 0.55) 1px, transparent 1px),
    linear-gradient(90deg, hsl(0 0% 100% / 0.55) 1px, transparent 1px),
    linear-gradient(160deg, hsl(80 25% 88%), hsl(60 18% 83%) 40%, hsl(30 12% 80%));
  background-size: 28px 28px, 28px 28px, 100% 100%;
  border: 1px solid var(--clr-border);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.15s;
}
.cnl-si-map-link:hover .cnl-si-map-preview { opacity: 0.88; }
.cnl-si-map-pin { filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3)); }
.cnl-si-map-cta {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.52);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.42rem;
  font-size: 0.78rem;
  font-weight: 500;
}

/* Redes sociais dentro da gaveta */
.cnl-si-social {
  display: flex;
  justify-content: center;
  padding: 0.25rem 0 0.5rem;
}
.cnl-si-social .cnl-social-links {
  gap: 1.5rem;
}

/* Rodapé legal */
.cnl-si-legal {
  padding: 0.75rem 1rem 0;
  border-top: 1px solid var(--clr-border);
  text-align: center;
}
.cnl-si-legal p {
  font-size: 0.72rem;
  color: var(--clr-muted-fg);
  margin: 0.15rem 0;
  line-height: 1.5;
}

/* ============================================================
   MODAL DE FORMAS DE PAGAMENTO — #cnl-payment-modal
   ============================================================ */
#cnl-payment-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100000;
  align-items: center;
  justify-content: center;
}
#cnl-payment-modal.cnl-pm-open { display: flex; }

.cnl-pm-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  animation: canele-fade-in 0.2s ease;
}
.cnl-pm-card {
  position: relative;
  z-index: 1;
  background: var(--clr-card);
  border-radius: 16px;
  width: min(340px, 92vw);
  max-height: 80vh;
  overflow-y: auto;
  animation: canele-scale-in 0.22s ease;
  padding: 1.25rem;
}
.cnl-pm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--clr-border);
}
.cnl-pm-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--clr-fg);
  margin: 0;
}
.cnl-pm-close {
  margin-left: auto;
  flex-shrink: 0;
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  color: var(--clr-muted-fg);
  cursor: pointer;
  border-radius: var(--radius-full);
  transition: color 0.15s;
}
.cnl-pm-close:hover { color: var(--clr-fg); }
.cnl-pm-close svg { pointer-events: none; }

.cnl-pm-body { display: flex; flex-direction: column; gap: 1rem; }
.cnl-pm-group-title {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--clr-muted-fg);
  margin: 0 0 0.5rem;
}
.cnl-pm-badges { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.cnl-pm-badge {
  background: var(--clr-secondary);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-full);
  padding: 0.3rem 0.85rem;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--clr-fg);
}
.cnl-pm-badge--pix {
  background: hsl(150 45% 94%);
  border-color: hsl(150 35% 75%);
  color: hsl(150 45% 28%);
}
.cnl-pm-note {
  font-size: 0.74rem;
  color: var(--clr-muted-fg);
  margin: 0;
  padding-top: 0.75rem;
  border-top: 1px solid var(--clr-border);
  text-align: center;
  line-height: 1.5;
}

/* Grupos internos do accordion — Loja / Delivery */
.cnl-si-schedule-group { margin-top: 0.75rem; }
.cnl-si-schedule-group + .cnl-si-schedule-group { margin-top: 1rem; padding-top: 0.75rem; border-top: 1px dashed var(--clr-border); }
.cnl-si-schedule-label {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--clr-muted-fg);
  margin-bottom: 0.25rem;
}

/* Rodapé legal — classes específicas */
.cnl-si-legal__cnpj {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--clr-fg);
  margin: 0 0 0.3rem;
}
.cnl-si-legal__aviso {
  font-size: 0.7rem;
  color: var(--clr-muted-fg);
  line-height: 1.55;
  margin: 0 0 0.75rem;
}
.cnl-si-privacy-link {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--clr-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  margin-top: 0.1rem;
}
.cnl-si-privacy-link:hover { color: var(--clr-primary-glow); }

/* Canais de pagamento (online / presencial) */
.cnl-pm-channel { display: flex; flex-direction: column; gap: 0.75rem; }
.cnl-pm-channel-title {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--clr-fg);
  margin: 0;
}
.cnl-pm-divider {
  border: none;
  border-top: 1px solid var(--clr-border);
}

/* Badges visuais das bandeiras de cartão */
.cnl-pm-card-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  padding: 0 0.55rem;
  border-radius: 4px;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: #fff;
  border: none;
}
.cnl-pm-card-badge--visa  { background: #1A1F71; }
.cnl-pm-card-badge--mc    { background: linear-gradient(90deg, #EB001B 38%, #F79E1B); }
.cnl-pm-card-badge--elo   { background: #000; outline: 1.5px solid #F4C430; color: #F4C430; }
.cnl-pm-card-badge--amex  { background: #007BC1; }
.cnl-pm-card-badge--hiper { background: #C8102E; }

/* Badges extras */
.cnl-pm-badge--pix  { background: hsl(175 58% 38%); border-color: transparent; color: #fff; }
.cnl-pm-badge--cash { background: hsl(130 42% 36%); border-color: transparent; color: #fff; }

/* ============================================================
   BOTÕES DE AÇÃO NO HEADER — busca + compartilhar
   ============================================================ */
#cnl-header-actions {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: calc(var(--header-h) + env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px);
  z-index: 1001;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 1.5rem;
  padding-right: 1.75rem;
  gap: 0.1rem;
  pointer-events: none;
  transition: background 0.25s ease, box-shadow 0.25s ease;
}
#cnl-header-actions.cnl-hdr-scrolled {
  background: rgba(252, 248, 242, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--shadow-soft);
}

/* Logo: filho direto do container, ancorado à esquerda.
   Opacidade controlada independentemente do .cnl-hdr-identity. */
.cnl-hdr-logo {
  width: 36px;
  height: 36px;
  display: block;
  flex-shrink: 0;
  border-radius: 6px;
  opacity: 0;
  transition: opacity 0.22s ease;
  pointer-events: none;
}
#cnl-header-actions.cnl-hdr-scrolled .cnl-hdr-logo {
  opacity: 1;
}
#cnl-header-actions.cnl-sb-open .cnl-hdr-logo {
  opacity: 0;
}

/* Texto (promo ou fallback): flex: 1 para ocupar todo o espaço entre logo e busca;
   justify-content: center centraliza o texto no meio desse espaço. */
.cnl-hdr-identity {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.22s ease;
}

#cnl-header-actions.cnl-hdr-scrolled .cnl-hdr-identity {
  opacity: 1;
}

.cnl-hdr-store-name {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--clr-fg);
  letter-spacing: 0.01em;
}

/* Variante compacta da Promo Bar — dentro da sticky bar de scroll
   Sem fundo/borda; texto terracota; mesmo tamanho que .cnl-hdr-store-name.
   Mensagens sobrepostas em grid (todas na mesma célula) — largura da célula
   é definida pela mensagem mais longa, sem layout shift entre trocas. */
.cnl-hdr-promo-compact {
  display: inline-grid;
  align-items: center;
}
.cnl-hdr-promo-compact__msg {
  grid-area: 1 / 1;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--clr-primary);
  letter-spacing: 0.01em;
  white-space: nowrap;
  text-align: center;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.cnl-hdr-promo-compact__msg--active {
  opacity: 1;
}
/* Mensagem única: sempre visível, sem animação */
.cnl-hdr-promo-compact--single .cnl-hdr-promo-compact__msg {
  opacity: 1;
}

#cnl-header-actions.cnl-sb-open .cnl-hdr-identity {
  opacity: 0;
  flex: 0 0 0;
  min-width: 0;
  overflow: hidden;
}
.cnl-hdr-btn {
  pointer-events: all;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: none;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--clr-fg);
  opacity: 0.72;
  transition: opacity 0.15s, background 0.15s;
  padding: 0;
  flex-shrink: 0;
  text-transform: none !important;
}
.cnl-hdr-btn:hover,
.cnl-hdr-btn:focus-visible { opacity: 1; background: var(--clr-secondary); outline: none; }
.cnl-hdr-btn--active { opacity: 1; background: var(--clr-secondary); }

/* Botões dentro da sticky bar: invisíveis no topo, aparecem com scroll */
#cnl-header-actions .cnl-hdr-btn {
  opacity: 0;
  transition: opacity 0.22s ease, background 0.15s;
}
#cnl-header-actions.cnl-hdr-scrolled .cnl-hdr-btn {
  opacity: 0.72;
}
#cnl-header-actions .cnl-hdr-btn:hover,
#cnl-header-actions .cnl-hdr-btn:focus-visible {
  opacity: 1;
  background: var(--clr-secondary);
}
#cnl-header-actions .cnl-hdr-btn--active {
  opacity: 1;
}

/* ============================================================
   BARRA DE PESQUISA INLINE (header)
   ============================================================ */

/* Input expandido horizontalmente na mesma linha do header */
#cnl-search-input {
  pointer-events: none;
  width: 0;
  opacity: 0;
  padding: 0.38rem 0;
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  background: transparent;
  font-size: 16px;
  font-family: var(--font-body);
  color: var(--clr-fg);
  outline: none;
  flex-shrink: 0;
  overflow: hidden;
  transition: width 0.28s cubic-bezier(0.4,0,0.2,1),
              opacity 0.22s ease,
              padding 0.28s cubic-bezier(0.4,0,0.2,1),
              border-color 0.18s,
              background 0.18s;
  -webkit-appearance: none;
}
#cnl-header-actions.cnl-sb-open #cnl-search-input {
  pointer-events: auto;
  width: calc(100vw - 132px);
  max-width: 300px;
  opacity: 1;
  padding: 0.38rem 0.8rem;
  border-color: var(--clr-border);
  background: var(--clr-secondary);
}
#cnl-search-input:focus { border-color: var(--clr-primary) !important; }
#cnl-search-input::-webkit-search-cancel-button { display: none; }

/* Dropdown de resultados: fixed abaixo do header */
#cnl-search-results {
  position: fixed;
  top: calc(var(--header-h) + env(safe-area-inset-top, 0px));
  left: 0;
  right: 0;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0.25rem 0.75rem 0.5rem;
  max-height: 55vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--clr-bg);
  border-bottom: 1px solid var(--clr-border);
  box-shadow: 0 8px 24px -8px hsl(25 25% 15% / 0.12);
  z-index: 997;
  display: none;
}
#cnl-search-results:not(:empty) { display: block; }

.cnl-sr-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.45rem 0.4rem;
  background: none;
  border: none;
  border-radius: var(--radius-xl);
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  transition: background 0.13s;
  text-transform: none !important;
  color: inherit;
}
.cnl-sr-item:hover,
.cnl-sr-item:focus-visible { background: var(--clr-secondary); outline: none; }
.cnl-sr-item + .cnl-sr-item { border-top: 1px solid var(--clr-border); border-radius: 0; }

.cnl-sr-img {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-lg);
  object-fit: cover;
  flex-shrink: 0;
  background: var(--clr-secondary);
  display: block;
}

.cnl-sr-info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.cnl-sr-name {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--clr-fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cnl-sr-price {
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--clr-primary);
}
.cnl-sr-msg {
  padding: 1.1rem;
  text-align: center;
  font-size: 0.85rem;
  color: var(--clr-muted-fg);
}
.cnl-sr-msg--empty::before { content: '🔍 '; }

/* ============================================================
   LISTA DE SABORES (produto variável, atributo Sabor)
   Reutiliza .csb-ms-row / .csb-ms-qty-btn para estrutura e estilos.
   Estado colapsado (.csb-ms-row--collapsed): esconde "−" e o valor, deixa só o "+".
   ============================================================ */
.csb-flavorlist {
  margin: 0.5rem 0;
}
.csb-flavorlist .csb-ms-row--collapsed .csb-ms-dec,
.csb-flavorlist .csb-ms-row--collapsed .csb-ms-qty-val {
  display: none;
}
/* Quando colapsado, o único botão visível ("+") centraliza no container */
.csb-flavorlist .csb-ms-row--collapsed .csb-ms-qty {
  padding: 3px;
}

/* ============================================================
   KIT CELEBRA — componentes com radio button e badge OBRIGATÓRIO
   ============================================================ */
.csb-kit-components {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  margin: 0.5rem 0;
}
.csb-kit-comp {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.csb-kit-comp-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: hsl(30 12% 94%);
  padding: 0.45rem 0.75rem;
  border-radius: 6px;
}
.csb-kit-comp-name {
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--clr-fg);
  flex: 1;
}
.csb-kit-comp-badge {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: hsl(25 30% 18%);
  color: #fff;
  border-radius: 4px;
  padding: 2px 6px;
  line-height: 1.4;
  flex-shrink: 0;
}
.csb-kit-comp-badge--done {
  background: transparent;
  color: #22a75c;
  font-size: 0.9rem;
  padding: 0;
  letter-spacing: 0;
}
.csb-kit-comp-fixed {
  font-size: 0.82rem;
  color: var(--clr-muted-fg);
  font-style: italic;
  padding: 0.1rem 0.75rem;
}
/* Espaçamento e divisor entre opções do kit */
.csb-kit-flavor-group { gap: 0; }
.csb-kit-flavor-group .csb-radio-opt {
  padding: 0.65rem 0.75rem;
  border-bottom: 1px solid var(--clr-border);
}
.csb-kit-flavor-group .csb-radio-opt:last-child { border-bottom: none; }
/* Escopado ao bottom-sheet para bater a especificidade de "img{height:auto}" do Astra */
#canele-bottom-sheet .csb-kit-var-img {
  width: 48px;
  min-width: 48px;
  max-width: 48px;
  height: 48px;
  min-height: 48px;
  max-height: 48px;
  flex-shrink: 0;
  flex-grow: 0;
  object-fit: cover;
  border-radius: 8px;
  background: var(--clr-secondary);
}

/* ============================================================
   DRILL-DOWN ENGINE — Monte o Seu v2 (.cnl-dd-*)
   Namespace exclusivo; não colide com .csb-*, .cnl-cs-*, .csb-ms-*
   ============================================================ */

/* ── L1: grade de cards de categoria ── */
.cnl-dd {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.25rem 0 1rem;
}

.cnl-dd-cat-card {
  display: flex;
  align-items: center;
  background: var(--clr-card);
  border: 1.5px solid var(--clr-border);
  border-radius: var(--radius-xl);
  padding: 1rem 1rem 1rem 1.1rem;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
  user-select: none;
}
.cnl-dd-cat-card:hover,
.cnl-dd-cat-card:focus {
  border-color: var(--clr-primary);
  box-shadow: 0 0 0 3px hsl(19 56% 40% / 0.12);
  outline: none;
}
.cnl-dd-cat-card--saved {
  border-color: var(--clr-primary);
  background: hsl(19 56% 40% / 0.04);
}

.cnl-dd-cat-body {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 0.75rem;
}

.cnl-dd-cat-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.cnl-dd-cat-label {
  font-size: 1rem;
  font-weight: 700;
  color: var(--clr-fg);
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.cnl-dd-cat-summary {
  font-size: 0.82rem;
  color: var(--clr-primary);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Chevron compartilhado (L1, L2) ── */
.cnl-dd-chevron {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--clr-muted-fg);
  font-size: 1.2rem;
  line-height: 1;
}
.cnl-dd-chevron::after { content: '›'; }

/* ── Gaveta 1: seções por categoria ── */
.cnl-dd-section {
  margin-bottom: 1.5rem;
}
.cnl-dd-section:last-child { margin-bottom: 0; }
.cnl-dd-section-hdr {
  margin-bottom: 0.6rem;
}
.cnl-dd-section-title {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--clr-muted-fg);
}
.cnl-dd-section .cnl-dd-prod-card + .cnl-dd-prod-card { margin-top: 0.5rem; }

/* Indicador (›/lápis) nos cards de produto da Gaveta 1 */
.cnl-dd-g1-indicator {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--clr-muted-fg);
  font-size: 1.2rem;
  line-height: 1;
}
.cnl-dd-prod-card--saved .cnl-dd-g1-indicator {
  color: var(--clr-primary);
}
.cnl-dd-edit-icon {
  display: block;
  stroke: currentColor;
}

/* ── Gaveta 2 (ex-L3) ── */
/* Posicionada como irmã de .csb-panel dentro de #canele-bottom-sheet */
.cnl-dd-layer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  max-height: 88vh;
  min-height: 78vh;
  background: var(--clr-card);
  border-radius: 16px 16px 0 0;
  z-index: 2;             /* acima do .csb-panel (z-index: 1) */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: canele-slide-up 0.28s cubic-bezier(0.32, 0.72, 0, 1);
}
.cnl-dd-layer--out {
  animation: cnl-dd-slide-out 0.28s cubic-bezier(0.32, 0.72, 0, 1) forwards;
}
@keyframes cnl-dd-slide-out {
  from { transform: translateY(0); }
  to   { transform: translateY(100%); }
}

/* Desktop: mesma geometria do .csb-panel em popup centralizado */
@media (min-width: 640px) {
  .cnl-dd-layer {
    bottom: auto;
    top: 50%;
    left: 50%;
    right: auto;
    transform: translate(-50%, -50%);
    width: min(480px, 92vw);
    max-height: 85vh;
    min-height: unset;
    border-radius: 16px;
    animation: canele-scale-in 0.22s ease;
  }
  .cnl-dd-layer--out {
    animation: cnl-dd-fade-out 0.22s ease forwards;
  }
  @keyframes cnl-dd-fade-out {
    from { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    to   { opacity: 0; transform: translate(-50%, -50%) scale(0.96); }
  }
}

/* Header da camada: botão voltar + título */
.cnl-dd-layer-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1rem 0.75rem;
  border-bottom: 1px solid var(--clr-border);
  flex-shrink: 0;
}

.cnl-dd-close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--clr-secondary);
  color: var(--clr-fg);
  font-size: 1.1rem;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s;
}
.cnl-dd-close-btn:hover,
.cnl-dd-close-btn:focus { background: hsl(30 12% 85%); outline: none; }
.cnl-dd-close-btn:active { background: none; }

.cnl-dd-layer-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--clr-fg);
  letter-spacing: -0.01em;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Body: área rolável */
.cnl-dd-layer-body {
  flex: 1;
  overflow-y: auto;
  padding: 0.75rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

/* ── L2: cards de produto ── */
.cnl-dd-prod-card {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.75rem 0.85rem;
  border: 1.5px solid var(--clr-border);
  border-radius: var(--radius-xl);
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
  user-select: none;
}
.cnl-dd-prod-card:hover,
.cnl-dd-prod-card:focus { border-color: var(--clr-primary); outline: none; }
.cnl-dd-prod-card--saved { border-color: var(--clr-primary); background: hsl(19 56% 40% / 0.04); }

#canele-bottom-sheet .cnl-dd-prod-img {
  width: 64px;
  min-width: 64px;
  max-width: 64px;
  height: 64px;
  min-height: 64px;
  max-height: 64px;
  object-fit: cover;
  border-radius: 10px;
  flex-shrink: 0;
  flex-grow: 0;
  background: var(--clr-secondary);
}
.cnl-dd-prod-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.cnl-dd-prod-name {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--clr-fg);
  line-height: 1.3;
}
.cnl-dd-prod-price .woocommerce-Price-amount,
.cnl-dd-prod-price .amount {
  font-size: 0.88rem;
  color: var(--clr-muted-fg);
}
.cnl-dd-prod-summary {
  font-size: 0.8rem;
  color: var(--clr-primary);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── L3: linhas de item com +/- ── */
.cnl-dd-qty-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--clr-border);
}
.cnl-dd-qty-row:last-child { border-bottom: none; }
.cnl-dd-qty-row--oos { opacity: 0.5; }

#canele-bottom-sheet .cnl-dd-qty-img {
  width: 52px;
  min-width: 52px;
  max-width: 52px;
  height: 52px;
  min-height: 52px;
  max-height: 52px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
  flex-grow: 0;
  background: var(--clr-secondary);
}
.cnl-dd-qty-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.cnl-dd-qty-name {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--clr-fg);
  line-height: 1.3;
}
.cnl-dd-qty-price .woocommerce-Price-amount,
.cnl-dd-qty-price .amount {
  font-size: 0.82rem;
  color: var(--clr-muted-fg);
}
.cnl-dd-qty-tag {
  font-size: 0.75rem;
  color: var(--clr-muted-fg);
  font-weight: 500;
}

.cnl-dd-qty-ctrl {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
}
.cnl-dd-qty-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1.5px solid var(--clr-border);
  background: none;
  color: var(--clr-fg);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: border-color 0.12s, background 0.12s;
}
.cnl-dd-qty-btn:hover:not(:disabled),
.cnl-dd-qty-btn:focus:not(:disabled) {
  border-color: var(--clr-primary);
  background: none;
  outline: none;
}
.cnl-dd-qty-btn:active:not(:disabled) { background: none; }
.cnl-dd-qty-btn:disabled { opacity: 0.35; cursor: default; }
.cnl-dd-qty-btn.cnl-dd-trash {
  color: var(--clr-primary);
  border-color: var(--clr-primary);
}
.cnl-dd-qty-btn.cnl-dd-trash:hover:not(:disabled),
.cnl-dd-qty-btn.cnl-dd-trash:focus:not(:disabled) {
  color: var(--clr-primary);
  border-color: var(--clr-primary);
  background: hsl(19 56% 40% / 0.08);
  outline: none;
}
.cnl-dd-qty-val {
  min-width: 1.5rem;
  text-align: center;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--clr-fg);
}

/* ── Rodapé com botão Salvar (L3) ── */
.cnl-dd-save-area {
  padding: 0.85rem 1rem calc(env(safe-area-inset-bottom, 0px) + 0.85rem);
  border-top: 1px solid var(--clr-border);
  flex-shrink: 0;
}
.cnl-dd-save-btn {
  width: 100%;
  padding: 0.85rem;
  background: var(--clr-primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-xl);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s;
}
.cnl-dd-save-btn:disabled { opacity: 0.45; cursor: default; }
.cnl-dd-save-btn:hover:not(:disabled),
.cnl-dd-save-btn:focus:not(:disabled) { opacity: 0.88; outline: none; background: var(--clr-primary); }
.cnl-dd-save-btn:active:not(:disabled) { background: none; }

/* ============================================================
   CHECKOUT — Resumo de entrega pré-selecionada (do card do header)
   ============================================================ */
.cnl-delivery-summary {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  background: var(--clr-secondary);
  border-radius: var(--radius-xl);
  margin-bottom: 0.5rem;
}

.cnl-delivery-summary__icon {
  font-size: 1.25rem;
  flex-shrink: 0;
  line-height: 1;
}

.cnl-delivery-summary__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.cnl-delivery-summary__label {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--clr-fg);
}

.cnl-delivery-summary__sub {
  font-size: 0.78rem;
  color: var(--clr-muted-fg);
}

.cnl-delivery-summary__change {
  flex-shrink: 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--clr-primary);
  background: none;
  border: 1.5px solid var(--clr-primary);
  border-radius: var(--radius-full);
  padding: 0.28em 0.85em;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.cnl-delivery-summary__change:hover,
.cnl-delivery-summary__change:focus-visible {
  background: var(--clr-primary);
  color: #fff;
  outline: none;
}

/*
 * display:flex nos elementos abaixo sobrescreveria o [hidden]{display:none} do UA.
 * Essas regras (especificidade 0,2,0 > 0,1,0) garantem que o atributo hidden funcione.
 */
.cnl-delivery-summary[hidden] { display: none !important; }
.cnl-delivery-opts[hidden]    { display: none !important; }

/* ── Telas do checkout ── */
#cnl-screen-1[hidden],
#cnl-screen-2[hidden],
#cnl-screen-3[hidden]  { display: none !important; }

/* #cnl-id-summary-bar agora é irmã das screens e tem display:flex próprio */
#cnl-id-summary-bar[hidden] { display: none !important; }

/* ── Tela 3 — Barra de resumo da entrega escolhida ── */
.cnl-delivery-summary-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  background: var(--clr-secondary);
  border-radius: var(--radius-xl);
  margin-bottom: 1rem;
  border: 1px solid var(--clr-border);
}

.cnl-delivery-summary-bar__icon {
  font-size: 1.25rem;
  flex-shrink: 0;
  line-height: 1;
}

.cnl-delivery-summary-bar__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.cnl-delivery-summary-bar__label {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--clr-fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cnl-delivery-summary-bar__sub {
  font-size: 0.78rem;
  color: var(--clr-muted-fg);
}

/* ── Tela 2 — Botão "Como quer pagar?" ── */
#cnl-s2-advance {
  width: 100%;
  margin-top: 1.25rem;
}

#cnl-s2-advance:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none;
}

/* ── Tela 3 — Cupom de desconto ── */
.cnl-coupon-wrap {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.cnl-coupon-input {
  flex: 1;
  min-width: 0;
}

.cnl-coupon-apply {
  flex-shrink: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--clr-primary);
  background: none;
  border: 1.5px solid var(--clr-primary);
  border-radius: var(--radius-xl);
  padding: 0.5em 1.1em;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}

.cnl-coupon-apply:hover,
.cnl-coupon-apply:focus-visible {
  background: var(--clr-primary);
  color: #fff;
  outline: none;
}

.cnl-coupon-apply:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  background: none;
  color: var(--clr-primary);
}

.cnl-coupon-msg {
  font-size: 0.85rem;
  margin-top: -0.5rem;
  margin-bottom: 0.75rem;
}
.cnl-coupon-msg--ok    { color: hsl(140, 50%, 32%); }
.cnl-coupon-msg--error { color: hsl(0, 65%, 48%); }

/* ── Tela 1 — campos standalone de captura ── */
.cnl-s1-row { margin-bottom: 1rem; }

.cnl-s1-row label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--clr-fg);
  margin-bottom: 0.4rem;
}


#cnl-s1-advance:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none;
}

/* ── Tela 2 — barra de resumo de identidade ── */
#cnl-id-summary-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  background: var(--clr-secondary);
  border-radius: var(--radius-xl);
  margin-bottom: 1rem;
  border: 1px solid var(--clr-border);
}

.cnl-id-summary-bar__icon {
  font-size: 1.25rem;
  flex-shrink: 0;
  line-height: 1;
}

.cnl-id-summary-bar__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.cnl-id-summary-bar__name {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--clr-fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cnl-id-summary-bar__phone {
  font-size: 0.78rem;
  color: var(--clr-muted-fg);
}

/* ============================================================
   CHECKOUT — Opção de entrega indisponível (Entrega no Endereço)
   ============================================================ */
.cnl-delivery-opt--unavailable {
  opacity: 0.42;
  pointer-events: none;
  cursor: default;
  position: relative;
}

.cnl-delivery-opt__unavail-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: var(--clr-primary);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 4px;
  padding: 2px 5px;
  line-height: 1.45;
  pointer-events: none;
  white-space: nowrap;
}

/* ============================================================
   TOAST DE CONFIRMAÇÃO (compartilhar)
   ============================================================ */
#cnl-toast {
  position: fixed;
  bottom: calc(var(--bottom-h) + 0.75rem);
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: hsl(25 25% 15% / 0.92);
  color: #fff;
  border-radius: var(--radius-full);
  padding: 0.5rem 1.2rem;
  font-size: 0.82rem;
  font-weight: 500;
  font-family: var(--font-body);
  z-index: 200000;
  opacity: 0;
  transition: opacity 0.22s ease, transform 0.22s ease;
  white-space: nowrap;
  pointer-events: none;
  backdrop-filter: blur(4px);
}
#cnl-toast.cnl-toast--show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ============================================================
   SHOP PAGE — hero full-bleed, Astra header removido
   Foto do banner cobre a tela inteira incluindo atrás do notch.
   A sticky bar (#cnl-header-actions) é a única barra do topo.
   ============================================================ */

/* Esconde o header Astra na página do cardápio — todos os seus
   elementos já eram display:none; aqui removemos o container também. */
body.woocommerce.archive .site-header,
body.woocommerce.archive #masthead {
  display: none !important;
}

/* Body não precisa mais reservar espaço para o Astra header */
body.woocommerce.archive {
  padding-top: 0 !important;
}

/* Banner da foto estende atrás do notch/status bar do dispositivo */
body.woocommerce.archive .canele-hero__banner {
  height: calc(220px + env(safe-area-inset-top, 0px));
}

/* Card principal começa exatamente onde o banner termina.
   Sem o padding-top do body (56px), a fórmula volta a ser
   o valor total da foto, acrescido da safe-area no iOS. */
body.woocommerce.archive .canele-hero {
  margin-top: calc(220px + env(safe-area-inset-top, 0px));
}