/* ============ Canto Doce ============ */

:root {
  --white: #ffffff;
  --pink-100: #ffd1dc;   /* fundo das seções rosa */
  --pink-200: #ffe6ec;   /* placeholders, campos */
  --pink-300: #f39ab4;   /* segunda linha dos títulos */
  --pink-400: #fb8fa8;   /* faixas, fita, rail */
  --pink-600: #ec5a8a;   /* botões, títulos */
  --pink-700: #d9406f;   /* hover */
  --cream: #f1d9a4;
  --ink: #3b2a31;
  --ink-soft: #7d6a71;

  --f-display: "Unbounded", "Arial Black", sans-serif;
  --f-brand: "Rubik Bubbles", "Unbounded", sans-serif;
  --f-text: "Manrope", system-ui, sans-serif;

  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 28px;
  --r-pill: 999px;

  --shadow-card: 0 10px 30px -14px rgb(217 64 111 / .35);
  --wrap: 1320px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 16px; overflow-x: hidden; overflow-x: clip; }
body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font: 500 16px/1.5 var(--f-text);
  overflow-x: hidden;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
.defs { position: absolute; }
h1, h2, h3, p { margin: 0; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

.wrap { width: min(var(--wrap), 100% - 48px); margin-inline: auto; }

/* ---------- tipografia (tags do wireframe) ---------- */
.h1 {
  font: 800 clamp(30px, 3.6vw, 52px)/1.1 var(--f-display);
  letter-spacing: -.01em;
}
.h2 {
  font: 800 clamp(24px, 3vw, 44px)/1.12 var(--f-display);
  letter-spacing: -.01em;
}
.h2 > span { display: block; }
.h3 { font: 700 17px/1.25 var(--f-text); }
.t1 { font: 700 16px/1.3 var(--f-text); }
.t2 { font: 500 16px/1.55 var(--f-text); color: var(--ink); }
.t3 { font: 500 13px/1.4 var(--f-text); color: var(--ink-soft); }
.tone-strong { color: var(--pink-600); }
.tone-soft { color: var(--pink-300); }

/* ---------- ícones (sprite no index.html) ---------- */
.ico { width: 22px; height: 22px; flex: none; }
.btn .ico { width: 18px; height: 18px; }

/* ---------- blocos listrados no lugar das fotos (até chegarem as fotos do Canto Doce) ---------- */
.ph {
  background:
    repeating-linear-gradient(135deg, transparent 0 14px, rgb(255 255 255 / .45) 14px 28px),
    var(--pink-200);
}
.ph--round { border-radius: 50%; }

/* ---------- botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 46px;
  padding: 0 28px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--pink-600);
  color: var(--white);
  font: 700 15px/1 var(--f-text);
  box-shadow: 0 8px 18px -8px rgb(217 64 111 / .6);
  transition: background .2s, transform .2s;
}
.btn:hover { background: var(--pink-700); }
.btn:active { transform: translateY(1px); }
.btn--sm { min-height: 34px; padding: 0 18px; font-size: 14px; box-shadow: none; }
.btn--light { background: var(--white); color: var(--pink-600); box-shadow: none; }
.btn--light:hover { background: var(--pink-200); }

.btn2 {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 36px;
  padding: 0 18px;
  border: 1.5px solid var(--pink-600);
  border-radius: var(--r-pill);
  background: var(--white);
  color: var(--pink-600);
  font: 700 13px/1 var(--f-text);
  transition: background .2s, color .2s;
}
.btn2:hover, .btn2.is-added { background: var(--pink-600); color: var(--white); }

.btn3 {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border: 0;
  border-radius: 50%;
  background: var(--pink-200);
  color: var(--pink-600);
}
.btn3:hover { background: var(--pink-100); }

.btn4 {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--pink-600);
  color: var(--white);
  font: 700 12px/1 var(--f-text);
}

.lnk {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 30px;
  padding: 0 14px;
  border-radius: var(--r-pill);
  background: var(--white);
  color: var(--ink);
  font: 600 13px/1 var(--f-text);
  white-space: nowrap;
  transition: color .2s;
}
.lnk:hover { color: var(--pink-600); }

/* ---------- nav: barra branca + faixa rosa com borda ondulada ---------- */
.nav {
  position: relative;
  z-index: 5;
  background: linear-gradient(var(--white) 0 76px, var(--pink-400) 76px);
  padding-bottom: 14px;
}
.nav::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 100%;
  height: 22px;
  background: url("bg/nav-edge.svg") repeat-x left top / 240px 100%;
  pointer-events: none;
}
.nav__top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 76px;
}
.nav__side { display: flex; align-items: center; gap: 6px; }
.nav__side--end { justify-content: flex-end; gap: 10px; }
.nav__icon {
  position: relative;
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border: 0; border-radius: 50%;
  background: none;
  color: var(--pink-600);
}
.nav__icon:hover { background: var(--pink-200); }

