body{
font-family:Arial, sans-serif;
margin:0;
background:#f7f7f7;
color:#222;
}

/* HEADER */

.header{
background:#111;
color:#fff;
border-bottom:1px solid #222;
}

.header .container{
max-width:1200px;
margin:0 auto;
padding:18px 20px;

display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
}

.logo a{
font-size:20px;
font-weight:600;
color:#fff;
text-decoration:none;
}

.menu a{
color:#ddd;
text-decoration:none;
margin-right:18px;
font-size:15px;
transition:.2s;
}

.menu a:hover{
color:#fff;
}

.phones{
font-size:14px;
color:#fff; /* белый */
font-weight:500;
}

.phones a{
color:#fff;
text-decoration:none;
}

.phones a:hover{
color:#27A7E7; /* подсветка */
}

/* SOCIAL */

.social a{
display:inline-block;
padding:6px 10px;
border-radius:4px;
margin-left:6px;
color:#fff;
font-size:13px;
text-decoration:none;
}

.social .tg{background:#27A7E7}
.social .vk{background:#4C75A3}
.social .ok{background:#EE8208}

/* FILTERS */

.filters{
padding:20px;
display:flex;
gap:10px;
flex-wrap:wrap;
}

.filters a{
background:#eee;
padding:6px 12px;
border-radius:6px;
text-decoration:none;
color:#333;
font-size:14px;
}

.filters a:hover{
background:#ddd;
}

/* GRID */

.grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
    gap:24px;
    padding:20px;
}

.card{
position:relative;
display:block;
text-decoration:none;
color:#222;
}

.card img{
width:100%;
height:320px;
object-fit:cover;
border-radius:8px;
}

.card h3{
margin:10px 0 0;
font-size:16px;
}

/* BADGES */

.badge span{
position:absolute;
top:10px;
left:10px;
padding:4px 8px;
font-size:12px;
border-radius:4px;
color:white;
}

.new{background:#e74c3c;}
.hit{background:#ff7a00;}
.stock{background:#2ecc71;}
.order{background:#3498db;}

/* ABOUT */

.about{
max-width:900px;
margin:40px auto;
padding:20px;
line-height:1.6;
}

/* FOOTER */

.footer{
background:#111;
color:#aaa;
padding:30px 0;
font-size:14px;
text-align:center;
margin-top:auto;
}

.footer a{
color:#fff;
text-decoration:none;
}

/* LAYOUT */

html,body{
height:100%;
}

body{
display:flex;
flex-direction:column;
}

main{
flex:1;
}

.container{
max-width:1400px;
margin:0 auto;
padding:0 20px;
}

.collection-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
}

@media (min-width: 900px) {
    .collection-layout {
        grid-template-columns: 2fr 1fr;
        align-items: start;
    }
}

.right {
    position: sticky;
    top: 20px;
}

.back-btn {
    display: inline-block;
    margin-bottom: 20px;
    text-decoration: none;
}

.collection-layout {
    display: grid;
    gap: 30px;
}

@media (min-width: 900px) {
    .collection-layout {
        grid-template-columns: 2fr 1fr;
    }
}

.left {
    min-width: 0;
}

.right {
    position: sticky;
    top: 20px;
    align-self: start;
}

/* карточки товаров */
.items {
    margin-top: 15px;
}

.item {
    border-bottom: 1px solid #ddd;
    padding: 10px 0;
}

/* FLIPBOOK */

#flipbook{
margin:40px auto;
}

#flipbook .page{
background:white;
}

#flipbook img{
width:100%;
height:auto;
display:block;
}

.collection-info {
    margin-bottom: 30px;
}

.collection-info .meta {
    display: grid;
    gap: 8px;
    font-size: 14px;
}

.collection-viewer img {
    width: 100%;
    height: auto;
    max-width: 100%;
}

/* FLIPBOOK catalog*/

.catalog{

max-width:1000px;
margin:40px auto;

}

#flipbook{

width:100%;
height:600px;

}

#flipbook .page{

background:white;

}

#flipbook img{

width:100%;
height:auto;
display:block;

}

.page img {
    width: 100%;
    height: auto;
    border-radius: 10px;
}

.catalog{
max-width:1000px;
margin:40px auto;
}

#flipbook{
margin:0 auto;
}

#flipbook img{
width:100%;
height:auto;
display:block;
}

.catalog-container{

max-width:1100px;
margin:40px auto;
padding:0 20px;

}

.catalog-container object{

width:100%;
height:900px;

border:1px solid #ddd;
border-radius:6px;

background:white;

}

.back-link{

max-width:1100px;
margin:20px auto;
padding:0 20px;

}

.back-link a{

text-decoration:none;
color:#111;
font-weight:600;

}

.collection-menu{

max-width:1100px;
margin:20px auto;
padding:0 20px;

display:flex;
gap:10px;

overflow-x:auto;

}

