:root {
  --ink: #20221f;
  --muted: #72766e;
  --line: #dedfd9;
  --paper: #f5f5f1;
  --white: #fff;
  --accent: #a55c3a;
  --accent-dark: #7e3f25;
  --green: #233d35;
  --shadow: 0 24px 60px rgba(25, 29, 25, .13);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: "DM Sans", "Noto Sans SC", sans-serif; }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
.site-header { height: 76px; padding: 0 4vw; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; background: rgba(245,245,241,.94); position: sticky; top: 0; z-index: 20; border-bottom: 1px solid transparent; backdrop-filter: blur(14px); }
.brand { display: flex; align-items: center; }
.brand-logo { width:118px; height:48px; object-fit:contain; object-position:left center; }
.main-nav { display:flex; gap:38px; font-size:14px; }
.main-nav a:hover { color:var(--accent); }
.header-actions { justify-self:end; display:flex; gap:18px; align-items:center; }
.text-button,.sample-button,.icon-button { border:0; background:none; color:inherit; }
.text-button { font-size:12px; letter-spacing:.12em; }
.sample-button { display:flex; align-items:center; gap:10px; font-size:13px; }
.count { display:grid; place-items:center; width:22px; height:22px; background:var(--ink); color:white; border-radius:50%; font-size:11px; }
.hero { min-height: calc(100vh - 76px); display:grid; grid-template-columns: 47% 53%; }
.hero-copy { padding: 11vh 6vw 8vh 8vw; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; }
.eyebrow, small { color:var(--accent); letter-spacing:.18em; font-size:10px; font-weight:600; }
.hero h1 { max-width:620px; font-family: Georgia, "Noto Serif SC", serif; font-size:clamp(48px,6vw,92px); line-height:.98; font-weight:400; margin:23px 0 30px; letter-spacing:-.045em; }
.hero p { max-width:490px; color:var(--muted); font-size:16px; line-height:1.9; }
.primary-button,.outline-button { border:1px solid var(--ink); padding:15px 23px; margin-top:22px; background:var(--ink); color:white; font-size:13px; transition:.2s; }
.primary-button:hover { background:var(--accent-dark); border-color:var(--accent-dark); }
.outline-button { background:transparent; color:var(--ink); }
.hero-visual { position:relative; overflow:hidden; background:#d7d4cc; min-height:620px; }
.hero-surface { position:absolute; inset:7% 7% 7% 0; background:#d7d4cc center/cover no-repeat; transform:skewY(-5deg); box-shadow:var(--shadow); }
.hero-label { position:absolute; right:4%; bottom:8%; width:180px; background:white; padding:20px; box-shadow:var(--shadow); }
.hero-label b { display:block; margin-bottom:6px; }
.hero-label span { color:var(--muted); font-size:12px; }
.category-strip { padding:100px 6vw; }
.section-head { display:flex; justify-content:space-between; align-items:end; margin-bottom:40px; gap:20px; }
.section-head h2 { font:400 clamp(34px,4vw,54px) Georgia,serif; margin:10px 0 0; }
.section-head p { max-width:420px; color:var(--muted); line-height:1.7; }
.category-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.category-card { min-height:430px; padding:38px; position:relative; overflow:hidden; color:white; display:flex; flex-direction:column; justify-content:flex-end; }
.category-card h3 { font:400 38px Georgia,serif; margin:0 0 8px; position:relative; }
.category-card p { margin:0; opacity:.75; position:relative; }
.category-card::before { content:""; position:absolute; inset:0; transition:.5s; background:var(--card-bg) center/cover no-repeat; }
.category-card:hover::before { transform:scale(1.04); }
.cat-aluminum { --card-bg:linear-gradient(125deg,#29312f,#8a918d); }
.cat-decor { --card-bg:linear-gradient(125deg,#8c4e36,#d1ac8d); }
.library { padding:54px 5vw 100px; }
.library-top { display:flex; justify-content:space-between; gap:30px; align-items:end; margin-bottom:35px; }
.library h1 { font:400 clamp(42px,5vw,68px) Georgia,serif; margin:8px 0 0; }
.search { width:min(400px,100%); border:0; border-bottom:1px solid var(--ink); background:transparent; padding:13px 3px; outline:none; }
.filters { display:flex; gap:9px; flex-wrap:wrap; margin-bottom:38px; }
.filter { padding:10px 16px; border:1px solid var(--line); background:transparent; color:var(--muted); font-size:12px; }
.filter.active { color:white; background:var(--green); border-color:var(--green); }
.result-meta { color:var(--muted); font-size:12px; margin-bottom:18px; }
.global-search-hint { display:inline-block; margin-left:10px; padding-left:10px; border-left:1px solid var(--line); color:var(--accent); }
.series-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:34px 18px; }
.series-card { cursor:pointer; transition:transform .38s cubic-bezier(.22,.61,.36,1); }
.series-image,.sku-image { aspect-ratio:4/3; position:relative; overflow:hidden; background:var(--surface,#ddd) center/cover no-repeat; }
.series-image::before,.sku-image::before { content:""; position:absolute; inset:0; background:inherit; background-position:center; background-size:cover; transition:transform .65s cubic-bezier(.22,.61,.36,1),filter .45s ease; }
.series-image::after,.sku-image::after { content:""; position:absolute; inset:0; background:repeating-linear-gradient(115deg,transparent 0 4px,rgba(255,255,255,.06) 5px 6px); mix-blend-mode:overlay; }
.series-card:hover { transform:translateY(-6px); }
.series-card:hover .series-image::before { transform:scale(1.045); filter:saturate(1.04) contrast(1.02); }
.series-card:hover .series-image { box-shadow:0 16px 32px rgba(28,32,28,.12); }
.view-series { position:absolute; right:14px; bottom:14px; z-index:2; padding:9px 11px; background:rgba(255,255,255,.9); color:var(--ink); font-size:10px; opacity:0; transform:translateY(8px); transition:.32s ease; backdrop-filter:blur(5px); }
.series-card:hover .view-series { opacity:1; transform:none; }
.series-info { display:flex; justify-content:space-between; margin-top:14px; }
.series-info h3 { margin:0; font-size:15px; font-weight:500; }
.series-info span { color:var(--muted); font-size:11px; }
.series-page { padding:42px 5vw 100px; }
.breadcrumb { color:var(--muted); font-size:12px; margin-bottom:44px; }
.back-button { display:inline-flex; align-items:center; gap:9px; border:0; background:none; padding:0; margin:0 0 24px; color:var(--muted); font-size:12px; }
.back-button:hover { color:var(--accent); }
.series-title { display:flex; justify-content:space-between; align-items:end; border-bottom:1px solid var(--line); padding-bottom:32px; margin-bottom:40px; }
.series-title h1 { font:400 clamp(48px,6vw,78px) Georgia,serif; margin:6px 0 0; }
.series-title p { max-width:470px; color:var(--muted); line-height:1.8; }
.sku-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:32px 18px; }
.sku-card { position:relative; transition:transform .38s cubic-bezier(.22,.61,.36,1); }
.sku-link { display:block; }
.sku-card:hover { transform:translateY(-5px); }
.sku-link:hover h3 { color:var(--accent); }
.sku-card:hover .sku-image::before { transform:scale(1.055); filter:saturate(1.05); }
.sku-card:hover .sku-image { box-shadow:0 14px 28px rgba(28,32,28,.11); }
.sku-card h3 { transition:color .25s ease; }
.sku-card h3 { margin:13px 0 4px; font-size:14px; }
.sku-card p { margin:0; color:var(--muted); font-size:12px; }
.add-button { position:absolute; right:10px; top:10px; z-index:2; width:34px; height:34px; border:0; background:rgba(255,255,255,.9); font-size:18px; }
.add-button.added { background:var(--green); color:white; }
.sku-detail { padding:42px 5vw 100px; }
.detail-grid { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(360px,.65fr); gap:clamp(45px,7vw,110px); align-items:start; }
.detail-image-wrap { background:#e8e8e3; min-height:580px; display:grid; place-items:center; overflow:hidden; }
.detail-image { width:100%; height:auto; max-height:78vh; object-fit:contain; display:block; }
.detail-copy { padding-top:30px; position:sticky; top:105px; }
.detail-copy h1 { font:400 clamp(45px,5vw,72px) Georgia,serif; letter-spacing:-.03em; margin:11px 0 22px; }
.detail-description { color:var(--muted); line-height:1.8; font-size:14px; }
.spec-list { border-top:1px solid var(--line); margin:32px 0 5px; }
.spec-list div { display:grid; grid-template-columns:42% 58%; border-bottom:1px solid var(--line); padding:14px 0; font-size:13px; }
.spec-list dt { color:var(--muted); }
.spec-list dd { margin:0; font-weight:500; }
.detail-select { width:100%; }
.detail-select.is-selected { background:var(--green); border-color:var(--green); }
.price-note { color:var(--muted); font-size:11px; text-align:center; }
.selection-panel { position:fixed; right:0; top:0; bottom:0; width:min(460px,100%); background:var(--white); z-index:50; transform:translateX(105%); transition:.32s ease; display:flex; flex-direction:column; box-shadow:var(--shadow); }
.selection-panel.open { transform:none; }
.scrim { position:fixed; inset:0; background:rgba(20,20,18,.42); z-index:40; opacity:0; pointer-events:none; transition:.25s; }
.scrim.open { opacity:1; pointer-events:auto; }
.panel-head { display:flex; justify-content:space-between; padding:34px; border-bottom:1px solid var(--line); }
.panel-head h2 { margin:8px 0 0; font:400 28px Georgia,serif; }
.icon-button { font-size:28px; }
.panel-body { flex:1; overflow:auto; padding:10px 34px; }
.selected-item { display:grid; grid-template-columns:76px 1fr auto; gap:16px; align-items:center; padding:18px 0; border-bottom:1px solid var(--line); }
.selected-thumb { width:76px; height:60px; background:var(--surface,#ddd) center/cover no-repeat; }
.selected-item b { display:block; font-size:14px; }
.selected-item span { color:var(--muted); font-size:11px; }
.remove { border:0; background:none; color:var(--muted); }
.empty { color:var(--muted); text-align:center; padding:70px 20px; line-height:1.8; }
.panel-foot { padding:24px 34px 34px; border-top:1px solid var(--line); }
.panel-foot p { color:var(--muted); font-size:12px; line-height:1.6; }
.full { width:100%; margin-top:10px; }
dialog { border:0; padding:0; width:min(680px,calc(100% - 30px)); box-shadow:var(--shadow); }
dialog::backdrop { background:rgba(20,20,18,.58); }
.inquiry-form { padding:48px; position:relative; }
.inquiry-form h2 { font:400 38px Georgia,serif; margin:12px 0; }
.inquiry-form > p { color:var(--muted); }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:30px; }
label span { display:block; font-size:12px; margin-bottom:8px; }
input,textarea { width:100%; border:1px solid var(--line); padding:13px; background:#fafaf8; outline:none; }
input:focus,textarea:focus { border-color:var(--ink); }
.dialog-close { position:absolute; right:24px; top:20px; border:0; background:none; font-size:27px; }
.form-note { margin:12px 0 0; color:var(--muted); font-size:11px; line-height:1.6; text-align:center; }
.about { padding:12vh 8vw; max-width:1000px; }
.about h1 { font:400 clamp(48px,7vw,90px) Georgia,serif; }
.about p { max-width:700px; color:var(--muted); font-size:18px; line-height:1.9; }
.admin-page { padding:52px 5vw 100px; }
.admin-head { display:flex; justify-content:space-between; gap:30px; align-items:start; margin-bottom:38px; }
.admin-head h1 { font:400 clamp(40px,5vw,64px) Georgia,serif; margin:8px 0 12px; }
.admin-head p { color:var(--muted); max-width:660px; line-height:1.7; }
.local-badge { border:1px solid #d7b79e; background:#f6ebe3; color:var(--accent-dark); padding:8px 12px; font-size:10px; letter-spacing:.12em; white-space:nowrap; }
.admin-layout { display:grid; grid-template-columns:260px minmax(0,1fr); min-height:680px; background:white; border:1px solid var(--line); }
.admin-sidebar { border-right:1px solid var(--line); max-height:780px; overflow:auto; }
.admin-search { position:sticky; top:0; z-index:2; border:0; border-bottom:1px solid var(--line); background:white; padding:18px; }
.admin-result { width:100%; display:flex; justify-content:space-between; align-items:center; border:0; border-bottom:1px solid #eeeeea; background:white; padding:13px 18px; text-align:left; }
.admin-result:hover,.admin-result.active { background:#eef1ed; }
.admin-result small { color:var(--muted); letter-spacing:0; }
.result-limit { padding:15px; color:var(--muted); font-size:11px; }
.admin-editor { padding:38px clamp(24px,4vw,58px); overflow:auto; }
.editor-title { display:flex; justify-content:space-between; gap:20px; align-items:center; border-bottom:1px solid var(--line); padding-bottom:22px; margin-bottom:28px; }
.editor-title h2 { font:400 40px Georgia,serif; margin:5px 0 0; }
.compact { margin:0; padding:10px 14px; }
.editor-image-row { display:grid; grid-template-columns:220px 1fr; gap:25px; align-items:center; margin-bottom:30px; }
.editor-image-row img { width:220px; height:165px; object-fit:cover; background:var(--paper); }
.editor-image-row p { color:var(--muted); font-size:11px; line-height:1.6; }
.upload-button { display:inline-block; border:1px solid var(--ink); padding:11px 15px; font-size:12px; cursor:pointer; }
.admin-form-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-bottom:18px; }
.admin-editor > form > label { margin-top:18px; display:block; }
.editor-actions { display:flex; justify-content:space-between; align-items:center; border-top:1px solid var(--line); margin-top:28px; padding-top:8px; }
.text-danger { border:0; background:none; color:#985342; font-size:12px; }
.admin-status { color:var(--green); font-size:12px; min-height:20px; margin-top:14px; }
.toast { position:fixed; bottom:25px; left:50%; transform:translate(-50%,20px); background:var(--green); color:white; padding:14px 22px; opacity:0; transition:.25s; z-index:100; font-size:13px; }
.toast.show { opacity:1; transform:translate(-50%,0); }
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto !important; transition-duration:.01ms !important; animation-duration:.01ms !important; }
}
@media (max-width:900px) {
  .site-header { grid-template-columns:1fr auto; padding:0 20px; }
  .main-nav { display:none; }
  .hero { grid-template-columns:1fr; }
  .hero-copy { padding:70px 25px; min-height:550px; }
  .hero-visual { min-height:520px; }
  .category-grid { grid-template-columns:1fr; }
  .series-grid,.sku-grid { grid-template-columns:repeat(2,1fr); }
  .library-top,.series-title { display:block; }
  .detail-grid { grid-template-columns:1fr; }
  .detail-copy { position:static; padding-top:0; }
  .admin-layout { grid-template-columns:1fr; }
  .admin-sidebar { border-right:0; border-bottom:1px solid var(--line); max-height:260px; }
  .search { margin-top:25px; }
}
@media (max-width:560px) {
  .site-header { height:66px; }
  .brand-logo { width:92px; }
  .header-actions { gap:8px; }
  .sample-button > span:first-child { display:none; }
  .hero { min-height:calc(100vh - 66px); }
  .hero-copy { min-height:470px; padding:55px 22px; }
  .hero h1 { font-size:49px; }
  .hero-visual { min-height:390px; }
  .hero-label { width:150px; }
  .category-strip,.library,.series-page { padding-left:20px; padding-right:20px; }
  .category-card { min-height:330px; padding:25px; }
  .section-head { display:block; }
  .series-grid,.sku-grid { gap:26px 10px; }
  .series-title h1 { font-size:48px; }
  .sku-detail,.admin-page { padding-left:20px; padding-right:20px; }
  .detail-image-wrap { min-height:320px; }
  .detail-copy h1 { font-size:42px; }
  .admin-head { display:block; }
  .local-badge { display:inline-block; margin-top:10px; }
  .admin-page { padding-top:35px; }
  .admin-editor { padding:24px 18px; }
  .editor-title { display:block; }
  .editor-title .outline-button { display:inline-block; margin-top:15px; }
  .editor-image-row { grid-template-columns:1fr; }
  .editor-image-row img { width:100%; height:auto; max-height:300px; }
  .admin-form-grid { grid-template-columns:1fr; }
  .form-grid { grid-template-columns:1fr; }
  .inquiry-form { padding:38px 22px 25px; }
  .inquiry-form h2 { font-size:30px; }
}