.logo { display: flex; align-items: center; gap: 8px; color: var(--pink-600); }
.logo__mark { width: 30px; height: 30px; }
.logo__name { font: 400 30px/1 var(--f-brand); letter-spacing: .01em; }

.bag-count {
  position: absolute; top: -2px; right: -4px;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  border-radius: var(--r-pill);
  background: var(--pink-600);
  color: var(--white);
  font: 800 11px/18px var(--f-text);
  text-align: center;
}

.pills {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 14px;
  padding-top: 14px;
}

/* ---------- hero ---------- */
.hero {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 600px;
  background: var(--white);
}
.hero__card {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 22px;
  padding: 90px 48px 110px;
  text-align: center;
}
.hero__title { max-width: 15ch; color: var(--pink-300); }
/* sublinhado à mão com uma laçada, o mesmo traço da fita do topo */
.hero__mark { position: relative; display: inline-block; isolation: isolate; }
.hero__loop {
  position: absolute;
  left: -3%; bottom: -.34em;
  width: 106%; height: .62em;
  max-width: none;
  overflow: visible;
  z-index: -1;
  pointer-events: none;
}
.hero__loop path {
  fill: none;
  stroke: var(--pink-400);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw-loop 1.4s .35s cubic-bezier(.65, 0, .35, 1) forwards;
}
@keyframes draw-loop { to { stroke-dashoffset: 0; } }
.hero__text { color: var(--ink); }
.lead-note {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: -8px;
  color: var(--pink-600);
  font-weight: 600;
}
.lead-note .ico { width: 14px; height: 14px; }
.field__hint { color: var(--ink-soft); }
.hero__spark { position: absolute; color: var(--pink-300); }
.hero__spark--a { top: 64px; right: 9%; width: 34px; height: 34px; }
.hero__spark--b { bottom: 140px; left: 8%; width: 52px; height: 52px; }
.hero__spark--c { bottom: 92px; left: 15%; width: 24px; height: 24px; }

.hero__media {
  position: relative;
  margin-top: 8px;
}
/* borda ondulada branca à esquerda da foto */
.hero__media::before {
  content: "";
  position: absolute;
  left: -1px; top: 0; bottom: 0;
  width: 26px;
  z-index: 1;
  background: url("bg/hero-edge.svg") repeat-y left top / 100% 180px;
}

/* ---------- fita ondulada com laçada branca ---------- */
.ribbon {
  height: 100px;
  margin-top: -52px;
  position: relative;
  z-index: 2;
  background: url("bg/ribbon.svg") repeat-x left center / 300px 100px;
  pointer-events: none;
}

/* ---------- mais pedidos ---------- */
.best {
  padding: 110px 0 150px;
  text-align: center;
}
.best__head {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  align-items: center;
  gap: 32px;
  text-align: left;
  margin-bottom: 56px;
}
.best__head .t2 { justify-self: end; max-width: 34ch; }

.carousel { position: relative; }
.carousel__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 3 * 28px) / 4);
  gap: 28px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  text-align: left;
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__prev, .carousel__next {
  position: absolute; top: 34%;
  z-index: 2;
  background: var(--white);
  box-shadow: 0 6px 16px -6px rgb(217 64 111 / .45);
}
.carousel__prev { left: -20px; }
.carousel__next { right: -20px; }

