/* =========================================================
   Globo de Neve · template de Natal do Menuzinho (contrato v1)
   Nasceu como o cardápio de Natal da Canela & Neve. Paleta "caixa de bombons": cacau, glacê, cereja,
   pistache, ouro. Um tema só, escuro, de propósito.
   ========================================================= */

/* Fontes do pacote, sob a SIL Open Font License 1.1 (o texto completo vem logo abaixo; com as perguntas
   frequentes, em scripts.sil.org/OFL):
   - Shrikhand: Copyright (c) 2015 Jonny Pinhorn (jonpinhorn.typedesign@gmail.com);
   - Figtree: Copyright 2022 The Figtree Project Authors (github.com/erikdkennedy/figtree).
   Arquivos da Fontsource, só o latim (o português) e o latim estendido; cada um baixa só quando é preciso.
   Cada .woff2 leva o aviso de copyright; a licença vai aqui porque o pacote só aceita os arquivos do contrato.

   This Font Software is licensed under the SIL Open Font License, Version 1.1.

   -----------------------------------------------------------
   SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
   -----------------------------------------------------------

   PREAMBLE
   The goals of the Open Font License (OFL) are to stimulate worldwide
   development of collaborative font projects, to support the font creation
   efforts of academic and linguistic communities, and to provide a free and
   open framework in which fonts may be shared and improved in partnership
   with others.

   The OFL allows the licensed fonts to be used, studied, modified and
   redistributed freely as long as they are not sold by themselves. The
   fonts, including any derivative works, can be bundled, embedded,
   redistributed and/or sold with any software provided that any reserved
   names are not used by derivative works. The fonts and derivatives,
   however, cannot be released under any other type of license. The
   requirement for fonts to remain under this license does not apply
   to any document created using the fonts or their derivatives.

   DEFINITIONS
   "Font Software" refers to the set of files released by the Copyright
   Holder(s) under this license and clearly marked as such. This may
   include source files, build scripts and documentation.

   "Reserved Font Name" refers to any names specified as such after the
   copyright statement(s).

   "Original Version" refers to the collection of Font Software components as
   distributed by the Copyright Holder(s).

   "Modified Version" refers to any derivative made by adding to, deleting,
   or substituting -- in part or in whole -- any of the components of the
   Original Version, by changing formats or by porting the Font Software to a
   new environment.

   "Author" refers to any designer, engineer, programmer, technical
   writer or other person who contributed to the Font Software.

   PERMISSION & CONDITIONS
   Permission is hereby granted, free of charge, to any person obtaining
   a copy of the Font Software, to use, study, copy, merge, embed, modify,
   redistribute, and sell modified and unmodified copies of the Font
   Software, subject to the following conditions:

   1) Neither the Font Software nor any of its individual components,
   in Original or Modified Versions, may be sold by itself.

   2) Original or Modified Versions of the Font Software may be bundled,
   redistributed and/or sold with any software, provided that each copy
   contains the above copyright notice and this license. These can be
   included either as stand-alone text files, human-readable headers or
   in the appropriate machine-readable metadata fields within text or
   binary files as long as those fields can be easily viewed by the user.

   3) No Modified Version of the Font Software may use the Reserved Font
   Name(s) unless explicit written permission is granted by the corresponding
   Copyright Holder. This restriction only applies to the primary font name as
   presented to the users.

   4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
   Software shall not be used to promote, endorse or advertise any
   Modified Version, except to acknowledge the contribution(s) of the
   Copyright Holder(s) and the Author(s) or with their explicit written
   permission.

   5) The Font Software, modified or unmodified, in part or in whole,
   must be distributed entirely under this license, and must not be
   distributed under any other license. The requirement for fonts to
   remain under this license does not apply to any document created
   using the Font Software.

   TERMINATION
   This license becomes null and void if any of the above conditions are
   not met.

   DISCLAIMER
   THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
   EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
   MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
   OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
   COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
   INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
   DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
   FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
   OTHER DEALINGS IN THE FONT SOFTWARE.
*/
@font-face {
  font-family: "Shrikhand"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fontes/shrikhand-latin-400-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Shrikhand"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fontes/shrikhand-latin-ext-400-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Figtree"; font-style: normal; font-weight: 300 900; font-display: swap;
  src: url(fontes/figtree-latin-wght-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Figtree"; font-style: normal; font-weight: 300 900; font-display: swap;
  src: url(fontes/figtree-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
:root {
  --cacau: #1e120d;
  --cacau-2: #26170f;
  --ganache: #34201a;
  --ganache-2: #462b20;
  --glace: #fff6ea;
  --glace-2: rgba(255, 246, 234, .78);
  --glace-3: rgba(255, 246, 234, .58);
  --cereja: #c8323f;
  --cereja-2: #dc4553;
  --cereja-3: #8f1f2c;
  --pistache: #a9c98a;
  --pistache-2: #5f8545;
  --ouro: #e8b45a;
  --ouro-2: #f6d58d;
  --ouro-3: #b8832f;
  --tinta: #2b1810;
  --line: rgba(255, 246, 234, .13);
  --line-2: rgba(255, 246, 234, .26);
  --f-display: "Shrikhand", "Cooper Black", "Bookman Old Style", Georgia, serif;
  --f-text: "Figtree", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --header-h: 68px;
  --catbar-h: 60px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --spring: cubic-bezier(.34, 1.5, .64, 1);
  --wrap: min(1240px, 100% - 40px);
  color-scheme: dark;
}
@media (max-width: 760px) {
  :root { --header-h: 58px; --catbar-h: 54px; --wrap: calc(100% - 32px); }
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  background: var(--cacau);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--catbar-h) + 12px);
  scrollbar-gutter: stable;
  scrollbar-color: var(--ganache-2) var(--cacau); /* no computador (e na prévia do painel), a barra no tom da página */
  /* sem "puxar para atualizar": no celular, quem arrastava o globo para baixo no topo recarregava a página
     (e perdia a caixa que estava montando) */
  overscroll-behavior-y: contain;
}
html.is-locked { overflow: hidden; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--f-text);
  font-size: 17px;
  line-height: 1.55;
  color: var(--glace);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}
