/* ══════════════════════════════════════════
   TYPOGRAPHY
══════════════════════════════════════════ */
.eyebrow{display:in-flex;align-items:center;gap:12px;font-family:var(--ff-b);font-size:9.5px;letter-spacing:.45em;text-transform:uppercase;color:var(--g);font-weight:400;}
.eyebrow::before,.eyebrow::after{content:'';width:22px;height:1px;background:currentColor;opacity:.4;}
.eyebrow.c{display:flex;justify-content:center;}
.eyebrow.gold{color:var(--gold);}
.eyebrow.lt{color:var(--gold-lt);}
.eyebrow.lt::before,.eyebrow.lt::after{opacity:.35;}
.display{font-family:var(--ff-d);font-size:clamp(34px,5vw,64px);font-weight:300;color:var(--ink);line-height:1.06;}
.display em{font-style:italic;color:var(--g);}
.display.lgt{color:#fff;}.display.lgt em{color:var(--gold-lt);}

/* ══════════════════════════════════════════
   BUTTONS
══════════════════════════════════════════ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--ff-b);font-size:10px;letter-spacing:.3em;text-transform:uppercase;font-weight:400;padding:14px 36px;transition:all .3s;cursor:pointer;border:none;}
.btn-dk{background:var(--g);color:#fff;}.btn-dk:hover{background:var(--g2);}
.btn-g{background:var(--g);color:#fff;}.btn-g:hover{background:var(--g2);}
.btn-ol{background:transparent;color:var(--ink);border:1px solid rgba(0,0,0,.18);}.btn-ol:hover{border-color:var(--g);color:var(--g);}
.btn-ol-lt{background:transparent;color:rgba(255,255,255,.82);border:1px solid rgba(255,255,255,.28);}.btn-ol-lt:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.55);color:#fff;}
.btn-gold{background:var(--gold);color:#fff;}.btn-gold:hover{background:var(--gold-lt);}

/* ══════════════════════════════════════════
   PRODUCT CARD
══════════════════════════════════════════ */
.card{background:#fff;border:1px solid rgba(0,0,0,.06);cursor:pointer;transition:box-shadow .35s,transform .35s;position:relative;overflow:hidden;}
.card:hover{box-shadow:0 14px 44px rgba(0,0,0,.1);transform:translateY(-4px);}
.card-media{position:relative;overflow:hidden;background:var(--g-wash);aspect-ratio:1/1;}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.25,.46,.45,.94),opacity .4s;}
.img-alt{position:absolute;inset:0;opacity:0;transition:opacity .5s;}
.card:hover .img-alt{opacity:1;}.card:hover .img-main{opacity:0;}
.card:hover .card-media img{transform:scale(1.07);}
.card-ov{position:absolute;inset:0;background:linear-gradient(to top,rgba(12,10,8,.52) 0%,transparent 52%);opacity:0;transition:opacity .35s;display:flex;align-items:flex-end;justify-content:center;padding-bottom:18px;}
.card:hover .card-ov{opacity:1;}
.card-btn{background:rgba(253,251,247,.96);color:var(--g);padding:10px 22px;font-family:var(--ff-b);font-size:9px;letter-spacing:.28em;text-transform:uppercase;font-weight:500;transform:translateY(6px);opacity:0;transition:all .3s;border:none;cursor:pointer;}
.card:hover .card-btn{opacity:1;transform:translateY(0);}
.card-info{padding:16px 16px 20px;border-top:1px solid rgba(0,0,0,.05);}
.card-coll{font-size:9px;letter-spacing:.32em;text-transform:uppercase;color:var(--g);font-weight:400;margin-bottom:5px;}
.card-name{font-family:var(--ff-d);font-size:20px;font-weight:400;color:var(--ink);margin-bottom:2px;line-height:1.2;}
.card-type{font-size:11px;color:var(--muted);letter-spacing:.06em;}
.card-price{margin-top:10px;font-family:var(--ff-d);font-size:16px;color:var(--char);}
.card-price.rq{font-family:var(--ff-b);font-size:9px;letter-spacing:.25em;text-transform:uppercase;color:var(--gold);}

/* ══════════════════════════════════════════
   MODAL
══════════════════════════════════════════ */
/* ── MODAL ── */
.modal-bg {
  position: fixed; inset: 0; background: rgba(0,0,0,.78);
  z-index: 1000; display: flex; align-items: center; justify-content: center;
  padding: 20px; opacity: 0; pointer-events: none;
  transition: opacity .3s; backdrop-filter: blur(10px);
}
.modal-bg.open { opacity: 1; pointer-events: all; }

.modal-box {
  background: var(--ivory);
  max-width: 920px; width: 100%; max-height: 92vh;
  display: grid; grid-template-columns: 1.05fr 1fr;
  overflow: hidden;
  transform: scale(.96) translateY(18px);
  transition: transform .38s cubic-bezier(.34,1.56,.64,1);
}
.modal-bg.open .modal-box { transform: scale(1) translateY(0); }