.card { scroll-snap-align: start; display: flex; flex-direction: column; gap: 6px; }
.card__media { width: 100%; aspect-ratio: 1 / .96; object-fit: cover; border-radius: var(--r-md); margin-bottom: 14px; }
.card .t1, .card3 .t1 { font-size: 18px; }
.card .btn2 { align-self: flex-start; margin-top: 10px; }

.best__cta { margin-top: 56px; }

/* ---------- centos por ocasião ---------- */
.occ {
  position: relative;
  padding: 40px 0 150px;
  background: var(--pink-100);
}
.occ::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: calc(100% - 1px);
  height: clamp(70px, 10vw, 150px);
  background: url("bg/wave-occ.svg") no-repeat center bottom / 100% 100%;
}
.occ__title {
  text-align: center;
  color: var(--white);
  font-size: clamp(34px, 5vw, 72px);
  line-height: 1.02;
  margin-bottom: 48px;
}
.occ__track {
  display: flex;
  gap: 24px;
  padding: 24px max(24px, (100% - 1340px) / 2) 40px;
  overflow-x: auto;
  scrollbar-width: none;
}
.occ__track::-webkit-scrollbar { display: none; }
.occ__track { justify-content: safe center; }
.card5, .card6 {
  flex: 0 0 clamp(220px, 21vw, 300px);
  display: flex; flex-direction: column; gap: 16px;
  padding: 22px 22px 26px;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  transition: transform .25s;
}
.card5 { background: var(--white); color: var(--pink-600); transform: rotate(-2.5deg); }
.card6 { background: var(--pink-400); color: var(--white); transform: rotate(3deg) translateY(18px); }
.card5:nth-child(4n+1) { transform: rotate(-1.5deg) translateY(-6px); }
.card5:hover, .card6:hover { transform: rotate(0) translateY(-6px); }
.card5 .h3, .card6 .h3 { font: 700 17px/1.2 var(--f-display); }
.occ__media { width: 100%; aspect-ratio: 1 / .9; object-fit: cover; border-radius: var(--r-md); }

/* ---------- faixa inclinada com a marca ---------- */
.rail {
  position: relative;
  z-index: 2;
  height: 64px;
  margin: -44px -40px -20px;
  background: var(--pink-400);
  transform: rotate(3.5deg);
  overflow: hidden;
  display: flex; align-items: center;
}
.rail__run {
  display: flex; align-items: center; gap: 22px;
  padding-left: 22px;
  white-space: nowrap;
  color: var(--white);
  font: 400 28px/1 var(--f-brand);
  animation: rail 40s linear infinite;
}
.rail__run i { font: 800 20px/1 var(--f-text); font-style: normal; }
@keyframes rail { to { transform: translateX(-50%); } }

/* ---------- sabores ---------- */
.flav {
  padding: 150px 0 190px;
  text-align: center;
}
.flav > .h2 { text-align: left; margin-bottom: 56px; }
.flav__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 48px 36px;
  text-align: left;
}
.flav__grid + .flav__grid { margin-top: 48px; }
.card3 { display: flex; flex-direction: column; gap: 6px; }
.card3__media {
  position: relative;
  aspect-ratio: 1 / .92;
  margin-bottom: 14px;
  overflow: hidden;
}
/* recorte "escalopado" dos docinhos, como na referência */
.ph--blob { clip-path: url(#blob); }
.card3__media > .btn4 { z-index: 1; }
.card3 .btn4 { position: absolute; top: 12px; right: 12px; }
.card3 .btn2 { align-self: flex-start; margin-top: 10px; }
.flav__more { margin-top: 64px; }

/* ---------- por que o canto doce ---------- */
.why {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 760px;
  background: var(--pink-100);
}
.why::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: clamp(60px, 9vw, 130px);
  background: url("bg/wave-why.svg") no-repeat center top / 100% 100%;
  z-index: 1;
}
.why__media {
  position: relative;
  overflow: hidden;
  display: grid; place-items: end start;
  min-height: 640px;
  background: var(--cream);
  isolation: isolate;
}
/* foto real: caixinha de brigadeiros de florzinha */
.why__media::before {
  content: "";
  position: absolute; inset: 0;
  z-index: -2;
  background: url("fotos/caixinha-florzinha.jpg?v=59") center 46% / cover no-repeat;
}
/* escurece só a parte de baixo, onde fica o título */
.why__media::after {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgb(59 42 49 / .72), rgb(59 42 49 / .25) 45%, transparent 70%);
}
.why__title {
  color: var(--white);
  font-size: clamp(40px, 5.2vw, 76px);
  line-height: .98;
  text-shadow: 0 3px 22px rgb(59 42 49 / .45);
  padding: 120px 40px 48px;
}
.why__list {
  display: flex; flex-direction: column; justify-content: center;
  gap: 52px;
  padding: 160px max(32px, 8vw) 100px max(32px, 5vw);
}
.why__item .h3 {
  display: flex; align-items: center; gap: 14px;
  color: var(--pink-600);
  margin-bottom: 12px;
  font-size: 19px;
}
.why__item .h3 .ico { color: var(--pink-600); width: 24px; height: 24px; }
.why__item .t2 { padding-left: 40px; max-width: 46ch; }