/* as manchas de luz do fundo ficam numa camada fixa: rolar a página não obriga a repintá-las (pesava no celular) */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(1100px 760px at 82% -8%, rgba(232, 180, 90, .14), transparent 62%),
    radial-gradient(900px 900px at -12% 46%, rgba(200, 50, 63, .07), transparent 60%),
    radial-gradient(900px 700px at 110% 82%, rgba(169, 201, 138, .05), transparent 60%);
}
main, footer { position: relative; z-index: 1; }
img, svg, canvas { display: block; }
[hidden] { display: none !important; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
::selection { background: var(--ouro); color: var(--tinta); }

/* ---------- abertura: cobre a página até as fontes (e as primeiras fotos) chegarem ---------- */
/* Na plataforma o tema.js roda no fim da página: a abertura já vem na tela e, se o script não rodar, some
   sozinha em 8 s (o papel da salvaguarda que a página tinha no cabeçalho). Quando não há o que esperar (uma
   recarga, ou tudo já guardado no aparelho), o tema.js a tira antes de ela aparecer. Quando ela fica, o ícone,
   a barra e o texto surgem logo, como uma tela de carregamento de verdade (e não só uma tela escura) */
.loader {
  position: fixed; inset: 0; z-index: 100; display: grid; place-content: center; justify-items: center; gap: 22px;
  background: radial-gradient(55% 40% at 50% 44%, #3a2419, transparent 72%), var(--cacau);
  transition: opacity .5s ease, visibility 0s linear .5s;
  animation: salvaguarda-some 0s linear 8s forwards;
}
@keyframes salvaguarda-some { to { opacity: 0; visibility: hidden; pointer-events: none; } }
.loader__in { display: grid; justify-items: center; gap: 22px; animation: loaderin .4s ease .2s both; }
@keyframes loaderin { from { opacity: 0; transform: translateY(6px); } }
.loader__mark { width: 58px; height: 58px; animation: spin 9s linear infinite; }
@keyframes spin { to { transform: rotate(1turn); } }
.loader__track { width: 148px; height: 3px; border-radius: 3px; background: rgba(255, 246, 234, .14); overflow: hidden; }
/* enquanto espera, a barra anda sozinha, devagar e sem chegar ao fim (antes ficava parada até o tema.js
   chegar); quando a página fica pronta, o tema.js a completa */
.loader__bar {
  display: block; height: 100%; border-radius: inherit; background: var(--ouro); transform: scaleX(.06); transform-origin: 0 50%;
  transition: transform .45s var(--ease); animation: barra-espera 7s cubic-bezier(.12, .7, .3, 1) .2s both;
}
@keyframes barra-espera { from { transform: scaleX(.06); } to { transform: scaleX(.85); } }
.loader__label { margin: 0; font-size: 13px; letter-spacing: .01em; color: var(--glace-3); }
/* o estado fica na própria tela de carregamento (e não no <html>), e ela sai da página depois de sumir */
.loader.is-saindo { opacity: 0; visibility: hidden; pointer-events: none; }
.loader.is-rapido { transition-duration: .22s, 0s; transition-delay: 0s, .22s; }
:focus-visible { outline: 3px solid var(--ouro); outline-offset: 3px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ico { width: 22px; height: 22px; flex: none; }
.wrap { width: var(--wrap); margin-inline: auto; }
.skip {
  position: fixed; left: 16px; top: -80px; z-index: 100;
  background: var(--glace); color: var(--tinta); padding: 10px 16px; border-radius: 10px; font-weight: 700; text-decoration: none;
}
.skip:focus { top: 12px; }

/* ---------- tipografia ---------- */
.h2 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(38px, 5vw, 62px);
  line-height: 1.04;
  letter-spacing: .005em;
  margin: 0;
  text-wrap: balance;
}
.lede { color: var(--glace-2); font-size: clamp(16px, 1.3vw, 18.5px); max-width: 48ch; margin: 14px 0 0; text-wrap: pretty; }
.icing {
  color: var(--glace);
  text-shadow:
    0 1px 0 #f1e3cf,
    0 2px 0 #e0cbb0,
    0 3px 0 #c9ae8d,
    0 4px 0 #b39674,
    0 8px 14px rgba(0, 0, 0, .45),
    0 18px 34px rgba(0, 0, 0, .35);
}

/* ---------- botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 26px; border-radius: 999px;
  font-weight: 700; font-size: 16px; line-height: 1.1; text-decoration: none; white-space: nowrap;
  transition: transform .25s var(--ease), background-color .2s, box-shadow .2s, color .2s, opacity .2s;
}
.btn:active { transform: translateY(1px) scale(.98); }
.btn--primary {
  background: var(--cereja); color: var(--glace);
  box-shadow: 0 12px 26px -12px rgba(200, 50, 63, .95), inset 0 1px 0 rgba(255, 255, 255, .22);
}
.btn--primary:hover { background: var(--cereja-2); }
.btn--ghost { color: var(--glace); box-shadow: inset 0 0 0 1.5px var(--line-2); }
.btn--ghost:hover { box-shadow: inset 0 0 0 1.5px var(--glace); background: rgba(255, 246, 234, .04); }
.btn--sm { min-height: 42px; padding: 0 18px; font-size: 15px; }
.btn--block { width: 100%; justify-content: space-between; }
.btn[disabled] { opacity: .5; cursor: not-allowed; box-shadow: none; }
.btn__price { font-variant-numeric: tabular-nums; opacity: .92; }
.icon-btn {
  position: relative; width: 44px; height: 44px; border-radius: 999px;
  display: grid; place-items: center; color: var(--glace);
  transition: background-color .2s, color .2s;
}
.icon-btn:hover { background: rgba(255, 246, 234, .09); }
.icon-btn[aria-pressed="true"] { color: var(--ouro); }
.link-btn { color: var(--glace-2); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; font-size: 15px; }
.link-btn:hover { color: var(--glace); }

/* ---------- neve ---------- */
/* a altura grande da tela (com a barra do navegador escondida): a barra aparecer e sumir na rolagem do
   celular não muda o tamanho da neve, que assim não é refeita no meio da rolagem */
.snow { position: fixed; top: 0; left: 0; z-index: 0; width: 100%; height: 100vh; height: 100lvh; pointer-events: none; }

/* ---------- topo ---------- */
.topbar {
  position: fixed; inset: 0 0 auto 0; z-index: 40; height: var(--header-h);
  display: flex; align-items: center;
  transition: background-color .35s, box-shadow .35s, backdrop-filter .35s;
}
.topbar.is-solid {
  background: rgba(30, 18, 13, .82);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 1px 0 var(--line);
}
.topbar__inner { width: var(--wrap); margin-inline: auto; display: flex; align-items: center; gap: 18px; }
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; text-decoration: none; color: var(--glace); flex: 0 1 auto; }
.brand__mark { width: 34px; height: 34px; flex: none; transition: transform .8s var(--ease); }
/* o logo da loja: solto e inteiro, com a transparência dele (sem aro, moldura nem recorte), na altura do topo */
.brand__logo { display: block; flex: none; width: auto; height: 50px; max-width: 210px; object-fit: contain; object-position: left center; }
.brand:hover .brand__mark { transform: rotate(45deg); }
.brand__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--f-display); font-size: 22px; line-height: 1.15; padding-top: 2px; }
.nav { display: flex; gap: 2px; margin-left: auto; }
.nav a {
  padding: 9px 14px; border-radius: 999px; color: var(--glace-2);
  text-decoration: none; font-weight: 600; font-size: 15px;
  transition: color .2s, background-color .2s;
}
.nav a:hover { color: var(--glace); background: rgba(255, 246, 234, .07); }
.actions { display: flex; align-items: center; gap: 4px; margin-left: 8px; }
.snow-btn__bars { position: absolute; right: 6px; bottom: 8px; display: flex; gap: 1.5px; align-items: flex-end; }
.snow-btn__bars i { width: 2.5px; border-radius: 2px; background: currentColor; opacity: .25; }
.snow-btn__bars i:nth-child(1) { height: 4px; }
.snow-btn__bars i:nth-child(2) { height: 6.5px; }
.snow-btn__bars i:nth-child(3) { height: 9px; }
.snow-btn[data-level="1"] .snow-btn__bars i:nth-child(-n+1),
.snow-btn[data-level="2"] .snow-btn__bars i:nth-child(-n+2),
.snow-btn[data-level="3"] .snow-btn__bars i:nth-child(-n+3) { opacity: 1; }
.snow-btn[data-level="0"] { color: var(--glace-3); }
.snow-btn .ico { transform: translateX(-3px); }
.sound-btn.is-playing .ico { animation: notewiggle 1.6s ease-in-out infinite; }
@keyframes notewiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-9deg) translateY(-1px); } 75% { transform: rotate(7deg); } }
.bag-btn {
  display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 8px 0 14px; margin-left: 6px;
  border-radius: 999px; background: var(--glace); color: var(--tinta); font-weight: 700; font-size: 15px;
  transition: transform .3s var(--ease), background-color .2s;
}
.bag-btn:hover { background: #fff; }
.bag-btn .ico { width: 20px; height: 20px; }
.bag-btn__total { font-variant-numeric: tabular-nums; }
.bag-btn__count {
  min-width: 28px; height: 28px; padding: 0 8px; border-radius: 999px;
  display: grid; place-items: center; background: var(--cereja); color: var(--glace); font-size: 14px; font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.bag-btn.is-bump { animation: bump .55s var(--spring); }
@keyframes bump { 0% { transform: scale(1); } 35% { transform: scale(1.12); } 100% { transform: scale(1); } }
@media (max-width: 980px) { .nav { display: none; } .actions { margin-left: auto; } }
@media (max-width: 520px) {
  .brand__name { font-size: 19px; }
  .brand__mark { width: 30px; height: 30px; }
  .brand__logo { height: 42px; max-width: 160px; }
  .bag-btn__label, .bag-btn__total { display: none; }
  .bag-btn { padding: 0 6px 0 10px; gap: 6px; }
  .actions { gap: 0; }
}
@media (max-width: 370px) { .brand__name { display: none; } .brand__logo { max-width: 130px; } }
@media (max-width: 600px) { .globe { width: min(100%, 340px); } }

/* ---------- hero ---------- */
/* overflow-anchor: numa recarga, o navegador devolve a rolagem de antes ancorando num elemento; o título,
   ainda deslocado 22 px pela entrada, puxava a página 22 px para baixo (e ela pulava ao aparecer) */
.hero {
  position: relative;
  overflow-anchor: none;
  min-height: min(100vh, 960px);
  min-height: min(100svh, 960px);
  padding: calc(var(--header-h) + 84px) 0 72px;
  display: flex; align-items: center;
  overflow: hidden;
}
.hero__inner {
  width: var(--wrap); margin-inline: auto;
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); grid-template-areas: "title globe" "copy globe";
  column-gap: 32px; align-items: center;
  position: relative; z-index: 1;
}
.hero__title { grid-area: title; align-self: end; }
.hero__globe { grid-area: globe; }
.hero__copy { grid-area: copy; align-self: start; }
.hero__title {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(46px, 6.1vw, 92px); line-height: 1.02; letter-spacing: .004em;
  margin: 0 0 30px;
}
.hero__title .hero__line { display: block; }
.hero__lede { font-size: clamp(17px, 1.35vw, 20px); color: var(--glace-2); max-width: 38ch; margin: 0 0 32px; text-wrap: pretty; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.deadline { display: flex; align-items: center; gap: 10px; margin: 30px 0 0; color: var(--glace-2); font-size: 15.5px; }
.deadline .ico { color: var(--ouro); width: 20px; height: 20px; }
.deadline b { color: var(--glace); font-weight: 700; }

/* entrada orquestrada: uma vez, quando a página abre depois da tela de carregamento (.com-entrada). Numa
   recarga, a página aparece direto (.is-in sem .com-entrada), sem parecer uma segunda abertura */
.hero:not(.is-in) .hero__title .hero__line, .hero:not(.is-in) .hero__lede, .hero:not(.is-in) .hero__ctas, .hero:not(.is-in) .deadline {
  opacity: 0; transform: translateY(22px); animation: salvaguarda-aparece 0s linear 8s forwards;
}
.hero:not(.is-in) .hero__globe { opacity: 0; transform: scale(.94); animation: salvaguarda-aparece 0s linear 8s forwards; }
@keyframes salvaguarda-aparece { to { opacity: 1; transform: none; } }
.hero.com-entrada .hero__title .hero__line, .hero.com-entrada .hero__lede, .hero.com-entrada .hero__ctas, .hero.com-entrada .deadline, .hero.com-entrada .hero__globe {
  transition: opacity .9s var(--ease), transform 1.1s var(--ease);
}
.hero.com-entrada .hero__title .hero__line:nth-child(2) { transition-delay: .08s; }
.hero.com-entrada .hero__title .hero__line:nth-child(3) { transition-delay: .2s; }
.hero.com-entrada .hero__title .hero__line:nth-child(4) { transition-delay: .28s; }
.hero.com-entrada .hero__lede { transition-delay: .42s; }
.hero.com-entrada .hero__ctas { transition-delay: .52s; }
.hero.com-entrada .deadline { transition-delay: .62s; }
.hero.com-entrada .hero__globe { transition-delay: .25s; transition-duration: 1.2s, 1.4s; }

/* pisca-pisca */
.lights { position: absolute; left: 0; right: 0; top: calc(var(--header-h) - 4px); height: 96px; z-index: 2; pointer-events: none; }
.lights svg { width: 100%; height: 100%; overflow: visible; }
.lights .wire { fill: none; stroke: #5b3a26; stroke-width: 1.5; }
.lights .wire-hit { fill: none; stroke: transparent; stroke-width: 26; pointer-events: stroke; cursor: pointer; }
/* cada lâmpada: o brilho (que pisca) e a lâmpada, fora do desenho do fio (tema.js, Lights): assim quem anima o
   pisca é a placa de vídeo, e o celular não redesenha o fio a cada quadro */
.led { position: absolute; width: 0; height: 0; opacity: 0; transition: opacity .5s; }
.lights.is-on .led { opacity: 1; transition-delay: calc(var(--i) * 28ms); }
.lights.sem-entrada .led { transition: none; }
.led__bulb { position: absolute; left: -2.3px; top: -2.3px; width: 4.6px; height: 4.6px; border-radius: 50%; background: #fff5d8; }
.led__halo {
  position: absolute; left: -11px; top: -11px; width: 22px; height: 22px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 230, 166, .95), rgba(255, 207, 110, .42) 35%, rgba(255, 179, 71, 0));
  animation: twinkle var(--d, 3.2s) ease-in-out var(--delay, 0s) infinite;
}
@keyframes twinkle { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .32; transform: scale(.82); } }
.lights[data-mode="chase"] .led__halo { animation: chase 1.6s linear calc(var(--i) * 55ms - 30s) infinite; }
@keyframes chase { 0%, 70%, 100% { opacity: .25; transform: scale(.8); } 12% { opacity: 1; transform: scale(1.25); } }
.lights[data-mode="steady"] .led__halo { animation: none; opacity: .95; }
.hero-off .led__halo, .hero-off .globe__luzes i, .hero-off .globe-hint .ico { animation-play-state: paused; }

/* globo */
.hero__globe { display: grid; justify-items: center; gap: 16px; position: relative; }
.hero__globe::before {
  content: ""; position: absolute; inset: -6% -10% 6%; z-index: -1; pointer-events: none;
  background: radial-gradient(50% 48% at 50% 44%, rgba(246, 196, 110, .26), rgba(232, 150, 70, .08) 55%, transparent 72%);
}
.globe {
  position: relative; width: min(100%, 470px); aspect-ratio: 400 / 470;
  touch-action: pan-y; cursor: grab; border-radius: 50% 50% 22% 22% / 42% 42% 16% 16%;
  -webkit-user-select: none; user-select: none;
}
.globe:active { cursor: grabbing; }
.globe:focus-visible { outline-offset: 8px; }
.globe__body { position: absolute; inset: 0; transform-origin: 50% 88%; }
.globe__body.is-returning { transition: transform .9s var(--spring); }
.globe__layer { position: absolute; inset: 0; width: 100%; height: 100%; }
.globe__snow { position: absolute; left: 8%; top: 6.8085%; width: 84%; height: 71.4894%; }
.globe-hint {
  display: flex; align-items: center; gap: 8px; margin: 0; max-width: 34ch; text-align: center; justify-content: center;
  font-size: 14.5px; color: var(--glace-3); min-height: 2.9em;
}
.globe-hint .ico { width: 20px; height: 20px; color: var(--ouro); flex: none; }
.globe-hint .ico { animation: nudge 2.4s ease-in-out infinite; }
.globe-hint.is-done .ico { animation: none; }
/* iPhone e iPad: o botão que pede a permissão do sensor de movimento (tema.js, Movimento) */
.globe-motion { min-height: 44px; margin-top: -6px; padding: 0 16px; gap: 8px; font-size: 14.5px; font-weight: 650; color: var(--glace-2); animation: fadein .4s ease; }
.globe-motion .ico { width: 18px; height: 18px; color: var(--ouro); }
@keyframes nudge { 0%, 60%, 100% { transform: translateX(0) rotate(0); } 70% { transform: translateX(-4px) rotate(-10deg); } 80% { transform: translateX(4px) rotate(8deg); } 90% { transform: translateX(-2px) rotate(-4deg); } }
/* as luzinhas da casinha, do pinheiro e do coqueiro: por cima do desenho do globo (trechos/globo.liquid), e
   não dentro dele. Piscando dentro, obrigavam o celular a redesenhar o globo inteiro a cada quadro */
.globe__luzes { position: absolute; inset: 0; pointer-events: none; }
.globe__luzes i { position: absolute; width: 1%; height: .851%; border-radius: 50%; background: #ffd27a; transform: translate(-50%, -50%); animation: flicker 5s ease-in-out infinite; }
.globe__luzes i.casa { width: .9%; height: .766%; background: #ffd98a; }
.globe__luzes i.poste { width: 7%; height: 5.957%; background: radial-gradient(closest-side, rgba(255, 231, 168, .95), rgba(255, 184, 74, 0)); }
.globe__luzes i:nth-child(2n) { animation-delay: -2.2s; }
@keyframes flicker { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

@media (max-width: 860px) {
  .hero { min-height: 0; padding-top: calc(var(--header-h) + 50px); padding-bottom: 40px; }
  .hero__inner { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "globe" "copy"; row-gap: 14px; }
  .hero__title { font-size: clamp(42px, 12.4vw, 76px); margin-bottom: 0; }
  .globe { width: min(100%, 420px); }
  .lights { height: 70px; }
  .hero__lede { font-size: 16.5px; margin-bottom: 24px; }
  .hero__ctas { gap: 10px; }
  .hero__ctas .btn { min-height: 48px; padding: 0 18px; font-size: 15px; }
  .deadline { margin-top: 22px; font-size: 14.5px; }
}

/* ---------- cardápio ---------- */
.menu { padding: 56px 0 40px; }
.menu__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 40px; align-items: end; margin-bottom: 30px; }
.tools { display: flex; flex-direction: column; gap: 12px; align-items: flex-end; }
.search { position: relative; display: block; width: min(360px, 100%); }
.search .ico { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--glace-3); width: 20px; height: 20px; pointer-events: none; }
.search input {
  width: 100%; height: 48px; border-radius: 999px; border: 1.5px solid var(--line-2);
  background: rgba(255, 246, 234, .05); padding: 0 18px 0 46px; font-size: 16px; color: var(--glace);
  transition: border-color .2s, background-color .2s;
}
.search input::placeholder { color: var(--glace-3); }
.search input:hover { border-color: rgba(255, 246, 234, .4); }
.search input:focus { outline: none; border-color: var(--ouro); background: rgba(255, 246, 234, .08); }
.search input::-webkit-search-cancel-button { filter: invert(1) opacity(.6); }
.diets { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.chip {
  height: 38px; padding: 0 14px 0 11px; border-radius: 999px; display: inline-flex; align-items: center; gap: 7px;
  box-shadow: inset 0 0 0 1.5px var(--line-2); font-size: 14.5px; font-weight: 650; color: var(--glace-2);
  transition: background-color .2s, color .2s, box-shadow .2s;
}
.chip .ico { width: 18px; height: 18px; }
.chip:hover { color: var(--glace); box-shadow: inset 0 0 0 1.5px rgba(255, 246, 234, .5); }
.chip[aria-pressed="true"] { background: var(--pistache); color: #1d2a12; box-shadow: none; }
@media (max-width: 760px) {
  .chip { height: 36px; padding: 0 11px 0 9px; font-size: 13.5px; gap: 5px; }
  .chip .ico { width: 16px; height: 16px; }
  .diets { gap: 6px; }
  .menu__head { grid-template-columns: minmax(0, 1fr); }
  .tools { align-items: stretch; }
  .search { width: 100%; }
  .diets { justify-content: flex-start; }
}

.catbar {
  position: sticky; top: var(--header-h); z-index: 30; height: var(--catbar-h);
  display: flex; align-items: center;
  background: rgba(30, 18, 13, .9);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-block: 1px solid var(--line);
}
.catbar__track {
  position: relative; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none;
  padding: 4px 0; scroll-behavior: smooth;
}
.catbar__track::-webkit-scrollbar { display: none; }
.catbar__link {
  position: relative; z-index: 1; flex: none; padding: 8px 16px; border-radius: 999px;
  font-weight: 700; font-size: 15px; color: var(--glace-2); text-decoration: none; white-space: nowrap;
  transition: color .3s;
}
.catbar__link:hover { color: var(--glace); }
.catbar__link:focus-visible { outline-offset: -3px; }
.catbar__link.is-active { color: var(--tinta); }
.catbar__link.is-empty { opacity: .35; }
.catbar__pill {
  position: absolute; z-index: 0; top: 4px; left: 0; height: calc(100% - 8px); width: 0; border-radius: 999px;
  background: var(--glace); transition: transform .45s var(--ease), width .45s var(--ease); pointer-events: none;
}

.cat { padding-top: 64px; scroll-margin-top: calc(var(--header-h) + var(--catbar-h) + 8px); }
.cat:first-child { padding-top: 44px; }
.cat[hidden] { display: none; }
.cat__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 32px; flex-wrap: wrap; margin-bottom: 18px; }
.cat__title { font-family: var(--f-display); font-weight: 400; font-size: clamp(30px, 3.2vw, 42px); line-height: 1.05; margin: 0; }
.cat__note { margin: 0; color: var(--glace-3); font-size: 16px; max-width: 52ch; }

/* a vitrine: cada doce num quadro de foto. Todos os quadros têm a mesma proporção,
   e a foto é cortada para caber (o centro fica no ponto "pos" de FOTOS).
   Troque --foto-proporcao para 1 / 1 (quadrada) ou 4 / 5 (vertical) conforme as fotos. */
:root { --foto-proporcao: 4 / 3; }
.products { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 44px 24px; }
.item { position: relative; display: flex; flex-direction: column; min-width: 0; }
.item[hidden] { display: none; }
/* o quadro fica acima da área clicável do card, mas deixa o toque passar (só o botão "Trocar foto" da prévia o recebe) */
.item__media {
  position: relative; z-index: 3; aspect-ratio: var(--foto-proporcao); border-radius: 16px; overflow: hidden; isolation: isolate;
  background: var(--ph, #2e1c14); pointer-events: none;
}
.item__media::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 246, 234, .09); pointer-events: none; }
.photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s ease, transform .7s var(--ease); }
.photo.is-in { opacity: 1; }
/* sem foto: a ilustração sobre uma mesa, com luz de estúdio */
.item__media.is-art { background: radial-gradient(58% 50% at 50% 60%, rgba(246, 213, 141, .22), transparent 72%), linear-gradient(180deg, #2e1c14 0 64%, #3b251a 64% 100%); }
.item__media.is-art::before { content: ""; position: absolute; left: 0; right: 0; top: 64%; height: 1px; background: linear-gradient(90deg, transparent, rgba(232, 180, 90, .4), transparent); }
.item__media .art {
  position: absolute; left: 9%; bottom: 6%; width: 82%; height: auto; aspect-ratio: 240 / 180;
  filter: drop-shadow(0 14px 12px rgba(0, 0, 0, .3)); transition: transform .6s var(--ease); transform-origin: 50% 100%;
}
@media (hover: hover) {
  .item:hover .photo { transform: scale(1.04); }
  .item:hover .item__media .art { transform: translateY(-6px) rotate(-1.2deg); }
}
.item__info { display: flex; flex-direction: column; flex: 1; padding-top: 14px; }
.item__name { margin: 0 0 6px; font-size: 18px; line-height: 1.25; font-weight: 750; letter-spacing: -.005em; text-wrap: balance; }
.item__open { text-align: left; font-weight: inherit; }
.item__open::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: 16px; }
.item__open:focus-visible { outline: none; }
.item:has(.item__open:focus-visible) { outline: 3px solid var(--ouro); outline-offset: 6px; border-radius: 18px; }
.item__desc { margin: 0 0 12px; font-size: 14.5px; line-height: 1.5; color: var(--glace-2); max-width: 46ch; text-wrap: pretty; }
.item__diets { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 12px; }
.item__diets li { display: inline-flex; align-items: center; gap: 5px; font-size: 13.5px; font-weight: 650; color: var(--pistache); }
.item__diets .ico { width: 16px; height: 16px; }
.item__buy { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.price { margin: 0; font-weight: 800; font-size: 19px; color: var(--ouro); font-variant-numeric: tabular-nums; line-height: 1.2; }
.price__unit { display: block; font-weight: 600; font-size: 13px; color: var(--glace-3); }
.price--from { font-size: 16px; }
.add {
  position: relative; z-index: 3; flex: none; display: inline-flex; align-items: center; gap: 6px; height: 42px; padding: 0 16px 0 12px; border-radius: 999px;
  background: var(--cereja); color: var(--glace); font-weight: 700; font-size: 15px;
  box-shadow: 0 10px 20px -12px rgba(200, 50, 63, .9), inset 0 1px 0 rgba(255, 255, 255, .2);
  transition: background-color .2s, transform .25s var(--ease);
}
.add:hover { background: var(--cereja-2); }
.add:active { transform: scale(.95); }
.add .ico { width: 18px; height: 18px; }
.add--ghost { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line-2); }
.add--ghost:hover { background: rgba(255, 246, 234, .07); }
.tag {
  position: absolute; z-index: 3; top: 12px; left: 0; pointer-events: none;
  padding: 5px 12px 5px 10px; border-radius: 0 999px 999px 0;
  font-size: 12.5px; font-weight: 800; letter-spacing: .01em; line-height: 1.2;
  background: var(--ouro); color: #2d1b07; box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .6);
}
.tag--pist { background: var(--pistache); color: #1d2a12; }
.tag--red { background: var(--cereja); color: var(--glace); }
.tag--cream { background: var(--glace); color: var(--tinta); }
.item__inbag {
  position: absolute; z-index: 3; top: 10px; right: 10px; pointer-events: none;
  display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 10px 0 8px; border-radius: 999px;
  background: var(--glace); color: var(--tinta); font-size: 13px; font-weight: 800;
  box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .6);
  animation: pop .45s var(--spring);
}
.item__inbag[hidden] { display: none; }
.item__inbag .ico { width: 15px; height: 15px; }
@keyframes pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* destaque (wide): ocupa duas colunas, com a foto do mesmo tamanho das vizinhas e o texto ao lado */
.item--wide { grid-column: span 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 24px; align-content: start; }
.item--wide .item__info { padding-top: 2px; }
.item--wide .item__name { font-family: var(--f-display); font-weight: 400; font-size: clamp(26px, 2.4vw, 32px); line-height: 1.08; letter-spacing: 0; margin-bottom: 10px; }
.item--wide .item__desc { font-size: 15px; }

@media (max-width: 1080px) {
  .products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 20px; }
  .item--wide { column-gap: 20px; }
}
@media (max-width: 640px) {
  .products { gap: 30px 12px; }
  .item__media { border-radius: 14px; }
  .item__info { padding-top: 10px; }
  .item__name { font-size: 15.5px; margin-bottom: 4px; }
  .item__desc { font-size: 13px; line-height: 1.42; margin-bottom: 10px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
  .item__diets { gap: 4px 10px; margin-bottom: 12px; }
  .item__diets li { font-size: 12px; gap: 4px; }
  .item__diets .ico { width: 15px; height: 15px; }
  .price { font-size: 16px; }
  .price__unit { font-size: 12px; }
  .price--from { font-size: 14px; }
  .add { width: 40px; height: 40px; padding: 0; justify-content: center; }
  .add span { display: none; }
  .add .ico { width: 20px; height: 20px; }
  .tag { top: 10px; font-size: 11.5px; padding: 4px 9px 4px 8px; }
  .item__inbag { top: 8px; right: 8px; height: 26px; font-size: 12.5px; }
  /* no celular, o destaque fica com a foto grande em cima e o texto embaixo */
  .item--wide { display: flex; }
  .item--wide .item__info { padding-top: 12px; }
  .item--wide .item__name { font-size: 26px; margin-bottom: 8px; }
  .item--wide .item__desc { font-size: 14px; max-width: none; -webkit-line-clamp: 4; line-clamp: 4; }
  .item--wide .add { width: auto; padding: 0 16px 0 12px; }
  .item--wide .add span { display: inline; }
}

.empty { text-align: center; padding: 72px 0 32px; }
.empty[hidden] { display: none; }
.empty__icon { width: 54px; height: 54px; margin: 0 auto 16px; color: var(--ouro); }
.empty h3 { font-family: var(--f-display); font-weight: 400; font-size: 30px; margin: 0 0 8px; }
.empty p { color: var(--glace-2); margin: 0 auto 22px; max-width: 42ch; }

/* ---------- monte sua caixa (a da página original; a caixa e os sabores são os da loja) ---------- */
.builder { padding: 120px 0 110px; position: relative; }
.builder::before {
  content: ""; position: absolute; inset: 40px 0 0; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 70% at 30% 50%, rgba(200, 50, 63, .13), transparent 70%);
}
.builder__grid { display: grid; grid-template-columns: minmax(0, 480px) minmax(0, 1fr); gap: 40px 72px; align-items: start; }
.builder__intro { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: end; gap: 24px 48px; flex-wrap: wrap; }
.builder__choices { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0; max-width: 100%; }
.builder__name { margin: 0; font-weight: 750; font-size: 16px; color: var(--ouro-2); overflow-wrap: anywhere; }
.seg { display: inline-flex; flex-wrap: wrap; max-width: 100%; padding: 4px; border-radius: 26px; background: rgba(255, 246, 234, .06); box-shadow: inset 0 0 0 1px var(--line); }
.seg__opt { position: relative; min-width: 0; }
.seg__opt input { position: absolute; opacity: 0; pointer-events: none; }
.seg__opt span {
  display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px; cursor: pointer;
  font-weight: 700; font-size: 15px; color: var(--glace-2); transition: background-color .25s, color .25s; overflow-wrap: anywhere;
}
.seg__opt small { font-weight: 600; font-size: 13.5px; opacity: .8; font-variant-numeric: tabular-nums; white-space: nowrap; }
.seg__opt input:checked + span { background: var(--glace); color: var(--tinta); }
.seg__opt input:focus-visible + span { outline: 3px solid var(--ouro); outline-offset: 2px; }
.builder__stage { position: sticky; top: calc(var(--header-h) + 24px); }
.box {
  --cols: 3;
  position: relative; border-radius: 18px; padding: 18px;
  background: linear-gradient(160deg, #d43c4a, #a5242f 55%, #851a26);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .12), inset 0 -10px 22px rgba(0, 0, 0, .25), 0 40px 70px -30px rgba(0, 0, 0, .85);
  perspective: 1200px;
}
.box.is-shake { animation: boxshake .45s ease; }
@keyframes boxshake { 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
.box__grid {
  display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 8px;
  padding: 14px; border-radius: 10px;
  background: radial-gradient(rgba(255, 255, 255, .05) 1px, transparent 1.4px) 0 0 / 6px 6px, radial-gradient(120% 120% at 30% 20%, #6e1c29, #3f0c15);
  box-shadow: inset 0 10px 22px rgba(0, 0, 0, .45), inset 0 0 0 2px rgba(0, 0, 0, .25);
}
.slot { position: relative; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; }
.slot svg { width: 100%; height: 100%; }
.slot__truffle { position: absolute; inset: 0; transition: transform .35s var(--spring), opacity .25s; }
.slot.is-empty .slot__truffle { transform: scale(.2); opacity: 0; }
.slot.is-landing .slot__truffle { animation: land .45s var(--spring); }
@keyframes land { 0% { transform: translateY(-30%) scale(1.25); } 60% { transform: translateY(2%) scale(.94); } 100% { transform: none; } }
.slot.is-empty::after {
  content: "+"; position: absolute; font-size: var(--slot-mais, 22px); font-weight: 700; color: rgba(255, 236, 196, .55);
}
.slot:not(.is-empty):hover .slot__truffle { transform: scale(.92); }
.box__lid {
  position: absolute; inset: -6px; border-radius: 20px; pointer-events: none;
  background: linear-gradient(160deg, #d8414f, #a5242f 60%, #8a1b28);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .14), 0 30px 60px -20px rgba(0, 0, 0, .8);
  display: grid; place-items: center; overflow: hidden;
  transform: translateY(-115%) rotateX(-25deg); transform-origin: 50% 0; opacity: 0;
  transition: transform .7s var(--ease), opacity .4s;
}
.box__lid::before, .box__lid::after { content: ""; position: absolute; background: linear-gradient(90deg, #c8902f, #f6d58d 45%, #d4a046 60%, #a87420); transition: transform .5s var(--ease) .55s; }
.box__lid::before { left: 0; right: 0; top: calc(50% - 14px); height: 28px; transform: scaleX(0); }
.box__lid::after { top: 0; bottom: 0; left: calc(50% - 14px); width: 28px; transform: scaleY(0); background: linear-gradient(180deg, #c8902f, #f6d58d 45%, #d4a046 60%, #a87420); }
.box__bow { position: relative; z-index: 2; width: 46%; max-width: 190px; transform: scale(0) rotate(-20deg); transition: transform .6s var(--spring) .9s; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .35)); }
.box__seal {
  position: absolute; z-index: 1; left: 25%; top: 25%; max-width: 44%; transform: translate(-50%, -50%) rotate(-6deg);
  font-family: var(--f-display); font-size: clamp(13px, 1.6vw, 18px); line-height: 1.1; text-align: center; color: var(--ouro-2);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .25); overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
}
.box.is-closed .box__lid { transform: none; opacity: 1; }
.box.is-closed .box__lid::before { transform: scaleX(1); }
.box.is-closed .box__lid::after { transform: scaleY(1); }
.box.is-closed .box__bow { transform: none; }
.builder__status { margin: 16px 0 0; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; color: var(--glace-2); font-size: 15px; min-height: 42px; }
.builder__status b { color: var(--glace); }
.builder__side { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.flavors { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.flavor {
  position: relative; width: 100%; height: 100%; display: grid; grid-template-columns: 52px 1fr; align-items: center; gap: 12px; text-align: left;
  padding: 8px 12px 8px 8px; border-radius: 16px; background: rgba(255, 246, 234, .04); box-shadow: inset 0 0 0 1px var(--line);
  transition: background-color .2s, box-shadow .2s, transform .2s var(--ease);
}
.flavor:hover { background: rgba(255, 246, 234, .08); box-shadow: inset 0 0 0 1px var(--line-2); }
.flavor:active { transform: scale(.98); }
.flavor svg { width: 52px; height: 52px; }
.flavor__name { display: block; font-weight: 750; font-size: 15.5px; line-height: 1.2; overflow-wrap: anywhere; }
.flavor__desc { display: block; font-size: 13px; line-height: 1.35; color: var(--glace-3); margin-top: 2px; overflow-wrap: anywhere; }
.flavor__count {
  position: absolute; top: 6px; left: 42px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
  display: grid; place-items: center; background: var(--glace); color: var(--tinta); font-size: 12px; font-weight: 800;
  box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .6); animation: pop .35s var(--spring);
}
.flavor__count[hidden] { display: none; }
.builder__actions { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 900px) {
  .builder { padding: 80px 0; }
  .builder__grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .builder__stage { position: relative; top: 0; max-width: 460px; width: 100%; margin-inline: auto; }
}
@media (max-width: 520px) {
  .flavors { display: flex; overflow-x: auto; gap: 8px; margin: 0 -16px; padding: 4px 16px 10px; scroll-snap-type: x proximity; scrollbar-width: none; }
  .flavors::-webkit-scrollbar { display: none; }
  .flavors li { flex: none; scroll-snap-align: start; }
  .flavor { width: 96px; grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 6px; padding: 12px 6px 10px; }
  .flavor svg { width: 54px; height: 54px; }
  .flavor__desc { display: none; }
  .flavor__name { font-size: 13.5px; }
  .flavor__count { left: auto; right: 12px; top: 8px; }
  .builder__side { gap: 16px; }
  .box { padding: 12px; }
  .box__grid { padding: 10px; gap: 6px; }
}

/* ---------- calendário do advento ---------- */
.advent { padding: 110px 0 120px; }
.advent__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 64px; align-items: end; margin-bottom: 36px; }
.advent__head .lede { margin: 0; }
.advent__mode {
  grid-column: 1 / -1; margin: 6px 0 0; display: inline-flex; align-items: center; gap: 10px; justify-self: start;
  padding: 10px 16px; border-radius: 14px; background: rgba(232, 180, 90, .1); box-shadow: inset 0 0 0 1px rgba(232, 180, 90, .3);
  color: var(--ouro-2); font-size: 15px;
}
.advent__mode .ico { width: 20px; height: 20px; }
.advent__grid {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: clamp(92px, 9.4vw, 124px);
  grid-auto-flow: dense; gap: 12px;
}
.door { position: relative; border-radius: 14px; text-align: center; }
.door.is-open { z-index: 2; }
.door--w { grid-column: span 2; }

.door--h { grid-row: span 2; }
.door--big { grid-column: span 2; grid-row: span 2; }
.door__inside {
  position: absolute; inset: 0; border-radius: 14px; padding: 10px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: radial-gradient(90% 90% at 50% 40%, #3c251a, #1a0e09);
  box-shadow: inset 0 8px 18px rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(255, 246, 234, .06);
  color: var(--ouro-2); font-size: 13.5px; font-weight: 750;
}
.door__inside .ico { width: 28px; height: 28px; }
.door--big .door__inside .ico { width: 44px; height: 44px; }
.door__inside small { display: block; color: var(--glace-3); font-weight: 600; font-size: 12px; }
.door__leaf {
  position: absolute; top: 0; bottom: 0; left: 0; width: 100%;
  transform-origin: 0 50%; transform-style: preserve-3d; transform: perspective(1000px) rotateY(0deg);
  transition: transform 1s cubic-bezier(.3, 1.2, .4, 1);
}
.door--double .door__leaf { width: 50%; }
.door__leaf--r { left: auto; right: 0; transform-origin: 100% 50%; }
.door__front, .door__back { position: absolute; inset: 0; border-radius: 14px; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.door--double .door__leaf--l .door__front, .door--double .door__leaf--l .door__back { border-radius: 14px 4px 4px 14px; }
.door--double .door__leaf--r .door__front, .door--double .door__leaf--r .door__back { border-radius: 4px 14px 14px 4px; }
.door__face { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; display: grid; place-items: center; }
.door--double .door__face { width: 200%; }
.door__leaf--r .door__face { left: -100%; }
.door--double .door__leaf--r .door__front::after { right: auto; left: 12px; }
.door--double .door__front::after { top: 24%; }
.door__front {
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 10px 22px -10px rgba(0, 0, 0, .75);
  transition: filter .25s;
}
.door__front::before { content: ""; position: absolute; inset: 7px; border-radius: 9px; border: 2px dashed rgba(255, 246, 234, .5); pointer-events: none; }
.door__front::after { content: ""; position: absolute; right: 12px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--ouro-2); box-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
.door__back { transform: rotateY(180deg); background: linear-gradient(90deg, #d9c6a6, #f3e6cf); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.door__num { position: relative; font-family: var(--f-display); font-size: clamp(26px, 2.6vw, 38px); line-height: 1; color: var(--glace); text-shadow: 0 2px 0 rgba(0, 0, 0, .22); }
.door--big .door__num { font-size: clamp(54px, 6.4vw, 92px); }
.door--cereja .door__front { background: radial-gradient(rgba(255, 246, 234, .16) 1.2px, transparent 1.7px) 0 0 / 14px 14px, radial-gradient(circle at 30% 20%, #d63e4c, #9c2230); }
.door--pistache .door__front { background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .09) 0 6px, transparent 6px 14px), linear-gradient(140deg, #95ba74, #5f8545); }
.door--pistache .door__num { color: #1d2a12; text-shadow: 0 1px 0 rgba(255, 255, 255, .3); }
.door--pistache .door__front::before { border-color: rgba(29, 42, 18, .38); }
.door--ouro .door__front { background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .28) 45%, transparent 60%), linear-gradient(140deg, #f3cf7c, #c08a2c); }
.door--ouro .door__num { color: var(--tinta); text-shadow: 0 1px 0 rgba(255, 255, 255, .35); }
.door--ouro .door__front::before { border-color: rgba(43, 24, 16, .35); }
.door--ganache .door__front { background: radial-gradient(rgba(255, 246, 234, .1) 1px, transparent 1.5px) 7px 7px / 14px 14px, linear-gradient(140deg, #5a3727, #3a2117); }
.door--glace .door__front { background: radial-gradient(rgba(200, 50, 63, .14) 1.2px, transparent 1.7px) 0 0 / 12px 12px, linear-gradient(140deg, #fffaf2, #ecdcc2); }
.door--glace .door__num { color: var(--cereja); text-shadow: none; }
.door--glace .door__front::before { border-color: rgba(200, 50, 63, .4); }
.door:hover .door__front { filter: brightness(1.08); }
.door.is-open .door__leaf { transform: perspective(1000px) rotateY(-102deg); }
.door.is-open .door__leaf--r { transform: perspective(1000px) rotateY(102deg); }
.door.is-open .door__front::after { opacity: 0; }
.door.is-today .door__front { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 0 0 3px var(--ouro), 0 0 30px 4px rgba(232, 180, 90, .45); }
.door__lock { position: absolute; left: 12px; bottom: 10px; width: 16px; height: 16px; opacity: .65; color: var(--glace); }
.door--glace .door__lock, .door--ouro .door__lock, .door--pistache .door__lock { color: var(--tinta); }
.door.is-locked:hover .door__front { filter: none; }
.door.is-denied { animation: boxshake .45s ease; }
.door:focus-visible { outline-offset: 4px; }
@media (min-width: 761px) {
  .door--double.door--w-sm .door__leaf--r { display: none; }
  .door--double.door--w-sm .door__leaf--l { width: 100%; }
  .door--double.door--w-sm .door__leaf--l .door__front, .door--double.door--w-sm .door__leaf--l .door__back { border-radius: 14px; }
  .door--double.door--w-sm .door__face { width: 100%; }
}
@media (max-width: 760px) {
  .advent { padding: 80px 0; }
  .advent__head { grid-template-columns: minmax(0, 1fr); }
  .advent__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 84px; gap: 8px; }
  .door--w-sm { grid-column: span 2; }
  .door--h { grid-row: span 2; }
  .door__inside { font-size: 12px; padding: 6px; }
  .door__inside small { display: none; }
  .door__front::before { inset: 5px; border-radius: 7px; }
  .door__front::after { right: 8px; width: 5px; height: 5px; margin-top: -2.5px; }
}

/* ---------- como encomendar ---------- */
.howto { padding: 40px 0 110px; }
.howto__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 32px 64px; align-items: start; }
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; gap: 26px; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 56px 1fr; gap: 0 18px; }
.steps li::before {
  content: counter(step); grid-row: span 2; width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--f-display); font-size: 26px; color: var(--tinta);
  background: radial-gradient(circle at 35% 30%, #fff8ec, #e8d5b8); box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .7);
}
.steps h3 { margin: 4px 0 4px; font-size: 20px; font-weight: 750; }
.steps p { margin: 0; color: var(--glace-2); max-width: 54ch; }
@media (max-width: 760px) { .howto__grid { grid-template-columns: minmax(0, 1fr); } .howto { padding-bottom: 80px; } }

/* ---------- rodapé ---------- */
.footer { padding: 64px 0 120px; border-top: 1px solid var(--line); background: linear-gradient(180deg, rgba(20, 11, 8, .2), rgba(20, 11, 8, .65)); }
.footer__grid { display: grid; grid-template-columns: 1.3fr 1fr 1.3fr 1fr; gap: 32px; }
.footer__brand { display: flex; flex-direction: column; gap: 12px; }
.footer__brand .brand__name { font-size: 28px; white-space: normal; overflow-wrap: anywhere; }
.footer__brand .brand__logo { height: auto; max-height: 88px; max-width: min(240px, 100%); }
.footer__brand p { margin: 0; color: var(--glace-3); max-width: 30ch; }
.footer h3 { margin: 0 0 8px; font-size: 15px; font-weight: 750; color: var(--ouro); }
.footer__grid p { margin: 0; color: var(--glace-2); font-size: 15.5px; }
.footer__note { margin-top: 48px; padding-top: 24px; border-top: 1px dashed var(--line-2); color: var(--glace-3); font-size: 14px; max-width: none; }
@media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer__grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- barra da sacola (celular) ---------- */
.bagbar {
  position: fixed; z-index: 38; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom));
  display: none; align-items: center; gap: 12px; height: 58px; padding: 0 8px 0 18px; border-radius: 999px;
  background: var(--glace); color: var(--tinta); font-weight: 750; font-size: 16px;
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .8);
  transform: translateY(140%); transition: transform .5s var(--spring);
}
.bagbar.is-visible { transform: none; }
.bagbar__label { flex: 1; text-align: left; }
.bagbar__total { font-variant-numeric: tabular-nums; }
.bagbar__go { height: 44px; padding: 0 16px; border-radius: 999px; background: var(--cereja); color: var(--glace); display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 760px) { .bagbar { display: flex; } .has-bag body { padding-bottom: 84px; } }

/* ---------- toasts ---------- */
.toasts, .toast-slot {
  position: fixed; z-index: 45; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px; width: min(440px, calc(100% - 24px)); pointer-events: none;
}
@media (max-width: 760px) { .toasts.has-bar { bottom: calc(84px + env(safe-area-inset-bottom)); } }
.toast {
  pointer-events: auto; display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 12px 12px 12px 16px; border-radius: 16px; background: var(--glace); color: var(--tinta);
  box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .8); font-size: 15px; font-weight: 600; line-height: 1.35;
  animation: toastin .45s var(--spring);
}
.toast.is-leaving { animation: toastout .3s ease forwards; }
.toast .ico { width: 20px; height: 20px; color: var(--cereja); }
.toast__msg { flex: 1; }
.toast__action { flex: none; padding: 8px 12px; border-radius: 999px; font-weight: 750; color: var(--cereja-3); background: rgba(200, 50, 63, .1); }
.toast__action:hover { background: rgba(200, 50, 63, .18); }
@keyframes toastin { from { transform: translateY(18px) scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes toastout { to { transform: translateY(10px); opacity: 0; } }

/* ---------- animação para a sacola ---------- */
.flyer { position: fixed; z-index: 60; width: 72px; height: 54px; pointer-events: none; }
.flyer > div { width: 100%; height: 100%; }
.flyer svg { width: 100%; height: 100%; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .4)); }
.flyer--photo > div { position: relative; overflow: hidden; border-radius: 16px; box-shadow: 0 12px 24px -8px rgba(0, 0, 0, .6), 0 0 0 2px rgba(255, 246, 234, .7); }
.burst { position: fixed; z-index: 61; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--ouro-2); pointer-events: none; }

/* ---------- trenó ---------- */
.sleigh { position: fixed; z-index: 55; left: 0; top: 0; width: 260px; pointer-events: none; opacity: 0; }
.sleigh svg { width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 0 10px rgba(246, 213, 141, .55)); }

/* ---------- diálogos ---------- */
/* Sem showModal (iPhone antes do iOS 15.4), a janela abre só pelo atributo open, fora da camada de cima: o
   z-index a põe sobre a página, o fundo escurece (.sem-modal, do tema.js) e a fechada some. Com showModal,
   nada disso muda a janela. */
.dlg {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 90;
  width: 100%; height: 100%; max-width: 100%; max-height: 100%; margin: 0; padding: 0;
  border: 0; background: transparent; color: var(--glace); overflow: hidden;
  /* corta o que está fora da tela sem virar uma área que rola: ao abrir, o navegador leva o foco ao primeiro
     botão da janela e, com a gaveta (e, no celular, a ficha) ainda fora da tela no começo da animação, rolava a
     janela até ele. A gaveta aparecia de uma vez e tremia enquanto a animação e a rolagem brigavam */
  overflow: clip;
}
.dlg:not([open]) { display: none; }
.dlg[open] { display: grid; place-items: center; }
.sem-modal .dlg[open] { background: rgba(14, 8, 5, .66); }
.dlg::backdrop { background: rgba(14, 8, 5, .66); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: fadein .3s ease; }
.dlg.is-closing::backdrop { animation: fadeout .25s ease forwards; }
@keyframes fadein { from { opacity: 0; } }
@keyframes fadeout { to { opacity: 0; } }
.panel {
  position: relative; max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); overflow: auto; overscroll-behavior: contain;
  background: linear-gradient(180deg, #3a241b, #2a1912); border-radius: 28px;
  box-shadow: inset 0 0 0 1px var(--line), 0 40px 90px -30px rgba(0, 0, 0, .9);
  animation: panelin .45s var(--ease);
}
.dlg.is-closing .panel { animation: panelout .25s ease forwards; }
@keyframes panelin { from { transform: translateY(24px) scale(.97); opacity: 0; } }
@keyframes panelout { to { transform: translateY(16px) scale(.98); opacity: 0; } }
.panel__close { position: absolute; z-index: 5; top: 14px; right: 14px; background: rgba(30, 18, 13, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

/* produto */
/* ficha em uma coluna: a foto grande em cima, no mesmo formato da vitrine, e os detalhes embaixo */
.pd { width: min(600px, calc(100vw - 40px)); display: grid; grid-template-columns: minmax(0, 1fr); padding: 0; }
/* na ficha, a foto aparece inteira; se o formato não bater com o quadro, as sobras ganham a própria foto desfocada */
.pd__media {
  position: relative; aspect-ratio: var(--foto-proporcao); max-height: 58vh; overflow: hidden; isolation: isolate;
  background: var(--ph, #2e1c14) center / cover no-repeat;
}
.pd__media:not(.is-art)::before { content: ""; position: absolute; inset: 0; z-index: 0; background: inherit; filter: blur(22px) brightness(.72) saturate(1.1); transform: scale(1.15); }
.pd__media .photo { z-index: 1; object-fit: contain; transition: opacity .4s ease; }
.pd__media.is-art {
  aspect-ratio: auto; max-height: none; display: flex; flex-direction: column; justify-content: center; padding: 44px 36px 0;
  background: radial-gradient(70% 50% at 50% 46%, rgba(246, 213, 141, .2), transparent 70%), linear-gradient(180deg, #2a1912, #1e120d);
}
.pd__media .art { width: 100%; max-width: 360px; margin: 0 auto -6px; position: relative; z-index: 1; filter: drop-shadow(0 20px 18px rgba(0, 0, 0, .35)); animation: artin .7s var(--ease) .05s both; }
@keyframes artin { from { transform: translateY(14px) scale(.96); opacity: 0; } }
.pd__media .steam { animation: steam 3.4s ease-in-out infinite; }
.pd__shelf { height: 12px; margin: 0 -36px; background: linear-gradient(180deg, rgba(255, 246, 234, .36), rgba(255, 246, 234, .05)); border-bottom: 2px solid rgba(232, 180, 90, .6); box-shadow: 0 20px 26px -12px rgba(0, 0, 0, .8); }
.pd__media .tag { top: 22px; }
.pd__body { padding: 30px 36px 32px; display: flex; flex-direction: column; gap: 18px; }
.pd__name { font-family: var(--f-display); font-weight: 400; font-size: clamp(30px, 3.2vw, 40px); line-height: 1.06; margin: 0; padding-right: 40px; text-wrap: balance; }
.pd__long { margin: 0; color: var(--glace-2); font-size: 16.5px; text-wrap: pretty; }
.pd__tip { margin: 0; display: flex; gap: 10px; padding: 12px 14px; border-radius: 14px; background: rgba(232, 180, 90, .09); color: var(--ouro-2); font-size: 15px; }
.pd__tip .ico { color: var(--ouro); width: 20px; height: 20px; margin-top: 1px; }
.pd__facts { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; font-size: 15px; }
.pd__facts dt { color: var(--glace-3); }
.pd__facts dd { margin: 0; }
.field { border: 0; margin: 0; padding: 0; min-width: 0; }
.field legend, .field__label { padding: 0; margin-bottom: 10px; font-size: 14.5px; font-weight: 750; color: var(--glace); }
.opts { display: flex; flex-wrap: wrap; gap: 8px; }
.opt { position: relative; }
.opt input { position: absolute; opacity: 0; pointer-events: none; }
.opt span {
  display: flex; flex-direction: column; justify-content: center; min-height: 52px; padding: 6px 16px; border-radius: 14px; cursor: pointer;
  box-shadow: inset 0 0 0 1.5px var(--line-2); font-weight: 700; font-size: 15px; line-height: 1.2;
  transition: box-shadow .2s, background-color .2s;
}
.opt small { font-weight: 600; font-size: 13px; color: var(--glace-3); font-variant-numeric: tabular-nums; }
.opt span:hover { box-shadow: inset 0 0 0 1.5px rgba(255, 246, 234, .55); }
.opt input:checked + span { box-shadow: inset 0 0 0 2px var(--ouro); background: rgba(232, 180, 90, .1); }
.opt input:checked + span small { color: var(--ouro-2); }
.opt input:focus-visible + span { outline: 3px solid var(--ouro); outline-offset: 2px; }
.check { display: flex; align-items: center; gap: 12px; cursor: pointer; font-size: 15.5px; }
.check input {
  appearance: none; -webkit-appearance: none; flex: none; width: 24px; height: 24px; margin: 0; border-radius: 8px;
  box-shadow: inset 0 0 0 1.5px var(--line-2); display: grid; place-items: center; cursor: pointer; transition: background-color .2s, box-shadow .2s;
}
.check input::after { content: ""; width: 12px; height: 7px; border-left: 2.5px solid var(--tinta); border-bottom: 2.5px solid var(--tinta); transform: translateY(-1px) rotate(-45deg) scale(0); transition: transform .25s var(--spring); }
.check input:checked { background: var(--ouro); box-shadow: none; }
.check input:checked::after { transform: translateY(-1px) rotate(-45deg) scale(1); }
.check small { color: var(--glace-3); font-variant-numeric: tabular-nums; }
.textarea, .input {
  width: 100%; border-radius: 14px; border: 1.5px solid var(--line-2); background: rgba(0, 0, 0, .18); color: var(--glace);
  padding: 12px 14px; font-size: 15.5px; resize: vertical; transition: border-color .2s;
}
.input { height: 48px; padding: 0 14px; }
.textarea::placeholder, .input::placeholder { color: var(--glace-3); }
.textarea:focus, .input:focus { outline: none; border-color: var(--ouro); }
/* a linha de compra fica presa no pé da ficha enquanto a pessoa rola os detalhes */
.pd__buy {
  position: sticky; z-index: 2; bottom: 0; display: flex; gap: 12px; align-items: center;
  margin: 4px -36px -32px; padding: 16px 36px 32px;
  background: linear-gradient(180deg, rgba(42, 25, 18, 0), #2a1912 26%);
}
.pd__buy .btn { flex: 1; justify-content: space-between; }
.stepper { display: inline-flex; align-items: center; height: 52px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--line-2); flex: none; }
.stepper button { width: 46px; height: 100%; border-radius: 999px; display: grid; place-items: center; }
.stepper button:hover { background: rgba(255, 246, 234, .08); }
.stepper button .ico { width: 18px; height: 18px; }
.stepper output { min-width: 24px; text-align: center; font-weight: 800; font-variant-numeric: tabular-nums; }
.stepper--sm { height: 38px; }
.stepper--sm button { width: 36px; }
.stepper--sm output { min-width: 18px; font-size: 15px; }
@keyframes steam { 0% { transform: translateY(4px); opacity: .2; } 50% { opacity: 1; } 100% { transform: translateY(-8px); opacity: 0; } }

@media (max-width: 760px) {
  .dlg--product[open], .dlg--door[open], .dlg--order[open] { place-items: end center; }
  .pd { width: 100vw; grid-template-columns: minmax(0, 1fr); border-radius: 26px 26px 0 0; max-height: 92vh; max-height: 92dvh; }
  .pd__buy .btn { padding: 0 18px; min-width: 0; }
  .sm-hide { display: none; }
  .dlg--product .panel, .dlg--order .panel, .dlg--door .panel { animation-name: sheetin; }
  .dlg--product.is-closing .panel, .dlg--order.is-closing .panel, .dlg--door.is-closing .panel { animation-name: sheetout; }
  .pd__media { max-height: 52vh; }
  .pd__media.is-art { max-height: none; padding: 28px 24px 0; }
  .pd__media .art { max-width: 300px; }
  .pd__media .tag { top: 16px; }
  .pd__shelf { margin: 0 -24px; }
  .pd__body { padding: 26px 20px 20px; gap: 16px; }
  .pd__buy { margin: 4px -20px -20px; padding: 14px 20px calc(16px + env(safe-area-inset-bottom)); }
}
@keyframes sheetin { from { transform: translateY(100%); } }
@keyframes sheetout { to { transform: translateY(100%); } }

/* sacola (gaveta) */
.dlg--drawer[open] { place-items: stretch end; }
.drawer {
  width: min(460px, 100vw); height: 100vh; height: 100dvh; max-height: 100vh; max-height: 100dvh; border-radius: 28px 0 0 28px;
  display: flex; flex-direction: column; overflow: hidden; animation-name: drawerin;
}
.dlg--drawer.is-closing .drawer { animation-name: drawerout; }
@keyframes drawerin { from { transform: translateX(100%); } }
@keyframes drawerout { to { transform: translateX(100%); } }
.drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 20px 14px 24px; border-bottom: 1px solid var(--line); }
.drawer__head h2 { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: 28px; line-height: 1.1; }
.drawer__body { flex: 1; overflow: auto; overscroll-behavior: contain; padding: 8px 24px 24px; }
.drawer__foot { padding: 16px 24px calc(18px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: rgba(20, 11, 8, .35); }
.lines { list-style: none; margin: 0; padding: 0; }
.line { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 4px 14px; padding: 16px 0; border-bottom: 1px dashed var(--line-2); align-items: start; }
.line__thumb { position: relative; overflow: hidden; grid-row: span 2; width: 76px; height: 64px; border-radius: 14px; background: radial-gradient(70% 70% at 50% 75%, rgba(246, 213, 141, .2), transparent 70%), rgba(255, 246, 234, .04); display: grid; place-items: center; }
.line__thumb .art { width: 70px; height: auto; }
.line__name { margin: 0; font-weight: 750; font-size: 16px; line-height: 1.3; }
.line__opts { margin: 2px 0 0; font-size: 13.5px; color: var(--glace-3); line-height: 1.4; }
.line__opts--caixa { color: var(--glace-2); overflow-wrap: anywhere; } /* a caixa montada: o tamanho e os sabores */
.line__price { margin: 0; font-weight: 800; color: var(--ouro); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.line__ctrl { grid-column: 2 / -1; display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.line__remove { color: var(--glace-3); display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; padding: 6px 8px; border-radius: 10px; }
.line__remove:hover { color: var(--glace); background: rgba(255, 246, 234, .06); }
.line__remove .ico { width: 18px; height: 18px; }
.sect { padding-top: 22px; }
.sect__title { margin: 0 0 12px; font-size: 15px; font-weight: 750; }
.ship { margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: rgba(255, 246, 234, .04); font-size: 14px; color: var(--glace-2); }
.ship__track { position: relative; height: 26px; margin: 8px 6px 2px; }
.ship__track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 2px dashed var(--line-2); }
.ship__fill { position: absolute; left: 0; top: 50%; height: 2px; margin-top: -1px; background: var(--ouro); width: 0; transition: width .7s var(--ease); }
.ship__sleigh { position: absolute; top: 0; left: 0; width: 26px; height: 26px; margin-left: -13px; color: var(--ouro-2); transition: left .7s var(--ease); }
.ship__house { position: absolute; right: -6px; top: 1px; width: 22px; height: 22px; color: var(--glace-2); }
.ship.is-free { color: var(--pistache); }
.sum { margin: 0 0 14px; display: grid; grid-template-columns: 1fr auto; gap: 6px 0; font-size: 15px; }
.sum dt { color: var(--glace-2); }
.sum dd { margin: 0; padding-left: 12px; text-align: right; font-variant-numeric: tabular-nums; font-weight: 650; }
.sum__total { font-size: 19px; font-weight: 800 !important; color: var(--glace) !important; padding-top: 8px; border-top: 1px solid var(--line); }
.cart-empty { text-align: center; padding: 48px 8px; }
.cart-empty .art { width: 220px; margin: 0 auto 8px; opacity: .9; }
.cart-empty h3 { font-family: var(--f-display); font-weight: 400; font-size: 26px; margin: 0 0 6px; }
.cart-empty p { color: var(--glace-2); margin: 0 auto 20px; max-width: 30ch; }
@media (max-width: 760px) {
  .drawer { border-radius: 0; width: 100vw; }
  .drawer__head, .drawer__body, .drawer__foot { padding-left: 18px; padding-right: 18px; }
}

/* porta aberta */
.door-card {
  width: min(460px, calc(100vw - 32px)); padding: 40px 32px 30px; text-align: center;
  background: radial-gradient(rgba(200, 50, 63, .08) 1.2px, transparent 1.7px) 0 0 / 14px 14px, linear-gradient(180deg, #fffaf2, #f1e2c8);
  color: var(--tinta);
}
.door-card .panel__close { color: var(--tinta); background: rgba(43, 24, 16, .08); }
.door-card__icon { width: 64px; height: 64px; margin: 0 auto 14px; display: grid; place-items: center; border-radius: 50%; background: var(--cereja); color: var(--glace); box-shadow: 0 10px 22px -10px rgba(200, 50, 63, .9); }
.door-card__icon .ico { width: 32px; height: 32px; }
.door-card__kicker { margin: 0 0 4px; font-weight: 750; font-size: 14px; color: var(--cereja-3); }
.door-card h2 { font-family: var(--f-display); font-weight: 400; font-size: 30px; line-height: 1.1; margin: 0 0 12px; text-wrap: balance; }
.door-card p.door-card__text { margin: 0 auto; max-width: 36ch; font-size: 16.5px; color: #4a3226; text-wrap: pretty; }
@media (max-width: 760px) { .door-card { width: 100vw; border-radius: 26px 26px 0 0; padding-bottom: calc(28px + env(safe-area-inset-bottom)); } }

/* ---------- movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
  html { scroll-behavior: auto; }
}

/* ---------- o que a plataforma traz (entrega 28) ---------- */
/* aberto ou fechado agora, ao vivo (data-mz-status-loja, da plataforma) */
.deadline--status { margin-top: 10px; }
[data-mz-aberto="false"] { color: var(--glace-3); }
/* os horários da semana, no rodapé */
.footer__horas { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; color: var(--glace-2); font-size: 15px; }
.footer__horas li { display: flex; justify-content: space-between; gap: 12px; max-width: 260px; }
.footer__horas li.is-hoje { color: var(--glace); font-weight: 700; }
.footer__grid p a { color: var(--glace); }
/* doce sem foto e sem ilustração que combine: o emoji dele, sobre a mesa */
.emoji-art { display: grid; place-items: center; width: 100%; height: 100%; font-size: clamp(54px, 9vw, 84px); line-height: 1; padding-bottom: 6%; }
.pd__media .emoji-art { min-height: 220px; font-size: 96px; }
.line__thumb .emoji-art { font-size: 38px; padding: 0; }
.flyer .emoji-art { font-size: 44px; padding: 0; }
/* textos que vêm da loja: nada passa da largura (o teste usa nomes de 60 letras sem espaço) */
.item__name, .item__desc, .pd__name, .pd__long, .line__name, .door-card h2, .door-card__text, .steps h3, .steps p,
.hero__lede, .footer__grid p, .cat__title, .catbar__link { overflow-wrap: anywhere; }
/* na sacola: como a loja entrega e o pedido mínimo */
.recebe { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.recebe li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 12px; background: rgba(255, 246, 234, .06); color: var(--glace-2); font-size: 14px; }
.recebe .ico { width: 18px; height: 18px; color: var(--ouro); }
.drawer__nota { margin: 12px 0 0; font-size: 13.5px; color: var(--glace-3); }

/* ---------- celular (entrega 1.2.0) ---------- */
/* sem o vidro embaçado: atrás das barras a neve se mexe o tempo todo, e o desfoque era refeito a cada
   quadro (cerca de um terço do trabalho de desenho). As barras já eram quase opacas: agora são um pouco mais */
@media (max-width: 760px), (pointer: coarse) {
  .topbar.is-solid { background: rgba(30, 18, 13, .96); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .catbar { background: rgba(30, 18, 13, .97); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .dlg::backdrop { background: rgba(14, 8, 5, .74); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .panel__close { background: rgba(30, 18, 13, .78); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
/* do tamanho do dedo: 44 px, o mínimo recomendado para tocar sem errar */
.topbar .brand { min-height: 44px; min-width: 44px; }
@media (max-width: 760px) {
  .chip { height: 40px; }
  .catbar__link { padding: 11px 16px; }
  .stepper--sm { height: 44px; }
  .stepper--sm button { width: 40px; }
  .line__remove { min-height: 44px; }
}
@media (max-width: 640px) { .add { width: 44px; height: 44px; } }
@media (max-width: 520px) { .bag-btn { min-width: 44px; justify-content: center; } }
/* o trenó, menor na tela do celular */
@media (max-width: 600px) { .sleigh { width: 190px; } }