/* ======================================================= */
/* СЕКЦИЯ 1: ГЛОБАЛЬНЫЕ СБРОСЫ И СИСТЕМНЫЕ НАСТРОЙКИ       */
/* ======================================================= */
* { scroll-behavior: smooth; }
*, *::before, *::after { box-sizing: border-box; font-family: "Inter", Arial, sans-serif; }
html, body { touch-action: manipulation; }
body { font-style: normal; font-weight: 400; margin: 0; padding: 0; padding-top: 90px; background-color: #EDD7A3; color: #13110F; }
h1, h2, h3, h4, h5, h6 { font-family: "Inter", Arial, sans-serif; font-weight: 700; margin: 0; }
.null { height: 20vh; }

/* ======================================================= */
/* СЕКЦИЯ 2: ШАПКА САЙТА (HEADER) — ОБВОДКА ВОЗВРАЩЕНА      */
/* ======================================================= */
header { width: 100%; height: 110px; padding: 0 40px; background: rgba(237, 215, 163, 0.65); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); display: flex; justify-content: space-between; align-items: center; position: fixed; top: 0; left: 0; z-index: 1000; border-bottom: 3px solid #13110F; } /* Вернули нижнюю обводку */
header .icon { display: flex; align-items: center; gap: 12px; }
header .icon a { text-decoration: none; color: #13110F; font-weight: 700; font-size: 24px; display: inline-block; transition: color 0.3s ease, transform 0.3s ease; }
header img { width: 55px; height: 55px; object-fit: contain; transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); border: none; }
header nav { display: flex; gap: 30px; background: rgba(37, 132, 149, 0.18); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); padding: 10px 25px; border-radius: 30px; } /* Вернули обводку меню */
header nav a { text-decoration: none; color: #13110F; font-weight: 700; font-size: 16px; letter-spacing: 0.5px; transition: color 0.2s ease, transform 0.2s ease; }
header .btns { display: flex; align-items: center; gap: 25px; }
header .lang { display: flex; gap: 10px; background: rgba(148, 156, 45, 0.25); padding: 6px 12px; border-radius: 12px; } /* Вернули обводку переключателя */
header .lang p { margin: 0; font-size: 14px; font-weight: 700; color: #13110F; cursor: pointer; text-transform: uppercase; transition: color 0.2s ease; }
header .order-btn button { background: #C4411D; color: #EDD7A3; border: 3px solid #13110F; padding: 10px 24px; font-size: 16px; font-weight: 800; text-transform: uppercase; cursor: pointer; border-radius: 16px; box-shadow: 0 4px 0 #13110F; transition: all 0.1s ease; }
header .order-btn button:active { transform: translateY(4px); box-shadow: 0 0 0 #13110F; }

/* ======================================================= */
/* СЕКЦИЯ 3: ГЛАВНЫЙ ЭКРАН (HERO МОЗАИКА)                  */
/* ======================================================= */
.hero-full-mosaic { width: 100%; height: calc(100vh - 90px); position: relative; overflow: hidden; display: flex; justify-content: center; align-items: center; }
.mosaic-grid { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; z-index: 1; }
.mosaic-item { flex: 1; height: 100%; overflow: hidden; border-right: none; position: relative; }
.mosaic-item:last-child { border-right: none; }
.mosaic-item img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.3) contrast(1.1); transition: transform 0.6s ease, filter 0.6s ease; border: none; }
.center-badge { position: relative; width: 32vh; height: 32vh; min-width: 220px; min-height: 220px; max-width: 300px; max-height: 300px; z-index: 3; display: flex; justify-content: center; align-items: center; pointer-events: none; }
.badge-logo { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 10px 25px rgba(19, 17, 15, 0.5)); animation: floatBadge 4s ease-in-out infinite; border: none; }
.badge-glow { position: absolute; width: 100%; height: 100%; background: conic-gradient(from 0deg, #258495, #949C2D, #EDD7A3, #C4411D, #258495); border-radius: 50%; filter: blur(40px); opacity: 0.6; z-index: -1; animation: spinGlass 20s linear infinite; }
.mosaic-overlay { position: absolute; bottom: 40px; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 15px; text-align: center; width: 100%; padding: 0 20px; pointer-events: none; }
.mosaic-overlay h1 { font-size: 42px; color: #EDD7A3; text-shadow: 0 4px 8px rgba(19, 17, 15, 0.6); text-transform: uppercase; letter-spacing: 2px; }
.mosaic-overlay p { font-size: 18px; color: #EDD7A3; text-shadow: 0 2px 4px rgba(19, 17, 15, 0.6); font-weight: 500; margin: 0; }
.mosaic-btn { pointer-events: auto; background: #C4411D; color: #EDD7A3; border: 3px solid #13110F; padding: 12px 32px; font-size: 16px; font-weight: 800; text-transform: uppercase; cursor: pointer; border-radius: 16px; box-shadow: 0 4px 0 #13110F; transition: all 0.1s ease; margin-top: 5px; }
.mosaic-btn:active { transform: translateY(4px); box-shadow: 0 0 0 #13110F; }

@keyframes spinGlass { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes floatBadge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* ======================================================= */
/* СЕКЦИЯ 4: ИНТЕРАКТИВНЫЙ ШОУРУМ МАСТЕРСКОЙ              */
/* ======================================================= */
.tworze-showroom-section { width: 100%; background-color: #F7E7C4; padding: 60px 0; box-sizing: border-box; overflow: hidden; }
.showroom-container { max-width: 1100px; width: 100%; margin: 0 auto; padding: 0 20px; display: flex; align-items: center; gap: 60px; box-sizing: border-box; }
.showroom-gallery-grid { width: 45%; flex: 0 0 45%; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.showroom-gallery-grid .gallery-photo-item { border: none; border-radius: 16px; overflow: hidden; height: 180px; background-color: #FFF; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.showroom-gallery-grid .gallery-photo-item img { width: 100%; height: 100%; object-fit: cover; display: block; border: none; }
.showroom-content-side { width: 55%; flex: 0 0 55%; display: flex; flex-direction: column; gap: 30px; position: relative; }
.showroom-content-side .showroom-bg-brand { position: absolute; top: -45px; left: -10px; font-size: 7.5vw; font-weight: 900; line-height: 1.05; color: #C4411D; opacity: 0.15; text-transform: uppercase; white-space: nowrap; z-index: 1; pointer-events: none; max-width: 100%; }
.showroom-content-side .showroom-manifest-text { margin: 0; font-size: 20px; line-height: 1.6; color: #13110F; position: relative; z-index: 2; max-width: 100%; }
.showroom-actions-wrapper { display: flex; position: relative; z-index: 2; }

/* ======================================================= */
/* СЕКЦИЯ 5: ЗИГЗАГ ДЛЯ ПК (STEPS DESKTOP)                 */
/* ======================================================= */
.vitrage-timeline { width: 100%; padding: 60px 0; background-color: #EDD7A3; display: flex; flex-direction: column; align-items: center; box-sizing: border-box; }
.timeline-header { width: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 60px; padding: 0 20px; box-sizing: border-box; }
.timeline-header h2 { font-size: 42px; color: #13110F; text-transform: uppercase; letter-spacing: 1px; margin: 0; }
.timeline-header .timeline-paw { font-size: 40px; margin-top: 15px; animation: wigglePaw 3.5s ease-in-out infinite; }
.paws-path { width: 100%; max-width: 500px; height: 70px; margin: 10px auto; position: relative; overflow: visible; }
.paws-path img { width: 30px; border: none; }
.paws-path div { font-size: 38px; opacity: 0; position: absolute; width: auto; height: auto; transform-origin: center bottom; }
.paw-print-1 { left: 40%; top: 70px; --rot: 20deg; animation: walk 5s linear infinite; }
.paw-print-2 { left: 50%; top: 50px; --rot: 30deg; animation: walk 5s linear infinite 1s; }
.paw-print-3 { left: 43%; top: 15px; --rot: 40deg; animation: walk 5s linear infinite 2s; }
.paw-print-4 { left: 53%; top: 1px; --rot: 50deg; animation: walk 5s linear infinite 3s; }
@keyframes walk { 0% { opacity: 0; } 4% { opacity: 0.7; } 50% { opacity: 0.7; } 51% { opacity: 0; } }

.timeline-intro { max-width: 750px; font-size: 18px; line-height: 1.6; color: #13110F; opacity: 0.85; font-weight: 500; margin: 25px auto 0 auto; text-align: center; }
.timeline-grid { width: 100%; display: flex; flex-direction: column; position: relative; }
.timeline-item { width: 100%; display: flex; align-items: center; position: relative; padding: 50px;}
.item-img-box { flex: 1; height: 100%; max-width: 50%; overflow: hidden; border: none; border-radius: 20px;  z-index: 2; background-color: #13110F;}
.item-img-box img { width: 100%; height: 500px; object-fit: cover; filter: brightness(0.85) contrast(1.1); transition: transform 0.6s ease; border: none; }
.item-text-pure { flex: 1; max-width: 50%; padding: 0 50px; display: flex; flex-direction: column; gap: 12px; z-index: 3; pointer-events: none; }
.item-text-pure h3 { font-size: 30px; color: #EDD7A3; text-transform: uppercase; letter-spacing: 0.5px; margin: 0; line-height: 1.3; }
.item-text-pure p { font-size: 24px; line-height: 1.6; color: #EDD7A3; font-weight: 500; margin: 0; }
.item-text-pure .item-price { font-weight: 700; color: #C4411D; font-size: 18px; margin-top: 5px; }

.steps-desktop-section { width: 100%; display: flex; justify-content: center; }
.steps-grid-wrapper { width: 100%; max-width: 1050px; padding: 0 20px; display: flex; flex-direction: column; gap: 40px; box-sizing: border-box; }
.step-row { display: flex; align-items: center; width: 100%; background-color: #13110F; border: none; border-radius: 30px; overflow: hidden; box-sizing: border-box; }
.step-row .step-media-holder { width: 45%; flex: 0 0 45%; display: flex; }
.step-row .step-media-holder img { width: 100%; height: auto; display: block; object-fit: contain; border: none; }
.step-row .step-content-box { width: 55%; flex: 0 0 55%; padding: 40px; box-sizing: border-box; }
.step-row .step-content-box h3 { margin: 0 0 16px 0; font-size: 30px; color: #EDD7A3; }
.step-row .step-content-box p { margin: 0; font-size: 24px; line-height: 1.6; color: #EDD7A3; }
.step-row.row-direct-left { flex-direction: row; }
.step-row.row-direct-left .step-content-box { text-align: left; }
.step-row.row-inverse-right { flex-direction: row-reverse; }
.step-row.row-inverse-right .step-content-box { text-align: right; }

/* ======================================================= */
/* СЕКЦИЯ 6: ФИНАЛЬНЫЙ БЛОК С КАРТИНКАМИ И ЦИТАТОЙ (OUTRO) */
/* ======================================================= */
.timeline-outro-block { max-width: 1050px; width: 100%; margin: 100px auto 0 auto; padding: 0 20px; display: flex; flex-direction: column; gap: 40px; align-items: center; box-sizing: border-box; }
.outro-text-plate { width: 100%; max-width: 750px; margin: 0 auto; position: relative; box-sizing: border-box; border-top: 2px solid #13110F; border-bottom: 2px solid #13110F; padding: 20px 0; }
.outro-text-plate1 { max-width: 750px; margin: 0 auto; position: relative; box-sizing: border-box;}
.outro-text-plate .outro-text { margin: 0; font-size: 16px; line-height: 1.7; color: #13110F; text-align: center; letter-spacing: 0.3px; opacity: 0.9; }
.outro-text-plate::before { content: '✦'; position: absolute; top: -11px; left: 50%; transform: translateX(-50%); background-color: #EDD7A3; padding: 0 15px; font-size: 14px; color: #13110F; }
.outro-text { font-size: 19px; line-height: 1.7; color: #13110F; text-align: center; font-weight: 500; max-width: 900px; margin: 0; opacity: 0.9; }
.outro-text1 { font-size: 19px; line-height: 1.7; color: #13110F; text-align: center; font-weight: 500; max-width: 900px; margin: 0; opacity: 0.9; padding-top: 30px;}
.outro-images-grid { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.outro-img-box { width: 100%; height: 400px; border: none; border-radius: 24px; overflow: hidden;  }
.outro-img-box img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; border: none; }
.quote-badge-box { max-width: 650px; width: 100%; margin: 5px auto; padding: 5px 40px; background-position: center center; background-repeat: no-repeat; background-size: contain; display: flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: 20px; }
.quote-badge-box .outro-quote { margin: 0; font-size: 22px; line-height: 1.5; color: #13110F; text-align: center; font-style: italic; max-width: 80%; }

/* ======================================================= */
/* СЕКЦИЯ 7: МАГАЗИН И ВИТРИНА ТОВАРОВ (SHOP)             */
/* ======================================================= */
.vitrage-shop { width: 100%; padding: 120px 40px; background-color: #EDD7A3; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.shop-header { text-align: center; display: flex; flex-direction: column; gap: 15px; }
.shop-header h2 { font-size: 42px; color: #13110F; text-transform: uppercase; letter-spacing: 1px; margin: 0; }
.shop-header p { font-size: 18px; color: #13110F; font-weight: 500; margin: 0; opacity: 0.8; }
.shop-section-block { max-width: 1200px; width: 100%; display: flex; flex-direction: column; gap: 35px; }
.shop-section-title { font-size: 28px; color: #13110F; text-transform: uppercase; letter-spacing: 0.5px; margin: 0; font-weight: 700; border-bottom: 3px solid #13110F; padding-bottom: 10px; }
.shop-section-title span { font-size: 16px; font-weight: 700; text-transform: none; color: #13110F; opacity: 0.7; margin-left: 10px; }
.shop-grid { width: 100%; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 40px; }
.product-card { background: #fffcf7; border: none; border-radius: 24px; overflow: hidden;  display: flex; flex-direction: column; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.product-img-box { width: 100%; height: 380px; overflow: hidden; border-bottom: none; position: relative;  }
.product-img-box img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; border: none; }
.product-badge { position: absolute; top: 15px; right: 15px; border: none; padding: 6px 12px; font-size: 12px; font-weight: 700; text-transform: uppercase; border-radius: 10px; box-shadow: 0 2px 0 #13110F; color: #fff; }
.badge-ready { background: #949C2D; }
.badge-no { background: #b42626; }
.badge-custom { background: #258495; }
.product-info { padding: 25px; display: flex; flex-direction: column; gap: 12px; flex-grow: 1; }
.product-info h3 { font-size: 22px; color: #13110F; margin: 0; line-height: 1.3; }
.product-desc { font-size: 14px; line-height: 1.6; color: #13110F; opacity: 0.9; margin: 0; flex-grow: 1; }
.product-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }
.product-price { font-size: 22px; font-weight: 800; color: #C4411D; }
.product-btn { background: #C4411D; color: #EDD7A3; border: 2px solid #13110F; padding: 8px 20px; font-size: 14px; font-weight: 800; text-transform: uppercase; cursor: pointer; border-radius: 12px; box-shadow: 0 3px 0 #13110F; transition: all 0.1s ease; }
.product-btn:active { transform: translateY(3px); box-shadow: 0 0 0 #13110F; }
.btn-custom { background: #258495; }
.product-btn.btn-sold-out { background: #ccc !important; color: #666 !important; border-color: #666 !important; box-shadow: none !important; cursor: not-allowed !important; transform: none !important; }

/* ======================================================= */
/* СЕКЦИЯ 8: ФОРМА И ЭТАПЫ ИНДИВИДУАЛЬНОГО ЗАКАЗА           */
/* ======================================================= */
.order-flow-section { width: 100%; padding: 120px 40px; background-color: #EDD7A3; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.flow-header { text-align: center; }
.flow-header h2 { font-size: 42px; color: #13110F; text-transform: uppercase; letter-spacing: 1px; margin: 0; }
.custom-offer-text-block { max-width: 850px; margin: 5px auto 5px auto; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.custom-offer-p { font-size: 17px; line-height: 1.6; color: #13110F; opacity: 0.9; text-align: center; margin: 0; font-family: inherit; }
.custom-offer-gallery { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 10px 0; }
.custom-gal-box { width: 100%; height: 300px; border: none; border-radius: 18px; overflow: hidden;  background: #13110F; box-sizing: border-box; }
.custom-gal-box img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; border: none; }
.custom-offer-meta { display: flex; gap: 15px; justify-content: center; width: 100%; margin-top: 5px; }
.custom-badge { background: #FFFFFF; border: none; box-shadow: 4px 4px 0 #13110F; padding: 10px 20px; border-radius: 12px; font-size: 16px; color: #13110F; }
.custom-badge strong { color: #C4411D; font-weight: 700; }
.flow-steps-grid { max-width: 1200px; width: 100%; display: grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); gap: 30px; }
.step-card { background: #fffcf7; border: 2px solid #13110F; border-radius: 20px; padding: 30px; display: flex; align-items: center; gap: 20px; box-shadow: 0 6px 0 #13110F; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.step-num { width: 50px; height: 50px; background: #258495; color: #EDD7A3; border: none; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 22px; font-weight: 800; flex-shrink: 0; }
.step-card p { font-size: 16px; line-height: 1.5; color: #13110F; font-weight: 500; margin: 0; }
.step-action-card { background: rgba(196, 65, 29, 0.15); border: 3px dashed #C4411D; }
.step-action-card .btn-num { background: #C4411D; border-color: transparent; }

/* ОБВОДКА ВОЗВРАЩЕНА В ФОРМУ ЗАКАЗА И ЕЁ ПОЛЯ */
.order-form-container { max-width: 600px; width: 100%; background: #fffcf7; border: 3px solid #13110F; border-radius: 28px; padding: 50px 40px; box-shadow: 0 12px 0 #13110F; margin-top: 30px; }
.order-form-container h3 { font-size: 32px; color: #13110F; text-transform: uppercase; text-align: center; margin: 0 0 35px 0; letter-spacing: 0.5px; }
.form-group { width: 100%; display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; }
.form-group label { font-size: 16px; font-weight: 700; color: #13110F; }
.form-group input[type="text"], .form-group input[type="email"], .form-group textarea { width: 100%; padding: 14px 18px; border: 2px solid #13110F; border-radius: 14px; background: #fff; color: #13110F; font-size: 16px; font-weight: 500; transition: border-color 0.2s ease; }
.form-group input:focus, .form-group textarea:focus { outline: none; background: #fdfaf2; border-color: #C4411D; }
.file-group { margin-top: 10px; }
.file-label { width: 100%; padding: 20px; border: 3px dashed #13110F; border-radius: 14px; background: rgba(148, 156, 45, 0.1); text-align: center; cursor: pointer; display: block; transition: background 0.2s ease; }
.file-label span { font-size: 16px; font-weight: 700; color: #13110F; }
.form-submit-btn { width: 100%; background: #C4411D; color: #EDD7A3; border: 2px solid #13110F; padding: 16px; font-size: 18px; font-weight: 800; text-transform: uppercase; cursor: pointer; border-radius: 16px; box-shadow: 0 5px 0 #13110F; transition: all 0.1s ease; margin-top: 10px; }
.form-submit-btn:active { transform: translateY(5px); box-shadow: 0 0 0 #13110F; }
.form-row-split { width: 100%; display: flex; gap: 20px; }
.form-row-split .form-group { flex: 1; }
.form-group select { width: 100%; padding: 14px 18px; border: 2px solid #13110F; border-radius: 14px; background: #fff; color: #13110F; font-size: 16px; font-weight: 500; cursor: pointer; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2313110F' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>"); background-repeat: no-repeat; background-position: right 18px center; background-size: 16px; }
.form-group select:focus { outline: none; border-color: #C4411D; }

/* ======================================================= */
/* СЕКЦИЯ 9: БЛОГ (БЭКСТЕЙДЖ ПРОИЗВОДСТВА С ВИДЕО)          */
/* ======================================================= */
.vitrage-blog-half { width: 100%; height: 90vh; min-height: 400px; display: flex; flex-direction: row-reverse; align-items: stretch; background-color: #EDD7A3; border-top: 4px solid #13110F; border-bottom: 4px solid #13110F; overflow: hidden; }
.blog-image-side { flex: 1; position: relative; overflow: hidden; border-right: 4px solid #13110F; background: #13110F; }
.blog-image-side img { width: 100%; height: 100%; object-fit: contain; padding: 30px; filter: drop-shadow(0 8px 16px rgba(19, 17, 15, 0.3)) brightness(0.9) contrast(1.05); transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1); border: none; }
.blog-img-overlay { position: absolute; top: 25px; left: 25px; background: #13110F; color: #EDD7A3; border: 2px solid #EDD7A3; padding: 6px 12px; font-size: 12px; font-weight: 700; text-transform: uppercase; border-radius: 8px; letter-spacing: 0.5px; }
.blog-text-side { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px; background: #EDD7A3; position: relative; }
.blog-content-wrap { max-width: 500px; display: flex; flex-direction: column; gap: 14px; }
.blog-text-side h2 { font-size: 30px; color: #13110F; text-transform: uppercase; letter-spacing: 0.5px; line-height: 1.2; margin: 0; }
.blog-text-side p { font-size: 15px; line-height: 1.6; color: #13110F; font-weight: 500; margin: 0; }

.blog-video-grid-container { padding: 15px; background: #13110F; box-sizing: border-box; }
.blog-video-grid { width: 100%; height: 100%; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 12px; }
.video-grid-box { width: 100%; height: 100%; border: 3px solid #13110F; border-radius: 12px; overflow: hidden; position: relative; background: #000; }
.video-grid-box video { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; border: none; }

.blog-read-link { display: flex; align-items: center; gap: 12px; text-decoration: none; color: #13110F; font-size: 14px; font-weight: 800; text-transform: uppercase; margin-top: 5px; transition: color 0.2s ease; width: fit-content; }
.blog-read-link svg { transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1); width: 20px; height: 20px; }

/* ======================================================= */
/* СЕКЦИЯ 10: КРАФТОВЫЙ ФУТЕР И СОЦСЕТИ (FOOTER)           */
/* ======================================================= */
.vitrage-footer { width: 100%; background-color: #221d18; border-top: none; padding: 60px 40px 20px 40px; display: flex; flex-direction: column; align-items: center; gap: 40px; }
.footer-container { max-width: 1200px; width: 100%; display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; }
.footer-brand { flex: 2; display: flex; flex-direction: column; gap: 15px; }
.footer-logo { font-size: 24px; font-weight: 800; color: #fffcf7; text-transform: uppercase; letter-spacing: 0.5px; }
.footer-brand p { font-size: 14px; line-height: 1.6; color: #fffcf7; opacity: 0.85; margin: 0; font-weight: 500; max-width: 450px; }
.footer-socials { flex: 1; display: flex; flex-direction: column; align-items: flex-end; gap: 15px; text-align: right; }
.vitrage-footer h4 { font-size: 18px; color: #fffcf7; text-transform: uppercase; letter-spacing: 0.5px; margin: 0; }
.footer-socials p { font-size: 14px; color: #fffcf7; margin: 0; opacity: 0.85; }
.social-icons-div { display: flex; gap: 5px; }
.social-icons a { width: 42px; height: 42px; background: #fffcf7; border: 2px solid #13110F; border-radius: 12px; display: flex; justify-content: center; align-items: center; text-decoration: none; color: #13110F; font-size: 14px; font-weight: 800; box-shadow: 0 3px 0 #13110F; transition: all 0.1s ease; }
.social-icons-long a { width: 84px; height: 42px; background: #fffcf7; border: 2px solid #13110F; border-radius: 12px; display: flex; justify-content: center; align-items: center; text-decoration: none; color: #13110F; font-size: 14px; font-weight: 800; box-shadow: 0 3px 0 #13110F; transition: all 0.1s ease; }
.footer-bottom { width: 100%; max-width: 1200px; border-top: 2px solid #EDD7A3; padding-top: 20px; text-align: center; }
.footer-bottom p { font-size: 12px; color: #fffcf7; opacity: 0.6; margin: 0; }

/* ======================================================= */
/* СЕКЦИЯ 11: ВСПЛЫВАЮЩИЕ ОКНА — ОБВОДКА ВОЗВРАЩЕНА        */
/* ======================================================= */
.shop-signboard { max-width: 550px; width: 100%; margin: 70px auto 30px auto; padding: 50px 40px; background-position: center center; background-repeat: no-repeat; background-size: contain; background-color: transparent; display: inline-flex; align-items: center; justify-content: center; position: relative; box-sizing: border-box; min-height: 250px; transform-origin: top center; animation: vintage-sign-sway 4s ease-in-out infinite alternate; border: none; }
.shop-signboard h2 { margin: 0; font-size: 30px; text-transform: uppercase; letter-spacing: 2px; color: #13110F; position: relative; z-index: 2; max-width: 75%; text-align: center; line-height: 1.3; }

/* Вернули обводку модального окна */
.custom-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(19, 17, 15, 0.6); backdrop-filter: blur(4px); display: none; justify-content: center; align-items: center; z-index: 99999; padding: 20px; box-sizing: border-box; }
.custom-modal-box { background: #EDD7A3; border: 3px solid #13110F; border-radius: 24px; width: 100%; max-width: 500px; padding: 30px; box-shadow: 8px 8px 0 #13110F; position: relative; box-sizing: border-box; animation: modalShow 0.2s ease-out; }
@keyframes modalShow { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.modal-close-btn { position: absolute; top: 15px; right: 20px; background: none; border: none; font-size: 30px; cursor: pointer; color: #13110F; font-weight: bold; }
.custom-modal-box h2 { margin: 0 0 10px 0; font-size: 22px; }
.custom-modal-box p { margin: 0 0 20px 0; font-size: 15px; }
.modal-form-group { margin-bottom: 15px; }
.modal-form-group label { display: block; margin-bottom: 5px; font-weight: bold; font-size: 14px; }
.modal-form-group input { width: 100%; padding: 10px 12px; border: 2px solid #13110F; border-radius: 8px; font-size: 14px; box-sizing: border-box; background: #FFF; }
.modal-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.modal-submit-btn { background: #C4411D; color: #EDD7A3; border: 2px solid #13110F; padding: 12px; font-size: 16px; font-weight: 800; text-transform: uppercase; cursor: pointer; border-radius: 12px; width: 100%; box-shadow: 0 4px 0 #13110F; margin-top: 10px; transition: all 0.1s ease; }
.modal-submit-btn:active { transform: translateY(4px); box-shadow: 0 0 0 #13110F; }

/* ЛАЙТБОКС */
.product-lightbox-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(19, 17, 15, 0.9); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: none; justify-content: center; align-items: center; z-index: 11000; padding: 20px; box-sizing: border-box; cursor: zoom-out; }
.product-lightbox-overlay img { max-width: 95%; max-height: 85vh; object-fit: contain; border: none; border-radius: 20px; box-shadow: 0 12px 25px rgba(0, 0, 0, 0.5); background-color: #FFF; transform: scale(0.9); transition: transform 0.25s ease; cursor: default; }
.product-lightbox-overlay .lightbox-close { position: absolute; top: 20px; right: 25px; font-size: 45px; color: #EDD7A3; font-family: Arial, sans-serif; cursor: pointer; transition: color 0.2s; user-select: none; }

/* КАРУСЕЛЬ */
.card-slides-wrapper { position: relative; width: 100%; height: 100%; }
.card-slide-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; border: none; }
.card-slide-img.active-slide { opacity: 1; visibility: visible; position: relative; }
.card-carousel-btn { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(19, 17, 15, 0.6); color: #EDD7A3; border: none; border-radius: 50%; width: 32px; height: 32px; font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 10; transition: background 0.2s, transform 0.1s; padding: 0; }
.card-carousel-btn:active { transform: translateY(-50%) scale(0.9); }
.prev-slide { left: 10px; }
.next-slide { right: 10px; }
.card-carousel-dots { position: absolute; bottom: 15px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 10; background: rgba(19, 17, 15, 0.4); padding: 5px 10px; border-radius: 20px; }
.card-dot { width: 8px; height: 8px; background: rgba(237, 213, 163, 0.5); border-radius: 50%; cursor: pointer; transition: background 0.2s, transform 0.2s; }
.card-dot.active-dot { background: #258495; transform: scale(1.2); }

.lightbox-img-wrapper { position: relative; display: flex; justify-content: center; align-items: center; max-width: 85%; max-height: 85vh; }
.lightbox-btn { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(37, 132, 149, 0.2); color: #EDD7A3; border: none; border-radius: 50%; width: 50px; height: 50px; font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 11010; transition: all 0.2s ease; }
.lightbox-btn:active { transform: translateY(-50%) scale(0.9); }
.lightbox-prev { left: 30px; }
.lightbox-next { right: 30px; }

/* ТОСТЫ */
.lang p { cursor: pointer; transition: opacity 0.2s; margin: 0 5px; display: inline-block; touch-action: manipulation; }
.lang p:hover { opacity: 0.7; }
.lang p.active-lang { font-weight: bold; text-decoration: underline; color: #258495; }
.craft-toast { position: fixed; bottom: -100px; left: 50%; transform: translateX(-50%); background: #13110F; color: #EDD7A3; border: 3px solid #EDD7A3; border-radius: 16px; padding: 16px 28px; font-size: 15px; font-weight: bold; text-align: center; z-index: 100000; box-shadow: 0 8px 24px rgba(19,17,15, 0.4); transition: bottom 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); width: calc(100% - 40px); max-width: 450px; box-sizing: border-box; pointer-events: none; }
.craft-toast.show-toast { bottom: 30px; }

@keyframes vintage-sign-sway { 0% { transform: rotate(-1.2deg); } 100% { transform: rotate(1.2deg); } }
@keyframes vintage-sign-hover-shake { 0% { transform: rotate(-2.5deg) scale(1.01); } 100% { transform: rotate(2.5deg) scale(1.01); } }
@keyframes wigglePaw { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(15deg) scale(1.15); } }

/* ======================================================= */
/* СЕКЦИЯ 12: ЧИСТЫЙ АДАПТИВ ПОД СМАРТФОНЫ                  */
/* ======================================================= */
@media (max-width: 768px) {
    header { height: 100px; padding: 10px 15px; flex-direction: row; align-items: center; justify-content: space-between; border-bottom: 3px solid #13110F; }
    header .icon a { transform: none; display: flex; align-items: center; }
    header img { width: 40px; height: 40px; border: none; }
    header .btns { width: auto; justify-content: flex-end; }
    header .order-btn, header .order-btn button, header nav { display: none; }
    header .lang { padding: 4px 8px; gap: 8px; display: flex; border: 2px solid #13110F; }
    header .lang p { font-size: 14px; margin: 0; }
    
    .mosaic-grid { flex-direction: column; }
    .mosaic-item { border-right: none; border-bottom: none; }
    .mosaic-item:last-child { border-bottom: none; }
    .mosaic-item img { border: none; }
    .center-badge { width: 200px; height: 200px; }
    .badge-logo { border: none; }
    .mosaic-overlay h1 { font-size: 32px; }
    
    .tworze-showroom-section { padding: 40px 0; }
    .showroom-container { flex-direction: column; gap: 30px; padding: 0 20px; }
    .showroom-gallery-grid { width: 100%; max-width: 100%; flex: 0 0 100%; grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .showroom-gallery-grid .gallery-photo-item { height: 150px; border-radius: 12px; border: none; }
    .showroom-content-side { width: 100%; max-width: 100%; flex: 0 0 100%; padding: 0; gap: 20px; overflow: hidden; }
    .showroom-content-side .showroom-bg-brand { font-size: 11vw; top: -35px; left: 0; white-space: nowrap; text-align: left; opacity: 0.12; width: 100%; }
    .showroom-content-side .showroom-manifest-text { font-size: 16px; line-height: 1.5; text-align: left; padding: 0; width: 100%; box-sizing: border-box; }
    .showroom-actions-wrapper { width: 100%; }
    .showroom-actions-wrapper .btn-orange-header { width: 100%; text-align: center; display: block; padding: 14px 20px; font-size: 15px; }

    .timeline-intro { font-size: 15px; padding: 0 10px; }
    .timeline-header h2 { font-size: 32px; }
    .timeline-item { width: 100%; flex-direction: column !important; height: auto; margin-top: 0 !important; padding: 0 15px 25px 15px; box-sizing: border-box; }
    .item-img-box { max-width: 100%; width: 100%; border-radius: 24px;  border: none; }
    .item-img-box img { width: 100%; height: 320px; object-fit: cover; border: none; }
    .item-text-pure { max-width: 100%; width: 100%; padding: 15px; text-align: center; box-sizing: border-box; }
    .item-text-pure h3 { font-size: 24px; }
    .item-text-pure p { font-size: 16px; line-height: 1.5; }
    
    .steps-desktop-section { display: none; }
    .timeline-glass-box { padding: 25px 20px; margin-top: 20px; border-radius: 16px; }
    .mobile-gridik { display: block; }
    .mobile-prezent h3 { padding-top: 10px; }
    .pc-prezent { display: none; }
    .mobile-prezent .item-text-pure{ width: 100%; padding-top: 5px; padding-left: 10px; padding-right: 10px; padding-bottom: 10px; }
    
    .timeline-outro-block { margin-top: 60px; gap: 25px; }
    .timeline-outro-block1 { gap: 25px; }
    .outro-text { font-size: 16px; }
    .outro-text1 { font-size: 16px; padding-top: 30px; }
    .outro-images-grid { grid-template-columns: 1fr; gap: 25px; }
    .outro-img-box { height: 280px; border: none; }
    .outro-img-box img { border: none; }

    .quote-badge-box { min-height: 80px; background-size: 100% 100%; }
    .quote-badge-box .outro-quote { font-size: 15px; line-height: 1.4; max-width: 85%; }
    
    .vitrage-shop { padding: 60px 20px; gap: 20px; }
    .shop-grid { grid-template-columns: 1fr; gap: 30px; }
    .shop-header h2 { font-size: 32px; }
    .shop-section-title { font-size: 22px; }
    .shop-section-title span { display: block; margin-left: 0; margin-top: 5px; }
    
    .order-flow-section { padding: 80px 20px; gap: 20px; }
    .flow-steps-grid { grid-template-columns: 1fr; gap: 20px; }
    .order-form-container { padding: 30px 20px; border: 3px solid #13110F; h3 { font-size: 26px; } }
    .flow-header h2 { font-size: 32px; }
    .form-row-split { flex-direction: column; gap: 0; }
    .custom-offer-gallery { grid-template-columns: 1fr; gap: 15px; }
    .custom-gal-box { height: 400px; border: none; }
    .custom-gal-box img { border: none; }
    .custom-offer-meta { flex-direction: column; align-items: center; gap: 12px; }
    .custom-badge { width: 100%; max-width: 260px; text-align: center; box-sizing: border-box; border: none; }
    
    /* АДАПТИВ БЛОГА — ВОЗВРАЩЕН В ОРИГИНАЛ */
    .vitrage-blog-half { height: auto; flex-direction: column; }
    .blog-image-side { height: 300px; border-right: none; border-bottom: 4px solid #13110F; }
    .blog-image-side img { border: none; }
    .blog-video-grid-container { height: 400px; }
    .blog-video-grid { gap: 8px; }
    .video-grid-box { border: 3px solid #13110F; }
    .video-grid-box video { border: none; }
    .blog-text-side { padding: 40px 20px; h2 { font-size: 26px; } }
    
    .vitrage-footer { padding: 40px 20px 20px 20px; border-top: none; }
    .footer-container { flex-direction: column; gap: 30px; text-align: center; align-items: center; }
    .footer-brand p { max-width: 100%; }
    .footer-socials { align-items: center; text-align: center; text-decoration: none;}
    .social-icons { justify-content: center; }
    .social-icons a, .social-icons-long a { border: 2px solid #13110F; }
    
    .shop-signboard { margin: 55px auto 20px auto; min-height: 240px; padding: 30px 20px; border: none; h2 { font-size: 20px; letter-spacing: 1px; max-width: 80%; } }
    .modal-form-row { grid-template-columns: 1fr; gap: 0; }
    .custom-modal-box { border: 3px solid #13110F; }
    .modal-form-group input { border: 2px solid #13110F; }
    .product-lightbox-overlay { padding: 10px; }
    .product-lightbox-overlay img { max-width: 100%; max-height: 75vh; border: none; }
    .product-lightbox-overlay .lightbox-close { top: 15px; right: 20px; font-size: 40px; }
    .lightbox-btn { width: 40px; height: 40px; font-size: 16px; background: rgba(19, 17, 15, 0.7); border: none; }
    .lightbox-prev { left: 10px; }
    .lightbox-next { right: 10px; }
    .lightbox-img-wrapper { max-width: 100%; }
}
@media (min-width: 768px) { .mobile-prezent, .mobile-gridik { display: none; } }
@media (max-width: 480px) { .modal-form-row { grid-template-columns: 1fr; gap: 0; } }

/* ======================================================= */
/* СЕКЦИЯ 13: ИЗОЛИРОВАННЫЕ ХОВЕРЫ                          */
/* ======================================================= */
@media (hover: hover) {
    header .icon a:hover { color: #C4411D; transform: translateY(-1px); }
    header img:hover { transform: scale(1.1) translateY(-1px); }
    header nav a:hover { color: #C4411D; transform: translateY(-2px); }
    header .lang p:hover { color: #C4411D; }
    header .order-btn button:hover { background: #258495; color: #EDD7A3; transform: translateY(2px); box-shadow: 0 2px 0 #13110F; }
    .mosaic-item:hover img { transform: scale(1.01); filter: brightness(0.4) contrast(1.1); }
    .mosaic-btn:hover { background: #258495; transform: translateY(2px); box-shadow: 0 2px 0 #13110F; }
    .showroom-gallery-grid .gallery-photo-item:hover { transform: translateY(-3px) scale(1.02); }
    .btn-orange-header:hover { transform: translateY(-2px); box-shadow: 6px 6px 0 #13110F; }
    .timeline-item:hover .item-img-box img { transform: scale(1.04); filter: brightness(0.95) contrast(1.1); }
    .outro-img-box:hover img { transform: scale(1.04); }
    .product-card:hover { transform: translateY(-4px); }
    .product-card:hover .product-img-box img { transform: scale(1.05); }
    .product-btn:hover { background: #258495; transform: translateY(1px); box-shadow: 0 2px 0 #13110F; }
    .step-card:hover { transform: translateY(-2px); box-shadow: 0 8px 0 #13110F; }
    .file-label:hover { background: rgba(148, 156, 45, 0.2); }
    .form-submit-btn:hover { background: #258495; transform: translateY(1px); box-shadow: 0 4px 0 #13110F; }
    .vitrage-blog-half:hover .blog-image-side img { transform: scale(1.04) rotate(1deg); }
    .blog-read-link:hover { color: #C4411D; }
    .blog-read-link:hover svg { transform: translateX(6px); }
    .social-icons a:hover { background: #258495; color: #EDD7A3; transform: translateY(1px); box-shadow: 0 2px 0 #13110F; }
    .social-icons-long a:hover { background: #258495; color: #EDD7A3; transform: translateY(1px); box-shadow: 0 2px 0 #13110F; }
    .video-grid-box:hover video { transform: scale(1.05); }
    .custom-gal-box:hover img { transform: scale(1.05); }
    .shop-signboard:hover { animation: vintage-sign-hover-shake 0.5s ease-in-out infinite alternate; }
    .card-carousel-btn:hover { background: #258495; color: #FFF; }
    .lightbox-btn:hover { background: #258495; color: #FFF; transform: translateY(-50%) scale(1.05); }
    .product-lightbox-overlay .lightbox-close:hover { color: #C4411D; }
}