/* ── LEFT: slider ── */
.modal-slider {
  position: relative;
  background: var(--g-wash);
  overflow: hidden;
  /* height controlled by right panel content */
  min-height: 420px;
}

/* Track holds all slides side by side */
.modal-track {
  display: flex;
  height: 100%;
  transition: transform .42s cubic-bezier(.77,0,.175,1);
  will-change: transform;
}
.modal-slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  min-height: 420px;
}
.modal-slide img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}

/* Prev / next arrows */
.modal-arr {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 5; width: 36px; height: 36px;
  background: rgba(255,255,255,.88); border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--char); font-size: 15px;
  opacity: 0; transition: opacity .25s, background .2s;
}
.modal-arr:hover { background: #fff; }
.modal-slider:hover .modal-arr { opacity: 1; }
.modal-arr.prev { left: 12px; }
.modal-arr.next { right: 12px; }

/* Dot indicators */
.modal-dots {
  position: absolute; bottom: 14px; left: 0; right: 0;
  display: flex; justify-content: center; gap: 6px; z-index: 5;
}
.modal-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(255,255,255,.4); border: none; cursor: pointer;
  padding: 0; transition: all .25s;
}
.modal-dot.on {
  background: #fff; width: 16px; border-radius: 3px;
}

/* Single-image: hide controls */
.modal-slider.single .modal-arr,
.modal-slider.single .modal-dots { display: none; }

/* ── RIGHT: detail ── */
.modal-detail {
  padding: 36px 32px;
  display: flex; flex-direction: column; gap: 12px;
  position: relative; overflow-y: auto;
}
.modal-x {
  position: absolute; top: 14px; right: 14px;
  color: var(--muted); width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(0,0,0,.1); transition: all .2s;
  background: none; cursor: pointer;
}
.modal-x:hover { border-color: var(--g); color: var(--g); }
.modal-tag   { font-size: 9px; letter-spacing: .4em; text-transform: uppercase; color: var(--g); font-weight: 400; }
.modal-title { font-family: var(--ff-d); font-size: 30px; font-weight: 300; color: var(--ink); line-height: 1.1; }
.modal-sub   { font-size: 12px; color: var(--muted); letter-spacing: .1em; text-transform: capitalize; }
.modal-rule  { height: 1px; background: rgba(0,0,0,.08); }
.modal-desc  { font-size: 13.5px; color: var(--mid); line-height: 1.85; }
.modal-plbl  { font-size: 9px; letter-spacing: .3em; text-transform: uppercase; color: var(--muted); margin-bottom: 3px; }
.modal-price { font-family: var(--ff-d); font-size: 24px; color: var(--char); }
.modal-price.rq { font-family: var(--ff-b); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
.modal-avail { font-size: 12px; color: var(--g); }
.modal-wa {
  width: 100%; padding: 15px; margin-top: auto;
  background: var(--g); color: #fff;
  font-family: var(--ff-b); font-size: 10px; letter-spacing: .3em;
  text-transform: uppercase; font-weight: 400;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  transition: background .3s; border: none; cursor: pointer;
}
.modal-wa:hover { background: var(--g2); }

/* ══════════════════════════════════════════
   FILTER BAR
══════════════════════════════════════════ */
.filter-bar{display:flex;gap:0;overflow-x:auto;border-bottom:1px solid rgba(0,0,0,.08);padding:0 56px;scrollbar-width:none;}
.filter-bar::-webkit-scrollbar{display:none;}
.fpill{padding:15px 22px;background:transparent;border:none;border-bottom:2px solid transparent;color:var(--muted);font-family:var(--ff-b);font-size:10px;letter-spacing:.22em;text-transform:uppercase;cursor:pointer;white-space:nowrap;transition:all .25s;font-weight:400;margin-bottom:-1px;}
.fpill:hover{color:var(--g);}.fpill.on{color:var(--g);border-bottom-color:var(--g);}

/* ══════════════════════════════════════════
   PAGE HERO (inner pages)
══════════════════════════════════════════ */
.page-hero{background:var(--g);padding:calc(var(--nav-h) + 72px) 56px 72px;position:relative;overflow:hidden;}
.page-hero::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 80% at 50% 50%,rgba(26,74,58,.18) 0%,transparent 70%);pointer-events:none;}
.page-hero .eyebrow{color:var(--gold-lt);}.page-hero .display{color:#fff;}.page-hero .display em{color:var(--gold-lt);}
.page-hero-sub{color:rgba(255,255,255,.44);font-size:14px;line-height:1.8;max-width:480px;margin-top:14px;position:relative;z-index:1;}