/* ==========================================================================
   Базовые токены для Pixel-Perfect Header
   ========================================================================== */
:root {
    /* Colors */
    --color-header-bg: #F8FDFC;
    --color-surface: #FFFFFF;
    --color-text-main: #000000;
    --color-text-muted: #698293;
    --color-border-soft: #D9F5F3;
    --color-figma-bg: #EBF4F2;
    --color-text-white: #FFFFFF;
    --color-transparent: transparent;

    /* Gradients */
    --gradient-figma: linear-gradient(270deg, rgba(217, 245, 243, 1) 0%, rgba(242, 242, 242, 1) 100%);
    --gradient-pro: linear-gradient(90deg, rgba(217, 245, 243, 1) 0%, rgba(242, 242, 242, 1) 100%);
    --gradient-logo: linear-gradient(225deg, rgba(95, 231, 190, 1) 0%, rgba(3, 189, 211, 1) 100%);
    --gradient-black: #000000;

    /* Header dimensions */
    --header-padding-desktop: 12px;
    --header-gap-desktop: 12px;
    --header-height-desktop: 96px;
    --header-width-desktop: 1920px;

    /* Logo */
    --logo-width-desktop: 314px;
    --logo-padding-desktop: 12px 24px 12px 12px;
    --logo-gap-desktop: 8px;
    --logo-icon-size-desktop: 40px;
    --logo-title-size-desktop: 24px;
    --logo-subtitle-size-desktop: 11px;
    --logo-title-lh-desktop: 1.2102272510528564em;
    --logo-subtitle-lh-desktop: 1.2102272727272727em;

    /* Search */
    --search-padding-desktop: 18px 24px;
    --search-gap-desktop: 12px;
    --search-icon-size-desktop: 32px;
    --search-font-size-desktop: 16px;
    --search-lh-desktop: 1.2102272510528564em;
    --search-border-desktop: 2px solid var(--color-border-soft);
    --search-radius-desktop: 8px;
    --search-shadow-desktop: 0px 4px 16px 0px rgba(217, 245, 243, 0.25);

    /* Buttons */
    --button-padding-desktop: 20px 24px;
    --button-padding-desktop-pro: 20px 24px;
    --button-gap-desktop: 12px;
    --button-radius-default-desktop: 8px;
    --button-radius-small-desktop: 4px;
    --button-font-size-desktop: 16px;
    --button-font-size-bold-desktop: 18px;
    --button-lh-desktop: 1.2102272510528564em;
    --button-lh-bold-desktop: 32px;

    /* Icons */
    --icon-user-size-desktop: 32px;
    --icon-figma-width-desktop: 21px;
    --icon-figma-height-desktop: 32px;

    /* Shadows */
    --shadow-header-desktop: 0px 4px 18px 0px rgba(141, 160, 173, 0.15);

    /* Font weights */
    --font-weight-normal: 400;
    --font-weight-bold: 600;
    --font-weight-logo: 700;
    --font-weight-logo-bold: 900;

    /* Hero Section */
    --hero-padding-desktop: 24px 48px;
    --hero-gap-desktop: 24px;
    --hero-height-desktop: 512px;
    --hero-card-padding-desktop: 36px;
    --hero-card-gap-desktop: 12px;
    --hero-title-size-desktop: 36px;
    --hero-title-lh-desktop: 1.2102272245619032em;
    --hero-tag-padding-desktop: 8px 12px;
    --hero-tag-gap-desktop: 8px;
    --hero-tag-radius-desktop: 8px;

    /* Features Section */
    --features-padding-desktop: 0px 48px;
    --features-gap-desktop: 12px;
    --features-height-desktop: 150px;
    --feature-card-padding-desktop: 18px;
    --feature-card-gap-desktop: 12px;
    --feature-icon-size-desktop: 48px;
    --feature-title-size-desktop: 18px;
    --feature-title-lh-desktop: 1.2102272245619032em;
    --feature-shadow-desktop: 0px 2px 16px 0px rgba(51, 211, 199, 0.15);
    --feature-radius-desktop: 8px;

    /* Footer */
    --footer-padding-desktop: 18px 48px;
    --footer-text-size-desktop: 18px;
    --footer-text-lh-desktop: 1.2102272245619032em;
    --footer-bg-desktop: #F2F2F2;
    --footer-text-color-desktop: #999999;
}

/* ==========================================================================
   Кастомная сетка
   ========================================================================== */
.container {
    max-width: var(--header-width-desktop);
    width: 100%;
    margin: 0 auto;
    padding-left: 0;
    padding-right: 0;
}

.row {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
}

.col {
    padding: 0;
    flex: 1 1 0%;
    min-width: 0;
}

.col--25 {
    flex: 0 0 25%;
    max-width: 25%;
}

.col--33 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
}

.col--50 {
    flex: 0 0 50%;
    max-width: 50%;
}

.col--66 {
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
}

.col--75 {
    flex: 0 0 75%;
    max-width: 75%;
}

.col--100 {
    flex: 0 0 100%;
    max-width: 100%;
}

/* ==========================================================================
   Базовые стили
   ========================================================================== */
html,
body {
    margin: 0;
    padding: 0;
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    color: var(--color-text-main);
    background: var(--color-surface);
    height: 100%;
}

body {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

body.no-scroll {
    overflow: hidden;

}

/* ==========================================================================
   Layout Header — Desktop (Pixel-Perfect)
   ========================================================================== */
.layout-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: var(--color-header-bg);
    box-shadow: var(--shadow-header-desktop);
    height: var(--header-height-desktop);
    z-index: 100;
}

.layout-header__row {
    display: flex;
    align-items: center;
    gap: var(--header-gap-desktop);
    padding: var(--header-padding-desktop);
    margin: 0;
    height: 100%;
}

.layout-header__col {
    display: flex;
    padding: 0;
}

.layout-header__col--logo {
    flex: 0 0 auto;
    width: var(--logo-width-desktop);
	outline: none;
}

.layout-header__col--search {
    flex: 1 1 auto;
    min-width: 0;
	position: relative;
}

.layout-header__col--account,
.layout-header__col--figma,
.layout-header__col--pro ,
.layout-header__col--menu {
    flex: 0 0 auto;
}

.layout-header__col--filter-mobile {
    display: none;
    flex: 0 0 auto;
}

.header-filter-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 8px 14px;
    background: var(--color-surface);
    border: none;
    border-radius: var(--search-radius-desktop);
    cursor: pointer;
}

.header-filter-btn__icon {
    width: 24px;
    height: 24px;
    background: #BFBFBF;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 6h18M3 12h18M3 18h18' stroke='currentColor' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Logo */
.logo {
    display: flex;
    align-items: center;
    gap: var(--logo-gap-desktop);
    padding: var(--logo-padding-desktop);
    text-decoration: none;
    color: var(--color-text-main);
    width: 100%;
	outline: none;
}

.logo__icon {
    width: var(--logo-icon-size-desktop);
    height: var(--logo-icon-size-desktop);
    border-radius: 50%;
    background: var(--gradient-logo);
    mask: url("../img/logo.svg") center/contain no-repeat;
    display: block;
    flex-shrink: 0;
}

.logo__text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0;
}

.logo__title {
    margin: 0;
    padding: 0;
    font-size: var(--logo-title-size-desktop);
    font-weight: var(--font-weight-logo);
    line-height: var(--logo-title-lh-desktop);
}

.logo__title--bold {
    font-weight: var(--font-weight-logo-bold);
}

.logo__subtitle {
    margin: 0;
    padding: 0;
    font-size: var(--logo-subtitle-size-desktop);
    font-weight: var(--font-weight-normal);
    line-height: var(--logo-subtitle-lh-desktop);
}

/* Search */
.header-search {
    display: flex;
    align-items: center;
    gap: var(--search-gap-desktop);
    padding: var(--search-padding-desktop);
    width: 100%;
    background: var(--color-surface);
    border: var(--search-border-desktop);
    border-radius: var(--search-radius-desktop);
    box-shadow: var(--search-shadow-desktop);
}

.header-search__icon {
    width: var(--search-icon-size-desktop);
    height: var(--search-icon-size-desktop);
    background: #698293;
    mask: url("../img/icon/search.svg") center/contain no-repeat;
    flex-shrink: 0;
}

.header-search__input {
    border: none;
    outline: none;
    padding: 0;
    margin: 0;
    flex: 1 1 auto;
    font-size: var(--search-font-size-desktop);
    line-height: var(--search-lh-desktop);
    font-weight: var(--font-weight-normal);
    color: var(--color-text-muted);
    background: transparent;
}

.header-search__input::placeholder {
    color: var(--color-text-muted);
    opacity: 1;
}


/*****************************/
.header-search {
	display: flex;
	align-items: center;
	gap: 8px;
}

.header-search__tag {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 8px 12px;
	border-radius: 6px;
	background: #F2F2F2;
	color: #000000;
	font-size: 16px;
	line-height: 1;
	white-space: nowrap;
	flex: 0 0 auto;
}
.header-search__tag:hover {
	background: #D9F5F3;
}
.header-search__tag[hidden] {
	display: none;
}
.header-search__tag-remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	-webkit-mask: url("../img/icon/close.svg") center / contain no-repeat;
        mask: url("../img/icon/close.svg") center / contain no-repeat;
	background: #ABBDCA;
	text-decoration: none;
	
}

