@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,300..800&display=swap');
:root { --font-primary: 'Bricolage Grotesque', sans-serif; --primary: #1A2F24; --gold: #D4AF37; --cream: #FDFBF7; }
body { font-family: var(--font-primary); background: var(--cream); color: #222; margin:0; padding:0; overflow-x: hidden; }
a { text-decoration: none; color: inherit; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* Header & Mobile Menu */
.site-header { background: #fff; padding: 20px 0; border-bottom: 1px solid rgba(0,0,0,0.05); position: relative; z-index: 999; }
.header-container { display: flex; justify-content: space-between; align-items: center; }
.site-logo { max-height: 50px; }
.brand-title { font-size: 28px; font-weight: 800; color: var(--primary); letter-spacing: 1px; }

.header-right { display: flex; align-items: center; gap: 40px; }
.site-nav { display: flex; gap: 24px; }
.site-nav a { font-size: 15px; font-weight: 600; color: var(--primary); transition: 0.3s; }
.site-nav a:hover { color: var(--gold); }
.lang-switch { display: flex; gap: 10px; }
.lang-switch a { font-size: 13px; font-weight: 700; color: #999; }
.lang-switch a.active { color: var(--gold); }

.mobile-menu-toggle { display: none; background: none; border: none; cursor: pointer; flex-direction: column; gap: 6px; z-index: 1000; }
.mobile-menu-toggle span { display: block; width: 30px; height: 3px; background: var(--primary); transition: 0.3s; }

/* Filters */
.category-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.pill { padding: 8px 20px; background: #fff; border: 1px solid #eee; border-radius: 30px; font-size: 14px; font-weight: 600; transition: 0.3s; }
.pill.active, .pill:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
.catalog-sort { margin-bottom: 30px; }
.catalog-sort select { padding: 10px 20px; border: 1px solid #ddd; border-radius: 8px; font-family: var(--font-primary); font-size: 14px; outline: none; }

/* Grid & Cards */
.book-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 30px; }
.book-card { background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.03); transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.book-card:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(0,0,0,0.08); }
.card-thumb-link { display: block; aspect-ratio: 3/4; overflow: hidden; background: #f5f5f5; }
.card-cover { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.book-card:hover .card-cover { transform: scale(1.05); }
.card-details { padding: 20px; }
.card-title { font-size: 17px; font-weight: 700; color: var(--primary); margin: 0 0 10px; }
.current-price { font-size: 18px; font-weight: 800; color: var(--gold); }
.old-price { font-size: 14px; text-decoration: line-through; color: #999; margin-right: 8px; }

/* Dynamic Pages (About Us) */
.dynamic-page { padding: 60px 20px; }
.page-title { font-size: 36px; color: var(--primary); text-align: center; margin-bottom: 50px; }
.about-block { display: flex; gap: 40px; margin-bottom: 50px; align-items: center; }
.about-block:nth-child(even) { flex-direction: row-reverse; }
.about-block-img img { max-width: 400px; border-radius: 16px; box-shadow: 0 20px 40px rgba(0,0,0,0.1); }
.about-block-text h2 { font-size: 28px; color: var(--gold); margin-bottom: 20px; }
.about-block-text p { font-size: 16px; line-height: 1.8; color: #555; }

/* Details */
.book-detail-page { padding: 60px 0; }
.detail-layout { display: grid; grid-template-columns: 380px 1fr; gap: 60px; }
.detail-visual { background: #fff; padding: 20px; border-radius: 16px; box-shadow: 0 15px 40px rgba(0,0,0,0.05); }
.detail-cover { width: 100%; height: auto; border-radius: 8px; }

/* Editorial storefront */
.hero-section { position: relative; overflow: hidden; background: radial-gradient(ellipse at 76% 50%, rgba(212,175,55,.12), transparent 30%), linear-gradient(115deg,#12271e,#244332 64%,#31513d); color:#fff; }
.hero-inner { min-height: 490px; display:flex; align-items:center; justify-content:space-between; gap:48px; padding-top:70px; padding-bottom:70px; }
.hero-content { max-width:620px; position:relative; z-index:1; }
.eyebrow { display:block; color:#bd9b49; font-size:12px; font-weight:800; letter-spacing:2px; margin-bottom:14px; }
.hero-title { max-width:600px; color:#fff; font-size:clamp(38px,5vw,64px); line-height:1.08; letter-spacing:-1.7px; margin:0 0 20px; }
.hero-desc { color:rgba(255,255,255,.76); font-size:17px; line-height:1.8; max-width:560px; margin:0; }
.hero-actions { display:flex; flex-wrap:wrap; align-items:center; gap:20px; margin-top:30px; }
.btn-hero { display:inline-flex; gap:18px; align-items:center; padding:14px 22px; border-radius:7px; background:#d4af58; color:#192d22; font-weight:800; box-shadow:0 10px 24px #101e1840; }
.btn-hero:hover { background:#e3c574; }
.hero-note { color:rgba(255,255,255,.58); font-size:13px; }
.hero-art { position:relative; width:330px; height:350px; flex:0 0 330px; display:grid; place-items:center; }
.hero-orbit { position:absolute; width:290px; height:290px; border:1px solid #d4af583d; border-radius:50%; box-shadow:0 0 0 28px #d4af5808,0 0 0 58px #d4af5805; }
.hero-book { position:relative; z-index:1; width:190px; height:270px; padding:22px 19px; display:flex; flex-direction:column; justify-content:space-between; background:linear-gradient(135deg,#ddc67d,#a98a3e 30%,#314533 31%,#1c3025); border:1px solid #eddaa0; border-radius:3px 10px 10px 3px; box-shadow:18px 21px 38px #07130c88; transform:rotate(7deg); }
.hero-book:before { content:""; position:absolute; left:10px; top:0; bottom:0; border-left:1px solid #ffffff4d; }
.hero-book span { font-size:10px; letter-spacing:3px; color:#f5e8bd; }
.hero-book strong { font-family:Georgia,serif; color:#f7efda; font-size:25px; line-height:1.25; letter-spacing:1px; }
.hero-book i { width:36px; border-top:1px solid #d4af58; }
.hero-stamp { position:absolute; z-index:2; right:0; bottom:34px; width:74px; height:74px; display:grid; place-content:center; border:1px solid #d4af58; border-radius:50%; color:#e4ca7e; text-align:center; font-size:9px; line-height:1.3; letter-spacing:1px; transform:rotate(12deg); }
.catalog-preview { padding-top:76px; padding-bottom:88px; }
.section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:28px; }
.section-head h2 { margin:0 0 5px; color:#1a3325; font:700 clamp(26px,3vw,36px)/1.2 Georgia,serif; }
.section-head p { color:#73796f; margin:0; }
.text-link { color:#536c4d; font-size:14px; font-weight:800; white-space:nowrap; padding-bottom:5px; }
.book-grid { grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:24px; }
.book-card { border:1px solid #ebe7dd; box-shadow:0 10px 28px rgba(30,45,34,.055); }
.card-thumb-link { position:relative; }
.card-no-cover { height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:26px; background:linear-gradient(145deg,#e9e2cf,#cfc5a7); color:#34503c; text-align:center; }
.card-no-cover span { font-size:10px; letter-spacing:3px; font-weight:800; }
.card-no-cover strong { font:600 20px/1.3 Georgia,serif; }
.card-author { display:block; margin-bottom:7px; color:#8f7950; font-size:12px; font-weight:700; }
.catalog-page { padding-top:55px!important; padding-bottom:80px!important; }
.catalog-header { padding:32px 0 24px; }
.catalog-header h1 { margin:0; color:#1a3325; font:700 clamp(32px,4vw,46px)/1.15 Georgia,serif; }
.catalog-header p { color:#70766e; margin-top:10px; }
.category-pills { margin-top:8px; }
.pill { color:#465446; }
.catalog-sort select { background:#fff; color:#28392d; }
.empty-state { padding:42px; border:1px dashed #d9d2c4; border-radius:12px; color:#6f756c; text-align:center; }
.dynamic-page { min-height:55vh; padding-top:64px; padding-bottom:80px; }
.dynamic-page .page-title { margin:0 0 28px; font:700 clamp(34px,4vw,48px)/1.2 Georgia,serif; color:#1a3325; }
.about-intro { max-width:760px; margin:0 auto; padding:36px; border-radius:14px; background:#fff; border:1px solid #ebe7dd; text-align:center; }
.about-intro h2 { color:#284133; font:600 26px Georgia,serif; margin-bottom:12px; }
.about-intro p,.contact-intro { color:#687167; line-height:1.8; }
.contact-intro { max-width:620px; margin:-12px auto 30px; text-align:center; }
.contact-cards { max-width:820px; margin:0 auto; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.contact-card { padding:26px; border-radius:12px; background:#fff; border:1px solid #ebe7dd; box-shadow:0 10px 28px #1e2d220d; display:grid; gap:8px; }
.contact-card span { color:#9a8147; font-size:12px; font-weight:800; letter-spacing:1.3px; text-transform:uppercase; }
.contact-card strong { color:#284133; font-size:19px; }
.contact-card small { color:#687167; }
.site-footer { background:#172b20; color:#e9e5d8; padding:54px 0; }
.footer-grid { display:grid; grid-template-columns:1.4fr 1fr 1.2fr; gap:44px; }
.footer-title { color:#e2c36e; letter-spacing:2px; }
.footer-desc,.site-footer p { color:#c3c9bd; line-height:1.8; }
.site-footer h4 { color:#e2c36e; margin:0 0 14px; }
.footer-links { list-style:none; display:grid; gap:8px; }
.footer-links a:hover { color:#e2c36e; }
.contact-actions { display:grid; gap:8px; }
.btn-contact { font-size:14px; font-weight:700; }
@media(max-width:768px) { .hero-inner { min-height:0; padding-top:62px; padding-bottom:50px; } .hero-art { display:none; } .section-head { align-items:flex-start; flex-direction:column; } .footer-grid { grid-template-columns:1fr; gap:28px; } .contact-cards { grid-template-columns:1fr; } }

/* Mobile Reponsive */
@media (max-width: 768px) {
    .mobile-menu-toggle { display: flex; }
    .header-right { 
        position: fixed; top: 0; right: -100%; width: 100vw; height: 100vh; 
        background: rgba(253,251,247,0.98); backdrop-filter: blur(10px);
        flex-direction: column; justify-content: center; align-items: center;
        transition: 0.4s ease-in-out; z-index: 998;
    }
    .header-right.open { right: 0; }
    .site-nav { flex-direction: column; text-align: center; gap: 30px; }
    .site-nav a { font-size: 24px; }
    .about-block { flex-direction: column !important; }
    .about-block-img img { max-width: 100%; }
    .detail-layout { grid-template-columns: 1fr; }
}