/* ==========================================================================
   components
   Cada bloco indica: [ref] identificado na referência | [arte] padrão das
   artes da loja | [extensão] proposta, não existe na referência.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Botões [ref: "Seja um franqueado", "Acesse nossa loja online"]
   Variantes: --primary (chocolate), --highlight (mint), --ghost (contorno),
   --on-dark (contorno claro). Tamanhos: padrão, --sm.
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--color-action);
  --btn-ink: var(--color-action-ink);
  --btn-border: var(--btn-bg);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 48px; padding: var(--space-3) var(--space-5);
  font: var(--weight-semibold) var(--text-sm)/1 var(--font-body);
  letter-spacing: 0.02em; text-decoration: none; white-space: nowrap;
  color: var(--btn-ink); background: var(--btn-bg);
  border: var(--rule-width) solid var(--btn-border); border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}
.btn:hover { --btn-bg: var(--color-action-hover); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { box-shadow: var(--focus-ring); border-radius: var(--radius-pill); }
.btn svg { width: 1.125em; height: 1.125em; flex: none; }

.btn--highlight { --btn-bg: var(--color-highlight); --btn-ink: var(--color-highlight-ink); }
.btn--highlight:hover { --btn-bg: #b6ddb5; }

.btn--ghost { --btn-bg: transparent; --btn-ink: var(--color-action); --btn-border: var(--color-action); }
.btn--ghost:hover { --btn-bg: var(--color-action); --btn-ink: var(--color-action-ink); --btn-border: var(--color-action); }

.btn--on-dark { --btn-bg: transparent; --btn-ink: var(--color-text-on-dark); --btn-border: rgb(255 255 255 / 0.55); }
.btn--on-dark:hover { --btn-bg: var(--color-text-on-dark); --btn-ink: var(--choc-900); --btn-border: var(--color-text-on-dark); }

.btn--sm { min-height: 40px; padding: var(--space-2) var(--space-4); font-size: var(--text-xs); }

/* Link de texto [ref: "Saiba mais"] */
.link {
  display: inline-flex; align-items: center; gap: var(--space-1);
  font-weight: var(--weight-semibold); color: var(--color-accent);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em;
  transition: color var(--duration-fast) var(--ease-out);
}
.link:hover { color: var(--color-text); text-decoration-thickness: 2px; }

/* --------------------------------------------------------------------------
   2. Rótulo de item [arte] — título com fio caramelo e código "#61"
   -------------------------------------------------------------------------- */
.item-label { display: grid; gap: var(--space-1); padding-bottom: var(--space-2);
  border-bottom: var(--rule-width) solid var(--color-rule); }
.item-label__title { font-weight: var(--weight-semibold); font-size: var(--text-lg); line-height: var(--leading-snug); }
.item-label__meta { font-size: var(--text-sm); color: var(--color-text-muted); }
.item-label__code { font-weight: var(--weight-bold); color: var(--color-accent); }

/* Cabeçalho de seção [ref: "Conheça todos os nossos sabores"] */
.section-head { display: grid; gap: var(--space-3); margin-bottom: var(--space-6); max-width: 46rem; }
.section-head--center { margin-inline: auto; text-align: center; justify-items: center; }
.section-head__eyebrow {
  font-size: var(--text-xs); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-accent);
}
.section-head__title { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: var(--weight-bold); }
.section-head__lead { color: var(--color-text-muted); font-size: var(--text-lg); }
.section-head--center .section-head__title::after {
  content: ""; display: block; width: 56px; height: var(--rule-width);
  margin: var(--space-4) auto 0; background: var(--color-rule);
}