.header-search__tag-remove:hover {
	background: #698293;
}

.header-search__input.has-tag {
	min-width: 80px;
}



/* Buttons */
.nav-button {
    display: inline-flex;
    align-items: center;
    gap: var(--button-gap-desktop);
    padding: var(--button-padding-desktop);
    border-radius: var(--button-radius-default-desktop);
    text-decoration: none;
    font-size: var(--button-font-size-desktop);
    line-height: var(--button-lh-desktop);
    font-weight: var(--font-weight-normal);
    color: var(--color-text-main);
    background: var(--color-figma-bg);
    white-space: nowrap;
}

.nav-button--account {
    background: var(--color-transparent);
}
.nav-button--account:hover {
    background: #EBF4F2;
}

.nav-button--secondary {
    font-size: var(--button-font-size-bold-desktop);
    font-weight: var(--font-weight-bold);
    background: var(--gradient-figma);
    border-radius: var(--button-radius-small-desktop);
}
.nav-button--secondary:hover {
    background: linear-gradient(270deg, rgba(242, 242, 242, 1) 0%, rgba(217, 245, 243, 1) 100%);

}
.nav-button--menu{
    font-size: var(--button-font-size-bold-desktop);
    font-weight: var(--font-weight-bold);
    background: none;
    border-radius: var(--button-radius-small-desktop);
}
.nav-button--menu:hover{
    background: #EBF4F2;
}

.nav-button--primary {
    background: var(--gradient-black);
    border-radius: var(--button-radius-small-desktop);
    color: var(--color-text-white);
    font-weight: var(--font-weight-bold);
    font-size: var(--button-font-size-bold-desktop);
    line-height: var(--button-lh-bold-desktop);
    padding: var(--button-padding-desktop-pro);
}

.nav-button__icon {
    display: block;
    flex-shrink: 0;
    background: var(--color-text-main);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
		width: 21px;
		height: 32px;
}

	
.nav-button__icon--user {
    width: var(--icon-user-size-desktop);
    height: var(--icon-user-size-desktop);
    mask-image: url("../img/icon/user.svg");
}	
.nav-button--menu .nav-button__icon {
    width: var(--icon-user-size-desktop);
    height: var(--icon-user-size-desktop);
}

.nav-button__icon--figma {
    width: var(--icon-figma-width-desktop);
    height: var(--icon-figma-height-desktop);
    background: center/contain no-repeat url("../img/icon/figma.svg");
}

.nav-button--primary .nav-button__icon {
    background: var(--color-text-white);
}

.layout-header__col-mobile {
    display: none;
}

/* ==========================================================================
   Search
   ========================================================================== */
.autocomplete-suggestions {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 12px;
gap: 6px;

width: 360px;

background: #FFFFFF;
box-shadow: 0px 4px 16px rgba(153, 153, 153, 0.36);
border-radius: 8px;
	overflow-y: auto;
	
	position: absolute;
	width: 360px;
	max-height: 300px;
	z-index: 9999;
	left: 0;
	top: calc(100% + 3px);
	
	
}
.autocomplete-suggestion {
box-sizing: border-box;

display: flex;
flex-direction: row;
width: 100%;
align-items: center;
padding: 12px 18px;
gap: 12px;
cursor: pointer;
border: 1px solid #F2F2F2;
border-radius: 8px;


}
.autocomplete-selected {
background: #F2F2F2;
}
.autocomplete-suggestion .image{
width: 36px;
height: 36px;


}
.autocomplete-suggestion .title{
font-weight: 400;
font-size: 18px;
line-height: 22px;
color: #000000;
}

.autocomplete-suggestion:has(.image) .title {
    font-weight: 600;
}

.autocomplete-suggestion .title strong{
	font-weight: 600;
	color: #03BDD3;
}

/* ==========================================================================
   Layout Main
   ========================================================================== */
.layout-main {
    padding-top: calc(var(--header-height-desktop));
    flex: 1 0 auto;
}

/* ==========================================================================
   Hero Section — Desktop (Pixel-Perfect)
   ========================================================================== */
.section-hero {
    padding: var(--hero-padding-desktop);
}

.section-hero__row {
    gap: var(--hero-gap-desktop);
    align-items: stretch;
    min-height: var(--hero-height-desktop);
}

.section-hero__col {
    flex: 1 1 0%;
}

