:root {
  --bg: #fbf4f1;
  --bg-2: #f7e6ea;
  --surface: #fffaf8;
  --ink: #3d2e35;
  --ink-soft: #7a6670;
  --rose: #f2c4d0;
  --rose-deep: #d98aa0;
  --lavender: #ddd2f0;
  --mint: #cdeadf;
  --peach: #fbdcc8;
  --gold-1: #b88a2e;
  --gold-2: #e9cf8a;
  --gold-3: #c9a24a;
  --silver-1: #9aa0a8;
  --silver-2: #e9ecef;
  --gold: linear-gradient(120deg, var(--gold-1), var(--gold-2) 45%, var(--gold-3) 70%, var(--gold-2));
  --silver: linear-gradient(120deg, #8f959d, #f4f6f8 45%, #b3b8bf 70%, #eef0f2);
  --shadow: 0 1px 2px rgb(120 70 90 / .06), 0 10px 30px -12px rgb(150 80 110 / .25);
  --shadow-lg: 0 2px 6px rgb(120 70 90 / .08), 0 24px 60px -20px rgb(150 80 110 / .38);
  --radius: 22px;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: "Jost", system-ui, sans-serif;
  font-weight: 400;
  color: var(--ink);
  background:
    radial-gradient(60rem 30rem at 10% -10%, var(--bg-2), transparent 60%),
    radial-gradient(50rem 30rem at 100% 0%, #efe7f7, transparent 60%),
    var(--bg);
  min-height: 100dvh;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }

/* ---------- Hero ---------- */
.hero {
  text-align: center;
  padding: clamp(40px, 8vw, 88px) 16px 24px;
  max-width: 900px;
  margin: 0 auto;
}
.hero__eyebrow {
  margin: 0 0 12px;
  font-size: 12px;
  letter-spacing: .28em;
  text-transform: uppercase;
  background: var(--gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 500;
}
.hero__title {
  font-family: "Cormorant Garamond", serif;
  font-weight: 600;
  font-size: clamp(42px, 8vw, 76px);
  line-height: 1;
  margin: 0;
  letter-spacing: -.01em;
}
.hero__title em {
  font-style: italic;
  font-weight: 500;
  color: var(--rose-deep);
}
.hero__lead {
  color: var(--ink-soft);
  font-weight: 300;
  font-size: clamp(15px, 2.2vw, 18px);
  margin: 16px auto 28px;
  max-width: 34ch;
  text-wrap: balance;
}

.filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.chip {
  border: 1px solid rgb(201 162 74 / .45);
  background: rgb(255 255 255 / .6);
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, transform .16s var(--ease-out);
  backdrop-filter: blur(6px);
}
.chip:hover { background: #fff; }
.chip:active { transform: scale(.97); }
.chip.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

/* ---------- Grid ---------- */
main { padding: 16px 16px 40px; }
.grid {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 1200px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
  gap: clamp(16px, 2.5vw, 28px);
}
@media (max-width: 520px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0;
  border: 0;
  text-align: left;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  cursor: pointer;
  overflow: hidden;
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
  animation: rise .5s var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 40ms);
}
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--gold);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: .45;
  pointer-events: none;
  z-index: 2;
}
.card--out::before { background: var(--silver); }
@media (hover: hover) {
  .card:not(.card--out):hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
  .card:not(.card--out):hover .card__img { transform: scale(1.04); }
}
.card:focus-visible { outline: 2px solid var(--gold-3); outline-offset: 3px; }

.card__media {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--tint, var(--bg-2));
}
.card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: multiply;
  transition: transform .5s var(--ease-out), filter .3s ease, opacity .3s ease;
}

.card__body { padding: 14px 16px 18px; display: grid; gap: 4px; }
.card__name {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(19px, 2.4vw, 23px);
  font-weight: 600;
  line-height: 1.15;
  margin: 0;
}
.card__price { font-weight: 500; font-size: 16px; font-variant-numeric: tabular-nums; margin: 0; }
.card__cat {
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0;
}

