:root { --ink:#292019; --gold:#ac8049; --paper:#fffaf3; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:"Helvetica Neue",Arial,sans-serif; }
a { color:inherit; }
button { font:inherit; cursor:pointer; }
a, button { -webkit-tap-highlight-color:transparent; }
a:focus-visible, button:focus-visible { outline:2px solid var(--gold); outline-offset:5px; }
.detail-header { position:relative; min-height:112px; display:flex; align-items:center; justify-content:center; border-bottom:1px solid #e9dfd3; padding:18px max(24px,env(safe-area-inset-right)) 18px max(24px,env(safe-area-inset-left)); }
.brand img { display:block; width:100px; height:auto; }
.back-link { position:absolute; left:calc(24px + env(safe-area-inset-left,0px)); display:grid; place-items:center; width:44px; height:44px; text-decoration:none; font-size:30px; }
.product-detail { width:min(1320px,calc(100% - 80px)); margin:56px auto 80px; display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:clamp(32px,5vw,80px); align-items:start; }
.gallery { display:grid; grid-template-columns:86px minmax(0,1fr); gap:16px; align-items:start; }
.main-photo { grid-column:2; grid-row:1; position:relative; aspect-ratio:1; background:#eee5dc; overflow:hidden; }
.main-photo img { display:block; width:100%; height:100%; object-fit:contain; }
.photo-counter { position:absolute; right:14px; bottom:14px; background:#241d18c9; color:white; border-radius:30px; padding:8px 12px; font-size:11px; letter-spacing:.12em; }
.thumbnails { grid-column:1; grid-row:1; display:flex; flex-direction:column; gap:14px; }
.thumbnail { padding:3px; border:1px solid #d6c6b4; background:transparent; width:100%; aspect-ratio:1; }
.thumbnail:hover { border-color:var(--gold); }
.thumbnail img { display:block; width:100%; height:100%; object-fit:contain; }
.eyebrow { margin:10px 0 18px; text-transform:uppercase; letter-spacing:.23em; color:var(--gold); font-size:10px; }
h1 { margin:0 0 24px; font:400 clamp(40px,4.5vw,64px)/1.04 Georgia,serif; overflow-wrap:anywhere; }
.description { font:18px/1.65 Georgia,serif; color:#665649; margin:0 0 30px; }
.details { border-top:1px solid #ddcdbd; padding-top:24px; margin-bottom:32px; }
.color-section { border:0; padding:0; margin:0 0 28px; min-width:0; }
.color-section legend { font-size:12px; padding:0; margin-bottom:12px; }
.color-options { display:flex; flex-wrap:wrap; gap:12px; }
.color-option { display:flex; align-items:center; gap:10px; min-height:48px; padding:9px 14px; border:1px solid #d6c6b4; background:transparent; color:var(--ink); border-radius:4px; }
.color-option[aria-pressed="true"] { border:2px solid var(--gold); padding:8px 13px; }
.color-swatch { display:block; width:22px; height:22px; border-radius:50%; border:1px solid #9c8879; }
.color-swatch--blush { background:#d7aaa2; }
.color-swatch--negro { background:#171717; }
h2 { font-size:11px; text-transform:uppercase; letter-spacing:.15em; font-weight:500; margin:0 0 20px; }
dl { margin:0; }
dl div { display:grid; grid-template-columns:100px minmax(0,1fr); gap:16px; padding:9px 0; font-size:13px; line-height:1.5; }
dt { color:#887364; }
dd { margin:0; }
.marketplace { display:flex; justify-content:space-between; align-items:center; gap:20px; width:100%; border:0; padding:19px 24px; background:#171310; color:#e1c294; text-decoration:none; font-size:13px; }
.marketplace:hover { background:#35281e; }
.purchase-note { margin:14px 0 25px; font-size:12px; color:#776558; line-height:1.6; }
.collection-link { text-underline-offset:5px; font-size:12px; }
.empty-state { max-width:650px; padding:60px 24px; margin:auto; }
footer { text-align:center; padding:28px 24px calc(28px + env(safe-area-inset-bottom,0px)); border-top:1px solid #e9dfd3; font-size:11px; color:#887364; }
@media(max-width:900px) {
 .product-detail { width:calc(100% - 40px); max-width:660px; grid-template-columns:minmax(0,1fr); gap:34px; margin:28px auto 50px; }
}
@media(max-width:560px) {
 .detail-header { min-height:88px; padding:12px 20px; }
 .brand img { width:84px; }
 .back-link { left:calc(12px + env(safe-area-inset-left,0px)); }
 .product-detail { width:calc(100% - 32px); }
 .gallery { grid-template-columns:minmax(0,1fr); gap:12px; }
 .main-photo { grid-column:1; grid-row:1; }
 .thumbnails { grid-column:1; grid-row:2; flex-direction:row; justify-content:center; gap:12px; }
 .thumbnail { width:76px; flex:0 0 76px; }
 .eyebrow { margin-top:0; }
 h1 { font-size:42px; }
 .description { font-size:17px; }
}
