/* ==========================================================================
   Hora Sucinta — Layout do site (medidas fiéis ao Figma)
   ========================================================================== */

/* Container: largura total com 100px de padding lateral (como no Figma 1440). */
.container { width: 100%; max-width: 1440px; margin-inline: auto; padding-inline: 100px; }
@media (max-width: 1180px) { .container { padding-inline: 56px; } }
@media (max-width: 720px)  { .container { padding-inline: 24px; } }

/* Logo "hs." — SVG real do Figma (verde + ponto argila embutidos) */
.brand { display: inline-flex; align-items: center; }
.brand img, .brand svg { display: block; width: 40px; height: auto; }        /* header: 40 × 30,7 (Figma) */
.site-footer .brand img { width: 36px; }                          /* rodapé: 36 × 27,6 (Figma) */

/* ---- Header ---- */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: var(--bg-base-0);
  border-bottom: 1px solid var(--stroke-neutral-100);
}
/* padding-block, e nao o shorthand `padding: 22px 0`: este elemento tambem e
   um .container, e o shorthand zerava o padding-inline de la — o logo ficava
   colado na borda enquanto o resto da pagina respeitava a margem. */
.site-header__inner { display: flex; align-items: center; justify-content: space-between; padding-block: 22px; }
.site-nav { display: flex; align-items: center; gap: 28px; }
.site-nav a.nav-link {
  font-family: var(--font-title);
  font-weight: 400; font-size: 14px; line-height: 18px;
  color: var(--font-neutral-100);
}
.site-nav a.nav-link:hover { color: var(--font-always-dark); }
.site-nav a.nav-link.is-active {
  font-weight: 700; color: var(--font-neutral-200);
  text-decoration: underline; text-underline-offset: 3px;
}
/* Botão "Meu pedido". Vazio: contorno discreto. Com peças: fundo escuro e o
   número em destaque — o estado "tem um pedido aberto" precisa ser visto de
   qualquer ponto da página, porque é por aqui que o pedido termina. */
.cart-button {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 42px; padding: 0 16px 0 14px;
  border: 1px solid var(--stroke-primary-main); border-radius: var(--radius-pill);
  background: var(--bg-base-0); color: var(--font-always-dark);
  font-family: var(--font-body); font-weight: 600; font-size: 14px; line-height: 18px; white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-io), border-color var(--dur-fast) var(--ease-io),
              color var(--dur-fast) var(--ease-io), box-shadow var(--dur-fast) var(--ease-io);
}
.cart-button svg { fill: currentColor; flex: none; }
.cart-button:hover { border-color: var(--stroke-primary-light); box-shadow: var(--shadow-2); }
.cart-button:focus-visible { outline: 2px solid var(--brand-secondary-light); outline-offset: 2px; }
.cart-count {
  min-width: 22px; height: 22px; padding: 0 6px; margin-right: -6px;
  display: none; align-items: center; justify-content: center;
  background: var(--brand-secondary-main); color: var(--font-inverse);
  border-radius: var(--radius-pill); font-family: var(--font-support); font-weight: 600;
  font-size: 12px; line-height: 1; font-variant-numeric: tabular-nums;
}
.cart-count.is-visible { display: inline-flex; }
.cart-button:has(.cart-count.is-visible) {
  background: var(--brand-secondary-main); border-color: var(--brand-secondary-main); color: var(--font-inverse);
}
.cart-button:has(.cart-count.is-visible) .cart-count { background: var(--font-inverse); color: var(--brand-secondary-main); }

/* Botão do header "Pedir no direct" — tamanho menor (py 8) */
.site-nav .btn { padding: 8px 16px; }

/* ---- Hero ---- */
.hero { padding: 120px 0 96px; }
.hero__inner { display: flex; flex-direction: column; align-items: flex-start; gap: 56px; }
.hero__text { display: flex; flex-direction: column; gap: 8px; }
.hero__title { color: var(--font-always-dark); margin: 0; }
.hero__lead { color: var(--font-neutral-100); margin: 0; }
.hero__note { color: var(--font-neutral-200); margin: 0; }
.hero__note--medium { font-weight: 500; }
.hero__cta .btn { padding: 12px 16px; font-size: 16px; }

/* ---- Faixa "Feito para permanecer" (revela a cor ao entrar na tela) ---- */
.band { background: var(--bg-base-100); text-align: center; padding: 108px 0; }
.band__title, .band__sub {
  color: var(--band-text);
  transition: color 1.1s ease, transform 1.1s ease, opacity 1.1s ease;
  transform: translateY(8px); opacity: .85;
}
.band__title { margin: 0 0 8px; }
.band__sub {
  margin: 0; transition-delay: .15s;
  font-family: var(--font-title); font-weight: 300; font-size: 16px; line-height: 20px;
}
.band__accent { color: inherit; transition: color 1.1s ease; }
.band.is-revealed .band__title { color: var(--font-always-dark); transform: none; opacity: 1; }
.band.is-revealed .band__sub { color: var(--font-always-dark); transform: none; opacity: 1; }
.band.is-revealed .band__accent { color: var(--dot-clay); }  /* "permanecer" em argila */
@media (prefers-reduced-motion: reduce) {
  .band__title, .band__sub { transition: color .4s ease; transform: none; opacity: 1; }
}

/* ---- Divisor com label ("CATÁLOGO ————") ---- */
.eyebrow {
  display: flex; align-items: center; gap: 14px;
  color: var(--font-neutral-200);
  font-family: var(--font-support); font-weight: 400; font-size: 14px; line-height: 18px;
  text-transform: uppercase; width: 100%;
}
.eyebrow::after { content: ""; flex: 1; height: 1px; background: var(--stroke-primary-main); }

/* ---- Seção catálogo (Home) ---- */
.section { padding: 80px 0; }
.section__head { display: flex; flex-direction: column; gap: 32px; margin-bottom: 48px; }
.section__title { color: var(--font-always-dark); margin: 0; }

/* Convite único para o catálogo. Herdou a linguagem dos dois choice-cards que
   existiam aqui (label com filete, título display, link com seta), mas ocupa a
   largura inteira: não há mais escolha a fazer antes de ver as peças. */
.catalog-invite {
  display: flex; flex-direction: column; gap: 24px;
  padding: 40px 34px 32px;
  border-radius: 18px;
  background: var(--bg-base-200);
  text-decoration: none;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.catalog-invite:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.catalog-invite:focus-visible { outline: 2px solid var(--brand-secondary-light); outline-offset: 4px; }
.catalog-invite__labelrow { display: flex; align-items: center; gap: 32px; }
.catalog-invite__label {
  font-family: var(--font-support); font-weight: 400; font-size: 12px; line-height: 16px;
  color: var(--font-neutral-200); white-space: nowrap; text-transform: uppercase;
}
.catalog-invite__labelrow::after { content: ""; flex: 1; height: 1px; background: var(--stroke-primary-main); }
.catalog-invite__body { display: flex; flex-direction: column; gap: 8px; max-width: 46ch; }
.catalog-invite__title { color: var(--font-always-dark); margin: 0; }
.catalog-invite__desc { color: var(--font-neutral-100); margin: 0; }
.catalog-invite__cta {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-body); font-weight: 600; font-size: 14px; line-height: 18px;
  color: var(--font-always-dark);
}
.catalog-invite__cta svg { fill: var(--font-always-dark); transition: transform var(--dur-base) var(--ease-out); }
.catalog-invite:hover .catalog-invite__cta svg { transform: translateX(4px); }

/* ---- Seção Instagram (escura) ---- */
.insta-wrap { padding: 80px 0 120px; }
.insta {
  background: var(--insta-bg); border-radius: 26px; padding: 64px;
  display: flex; flex-direction: column; gap: 32px;
}
.insta__eyebrow-row { display: flex; align-items: center; gap: 32px; }
.insta__eyebrow {
  font-family: var(--font-body); font-weight: 400; font-size: 14px; line-height: 18px;
  color: var(--insta-eyebrow); white-space: nowrap; letter-spacing: .02em;
}
.insta__eyebrow-row::after { content: ""; flex: 1; height: 1px; background: rgba(224,181,138,.35); }
.insta__head { display: flex; flex-direction: column; gap: 24px; }
.insta__title { color: var(--font-inverse); margin: 0; }
.insta__sub { color: var(--insta-text); margin: 0; max-width: 560px; }
.insta__sub b { font-weight: 600; }
.insta__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.insta__tile { aspect-ratio: 4 / 5; background: var(--insta-tile); border-radius: 10px; overflow: hidden; display: block; transition: opacity .15s ease; }
.insta__tile:hover { opacity: .92; }
.insta__tile img { width: 100%; height: 100%; object-fit: cover; }
.insta__actions { display: flex; gap: 24px; flex-wrap: wrap; }
.insta__actions .btn { padding: 12px 16px; font-size: 16px; }

/* ---- Footer ---- */
.site-footer { padding: 0 0 70px; }
.site-footer__divider { height: 1px; background: rgba(61,74,43,.16); margin-bottom: 56px; }
.site-footer__inner { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.site-footer__meta { text-align: right; color: var(--font-neutral-300); font-family: var(--font-mono); font-size: 12px; line-height: 1.9; }
.site-footer__meta p { margin: 0; }

/* ==========================================================================
   Páginas Varejo / Atacado
   ========================================================================== */
.catalog { padding: 56px 0 120px; }
.catalog__wrap { display: flex; flex-direction: column; gap: 40px; }
.catalog__top { display: flex; flex-direction: column; gap: 24px; }
.catalog__title {
  font-family: var(--font-display); font-weight: 600; font-size: 56px; line-height: 1;
  letter-spacing: -.02em; color: var(--font-always-dark); margin: 0;
  font-variation-settings: 'SOFT' 0, 'WONK' 1;
}
/* Filtros colados no topo, logo abaixo do cabeçalho (que já é sticky).
   --header-h é medido pelo motion.js: o cabeçalho muda de altura entre
   breakpoints, e um valor chutado aqui deixaria uma fresta ou uma sobreposição.
   O padding e o negativo de margem fazem o fundo cobrir os cards que passam
   por baixo sem mudar o espaçamento da página. */
.catalog__toolbar {
  display: flex; gap: 24px; align-items: flex-end; flex-wrap: wrap;
  position: sticky; top: var(--header-h, 76px); z-index: 30;
  background: var(--bg-base-0);
  padding: 14px 0;
}
/* A sombra só aparece quando a barra realmente descolou do lugar — parada, ela
   não tem por que anunciar que é flutuante. */
.catalog__toolbar.is-grudada {
  box-shadow: 0 6px 16px -12px rgba(61, 74, 43, .5);
}
.catalog__search { width: 248px; }
.catalog__select { width: 108px; }
.catalog__grid { display: flex; flex-wrap: wrap; gap: 32px; }
.catalog__empty { color: var(--font-neutral-300); padding: 24px 0; }

/* ==========================================================================
   Drawer "Seu pedido"
   ========================================================================== */
.drawer-overlay {
  position: fixed; inset: 0; z-index: 60; background: rgba(61, 74, 43, .35);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-base) var(--ease-io), visibility var(--dur-base) var(--ease-io);
  backdrop-filter: blur(2px);
}
.drawer-overlay.is-open { opacity: 1; visibility: visible; }
.drawer {
  position: fixed; top: 0; right: 0; z-index: 61; width: min(447px, 100%); height: 100%;
  background: var(--bg-base-0); display: flex; flex-direction: column;
  transform: translateX(100%);
  /* Entrada desacelerando no fim: a gaveta "assenta" em vez de bater na borda. */
  transition: transform var(--dur-slow) var(--ease-out);
  box-shadow: -8px 0 32px rgba(61,74,43,.12);
}
.drawer.is-open { transform: translateX(0); }
/* Sair é mais rápido que entrar — mesma regra do modal. */
.drawer:not(.is-open) { transition: transform var(--dur-base) var(--ease-io); }
.drawer__head { padding: 24px; display: flex; flex-direction: column; gap: 4px; }
.drawer__head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
/* 32px não existe na escala do ds.css — vai para 22px, o título de conteúdo. */
.drawer__title { font-family: var(--font-title); font-weight: 700; font-size: 22px; line-height: 26px; color: var(--font-always-dark); margin: 0; flex: 1; }
.drawer__subtitle { font-family: var(--font-support); font-weight: 400; font-size: 14px; line-height: 18px; color: var(--font-neutral-200); margin: 0; }
.drawer__close { border: 0; background: transparent; color: var(--font-neutral-300); width: 32px; height: 32px; border-radius: var(--radius-4); display: inline-flex; align-items: center; justify-content: center; }
.drawer__close:hover { background: var(--bg-base-100); }
.drawer__close svg { fill: var(--font-neutral-300); }
.drawer__body { flex: 1; overflow-y: auto; padding: 8px 24px; }
.drawer__empty { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; color: var(--font-neutral-300); }
.drawer__empty svg { fill: var(--stroke-primary-main); }