.hero-card {
    height: 100%;
    min-height: var(--hero-height-desktop);
    border-radius: var(--feature-radius-desktop);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.hero-card--primary {
    background: linear-gradient(90deg, #F2F2F2 0%, #D9F5F3 100%), #FFF;
}

.hero-card--secondary {
    background: linear-gradient(90deg, #F2F2F2 0%, #D9F5F3 100%), #FFF;
}

.hero-card--tertiary {
    background: linear-gradient(90deg, #F2F2F2 0%, #CDCEFF 100%), #FFF;
}

.hero-card__content {
    padding: var(--hero-card-padding-desktop);
    display: flex;
    flex-direction: column;
    gap: var(--hero-card-gap-desktop);
}

.hero-card__title {
    margin: 0;
    padding: 0;
    font-size: var(--hero-title-size-desktop);
    font-weight: var(--font-weight-bold);
    line-height: var(--hero-title-lh-desktop);
    color: var(--color-text-main);
}

.hero-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--hero-tag-gap-desktop);
}

.hero-card__tag {
    padding: var(--hero-tag-padding-desktop);
    border-radius: var(--hero-tag-radius-desktop);
    background: #F2F2F2;
    font-size: var(--button-font-size-desktop);
    font-weight: var(--font-weight-normal);
    line-height: var(--button-lh-desktop);
    color: var(--color-text-main);
    white-space: nowrap;
}
.hero-card-link {
	display: block;
	text-decoration: none;
	color: inherit;
}
/* ==========================================================================
   Features Section — Desktop (Pixel-Perfect)
   ========================================================================== */
.section-features {
    padding: var(--features-padding-desktop);
	margin-bottom: 48px;
}

.section-features__row {
    gap: var(--features-gap-desktop);
    align-items: stretch;
    min-height: var(--features-height-desktop);
}

.section-features__col {
    flex: 1 1 0%;
}

.feature-card {
    min-height: var(--features-height-desktop);
    padding: var(--feature-card-padding-desktop);
    background: var(--color-surface);
    border-radius: var(--feature-radius-desktop);
    box-shadow: var(--feature-shadow-desktop);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--feature-card-gap-desktop);
}

.feature-card__icon {
    width: var(--feature-icon-size-desktop);
    height: var(--feature-icon-size-desktop);
    background: #3FD9C5;
    flex-shrink: 0;
}

.feature-card__icon--shopping-bag {
    mask: url("../img/icon/shopping-bag.svg") center/contain no-repeat;
}

.feature-card__icon--vector {
    mask: url("../img/icon/vector.svg") center/contain no-repeat;
}

.feature-card__icon--hand {
    mask: url("../img/icon/hand.svg") center/contain no-repeat;
}

.feature-card__icon--grid {
    mask: url("../img/icon/grid.svg") center/contain no-repeat;
}

.feature-card__icon--key {
    mask: url("../img/icon/key.svg") center/contain no-repeat;
}

.feature-card__title {
    margin: 0;
    padding: 0;
    font-size: var(--feature-title-size-desktop);
    font-weight: var(--font-weight-normal);
    line-height: var(--feature-title-lh-desktop);
    color: var(--color-text-main);
    text-align: center;
}

/* ==========================================================================
   section-body — Desktop (Pixel-Perfect)
   ========================================================================== */
.section-body {
    /*height: 500px;*/
}

/* ==========================================================================
   Footer — Desktop (Pixel-Perfect)
   ========================================================================== */
.layout-footer {
    padding: var(--footer-padding-desktop);
    background: var(--footer-bg-desktop);
    flex-shrink: 0;
}

.layout-footer__row {
    align-items: center;
}

.layout-footer__text {
    margin: 0;
    padding: 0;
    font-size: var(--footer-text-size-desktop);
    font-weight: var(--font-weight-normal);
    line-height: var(--footer-text-lh-desktop);
    color: var(--footer-text-color-desktop);
}

/* ==========================================================================
   Tablet (768px - 1199px) — Pixel-Perfect
   ========================================================================== */
@media (min-width: 769px) and (max-width: 1200px) {
    :root {
        --header-padding-tablet: 12px;
        --header-gap-tablet: 12px;
        --header-height-tablet: 90px;
        --header-width-tablet: 100%;

        --logo-width-tablet: 314px;
        --logo-padding-tablet: 12px 24px 12px 12px;
        --logo-gap-tablet: 8px;
        --logo-icon-size-tablet: 40px;
        --logo-title-size-tablet: 24px;
        --logo-subtitle-size-tablet: 11px;

        --search-padding-tablet: 10px 18px 10px 24px;
        ;
        --search-gap-tablet: 12px;
        --search-icon-size-tablet: 32px;
        --search-font-size-tablet: 16px;

        --button-padding-tablet: 12px 24px;
        --button-padding-primary-tablet: 17px 24px;
        --button-gap-tablet: 12px;
        --button-font-size-tablet: 16px;
        --button-font-size-bold-tablet: 18px;
    }

    .container {
        max-width: var(--header-width-tablet);
    }

    .layout-header {
        height: var(--header-height-tablet);
    }

    .layout-header__row {
        gap: var(--header-gap-tablet);
        padding: var(--header-padding-tablet);
    }

    .layout-header__col--logo {
        width: var(--logo-width-tablet);
    }

    .logo {
        gap: var(--logo-gap-tablet);
        padding: var(--logo-padding-tablet);
    }

    .logo__icon {
        width: var(--logo-icon-size-tablet);
        height: var(--logo-icon-size-tablet);
    }

    .logo__title {
        font-size: var(--logo-title-size-tablet);
    }

    .logo__subtitle {
        font-size: var(--logo-subtitle-size-tablet);
    }

    .header-search {
        gap: var(--search-gap-tablet);
        padding: var(--search-padding-tablet);
    }

    .header-search__icon {
        width: var(--search-icon-size-tablet);
        height: var(--search-icon-size-tablet);
    }

    .header-search__input {
        font-size: var(--search-font-size-tablet);
    }

    .nav-button {
        gap: var(--button-gap-tablet);
        padding: var(--button-padding-tablet);
        font-size: var(--button-font-size-tablet);
    }

    .nav-button--primary {
        font-size: var(--button-font-size-bold-tablet);
        padding: var(--button-padding-primary-tablet);
    }


    .layout-main {
        padding-top: calc(var(--header-height-tablet));
    }

    .nav-button--account .nav-button__text {
        display: none;
    }

    .layout-header__col--search {
        flex: 1;
    }

    /* Hero Section Tablet */
    :root {
        --hero-padding-tablet: 24px 48px;
        --hero-gap-tablet: 24px;
        --hero-height-tablet: 560px;
        --hero-card-padding-tablet: 36px;
        --hero-card-gap-tablet: 12px;
        --hero-title-size-tablet: 36px;
        --hero-tag-padding-tablet: 8px 12px;
        --hero-tag-gap-tablet: 8px;

        --features-padding-tablet: 0px 48px;
        --features-gap-tablet: 12px;
        --features-height-tablet: 150px;
        --feature-card-padding-tablet: 18px;
        --feature-card-gap-tablet: 12px;
        --feature-icon-size-tablet: 48px;
        --feature-title-size-tablet: 18px;

        --footer-padding-tablet: 18px 48px;
        --footer-height-tablet: 60px;
        --footer-text-size-tablet: 18px;
    }

    .section-hero {
        padding: var(--hero-padding-tablet);
    }

    .section-hero__row {
        gap: var(--hero-gap-tablet);
        min-height: var(--hero-height-tablet);
    }

    .hero-card {
        min-height: var(--hero-height-tablet);
    }

    .hero-card__content {
        padding: var(--hero-card-padding-tablet);
        gap: var(--hero-card-gap-tablet);
    }

    .hero-card__title {
        font-size: var(--hero-title-size-tablet);
    }

    .hero-card__tag {
        padding: var(--hero-tag-padding-tablet);
    }

    .hero-card__tags {
        gap: var(--hero-tag-gap-tablet);
    }

    .section-features {
        padding: var(--features-padding-tablet);
    }

    .section-features__row {
        gap: var(--features-gap-tablet);
        min-height: var(--features-height-tablet);
    }

    .feature-card {
        min-height: var(--features-height-tablet);
        padding: var(--feature-card-padding-tablet);
        gap: var(--feature-card-gap-tablet);
    }

    .feature-card__icon {
        width: var(--feature-icon-size-tablet);
        height: var(--feature-icon-size-tablet);
    }

    .feature-card__title {
        font-size: var(--feature-title-size-tablet);
    }

    .layout-footer {
        padding: var(--footer-padding-tablet);
    }

    .layout-footer__text {
        font-size: var(--footer-text-size-tablet);
    }
}


    .nav-button__icon--mobile-menu {
        mask-image: url(../img/icon/menu.svg);
    }

/* ==========================================================================
   Mobile (до 767px) — Pixel-Perfect
   ========================================================================== */
@media (max-width: 768px) {
    :root {
        --header-padding-mobile: 8px 4px;
        --header-gap-mobile: 8px;
        --header-height-mobile: 56px;
        --header-width-mobile: 100%;

        --logo-width-mobile: auto;
        --logo-padding-mobile: 0 12px;
        --logo-gap-mobile: 6px;
        --logo-icon-size-mobile: 28px;
        --logo-title-size-mobile: 16px;
        --logo-subtitle-size-mobile: 0px;
        --icon-size-mobile: 24px;

        --search-padding-mobile: 8px 12px;
        --search-gap-mobile: 8px;
        --search-icon-size-mobile: 28px;
        --search-font-size-mobile: 14px;

        --button-padding-mobile: 8px 14px;
        --button-gap-mobile: 8px;
        --button-font-size-mobile: 14px;
        --button-font-size-bold-mobile: 16px;
    }

    .container {
        max-width: var(--header-width-mobile);
        /*padding-left: 12px;
        padding-right: 12px;*/
    }

    .layout-header {
        /*height: var(--header-height-mobile);*/
        height: auto;
    }

    .layout-header__col-mobile .nav-button {}

    .layout-header__row {
        gap: var(--header-gap-mobile);
        padding: var(--header-padding-mobile);
        flex-wrap: wrap;
    }

    .layout-header__col--logo {
        flex: 0 0 auto;
        width: var(--logo-width-mobile);
    }

    .layout-header__col--search {
        flex: 1 1 auto;
        order: 3;
        width: 100%;
        margin-top: 8px;
    }

    .layout-header__col--account,
    .layout-header__col--figma,
    .layout-header__col--pro,
    .layout-header__col--menu {
        flex: 0 0 auto;
    }

    .layout-header__col--filter-mobile {
        display: flex;
    }

    .header-filter-btn {
        width: 48px;
        height: 48px;
    }

    .logo {
        gap: var(--logo-gap-mobile);
        padding: var(--logo-padding-mobile);
    }

    .logo__icon {
        width: var(--logo-icon-size-mobile);
        height: var(--logo-icon-size-mobile);
    }

    .logo__title {
        font-size: var(--logo-title-size-mobile);
        line-height: 24px;
    }

    .logo__subtitle {
        display: none;
    }

    .header-search {
        gap: var(--search-gap-mobile);
        padding: var(--search-padding-mobile);

    }

    .header-search__icon {
        width: var(--search-icon-size-mobile);
        height: var(--search-icon-size-mobile);
    }

    .header-search__input {
        font-size: var(--search-font-size-mobile);
    }

    .nav-button {
        gap: var(--button-gap-mobile);
        padding: var(--button-padding-mobile);
        font-size: var(--button-font-size-mobile);
		background: none;
    }
    .nav-button:hover,.nav-button.open {
        background: #EBF4F2;
    }

    .nav-button--primary {
        font-size: var(--button-font-size-bold-mobile);
    }

    .nav-button__icon--user {
        width: 24px;
        height: 24px;
    }

    .nav-button__icon--figma {
        width: 18px;
        height: 24px;
    }

    .layout-main {
        padding-top: calc(var(--header-height-mobile));
    }




    .layout-header__col-mobile {
        display: flex;
        align-items: center;
        margin-left: auto;
        justify-content: flex-end;
    }

    /* чтобы иконки не растягивали колонки */
    .layout-header__col--mobile-search,
    .layout-header__col--mobile-account,
    .layout-header__col--mobile-menu {
        justify-content: flex-end;
    }

    .nav-button--secondary {
        background: none;
    }





    .layout-header__col--account,
    .layout-header__col--figma,
    .layout-header__col--pro,
    .layout-header__col--search,
    .layout-header__col--menu {
        display: none;
    }

    .layout-header__col--search.is-open {
        display: flex;
        background: #ffffff;
        padding: 12px;
        margin: 0;

        position: absolute;
        top: 56px;
        left: 0;
        right: auto;

        /* ключевое: ширина = ширина самой колонки */
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;

        box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.12);
        z-index: 10;

    }

    .nav-button__icon {
        width: var(--icon-size-mobile);
        height: var(--icon-size-mobile);
    }

    .nav-button__icon--mobile-search {
        mask-image: url(../img/icon/search.svg);
    }





    /* Hero Section Mobile */
    :root {
        --hero-padding-mobile: 18px;
        --hero-gap-mobile: 12px;
        --hero-height-mobile: auto;
        --hero-card-padding-mobile: 36px;
        --hero-card-gap-mobile: 12px;
        --hero-title-size-mobile: 36px;
        --hero-tag-padding-mobile: 8px 12px;
        --hero-tag-gap-mobile: 8px;

        --features-padding-mobile: 0px 18px 24px;
        --features-gap-mobile: 12px;
        --features-height-mobile: auto;
        --feature-card-padding-mobile: 18px;
        --feature-card-gap-mobile: 12px;
        --feature-icon-size-mobile: 48px;
        --feature-title-size-mobile: 18px;

        --footer-padding-mobile: 18px 16px;
        --footer-height-mobile: auto;
        --footer-text-size-mobile: 14px;
        --footer-text-lh-mobile: 1.2102272851126534em;
    }

    .section-hero {
        padding: var(--hero-padding-mobile);
    }

    .section-hero__row {
        flex-direction: column;
        gap: var(--hero-gap-mobile);
        min-height: var(--hero-height-mobile);
    }

    .hero-card {
        min-height: var(--hero-height-mobile);
    }

    .hero-card__content {
        padding: var(--hero-card-padding-mobile);
        gap: var(--hero-card-gap-mobile);
    }

    .hero-card__title {
        font-size: var(--hero-title-size-mobile);
    }

    .hero-card__tag {
        padding: var(--hero-tag-padding-mobile);
    }

    .hero-card__tags {
        gap: var(--hero-tag-gap-mobile);
    }

    .section-features {
        padding: var(--features-padding-mobile);
    }

    .section-features__row {
        flex-direction: column;
        gap: var(--features-gap-mobile);
        min-height: var(--features-height-mobile);
    }

    .feature-card {
        min-height: var(--features-height-mobile);
        padding: var(--feature-card-padding-mobile);
        gap: var(--feature-card-gap-mobile);
    }

    .feature-card__icon {
        width: var(--feature-icon-size-mobile);
        height: var(--feature-icon-size-mobile);
    }

    .feature-card__title {
        font-size: var(--feature-title-size-mobile);
    }

    .layout-footer {
        padding: var(--footer-padding-mobile);
    }

    .layout-footer__text {
        font-size: var(--footer-text-size-mobile);
        line-height: var(--footer-text-lh-mobile);
        text-align: center;
    }
}