.stock {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  margin: 0;
  width: fit-content;
  padding: 4px 10px;
  border-radius: 999px;
}
.stock::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.stock--ok { color: #3e7d63; background: var(--mint); }
.stock--low { color: #a5612f; background: var(--peach); }
.stock--out { color: #6b7078; background: var(--silver-2); }
.card .stock { position: absolute; top: 10px; left: 10px; z-index: 1; backdrop-filter: blur(4px); }

/* ---------- Agotada ---------- */
.card--out { cursor: pointer; }
.card--out .card__img { filter: grayscale(1) contrast(.9); opacity: .45; }
.card--out .card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(255 255 255 / .15), rgb(255 255 255 / .55));
  backdrop-filter: blur(1px);
}
.card--out .card__name,
.card--out .card__price { color: var(--ink-soft); }
.card--out .card__price { text-decoration: line-through; text-decoration-color: rgb(122 102 112 / .5); }

.ribbon {
  position: absolute;
  z-index: 1;
  top: 22px;
  right: -44px;
  width: 170px;
  padding: 6px 0;
  text-align: center;
  transform: rotate(35deg);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #4b5058;
  background: var(--silver);
  box-shadow: 0 4px 12px -4px rgb(0 0 0 / .25);
}
.ribbon--lg { top: 32px; right: auto; left: -52px; width: 220px; font-size: 13px; padding: 8px 0; transform: rotate(-35deg); }

/* ---------- Preview ---------- */
.preview {
  border: 0;
  padding: 0;
  width: min(1000px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  border-radius: 28px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 40px 120px -30px rgb(90 40 60 / .5);
  overflow: auto;
  overscroll-behavior: contain;
}
.preview::backdrop {
  background: rgb(61 46 53 / .35);
  backdrop-filter: blur(6px);
}
.preview[open] { animation: pop-in .26s var(--ease-out); }
.preview[open]::backdrop { animation: fade .26s ease; }
.preview.is-closing { animation: pop-out .16s ease-in forwards; }
.preview.is-closing::backdrop { animation: fade .16s ease-in reverse forwards; }

.preview__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
}
@media (max-width: 760px) {
  .preview { width: 100vw; max-width: 100vw; max-height: 100dvh; height: 100dvh; border-radius: 0; margin: 0; }
  .preview__inner { grid-template-columns: 1fr; }
}
.preview__close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgb(255 255 255 / .85);
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: transform .16s var(--ease-out);
}
.preview__close:active { transform: scale(.94); }
.preview__close:focus { outline: none; }
.preview__close:focus-visible, .gallery__nav:focus-visible, .thumb:focus-visible, .btn-order:focus-visible, .chip:focus-visible { outline: 2px solid var(--gold-3); outline-offset: 2px; }

.gallery { padding: 16px; display: grid; gap: 12px; align-content: start; }
.gallery__stage {
  position: relative;
  aspect-ratio: 1;
  border-radius: 20px;
  overflow: hidden;
  background: var(--tint, var(--bg-2));
  touch-action: pan-y;
}
.gallery__stage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: multiply;
  transition: opacity .2s ease;
}
.gallery__stage img.is-swapping { opacity: 0; }
.is-out .gallery__stage img { filter: grayscale(1); opacity: .5; }
.is-out .gallery__stage img.is-swapping { opacity: 0; }

.gallery__nav {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgb(255 255 255 / .8);
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: transform .16s var(--ease-out), opacity .2s ease;
}
.gallery__nav:active { transform: scale(.94); }
.gallery__nav--prev { left: 12px; }
.gallery__nav--next { right: 12px; }

.gallery__thumbs { display: flex; gap: 10px; }
.thumb {
  flex: 1;
  max-width: 96px;
  aspect-ratio: 1;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 14px;
  overflow: hidden;
  background: var(--tint, var(--bg-2));
  cursor: pointer;
  opacity: .6;
  transition: opacity .2s ease, border-color .2s ease;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
.thumb[aria-selected="true"] { opacity: 1; border-color: var(--gold-3); }
.is-out .thumb img { filter: grayscale(1); }

.info { padding: 40px 32px 32px 16px; display: flex; flex-direction: column; gap: 12px; }
@media (max-width: 760px) { .info { padding: 4px 20px 32px; } }
.info__cat { margin: 0; font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: var(--ink-soft); }
.info__title {
  font-family: "Cormorant Garamond", serif;
  font-weight: 600;
  font-size: clamp(34px, 5vw, 46px);
  line-height: 1;
  margin: 0;
}
.info__price {
  margin: 0;
  font-size: 26px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  background: var(--gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  width: fit-content;
}
.is-out .info__price { background: none; color: var(--silver-1); text-decoration: line-through; text-decoration-thickness: 1px; }
.info__desc { margin: 4px 0 8px; color: var(--ink-soft); font-weight: 300; line-height: 1.6; }
.info__note { margin: 0; font-size: 13px; color: var(--ink-soft); }

.btn-order {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: auto;
  padding: 16px 24px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 500;
  color: #fff;
  background: linear-gradient(120deg, #d98aa0, #c97b93 50%, #b88a2e);
  box-shadow: 0 10px 24px -10px rgb(185 100 130 / .7);
  transition: transform .16s var(--ease-out), box-shadow .2s ease, filter .2s ease;
}
@media (hover: hover) { .btn-order:hover { filter: brightness(1.05); box-shadow: 0 14px 30px -10px rgb(185 100 130 / .8); } }
.btn-order:active { transform: scale(.97); }
.btn-order[aria-disabled="true"] {
  pointer-events: none;
  background: var(--silver);
  color: #5d636b;
  box-shadow: none;
}

/* ---------- Footer ---------- */
.footer { text-align: center; padding: 24px 16px 48px; color: var(--ink-soft); font-size: 14px; }
.footer__line { display: block; width: 80px; height: 1px; margin: 0 auto 16px; background: var(--gold); }

/* ---------- Motion ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }
@keyframes pop-in { from { opacity: 0; transform: scale(.96) translateY(8px); } }
@keyframes pop-out { to { opacity: 0; transform: scale(.97); } }
@keyframes fade { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; transition-duration: .01ms !important; }
}