.order-item { display: flex; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--stroke-primary-main); }
.order-item__media { width: 56px; height: 56px; flex: none; border-radius: var(--radius-4); background: var(--bg-base-200); overflow: hidden; }
.order-item__media img { width: 100%; height: 100%; object-fit: cover; }
.order-item__info { flex: 1; min-width: 0; }
.order-item__name { color: var(--font-always-dark); margin: 0 0 2px; }
.order-item__meta { color: var(--font-neutral-300); margin: 0; }
.order-item__bottom { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.order-item__subtotal { color: var(--font-always-dark); }
.order-item__remove { border: 0; background: transparent; color: var(--font-neutral-200); font-size: 12px; font-family: var(--font-support); }
.order-item__remove:hover { text-decoration: underline; }

.stepper { display: inline-flex; align-items: center; border: 1px solid var(--stroke-primary-main); border-radius: var(--radius-4); overflow: hidden; }
.stepper button { width: 28px; height: 28px; border: 0; background: var(--bg-base-100); color: var(--font-always-dark); font-size: 16px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
.stepper button:hover { background: var(--bg-base-200); }
/* 16px não é estética: abaixo disso o Safari do iPhone dá ZOOM automático ao
   focar o campo, jogando o layout fora de lugar. Vale para todo input do site.
   Cabe: 4 dígitos em Space Grotesk 16px ocupam ~38px dos 44px disponíveis. */
.stepper input { width: 44px; height: 28px; border: 0; text-align: center; background: var(--bg-base-0); color: var(--font-always-dark); font-family: var(--font-support); font-size: 16px; }

.drawer__foot {
  border-top: 1px solid var(--stroke-primary-main);
  padding: 24px; background: var(--bg-base-100);
  display: flex; flex-direction: column; gap: 24px; align-items: flex-end;
}
.drawer__total { width: 100%; display: flex; align-items: baseline; justify-content: space-between; margin: 0; }
/* Antes rótulo e valor eram idênticos (14px, 700, cinza) — o número que fecha
   o pedido não se destacava de nada. Agora seguem a mesma hierarquia do modal:
   rótulo discreto, valor em 22px escuro. */
.drawer__total-label {
  font-family: var(--font-support); font-weight: 400; font-size: 12px; line-height: 16px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--font-neutral-200);
}
.drawer__total-value {
  font-family: var(--font-title); font-weight: 700; font-size: 22px; line-height: 26px;
  color: var(--font-always-dark);
}
.drawer__submit { font-size: 16px; padding: 6px 16px; }

/* ==========================================================================
   Modal de checkout (nome + contato ao enviar o pedido)
   ========================================================================== */
.checkout {
  position: fixed; inset: 0; z-index: 80;
  display: none; align-items: center; justify-content: center; padding: 24px;
}
.checkout.is-open { display: flex; }
.checkout__overlay { position: absolute; inset: 0; background: rgba(61,74,43,.4); }
.checkout__card {
  position: relative; z-index: 1; width: min(460px, 100%); max-height: 90vh; overflow-y: auto;
  background: var(--bg-base-0); border-radius: 12px; padding: 28px;
  box-shadow: 0 12px 40px rgba(61,74,43,.2);
}
.checkout__title { font-family: var(--font-title); font-weight: 700; font-size: 22px; line-height: 26px; color: var(--font-always-dark); margin: 0 0 8px; }
.checkout__lead { font-family: var(--font-body); font-size: 14px; line-height: 20px; color: var(--font-neutral-300); margin: 0 0 20px; }
.checkout__lead strong { color: var(--font-always-dark); font-weight: 600; }
.checkout__field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.checkout__field > span { font-family: var(--font-body); font-weight: 600; font-size: 14px; color: var(--font-neutral-100); }
.checkout__field em { color: var(--font-neutral-200); font-style: normal; }
.checkout__field small { color: var(--font-neutral-300); font-weight: 400; }
.checkout__field input, .checkout__field textarea {
  padding: 9px 12px; border: 1px solid var(--input-stroke); border-radius: var(--input-radius);
  background: var(--input-bg); color: var(--font-neutral-100); font-family: var(--font-body); font-size: 14px;
}
.checkout__field textarea { resize: vertical; }
.checkout__field input:focus, .checkout__field textarea:focus { outline: none; border-color: var(--brand-secondary-light); }
.checkout__row { display: flex; gap: 12px; }
.checkout__row .checkout__field { flex: 1; }
.checkout__actions { display: flex; gap: 12px; justify-content: flex-end; margin-top: 8px; }
.checkout__hint {
  font-family: var(--font-body); font-size: 14px; line-height: 20px; color: var(--font-neutral-300);
  background: var(--bg-base-100); border-radius: 8px; padding: 10px 12px; margin: 4px 0 18px;
}
.checkout__hint strong { color: var(--font-always-dark); font-weight: 600; }
.checkout__msg {
  width: 100%; border: 1px solid var(--stroke-primary-main); border-radius: 8px; padding: 12px;
  background: var(--bg-base-100); color: var(--font-neutral-100);
  /* Campo de formulário: 16px pelo mesmo motivo do stepper (zoom do iOS). */
  font-family: var(--font-support); font-size: 16px; line-height: 22px; resize: vertical; margin-bottom: 16px;
}
.checkout__done {
  display: block; margin: 14px auto 0; background: none; border: 0; color: var(--font-neutral-300);
  font-family: var(--font-body); font-size: 14px; text-decoration: underline; cursor: pointer;
}
@media (max-width: 520px) { .checkout__row { flex-direction: column; gap: 0; } }

/* ==========================================================================
   Responsivo
   ========================================================================== */
@media (max-width: 980px) {
  .hero { padding: 72px 0 64px; }
  .hero__title { font-size: 52px; line-height: 54px; }
  .catalog-invite { padding: 32px 24px 28px; }
  .insta { padding: 40px 28px; }
  .insta__grid { grid-template-columns: repeat(3, 1fr); }
  .band { padding: 72px 0; }
  .section { padding: 56px 0; }
  .insta-wrap { padding: 56px 0 80px; }
  .catalog__title { font-size: 44px; }
}
@media (max-width: 560px) {
  .site-nav { gap: 16px; }
  .site-nav .nav-link { display: none; }
  .hero__title { font-size: 40px; line-height: 44px; }
  .insta__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer__inner { flex-direction: column; align-items: flex-start; }
  .site-footer__meta { text-align: left; }
}

/* ==========================================================================
   Card: foto/nome clicáveis + ações (Saiba mais / Adicionar)
   ========================================================================== */

/* O card era uma superfície morta: sem sombra, sem hover, sem reação. Agora ele
   responde — sobe, ganha profundidade e a foto avança um pouco. O movimento é
   pequeno de propósito: numa grade com 11 cards, gesto grande vira bagunça. */
.product-card {
  box-shadow: var(--shadow-1);
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
  will-change: transform;
  cursor: pointer; /* o card inteiro abre o produto */
}
/* Dentro das ações o cursor volta ao normal: ali o clique faz outra coisa. */
.product-card__actions { cursor: auto; }
.product-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
/* :focus-within cobre quem navega por teclado — o card reage igual ao mouse. */
.product-card:focus-within { box-shadow: var(--shadow-2); }

.product-card__media {
  border: 0; padding: 0; width: 100%; font: inherit; text-align: left;
  cursor: pointer; display: block;
}
/* A foto avança dentro da moldura (que tem overflow:hidden), criando
   profundidade sem mexer no tamanho do card nem empurrar o texto. */
.product-card__media img {
  transition: transform var(--dur-slow) var(--ease-out);
}
.product-card:hover .product-card__media img { transform: scale(1.05); }

/* Anel de foco visível só para teclado — acessibilidade sem poluir o mouse. */
.product-card__media:focus-visible,
.product-card__title-btn:focus-visible {
  outline: 2px solid var(--brand-secondary-light);
  outline-offset: 3px;
  border-radius: var(--radius-4);
}

/* Entrada dos cards: começam levemente abaixo e transparentes; o JS solta um
   por vez (escalonado) quando entram na tela. Sem JS, o estado final é o
   normal — o catálogo nunca fica invisível se o script falhar. */
.product-card.is-revealing { opacity: 0; transform: translateY(14px); }
.product-card__hint {
  position: absolute; left: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px; border-radius: var(--radius-pill);
  background: rgba(61,74,43,.82); color: var(--font-inverse);
  font-family: var(--font-body); font-weight: 600; font-size: 12px;
  opacity: 0; transform: translateY(4px);
  transition: opacity var(--dur-fast) var(--ease-io), transform var(--dur-fast) var(--ease-io);
}
.product-card__hint svg { fill: var(--font-inverse); }
/* A dica aparece ao passar por qualquer ponto do card — agora que o card
   inteiro é clicável, mostrá-la só sobre a foto contaria uma meia verdade. */
.product-card:hover .product-card__hint,
.product-card__media:focus-visible .product-card__hint { opacity: 1; transform: none; }
.product-card__count {
  position: absolute; left: 8px; top: 8px; padding: 2px 8px; border-radius: var(--radius-pill);
  background: rgba(61,74,43,.72); color: var(--font-inverse);
  font-family: var(--font-support); font-size: 10px;
}
.product-card__title-btn {
  border: 0; background: transparent; padding: 0; margin: 0; cursor: pointer; text-align: left;
  font-family: var(--font-title); font-weight: 700; font-size: 18px; line-height: 22px; color: var(--font-always-dark);
}
.product-card__title-btn:hover { text-decoration: underline; text-underline-offset: 3px; }
.product-card__actions { display: flex; gap: 8px; margin-top: auto; }
.product-card__more { flex: 0 0 auto; }
.product-card__add { flex: 1; }

.tag--soft { background: transparent; border-color: var(--brand-secondary-light); color: var(--brand-secondary-light); }

/* Contador do carrinho pulsa ao adicionar */
.cart-count.pulse { animation: hs-pulse .45s ease; }
@keyframes hs-pulse { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }

/* ==========================================================================
   Modal de detalhes do produto
   ========================================================================== */
.pdetail { position: fixed; inset: 0; z-index: 60; display: none; }
.pdetail.is-open { display: block; }
/* Desfoque leve no fundo: separa o modal do catálogo sem escurecer demais e
   sem esconder de onde o cliente veio. */
.pdetail__overlay { position: absolute; inset: 0; background: rgba(61,74,43,.42); backdrop-filter: blur(3px); }
.pdetail__card {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(960px, calc(100% - 32px)); max-height: min(90vh, 880px);
  overflow: hidden; display: flex; flex-direction: column;
  background: var(--bg-base-0); border: 1px solid var(--stroke-soft);
  border-radius: var(--radius-8); box-shadow: 0 24px 60px -24px rgba(40,44,30,.5);
}
/* O card recebe foco ao abrir (tabindex=-1) só pra ancorar o leitor de tela.
   Não é um controle, então não desenha anel. */
.pdetail__card:focus { outline: none; }
/* Fechar sozinho na quina, com folga de 20px das bordas: colado nelas (12px)
   parecia espremido. Sem contorno forte — um anel translúcido e sombra leve já
   dizem "botão" sem desenhar mais uma linha no card. */
.pdetail__close {
  position: absolute; top: 20px; right: 20px; z-index: 2; width: 36px; height: 36px;
  border: 0; border-radius: var(--radius-pill);
  background: var(--bg-base-0); color: var(--font-neutral-300);
  box-shadow: 0 0 0 1px var(--stroke-soft), 0 2px 8px -2px rgba(40, 44, 30, .12);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-io);
}
.pdetail__close:hover { background: var(--bg-base-100); }
.pdetail__close:focus-visible { outline: 2px solid var(--brand-secondary-light); outline-offset: 2px; }
.pdetail__close svg { fill: var(--font-neutral-300); }
/* Só o conteúdo rola; a barra de ação fica fora daqui. */
.pdetail__scroll { flex: 1 1 auto; overflow: auto; }
.pdetail__grid { display: grid; grid-template-columns: 1.05fr 1fr; align-items: start; }
.pdetail__gallery { padding: 28px; background: var(--bg-base-100); border-right: 1px solid var(--stroke-soft); }
/* Palco: só existe pra ancorar as setas e o contador sobre a foto. */
/* O teto de altura vive AQUI, não na foto. Se ele estivesse na foto, o palco
   continuaria com a largura da coluna e as setas ficariam boiando longe da
   imagem. Limitando o palco, setas e contador acompanham. */