/* ==========================================================================
   Products Page — Desktop (Pixel-Perfect)
   ========================================================================== */
:root {
    /* Products Page */
    --products-padding-desktop: 48px;
    --products-gap-desktop: 40px;
    --products-sidebar-width-desktop: 250px;

    /* Filters */
    --filters-group-gap-desktop: 24px;
    --filters-inner-gap-desktop: 16px;
    --filters-options-gap-desktop: 6px;
    --filter-title-padding-desktop: 0px 18px;
    --filter-title-gap-desktop: 10px;
    --filter-title-size-desktop: 18px;
    --filter-title-lh-desktop: 1.2102272245619032em;

    /* Filter Option */
    --filter-option-padding-desktop: 12px 18px;
    --filter-option-gap-desktop: 8px;
    --filter-option-radius-desktop: 8px;
    --filter-option-border-desktop: 1px solid #F2F2F2;
    --filter-option-bg-desktop: transparent;
    --filter-option-bg-active-desktop: #F2F2F2;
    --filter-option-label-size-desktop: 16px;
    --filter-option-label-lh-desktop: 1.2102272510528564em;
    --filter-option-count-size-desktop: 14px;
    --filter-option-count-lh-desktop: 1.2102272851126534em;
    --filter-option-count-color-desktop: #999999;
    --filter-option-icon-size-desktop: 20px;
    --filter-option-active-bg-desktop: linear-gradient(90deg, #D9F5F3 0%, #F2F2F2 100%), #F8FDFC;
    --filter-option-active-border-desktop: 1px solid #F8FDFC;
    --filter-option-active-color-desktop: #03BDD3;
    --filter-option-active-bg-alt-desktop: #F8FDFC;

    /* Products Grid */
    --products-grid-padding-desktop: 36px;
    --products-grid-gap-desktop: 24px;
    --products-grid-bg-desktop: #F7F7F7;
    --products-grid-title-size-desktop: 36px;
    --products-grid-title-lh-desktop: 1.2102272245619032em;
    --products-grid-header-gap-desktop: 24px;
    --products-grid-items-gap-desktop: 12px;
    --products-grid-share-size-desktop: 36px;

    /* Product Card */
    --product-card-padding-desktop: 36px;
    --product-card-gap-desktop: 10px;
    --product-card-radius-desktop: 8px;
    --product-card-shadow-desktop: 0px 4px 12px 0px rgba(153, 153, 153, 0.12);
    --product-card-selected-border-desktop: 2px solid;
    --product-card-selected-border-color-desktop: #03BDD3;
    --product-card-selected-shadow-desktop: 0px 4px 16px 0px rgba(63, 217, 197, 0.25);
    --product-card-badge-padding-desktop: 4px 8px;
    --product-card-badge-size-desktop: 12px;
    --product-card-badge-lh-desktop: 1.2102272245619032em;
    --product-card-badge-bg-desktop: #000000;
    --product-card-badge-color-desktop: #FFFFFF;
}

.layout-main--products {
    padding-top: var(--header-height-desktop);
}

.products-page__row {
    gap: var(--products-gap-desktop);
    padding: var(--products-padding-desktop);
    align-items: flex-start;
}

.products-page__sidebar {
    flex: 0 0 auto;
    width: var(--products-sidebar-width-desktop);
}

.products-page__content {
    flex: 1 1 auto;
    min-width: 0;
}

.products-filters {
    display: flex;
    flex-direction: column;
    gap: var(--filters-group-gap-desktop);
}

.products-filters__group {
    display: flex;
    flex-direction: column;
    gap: var(--filters-inner-gap-desktop);
}

.products-filters__title {
    margin: 0;
    padding: var(--filter-title-padding-desktop);
    font-size: var(--filter-title-size-desktop);
    font-weight: var(--font-weight-bold);
    line-height: var(--filter-title-lh-desktop);
    color: var(--color-text-main);
    display: flex;
    align-items: center;
    gap: var(--filter-title-gap-desktop);
}

.products-filters__options {
    display: flex;
    flex-direction: column;
    gap: var(--filters-options-gap-desktop);
}

.filter-option {
    display: flex;
    align-items: center;
    gap: var(--filter-option-gap-desktop);
    padding: var(--filter-option-padding-desktop);
    background: var(--filter-option-bg-desktop);
    border: var(--filter-option-border-desktop);
    border-radius: var(--filter-option-radius-desktop);
    font-size: var(--filter-option-label-size-desktop);
    font-weight: var(--font-weight-normal);
    line-height: var(--filter-option-label-lh-desktop);
    color: var(--color-text-main);
    cursor: pointer;
    width: 100%;
    text-align: left;
}

.filter-option:hover:not(.filter-option--active) {
    background: var(--filter-option-bg-active-desktop);
    color: var(--filter-option-active-color-desktop);
}

.filter-option:hover:not(.filter-option--active) .filter-option__icon {
    background: #ffffff;
}

.filter-option__input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.filter-option__icon {
    width: var(--filter-option-icon-size-desktop);
    height: var(--filter-option-icon-size-desktop);
    border: 1px solid #CDCDCD;
    border-radius: 4px;
    flex-shrink: 0;

    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.filter-option--active .filter-option__icon::after {
    content: "";
    width: 70%;
    /* чтобы галочка была чуть меньше квадрата */
    height: 70%;
    background: url("../img/icon/check.svg") no-repeat center center / contain;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.filter-option__label {
    flex: 1 1 auto;
}

.filter-option__count {
    font-size: var(--filter-option-count-size-desktop);
    line-height: var(--filter-option-count-lh-desktop);
    color: var(--filter-option-count-color-desktop);
}

.filter-option__check {
    width: 13px;
    height: 8px;
    flex-shrink: 0;
    display: none;
}

.filter-option--active {
    background: var(--filter-option-active-bg-desktop);
    border: var(--filter-option-active-border-desktop);
    color: var(--filter-option-active-color-desktop);
    font-weight: var(--font-weight-bold);
}

.filter-option--active .filter-option__icon {
    border-color: var(--filter-option-active-color-desktop);
}

.filter-option--selected .filter-option__check {
    display: block;
}

.filter-option--disabled {
    color: #cdcdcd;
}

.filter-option--disabled .filter-option__icon {
    border-color: #f2f2f2;
}
.filter-option--disabled .filter-option__count {
    display: none;
}

.products-grid {
    border-radius: var(--feature-radius-desktop);
    display: flex;
    flex-direction: column;
    gap: var(--products-grid-gap-desktop);
}

.products-grid__header {
    display: flex;
    align-items: center;
    gap: var(--products-grid-header-gap-desktop);
    padding: var(--products-grid-padding-desktop);
    background: var(--products-grid-bg-desktop);
    border-radius: 8px;
}

.products-grid__title {
    margin: 0;
    padding: 0;
    font-size: var(--products-grid-title-size-desktop);
    font-weight: var(--font-weight-bold);
    line-height: var(--products-grid-title-lh-desktop);
    color: var(--color-text-main);
    flex: 1 1 auto;
}

.products-grid__share {
    width: var(--products-grid-share-size-desktop);
    height: var(--products-grid-share-size-desktop);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
}

.products-grid__filter {
    display: none;
}

.products-grid__share-icon {
    display: block;
    width: 100%;
    height: 100%;
    background: #BFBFBF;
    mask: url("../img/icon/share.svg") center/contain no-repeat;
    flex-shrink: 0;
}
.products-page__more {
	display: flex;
	align-items: center;
	padding: 0px;
	gap: 12px;
	background: #F2F2F2;
	border: none;
	padding: 12px 18px;
	border-radius: 8px;
	cursor: pointer;
	font-weight: 400;
	font-size: 16px;
	line-height: 19px;
	color: #000000;
}
.products-page__more:hover {
	background: #E8E8E8;
}
.products-page__more-icon {
    display: block;
    width: 24px;
    height: 24px;
    background: #000000;
    mask: url("../img/icon/arrow-bottom.svg") center/contain no-repeat;
    flex-shrink: 0;
}
/* ==========================================================================
   Products  — Desktop (Pixel-Perfect)
   ========================================================================== */
.products-grid__items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(141px, 1fr));
    gap: var(--products-grid-items-gap-desktop);
}

/* Карточка: фиксируем поведение */
.product-card {
    padding: var(--product-card-padding-desktop);
    background: var(--color-surface);
    border-radius: var(--product-card-radius-desktop);
    box-shadow: var(--product-card-shadow-desktop);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--product-card-gap-desktop);
    position: relative;
    aspect-ratio: auto;
    cursor: pointer;
    transition:
        transform 0.18s ease-out,
        box-shadow 0.18s ease-out,
        background-color 0.18s ease-out,
        border-color 0.18s ease-out;
	border: 2px solid transparent;
}