/* --------------------------------------------------------------------------
   3. Header + navegação + menu mobile [ref]
   Referência: logo à esquerda, menu horizontal com submenu "Produtos",
   dois CTAs e ícones sociais. Fixo no topo (estimado).
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: var(--color-surface);
  border-bottom: var(--border-width) solid var(--color-border);
  transition: box-shadow var(--duration-base) var(--ease-out);
}
.site-header.is-scrolled { box-shadow: var(--shadow-md); }
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-5);
  min-height: var(--header-height);
}

.brand { display: inline-flex; align-items: center; gap: var(--space-3); text-decoration: none; color: var(--color-text); }
.brand__mark {
  display: grid; place-items: center; flex: none;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--choc-700); color: var(--cream-50);
  font: italic var(--weight-bold) 1.15rem/1 var(--font-display);
  box-shadow: inset 0 0 0 2px var(--choc-700), inset 0 0 0 4px var(--cream-50);
}
.brand__text { display: grid; line-height: 1.1; }
.brand__name { font: italic var(--weight-bold) 1.25rem/1.1 var(--font-display); }
.brand__unit { font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: 0.04em; color: var(--color-text-muted); }

.nav { display: flex; align-items: center; gap: var(--space-5); }
.nav__list { display: flex; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
.nav__link {
  display: block; padding: var(--space-2) var(--space-3);
  font-weight: var(--weight-medium); font-size: var(--text-sm); text-decoration: none;
  color: var(--color-text); border-radius: var(--radius-sm);
  background-image: linear-gradient(var(--color-rule), var(--color-rule));
  background-size: 0 var(--rule-width); background-repeat: no-repeat; background-position: 50% 100%;
  transition: background-size var(--duration-base) var(--ease-out), color var(--duration-fast);
}
.nav__link:hover, .nav__link[aria-current="true"] { background-size: calc(100% - 2 * var(--space-3)) var(--rule-width); color: var(--color-accent); }

.nav-toggle {
  display: none; align-items: center; justify-content: center;
  width: 48px; height: 48px; padding: 0; border: 0; border-radius: var(--radius-md);
  background: transparent; color: var(--color-text); cursor: pointer;
}
.nav-toggle svg { width: 26px; height: 26px; }

@media (max-width: 1023px) {
  .site-header__inner { min-height: var(--header-height-mobile); }
  .nav-toggle { display: inline-flex; }
  .nav {
    position: fixed; inset: var(--header-height-mobile) 0 auto 0; z-index: var(--z-drawer);
    flex-direction: column; align-items: stretch; gap: var(--space-5);
    padding: var(--space-5) var(--gutter) var(--space-6);
    background: var(--color-surface); border-bottom: var(--border-width) solid var(--color-border);
    box-shadow: var(--shadow-lg);
    max-height: calc(100dvh - var(--header-height-mobile)); overflow-y: auto;
    transform: translateY(-8px); opacity: 0; visibility: hidden;
    transition: opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out), visibility 0s linear var(--duration-base);
  }
  .nav.is-open { transform: none; opacity: 1; visibility: visible; transition-delay: 0s; }
  .nav__list { flex-direction: column; gap: 0; }
  .nav__link { padding: var(--space-4) 0; font-size: var(--text-lg); border-bottom: var(--border-width) solid var(--color-border); border-radius: 0; background: none; }
  .nav .btn { width: 100%; }
  .brand__mark { width: 38px; height: 38px; font-size: 1rem; }
  .brand__name { font-size: 1.1rem; }
}

/* --------------------------------------------------------------------------
   4. Carrossel de destaques [ref: carrossel de banners 1366×500 / 300×439]
   A referência troca o arquivo do banner por breakpoint. Aqui o slide é
   composto (texto + arte) para reaproveitar as artes quadradas da loja.
   -------------------------------------------------------------------------- */
.carousel { position: relative; background: var(--gradient-chocolate); color: var(--color-text-on-dark); overflow: hidden; }
.carousel__track { display: grid; }
.carousel__slide {
  grid-area: 1 / 1; display: grid; align-items: center;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--space-7);
  padding-block: var(--space-8) var(--space-9);
  opacity: 0; visibility: hidden;
  transition: opacity var(--duration-slow) var(--ease-out), visibility 0s linear var(--duration-slow);
}
.carousel__slide.is-active { opacity: 1; visibility: visible; transition-delay: 0s; }
.carousel__copy { display: grid; gap: var(--space-4); justify-items: start; }
.carousel__eyebrow {
  display: inline-flex; padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--color-highlight-ink); background: var(--color-highlight); border-radius: var(--radius-pill);
}
.carousel__title { font-family: var(--font-display); font-size: var(--text-4xl); font-weight: var(--weight-bold); line-height: var(--leading-tight); }
.carousel__text { font-size: var(--text-lg); color: var(--color-text-on-dark-muted); max-width: 32rem; }
.carousel__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-2); }
.carousel__media img { width: 100%; border-radius: var(--radius-md); box-shadow: var(--shadow-lg); }
.carousel__media--square { max-width: 520px; justify-self: end; }

