:root { color-scheme: light; --bg: #ffffff; --text: #000000; --dim: #666666; --border: #eeeeee; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { background: var(--bg); color: var(--text); font-family: -apple-system, system-ui, sans-serif; margin:0; padding:0; line-height:1.4; overflow-x: hidden; width: 100%; }
.master-nav { position:sticky; top:0; background: #fff; border-bottom:1px solid var(--border); z-index:9000; display:flex; flex-direction:column; align-items:center; width: 100%; }
.nav-logo { color: #000 !important; text-decoration:none; letter-spacing:4px; font-weight:900; font-size:1.1em; padding: 15px 0 5px 0; text-transform: uppercase; }
.nav-links { display:flex; gap:15px; font-size:0.7em; letter-spacing:1px; padding: 10px 25px; overflow-x: auto; white-space: nowrap; width: 100%; justify-content: center; }
.nav-links::-webkit-scrollbar { display: none; }
.nav-links a { color: #000 !important; text-decoration:none; font-weight: 800; padding: 5px 2px; }
.search-highlight { border-bottom: 2px solid #000; }
@media (min-width: 768px) {
    .master-nav { flex-direction:row; justify-content:space-between; height:85px; padding:0 40px; }
    .nav-logo { font-size: 1.5em; padding:0; }
    .nav-links { gap:25px; font-size:0.85em; padding:0; width:auto; justify-content: flex-end; overflow: visible; }
}
.intro-container { max-width: 1000px; margin: 40px auto; padding: 0 15px; text-align: center; }
.intro-text { font-size: 1.25em; line-height: 1.7; color: #000; margin-bottom: 35px; display: block; font-weight: 500; }
.filter-toggle-btn { padding: 18px 60px; background: #000; color: #fff !important; border: none; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; cursor: pointer; }
#filter-page { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #fff; z-index: 10001; display: none; overflow-y: auto; padding: 25px; }
#filter-page.active { display: block; }
.filter-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid #000; padding-bottom: 15px; margin-bottom: 30px; }
.filter-header h2 { font-size: 1.1em; letter-spacing: 2px; font-weight: 900; margin: 0; }
.close-btn { font-size: 2.5em; cursor: pointer; line-height: 1; }
.filter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 30px; max-width: 1200px; margin: auto; }
.filter-item h3 { font-size: 0.7em; text-transform: uppercase; color: #999; margin-bottom: 10px; font-weight: 800; }
.filter-item select, .filter-item input { width: 100%; border: 1px solid #ddd; padding: 14px; font-size: 1em; border-radius: 0; outline: none; background: #fff; color: #000; }
.filter-actions { text-align: center; margin-top: 50px; padding-bottom: 60px; }
.apply-btn { padding: 22px 100px; background: #000; color: #fff !important; font-weight: 900; border: none; text-transform: uppercase; letter-spacing: 2px; cursor: pointer; width: 100%; max-width: 400px; }
.results-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 12px; background: #fff; width: 100%; min-height: 400px; }
@media (min-width: 1024px) { .results-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important; gap: 40px; padding: 40px; } }
.art-card { text-decoration:none; color: #000 !important; display:block; width: 100%; overflow: hidden; }
.art-card .img-box { width:100%; aspect-ratio: 1/1; background:#f9f9f9; display:flex; align-items:center; justify-content:center; overflow:hidden; border: 1px solid #f3f3f3; }
.art-card img { width:100%; height:100%; object-fit: contain; }
.art-card strong { color: #000; font-size:0.85em; font-weight:800; margin-top:14px; display:block; text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.meta-details { font-size:0.75em; color: #666 !important; margin-bottom:5px; text-transform: uppercase; }
.price-label { font-weight: 900; font-size: 1.1em; color: #000; }
.layout-grid { display: flex; flex-direction: column; gap: 40px; padding: 15px; width: 100%; }
@media (min-width: 1024px) { .layout-grid { display: grid; grid-template-columns: 1fr 420px; gap: 60px; padding: 40px; } }
.stage-container { position:relative; width:100%; background:#f9f9f9; text-align:center; overflow:hidden; min-height:300px; display:flex; align-items:center; justify-content:center; border: 1px solid #eee; }
.hero-image { max-width:100%; max-height:50vh; object-fit: contain; transition: opacity 0.3s ease; }
@media (min-width: 768px) { .hero-image { max-height: 75vh; } }
#zoom-lens { position:absolute; border:1px solid #ccc; width:180px; height:180px; visibility:hidden; background-repeat:no-repeat; border-radius: 50%; transform: translate(-50%, -50%); z-index:100; box-shadow: 0 0 25px rgba(0,0,0,0.3); pointer-events:none; background-color: #fff; }
.thumb-strip { display:flex; gap:10px; overflow-x: auto; padding: 15px 0; -webkit-overflow-scrolling: touch; min-height: 100px; justify-content: center; width: 100%; scrollbar-width: none; }
.thumb-strip::-webkit-scrollbar { display: none; }
.thumb { width:75px; height:75px; object-fit:cover; cursor:pointer; border:1px solid #eee; opacity:0.6; flex-shrink:0; transition: all 0.2s; }
.thumb.active { border: 3px solid #000; opacity:1; }
.tab-header { display:flex; border-bottom: 2px solid #eee; margin-bottom:20px; }
.tab-btn { flex:1; padding:18px; border:none; background:none; font-weight:900; letter-spacing: 1px; cursor:pointer; font-size:0.85em; color:#999; text-transform: uppercase; }
.tab-btn.active { color:#000; border-bottom:4px solid #000; }
.tab-content { display:none; }
.tab-content.active { display:block; }
.calc-container { background: #f9f9f9; padding: 25px; border: 1px solid #eee; margin-top: 20px; }
.calc-label { font-size: 0.7em; font-weight: 900; text-transform: uppercase; color: #999; display: block; margin-bottom: 8px; }
.calc-input { width: 100%; padding: 15px; border: 2px solid #000; margin-bottom: 20px; font-size: 1em; font-weight: bold; background: #fff; color: #000; }
.spec-row { display:flex; justify-content:space-between; padding:15px 0; border-bottom:1px solid #f9f9f9; font-size:1em; color: #000; }
.spec-row span:first-child { color: #999; text-transform: uppercase; font-size: 0.7em; font-weight: 900; }
.static-container { max-width: 850px; margin: auto; padding: 40px 15px; width: 100%; }
.master-footer { margin-top:100px; padding:100px 15px; border-top:1px solid var(--border); text-align:center; color: #999; font-size:0.8em; font-weight: 700; letter-spacing: 1.5px; width: 100%; }