/* лёгкий подъём и усиление тени */
.product-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
	border: 2px solid #03BDD3;
    /* ВАЖНО: убираем изменения padding, чтобы ряд не прыгал */
    /* padding-top: 24px;  — удалить */
}

/* состояние выбранной карточки */
.product-card--selected {
    border: 2px solid;
    /*border-image: linear-gradient(to bottom, #D9F5F3, #03BDD3) 1;*/
    border: 2px solid #03BDD3;
    box-shadow: var(--product-card-selected-shadow-desktop);
    outline: none;
}

/* ховер по выбранной — чуть сильнее эффект */
.product-card--selected:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.16);
}

/* Иконка */
.product-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    background: var(--card-icon-preview) no-repeat center;
    background-size: contain;
    position: relative;
    transition: transform 0.18s ease-out;
}

/* Кнопки действий */
.product-action-btn__text,
.product-url-btn__text {
    transition: opacity .2s ease, transform .2s ease;
}

.is-success {
    opacity: .85;
    transform: translateY(-1px);
}

/* лёгкий zoom иконки при ховере карточки */
.product-card:hover .product-card__icon {
    transform: scale(1.06);
}

/* Бейдж PRO */
.product-card__badge {
	display: none;
    position: absolute;
    top: -2px;
    right: -2px;
    padding: var(--product-card-badge-padding-desktop);
    background: #5FE7BE;
    color: var(--product-card-badge-color-desktop);
    font-size: var(--product-card-badge-size-desktop);
    font-weight: var(--font-weight-bold);
    line-height: var(--product-card-badge-lh-desktop);
    border-radius: 0px 8px;
}
.product-card.pro .product-card__badge {
    background: var(--product-card-badge-bg-desktop);
}
.product-card:hover .product-card__badge {
	display: block;
}

/* Плашка "Click to copy SVG" */
.product-card__info {
    position: absolute;
    left: 11px;
    right: 11px;
    bottom: 11px;
    padding: 6px 6px;

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;

    border-radius: 4px;
    background: #F2F2F2;
    color: #698293;
    font-size: 12px;
    font-weight: var(--font-weight-normal);

    cursor: pointer;
    opacity: 0;
    transform: translateY(4px);
    pointer-events: none;
    z-index: 1;

    transition:
        opacity 0.18s ease-out,
        transform 0.18s ease-out;
}


.product-card:hover .product-card__info {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* === Success animation for product-card__info === */
.product-card__info.is-success {
    background: linear-gradient(90deg,
            #D9F5F3 0%,
            #F2F2F2 50%,
            #D9F5F3 100%);
    background-size: 200% 100%;
    animation: info-gradient-move 1.2s ease-in-out;
}

/* Анимация перелива слева направо */
@keyframes info-gradient-move {
    from {
        background-position: 0% 50%;
    }

    to {
        background-position: 100% 50%;
    }
}



.product-card:hover .product-card__icon {
    transform: translateY(-12px) scale(1.00);
}



/* ==========================================================================
   Filter — Desktop (Pixel-Perfect)
   ========================================================================== */
/* Filter Modal (Mobile) */
.filter-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
}

.filter-modal[aria-hidden="false"] {
    display: flex;
    flex-direction: column;
}

.filter-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}

.filter-modal__content {
    position: relative;
    width: 100%;
    height: 100%;
    background: var(--color-surface);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.filter-modal__header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 24px;
    background: var(--color-header-bg);
    box-shadow: var(--shadow-header-desktop);
    flex-shrink: 0;
}

.filter-modal__icon {
    width: 32px;
    height: 32px;
    background: #ABBDCA;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 6h18M3 12h18M3 18h18' stroke='currentColor' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat;
    flex-shrink: 0;
}

.filter-modal__title {
    margin: 0;
    padding: 0;
    font-size: 24px;
    font-weight: var(--font-weight-bold);
    line-height: 1.2102272510528564em;
    color: var(--color-text-main);
    flex: 1 1 auto;
}

.filter-modal__close {
    width: 24px;
    height: 24px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
}

.filter-modal__close-icon {
    width: 100%;
    height: 100%;
    background: #03BDD3;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 6L6 18M6 6l12 12' stroke='currentColor' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat;
}

.filter-modal__body {
    padding: 18px;
    flex: 1 1 auto;
    overflow-y: auto;
}

.product-filters__header {
    display: none;
}

.products-grid__share.is-success .products-grid__share-icon {
    background: #23cccb;
    mask: url(../img/icon/check.svg) center / contain no-repeat;
}

/* ==========================================================================
   Products Page — Tablet (768px - 1199px)
   ========================================================================== */
@media (min-width: 769px) and (max-width: 1200px) {
    :root {
        --products-padding-tablet: 48px;
        --products-gap-tablet: 40px;
        --products-sidebar-width-tablet: 250px;
    }

    .products-page__row {
        gap: var(--products-gap-tablet);
        padding: var(--products-padding-tablet);
    }

    .products-page__sidebar {
        width: var(--products-sidebar-width-tablet);
    }
}


/* ==========================================================================
   Products Page — Mobile (до 767px)
   ========================================================================== */
