/* style.css */

html { scroll-behavior: smooth; }
#about, #product, #constructor, #contacts, #top {
  scroll-margin-top: 60px;
}


p {
    margin: 10px 0 0 0; 
    font-weight: 300;
    color: #000;
    font-family: "Geist Thin", "Geist Light", system-ui, sans-serif;
    }
h1, h2, h3 {
    margin: 10px 0 0 0;
    font-weight: 100;
    color: #9d9679;
    font-family: "Geist Thin", "Geist Light", system-ui, sans-serif;
    }
h1  {font-size: 50px;}
h2  {font-size: 40px;}
h3  {font-size: 23px;}
ul, li {
    font-family: "Geist Light", "Geist Thin", system-ui, sans-serif;
    }
/* не даём медиа вылезать */
img, video {max-width:100%; height:auto; margin: 0;}
body {
    background: #fff;
    text-align: center;
    margin: 0;
    padding: 0;
    font-family: Geist, Proxima nova;
    }
.freeshipping {
    background: #efdcb8;
    background: hsl(39 48% 89% / 1);
    background: hsl(40 40% 78% / 1);
    background: #4f5051;
    color: #86570e;
    color: #fff;
    font-size: 13px;
    padding: 3px 0;
    margin: 56px 0 0 0;
    }
.wrapper {
    max-width: 1200px;
    max-width: min(1200px, 100%); 
    margin: auto;
    padding: 0 16px;
    }





/* лого*/

.logo {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0px 20px;
    }
.logo img {
    height:27px;
    }





/* h1 для СЕО скрыт */
.visually-hidden {
    font-size: 12px;
}



/* меню */

.menu-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0px;
    position: relative;
    background: hsl(38.36deg 32.64% 88.53%);
    background: #fff6e6;
    background: #f5efe5;
    background: #f4f8fb;
    flex-wrap: nowrap;
    position: fixed;
    z-index: 6;
    width: 100%;
    margin: -56px 0px 0px 0;
    }
.menu-but-ul {
    display: none;
    position: absolute;
    transform: translateX(0px) translateX(0px);
    top: 10px;
    left: 0px;
    width: 100%;
    padding: 30px;
    }
.menu-but {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px;
    cursor: pointer;
    }
.menu-but-ul {
    display: block;
    position: absolute;
    background: #fff;
    top: 100%; /* Строго под menu-flex */
    left: 0;
    padding: 0;
    list-style: none;
    margin: 0;
    z-index: 1000;
    overflow: hidden;
    height: 0;
    transition:0.3s ease; /* Анимация высоты и padding */
    opacity: 0;
    }
.menu-but-ul.active {
    height: 400px;
    opacity: 1;
    background: #fff6e6;
    background: #f5efe5;
    }
.menu-but-li {
    padding: 0px;
    font-size: 16px;
    color: #333;
    cursor: pointer;
    border-bottom: 1px solid #8d340014;
    position: relative;
    margin: 0px 30px;
    transition: 1s;
    }
.menu-but img {
    height: 27px;
    transition: transform 0.3s ease;
    }
.menu-but-ul .menu-link{
    display:block; 
    padding: 30px 0; 
    height:100%;
    color: inherit; 
    text-decoration: none;
    }
.menu-link:hover{
    background: #f7f7f9;
    transition: 0s;
    background: #f7f7f9;
    }
@media screen and (max-width: 780px) {
    .menu-but-ul {
        width: 100%;
    }
    .menu-but-ul.active {
    }
    }
@media screen and (min-width: 781px) {
    .menu-but-ul {
        left: 0px;
        min-width: 300px;
    }
    .menu-but-ul.active {
    }
}
@media (max-width: 600px) {
  .menu-flex {gap: 8px;}
  .menu-but, .cart {padding: 12px;}
  .logo img {max-width: 150px;}
    }






/* корзина */
.cart {
    position:relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px;
    cursor: pointer;
    }
.cart img {
    width: 27px;
    transition: transform 0.3s ease;
    }
#cartBadge {
    position: absolute;
    right: 29px;
    top: 32px;
    min-width: 28px;
    border-radius: 0px;
    font-size: 14px;
    color: #000;
    text-align: center;
    transform: translate(50%, -50%);
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1.3;
    }
.toast {
    position:fixed; left:50%; bottom:24px; transform:translateX(-50%);
    background:#111; color:#fff; padding:10px 14px; border-radius:10px;
    font-size:14px; opacity:0; pointer-events:none; transition:opacity .2s, transform .2s;
    z-index:9999;
    }