.pdetail__palco { position: relative; max-width: calc(62vh * 4 / 5); margin-inline: auto; }
/* Mesma proporção do card (4:5): a foto que cresce na transição precisa chegar
   no mesmo formato de onde saiu, senão ela se deforma no meio do caminho.
   O teto de altura evita que, em tela baixa, a foto empurre o resto pra fora —
   a barra de quantidade fica fora da rolagem e não pode sumir. */
.pdetail__photo {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-8); overflow: hidden; background: var(--bg-base-200);
}
/* Setas da galeria. Fundo sólido e não translúcido: sobre foto clara ou escura
   o contraste do ícone tem que valer nos dois casos. 44px é o alvo mínimo de
   toque — abaixo disso erra no celular. */
.pdetail__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; padding: 0; border: 1px solid var(--stroke-soft);
  border-radius: var(--radius-pill); background: var(--bg-base-0); color: var(--font-always-dark);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .14);
  transition: transform var(--dur-fast) var(--ease-io), background var(--dur-fast) var(--ease-io);
}
.pdetail__nav[hidden] { display: none; }
.pdetail__nav--prev { left: 10px; }
.pdetail__nav--next { right: 10px; }
.pdetail__nav:hover { background: var(--bg-base-100); transform: translateY(-50%) scale(1.06); }
.pdetail__nav:active { transform: translateY(-50%) scale(.97); }
.pdetail__nav:focus-visible { outline: 2px solid var(--brand-secondary-light); outline-offset: 2px; }
.pdetail__nav svg { fill: currentColor; }
/* "2 / 5" no canto: diz quantas faltam sem precisar contar as miniaturas. */
.pdetail__contador {
  position: absolute; right: 10px; bottom: 10px;
  font-family: var(--font-support); font-size: 12px; line-height: 16px;
  padding: 3px 9px; border-radius: var(--radius-pill);
  background: rgba(0, 0, 0, .58); color: #fff;
}
.pdetail__contador[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .pdetail__nav, .pdetail__nav:hover, .pdetail__nav:active { transition: none; transform: translateY(-50%); }
}
.pdetail__photo img { width: 100%; height: 100%; object-fit: cover; }
.pdetail__noimg {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  color: var(--font-neutral-300); font-family: var(--font-support); font-size: 14px;
}
/* Mesma largura do palco, pra fila de miniaturas nascer alinhada com a foto. */
.pdetail__thumbs { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; max-width: calc(62vh * 4 / 5); margin-inline: auto; }
.pdetail__thumb {
  /* 4:5 como a foto grande: miniatura quadrada recortava a peça de um jeito
     diferente do palco, e a mesma foto parecia outra. */
  width: 52px; height: 65px; border-radius: var(--radius-4); overflow: hidden; padding: 0;
  border: 2px solid transparent; background: var(--bg-base-200); cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-io),
              transform var(--dur-fast) var(--ease-io);
}
.pdetail__thumb:hover { transform: translateY(-2px); }
.pdetail__thumb:focus-visible { outline: 2px solid var(--brand-secondary-light); outline-offset: 2px; }
.pdetail__thumb img { width: 100%; height: 100%; object-fit: cover; }
.pdetail__thumb.is-active { border-color: var(--brand-secondary-main); }

/* Tipografia do modal: TODOS os tamanhos saem da escala do ds.css
   (12 / 14 / 16 / 18 / 22). Valor fora da escala não parece "grande",
   parece errado — o olho percebe que não pertence ao sistema. */
.pdetail__info { padding: 26px 26px 30px; display: flex; flex-direction: column; gap: 14px; }
.pdetail__tags { display: flex; gap: 8px; flex-wrap: wrap; }
.pdetail__title { font-family: var(--font-title); font-weight: 600; font-size: 22px; line-height: 26px; color: var(--font-always-dark); margin: 0; }
.pdetail__desc { font-family: var(--font-body); font-size: 16px; line-height: 24px; color: var(--font-neutral-100); margin: 0; }

/* Aviso de "várias cores". Tom de recado, não de alerta: é uma informação boa
   (existe escolha), não um problema. Por isso fundo neutro e ícone da paleta,
   o mesmo que marca o produto lá no card. */
.pdetail__cor {
  display: flex; align-items: flex-start; gap: 10px; margin: 0;
  padding: 12px 14px; border-radius: var(--radius-8);
  background: var(--bg-base-200);
  font-family: var(--font-body); font-size: 14px; line-height: 20px;
  color: var(--font-neutral-100);
}
.pdetail__cor[hidden] { display: none; }
.pdetail__cor svg { flex: 0 0 auto; margin-top: 2px; fill: var(--brand-secondary-light); }
.pdetail__cor strong { font-weight: 600; color: var(--font-always-dark); }

/* Preço por unidade — única aparição do valor unitário na tela. Antes o mesmo
   número aparecia em 4 lugares; agora vive só aqui e muda com a faixa. */