@media (max-width: 768px) {
    :root {
        --products-padding-mobile: 18px;
        --products-gap-mobile: 8px;
        --products-grid-padding-mobile: 0;
        --products-grid-gap-mobile: 8px;
        --products-grid-items-gap-mobile: 4px;
        --product-card-padding-mobile: 18px;
        --product-card-gap-mobile: 10px;
        --filter-modal-header-padding-mobile: 12px 24px;
        --filter-modal-header-gap-mobile: 16px;
        --filter-modal-body-padding-mobile: 18px;
        --filter-modal-title-size-mobile: 24px;
    }

    .layout-main--products {
        padding-top: var(--header-height-mobile);
    }

    .layout-header {
        position: sticky;
        /* вместо fixed */
        top: 0;
        left: auto;
        right: auto;
        height: auto;
    }

    /* Раз header теперь в потоке — отступ сверху не нужен */
    .layout-main {
        padding-top: 0;
        /* переопределяем твой padding-top: calc(var(--header-height-mobile)) */
    }

    /* Если нужно: чтобы под main не было горизонтального скролла */
    .layout-main--products {
        min-width: 0;
    }

    .products-page__row {
        flex-direction: row;
        gap: var(--products-gap-mobile);
        padding: 0;
    }

    .products-page__sidebar {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100dvh;
        background: var(--color-surface);
        z-index: 1000;

        display: flex;
        flex-direction: column;
        overflow: hidden;

        transform: translateX(-100%);
        transition: transform .3s ease;
    }

    .products-page__sidebar.is-open {
        transform: translateX(0);
    }

    .no-scroll {
        overflow: hidden;
    }

    .products-grid {
        padding: var(--products-grid-padding-mobile);
        gap: var(--products-grid-gap-mobile);
        background: transparent;
    }

    .products-grid__header {
        flex-direction: row;
        align-items: center;
        min-height: 48px;
        box-sizing: border-box;
        gap: 12px;
        padding: 4px;
        background: linear-gradient(0deg, #F7F7F7 0%, #F7F7F7 100%), linear-gradient(90deg, #D9F5F3 0%, #F2F2F2 100%), #F8FDFC;
        border-radius: 0;
        box-shadow: 0 4px 18px 0 rgba(141, 160, 173, 0.20);
        ;
    }

    .products-grid__title {
        font-size: 16px;
        text-align: center;
        flex: 1 1 auto;
    }

    .products-grid__share {
        width: initial;
        height: initial;
        padding: 8px 14px;
    }

    .products-grid__share-icon {
        width: 24px;
        height: 24px;
    }

    .products-grid__filter {
        display: block;
        background: none;
        border: none;
        padding: 8px 14px;
        cursor: pointer;
        flex-shrink: 0;
    }

    .products-grid__filter-icon {
        display: block;
        width: 24px;
        height: 24px;
        background: #BFBFBF;
        mask: url(../img/icon/filter.svg) center / contain no-repeat;
        flex-shrink: 0;
    }


    .products-grid__items {
        gap: var(--products-grid-items-gap-mobile);
        padding: var(--products-padding-mobile);
        grid-template-columns: repeat(auto-fill, minmax(75px, 1fr));
    }

    .product-card {
        padding: var(--product-card-padding-mobile);
        gap: var(--product-card-gap-mobile);
    }

    .product-card--selected {
        padding: 18px;
    }

    .product-card__badge {
        padding: 3px 6px;
        font-size: 9px;
    }

    .product-card__info {
        display: none;
    }

    .product-card:hover .product-card__info {
        opacity: 0;
    }

    .product-card:hover .product-card__icon {
        transform: translateY(0px) scale(1.06);
    }

    .product-filters__header {
        display: flex;
        box-sizing: border-box;
        align-items: center;
        padding: 12px 24px;
        gap: 16px;
        height: 90px;
        background: #F8FDFC;
        box-shadow: 0 4px 18px 0 rgba(141, 160, 173, 0.15);
        flex-shrink: 0;
        flex: 0 0 auto;
    }

    /* Левая и правая зоны — одинаковые */
    .products-filters__side {
        display: flex;
        justify-content: center;
        flex-shrink: 0;
    }

    /* Центр */
    .products-filters__header-title {
        flex: 1;
        font-size: 24px;
        font-weight: var(--font-weight-bold);
        color: var(--color-text-main);
    }

    .products-filters__side button {
        background: none;
        border: none;
        padding: 0;
        cursor: pointer;
        flex-shrink: 0;

    }

    .products-filters__icon {
        background: #ABBDCA;
        display: block;
    }

    .icon-filter {
        width: 32px;
        height: 32px;
        -webkit-mask: url("../img/icon/filter.svg") center / contain no-repeat;
        mask: url("../img/icon/filter.svg") center / contain no-repeat;
    }

    .icon-close {
        width: 24px;
        height: 24px;
        -webkit-mask: url("../img/icon/close.svg") center / contain no-repeat;
        mask: url("../img/icon/close.svg") center / contain no-repeat;
    }

    .products-filters {
        padding: 18px;
        flex: 1 1 auto;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .filter-modal__header {
        padding: var(--filter-modal-header-padding-mobile);
        gap: var(--filter-modal-header-gap-mobile);
    }

    .filter-modal__title {
        font-size: var(--filter-modal-title-size-mobile);
    }

    .filter-modal__body {
        padding: var(--filter-modal-body-padding-mobile);
    }

    .filter-option:hover:not(.filter-option--active) {
        background: var(--filter-option-bg-desktop);
        color: var(--color-text-main);
    }


    /* ключевые строки: min-height:0 + flex:1 + overflow */
    .products-page__sidebar .products-filters {
        flex: 1 1 auto;
        min-height: 0;
        /* ВОТ ЭТО решает “скролл не работает” */
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* если вдруг скролл всё равно не появляется из-за 100vh/адресной строки */
    .products-page__sidebar .products-filters {
        max-height: calc(100dvh - 90px);
        /* 90px = твой header фильтра */
    }
	
    .products-page__more-wrap {
		display: flex;
		align-content: center;
		justify-content: center;
		margin-bottom: 25px;
    }
}

/* ==========================================================================
   Product Page — Desktop (Pixel-Perfect)
   ========================================================================== */
:root {
    /* Product Page */
    --product-page-overlay-bg-desktop: rgba(217, 217, 217, 0.5);
    --product-panel-width-desktop: 360px;
    --product-panel-height-desktop: 1456px;
    --product-panel-position-right-desktop: 0px;
    --product-panel-shadow-desktop: 0px 4px 12px 0px rgba(153, 153, 153, 0.12);

    /* Product Panel Header */
    --product-panel-header-height-desktop: 90px;
    --product-panel-header-padding-desktop: 12px 24px;
    --product-panel-header-gap-desktop: 12px;
    --product-panel-title-size-desktop: 24px;
    --product-panel-title-lh-desktop: 1.2102272510528564em;
    --product-panel-close-size-desktop: 24px;

    /* Product Panel Content */
    --product-panel-content-padding-desktop: 24px;
    --product-panel-content-gap-desktop: 24px;
    --product-panel-section-gap-desktop: 18px;

    /* Product Icon */
    --product-icon-height-desktop: 240px;
    --product-icon-padding-desktop: 36px;
    --product-icon-gap-desktop: 10px;

    /* Product Actions */
    --product-actions-padding-desktop: 12px;
    --product-actions-gap-desktop: 10px;
    --product-actions-label-size-desktop: 24px;
    --product-actions-label-lh-desktop: 1.2102272510528564em;
    --product-actions-buttons-gap-desktop: 8px;
    --product-action-btn-padding-desktop: 12px 18px;
    --product-action-btn-gap-desktop: 10px;
    --product-action-btn-radius-desktop: 8px;
    --product-action-btn-bg-desktop: #03BDD3;
    --product-action-btn-size-desktop: 16px;
    --product-action-btn-lh-desktop: 1.2102272510528564em;

    /* Product Badge */
    --product-badge-padding-desktop: 6px 12px;
    --product-badge-gap-desktop: 10px;
    --product-badge-size-desktop: 16px;
    --product-badge-lh-desktop: 1.2102272510528564em;
    --product-badge-bg-desktop: #000000;
    --product-badge-color-desktop: #FFFFFF;
    --product-badge-radius-desktop: 0px 8px 0px 8px;

    /* Product Tags */
    --product-tag-padding-desktop: 8px 12px;
    --product-tag-gap-desktop: 8px;
    --product-tag-radius-desktop: 4px;
    --product-tag-bg-desktop: #F2F2F2;
    --product-tag-size-desktop: 16px;
    --product-tag-lh-desktop: 1.2102272510528564em;

    /* Product Subtitle */
    --product-subtitle-size-desktop: 18px;
    --product-subtitle-lh-desktop: 1.2102272245619032em;

    /* Product URL Button */
    --product-url-btn-padding-desktop: 12px 18px;
    --product-url-btn-gap-desktop: 10px;
    --product-url-btn-radius-desktop: 8px;
    --product-url-btn-border-desktop: 1px solid #D9D9D9;
    --product-url-btn-bg-desktop: #F2F2F2;
    --product-url-btn-size-desktop: 16px;
    --product-url-btn-lh-desktop: 1.2102272510528564em;
}

body.no-scroll .layout-main--products,
.product .layout-main--products {
    position: fixed;
    inset: 0 0 0 0;
}

body.no-scroll .layout-header,
body.no-scroll .layout-main--products,
.product .layout-header,
.product .layout-main--products {
    right: 15px;
}

.layout-main--product {
    display: none;
    padding-top: var(--header-height-desktop);
    position: relative;
    min-height: calc(100vh - var(--header-height-desktop));
    position: fixed;
    inset: 0 0 0 0;
    z-index: 200;
}

.product .layout-main--product {
    display: block;
}

.product-page {
    position: relative;
    width: 100%;
    min-height: 100vh;
}

.product-page__overlay {
    position: fixed;
    inset: 0 0 0 0;
    background: var(--product-page-overlay-bg-desktop);
    z-index: 150;
}

.product-page__panel {
    position: fixed;
    top: 0;
    right: var(--product-panel-position-right-desktop);
    width: var(--product-panel-width-desktop);
    height: var(--product-panel-height-desktop);
    background: var(--color-surface);
    box-shadow: var(--product-panel-shadow-desktop);
    z-index: 200;
    overflow-y: auto;
}

.product-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.product-panel__header {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    gap: var(--product-panel-header-gap-desktop);
    padding: var(--product-panel-header-padding-desktop);
    background: var(--color-header-bg);
    box-shadow: var(--shadow-header-desktop);
    flex-shrink: 0;
    height: var(--product-panel-header-height-desktop);
}

.product-panel__title {
    margin: 0;
    padding: 0;
    font-size: var(--product-panel-title-size-desktop);
    font-weight: var(--font-weight-bold);
    line-height: var(--product-panel-title-lh-desktop);
    color: var(--color-text-main);
    flex: 1 1 auto;
}

.product-panel__close {
    width: var(--product-panel-close-size-desktop);
    height: var(--product-panel-close-size-desktop);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
}

.product-panel__close-icon {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--color-text-main);
    mask: url("../img/icon/close.svg") center/contain no-repeat;
}

.product-panel__content {
    padding: var(--product-panel-content-padding-desktop);
    display: flex;
    flex-direction: column;
    gap: var(--product-panel-content-gap-desktop);
    flex: 1 1 auto;
}

.product-panel__section {
    display: flex;
    flex-direction: column;
    gap: var(--product-panel-section-gap-desktop);
}

.product-icon {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    height: var(--product-icon-height-desktop);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--product-icon-padding-desktop);
    background: var(--color-surface);
    border-radius: var(--feature-radius-desktop);
    box-shadow: var(--product-card-shadow-desktop);
    gap: var(--product-icon-gap-desktop);
}

.product-icon__preview {
    width: 120px;
    height: 120px;
    background: transparent;
    background: var(--bg-icon-preview) no-repeat center;
    background-size: contain;
}

.product-actions {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: var(--product-actions-gap-desktop);
    padding: var(--product-actions-padding-desktop);
    background: linear-gradient(90deg, rgba(242, 242, 242, 1) 0%, rgba(217, 245, 243, 1) 100%),
        var(--color-surface);
    border-radius: var(--feature-radius-desktop);
}

.product-actions__label {
    font-size: var(--product-actions-label-size-desktop);
    font-weight: var(--font-weight-bold);
    line-height: var(--product-actions-label-lh-desktop);
    color: var(--color-text-main);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
}

.product-actions__buttons {
    display: flex;
    flex-direction: column;
    gap: var(--product-actions-buttons-gap-desktop);
    width: 170px;
}

.product-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--product-action-btn-gap-desktop);
    padding: var(--product-action-btn-padding-desktop);
    background: var(--product-action-btn-bg-desktop);
    border: none;
    border-radius: var(--product-action-btn-radius-desktop);
    font-size: var(--product-action-btn-size-desktop);
    font-weight: var(--font-weight-bold);
    line-height: var(--product-action-btn-lh-desktop);
    color: var(--color-surface);
    cursor: pointer;
    width: 100%;
}
.product-action-btn:hover {
    background: #3FD9C5;
}

