:root{
  --onyx:#07070609;
  --onyx:#070706;
  --onyx-2:#0e0d0a;
  --ivory:#f3eee2;
  --gold:#c6a15b;
  --gold-soft:#e6d3a3;
  --ember:#7c4536;
  --stone:#a29a8a;
  --hair: rgba(198,161,91,.25);
  --serif: 'Cormorant Garamond', serif;
  --sans: 'Jost', sans-serif;
}

/* CSP-safe visibility utility — inline style attributes are blocked by our
   Content-Security-Policy, so show/hide is done with this class instead. */
.is-hidden{display:none !important;}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--onyx);
  color:var(--ivory);
  font-family:var(--sans);
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%; display:block;}
/* Logo art is supplied at 2x; let the browser downscale smoothly rather
   than snapping to whole pixels, which is what made it look soft before. */
.mono-img, .name-img, .tagline-img, .nav-mark img, .footer-tagline, .statement-mark{
  image-rendering:auto;
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
  transform:translateZ(0);
}
a{color:inherit; text-decoration:none;}

.grain{
  position:fixed; inset:0; pointer-events:none; z-index:2; opacity:.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- NAV ---------- */
#site-nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  transition:background .5s ease, border-color .5s ease, backdrop-filter .5s ease;
  border-bottom:1px solid transparent;
}
#site-nav.scrolled{
  background:rgba(7,7,6,.78);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--hair);
}
.nav-inner{
  max-width:1240px; margin:0 auto; padding:18px 32px;
  display:flex; align-items:center; justify-content:space-between;
}
.nav-mark{display:flex; align-items:center; gap:10px;}
.nav-mark img{width:26px; height:auto; opacity:.95;}
.nav-mono{width:28px; height:28px; display:block; color:var(--gold); flex:0 0 auto;}
.nav-mono svg{width:100%; height:100%; display:block;}
.nav-mark span{font-family:var(--serif); font-size:1.15rem; letter-spacing:.04em; color:var(--gold);}
.nav-links{list-style:none; display:flex; gap:36px; margin:0; padding:0;}
.nav-links a{
  font-size:.86rem; letter-spacing:.06em; color:var(--stone);
  position:relative; padding-bottom:4px; transition:color .35s ease;
}
.nav-links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px; background:var(--gold);
  transition:right .4s cubic-bezier(.22,.61,.36,1);
}
.nav-links a:hover{color:var(--ivory);}
.nav-links a.active{color:var(--gold-soft);}
.nav-links a.active::after{right:0;}
#whoami{font-size:.78rem; color:var(--stone); letter-spacing:.03em;}
.nav-links a:hover::after{right:0;}
.nav-toggle{display:none; background:none; border:0; flex-direction:column; gap:5px; cursor:pointer; padding:6px;}
.nav-toggle span{width:22px; height:1px; background:var(--ivory);}

/* ---------- HERO ---------- */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:center; justify-content:center;
  padding:120px 24px 80px;
  background:
    radial-gradient(ellipse 70% 55% at 50% 18%, rgba(198,161,91,.10), transparent 60%),
    var(--onyx);
}
.hero-inner{display:flex; flex-direction:column; align-items:center; text-align:center; max-width:640px;}

.hero-mark{position:relative; width:132px; height:132px; margin-bottom:28px;}
.ring-draw{position:absolute; inset:0;}
.ring-draw circle{
  fill:none; stroke:var(--gold); stroke-width:1.1;
  stroke-dasharray:868; stroke-dashoffset:868;
  animation:draw-ring 1.4s cubic-bezier(.65,0,.35,1) .3s forwards;
  transform-origin:center;
}
.mono-img svg{width:100%; height:100%; display:block;}
.mono-img{
  position:absolute; inset:0; width:100%; height:100%; color:var(--ivory);
  display:block;
  opacity:0; transform:scale(.86);
  filter:drop-shadow(0 0 18px rgba(198,161,91,0));
  animation:mono-in 1.1s ease-out 1.35s forwards;
}
@keyframes draw-ring{ to{ stroke-dashoffset:0; } }
@keyframes mono-in{
  0%{opacity:0; transform:scale(.86);}
  60%{opacity:1; transform:scale(1.03); filter:drop-shadow(0 0 22px rgba(198,161,91,.35));}
  100%{opacity:1; transform:scale(1); filter:drop-shadow(0 0 10px rgba(198,161,91,.18));}
}

