/* === ВСЕ СТИЛИ ПОЛНОСТЬЮ СОХРАНЕНЫ === */
        :root {
            --primary-brown: #4a3520;
            --secondary-brown: #6d523d;
            --light-beige: #f9f7f2;
            --gold-accent: #d4af37;
            --dark-gold: #b89d2a;
            --text-dark: #333333;
            --text-light: #666666;
            --shadow-sm: 0 2px 8px rgba(0,0,0,0.08);
            --shadow-md: 0 6px 16px rgba(0,0,0,0.12);
            --shadow-lg: 0 12px 32px rgba(0,0,0,0.18);
            --border-radius: 14px;
            --transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
            --parchment-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' fill='%23f9f7f2'/%3E%3Cpath d='M0,0 L100,100 M100,0 L0,100' stroke='%23e8e0d3' stroke-width='0.5' opacity='0.2'/%3E%3C/svg%3E");
            --card-border: 1px solid rgba(212, 175, 55, 0.15);
            --gradient-gold: linear-gradient(135deg, var(--gold-accent), var(--dark-gold));
            --success-color: #28a745;
            --error-color: #dc3545;
        }
        * { margin: 0; padding: 0; box-sizing: border-box; }
        html, body { overflow-x: hidden; width: 100%; position: relative; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; }
        html::-webkit-scrollbar { display: none; }
        body { font-family: 'Montserrat', sans-serif; background-color: var(--light-beige); color: var(--text-dark); background-image: var(--parchment-texture); line-height: 1.6; transition: var(--transition); min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-tap-highlight-color: transparent; }
        .container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 16px; }
        header { background: rgba(74, 53, 32, 0.98); backdrop-filter: blur(20px); position: sticky; top: 0; z-index: 1000; padding: 16px 0; box-shadow: var(--shadow-md); border-bottom: 1px solid rgba(212, 175, 55, 0.3); }
        .header-container { display: flex; justify-content: space-between; align-items: center; }
        .logo-container { display: flex; align-items: center; gap: 20px; }
        .logo { font-family: 'Cormorant Garamond', serif; font-size: 32px; font-weight: 700; color: var(--gold-accent); text-decoration: none; display: flex; align-items: center; gap: 12px; letter-spacing: -0.8px; transition: var(--transition); cursor: pointer; }
        .logo i { font-size: 28px; color: var(--light-beige); }
        .logo:hover { transform: scale(1.02); color: var(--light-beige); }
        .nav-buttons { display: flex; gap: 12px; align-items: center; }
        .btn-cart-icon { width: 48px; height: 48px; border-radius: 50%; background: var(--gradient-gold); display: flex; align-items: center; justify-content: center; border: none; cursor: pointer; transition: var(--transition); position: relative; box-shadow: var(--shadow-sm); }
        .btn-cart-icon:hover { transform: scale(1.1) rotate(5deg); box-shadow: var(--shadow-lg); }
        .btn-cart-icon i { font-size: 22px; color: white; }
        .cart-badge-icon { position: absolute; top: -5px; right: -5px; background-color: var(--primary-brown); color: white; font-size: 11px; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; border: 2px solid var(--light-beige); box-shadow: 0 2px 6px rgba(0,0,0,0.3); animation: pulse 2s infinite; }
        @keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
        .back-button-container { display: flex; align-items: center; gap: 15px; margin-bottom: 25px; justify-content: space-between; transition: var(--transition); animation: slideIn 0.4s ease; }
        @keyframes slideIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
        .back-button-container.hidden { display: none; }
        .btn-back { background: none; border: none; font-size: 24px; color: var(--primary-brown); cursor: pointer; transition: var(--transition); width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(212, 175, 55, 0.12); box-shadow: var(--shadow-sm); }
        .btn-back:hover { background: rgba(212, 175, 55, 0.28); color: var(--gold-accent); transform: translateX(-4px) scale(1.05); box-shadow: var(--shadow-md); }
        .btn-back:active { transform: translateX(-2px) scale(1); }
        .page-title { font-family: 'Cormorant Garamond', serif; font-size: 36px; font-weight: 700; color: var(--primary-brown); letter-spacing: -0.5px; position: relative; display: inline-block; }
        .page-title::after { content: ''; position: absolute; bottom: -8px; left: 0; width: 100%; height: 3px; background: var(--gold-accent); border-radius: 3px; opacity: 0.8; }
        .catalog-filters { display: flex; gap: 20px; margin-bottom: 25px; padding: 22px; background: white; border-radius: var(--border-radius); box-shadow: var(--shadow-sm); border: var(--card-border); align-items: center; flex-wrap: wrap; animation: fadeInUp 0.6s ease 0s forwards; opacity: 1; transform: translateY(0); }
        @keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } }
        .filter-group { display: flex; flex-direction: column; gap: 10px; flex: 1; min-width: 200px; }
        .filter-label { font-size: 15px; color: var(--text-light); font-weight: 500; }
        .filter-input-wrapper { position: relative; width: 100%; }
        .filter-input { padding: 11px 16px; border: 2px solid rgba(212, 175, 55, 0.3); border-radius: 8px; font-size: 15px; background: white; color: var(--text-dark); width: 100%; height: 45px; transition: var(--transition); -moz-appearance: textfield; }
        .filter-input::-webkit-outer-spin-button,
        .filter-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
        .filter-input:focus { outline: none; border-color: var(--gold-accent); box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.2); }
        .filter-input::placeholder { color: var(--text-light); }
        .filter-input-suffix { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: var(--text-light); font-size: 15px; font-weight: 500; pointer-events: none; user-select: none; }
        .filter-btn { background: var(--gradient-gold); color: white; border: none; padding: 11px 22px; border-radius: 8px; font-size: 15px; font-weight: 600; cursor: pointer; transition: var(--transition); flex: 1; min-width: 100px; }
        .filter-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
        .filter-btn:disabled { opacity: 0.5; cursor: not-allowed; }
        .filter-actions { display: flex; gap: 10px; width: 100%; justify-content: flex-end; }
        .catalog-header { text-align: center; margin: 20px 0 20px; padding: 0 20px; position: relative; }
        .catalog-title { font-family: 'Cormorant Garamond', serif; font-size: 48px; color: var(--primary-brown); margin-bottom: 10px; letter-spacing: -1.2px; background: linear-gradient(to right, var(--primary-brown), var(--gold-accent), var(--secondary-brown)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; position: relative; display: inline-block; }
        .catalog-title::after { content: ''; position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); width: 80px; height: 4px; background: var(--gold-accent); border-radius: 2px; }
        .catalog-subtitle { color: var(--text-light); font-size: 18px; max-width: 800px; margin: 12px auto 0; line-height: 1.6; font-weight: 400; font-family: 'Cormorant Garamond', serif; opacity: 0.85; font-style: italic; }
        .seo-intro { max-width: 1080px; margin: 10px auto 34px; padding: 30px; background: linear-gradient(135deg, rgba(255,255,255,0.92), rgba(249,247,242,0.88)); border: 1px solid rgba(212,175,55,0.18); border-radius: var(--border-radius); box-shadow: var(--shadow-sm); color: #4a3f35; }
        .seo-intro h2 { font-family: 'Cormorant Garamond', serif; font-size: 34px; color: var(--primary-brown); margin-bottom: 10px; line-height: 1.2; }
        .seo-intro p { margin-bottom: 12px; font-size: 16px; }
        .trust-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 20px; }
        .trust-point { padding: 16px; background: rgba(255,255,255,0.72); border: 1px solid rgba(212, 175, 55, 0.18); border-radius: 10px; }
        .trust-point strong { display: block; color: var(--primary-brown); margin-bottom: 5px; }
        .product-seo-links { max-width: 1080px; margin: 12px auto 42px; padding: 22px 24px; background: rgba(74,53,32,0.045); border-top: 1px solid rgba(212,175,55,0.24); border-bottom: 1px solid rgba(212,175,55,0.24); }
        .product-seo-links h2 { font-family: 'Cormorant Garamond', serif; font-size: 26px; color: var(--primary-brown); margin-bottom: 12px; text-align: center; }
        .product-seo-links-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px 16px; }
        .product-seo-links a { color: #7a6147; text-decoration: none; font-size: 13px; line-height: 1.35; }
        .product-seo-links a:hover { color: var(--gold-accent); text-decoration: underline; }
        @keyframes typewriter { from { width: 0; } to { width: 100%; } }
        @keyframes blink { from, to { border-color: transparent; } 50% { border-color: var(--gold-accent); } }
        .books-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin: 25px 0 50px; padding: 0 8px; }
        .catalog-footer-phone { text-align: center; margin: 40px 0 30px; padding: 20px; }
        .catalog-phone-link { font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: 500; color: #b8944d; text-decoration: none; transition: var(--transition); }
        .catalog-phone-link:hover { color: #c6a35b; text-decoration: underline; }
        .book-card { background: white; border-radius: var(--border-radius); overflow: hidden; box-shadow: var(--shadow-md); transition: var(--transition); cursor: pointer; display: flex; flex-direction: column; height: 100%; position: relative; border: var(--card-border); transform: translateZ(0); animation: fadeIn 0.5s ease; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
        .book-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, rgba(212, 175, 55, 0.05), rgba(212, 175, 55, 0)); opacity: 0; transition: var(--transition); z-index: 1; }
        .book-card:hover { transform: translateY(-8px) rotateX(2deg) scale(1.01); box-shadow: var(--shadow-lg); border-color: rgba(212, 175, 55, 0.5); }
        .book-card:hover::before { opacity: 1; }
        .book-image-container { position: relative; aspect-ratio: 4/3; overflow: hidden; background: linear-gradient(135deg, var(--secondary-brown), var(--primary-brown)); transition: var(--transition); }
        .book-image, .main-image, .cart-item-image, .favorite-item-image, .order-history-item-image, .thumbnail { width: 100%; height: 100%; display: block; transition: var(--transition); object-fit: cover; }
        .book-image-container .book-image, .main-image, .cart-item-image, .favorite-item-image, .order-history-item-image { object-fit: cover; }
        .thumbnail { object-fit: cover; }
        .book-card:hover .book-image { transform: scale(1.02); }
        .book-like-mobile { position: absolute; top: 16px; right: 16px; background: rgba(255, 255, 255, 0.95); width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 20; box-shadow: var(--shadow-md); cursor: pointer; transition: var(--transition); border: 2px solid var(--gold-accent); transform: translateZ(1); }
        .book-like-mobile i { color: var(--text-light); font-size: 20px; transition: var(--transition); }
        .book-like-mobile.liked i { color: #fff8eb; transform: none; }
        .book-like-mobile:hover { transform: scale(1.07); box-shadow: var(--shadow-lg); border-color: var(--gold-accent); }
        .book-like-mobile:hover i { color: #fff8eb; transform: none; }
        .book-info { padding: 22px 18px; flex-grow: 1; display: flex; flex-direction: column; }
        .book-title { font-size: 20px; font-weight: 700; color: var(--primary-brown); margin-bottom: 12px; line-height: 1.4; min-height: 44px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-family: 'Montserrat', sans-serif; transition: var(--transition); }
        .book-card:hover .book-title { color: var(--gold-accent); }
        .book-price { font-size: 28px; font-weight: 700; color: var(--gold-accent); margin-bottom: 15px; font-family: 'Cormorant Garamond', serif; line-height: 1.2; letter-spacing: -0.3px; position: relative; }
        .book-price::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 40px; height: 2px; background: var(--gold-accent); opacity: 0.5; }
        .book-description { color: var(--text-light); font-size: 15px; margin-bottom: 15px; flex-grow: 1; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-weight: 300; transition: var(--transition); }
        .book-card:hover .book-description { color: var(--text-dark); }
        .book-detail { max-width: 1320px; margin: 32px auto; padding: 0 24px; }
        .gallery-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 40px; margin-bottom: 40px; }
        .gallery-main { position: relative; }
        .gallery-slider { width: 100%; aspect-ratio: 4/3; border-radius: var(--border-radius); overflow: hidden; box-shadow: var(--shadow-lg); position: relative; background: linear-gradient(135deg, #e8e0d8, #f5f2ee); border: 3px solid rgba(212, 175, 55, 0.4); cursor: pointer; transition: var(--transition); max-height: 600px; }
        .gallery-slider:hover { box-shadow: 0 15px 40px rgba(0,0,0,0.3); transform: scale(1.01); }
        .main-image-container { width: 100%; aspect-ratio: 4/3; border-radius: var(--border-radius); overflow: hidden; box-shadow: var(--shadow-lg); position: relative; background: linear-gradient(135deg, #e8e0d8, #f5f2ee); border: 3px solid rgba(212, 175, 55, 0.4); cursor: pointer; transition: var(--transition); max-height: 600px; }
        .main-image-container:hover { box-shadow: 0 15px 40px rgba(0,0,0,0.3); transform: scale(1.01); }
        .main-image { width: 100%; height: 100%; object-fit: contain; display: block; }
        .gallery-track { width: 100%; height: 100%; display: flex; overflow: hidden; }
        .gallery-slide { flex: 0 0 100%; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
        .gallery-slide img { width: 100%; height: 100%; object-fit: contain; display: block; }
        .image-navigation { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; pointer-events: none; }
        .nav-zone { flex: 1; height: 100%; cursor: pointer; pointer-events: auto; }
        .nav-text { position: absolute; top: 50%; transform: translateY(-50%); color: white; font-size: 32px; font-weight: bold; text-shadow: 0 3px 12px rgba(0,0,0,0.7); opacity: 0; transition: var(--transition); }
        .nav-zone:hover .nav-text { opacity: 1; transform: translateY(-50%) scale(1.3); }
        .prev-text { left: 30px; } .next-text { right: 30px; }
        .nav-indicator { position: absolute; bottom: 25px; left: 0; right: 0; display: flex; justify-content: center; gap: 14px; z-index: 10; }
        .nav-dot { width: 14px; height: 14px; border-radius: 50%; background: rgba(255, 255, 255, 0.6); cursor: pointer; transition: var(--transition); border: 2px solid rgba(255, 255, 255, 0.3); }
        .nav-dot.active { background: var(--gold-accent); transform: scale(1.3); border-color: var(--gold-accent); box-shadow: 0 0 10px rgba(212, 175, 55, 0.6); }
        .gallery-thumbnails { display: flex; gap: 12px; margin-top: 24px; justify-content: center; overflow-x: auto; padding: 8px 0; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: rgba(212, 175, 55, 0.4) transparent; flex-wrap: nowrap; }
        .gallery-thumbnails::-webkit-scrollbar { height: 6px; }
        .gallery-thumbnails::-webkit-scrollbar-track { background: transparent; }
        .gallery-thumbnails::-webkit-scrollbar-thumb { background: rgba(212, 175, 55, 0.4); border-radius: 3px; }
        .thumbnail { width: 75px; height: 75px; border-radius: 12px; cursor: pointer; border: 3px solid transparent; transition: var(--transition); flex-shrink: 0; object-fit: cover; box-shadow: var(--shadow-sm); }
        .thumbnail.active { border-color: var(--gold-accent); transform: scale(1.1); box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.3); }
        .thumbnail:hover { transform: scale(1.15); box-shadow: 0 5px 15px rgba(212, 175, 55, 0.4); }
        .book-details { flex: 1; display: flex; flex-direction: column; justify-content: center; }
        .book-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; padding-bottom: 15px; border-bottom: 2px solid rgba(212, 175, 55, 0.2); }
        .book-detail-title { font-size: 36px; font-weight: 700; color: var(--primary-brown); font-family: 'Cormorant Garamond', serif; line-height: 1.3; letter-spacing: -0.8px; position: relative; }
        .book-detail-title::after { content: ''; position: absolute; bottom: -10px; left: 0; width: 100px; height: 4px; background: var(--gold-accent); border-radius: 2px; }
        .detail-like-btn { background: rgba(255, 255, 255, 0.92); width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--shadow-md); border: 2px solid var(--gold-accent); transition: var(--transition); }
        .detail-like-btn i { color: var(--text-light); font-size: 26px; transition: var(--transition); }
        .detail-like-btn.liked i { color: #fff8eb; transform: none; }
        .detail-like-btn:hover { transform: scale(1.07); box-shadow: var(--shadow-lg); }
        .detail-like-btn:hover i { color: #fff8eb; transform: none; }
        .book-detail-price { font-size: 52px; font-weight: 700; color: var(--gold-accent); margin-bottom: 28px; font-family: 'Cormorant Garamond', serif; line-height: 1.1; letter-spacing: -1.2px; text-shadow: 0 3px 10px rgba(0,0,0,0.15); position: relative; }
        .book-detail-price::after { content: ''; position: absolute; bottom: -10px; left: 0; width: 120px; height: 3px; background: var(--gold-accent); opacity: 0.5; }
        .book-detail-description { color: var(--text-dark); line-height: 1.9; margin-bottom: 36px; font-size: 19px; font-family: 'Montserrat', sans-serif; font-weight: 300; padding: 20px; background: rgba(255, 255, 255, 0.8); border-radius: var(--border-radius); border-left: 5px solid var(--gold-accent); box-shadow: var(--shadow-sm); transition: var(--transition); }
        .book-detail-description:hover { background: rgba(255, 255, 255, 0.9); box-shadow: var(--shadow-md); }
        .book-actions { display: flex; flex-direction: column; gap: 20px; margin-top: 24px; }
        .btn-add-to-cart { background: var(--gradient-gold); color: white; font-weight: 700; padding: 18px; font-size: 22px; border-radius: var(--border-radius); box-shadow: var(--shadow-lg); font-family: 'Montserrat', sans-serif; min-width: 280px; position: relative; overflow: hidden; border: none; cursor: pointer; }
        .btn-add-to-cart:disabled { opacity: 0.5; cursor: not-allowed; background: #aaa; }
        .btn-add-to-cart::after { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 70%); opacity: 0; transition: var(--transition); }
        .btn-add-to-cart:hover:not(:disabled)::after { opacity: 1; transform: scale(1.5); }
        .btn-add-to-cart:hover:not(:disabled) { box-shadow: 0 10px 30px rgba(212, 175, 55, 0.5); transform: translateY(-3px) scale(1.02); }
        .quantity-selector { display: flex; align-items: center; gap: 10px; background: white; border-radius: var(--border-radius); padding: 10px; box-shadow: var(--shadow-sm); border: 2px solid rgba(212, 175, 55, 0.3); max-width: 300px; }
        .quantity-btn { width: 50px; height: 50px; border-radius: 50%; background: var(--gradient-gold); color: white; border: none; font-size: 24px; cursor: pointer; transition: var(--transition); display: flex; align-items: center; justify-content: center; }
        .quantity-btn:hover:not(:disabled) { transform: scale(1.1); box-shadow: var(--shadow-md); }
        .quantity-btn:disabled { opacity: 0.5; cursor: not-allowed; }
        .quantity-input { width: 80px; height: 50px; border: 2px solid rgba(212, 175, 55, 0.3); border-radius: var(--border-radius); text-align: center; font-size: 20px; font-weight: 700; color: var(--primary-brown); font-family: 'Montserrat', sans-serif; transition: var(--transition); }
        .quantity-input:focus { outline: none; border-color: var(--gold-accent); box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.2); }
        .quantity-price { font-size: 24px; font-weight: 700; color: var(--gold-accent); margin-left: auto; font-family: 'Cormorant Garamond', serif; min-width: 120px; text-align: right; }
        .mobile-fixed-cart-btn { position: fixed; bottom: 0; left: 0; right: 0; background: var(--gradient-gold); color: white; border: none; padding: 16px 24px; font-weight: 700; font-size: 20px; font-family: 'Montserrat', sans-serif; cursor: pointer; z-index: 2000; box-shadow: 0 -4px 20px rgba(0,0,0,0.3); transition: var(--transition); display: flex; align-items: center; justify-content: center; gap: 12px; }
        .mobile-fixed-cart-btn i { font-size: 22px; }
        .mobile-fixed-cart-btn:hover { transform: scale(1.03); box-shadow: 0 -6px 30px rgba(212, 175, 55, 0.5); }
        .mobile-fixed-cart-btn:active { transform: scale(1); }
        .sidebar { position: fixed; top: 0; height: 100vh; width: 85%; max-width: 360px; background: linear-gradient(to bottom, var(--primary-brown), var(--secondary-brown)); color: var(--light-beige); box-shadow: var(--shadow-lg); z-index: 2000; transition: var(--transition); transform: translateX(-100%); display: flex; flex-direction: column; overflow: hidden; }
        .sidebar.open { transform: translateX(0); }
        .sidebar-header { padding: 35px 28px 25px; text-align: left; border-bottom: 1px solid rgba(212, 175, 55, 0.4); flex-shrink: 0; display: flex; align-items: center; gap: 18px; background: rgba(0, 0, 0, 0.1); }
        .sidebar-profile-btn { width: 52px; height: 52px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); display: flex; align-items: center; justify-content: center; border: 2px solid var(--gold-accent); cursor: pointer; transition: var(--transition); flex-shrink: 0; box-shadow: var(--shadow-sm); }
        .sidebar-profile-btn i { font-size: 24px; color: var(--light-beige); }
        .sidebar-logo { font-family: 'Cormorant Garamond', serif; font-size: 36px; color: var(--gold-accent); letter-spacing: -0.8px; font-weight: 700; margin-left: 8px; }
        .sidebar-avatar { width: 80px; height: 80px; border-radius: 50%; background: var(--gradient-gold); margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; font-size: 32px; color: white; font-weight: 700; border: 4px solid var(--light-beige); box-shadow: var(--shadow-lg); }
        .sidebar-name { font-size: 22px; font-weight: 700; color: var(--light-beige); margin-bottom: 6px; font-family: 'Montserrat', sans-serif; }
        .sidebar-email { color: rgba(255, 255, 255, 0.88); font-size: 15px; font-weight: 300; }
        .sidebar-menu { padding: 20px 0; flex-grow: 1; overflow-y: auto; }
        .sidebar-item { padding: 20px 32px; display: flex; align-items: center; gap: 20px; cursor: pointer; transition: var(--transition); border-left: 4px solid transparent; font-size: 19px; font-weight: 600; font-family: 'Montserrat', sans-serif; position: relative; }
        .sidebar-item::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--gold-accent); transform: scaleY(0); transform-origin: top; transition: var(--transition); }
        .sidebar-item:hover { background: rgba(212, 175, 55, 0.22); transform: translateX(5px); }
        .sidebar-item:hover::before { transform: scaleY(1); }
        .sidebar-item i { font-size: 26px; width: 36px; text-align: center; color: var(--gold-accent); transition: var(--transition); position: relative; }
        .sidebar-item:hover i { transform: scale(1.2) rotate(10deg); color: white; text-shadow: 0 0 10px rgba(255, 255, 255, 0.5); }
        .sidebar-item.active { background: rgba(212, 175, 55, 0.3); border-left: 4px solid var(--gold-accent); }
        .sidebar-item.active i { color: white; transform: scale(1.1); }
        .sidebar-badge { margin-left: auto; background: var(--gold-accent); color: var(--primary-brown); font-size: 15px; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; box-shadow: var(--shadow-sm); animation: pulse 2s infinite; }
        .sidebar-footer { padding: 20px 28px; border-top: 1px solid rgba(212, 175, 55, 0.3); text-align: center; font-size: 15px; color: rgba(255, 255, 255, 0.8); flex-shrink: 0; font-weight: 300; background: rgba(0, 0, 0, 0.05); }
        .sidebar-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.7); z-index: 1999; opacity: 0; visibility: hidden; transition: var(--transition); cursor: pointer; }
        .sidebar-overlay.active { opacity: 1; visibility: visible; }
        .cart-items, .favorites-items, .order-history-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 32px; margin-bottom: 40px; padding: 0 10px; }
        .cart-item, .favorite-item, .order-history-item { background: white; border-radius: var(--border-radius); overflow: hidden; box-shadow: var(--shadow-md); transition: var(--transition); cursor: pointer; display: flex; flex-direction: column; height: 100%; position: relative; border: var(--card-border); }
        .cart-item:hover, .favorite-item:hover, .order-history-item:hover { transform: translateY(-6px) rotateX(3deg) scale(1.01); box-shadow: var(--shadow-lg); border-color: rgba(212, 175, 55, 0.5); }
        .cart-image-container, .favorite-image-container, .order-history-image-container { aspect-ratio: 4/3; overflow: hidden; position: relative; background: linear-gradient(135deg, var(--secondary-brown), var(--primary-brown)); }
        .cart-item-image, .favorite-item-image, .order-history-item-image { width: 100%; height: 100%; object-fit: cover; display: block; }
        .cart-item-info, .favorite-item-info, .order-history-item-info { padding: 20px; }
        .cart-item-title, .favorite-item-title, .order-history-item-title { font-size: 20px; font-weight: 700; color: var(--primary-brown); margin-bottom: 12px; line-height: 1.4; min-height: 46px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-family: 'Cormorant Garamond', serif; }
        .cart-item-price, .favorite-item-price, .order-history-item-price { font-size: 25px; font-weight: 700; color: var(--gold-accent); font-family: 'Cormorant Garamond', serif; line-height: 1.2; }
        .cart-remove, .favorite-remove { position: absolute; top: 14px; right: 14px; background: rgba(255, 255, 255, 0.95); width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 20; box-shadow: var(--shadow-sm); transition: var(--transition); border: 2px solid var(--primary-brown); }
        .cart-remove i, .favorite-remove i { color: var(--primary-brown); font-size: 20px; transition: var(--transition); }
        .cart-remove:hover, .favorite-remove:hover { transform: scale(1.07); box-shadow: var(--shadow-md); border-color: var(--gold-accent); }
        .cart-remove:hover i, .favorite-remove:hover i { color: #fff8eb; transform: none; }
        .cart-quantity { position: absolute; top: 14px; left: 14px; background: var(--gold-accent); color: white; font-size: 18px; font-weight: 700; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 20; box-shadow: var(--shadow-sm); cursor: pointer; transition: var(--transition); }
        .cart-quantity:hover { transform: scale(1.15); box-shadow: var(--shadow-md); }
        .summary-container { background: white; border-radius: var(--border-radius); padding: 36px; box-shadow: var(--shadow-md); margin-bottom: 45px; max-width: 520px; margin-left: auto; border-left: 5px solid var(--gold-accent); animation: slideUp 0.5s ease; }
        @keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
        .summary-row { display: flex; justify-content: space-between; margin-bottom: 20px; font-size: 20px; color: var(--text-dark); font-weight: 600; font-family: 'Montserrat', sans-serif; padding: 12px 0; border-bottom: 1px dashed rgba(0,0,0,0.08); }
        .summary-row:last-child { border-bottom: none; margin-bottom: 15px; }
        .summary-row span:first-child { color: var(--text-light); font-weight: 400; }
        .summary-total { font-size: 36px; font-weight: 700; color: var(--primary-brown); border-top: 3px solid var(--gold-accent); padding-top: 20px; margin-top: 16px; display: flex; justify-content: space-between; font-family: 'Cormorant Garamond', serif; letter-spacing: -0.6px; }
        .summary-total-value { color: var(--gold-accent); font-family: 'Cormorant Garamond', serif; font-size: 38px; }
        .btn-proceed { width: 100%; padding: 20px; background: var(--gradient-gold); color: white; font-weight: 700; font-size: 22px; border-radius: var(--border-radius); cursor: pointer; transition: var(--transition); margin-top: 15px; box-shadow: var(--shadow-md); font-family: 'Montserrat', sans-serif; border: none; position: relative; overflow: hidden; }
        .btn-proceed::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent); transition: var(--transition); }
        .btn-proceed:hover::before { left: 100%; }
        .btn-proceed:hover { transform: translateY(-4px) scale(1.03); box-shadow: var(--shadow-lg); }
        .btn-proceed:active { transform: translateY(0) scale(1); }
        .empty-state { text-align: center; padding: 80px 40px; background: white; border-radius: var(--border-radius); box-shadow: var(--shadow-md); max-width: 700px; margin: 60px auto; border: 1px solid rgba(0,0,0,0.06); border-top: 5px solid var(--gold-accent); }
        .empty-icon { font-size: 80px; color: var(--gold-accent); margin-bottom: 28px; text-shadow: 0 5px 15px rgba(212, 175, 55, 0.3); }
        .empty-title { font-size: 36px; font-weight: 700; color: var(--primary-brown); margin-bottom: 20px; font-family: 'Cormorant Garamond', serif; letter-spacing: -0.6px; }
        .empty-message { color: var(--text-light); font-size: 20px; margin-bottom: 35px; line-height: 1.7; max-width: 550px; margin-left: auto; margin-right: auto; font-weight: 300; font-family: 'Cormorant Garamond', serif; }
        .btn-browse { background: var(--gradient-gold); color: white; border: none; padding: 18px 45px; border-radius: var(--border-radius); font-size: 22px; font-weight: 600; cursor: pointer; transition: var(--transition); margin: 0 auto; display: block; box-shadow: var(--shadow-md); font-family: 'Montserrat', sans-serif; position: relative; overflow: hidden; }
        .btn-browse:hover { transform: translateY(-4px) scale(1.05); box-shadow: var(--shadow-lg); }
        .profile-container { max-width: 800px; margin: 40px auto; background: white; border-radius: var(--border-radius); padding: 40px; box-shadow: var(--shadow-md); border: var(--card-border); }
        .profile-header { text-align: center; margin-bottom: 40px; padding-bottom: 30px; border-bottom: 2px solid rgba(212, 175, 55, 0.2); }
        .profile-avatar { width: 120px; height: 120px; border-radius: 50%; background: var(--gradient-gold); margin: 0 auto 20px; display: flex; align-items: center; justify-content: center; font-size: 48px; color: white; font-weight: 700; border: 4px solid var(--light-beige); box-shadow: var(--shadow-lg); }
        .profile-name { font-size: 32px; font-weight: 700; color: var(--primary-brown); font-family: 'Cormorant Garamond', serif; margin-bottom: 10px; }
        .profile-empty { text-align: center; padding: 60px 30px; }
        .profile-empty-icon { font-size: 72px; color: var(--gold-accent); margin-bottom: 25px; }
        .profile-empty-title { font-size: 28px; font-weight: 700; color: var(--primary-brown); margin-bottom: 15px; font-family: 'Cormorant Garamond', serif; }
        .profile-empty-message { color: var(--text-light); font-size: 18px; margin-bottom: 30px; line-height: 1.7; font-family: 'Montserrat', sans-serif; }
        .info-row { display: flex; justify-content: space-between; padding: 15px 0; border-bottom: 1px solid rgba(0,0,0,0.08); }
        .info-label { font-weight: 600; color: var(--text-light); font-size: 18px; font-family: 'Montserrat', sans-serif; }
        .info-value { font-weight: 600; color: var(--primary-brown); font-size: 18px; font-family: 'Cormorant Garamond', serif; }
        .profile-form { display: flex; flex-direction: column; gap: 20px; margin-top: 25px; }
        .form-group { display: flex; flex-direction: column; gap: 8px; }
        .form-label { font-weight: 600; color: var(--primary-brown); font-size: 16px; font-family: 'Montserrat', sans-serif; }
        .form-input { padding: 14px 18px; border: 2px solid rgba(212, 175, 55, 0.3); border-radius: var(--border-radius); font-size: 16px; font-family: 'Montserrat', sans-serif; transition: var(--transition); background: white; color: var(--text-dark); }
        .form-input:focus { outline: none; border-color: var(--gold-accent); box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.2); transform: translateY(-2px); }
        .btn-save-profile { background: var(--gradient-gold); color: white; border: none; padding: 16px 32px; border-radius: var(--border-radius); font-weight: 700; font-size: 18px; cursor: pointer; transition: var(--transition); margin-top: 10px; align-self: flex-start; box-shadow: var(--shadow-md); font-family: 'Montserrat', sans-serif; }
        .btn-save-profile:hover { transform: translateY(-3px) scale(1.03); box-shadow: var(--shadow-lg); }
        .payment-container { max-width: 800px; margin: 40px auto; background: white; border-radius: var(--border-radius); padding: 40px; box-shadow: var(--shadow-md); border: var(--card-border); }
        .payment-title { font-size: 36px; font-weight: 700; color: var(--primary-brown); font-family: 'Cormorant Garamond', serif; text-align: center; margin-bottom: 40px; }
        .payment-method { border: 2px solid rgba(212, 175, 55, 0.3); border-radius: var(--border-radius); padding: 30px; background: rgba(255, 255, 255, 0.9); }
        .payment-header { display: flex; align-items: center; gap: 15px; margin-bottom: 25px; padding-bottom: 20px; border-bottom: 2px solid rgba(212, 175, 55, 0.2); }
        .payment-icon { width: 60px; height: 60px; border-radius: 50%; background: var(--gradient-gold); display: flex; align-items: center; justify-content: center; font-size: 28px; color: white; }
        .payment-name { font-size: 28px; font-weight: 700; color: var(--primary-brown); font-family: 'Cormorant Garamond', serif; }
        .contact-preferences { margin-top: 30px; }
        .contact-label { font-size: 18px; font-weight: 600; color: var(--primary-brown); font-family: 'Montserrat', sans-serif; margin-bottom: 15px; display: block; }
        .contact-options { display: flex; gap: 20px; margin-bottom: 30px; }
        .contact-option { flex: 1; padding: 16px; border: 2px solid rgba(212, 175, 55, 0.3); border-radius: var(--border-radius); text-align: center; cursor: pointer; transition: var(--transition); font-weight: 600; font-size: 16px; font-family: 'Montserrat', sans-serif; }
        .contact-option.selected { border-color: var(--gold-accent); background: rgba(212, 175, 55, 0.1); box-shadow: var(--shadow-sm); }
        .contact-option:hover { transform: translateY(-2px); }
        .time-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; }
        .time-option { padding: 12px; border: 2px solid rgba(212, 175, 55, 0.3); border-radius: var(--border-radius); text-align: center; cursor: pointer; transition: var(--transition); font-weight: 600; font-size: 15px; font-family: 'Montserrat', sans-serif; }
        .time-option.selected { border-color: var(--gold-accent); background: rgba(212, 175, 55, 0.1); box-shadow: var(--shadow-sm); }
        .time-option:hover { transform: translateY(-2px); }
        .time-desc { font-size: 13px; color: var(--text-light); font-weight: 400; display: block; margin-top: 5px; }
        .payment-registration { margin-top: 30px; padding-top: 20px; border-top: 2px solid rgba(212, 175, 55, 0.2); }
        .payment-registration .form-group { margin-bottom: 20px; }
        .payment-registration .terms-group { margin-top: 20px; margin-bottom: 20px; }
        .btn-confirm-payment { width: 100%; padding: 20px; background: var(--gradient-gold); color: white; font-weight: 700; font-size: 22px; border-radius: var(--border-radius); cursor: pointer; transition: var(--transition); margin-top: 25px; box-shadow: var(--shadow-md); font-family: 'Montserrat', sans-serif; border: none; }
        .btn-confirm-payment:disabled { opacity: 0.5; cursor: not-allowed; background: #aaa; }
        .btn-confirm-payment:hover:not(:disabled) { transform: translateY(-4px) scale(1.03); box-shadow: var(--shadow-lg); }
        .success-container { max-width: 600px; margin: 80px auto; text-align: center; padding: 60px; background: white; border-radius: var(--border-radius); box-shadow: var(--shadow-lg); border: var(--card-border); border-top: 6px solid var(--gold-accent); }
        .success-icon { font-size: 96px; color: #28a745; margin-bottom: 30px; animation: bounce 0.8s ease; }
        @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } }
        .success-title { font-size: 42px; font-weight: 700; color: var(--primary-brown); font-family: 'Cormorant Garamond', serif; margin-bottom: 25px; letter-spacing: -0.8px; }
        .success-message { color: var(--text-dark); font-size: 20px; line-height: 1.8; margin-bottom: 40px; font-family: 'Montserrat', sans-serif; font-weight: 300; }
        .btn-continue-shopping { background: var(--gradient-gold); color: white; border: none; padding: 18px 45px; border-radius: var(--border-radius); font-size: 22px; font-weight: 600; cursor: pointer; transition: var(--transition); margin: 0 auto; display: block; box-shadow: var(--shadow-md); font-family: 'Montserrat', sans-serif; }
        .btn-continue-shopping:hover { transform: translateY(-4px) scale(1.05); box-shadow: var(--shadow-lg); }
        @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
        .spinner { width: 40px; height: 40px; border: 4px solid rgba(212, 175, 55, 0.3); border-top: 4px solid var(--gold-accent); border-radius: 50%; animation: spin 1s linear infinite; margin: 20px auto; }
        .success-message-global { position: fixed; top: 16px; left: 50%; right: auto; color: #f1d9ae; background: linear-gradient(145deg, rgba(64, 23, 12, 0.98), rgba(30, 9, 6, 0.98)); border: 1px solid rgba(218, 157, 67, 0.58); padding: 13px 20px; border-radius: 15px; box-shadow: var(--shadow-lg); z-index: 10000; opacity: 0; visibility: hidden; transform: translate(-50%, -14px); transition: opacity .24s ease, transform .24s ease, visibility 0s linear .24s; display: flex; align-items: center; gap: 12px; width: max-content; max-width: min(520px, calc(100vw - 28px)); }
        .success-message-global.show { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .24s ease, transform .24s ease, visibility 0s; }
        .success-message-global i { font-size: 20px; color: #f1d9ae; }
        .success-message-global .message { color: #f1d9ae; font-weight: 600; font-size: 14px; }
        .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.7); z-index: 9999; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: var(--transition); }
        .modal-overlay.active { opacity: 1; visibility: visible; }
        .modal-content { background: white; border-radius: var(--border-radius); padding: 40px; max-width: 450px; width: 90%; box-shadow: var(--shadow-lg); position: relative; animation: modalSlideIn 0.3s ease; border: var(--card-border); }
        @keyframes modalSlideIn { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
        .modal-title { font-size: 28px; font-weight: 700; color: var(--primary-brown); font-family: 'Cormorant Garamond', serif; margin-bottom: 30px; text-align: center; }
        .modal-quantity-selector { display: flex; align-items: center; justify-content: center; gap: 20px; margin-bottom: 30px; }
        .modal-quantity-btn { width: 60px; height: 60px; border-radius: 50%; background: var(--gradient-gold); color: white; border: none; font-size: 32px; cursor: pointer; transition: var(--transition); display: flex; align-items: center; justify-content: center; }
        .modal-quantity-btn:disabled { opacity: 0.5; cursor: not-allowed; }
        .modal-quantity-input { width: 100px; height: 60px; border: 2px solid rgba(212, 175, 55, 0.3); border-radius: var(--border-radius); text-align: center; font-size: 28px; font-weight: 700; color: var(--primary-brown); font-family: 'Montserrat', sans-serif; transition: var(--transition); }
        .modal-quantity-input:focus { outline: none; border-color: var(--gold-accent); box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.2); }
        .modal-total-price { text-align: center; font-size: 24px; font-weight: 700; color: var(--gold-accent); font-family: 'Cormorant Garamond', serif; margin-bottom: 30px; padding: 15px; background: rgba(212, 175, 55, 0.1); border-radius: var(--border-radius); }
        .modal-actions { display: flex; gap: 15px; margin-top: 20px; }
        .modal-btn { padding: 16px 32px; border-radius: var(--border-radius); font-weight: 700; font-size: 18px; cursor: pointer; transition: var(--transition); font-family: 'Montserrat', sans-serif; border: none; flex: 1; }
        .modal-btn-save { background: var(--success-color); color: white; }
        .modal-btn-save:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
        .modal-close { position: absolute; top: 15px; right: 15px; background: none; border: none; font-size: 28px; color: var(--text-light); cursor: pointer; transition: var(--transition); }
        .modal-close:hover { color: var(--error-color); transform: rotate(90deg); }
        .terms-group { display: flex; align-items: flex-start; gap: 12px; margin-top: 20px; padding: 14px 16px; background: rgba(212, 175, 55, 0.05); border-radius: var(--border-radius); border: 1px solid rgba(212, 175, 55, 0.15); }
        .terms-checkbox { width: 18px; height: 18px; cursor: pointer; margin-top: 2px; flex-shrink: 0; }
        .terms-checkbox:disabled { cursor: not-allowed; opacity: 0.7; }
        .terms-label { font-size: 12px; color: #6b5a4e; line-height: 1.45; font-family: 'Montserrat', sans-serif; }
        .terms-label a.legal-link { color: var(--secondary-brown); font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; transition: var(--transition); }
        .terms-label a.legal-link:hover { color: var(--gold-accent); }
        .payment-note { text-align: center; color: #6b5a4e; font-size: 14px; margin-top: 16px; line-height: 1.6; }
        .legal-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 10000; display: none; align-items: center; justify-content: center; padding: 20px; box-sizing: border-box; }
        .legal-modal.active { display: flex; }
        .legal-modal-content { background: white; border-radius: 16px; max-width: 720px; width: 100%; max-height: 85vh; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,0.3); }
        .legal-modal-header { padding: 24px 28px 20px; border-bottom: 2px solid rgba(212, 175, 55, 0.2); display: flex; justify-content: space-between; align-items: center; background: linear-gradient(to bottom, #fdfcfb, #faf8f5); }
        .legal-modal-title { font-family: 'Cormorant Garamond', serif; font-size: 24px; font-weight: 700; color: var(--primary-brown); margin: 0; }
        .legal-modal-close { background: none; border: none; font-size: 28px; color: var(--text-light); cursor: pointer; padding: 4px 8px; line-height: 1; transition: var(--transition); }
        .legal-modal-close:hover { color: var(--primary-brown); transform: scale(1.1); }
        .legal-modal-body { padding: 28px; overflow-y: auto; flex: 1; }
        .legal-modal-body h2 { font-family: 'Cormorant Garamond', serif; font-size: 18px; font-weight: 700; color: #8b6f4e; margin: 28px 0 14px; padding-bottom: 8px; border-bottom: 1px solid rgba(212, 175, 55, 0.25); }
        .legal-modal-body h2:first-child { color: var(--primary-brown); font-size: 20px; margin-top: 0; border-bottom: 2px solid rgba(212, 175, 55, 0.3); padding-bottom: 12px; }
        .legal-modal-body p { font-family: 'Montserrat', sans-serif; font-size: 14px; color: #4a3f35; line-height: 1.75; margin: 0 0 14px; }
        .legal-modal-body ul, .legal-modal-body ol { font-family: 'Montserrat', sans-serif; font-size: 14px; color: #4a3f35; line-height: 1.75; margin: 0 0 16px; padding-left: 28px; }
        .legal-modal-body li { margin-bottom: 8px; padding-left: 4px; }
        .legal-modal-body ol li { list-style-type: decimal; }
        .legal-modal-body a { color: var(--gold-accent); text-decoration: underline; }
        @media (max-width: 480px) {
            .terms-label { font-size: 11px; line-height: 1.35; }
            .terms-group { padding: 12px; }
            .legal-modal-content { max-height: 90vh; }
            .legal-modal-header { padding: 18px 20px 16px; }
            .legal-modal-title { font-size: 20px; }
            .legal-modal-body { padding: 20px; }
            .legal-modal-body h2 { font-size: 16px; }
            .legal-modal-body p, .legal-modal-body ul { font-size: 13px; }
        }
        .terms-error { color: var(--error-color); font-size: 14px; margin-top: 8px; display: none; }
        .order-history-contact { background: rgba(212, 175, 55, 0.05); border-radius: var(--border-radius); padding: 12px; margin-bottom: 15px; border: 1px solid rgba(212, 175, 55, 0.1); font-size: 14px; color: var(--text-light); }
        .order-history-contact div { margin-bottom: 5px; }
        .order-history-contact div:last-child { margin-bottom: 0; }
        ::-webkit-scrollbar { display: none; }
        * { scrollbar-width: none; -ms-overflow-style: none; }
        ::selection { background: var(--gold-accent); color: white; }
        .order-history-container { max-width: 1000px; margin: 40px auto; background: white; border-radius: var(--border-radius); padding: 40px; box-shadow: var(--shadow-md); border: var(--card-border); }
        .order-history-item { display: flex; flex-direction: column; margin-bottom: 25px; padding: 20px; border: 2px solid rgba(212, 175, 55, 0.2); border-radius: var(--border-radius); }
        .order-history-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px solid rgba(212, 175, 55, 0.2); }
        .order-history-date { font-size: 18px; color: var(--text-light); font-weight: 500; }
        .order-history-total { font-size: 24px; font-weight: 700; color: var(--gold-accent); font-family: 'Cormorant Garamond', serif; }
        .order-history-books { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 15px; margin-bottom: 20px; }
        .order-history-book { padding: 12px; background: rgba(212, 175, 55, 0.05); border-radius: var(--border-radius); border: 1px solid rgba(212, 175, 55, 0.1); }
        .order-history-book-title { font-weight: 600; color: var(--primary-brown); margin-bottom: 5px; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .order-history-book-info { display: flex; justify-content: space-between; color: var(--text-light); font-size: 14px; }
        .order-history-actions { display: flex; justify-content: flex-end; gap: 15px; margin-top: 15px; padding-top: 15px; border-top: 1px solid rgba(212, 175, 55, 0.2); }
        .btn-repeat-order { background: var(--gradient-gold); color: white; border: none; padding: 10px 20px; border-radius: var(--border-radius); font-weight: 600; cursor: pointer; transition: var(--transition); font-family: 'Montserrat', sans-serif; }
        .btn-repeat-order:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
        .btn-delete-order { background: #dc3545; color: white; border: none; padding: 10px 20px; border-radius: var(--border-radius); font-weight: 600; cursor: pointer; transition: var(--transition); font-family: 'Montserrat', sans-serif; }
        .btn-delete-order:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); background: #c82333; }
        @media (max-width: 1200px) { .books-grid { grid-template-columns: repeat(3, 1fr); gap: 25px; } }
        @media (max-width: 1024px) { .books-grid { grid-template-columns: repeat(2, 1fr); gap: 25px; }  }
        @media (max-width: 768px) {
            .books-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; padding: 0 4px; margin: 20px 0 40px; }
            
            .catalog-filters { flex-direction: column; align-items: stretch; gap: 15px; }
            .filter-group { width: 100%; }
            .filter-actions { width: 100%; justify-content: space-between; }
            .filter-input { height: 50px; font-size: 16px; padding: 12px 16px; }
            .filter-input-suffix { font-size: 16px; right: 20px; }
            .filter-btn { padding: 12px; font-size: 16px; min-width: 48%; }
            .catalog-subtitle { display: none; }
            .main-image-container { max-height: 400px; }
            .nav-indicator { bottom: 15px; }
            .gallery-thumbnails { margin-top: 15px; gap: 8px; }
            .thumbnail { width: 60px; height: 60px; }
            .profile-header { display: none; }
            .mobile-fixed-cart-btn { display: flex; }
            .time-options { grid-template-columns: 1fr; }
            .order-history-books { grid-template-columns: 1fr; }
            .order-history-actions { flex-direction: column; }
            .trust-points { grid-template-columns: 1fr; }
            .product-seo-links-list { grid-template-columns: 1fr; }
        }
        @media (max-width: 480px) {
            .books-grid { grid-template-columns: 1fr; gap: 15px; padding: 0 2px; margin: 15px 0 30px; }
            
            .sidebar { width: 85%; }
            .main-image-container { max-height: 350px; }
            .summary-row { font-size: 18px; }
            .summary-total { font-size: 30px; }
            .summary-total-value { font-size: 32px; }
            .btn-proceed { font-size: 20px; padding: 16px; border-radius: 12px; }
            .empty-state { padding: 60px 25px; margin: 40px 10px; }
            .empty-icon { font-size: 70px; }
            .empty-title { font-size: 30px; }
            .empty-message { font-size: 18px; }
            .header-container { flex-wrap: wrap; gap: 10px; }
            .logo { font-size: 28px; }
            .logo i { font-size: 24px; }
            .btn-cart-icon { width: 44px; height: 44px; }
            .btn-cart-icon i { font-size: 20px; }
            .cart-badge-icon { width: 18px; height: 18px; font-size: 10px; }
            .profile-container, .payment-container, .order-history-container { padding: 25px 20px; margin: 20px 10px; }
            .profile-avatar { width: 90px; height: 90px; font-size: 36px; }
            .profile-name { font-size: 24px; }
            .payment-title, .success-title { font-size: 26px; }
            .gallery-thumbnails { gap: 6px; flex-wrap: nowrap; overflow-x: auto; padding: 8px 0; }
            .thumbnail { width: 55px; height: 55px; flex-shrink: 0; }
            .book-header { flex-direction: row; align-items: center; gap: 15px; }
            .detail-like-btn { width: 48px; height: 48px; }
            .detail-like-btn i { font-size: 22px; }
            .contact-options { flex-direction: column; gap: 10px; }
            .time-options { grid-template-columns: 1fr; }
            .modal-content { padding: 25px; }
            .modal-quantity-selector { flex-direction: column; gap: 10px; }
            .modal-actions { flex-direction: column; }
            .order-history-header { flex-direction: column; align-items: flex-start; gap: 10px; }
            .order-history-actions { flex-direction: column; }
        }
        .page { opacity: 0; transform: translateY(20px); transition: var(--transition); animation: fadeIn 0.5s ease forwards; min-height: calc(100vh - 80px); padding-bottom: 80px; }
        @keyframes fadeIn { to { opacity: 1; transform: translateY(0); } }
        .hidden { display: none !important; }
        @supports (-webkit-touch-callout: none) {
            body { -webkit-font-smoothing: antialiased; }
            input, textarea, select { -webkit-appearance: none; border-radius: var(--border-radius); }
            .filter-input, .filter-select, .quantity-input { font-size: 16px; }
            .page { min-height: calc(100vh - 120px); }
        }

        /* === FAQ Section Styles === */
        .faq-container { max-width: 800px; margin: 0 auto; padding: 20px; }
        .faq-subtitle { text-align: center; color: var(--secondary-brown); font-size: 20px; margin-bottom: 35px; font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 500; }
        .faq-accordion { display: flex; flex-direction: column; gap: 12px; }
        .faq-item { background: white; border-radius: var(--border-radius); overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid rgba(212, 175, 55, 0.15); transition: var(--transition); }
        .faq-item:hover { box-shadow: var(--shadow-md); border-color: rgba(212, 175, 55, 0.3); }
        .faq-question { padding: 20px 24px; cursor: pointer; display: flex; align-items: center; justify-content: space-between; font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 18px; color: var(--primary-brown); transition: var(--transition); }
        .faq-question:hover { color: var(--gold-accent); }
        .faq-question i { font-size: 14px; transition: transform 0.3s ease; color: var(--gold-accent); flex-shrink: 0; margin-left: 16px; }
        .faq-item.active .faq-question i { transform: rotate(180deg); }
        .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease, padding 0.3s ease; padding: 0 24px; font-family: 'Cormorant Garamond', serif; font-size: 18px; line-height: 1.7; color: #5a4a3a; }
        .faq-item.active .faq-answer { max-height: 500px; padding: 0 24px 20px; }
        .faq-contact { background: linear-gradient(135deg, rgba(212, 175, 55, 0.1), rgba(109, 82, 61, 0.05)); border-radius: var(--border-radius); padding: 30px; margin-top: 40px; text-align: center; border: 1px solid rgba(212, 175, 55, 0.2); }
        .faq-contact-title { font-family: 'Cormorant Garamond', serif; font-size: 24px; font-weight: 700; color: var(--primary-brown); margin-bottom: 10px; }
        .faq-contact-text { font-family: 'Montserrat', sans-serif; font-size: 16px; color: #5a4a3a; margin-bottom: 25px; }
        .faq-contact-buttons { display: flex; gap: 15px; justify-content: center; flex-wrap: wrap; }
        .faq-btn { padding: 14px 28px; border-radius: var(--border-radius); font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 15px; cursor: pointer; transition: var(--transition); border: none; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
        .faq-btn-vk { background: white; color: var(--primary-brown); border: 2px solid var(--primary-brown); }
        .faq-btn-vk:hover { background: rgba(212, 175, 55, 0.15); transform: translateY(-2px); box-shadow: var(--shadow-md); }
        .faq-btn-catalog { background: var(--gradient-gold); color: white; }
        .faq-btn-catalog:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

        /* === Social Section Styles === */
        .social-header { text-align: center; margin-bottom: 30px; }
        .social-page-title { font-family: 'Cormorant Garamond', serif; font-weight: 700; color: var(--primary-brown); line-height: 1.3; position: relative; display: inline-block; }
        .social-page-title::after { content: ''; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); width: 60px; height: 3px; background: var(--gold-accent); border-radius: 2px; opacity: 0.7; }
        .social-page-title br { display: none; }
        .social-container { max-width: 800px; margin: 0 auto; padding: 20px; }
        .social-list { display: flex; flex-direction: column; gap: 12px; }
        .social-row { display: flex; align-items: center; background: white; border-radius: var(--border-radius); padding: 18px 22px; box-shadow: var(--shadow-sm); border: 1px solid rgba(212, 175, 55, 0.15); text-decoration: none; transition: var(--transition); }
        .social-row:hover { background: rgba(212, 175, 55, 0.06); border-color: rgba(212, 175, 55, 0.35); }
        .social-row-icon { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--secondary-brown), var(--primary-brown)); display: flex; align-items: center; justify-content: center; margin-right: 18px; flex-shrink: 0; }
        .social-row-icon i { font-size: 18px; color: var(--gold-accent); }
        .social-row-content { flex-grow: 1; }
        .social-row-name { font-family: 'Montserrat', sans-serif; font-size: 16px; font-weight: 600; color: var(--primary-brown); margin-bottom: 4px; }
        .social-row-desc { font-family: 'Montserrat', sans-serif; font-size: 14px; color: #6b5a4e; }
        .social-row-arrow { color: var(--gold-accent); font-size: 14px; margin-left: 16px; transition: transform 0.2s ease; }
        .social-row:hover .social-row-arrow { transform: translateX(4px); }
        .social-row-internal { background: linear-gradient(135deg, rgba(212, 175, 55, 0.08), rgba(212, 175, 55, 0.04)); border-color: rgba(212, 175, 55, 0.25); }
        .social-row-internal:hover { background: linear-gradient(135deg, rgba(212, 175, 55, 0.12), rgba(212, 175, 55, 0.06)); border-color: rgba(212, 175, 55, 0.4); }
        .social-footer-text { text-align: center; color: #6b5a4e; font-family: 'Montserrat', sans-serif; font-size: 14px; margin-top: 30px; line-height: 1.6; max-width: 500px; margin-left: auto; margin-right: auto; }
        .new-badge { display: none; }
        .social-row-badges { display: none; }
        .social-section-divider { display: flex; align-items: center; justify-content: center; margin: 24px 0; }
        .divider-line { flex: 1; height: 1px; background: linear-gradient(to right, transparent, rgba(212, 175, 55, 0.4), transparent); }
        .divider-text { font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 500; color: #b8944d; padding: 0 20px; letter-spacing: 1px; text-transform: uppercase; white-space: nowrap; }
        @media (max-width: 600px) {
            .social-page-title { font-size: 24px; }
            .social-page-title br { display: block; }
            .catalog-title { font-size: 32px; }
        }


body.book-product-page #bookDetailPage {
  display: block;
}

.book-product-page .book-detail-title {
  margin-top: 0;
}

.book-product-page .book-back-button {
  font: inherit;
}

.book-product-page .nav-dot {
  padding: 0;
}

.book-product-page .sidebar-item {
  text-decoration: none;
}

.book-product-page .mobile-fixed-cart-btn {
  display: none !important;
}