.product-badge {
    position: absolute;
    top: 0;
    right: 0;
    padding: var(--product-badge-padding-desktop);
    background: var(--product-badge-bg-desktop);
    color: var(--product-badge-color-desktop);
    font-size: var(--product-badge-size-desktop);
    font-weight: var(--font-weight-bold);
    line-height: var(--product-badge-lh-desktop);
    border-radius: var(--product-badge-radius-desktop);
}

.product-panel__subtitle {
    margin: 0;
    padding: 0;
    font-size: var(--product-subtitle-size-desktop);
    font-weight: var(--font-weight-bold);
    line-height: var(--product-subtitle-lh-desktop);
    color: var(--color-text-main);
}

.product-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--product-tag-gap-desktop);
}

.product-tag {
    padding: var(--product-tag-padding-desktop);
    background: var(--product-tag-bg-desktop);
    border-radius: var(--product-tag-radius-desktop);
    font-size: var(--product-tag-size-desktop);
    font-weight: var(--font-weight-normal);
    line-height: var(--product-tag-lh-desktop);
    color: var(--color-text-main);
    white-space: nowrap;
}
.product-tag:hover {
    background: #D9F5F3;
	text-decoration: none;
}

.product-url-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--product-url-btn-gap-desktop);
    padding: var(--product-url-btn-padding-desktop);
    width: 100%;
    background: #ffffff;
    border: var(--product-url-btn-border-desktop);
    border-radius: var(--product-url-btn-radius-desktop);
    font-size: var(--product-url-btn-size-desktop);
    font-weight: var(--font-weight-bold);
    line-height: var(--product-url-btn-lh-desktop);
    color: var(--color-text-main);
    cursor: pointer;
}
.product-url-btn:hover {
    background: #F2F2F2;
    border: 1px solid #F2F2F2;
}

/* ==========================================================================
   Product Page — Tablet (768px - 1199px)
   ========================================================================== */
@media (min-width: 769px) and (max-width: 1200px) {
    :root {
        --product-panel-width-tablet: 360px;
        --product-panel-height-tablet: 1456px;
    }

    .product-page__panel {
        width: var(--product-panel-width-tablet);
        height: var(--product-panel-height-tablet);
    }
}

/* ==========================================================================
   Product Page — Mobile (до 767px)
   ========================================================================== */
@media (max-width: 768px) {
    :root {
        --product-panel-width-mobile: 100%;
        --product-panel-height-mobile: calc(100vh - var(--header-height-mobile));
        --product-panel-content-padding-mobile: 18px;
        --product-panel-content-gap-mobile: 24px;
    }

    .layout-main--product {
        padding-top: 0;
    }

    .product-page__overlay {
        inset: var(--header-height-mobile) 0 0 0;
    }

    .product-page__panel {
        top: 0;
        right: 0;
        left: 0;
        width: var(--product-panel-width-mobile);
        height: 100vh;
    }

    .product-panel__content {
        padding: var(--product-panel-content-padding-mobile);
        gap: var(--product-panel-content-gap-mobile);
    }
	body.no-scroll .layout-main--products, .product .layout-main--products {
		position: initial;
	}
}


/* ========================================================================== 
    Account Modal — Desktop (Pixel-Perfect) 
    ========================================================================== */

:root {
    /* Account Modal */
    --account-page-overlay-bg-desktop: rgba(217, 217, 217, 0.5);
    --account-panel-width-desktop: 360px;
    --account-panel-header-height-desktop: 90px;
    --account-panel-content-padding-desktop: 24px;
    --account-panel-gap-desktop: 18px;
    --account-input-height-desktop: 56px;
}

.account-page {
    display: none;
}

.account-page.is-open {
    display: block;
}

.account-page__overlay {
    position: fixed;
    inset: 0 0 0 0;
    background: var(--account-page-overlay-bg-desktop);
    z-index: 150;
}

.account-page__panel {
    position: fixed;
    top: 0;
    right: 0;
    width: var(--account-panel-width-desktop);
    height: 100dvh;
    background: var(--color-surface);
    box-shadow: var(--product-panel-shadow-desktop);
    z-index: 200;
    overflow-y: auto;
}

.account-panel {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.account-panel__header {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    gap: var(--product-panel-header-gap-desktop);
    padding: var(--product-panel-header-padding-desktop);
    background: var(--color-header-bg);
    box-shadow: var(--shadow-header-desktop);
    flex-shrink: 0;
    height: var(--product-panel-header-height-desktop);
}

.account-panel__title {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    margin: 0;
    padding: 0;
    font-size: var(--product-panel-title-size-desktop);
    font-weight: var(--font-weight-bold);
    line-height: var(--product-panel-title-lh-desktop);
    color: var(--color-text-main);
    flex: 1 1 auto;
}

.account-panel__icon {
    display: block;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    background: #ABBDCA;
    mask: url(../img/icon/user.svg) center / contain no-repeat;
}

.account-panel__close {
    width: var(--product-panel-close-size-desktop);
    height: var(--product-panel-close-size-desktop);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
}

.account-panel__close-icon {
    display: block;
    width: 100%;
    height: 100%;
    background: #ABBDCA;
    ;
    mask: url(../img/icon/close.svg) center / contain no-repeat;
}

.account-form-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0px;
    gap: 18px;

    font-weight: 600;
    font-size: 24px;

    color: #000000;
}

.account-panel__content {
    padding: var(--account-panel-content-padding-desktop);
    display: flex;
    flex-direction: column;
    gap: var(--account-panel-gap-desktop);
    flex-grow: 1;
}

.account-view {
    display: none;
    flex-direction: column;
    gap: 24px;
}

.account-page[data-view="login"] .account-view--login,
.account-page[data-view="signup"] .account-view--signup,
.account-page[data-view="recover"] .account-view--recover,
.account-page[data-view="recover-code"] .account-view--recover-code,
.account-page[data-view="account"] .account-view--account {
    display: flex;
}