.hero-word{width:min(78vw,440px); overflow:hidden; margin-bottom:6px;}
.name-img{
  width:100%; height:auto;
  clip-path:inset(0 100% 0 0);
  animation:wipe-in 1s cubic-bezier(.65,0,.35,1) 2.05s forwards;
}
@keyframes wipe-in{ to{ clip-path:inset(0 0 0 0); } }

.hero-rule{
  width:0; height:1px; background:linear-gradient(90deg, transparent, var(--gold), transparent);
  margin:18px 0 18px; animation:rule-grow 1s ease 2.95s forwards;
}
@keyframes rule-grow{ to{ width:180px; } }

.tagline-img{
  width:min(60vw,300px); opacity:0;
  animation:fade-up 1s ease 3.15s forwards;
}
.hero-sub{
  font-family:var(--serif); font-style:italic; font-weight:400; color:var(--stone);
  font-size:clamp(1rem,1.6vw,1.2rem); max-width:38ch; margin:26px 0 34px; opacity:0;
  animation:fade-up 1s ease 3.5s forwards;
}
@keyframes fade-up{
  0%{opacity:0; transform:translateY(8px);}
  100%{opacity:1; transform:translateY(0);}
}

.hero-cta{
  border:1px solid var(--hair); padding:14px 34px; font-size:.82rem; letter-spacing:.08em;
  color:var(--ivory); opacity:0; position:relative; overflow:hidden;
  animation:fade-up 1s ease 3.8s forwards;
  transition:border-color .4s ease, color .4s ease;
}
.hero-cta span{position:relative; z-index:1;}
.hero-cta::before{
  content:""; position:absolute; inset:0; background:var(--gold); transform:translateX(-101%);
  transition:transform .45s cubic-bezier(.65,0,.35,1); z-index:0;
}
.hero-cta:hover{color:var(--onyx); border-color:var(--gold);}
.hero-cta:hover::before{transform:translateX(0);}

.scroll-cue{position:absolute; bottom:34px; left:50%; transform:translateX(-50%); opacity:0; animation:fade-up 1s ease 4.2s forwards;}
.scroll-line{display:block; width:1px; height:46px; background:linear-gradient(var(--gold), transparent); position:relative; overflow:hidden;}
.scroll-line::after{
  content:""; position:absolute; left:0; top:-46px; width:100%; height:46px; background:linear-gradient(var(--ivory), transparent);
  animation:scroll-drip 2.2s ease-in-out infinite;
}
@keyframes scroll-drip{ 0%{top:-46px;} 100%{top:46px;} }

/* ---------- shared reveal ---------- */
.reveal, .reveal-p{
  opacity:0; transition:opacity 1s ease, transform 1s ease, filter 1s ease;
}
.reveal{transform:translateY(10px); filter:blur(6px);}
.reveal-p{transform:translateY(6px);}
.reveal-parent.in-view .reveal{opacity:1; transform:translateY(0); filter:blur(0);}
.reveal-parent.in-view .reveal-p{opacity:1; transform:translateY(0); transition-delay:.15s;}
.statement .reveal-p{opacity:0; transform:translateY(6px);}
.statement.in-view .reveal-p{opacity:1; transform:translateY(0);}

.dline{
  fill:none; stroke:var(--gold); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}
.reveal-parent .dline{transition:none;}

/* ---------- PHILOSOPHY ---------- */
.philosophy{
  display:grid; grid-template-columns:1.1fr .9fr; gap:60px; align-items:center;
  max-width:1180px; margin:0 auto; padding:150px 32px;
}
.eyebrow-plain{
  font-family:var(--serif); font-style:italic; color:var(--gold-soft); font-size:1.05rem; margin:0 0 18px;
}
.philosophy-text h2{
  font-family:var(--serif); font-weight:500; font-size:clamp(2.4rem,4.2vw,3.6rem); line-height:1.05; margin:0 0 28px; color:var(--ivory);
}
.philosophy-text p{
  font-size:1.02rem; line-height:1.85; color:var(--stone); max-width:52ch; margin:0 0 18px; font-weight:300;
}
.philosophy-art{display:flex; align-items:center; justify-content:center;}
.philosophy-art svg{width:min(100%,300px); height:auto;}

