/* ============== Buttons ============== */
@keyframes btn-sheen {
    0%      { left: -40px; transform: translateY(-50%) rotate(45deg); }
    30%     { left: calc(100% + 20px); transform: translateY(-50%) rotate(45deg); }
    30.01%  { left: -40px; transform: translateY(-50%) rotate(45deg); }
    100%    { left: -40px; transform: translateY(-50%) rotate(45deg); }
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 20px;
    font-family: var(--font-button);
    font-weight: 700;
    font-size: 16px;
    border-radius: var(--radius-md);
    transition: opacity .2s, transform .2s;
    position: relative;
    overflow: hidden;
}

@media (max-width: 768px){
    .btn {
        font-size: 14px;
    }
}

.btn:hover { opacity: .85; }

.btn--yellow { background: var(--color-accent); color: var(--color-text); }
.btn--yellow-200 { min-width: 200px; }
.btn--yellow-240 { min-width: 240px; }
.btn--outline  { background: var(--color-text); color: #fff; }
.btn--black  { background: var(--color-text); color: #fff; }
.btn--white  { background: var(--color-bg); color: var(--color-text); }
.btn--ghost  { background: transparent; color: var(--color-text); }
.btn--gray   { background: #f3f3f3; color: var(--color-text); }
.btn--grey   { background: #f3f3f3; color: var(--color-text); }



.btn--yellow::after {
    content: '';
    position: absolute;
    top: 50%;
    left: -40px;
    width: 40px;
    height: 73px;
    transform: translateY(-50%) rotate(45deg);
    background: linear-gradient(270deg, rgba(255,255,255,0) 0%, rgba(248,251,255,.25) 45%, rgba(234,244,255,.80) 50%, rgba(248,251,255,.25) 55%, rgba(255,255,255,0) 100%);
    animation: btn-sheen 4s linear infinite;
}

.btn--black::after {
    content: '';
    position: absolute;
    top: 50%;
    left: -40px;
    width: 40px;
    height: 73px;
    transform: translateY(-50%) rotate(45deg);
    background: linear-gradient(270deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.25) 45%, rgba(255,255,255,.80) 50%, rgba(255,255,255,.25) 55%, rgba(255,255,255,0) 100%);
    animation: btn-sheen 4s linear infinite;
}


/* ============== Header ============== */
.header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--color-bg);
}
.header__container {
    margin: 0 auto;
    padding: 20px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    border-bottom: 1px solid var(--color-line);
}
@media (max-width: 768px){
      .header__container {
        padding: 15px var(--container-pad);
         border-bottom: none;
      }
}


.header__logo img { width: 120px; height: 32px; }

.header-nav__list { display: flex; gap: 24px; align-items: center; }
.header-nav__item { position: relative; }
.header-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 8px 4px;
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text);
    cursor: pointer;
    font-family: "SF Pro Display";
    transition: all 0.3s ease 0s;
}
.header-nav__submenu .header-nav__link {
    font-weight: 400;
}
.header-nav__submenu .header-nav__link:hover {
    font-weight: 600;
    text-decoration: underline;
}

.header-nav__chevron { width: 19px; height: 19px; flex-shrink: 0; aspect-ratio: 1/1; transition: transform .2s; transform: rotate(180deg); }
.header-nav__item--has-submenu:hover .header-nav__chevron { transform: rotate(0deg); }
.header-nav__submenu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 240px;
    padding: 12px;
    border-radius: 10px;
    background: #FFF14E;
    border-radius: var(--radius-md);
    box-shadow: 2px 2px 15px rgba(0,0,0,.1);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s, visibility .2s;
}
.header-nav__item--has-submenu:hover .header-nav__submenu { opacity: 1; visibility: visible; }

.header__actions { display: flex; align-items: center; gap: 16px; }
.header__login { font-weight: 700; padding: 13px 20px; background-color: #F4F4F4; border-radius: 10px; }
.header__contacts { display: flex; flex-direction: column; gap: 2px; font-size: 16px; }
.header__phone { font-weight: 700; line-height: normal;   }
.header__email { color: var(--color-text); font-size: 16px;  font-weight: 700; text-align: right; line-height: normal;}

.header__burger { display: none; flex-direction: column; gap: 5px; padding: 10px; }
.header__burger span { display: block; width: 24px; height: 2px; background: var(--color-text); }

@media (max-width: 1200px) {
    .header-nav, .header__contacts { display: none; }
    .header__burger { display: flex;border-radius: 8px;background: #FFEB05; }
    .header__actions {
        margin-left: auto;
    }
}

@media (max-width: 768px){
     .header__actions {
        display: none;
        padding: 6px;
     }
}

/* ============== Footer ============== */
.footer {
    background: var(--color-text);
    color: #fff;
    padding: 60px 0 30px;
}
.footer__container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--container-pad);
}
.footer__top {
    display: flex;
    align-items: flex-start;
    gap: 35px;
    margin-bottom: 80px;
}

