/* ==========================================================================
   Core v2 - Shared component styles
   Extracted from: core.css (modal, loader, coupon, navigation)
   ========================================================================== */

/* Hystmodal - Modal overlay system
   ========================================================================== */
.hystmodal {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    overflow: hidden;
    overflow-y: auto;
    opacity: 1;
    pointer-events: none;
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    z-index: 99;
    visibility: hidden;
}
.hystmodal__opened {
    position: fixed;
    right: 0;
    left: 0;
    overflow: hidden;
}
.hystmodal__shadow {
    position: fixed;
    border: none;
    display: block;
    width: 100%;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 98;
    opacity: 0;
    transition: opacity .15s ease;
    background: rgba(0, 0, 0, .38);
}
.hystmodal__shadow--show {
    pointer-events: auto;
    opacity: 1;
}
.hystmodal:not(.hystmodal--active) * {
    pointer-events: none !important;
}
.hystmodal--active {
    opacity: 1;
}
.hystmodal--active,
.hystmodal--moved {
    pointer-events: auto;
    visibility: visible;
}
.hystmodal__wrap {
    flex-shrink: 0;
    flex-grow: 0;
    width: 100%;
    min-height: 100%;
    margin: auto;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
}
.hystmodal__window {
    margin: 50px 0;
    box-sizing: border-box;
    flex-shrink: 0;
    flex-grow: 0;
    overflow: visible;
    transition: transform .2s ease 0s, opacity .2s ease 0s;
    transform: scale(.9);
    opacity: 0;
    pointer-events: none;
}
.hystmodal__window > aside,
.hystmodal__window > div,
.hystmodal__window > section {
    pointer-events: auto;
}
.hystmodal--active .hystmodal__window {
    transform: scale(1);
    opacity: 1;
}
.hystmodal__close {
    position: absolute;
    z-index: 12;
    border: none;
    font-size: 0;
    cursor: pointer;
    outline: 0;
    pointer-events: auto;
    width: 4rem;
    height: 4rem;
    right: 1.25rem;
    top: 1.25rem;
    padding: 0;
    background-image: none;
    border-radius: 50%;
    min-height: 0;
    transition: transform .3s ease;
    user-select: none;
}
.hystmodal__close:before {
    content: "";
    position: absolute;
    left: -50%;
    top: -50%;
    width: 200%;
    height: 200%;
}
.hystmodal__close svg {
    width: 100%;
    height: 100%;
}
@media (any-hover: hover) {
    .hystmodal__close:hover {
        fill: #fff;
    }
}
.hystmodal__close:focus {
    outline-offset: 2px;
}

/* Coupon Modal
   ========================================================================== */
