:root {
  --ivory:#faf6f0;
  --paper:#fffdfa;
  --ink:#382f2b;
  --muted:#857972;
  --line:#e9ddd4;
  --accent:#b97068;
  --accent-dark:#94534d;
  --accent-soft:#f3dfd9;
  --accent-rgb:185,112,104;
  --accent-line:#dfb7b0;
  --glow-1:rgba(184,203,213,.16);
  --glow-2:rgba(243,223,217,.3);
  --hero-from:#fbf7f1;
  --hero-to:#f8efe9;
  --topbar-bg:rgba(250,246,240,.91);
  --motif:none;
  --sage:#aebaa4;
  --sage-soft:#e9eee5;
  --blue:#b8cbd5;
  --blue-soft:#eaf2f6;
  --gold:#c9a86f;
  --shadow:0 18px 55px rgba(82,59,47,.09);
  --display:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
}

* { box-sizing:border-box; }
[ng-cloak] { display:none!important; }

html { background:var(--ivory); }

html,body {
  margin:0;
  min-height:100%;
  color:var(--ink);
  background:
    radial-gradient(circle at 8% 8%,var(--glow-1),transparent 28%),
    radial-gradient(circle at 92% 88%,var(--glow-2),transparent 30%),
    var(--ivory);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
}

a { color:inherit; }
button,input,textarea,select { font:inherit; }

input,textarea,select {
  width:100%;
  padding:13px 14px;
  border:1px solid var(--line);
  border-radius:14px;
  outline:none;
  color:var(--ink);
  background:#fff;
}

input:focus,textarea:focus,select:focus {
  border-color:var(--accent-line);
  box-shadow:0 0 0 4px rgba(var(--accent-rgb),.1);
}

textarea { min-height:105px; resize:vertical; }

label {
  display:grid;
  gap:7px;
  font-size:13px;
  font-weight:700;
}

label em { color:var(--muted); font-style:normal; font-weight:400; }

h1,h2,h3,p { margin-top:0; }

h1,h2,h3 {
  font-family:var(--display);
  font-weight:500;
}

h1 {
  margin-bottom:17px;
  font-size:clamp(42px,6vw,72px);
  line-height:.98;
  letter-spacing:-.045em;
}

h2 {
  margin-bottom:10px;
  font-size:clamp(28px,3vw,38px);
  letter-spacing:-.035em;
}

h3 { font-size:21px; }

.eyebrow {
  margin-bottom:9px;
  color:var(--accent-dark);
  font-family:var(--sans);
  font-size:10px;
  font-weight:850;
  letter-spacing:.19em;
}

.lead {
  max-width:670px;
  color:#675d58;
  font-size:17px;
  line-height:1.65;
}

.muted { color:var(--muted); }

.form-stack { display:grid; gap:16px; }

.btn {
  min-height:46px;
  padding:0 19px;
  border:0;
  border-radius:999px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  font-size:13px;
  font-weight:800;
  transition:.16s ease;
}

.btn:hover:not(:disabled) { transform:translateY(-1px); }
.btn:disabled { opacity:.45; cursor:default; }

.btn-primary {
  color:#fff;
  background:var(--accent);
  box-shadow:0 9px 24px rgba(var(--accent-rgb),.2);
}