.toast.show { 
    opacity:1; transform:translateX(-50%) translateY(-6px); 
    }

/* локальный тост поверх карточки */
.toast-card{
    position: absolute;
    z-index: 20;               /* поверх содержимого карточки */
    background: #ffffff;
    color: #000000;
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 17px;
    font-family: "Geist Light", system-ui, sans-serif;
    box-shadow: 0 8px 30px rgba(0,0,0,.25);
    opacity: 0;
    transform: translate(-50%, -50%) scale(.1);
    transition: opacity .5s ease, transform .5s ease;
    pointer-events: auto;
    cursor: pointer;
    user-select: none;
    }
.toast-card.show{
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    }
.toast-card a{ color:#fff; text-decoration: underline; }












/* слайдер 1 */
.slider {
    position: relative;
    }
.slider-flex {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;  /* Привязка к слайдам */
    scroll-behavior: smooth;        /* Плавная прокрутка */
    -webkit-overflow-scrolling: touch; /* Для iOS */
    background: hsl(240deg 14.29% 97.25%);
    }
.slider-photo {
    scroll-snap-align: start;
    min-width: 100%;
    height: 500px;
    height: clamp(220px, 56vw, 500px);
    border-radius: 20px;
    background: aliceblue;
    }
.slider-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    }
.slider-flex::-webkit-scrollbar { height: 1px;}
.slider-flex::-webkit-scrollbar-thumb { background-color: rgb(146, 146, 146); border-radius: 2px; cursor: pointer;}
.slider-flex::-webkit-scrollbar-track { background: rgba(250, 250, 250, 0); margin: 20px 0;}
/* кнопка конструкутор*/
.slider-text-but {
    cursor: pointer;
    position: absolute;
    transform: translateX(-50%) translateY(0);
    left: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    border-radius: 6px;
    min-width: 250px;
    top: 41%;
    padding: 8px 10px;
    box-shadow: 0px 0px 50px #00000020;
    }
.slider-text {
    font-weight: 100;
    font-size: 15px;
    color: #000;
    margin: 0 10px 0 10px;
    }
.slider-big-photo-but {
    cursor: pointer;
    padding: 15px 32px;
    background: #930000;
    border-radius: 4px;
    font-size: 13px;
    color: #fff;
    text-transform: uppercase;
    text-decoration: none;
    }
.slider-big-photo-but:hover {
    background: #4f5051;
    }
/* Стили для кнопок  вправо влево*/
.slider-controls {
    position: absolute;
    width: 100%;
    top: 50%;
    left: 50%;
    display: flex;
    gap: 0px;
    align-items: center;
    justify-content: center;
    transform: translateX(-50%) translateY(-50%);
    transition: 0.2s;
    }
.slider-arrow {
    cursor: pointer;
    background: rgb(255 255 255 / 0%);
    color: white;
    border-radius: 0px;
    text-decoration: none;
    user-select: none;
    font-size: 14px;
    height: 500px;
    height: clamp(220px, 56vw, 500px); 
    width: calc(100% / 7);
    box-sizing: border-box;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    top: -1px;
    position: relative;
    transition: 0.5s ease;
    }
.slider-arrow:hover {
    background: rgb(255 255 255 / 20%);
    transition: 0.1s ease;
    }
.slider-arrow.right {
    margin: 0;
    }
.slider-arrow.left {
    margin: 0;
    }








/* слайдер аккордеон */

