:root {
  --dark-green: #131F17; --deep: #0c150f; --gold: #755833; --gold-light: #CDA866; --cream: #E5DECC;
  --muddy-green: #90BE7A; --red: #8E4738; --brown: #2C251A; --salmon: #C49674; --line: rgba(205,168,102,.22);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: var(--dark-green); color: var(--cream); font-family: 'Playfair Display', Georgia, serif; letter-spacing: .02em; line-height: 1.5; }
a { color: var(--gold-light); }
button, input, select, textarea { font: inherit; color: inherit; }
.label, .btn, .pill, th, .price, .qty button, nav a { font-family: 'Oswald', 'Arial Narrow', sans-serif; letter-spacing: .12em; text-transform: uppercase; }
[data-lang] { display: none; }
.lang-es [data-lang="es"], .lang-en [data-lang="en"] { display: inline; }

/* header */
header.top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .8rem clamp(1rem, 4vw, 3rem); background: rgba(19,31,23,.94); backdrop-filter: blur(6px); border-bottom: 1px solid var(--line); }
header.top img { height: 38px; display: block; }
header.top nav { display: flex; align-items: center; gap: .6rem; }
header.top nav a { font-size: .72rem; text-decoration: none; opacity: .8; }
.lang button { background: none; border: 1px solid var(--gold); padding: .2rem .5rem; font-size: .7rem; cursor: pointer; font-family: 'Oswald', sans-serif; }
.lang button.active { background: var(--gold); }
.cart-btn { background: var(--gold-light); color: var(--dark-green); border: 0; padding: .55rem .9rem; font-size: .75rem; cursor: pointer; }
.cart-btn b { display: inline-block; min-width: 1.4em; margin-left: .3rem; background: var(--dark-green); color: var(--gold-light); border-radius: 99px; padding: 0 .35em; }