/* ---------- footer ---------- */
.footer {
  background: var(--pink-600);
  color: var(--white);
  padding: 44px 0 40px;
}
.footer__row {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 16px 32px;
}
.footer__brand { font: 400 30px/1 var(--f-brand); margin-right: auto; }
.footer .t2 { color: var(--white); }
.footer__note { color: rgb(255 255 255 / .8); margin-top: 18px; }

/* ---------- dock (só no celular) ---------- */
.dock { display: none; }

/* ---------- sacola ---------- */
.scrim {
  position: fixed; inset: 0;
  z-index: 20;
  background: rgb(59 42 49 / .35);
}
.bag {
  position: fixed; top: 0; right: 0; bottom: 0;
  z-index: 21;
  width: min(460px, 100%);
  background: var(--white);
  box-shadow: -20px 0 50px -20px rgb(59 42 49 / .35);
  transform: translateX(105%);
  visibility: hidden; /* fechada, sai de verdade da página (não deixa arrastar para o lado no celular) */
  transition: transform .3s ease, visibility 0s linear .3s;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.bag.is-open { transform: none; visibility: visible; transition: transform .3s ease, visibility 0s; }
/* com a sacola aberta, a página de trás fica parada */
body.is-locked { overflow: hidden; }
.bag, .bag * { touch-action: pan-y; }
.bag__form > *, .card7 > * { min-width: 0; }
.card7__info .t3 { overflow-wrap: anywhere; }
.pickup-note { margin-top: -6px; }
.bag__form { display: flex; flex-direction: column; gap: 20px; padding: 28px 26px 36px; min-height: 100%; }
.bag__head { display: flex; align-items: center; justify-content: space-between; }
.bag__head .h2 { font-size: 26px; color: var(--pink-600); }
.bag__close {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border: 0; border-radius: 50%;
  background: var(--pink-200); color: var(--pink-600);
}
.bag__empty { color: var(--ink-soft); }
.bag__items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }

.card7 {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 10px 14px;
  padding: 12px;
  border-radius: var(--r-md);
  background: var(--pink-200);
}
.card7--short { box-shadow: inset 0 0 0 2px var(--pink-600); }
.card7--short [data-item-price] { color: var(--pink-700); font-weight: 700; }
.card7__media { width: 56px; height: 56px; border-radius: var(--r-sm); background: var(--white) center / cover no-repeat; }
.card7__info { align-self: center; }
.card7__controls {
  grid-column: 1 / -1;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}