/* ---------- CRAFT ---------- */
.craft{max-width:1240px; margin:0 auto; padding:60px 32px 150px; position:relative;}
.page-craft .craft{padding-top:150px;}
.craft-head{text-align:center; max-width:560px; margin:0 auto 70px;}
.craft-head h2{font-family:var(--serif); font-weight:500; font-size:clamp(2.2rem,4vw,3rem); margin:0; color:var(--ivory);}
.craft-line{
  position:absolute; left:8%; right:8%; top:calc(60px + 220px); height:1px; background:var(--hair);
  display:none;
}
.craft-steps{display:grid; grid-template-columns:repeat(4,1fr); gap:44px;}
.step{text-align:left; position:relative; padding-top:6px;}
.step-no{font-family:var(--serif); font-style:italic; color:var(--gold); font-size:1rem; display:block; margin-bottom:18px;}
.step svg{width:64px; height:64px; margin-bottom:22px;}
.step h3{font-family:var(--serif); font-weight:500; font-size:1.5rem; margin:0 0 10px; color:var(--ivory);}
.step p{font-size:.94rem; line-height:1.65; color:var(--stone); margin:0; font-weight:300;}

/* ---------- COLLECTIONS ---------- */
.collections{background:var(--onyx-2); padding:150px 32px; border-top:1px solid var(--hair); border-bottom:1px solid var(--hair);}
.collections-head{text-align:center; max-width:560px; margin:0 auto 70px;}
.collections-head h2{font-family:var(--serif); font-weight:500; font-size:clamp(2.2rem,4vw,3rem); margin:0; color:var(--ivory);}
.collection-grid{max-width:1180px; margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:0; background:transparent;
  border-top:1px solid var(--hair); border-left:1px solid var(--hair);}
.collection-card{
  background:var(--onyx-2); padding:56px 40px; text-align:center;
  transition:background .4s ease;
  border-right:1px solid var(--hair); border-bottom:1px solid var(--hair);
}
.collection-card:hover{background:#131109;}
.collection-card svg{width:100px; height:100px; margin:0 auto 26px;}
.collection-card h3{font-family:var(--serif); font-style:italic; font-weight:500; font-size:2.1rem; margin:0 0 14px; color:var(--gold-soft);}
.collection-card p{font-size:.95rem; line-height:1.7; color:var(--stone); max-width:32ch; margin:0 auto; font-weight:300;}

/* ---------- SHOP / INVENTORY ---------- */
.shop{max-width:1180px; margin:0 auto; padding:150px 32px;}
.shop-head{text-align:center; max-width:520px; margin:0 auto 70px;}
.shop-head h2{font-family:var(--serif); font-weight:500; font-size:clamp(2.2rem,4vw,3rem); margin:0 0 18px; color:var(--ivory);}
.shop-note{font-size:.95rem; line-height:1.7; color:var(--stone); font-weight:300; margin:0;}
.product-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:0; background:transparent;
  border-top:1px solid var(--hair); border-left:1px solid var(--hair);}
.product-card{background:var(--onyx-2); padding:50px 32px; text-align:center; transition:background .4s ease;
  border-right:1px solid var(--hair); border-bottom:1px solid var(--hair);}
