:root{
  --bg:#0E0E0E;
  --text:#F5F5F5;
  --wine:#5A0B0B;
  --meat:#7A1414;
  --gold:#D4AF37;
  --goldSoft:#C9A227;
  --card:rgba(255,255,255,.03);
  --card2:rgba(255,255,255,.06);
  --hair:rgba(212,175,55,.22);
  --hair2:rgba(212,175,55,.32);
}
*{box-sizing:border-box}
html{color-scheme:dark}
[hidden]{display:none !important}
html.menuOpen{overflow:hidden}
@media (prefers-reduced-motion: no-preference){
  html{scroll-behavior:smooth}
}
body{
  margin:0;
  font-family: "Libre Baskerville", ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  overflow-x:hidden;
  background:
    radial-gradient(1200px 800px at 15% -10%, rgba(90,11,11,.65) 0%, transparent 55%),
    radial-gradient(900px 700px at 90% 0%, rgba(122,20,20,.45) 0%, transparent 60%),
    var(--bg);
  color:var(--text);
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.16;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  z-index:0;
}
a{color:inherit;text-decoration:none}
main{position:relative;z-index:1;min-height:70vh}

@keyframes floatIn{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:translateY(0)}
}
@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important}
}
a{color:inherit;text-decoration:none}
.wrap{max-width:1120px;margin:0 auto;padding:0 18px}
.hdr{position:sticky;top:0;z-index:50;border-bottom:1px solid rgba(255,255,255,.06);background:rgba(14,14,14,.60);backdrop-filter: blur(16px)}
.hdr__inner{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 0}
.brand{min-width:0}
.brand__name{font-family:"Cinzel", serif;font-size:18px;letter-spacing:.22em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand__sub{margin-top:6px;font-size:10px;letter-spacing:.32em;text-transform:uppercase;color:rgba(212,175,55,.80);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav{display:none;gap:24px}
.nav__a{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:rgba(245,245,245,.70);transition:.25s}
.nav__a:hover{color:var(--gold)}
.hdr__right{display:flex;align-items:center;gap:10px}
.chip{position:relative;display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;background:var(--card2);box-shadow:inset 0 0 0 1px var(--hair);transition:.25s;will-change:transform}
.chip:hover{box-shadow:inset 0 0 0 1px var(--hair2);color:var(--gold)}
.chip:hover{transform:translateY(-1px)}
.chip__txt{font-size:11px;letter-spacing:.18em;text-transform:uppercase}
.chip__badge{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;border-radius:999px;background:var(--gold);color:#000;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;padding:0 5px}
.menuBtn{display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 14px;border-radius:999px;border:0;background:var(--card2);color:rgba(245,245,245,.80);box-shadow:inset 0 0 0 1px var(--hair);cursor:pointer;font-size:11px;letter-spacing:.18em;text-transform:uppercase}
.menuBtn:hover{color:var(--gold);box-shadow:inset 0 0 0 1px var(--hair2)}
.menuBtn[aria-expanded="true"]{color:var(--gold);box-shadow:inset 0 0 0 1px var(--hair2)}
.navOverlay{position:fixed;inset:0;z-index:45;border:0;padding:0;margin:0;background:rgba(0,0,0,.55);backdrop-filter:blur(2px)}
.mobileNav{margin:10px 0 14px;padding:6px 0;border-radius:18px;background:rgba(14,14,14,.94);box-shadow:0 26px 70px rgba(0,0,0,.45), inset 0 0 0 1px rgba(212,175,55,.18);display:grid;gap:0;position:relative;z-index:50;overflow:hidden}
.mobileNav .nav__a{display:flex;align-items:center;justify-content:flex-start;padding:14px 18px;font-family:"Cinzel", serif;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:rgba(245,245,245,.86);background:transparent;box-shadow:none;border-radius:0;border-bottom:1px solid rgba(212,175,55,.10)}
.mobileNav .nav__a:hover{background:rgba(212,175,55,.06);color:rgba(245,245,245,.95)}
.mobileNav .nav__a:last-child{border-bottom:0}

.hero{position:relative;overflow:hidden}
.hero__bg{position:absolute;inset:0;background:
  radial-gradient(900px 520px at 50% 0%, rgba(90,11,11,.86) 0%, transparent 62%),
  linear-gradient(180deg, rgba(14,14,14,.05), rgba(14,14,14,.96));
}
.hero__inner{position:relative;padding:68px 0 56px;text-align:center;animation:floatIn .75s cubic-bezier(.22,1,.36,1) both}
.hero__h1{font-family:"Cinzel", serif;max-width:860px;margin:0 auto;font-size:40px;letter-spacing:-.01em}
.hero__p{max-width:720px;margin:18px auto 0;font-size:14px;line-height:1.9;color:rgba(245,245,245,.76)}
.btns{display:flex;flex-direction:column;gap:10px;align-items:center;justify-content:center;margin-top:22px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:999px;padding:12px 18px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;transition:.25s;will-change:transform}
.btn--gold{background:var(--gold);color:#000}
.btn--gold:hover{background:var(--goldSoft);box-shadow:0 14px 44px rgba(212,175,55,.18);transform:translateY(-1px)}
.btn--out{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1px var(--hair)}
.btn--out:hover{color:var(--gold);box-shadow:inset 0 0 0 1px var(--hair2);transform:translateY(-1px)}
.btn:focus-visible{outline:none;box-shadow:0 0 0 2px rgba(212,175,55,.25), inset 0 0 0 1px var(--hair2)}

.grid3{display:grid;gap:12px;margin-top:34px}
.card{border-radius:18px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px var(--hair);padding:16px;transition:.35s;will-change:transform}
.card:hover{box-shadow:inset 0 0 0 1px var(--hair2), 0 26px 70px rgba(0,0,0,.35);transform:translateY(-2px)}
.card__ey{font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:rgba(212,175,55,.82)}
.card__t{font-family:"Cinzel", serif;margin-top:8px;font-size:18px}
.card__d{margin-top:8px;font-size:13px;line-height:1.7;color:rgba(245,245,245,.70)}

.sec{padding:44px 0;animation:floatIn .7s cubic-bezier(.22,1,.36,1) both}
.sec__ey{display:flex;gap:10px;align-items:center;font-size:10px;letter-spacing:.32em;text-transform:uppercase;color:rgba(212,175,55,.82)}
.sec__line{height:1px;width:28px;background:rgba(212,175,55,.35)}
.sec__h2{font-family:"Cinzel", serif;margin:10px 0 0;font-size:30px}
.sec__desc{margin:12px 0 0;max-width:720px;font-size:13px;line-height:1.9;color:rgba(245,245,245,.75)}

.filters{margin-top:18px;display:grid;gap:12px}
.inp,.sel,.ta{
  width:100%;border-radius:14px;padding:12px 14px;
  background:var(--card2);color:var(--text);
  border:1px solid transparent;box-shadow:inset 0 0 0 1px var(--hair);
}
.inp:focus,.sel:focus,.ta:focus{outline:none;box-shadow:inset 0 0 0 1px var(--hair2)}
.prodGrid{display:grid;gap:14px;margin-top:18px}
.prod{border-radius:18px;overflow:hidden;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px var(--hair);transition:.35s;will-change:transform}
.prod:hover{box-shadow:inset 0 0 0 1px var(--hair2), 0 26px 70px rgba(0,0,0,.35);transform:translateY(-2px)}
.prod__img{aspect-ratio:16/10;background:#111;display:block;width:100%;object-fit:cover;transition:transform .8s cubic-bezier(.22,1,.36,1);will-change:transform}
.prod:hover .prod__img{transform:scale(1.045)}
.prod__body{padding:14px}
.prod__cat{display:inline-flex;border-radius:999px;padding:6px 10px;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:rgba(212,175,55,.86);background:rgba(14,14,14,.55);box-shadow:inset 0 0 0 1px var(--hair)}
.prod__name{font-family:"Cinzel", serif;margin-top:10px;font-size:18px}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.tag{border-radius:999px;padding:6px 10px;font-size:10px;letter-spacing:.20em;text-transform:uppercase;color:rgba(245,245,245,.70);background:rgba(14,14,14,.35);box-shadow:inset 0 0 0 1px rgba(212,175,55,.14)}
.prod__desc{margin-top:10px;font-size:13px;line-height:1.7;color:rgba(245,245,245,.70)}
.prod__actions{margin-top:14px;display:flex;gap:10px;align-items:center;justify-content:space-between}
.link{font-size:11px;letter-spacing:.20em;text-transform:uppercase;color:rgba(245,245,245,.75)}
.link:hover{color:var(--gold)}

.waFab{position:fixed;right:16px;bottom:16px;z-index:60;width:56px;height:56px;border-radius:999px;background:var(--gold);color:#000;display:flex;align-items:center;justify-content:center;font-weight:800;box-shadow:0 18px 55px rgba(0,0,0,.55);transition:.25s}
.waFab:hover{background:var(--goldSoft);transform:scale(1.03)}

.center{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:65vh;
}
.centerCard{
  width:100%;
  max-width:680px;
  text-align:center;
  padding:28px 22px;
  border-radius:22px;
  background:rgba(255,255,255,.04);
  box-shadow:inset 0 0 0 1px var(--hair);
}
.centerCard__ey{
  font-size:10px;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:rgba(212,175,55,.82);
}
.centerCard__h{
  margin-top:10px;
  font-family:"Cinzel", serif;
  font-size:40px;
}
.centerCard__p{
  margin-top:12px;
  font-size:13px;
  line-height:1.9;
  color:rgba(245,245,245,.75);
}
.centerCard__btns{margin-top:18px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

.ftr{border-top:1px solid rgba(255,255,255,.06);margin-top:48px}
.ftr__inner{padding:34px 0;display:grid;gap:10px}
.ftr__brand{letter-spacing:.14em;text-transform:uppercase;color:rgba(245,245,245,.80)}
.ftr__txt{font-size:13px;color:rgba(245,245,245,.70)}
.ftr__links{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:rgba(245,245,245,.55)}
.ftr__links a:hover{color:var(--gold)}
.ftr__copy{font-size:11px;color:rgba(245,245,245,.50)}

@media(min-width: 760px){
  .nav{display:flex}
  .menuBtn{display:none}
  .mobileNav{display:none}
  .btns{flex-direction:row}
  .grid3{grid-template-columns:repeat(3,1fr)}
  .filters{grid-template-columns:1.3fr repeat(4,1fr) auto;align-items:end}
  .prodGrid{grid-template-columns:repeat(3,1fr)}
  .hero__h1{font-size:54px}
  .centerCard{padding:34px 28px}
}

@media(max-width: 759px){
  .hdr{position:relative}
  .brand__sub{display:none}
  .hdr__inner{gap:10px;padding:12px 0;position:relative;z-index:55}
  .brand{flex:1 1 auto;max-width:60vw;overflow:hidden}
  .brand__name{font-size:clamp(12px, 3.8vw, 14px);letter-spacing:.10em}
  .hdr__right{flex:0 0 auto;gap:8px}
  .chip{padding:10px 12px}
  .chip__txt{letter-spacing:.14em}
  .chip__badge{top:-5px;right:-5px}

  .menuBtn{width:44px;padding:0;font-size:0;letter-spacing:0;position:relative;z-index:56}
  .menuBtn::before,.menuBtn::after{content:"";position:absolute;left:14px;right:14px;height:2px;background:currentColor;border-radius:2px;transition:transform .22s ease, opacity .22s ease}
  .menuBtn::before{top:16px}
  .menuBtn::after{bottom:16px}
  .menuBtn{background-image:linear-gradient(currentColor,currentColor);background-size:calc(100% - 28px) 2px;background-position:center;background-repeat:no-repeat}
  .menuBtn[aria-expanded="true"]{background-image:none}
  .menuBtn[aria-expanded="true"]::before{transform:translateY(6px) rotate(45deg)}
  .menuBtn[aria-expanded="true"]::after{transform:translateY(-6px) rotate(-45deg)}

  .mobileNav{animation:floatIn .18s cubic-bezier(.22,1,.36,1) both}
}

@media(max-width: 420px){
  .brand__name{font-size:13px;letter-spacing:.12em}
  .hero__h1{font-size:34px}
  .sec__h2{font-size:26px}
}