.cuponModal {
    scrollbar-width: none;
}
.cuponModal::-webkit-scrollbar {
    display: none;
}
.cuponModal .hystmodal__window {
    position: relative;
    width: 100%;
    margin: 3.125rem 1.25rem;
    max-width: 38.1875rem;
}
@media (max-width: 640px) {
    .cuponModal .hystmodal__window {
        margin: 0;
        margin-top: auto;
    }
}
.cuponModal .hystmodal__close {
    top: 1.5625rem;
    right: 1.5625rem;
    width: .875rem;
    height: .875rem;
}
@media (max-width: 640px) {
    .cuponModal .hystmodal__close {
        right: 1.125rem;
        top: 1.125rem;
    }
}
.cuponBlock {
    padding: 2rem;
    padding-top: 7.625rem;
    border-radius: .5rem;
    overflow: hidden;
    position: relative;
}
@media (max-width: 640px) {
    .cuponBlock {
        padding-bottom: 16.4383561644vh;
    }
}
.cuponBlock:before {
    content: "";
    height: 7.625rem;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: #f7ac1a;
    z-index: 2;
}
.cuponBlock:after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 1.3125rem;
    right: 1.3125rem;
    background-color: #fff;
    z-index: 0;
}
@media (max-width: 640px) {
    .cuponBlock:after {
        left: 0;
        right: 0;
    }
}
.cuponBlock .logo {
    padding: 2.375rem 1.25rem;
    display: block;
    background: #fff;
    box-shadow: 0 1px 0 rgba(117, 98, 97, .12),
                0 0 0 1px rgba(117, 99, 98, .12),
                0 1px 1px -.5px rgba(117, 99, 98, .12),
                0 1px 3px -1.5px rgba(117, 99, 98, .12),
                0 2px 4px -2px rgba(117, 99, 98, .12),
                0 3px 6px -3px rgba(117, 99, 98, .12),
                0 3px 6px -3px rgba(117, 99, 98, .12),
                0 6px 9px -4.5px rgba(117, 99, 98, .12);
    border-radius: .5rem;
    max-width: 12.875rem;
    margin: 0 auto;
    margin-bottom: .875rem;
    margin-top: -4.375rem;
    position: relative;
    z-index: 3;
}
.cuponBlock .logo .logo-img {
    display: block;
    margin: 0 auto;
    height: 3.3125rem;
    width: 6.625rem;
    object-fit: contain;
}
.cuponBlock .logo .logo-img.no-logo {
    opacity: 0;
}
.cuponBlock .logo .dec {
    width: 4rem;
    height: auto;
    position: absolute;
}
.cuponBlock .logo .dec.top {
    transform: translate(-35%, -35%);
    top: 0;
    left: 0;
}
.cuponBlock .logo .dec.bot {
    bottom: 0;
    right: 0;
    transform: translate(24%, 34%);
}
@media (max-width: 1100px) {
    .cuponBlock .logo {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
    .cuponBlock .logo img {
        max-height: 2.8125rem;
    }
}
.cuponBlock .store {
    text-align: center;
    margin-bottom: 2rem;
    font-size: 1.125rem;
    line-height: 122.222222%;
    font-weight: 600;
    z-index: 2;
    position: relative;
}
.cuponBlock .h6 {
    max-width: 22.5rem;
    margin: 0 auto;
    text-align: center;
    margin-bottom: 2rem;
    position: relative;
    z-index: 2;
}
.cuponBlock .devider {
    margin: 2rem -2rem;
    height: 1px;
    position: relative;
    z-index: 1;
}
.cuponBlock .devider svg:not(.line-svg) {
    position: absolute;
    top: 50%;
    transform: translateY(-49.3%);
    width: 1.875rem;
    height: auto;
    z-index: -2;
}
.cuponBlock .devider svg:not(.line-svg).right-svg {
    left: auto;
    right: 0;
}
.cuponBlock .devider svg:not(.line-svg).left-svg {
    left: 0;
    transform: translateY(-49.3%) scaleX(-1);
}
@media (max-width: 640px) {
    .cuponBlock .devider svg:not(.line-svg) {
        display: none;
    }
}
.cuponBlock .devider:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 2.8125rem;
    right: 2.8125rem;
    transform: translateY(-50%);
    height: 2px;
    background-image: url("data:image/svg+xml,%0A%3Csvg width='521' height='1' viewBox='0 0 521 1' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cline y1='0.5' x2='521' y2='0.5' stroke='black' stroke-opacity='0.14' stroke-dasharray='12 12'/%3E%3C/svg%3E%0A");
    background-repeat: repeat-x;
    background-position: center;
}
@media (max-width: 640px) {
    .cuponBlock .devider:after {
        right: 1.25rem;
        left: 1.25rem;
    }
}
@media (max-width: 640px) {
    .cuponBlock .devider {
        margin: 2.5rem -1.25rem;
    }
}
.cuponBlock .copyBtn {
    padding: .9375rem 2.375rem;
    border-radius: .5rem;
    background-color: rgba(251, 107, 2, .24);
    display: flex;
    width: fit-content;
    margin: 0 auto;
    cursor: pointer;
    margin-bottom: .75rem;
    position: relative;
    z-index: 2;
    transition: background-color .3s ease, color .3s ease;
    color: #141414;
}
.cuponBlock .copyBtn span {
    font-weight: 700;
}
.cuponBlock .copyBtn .icon {
    margin-left: 1rem;
    width: 1.25rem;
    height: 1.25rem;
    padding: .125rem .1875rem;
    display: flex;
    justify-content: center;
    align-items: center;
}
.cuponBlock .copyBtn .icon svg {
    width: 100%;
    height: auto;
}
.cuponBlock .copyBtn .icon svg.check-icon {
    display: none;
}
.cuponBlock .copyBtn.copied {
    pointer-events: none;
}
.cuponBlock .copyBtn.copied .icon svg.copy-icon {
    display: none;
}
.cuponBlock .copyBtn.copied .icon svg.check-icon {
    display: block;
}
@media (any-hover: hover) {
    .cuponBlock .copyBtn:hover {
        background-color: #ff7e1e;
        color: #fff;
    }
    .cuponBlock .copyBtn:hover .icon svg {
        fill: #fff;
    }
}
.cuponBlock .hint {
    font-size: .75rem;
    line-height: 141.666667%;
    text-align: center;
    margin-bottom: 3rem;
    position: relative;
    z-index: 2;
}
.cuponBlock .hint a {
    font-weight: 600;
    color: #b85000;
}
.cuponBlock .period {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .875rem;
    line-height: 135.714286%;
    position: relative;
    z-index: 2;
}
.cuponBlock .period span {
    color: #fb0202;
    margin-right: .5rem;
}
.cuponBlock .period svg {
    width: 1.25rem;
    height: 1.25rem;
    margin-right: .25rem;
    margin-top: -.0625rem;
}
.cuponBlock .period i {
    font-style: normal;
}