.product-card:hover{background:#131109;}
.product-card svg{width:78px; height:78px; margin:0 auto 22px;}
.product-card .product-photo{width:100%; max-width:180px; height:180px; object-fit:cover; margin:0 auto 22px; display:block; border:1px solid var(--hair);}
.shop-empty{grid-column:1/-1; text-align:center; padding:60px 20px; color:var(--stone); font-style:italic; font-family:var(--serif);}
.product-desc{font-size:.86rem; line-height:1.6; color:var(--stone); max-width:30ch; margin:0 auto 14px; font-weight:300;}
.product-stock{font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; margin:0 0 16px; color:var(--stone);}
.product-stock.is-low{color:var(--gold-soft);}
.product-stock.is-out{color:#c47a6b;}
.product-card.is-out-of-stock .product-photo,
.product-card.is-out-of-stock .draw-icon{opacity:.4;}

.filter-tabs{display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin:0 0 50px;}
.filter-tab{
  background:transparent; border:1px solid var(--hair); color:var(--stone);
  font-family:var(--sans); font-size:.8rem; letter-spacing:.05em; padding:9px 22px;
  cursor:pointer; transition:border-color .3s ease, color .3s ease, background .3s ease;
}
.filter-tab:hover{color:var(--ivory); border-color:var(--gold);}
.filter-tab.active{background:var(--gold); color:#1a1508; border-color:var(--gold); font-weight:500;}

.product-grid.is-loading{background:transparent;}
.product-skeleton{
  background:var(--onyx-2); padding:50px 32px; height:280px; position:relative; overflow:hidden;
  border-right:1px solid var(--hair); border-bottom:1px solid var(--hair);
}
.product-skeleton::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(198,161,91,.08), transparent);
  animation:skeleton-sweep 1.6s ease-in-out infinite;
}
@keyframes skeleton-sweep{
  0%{transform:translateX(-100%);}
  100%{transform:translateX(100%);}
}
@media (prefers-reduced-motion: reduce){
  .product-skeleton::after{animation:none;}
}
.shop-manage{display:block; text-align:center; margin-top:44px; font-size:.78rem; letter-spacing:.05em; color:var(--stone); opacity:.6; transition:opacity .3s ease;}
.shop-manage:hover{opacity:1; color:var(--gold-soft);}
.product-card h3{font-family:var(--serif); font-style:italic; font-weight:500; font-size:1.5rem; margin:0 0 6px; color:var(--gold-soft);}
.product-tag{font-size:.72rem; letter-spacing:.03em; font-style:italic; color:var(--stone); margin:0 0 14px; opacity:.75;}
.product-price{font-size:.9rem; color:var(--ivory); margin:0 0 20px; font-weight:300;}
.product-enquire{
  font-size:.8rem; letter-spacing:.05em; color:var(--gold-soft);
  border-bottom:1px solid var(--hair); padding-bottom:3px; transition:color .35s ease, border-color .35s ease;
}
.product-enquire:hover{color:var(--ivory); border-color:var(--gold);}

/* ---------- STATEMENT ---------- */
.statement{
  position:relative; padding:190px 24px; text-align:center; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.statement-mark{
  position:absolute; top:50%; left:50%; width:520px; max-width:80vw; transform:translate(-50%,-50%);
  opacity:.06; pointer-events:none; color:var(--gold); display:block;
}
.statement-mark svg{width:100%; height:auto; display:block;}
.statement-text{
  font-family:var(--serif); font-style:italic; font-weight:400; color:var(--ivory);
  font-size:clamp(1.8rem,4vw,3rem); max-width:16ch; position:relative; margin:0 0 22px;
}
.statement-attr{position:relative; font-size:.82rem; letter-spacing:.08em; color:var(--gold-soft);}

/* ---------- VISIT ---------- */
.visit{max-width:1180px; margin:0 auto; padding:0 32px 150px;}
.visit-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:50px; border-top:1px solid var(--hair); padding-top:60px;}
.visit-block .eyebrow-plain{font-size:.95rem; margin-bottom:14px;}
.visit-address, .visit-hours{font-size:.98rem; line-height:1.7; color:var(--stone); margin:0 0 8px; font-weight:300;}
.visit-address a:hover{color:var(--gold-soft);}
.social-row{display:flex; gap:22px; margin-top:2px;}
.social-icon{
  display:flex; align-items:center; gap:9px;
  color:var(--stone); font-size:.95rem; font-weight:300;
  transition:color .35s ease;
}
.social-icon svg{width:22px; height:22px; flex-shrink:0;}
.social-icon:hover{color:var(--gold-soft);}

/* ---------- FOOTER ---------- */
.site-footer{
  text-align:center; padding:50px 24px 60px; border-top:1px solid var(--hair);
}
.footer-tagline{width:150px; margin:0 auto 18px; opacity:.7;}
.site-footer p{font-size:.78rem; letter-spacing:.03em; color:var(--stone); margin:0;}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important;}
  .ring-draw circle{stroke-dashoffset:0;}
  .mono-img,.name-img,.tagline-img,.hero-sub,.hero-cta,.scroll-cue{opacity:1; clip-path:none; transform:none;}
  .reveal,.reveal-p,.dline{opacity:1; transform:none; filter:none;}
}