.pdetail__unit { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
/* Produto sem valor cadastrado: a linha some inteira. O display:flex acima
   vence o [hidden] do navegador, então a regra precisa ser explícita. */
.pdetail__unit[hidden] { display: none; }
.pdetail__unit-value { font-family: var(--font-title); font-weight: 600; font-size: 18px; line-height: 22px; color: var(--font-always-dark); }
.pdetail__unit-suffix { font-family: var(--font-body); font-size: 14px; line-height: 18px; color: var(--font-neutral-300); }
.pdetail__unit-badge { font-family: var(--font-support); font-size: 12px; line-height: 16px; padding: 3px 8px; border-radius: var(--radius-pill); background: var(--brand-secondary-light); color: var(--font-inverse); }
.pdetail__unit-badge[hidden] { display: none; }

/* Faixas: a tabela É o indicador de progresso (marca a aplicada e o que falta),
   por isso não existe mais nem acordeão nem frase separada de "leve mais N". */
.pdetail__price { display: flex; flex-direction: column; }
.pdetail__tiers { border: 1px solid var(--stroke-soft); border-radius: var(--radius-8); overflow: hidden; }
.pdetail__tiers-cap { font-family: var(--font-support); font-size: 14px; line-height: 18px; color: var(--font-neutral-200); padding: 11px 14px; background: var(--bg-base-100); border-bottom: 1px solid var(--stroke-soft); }
.pdetail__tier { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; font-family: var(--font-body); font-size: 14px; line-height: 18px; color: var(--font-neutral-100); transition: background .15s ease; }
.pdetail__tier + .pdetail__tier { border-top: 1px solid var(--stroke-soft); }
.pdetail__tier b { font-family: var(--font-title); font-weight: 600; font-size: 16px; line-height: 20px; color: var(--font-always-dark); }
.pdetail__tier-left { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pdetail__tier--on { background: var(--bg-base-100); }
.pdetail__pill { font-family: var(--font-support); font-size: 12px; line-height: 16px; padding: 2px 8px; border-radius: var(--radius-pill); }
.pdetail__pill--on { background: var(--brand-secondary-light); color: var(--font-inverse); }
.pdetail__pill--falta { background: var(--bg-base-200); color: var(--font-neutral-200); border: 1px dashed var(--stroke-primary-light); }

/* ==== Barra de ação: largura inteira do card ====
   Fica FORA de .pdetail__scroll, então não é "sticky" com truque de margem —
   é estrutura.

   Uma linha: [ quantidade | total ] à esquerda, [ adicionar ] à direita.
   O que segura o arranjo é o par da esquerda continuar sendo UM bloco —
   espalhar os três pelas pontas é que deixava a quantidade órfã. */
.pdetail__bar {
  flex: none; display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding: 14px 22px;
  border-top: 1px solid var(--stroke-soft); background: var(--bg-base-0);
}
/* Quantidade e total encostados, separados só por um traço: o par lê como um
   bloco ("tantas unidades = tanto"), não como dois dados independentes. */
.pdetail__summary { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; }
.pdetail__qty { display: flex; align-items: center; gap: 10px; }
.pdetail__total {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px;
  padding-left: 16px; border-left: 1px solid var(--stroke-soft);
}
/* Rótulo único pros dois campos: em paralelo lêem como campos irmãos.
   "Qtd." abreviado em cinza lia como legenda solta. */
.pdetail__field-label {
  font-family: var(--font-support); font-size: 12px; line-height: 16px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--font-neutral-200);
}
/* 18px e não 22px: o valor unitário lá em cima já é o número de destaque do
   modal. Aqui embaixo o total só precisa vencer o rótulo ao lado dele. */
.pdetail__total-value { font-family: var(--font-title); font-weight: 700; font-size: 18px; line-height: 24px; color: var(--font-always-dark); }
/* Unitário miúdo ao lado do total. 12px e não 10px: 10 está fora da escala do
   DS (12/14/16/18/22) e é pequeno demais pra um NÚMERO — dígito não se adivinha
   pelo contorno da palavra como texto corrido, tem que ser lido caractere a
   caractere. Em #716e63 dá 5:1 no fundo creme, acima do 4,5:1 que a WCAG pede
   pra texto pequeno, e ainda assim fica claramente atrás do total. */
.pdetail__total-unit {
  font-family: var(--font-support); font-size: 12px; line-height: 16px;
  color: var(--font-neutral-300); white-space: nowrap;
}
/* min-width segura a largura quando o rótulo ganha o número, senão o botão
   pula de tamanho a cada clique no +. */
.pdetail__add { flex: none; min-height: 44px; min-width: 224px; padding: 0 26px; white-space: nowrap; }
/* A borda clara (#ded6c4) dava 1,4:1 contra o fundo — abaixo do mínimo de 3:1
   da WCAG 1.4.11 pra controle. Na argila dá 4,7:1 e o campo vira controle. */
.stepper--lg { border-color: var(--stroke-primary-light); }
.stepper--lg button { width: 34px; height: 34px; font-size: 16px; }
/* 16px é piso do CAMPO, não escolha estética: abaixo disso o Safari do iPhone
   dá zoom automático ao focar e desmonta o layout. Pra encolher sem descer
   daí, o que cede é a caixa (34px de altura, 44 de largura) — o peso e a
   fonte de título seguram a presença que o tamanho deixou de dar. */
.stepper--lg input { width: 44px; height: 34px; font-size: 16px; font-family: var(--font-title); font-weight: 700; }
.stepper button:disabled { color: #b7b2a3; cursor: not-allowed; }
/* offset negativo: .stepper tem overflow hidden e cortaria um anel pra fora. */
.stepper button:focus-visible,
.stepper input:focus-visible { outline: 2px solid var(--brand-secondary-light); outline-offset: -2px; }
@media (max-width: 680px) {
  .pdetail__grid { grid-template-columns: 1fr; }
  .pdetail__gallery { border-right: 0; border-bottom: 1px solid var(--stroke-soft); padding: 18px; }
  .pdetail__info { padding: 22px 18px 26px; }
  /* Sem largura pra uma linha só: empilha. Os tamanhos de fonte NÃO caem,
     e o par quantidade + total continua inteiro, agora acima do botão. */
  .pdetail__bar { flex-direction: column; align-items: stretch; gap: 12px; padding: 14px 18px 18px; }
  .pdetail__add { width: 100%; min-width: 0; }
}

/* ==========================================================================
   Toast (aviso rápido ao adicionar ao pedido)
   ========================================================================== */
.toast-zone {
  position: fixed; left: 0; right: 0; bottom: 22px; z-index: 80;
  display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none;
}
.toast {
  pointer-events: auto; display: flex; align-items: center; gap: 12px;
  max-width: min(440px, calc(100% - 32px));
  background: var(--brand-secondary-main); color: var(--font-inverse);
  border-radius: var(--radius-pill); padding: 11px 12px 11px 16px;
  box-shadow: 0 14px 34px -14px rgba(40,44,30,.7);
  font-family: var(--font-body); font-size: 14px;
  /* Entra subindo com um leve exagero no fim (--ease-back): o toast confirma
     uma ação e um quê de "salto" lê como resposta, não como aviso de erro.
     A saída volta a ser sóbria — despedida não precisa de graça. */
  opacity: 0; transform: translateY(18px) scale(.96);
  transition: opacity var(--dur-base) var(--ease-io),
              transform var(--dur-base) var(--ease-io);
}
.toast.is-in {
  opacity: 1; transform: none;
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-slow) var(--ease-back);
}
.toast__check { flex: none; width: 20px; height: 20px; border-radius: var(--radius-pill); background: var(--brand-secondary-light); display: inline-flex; align-items: center; justify-content: center; }
.toast__check svg { fill: var(--font-inverse); }
.toast__text { flex: 1; min-width: 0; }
.toast__link { flex: none; border: 0; border-radius: var(--radius-pill); padding: 8px 14px; background: rgba(255,255,255,.16); color: var(--font-inverse); font-family: var(--font-body); font-weight: 600; font-size: 14px; }
.toast__link:hover { background: rgba(255,255,255,.26); }

/* A regra de "menos movimento" agora é global e vive no ds.css, cobrindo o
   site inteiro em vez de uma lista de seletores mantida à mão. */

/* ==========================================================================
   Celular — a página que o cliente final usa

   O site nasceu na medida do Figma de 1440 e ganhou uns poucos ajustes de
   largura no caminho. Isso resolve "não estourar a tela", que é outra coisa
   de "ser bom de usar no celular": no aparelho o polegar decide, a tela tem
   um quinto da altura e o cliente está de pé, olhando fotos.

   O que muda aqui, em ordem de impacto:
   1. Filtros saem da barra e viram uma folha que sobe de baixo (ver .fsheet).
   2. A grade vira duas colunas de verdade, com card enxuto.
   3. Os respiros do desktop (80 / 108 / 120px) caem pela metade ou mais.
   4. Modal e gaveta viram folhas ancoradas na borda, com área segura.

   O painel do admin não é tocado: ele tem o próprio CSS e o próprio público.
   ========================================================================== */

/* ---- Áreas seguras: o viewport-fit=cover do <head> deixa a página ir até a
        borda física; aqui o conteúdo desconta o entalhe/cantos arredondados. */
@media (max-width: 720px) {
  .container {
    padding-inline: max(20px, env(safe-area-inset-left)) max(20px, env(safe-area-inset-right));
  }
}

/* ---- Cabeçalho: mais baixo. Ele é sticky e a barra de filtros gruda embaixo
        dele — cada pixel aqui custa dobro. O --header-h é medido pelo JS, então
        nada mais precisa saber deste número. */
@media (max-width: 680px) {
  .site-header__inner { padding-block: 12px; }
  .site-header .brand img, .site-header .brand svg { width: 34px; }
  /* O logo leva pra home e tinha 26px de altura de alvo. O min-height
     nao muda a altura do cabecalho: a sacola ao lado ja tem 44. */
  .site-header .brand { min-height: 44px; }
  /* 30px é o ícone; 44px é o alvo de toque. O recuo negativo devolve o
     alinhamento óptico com a borda do container. */
  .cart-button { min-height: 44px; padding: 0 14px 0 12px; }
  .site-nav .btn { min-height: 40px; padding: 8px 14px; }
}

/* ==========================================================================
   Home no celular
   ========================================================================== */
@media (max-width: 680px) {
  .hero { padding: 44px 0 40px; }
  .hero__inner { gap: 28px; }
  .hero__lead { font-size: 16px; line-height: 22px; }
  /* CTA na largura da tela: no celular o botão principal não disputa espaço
     com nada, e o alvo grande é o que o polegar acha sem mirar. */
  .hero__cta { width: 100%; }
  .hero__cta .btn { width: 100%; min-height: 48px; }

  .band { padding: 52px 0; }
  .band__title { font-size: 30px; line-height: 34px; }

  .section { padding: 40px 0; }
  .section__head { gap: 16px; margin-bottom: 24px; }
  .section__title { font-size: 32px; line-height: 36px; }

  .catalog-invite { padding: 24px 20px 22px; border-radius: 14px; gap: 18px; }
  .catalog-invite__labelrow { gap: 16px; }
  .catalog-invite__title { font-size: 28px; line-height: 32px; }
  /* Sem mouse não há hover: o card não precisa reservar o gesto de subir. */
  .catalog-invite:hover { transform: none; box-shadow: none; }

  .insta-wrap { padding: 40px 0 56px; }
  .insta { padding: 28px 20px; border-radius: 18px; gap: 22px; }
  .insta__title { font-size: 30px; line-height: 34px; }
  .insta__head { gap: 14px; }
  .insta__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .insta__actions { gap: 10px; }
  .insta__actions .btn { flex: 1 1 100%; min-height: 48px; }

  .site-footer { padding: 0 0 40px; }
  .site-footer__divider { margin-bottom: 28px; }
}

/* ==========================================================================
   Catálogo no celular
   ========================================================================== */
@media (max-width: 680px) {
  .catalog { padding: 20px 0 56px; }
  .catalog__wrap { gap: 18px; }
  .catalog__top { gap: 10px; }
  .catalog__intro { display: flex; flex-direction: column; gap: 8px; }
  .catalog__title { font-size: 32px; line-height: 36px; }
  .catalog__lead { font-size: 14px; line-height: 20px; }

  /* Uma linha só: busca ocupando o que sobra + o botão de filtros.
     nowrap é o ponto — era o wrap que empilhava três controles e transformava
     a barra grudada no topo num bloco de ~150px de altura, um quinto da tela
     gasto em controle antes da primeira foto. */
  .catalog__toolbar {
    flex-wrap: nowrap; align-items: center; gap: 8px; padding: 10px 0;
  }
  .catalog__search { width: auto; flex: 1 1 auto; min-width: 0; }
  /* Os selects continuam no HTML — são o estado do filtro que o catalog.js lê.
     Só saem de vista; quem os opera agora é a folha. */
  .catalog__select { display: none; }
  /* 44px é o alvo mínimo de toque; e 16px no input evita o zoom automático do
     Safari ao focar (o mesmo motivo que já vale no stepper). */
  .catalog__toolbar .field { min-height: 44px; padding: 8px 12px; }
  .catalog__toolbar .field input { font-size: 16px; }
}

/* Botão "Filtros" — escondido no desktop, onde os selects já estão à mão. */
.catalog__filtros {
  display: none; align-items: center; gap: 7px; flex: none; position: relative;
  min-height: 44px; padding: 8px 14px;
  border: 1px solid var(--stroke-primary-main); border-radius: var(--input-radius);
  background: var(--bg-base-100); color: var(--font-always-dark);
  font-family: var(--font-body); font-weight: 600; font-size: 14px; line-height: 18px;
}
.catalog__filtros svg { fill: var(--font-always-dark); }
.catalog__filtros:active { background: var(--bg-base-200); }
/* O número de filtros ativos vive no botão: com a folha fechada, é o único
   lugar onde dá pra saber que a grade está filtrada. */
.catalog__filtros-badge {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--radius-pill);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-secondary-main); color: var(--font-inverse);
  font-family: var(--font-support); font-size: 11px; line-height: 1;
}
.catalog__filtros-badge[hidden] { display: none; }
/* Telas estreitas: o ícone e o número bastam — a palavra "Filtros" custaria a
   metade da largura da busca. */
@media (max-width: 680px) { .catalog__filtros { display: inline-flex; } }
@media (max-width: 380px) {
  .catalog__filtros span:not(.catalog__filtros-badge) { display: none; }
  .catalog__filtros { padding: 8px 12px; }
}

/* ---- Grade: duas colunas de verdade ----
   No desktop a grade é flex com card de 266px fixos. No celular isso deixava
   UM card por linha, centralizado, com o resto da largura vazio — a pessoa
   rolava o dobro para ver o mesmo catálogo. Grid de 2 colunas com card fluido
   mostra 4 peças por tela em vez de 1,5. */
@media (max-width: 680px) {
  .catalog__grid {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px; align-items: stretch;
  }
  .product-card {
    width: auto; gap: 12px; padding: 10px 10px 12px; border-radius: 10px;
  }
  .product-card__inner { gap: 10px; }
  .product-card__text { gap: 8px; }
  .product-card__title,
  .product-card__title-btn { font-size: 15px; line-height: 19px; }
  .product-card__title { min-height: 38px; }
  /* Rótulo e preço lado a lado não cabem em ~150px de card: quebravam os dois
     no meio. Empilhados, o preço fica com a linha inteira e ganha o peso que
     ele merece na decisão. */
  .product-card__prices { gap: 6px; }
  .product-card__price-row { flex-direction: column; align-items: flex-start; gap: 1px; }
  .product-card__price-label { font-size: 12px; line-height: 16px; color: var(--font-neutral-300); }
  .product-card__price-money { margin-left: 0; font-size: 17px; line-height: 22px; font-weight: 600; }
  .product-card__tier-hint { font-size: 11px; line-height: 15px; }
  /* "Saiba mais" sai: o card inteiro já abre o produto, e no toque não existe
     a dica de hover que ensinava isso — o que sobra é um botão roubando metade
     da linha do único botão que faz outra coisa. */
  .product-card__more { display: none; }
  .product-card__add { width: 100%; min-height: 42px; padding: 8px 10px; gap: 6px; }
  /* Sem mouse, hover só atrapalha: o card ficava "levantado" depois do toque. */
  .product-card:hover { transform: none; box-shadow: var(--shadow-1); }
  .product-card:hover .product-card__media img { transform: none; }
  .product-card__hint { display: none; }
  .catalog__empty { font-size: 14px; }
}

