:root{
    --cream:#F6F3EC;
    --cream-deep:#EFEAE0;
    --ink:#26221E;
    --ink-soft:#5B564D;
    --line:#DCD4C4;
    --tide:#1F4A47;
    --tide-soft:#3E6B66;
    --paper:#FFFFFF;
  }
  *{box-sizing:border-box;margin:0;padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--cream);
    color:var(--ink);
    font-family:'Inter',sans-serif;
    -webkit-font-smoothing:antialiased;
  }
  a{color:inherit;text-decoration:none;}
  img{display:block;max-width:100%;}

  .display{font-family:'Fraunces',serif;}

  /* ---------- NAV ---------- */
  nav{
    position:fixed;top:0;left:0;right:0;z-index:50;
    display:flex;justify-content:space-between;align-items:center;
    padding:22px 5vw;
    mix-blend-mode:difference;
    color:#fff;
  }
  nav .logo{font-family:'Fraunces',serif;font-size:12px;letter-spacing:0.08em;font-weight:500;white-space:nowrap;}
  @media(max-width:600px){ nav .logo{font-size:9.5px;letter-spacing:.03em;} nav .links{gap:16px;} }
  nav .links{display:flex;gap:28px;font-size:12px;letter-spacing:0.08em;text-transform:uppercase;}
  nav .links a{opacity:.85;transition:opacity .2s;}
  nav .links a:hover{opacity:1;}

  /* ---------- HERO ---------- */
  .hero{
    position:relative;
    height:100svh;
    overflow:hidden;
    display:flex;
    align-items:flex-end;
  }
  .hero .slide{
    position:absolute;inset:0;
    background-size:cover;
    background-position:center;
    opacity:0;
    transform:scale(1.08);
    transition:opacity 1.8s ease, transform 8s ease;
  }
  .hero .slide.active{opacity:1;transform:scale(1);}
  .hero::after{
    content:"";
    position:absolute;inset:0;
    background:linear-gradient(180deg, rgba(20,18,15,.15) 0%, rgba(20,18,15,.05) 40%, rgba(20,18,15,.65) 100%);
  }
  .hero-content{
    position:relative;z-index:2;
    padding:0 5vw 64px;
    width:100%;
    color:#fff;
  }
  .hero-eyebrow{
    font-size:11px;letter-spacing:.22em;text-transform:uppercase;
    opacity:.8;margin-bottom:18px;
    font-family:'Inter',sans-serif;
  }
  .hero h1{
    font-size:clamp(42px, 8vw, 108px);
    font-weight:400;
    line-height:.98;
    letter-spacing:-0.01em;
    max-width:900px;
  }
  .hero h1 em{font-style:italic;font-weight:300;opacity:.92;}
  .hero-sub{
    margin-top:22px;
    font-size:15px;
    max-width:420px;
    line-height:1.6;
    opacity:.85;
    font-weight:400;
  }
  .hero-route{
    position:absolute;bottom:64px;right:5vw;z-index:2;
    color:#fff;text-align:right;
    font-size:11px;letter-spacing:.16em;text-transform:uppercase;
    opacity:.75;line-height:2.1;
    display:none;
  }
  @media(min-width:820px){ .hero-route{display:block;} }

  /* ---------- BIO ---------- */
  .bio{
    max-width:680px;
    margin:0 auto;
    padding:130px 6vw 110px;
    text-align:center;
  }
  .bio .kicker{
    font-size:11px;letter-spacing:.2em;text-transform:uppercase;
    color:var(--tide);margin-bottom:22px;font-weight:600;
  }
  .bio p{
    font-family:'Fraunces',serif;
    font-weight:300;
    font-size:clamp(20px,2.6vw,26px);
    line-height:1.55;
    color:var(--ink);
  }
  .bio-name{
    margin-top:34px;
    font-size:12px;letter-spacing:.1em;text-transform:uppercase;
    color:var(--ink-soft);
  }

  /* ---------- SHOP ---------- */
  .shop-head{
    display:flex;justify-content:space-between;align-items:flex-end;
    padding:0 6vw 44px;
    border-bottom:1px solid var(--line);
    margin:0 0 2px;
  }
  .shop-head h2{
    font-family:'Fraunces',serif;font-weight:400;font-size:clamp(30px,4vw,44px);
  }
  .shop-head p{font-size:13px;color:var(--ink-soft);max-width:260px;text-align:right;line-height:1.5;}

  .grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
    gap:1px;
    background:var(--line);
    margin:1px 6vw 0;
  }
  .card{
    background:var(--cream);
    display:flex;flex-direction:column;
    position:relative;
    overflow:hidden;
  }
  .card .imgwrap{
    position:relative;
    aspect-ratio:4/5;
    overflow:hidden;
    background:#ededeb;
    display:flex;align-items:center;justify-content:center;
  }
  .card .imgwrap img{
    width:100%;height:100%;object-fit:contain;
    transition:transform 1.2s cubic-bezier(.19,1,.22,1);
  }
  .card:hover .imgwrap img{transform:scale(1.035);}
  .card .tag{
    position:absolute;top:16px;left:16px;
    background:rgba(246,243,236,.92);
    color:var(--ink);
    font-size:10px;letter-spacing:.1em;text-transform:uppercase;
    padding:7px 11px;
    font-weight:600;
  }
  .card .info{
    padding:22px 24px 26px;
    display:flex;flex-direction:column;gap:14px;
    flex:1;
  }
  .card .loc{
    font-family:'Fraunces',serif;font-size:20px;font-weight:400;
  }
  .card .meta{
    font-size:12px;color:var(--ink-soft);
    display:flex;justify-content:space-between;
    border-top:1px solid var(--line);
    padding-top:14px;
  }

  /* ---------- NOTE ---------- */
  .note{
    max-width:560px;margin:90px auto 0;padding:0 6vw;
    text-align:center;font-size:12.5px;color:var(--ink-soft);line-height:1.7;
  }
  .note strong{color:var(--tide);}

  /* ---------- FOOTER ---------- */
  footer{
    margin-top:130px;
    padding:60px 6vw 46px;
    border-top:1px solid var(--line);
    display:flex;flex-wrap:wrap;gap:30px;
    justify-content:space-between;align-items:flex-end;
  }
  footer .fname{font-family:'Fraunces',serif;font-size:22px;}
  footer .flinks{display:flex;gap:26px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);}
  footer .flinks a:hover{color:var(--ink);}
  footer .fcopy{font-size:11px;color:var(--ink-soft);width:100%;margin-top:26px;opacity:.7;}

  @media(max-width:600px){
    .shop-head{flex-direction:column;align-items:flex-start;gap:10px;}
    .shop-head p{text-align:left;}
    .grid{margin-left:5vw;margin-right:5vw;}
    footer{flex-direction:column;align-items:flex-start;}
  }

