:root {
    --primary: #2a5895;
    --primary-dark: #1e406e;
    --bg-light: #f7fbfd;
    --text-dark: #333;
    --text-muted: #777;
    --border-color: #e5eef5;
    --white: #ffffff;
    --tg-color: #0088cc;
    --wa-color: #25d366;
}
/* shared */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family:'Segoe UI', Arial, sans-serif; background-color:var(--bg-light); color:var(--text-dark); }
.container { max-width:1200px; margin:0 auto; padding:0 15px; }
.w100 { width:100%; }
.flex, .flex-row-col { display:flex; }
.flex-row-col { flex-direction: row;}

/* Header */
.main-header { background:var(--white); border-bottom:1px solid var(--border-color); padding:15px 0; }
.header-content { display:flex; justify-content:space-between; align-items:center; }
.logo-block { display:flex; align-items:center; gap:15px; }
.logo-icon {
    background: var(--primary);
    color: var(--white);
    width: 50px; min-width: 50px;
    height: 50px; min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 20px;
    border-radius: 4px;
}
.logo-icon img { width:100%; height:100%; }
.logo-icon.small { width: 30px; height: 30px; font-size: 14px; }
.logo-text h3 { color:var(--primary); font-size:22px; text-transform:uppercase; letter-spacing:1px; }
.slogan { font-size:10px; text-transform:uppercase; color:var(--text-muted); letter-spacing:2px; font-weight:bold; }
.logo-text .desc { font-size:11px; color:#666; margin-top:5px; max-width:300px; }
.contacts-block { display:flex; gap:30px; align-items:flex-end; }
.header-right-top { display:flex; align-items:center; gap:15px; margin-bottom:5px; }
.social-links { display:flex; gap:8px; }
.social-links a {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-decoration: none;
    font-size: 14px;
    transition: opacity 0.2s, transform 0.2s;
}
.social-links a:hover { opacity: 0.8; transform: scale(1.1); }
.social-tg { background-color: var(--tg-color); }
.social-wa { background-color: var(--wa-color); }
.contact-item { margin-bottom:15px; }
.contact-item i { color: var(--primary); margin-right: 5px; }
.contact-item a { text-decoration: none; color: inherit; font-size: 14px; }
.phone-number { font-size:20px; font-weight:bold; color:var(--primary); display:flex; align-items:center; gap:8px; }
.phone-number a { color: inherit; text-decoration: none; }
.btn-callback {
    background: none;
    border: none;
    color: var(--primary);
    text-transform: uppercase;
    font-size: 11px;
    font-weight: bold;
    cursor: pointer;
    padding: 0;
    display: block;
    width: 100%;
    text-align: center;
}
.btn-callback:hover { text-decoration: underline; }

/* Nav */
.main-nav { background:var(--primary); color:var(--white); position:sticky; top:0; z-index:1000; }
.nav-wrapper { display:flex; justify-content:space-between; align-items:center; }
.nav-menu { display:flex; list-style:none; }
.nav-menu > li { position: relative; }
.nav-menu a { color:var(--white); text-decoration:none; padding:15px 20px; display:block; font-size:13px; font-weight:600;
    text-transform:uppercase; transition:background 0.2s; }
.nav-menu a:hover { background: rgba(255,255,255,0.1); }
.mobile-toggle { display:none; }

/* Dropdown */
.dropdown { position:absolute; top:100%; left:0; background:var(--white); min-width:220px; box-shadow:0 10px 25px rgba(0,0,0,0.15);
    list-style:none; display:none; z-index:1100; border-top: 2px solid var(--primary); }
.dropdown li a { color:var(--text-dark); text-transform:none; padding:12px 20px; border-bottom:1px solid #f0f0f0; }
.dropdown li a:hover { background: #f9f9f9; color: var(--primary); }

@media (min-width: 769px) { .has-children:hover .dropdown { display: block; animation: navFadeIn 0.2s ease-out; } }
@keyframes navFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.nav-tools { display: flex; gap: 20px; font-size: 16px; padding: 0 15px; align-items: center;}

/* MAIN */
h1 { font-size:1.2em; padding:0; }
.container.main { padding-top:20px; }
.container.main section { background:var(--white); padding:15px 20px; border:1px solid var(--border-color); margin-bottom:25px; font-size:14px; }
.container.main p { padding:10px 0; }
.container.main ul { margin-left:20px; }
.container.main li { list-style-type:none; }
.container.main li::before { content:"-"; display:inline-block; margin-right:20px; }
section a, section a:visited { color:var(--primary-dark); }
section a:hover { color:var(--text-muted); }
.rfloat { float:right; }
.lfloat { float:left; }
.content-div { width:400px; height:400px; max-width:30vw; max-height:30vh; position:relative; padding:10px; }
.content-img { position:absolute; max-width:80%; max-height:80%;}
.main-img { max-width:300px; margin-left:20px; }
.left-top { left:0; top:0; }
.right-bottom { right:0; bottom:0; }
.catalog-title { text-decoration:underline; padding-top:20px; }
.add-menu a { display:block; padding:0 0 12px 0; text-decoration:none; color:var(--text-dark); transition:all .5s; font-size:14px; }
.add-menu a:hover { color:#000; transform: translateX(-5px); }

a.product-card { text-decoration:none; color:var(--text-dark);}
a.product-card:hover { color:#000;}
.category-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; }
.category-title { min-height:42px; text-align:center; padding:15px;  }
.category-img { display:flex; justify-content:center; align-items:center; aspect-ratio:1 / 1;}
.category-img img { width:100%; height:100%; object-fit: cover;}

/* Main Grid Layout */
.catalog-container { display:flex; gap:30px; padding-top:20px; }
.sidebar { width:260px; flex-shrink:0; }
.filter-group, .sidebar-info-card { background:var(--white); padding:20px; border:1px solid var(--border-color); margin-bottom:20px; }
.filter-group h3 { font-size:12px; text-transform:uppercase; color:var(--text-muted); margin-bottom:15px; border-bottom:1px solid #eee;
    padding-bottom:8px; }

/* Checkbox Style */
.checkbox-container { display:block; position:relative; padding-left:25px; margin-bottom:12px; cursor:pointer; font-size:14px;
    user-select:none; }
.checkbox-container input { position: absolute; opacity: 0; cursor: pointer; left:0; top:0; width:100%; height:100%; }
.checkmark { position:absolute; top:2px; left:0; height:16px; width:16px; background-color:#eee; border:1px solid #ddd;
    border-radius:2px; }
.checkbox-container:hover input ~ .checkmark { background-color: #ccc; }
.checkbox-container input:checked ~ .checkmark { background-color: var(--primary); border-color: var(--primary); }
.checkmark:after { content:""; position:absolute; display:none; }
.checkbox-container input:checked ~ .checkmark:after { display: block; }
.checkbox-container .checkmark:after { left:5px; top:1px; width:4px; height:8px; border:solid white; border-width:0 2px 2px 0; 
    transform:rotate(45deg); }
.reset-link { font-size:12px; color:var(--text-muted); text-decoration:underline; }

/* Products Area */
.main-content { flex-grow: 1; }
.grid-header { background:var(--white); padding:15px 20px; border:1px solid var(--border-color); margin-bottom:25px;
    display:flex; justify-content:space-between; align-items:center; font-size:14px; }
.pager-btns a {  color:var(--text-dark); padding:5px 10px; border:1px solid #ddd; margin-left:5px; text-decoration:none; }
.product-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; min-height:400px; }
.product-card { background:var(--white); border:1px solid var(--border-color); transition:transform 0.2s, box-shadow 0.2s;
    display:flex; flex-direction:column; cursor: pointer; }
.product-card:hover { transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0,0,0,0.05); }
.card-img { position:relative; background:#f9f9f9; aspect-ratio:1/1; }
.card-img img { width:100%; height:100%; object-fit:cover; }
.brand-tag { position:absolute; top:10px; left:10px; background:rgba(255,255,255,0.9); padding:2px 8px; font-size:10px;
    font-weight:bold; color:var(--text-muted); }
.card-body { padding: 15px; flex-grow: 1; display: flex; flex-direction: column; }
.category-label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; font-weight: bold; }
.product-name { font-size: 14px; margin: 8px 0; font-weight: 600; min-height: 42px; }
.sku { font-size: 11px; color: #999; }
.card-footer { margin-top:auto; padding-top:15px; display:flex; justify-content:space-between; align-items:center; }
.price { font-size: 18px; font-weight: bold; }
.price small { font-weight: normal; font-size: 12px; color: #999; }
.price span { font-size: 14px; }
.btn-add-cart { background:var(--primary); color:var(--white); border:none; height:36px; border-radius:2px; cursor:pointer;
    padding:0 10px; }
.pagination-bottom { margin-top:40px; display:flex; justify-content:center; gap:5px; }
.pagination-bottom a { width:35px; height:35px; display:flex; align-items:center; justify-content:center;
    border:1px solid #ddd; text-decoration:none; color:var(--text-dark); font-weight:bold; }
.pagination-bottom a.active { background: var(--primary); color: var(--white); border-color: var(--primary); }

/* Breadcrumbs */
.breadcrumbs { padding: 15px; font-size: 11px; text-transform: uppercase; color: var(--text-muted); }
.breadcrumbs a { color: inherit; text-decoration: none; }

/* Modal Styles */
.modal-overlay { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0, 0, 0, 0.6); backdrop-filter:blur(2px);
    display:none; align-items:center; justify-content:center; z-index:2000; }
.modal-overlay.active { display: flex; }
.modal-window { background:var(--white); width:100%; max-width:450px; padding:40px; position:relative; 
    box-shadow:0 20px 50px rgba(0,0,0,0.3); border-top:4px solid var(--primary); animation:modalSlideDown 0.3s ease-out;}
.modal-window img { max-width:100%; max-height:200px; display:block; margin:0 auto 20px auto; }
.modal-form { max-height:80vh; overflow-y:auto; }
@keyframes modalSlideDown { from { opacity: 0; transform: translateY(-50px); } to { opacity: 1; transform: translateY(0); } }
.modal-close { position:absolute; top:15px; right:15px; background:none; border:none; font-size:24px; color:var(--text-muted);
    cursor:pointer; transition:color 0.2s; }
.modal-close:hover { color:var(--text-dark); }
.modal-body h2 { color:var(--primary); font-size:24px; margin-bottom:10px; text-transform:uppercase; letter-spacing:1px; }
.modal-subtitle { font-size:13px; color:var(--text-muted); margin-bottom:25px; }
.form-group { margin-bottom: 20px; }
.form-group label { display:block; font-size:12px; font-weight:bold; text-transform:uppercase; margin-bottom:8px; color:var(--text-dark); }
.form-group input, .form-group textarea, .form-group select { width:100%; padding:12px; border:1px solid #ddd;
    border-radius:2px;font-family:inherit; outline:none; }
.form-group input:focus, .form-group textarea:focus { border-color:var(--primary); }
.form-group textarea { height:100px; resize:none; }
.btn-submit { width:100%; background:var(--primary); color:var(--white); border:none; padding:15px; font-weight:bold;
    text-transform:uppercase; letter-spacing:1px; cursor:pointer; transition:background 0.2s; }
.form-buttons { width:100%; display:flex; justify-content:center; margin:20px 0; gap:30px; }
.btn-form { background:var(--primary); color:var(--white); border:none; padding:15px; font-weight:bold;
    text-transform:uppercase; letter-spacing:1px; cursor:pointer; transition:background 0.2s; }
.btn-submit:hover, .btn-form:hover { background:var(--primary-dark); }
.privacy-text { font-size:10px; color:#999; text-align:center; margin-top:15px; }
.privacy-text a { color:var(--primary); text-decoration:none; }
.form-error { padding:3px 10px; background-color:rgba(255,0,0,0.3);color:#f00; border:1px solid #f00; margin-bottom:10px;}
.form-group input.input-error, .form-group textarea.input-error { outline:1px solid #f00; }
input[type=file] { display:none; }

/* Admin Table */
.admin-table { width:100%; font-size:0.8em; }
.admin-table td, th {padding:0 5px; } 
.admin-table tr:nth-child(even) td { background-color:#fff; }
.admin-table tr:hover td { background-color:var(--tg-color); cursor: pointer; color: #fff; }
.admin-table th { background-color: #2a5895; color:#fff; }
td > div { max-height:50px; text-overflow:ellipsis; overflow:hidden; text-wrap:none; }
.tdc { text-align:center; }
.tdr { text-align:right; }
.sitemap-info { width:100%; min-height:300px; resize:vertical;}

/* Slider */
.product-info { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.slider-block { display:block; }
.slider-block img { max-width:100%; max-height:100%; }
.slider-image { max-width:100%;}
.slider-imgs { display:flex; max-width:100%; overflow-x:scroll; padding:20px 0; }
.slider-img { max-width:20%; max-height:100px; cursor:pointer; transition:.3s; display:flex; justify-content:center; align-items:center; }
.slider-img:hover { outline:1px solid var(--primary); transform:translateY(-3px); }

.product-details td { padding:3px 10px; }
.product-details tr:nth-child(2n) { background-color:#eee; }
.editprod-gallery { display:flex; width:100%; overflow-x:auto; max-height:200px; overflow-x:hidden; border-radius:2px;
    border:1px solid #ddd; }
.editprod-img { height:170px; width:170px; min-height:170px; min-width:170px; margin:10px; position:relative; }
.editprod-img img { max-height:100%; max-width:100%; object-fit: contain; }
.editprod-btn-main { position:absolute; top:10px; right:50px; border:1px solid var(--primary); background-color:#fff; }
.editprod-btn-del { position:absolute; top:10px; right:10px; border:1px solid var(--primary); background-color:#fff; }
.editprod-btn-main:hover, .editprod-btn-del:hover, .editdetail-btn:hover { background-color:var(--primary); cursor: pointer; }
.editdetail-btn { border:1px solid var(--primary); background-color:#fff; font-size:30px; margin:0 2px; border-radius:2px; }

/* Footer */
.main-footer { background:#fff; border-top:1px solid var(--border-color); padding:40px 0 10px 0; margin-top:60px; }
.footer-content-grid { display:flex; justify-content:space-between; align-items:center; font-size:12px; color:var(--text-muted); }
.footer-copyright { font-size:12px; color:var(--text-muted); text-align:center; padding-top:20px; }
.message { background:var(--white); width:100%; max-width:450px; padding:40px; position:fixed; bottom:20px; right:20px; 
    box-shadow:0 20px 50px rgba(0,0,0,0.3); border-top:4px solid var(--primary); animation:modalSlideDown 0.3s ease-out;}

/* Responsive */
@media (max-width: 992px) {
    .product-grid { grid-template-columns: repeat(2, 1fr); }
    .category-grid { grid-template-columns: repeat(2, 1fr); }
    .catalog-container { flex-direction: column; }
    .sidebar { width: 100%; }
    .header-content { flex-direction: column; text-align: center; }
    .contacts-block { flex-direction: column; align-items: center; gap: 10px; }
    .footer-content-grid { grid-template-columns: 1fr; text-align: center; gap: 20px; }
    .footer-col { text-align: center !important; }
    .slogan { display:none; }
}

@media (max-width: 768px) {
    .product-info { grid-template-columns: repeat(1, 1fr); }
    .category-grid { grid-template-columns: repeat(1, 1fr); }
    .mobile-toggle { display: block; background: none; border: none; color: white; padding: 15px; 
        font-weight: bold; cursor: pointer; width: 100%; text-align: left; }
    .nav-menu { display: none; flex-direction: column; width: 100%; background: #1e406e; }
    .nav-menu.active { display: flex; }
    .nav-wrapper { flex-wrap: wrap; }
    .nav-tools { display: none; }
    .nav-menu > li { width: 100%; }
    .dropdown { position: static; width: 100%; box-shadow: none; background: rgba(0,0,0,0.1); border-top: none; }
    .dropdown li a { color: rgba(255,255,255,0.8); padding-left: 40px; }
    .has-children.open .dropdown { display: block; }
    .flex-row-col { flex-direction: column;}
}