/* ==========================================================================
   Folha de filtros (celular)
   ==========================================================================
   Sobe de baixo, onde o polegar já está, e escolhe em chips — alvo de dedo,
   com todas as opções à vista de uma vez. O select do sistema abre uma roda
   que cobre a grade e obriga a fechar para ver o resultado; aqui a grade fica
   filtrando por trás e o botão de fechar diz quantas peças sobraram.

   visibility (e não display) porque a folha precisa DESLIZAR: um elemento que
   sai de display:none não tem quadro anterior para animar. */
.fsheet {
  position: fixed; inset: 0; z-index: 70;
  visibility: hidden; transition: visibility 0s linear var(--dur-base);
}
.fsheet.is-open { visibility: visible; transition-delay: 0s; }
.fsheet__overlay {
  position: absolute; inset: 0; background: rgba(61, 74, 43, .42);
  backdrop-filter: blur(2px);
  opacity: 0; transition: opacity var(--dur-base) var(--ease-io);
}
.fsheet.is-open .fsheet__overlay { opacity: 1; }
.fsheet__card {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column; max-height: 82vh;
  background: var(--bg-base-0);
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -18px 50px -20px rgba(40, 44, 30, .5);
  transform: translateY(100%);
  transition: transform var(--dur-slow) var(--ease-out);
  padding-bottom: env(safe-area-inset-bottom);
}
.fsheet.is-open .fsheet__card { transform: none; }
/* Sair é mais rápido que entrar — mesma regra da gaveta e do modal. */
.fsheet:not(.is-open) .fsheet__card { transition: transform var(--dur-base) var(--ease-io); }
/* A alcinha não é enfeite: é o que faz a folha ser lida como "veio de baixo"
   antes de qualquer texto ser lido. */
.fsheet__grip {
  display: block; width: 38px; height: 4px; border-radius: var(--radius-pill);
  background: var(--stroke-primary-main); margin: 10px auto 0;
}
.fsheet__head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 20px 4px;
}
.fsheet__title {
  margin: 0; font-family: var(--font-title); font-weight: 700;
  font-size: 18px; line-height: 22px; color: var(--font-always-dark);
}
.fsheet__close {
  border: 0; background: transparent; color: var(--font-neutral-300);
  width: 40px; height: 40px; margin-right: -8px; border-radius: var(--radius-4);
  display: inline-flex; align-items: center; justify-content: center;
}
.fsheet__close svg { fill: var(--font-neutral-300); }
.fsheet__body { flex: 1 1 auto; overflow-y: auto; padding: 8px 20px 16px; }
.fsheet__group + .fsheet__group { margin-top: 20px; }
.fsheet__group-title {
  margin: 0 0 10px;
  font-family: var(--font-support); font-weight: 400; font-size: 12px; line-height: 16px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--font-neutral-200);
}
.fsheet__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.fchip {
  min-height: 40px; padding: 9px 16px;
  border: 1px solid var(--stroke-primary-main); border-radius: var(--radius-pill);
  background: var(--bg-base-100); color: var(--font-neutral-100);
  font-family: var(--font-body); font-weight: 500; font-size: 14px; line-height: 18px;
  transition: background var(--dur-fast) var(--ease-io),
              color var(--dur-fast) var(--ease-io),
              border-color var(--dur-fast) var(--ease-io);
}
.fchip.is-on {
  background: var(--brand-secondary-main); border-color: var(--brand-secondary-main);
  color: var(--font-inverse); font-weight: 600;
}
.fchip:focus-visible { outline: 2px solid var(--brand-secondary-light); outline-offset: 2px; }
.fsheet__foot {
  flex: none; display: flex; gap: 10px; align-items: center;
  padding: 12px 20px 16px; border-top: 1px solid var(--stroke-primary-main);
  background: var(--bg-base-100);
}
.fsheet__limpar { flex: 0 0 auto; min-height: 48px; }
/* O botão que fecha carrega o tamanho do resultado ("Ver 12 peças"): é o que
   evita fechar, olhar a grade e voltar para corrigir. */
.fsheet__ver { flex: 1 1 auto; min-height: 48px; font-size: 16px; }
/* Enquanto a folha está aberta o fundo não rola — senão o dedo arrasta o
   catálogo achando que arrasta a folha. */
body.has-sheet { overflow: hidden; }

/* ==========================================================================
   Gaveta do pedido no celular
   ========================================================================== */
@media (max-width: 680px) {
  .drawer { width: 100%; }
  .drawer__head { padding: 18px 20px 10px; }
  .drawer__body { padding: 4px 20px; }
  .drawer__foot { padding: 14px 20px calc(16px + env(safe-area-inset-bottom)); gap: 14px; }
  /* Último passo do pedido: alvo cheio, na base da tela. */
  .drawer__submit { width: 100%; min-height: 48px; font-size: 16px; }
  /* O stepper da gaveta era de 28px — abaixo do alvo de toque, e com os dois
     botões a poucos pixels um do outro. */
  .stepper button { width: 36px; height: 36px; }
  .stepper input { height: 36px; }
  .order-item__media { width: 64px; height: 64px; }
}

/* ==========================================================================
   Modal do produto no celular — folha ancorada na base
   ==========================================================================
   Centralizado, o modal deixava faixas mortas em cima e embaixo e jogava a
   barra de "Adicionar" para o meio da tela. Ancorado na borda de baixo, a
   barra cai exatamente onde o polegar descansa. */
@media (max-width: 680px) {
  .pdetail__card {
    left: 0; right: 0; top: auto; bottom: 0; transform: none;
    width: 100%; max-height: 92vh;
    border-radius: 18px 18px 0 0; border-bottom: 0;
  }
  .pdetail__close { top: 14px; right: 14px; width: 38px; height: 38px; }
  /* Teto de altura da foto para que a descrição e o preço apareçam sem rolar
     — a foto continua sendo o maior elemento da tela, não a tela inteira. */
  .pdetail__palco { max-width: min(100%, calc(44vh * 4 / 5)); }
  .pdetail__thumbs { max-width: min(100%, calc(44vh * 4 / 5)); gap: 8px; margin-top: 10px; }
  .pdetail__thumb { width: 44px; height: 55px; }
  .pdetail__title { font-size: 20px; line-height: 25px; }
  .pdetail__desc { font-size: 15px; line-height: 22px; }
  .pdetail__info { gap: 12px; }
  .pdetail__bar { padding: 12px 18px calc(14px + env(safe-area-inset-bottom)); }
  .pdetail__add { min-height: 48px; }
  .pdetail__summary { gap: 12px; justify-content: space-between; }
}

/* ==========================================================================
   Barra de compra no celular (modal e página da peça)
   ==========================================================================
   Duas fileiras fixas, alinhadas nas duas bordas:
     [ QUANTIDADE      ]              [       TOTAL ]
     [ −  1  +         ]              [   R$ 158,00 ]
     [ ─────────── Adicionar ao pedido ─────────── ]
   Antes o par quantidade + total quebrava linha conforme o valor crescia:
   ora lado a lado, ora um embaixo do outro, e nunca preso às bordas. É o
   arranjo dos apps de loja: seletor à esquerda, preço à direita, botão cheio
   embaixo, onde o polegar alcança. */
@media (max-width: 680px) {
  .pdetail__bar .pdetail__summary {
    width: 100%; flex-wrap: nowrap; align-items: stretch; justify-content: space-between; gap: 12px;
  }
  .pdetail__bar .pdetail__qty { flex-direction: column; align-items: flex-start; gap: 6px; }
  /* Rótulo no alto e valor embaixo, na mesma altura dos da quantidade. */
  .pdetail__bar .pdetail__total {
    flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 2px;
    padding-left: 0; border-left: 0; text-align: right; min-width: 0;
  }
  .pdetail__bar .pdetail__total-value { font-size: 20px; line-height: 24px; }
  .pdetail__bar .stepper--lg button { width: 40px; height: 38px; }
  .pdetail__bar .stepper--lg input { width: 48px; height: 38px; }
}

/* ==========================================================================
   Checkout e toast no celular
   ========================================================================== */
@media (max-width: 560px) {
  .checkout { padding: 16px; align-items: flex-end; }
  .checkout__card { padding: 22px 20px calc(22px + env(safe-area-inset-bottom)); border-radius: 16px; max-height: 92vh; }
  /* 16px de novo: abaixo disso o Safari dá zoom ao focar o campo. */
  .checkout__field input, .checkout__field textarea { font-size: 16px; padding: 11px 12px; }
  .checkout__actions { flex-direction: column-reverse; gap: 8px; }
  .checkout__actions .btn { width: 100%; min-height: 48px; }
}
/* O toast nasce acima da faixa de gestos do celular, não debaixo dela. */
@media (max-width: 680px) {
  .toast-zone { bottom: calc(16px + env(safe-area-inset-bottom)); }
  .toast { width: calc(100% - 24px); }
}

/* ==========================================================================
   Catálogo — a tira da marca
   ==========================================================================
   O que sobrou da home antiga. Ela se apresenta e sai de cena: rola embora com
   a página e não volta, porque quem está olhando peça não precisa da frase de
   abertura grudada no topo. Só a barra de filtros gruda. */
.catalog__marca { display: flex; flex-direction: column; gap: 6px; max-width: 46ch; }
.catalog__titulo {
  font-family: var(--font-display); font-weight: 600; font-size: 44px; line-height: 1.05;
  letter-spacing: -.02em; color: var(--font-always-dark); margin: 0;
  font-variation-settings: 'SOFT' 0, 'WONK' 1;
}
.catalog__lead { color: var(--font-neutral-100); margin: 0; }
.catalog__nota { color: var(--font-neutral-200); margin: 0; }
.catalog__nota span { font-weight: 500; }

/* ==========================================================================
   Catálogo — barra de filtros
   ========================================================================== */
.catalog__ordenar { width: 152px; margin-left: auto; }
/* A grade não some enquanto a resposta não chega: ela desmaia um pouco e para
   de aceitar clique. Trocar por um vazio faria a página saltar de altura a cada
   letra digitada na busca. */
.catalog__grid.is-carregando { opacity: .45; pointer-events: none; transition: opacity var(--dur-fast) var(--ease-io); }

/* Painel de linha/tipo. Um <select> escolhe UM valor, e ver duas linhas ao
   mesmo tempo era o que faltava; uma fileira de chips resolveria isso mas
   cresceria com o catálogo até empurrar a busca para fora da barra. */