/* ---------- PRODUCT PAGE ---------- */
.product-nav{
  padding:110px 6vw 0;
}
.back-link{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-soft);
}
.back-link:hover{color:var(--ink);}

.product{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:60px;
  padding:36px 6vw 100px;
  align-items:start;
}

.product-viewer{
  position:sticky;
  top:100px;
}
@media(max-width:860px){
  .product{grid-template-columns:1fr;gap:36px;}
  .product-viewer{position:static;top:auto;}
}
.viewer-frame{
  background:#ededeb;
  display:flex;align-items:center;justify-content:center;
  aspect-ratio:4/5;
  overflow:hidden;
}
.viewer-frame img{
  width:100%;height:100%;object-fit:contain;
  opacity:0;
  transition:opacity .35s ease;
}
.viewer-frame img.active{opacity:1;position:relative;}
.viewer-frame{position:relative;}
.viewer-frame img{position:absolute;inset:0;}

.viewer-toggle{
  display:flex;gap:8px;
  margin-top:14px;
}
.viewer-toggle button{
  all:unset;cursor:pointer;
  flex:1;text-align:center;
  padding:10px 12px;
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  border:1px solid var(--line);
  color:var(--ink-soft);
  transition:background .2s, color .2s, border-color .2s;
}
.viewer-toggle button.active{
  background:var(--ink);color:var(--cream);border-color:var(--ink);
}