.slider2 { 
  position: relative; 
  background: #000;
}
.slider2-flex {
  --active: 50%;
  display: flex;
  overflow: hidden;
}
.slider2-photo {
  position: relative;
  overflow: hidden;
  outline: none;
  flex: 1 1 0;
  min-width: 0;
  height: clamp(510px, 56vw, 600px);
  cursor: pointer;
  transition: flex-basis .6s cubic-bezier(.5,0,.5,1), opacity .5s ease; /* скорость расширения */
}
.slider2-photo img {
  width: 100%;
  height: 100%;
  object-fit: none;
  transform: scale(1);
  transition: transform 2.3s ease;  /* скорость уменьшения */
  will-change: transform;           /* плавнее на GPU */
}
.slider2-photo:hover img {
  transform: scale(1.2);            /* hover увелияениe */
  transition: 0.15s ease;           /* hover скорость увеличения   */
}
.slider2-flex:has(.slider2-photo:is(:focus, :active))
  .slider2-photo:is(:focus, :active):not(:hover) img {
  transform: scale(1);
  transition: transform .6s cubic-bezier(.5,0,.5,1);
}
.slider2-flex:has(.slider2-photo:is(:focus, :active)) .slider2-photo {
  flex-basis: calc((100% - var(--active)) / 6);
  opacity: .5;
}
.slider2-flex:has(.slider2-photo:is(:focus, :active)) .slider2-photo:is(:focus, :active) {
  flex-basis: var(--active);
  opacity: 1;
}
.slider2-flex:has(.slider2-photo:focus) .slider2-photo:focus img {
  transform: scale(1);
  transition: transform .6s cubic-bezier(.5,0,.5,1);
}
.slider2-photo:focus-visible { outline: 2px solid #0003; }
.slider2-text-but { pointer-events: none; }
.slider2-big-photo-but { pointer-events: auto; }
@media (prefers-reduced-motion: reduce) {
  .slider2-photo{ transition: none !important; }
  .slider2-photo img{ transition: none !important; }
}
/* (необязательно) Тонкая настройка ширины активной плитки по брейкпоинтам */
@media (max-width: 640px) {
  .slider2-flex{ --active: 70%; } /* на мобиле поменьше «растяжка» */
}
@media (min-width: 1024px) {
  .slider2-flex{ --active: 50%; } /* на десктопе побольше */
}





 /* about */ 

.about-text-block {
    margin: 50px auto;
    max-width: 700px;
    }
.about-title {
    padding: 0 10px;
    }
.about-title-text {
    padding: 0 10px; 
    font-size: 23px;
    }
.about-title-text p {
    text-align: left;
    font-size: 18px;
    line-height: 1.5;
    }
.about-made-in {
    background: #fff;
    color: #000000;
    border-top: 6px #000 solid;
    border-bottom: 6px #000 solid;
    width: fit-content;
    text-align: center;
    margin: 40px auto 0px;
    padding: 4px 0px 6px 0px;
    text-transform: uppercase;
    font-family: 'Geist Thin';
    font-size: 19px;
    }






/* имидж понтовые фото*/
.big-block {
    position: relative;
    height: 540px;
    overflow: hidden;
    margin-top: 40px;
    }
.big-photo {
height: 100%;
    overflow: hidden;
    position: relative;
    background-image: url(img/slider21.webp);
    background-position: left top;
    background-size: cover;
    background-attachment: fixed;
            /* 
            animation-name: zoomimg;
            animation-duration: 10s;
            animation-iteration-count: infinite;
            }
        @keyframes zoomimg {
            0%   {background-size: calc(100% + 200%);}
            50%  {background-size: calc(100% + 50%);}
            100% {background-size: calc(100% + 200%);} 
            */
    }
.big-photo img {
    }
.big-photo2 {
height: 100%;
    overflow: hidden;
    position: relative;
    background-image: url(img/slider20.webp);
    background-position: center top;
    background-size: cover;
    background-attachment: fixed;
    }
.big-photo3 {
height: 100%;
    overflow: hidden;
    position: relative;
    background-image: url(img/slider22.webp);
    background-position: left bottom;
    background-size: cover;
    background-attachment: fixed;
    }


.big-photo-text {
    text-transform: uppercase;
    position: absolute;
    transform: translateX(-50%) translateY(-50%);
    top: 50%;
    left: 50%;
    font-size: calc(20px + 13.0vw);
    color: #fff;
    line-height: 0.8;
    letter-spacing: -4px;
    font-family: 'Geist bold';
            
            animation-name: zoomtext;
            animation-duration: 10s;
            animation-iteration-count: infinite;
            }
        @keyframes zoomtext {
            0%   {font-size: calc(5000px + 13.0vw); color: transparent;}
            30%  {font-size: calc(20px + 13vw); color: #fff;}
            60%  {font-size: calc(20px + 13vw); color: #fff;}
            100% {font-size: calc(5000px + 13.0vw); color: transparent;} 
            
    }






/* товары */
.prod-flex { 
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 17px;
    margin: 30px 0 0 0;
    }
.prod {
    width: 31%;
    background: hsl(0deg 0% 100%);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 6px;
    box-shadow: 0px 0px 30px 0px hsl(0deg 0% 0% / 10%);
    cursor: pointer;
    padding: 0;
    transition: 0.2s ease;
    position: relative;
    justify-content: space-between;
    }
.prod:hover {
    box-shadow: 0px 0px 10px 0px hsl(0deg 0% 0% / 10%);
    }
.prod-scroll {
    width: -webkit-fill-available;
    display: flex;
    overflow-y: hidden;
    border-radius: 0px;
    }
.prod-scroll::-webkit-scrollbar { height: 1px;}
.prod-scroll::-webkit-scrollbar-thumb { background-color: rgb(146, 146, 146); border-radius: 2px; cursor: pointer;}
.prod-scroll::-webkit-scrollbar-track { background: rgba(250, 250, 250, 0); margin: 20px 0;}

.prod-photo {
    min-width: -webkit-fill-available;
    /* height: 420px;
    height: clamp(220px, 105vw, 480px); */
    aspect-ratio: 600/840;
    background: hsl(212 17% 92% / 1);
    }
.prod-photo img{
    position: relative;
    transform: translateX(-50%) translateY(-50%);
    width: 100%; 
    height:100%; 
    object-fit: cover; 
    transform:none; 
    top:auto; 
    left:auto;
    display: block;
    }
.prod-text {
    padding: 0 30px;
    font-size: 17px;
    }
.prod-text p {
    margin: 0 0 10px 0;
    }
.prod-name {
    margin: 10px 60px;
    font-size: 20px;
    font-weight: 100;
    }
.prod-size {
    margin: 10px 0 0 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2px;
    }
.prod-size-select {
    border-right: solid 1px #9c95784f;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 27px;
    font-size: 11px;
    font-family: 'Geist Thin';
    transition: 0.5s;
    border-radius: 3px;
    }
.prod-size-select:hover {
    background: #4e4f50;
    color: #fff;
    transition: 0s;
    }
.prod-size-select { cursor: pointer; user-select: none; }
.prod-size-select.selected{
    background:#930000;
    color:#fff; 
    font-weight:600;
}
.prod-size-select.shake{ animation: shake .35s linear 1; }
@keyframes shake{
    0%,100%{transform:translateX(0)}
    25%{transform:translateX(-4px)}
    50%{transform:translateX(4px)}
    75%{transform:translateX(-2px)}
    }
.size-error {
    color: #ffffff;
    font-size: 13px;
    font-family: "Geist Light", sans-serif;
    position: absolute;
    left: 50%;
    bottom: 19%;
    transform: translateX(-50%);
    background: #930000;
    padding: 10px 20px;
    border-radius: 6px;
    animation: sizeFadeIn 0.5s ease;
    text-transform: uppercase;
    pointer-events: none;
    }
@keyframes sizeFadeIn {
    from { opacity: 0; bottom: 30%;}
    to   { opacity: 1; }
    }

.prod-size-select-txt {
    font-size: 10px;
    text-transform: uppercase;
    background: #e9e9e9;
    color: #6d6d6d;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 30px;
    cursor: pointer;
    }
.prod-size-select-txt:hover {
    background: #930000;
    color: #fff;
    }
.prod-cust-buy {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    align-items: center;
    padding: 13px 13px;
    }
.prod-cost {
    font-weight: 400;
    font-size: 20px;
    font-family: roboto light;
    color: #000;
    }
.prod-cost-sale {
    font-weight: 400;
    color: #c90000;
    text-decoration: line-through;
    font-size: 1.0rem;
    }

.prod-buy {
    position: relative;
    overflow: hidden;
    background: #4f5051;
    border-radius: 4px;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 17px;
    width: 70px;
    transition: 0.3s ease;
    }
.prod-buy:hover {
    background: #930000;
    transition: 0.3s ease;
    }
.prod-buy span,
.prod-buy img {
    position: absolute;
    transition: 0.3s ease;
    }
.prod-buy span {
    font-size: 13px;
    }
.prod-buy img {
    width: 16px;
    left: 100%;
    transform: translateX(0);
    }
.prod-buy:hover span,
.prod-buy:active span {
    transform: translateX(-150%);
    }
.prod-buy:hover img,
.prod-buy:active img {
    left: 50%;
    transform: translateX(-50%);
    }


@media screen and (min-width: 900px) and (max-width: 1900px) { 
    }
@media screen and (min-width: 780px) and (max-width: 900px) { 
    .prod {width: 47%}
    .prod-text {font-size: 16px;}
    }
@media screen and (min-width: 425px) and (max-width: 780px) { 
    .prod {width: 47%}
    .prod-text {font-size: 16px;}
    }
@media screen and (min-width: 320px) and (max-width: 425px) { 
    .prod {width: 96%}
    .prod-text {font-size: 14px;}
    }
/* сетка товаров — немного мягче брейкпоинты */
@media (max-width: 900px){ .prod {width: 47%;} }
@media (max-width: 560px){
    .prod {width: 100%;}
    .prod-text {font-size: 14px;}
    }

.prod-bullets {
    position: absolute;
    left: 0px;
    top: 10px;
    font-size: 13px;
    color: #000;
    background: #ffffff9c;
    padding: 0 10px 0px 0px;
    text-align: left;
    border-radius: 0px 0px 10px 0px;
    animation-name: bullets;
    animation-duration: 5.0s;
    animation-iteration-count: 1;
    pointer-events: none;
    backdrop-filter: blur(20px);
    }
@keyframes bullets {
    0% {left: -320px;}
    90% {left: -320px;}
    100% {left: 0px;}
    }
.prod-bullets ul {padding: 0px 10px 0px 30px;}
.prod-bullets li {}







/* стрелки для галереи внутри prod-scroll */
.prod-scroll { position: relative; }
.prod-galery-but-wrap {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: clamp(220px, 105vw, 480px);
    display: flex; align-items: center; justify-content: space-between;
    pointer-events: none;
    z-index: 5;
    }
.prod-galery-but {
    pointer-events: auto;
    width: 28px; height: 70px;
    display: flex; align-items: center; justify-content: center;
    user-select: none; cursor: pointer;
    color: #fff; background: transparent;
    font-size: 32px; line-height: 1;
    transition: background .2s ease;
    }
.prod-galery-but:hover { background: rgba(0,0,0,.15); }

/* полноэкранная галерея */
.prod-galery {
    position:fixed; inset:0; display:none;
    align-items:center; justify-content:center;
    background:rgba(0,0,0,.85); z-index:5000; padding:18px;
    }
.prod-galery.show { display:flex; }
.prod-galery-inner {
    position:relative; width:100%; height:100%;
    display:flex; align-items:center; justify-content:center;
    }
.prod-galery-img {
    max-width:94vw; max-height:90vh;
    object-fit:contain; border-radius:10px;
    }

/* кнопки в галерее */
.prod-galery-but-close,
.prod-galery-but-prev,
.prod-galery-but-next {
    position:absolute; color:#fff; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    background:rgba(0,0,0,.35); transition: background .2s ease;
    }
.prod-galery-but-close { right:0px; top:0px; width:40px; height:40px; font-size:22px; }
.prod-galery-but-prev,
.prod-galery-but-next { top:50%; transform:translateY(-50%); width:38px; height:120px;  font-size:34px; }
.prod-galery-but-prev { left:0px; width: 30px;}
.prod-galery-but-next { right:0px; width: 30px; }
.prod-galery-but-close:hover,
.prod-galery-but-prev:hover,
.prod-galery-but-next:hover { background:rgba(0,0,0,.6); }

.prod-galery-but,
.gallery-close,
.gallery-left,
.gallery-right{
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation; /* убирает 300ms задержку на старых WebKit */
    }

@media (max-width:560px) {
    .prod-galery-but{ width:30px; font-size:28px; }
    .prod-galery-but-prev, .prod-galery-but-next{ width:30px; height:120px; font-size:28px; }
    .prod-galery-but-close{ width:30px; height:36px; font-size:20px; }
    }







/* модалька размеров === SIZE GUIDE MODAL === */

.sg-overlay {
    position:fixed; 
    inset:0; 
    display:none;
    align-items:center; 
    justify-content:center;
    background:rgba(0,0,0,.6); 
    z-index:2000; 
    padding:16px;
    }
.sg-overlay.show { display:flex; }

.sg-modal {
    background: #fff;
    color: #111;
    width: min(500px, 92vw);
    max-height: 86vh;
    border-radius: 16px;
    box-shadow: 0 20px 60px #00000059;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    }
.sg-header {
    display:flex; align-items:center; 
    justify-content:space-between;
    padding:14px 16px;
    }
.sg-header h3 { 
    margin:0; font-weight:400; font-size:20px; color:#111; 
    }
.sg-close {
    border:0; background:#000; color:#fff; width:32px; height:32px;
    border-radius:8px; cursor:pointer; line-height:32px; text-align:center;
    }
.sg-close:focus-visible{ outline:2px solid #0003; }

.sg-content {
    padding:0px; overflow:auto;
    }
body.sg-lock{ overflow:hidden; }
@media (max-width:560px){
    .sg-modal{ width:min(96vw, 560px); border-radius:12px; }
    .sg-header h3{ font-size:18px; }
    .sg-content{ font-size:14px; }
    }










/* видео */

.big-block-video {
    position: relative;
    height: 600px;   /* регулируешь под дизайн */
    overflow: hidden;
    margin: 40px 0;;
    }

.big-video {
    position: absolute;
    top: 0;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    transform: translateX(-50%);
    object-fit: cover;
    }

.big-video-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /*background: hsl(200deg 20% 94% / 95%);*/
    animation-name: example;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    }
@keyframes example1 {
    0% {background-color: #651515f0;}
    25% {background-color: hsl(36deg 36% 72% / 90%);}
    50% {background-color: hsl(200deg 20% 94% / 95%);}
    75% {background-color: #c7ffa1cf;}
    }
.big-video-text {
    font-size: calc(20px + 5.5vw);
    color: #fff;
    line-height: 1.05;
    letter-spacing: 0px;
    padding: 0 10px;
    font-family: 'Geist Thin';
    }
.big-video-text img {
    width: calc(200px + 20.0vw);
    }
.big-video-but {
    background: rgba(0,0,0,0.6);
    color: #fff;
    padding: 12px 24px;
    border-radius: 30px;
    }












/*соцсети*/
.social {
color: #fff;
    padding: 40px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    }
.social-img {
    aspect-ratio: 1;
    border-radius: 999px;
    background: black;
    display: flex;
    align-items: center;
    justify-content: center;
    width: -webkit-fill-available;
    max-width: 90px;
    }
.social img { 
    scale: 0.5;
    }




/*контакты*/
.contact {
    background: hsl(210 1% 17% / 1);
    color: #fff;
    padding: 0px 20px;
    font-size: 15px;
    font-family: 'Geist thin';
    }
.contact-logo {
    padding: 40px 0 20px 0;
    }
.contact-logo img {
    width: -webkit-fill-available;
    max-width: fit-content;
    }
.contact-flex {
    display: flex;
    text-align: left;
    gap: 30px;
    padding: 10px 0;
    margin: 0;
    align-content: center;
    flex-wrap: wrap;
    }
.contact-flex img {
    max-width: 210px;
    }
.contact-1 {
    font-size: 12px;
    font-family: 'Geist';
    color: #ffffff;
    margin: 18px 0 0px 0px;
    text-transform: uppercase;
    }
.contact-2 { font-size: 16px; color: #ffffff8a; }
.contact-3 { font-size: 13px; color: #ffffff9c; letter-spacing: 1.5px; }
.contact-4 { max-width: 760px; }





/*  FAQ  */
.faq-wrapper {
    max-width: 1200px;
    max-width: min(1200px, 100%);
    margin: auto;
    padding: 20px 30px 50px 30px;
    text-align: left;
}
.faq-summary {
    cursor: pointer;
    background: hsl(0 0% 96% / 1);
    padding: 14px 20px;
    margin: 0 0 1px 0px;
    border-radius: 4px;
    transition: 1s ease;
}
.faq-summary:hover{
    background: hsl(0deg 0% 94.71%);
    transition: 0s;
}
.faq-wrapper p {
    margin: 14px 0;
}






/* шрифты */

@font-face {
    font-family: "Proxima Nova Thin";
    src: url("fonts/Proxima Nova/Proxima Nova Thin.ttf") format("truetype");
    font-style: normal;
    font-weight: 100; /* Thin обычно соответствует 100 */
    }
@font-face {
    font-family: "Proxima Nova Bold";
    src: url("fonts/Proxima Nova/Proxima Nova bold.ttf") format("truetype");
    font-style: normal;
    font-weight: 700; /* Bold обычно соответствует 700 */
    }
@font-face {
    font-family: "Proxima Nova";
    src: url("fonts/Proxima Nova/Proxima Nova.ttf") format("truetype");
    font-style: normal;
    font-weight: 400; /* Normal обычно соответствует 400 */
    }


@font-face {
    font-family: "Geist Thin";
    src: url("fonts/Geist/Geist-Thin.woff2") format("woff2"),
         url("fonts/Geist/Geist-Thin.otf") format("opentype"); /* Резервный формат */ 
    font-style: normal;
    font-weight: 100; /* Light соответствует 300 */
    }
@font-face {
    font-family: "Geist Light";
    src: url("fonts/Geist/Geist-Light.woff2") format("woff2"),
         url("fonts/Geist/Geist-Light.otf") format("opentype"); /* Резервный формат */
    font-style: normal;
    font-weight: 300; /* Light соответствует 300 */
    }
@font-face {
    font-family: "Geist";
    src: url("fonts/Geist/Geist-Regular.woff2") format("woff2"),
         url("fonts/Geist/Geist-Regular.otf") format("opentype"); /* Резервный формат */
    font-style: normal;
    font-weight: 400; /* Normal соответствует 400 */
    }
@font-face {
    font-family: "Geist Bold";
    src: url("fonts/Geist/Geist-Bold.woff2") format("woff2"),
         url("fonts/Geist/Geist-Bold.otf") format("opentype"); /* Резервный формат */
    font-style: normal;
    font-weight: 700; /* Bold соответствует 700 */
    }










/* Модалка для корзины */

/* подложка */
.cart-overlay {
    position: fixed; inset: 0; display: none;
    align-items: center; justify-content: center;
    background: rgba(0,0,0,.6); z-index: 3000; padding: 16px;
    }
.cart-overlay.show { display: flex; }

/* окно */
.cart-modal {
    background: #fff; color: #111;
    width: min(600px, 96vw); max-height: 88vh;
    border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,.35);
    display: flex; flex-direction: column; overflow: hidden;
    font-family: "Geist", system-ui, sans-serif;
    }

/* ===== Cart image zoom (lightbox) ===== */
.imgzoom-backdrop{
  position: fixed; inset: 0;
  background: rgba(0,0,0,0);
  transition: background .35s ease;
  z-index: 4000; /* выше cart-modal (3000) */
  cursor: zoom-out;
}
.imgzoom-clone{
  position: fixed; left:0; top:0;
  box-shadow: 0 30px 80px rgba(0,0,0,.55);
  border-radius: 12px;
  will-change: left, top, width, height, opacity;
  transition: left .35s ease, top .35s ease,
              width .35s ease, height .35s ease, opacity .35s ease;
  z-index: 4001;
  cursor: zoom-out;
}

/* шапка */
.cart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: #ebebeb;
    }
.cart-header h3 { margin: 0; color: black; font-size: 18px; text-transform: uppercase; }

/* тело (скроллится) */
.cart-body {
    padding: 10px 12px; overflow: auto;
    display: flex; flex-direction: column;
    }

/* строка товара */
.cart-item {
    display: grid; grid-template-columns: 64px 1fr auto;
    gap: 12px; align-items: center; padding: 0 0 10px 0px;
    }
.cart-thumb {
    width: 64px; height: 64px; border-radius: 10px; overflow: hidden; background:#f4f4f4;
    display:flex; align-items:center; justify-content:center;
    }
.cart-thumb img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in;}
.cart-info { 
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    }
.cart-title { font-size: 20px; font-family: 'Geist Thin'; }
.cart-meta { font-size: 12px; color: #555; display: flex; gap: 10px; flex-wrap: wrap; }
.cart-chip { background:#f0f0f0; padding: 2px 8px; border-radius: 4px; font-size: 12px; }

.cart-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-items: end;
    justify-content: flex-end;
    }
.cart-price { font-size: 15px; font-family: 'Geist Thin'; }

.qty {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid #b1b1b1;
    padding: 0px;
    }
.qty-btn {
    width: 34px;
    height: 35px;
    border: 0;
    cursor: pointer;
    background: #ffffff;
    font-size: 23px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Geist Thin';
    }
.qty-btn:hover {
    background: #ebebeb;
    }
.qty-input {
    width: 29px;
    text-align: center;
    border: 0;
    outline: none;
    font-size: 18px;
    background: transparent;
    font-family: 'Geist Thin';
    }
.remove-btn {
    border: none;
    background: #ffffff;
    color: #ad0000;
    border-radius: 3px;
    cursor: pointer;
    height: 35px;
    width: 19px;
    display: flex;
    justify-content: center;
    font-size: 30px;
    font-family: 'Geist Thin';
    align-items: center;
    }





/* футер */
.cart-footer {
    padding: 12px 16px;
    display: flex;
    gap: 12px;
    background: #ebebeb;
    align-items: center;
    justify-content: center;
    font-family: 'Geist Thin';
    }
.subtotal { font-size: 16px; }
.subtotal strong {font-size: 19px; font-family: 'Geist Thin';}

.cart-cta { display: flex; gap: 8px; }
.btn-outline {
    background: #fff;
    color: #1111118c;
    border: 1px solid #00000020;
    border-radius: 5px;
    padding: 10px 20px;
    cursor: pointer;
    }
.btn-primary {
    background: #ab9857;
    color: #fff;
    border: 0;
    border-radius: 5px;
    padding: 10px 16px;
    cursor: pointer;
    text-transform: uppercase;
    font-size: 12px;
    }

/* пустая корзина */
.cart-empty {
    text-align: center; color:#555; padding: 28px 10px; font-size: 15px;
    }

/* блокировка скролла фона */
body.cart-lock { overflow: hidden; }

/* адаптив */
@media (max-width: 560px) {
    .cart-actions{ grid-column: 1 / -1; }
    .cart-price{ justify-self: start; }
    }
















/* ======================= CONSTRUCTOR FIXES ======================= */

/* стрелки-скроллеры чуть меньше на мобилках */
@media (max-width: 560px) {
    #constructor .shelf{padding: 6px 28px; border-radius: 14px;}
    #constructor .nav{height: 96px; font-size: 34px;}
    #constructor .nav.prev{left:10px;}
    #constructor .nav.next{right:-10px;}
    #constructor .card{width: 68px; height: 70px;}
    #constructor .card img{max-height: 50px;}
    #constructor .j-dot{width:12px;height:12px;}
    }

/* очень узкие — сжимаем карточки ещё */
@media (max-width: 380px) {
    #constructor .card{width: 58px; height: 60px;}
    #constructor .card img{max-height: 42px;}
    }

/* ======================= ПРАВКИ UX ======================= */
/* чтобы не было клавиатурных пунктирных рамок на карточках в хроме при кликах мышью */
#constructor .card:focus {outline: none;}
#constructor .card:focus-visible {outline: 2px solid #0003; border-radius: 14px;}

/* constructor: size picker */
#constructor .c-size {
    margin: 6px 0 8px;
    display: flex; align-items: center; gap: 0px; flex-wrap: wrap; justify-content: center;
    }
#constructor .c-size .label { font-size: 12px; color:#555; margin-right: 4px; }
#constructor .size-btn {
    width: 32px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: navajowhite;
    border-right: 1px solid #00000020;
    border-radius: 3px;
    background: #fff;
    font-size: 12px;
    cursor: pointer;
    user-select: none;
    transition: .15s;
    }
#constructor .size-btn:hover { background: #ac9f74; color: #fff; transition: 0s;}
#constructor .size-btn.selected { background:#ff6a00; color:#fff; border-color:transparent; font-weight:600; }

/* локальная подсказка под пикером размера конструктора */
#constructor .c-size-error {
    display:inline-block; margin-top:6px; background:#930000; color:#fff; 
    padding:8px 12px; border-radius:6px; font-size:12px; text-transform:uppercase;
    animation: sizeFadeIn .25s ease;
    }











    /* ================== IOS FIXES ===================== */
@supports (-webkit-touch-callout: none) {

  /* фоновые фото: отключаем fixed, чтобы не ломались */
  .big-photo,
  .big-photo2,
  .big-photo3 {
    background-attachment: scroll;
    background-position: center; /* стабильнее на iOS */
  }

  /* убираем автосиние телефоны/ссылки */
  a, a:link, a:visited {
    color: inherit !important;
    text-decoration: none !important;
  }
  a:hover {
    text-decoration: none !important;
  }

  /* убираем синюю подсветку при тапах */
  * {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
  }

  /* чётче рендерим шрифты */
  body {
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

}






/* Убираем голубую подсветку (tap highlight) на кликабельных элементах */
:where(
  a, button, .menu-but, .cart,
  .prod, .prod-scroll, .prod-photo, .prod-photo img,
  .prod-galery-but, .prod-galery-but-wrap,
  .slider2-photo, .size-btn, .prod-buy,
  .nav, .j-dot, .btn, .slider-big-photo-but
){
  -webkit-tap-highlight-color: rgba(0,0,0,0); /* Safari/iOS + эмуляция тача в Chrome */
  -webkit-touch-callout: none;                /* убирает всплывающее меню по долгому тапу */
}

/* Чтобы не появлялась синяя «выделялка текста/картинки» при перетаскивании пальцем */
:where(.prod, .prod-scroll, .prod-photo, .prod-photo img, .prod-galery-but){
  user-select: none;
  -webkit-user-select: none;
}

/* Кнопкам — «быстрый клик» без задержек */
:where(.prod-galery-but, .gallery-left, .gallery-right, .gallery-close){
  touch-action: manipulation;
}