/* ============================================================
   FRAGRANCIA LUXO - Modern luxury design system
   Emerald · Gold · Cream  |  Marcellus + Jost
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Marcellus&family=Jost:ital,wght@0,300;0,400;0,500;0,600;1,400&display=swap');

:root {
  /* Palette */
  --emerald-950: #0c1a16;
  --emerald-900: #0e1f1a;
  --emerald-800: #143028;
  --emerald-700: #1f4f43;
  --emerald-600: #2c6657;
  --gold:        #caa64a;
  --gold-soft:   #d9bd76;
  --gold-deep:   #a8842f;
  --cream:       #ede5d2;
  --paper:       #f6f2e9;
  --paper-2:     #efe8da;
  --ink:         #16130d;
  --ink-soft:    #4a4439;
  --line:        rgba(22,19,13,0.12);
  --line-light:  rgba(237,229,210,0.16);

  /* Accent (tweakable) */
  --accent:      var(--gold);
  --accent-deep: var(--gold-deep);

  /* Type */
  --display: 'EB Garamond', 'Times New Roman', serif;
  --body: 'Jost', system-ui, sans-serif;

  /* Spacing rhythm */
  --pad: clamp(20px, 5vw, 88px);
  --maxw: 1320px;

  --shadow-sm: 0 1px 2px rgba(12,26,22,0.06), 0 4px 16px rgba(12,26,22,0.04);
  --shadow-md: 0 8px 40px rgba(12,26,22,0.10);
  --shadow-lg: 0 24px 80px rgba(12,26,22,0.18);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--body);
  background: var(--paper);
  color: var(--ink);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
input, select, textarea { font-family: inherit; font-size: inherit; }

/* ---------- Typography helpers ---------- */
.display { font-family: var(--display); font-weight: 400; line-height: 1.04; letter-spacing: -0.01em; }
.eyebrow {
  font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase;
  font-weight: 500; color: var(--accent-deep);
}
.eyebrow.on-dark { color: var(--gold-soft); }
.serif-italic { font-family: var(--display); font-style: italic; }

/* ---------- Layout ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--pad); }
.section { padding-block: clamp(56px, 8vw, 120px); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--body); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
  font-weight: 500; padding: 16px 32px; border-radius: 4px;
  transition: all .35s cubic-bezier(.2,.7,.2,1); white-space: nowrap;
}
/* Shape system: filled actions = pill, secondary = soft, utility = sharp */
.btn-primary { background: var(--emerald-900); color: var(--paper); border-radius: 999px; }
.btn-primary:hover { background: var(--emerald-700); transform: translateY(-1px); box-shadow: 0 10px 26px rgba(12,26,22,0.18); }
.btn-gold { background: var(--accent); color: var(--emerald-950); border-radius: 999px; }
.btn-gold:hover { background: var(--gold-soft); transform: translateY(-1px); box-shadow: 0 10px 26px rgba(168,132,47,0.28); }
.btn-outline { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); border-radius: 8px; }
.btn-outline:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.btn-outline.on-dark { color: var(--paper); box-shadow: inset 0 0 0 1px var(--line-light); }
.btn-outline.on-dark:hover { box-shadow: inset 0 0 0 1px var(--gold-soft); color: var(--gold-soft); }
.btn-sharp { border-radius: 0; }
.btn-block { width: 100%; }
.btn-lg { padding: 19px 42px; }

.link-underline {
  position: relative; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 500;
  padding-bottom: 4px;
}
.link-underline::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: currentColor; transform: scaleX(1); transform-origin: left; transition: transform .4s;
}
.link-underline:hover::after { transform: scaleX(0); transform-origin: right; }

/* ---------- Pills / tags ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500;
  padding: 6px 12px; border-radius: 999px;
}
.pill-gold { background: rgba(202,166,74,0.16); color: var(--gold-deep); }
.pill-emerald { background: rgba(31,79,67,0.12); color: var(--emerald-700); }
.pill-dark { background: var(--emerald-900); color: var(--gold-soft); }
.pill-rose { background: rgba(150,58,58,0.12); color: #963a3a; }

/* ---------- Product card ---------- */
.card {
  display: flex; flex-direction: column; position: relative;
  background: transparent;
}
.card-media {
  position: relative; aspect-ratio: 3/4; overflow: hidden;
  background: linear-gradient(160deg, #f2ecdd 0%, #e7ddc8 100%);
}
.card-media .bottle { transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.card:hover .card-media .bottle { transform: translateY(-6px) scale(1.03); }
.card-badges { position: absolute; top: 14px; left: 14px; display: flex; flex-direction: column; gap: 6px; z-index: 2; }
.card-fav {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; background: rgba(246,242,233,0.7);
  backdrop-filter: blur(6px); transition: all .3s; color: var(--ink-soft);
}
.card-fav:hover { background: var(--paper); color: var(--emerald-700); }
.card-fav.active { color: #b03a3a; }
.card-quickadd {
  position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 2;
  opacity: 0; transform: translateY(8px); transition: all .4s cubic-bezier(.2,.7,.2,1);
}
.card:hover .card-quickadd { opacity: 1; transform: translateY(0); }
.card-body { padding-top: 16px; display: flex; flex-direction: column; gap: 4px; }
.card-brand { font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent-deep); font-weight: 500; }
.card-name { font-family: var(--display); font-size: 17px; line-height: 1.2; }
.card-meta { font-size: 12px; color: var(--ink-soft); letter-spacing: 0.02em; }
.card-price { margin-top: 8px; display: flex; align-items: baseline; gap: 8px; }
.card-price .now { font-size: 16px; font-weight: 500; }
.card-price .was { font-size: 12.5px; color: var(--ink-soft); text-decoration: line-through; }
.card-pix { font-size: 11.5px; color: var(--emerald-700); margin-top: 2px; }

/* ---------- Image placeholder (empty state) ---------- */
.bottle {
  width: 100%; height: 100%; display: grid; place-items: center; position: relative;
  padding: 12%;
}
.ph-inner {
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  text-align: center; color: var(--ink-soft);
}
.ph-icon { width: 34px; height: 34px; color: var(--gold-deep); opacity: 0.55; }
.ph-brand { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent-deep); font-weight: 500; }
.ph-name { font-family: var(--display); font-size: 17px; line-height: 1.15; color: var(--ink-soft); max-width: 90%; }

/* ---------- Forms ---------- */
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); font-weight: 500; }
.field input, .field select, .field textarea {
  background: var(--paper); border: 1px solid var(--line); padding: 14px 16px; color: var(--ink);
  border-radius: 2px; transition: border-color .25s;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--emerald-700); }
.field input::placeholder { color: rgba(74,68,57,0.5); }

/* ---------- Utility ---------- */
.muted { color: var(--ink-soft); }
.divider { height: 1px; background: var(--line); border: none; }
.center { text-align: center; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

::selection { background: var(--emerald-900); color: var(--gold-soft); }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(22,19,13,0.2); border-radius: 99px; border: 3px solid var(--paper); }
::-webkit-scrollbar-track { background: transparent; }