:root {
    --clm-primary: #1a1a1a;
    --clm-primary-dark: #000000;
    --clm-accent: #cfae8b;
    --clm-accent-dark: #b5926b;
    --clm-bg: #faf9f6;
    --clm-card-bg: #ffffff;
    --clm-border: #e6e4df;
    --clm-text: #4a4a4a;
    --clm-text-serif: "Playfair Display", "Georgia", "Times New Roman", serif;
    --clm-sub: #888888;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--clm-bg); color: var(--clm-text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 13px; line-height: 1.8; overflow-x: hidden; }
a { color: inherit; text-decoration: none; transition: 0.3s ease; }

.clm-header { background: var(--clm-bg); padding: 30px 0 20px; border-bottom: 1px solid var(--clm-border); text-align: center; }
.clm-header-inner { max-width: 1280px; margin: 0 auto; padding: 0 15px; display: flex; justify-content: space-between; align-items: center; }
.clm-logo img { height: 35px; width: auto; max-width: 180px; object-fit: contain; }

.clm-header-tools { display: flex; gap: 20px; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--clm-primary); font-weight: 600; }
.clm-header-tools a:hover { color: var(--clm-accent); }

.clm-nav-bar { background: var(--clm-bg); border-bottom: 1px solid var(--clm-border); padding: 5px 0; }
.clm-nav-inner { max-width: 1280px; margin: 0 auto; padding: 0 15px; }
.clm-nav-list { display: flex; list-style: none; flex-wrap: wrap; justify-content: center; gap: 40px; }
.clm-nav-list li a { display: block; padding: 15px 0; color: var(--clm-primary); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; }
.clm-nav-list li a:hover, .clm-nav-list li.active a { color: var(--clm-accent); }

