/* MiMano "Frasco" web theme: the single source for the Laravel site
   (landing page + public storefronts). Token names match the design system.
   Brand guide: https://claude.ai/artifact/AsiADUVXHMe9bU7vapsQGk */
@import url("https://fonts.googleapis.com/css2?family=Bitter:wght@600;700;800&family=Nunito+Sans:opsz,wght@6..12,400;6..12,600;6..12,700&display=swap");

:root {
  --kraft: #F4ECE0; --label: #FFFFFF; --label-line: #D9C7AE;
  --ink: #2A2420; --ink-muted: #6B6157;
  --leaf: #1F5A43; --leaf-tint: #E2F0E8;
  --guava: #D23A64; --guava-ink: #B82E55; --guava-tint: #FBE3EA;
  --sun: #F2B33D;
  --space-1: 4px; --space-2: 8px; --space-4: 16px; --space-6: 24px; --space-10: 40px;
  --radius-sm: 10px; --radius-md: 18px;
  --font-display: "Bitter", Georgia, serif;
  --font-sans: "Nunito Sans", system-ui, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--kraft); color: var(--ink); font: 400 17px/1.55 var(--font-sans); }
h1, h2, h3, .display { font-family: var(--font-display); color: var(--leaf); margin: 0; }
a { color: var(--guava-ink); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--leaf); outline-offset: 3px; }
.wrap { max-width: 1180px; margin: 0 auto; padding-inline: var(--space-6); }

/* Label card: the printed jar label with a double border */
.label-card { background: var(--label); border: 1.5px solid var(--label-line); border-radius: var(--radius-md);
  padding: var(--space-1); box-shadow: 0 2px 6px rgb(0 0 0 / .08); }
.label-card > .inner { border: 1px solid var(--label-line); border-radius: calc(var(--radius-md) - var(--space-1)); padding: var(--space-4); height: 100%; }

/* Buttons: one guava primary per view */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 52px;
  padding: 0 var(--space-6); border-radius: var(--radius-md); font: 700 18px/1 var(--font-sans); text-decoration: none; cursor: pointer; border: 0; }
.btn-primary { background: var(--guava); color: #fff; }
.btn-primary:hover { background: var(--guava-ink); }
.btn-secondary { background: var(--label); color: var(--leaf); border: 1.5px solid var(--label-line); }
.btn-block { width: 100%; }

/* Stamps: status always carries its word */
.stamp { display: inline-grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; border: 1.5px solid currentColor;
  font: 700 14px/1 var(--font-display); text-align: center; position: relative; }
.stamp::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; border: 1px solid currentColor; opacity: .45; }
.stamp-nuevo { color: var(--guava-ink); background: var(--guava-tint); }
.stamp-listo { color: var(--leaf); background: var(--leaf-tint); }
.stamp-agotado { color: var(--ink-muted); background: var(--kraft); }
.badge { display: inline-block; padding: 4px 10px; border-radius: 999px; font: 700 13px/1.3 var(--font-sans); }
.badge-nuevo { background: var(--guava-tint); color: var(--guava-ink); }
.badge-agotado { background: var(--kraft); color: var(--ink-muted); border: 1px solid var(--label-line); }

.price { font: 700 22px/1.2 var(--font-display); color: var(--guava-ink); }
.muted { color: var(--ink-muted); }

/* Inputs */
.field { display: grid; gap: 6px; font-weight: 600; }
.field input { min-height: 48px; padding: 0 14px; border: 1px solid var(--ink-muted); border-radius: var(--radius-sm); font: 400 17px var(--font-sans); background: var(--label); }
.choice { display: flex; gap: var(--space-4); align-items: center; padding: var(--space-4); border: 1.5px solid var(--label-line); border-radius: var(--radius-md); background: var(--label); cursor: pointer; }
.choice:has(input:checked) { border-color: var(--guava); background: var(--guava-tint); }
.choice input { accent-color: var(--guava); width: 22px; height: 22px; }

@media (prefers-reduced-motion: no-preference) {
  .btn { transition: background .15s ease-out; }
}