/* ---------- RESPONSIVE ---------- */
@media (max-width:900px){
  .philosophy{grid-template-columns:1fr; text-align:left; padding:110px 26px;}
  .philosophy-art{order:-1; margin-bottom:10px;}
  .philosophy-art svg{width:180px;}
  .craft-steps{grid-template-columns:1fr 1fr; row-gap:50px;}
  .collection-grid{grid-template-columns:1fr;}
  .product-grid{grid-template-columns:1fr;}
  .visit-grid{grid-template-columns:1fr; gap:34px;}
  .nav-links{
    position:fixed; top:0; right:0; height:100vh; width:min(72vw,300px);
    background:rgba(7,7,6,.97); backdrop-filter:blur(14px);
    flex-direction:column; justify-content:center; align-items:flex-start; gap:26px; padding:0 40px;
    transform:translateX(100%); transition:transform .45s cubic-bezier(.65,0,.35,1);
    border-left:1px solid var(--hair);
  }
  .nav-links.open{transform:translateX(0);}
  .nav-toggle{display:flex;}
}
@media (max-width:560px){
  .craft-steps{grid-template-columns:1fr;}
  .hero{padding-top:100px;}
}

/* ---------- COLLECTION LINK ---------- */
.collection-link{
  display:inline-block; margin-top:20px; font-size:.78rem; letter-spacing:.08em;
  color:var(--gold-soft); border-bottom:1px solid var(--hair); padding-bottom:3px;
  transition:color .35s ease, border-color .35s ease;
}
.collection-link:hover{color:var(--ivory); border-color:var(--gold);}

/* ---------- PIECE (single product) PAGE ---------- */
.piece{max-width:1180px; margin:0 auto; padding:150px 32px 90px;}
.piece-loading{color:var(--stone); font-family:var(--serif); font-style:italic; text-align:center; padding:60px 0;}
.piece-back{font-size:.8rem; letter-spacing:.06em; color:var(--stone); transition:color .3s ease;}
.piece-back:hover{color:var(--gold-soft);}
.piece-grid{display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; margin-top:40px;}
.piece-media{
  background:var(--onyx-2); border:1px solid var(--hair);
  display:flex; align-items:center; justify-content:center; padding:40px; min-height:420px;
}
.piece-photo{width:100%; height:auto; max-height:520px; object-fit:contain; display:block;}
.piece-icon{width:210px; color:var(--gold);}
.piece-icon svg{width:100%; height:auto;}
.piece-name{font-family:var(--serif); font-weight:500; font-size:clamp(2.2rem,4.4vw,3.4rem); line-height:1.05; margin:6px 0 10px; color:var(--ivory);}
.piece-tag{font-family:var(--serif); font-style:italic; color:var(--stone); margin:0 0 22px; font-size:1rem;}
.piece-desc{font-size:1.02rem; line-height:1.85; color:var(--stone); max-width:48ch; margin:0 0 26px; font-weight:300;}
.piece-price{font-size:1.15rem; color:var(--ivory); margin:0 0 10px; font-weight:300;}
.piece-stock{font-size:.75rem; letter-spacing:.09em; text-transform:uppercase; margin:0 0 26px; color:var(--stone);}
.piece-stock.is-low{color:var(--gold-soft);}
.piece-stock.is-out{color:#c47a6b;}
.piece-specs{display:grid; grid-template-columns:auto 1fr; gap:10px 26px; margin:0 0 32px;
  border-top:1px solid var(--hair); padding-top:22px; font-size:.9rem;}
.piece-specs dt{color:var(--stone); font-size:.72rem; letter-spacing:.07em; text-transform:uppercase;}
.piece-specs dd{margin:0; color:var(--ivory); font-weight:300;}
.piece-cta{
  display:inline-block; border:1px solid var(--hair); padding:15px 36px; font-size:.82rem;
  letter-spacing:.08em; color:var(--ivory); position:relative; overflow:hidden;
  transition:border-color .4s ease, color .4s ease;
}
.piece-cta span{position:relative; z-index:1;}
.piece-cta::before{content:""; position:absolute; inset:0; background:var(--gold);
  transform:translateX(-101%); transition:transform .45s cubic-bezier(.65,0,.35,1);}
.piece-cta:hover{color:#1a1508; border-color:var(--gold);}
.piece-cta:hover::before{transform:translateX(0);}
.piece-note{font-size:.85rem; line-height:1.7; color:var(--stone); opacity:.8; margin:26px 0 0; max-width:44ch;}

.related{max-width:1180px; margin:0 auto; padding:0 32px 140px;}
.related-title{font-family:var(--serif); font-weight:500; font-size:1.9rem; color:var(--ivory);
  text-align:center; margin:0 0 44px;}

@media (max-width:900px){
  .piece-grid{grid-template-columns:1fr; gap:36px;}
  .piece{padding-top:120px;}
  .piece-media{min-height:300px; padding:26px;}
}

/* Related grid sizes to its content so a single item doesn't leave a
   long empty ruled row beside it. */
.related .product-grid{grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));}
@media (min-width:901px){
  .related .product-grid{grid-template-columns:repeat(3, 1fr);}
  .related .product-grid:has(.product-card:only-child){grid-template-columns:minmax(280px, 380px);}
}

