@import url('https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,300;0,400;0,500;1,300;1,400&display=swap');
* { box-sizing: border-box; }
html, body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: #F8F7F3; color: #111111; -webkit-font-smoothing: antialiased; }
a { color: #111111; text-decoration: none; }
a:hover { color: #8a8a85; }
button { font-family: inherit; }
.wrap { max-width: 1400px; margin: 0 auto; overflow: hidden; }
.masthead { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: clamp(18px,3vw,28px) clamp(16px,4vw,48px) clamp(14px,2vw,20px); border-bottom: 1px solid #D8D8D3; }
.logo-btn { background: none; border: none; padding: 0; cursor: pointer; font-family: 'Cormorant', serif; font-weight: 300; font-size: clamp(20px,3vw,28px); letter-spacing: 8px; color: #111111; }
.logo-btn em { font-style: italic; font-weight: 400; letter-spacing: 2px; }
.nav { display: flex; gap: clamp(16px,3vw,32px); flex-wrap: wrap; }
.nav-btn { background: none; border: none; padding: 0; cursor: pointer; color: #8a8a85; font-size: 11px; letter-spacing: 2px; }
.nav-btn.active { color: #111111; }
.hero-section { padding: clamp(20px,3vw,32px) clamp(16px,4vw,48px) 0; }
.hero-img-box { aspect-ratio: 16/6; overflow: hidden; background: #EAE9E4; }
.hero-img-box img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-title-wrap { padding: clamp(20px,3vw,32px) 0 clamp(40px,5vw,64px); text-align: center; }
.hero-title-wrap h1 { font-family: 'Cormorant', serif; font-weight: 300; font-size: clamp(40px,8vw,110px); line-height: 0.92; letter-spacing: 2px; margin: 0; }
.hero-title-wrap p { font-family: 'Cormorant', serif; font-style: italic; font-size: clamp(14px,2vw,20px); letter-spacing: 3px; margin: 6px 0 0; color: #3a3a37; }
.section-block { padding: 0 clamp(16px,4vw,48px) clamp(56px,7vw,96px); border-top: 1px solid #D8D8D3; }
.section-head { display: flex; justify-content: space-between; padding: 16px 0; font-size: 11px; letter-spacing: 2px; color: #8a8a85; }
.collections-grid { display: flex; flex-wrap: wrap; gap: 1px; background: #D8D8D3; }
.collection-card { flex: 1 1 280px; background: #F8F7F3; border: none; padding: 0; cursor: pointer; text-align: left; display: flex; flex-direction: column; }
.collection-card .img-box { aspect-ratio: 1/1; overflow: hidden; background: #EAE9E4; }
.collection-card .img-box img { width: 100%; height: 100%; object-fit: cover; display: block; }
.collection-card .body { padding: 20px; flex: 1; }
.collection-card .idx { font-size: 11px; letter-spacing: 2px; color: #8a8a85; }
.collection-card h3 { font-family: 'Cormorant', serif; font-size: clamp(18px,2.2vw,22px); margin: 8px 0 14px; }
.view-link { font-size: 11px; letter-spacing: 2px; border-bottom: 1px solid #111111; }
.fabric-flex { display: flex; flex-wrap: wrap; gap: clamp(24px,4vw,48px); align-items: center; }
.fabric-img-box { flex: 1 1 260px; min-width: 220px; max-width: 320px; aspect-ratio: 1/1; overflow: hidden; }
.fabric-img-box img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fabric-copy { flex: 1 1 320px; min-width: 260px; }
.fabric-copy p.lead { font-family: 'Cormorant', serif; font-style: italic; font-size: clamp(20px,2.8vw,30px); line-height: 1.4; margin: 0 0 24px; }
.advantages { display: flex; flex-wrap: wrap; gap: 12px; }
.advantages div { flex: 1 1 130px; padding: 12px 0; border-top: 1px solid #D8D8D3; font-size: 13px; letter-spacing: 1px; }
.showcase-row { display: flex; flex-wrap: wrap; gap: clamp(20px,4vw,40px); padding: clamp(24px,3.5vw,36px) 0; border-top: 1px solid #D8D8D3; }
.showcase-row.reverse { flex-direction: row-reverse; }
.showcase-img { flex: 1 1 260px; min-width: 220px; max-width: 340px; }
.showcase-img .box { aspect-ratio: 3/4; overflow: hidden; background: #EAE9E4; }
.showcase-img .box img { width: 100%; height: 100%; object-fit: cover; display: block; }
.showcase-info { flex: 1.4 1 300px; min-width: 240px; padding-top: 4px; }
.showcase-info .idx { font-size: 11px; letter-spacing: 2px; color: #8a8a85; }
.showcase-info h3 { font-family: 'Cormorant', serif; font-size: clamp(20px,2.6vw,26px); margin: 6px 0 18px; }
.showcase-meta { display: grid; grid-template-columns: repeat(3,1fr); gap: 0; }
.showcase-meta > div { padding: 10px 12px 10px 0; border-top: 1px solid #D8D8D3; }
.showcase-meta .label { font-size: 10px; letter-spacing: 1.5px; color: #8a8a85; margin-bottom: 4px; }
.showcase-meta .val { font-size: 12px; }
.showcase-info .view-collection { display: block; margin-top: 20px; background: none; border: none; padding: 0; cursor: pointer; font-size: 11px; letter-spacing: 2px; border-bottom: 1px solid #111111; }
.looks-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap: 16px; }
.look-card .box { aspect-ratio: 3/4; overflow: hidden; background: #EAE9E4; }
.look-card .box img { width: 100%; height: 100%; object-fit: cover; display: block; }
.look-card .caption-row { padding-top: 10px; display: flex; justify-content: space-between; }
.look-card .name { font-family: 'Cormorant', serif; font-size: 15px; }
.look-card .tag { font-size: 10px; letter-spacing: 1px; color: #8a8a85; }
.purchase-section { padding: clamp(40px,6vw,64px) clamp(16px,4vw,48px); border-top: 1px solid #D8D8D3; text-align: center; }
.purchase-section .eyebrow { font-size: 11px; letter-spacing: 2px; color: #8a8a85; }
.purchase-section h2 { font-family: 'Cormorant', serif; font-size: clamp(26px,4vw,44px); margin: 12px 0 28px; }
.purchase-actions { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }
.btn-outline { font-size: 12px; letter-spacing: 2.5px; padding: 16px 40px; border: 1px solid #111111; text-align: center; }
.back-btn-row { padding: 16px clamp(16px,4vw,48px) 0; }
.back-btn { background: none; border: none; padding: 0; cursor: pointer; font-size: 11px; letter-spacing: 2px; color: #8a8a85; }
.detail-hero { padding: clamp(16px,3vw,28px) clamp(16px,4vw,48px) 0; }
.detail-hero .img-box { aspect-ratio: 16/8; overflow: hidden; background: #EAE9E4; }
.detail-hero .img-box img { width: 100%; height: 100%; object-fit: cover; display: block; }
.detail-hero-title { padding: clamp(24px,4vw,40px) 0 clamp(16px,3vw,28px); text-align: center; }
.detail-hero-title .eyebrow { font-size: 11px; letter-spacing: 2px; color: #8a8a85; }
.detail-hero-title h1 { font-family: 'Cormorant', serif; font-weight: 300; font-size: clamp(36px,7vw,90px); line-height: 1; margin: 12px 0 0; }
.detail-intro { padding: clamp(24px,4vw,40px) clamp(16px,4vw,48px); border-top: 1px solid #D8D8D3; }
.detail-intro p { max-width: 560px; margin: 0 auto; font-size: 14px; line-height: 2; color: #3a3a37; text-align: center; }
.detail-flex { display: flex; flex-wrap: wrap; gap: clamp(24px,4vw,48px); }
.detail-img-col { flex: 1.2 1 320px; min-width: 260px; }
.detail-img-col .box { aspect-ratio: 4/5; overflow: hidden; background: #EAE9E4; }
.detail-img-col .box img { width: 100%; height: 100%; object-fit: cover; display: block; }
.detail-info-col { flex: 1 1 280px; min-width: 240px; display: flex; flex-direction: column; gap: 24px; padding-top: 4px; }
.detail-info-col .title { font-family: 'Cormorant', serif; font-size: clamp(22px,2.8vw,30px); }
.info-block { border-top: 1px solid #D8D8D3; padding-top: 14px; }
.info-block .label { font-size: 11px; letter-spacing: 2px; color: #8a8a85; margin-bottom: 6px; }
.info-block .val { font-size: 13px; }
.swatch-row { display: flex; gap: 11px; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; }
.swatch-btn { flex: 0 0 auto; width: 55px; height: 55px; padding: 0; border-radius: 2px; border: 1px solid #eeeeee; cursor: pointer; overflow: hidden; background: #fafafa; }
.swatch-btn.active { border: 2px solid #111111; }
.swatch-btn img { width: 100%; height: 100%; object-fit: contain; display: block; }
.site-footer { padding: clamp(40px,6vw,64px) clamp(16px,4vw,48px); border-top: 1px solid #D8D8D3; background: #EAE9E4; text-align: center; }
.site-footer .brand { font-family: 'Cormorant', serif; font-weight: 300; font-size: clamp(18px,2.4vw,24px); letter-spacing: 6px; margin-bottom: 12px; }
.site-footer .copy { font-size: 10px; letter-spacing: 1.5px; color: #8a8a85; }
.hidden { display: none !important; }