/* ==========================================================================
   AURA CASA — Componentes globais
   Sacola (gaveta), janela de cuidados com a vela e aviso "em breve".
   Tokens de hero.css (:root).
   ========================================================================== */

/* ---------- Sacola ---------- */
.drawer { position: fixed; inset: 0; z-index: 90; }
.drawer[hidden] { display: none; }
.drawer__backdrop {
  position: absolute; inset: 0;
  background: rgba(38, 16, 26, .48);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  opacity: 0; transition: opacity .5s var(--ease-standard);
  cursor: pointer;
}
.drawer__panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column;
  width: min(440px, 100%);
  background: var(--paper);
  color: var(--wine);
  box-shadow: -30px 0 80px -30px rgba(38, 16, 26, .6);
  transform: translateX(104%);
  transition: transform .6s var(--ease-curtain);
}
.drawer.is-open .drawer__backdrop { opacity: 1; }
.drawer.is-open .drawer__panel { transform: none; }

.drawer__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  padding: 28px 28px 20px;
  border-bottom: 1px solid var(--line);
}
.drawer__kicker { margin: 0 0 .6rem; font-family: var(--font-label); font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--rose); }
.drawer__title {
  margin: 0;
  font-family: var(--font-display); font-weight: 300; font-size: 24px; line-height: 1.1; text-transform: uppercase;
  color: var(--wine-deep);
}
.drawer__title span { font-size: .6em; color: var(--rose); }
.drawer__close {
  display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 50%;
  border: 1px solid var(--line-strong); color: var(--wine);
  transition: background var(--dur-md), transform var(--dur-lg) var(--ease-spring);
}
.drawer__close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.drawer__close:hover { background: var(--blush); transform: rotate(90deg); }

/* Barra de frete grátis */
.drawer__free { padding: 16px 28px 18px; background: rgba(241, 213, 227, .45); }
.drawer__free[hidden] { display: none; }
.drawer__free-text { margin: 0 0 .7rem; font-size: 13.5px; color: var(--wine); }
.drawer__free-text strong { color: var(--rose-600); }
.drawer__free-bar { height: 4px; border-radius: 4px; background: rgba(165, 83, 105, .15); overflow: hidden; }
.drawer__free-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--grad-rose-line); transition: width .8s var(--ease-glide); }