.dropdown { position: relative; flex: none; }
.dropdown__botao {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 42px; padding: 8px 14px;
  border: 1px solid var(--stroke-primary-main); border-radius: var(--input-radius);
  background: var(--bg-base-100); color: var(--font-always-dark);
  font-family: var(--font-body); font-weight: 500; font-size: 14px; line-height: 18px;
  transition: border-color var(--dur-fast) var(--ease-io);
}
.dropdown__botao:hover { border-color: var(--stroke-primary-light); }
.dropdown__botao svg { fill: var(--font-always-dark); transition: transform var(--dur-fast) var(--ease-io); }
.dropdown.is-open .dropdown__botao { border-color: var(--brand-secondary-main); }
.dropdown.is-open .dropdown__botao svg { transform: rotate(180deg); }
.dropdown__conta {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--radius-pill);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-secondary-main); color: var(--font-inverse);
  font-family: var(--font-support); font-size: 11px; line-height: 1;
}
.dropdown__conta[hidden] { display: none; }
.dropdown__painel {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 40;
  min-width: 200px; max-height: 320px; overflow-y: auto;
  padding: 6px; border: 1px solid var(--stroke-primary-main); border-radius: var(--radius-8);
  background: var(--bg-base-0); box-shadow: var(--shadow-2);
}
.dropdown__item {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px;
  border-radius: var(--radius-4); cursor: pointer;
  font-family: var(--font-body); font-size: 14px; line-height: 18px; color: var(--font-neutral-100);
}
.dropdown__item:hover { background: var(--bg-base-100); }
.dropdown__item input { accent-color: var(--brand-secondary-main); width: 16px; height: 16px; flex: none; }
.dropdown__item:has(input:checked) { color: var(--font-always-dark); font-weight: 600; }

/* "Várias cores" — a coluna multicor já existia e só virava um ícone no card. */
.toggle { display: inline-flex; align-items: center; gap: 8px; flex: none; cursor: pointer; }
.toggle input { position: absolute; opacity: 0; pointer-events: none; }
.toggle__marca {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: var(--input-radius);
  border: 1px solid var(--stroke-primary-main); background: var(--bg-base-100);
  transition: background var(--dur-fast) var(--ease-io), border-color var(--dur-fast) var(--ease-io);
}
.toggle__marca svg { fill: var(--font-always-dark); }
.toggle__texto {
  font-family: var(--font-body); font-weight: 500; font-size: 14px; line-height: 18px;
  color: var(--font-neutral-100);
}
.toggle:has(input:checked) .toggle__marca { background: var(--brand-secondary-main); border-color: var(--brand-secondary-main); }
.toggle:has(input:checked) .toggle__marca svg { fill: var(--font-inverse); }
.toggle:has(input:checked) .toggle__texto { color: var(--font-always-dark); font-weight: 600; }
.toggle:has(input:focus-visible) .toggle__marca { outline: 2px solid var(--brand-secondary-light); outline-offset: 2px; }

/* ==========================================================================
   Catálogo — contagem e filtros ativos
   ==========================================================================
   Fora da barra grudada: contador é informação, não controle, e não vale um
   lugar permanente no topo. Antes este número só existia dentro da folha do
   celular — no desktop não havia como saber o tamanho do resultado. */
.catalog__estado { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: -20px; }
.catalog__conta {
  margin: 0; font-family: var(--font-support); font-size: 13px; line-height: 18px;
  letter-spacing: .04em; text-transform: uppercase; color: var(--font-neutral-300); flex: none;
}
.catalog__ativos { display: flex; flex-wrap: wrap; gap: 8px; }
/* Cada filtro ativo sai sozinho. Sem isto, o único sinal de filtro no desktop
   era o painel marcado — que fica fechado —, e dava pra procurar uma peça que
   "sumiu" sem perceber que a busca de dois minutos atrás ainda valia. */
.fativo {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 30px; padding: 5px 10px; border-radius: var(--radius-pill);
  border: 1px solid var(--brand-secondary-main); background: var(--brand-secondary-main);
  color: var(--font-inverse);
  font-family: var(--font-body); font-weight: 500; font-size: 13px; line-height: 18px;
}
.fativo__x { font-size: 15px; line-height: 1; opacity: .8; }
.fativo:hover .fativo__x { opacity: 1; }
.fativo--limpar { background: transparent; border-color: var(--stroke-primary-main); color: var(--font-neutral-300); }
.fativo--limpar:hover { border-color: var(--stroke-primary-light); color: var(--font-neutral-100); }
.fativo:focus-visible { outline: 2px solid var(--brand-secondary-light); outline-offset: 2px; }

/* ==========================================================================
   Catálogo — carregar mais
   ==========================================================================
   Botão, e não rolagem infinita: a infinita sequestra o rodapé e o botão de
   voltar, e aqui o fim da página é justamente onde mora o Instagram. */
.catalog__mais { display: flex; justify-content: center; padding: 8px 0 0; }
.catalog__mais-btn { min-height: 48px; padding: 12px 28px; font-size: 16px; }
.catalog__mais-btn:disabled { opacity: .6; pointer-events: none; }

/* Só para leitor de tela: o "x" do chip e um simbolo, nao uma frase. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* O chip da folha virou <label> com uma caixa dentro (antes era <button> com
   aria-pressed): assim uma marca vale em qualquer lugar que a leia, e o estado
   marcado não depende de ninguém lembrar de sincronizar uma classe. */
.fchip { display: inline-flex; align-items: center; cursor: pointer; }
.fchip input { position: absolute; opacity: 0; pointer-events: none; }
.fchip:has(input:checked) {
  background: var(--brand-secondary-main); border-color: var(--brand-secondary-main);
  color: var(--font-inverse); font-weight: 600;
}
.fchip:has(input:focus-visible) { outline: 2px solid var(--brand-secondary-light); outline-offset: 2px; }

/* ==========================================================================
   Filtros no celular
   ==========================================================================
   Os painéis e o interruptor de cor saem da barra: lá eles empilhariam e a
   barra grudada comeria um quinto da tela antes da primeira foto. Continuam no
   HTML porque SÃO o estado do filtro — a folha de baixo mexe nas mesmas caixas. */
@media (max-width: 680px) {
  .catalog__marca { gap: 4px; }
  .catalog__titulo { font-size: 30px; line-height: 34px; }
  .catalog__lead { font-size: 15px; line-height: 21px; }
  /* Tudo que escolhe vai para a folha; na barra ficam a busca e o botão que
     abre a folha, e mais nada. Com a ordenação aqui também eram TRÊS controles
     numa barra que não quebra linha: os 390px estouravam, a página inteira
     ganhava rolagem lateral e o botão "Filtros" ficava fora da tela — quer
     dizer, no celular não havia como filtrar. */
  /* Tudo que escolhe vai para a folha; na barra ficam a busca e o botão que a
     abre. A ordenação chegou a ficar aqui e cabia — mas os 128px dela saem da
     busca, que é elástica: num aparelho de 390px ela caía para 96px, onde
     cabem umas oito letras. Medido, não estimado. Sem a ordenação a busca fica
     com 232px. */
  .catalog__dropdown, .catalog__multicor, .catalog__ordenar { display: none; }
  .catalog__estado { margin-top: -6px; gap: 10px; }
  .catalog__conta { font-size: 12px; }
  .catalog__mais-btn { width: 100%; }
}

/* ==========================================================================
   A página de uma peça (/p/12-vaso-duna)
   ==========================================================================
   Ela reaproveita as classes .pdetail__* do modal — que sempre foram soltas, e
   não filhas de .pdetail — porque o conteúdo é o MESMO. Aqui só entram as
   diferenças de quem é página e não sobreposição: sem posicionamento fixo, sem
   rolagem interna, com respiro em volta e a barra de ação no fluxo. */
.produto { padding: 24px 0 96px; }
.produto__voltar {
  display: inline-flex; align-items: center; gap: 5px; margin-bottom: 18px;
  font-family: var(--font-body); font-weight: 500; font-size: 14px; line-height: 18px;
  color: var(--font-neutral-300);
  transition: color var(--dur-fast) var(--ease-io);
}
.produto__voltar:hover { color: var(--font-always-dark); }
.produto__voltar svg { fill: currentColor; }
.produto__card {
  border: 1px solid var(--stroke-primary-main); border-radius: var(--radius-8);
  background: var(--bg-base-0); overflow: hidden;
}
/* A galeria do modal se limita à altura da janela (62vh) porque lá ela divide a
   tela com a sobreposição. Numa página não há essa disputa: a foto pode usar a
   largura que a coluna oferece. */
.produto__card .pdetail__palco,
.produto__card .pdetail__thumbs { max-width: none; }
.produto__card .pdetail__gallery { padding: 32px; }
.produto__card .pdetail__info { padding: 32px 32px 36px; }

.produto__card .pdetail__title { font-size: 30px; line-height: 34px; }

/* No modal a barra é fixa no rodapé do cartão porque o conteúdo rola por baixo
   dela. Aqui quem rola é a página inteira, então ela fica onde está. */
.produto__bar { border-top: 1px solid var(--stroke-soft); }
.produto__relacionados { padding: 28px 32px 32px; border-top: 1px solid var(--stroke-soft); }

.produto--vazio { padding: 80px 0 120px; }
.produto--vazio .container { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }

/* Topo das informações: tags à esquerda, compartilhar à direita, logo acima
   do nome. É o lugar que as lojas usam (junto do título ou da foto) e o que se
   vê sem rolar. Embaixo da barra de quantidade, no celular, o botão só aparecia
   depois da peça inteira.

   Botão compacto (34px) com ícone E palavra: só o ícone é o que as pessoas
   não reconhecem como "compartilhar" — foi o link cinza que ninguém achava. */
.pdetail__topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 34px; }
.pdetail__topo .pdetail__tags { min-width: 0; }
.pdetail__share {
  flex: none; margin-left: auto; gap: 6px;
  min-height: 34px; padding: 6px 12px; border-radius: var(--radius-pill);
  font-size: 13px; line-height: 16px; background: var(--bg-base-0);
}
.pdetail__share[hidden] { display: none; }
.pdetail__share svg { fill: currentColor; }
/* No desktop o fechar do modal fica no canto de cima da coluna de texto: a
   linha do topo desvia dele, senão o compartilhar ficaria embaixo do ×. */
@media (min-width: 681px) {
  .pdetail__card .pdetail__topo { margin-right: 56px; }
}

@media (max-width: 900px) {
  .produto__card .pdetail__grid { grid-template-columns: 1fr; }
  .produto__card .pdetail__gallery { border-right: 0; border-bottom: 1px solid var(--stroke-soft); }
}

@media (max-width: 680px) {
  .produto { padding: 14px 0 56px; }
  .produto__card { border-radius: var(--radius-4); }
  .produto__card .pdetail__gallery { padding: 16px; }
  .produto__card .pdetail__info { padding: 20px 18px 24px; }
  .produto__card .pdetail__title { font-size: 24px; line-height: 28px; }
  .produto__relacionados { padding: 20px 18px 24px; }
  /* Adicionar ao pedido é o que a pessoa veio fazer: no celular a barra empilha
     e o botão ocupa a linha inteira, em vez de dividi-la com o degrau. */
  .produto__bar { flex-direction: column; align-items: stretch; gap: 14px; padding: 14px 18px; }
  .produto__bar .pdetail__add { width: 100%; min-width: 0; }
}

/* ==========================================================================
   Quantas peças cada opção de filtro traria
   ==========================================================================
   O número responde "e se eu marcar isto também". Opção que não traria nada
   fica apagada e sem clique, mas continua na lista: sumindo, a lista mudaria de
   tamanho a cada marca e a opção seguinte pularia de lugar debaixo do dedo. */
