/* Глобальные переменные для дизайн-системы */
:root { --bg-page: #E5E5E5; --bg-main: #FFFFFF; --color-primary: #006170; --color-secondary: #FFE8BD; --color-text-dark: #000000; --color-text-light: #FFFFFF; --font-heading: 'Cruinn', sans-serif; --font-body: 'Tilda Sans', sans-serif; --container-max-width: 1200px; --section-gap: 80px; }
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: var(--bg-page); font-family: var(--font-body); color: var(--color-text-dark); line-height: 1.5; overflow-x: hidden; }
.main-page { width: 100%; max-width: 1920px; min-height: 100vh; background: var(--bg-main); margin: 0 auto; position: relative; overflow: hidden; display: flex; flex-direction: column; }
.container { width: 100%; max-width: var(--container-max-width); margin: 0 auto; padding: 0 20px; position: relative; }

/* Фоны */
.ellipse-8 { position: absolute; width: 1319.72px; height: 1319.72px; left: -331px; top: 1387.64px; background: radial-gradient(50% 50% at 50% 50%, rgba(0, 186, 216, 0.23) 0%, rgba(255, 255, 255, 0.23) 100%); }
.ellipse-9 { position: absolute; width: 2112.79px; height: 2112.79px; left: 229.99px; top: 999px; background: radial-gradient(50% 50% at 50% 50%, rgba(192, 240, 244, 0.58) 0%, rgba(255, 255, 255, 0) 100%); }
.ellipse-10 { position: absolute; width: 1457.05px; height: 1349.93px; left: -15.83px; top: 1895.07px; background: radial-gradient(50% 50% at 50% 50%, rgba(255, 232, 189, 0.32) 0%, rgba(255, 255, 255, 0.048) 100%); }
.rect-22 { position: absolute; width: 1318.35px; height: 741.57px; left: 87.85px; top: 1941.07px; background: rgba(255, 255, 255, 0.01); border: 1px solid rgba(255, 255, 255, 0.01); backdrop-filter: blur(30px); }