/* Itens */
.drawer__list { flex: 1; overflow-y: auto; margin: 0; padding: 8px 28px; list-style: none; overscroll-behavior: contain; }
.bag-item {
  display: grid; grid-template-columns: 72px 1fr auto; gap: 14px; align-items: start;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  animation: bag-in .5s var(--ease-glide) both;
}
@keyframes bag-in { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
.bag-item__img { width: 72px; height: 90px; border-radius: 12px; object-fit: cover; background: #EDE6E3; }
.bag-item__name { margin: 2px 0 .35rem; font-family: var(--font-label); font-size: 12px; line-height: 1.35; letter-spacing: .06em; text-transform: uppercase; color: var(--wine-deep); }
.bag-item__meta { margin: 0; font-size: 13px; color: var(--text-subtle); }
.bag-item__row { display: flex; align-items: center; gap: 14px; margin-top: .8rem; }
.qty {
  display: inline-flex; align-items: center;
  border: 1px solid var(--line-strong); border-radius: var(--r-pill);
}
.qty button { width: 34px; height: 34px; border-radius: 50%; font-size: 16px; color: var(--wine); transition: background var(--dur-md); }
.qty button:hover { background: var(--blush); }
.qty span { min-width: 22px; text-align: center; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.bag-item__remove {
  font-size: 12.5px; color: var(--text-subtle);
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  padding-bottom: 1px;
  transition: color var(--dur-md);
}
.bag-item__remove:hover { color: var(--rose-600); }
.bag-item__total { margin: 2px 0 0; font-family: var(--font-label); font-weight: 500; font-size: 14px; color: var(--wine-deep); font-variant-numeric: tabular-nums; }

/* Vazia */
.drawer__empty {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding: 40px 36px;
}
.drawer__empty[hidden] { display: none; }
.drawer__empty img { opacity: .8; margin-bottom: 1.4rem; }
.drawer__empty-title { margin: 0 0 .6rem; font-family: var(--font-display); font-weight: 300; font-size: 22px; text-transform: uppercase; color: var(--wine-deep); }
.drawer__empty-text { margin: 0 0 1.8rem; max-width: 24ch; font-size: 15px; line-height: 1.6; color: var(--text-muted); }

/* Rodapé da sacola */
.drawer__foot { padding: 20px 28px 28px; border-top: 1px solid var(--line); background: #fff; }
.drawer__foot[hidden] { display: none; }
.drawer__row { display: flex; align-items: baseline; justify-content: space-between; font-size: 15px; color: var(--wine); }
.drawer__row strong { font-family: var(--font-label); font-weight: 500; font-size: 20px; color: var(--wine-deep); font-variant-numeric: tabular-nums; }
.drawer__note { margin: .8rem 0 1.2rem; font-size: 12.5px; line-height: 1.55; color: var(--text-subtle); }
.drawer__note strong { color: var(--rose-600); font-weight: 600; }
.drawer__checkout { width: 100%; }
.drawer__continue {
  display: block; margin: 1rem auto 0;
  font-family: var(--font-label); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--wine);
  transition: color var(--dur-md);
}
.drawer__continue:hover { color: var(--rose-600); }

/* ---------- Janela: como acender ---------- */
.care {
  width: min(680px, calc(100% - 32px)); max-height: calc(100% - 48px);
  margin: auto; padding: 0; border: 0; border-radius: var(--r-lg);
  background: var(--paper); color: var(--wine);
  box-shadow: 0 50px 100px -30px rgba(38, 16, 26, .6);
  opacity: 0; transform: translateY(24px) scale(.97);
  transition: opacity .38s var(--ease-standard), transform .5s var(--ease-spring);
  overflow: auto;
}
.care::backdrop { background: rgba(38, 16, 26, 0); -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); transition: background .38s, backdrop-filter .38s; }
.care.is-open { opacity: 1; transform: none; }
.care.is-open::backdrop { background: rgba(38, 16, 26, .5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.care__inner { position: relative; padding: clamp(32px, 5vw, 52px); }
.care__inner::before { /* monograma em marca d'água */
  content: ""; position: absolute; right: -40px; top: -30px; width: 260px; aspect-ratio: 1035 / 1065;
  background: url("../assets/brand/symbol-rose.svg") center / contain no-repeat; opacity: .08; pointer-events: none;
}
.care__close {
  position: absolute; top: 18px; right: 18px; z-index: 1;
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--line-strong); color: var(--wine); background: var(--paper);
  transition: background var(--dur-md), transform var(--dur-lg) var(--ease-spring);
}
.care__close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.care__close:hover { background: var(--blush); transform: rotate(90deg); }
.care__title {
  margin: 1.2rem 0 1.8rem;
  font-family: var(--font-display); font-weight: 300; font-size: clamp(26px, 3.4vw, 38px); line-height: 1.08; text-transform: uppercase;
  color: var(--wine-deep);
}
.care__title em { font-style: normal; color: var(--rose-600); }
.care__steps { margin: 0 0 2rem; padding: 0; list-style: none; display: grid; gap: 0; }
.care__steps li { display: grid; grid-template-columns: 52px 1fr; padding: 1.1rem 0; border-top: 1px solid var(--line); }
.care__steps span { font-family: var(--font-label); font-size: 11px; letter-spacing: .14em; color: var(--rose); padding-top: .2rem; }
.care__steps h3 { margin: 0 0 .4rem; font-family: var(--font-label); font-weight: 400; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--wine-deep); }
.care__steps p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--text-muted); }

/* ---------- Aviso "em breve" ---------- */
.notice {
  position: fixed; z-index: 75; left: 50%; bottom: 24px;
  display: flex; align-items: center; gap: 1.2rem;
  width: max-content; max-width: calc(100vw - 32px);
  padding: 14px 14px 14px 22px;
  border-radius: var(--r-pill);
  background: rgba(78, 31, 47, .92);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid rgba(241, 213, 227, .2);
  box-shadow: 0 24px 50px -20px rgba(20, 6, 12, .6);
  color: var(--on-media);
  opacity: 0; visibility: hidden; transform: translate(-50%, 20px);
  transition: opacity .4s var(--ease-standard), transform .6s var(--ease-spring), visibility 0s linear .6s;
}
.notice.is-visible { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .4s var(--ease-standard), transform .6s var(--ease-spring), visibility 0s; }
.notice__text { margin: 0; font-size: 14px; line-height: 1.45; color: var(--on-media-muted); }
.notice__text strong { color: var(--on-media); font-weight: 600; }
.notice__link {
  flex: none; padding: .75rem 1.1rem; border-radius: var(--r-pill);
  font-family: var(--font-label); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--rose-600); background: var(--blush);
  transition: transform var(--dur-lg) var(--ease-spring);
}
.notice__link:hover { transform: translateY(-2px); }

@media (max-width: 640px) {
  .drawer__head, .drawer__free, .drawer__list, .drawer__foot { padding-left: 20px; padding-right: 20px; }
  .notice { border-radius: var(--r-md); flex-direction: column; align-items: flex-start; gap: .8rem; bottom: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .drawer__panel, .drawer__backdrop, .care, .care::backdrop, .notice { transition-duration: .01ms; }
  .bag-item { animation: none; }
}