.dropdown__item { justify-content: space-between; }
.dropdown__n,
.toggle__n,
.fchip__n {
  font-family: var(--font-support); font-size: 12px; line-height: 1;
  color: var(--font-neutral-300); font-variant-numeric: tabular-nums;
}
.dropdown__n { margin-left: auto; padding-left: 12px; }
.toggle__n { margin-left: -2px; }
.fchip__n { margin-left: 7px; opacity: .75; }
/* Marcado, o chip fica no verde escuro e o número precisa acompanhar — em
   cinza ele sumiria contra o fundo. */
.fchip:has(input:checked) .fchip__n { color: var(--font-inverse); }
.dropdown__item:has(input:checked) .dropdown__n { color: var(--font-always-dark); }
.toggle:has(input:checked) .toggle__n { color: var(--font-always-dark); }

/* Zerada: continua legível (não é erro, é informação), só não é mais um alvo. */
.dropdown__item.is-vazio,
.fchip.is-vazio { opacity: .42; cursor: default; }
.dropdown__item.is-vazio:hover { background: none; }

/* O foco precisa aparecer dentro do painel: navegando por seta, o unico sinal
   de "estou aqui" e este. */
.dropdown__item:focus-within { background: var(--bg-base-100); box-shadow: inset 2px 0 0 var(--brand-secondary-main); }
.dropdown__item input:focus-visible { outline: 2px solid var(--brand-secondary-light); outline-offset: 1px; }

/* Aviso de busca corrigida. Tom de recado, não de erro: encontrar algo parecido
   é uma ajuda, e o vermelho de alerta faria parecer que houve falha. */
.catalog__correcao {
  margin: -28px 0 0; font-family: var(--font-body); font-size: 14px; line-height: 20px;
  color: var(--font-neutral-200);
}
.catalog__correcao[hidden] { display: none; }
@media (max-width: 680px) {
  .catalog__correcao { margin-top: -10px; font-size: 13px; }
}

/* Medidas da peça. Fica logo abaixo da descrição, com um rótulo miúdo: é dado
   objetivo, não prosa, e o olho precisa distinguir os dois. Só é desenhada
   quando o campo foi preenchido no painel. */
.pdetail__medidas {
  display: flex; align-items: baseline; gap: 8px; margin: 0;
  font-family: var(--font-body); font-size: 15px; line-height: 22px;
  color: var(--font-always-dark);
}
.pdetail__medidas[hidden] { display: none; }
.pdetail__medidas-rotulo {
  flex: none;
  font-family: var(--font-support); font-size: 11px; line-height: 16px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--font-neutral-300);
}

/* ==========================================================================
   Tira de "Você também pode gostar"
   ==========================================================================
   Os cards são os MESMOS do catálogo — .product-card, sem uma linha de estilo
   própria aqui. Antes era uma miniatura inventada só para este lugar, com nome
   de 13px e preço em cinza claro debaixo de uma foto grande: reinventava o que
   já existia, escondia o que identifica a peça e ainda carregava a foto
   original num quadro de 230px. Reaproveitar o card resolveu os três de uma vez
   — e de quebra o botão "Adicionar" passou a existir na sugestão. */
.relstrip {
  padding: 24px 28px 28px;
  border-top: 1px solid var(--stroke-soft);
}
.relstrip[hidden] { display: none; }

.relstrip__topo {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin: 0 0 16px;
}
.relstrip__titulo {
  margin: 0;
  font-family: var(--font-title); font-weight: 700; font-size: 16px; line-height: 20px;
  color: var(--font-always-dark);
}

.relstrip__setas { display: flex; gap: 8px; flex: none; }
.relstrip__setas[hidden] { display: none; }
.relstrip__seta {
  width: 34px; height: 34px; border-radius: var(--radius-pill);
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--stroke-primary-main); background: var(--bg-base-0);
  transition: border-color var(--dur-fast) var(--ease-io), opacity var(--dur-fast) var(--ease-io);
}
.relstrip__seta svg { fill: var(--font-always-dark); }
.relstrip__seta:hover:not(:disabled) { border-color: var(--stroke-primary-light); }
/* Desabilitada e não escondida: sumir na ponta faria a outra seta pular de
   lugar a cada rolagem. */
.relstrip__seta:disabled { opacity: .35; pointer-events: none; }
.relstrip__seta:focus-visible { outline: 2px solid var(--brand-secondary-light); outline-offset: 2px; }

/* O trilho. scroll-snap para o arrasto parar sempre num card inteiro — meia
   peça na borda lê como conteúdo cortado, não como "tem mais". */
.relstrip__trilho {
  display: flex; gap: 16px;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* Espaço para a sombra e o translateY do :hover do card não serem cortados
     pelo overflow. O negativo devolve o alinhamento à margem da seção. */
  padding: 6px 28px 10px;
  margin: -6px -28px -10px;
  /* O snap ancora na borda da CAIXA DE PADDING, não na do conteúdo: sem isto
     o trilho parava em scrollLeft 28 (o padding acima) e a seta da esquerda
     nunca se reconhecia como "já estou no começo". */
  scroll-padding-inline: 28px;
  scrollbar-width: thin;
}
.relstrip__trilho > .product-card {
  scroll-snap-align: start;
  flex: 0 0 auto;   /* sem isto o flex encolhe os 266px do card para caber tudo */
}
.relstrip__trilho:focus-visible { outline: 2px solid var(--brand-secondary-light); outline-offset: 4px; border-radius: var(--radius-4); }

/* A barra de rolagem some no desktop (as setas fazem o trabalho e ficam mais
   limpas), mas fica no celular, onde é o único aviso de que há mais à direita
   antes de a pessoa arrastar. */
@media (hover: hover) and (pointer: fine) {
  .relstrip__trilho::-webkit-scrollbar { height: 0; }
  .relstrip__trilho { scrollbar-width: none; }
}

@media (max-width: 680px) {
  .relstrip { padding: 20px 0 24px; }
  .relstrip__topo { padding: 0 18px; margin-bottom: 12px; }
  /* Setas fora: no celular quem rola é o dedo, e dois alvos de 34px ao lado do
     título só roubariam espaço do que importa. */
  .relstrip__setas { display: none; }
  .relstrip__trilho { gap: 12px; padding: 6px 18px 10px; margin: -6px 0 -10px; scroll-padding-inline: 18px; }
  /* No celular o card do catálogo é fluido (duas colunas na grade). Na tira ele
     precisa de largura própria: 63% da tela deixa a peça seguinte aparecendo
     pela borda, que é o que convida a arrastar. */
  .relstrip__trilho > .product-card { width: min(63vw, 230px); }
}

/* ==========================================================================
   Refino visual
   ==========================================================================
   Uma passada de acabamento, sem biblioteca nova: os mesmos tokens do ds.css,
   aplicados com mais cuidado. Três ideias guiam tudo aqui:

   1. Linha só onde separa de verdade. Borda de controle continua firme;
      filete DENTRO de um bloco usa --stroke-soft.
   2. Mesma altura, mesmo raio, mesmo anel de foco para todo controle da mesma
      fileira. Diferença de 4px entre vizinhos o olho não mede, mas percebe.
   3. Profundidade por sombra em tom de marca, não por mais contorno.

   Fica no fim do arquivo de propósito: sobrescreve sem reescrever as regras
   de cima, e dá pra ler (ou desfazer) o acabamento inteiro num lugar só. */

:root {
  --radius-12: 12px;
  /* Anel de foco para campo de texto: um halo, não um contorno de 2px — o
     campo já tem borda, e dois traços paralelos parecem erro. */
  --ring: 0 0 0 3px rgba(102, 123, 71, .2);
  --control-h: 42px;
}

/* ---- Cabeçalho: filete, não linha cinza ---- */
.site-header { border-bottom-color: var(--stroke-soft); }

/* ---- Tira da marca no catálogo: título e texto respiram ---- */
.catalog__marca { gap: 0; max-width: 52ch; }
.catalog__lead { margin-top: 14px; color: var(--font-neutral-100); }
.catalog__nota { margin-top: 6px; }

/* ---- Barra de filtros: uma fileira, uma altura ----
   A busca tinha 30px, os painéis 42 e o ordenar 34: três alturas lado a lado.
   Agora todos medem --control-h, com o mesmo raio, fundo e foco. */
@media (min-width: 681px) {
  .catalog__toolbar { align-items: center; gap: 12px; }
  .catalog__toolbar .field,
  .catalog__toolbar .dropdown__botao,
  .catalog__toolbar .catalog__filtros { min-height: var(--control-h); }
  .catalog__toolbar .field { padding: 0 12px; gap: 8px; }
  .catalog__search { width: 280px; margin-right: 12px; }
}
.catalog__toolbar .field {
  border-color: var(--stroke-primary-main); border-radius: var(--radius-8);
  background: var(--bg-base-100);
  transition: border-color var(--dur-fast) var(--ease-io), box-shadow var(--dur-fast) var(--ease-io), background var(--dur-fast) var(--ease-io);
}
.catalog__toolbar .field:hover { border-color: var(--stroke-primary-light); }
.catalog__toolbar .field:focus-within { border-color: var(--brand-secondary-light); background: var(--bg-base-0); box-shadow: var(--ring); }
.catalog__toolbar .field input::placeholder { color: var(--font-neutral-300); opacity: 1; }
.catalog__toolbar .field svg { fill: var(--font-neutral-300); }
.catalog__toolbar .field select { color: var(--font-always-dark); font-size: 14px; }
.dropdown__botao { border-radius: var(--radius-8); }
.dropdown.is-open .dropdown__botao { box-shadow: var(--ring); border-color: var(--brand-secondary-light); }
.dropdown__painel { border-color: var(--stroke-soft); border-radius: var(--radius-12); box-shadow: var(--shadow-2), 0 0 0 1px rgba(61, 74, 43, .02); }

/* "Várias cores" vira um chip inteiro: antes era um quadrado com ícone e um
   texto solto ao lado, que não pareciam a mesma coisa nem um controle. */
.toggle {
  gap: 6px; min-height: var(--control-h); padding: 0 14px 0 6px;
  border: 1px solid var(--stroke-primary-main); border-radius: var(--radius-pill);
  background: var(--bg-base-100);
  transition: border-color var(--dur-fast) var(--ease-io), background var(--dur-fast) var(--ease-io);
}
.toggle:hover { border-color: var(--stroke-primary-light); }
.toggle__marca { width: 30px; height: 30px; border: 0; border-radius: var(--radius-pill); background: transparent; }
.toggle:has(input:checked) { background: var(--brand-secondary-main); border-color: var(--brand-secondary-main); }
.toggle:has(input:checked) .toggle__marca { background: transparent; }
.toggle:has(input:checked) .toggle__texto,
.toggle:has(input:checked) .toggle__n { color: var(--font-inverse); }
.toggle:has(input:focus-visible) { outline: 2px solid var(--brand-secondary-light); outline-offset: 2px; }
.toggle:has(input:focus-visible) .toggle__marca { outline: 0; }
@media (max-width: 680px) { .toggle { min-height: 40px; } }

/* ---- Grade fluida no desktop ----
   Card de 266px fixos numa fileira flex deixava uma sobra morta à direita da
   última coluna (a grade não chegava à borda do container). Em grid com
   auto-fill as colunas dividem a largura inteira e a grade fecha nas duas
   margens. O celular continua com as duas colunas definidas lá em cima. */
@media (min-width: 681px) {
  .catalog__grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(236px, 1fr));
    gap: 32px 24px; align-items: stretch;
  }
  .catalog__grid > .product-card { width: auto; }
}