.clm-notice { max-width: 1280px; margin: 20px auto 0; padding: 12px 15px; background: #ffffff; border: 1px solid var(--clm-border); color: var(--clm-primary); font-size: 12px; text-align: center; letter-spacing: 1px; text-transform: uppercase; }

.clm-container { max-width: 1280px; margin: 40px auto; padding: 0 15px; min-height: 60vh; }

.clm-hero-split { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-bottom: 60px; align-items: center; }
.clm-hero-left { text-align: center; padding: 40px; background: #ffffff; border: 1px solid var(--clm-border); }
.clm-hero-left h1 { font-family: var(--clm-text-serif); font-size: 42px; font-weight: 400; color: var(--clm-primary); margin-bottom: 20px; letter-spacing: 2px; }
.clm-hero-left p { font-size: 14px; color: var(--clm-sub); margin-bottom: 30px; font-style: italic; font-family: var(--clm-text-serif); }
.clm-hero-right { display: grid; grid-template-rows: 1fr 1fr; gap: 20px; height: 100%; }
.clm-hero-side-card { background: #ffffff; border: 1px solid var(--clm-border); padding: 20px; display: flex; align-items: center; justify-content: space-between; transition: 0.3s; }
.clm-hero-side-card:hover { border-color: var(--clm-accent); }

.clm-section-head { text-align: center; margin: 60px 0 35px; }
.clm-section-title { font-family: var(--clm-text-serif); font-size: 28px; font-weight: 400; color: var(--clm-primary); text-transform: uppercase; letter-spacing: 3px; }
.clm-section-sub { font-size: 12px; color: var(--clm-sub); margin-top: 10px; font-style: italic; font-family: var(--clm-text-serif); letter-spacing: 1px; }

.clm-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.clm-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.clm-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; }

.clm-card-item { background: transparent; text-align: center; transition: 0.3s; position: relative; padding-bottom: 15px; }
.clm-card-item:hover .clm-card-img-box img { transform: scale(1.05); }
.clm-card-img-box { width: 100%; height: 280px; background: #f0ebe1; margin-bottom: 20px; display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; }
.clm-card-img-box img { max-width: 85%; max-height: 85%; object-fit: contain; transition: 0.6s ease; }
.clm-card-badge { position: absolute; top: 15px; left: 15px; background: var(--clm-primary); color: #ffffff; font-size: 10px; font-weight: 600; padding: 4px 10px; text-transform: uppercase; letter-spacing: 1px; z-index: 2; }
.clm-card-name { font-family: var(--clm-text-serif); font-size: 15px; color: var(--clm-primary); height: 24px; overflow: hidden; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 1px; }
.clm-card-price { font-size: 14px; color: var(--clm-sub); margin-bottom: 15px; }
.clm-btn-buy { display: inline-block; padding: 8px 24px; border: 1px solid var(--clm-primary); color: var(--clm-primary); font-size: 11px; text-transform: uppercase; letter-spacing: 2px; transition: 0.3s; background: transparent; }
.clm-btn-buy:hover { background: var(--clm-primary); color: #ffffff; border-color: var(--clm-primary); }

.clm-full-banner { background: #333333; color: #ffffff; padding: 80px 20px; text-align: center; margin: 60px 0; position: relative; overflow: hidden; }
.clm-full-banner h2 { font-family: var(--clm-text-serif); font-size: 36px; font-weight: 400; margin-bottom: 15px; letter-spacing: 2px; }
.clm-full-banner p { font-size: 14px; color: #aaaaaa; margin-bottom: 25px; letter-spacing: 1px; }
.clm-full-banner .clm-btn-buy { color: #ffffff; border-color: #ffffff; }
.clm-full-banner .clm-btn-buy:hover { background: #ffffff; color: #000000; }

.clm-blog-card { background: #ffffff; border: 1px solid var(--clm-border); padding: 25px; text-align: left; }
.clm-blog-img { width: 100%; height: 180px; background: #f0ebe1; margin-bottom: 20px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.clm-blog-img img { max-width: 60%; max-height: 60%; object-fit: contain; }
.clm-blog-title { font-family: var(--clm-text-serif); font-size: 16px; color: var(--clm-primary); margin-bottom: 10px; line-height: 1.4; text-transform: uppercase; letter-spacing: 1px; }
.clm-blog-meta { font-size: 11px; color: var(--clm-accent); margin-bottom: 15px; text-transform: uppercase; letter-spacing: 1px; }

.clm-box { background: #ffffff; border: 1px solid var(--clm-border); margin-bottom: 40px; padding: 30px; }

.clm-detail-layout { display: flex; gap: 50px; margin-bottom: 50px; }
.clm-detail-media { flex: 0 0 400px; text-align: center; }
.clm-detail-img-wrap { width: 100%; height: 400px; margin-bottom: 15px; border: 1px solid var(--clm-border); display: flex; align-items: center; justify-content: center; background: #f0ebe1; padding: 20px; }
.clm-detail-img-wrap img { max-width: 80%; max-height: 80%; object-fit: contain; }
.clm-detail-info { flex: 1; padding-top: 20px; }
.clm-detail-name { font-family: var(--clm-text-serif); font-size: 32px; font-weight: 400; color: var(--clm-primary); margin-bottom: 20px; letter-spacing: 1px; text-transform: uppercase; }
.clm-detail-meta-box { border-top: 1px solid var(--clm-border); border-bottom: 1px solid var(--clm-border); padding: 20px 0; margin-bottom: 30px; display: flex; justify-content: space-between; align-items: center; }

.clm-form-group { margin-bottom: 25px; }
.clm-form-label { display: block; font-weight: 600; margin-bottom: 10px; font-size: 11px; color: var(--clm-sub); text-transform: uppercase; letter-spacing: 2px; }
.clm-input { width: 100%; height: 45px; background: transparent; border: 1px solid var(--clm-border); padding: 0 15px; outline: none; font-size: 13px; color: var(--clm-primary); transition: 0.3s; }
.clm-input:focus { border-color: var(--clm-primary); }
.clm-btn-submit { width: 100%; height: 50px; background: var(--clm-primary); color: #ffffff; font-size: 13px; font-weight: 600; border: none; cursor: pointer; transition: 0.3s; text-transform: uppercase; letter-spacing: 2px; }
.clm-btn-submit:hover { background: var(--clm-accent); }

.clm-footer { background: #ffffff; border-top: 1px solid var(--clm-border); padding: 50px 15px; text-align: center; margin-top: 60px; }
.clm-footer-logo { font-family: var(--clm-text-serif); font-size: 24px; color: var(--clm-primary); letter-spacing: 4px; margin-bottom: 20px; text-transform: uppercase; }
.clm-footer-links { margin-bottom: 20px; }
.clm-footer-links a { color: var(--clm-sub); margin: 0 15px; font-size: 11px; text-transform: uppercase; letter-spacing: 2px; font-weight: 600; }
.clm-footer-links a:hover { color: var(--clm-primary); }
.clm-copyright { font-size: 12px; color: #aaaaaa; }

@media (max-width: 992px) {
    .clm-hero-split { grid-template-columns: 1fr; }
    .clm-grid-4 { grid-template-columns: repeat(2, 1fr); }
    .clm-grid-3 { grid-template-columns: 1fr; }
    .clm-detail-layout { flex-direction: column; }
    .clm-detail-media { flex: 1; }
}
@media (max-width: 640px) {
    .clm-grid-4 { grid-template-columns: 1fr; }
    .clm-nav-list { gap: 15px; }
    .clm-nav-list li a { font-size: 11px; padding: 10px 0; }
}