.carousel__controls {
  position: absolute; left: 0; right: 0; bottom: var(--space-5);
  display: flex; align-items: center; justify-content: center; gap: var(--space-4);
}
.carousel__arrow {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  color: var(--color-text-on-dark); background: rgb(255 255 255 / 0.08);
  border: var(--border-width) solid rgb(255 255 255 / 0.35); border-radius: 50%; cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out);
}
.carousel__arrow:hover { background: rgb(255 255 255 / 0.2); }
.carousel__arrow svg { width: 20px; height: 20px; }
.carousel__dots { display: flex; gap: var(--space-1); }
.carousel__dot {
  width: 44px; height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer;
  display: grid; place-items: center;
}
.carousel__dot::before {
  content: ""; width: 10px; height: 10px; border-radius: var(--radius-pill);
  background: rgb(255 255 255 / 0.4); transition: width var(--duration-base) var(--ease-out), background-color var(--duration-base);
}
.carousel__dot[aria-current="true"]::before { width: 28px; background: var(--color-highlight); }

@media (max-width: 1023px) {
  .carousel__slide { grid-template-columns: 1fr; gap: var(--space-6); padding-block: var(--space-7) calc(var(--space-9) + var(--space-2)); text-align: left; }
  .carousel__media { order: -1; }
  .carousel__media--square { max-width: 440px; justify-self: center; width: 100%; }
}

/* Preço [arte: "de 47,40 por 44,99"] */
.price { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-3); }
.price__from { font-size: var(--text-lg); color: var(--color-text-on-dark-muted); }
.price__from s { text-decoration-thickness: 1px; }
.price__to { font-style: italic; font-weight: var(--weight-bold); font-size: var(--text-3xl); color: var(--color-highlight); line-height: 1; }
.price--on-light .price__from { color: var(--color-text-muted); }
.price--on-light .price__to { color: var(--color-accent); }

/* --------------------------------------------------------------------------
   5. Card de dupla (oferta) [arte] — arte vertical 9:16 + rótulo
   -------------------------------------------------------------------------- */
.offer-card { display: grid; gap: var(--space-4); align-content: start; }
.offer-card__media {
  position: relative; overflow: hidden; border-radius: var(--radius-md);
  aspect-ratio: 720 / 630; background: var(--cream-200); box-shadow: var(--shadow-md);
}
.offer-card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}
.offer-card:hover .offer-card__media img { transform: scale(1.03); }

/* --------------------------------------------------------------------------
   6. Card de categoria [ref: "BOLOS · Saiba mais"]
   Referência: imagem de fundo, título em caixa-alta, link "Saiba mais".
   Variante --photo (com foto) e --plain (sem foto, para categorias sem arte).
   -------------------------------------------------------------------------- */
.category-card {
  position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 260px; padding: var(--space-5); overflow: hidden;
  border-radius: var(--radius-md); text-decoration: none; color: var(--color-text-on-dark);
  background: var(--gradient-chocolate);
  transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
}
.category-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.category-card:focus-visible { border-radius: var(--radius-md); }
.category-card__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: var(--img-pos, center); transition: transform var(--duration-slow) var(--ease-out); }
.category-card:hover .category-card__img { transform: scale(1.05); }
.category-card--photo::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgb(42 13 7 / 0) 30%, rgb(42 13 7 / 0.85) 100%);
}
.category-card__title { font-size: var(--text-xl); font-weight: var(--weight-bold); letter-spacing: var(--tracking-caps); text-transform: uppercase; }
.category-card__more {
  margin-top: var(--space-2); display: inline-flex; align-items: center; gap: var(--space-1);
  font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-highlight);
}
.category-card__more svg { width: 16px; height: 16px; transition: transform var(--duration-fast) var(--ease-out); }
.category-card:hover .category-card__more svg { transform: translateX(3px); }
.category-card--plain { min-height: 140px; background: var(--color-surface); color: var(--color-text); border: var(--border-width) solid var(--color-border); }
.category-card--plain .category-card__title { font-size: var(--text-base); }
.category-card--plain .category-card__more { color: var(--color-accent); }

/* --------------------------------------------------------------------------
   7. Bloco de informação da loja [extensão] — substitui o localizador de
   lojas da referência (estado/cidade/bairro), desnecessário para 1 loja.
   -------------------------------------------------------------------------- */