/* ---- Card de produto ---- */
.product-card {
  gap: 16px; padding: 12px 12px 16px;
  border: 1px solid var(--stroke-soft); border-radius: var(--radius-12);
  background: var(--bg-base-100);
}
.product-card__media { border-radius: var(--radius-8); }
/* Título até o preço: eram 16px de gap somados aos 22px vazios do título de
   uma linha só (min-height de duas). O rodapé fica alinhado entre cards pela
   margem automática das ações, então o espaço aqui pode encolher. */
.product-card__text { gap: 10px; padding-inline: 4px; }
.product-card__inner { gap: 14px; }
.product-card__actions { padding-inline: 4px; }
.product-card__price-money { font-weight: 600; }
.product-card__count {
  left: 10px; top: 10px; padding: 3px 9px;
  background: rgba(255, 253, 245, .88); color: var(--font-always-dark);
  font-size: 11px; line-height: 14px; backdrop-filter: blur(4px);
}
.product-card__badge { background: rgba(255, 253, 245, .88); backdrop-filter: blur(4px); }
.product-card__badge svg { fill: var(--font-always-dark); }
.product-card:hover { box-shadow: 0 18px 36px -22px rgba(61, 74, 43, .45), 0 2px 6px rgba(61, 74, 43, .05); }

/* ---- Botões ---- */
.btn--line { border-color: var(--stroke-primary-main); }
.btn--line:hover { border-color: var(--stroke-primary-light); box-shadow: none; }

/* ---- Página da peça, gaveta e folha de filtros: mesmos filetes do modal ---- */
.produto__card { border-color: var(--stroke-soft); border-radius: var(--radius-12); box-shadow: 0 1px 2px rgba(61, 74, 43, .04), 0 20px 50px -34px rgba(61, 74, 43, .35); }
.pdetail__card { border-radius: var(--radius-12); }
@media (max-width: 680px) { .pdetail__card { border-radius: 18px 18px 0 0; } }
.order-item { border-bottom-color: var(--stroke-soft); }
.drawer__foot { border-top-color: var(--stroke-soft); }
.fsheet__foot { border-top-color: var(--stroke-soft); }
.pdetail__thumb { border-radius: 6px; }
.stepper { border-radius: var(--radius-8); }

/* ---- Texto selecionado no tom da marca, não no azul do sistema ---- */
::selection { background: rgba(102, 123, 71, .22); color: var(--font-always-dark); }

/* ==========================================================================
   Catálogo — topo compacto
   ========================================================================== */

/* Topo mais baixo: a tira da marca tomava ~400px e, na primeira tela, sobrava
   uma fileira só de peças. Título menor e menos respiro em volta — a marca
   continua se apresentando, só não cobra meia tela por isso. */
@media (min-width: 681px) {
  .catalog { padding-top: 36px; }
  .catalog__wrap { gap: 28px; }
  .catalog__titulo { font-size: 36px; line-height: 40px; }
  .catalog__lead { margin-top: 10px; font-size: 16px; line-height: 22px; }
  .catalog__estado { margin-top: -12px; }
}

/* "Meu pedido" em tela bem estreita: sobra o ícone e o número, com alvo de 44px. */
@media (max-width: 380px) {
  .cart-button__texto { display: none; }
  .cart-button { padding: 0 12px; }
}

/* ==========================================================================
   Movimento — peças criadas pelo motion.js
   ========================================================================== */

/* A miniatura que voa até "Meu pedido". Fica acima de tudo (inclusive do
   modal que está fechando) e não pega clique. */
.hs-voo { position: fixed; z-index: 1000; pointer-events: none; }
.hs-voo > div { width: 100%; height: 100%; }
.hs-voo img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  border-radius: var(--radius-8); box-shadow: var(--shadow-2);
}

/* O ponto do logo gira em torno de si mesmo, não da origem do SVG. */
.brand [data-logo-ponto] { transform-box: fill-box; transform-origin: center; }
.brand svg { display: block; }

/* Passar o mouse no logo: o ponto dá um pulinho e assenta — o mesmo gesto da
   abertura, em miniatura. Só onde existe hover de verdade; no toque, o "hover"
   gruda depois do clique e o ponto pularia sozinho ao voltar à página. */
@media (hover: hover) {
  .site-header .brand:hover [data-logo-ponto] { animation: hs-ponto-pula var(--dur-slow) var(--ease-out); }
}
@keyframes hs-ponto-pula {
  0%   { transform: none; }
  40%  { transform: translateY(-3px) scale(.94, 1.06); }
  75%  { transform: translateY(0) scale(1.18, .84); }
  100% { transform: none; }
}

/* Cabeçalho rolado (motion.js): ganha sombra quando há conteúdo passando por
   baixo. Quando a barra de filtros gruda logo abaixo, a sombra é dela — duas
   sombras empilhadas viram uma faixa suja. */
.site-header {
  transition: box-shadow var(--dur-base) var(--ease-io), border-color var(--dur-base) var(--ease-io);
}
.site-header.is-rolado { box-shadow: var(--shadow-2); border-bottom-color: transparent; }
body:has(.catalog__toolbar.is-grudada) .site-header.is-rolado { box-shadow: none; border-bottom-color: var(--stroke-soft); }

/* O painel de Linha/Tipo abria de uma vez. Agora desce um pouco e aparece,
   ancorado no botão. Animação, e não transição: o painel sai de display:none
   ([hidden]), e é a animação que roda a cada vez que ele volta a existir. */
.dropdown__painel:not([hidden]) {
  transform-origin: top left;
  animation: hs-painel-entra var(--dur-base) var(--ease-out);
}
@keyframes hs-painel-entra { from { opacity: 0; transform: translateY(-4px) scale(.98); } }

/* Nome da peça: o sublinhado chega em vez de aparecer — a cor vai de
   transparente à do texto e a linha sobe para perto das letras. */
.product-card__title-btn {
  text-decoration: underline; text-decoration-color: transparent;
  text-decoration-thickness: 1px; text-underline-offset: 6px;
  transition: text-decoration-color var(--dur-base) var(--ease-io), text-underline-offset var(--dur-base) var(--ease-out);
}
.product-card__title-btn:hover { text-decoration-color: currentColor; text-underline-offset: 3px; }

/* ==========================================================================
   Abertura — só na primeira visita (classe hs-abertura posta no <head>)

   Uma peça curta de motion graphic, toda no centro da tela, só com a marca:
   o "hs" se escreve, o ponto argila cai no lugar e o nome aparece.
   Passos em token (C = --dur-cena 700ms, S = --dur-slow 420ms):
     0      a câmera aproxima devagar (palco de .94 a 1) ............... 2C
     0      o traço do "hs" se desenha ................................. C
     450    o preenchimento entra, o traço sai .......................... S
     500    o ponto cai com um amassar de mola ao pousar ............... S
     750    "Hora Sucinta" sobe de trás de uma linha, letra a letra .... S
     830    duas ondas saem do ponto quando ele pousa ................. C
     1100   o fio se abre do centro, embaixo do nome .................. S
   Saída (motion.js): tudo recolhe, o fundo se fecha num círculo em cima do
   ponto e o site entra por trás dele. Sem o motion.js, a saída vira um fade
   pelo CSS: nada fica preso.
   ========================================================================== */
/* Pelo atributo, NUNCA pela classe: o <html> também ganha a classe
   hs-abertura durante a cena, e um ".hs-abertura { display: none }" escondia
   o documento inteiro — a abertura existia e ninguém a via, só uma tela vazia. */
[data-abertura] { display: none; }
html.hs-abertura [data-abertura] {
  display: flex; position: fixed; inset: 0; z-index: 2000;
  align-items: center; justify-content: center;
  animation: hs-abertura-sai var(--dur-slow) var(--ease-io) calc(var(--dur-cena) + 1400ms) forwards;
}
html.hs-abertura [data-abertura].is-conduzida { animation: none; }
/* Um quase-nada de vinheta: o centro na base mais clara, as bordas no tom de
   papel. Dá profundidade ao palco sem pôr cor nenhuma fora da paleta. */
.hs-abertura__fundo {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 45%, var(--bg-base-0) 0%, var(--bg-base-0) 30%, var(--bg-base-100) 100%);
}
.hs-abertura__palco {
  position: relative; display: flex; flex-direction: column; align-items: center;
  gap: var(--sp-32); padding-bottom: var(--sp-16);
  animation: hs-abertura-camera calc(var(--dur-cena) * 2) var(--ease-out) both;
}

/* O "hs." tem o ponto embaixo à direita: puxar 3px para a esquerda o deixa
   centrado ao olho, não pela caixa matemática. */
.hs-abertura__logo { transform: translateX(-3px); }
.hs-abertura__logo svg { display: block; width: 116px; height: auto; overflow: visible; }

[data-abertura] [data-logo-letras] {
  stroke: var(--brand-secondary-main); stroke-width: .35; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 1; fill-opacity: 0;
  animation:
    hs-abertura-traco var(--dur-cena) var(--ease-io) forwards,
    hs-abertura-preenche var(--dur-slow) var(--ease-out) 450ms forwards;
}
[data-abertura] [data-logo-ponto] {
  transform-box: fill-box; transform-origin: center;
  animation: hs-abertura-ponto var(--dur-slow) linear 500ms both;
}
.hs-abertura__onda {
  fill: none; stroke: var(--font-neutral-200); stroke-width: .5; opacity: 0;
  transform-box: fill-box; transform-origin: center;
  animation: hs-abertura-onda var(--dur-cena) var(--ease-out) calc(830ms + var(--o, 0) * 140ms) forwards;
}

/* O nome sobe de trás de uma linha: a caixa corta, a letra aparece de baixo. */
.hs-abertura__nome {
  margin: 0; padding-block: var(--sp-4); overflow: hidden;
  font-family: var(--font-display); font-size: 28px; line-height: 1;
  color: var(--brand-secondary-main); letter-spacing: .04em; white-space: nowrap;
}
.hs-abertura__nome span {
  display: inline-block;
  animation: hs-abertura-letra var(--dur-slow) var(--ease-out) calc(750ms + var(--i) * 35ms) both;
}
.hs-abertura__fio {
  display: block; width: 56px; height: 1px; margin-top: calc(-1 * var(--sp-24));
  background: var(--stroke-primary-light); transform: scaleX(0);
  animation: hs-abertura-fio var(--dur-slow) var(--ease-out) 1100ms forwards;
}

@keyframes hs-abertura-camera { from { transform: scale(.94); } to { transform: none; } }
@keyframes hs-abertura-traco { to { stroke-dashoffset: 0; } }
@keyframes hs-abertura-preenche { to { fill-opacity: 1; stroke-opacity: 0; } }
/* Cai acelerando, amassa ao tocar e volta com mola. Cada trecho tem a curva
   da física dele. */
@keyframes hs-abertura-ponto {
  0%   { opacity: 0; transform: translateY(-26px); animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  10%  { opacity: 1; }
  70%  { transform: translateY(0) scale(1.28, .72); animation-timing-function: var(--ease-out); }
  86%  { transform: translateY(-1.2px) scale(.92, 1.08); animation-timing-function: var(--ease-io); }
  100% { opacity: 1; transform: none; }
}
@keyframes hs-abertura-onda { 0% { opacity: .8; transform: scale(1); } 100% { opacity: 0; transform: scale(5); } }
@keyframes hs-abertura-letra { from { opacity: 0; transform: translateY(105%); } to { opacity: 1; transform: none; } }
@keyframes hs-abertura-fio { to { transform: scaleX(1); } }
@keyframes hs-abertura-sai { to { opacity: 0; visibility: hidden; } }

@media (max-width: 680px) {
  .hs-abertura__logo svg { width: 96px; }
  .hs-abertura__nome { font-size: 24px; }
}