.seg { display: inline-flex; margin: 0; padding: 4px; border: 0; border-radius: var(--r-pill); background: var(--white); }
.seg legend { float: left; width: 100%; margin-bottom: 8px; padding: 0; }
.seg button, .seg label span {
  display: inline-flex; align-items: center;
  min-height: 32px; padding: 0 16px;
  border: 0; border-radius: var(--r-pill);
  background: none;
  color: var(--ink-soft);
  font: 700 13px/1 var(--f-text);
  cursor: pointer;
}
.seg button[aria-pressed="true"], .seg input:checked + span { background: var(--pink-600); color: var(--white); }
.seg label { display: inline-flex; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg input:focus-visible + span { outline: 2px solid var(--pink-600); outline-offset: 2px; }
fieldset.seg { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; background: none; }
fieldset.seg label span { background: var(--pink-200); }

.qty { display: flex; align-items: center; gap: 10px; }
.qty .t1 { min-width: 26px; text-align: center; }
.btn6 {
  width: 32px; height: 32px;
  border: 0; border-radius: 50%;
  background: var(--white); color: var(--pink-600);
  font: 700 18px/1 var(--f-text);
}

.bag__fields { display: flex; flex-direction: column; gap: 14px; margin-top: auto; padding-top: 8px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.in {
  width: 100%;
  min-height: 46px;
  padding: 0 16px;
  border: 1.5px solid transparent;
  border-radius: var(--r-sm);
  background: var(--pink-200);
  outline: none;
}
.in:focus { border-color: var(--pink-600); background: var(--white); }
.in.is-invalid { border-color: var(--pink-700); }
.bag__total {
  display: flex; align-items: baseline; justify-content: space-between;
  padding-top: 14px;
  border-top: 1.5px dashed var(--pink-300);
}
.bag__total .h3 { font: 800 22px/1 var(--f-display); color: var(--pink-600); }
.bag__error { color: var(--pink-700); font-weight: 700; }
.bag__error:empty { display: none; }
.bag__send { width: 100%; min-height: 54px; font-size: 16px; }

/* ---------- ordem do protótipo: ocasiões logo após o topo ---------- */
/* a fita do topo desce direto no rosa das ocasiões: uma transição só, sem faixa branca */
.ribbon {
  background:
    url("bg/ribbon.svg") repeat-x left center / 300px 100px,
    linear-gradient(transparent 60%, var(--pink-100) 60%);
}
.ribbon + .occ { margin-top: 0; padding-top: 36px; }
.ribbon + .occ::before { display: none; }
.best + .flav { padding-top: 40px; }

/* ---------- fotos ---------- */
.hero__media { background: var(--pink-200); overflow: hidden; }
.hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card3__media img { width: 100%; height: 100%; object-fit: cover; }
.card__media, .occ__media { background: var(--pink-200); }

/* kits: foto da bandeja com o número por cima */
.kit__face { overflow: hidden; isolation: isolate; }
.kit__photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.kit__face::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgb(59 42 49 / .15), rgb(217 64 111 / .55));
}
.kit__face .kit__num { color: var(--white); text-shadow: 0 4px 24px rgb(59 42 49 / .45); }
.kit__face .kit__unit { color: var(--white); opacity: .95; }

/* ---------- vitrines (infantil e presentear) ---------- */
.shop-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 44px 28px;
  text-align: left;
}
.shop-grid .card .btn2 { margin-top: 10px; }
.card__price { color: var(--pink-600); font-weight: 700; }
@media (min-width: 1200px) {
  .kids .shop-grid, .gifts .shop-grid { grid-template-columns: repeat(5, 1fr); gap: 40px 22px; }
}
.card--topo .card__media { outline: 3px dashed var(--pink-300); outline-offset: 4px; }

.kids { padding: 60px 0 90px; }
.kids .card .t3:not(.card__price) { color: var(--ink); }
.gifts { position: relative; padding: 60px 0 90px; }

/* ---------- mimos e revenda: mesma estrutura das outras vitrines ---------- */
.shop { padding: 60px 0 90px; text-align: center; }
.shop .shop-grid { text-align: left; }
.shop__cta { margin-top: 56px; }