.info-list { display: grid; gap: var(--space-5); margin: 0; padding: 0; list-style: none; }
.info-item { display: grid; grid-template-columns: 44px 1fr; gap: var(--space-4); align-items: start; }
.info-item__icon {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--color-surface-alt); color: var(--color-accent);
}
.info-item__icon svg { width: 22px; height: 22px; }
.info-item__label { font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-text-muted); }
.info-item__value { font-size: var(--text-lg); font-weight: var(--weight-medium); }
.todo { background: #fff2b8; color: #5b4500; padding: 0 0.25em; border-radius: 3px; font-size: 0.85em; font-weight: var(--weight-semibold); }

/* --------------------------------------------------------------------------
   8. Campos de formulário [ref: seletores Estado/Cidade/Bairro]
   Implementados no guia de componentes; o site da loja não precisa de form.
   -------------------------------------------------------------------------- */
.field { display: grid; gap: var(--space-2); }
.field__label { font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.field__control {
  width: 100%; min-height: 48px; padding: var(--space-3) var(--space-4);
  font: var(--text-base)/1.2 var(--font-body); color: var(--color-text);
  background: var(--color-surface); border: var(--border-width) solid var(--cream-300);
  border-radius: var(--radius-md); appearance: none;
  transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}
.field__control:hover { border-color: var(--caramel-500); }
.field__control:focus { outline: none; border-color: var(--color-focus); box-shadow: var(--focus-ring); }
select.field__control {
  padding-right: var(--space-7);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2333160d' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right var(--space-4) center;
}
.field__hint { font-size: var(--text-xs); color: var(--color-text-muted); }

/* --------------------------------------------------------------------------
   9. Aviso [ref: alerta "Fique atento" / texto de alérgenos das artes]
   -------------------------------------------------------------------------- */
.notice {
  display: grid; grid-template-columns: auto 1fr; gap: var(--space-4); align-items: start;
  padding: var(--space-5); border-radius: var(--radius-md);
  background: var(--color-surface); border: var(--border-width) solid var(--color-border);
  border-left: 4px solid var(--caramel-500);
}
.notice svg { width: 24px; height: 24px; color: var(--color-accent); }
.notice__title { font-weight: var(--weight-semibold); margin-bottom: var(--space-1); }
.notice__body { font-size: var(--text-sm); color: var(--color-text-muted); }

/* --------------------------------------------------------------------------
   10. Footer [ref: logo, links institucionais, Imprensa/Franqueado/Loja
   Online, redes sociais]
   -------------------------------------------------------------------------- */
.site-footer { background: var(--gradient-chocolate); color: var(--color-text-on-dark); padding-block: var(--space-8) var(--space-6); }
.site-footer .brand { color: var(--color-text-on-dark); }
.site-footer .brand__unit { color: var(--color-text-on-dark-muted); }
.site-footer .brand__mark { background: transparent; box-shadow: inset 0 0 0 2px var(--cream-50); }
.site-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--space-7); }
.site-footer__title { font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-text-on-dark-muted); margin-bottom: var(--space-4); }
.site-footer__links { display: grid; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
.site-footer__links a { display: inline-block; padding-block: var(--space-1); text-decoration: none; color: var(--color-text-on-dark); transition: color var(--duration-fast); }
.site-footer__links a:hover { color: var(--color-highlight); text-decoration: underline; text-underline-offset: 0.25em; }
.site-footer__about { margin-top: var(--space-4); color: var(--color-text-on-dark-muted); font-size: var(--text-sm); max-width: 30rem; }
.site-footer__legal {
  margin-top: var(--space-7); padding-top: var(--space-5);
  border-top: var(--border-width) solid rgb(255 255 255 / 0.15);
  display: grid; gap: var(--space-3); font-size: var(--text-xs); color: var(--color-text-on-dark-muted);
}
.social { display: flex; gap: var(--space-2); margin-top: var(--space-5); }
.social a {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  color: var(--color-text-on-dark); border: var(--border-width) solid rgb(255 255 255 / 0.35);
  transition: background-color var(--duration-fast), color var(--duration-fast);
}
.social a:hover { background: var(--color-text-on-dark); color: var(--choc-900); }
.social svg { width: 20px; height: 20px; }

@media (max-width: 1023px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } .site-footer__grid > :first-child { grid-column: 1 / -1; } }
@media (max-width: 559px)  { .site-footer__grid { grid-template-columns: 1fr; gap: var(--space-6); } }