.collection-menu a{

padding:6px 12px;

background:#eee;
border-radius:4px;

text-decoration:none;
font-size:14px;

white-space:nowrap;

color:#333;

}

.collection-menu a:hover{
background:#ddd;
}

.collection-menu a.active{

background:#111;
color:white;

}

.catalog{
max-width:1100px;
margin:40px auto;
padding:0 20px;
}

.catalog object{
width:100%;
height:90vh;
border-radius:8px;
box-shadow:0 10px 30px rgba(0,0,0,0.15);
}

.collection-info{
max-width:900px;
margin:40px auto 20px auto;
padding:0 20px;
text-align:center;
}

.collection-info h1{
margin-bottom:15px;
}

.collection-desc{
font-size:16px;
line-height:1.6;
color:#555;
margin-bottom:20px;
}

.download a{
display:inline-block;
padding:10px 18px;
background:#111;
color:white;
text-decoration:none;
border-radius:6px;
}

.download a:hover{
background:#333;
}

.desktop-pdf{
display:block;
}

.mobile-pdf{
display:none;
}

.open-pdf{

display:inline-block;
padding:12px 20px;

background:#111;
color:white;

border-radius:6px;

text-decoration:none;

margin:20px 0;

}

.items-grid {
    display: grid;
    gap: 15px;
}

.item-card {
    border: 1px solid #ddd;
    padding: 15px;
    border-radius: 10px;
    background: #fff;
}

.sku {
    font-weight: 700;
    margin-bottom: 5px;
}

.size,
.material {
    color: #666;
    margin-bottom: 5px;
}

.price {
    margin-top: 10px;
    font-weight: 700;
    font-size: 18px;
}

/* мобильные */

@media (max-width:768px){

.desktop-pdf{
display:none;
}

.mobile-pdf{
display:block;
text-align:center;
}

}

.filters a.active {
    background: #000;
    color: #fff;
    border-radius: 6px;
    padding: 6px 10px;
}

.pagination {
    margin: 30px 0;
    text-align: center;
}

.pagination a {
    display: inline-block;
    margin: 3px;
    padding: 6px 10px;
    border: 1px solid #ccc;
    text-decoration: none;
}

.pagination a.active {
    background: #000;
    color: #fff;
}

.pagination {
    clear: both;
}

.pagination {
    margin: 30px 0;
    text-align: center;
}

.pagination a {
    display: inline-block;
    margin: 5px;
    padding: 8px 14px;
    border: 1px solid #ccc;
    text-decoration: none;
    border-radius: 6px;
}

.pagination a:hover {
    background: #000;
    color: #fff;
}

.collection-viewer {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 15px;
}

.collection-viewer .page img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* десктоп — можно ограничить ширину */
@media (min-width: 768px) {
    .collection-viewer {
        max-width: 900px;
        margin: 0 auto;
    }
}

#lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.9);

    display:none;

    justify-content: center;
    align-items: center;

    z-index: 9999;
}

#lightbox img {
    max-width: 95%;
    max-height: 95%;
    object-fit: contain;
}

.page img {
    cursor: zoom-in;
}

/* PAGINATION*/

.collection-nav{

display:flex;
justify-content:space-between;
margin:40px auto;
max-width:1000px;

}

.collection-nav a{

background:#111;
color:#fff;
padding:10px 20px;
text-decoration:none;
border-radius:4px;

}

.collection-nav{

max-width:900px;
margin:30px auto;

display:flex;
justify-content:space-between;
gap:20px;

padding:0 20px;

}

.collection-nav a{

background:#111;
color:white;

padding:10px 18px;

border-radius:6px;

text-decoration:none;

font-size:14px;

transition:0.2s;

}

.collection-nav a:hover{

background:#333;

}

/* MOBILE */

@media (max-width:768px){

.header .container{
flex-direction:column;
align-items:flex-start;
}

.menu{
margin:10px 0;
}

.phones{
text-align:left;
}

#flipbook{
width:100%;
height:auto;
}

.left {
    max-width: 900px;
    margin: 0 auto;
}

.collection-viewer.pdf {
    display: flex;
    flex-direction: column;
}

.collection-viewer{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

.collection-viewer{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 15px;
}

.collection-viewer img {
    width: 100%;
    height: auto;
}

.page{
    position:relative;
}

.image-label{
    position:absolute;
    left:10px;
    bottom:10px;

    background:rgba(0,0,0,.65);
    color:#fff;

    padding:8px 12px;
    border-radius:8px;

    font-size:14px;
    line-height:1.4;

    z-index:5;
}

.filters-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin: 20px 0;
}

.filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.size-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.filters a,
.size-filters a {
    padding: 6px 12px;
    border-radius: 20px;
    border: 1px solid #ddd;
    text-decoration: none;
    font-size: 14px;
    color: #333;
    transition: 0.2s;
    background: #fff;
}

.filters a:hover,
.size-filters a:hover {
    background: #f5f5f5;
}