.site-main {
padding: 8% 0;
}
.sub__header {
padding: 5% 0;
display: block;
background-color: var(--clr-brown);
}@font-face {
font-family: 'Halvar Breitschrift';
src: url(https://xn--h1adxd.xn--p1ai/wp-content/themes/ytki/assets/fonts/Halvar\ Breitschrift-Regular-Web.woff2) format('woff2'), 
url(https://xn--h1adxd.xn--p1ai/wp-content/themes/ytki/assets/fonts/Halvar\ Breitschrift-Regular-Web.woff) format('woff'), 
url(https://xn--h1adxd.xn--p1ai/wp-content/themes/ytki/assets/fonts/Halvar\ Breitschrift-Regular-Web.ttf) format('truetype');
font-display: swap;
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Halvar Breitschrift';
src: url(https://xn--h1adxd.xn--p1ai/wp-content/themes/ytki/assets/fonts/Halvar\ Breitschrift-Medium-Web.woff2) format('woff2'), 
url(https://xn--h1adxd.xn--p1ai/wp-content/themes/ytki/assets/fonts/Halvar\ Breitschrift-Medium-Web.woff) format('woff'), 
url(https://xn--h1adxd.xn--p1ai/wp-content/themes/ytki/assets/fonts/Halvar\ Breitschrift-Medium-Web.ttf) format('truetype');
font-display: swap;
font-weight: 500;
font-style: normal;
} @font-face {
font-family: 'Inter';
src: url(https://xn--h1adxd.xn--p1ai/wp-content/themes/ytki/assets/fonts/Inter-Regular.eot);
src: local('Inter Regular'), local('Inter-Regular'),
url(https://xn--h1adxd.xn--p1ai/wp-content/themes/ytki/assets/fonts/Inter-Regular.eot?#iefix) format('embedded-opentype'),
url(https://xn--h1adxd.xn--p1ai/wp-content/themes/ytki/assets/fonts/Inter-Regular.woff2) format('woff2'),
url(https://xn--h1adxd.xn--p1ai/wp-content/themes/ytki/assets/fonts/Inter-Regular.woff) format('woff'),
url(https://xn--h1adxd.xn--p1ai/wp-content/themes/ytki/assets/fonts/Inter-Regular.ttf) format('truetype');
font-display: swap;
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Inter';
src: url(https://xn--h1adxd.xn--p1ai/wp-content/themes/ytki/assets/fonts/Inter-Medium.eot);
src: local('Inter Medium'), local('Inter-Medium'),
url(https://xn--h1adxd.xn--p1ai/wp-content/themes/ytki/assets/fonts/Inter-Medium.eot?#iefix) format('embedded-opentype'),
url(https://xn--h1adxd.xn--p1ai/wp-content/themes/ytki/assets/fonts/Inter-Medium.woff2) format('woff2'),
url(https://xn--h1adxd.xn--p1ai/wp-content/themes/ytki/assets/fonts/Inter-Medium.woff) format('woff'),
url(https://xn--h1adxd.xn--p1ai/wp-content/themes/ytki/assets/fonts/Inter-Medium.ttf) format('truetype');
font-display: swap;
font-weight: 500;
font-style: normal;
}:root {
--font-family-heading: 'Halvar Breitschrift', serif;
--font-family: 'Inter', sans-serif; --heading-h2-size: calc(50 / 1440 * 100vw);
--heading-h2-line-height: 110%;
--heading-h2-font-weight: 500;
--heading-h3-size: calc(28 / 1440 * 100vw);
--heading-h3-line-height: 120%;
--heading-h3-font-weight: 500;
--heading-h4-size: calc(21 / 1440 * 100vw);
--heading-h4-line-height: 120%;
--heading-h4-font-weight: 500;
--heading-h5-size: calc(18 / 1440 * 100vw);
--heading-h5-line-height: 140%;
--heading-h5-font-weight: 500;  --body-size: calc(14 / 1440 * 100vw);
--body-line-height: 140%;
--body-font-weight: 400;
--button-size: calc(16 / 1440 * 100vw);
--button-line-height: 120%;
--button-font-weight: 500;
--button-letter-spacing: 2.5%;
--link-size: calc(16 / 1440 * 100vw);
--link-line-height: 120%;
--link-font-weight: 500;
--link-letter-spacing: 2.5%; }
body {
font-family: var(--font-family);
} .heading-h2 {
font-family: var(--font-family-heading);
font-size: var(--heading-h2-size);
line-height: var(--heading-h2-line-height);
font-weight: var(--heading-h2-font-weight);
}
.heading-h3 {
font-family: var(--font-family-heading);
font-size: var(--heading-h3-size);
line-height: var(--heading-h3-line-height);
font-weight: var(--heading-h3-font-weight);
}
.heading-h4 {
font-family: var(--font-family-heading);
font-size: var(--heading-h4-size);
line-height: var(--heading-h4-line-height);
font-weight: var(--heading-h4-font-weight);
}
.heading-h5 {
font-family: var(--font-family-heading);
font-size: var(--heading-h5-size);
line-height: var(--heading-h5-line-height);
font-weight: var(--heading-h5-font-weight);
}  .body {
font-size: var(--body-size);
line-height: var(--body-line-height);
font-weight: var(--body-font-weight);
}
.button {
font-size: var(--button-size);
line-height: var(--button-line-height);
font-weight: var(--button-font-weight);
}
.link {
font-size: var(--link-size);
line-height: var(--link-line-height);
font-weight: var(--link-font-weight);
}
@media screen and (max-width: 1024px) {
:root { --heading-h2-size: 30px;
--heading-h2-line-height: 120%;
--heading-h2-font-weight: 500;
--heading-h3-size: 22px;
--heading-h3-line-height: 120%;
--heading-h3-font-weight: 500;
--heading-h4-size: 18px;
--heading-h4-line-height: 120%;
--heading-h4-font-weight: 500;
--heading-h5-size: 18px;
--heading-h5-line-height: 120%;
--heading-h5-font-weight: 500;  --body-size: 14px;
--body-line-height: 140%;
--body-font-weight: 400;
--button-size: 14px;
--button-line-height: 120%;
--button-font-weight: 500;
--link-size: 14px;
--link-line-height: 120%;
--link-font-weight: 500; }
}html {
line-height: 1.15; -webkit-text-size-adjust: 100%; }  body {
margin: 0;
} main {
display: block;
} h1 {
font-size: 2em;
margin: 0.67em 0;
}  hr {
box-sizing: content-box; height: 0; overflow: visible; } pre {
font-family: monospace, monospace; font-size: 1em; }  a {
background-color: transparent;
} abbr[title] {
border-bottom: none; text-decoration: underline; text-decoration: underline dotted; } b,
strong {
font-weight: bolder;
} code,
kbd,
samp {
font-family: monospace, monospace; font-size: 1em; } small {
font-size: 80%;
} sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}  img {
border-style: none;
}  button,
input,
optgroup,
select,
textarea {
font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0; } button,
input { overflow: visible;
} button,
select { text-transform: none;
} button,
[type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
} button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
} button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText;
} fieldset {
padding: 0.35em 0.75em 0.625em;
} legend {
box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal; } progress {
vertical-align: baseline;
} textarea {
overflow: auto;
} [type="checkbox"],
[type="radio"] {
box-sizing: border-box; padding: 0; } [type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
} [type="search"] {
-webkit-appearance: textfield; outline-offset: -2px; } [type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
} ::-webkit-file-upload-button {
-webkit-appearance: button; font: inherit; }  details {
display: block;
} summary {
display: list-item;
}  template {
display: none;
} [hidden] {
display: none;
}
:root {
--font-family-heading: 'Halvar Breitschrift', serif;
--font-family: 'Inter', sans-serif; --heading-h2-size: calc(50 / 1440 * 100vw);
--heading-h2-line-height: 110%;
--heading-h2-font-weight: 500;
--heading-h3-size: calc(28 / 1440 * 100vw);
--heading-h3-line-height: 120%;
--heading-h3-font-weight: 500;
--heading-h4-size: calc(21 / 1440 * 100vw);
--heading-h4-line-height: 120%;
--heading-h4-font-weight: 500;
--heading-h5-size: calc(18 / 1440 * 100vw);
--heading-h5-line-height: 140%;
--heading-h5-font-weight: 500;  --body-size: calc(14 / 1440 * 100vw);
--body-line-height: 140%;
--body-font-weight: 400;
--button-size: calc(16 / 1440 * 100vw);
--button-line-height: 120%;
--button-font-weight: 500;
--button-letter-spacing: 2.5%;
--link-size: calc(16 / 1440 * 100vw);
--link-line-height: 120%;
--link-font-weight: 500;
--link-letter-spacing: 2.5%; }
body {
font-family: var(--font-family);
} .heading-h2 {
font-family: var(--font-family-heading);
font-size: var(--heading-h2-size);
line-height: var(--heading-h2-line-height);
font-weight: var(--heading-h2-font-weight);
}
.heading-h3 {
font-family: var(--font-family-heading);
font-size: var(--heading-h3-size);
line-height: var(--heading-h3-line-height);
font-weight: var(--heading-h3-font-weight);
}
.heading-h4 {
font-family: var(--font-family-heading);
font-size: var(--heading-h4-size);
line-height: var(--heading-h4-line-height);
font-weight: var(--heading-h4-font-weight);
}
.heading-h5 {
font-family: var(--font-family-heading);
font-size: var(--heading-h5-size);
line-height: var(--heading-h5-line-height);
font-weight: var(--heading-h5-font-weight);
}  .body {
font-size: var(--body-size);
line-height: var(--body-line-height);
font-weight: var(--body-font-weight);
}
.button {
font-size: var(--button-size);
line-height: var(--button-line-height);
font-weight: var(--button-font-weight);
}
.link {
font-size: var(--link-size);
line-height: var(--link-line-height);
font-weight: var(--link-font-weight);
}
@media screen and (max-width: 1024px) {
:root { --heading-h2-size: 30px;
--heading-h2-line-height: 120%;
--heading-h2-font-weight: 500;
--heading-h3-size: 22px;
--heading-h3-line-height: 120%;
--heading-h3-font-weight: 500;
--heading-h4-size: 18px;
--heading-h4-line-height: 120%;
--heading-h4-font-weight: 500;
--heading-h5-size: 18px;
--heading-h5-line-height: 120%;
--heading-h5-font-weight: 500;  --body-size: 14px;
--body-line-height: 140%;
--body-font-weight: 400;
--button-size: 14px;
--button-line-height: 120%;
--button-font-weight: 500;
--link-size: 14px;
--link-line-height: 120%;
--link-font-weight: 500; }
}
:root { --clr-white: #FFFFFF;
--clr-black: #121212;
--clr-beige: #E6DCC8;
--clr-brown: #3C2D23;
--clr-green: #3C7346;
--clr-gray: #D9D9D9;
--clr-gray-2: #F6F6F6; }
.white {
color: var(--clr-white);
}
.black {
color: var(--clr-black);
}
.beige {
color: var(--clr-beige);
}
.brown {
color: var(--clr-brown);
}
.green {
color: var(--clr-green);
}
.gray {
color: var(--clr-gray);
}
.gray-2 {
color: var(--clr-gray-2);
}
.fade-up {
opacity: 0;
transform: translateY(24px);
transition: opacity 0.8s ease-out, transform 0.8s ease-out;
will-change: transform, opacity;
}
.fade-up.is-visible {
opacity: 1;
transform: translateY(0);
}
@keyframes fade-up {
from {
opacity: 0;
transform: translateY(24px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.btn {
padding: 16px 24px 14px;
display: flex;
justify-content: center;
gap: 8px;
cursor: pointer;
transition: all 0.3s ease-in-out;
outline: none;
border: none;
text-decoration: none;
border-radius: 30px;
}
.btn__white {
color: var(--clr-brown);
background-color: var(--clr-white);
}
.btn__white:hover {
color: var(--clr-white);
background-color: var(--clr-brown);
}
.btn__brown {
}
.header {
width: 100%;
position: fixed;
z-index: 2;
background-color: transparent;
transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.header__wrap {
padding: calc(50 / 1440 * 100vw) 0 0;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
transition: padding 0.3s ease;
}
.header--scrolled {
background-color: var(--clr-white);
box-shadow: 0 4px 24px rgba(60, 45, 35, 0.08);
}
.header--scrolled .header__wrap {
padding: calc(20 / 1440 * 100vw) 0;
}
.header--scrolled .header__nav {
padding: 0;
background-color: transparent;
}
.header--scrolled .header__btn-wrap .btn__white {
color: var(--clr-white);
background-color: var(--clr-brown);
}
.header--scrolled .header__btn-wrap .btn__white:hover {
color: var(--clr-white);
background-color: var(--clr-brown);
}
.header--scrolled .btn__circul {
background-color: var(--clr-brown);
}
.header__logo {
text-decoration: none;
}
.header__logo-img {
width: calc(100 / 1440 * 100vw);
height: calc(50 / 1440 * 100vw);
display: block;
}
.header__nav {
padding: calc(16 / 1440 * 100vw) calc(32 / 1440 * 100vw);
display: flex;
align-items: center;
gap: calc(40 / 1440 * 100vw);
background-color: var(--clr-white);
border-radius: calc(40 / 1440 * 100vw);
transition: background-color 0.3s ease, padding 0.3s ease;
}
.header__nav-link {
color: var(--clr-brown);
text-decoration: none;
}
.header__btn-wrap {
display: flex;
flex-direction: row;
}
.btn__circul {
height: 50px;
width: 50px;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--clr-white);
border-radius: 50%;
transition: background-color 0.3s ease;
}
.btn__circul-img {
transition: .3s ease-in-out;
}
.header__btn-wrap:hover .btn__circul .btn__circul-img {
transform: translateY(-2px);
}
.header__burger-btn {
display: none;
} .burger__menu {
position: fixed;
top: 0;
right: 0;
z-index: 15;
width: 100%;
max-width: 375px;
height: 100dvh;
padding: 24px 30px 34px;
box-sizing: border-box;
display: flex;
flex-direction: column;
background-color: var(--clr-gray-2);
transform: translateX(100%);
opacity: 0;
visibility: hidden;
transition: transform 0.45s ease, opacity 0.45s ease, visibility 0.45s ease;
}
.burger__menu.active {
transform: translateX(0);
opacity: 1;
visibility: visible;
}
.burger__menu-inner {
height: 100%;
display: flex;
flex-direction: column;
}
.burger__menu-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
}
.burger__menu-logo-img {
width: 102px;
height: 54px;
display: block;
}
.burger__menu-close {
border: none;
background: transparent;
padding: 4px;
cursor: pointer;
}
.burger__menu-nav {
margin-top: 88px;
display: flex;
flex-direction: column;
gap: 20px;
align-items: center;
}
.burger__menu-link {
color: var(--clr-brown);
text-decoration: none;
font-family: var(--font-family-heading);
font-size: 50px;
line-height: 1.1;
font-weight: 500;
}
.burger__menu-bottom {
margin-top: auto;
display: flex;
flex-direction: column;
align-items: center;
}
.burger__menu-cta {
width: 100%;
display: flex;
gap: 4px;
}
.burger__menu-btn {
flex: 1;
min-height: 50px;
color: var(--clr-white);
background-color: var(--clr-brown);
}
.burger__menu-btn:hover {
color: var(--clr-white);
background-color: var(--clr-brown);
}
.burger__menu-circle {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: var(--clr-brown);
display: flex;
align-items: center;
justify-content: center;
}
.burger__menu-phone {
margin-top: 26px;
text-decoration: none;
}
.burger__menu-time {
margin: 8px 0 0;
}
body.burger-open {
overflow: hidden;
} @media screen and (max-width: 768px) {
.header {
display: block;
}
.header__wrap {
padding: 26px 0 0;
}
.header--scrolled .header__wrap {
padding: 16px 0;
}
.header__logo-img {
width: 98px;
height: 50px;
}
.header__nav,
.header__btn-wrap {
display: none;
}
.header__burger-btn {
display: flex;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
padding: 0;
border: none;
border-radius: 50%;
background-color: transparent;
cursor: pointer;
}
.header__burger-btn img {
width: 100%;
height: 100%;
display: block;
}
.burger__menu {
max-width: 100%;
}
.burger__menu-link {
font-size: 32px;
}
}
@media screen and (max-width: 480px) {
.header__wrap {
padding: 42px 20px 0;
}
}
@media screen and (max-width: 420px) {
.header__wrap {
padding: 32px 20px 0;
}
.header--scrolled .header__wrap {
padding: 16px 0;
}
.burger__menu {
padding: 32px 30px 28px;
}
.burger__menu-nav {
margin-top: 76px;
}
}
.footer {
}
.footer__wrap {
padding: calc(90 / 1440 * 100vw) 0 calc(40 / 1440 * 100vw);
}
.footer__content {
}
.footer__contant {
padding-bottom: calc(24 / 1440 * 100vw);
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
border-bottom: 1px solid var(--clr-brown);
}
.footer__contant-tel {
text-decoration: none;
}
.footer__contant-title {
margin: 0;
}
.footer__copyright {
padding-top: calc(24 / 1440 * 100vw);
display: flex;
justify-content: space-between;
}
.footer__copyright-text {
max-width: calc(466 / 1440 * 100vw);
}
.footer__copyright-copy {
opacity: .5;
}
.footer__img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
.footer__policy-wrap {
display: flex;
flex-direction: column;
gap: 10px;
}
@media screen and (max-width: 768px) {
.footer__copyright {
flex-direction: column;
}
.footer__copyright-text {
max-width: 100%;
}
}
.form {
display: flex;
flex-direction: column;
gap: 12px;
width: 100%;
max-width: 420px;
}
.form__input {
width: 100%;
padding: 18px 24px;
box-sizing: border-box;
font-family: var(--font-family);
font-size: var(--body-size);
line-height: var(--body-line-height);
color: var(--clr-black);
background-color: #ebebeb;
border: none;
border-radius: 50px;
outline: none;
}
.form__input::placeholder {
color: #8a8a8a;
}
.form__input:focus {
background-color: #e2e2e2;
}
.form__checkbox {
display: flex;
align-items: flex-start;
gap: 12px;
margin: 4px 0 8px;
}
.form__checkbox-input {
flex-shrink: 0;
width: 18px;
height: 18px;
margin-top: 2px;
appearance: none;
-webkit-appearance: none;
background-color: var(--clr-white);
border: 1px solid #8a8a8a;
border-radius: 4px;
cursor: pointer;
}
.form__checkbox-input:checked {
background-color: var(--clr-brown);
border-color: var(--clr-brown);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10' fill='none'%3E%3Cpath d='M1 5.2L4.2 8.4L11 1.4' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: 10px 8px;
}
.form__checkbox-label {
font-family: var(--font-family);
font-size: 13px;
line-height: 140%;
color: var(--clr-black);
cursor: pointer;
}
.form__btn {
width: fit-content;
padding: 18px 32px 16px;
color: var(--clr-white);
background-color: var(--clr-brown);
border-radius: 50px;
}
.form__btn:hover {
background-color: #2f241c;
}
.form__message {
padding: 12px 16px;
border-radius: 12px;
font-family: var(--font-family);
font-size: 14px;
line-height: 140%;
}
.form__message[hidden] {
display: none;
}
.form__message.is-error {
color: #7a1f1f;
background-color: #fdecec;
}
.form__message.is-success {
color: #1f5a2b;
background-color: #eaf6ed;
}
.form.is-loading .form__btn {
opacity: 0.7;
pointer-events: none;
}
@media screen and (max-width: 1024px) {
.form {
max-width: 100%;
}
}
.container {
margin: 0 auto;
max-width: calc(1320 / 1440 * 100vw);
box-sizing: border-box;
}
.section {
padding: calc(90 / 1440 * 100vw) 0;
}
@media screen and (max-width: 480px) {
.container {
max-width: 90%;
}
}.global__modal {
position: fixed;
inset: 0;
z-index: 20;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
box-sizing: border-box;
visibility: hidden;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.global__modal.is-open {
visibility: visible;
opacity: 1;
pointer-events: auto;
}
.global__modal-overlay {
position: absolute;
inset: 0;
background-color: rgba(18, 18, 18, 0.55);
cursor: pointer;
}
.global__modal-dialog {
position: relative;
z-index: 1;
width: 100%;
max-width: 520px;
max-height: calc(100vh - 48px);
overflow-y: auto;
padding: calc(48 / 1440 * 100vw) calc(40 / 1440 * 100vw) calc(40 / 1440 * 100vw);
box-sizing: border-box;
background-color: var(--clr-white);
border-radius: calc(32 / 1440 * 100vw);
transform: translateY(16px) scale(0.98);
transition: transform 0.3s ease;
}
.global__modal.is-open .global__modal-dialog {
transform: translateY(0) scale(1);
}
.global__modal-close {
position: absolute;
top: calc(20 / 1440 * 100vw);
right: calc(20 / 1440 * 100vw);
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
padding: 0;
background: var(--clr-gray-2);
border: none;
border-radius: 50%;
cursor: pointer;
transition: background-color 0.3s ease;
}
.global__modal-close:hover {
background-color: var(--clr-beige);
}
.global__modal-close img {
width: 16px;
height: 16px;
display: block;
}
.global__modal-content {
display: flex;
flex-direction: column;
gap: calc(16 / 1440 * 100vw);
}
.global__modal-title {
margin: 0;
padding-right: 48px;
color: var(--clr-brown);
}
.global__modal-subtitle {
margin: 0;
color: var(--clr-black);
opacity: 0.75;
}
.global__modal .form {
max-width: 100%;
margin-top: calc(8 / 1440 * 100vw);
}
body.modal-open {
overflow: hidden;
}
@media screen and (max-width: 1024px) {
.global__modal-dialog {
padding: 40px 24px 32px;
border-radius: 24px;
}
.global__modal-close {
top: 16px;
right: 16px;
}
}body.f152-theme-light {
--f152-bg:        #ffffff;
--f152-text:      #1f2328;
--f152-link:      #1e73be;
--f152-btn-bg:    #2271b1;
--f152-btn-text:  #ffffff;
--f152-btn-radius: 8px;
--f152-font-size-text: .8rem;
--f152-font-size-btn: .875rem;
--f152-shadow:    0 10px 30px rgba(0,0,0,.12);
--f152-border:    rgba(0,0,0,.12);
}
body.f152-theme-dark {
--f152-bg:        #111418;
--f152-text:      #e6e8eb;
--f152-link:      #7ab7ff;
--f152-btn-bg:    #2c8cff;
--f152-btn-text:  #ffffff;
--f152-btn-radius: 8px;
--f152-font-size-text: .8rem;
--f152-font-size-btn: .875rem;
--f152-shadow:    0 10px 30px rgba(0,0,0,.5);
--f152-border:    rgba(255,255,255,.18);
}
[hidden] {
display: none !important;
}
.f152-banner .f152-btn,
.f152-popup .f152-btn {
-webkit-appearance: none;
appearance: none;
display: inline-flex;
align-items: center;
justify-content: center;
gap: .5rem;
padding: .6rem 1rem;
font: inherit;
font-size: var(--f152-font-size-btn, .875rem);
font-weight: 600;
line-height: 1.2;
border-radius: var(--f152-btn-radius, 8px);
border: 0;
background: var(--f152-btn-bg);
color: var(--f152-btn-text);
cursor: pointer;
transition: transform .06s ease, filter .12s ease, opacity .2s ease;
text-decoration: none;
}
.f152-banner .f152-btn:hover,
.f152-popup .f152-btn:hover { filter: brightness(1.05); }
.f152-banner .f152-btn:active,
.f152-popup .f152-btn:active { transform: translateY(1px) scale(.99); }
.f152-banner .f152-btn:focus,
.f152-popup .f152-btn:focus { outline: 2px solid color-mix(in srgb, var(--f152-btn-bg) 40%, transparent); outline-offset: 2px; }
.f152-banner .f152-btn--accept,
.f152-popup .f152-btn--accept {
background: var(--f152-btn-accept-bg, var(--f152-btn-bg));
color: var(--f152-btn-accept-text, var(--f152-btn-text));
}
.f152-banner .f152-btn--settings,
.f152-popup .f152-btn--settings {
background: var(--f152-btn-settings-bg, transparent);
color: var(--f152-btn-settings-text, var(--f152-link));
border: 1px solid var(--f152-border);
}
body.f152-theme-dark .f152-banner .f152-btn--settings,
body.f152-theme-dark .f152-popup .f152-btn--settings {
border-color: var(--f152-border);
}
.f152-banner .f152-btn--reject,
.f152-popup .f152-btn--reject {
background: var(--f152-btn-reject-bg, #c0c0c0);
color: var(--f152-btn-reject-text, #ffffff);
}
.f152-link--settings {
color: var(--f152-link);
text-decoration: underline;
text-underline-offset: 2px;
cursor: pointer;
}
.f152-link--settings:focus {
outline: 2px solid color-mix(in srgb, var(--f152-link) 40%, transparent);
outline-offset: 2px;
}
.f152-banner {
position: fixed;
inset-inline: 0;
bottom: 0;
z-index: 2147483000;
background: var(--f152-bg);
color: var(--f152-text);
border-top: 1px solid var(--f152-border);
box-shadow: 0 -6px 20px rgba(0,0,0,.08);
}
.f152-banner__inner {
max-width: 1200px;
margin: 0 auto;
padding: .9rem 1rem;
}
.f152-banner__layout {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
}
.f152-banner__message {
flex: 1 1 520px;
min-width: 0;
font-size: var(--f152-font-size-text, .8rem);
line-height: 1.5;
}
.f152-banner__message a {
color: var(--f152-link);
text-decoration: underline;
text-underline-offset: 2px;
}
.f152-banner__actions {
display: flex;
flex: 0 0 auto;
align-items: center;
gap: .5rem;
flex-wrap: wrap;
}
.f152-banner .f152-btn--save,
.f152-popup .f152-btn--save {
background: var(--f152-btn-bg);
color: var(--f152-btn-text);
}
@media (max-width: 780px) {
.f152-banner__layout {
flex-direction: column;
align-items: stretch;
gap: .75rem;
}
.f152-banner__message {
flex: none;
}
.f152-banner__actions {
justify-content: flex-start;
}
.f152-banner .f152-btn,
.f152-popup .f152-btn {
gap: 0;
padding: 0.5rem 0.8rem;
}
}
.f152-popup {
position: fixed;
inset: 0;
z-index: 2147483001;
color: var(--f152-text);
}
.f152-popup__overlay {
position: absolute;
inset: 0;
background: rgba(0,0,0,.45);
}
.f152-popup__window {
position: relative;
width: min(720px, calc(100% - 2rem));
margin: 8vh auto 0 auto;
background: var(--f152-bg);
border: 1px solid var(--f152-border);
border-radius: 12px;
box-shadow: var(--f152-shadow);
padding: 1.25rem 1.25rem 1rem;
height: 90%;
overflow: auto;
}
.f152-popup__title {
margin: 0 0 .5rem 0;
font-size: 1.25rem;
line-height: 1.25;
}
.f152-popup__content {
margin-top: .5rem;
display: grid;
gap: .9rem;
}
.f152-popup__intro {
font-size: .95rem;
opacity: .95;
}
.f152-popup__intro a {
color: var(--f152-link);
text-decoration: underline;
text-underline-offset: 2px;
}
.f152-popup__group {
border: 1px solid var(--f152-border);
border-radius: 10px;
padding: .8rem .9rem;
background: color-mix(in srgb, var(--f152-bg) 92%, #000 8%);
}
body.f152-theme-dark .f152-popup__group {
background: color-mix(in srgb, var(--f152-bg) 86%, #fff 14%);
}
.f152-row {
display: grid;
grid-template-columns: auto 1fr;
gap: .65rem .9rem;
align-items: start;
}
.f152-row input[type="checkbox"] {
transform: translateY(3px);
}
.f152-row__title { line-height: 1.2; }
.f152-row__desc {
grid-column: 2 / -1;
display: block;
font-size: .9rem;
opacity: .9;
}
.f152-popup__actions {
margin-top: 1rem;
display: flex;
gap: .6rem;
justify-content: flex-end;
}
.f152-popup__close {
position: absolute;
top: .5rem;
inset-inline-end: .5rem;
border: 0;
background: transparent;
color: var(--f152-text);
font-size: 1.5rem;
line-height: 1;
width: 2rem;
height: 2rem;
border-radius: 8px;
cursor: pointer;
padding: 0 0 5px 1px !important;
}
.f152-popup__close:hover {
background: color-mix(in srgb, var(--f152-text) 10%, transparent);
}
.f152-popup__close:focus {
outline: 2px solid color-mix(in srgb, var(--f152-btn-bg) 40%, transparent);
outline-offset: 2px;
}
.comment-form-f152,
.f152-checkout-consent {
margin-top: .75rem;
padding: .75rem .75rem;
border: 1px dashed var(--f152-border);
border-radius: 10px;
background: color-mix(in srgb, var(--f152-bg) 95%, #000 5%);
}
.comment-form-f152 label,
.f152-checkout-consent label {
display: grid;
grid-template-columns: auto 1fr;
gap: .5rem .75rem;
align-items: start;
}
.comment-form-f152 a,
.f152-checkout-consent a {
color: var(--f152-link);
text-decoration: underline;
text-underline-offset: 2px;
}
@supports not (color: color-mix(in srgb, black 50%, white 50%)) {
.f152-popup__group,
.comment-form-f152,
.f152-checkout-consent {
background: var(--f152-bg);
}
.f152-banner .f152-btn--settings:hover,
.f152-popup .f152-btn--settings:hover,
.f152-popup__close:hover {
background: rgba(0,0,0,.06);
}
}