/* ---------- COLLECTION CARD MEDIA ---------- */
.collection-media{display:flex; align-items:center; justify-content:center; min-height:170px; margin-bottom:6px;}
.collection-media svg{width:100px; height:100px;}
.collection-photo{width:100%; max-width:230px; height:190px; object-fit:cover; border:1px solid var(--hair); display:block;}
.collection-count{font-size:.72rem; letter-spacing:.09em; text-transform:uppercase; color:var(--stone); margin:0 0 12px;}

/* ---------- RELATED / REST OF CATALOGUE ---------- */
.related-head{text-align:center; margin:0 0 40px;}
.related-sub{font-size:.85rem; letter-spacing:.04em; color:var(--stone); margin:8px 0 0;}
.related .product-grid{margin-bottom:46px;}
.related-more{
  display:block; text-align:center; margin:0 auto 70px; font-size:.8rem; letter-spacing:.07em;
  color:var(--gold-soft); width:fit-content; border-bottom:1px solid var(--hair); padding-bottom:4px;
  transition:color .35s ease, border-color .35s ease;
}
.related-more:hover{color:var(--ivory); border-color:var(--gold);}

/* ---------- PERFORMANCE / RENDERING ---------- */
/* Let the browser skip layout+paint for offscreen cards on long grids. */
.product-card, .collection-card{content-visibility:auto; contain-intrinsic-size:340px;}
.product-photo, .collection-photo, .piece-photo{background:var(--onyx-2);}

/* ---------- CARD ALIGNMENT ----------
   Photos and line-art icons previously took different vertical space, so
   cards in the same row ended up ragged. Give every card the same media
   block and push the action link to the bottom so rows line up. */
.product-card{display:flex; flex-direction:column; align-items:center;}
.product-card .product-photo{
  width:100%; max-width:200px; height:200px; object-fit:cover; margin:0 auto 22px;
}
.product-card > svg.draw-icon{
  width:auto; height:200px; margin:0 auto 22px; padding:56px 0; box-sizing:border-box;
}
.product-card .product-enquire{margin-top:auto;}
.product-card h3{margin-top:0;}

/* ---------- GRID DIVIDER LINES (subpixel-safe) ----------
   Card widths land on fractional pixels (e.g. 371.66px), so 1px borders
   between adjacent cards were being rounded away and some lines vanished
   at certain zoom levels. Inset shadows paint inside the box and survive
   that rounding, so the ruling stays consistent. */