.product-info .kicker{
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--tide);margin-bottom:14px;font-weight:600;
}
.product-info h1{
  font-family:'Fraunces',serif;font-weight:400;
  font-size:clamp(30px,4vw,44px);
  line-height:1.1;
  margin-bottom:10px;
}
.product-info .sub{
  font-size:14px;color:var(--ink-soft);margin-bottom:28px;
}
.product-info .desc{
  font-size:15px;line-height:1.7;color:var(--ink);
  margin-bottom:28px;
  max-width:46ch;
}
.spec-table{
  width:100%;
  border-top:1px solid var(--line);
  margin-bottom:30px;
}
.spec-table div{
  display:flex;justify-content:space-between;
  padding:12px 0;
  border-bottom:1px solid var(--line);
  font-size:13px;
}
.spec-table div span:first-child{color:var(--ink-soft);}

.buy-panel{
  border:1px solid var(--ink);
  padding:22px;
}
.coming-soon-panel{
  text-align:center;
  padding:32px 22px;
}
.coming-soon-badge{
  display:inline-block;
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  font-weight:600;
  color:var(--tide);
  border:1px solid var(--tide);
  padding:6px 14px;
  margin-bottom:16px;
}
.coming-soon-text{
  font-size:14px;line-height:1.6;color:var(--ink-soft);
  margin-bottom:22px;
}
.coming-soon-cta{
  display:inline-block;width:auto;
  text-align:center;
  background:var(--ink);
  color:var(--cream);
  padding:12px 28px;
  font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  font-weight:600;
  text-decoration:none;
  cursor:pointer;
  transition:opacity .2s;
  border:1px solid var(--ink);
}
.coming-soon-cta:hover{opacity:.85;}
.buy-panel .price-line{
  display:flex;justify-content:space-between;align-items:baseline;
  margin-bottom:16px;
}
.buy-panel .price-line .amount{
  font-family:'Fraunces',serif;font-size:26px;
}
.buy-cta{
  all:unset;box-sizing:border-box;
  display:block;width:100%;
  text-align:center;
  background:var(--ink);color:var(--cream);
  padding:14px 16px;
  font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  font-weight:600;
  cursor:pointer;
  transition:opacity .2s;
}
.buy-cta:hover{opacity:.85;}
.pp-buttons{ min-height:44px; margin-top:14px; display:none; }
.pp-buttons.visible{ display:block; }
.pp-buttons.loading{
  display:flex;align-items:center;justify-content:center;
  font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-soft);
  border:1px solid var(--line);
  padding:12px;
}
.buy-note{
  font-size:11.5px;color:var(--ink-soft);line-height:1.6;margin-top:16px;
}

/* ---------- FRAME OPTION + TEST BANNER ---------- */
.frame-select{ margin-bottom:18px; }
.frame-select-label{
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:8px;
}
.frame-toggle{ display:flex;gap:8px; }
.frame-toggle-3 .frame-btn{ font-size:11px;padding:11px 6px; }
.price-breakdown{ margin-top:4px; }
.price-breakdown div{
  display:flex;justify-content:space-between;
  font-size:12.5px;color:var(--ink-soft);
  padding:5px 0;
}
.frame-btn{
  all:unset;cursor:pointer;box-sizing:border-box;
  flex:1;text-align:center;
  padding:11px 10px;
  font-size:11.5px;letter-spacing:.02em;
  border:1px solid var(--line);
  color:var(--ink-soft);
  transition:background .2s, color .2s, border-color .2s;
}
.frame-btn.active{
  background:var(--ink);color:var(--cream);border-color:var(--ink);
}
.test-banner{
  background:#fbe9d0;
  color:#7a4a10;
  border:1px solid #e8c690;
  font-size:11.5px;
  padding:9px 12px;
  margin-bottom:14px;
  line-height:1.5;
}