/* ---------- escolha de sabor no card (ex.: trufa) ---------- */
.variant { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.variant__select { min-height: 40px; padding: 0 12px; font: 600 14px/1 var(--f-text); cursor: pointer; }

/* ---------- faixas rosa alternadas entre as categorias ---------- */
.band {
  position: relative;
  background: var(--pink-100);
  border-image: conic-gradient(var(--pink-100) 0 0) fill 0 // 0 100vmax; /* fundo de ponta a ponta */
  margin-block: clamp(70px, 10vw, 150px);
}
.flav.band, .gifts.band, .shop.band { padding: 30px 0 70px; }
.band::before, .band::after {
  content: "";
  position: absolute; left: 50%;
  width: 130vw; /* folga para não sobrar canto branco em nenhuma tela */
  height: clamp(70px, 10vw, 150px);
  background: url("bg/wave-occ.svg") no-repeat center bottom / 100% 100%;
  transform: translateX(-50%);
  pointer-events: none;
}
.band::before { bottom: calc(100% - 1px); }
.band::after { top: calc(100% - 1px); transform: translateX(-50%) scaleY(-1); }
/* a última faixa rosa emenda direto no "Por que o Canto Doce" */
.band:has(+ .why) { margin-bottom: 0; }
.band:has(+ .why)::after { display: none; }
.band + .why::before { background-image: url("bg/wave-why-pink.svg"); }
.band .variant__select { background: var(--white); }

/* ---------- janela de quantidades por sabor ---------- */
.fl-list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; max-height: 46vh; overflow-y: auto; }
.fl-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 8px 8px 16px;
  border-radius: var(--r-sm);
  background: var(--pink-200);
}
.fl-row .t1 { font-size: 15px; }
.fl-row .btn6:disabled { opacity: .35; cursor: default; }
.fl-shell { margin-bottom: 4px; }
.fl-hint { color: var(--pink-700); font-weight: 700; min-height: 1.2em; }
.picker__add:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }

/* ---------- atalho flutuante da sacola ---------- */
.bag-fab {
  position: fixed; right: 24px; bottom: 24px;
  z-index: 15;
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 52px;
  padding: 0 22px 0 18px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--pink-600);
  color: var(--white);
  font: 700 15px/1 var(--f-text);
  box-shadow: 0 14px 30px -10px rgb(217 64 111 / .65);
  animation: fab-in .35s ease-out;
}
.bag-fab:hover { background: var(--pink-700); }
.bag-fab__meta { padding-left: 10px; border-left: 1px solid rgb(255 255 255 / .4); font-weight: 600; opacity: .95; }
.bag-fab.is-flash { animation: fab-bump .5s ease-out; }
@keyframes fab-in { from { opacity: 0; transform: translateY(16px); } }
@keyframes fab-bump { 30% { transform: scale(1.08); } }

/* ---------- finos: dois kits centralizados + vitrine dos tipos ---------- */
.kit-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 300px));
  justify-content: center;
  gap: 28px;
  text-align: left;
}
.kit-row .card .btn2 { align-self: flex-start; margin-top: 10px; }
.finos__label { margin: 64px 0 28px; }