.product-grid, .collection-grid{border:0;}
.product-card, .collection-card{
  border:0 !important;
  box-shadow: inset -1px 0 0 var(--hair), inset 0 -1px 0 var(--hair);
}
.product-grid, .collection-grid{
  box-shadow: inset 1px 0 0 var(--hair), inset 0 1px 0 var(--hair);
}
/* content-visibility could also defer painting of these lines; the grids
   are short enough that the saving isn't worth the artefact. */
.product-card, .collection-card{content-visibility:visible;}

/* Piece count under a type tile */
.product-count{font-size:.72rem; letter-spacing:.09em; text-transform:uppercase; color:var(--gold-soft); margin:0 0 18px;}

/* Each card rules its own full box, so a partly-filled row doesn't leave a
   line hanging across the empty cells (the grid container used to draw it). */
.product-grid, .collection-grid{box-shadow:none;}
.product-card, .collection-card{
  box-shadow:
    inset  1px 0 0 var(--hair), inset 0  1px 0 var(--hair),
    inset -1px 0 0 var(--hair), inset 0 -1px 0 var(--hair);
}

/* ---------- ITEM CATALOG PAGE ---------- */
.catalog-head{text-align:center; max-width:620px; margin:34px auto 60px;}
.catalog-title{font-family:var(--serif); font-weight:500; font-size:clamp(2.3rem,4.6vw,3.5rem); line-height:1.05; margin:6px 0 16px; color:var(--ivory);}
.catalog-desc{font-size:1rem; line-height:1.8; color:var(--stone); margin:0; font-weight:300;}

.inventory-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr));
  gap:26px; max-width:1180px; margin:0 auto 50px;
}
.inventory-card{
  background:var(--onyx-2); border:1px solid var(--hair);
  display:flex; flex-direction:column; align-items:center; padding:16px 16px 20px;
}
.inventory-photo{
  width:100%; aspect-ratio:1/1; object-fit:cover; display:block; background:#0b0a08;
  transition:opacity .3s ease;
}
.inventory-card.is-photo-only .inventory-photo{cursor:zoom-in;}
.inventory-card:hover .inventory-photo{opacity:.88;}
.inventory-info{text-align:center; margin-top:16px;}
.inventory-sku{font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--stone); margin:0 0 6px;}
.inventory-price{font-size:.95rem; color:var(--ivory); margin:0 0 8px; font-weight:300;}
.inventory-link, .inventory-zoom{
  margin-top:14px; background:none; border:0; border-bottom:1px solid var(--hair);
  font-family:var(--sans); font-size:.78rem; letter-spacing:.06em; color:var(--gold-soft);
  padding:0 0 3px; cursor:pointer; transition:color .3s ease, border-color .3s ease;
}
.inventory-link:hover, .inventory-zoom:hover{color:var(--ivory); border-color:var(--gold);}

/* ---------- LIGHTBOX ---------- */
.lightbox{
  position:fixed; inset:0; z-index:300; display:none;
  align-items:center; justify-content:center; gap:20px;
  background:rgba(5,5,4,.94); backdrop-filter:blur(6px); padding:40px 20px;
}
body.lb-open{overflow:hidden;}
body.lb-open .lightbox{display:flex;}
.lb-figure{margin:0; max-width:min(1000px, 88vw); text-align:center;}
.lb-img{max-width:100%; max-height:78vh; object-fit:contain; display:block; margin:0 auto;}
.lb-cap{margin-top:16px; font-size:.8rem; letter-spacing:.06em; color:var(--stone);}
.lb-close, .lb-prev, .lb-next{
  background:none; border:1px solid var(--hair); color:var(--ivory);
  width:44px; height:44px; font-size:1.4rem; line-height:1; cursor:pointer; flex:0 0 auto;
  transition:border-color .3s ease, color .3s ease;
}
.lb-close{position:absolute; top:24px; right:24px;}
.lb-close:hover, .lb-prev:hover, .lb-next:hover{border-color:var(--gold); color:var(--gold-soft);}

@media (max-width:640px){
  .inventory-grid{grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:14px;}
  .lb-prev, .lb-next{width:38px; height:38px;}
}