/* Redirect Loader
   ========================================================================== */
.loader {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #f9f7f2;
    z-index: 1000;
    padding: 4.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    transition: opacity .3s ease;
    opacity: 0;
    pointer-events: none;
}
.loader.show {
    opacity: 1;
    pointer-events: auto;
}
.loader.show .circle {
    animation: rotate 3s linear infinite;
}
@media (max-width: 640px) {
    .loader .h3 {
        font-size: 2rem;
        line-height: 2.4375rem;
    }
}
.loader .dec {
    position: absolute;
    width: 5.75rem;
    height: 5.75rem;
}
.loader .dec-1 {
    top: 37.093495935vh;
    left: 25.9722222222vw;
    transform: rotate(19.9deg);
}
@media (max-width: 1100px) {
    .loader .dec-1 {
        top: 33.640167364vh;
        left: 7.4340527578vw;
    }
}
@media (max-width: 640px) {
    .loader .dec-1 {
        top: 23.607748184vh;
        left: -10.1333333333vw;
    }
}
.loader .dec-2 {
    top: 19.4105691057vh;
    right: 30.9027777778vw;
    transform: rotate(-6.16deg);
}
@media (max-width: 1100px) {
    .loader .dec-2 {
        top: 18.0753138075vh;
        right: 16.067146283vw;
    }
}
@media (max-width: 640px) {
    .loader .dec-2 {
        top: 9.9273607748vh;
        right: 5.0666666667vw;
    }
}
.loader .dec-3 {
    top: 45.0203252033vh;
    right: 26.25vw;
    transform: rotate(15.62deg);
}
@media (max-width: 1100px) {
    .loader .dec-3 {
        top: 41.1715481172vh;
        right: 7.3141486811vw;
    }
}
@media (max-width: 640px) {
    .loader .dec-3 {
        top: 48.3050847458vh;
        right: -1.3333333333vw;
    }
}
.loader .btn.primary {
    padding: .375rem .375rem .375rem 1.25rem;
    display: flex;
    min-width: 14.1875rem;
    justify-content: space-between;
    width: fit-content;
    min-height: 3.125rem;
    margin-bottom: auto;
}
.loader .btn.primary .svg-icon-wrap {
    background-color: #fff;
    border-radius: .375rem;
    width: 2.375rem;
    height: 2.375rem;
    margin-right: 0;
    padding: .6875rem;
}
.loader .btn.primary .svg-icon-wrap svg {
    width: 100%;
    height: 100%;
    fill: #b85000;
}
@media (max-width: 640px) {
    .loader .btn.primary {
        min-height: 2.75rem;
        min-width: 12.3125rem;
    }
    .loader .btn.primary .svg-icon-wrap {
        width: 2rem;
        height: 2rem;
    }
}
.loader .mainLogo {
    margin-bottom: auto;
    width: 9.875rem;
}
@media (max-width: 640px) {
    .loader .mainLogo {
        width: 8.0625rem;
    }
}
.loader .logo {
    padding: 3.1875rem 4.625rem;
    background-color: #fff;
    display: block;
    border-radius: .5rem .5rem 0 0;
    margin-bottom: 4.25rem;
    margin-top: 1.5rem;
    position: relative;
}
.loader .logo:before {
    content: "";
    position: absolute;
    width: 50%;
    height: 1.875rem;
    left: 50%;
    transform: translateX(-50%);
    top: 88%;
    background: rgba(0, 0, 0, .2);
    filter: blur(25px);
    z-index: -1;
}
.loader .logo img {
    display: block;
    margin: 0 auto;
    width: 10.625rem;
    height: 4rem;
    object-fit: contain;
}
@media (max-width: 640px) {
    .loader .logo img {
        height: 3.125rem;
    }
}
@media (max-width: 640px) {
    .loader .logo {
        padding-top: 2.4375rem;
        padding-bottom: 2.4375rem;
        padding-left: 3.5625rem;
        padding-right: 3.5625rem;
        max-width: 15.3125rem;
        margin-bottom: 4.6875rem;
    }
}
.loader .circle {
    margin-bottom: 2.0625rem;
    width: 2.625rem;
    height: 2.625rem;
    border-radius: 50%;
}
.loader .circle svg {
    width: 100%;
    height: 100%;
}
@media (max-width: 1100px) {
    .loader .circle {
        width: 2.4375rem;
        height: 2.4375rem;
        margin-bottom: 2.4375rem;
    }
}
@media (max-width: 640px) {
    .loader .circle {
        margin-bottom: 2.75rem;
    }
}
.loader p {
    font-size: 1.25rem;
    color: #575655;
    margin-bottom: 2.5rem;
}
@media (max-width: 1100px) {
    .loader p {
        letter-spacing: -.025em;
        margin-bottom: 2.5rem !important;
    }
}
@media (max-width: 1100px) {
    .loader {
        padding: 3.25rem;
    }
}
@media (max-width: 640px) {
    .loader {
        padding: 1.125rem 2.4375rem;
    }
}