.footer__logo img {
    width: 100%;
}

.footer__brand { display: flex; flex-direction: column; gap: 20px; width: 180px; flex-shrink: 0; }
.footer__cta { align-self: flex-start; }

.footer__columns {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px 25px;
}
.footer-col__title { font-size: 16px; font-weight: 500; color: #fff04e; margin-bottom: 10px; }
.footer-col__list { display: flex; flex-direction: column; gap: 5px; }
.footer-col__list a {
    font-size: 16px;
    color: rgba(255,255,255,1);
    transition: color .2s;
}
.footer-col__list a:hover { color: #fff; }
.footer-col__address { display: flex; flex-direction: column; gap: 5px; font-size: 16px; }
.footer-col__link { color: #fff; }
.footer-col__text--strong { color: #fff; font-weight: 600; }

.footer__socials { display: flex; flex-direction: row; gap: 10px; }
.footer__social {
    width: 30px;
    height: 30px;
}

.footer__bottom { display: flex; flex-direction: column; gap: 20px; }
.footer__legal-list { display: flex; flex-wrap: wrap; gap: 20px; font-size: 14px; list-style: disc; }
.footer__legal-list li { text-decoration: underline; padding-right: 3px;}
.footer__legal-list li:first-child { list-style: none;}
.footer__legal-list a { color: #fff;}
.footer__about { font-size: 14px; color: #fff; line-height: normal; }
.footer__copyright { font-size: 14px; color: #fff; }

@media (max-width: 1024px) {
    .footer__columns { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .footer { padding: 40px 0 20px; }
    .footer__columns { grid-template-columns: 1fr; gap: 30px; }
}

/* ============== Breadcrumbs ============== */
.breadcrumbs { padding: 20px 0; font-size: 14px; }
.breadcrumbs__list { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0; }
.breadcrumbs__item { color: var(--color-text-muted); font-size: 16px; }
.breadcrumbs__item:not(:last-child)::after { content: " / "; margin-left: 6px; color: var(--color-text-muted); }
.breadcrumbs__link { color: var(--color-text-muted); }
.breadcrumbs__link:hover { color: var(--color-text); }
.breadcrumbs__item[aria-current="page"] { color: var(--color-text); }

/* ============== Mobile menu ============== */
.mobile-menu {
    position: fixed; inset: 0; z-index: 200;
    background: #fff;
    opacity: 0; visibility: hidden;
    transition: opacity .25s, visibility .25s;
    overflow-y: auto;
}
.mobile-menu--open { opacity: 1; visibility: visible; }
.mobile-menu__inner {
    max-width: 480px; margin: 0 auto;
    padding: 20px var(--container-pad) 40px;
    display: flex; flex-direction: column; gap: 32px;
    min-height: 100vh;
    background-color: #000;
}
.mobile-menu__top { display: flex; justify-content: space-between; align-items: center; }
.mobile-menu__logo img { width: 120px; height: 32px; }
.mobile-menu__close {
    width: 44px; height: 44px;
    font-size: 32px; line-height: 1;
    color: var(--color-text);
}
.mobile-menu__list { display: flex; flex-direction: column; gap: 4px; }
.mobile-menu__list li { border-bottom: 1px solid var(--color-line); }
.mobile-menu__list a, .mobile-menu__list button {
    display: block; padding: 16px 0; font-size: 18px; font-weight: 500; color: var(--color-text); width: 100%; text-align: left;
}
.mobile-menu__list .sub-menu { padding-left: 16px; padding-bottom: 12px; }
.mobile-menu__list .sub-menu a { font-size: 15px; padding: 8px 0; color: var(--color-text-secondary); }
.mobile-menu__actions { display: flex; flex-direction: column; gap: 12px; }
.mobile-menu__contacts { display: flex; flex-direction: column; gap: 6px; font-size: 15px; padding-top: 24px; border-top: 1px solid var(--color-line); }
body.body--menu-open { overflow: hidden; }

/* ============== Cookie banner ============== */
.cookie-banner {
    position: fixed; left: 16px; right: 16px; bottom: 16px;
    z-index: 150;
    background: var(--color-text); color: #fff;
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 32px rgba(0,0,0,.2);
    transform: translateY(20px); opacity: 0;
    transition: transform .25s, opacity .25s;
    max-width: 720px; margin: 0 auto;
}
.cookie-banner--show { transform: translateY(0); opacity: 1; }
.cookie-banner__inner {
    display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
    padding: 16px 20px;
}
.cookie-banner__text { font-size: 14px; line-height: 1.5; flex: 1 1 280px; }
.cookie-banner__text a { color: var(--color-accent); text-decoration: underline; }
.cookie-banner__btn { flex-shrink: 0; }