.btn-primary:hover:not(:disabled) { background:var(--accent-dark); }
.btn-secondary { color:var(--accent-dark); background:var(--accent-soft); }
.btn-soft { color:var(--ink); background:#f4eee8; }
.btn-ghost { color:var(--ink); border:1px solid var(--line); background:rgba(255,255,255,.7); }
.btn-light { color:#2e2825; background:#fff; }
.btn-small { min-height:37px; padding:0 14px; font-size:12px; }
.btn-block { width:100%; }

.link-button {
  width:100%;
  margin-top:17px;
  border:0;
  background:transparent;
  color:var(--accent-dark);
  cursor:pointer;
  font-weight:750;
}

.alert,.notice {
  padding:12px 14px;
  border-radius:13px;
  font-size:13px;
}

.alert-error {
  color:#a2463e;
  background:#fff0ee;
  border:1px solid #f0cbc7;
}

.notice {
  margin-bottom:18px;
  color:#51644b;
  background:#eef5eb;
  border:1px solid #d7e2d2;
}

.topbar {
  position:sticky;
  top:0;
  z-index:40;
  min-height:70px;
  padding:max(12px,env(safe-area-inset-top)) max(20px,calc((100vw - 1180px)/2)) 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:var(--topbar-bg);
  border-bottom:1px solid rgba(233,221,212,.75);
  backdrop-filter:blur(18px);
}

.brand {
  display:flex;
  align-items:center;
  gap:9px;
  text-decoration:none;
  font-family:var(--display);
  font-size:22px;
}

.brand img { width:36px; height:36px; }

.topbar-actions { display:flex; align-items:center; gap:10px; }
.user-chip { color:var(--muted); font-size:12px; }

.card {
  padding:25px;
  border:1px solid var(--line);
  border-radius:28px;
  background:rgba(255,253,250,.94);
  box-shadow:var(--shadow);
}

.auth-card {
  padding:34px;
  border:1px solid var(--line);
  border-radius:38px;
  background:rgba(255,253,250,.96);
  box-shadow:0 28px 90px rgba(65,47,39,.16);
}
.star { position:absolute; color:var(--gold); }

.editor-heading {
  margin:10px 0 28px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:25px;
}

.editor-heading h1 { font-size:clamp(38px,5vw,62px); }

.cover-box {
  min-height:250px;
  margin-bottom:13px;
  overflow:hidden;
  border:1px dashed var(--line);
  border-radius:22px;
  background:
    radial-gradient(circle at 70% 20%,var(--glow-1),transparent 24%),
    linear-gradient(135deg,var(--accent-soft),var(--hero-from));
}

.cover-box img { width:100%; height:300px; display:block; object-fit:cover; }

.cover-placeholder {
  min-height:250px;
  padding:30px;
  display:grid;
  place-items:center;
  align-content:center;
  text-align:center;
}

.cover-placeholder > span { color:var(--gold); font-size:50px; }
.cover-placeholder strong { margin:5px; font-family:var(--display); font-size:22px; font-weight:500; }
.cover-placeholder small { color:var(--muted); }

.upload-button {
  min-height:46px;
  margin-bottom:18px;
  border-radius:999px;
  display:grid;
  place-items:center;
  color:var(--accent-dark);
  background:var(--accent-soft);
  cursor:pointer;
}

.search-box {
  margin:18px 0;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:9px;
}

.catalog-results {
  max-height:640px;
  overflow:auto;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:14px;
}

.catalog-product {
  border:1px solid var(--line);
  border-radius:20px;
  display:grid;
  grid-template-rows:auto 1fr;
  overflow:hidden;
  background:#fff;
}

.catalog-image { display:block; background:var(--ivory); }
.catalog-image img { display:block; width:100%; aspect-ratio:1/1; object-fit:contain; padding:10px; }
.catalog-body { display:grid; align-content:start; justify-items:start; gap:8px; padding:12px 13px 14px; }
.catalog-body strong {
  font-size:13px; line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.catalog-category { color:var(--muted); font-size:11px; letter-spacing:.04em; text-transform:uppercase; }
.catalog-body .btn { width:100%; text-align:center; }

.public-state {
  min-height:100vh;
  padding:30px;
  display:grid;
  place-items:center;
  align-content:center;
  text-align:center;
}
.public-state img { width:64px; margin-bottom:14px; }

.public-hero {
  min-height:520px;
  position:relative;
  overflow:hidden;
  padding:80px 25px 60px;
  display:grid;
  place-items:center;
  text-align:center;
  background:
    radial-gradient(circle at 20% 30%,var(--glow-1),transparent 28%),
    radial-gradient(circle at 80% 60%,var(--glow-2),transparent 32%),
    linear-gradient(140deg,var(--hero-from),var(--hero-to));
}

.public-hero.with-cover { min-height:min(720px,82vh); color:#fff; }
.public-cover,.public-overlay { position:absolute; inset:0; width:100%; height:100%; }
.public-cover { object-fit:cover; }
.public-overlay { z-index:1; background:linear-gradient(to bottom,rgba(45,35,30,.17),rgba(45,35,30,.5)); }
.public-hero:not(.with-cover) .public-overlay { display:none; }

.public-brand {
  position:absolute;
  z-index:3;
  top:26px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:8px;
  font-family:var(--display);
  font-size:18px;
}

.public-brand img { width:31px; }
.public-hero.with-cover .public-brand img { filter:brightness(0) invert(1); }

.public-hero-copy {
  position:relative;
  z-index:2;
  width:min(800px,94%);
}

.public-hero-copy h1 { margin:0 auto 18px; font-size:clamp(50px,10vw,106px); }
.public-hero.with-cover .eyebrow { color:#fff1e8; }
.public-hero-copy > p:not(.eyebrow) { max-width:630px; margin:0 auto 23px; font-size:17px; line-height:1.65; }

.date-chip {
  min-height:39px;
  padding:0 15px;
  border:1px solid rgba(255,255,255,.3);
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  background:rgba(255,255,255,.14);
  backdrop-filter:blur(10px);
  font-size:11px;
  font-weight:700;
}

.public-hero:not(.with-cover) .date-chip {
  color:var(--accent-dark);
  border-color:var(--line);
  background:#fff8;
}

.public-content { width:min(1120px,calc(100% - 30px)); margin:auto; padding:58px 0 100px; }

.public-products { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }

.public-product {
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:25px;
  background:#fff;
  box-shadow:var(--shadow);
}

.public-product-image {
  position:relative;
  aspect-ratio:1.08;
  padding:22px;
  display:grid;
  place-items:center;
  background:#fdfbf8;
}

.public-product-image img { width:100%; height:100%; object-fit:contain; }

.priority-tag {
  position:absolute;
  left:13px;
  top:13px;
  z-index:2;
  padding:6px 10px;
  border-radius:999px;
  color:var(--accent-dark);
  background:var(--accent-soft);
  font-size:9px;
  font-weight:850;
}

.public-product-body { padding:18px; }
.public-product-body h3 { min-height:52px; font-family:var(--sans); font-size:14px; line-height:1.45; font-weight:750; }
.availability { margin:11px 0 16px; color:#70806a; font-size:11px; }

.public-footer {
  min-height:125px;
  border-top:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  color:var(--muted);
  font-size:11px;
}

.public-footer img { width:28px; opacity:.7; }

.modal-backdrop {
  position:fixed;
  inset:0;
  z-index:100;
  padding:16px;
  display:grid;
  place-items:end center;
  background:rgba(38,31,28,.48);
  backdrop-filter:blur(8px);
}

.gift-modal {
  position:relative;
  width:min(520px,100%);
  padding:29px;
  border-radius:29px;
  display:grid;
  gap:15px;
  background:var(--paper);
  box-shadow:0 28px 90px rgba(45,34,29,.25);
}

.modal-close {
  position:absolute;
  right:15px;
  top:13px;
  border:0;
  background:transparent;
  color:var(--muted);
  cursor:pointer;
  font-size:27px;
}

.gift-modal small { color:var(--muted); text-align:center; }

@media (max-width:940px) {
  .public-products { grid-template-columns:repeat(2,1fr); }
}

@media (max-width:680px) {
  .card { padding:18px; border-radius:22px; }
  .editor-heading { align-items:flex-start; flex-direction:column; }
  .search-box { grid-template-columns:1fr; }
  .auth-card { padding:25px 20px; border-radius:29px; }
  .public-hero { min-height:470px; }
  .public-hero.with-cover { min-height:72vh; }
  .public-content { width:calc(100% - 20px); padding-top:38px; }
  .public-products { gap:10px; }
  .public-product { border-radius:18px; }
  .public-product-image { padding:11px; }
  .public-product-body { padding:12px; }
  .public-product-body h3 { min-height:61px; font-size:12px; }
  .public-product .btn { min-height:40px; padding:0 10px; font-size:11px; }
  }

@media (max-width:390px) {
  .public-products { grid-template-columns:1fr; }
  .public-product-body h3 { min-height:auto; }
}
.share-actions { display:flex; flex-wrap:wrap; gap:10px; }
.qr-modal { text-align:center; }
.qr-box { width:min(280px,70vw); margin:14px auto; background:#fff; padding:8px; border-radius:14px; }
.qr-box svg { display:block; width:100%; height:auto; }
.qr-url { word-break:break-all; font-size:12px; }
@media print {
  body * { visibility:hidden; }
  .qr-modal,.qr-modal * { visibility:visible; }
  .qr-modal { position:fixed; inset:0; margin:auto; box-shadow:none; border:0; }
  .qr-modal .modal-close,.qr-modal .share-actions { display:none; }
}

/* selos de recomendação (só aparecem quando há dado real suficiente — ver RecommendationScore) */
.catalog-image { position:relative; }
.badge {
  position:absolute; left:8px; font-size:10px; font-weight:800; letter-spacing:.02em;
  padding:3px 8px; border-radius:999px; color:#fff; box-shadow:0 2px 6px rgba(0,0,0,.15);
}
.badge-top-choice { top:8px; background:var(--accent-dark); }
.badge-gifted-often { top:8px; background:var(--sage); }
.badge-well-rated { top:8px; background:var(--gold); }
.badge-top-choice ~ .badge-gifted-often,.badge-top-choice ~ .badge-well-rated { top:30px; }

/* Temas do chá (escolhidos no editor; valem para o editor e a página pública daquele chá).
   Cada tema redefine os mesmos tokens do :root, então todo componente acompanha. */
.theme-azul {
  --ivory:#f3f7fb; --paper:#fbfdff; --ink:#24313d; --muted:#6a7b8b; --line:#d7e3ee;
  --accent:#4f7fae; --accent-dark:#345f8a; --accent-soft:#dde9f5; --accent-rgb:79,127,174; --accent-line:#a9c3dd;
  --sage:#8fb3a6; --sage-soft:#e3efea; --blue:#9cc0e3; --blue-soft:#e6f0f9; --gold:#e2aa3f;
  --glow-1:rgba(130,176,222,.24); --glow-2:rgba(243,207,124,.2);
  --hero-from:#f2f7fc; --hero-to:#e4eef8; --topbar-bg:rgba(243,247,251,.91);
  --motif:url(../assets/motif-carrinhos.svg);
  --shadow:0 18px 55px rgba(40,70,110,.1);
}
.theme-rosa {
  --ivory:#fdf6f8; --paper:#fffbfc; --ink:#3d2a31; --muted:#8c7179; --line:#f0dbe3;
  --accent:#c45b84; --accent-dark:#9c3f64; --accent-soft:#f9e0ea; --accent-rgb:196,91,132; --accent-line:#e8afc5;
  --sage:#b9a6c9; --sage-soft:#f0e9f5; --blue:#e8b9cb; --blue-soft:#fbeef3; --gold:#d9a35f;
  --glow-1:rgba(240,170,200,.26); --glow-2:rgba(255,222,205,.3);
  --hero-from:#fdf3f6; --hero-to:#f8e2eb; --topbar-bg:rgba(253,246,248,.91);
  --motif:url(../assets/motif-bonecas.svg);
  --shadow:0 18px 55px rgba(110,45,70,.09);
}
.theme-verde {
  --ivory:#f6f7f2; --paper:#fcfdf9; --ink:#2f3a2d; --muted:#76806f; --line:#dfe5d7;
  --accent:#6f8f6a; --accent-dark:#4f6d4b; --accent-soft:#e3ecdf; --accent-rgb:111,143,106; --accent-line:#b9cbb2;
  --sage:#aebaa4; --sage-soft:#e9eee5; --blue:#c9d6c2; --blue-soft:#eef2ea; --gold:#c2a46a;
  --glow-1:rgba(174,190,160,.24); --glow-2:rgba(230,220,190,.28);
  --hero-from:#f7f8f2; --hero-to:#ebf0e5; --topbar-bg:rgba(246,247,242,.91);
  --motif:url(../assets/motif-folhas.svg);
  --shadow:0 18px 55px rgba(55,70,50,.09);
}

/* padrão ilustrado do tema (carrinhos, bonecas, folhas) atrás do título e na capa vazia */
.public-hero:before,.cover-box:not(.has-cover):before {
  content:'';
  position:absolute;
  inset:0;
  background-image:var(--motif);
  background-size:180px 140px;
  opacity:.55;
  pointer-events:none;
}
/* no topo o padrão some no centro para não competir com o nome do bebê */
.public-hero:before {
  -webkit-mask-image:radial-gradient(ellipse 46% 52% at 50% 50%,transparent 35%,#000 100%);
  mask-image:radial-gradient(ellipse 46% 52% at 50% 50%,transparent 35%,#000 100%);
}
.public-hero.with-cover:before { display:none; }
.cover-box { position:relative; }
.cover-placeholder { position:relative; z-index:1; }

/* seletor de tema no editor: cada opção aplica o próprio tema só a si mesma (prévia) */
.theme-picker { display:grid; gap:9px; margin-bottom:18px; }
.theme-picker > span { font-size:13px; font-weight:700; }
.theme-options { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
.theme-option {
  padding:0 0 10px;
  overflow:hidden;
  border:2px solid var(--line);
  border-radius:16px;
  display:grid;
  gap:3px;
  text-align:center;
  color:var(--ink);
  background:var(--paper);
  cursor:pointer;
  transition:.16s ease;
}
.theme-option:hover { border-color:var(--accent-line); }
.theme-option.active { border-color:var(--accent); box-shadow:0 0 0 3px rgba(var(--accent-rgb),.18); }
.theme-swatch {
  height:62px;
  margin-bottom:5px;
  background:var(--motif) 4px 2px/150px auto,linear-gradient(140deg,var(--hero-from),var(--hero-to));
  border-bottom:4px solid var(--accent);
}
.theme-option strong { font-size:13px; }
.theme-option small { color:var(--muted); font-size:11px; }
@media (max-width:390px) { .theme-option small { display:none; } }

.guest-banner {
  margin-bottom:22px;
  padding:16px 18px;
  border:1px solid var(--accent-line);
  border-radius:20px;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:14px;
  align-items:center;
  background:var(--accent-soft);
}
.guest-banner strong { display:block; margin-bottom:3px; font-size:14px; }
.guest-banner p { margin:0; color:var(--muted); font-size:13px; }
.guest-banner-icon {
  width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center;
  color:var(--accent-dark); background:var(--paper);
  font-family:var(--display); font-size:20px;
}
@media (max-width:680px) {
  .guest-banner { grid-template-columns:auto minmax(0,1fr); }
  .guest-banner .btn { grid-column:1 / -1; }
}
.save-modal { text-align:center; }
.save-modal h2 { margin:0; }

/* página pública: prévia do dono e "já comprei" do convidado */
.preview-bar {
  position:sticky; top:0; z-index:30;
  padding:10px 16px;
  display:flex; flex-wrap:wrap; gap:6px 12px; align-items:center; justify-content:center;
  color:#fff; background:var(--accent-dark);
  font-size:13px; text-align:center;
}
.preview-bar a { color:#fff; font-weight:800; }
.bought-link {
  width:100%; margin-top:10px; padding:6px 0;
  border:0; background:none; cursor:pointer;
  color:var(--accent-dark); font:inherit; font-size:13px; font-weight:700;
  text-decoration:underline; text-underline-offset:3px;
}
.bought-mine { margin:10px 0 0; color:var(--accent-dark); font-size:12px; font-weight:700; text-align:center; }
.gifted-done {
  padding:12px; border-radius:999px;
  color:var(--accent-dark); background:var(--accent-soft);
  font-size:13px; font-weight:800; text-align:center;
}
.bought-modal { max-height:calc(100vh - 32px); overflow:auto; }
.bought-modal h2 { margin:0 0 8px; }
.bought-modal .muted { font-size:14px; line-height:1.55; }
.bought-item {
  margin-bottom:18px; padding:10px;
  border:1px solid var(--line); border-radius:16px;
  display:grid; grid-template-columns:52px minmax(0,1fr); gap:12px; align-items:center;
  background:#fff;
}
.bought-item img { width:52px; height:52px; object-fit:contain; }
.bought-item span { overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; font-size:13px; font-weight:700; }
.bought-thanks { padding:10px 0 4px; text-align:center; }
.bought-heart {
  width:64px; height:64px; margin:0 auto 14px;
  border-radius:50%; display:grid; place-items:center;
  color:#fff; background:var(--accent); font-size:28px;
}
@media (min-width:681px) { .bought-modal { align-self:center; } }

/* editor: quem comprou cada presente */
.purchase-list { margin:6px 0 0; padding:0; list-style:none; display:grid; gap:4px; }
.purchase-list li {
  padding:6px 9px; border-radius:10px;
  color:var(--ink); background:var(--accent-soft);
  font-size:12px; line-height:1.4;
  white-space:normal;
}
.purchase-list small { color:var(--muted); font-size:11px; }
.purchase-list q { display:block; color:var(--muted); font-style:italic; }