@keyframes rotate {
    0% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Back Link (mobile)
   ========================================================================== */
.backLink {
    display: flex;
    align-items: center;
    margin-bottom: 1.25rem;
    padding-left: .3125rem;
    font-size: .875rem;
    line-height: 135.714286%;
    user-select: none;
}
@media (min-width: 641px) {
    .backLink {
        display: none;
    }
}
@media (max-width: 640px) {
    .backLink {
        opacity: 1 !important;
        transform: none !important;
    }
}
.backLink .icon {
    width: .625rem;
    height: .375rem;
    margin-right: .9375rem;
    display: flex;
    transform: rotate(90deg);
}
.backLink .icon svg {
    width: 100%;
    height: 100%;
    fill: #817f7b;
}

/* User Block (mobile menu)
   ========================================================================== */
.userBlock {
    width: 100%;
}
@media (min-width: 541px) {
    .userBlock {
        display: none;
    }
}
.userBlock.active nav {
    margin-top: 1.75rem;
}
.userBlock.active .userBlock__head .arrow-icon {
    transform: rotate(180deg);
}
.userBlock__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.userBlock__head .user-icon {
    width: 1.5rem;
    height: 1.5rem;
    fill: none;
    stroke: #a4a4a4;
    margin-right: .75rem;
    stroke-width: .125rem;
}
.userBlock__head .arrow-icon {
    width: .75rem;
    height: .5rem;
    stroke: #141414;
    margin-left: auto;
    transition: transform .3s ease;
}
.userBlock__user {
    display: flex;
}
.userBlock nav {
    transition: margin .6s ease, height .5s ease;
    height: 0;
    overflow: hidden;
}
.userBlock nav ul {
    margin-top: 0 !important;
}
.userBlock nav ul li a {
    font-size: 1rem !important;
}

/* Utility styles
   ========================================================================== */

/* Body scroll lock for modals */
body.hystmodal__opened {
    overflow: hidden;
}

/* Hide elements on specific breakpoints */
@media (max-width: 1100px) {
    .hide-tablet { display: none !important; }
}
@media (max-width: 640px) {
    .hide-mobile { display: none !important; }
}

/* Transp button variant */
/* Footer
   ========================================================================== */
.footer__row {
    display: flex;
    flex-wrap: wrap;
}
.footer__row:not(:last-child) {
    border-bottom: 1px solid #e8d8c9;
}
.footer__row:nth-child(1) {
    padding-bottom: 8.5rem;
}
@media (max-width: 1100px) {
    .footer__row:nth-child(1) {
        padding-bottom: 3.75rem;
    }
}
@media (max-width: 640px) {
    .footer__row:nth-child(1) {
        padding-bottom: 2rem;
    }
    .footer__row:nth-child(1) .footer__col:nth-child(1) {
        flex: 0 0 100%;
        margin-bottom: 3.125rem;
    }
    .footer__row:nth-child(1) .footer__col:nth-child(2),
    .footer__row:nth-child(1) .footer__col:nth-child(3) {
        flex: 0 0 50%;
        margin-bottom: 3.25rem;
    }
    .footer__row:nth-child(1) .footer__col:nth-child(4) {
        padding: 0;
        margin-bottom: 2.75rem;
    }
}
@media (max-width: 1100px) {
    .footer__row:nth-child(1) .footer__col:nth-child(4) {
        flex: 0 0 100%;
        padding-left: 33.333%;
        padding-top: 4rem;
    }
}
@media (max-width: 640px) {
    .footer__row:nth-child(1) .footer__col:nth-child(4) {
        padding-left: 0;
        padding-top: 0;
    }
}
.footer__col {
    flex: 0 0 25%;
    padding-right: 1rem;
}
@media (max-width: 1100px) {
    .footer__col {
        flex: 0 0 33.3333%;
    }
}
.footer__col .title {
    font-size: 1.25rem;
    line-height: 125%;
    font-weight: 600;
    margin-bottom: 1.5rem;
}
@media (max-width: 640px) {
    .footer__col .title {
        font-size: 1.125rem;
    }
}
.footer__col .copy {
    font-size: 0.875rem;
    line-height: 135.714286%;
    font-weight: 400;
}
.footer__col .copy b {
    font-weight: 700;
}
.footer__col nav ul li a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    font-size: 0.9375rem;
    transition: color 0.2s ease;
}
.footer__col nav ul li a:not(:hover) {
    color: #575655;
}
.footer__col nav ul li a.current-route {
    text-decoration: underline;
}
@media (max-width: 1100px) {
    .footer {
        padding-top: 5rem;
    }
}
@media (max-width: 640px) {
    .footer {
        padding-top: 3.375rem;
    }
}

/* Socials */
.socials {
    margin-top: auto;
}
.socials .text {
    font-size: 1.25rem;
    line-height: 125%;
    margin-bottom: 1.25rem;
    font-weight: 600;
}
@media (max-width: 640px) {
    .socials .text {
        font-size: 1.125rem;
    }
}
.socials ul {
    display: flex;
}
.socials ul li:not(:last-child) {
    margin-right: 0.75rem;
}
.socials ul li a {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    border: 1px solid #e8d8c9;
    display: flex;
    justify-content: center;
    align-items: center;
}
.socials ul li a svg {
    width: 1.25rem;
    height: 1.25rem;
}
@media (any-hover: hover) {
    .socials ul li a:hover svg {
        fill: #b85000;
    }
}

/* Touch target sizing (48px minimum)
   ========================================================================== */
.mobile-menu__nav ul li a {
    display: flex;
    align-items: center;
    min-height: 3rem;
    font-size: 1rem;
    font-weight: 500;
}

/* Transp button variant */
.wrapper .btn.transp {
    background-color: transparent;
    border: 1px solid var(--color-primary, #b85000);
    color: var(--color-primary, #b85000);
}
.wrapper .btn.transp:hover {
    background-color: var(--color-primary, #b85000);
    color: #fff;
}