/* ---------- topinho no seletor do kit ---------- */
.addon { position: relative; display: block; }
.addon input { position: absolute; opacity: 0; pointer-events: none; }
.addon__box {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 14px 16px;
  border: 1.5px dashed var(--pink-300);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.addon__box::before {
  content: ""; flex: none;
  width: 22px; height: 22px;
  border: 2px solid var(--pink-600);
  border-radius: 6px;
  background: var(--white) center / 14px no-repeat;
}
.addon input:checked + .addon__box { background: var(--pink-200); border-style: solid; border-color: var(--pink-600); }
.addon input:checked + .addon__box::before {
  background-color: var(--pink-600);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.addon input:focus-visible + .addon__box { outline: 2px solid var(--pink-600); outline-offset: 2px; }
.addon__text { flex: 1; display: flex; flex-direction: column; gap: 2px; font: 500 13px/1.35 var(--f-text); color: var(--ink-soft); }
.addon__text strong { font: 700 15px/1.3 var(--f-text); color: var(--ink); }
.addon__price { flex: none; font: 700 13px/1.2 var(--f-text); color: var(--pink-600); text-align: right; max-width: 10ch; }

/* ---------- faixa com os sabores tradicionais ---------- */
.flavor-strip { margin-top: 44px; text-align: center; }
.flavor-strip__label { margin-bottom: 14px; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; color: var(--pink-300); }
.flavor-strip__list {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  margin: 0; padding: 0; list-style: none;
}
.flavor-strip__list li {
  padding: 9px 16px;
  border-radius: var(--r-pill);
  background: var(--pink-200);
  color: var(--pink-700);
  font: 700 14px/1 var(--f-text);
}

/* ---------- cabeçalho dos finos (mesmo arranjo do cabeçalho dos kits) ---------- */
.flav__head {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  align-items: center;
  gap: 32px;
  text-align: left;
  margin-bottom: 56px;
}
.flav__head .t2 { justify-self: end; max-width: 34ch; }

/* ---------- kits de 25 / 50 / 75 / 100 ---------- */
.kit__face {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px;
  color: var(--pink-600);
}
.kit__num { font: 900 clamp(56px, 6vw, 92px)/1 var(--f-display); letter-spacing: -.03em; }
.kit__unit { font: 700 15px/1 var(--f-text); color: var(--pink-300); text-transform: uppercase; letter-spacing: .12em; }

.kit__face { position: relative; }
.kit__badge {
  position: absolute; top: 14px; right: 14px;
  padding: 7px 12px;
  border-radius: var(--r-pill);
  background: var(--pink-600);
  color: var(--white);
  font: 800 12px/1 var(--f-text);
  letter-spacing: 0;
  text-transform: none;
}
.kit__price { font: 800 22px/1.1 var(--f-display); color: var(--pink-600); margin-top: 2px; }

.card7--kit .card7__media {
  display: grid; place-items: center;
  background: var(--white);
  color: var(--pink-600);
  font: 900 18px/1 var(--f-display);
}

/* ---------- janela de sabores do kit ---------- */
.picker {
  width: min(540px, 100% - 32px);
  max-height: calc(100% - 32px);
  padding: 0;
  border: 0;
  border-radius: var(--r-lg);
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 30px 80px -30px rgb(59 42 49 / .5);
}
.picker::backdrop { background: rgb(59 42 49 / .4); }
.picker__form { display: flex; flex-direction: column; gap: 18px; padding: 26px; }
.picker__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.picker__head .h2 { font-size: 24px; color: var(--pink-600); }
.picker__head .h2 > span { display: inline; }
.picker__count { color: var(--pink-600); font-weight: 700; }
.picker__list {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin: 0; padding: 0; border: 0;
}
.picker__list legend { margin-bottom: 8px; padding: 0; }
.chip { position: relative; display: flex; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip > span {
  flex: 1;
  display: flex; align-items: center;
  min-height: 46px;
  padding: 8px 14px;
  border: 1.5px solid var(--pink-200);
  border-radius: var(--r-sm);
  background: var(--pink-200);
  font: 600 14px/1.25 var(--f-text);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.chip > span:hover { border-color: var(--pink-300); }
.chip__thumb {
  flex: none;
  width: 40px; height: 40px;
  margin: -2px 12px -2px -6px;
  border-radius: 10px;
  object-fit: cover;
  background: var(--white);
}
.chip input:checked + span { background: var(--pink-600); border-color: var(--pink-600); color: var(--white); }
.chip input:disabled + span { opacity: .4; cursor: not-allowed; }
.chip input:focus-visible + span { outline: 2px solid var(--pink-600); outline-offset: 2px; }
.picker__add { width: 100%; min-height: 52px; }

/* ---------- tablet ---------- */
@media (max-width: 1024px) {
  .pills { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); }
  /* tablet: os 4 kits cabem lado a lado, sem rolar */
  .carousel__track { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); gap: 18px; overflow: visible; }
  .flav__grid { grid-template-columns: repeat(3, 1fr); }
  .shop-grid { grid-template-columns: repeat(3, 1fr); }
  .carousel__prev { left: -10px; }
  .carousel__next { right: -10px; }
  .hero__card { padding: 70px 28px 100px; }
  .hero__title { font-size: clamp(26px, 3.6vw, 34px); }
}

/* ---------- celular ---------- */
@media (max-width: 760px) {
  body { padding-bottom: 88px; }
  .wrap { width: calc(100% - 32px); }

  .nav { background: linear-gradient(var(--white) 0 64px, var(--pink-400) 64px); }
  .nav__top { height: 64px; }
  .nav__side:first-child .nav__icon { display: none; }
  .nav__side:first-child { min-width: 38px; }
  .nav__bag { display: none; }
  .logo__name { font-size: 24px; }
  .logo__mark { display: none; }

  .pills {
    display: flex; gap: 8px;
    width: 100%; padding: 12px 16px 0;
    overflow-x: auto; scrollbar-width: none;
  }
  .pills::-webkit-scrollbar { display: none; }

  /* hero no celular: foto de fundo, texto por cima (como na versão mobile da referência) */
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .hero__media { position: absolute; inset: 0; margin: 0; }
  .hero__media::before { display: none; }
  .hero__media::after { content: ""; position: absolute; inset: 0; background: rgb(59 42 49 / .28); }
  .hero__card { z-index: 1; padding: 70px 20px 100px; gap: 16px; }
  .hero__title, .hero__title .tone-strong, .hero__text, .lead-note { color: var(--white); }
  .hero__loop path { stroke: var(--white); }
  .hero__spark { display: none; }

  .best { padding: 72px 0 96px; }
  .best__head { grid-template-columns: 1fr; gap: 16px; margin-bottom: 32px; }
  .best__head .t2 { justify-self: start; }
  /* celular: kits em duas colunas, um embaixo do outro, como as outras vitrines */
  .carousel__track { grid-template-columns: repeat(2, 1fr); gap: 28px 14px; }
  .carousel__prev, .carousel__next { display: none; }
  .best__cta { margin-top: 36px; }

  .occ { padding-bottom: 110px; }
  .occ__title { margin-bottom: 24px; }
  .occ__track { gap: 14px; padding-inline: 16px; }
  .card5, .card6 { flex-basis: 62%; padding: 16px 16px 20px; }

  .rail { transform: rotate(5deg); height: 52px; }
  .rail__run { font-size: 22px; }

  .flav { padding: 110px 0 130px; }
  .flav > .h2 { margin-bottom: 32px; }
  .flav__head { grid-template-columns: 1fr; gap: 16px; margin-bottom: 32px; }
  .kit-row { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .kit-row .card .btn2 { align-self: stretch; }
  .finos__label { margin: 40px 0 20px; }
  .flav__head .t2 { justify-self: start; }
  .flavor-strip { margin-top: 32px; }
  .flavor-strip__list { justify-content: flex-start; }
  .flavor-strip__list li { font-size: 13px; padding: 8px 13px; }
  .flav__grid { grid-template-columns: repeat(2, 1fr); gap: 28px 14px; }
  .shop-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 14px; }
  .kids, .gifts { padding: 40px 0 70px; }
  .flav.band, .gifts.band, .shop.band { padding: 20px 0 50px; }
  .shop { padding: 40px 0 70px; }
  .shop__cta { margin-top: 36px; }
  .flav__grid + .flav__grid { margin-top: 28px; }
  .card3 .btn4 { width: 36px; height: 36px; font-size: 11px; top: 6px; right: 6px; }
  .card3 .btn2, .card .btn2 { align-self: stretch; }
  .t3 { font-size: 12px; }

  .why { grid-template-columns: 1fr; }
  .why__media { min-height: 460px; }
  .why__title { padding: 90px 20px 32px; }
  .why__list { padding: 56px 20px 64px; gap: 36px; }
  .why__item .t2 { padding-left: 0; }

  .footer__row { flex-direction: column; align-items: flex-start; }
  .footer__row .btn { width: 100%; }

  .bag-fab { left: 16px; right: 16px; bottom: 84px; justify-content: center; white-space: nowrap; font-size: 14px; }
  .bag-fab.is-flash { animation: none; }
  .dock {
    position: fixed; left: 12px; right: 12px; bottom: 12px;
    z-index: 10;
    display: flex; justify-content: space-around; align-items: center;
    height: 60px;
    border-radius: var(--r-pill);
    background: var(--white);
    box-shadow: 0 12px 30px -10px rgb(59 42 49 / .35);
  }
  .dock__btn {
    position: relative;
    display: grid; place-items: center;
    width: 48px; height: 48px;
    border: 0; border-radius: 50%;
    background: none;
    color: var(--pink-600);
  }
}

@media (max-width: 420px) {
  .picker__form { padding: 20px 18px; }
  .picker__list { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rail__run { animation: none; }
  .hero__loop path { animation: none; stroke-dashoffset: 0; }
  .bag { transition: none; }
  .bag-fab, .bag-fab.is-flash { animation: none; }
}