/* Шапка (Абсолютное позиционирование Penpot) */
.head { position: absolute; width: 1920px; height: 88px; left: 0px; top: 12px; z-index: 1000; }
.head-bg { position: absolute; width: 1920px; height: 110px; left: 0px; top: -26px; background: #FFFFFF; border-radius: 30px; box-shadow: 0px 13px 16px -2px rgba(0, 0, 0, 0.19); }
.head-content { position: absolute; left: 385px; top: 0px; width: 1171px; height: 67px; }

/* Логотип */
.head-logo-group { position: absolute; left: 38px; top: 18px; display: flex; align-items: center; text-decoration: none; color: var(--color-primary); }
.head-logo-text { margin-left: 10px; font-family: var(--font-heading); font-weight: 900; font-size: 28px; letter-spacing: 0.05em; text-transform: uppercase; }

/* Навигация и город */
.nav-link { position: absolute; font-family: var(--font-body); font-size: 20px; color: #000000; text-decoration: none; top: 22px; }
.nav-promo { left: 180px; }
.nav-city-wrapper { position: absolute; left: 450px; top: 22px; font-family: var(--font-body); font-size: 20px; color: #000000; cursor: pointer; }
.nav-city-arrow { position: absolute; left: 85px; top: 8px; }
.nav-about { left: 650px; }
.nav-delivery { left: 750px; }
.nav-articles { left: 870px; }

/* Выпадающий список городов */
.city-dropdown { position: absolute; left: 0px; top: 35px; background: #fff; box-shadow: 0 4px 12px rgba(0,0,0,0.1); border-radius: 8px; list-style: none; padding: 10px 0; z-index: 101; display: none; min-width: 150px; }
.city-dropdown li { padding: 8px 20px; font-family: var(--font-body); font-size: 16px; cursor: pointer; }
.city-dropdown li:hover { background: #f0f0f0; }

/* Иконки в рамках (Penpot Rectangles) */
.action-btn { position: absolute; top: 15px; width: 35px; height: 35px; border: 1px solid #000; border-radius: 4px; display: flex; align-items: center; justify-content: center; background: none; cursor: pointer; transition: transform 0.2s; }
.action-btn:hover { transform: scale(1.05); }
.btn-search { left: 984px; width: 33px; }
.btn-fav { left: 1028px; }
.btn-cart { left: 1074px; }
.btn-user { left: 1120px; }

/* Главный экран */
.main-photo { position: absolute; width: 1920px; height: 1044px; left: 0px; top: 56px; background-color: #006170; box-shadow: 0px 13px 16px -2px rgba(0, 0, 0, 0.19); border-radius: 0px 0px 30px 30px; }
.welcome-text { position: absolute; width: 879px; height: 138px; left: 384px; top: 158px; font-family: 'Tilda Sans', sans-serif; font-weight: 700; font-size: 80px; line-height: 96px; color: #FFFFFF; display: flex; align-items: center; }
.btn-group { position: absolute; width: 247px; height: 50px; }
.b1 { left: 384px; top: 944px; } .b2 { left: 685px; top: 942px; } .b3 { left: 987px; top: 942px; } .b4 { left: 1290px; top: 942px; }
.rect-170 { position: absolute; left: 0%; right: 0.81%; top: 0%; bottom: 0%; background: #FFFFFF; border-radius: 36.5px; }
.btn-label { position: absolute; left: 0%; right: 0%; top: 2%; bottom: 0%; font-family: 'Tilda Sans', sans-serif; font-weight: 600; font-size: 18px; text-align: center; display: flex; align-items: center; justify-content: center; color: #000000; }

/* Блок О нас */
.about-frame { position: absolute; width: 1920px; height: 866px; left: 0px; top: 1494px; }
.about-title { position: absolute; width: 330px; height: 109px; left: 389px; top: 228px; font-family: 'Cruinn', sans-serif; font-weight: 900; font-size: 48px; color: #006170; display: flex; align-items: flex-end; }
.about-description { position: absolute; width: 618px; height: 344px; left: 389px; top: 375px; font-family: 'Tilda Sans', sans-serif; font-weight: 400; font-size: 32px; color: #000000; text-align: justify; }
.group-289-image { position: absolute; width: 437.26px; height: 477.65px; left: 1103.74px; top: 292px; background: #f0f0f0; border-radius: 30px; }
.c-pillows { position: absolute; width: 337px; height: 248px; left: 389px; top: -242px; }
.c-matress { position: absolute; width: 337px; height: 248px; left: 794px; top: -243px; }
.c-bedcl { position: absolute; width: 337px; height: 248px; left: 1199px; top: -243px; }
.cat-img-rect { position: absolute; height: 231.01px; left: 0%; right: 0%; top: 0px; background: #00617010; border-radius: 28px; }

/* Статьи */
.actions-title { position: absolute; width: 490px; height: 73px; left: 389px; top: 3313px; font-family: 'Cruinn', sans-serif; font-weight: 900; font-size: 40px; color: #006170; }
.ar-1 { position: absolute; width: 360px; height: 163px; left: 389px; top: 3413px; background: #FFFFFF; border-radius: 30px; }
.ar-2 { position: absolute; width: 359px; height: 163px; left: 781px; top: 3413px; background: #FFFFFF; border-radius: 30px; }
.ar-3 { position: absolute; width: 360px; height: 164px; left: 1172px; top: 3412px; background: #FFFFFF; border-radius: 30px; }
.ar-title { position: absolute; left: 35px; top: 55px; width: 232px; font-family: 'Tilda Sans', sans-serif; font-weight: 600; font-size: 18px; color: #000000; }

/* Подвал */
.footer-wrapper { position: absolute; width: 1920px; height: 815px; left: 0px; top: 3621px; }
.footer-bg { position: absolute; width: 1920px; height: 815px; left: 0px; top: 0px; background: #006170; }
.footer-contact-title { position: absolute; width: 481px; height: 40px; left: 383px; top: 177px; font-family: 'Tilda Sans', sans-serif; font-weight: 500; font-size: 22px; color: #FFFFFF; }
.footer-mail { position: absolute; width: 145px; height: 27px; left: 754px; top: 188px; font-family: 'Tilda Sans', sans-serif; font-weight: 500; font-size: 22px; color: #FFFFFF; }
.footer-phone { position: absolute; width: 174px; height: 38px; left: 964px; top: 177px; font-family: 'Tilda Sans', sans-serif; font-weight: 500; font-size: 20px; color: #FFFFFF; }
.footer-social { position: absolute; width: 145px; height: 27px; left: 1176px; top: 187px; font-family: 'Tilda Sans', sans-serif; font-weight: 500; font-size: 22px; color: #FFFFFF; }
.f-col-buyers { position: absolute; width: 242px; height: 68px; left: 673px; top: 341px; font-family: 'Cruinn', sans-serif; font-weight: 900; font-size: 36px; color: #FFE8BD; }
.f-col-about { position: absolute; width: 322px; height: 68px; left: 1006px; top: 341px; font-family: 'Cruinn', sans-serif; font-weight: 900; font-size: 36px; color: #FFE8BD; }
.f-col-catalog { position: absolute; width: 321px; height: 68px; left: 384px; top: 339px; font-family: 'Cruinn', sans-serif; font-weight: 900; font-size: 36px; color: #FFE8BD; }
.f-link-promo, .f-link-payment, .f-link-guarantee, .f-link-refund, .f-link-services, .f-link-history, .f-link-manufacturers, .f-link-certificates, .f-link-materials, .f-link-pillows, .f-link-mattresses, .f-link-bedding, .f-link-accessories { font-family: 'Tilda Sans', sans-serif; font-size: 22px; color: #FFFFFF; }
.f-link-pillows { position: absolute; width: 242px; height: 35px; left: 384px; top: 410px; }
.f-link-mattresses { position: absolute; width: 242px; height: 35px; left: 384px; top: 453px; }
.f-link-bedding { position: absolute; width: 335px; height: 35px; left: 384px; top: 498px; }
.f-link-accessories { position: absolute; width: 335px; height: 35px; left: 384px; top: 538px; }
.f-link-promo { position: absolute; width: 242px; height: 35px; left: 673px; top: 410px; }
.f-link-payment { position: absolute; width: 242px; height: 35px; left: 673px; top: 453px; }
.f-link-guarantee { position: absolute; width: 335px; height: 35px; left: 673px; top: 493px; }
.f-link-refund { position: absolute; width: 241px; height: 35px; left: 673px; top: 533px; }
.f-link-services { position: absolute; width: 242px; height: 35px; left: 673px; top: 572px; }
.f-link-history { position: absolute; width: 242px; height: 35px; left: 1006px; top: 410px; }
.f-link-manufacturers { position: absolute; width: 322px; height: 35px; left: 1006px; top: 450px; }
.f-link-certificates { position: absolute; width: 334px; height: 35px; left: 1006px; top: 491px; }
.f-link-materials { position: absolute; width: 273px; height: 34px; left: 1006px; top: 531px; }
.footer-payment-title { position: absolute; width: 273px; height: 34px; left: 1369px; top: 635px; font-family: 'Tilda Sans', sans-serif; font-weight: 500; font-size: 22px; color: #FFFFFF; }
.footer-visa-icon { position: absolute; width: 94px; height: 95px; left: 1439px; top: 664px; background-color: #ffffff30; border-radius: 8px; }
.footer-mastercard-icon { position: absolute; width: 108px; height: 108px; left: 1321px; top: 657px; background-color: #ffffff30; border-radius: 8px; }
.footer-copyright { position: absolute; width: 528px; height: 34px; left: 388px; top: 711px; font-family: 'Tilda Sans', sans-serif; font-weight: 500; font-size: 22px; color: #FFFFFF; }