.account-form,
.account-form-button {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.account-form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.account-label {
    font-size: 14px;
    color: var(--color-text-muted);
}

.account-input {
    height: var(--account-input-height-desktop);
    padding: 0 16px;
    border: 2px solid var(--color-border-soft);
    border-radius: 8px;
    background: var(--color-surface);
    font-size: 16px;
    line-height: 1.2;
    color: var(--color-text-main);
}

.account-input:focus {
    border-color: #03BDD3;
    outline: none;
}

.account-input::placeholder {
    color: var(--color-text-muted);
}

.account-input--error {
    border-color: #E53935;
}

.account-error {
    font-size: 12px;
    color: #E53935;
    line-height: 1.2;
}

.account-btn {
    height: var(--account-input-height-desktop);
    border-radius: 8px;
    font-size: 16px;
    font-weight: var(--font-weight-bold);
    line-height: 1.2;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    border: none;
}

.account-btn--primary {
    background: #03BDD3;
    color: var(--color-text-white);
}

.account-btn--primary.account-pro-action {
    background: #0ACF83;
    color: var(--color-text-white);
	text-decoration: none;
}

.account-btn--secondary {
    background: var(--color-surface);
    border: 1px solid #D9D9D9;
    color: var(--color-text-main);
}

.account-btn.account-btn--secondary:hover {
    background: #F4F4F4;
    border: 1px solid #F4F4F4;
}

.account-btn--back {
    flex-direction: row;
    gap: 8px;
}

.account-btn__icon--back {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-left: 2px solid var(--color-text-main);
    border-bottom: 2px solid var(--color-text-main);
    transform: rotate(45deg);
    margin-right: 4px;
}

.account-link {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    color: var(--gradient-black);
    font-size: 16px;
    font-weight: var(--font-weight-bold);
    cursor: pointer;
}

.account-link--small {
    font-size: 14px;
    font-weight: var(--font-weight-normal);
    color: var(--color-text-muted);
    text-decoration: underline;
    align-self: flex-start;
    padding-top: 4px;
}


.account-switch .account-link {
    font-size: 16px;
    color: #03BDD3;
    margin-left: 4px;
}

.account-user-email {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 12px;
    gap: 12px;
    background: linear-gradient(90deg, #F2F2F2 0%, #D9F5F3 100%), #FFFFFF;
    border-radius: 8px;
    font-weight: 400;
    font-size: 18px;
    line-height: 22px;
    color: #000000;
    overflow: hidden;
}

.account-pro-block {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 8px;
    background: linear-gradient(90deg, #F2F2F2 0%, #D9F5F3 100%), #FFFFFF;
}

.account-pro-title {
    font-size: 24px;
    font-weight: 600;
    color: #000000;
}

.account-pro-subtitle {
    font-size: 18px;
    font-weight: 400;
    color: #000000;
}

.account-pro-status {
    font-weight: 600;
    font-size: 24px;
    line-height: 48px;
    color: #ABBDCA;
}

.account-page[data-pro="1"] .account-pro-action {
    display: none;
}

.account-page[data-pro="1"] .account-pro-status::after {
    content: 'Activated';
    color: #0ACF83;
}

.account-page[data-pro="0"] .account-pro-status::after {
    content: 'Not activated';
    color: var(--color-text-muted);
}

.account-logout {
    margin-top: auto;
}

.account-password-change[hidden] {
	display: none;
}

/* ==========================================================================
   Menu Modal — Desktop (Pixel-Perfect)
   ========================================================================== */
.menu-page {
	display: none;
}

.menu-page.is-open {
	display: block;
}

.menu-page__overlay {
	position: fixed;
	inset: 0;
	background: var(--account-page-overlay-bg-desktop, rgba(217, 217, 217, 0.5));
	z-index: 150;
}

.menu-page__panel {
	position: fixed;
	top: 0;
	right: 0;
	width: var(--account-panel-width-desktop, 360px);
	height: 100dvh;
	background: var(--color-surface);
	box-shadow: var(--product-panel-shadow-desktop, 0px 4px 12px rgba(153, 153, 153, 0.12));
	z-index: 200;
	overflow-y: auto;
}

.menu-panel {
	display: flex;
	flex-direction: column;
	min-height: 100%;
}

.menu-panel__header {
	display: flex;
	align-items: center;
	box-sizing: border-box;
	gap: var(--product-panel-header-gap-desktop, 12px);
	padding: var(--product-panel-header-padding-desktop, 12px 24px);
	background: var(--color-header-bg);
	box-shadow: var(--shadow-header-desktop);
	flex-shrink: 0;
	height: var(--product-panel-header-height-desktop, 90px);
}

.menu-panel__title {
	margin: 0;
	padding: 0;
	font-size: var(--product-panel-title-size-desktop, 24px);
	font-weight: var(--font-weight-bold, 600);
	line-height: var(--product-panel-title-lh-desktop, 1.21);
	color: var(--color-text-main);
	flex: 1 1 auto;
}

.menu-panel__close {
	width: var(--product-panel-close-size-desktop, 24px);
	height: var(--product-panel-close-size-desktop, 24px);
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	flex-shrink: 0;
}

.menu-panel__close-icon {
	display: block;
	width: 100%;
	height: 100%;
	background: #ABBDCA;
	mask: url("../img/icon/close.svg") center / contain no-repeat;
}

.menu-panel__content {
	padding: 24px;
	flex: 1 1 auto;
}

.menu-nav {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.menu-link {
	display: flex;
	flex-direction: column;
	padding: 12px 18px;
	border-radius: 8px;
	text-decoration: none;
	color: var(--color-text-main);
	transition: background-color 0.2s ease;
}

.menu-link:hover,
.menu-link--active {
	background: #F2F2F2;
}

.menu-link__title {
	font-size: 18px;
	font-weight: var(--font-weight-bold, 600);
	line-height: 1.21;
	color: var(--color-text-main);
}

.menu-link__subtitle {
	font-size: 14px;
	font-weight: var(--font-weight-normal, 400);
	line-height: 1.21;
	color: var(--color-text-muted, #698293);
	margin-top: 4px;
}

/* Простые ссылки без подзаголовка */
.menu-link:not(:has(.menu-link__title)) {
	font-size: 18px;
	font-weight: var(--font-weight-bold, 600);
	line-height: 1.21;
	padding: 16px 18px;
}

/* ==========================================================================
   Menu Modal — Mobile (до 768px)
   ========================================================================== */
@media (max-width: 768px) {
	.menu-page__panel {
		width: 100%;
	}
	
	.menu-panel__content {
		padding: 18px;
	}
}

/* ==========================================================================
   Section Page — 404 Page Styles (Token-less)
   ========================================================================== */

.section-page {
  width: 100%;
}

/* ==========================================================================
   Terms & Content Pages
   ========================================================================== */
.section-page {
	margin-top: 90px;
}
.page-text {
    max-width: 1200px;
    margin: 0 auto;
    padding: 48px;
    
    min-height: calc(100vh - var(--header-height-desktop));
	box-sizing: border-box;
}

.page-title {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 36px;
	gap: 24px;

	background: #F7F7F7;
	border-radius: 8px;
    margin-bottom: 24px;
}

.page-title h1 {
    margin: 0;
    padding: 0;
    font-size: 48px;
    font-weight: var(--font-weight-logo-bold, 900);
    line-height: 1.1;
    color: var(--color-text-main, #000000);
}

/* Typography for content */
.page-body{
    padding: 1px 36px;
}
.page-body h2 {
    margin: 24px 0 18px 0;
    font-size: 24px;
    font-weight: var(--font-weight-bold, 600);
    line-height: 1;
    color: var(--color-text-main, #000000);
}



.page-body p {
    margin: 0 0 18px 0;
    font-size: 18px;
    line-height: 1.6;
    color: var(--color-text-main, #000000);
}

.page-body a {
    color: #03BDD3;
    text-decoration: underline;
    transition: opacity 0.2s;
}

.page-body a:hover {
    opacity: 0.8;
}

/* ==========================================================================
   Terms Page — Mobile
   ========================================================================== */
@media (max-width: 768px) {
	.section-page {
		margin-top: 0px;
	}
    .page-text {
        padding: 0;
        min-height: calc(100vh - var(--header-height-mobile));
    }
    
    .page-title {
        margin-bottom: 0;
		align-items: center;
		padding: 18px 0;
		box-shadow: 0px 4px 18px rgba(141, 160, 173, 0.15);
    }
    
    .page-title h1 {
        font-size: 16px;
    }
    
    .page-body {
        padding: 18px 18px 24px;
		display: flex;
		flex-direction: column;
		gap: 8px;
    }
    .page-body h2 {
        margin: 12px 0 8px 0;
		font-size: 18px;
		line-height: 22px;
    }
    
    .page-body p {
		font-size: 14px;
		line-height: 17px;
		margin: 0 0 8px 0;
    }
}
/* ==========================================================================
   404 Page Layout
   ========================================================================== */
.page-text--404 {
  background: linear-gradient(to right, #e0f7fa, #e8eaf6, #f3e5f5);
  min-height: calc(100vh - var(--header-height-desktop) - 60px);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.page-text.error {
	background: none;
	padding: 0;
}

@media (max-width: 768px) {
  .page-text--404 {
    padding: 0;
    min-height: calc(100vh - 56px - 70px);
    justify-content: flex-start;
  }
}

/* ==========================================================================
   Error Card (Top)
   ========================================================================== */
.page-text--404 .error-card {
  width: 100%;
  max-width: 800px;
  background: #FFFFFF;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  padding: 16px 32px;
  margin: 48px 0;
  flex-shrink: 0;
}

.page-text--404 .error-card h2 {
  background: none;
  padding: 0;
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  color: var(--color-text-main);
}

@media (max-width: 768px) {
  .page-text--404 .error-card {
    padding: 19px 0;
    width: 100%;
    margin: 0;
    text-align: center;
    border-radius: initial;
    box-shadow: none;
    background: #F7F7F7;
  }
  
  .page-text--404 .error-card h2 {
    font-size: 20px;
  }
}

/* ==========================================================================
   Error Text (Centered)
   ========================================================================== */
.page-text--404 .error-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  width: 100%;

}

@media (max-width: 768px) {
  .page-text--404 .error-text {
    padding: 0;
    justify-content: center;
  }
}

/* Error Code */
.page-text--404 .error-code {
	margin: 0 0 32px 0;
	font-weight: 900;
	font-size: 404px;
	line-height: 1;
	text-align: center;
	background: linear-gradient(90deg, #3FD9C5 0%, #7360F2 100%), #000000;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	text-fill-color: transparent;
}

@media (max-width: 1024px) {
  .page-text--404 .error-code {
    font-size: 220px;
  }
}

@media (max-width: 768px) {
  .page-text--404 .error-code {
    font-size: 144px;
    margin-bottom: 24px;
  }
}

/* Error Message */
.page-text--404 .error-message {
  font-size: 36px;
  font-weight: 600;
  color: #000000;
  margin: 0 0 32px 0;
  text-align: center;
 
}

@media (max-width: 768px) {
  .page-text--404 .error-message {
    font-size: 18px;
    margin-bottom: 24px;
  }
}

/* Back Button */

.page-text--404 .back-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: #FFFFFF;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  color: #374151;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: background-color 0.2s, border-color 0.2s;
}

.page-text--404 .back-button:hover {
  background-color: #f9fafb;
  border-color: #d1d5db;
}
.page-text--404 .back-button__icon {
	width: 24px;
	height: 24px;
	background: #000000;
	mask: url(../img/icon/arrow-left.svg) center / contain no-repeat;
	flex-shrink: 0;
}

@media (max-width: 768px) {
  .page-text--404 .back-button {
    padding: 8px 16px;
    font-size: 14px;
  }
}