/* hero */
.hero { text-align: center; padding: clamp(2.5rem, 7vw, 5rem) 1rem 2rem; }
.hero .label { color: var(--gold-light); font-size: .75rem; }
.hero h1 { font-style: italic; font-weight: 400; font-size: clamp(2rem, 5vw, 3.4rem); margin: .6rem 0; }
.hero p { max-width: 560px; margin: 0 auto; opacity: .75; font-style: italic; }
.cats { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; margin-top: 1.6rem; }
.cats a { border: 1px solid var(--line); padding: .35rem .8rem; font-size: .7rem; text-decoration: none; color: var(--cream); font-family: 'Oswald', sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.cats a:hover { border-color: var(--gold-light); }

/* banners */
.banner { max-width: 1100px; margin: 1rem auto; padding: .9rem 1.2rem; border: 1px solid var(--gold-light); background: rgba(205,168,102,.08); }
.banner.err { border-color: var(--salmon); background: rgba(142,71,56,.25); }

/* catalog */
main { padding: 0 clamp(1rem, 4vw, 3rem) 6rem; }
section.cat { max-width: 1100px; margin: 3.5rem auto 0; }
section.cat h2 { font-style: italic; font-weight: 400; font-size: clamp(1.5rem, 3vw, 2.1rem); color: var(--gold-light); }
section.cat .note { margin-top: .4rem; opacity: .75; font-size: .92rem; max-width: 760px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.2rem; margin-top: 1.4rem; }
.card { border: 1px solid var(--line); background: rgba(12,21,15,.55); display: flex; flex-direction: column; }
.card .img { aspect-ratio: 4/3; background: var(--cream); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.card .img img { width: 100%; height: 100%; object-fit: contain; }
.card .body { padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.card h3 { font-style: italic; font-weight: 400; font-size: 1.15rem; }
.card .desc { font-size: .85rem; opacity: .72; flex: 1; }
.card .row { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
.price { font-size: 1rem; color: var(--gold-light); }
.price s { opacity: .5; font-size: .8rem; margin-right: .4rem; color: var(--cream); }
.pill { font-size: .6rem; padding: .15rem .45rem; background: var(--red); color: var(--cream); align-self: flex-start; }
select { background: var(--deep); border: 1px solid var(--line); padding: .45rem .5rem; width: 100%; }
.btn { background: var(--gold); border: 1px solid var(--gold); color: var(--cream); padding: .55rem .9rem; font-size: .72rem; cursor: pointer; }
.btn:hover { background: var(--gold-light); color: var(--dark-green); }
.btn.ghost { background: none; }
.btn.block { width: 100%; padding: .85rem; font-size: .8rem; }
.btn:disabled { opacity: .5; cursor: wait; }
.added { outline: 1px solid var(--muddy-green); }

/* drawer */
.scrim { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 30; }
aside.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(460px, 100%); background: var(--deep); z-index: 31;
  border-left: 1px solid var(--line); display: flex; flex-direction: column; }
.drawer header { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.2rem; border-bottom: 1px solid var(--line); }
.drawer header h2 { font-style: italic; font-weight: 400; font-size: 1.3rem; }
.drawer .x { background: none; border: 0; font-size: 1.6rem; cursor: pointer; line-height: 1; }
.drawer .scroll { overflow-y: auto; padding: 1rem 1.2rem 2rem; flex: 1; }
.line { display: grid; grid-template-columns: 1fr auto; gap: .2rem .8rem; padding: .7rem 0; border-bottom: 1px solid var(--line); font-size: .9rem; }
.line .sub { font-size: .75rem; opacity: .65; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line); }
.qty button { background: none; border: 0; width: 1.9rem; height: 1.8rem; cursor: pointer; }
.qty span { min-width: 1.6rem; text-align: center; font-family: 'Oswald', sans-serif; }
.totals { margin: 1rem 0; font-size: .9rem; }
.totals div { display: flex; justify-content: space-between; padding: .15rem 0; }
.totals .grand { font-size: 1.1rem; color: var(--gold-light); border-top: 1px solid var(--line); margin-top: .4rem; padding-top: .5rem; }
form.co { display: grid; gap: .7rem; margin-top: 1rem; }
form.co label { display: grid; gap: .25rem; font-size: .78rem; opacity: .9; }
form.co input, form.co textarea { background: var(--dark-green); border: 1px solid var(--line); padding: .55rem .6rem; }
form.co input:focus, form.co textarea:focus, select:focus { outline: 1px solid var(--gold-light); }
form.co .bad { border-color: var(--salmon); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.methods { display: grid; gap: .5rem; }
form.co .method { display: flex; gap: .6rem; align-items: flex-start; border: 1px solid var(--line); padding: .7rem; cursor: pointer; }
.method input { margin-top: .3rem; }
.small { font-size: .78rem; opacity: .7; }
.msg { padding: .7rem .8rem; font-size: .85rem; border: 1px solid var(--salmon); background: rgba(142,71,56,.25); }
.ok { border-color: var(--muddy-green); background: rgba(144,190,122,.1); }
.hp { position: absolute; left: -9999px; }
footer { text-align: center; padding: 3rem 1rem; opacity: .6; font-size: .8rem; border-top: 1px solid var(--line); }
@media (max-width: 520px) { .two { grid-template-columns: 1fr; } header.top nav a.back { display: none; } }
.pay { margin-top: 1rem; padding: 1rem; border: 1px solid var(--line); display: grid; gap: .4rem; justify-items: center; text-align: center; }
.pay .qr { width: 220px; max-width: 100%; background: #fff; padding: .5rem; }
.pill.gold { background: var(--gold-light); color: var(--dark-green); }
.card.feat, .card.wide { grid-column: 1 / -1; flex-direction: row; }
.card.feat { border-color: var(--gold-light); }
.card.feat .img, .card.wide .img { flex: 1 1 55%; aspect-ratio: auto; min-height: 300px; }
.card.feat .body, .card.wide .body { flex: 1 1 45%; padding: 2rem; justify-content: center; }
.card.feat h3 { font-size: clamp(1.6rem, 3vw, 2.2rem); color: var(--gold-light); }
.card.feat .desc, .card.wide .desc { font-size: .98rem; flex: 0; }
.card.wide h3 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
.card.feat .price { font-size: 1.3rem; }
@media (max-width: 720px) { .card.feat, .card.wide { flex-direction: column; } .card.feat .img, .card.wide .img { min-height: 0; aspect-ratio: 3/2; } .card.feat .body, .card.wide .body { padding: 1.2rem; } }
.dates-title { margin-top: 1rem; }
.dates { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: .35rem; margin-top: .4rem; max-height: 250px; overflow-y: auto; padding: 2px; }
.date { border: 1px solid var(--line); background: var(--dark-green); padding: .4rem .2rem; cursor: pointer; text-align: center; line-height: 1.15; font-family: 'Oswald', 'Arial Narrow', sans-serif; letter-spacing: .06em; }
.date .wd { font-size: .6rem; text-transform: uppercase; opacity: .7; }
.date .dn { font-size: 1.05rem; display: block; }
.date .mo { font-size: .6rem; text-transform: uppercase; }
.date .left { display: block; font-size: .55rem; margin-top: .15rem; color: var(--salmon); text-transform: uppercase; }
.date.sel { border-color: var(--gold-light); background: var(--gold); }
.date:disabled { opacity: .35; cursor: not-allowed; text-decoration: line-through; }
.dates-note { margin-top: .4rem; color: var(--gold-light); opacity: .9; }
.totals .napa { color: var(--muddy-green); }
.card .img.photo { background: #111a13; position: relative; }
.card.wide .img.photo { aspect-ratio: 3 / 2; min-height: 0; }
.card .img.photo > img.main { object-fit: cover; }
.card.wide .img.photo > img.main { object-fit: contain; background: #111a13; }
.thumbs { position: absolute; left: .6rem; bottom: .6rem; display: flex; gap: .35rem; }
.thumb { width: 54px; height: 38px; padding: 0; border: 1px solid var(--line); background: #0e1510; cursor: pointer; opacity: .65; }
.thumb.on { opacity: 1; border-color: var(--gold-light); }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
[hidden] { display: none !important; }