*, *::before, *::after {
    box-sizing: border-box
}

html {
    font-family: sans-serif;
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
    display: block
}

body {
    margin: 0;
    font-family: "Montserrat", "arial", "sans-serif";
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1;
    color: #1a1a1a;
    text-align: left;
    background-color: #f8f8f8
}

[tabindex="-1"]:focus:not(:focus-visible) {
    outline: 0 !important
}

hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible
}

h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: .5rem
}

p {
    margin-top: 0;
    margin-bottom: 1rem
}

abbr[title], abbr[data-original-title] {
    text-decoration: underline;
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
    cursor: help;
    border-bottom: 0;
    -webkit-text-decoration-skip-ink: none;
    text-decoration-skip-ink: none
}

address {
    margin-bottom: 1rem;
    font-style: normal;
    line-height: inherit
}

ol, ul, dl {
    margin-top: 0;
    margin-bottom: 1rem
}

ol ol, ul ul, ol ul, ul ol {
    margin-bottom: 0
}

dt {
    font-weight: 700
}

dd {
    margin-bottom: .5rem;
    margin-left: 0
}

blockquote {
    margin: 0 0 1rem
}

b, strong {
    font-weight: bolder
}

small {
    font-size: 80%
}

sub, sup {
    position: relative;
    font-size: 75%;
    line-height: 0;
    vertical-align: baseline
}

sub {
    bottom: -0.25em
}

sup {
    top: -0.5em
}

a {
    color: inherit;
    text-decoration: none;
    background-color: rgba(0, 0, 0, 0);
    color: inherit;
    text-decoration: none
}

a:not([href]):not([class]) {
    color: inherit;
    text-decoration: none;
    color: inherit;
    text-decoration: none
}

pre, code, kbd, samp {
    font-family: "Montserrat", "arial", "sans-serif";
    font-size: 1em
}

pre {
    margin-top: 0;
    margin-bottom: 1rem;
    overflow: auto;
    -ms-overflow-style: scrollbar
}

figure {
    margin: 0 0 1rem
}

img {
    vertical-align: middle;
    border-style: none
}

svg {
    overflow: hidden;
    vertical-align: middle
}

table {
    border-collapse: collapse
}

caption {
    padding-top: .75rem;
    padding-bottom: .75rem;
    color: #6c757d;
    text-align: left;
    caption-side: bottom
}

th {
    text-align: inherit;
    text-align: -webkit-match-parent
}

label {
    display: inline-block;
    margin-bottom: .5rem
}

button {
    border-radius: 0
}

button:focus:not(:focus-visible) {
    outline: 0
}

input, button, select, optgroup, textarea {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit
}

button, input {
    overflow: visible
}

button, select {
    text-transform: none
}

[role=button] {
    cursor: pointer
}

select {
    word-wrap: normal
}

button, [type=button], [type=reset], [type=submit] {
    -webkit-appearance: button
}

button:not(:disabled), [type=button]:not(:disabled), [type=reset]:not(:disabled), [type=submit]:not(:disabled) {
    cursor: pointer
}

button::-moz-focus-inner, [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner {
    padding: 0;
    border-style: none
}

input[type=radio], input[type=checkbox] {
    box-sizing: border-box;
    padding: 0
}

textarea {
    overflow: auto;
    resize: vertical
}

fieldset {
    min-width: 0;
    padding: 0;
    margin: 0;
    border: 0
}

legend {
    display: block;
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin-bottom: .5rem;
    font-size: 1.5rem;
    line-height: inherit;
    color: inherit;
    white-space: normal
}

progress {
    vertical-align: baseline
}

[type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button {
    height: auto
}

[type=search] {
    outline-offset: -2px;
    -webkit-appearance: none
}

[type=search]::-webkit-search-decoration {
    -webkit-appearance: none
}

::-webkit-file-upload-button {
    font: inherit;
    -webkit-appearance: button
}

output {
    display: inline-block
}

summary {
    display: list-item;
    cursor: pointer
}

template {
    display: none
}

[hidden] {
    display: none !important
}

.container, .container-fluid {
    width: 100%;
    padding-right: 0;
    padding-left: 0;
    margin-right: auto;
    margin-left: auto
}

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

.no-gutters {
    margin-right: 0;
    margin-left: 0
}

.no-gutters > .col, .no-gutters > [class*=col-] {
    padding-right: 0;
    padding-left: 0
}

.col-lg, .col-lg-auto, .col-lg-12, .col-lg-11, .col-lg-10, .col-lg-9, .col-lg-8, .col-lg-7, .col-lg-6, .col-lg-5, .col-lg-4, .col-lg-3, .col-lg-2, .col-lg-1, .col, .col-auto, .col-12, .col-11, .col-10, .col-9, .col-8, .col-7, .col-6, .col-5, .col-4, .col-3, .col-2, .col-1 {
    position: relative;
    width: 100%;
    padding-right: 0;
    padding-left: 0
}

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

.row-cols-1 > * {
    flex: 0 0 100%;
    max-width: 100%
}

.row-cols-2 > * {
    flex: 0 0 50%;
    max-width: 50%
}

.row-cols-3 > * {
    flex: 0 0 33.3333333333%;
    max-width: 33.3333333333%
}

.row-cols-4 > * {
    flex: 0 0 25%;
    max-width: 25%
}

.row-cols-5 > * {
    flex: 0 0 20%;
    max-width: 20%
}

.row-cols-6 > * {
    flex: 0 0 16.6666666667%;
    max-width: 16.6666666667%
}

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

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

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

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

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

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

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

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

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

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

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

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

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

.order-first {
    order: -1
}

.order-last {
    order: 13
}

.order-0 {
    order: 0
}

.order-1 {
    order: 1
}

.order-2 {
    order: 2
}

.order-3 {
    order: 3
}

.order-4 {
    order: 4
}

.order-5 {
    order: 5
}

.order-6 {
    order: 6
}

.order-7 {
    order: 7
}

.order-8 {
    order: 8
}

.order-9 {
    order: 9
}

.order-10 {
    order: 10
}

.order-11 {
    order: 11
}

.order-12 {
    order: 12
}

.offset-1 {
    margin-left: 8.33333333%
}

.offset-2 {
    margin-left: 16.66666667%
}

.offset-3 {
    margin-left: 25%
}

.offset-4 {
    margin-left: 33.33333333%
}

.offset-5 {
    margin-left: 41.66666667%
}

.offset-6 {
    margin-left: 50%
}

.offset-7 {
    margin-left: 58.33333333%
}

.offset-8 {
    margin-left: 66.66666667%
}

.offset-9 {
    margin-left: 75%
}

.offset-10 {
    margin-left: 83.33333333%
}

.offset-11 {
    margin-left: 91.66666667%
}

@media (min-width: 1025px) {
    .col-lg {
        flex-basis: 0;
        flex-grow: 1;
        max-width: 100%
    }

    .row-cols-lg-1 > * {
        flex: 0 0 100%;
        max-width: 100%
    }

    .row-cols-lg-2 > * {
        flex: 0 0 50%;
        max-width: 50%
    }

    .row-cols-lg-3 > * {
        flex: 0 0 33.3333333333%;
        max-width: 33.3333333333%
    }

    .row-cols-lg-4 > * {
        flex: 0 0 25%;
        max-width: 25%
    }

    .row-cols-lg-5 > * {
        flex: 0 0 20%;
        max-width: 20%
    }

    .row-cols-lg-6 > * {
        flex: 0 0 16.6666666667%;
        max-width: 16.6666666667%
    }

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

    .col-lg-1 {
        flex: 0 0 8.33333333%;
        max-width: 8.33333333%
    }

    .col-lg-2 {
        flex: 0 0 16.66666667%;
        max-width: 16.66666667%
    }

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

    .col-lg-4 {
        flex: 0 0 33.33333333%;
        max-width: 33.33333333%
    }

    .col-lg-5 {
        flex: 0 0 41.66666667%;
        max-width: 41.66666667%
    }

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

    .col-lg-7 {
        flex: 0 0 58.33333333%;
        max-width: 58.33333333%
    }

    .col-lg-8 {
        flex: 0 0 66.66666667%;
        max-width: 66.66666667%
    }

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

    .col-lg-10 {
        flex: 0 0 83.33333333%;
        max-width: 83.33333333%
    }

    .col-lg-11 {
        flex: 0 0 91.66666667%;
        max-width: 91.66666667%
    }

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

    .order-lg-first {
        order: -1
    }

    .order-lg-last {
        order: 13
    }

    .order-lg-0 {
        order: 0
    }

    .order-lg-1 {
        order: 1
    }

    .order-lg-2 {
        order: 2
    }

    .order-lg-3 {
        order: 3
    }

    .order-lg-4 {
        order: 4
    }

    .order-lg-5 {
        order: 5
    }

    .order-lg-6 {
        order: 6
    }

    .order-lg-7 {
        order: 7
    }

    .order-lg-8 {
        order: 8
    }

    .order-lg-9 {
        order: 9
    }

    .order-lg-10 {
        order: 10
    }

    .order-lg-11 {
        order: 11
    }

    .order-lg-12 {
        order: 12
    }

    .offset-lg-0 {
        margin-left: 0
    }

    .offset-lg-1 {
        margin-left: 8.33333333%
    }

    .offset-lg-2 {
        margin-left: 16.66666667%
    }

    .offset-lg-3 {
        margin-left: 25%
    }

    .offset-lg-4 {
        margin-left: 33.33333333%
    }

    .offset-lg-5 {
        margin-left: 41.66666667%
    }

    .offset-lg-6 {
        margin-left: 50%
    }

    .offset-lg-7 {
        margin-left: 58.33333333%
    }

    .offset-lg-8 {
        margin-left: 66.66666667%
    }

    .offset-lg-9 {
        margin-left: 75%
    }

    .offset-lg-10 {
        margin-left: 83.33333333%
    }

    .offset-lg-11 {
        margin-left: 91.66666667%
    }
}

.nav {
    display: flex;
    flex-wrap: wrap;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none
}

.nav-link {
    display: block;
    padding: .875rem 1.375rem
}

.nav-link:hover, .nav-link:focus {
    text-decoration: none
}

.nav-link.disabled {
    color: #6c757d;
    pointer-events: none;
    cursor: default
}

.nav-tabs {
    border-bottom: 0 solid rgba(0, 0, 0, 0)
}

.nav-tabs .nav-link {
    margin-bottom: 0;
    background-color: rgba(0, 0, 0, 0);
    border: 0 solid rgba(0, 0, 0, 0);
    border-top-left-radius: 0;
    border-top-right-radius: 0
}

.nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus {
    isolation: isolate;
    border-color: #df2b2a
}

.nav-tabs .nav-link.disabled {
    color: #6c757d;
    background-color: rgba(0, 0, 0, 0);
    border-color: rgba(0, 0, 0, 0)
}

.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
    color: #1a1a1a;
    background-color: rgba(0, 0, 0, 0);
    border-color: #df2b2a
}

.nav-tabs .dropdown-menu {
    margin-top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0
}

.nav-pills .nav-link {
    background: none;
    border: 0;
    border-radius: 22.5px
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    color: #f3afaf;
    background-color: #df2b2a
}

.nav-fill > .nav-link, .nav-fill .nav-item {
    flex: 1 1 auto;
    text-align: center
}

.nav-justified > .nav-link, .nav-justified .nav-item {
    flex-basis: 0;
    flex-grow: 1;
    text-align: center
}

.tab-content > .tab-pane {
    display: none
}

.tab-content > .active {
    display: block
}

.close {
    float: right;
    font-size: 1.3125rem;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: .5;
    color: #000;
    text-decoration: none
}

.close:not(:disabled):not(.disabled):hover, .close:not(:disabled):not(.disabled):focus {
    opacity: .75
}

button.close {
    padding: 0;
    background-color: rgba(0, 0, 0, 0);
    border: 0
}

a.close.disabled {
    pointer-events: none
}

.modal-open {
    overflow: hidden
}

.modal-open .modal {
    overflow-x: hidden;
    overflow-y: auto
}

.modal {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 7;
    display: none;
    width: 100%;
    height: 100%;
    overflow: hidden;
    outline: 0
}

.modal-dialog {
    position: relative;
    width: auto;
    margin: 0;
    pointer-events: none
}

.modal.fade .modal-dialog {
    transition: transform .3s ease-out;
    transform: translate(calc(100% + 50px))
}

@media (prefers-reduced-motion: reduce) {
    .modal.fade .modal-dialog {
        transition: none
    }
}

.modal.show .modal-dialog {
    transform: none
}

.modal.modal-static .modal-dialog {
    transform: scale(1.02)
}

.modal-dialog-scrollable {
    display: flex;
    max-height: 100%
}

.modal-dialog-scrollable .modal-content {
    max-height: 100vh;
    overflow: hidden
}

.modal-dialog-scrollable .modal-header, .modal-dialog-scrollable .modal-footer {
    flex-shrink: 0
}

.modal-dialog-scrollable .modal-body {
    overflow-y: auto
}

.modal-dialog-centered {
    display: flex;
    align-items: center;
    min-height: 100%
}

.modal-dialog-centered::before {
    display: block;
    height: 100vh;
    height: min-content;
    content: ""
}

.modal-dialog-centered.modal-dialog-scrollable {
    flex-direction: column;
    justify-content: center;
    height: 100%
}

.modal-dialog-centered.modal-dialog-scrollable .modal-content {
    max-height: none
}

.modal-dialog-centered.modal-dialog-scrollable::before {
    content: none
}

.modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    pointer-events: auto;
    background-color: #fff;
    background-clip: padding-box;
    border: 0 solid rgba(0, 0, 0, 0);
    border-radius: 0;
    outline: 0
}

.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 6;
    width: 100vw;
    height: 100vh;
    background-color: #000
}

.modal-backdrop.fade {
    opacity: 0
}

.modal-backdrop.show {
    opacity: .3
}

.modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 0 solid rgba(0, 0, 0, 0);
    border-top-left-radius: 0;
    border-top-right-radius: 0
}

.modal-header .close {
    padding: 10px 0;
    margin: -10px 0 -10px auto
}

.modal-title {
    margin-bottom: 0;
    line-height: 1
}

.modal-body {
    position: relative;
    flex: 1 1 auto;
    padding: 0
}

.modal-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    padding: -0.25rem;
    border-top: 0 solid rgba(0, 0, 0, 0);
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0
}

.modal-footer > * {
    margin: .25rem
}

.modal-scrollbar-measure {
    position: absolute;
    top: -9999px;
    width: 50px;
    height: 50px;
    overflow: scroll
}

.modal-dialog {
    max-width: 392px;
    margin: 0 auto
}

.modal-dialog-scrollable {
    max-height: 100%
}

.modal-dialog-scrollable .modal-content {
    max-height: 100vh
}

.modal-dialog-centered {
    min-height: 100%
}

.modal-dialog-centered::before {
    height: 100vh;
    height: min-content
}

.modal-sm {
    max-width: 300px
}

@media (min-width: 1025px) {
    .modal-lg, .modal-xl {
        max-width: 392px
    }
}

.modal-xl {
    max-width: 1140px
}

@keyframes splide-loading {
    0% {
        transform: rotate(0)
    }
    to {
        transform: rotate(1turn)
    }
}

.splide__track--draggable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none
}

.splide__track--fade > .splide__list > .splide__slide {
    margin: 0 !important;
    opacity: 0;
    z-index: 0
}

.splide__track--fade > .splide__list > .splide__slide.is-active {
    opacity: 1;
    z-index: 1
}

.splide--rtl {
    direction: rtl
}

.splide__track--ttb > .splide__list {
    display: block
}

.splide__container {
    box-sizing: border-box;
    position: relative
}

.splide__list {
    backface-visibility: hidden;
    display: flex;
    height: 100%;
    margin: 0 !important;
    padding: 0 !important
}

.splide.is-initialized:not(.is-active) .splide__list {
    display: block
}

.splide__pagination {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -10px;
    background: #ffffff;
    border-radius: 15px;
    padding: 5px 8px;
}

.splide__pagination li {
    display: inline-block;
    line-height: 1;
    list-style-type: none;
    margin: 0;
    pointer-events: auto
}

.splide:not(.is-overflow) .splide__pagination {
    display: none
}

.splide__progress__bar {
    width: 0
}

.splide {
    position: relative;
    visibility: hidden
}

.splide.is-initialized, .splide.is-rendered {
    visibility: visible
}

.splide__slide {
    backface-visibility: hidden;
    box-sizing: border-box;
    flex-shrink: 0;
    list-style-type: none !important;
    margin: 0;
    position: relative
}

.splide__slide img {
    vertical-align: bottom
}

.splide__spinner {
    animation: splide-loading 1s linear infinite;
    border: 2px solid #999;
    border-left-color: rgba(0, 0, 0, 0);
    border-radius: 50%;
    bottom: 0;
    contain: strict;
    display: inline-block;
    height: 20px;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
    width: 20px
}

.splide__sr {
    clip: rect(0 0 0 0);
    border: 0;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px
}

.splide__toggle.is-active .splide__toggle__play, .splide__toggle__pause {
    display: none
}

.splide__toggle.is-active .splide__toggle__pause {
    display: inline
}

.splide__track {
    overflow: hidden;
    position: relative;
    z-index: 0
}

.splide__pagination {
    gap: 6px
}

.splide__pagination__page {
    --bullet-width: 10px;
    --bullet-bg: #ebeef0;
    width: var(--bullet-width);
    height: 10px;
    border-radius: 30px;
    background-color: var(--bullet-bg);
}

.splide__pagination__page.is-active {
    --bullet-width: 10px;
    --bullet-bg: #1a1a1a;
}

.pika-single {
    z-index: 9999;
    display: block;
    position: absolute !important;
    top: 41px !important;
    color: #1a1a1a;
    background: #f8f8f8;
    width: 100%;
    max-width: 400px
}

.pika-single.is-hidden {
    display: none
}

.pika-single.is-bound {
    position: absolute
}

.pika-single {
    padding: 16px
}

.pika-single:before, .pika-single:after {
    content: " ";
    display: table
}

.pika-single:after {
    clear: both
}

.pika-title {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 5px
}

.pika-title select {
    cursor: pointer;
    position: absolute;
    z-index: 9998;
    margin: 0;
    left: 0;
    top: 0;
    opacity: 0;
    height: 100%;
    width: 100%
}

.pika-title > *:nth-child(1) {
    order: 2
}

.pika-title > *:nth-child(2) {
    order: 3
}

.pika-label {
    flex: 1;
    display: inline-flex;
    height: 32px;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 9999;
    overflow: hidden;
    font-size: 12px;
    color: #1a1a1a;
    background-color: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 4px
}

.pika-prev, .pika-next {
    display: block;
    cursor: pointer;
    outline: none;
    overflow: hidden
}

.pika-prev:hover, .pika-next:hover {
    opacity: 1
}

.pika-prev.is-disabled, .pika-next.is-disabled {
    cursor: default;
    opacity: .2
}

.pika-prev, .is-rtl .pika-next {
    float: left;
    width: 16px !important;
    height: 16px !important;
    text-indent: -9999px;
    transform: scale(-1);
    order: 1;
    margin-right: auto
}

.pika-next, .is-rtl .pika-prev {
    float: right;
    width: 16px !important;
    height: 16px !important;
    text-indent: -9999px;
    order: 4;
    margin-left: auto
}

.pika-select {
    display: inline-block
}

.pika-table {
    border-collapse: collapse;
    border-spacing: 0;
    border: 0;
    margin: 0 auto;
    width: 100%
}

.pika-table th, .pika-table td {
    width: 14.2857142857%;
    padding: 0;
    text-align: center;
    padding: 2px
}

.pika-table th {
    color: #1a1a1a;
    font-size: 12px;
    padding: 7px 0;
    font-weight: normal;
    text-align: center
}

.pika-table abbr {
    border-bottom: none;
    cursor: help;
    text-decoration: none
}

.pika-button {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none;
    width: 100%;
    max-width: 48px;
    height: 32px;
    color: #1a1a1a;
    font-size: 12px;
    text-align: center;
    background: #fff
}

.is-today .pika-button {
    background: #df2b2a;
    color: #fff
}

.is-selected .pika-button {
    color: #fff;
    background: #f3afaf
}

.is-disabled .pika-button, .is-outside-current-month .pika-button {
    color: #7f7f7f
}

.is-disabled .pika-button {
    pointer-events: none;
    cursor: default;
    opacity: .3
}

.pika-button:hover {
    color: #1a1a1a;
    background: #fadcdc;
    box-shadow: none
}

.pika-button .is-selection-disabled {
    pointer-events: none;
    cursor: default
}

.pika-week {
    font-size: 11px;
    color: #7f7f7f
}

.is-inrange .pika-button {
    color: #1a1a1a;
    background: #e5e5e5
}

.is-startrange .pika-button {
    color: #f3f3f3;
    background: #fff;
    box-shadow: none;
    border-radius: 3px
}

.is-endrange .pika-button {
    color: #f3f3f3;
    background: #fff;
    box-shadow: none;
    border-radius: 3px
}

@font-face {
    font-family: "Montserrat";
    src: url(../_ui/responsive/theme-ipragaz/fonts/Montserrat-Thin.ttf) format("truetype");
    font-weight: 100;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: "Montserrat";
    src: url(../_ui/responsive/theme-ipragaz/fonts/Montserrat-ThinItalic.ttf) format("truetype");
    font-weight: 100;
    font-style: italic;
    font-display: swap
}

@font-face {
    font-family: "Montserrat";
    src: url(../_ui/responsive/theme-ipragaz/fonts/Montserrat-ExtraLight.ttf) format("truetype");
    font-weight: 200;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: "Montserrat";
    src: url(../_ui/responsive/theme-ipragaz/fonts/Montserrat-ExtraLightItalic.ttf) format("truetype");
    font-weight: 200;
    font-style: italic;
    font-display: swap
}

@font-face {
    font-family: "Montserrat";
    src: url(../_ui/responsive/theme-ipragaz/fonts/Montserrat-Light.ttf) format("truetype");
    font-weight: 300;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: "Montserrat";
    src: url(../_ui/responsive/theme-ipragaz/fonts/Montserrat-LightItalic.ttf) format("truetype");
    font-weight: 300;
    font-style: italic;
    font-display: swap
}

@font-face {
    font-family: "Montserrat";
    src: url(../_ui/responsive/theme-ipragaz/fonts/Montserrat-Regular.ttf) format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: "Montserrat";
    src: url(../_ui/responsive/theme-ipragaz/fonts/Montserrat-Italic.ttf) format("truetype");
    font-weight: 400;
    font-style: italic;
    font-display: swap
}

@font-face {
    font-family: "Montserrat";
    src: url(../_ui/responsive/theme-ipragaz/fonts/Montserrat-Medium.ttf) format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: "Montserrat";
    src: url(../_ui/responsive/theme-ipragaz/fonts/Montserrat-MediumItalic.ttf) format("truetype");
    font-weight: 500;
    font-style: italic;
    font-display: swap
}

@font-face {
    font-family: "Montserrat";
    src: url(../_ui/responsive/theme-ipragaz/fonts/Montserrat-SemiBold.ttf) format("truetype");
    font-weight: 600;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: "Montserrat";
    src: url(../_ui/responsive/theme-ipragaz/fonts/Montserrat-SemiBoldItalic.ttf) format("truetype");
    font-weight: 600;
    font-style: italic;
    font-display: swap
}

@font-face {
    font-family: "Montserrat";
    src: url(../_ui/responsive/theme-ipragaz/fonts/Montserrat-Bold.ttf) format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: "Montserrat";
    src: url(../_ui/responsive/theme-ipragaz/fonts/Montserrat-BoldItalic.ttf) format("truetype");
    font-weight: 700;
    font-style: italic;
    font-display: swap
}

@font-face {
    font-family: "Montserrat";
    src: url(../_ui/responsive/theme-ipragaz/fonts/Montserrat-ExtraBold.ttf) format("truetype");
    font-weight: 800;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: "Montserrat";
    src: url(../_ui/responsive/theme-ipragaz/fonts/Montserrat-ExtraBoldItalic.ttf) format("truetype");
    font-weight: 800;
    font-style: italic;
    font-display: swap
}

@font-face {
    font-family: "Montserrat";
    src: url(../_ui/responsive/theme-ipragaz/fonts/Montserrat-Black.ttf) format("truetype");
    font-weight: 900;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: "Montserrat";
    src: url(../_ui/responsive/theme-ipragaz/fonts/Montserrat-BlackItalic.ttf) format("truetype");
    font-weight: 900;
    font-style: italic;
    font-display: swap
}

@font-face {
    font-family: "SourceSerif4";
    src: url(../_ui/responsive/theme-ipragaz/fonts/SourceSerif4-ExtraLight.ttf) format("truetype");
    font-weight: 200;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: "SourceSerif4";
    src: url(../_ui/responsive/theme-ipragaz/fonts/SourceSerif4-ExtraLightItalic.ttf) format("truetype");
    font-weight: 200;
    font-style: italic;
    font-display: swap
}

@font-face {
    font-family: "SourceSerif4";
    src: url(../_ui/responsive/theme-ipragaz/fonts/SourceSerif4-Light.ttf) format("truetype");
    font-weight: 300;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: "SourceSerif4";
    src: url(../_ui/responsive/theme-ipragaz/fonts/SourceSerif4-LightItalic.ttf) format("truetype");
    font-weight: 300;
    font-style: italic;
    font-display: swap
}

@font-face {
    font-family: "SourceSerif4";
    src: url(../_ui/responsive/theme-ipragaz/fonts/SourceSerif4-Regular.ttf) format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: "SourceSerif4";
    src: url(../_ui/responsive/theme-ipragaz/fonts/SourceSerif4-Italic.ttf) format("truetype");
    font-weight: 400;
    font-style: italic;
    font-display: swap
}

@font-face {
    font-family: "SourceSerif4";
    src: url(../_ui/responsive/theme-ipragaz/fonts/SourceSerif4-Medium.ttf) format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: "SourceSerif4";
    src: url(../_ui/responsive/theme-ipragaz/fonts/SourceSerif4-MediumItalic.ttf) format("truetype");
    font-weight: 500;
    font-style: italic;
    font-display: swap
}

@font-face {
    font-family: "SourceSerif4";
    src: url(../_ui/responsive/theme-ipragaz/fonts/SourceSerif4-SemiBold.ttf) format("truetype");
    font-weight: 600;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: "SourceSerif4";
    src: url(../_ui/responsive/theme-ipragaz/fonts/SourceSerif4-SemiBoldItalic.ttf) format("truetype");
    font-weight: 600;
    font-style: italic;
    font-display: swap
}

@font-face {
    font-family: "SourceSerif4";
    src: url(../_ui/responsive/theme-ipragaz/fonts/SourceSerif4-Bold.ttf) format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: "SourceSerif4";
    src: url(../_ui/responsive/theme-ipragaz/fonts/SourceSerif4-BoldItalic.ttf) format("truetype");
    font-weight: 700;
    font-style: italic;
    font-display: swap
}

@font-face {
    font-family: "SourceSerif4";
    src: url(../_ui/responsive/theme-ipragaz/fonts/SourceSerif4-ExtraBold.ttf) format("truetype");
    font-weight: 800;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: "SourceSerif4";
    src: url(../_ui/responsive/theme-ipragaz/fonts/SourceSerif4-ExtraBoldItalic.ttf) format("truetype");
    font-weight: 800;
    font-style: italic;
    font-display: swap
}

@font-face {
    font-family: "SourceSerif4";
    src: url(../_ui/responsive/theme-ipragaz/fonts/SourceSerif4-Black.ttf) format("truetype");
    font-weight: 900;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: "SourceSerif4";
    src: url(../_ui/responsive/theme-ipragaz/fonts/SourceSerif4-BlackItalic.ttf) format("truetype");
    font-weight: 900;
    font-style: italic;
    font-display: swap
}

svg.icon {
    flex: none !important;
    display: inline-block;
    vertical-align: middle;
    width: 1em;
    height: 1em;
    font-size: 24px;
    stroke-width: 0;
    stroke: currentColor;
    fill: currentColor
}

.svg, .blc-info .bli-time::after, .cos-bonus::before, .cos-close, .cds-address-addon .btn-add::before, .ppd-cta::after, .ppc-header-back, .ppl-coupon::after, .ppl-coupon::before, .ppl-summary-toggle, .cdp-branches .btn-go-branches::after, .cdp-guide-content li::before, .pls-cta::after, .pdp-offer-remained::before, .pdp-offer-date::before, .pdp-like, .pci-sent::before, .pci-resend::before, .pci-code::after, .pai-delete::before, .poi-title::before, .upi::before, .upi::after, .upm-settings, .upo-close, .ccf-resend button::before, .lgn-back::before, .bli-time::before, .cpi-bonus-date::before, .cpi-applied::before, .cpi-remained::before, .cpi-date::before, .cpi-badge .tag::before, .prd-like, .ntf-close, .hmm-link::after, .hmm-close, .gdc-copy::before, .mnp-close, .muo-resend::before, .mbm-current::before, .bsi-cta::after, .cii-header::before, .modal-header .close-modal::after, .modal-header .close-modal::before, .rate label, .pgn-dir, .msg-warning::before, .btn-video-thumb::after, .info::before, .cpn-inner::before, .cpn::before, .cpn::after, .qty-remove .qty-minus::after, .qty-plus, .qty-minus, .seo-more::after, .acc-header > button::after, .fdd button::after, .select .wrp::after, .checkbox label::after, .radio label::after, .checkbox label::before, .radio label::before, .link-location::before, .link-dir::after, .pika-prev, .is-rtl .pika-next, .pika-next, .is-rtl .pika-prev {
    background: url(../_ui/responsive/theme-ipragaz/images/sprite-bg.svg) no-repeat;
    width: 32px;
    height: 32px;
    display: block
}

.svg-arrow-sm-dark, .ppc-header-back, .ppl-coupon::after, .cdp-branches .btn-go-branches::after, .lgn-back::before, .hmm-link::after, .modal-header .close-modal::after, .link-dir::after {
    background-position: 0 0
}

.svg-arrow-sm-red, .gsi-cta .link-dir::after, .bsi-cta::after {
    background-position: 0 1.1379800853%
}

.svg-arrow-sm-white {
    background-position: 0 2.2759601707%
}

.svg-box-sm-blue, .poi.process .poi-title::before {
    background-position: 0 3.413940256%
}

.svg-btn-minus {
    background-position: 0 4.6043165468%
}

.svg-btn-minus-sm, .qty-minus {
    background-position: 0 6.8571428571%
}

.svg-btn-plus {
    background-position: 0 8.4892086331%
}

.svg-btn-plus-sm, .qty-plus {
    background-position: 0 10.7142857143%
}

.svg-calendar-sm-grey, .pdp-offer-date::before, .cpi-date::before {
    background-position: 0 12.2332859175%
}

.svg-check-md-blue, .cdp-guide-content li::before {
    background-position: 0 13.4477825465%
}

.svg-check-sm-dark, .pci-code.copied::after, .poi.delivered .poi-title::before, .cpi-applied::before {
    background-position: 0 15.0782361309%
}

.svg-check-sm-green, .pci-sent::before {
    background-position: 0 16.2162162162%
}

.svg-checkbox-off, .checkbox label::before {
    background-position: 0 17.4535050072%
}

.svg-checkbox-on, .checkbox label::after {
    background-position: 0 19.1702432046%
}

.svg-cmp-star, .cpi-badge .tag::before {
    background-position: 0 20.7092198582%
}

.svg-copy-md-red, .gdc-copy::before {
    background-position: 0 21.6833095578%
}

.svg-copy-sm-dark, .pci-code::after {
    background-position: 0 23.0440967283%
}

.svg-coupon-prefix, .cpn::before, .cpn::after {
    background-position: 0 25.2225519288%
}

.svg-cross-sm-dark, .cos-close, .poi.cancelled .poi-title::before, .upo-close, .ntf-close, .hmm-close, .mnp-close, .modal-header .close-modal::before {
    background-position: 0 29.4452347084%
}

.svg-dir-down-dark, .ppd-cta::after, .ppl-summary-toggle, .seo-more::after, .acc-header > button::after {
    background-position: 0 30.5832147937%
}

.svg-dir-down-grey, .fdd button::after, .select .wrp::after {
    background-position: 0 31.7211948791%
}

.svg-dir-sm-dark, .upi::after, .pika-prev, .is-rtl .pika-next, .pika-next, .is-rtl .pika-prev {
    background-position: 0 32.8591749644%
}

.svg-dir-sm-red, .upi::before {
    background-position: 0 33.9971550498%
}

.svg-dir-sm-white {
    background-position: 0 35.1351351351%
}

.svg-important-sm-grey, .cpi-bonus-date::before {
    background-position: 0 36.2731152205%
}

.svg-info-sm-grey, .info::before {
    background-position: 0 37.4110953058%
}

.svg-like-off, .prd-like {
    background-position: 0 38.9928057554%
}

.svg-like-off-2, .pdp-like {
    background-position: 0 41.2949640288%
}

.svg-like-on, .pdp-like.added, .prd-like.added {
    background-position: 0 43.5971223022%
}

.svg-location-18px-red, .link-location::before {
    background-position: 0 45.4415954416%
}

.svg-next-off, .pgn-next.disabled {
    background-position: 0 47.1942446043%
}

.svg-next-on, .pgn-next {
    background-position: 0 49.4964028777%
}

.svg-percentage, .ppl-coupon::before, .cii-header::before {
    background-position: 0 51.2091038407%
}

.svg-phone-sm-dark {
    background-position: 0 52.347083926%
}

.svg-play-circle-light, .btn-video-thumb::after {
    background-position: 0 54.730713246%
}

.svg-plus-sm-dark, .cds-address-addon .btn-add::before {
    background-position: 0 56.8990042674%
}

.svg-plus-sm-light {
    background-position: 0 58.0369843528%
}

.svg-plus-sm-red {
    background-position: 0 59.1749644381%
}

.svg-pomp-32, .mbm-current::before {
    background-position: 0 61.0071942446%
}

.svg-prev-off, .pgn-prev.disabled {
    background-position: 0 63.309352518%
}

.svg-prev-on, .pgn-prev {
    background-position: 0 65.6115107914%
}

.svg-radio-off, .radio label::before {
    background-position: 0 67.5250357654%
}

.svg-radio-on, .radio label::after {
    background-position: 0 69.2417739628%
}

.svg-reload-sm-grey, .ccf-resend button[disabled]::before {
    background-position: 0 70.5547652916%
}

.svg-reload-sm-red, .pci-resend::before, .ccf-resend button::before {
    background-position: 0 71.692745377%
}

.svg-remove-sm-red, .pai-delete::before, .qty-remove .qty-minus::after {
    background-position: 0 72.8307254623%
}

.svg-resend-md-grey, .muo-resend[disabled]::before {
    background-position: 0 74.3919885551%
}

.svg-resend-md-red, .muo-resend::before {
    background-position: 0 76.1087267525%
}

.svg-settings, .upm-settings {
    background-position: 0 78.7264833575%
}

.svg-sort, .pls-cta::after {
    background-position: 0 80.5714285714%
}

.svg-star-empty, .rate label {
    background-position: 0 83.6972343523%
}

.svg-star-full, .rate fieldset:not(:checked) > label:hover, .rate fieldset:not(:checked) > label:hover ~ label, .rate fieldset > input:checked ~ label {
    background-position: 0 87.1906841339%
}

.svg-stars-empty {
    background-position: 0 90.6841339156%
}

.svg-stars-full {
    background-position: 0 94.1775836972%
}

.svg-tag, .cos-bonus::before, .cpn-inner::before {
    background-position: 0 96.5467625899%
}

.svg-time-sm-grey, .pdp-offer-remained::before, .bli-time::before, .cpi-remained::before {
    background-position: 0 97.7240398293%
}

.svg-time-sm-light, .blc-info .bli-time::after {
    background-position: 0 98.8620199147%
}

.svg-warning-sm-red, .msg-warning::before {
    background-position: 0 100%
}

@keyframes show {
    0% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}

@keyframes hide {
    0% {
        opacity: 1
    }
    100% {
        opacity: 0
    }
}

@keyframes toTop {
    0% {
        transform: translateY(100%);
        opacity: 0
    }
    100% {
        transform: translateY(0);
        opacity: 1
    }
}

@keyframes toBottom {
    0% {
        transform: translateY(0);
        opacity: 0
    }
    100% {
        transform: translateY(100%);
        opacity: 1
    }
}

@keyframes toRight {
    0% {
        transform: translateX(-100%);
        opacity: 0
    }
    100% {
        transform: translateX(0);
        opacity: 1
    }
}

@keyframes toLeft {
    0% {
        transform: translateX(100%);
        opacity: 0
    }
    100% {
        transform: translateX(0);
        opacity: 1
    }
}

@keyframes rotating {
    to {
        transform: rotate(360deg)
    }
}

:root {
    --fs-link: 0.625rem;
    --fs-px-link: 10px;
    --lh-link: 1.2;
    --fs-link-hl: 0.625rem;
    --fs-px-link-hl: 10px;
    --lh-link-hl: 1.2;
    --fw-link-hl: 500;
    --fs-info: 0.75rem;
    --fs-px-info: 12px;
    --lh-info: 1.3;
    --fs-info-hl: 0.75rem;
    --fs-px-info-hl: 12px;
    --lh-info-hl: 1.3;
    --fw-info-hl: 500;
    --fs-body: 0.875rem;
    --fs-px-body: 14px;
    --lh-body: 1.4;
    --fs-body-md: 0.875rem;
    --fs-px-body-md: 14px;
    --lh-body-md: 1.4;
    --fw-body-md: 500;
    --fs-h1: 1.5rem;
    --fs-px-h1: 24px;
    --lh-h1: 1.2;
    --fw-h1: 700;
    --fs-h2: 1.25rem;
    --fs-px-h2: 20px;
    --lh-h2: 1.2;
    --fw-h2: 500;
    --fs-title: 1.125rem;
    --fs-px-title: 18px;
    --lh-title: 1.2;
    --fw-title: 500;
    --fs-title-lg: 1rem;
    --fs-px-title-lg: 16px;
    --lh-title-lg: 1.4;
    --fw-title-lg: 500;
    --fs-text-lg: 1rem;
    --fs-px-text-lg: 16px;
    --lh-text-lg: 1.4;
    --fs-ch-body: 0.875rem;
    --fs-px-ch-body: 14px;
    --lh-ch-body: 1.4;
    --ff-ch-body: Montserrat, arial, sans-serif;
    --fs-ch-big: 1rem;
    --fs-px-ch-big: 16px;
    --lh-ch-big: 1.4;
    --ff-ch-big: Montserrat, arial, sans-serif
}

html {
    font-family: "Montserrat", "arial", "sans-serif";
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    font-weight: var(--fw-body);
    background-color: #f8f8f8;
    color: #1a1a1a
}

body {
    overflow: auto;
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    font-weight: var(--fw-body)
}

::selection {
    background: #df2b2a;
    color: #fff;
    text-shadow: none
}

img {
    max-width: 100%;
    display: block;
    width: auto;
    height: auto;
    font-style: italic;
    background-repeat: no-repeat
}

.responsive {
    font-size: 0;
    overflow: hidden
}

.responsive img {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    font-weight: var(--fw-body)
}

picture {
    text-align: center;
    display: inline-block;
    width: 100%
}

picture img {
    width: 100%
}

a {
    cursor: pointer;
    outline: none;
    text-decoration: none
}

p a {
    text-decoration: underline
}

b {
    font-weight: 500
}

input {
    outline: none
}

input[type=number] {
    appearance: textfield
}

input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
    -webkit-appearance: none
}

input::-ms-reveal, input::-ms-clear {
    display: none
}

textarea {
    resize: none
}

.clearfix::after {
    display: block;
    clear: both;
    content: ""
}

figure {
    margin: 0
}

button {
    padding: 0;
    background: none;
    border: none;
    color: inherit;
    text-align: left;
    cursor: pointer
}

button:focus {
    outline: none
}

.breadcrumb ol, .ul-clear {
    padding: 0;
    margin: 0;
    list-style: none
}

.legal ul, .ul-styled {
    padding-left: 12px;
    margin: 0
}

.lazy {
    opacity: 0;
    transition: opacity .222s linear 0s
}

@media (prefers-reduced-motion: reduce) {
    .lazy {
        transition: none
    }
}

.lazy.loaded, .lazy.error, .lazy.bg-load {
    opacity: 1
}

#overlay {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 3;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .5);
    animation: show .2s ease
}

.page-processing::after {
    display: block;
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%);
    background: url(../_ui/responsive/theme-ipragaz/images/loader.svg) center center no-repeat;
    background-size: cover
}

.page-processing #overlay {
    display: block;
    z-index: 10
}

.page-processing::after {
    content: "";
    z-index: 10
}

[class*=container-max-] {
    width: 100%;
    margin-inline: auto
}

.breadcrumb {
    --brd-height: 28px;
    --brd-padding-inline: 16px;
    display: flex;
    align-items: center;
    height: var(--brd-height);
    padding-inline: var(--brd-padding-inline);
    white-space: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar
}

.breadcrumb ol {
    display: flex;
    align-items: center
}

.breadcrumb li + li::before {
    content: "/";
    display: inline-block;
    margin-inline: 8px 6px
}

.breadcrumb li:last-child span {
    color: #404040
}

.breadcrumb li a, .breadcrumb li span {
    font-size: var(--fs-info);
    line-height: var(--lh-info);
    font-weight: var(--fw-info)
}

.breadcrumb::-webkit-scrollbar {
    display: none
}

.link-inline {
    text-decoration: underline
}

.link-dir {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    line-height: 1
}

.link-dir::after {
    content: "";
    flex: 0 0 16px;
    height: 16px
}

.link-location {
    display: inline-flex;
    align-items: center;
    gap: 4px
}

.link-location::before {
    content: "";
    flex: 0 0 18px;
    height: 18px
}

.link-location span {
    font-size: var(--fs-body-md);
    line-height: var(--lh-body-md);
    font-weight: var(--fw-body-md);
    line-height: 1;
    color: #df2b2a
}

.btn, .gsl-details .gsi-cta .link-dir {
    --icon-size: 20px;
    --icon-gap: 12px;
    --background-color: transparent;
    --border-color: transparent;
    --text-color: #ffffff;
    --btn-height: 40px;
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--btn-height);
    padding: 0 20px;
    background-color: var(--background-color);
    border: 1px solid var(--border-color);
    border-radius: 40px;
    font-size: var(--fs-body-md);
    line-height: var(--lh-body-md);
    font-weight: var(--fw-body-md);
    color: var(--text-color);
    text-align: center;
    text-decoration: none;
    transition: all .222s linear 0s;
    outline: none;
    cursor: pointer;
    appearance: none;
    -webkit-user-select: none;
    user-select: none;
    line-height: 1
}

@media (prefers-reduced-motion: reduce) {
    .btn, .gsl-details .gsi-cta .link-dir {
        transition: none
    }
}

.btn[disabled], .gsl-details .gsi-cta [disabled].link-dir {
    opacity: .2
}

.btn-primary, .gsl-details .gsi-cta .link-dir {
    --background-color: #df2b2a
}

.btn-secondary {
    --background-color: #000000
}

.btn-coloured {
    --background-color: #ffffff;
    --text-color: #000000
}

.btn-outline {
    --border-color: #df2b2a;
    --text-color: #df2b2a
}

.btn-outline-secondary {
    --border-color: #000000;
    --text-color: #000000
}

.btn-outline-coloured {
    --border-color: #ffffff
}

.btn-ghost {
    --text-color: #df2b2a
}

.btn-ghost-secondary {
    --text-color: #000000
}

.btn-ghost-coloured {
    --text-color: #ffffff
}

.btn-sm {
    --icon-size: 16px;
    --icon-gap: 0;
    --btn-height: 32px
}

.btn-badgy {
    gap: var(--icon-gap)
}

.btn-badgy i {
    flex: 0 0 var(--icon-size);
    height: var(--icon-size)
}

.btn-badgy .icon {
    font-size: var(--icon-size)
}

.btn-full {
    width: 100%
}

.btn .svg, .btn .blc-info .bli-time::after, .blc-info .btn .bli-time::after, .btn .cos-bonus::before, .btn .cos-close, .btn .cds-address-addon .btn-add::before, .cds-address-addon .btn .btn-add::before, .btn .ppd-cta::after, .btn .ppc-header-back, .btn .ppl-coupon::after, .btn .ppl-coupon::before, .btn .ppl-summary-toggle, .btn .cdp-branches .btn-go-branches::after, .cdp-branches .btn .btn-go-branches::after, .btn .cdp-guide-content li::before, .cdp-guide-content .btn li::before, .btn .pls-cta::after, .btn .pdp-offer-remained::before, .btn .pdp-offer-date::before, .btn .pdp-like, .btn .pci-sent::before, .btn .pci-resend::before, .btn .pci-code::after, .btn .pai-delete::before, .btn .poi-title::before, .btn .upi::before, .btn .upi::after, .btn .upm-settings, .btn .upo-close, .btn .ccf-resend button::before, .ccf-resend .btn button::before, .btn .lgn-back::before, .btn .bli-time::before, .btn .cpi-bonus-date::before, .btn .cpi-applied::before, .btn .cpi-remained::before, .btn .cpi-date::before, .btn .cpi-badge .tag::before, .cpi-badge .btn .tag::before, .btn .prd-like, .btn .ntf-close, .btn .hmm-link::after, .btn .hmm-close, .btn .gdc-copy::before, .btn .mnp-close, .btn .muo-resend::before, .btn .mbm-current::before, .gsl-details .gsi-cta .link-dir .svg, .gsl-details .gsi-cta .link-dir .blc-info .bli-time::after, .blc-info .gsl-details .gsi-cta .link-dir .bli-time::after, .gsl-details .gsi-cta .link-dir .cos-bonus::before, .gsl-details .gsi-cta .link-dir .cos-close, .gsl-details .gsi-cta .link-dir .cds-address-addon .btn-add::before, .cds-address-addon .gsl-details .gsi-cta .link-dir .btn-add::before, .gsl-details .gsi-cta .link-dir .ppd-cta::after, .gsl-details .gsi-cta .link-dir .ppc-header-back, .gsl-details .gsi-cta .link-dir .ppl-coupon::after, .gsl-details .gsi-cta .link-dir .ppl-coupon::before, .gsl-details .gsi-cta .link-dir .ppl-summary-toggle, .gsl-details .gsi-cta .link-dir .cdp-branches .btn-go-branches::after, .cdp-branches .gsl-details .gsi-cta .link-dir .btn-go-branches::after, .gsl-details .gsi-cta .link-dir .cdp-guide-content li::before, .cdp-guide-content .gsl-details .gsi-cta .link-dir li::before, .gsl-details .gsi-cta .link-dir .pls-cta::after, .gsl-details .gsi-cta .link-dir .pdp-offer-remained::before, .gsl-details .gsi-cta .link-dir .pdp-offer-date::before, .gsl-details .gsi-cta .link-dir .pdp-like, .gsl-details .gsi-cta .link-dir .pci-sent::before, .gsl-details .gsi-cta .link-dir .pci-resend::before, .gsl-details .gsi-cta .link-dir .pci-code::after, .gsl-details .gsi-cta .link-dir .pai-delete::before, .gsl-details .gsi-cta .link-dir .poi-title::before, .gsl-details .gsi-cta .link-dir .upi::before, .gsl-details .gsi-cta .link-dir .upi::after, .gsl-details .gsi-cta .link-dir .upm-settings, .gsl-details .gsi-cta .link-dir .upo-close, .gsl-details .gsi-cta .link-dir .ccf-resend button::before, .ccf-resend .gsl-details .gsi-cta .link-dir button::before, .gsl-details .gsi-cta .link-dir .lgn-back::before, .gsl-details .gsi-cta .link-dir .bli-time::before, .gsl-details .gsi-cta .link-dir .cpi-bonus-date::before, .gsl-details .gsi-cta .link-dir .cpi-applied::before, .gsl-details .gsi-cta .link-dir .cpi-remained::before, .gsl-details .gsi-cta .link-dir .cpi-date::before, .gsl-details .gsi-cta .link-dir .cpi-badge .tag::before, .cpi-badge .gsl-details .gsi-cta .link-dir .tag::before, .gsl-details .gsi-cta .link-dir .prd-like, .gsl-details .gsi-cta .link-dir .ntf-close, .gsl-details .gsi-cta .link-dir .hmm-link::after, .gsl-details .gsi-cta .link-dir .hmm-close, .gsl-details .gsi-cta .link-dir .gdc-copy::before, .gsl-details .gsi-cta .link-dir .mnp-close, .gsl-details .gsi-cta .link-dir .muo-resend::before, .gsl-details .gsi-cta .link-dir .mbm-current::before, .btn .bsi-cta::after, .gsl-details .gsi-cta .link-dir .bsi-cta::after, .btn .cii-header::before, .gsl-details .gsi-cta .link-dir .cii-header::before, .btn .modal-header .close-modal::after, .gsl-details .gsi-cta .link-dir .modal-header .close-modal::after, .modal-header .btn .close-modal::after, .modal-header .gsl-details .gsi-cta .link-dir .close-modal::after, .gsl-details .gsi-cta .modal-header .link-dir .close-modal::after, .btn .modal-header .close-modal::before, .gsl-details .gsi-cta .link-dir .modal-header .close-modal::before, .modal-header .btn .close-modal::before, .modal-header .gsl-details .gsi-cta .link-dir .close-modal::before, .gsl-details .gsi-cta .modal-header .link-dir .close-modal::before, .btn .rate label, .gsl-details .gsi-cta .link-dir .rate label, .rate .btn label, .rate .gsl-details .gsi-cta .link-dir label, .gsl-details .gsi-cta .rate .link-dir label, .btn .pgn-dir, .gsl-details .gsi-cta .link-dir .pgn-dir, .btn .msg-warning::before, .gsl-details .gsi-cta .link-dir .msg-warning::before, .btn .btn-video-thumb::after, .gsl-details .gsi-cta .link-dir .btn-video-thumb::after, .btn .info::before, .gsl-details .gsi-cta .link-dir .info::before, .btn .cpn-inner::before, .gsl-details .gsi-cta .link-dir .cpn-inner::before, .btn .cpn::before, .gsl-details .gsi-cta .link-dir .cpn::before, .btn .cpn::after, .gsl-details .gsi-cta .link-dir .cpn::after, .btn .qty-remove .qty-minus::after, .gsl-details .gsi-cta .link-dir .qty-remove .qty-minus::after, .qty-remove .btn .qty-minus::after, .qty-remove .gsl-details .gsi-cta .link-dir .qty-minus::after, .gsl-details .gsi-cta .qty-remove .link-dir .qty-minus::after, .btn .qty-plus, .gsl-details .gsi-cta .link-dir .qty-plus, .btn .qty-minus, .gsl-details .gsi-cta .link-dir .qty-minus, .btn .seo-more::after, .gsl-details .gsi-cta .link-dir .seo-more::after, .btn .acc-header > button::after, .gsl-details .gsi-cta .link-dir .acc-header > button::after, .btn .fdd button::after, .gsl-details .gsi-cta .link-dir .fdd button::after, .fdd .btn button::after, .fdd .gsl-details .gsi-cta .link-dir button::after, .gsl-details .gsi-cta .fdd .link-dir button::after, .btn .select .wrp::after, .gsl-details .gsi-cta .link-dir .select .wrp::after, .select .btn .wrp::after, .select .gsl-details .gsi-cta .link-dir .wrp::after, .gsl-details .gsi-cta .select .link-dir .wrp::after, .btn .checkbox label::after, .gsl-details .gsi-cta .link-dir .checkbox label::after, .checkbox .btn label::after, .checkbox .gsl-details .gsi-cta .link-dir label::after, .gsl-details .gsi-cta .checkbox .link-dir label::after, .btn .radio label::after, .gsl-details .gsi-cta .link-dir .radio label::after, .radio .btn label::after, .radio .gsl-details .gsi-cta .link-dir label::after, .gsl-details .gsi-cta .radio .link-dir label::after, .btn .checkbox label::before, .gsl-details .gsi-cta .link-dir .checkbox label::before, .checkbox .btn label::before, .checkbox .gsl-details .gsi-cta .link-dir label::before, .gsl-details .gsi-cta .checkbox .link-dir label::before, .btn .radio label::before, .gsl-details .gsi-cta .link-dir .radio label::before, .radio .btn label::before, .radio .gsl-details .gsi-cta .link-dir label::before, .gsl-details .gsi-cta .radio .link-dir label::before, .btn .pika-prev, .gsl-details .gsi-cta .link-dir .pika-prev, .btn .pika-next, .gsl-details .gsi-cta .link-dir .pika-next, .btn .link-dir::after, .gsl-details .gsi-cta .link-dir .link-dir::after, .btn .link-location::before, .gsl-details .gsi-cta .link-dir .link-location::before {
    flex: 0 0 16px;
    height: 16px
}

.btn-dir .svg, .btn-dir .blc-info .bli-time::after, .blc-info .btn-dir .bli-time::after, .btn-dir .cos-bonus::before, .btn-dir .cos-close, .btn-dir .cds-address-addon .btn-add::before, .cds-address-addon .btn-dir .btn-add::before, .btn-dir .ppd-cta::after, .btn-dir .ppc-header-back, .btn-dir .ppl-coupon::after, .btn-dir .ppl-coupon::before, .btn-dir .ppl-summary-toggle, .btn-dir .cdp-branches .btn-go-branches::after, .cdp-branches .btn-dir .btn-go-branches::after, .btn-dir .cdp-guide-content li::before, .cdp-guide-content .btn-dir li::before, .btn-dir .pls-cta::after, .btn-dir .pdp-offer-remained::before, .btn-dir .pdp-offer-date::before, .btn-dir .pdp-like, .btn-dir .pci-sent::before, .btn-dir .pci-resend::before, .btn-dir .pci-code::after, .btn-dir .pai-delete::before, .btn-dir .poi-title::before, .btn-dir .upi::before, .btn-dir .upi::after, .btn-dir .upm-settings, .btn-dir .upo-close, .btn-dir .ccf-resend button::before, .ccf-resend .btn-dir button::before, .btn-dir .lgn-back::before, .btn-dir .bli-time::before, .btn-dir .cpi-bonus-date::before, .btn-dir .cpi-applied::before, .btn-dir .cpi-remained::before, .btn-dir .cpi-date::before, .btn-dir .cpi-badge .tag::before, .cpi-badge .btn-dir .tag::before, .btn-dir .prd-like, .btn-dir .ntf-close, .btn-dir .hmm-link::after, .btn-dir .hmm-close, .btn-dir .gdc-copy::before, .btn-dir .mnp-close, .btn-dir .muo-resend::before, .btn-dir .mbm-current::before, .btn-dir .bsi-cta::after, .btn-dir .cii-header::before, .btn-dir .modal-header .close-modal::after, .modal-header .btn-dir .close-modal::after, .btn-dir .modal-header .close-modal::before, .modal-header .btn-dir .close-modal::before, .btn-dir .rate label, .rate .btn-dir label, .btn-dir .pgn-dir, .btn-dir .msg-warning::before, .btn-dir .btn-video-thumb::after, .btn-dir .info::before, .btn-dir .cpn-inner::before, .btn-dir .cpn::before, .btn-dir .cpn::after, .btn-dir .qty-remove .qty-minus::after, .qty-remove .btn-dir .qty-minus::after, .btn-dir .qty-plus, .btn-dir .qty-minus, .btn-dir .seo-more::after, .btn-dir .acc-header > button::after, .btn-dir .fdd button::after, .fdd .btn-dir button::after, .btn-dir .select .wrp::after, .select .btn-dir .wrp::after, .btn-dir .checkbox label::after, .checkbox .btn-dir label::after, .btn-dir .radio label::after, .radio .btn-dir label::after, .btn-dir .checkbox label::before, .checkbox .btn-dir label::before, .btn-dir .radio label::before, .radio .btn-dir label::before, .btn-dir .pika-prev, .btn-dir .pika-next, .btn-dir .link-dir::after, .btn-dir .link-location::before {
    order: 1
}

.input {
    position: relative;
    display: inline-block
}

.textbox {
    width: 100%
}

.textbox .wrp {
    display: block;
    position: relative;
    height: 40px;
    background: #fff
}

.textbox i {
    display: inline-block;
    position: absolute;
    top: 4px
}

.textbox input {
    height: 100%;
    line-height: 40px;
    width: 100%;
    border: 1px solid #e5e5e5;
    border-radius: 0;
    padding: 0 8px;
    background: rgba(0, 0, 0, 0);
    outline: none;
    color: #1a1a1a;
    background-color: rgba(0, 0, 0, 0)
}

.textbox input:disabled {
    opacity: .7
}

.textbox label {
    margin-bottom: 8px;
    color: #7f7f7f;
    font-size: var(--fs-info);
    line-height: var(--lh-info);
    font-weight: var(--fw-info)
}

.textbox .input-icon-r input {
    padding-right: 44px
}

.textbox .input-icon-r i {
    right: 0
}

.textbox .input-icon-l input {
    padding-left: 44px
}

.textbox .input-icon-l i {
    left: 0
}

.textarea {
    width: 100%
}

.textarea textarea {
    height: 136px;
    width: 100%;
    border: 1px solid #e5e5e5;
    padding: 8px;
    background: #fff;
    outline: none;
    color: #1a1a1a
}

.textarea label {
    font-size: var(--fs-info);
    line-height: var(--lh-info);
    font-weight: var(--fw-info);
    margin-bottom: 8px;
    color: #7f7f7f
}

.form-row + .form-row {
    margin-top: 20px
}

.form-row-info {
    margin-top: 10px
}

.form-row-error {
    color: #df2b2a
}

.form-row-error .textbox input, .form-row-error .textbox textarea, .form-row-error .select select {
    color: #df2b2a;
    border-color: #df2b2a
}

.form-row-error .textbox label, .form-row-error .textbox label, .form-row-error .select label {
    color: #df2b2a
}

.form-row.gap-lg {
    margin-top: 35px
}

.form-button {
    margin-top: 25px
}

.form-error-msg {
    color: #df2b2a;
    font-size: var(--fs-info);
    line-height: var(--lh-info);
    font-weight: var(--fw-info);
    margin-top: 8px
}

.form-result {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center
}

.form-result::before {
    content: "";
    width: 80px;
    height: 80px;
    margin: 40px 0
}

.form .col-6:first-child {
    padding-right: 6px
}

.form .col-6:last-child {
    padding-left: 6px
}

.form .col-4:first-child {
    padding-right: 6px
}

.form .col-4:last-child {
    padding-left: 6px
}

.form .col-4:nth-child(2) {
    padding-inline: 6px
}

.form .help {
    position: relative
}

.form .btn-help {
    position: absolute;
    top: 15px;
    right: 0
}

.checkbox input, .radio input {
    width: 24px;
    height: 24px;
    position: absolute;
    opacity: 0;
    z-index: 2;
    top: 0;
    left: 0;
    cursor: pointer
}

.checkbox label, .radio label {
    padding: 4px 0 0 32px;
    margin: 0;
    min-height: 24px;
    cursor: pointer
}

.checkbox label::before, .radio label::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    transition: all .111s linear 0s
}

@media (prefers-reduced-motion: reduce) {
    .checkbox label::before, .radio label::before {
        transition: none
    }
}

.checkbox label::after, .radio label::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: all .111s linear 0s
}

@media (prefers-reduced-motion: reduce) {
    .checkbox label::after, .radio label::after {
        transition: none
    }
}

.checkbox input:checked + label::before, .radio input:checked + label::before {
    opacity: 0
}

.checkbox input:checked + label::after, .radio input:checked + label::after {
    opacity: 1
}

.checkbox label::before {
    width: 24px;
    height: 24px
}

.checkbox label::after {
    width: 24px;
    height: 24px
}

.radio label::before {
    width: 24px;
    height: 24px
}

.radio label::after {
    width: 24px;
    height: 24px
}

.switch input {
    width: 52px;
    height: 28px;
    position: absolute;
    opacity: 0;
    z-index: 1;
    top: 0;
    left: 0;
    cursor: pointer
}

.switch label {
    display: inline-block;
    padding: 0 0 0 62px;
    margin: 0;
    min-height: 28px;
    cursor: pointer
}

.switch label::before {
    content: "";
    display: inline-block;
    background-color: #7f7f7f;
    width: 52px;
    height: 28px;
    border: 1px solid rgba(0, 0, 0, 0);
    border-radius: 28px;
    position: absolute;
    top: 0;
    left: 0;
    transition: all .111s linear 0s
}

@media (prefers-reduced-motion: reduce) {
    .switch label::before {
        transition: none
    }
}

.switch label::after {
    content: "";
    display: inline-block;
    background: #fff;
    width: 20px;
    height: 20px;
    position: absolute;
    top: 4px;
    left: 4px;
    border-radius: 20px;
    transition: all .111s linear 0s
}

@media (prefers-reduced-motion: reduce) {
    .switch label::after {
        transition: none
    }
}

.switch input:checked + label::before {
    background: #df2b2a
}

.switch input:checked + label::after {
    background: #fff;
    left: 28px
}

.toggle input {
    width: 100%;
    height: 28px;
    position: absolute;
    opacity: 0;
    top: 0;
    left: 0;
    cursor: pointer
}

.toggle label {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 16px;
    margin: 0;
    cursor: pointer;
    border: 1px solid rgba(0, 0, 0, 0);
    border-radius: 28px;
    background-color: rgba(0, 0, 0, 0);
    color: #1a1a1a
}

.toggle input:checked + label {
    color: #1a1a1a;
    background-color: rgba(0, 0, 0, 0);
    border-color: rgba(0, 0, 0, 0)
}

.select {
    width: 100%
}

.select label {
    font-size: var(--fs-info);
    line-height: var(--lh-info);
    font-weight: var(--fw-info);
    margin-bottom: 8px
}

.select .wrp {
    height: 40px;
    width: 100%;
    background-color: #fff;
    padding: 12px 8px;
    position: relative
}

.select .wrp::after {
    content: "";
    display: inline-block;
    position: absolute;
    right: 8px;
    top: calc(50% - 8px);
    z-index: 1;
    pointer-events: none;
    width: 16px;
    height: 16px
}

.select select {
    appearance: none;
    outline: 0;
    box-shadow: none;
    background: none;
    height: 100%;
    width: 100%;
    border: 1px solid #e5e5e5;
    padding: 8px 40px 0 8px;
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    color: #1a1a1a
}

.select select::-ms-expand {
    display: none
}

.fdd {
    width: 100%
}

.fdd label {
    font-size: var(--fs-info);
    line-height: var(--lh-info);
    font-weight: var(--fw-info);
    margin-bottom: 8px
}

.fdd button {
    height: 40px;
    width: 100%;
    background-color: #f8f8f8;
    padding-inline: 8px;
    border: 1px solid #e5e5e5;
    gap: 16px;
    display: flex;
    align-items: center
}

.fdd button::after {
    content: "";
    width: 16px;
    height: 16px
}

.fdd button span {
    display: flex;
    align-items: center;
    height: 100%;
    flex: 1;
    color: #7f7f7f;
    font-size: var(--fs-text-lg);
    line-height: var(--lh-text-lg);
    font-weight: var(--fw-text-lg)
}

.fdd.selected button span {
    color: #1a1a1a
}

.acc-header {
    border-bottom: 1px solid #e5e5e5
}

.acc-header > button {
    display: flex;
    min-height: 48px;
    padding-block: 18px;
    width: 100%;
    position: relative;
    font-size: var(--fs-title);
    line-height: var(--lh-title);
    font-weight: var(--fw-title)
}

.acc-header > button::after {
    content: "";
    width: 16px;
    height: 16px;
    position: absolute;
    top: calc(50% - 8px);
    right: 0
}

.acc-body {
    display: none
}

.accordion {
    padding: 0;
    margin: 0;
    list-style: none
}

.accordion .active > .acc-header {
    border-bottom: none
}

.accordion .active > .acc-header > button::after {
    transform: rotate(180deg)
}

.accordion .active > .acc-body {
    display: block
}

.nav-tabs {
    --border-bottom: transparent
}

.nav-tabs .nav-link {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 42px;
    border-bottom: 3px solid var(--border-bottom)
}

.nav-tabs .nav-link.active {
    --link-border-bottom: #df2b2a;
    font-weight: 500
}

.tag {
    background-color: #005270;
    color: #fff;
    display: inline-flex;
    align-items: center;
    border-radius: 4px;
    font-size: var(--fs-info-hl);
    line-height: var(--lh-info-hl);
    font-weight: var(--fw-info-hl);
    line-height: 1
}

.cci {
    display: flex;
    justify-content: space-between;
    width: 296px;
    height: 56px
}

.cci-col {
    flex: 1;
    max-width: 56px;
    height: 100%
}

.cci-col input {
    height: 100%;
    width: 100%;
    text-align: center;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    font-size: var(--fs-title-lg);
    line-height: var(--lh-title-lg);
    font-weight: var(--fw-title-lg)
}

.sct {
    --header-margin-bottom: 12px
}

.sct-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--header-margin-bottom)
}

.sct-title {
    font-size: var(--fs-title);
    line-height: var(--lh-title);
    font-weight: var(--fw-title)
}

.sct-cta .link-dir {
    font-size: var(--fs-body-md);
    line-height: var(--lh-body-md);
    font-weight: var(--fw-body-md)
}

.flu-title {
    font-size: var(--fs-body-md);
    line-height: var(--lh-body-md);
    font-weight: var(--fw-body-md)
}

.flu-menu {
    display: flex;
    gap: 8px
}

.flu-menu a {
    display: block;
    flex: 0 0 26px;
    height: 26px
}

.flu-menu .icon {
    font-size: 26px
}

.splide__desc {
    position: absolute;
    color: #fff;
    font-size: var(--fs-h1);
    line-height: var(--lh-h1);
    font-weight: var(--fw-h1);
    max-width: 665px;
    left: 0
}

.seo {
    max-width: 917px
}

.seo-title {
    font-size: var(--fs-title);
    line-height: var(--lh-title);
    font-weight: var(--fw-title);
    margin-bottom: 24px
}

.seo-content p {
    font-family: var(--ff-ch-body);
    font-size: var(--fs-ch-body);
    line-height: var(--lh-ch-body);
    font-weight: var(--fw-ch-body)
}

.seo-more {
    margin-top: 24px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--fs-body-md);
    line-height: var(--lh-body-md);
    font-weight: var(--fw-body-md)
}

.seo-more::after {
    content: "";
    flex: 0 0 16px;
    height: 16px;
    transform: rotate(-180deg)
}

.seo-body.less .seo-more::after {
    transform: rotate(0)
}

.cnf {
    display: flex;
    flex-direction: column;
    align-items: center
}

.cnf-title {
    font-size: var(--fs-title-lg);
    line-height: var(--lh-title-lg);
    font-weight: var(--fw-title-lg);
    margin-bottom: 16px
}

.cnf-text {
    color: #7f7f7f;
    text-align: center
}

.cnf-buttons {
    width: 100%
}

.cnf-buttons .btn, .cnf-buttons .gsl-details .gsi-cta .link-dir, .gsl-details .gsi-cta .cnf-buttons .link-dir {
    width: 100%
}

.cnf-buttons .btn + .btn, .cnf-buttons .gsl-details .gsi-cta .link-dir + .btn, .gsl-details .gsi-cta .cnf-buttons .link-dir + .btn, .cnf-buttons .gsl-details .gsi-cta .btn + .link-dir, .gsl-details .gsi-cta .cnf-buttons .btn + .link-dir, .cnf-buttons .gsl-details .gsi-cta .link-dir + .link-dir, .gsl-details .gsi-cta .cnf-buttons .link-dir + .link-dir {
    margin-top: 16px
}

.chip {
    --color: #df2b2a;
    display: inline-flex;
    align-items: center;
    height: 32px;
    border-radius: 50px;
    font-size: var(--fs-body-md);
    line-height: var(--lh-body-md);
    font-weight: var(--fw-body-md);
    line-height: 1;
    color: var(--color);
    border: 1px solid #df2b2a;
    padding-inline: 16px
}

.chip.active {
    --color: #ffffff;
    background-color: #df2b2a
}

.sub-category {
    --color: #df2b2a;
    display: inline-flex;
    align-items: center;
    height: 50px;
    border-radius: 50px;
    font-size: var(--fs-body-md);
    line-height: var(--lh-body-md);
    font-weight: var(--fw-body-md);
    line-height: 1;
    color: var(--color);
    border: 1px solid #df2b2a;
    padding-inline: 20px
}

.sub-category.active {
    --color: #ffffff;
    background-color: #df2b2a
}

.qty {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    width: 104px;
    height: 28px;
    border: 1px solid #e5e5e5;
    border-radius: 14px;
    padding-inline: 3px
}

.qty-minus {
    flex: 0 0 22px;
    height: 22px;
    width: 22px
}

.qty-plus {
    flex: 0 0 22px;
    height: 22px;
    width: 22px
}

.qty-text {
    line-height: 1
}

.qty-remove .qty-minus {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none
}

.qty-remove .qty-minus::after {
    content: "";
    flex: 0 0 16px;
    height: 16px
}

.progress ul {
    display: flex;
    align-items: center
}

.prg-step {
    display: inline-flex;
    align-items: center
}

.prg-step a, .prg-step span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: none
}

.prg-step i {
    font-size: var(--fs-text-lg);
    line-height: var(--lh-text-lg);
    font-weight: var(--fw-text-lg);
    line-height: 1;
    font-style: normal;
    color: #666
}

.prg-step small {
    color: #666;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 28px;
    border-radius: 4px;
    border: 1px solid #666
}

.prg-step:not(:first-child)::before {
    content: "";
    display: block;
    flex: 0 0 32px;
    height: 1px;
    background-color: #e5e5e5;
    margin-inline: 24px
}

.prg-current i {
    font-size: var(--fs-title-lg);
    line-height: var(--lh-title-lg);
    font-weight: var(--fw-title-lg);
    color: #1a1a1a
}

.prg-current small {
    border-color: #005270;
    background-color: #005270;
    color: #fff;
    font-size: var(--fs-body-md);
    line-height: var(--lh-body-md);
    font-weight: var(--fw-body-md)
}

.prg-completed i {
    font-size: var(--fs-title-lg);
    line-height: var(--lh-title-lg);
    font-weight: var(--fw-title-lg);
    color: #1a1a1a
}

.prg-completed small {
    border-color: #32ad81;
    background-color: #32ad81;
    color: #fff;
    font-size: var(--fs-body-md);
    line-height: var(--lh-body-md);
    font-weight: var(--fw-body-md)
}

.cpn {
    display: flex;
    height: 74px
}

.cpn::before, .cpn::after {
    content: "";
    flex: 0 0 23px;
    height: 100%
}

.cpn::after {
    transform: rotate(180deg)
}

.cpn-inner {
    height: 100%;
    padding-block: 8px;
    flex: 1;
    display: flex;
    align-items: center;
    gap: 16px;
    border-top: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
    background-color: #fff
}

.cpn-inner::before {
    content: "";
    flex: 0 0 32px;
    height: 32px
}

.cpn-body {
    border-left: 1px dashed #e5e5e5;
    padding-inline: 16px 9px;
    height: 100%;
    width: 100%
}

.cpn-title {
    font-size: var(--fs-body-md);
    line-height: var(--lh-body-md);
    font-weight: var(--fw-body-md);
    line-height: 1;
    margin-bottom: 8px;
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis;
    width: 190px
}

.cpn-info {
    font-size: var(--fs-info);
    line-height: var(--lh-info);
    font-weight: var(--fw-info);
    line-height: 1;
    margin-bottom: 8px;
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis;
    width: 190px
}

.cpn-cta {
    display: flex;
    justify-content: space-between
}

.cpn-cta .btn-details, .cpn-cta .btn-apply {
    color: #df2b2a;
    font-size: var(--fs-body-md);
    line-height: var(--lh-body-md);
    font-weight: var(--fw-body-md)
}

.cpn-cta .btn-remove {
    font-size: var(--fs-body-md);
    line-height: var(--lh-body-md);
    font-weight: var(--fw-body-md)
}

.info {
    display: inline-flex;
    align-items: flex-start;
    gap: 8px
}

.info::before {
    content: "";
    flex: 0 0 16px;
    height: 16px
}

.info b {
    font-weight: 500
}

.btn-video-thumb {
    position: relative
}

.btn-video-thumb::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: #1a1a1a;
    opacity: .6
}

.btn-video-thumb::after {
    content: "";
    width: 51px;
    height: 48px;
    position: absolute;
    top: calc(50% - 24px);
    left: calc(50% - 25px)
}

.timer {
    position: relative;
    width: 96px;
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto
}

.timer-time {
    font-size: var(--fs-title-lg);
    line-height: var(--lh-title-lg);
    font-weight: var(--fw-title-lg);
    display: flex;
    align-items: center
}

.timer-time span {
    display: block;
    width: 45px;
    text-align: center
}

.timer-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: rotateZ(-90deg)
}

.timer-svg circle {
    stroke-linecap: butt;
    fill: none;
    stroke-width: 6px
}

.timer-rear {
    stroke: #c2c2c2
}

.timer-front {
    stroke: #df2b2a
}

.timer[data-time-remain="0"] .timer-front {
    display: none
}

.msg {
    padding-inline: 16px;
    display: flex;
    align-items: center;
    gap: 8px
}

.msg-text {
    line-height: 1
}

.msg-warning {
    background-color: #fadcdc
}

.msg-warning .msg-text {
    color: #df2b2a
}

.msg-warning::before {
    content: "";
    flex: 0 0 16px;
    width: 16px;
    height: 16px
}

.pgn {
    display: flex;
    align-items: center;
    justify-content: center
}

.pgn-dir {
    width: 53px;
    height: 32px
}

.pgn-prev {
    margin-right: 32px
}

.pgn-next {
    margin-left: 32px
}

.pgn-page {
    font-size: var(--fs-title-lg);
    line-height: var(--lh-title-lg);
    font-weight: var(--fw-title-lg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 27px;
    height: 29px;
    border-radius: 50%
}

.pgn-page.active {
    background-color: #e5e5e5
}

.pgn-page + .pgn-page {
    margin-left: 3px
}

.rate input {
    display: none
}

.rate label {
    float: right;
    width: 48px;
    height: 48px;
    margin: 0 8px 0 0;
    cursor: pointer
}

.rate label:last-child {
    margin-right: 0
}

.rate fieldset {
    float: left
}

.modal {
    padding: 0 !important
}

.modal-dialog {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    height: 100dvh;
    width: 100%
}

.modal-header {
    padding-inline: 16px;
    align-items: center;
    justify-content: flex-start;
    height: 64px;
    background-color: #fff
}

.modal-icon {
    display: inline-block;
    margin-right: 15px
}

.modal-title {
    font-size: var(--fs-title);
    line-height: var(--lh-title);
    font-weight: var(--fw-title);
    line-height: 1
}

.modal-body {
    padding: 18px 32px
}

.modal-footer {
    background-color: #fff;
    justify-content: center
}

.modal-footer .btn, .modal-footer .gsl-details .gsi-cta .link-dir, .gsl-details .gsi-cta .modal-footer .link-dir {
    width: 100%
}

.cbx-cta .btn, .cbx-cta .gsl-details .gsi-cta .link-dir, .gsl-details .gsi-cta .cbx-cta .link-dir {
    width: 100%
}

.acl {
    margin-top: 32px
}

.acl-title {
    margin-bottom: 16px;
    font-size: var(--fs-body-md);
    line-height: var(--lh-body-md);
    font-weight: var(--fw-body-md)
}

.acl-info {
    margin-bottom: 16px
}

.cii-header {
    display: flex;
    color: #404040;
    gap: 8px;
    border-bottom: 1px solid #e5e5e5
}

.cii-header::before {
    content: "";
    flex: 0 0 16px;
    height: 16px
}

.cii-title {
    font-size: var(--fs-body-md);
    line-height: var(--lh-body-md);
    font-weight: var(--fw-body-md);
    margin-bottom: 6px
}

.cii-rules-title {
    font-size: var(--fs-title-lg);
    line-height: var(--lh-title-lg);
    font-weight: var(--fw-title-lg)
}

.cii-done {
    width: 100%
}

.csm {
    margin-inline: -16px
}

.csm-section {
    margin-top: 24px
}

.csm-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px
}

.csm-section-title {
    font-size: var(--fs-title-lg);
    line-height: var(--lh-title-lg);
    font-weight: var(--fw-title-lg)
}

.csm-logo {
    margin-top: 24px
}

.csm-accordion .acc-header button {
    font-size: var(--fs-body-md);
    line-height: var(--lh-body-md);
    font-weight: var(--fw-body-md)
}

.bsi {
    padding: 16px;
    background-color: #fff
}

.bsi-title {
    font-weight: 500
}

.bsi-body {
    margin-top: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.bsi-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #df2b2a;
    font-weight: 500;
    line-height: 1
}

.bsi-cta::after {
    content: "";
    flex: 0 0 16px;
    width: 16px;
    height: 16px
}

.bsi + .bsi {
    margin-top: 2px
}

#modal-branch-selection .modal-content {
    background-color: #f8f8f8
}

#modal-station-locator .modal-body {
    background-color: #f8f8f8
}

.gsl-tabs {
    margin-inline: -32px;
    margin-top: -18px;
    border-top: 1px solid #e5e5e5
}

.gsl-tabs .nav-tabs.fit {
    background-color: #fff;
    padding-inline: 16px;
    border-bottom: 1px solid #e5e5e5
}

.gsl-tabs .nav-link:not(.active) {
    border-bottom-color: rgba(0, 0, 0, 0)
}

.gsl-list {
    padding-inline: 32px
}

.gsl-controls .col-6:first-child {
    padding-right: 4px
}

.gsl-controls .col-6:last-child {
    padding-left: 4px
}

.gsl-controls select {
    background-color: #fff
}

.gsl-map {
    height: calc(100dvh - 107px);
    width: 100%;
    position: relative
}

.gsl-map #Map {
    height: 100%
}

.gsl-details {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    display: none;
    background-color: #fff;
    border-radius: 8px 8px 0 0;
    display: none;
    z-index: 3
}

.gsl-details .gsi {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center
}

.gsl-details .gsi-title {
    font-size: var(--fs-title-lg);
    line-height: var(--lh-title-lg);
    font-weight: var(--fw-title-lg);
    margin-bottom: 16px;
    width: 200px
}

.gsl-details .gsi-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    width: 100%;
    padding-inline: 8px
}

.gsl-details .gsi-footer .station-campaigns {
    height: 100px;
    overflow: auto
}

.gsl-details .gsi-footer .station-campaigns .cpn {
    margin-top: 5px
}

.gsl-details .gsi-cta {
    width: 100%
}

.gsl-details .gsi-cta .link-dir {
    width: 100%
}

.gsl-details .gsi-cta .link-dir::after {
    display: none
}

.gsl-details-ready .gsl-details {
    animation: toTop .3s ease forwards;
    display: block
}

.mbm-tabs .nav-tabs.fit {
    padding-inline: 16px;
    border-bottom: 1px solid #e5e5e5
}

.mbm-tabs .nav-link:not(.active) {
    border-bottom-color: rgba(0, 0, 0, 0)
}

.mbm-current {
    display: flex;
    align-items: center;
    position: relative
}

.mbm-current::before {
    content: "";
    position: absolute;
    width: 32px;
    height: 32px;
    transform-origin: top left
}

.mbm-current-desc {
    font-size: var(--fs-text-lg);
    line-height: var(--lh-text-lg);
    font-weight: var(--fw-text-lg)
}

.mbm-current-desc b {
    font-weight: 500
}

.mbm-body {
    height: 100%;
    display: flex;
    flex-direction: column
}

.mbm-cta {
    margin-top: auto
}

.mbm-cta .btn, .mbm-cta .gsl-details .gsi-cta .link-dir, .gsl-details .gsi-cta .mbm-cta .link-dir {
    width: 100%
}

.mbm-history {
    background-color: #f8f8f8;
    padding-block: 16px
}

.mbm-history-filters {
    display: flex;
    gap: 8px
}

.mbm-history-filters > * {
    flex: none
}

.mbi {
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    padding-inline: 12px
}

.mbi-footer {
    padding-left: 24px
}

.mbi-footer .link {
    color: #df2b2a;
    font-weight: 500
}

.mbi-header {
    font-size: var(--fs-text-lg);
    line-height: var(--lh-text-lg);
    font-weight: var(--fw-text-lg)
}

.mhs-title {
    font-size: var(--fs-title-lg);
    line-height: var(--lh-title-lg);
    font-weight: var(--fw-title-lg);
    margin-bottom: 16px
}

.mhs + .mhs {
    margin-top: 24px
}

.mhi {
    background-color: #fff;
    padding: 16px 12px;
    display: flex;
    align-items: flex-start;
    gap: 8px
}

.mhi-icon {
    flex: 0 0 16px;
    height: 16px
}

.mhi-icon .icon {
    color: #df2b2a;
    font-size: 16px
}

.mhi-body {
    flex: 1
}

.mhi-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px
}

.mhi-title {
    font-weight: 500;
    flex: 1
}


.mhi-footer {
    margin-top: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px
}

.mhi-place {
    flex: 1
}

.mhi + .mhi {
    margin-top: 2px
}

.mub {
    margin-inline: -32px;
    height: 100%
}

.mub-options li {
    border-bottom: 1px solid #e5e5e5;
    padding: 12px 16px
}

.mub-options label {
    font-size: var(--fs-text-lg);
    line-height: var(--lh-text-lg);
    font-weight: var(--fw-text-lg);
    padding-top: 0
}

.mub-options input:not(:checked) + label {
    opacity: .5
}

.mub-info {
    padding-inline: 24px;
    margin-top: 16px;
    color: #666
}

.mub-step1 {
    height: 100%;
    display: flex;
    flex-direction: column
}

.mub-step2 {
    height: 100%;
    flex-direction: column;
    display: none
}

.mub-select, .mub-cancel {
    margin-top: auto
}

.mub-select .btn, .mub-select .gsl-details .gsi-cta .link-dir, .gsl-details .gsi-cta .mub-select .link-dir, .mub-cancel .btn, .mub-cancel .gsl-details .gsi-cta .link-dir, .gsl-details .gsi-cta .mub-cancel .link-dir {
    width: 100%
}

.mub-option-selected .mub-step1 {
    display: none
}

.mub-option-selected .mub-step2 {
    display: flex
}

.muo {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center
}

.muo-info {
    width: 100%;
    font-size: var(--fs-text-lg);
    line-height: var(--lh-text-lg);
    font-weight: var(--fw-text-lg)
}

.muo-title {
    font-size: var(--fs-title-lg);
    line-height: var(--lh-title-lg);
    font-weight: var(--fw-title-lg)
}

.muo-code {
    font-size: var(--fs-h1);
    line-height: var(--lh-h1);
    font-weight: var(--fw-h1)
}

.muo-resend {
    display: inline-flex;
    align-items: center;
    color: #df2b2a;
    gap: 4px;
    font-size: var(--fs-info);
    line-height: var(--lh-info);
    font-weight: var(--fw-info);
    line-height: 1
}

.muo-resend::before {
    content: "";
    flex: 0 0 24px;
    width: 24px;
    height: 24px
}

.muo-resend[disabled] {
    color: #7f7f7f
}

.mnp {
    position: fixed;
    z-index: 9;
    width: 100%;
    background: #fff;
    transition: all .2s ease;
    overflow: auto;
    display: none
}

.mnp-header {
    text-align: center
}

.mnp-title {
    font-size: var(--fs-title-lg);
    line-height: var(--lh-title-lg);
    font-weight: var(--fw-title-lg)
}

.mnp-footer .btn, .mnp-footer .gsl-details .gsi-cta .link-dir, .gsl-details .gsi-cta .mnp-footer .link-dir {
    width: 100%
}

.mnp-ready {
    overflow: hidden
}

.mnp-ready #overlay {
    z-index: 8;
    display: block
}

.mnp-active {
    display: block;
    max-height: 750px
}

.mas li + li {
    margin-top: 16px
}

.mas-option-title {
    font-size: var(--fs-title-lg);
    line-height: var(--lh-title-lg);
    font-weight: var(--fw-title-lg);
    margin-bottom: 4px
}

.csb {
    max-height: 240px;
    overflow: auto
}

.csb-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 38px
}

.csb-row-text {
    padding-right: 16px
}

.csb-row-info {
    color: #7f7f7f
}

.psm-items {
    margin-top: 16px
}

.psm-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 40px;
    font-size: var(--fs-text-lg);
    line-height: var(--lh-text-lg);
    font-weight: var(--fw-text-lg);
    line-height: 1
}

.psm-item.selected {
    font-weight: 500;
    background-color: #e5e5e5
}

.gdc {
    display: flex;
    flex-direction: column;
    align-items: center
}

.gdc-title {
    font-size: var(--fs-title-lg);
    line-height: var(--lh-title-lg);
    font-weight: var(--fw-title-lg)
}

.gdc-desc {
    font-size: var(--fs-text-lg);
    line-height: var(--lh-text-lg);
    font-weight: var(--fw-text-lg);
    text-align: center
}

.gdc-date span {
    font-size: var(--fs-info);
    line-height: var(--lh-info);
    font-weight: var(--fw-info)
}

.gdc-date b {
    font-weight: 500
}

.gdc-code {
    font-size: var(--fs-text-lg);
    line-height: var(--lh-text-lg);
    font-weight: var(--fw-text-lg);
    letter-spacing: 40%
}

.gdc-cta {
    height: 48px;
    align-items: center;
    justify-content: center;
    display: flex
}

.gdc-copy {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    gap: 4px
}

.gdc-copy::before {
    content: "";
    flex: 0 0 20px;
    height: 20px;
    width: 20px
}

.gdc-copy span {
    font-weight: 500;
    color: #df2b2a
}

#mnp-add-birthday {
    overflow: visible
}

.abd-title {
    text-align: center;
    font-size: var(--fs-title);
    line-height: var(--lh-title);
    font-weight: var(--fw-title)
}

.abd-desc {
    text-align: center
}

.abd-form .form-button .btn, .abd-form .form-button .gsl-details .gsi-cta .link-dir, .gsl-details .gsi-cta .abd-form .form-button .link-dir {
    width: 100%
}

.dln-title {
    text-align: center;
    font-size: var(--fs-title-lg);
    line-height: var(--lh-title-lg);
    font-weight: var(--fw-title-lg)
}

.dln-body {
    padding-inline: 12px
}

.dln-body li + li {
    margin-top: 16px
}

.dln-cta .btn, .dln-cta .gsl-details .gsi-cta .link-dir, .gsl-details .gsi-cta .dln-cta .link-dir {
    width: 100%
}

.apm {
    max-width: 327px;
    margin-inline: auto
}

.apm-desc {
    text-align: center;
    color: #404040
}

.header {
    background-color: #fff;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 5;
    width: 100%
}

.hdr-block1-left .link, .hdr-block1-right .link {
    font-size: var(--fs-body-md);
    line-height: var(--lh-body-md);
    font-weight: var(--fw-body-md)
}

.hdr-block2-inner {
    --height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--height)
}

.hdr-block2-left .logo {
    display: block
}

.hdr-block2-right {
    --flex-gap: 4px;
    display: flex;
    align-items: center;
    gap: var(--flex-gap)
}

.hdr-block2-right .icon {
    font-size: 32px
}

.hdr-tabs .nav-link {
    font-size: var(--fs-body-md);
    line-height: var(--lh-body-md);
    font-weight: var(--fw-body-md)
}

.hmm-title {
    font-size: var(--fs-title);
    line-height: var(--lh-title);
    font-weight: var(--fw-title)
}

.hmm-link {
    font-size: var(--fs-body-md);
    line-height: var(--lh-body-md);
    font-weight: var(--fw-body-md)
}

.hmm-footer .btn-logout span {
    font-size: var(--fs-info-hl);
    line-height: var(--lh-info-hl);
    font-weight: var(--fw-info-hl)
}

.stl-cta {
    --height: 32px;
    --padding-left: 16px;
    --border-radius: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #e5e5e5;
    height: var(--height);
    padding-left: var(--padding-left);
    border-radius: var(--border-radius);
    width: 100%
}

.stl-cta-text {
    flex: 1;
    font-size: var(--fs-body-md);
    line-height: var(--lh-body-md);
    font-weight: var(--fw-body-md);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    height: 19.6px
}

.stl-cta-icon {
    flex: 0 0 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center
}

.stl-cta-icon .icon {
    font-size: 16px
}

.stl-module {
    position: relative;
    z-index: 2
}

.stl-station .stl-cta {
    border-color: #df2b2a;
    color: #df2b2a
}

.stm {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    border: 1px solid #e5e5e5;
    background-color: #fff;
    border-radius: 0 0 4px 4px;
    overflow: hidden;
    border-top: none;
    display: none
}

.stm-county, .stm-city {
    margin-top: 8px;
    padding-inline: 8px
}

.stm-cta {
    margin-top: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background-color: #df2b2a;
    width: 100%;
    height: 48px
}

.store-locator-ready #overlay {
    z-index: 3;
    display: block
}

.store-locator-ready .stl-cta {
    --border-radius: 16px 16px 0 0
}

.store-locator-ready .stm {
    display: block
}

.ntf {
    background-color: #fff;
    display: none
}

.ntf-header {
    position: relative
}

.ntf-close {
    width: 16px;
    height: 16px;
    position: absolute;
    right: 16px;
    top: 8px
}

.ntf-unread {
    position: relative
}

.ntf-unread::after {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 100%;
    background-color: #df2b2a;
    position: absolute;
    top: 8px;
    right: 9px
}

.ntf-menu-ready .ntf {
    display: block
}

.ntf-menu-ready #overlay {
    z-index: 3;
    display: block
}

.nti {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 16px;
    border-bottom: 1px solid #e5e5e5
}

.nti-icon {
    margin-top: 4px
}

.nti-body {
    flex: 1
}

.nti-title {
    font-size: var(--fs-title-lg);
    line-height: var(--lh-title-lg);
    font-weight: var(--fw-title-lg);
    color: #005270
}

.nti-title + .nti-desc {
    margin-top: 16px
}

.nti-info {
    margin-block: 4px 8px;
    color: #7f7f7f;
    font-size: var(--fs-info);
    line-height: var(--lh-info);
    font-weight: var(--fw-info)
}

.nti-cta {
    margin-top: 10px
}

.nti-cta .btn, .nti-cta .gsl-details .gsi-cta .link-dir, .gsl-details .gsi-cta .nti-cta .link-dir {
    width: 200px
}

.ftr-block1 {
    background-color: #e5e5e5
}

.ftr-info {
    font-family: var(--ff-ch-body);
    font-size: var(--fs-ch-body);
    line-height: var(--lh-ch-body);
    font-weight: var(--fw-ch-body)
}

.ftr-links li {
    height: 16px
}

.ftr-links li + li {
    margin-top: 16px
}

.ftr-links .link {
    font-size: var(--fs-body-md);
    line-height: var(--lh-body-md);
    font-weight: var(--fw-body-md)
}

.ftr-social .flu-title {
    margin-bottom: 16px
}

.ftr-block2 {
    background-color: #c2c2c2
}

.ftr-block2-inner {
    display: flex;
    align-items: center;
    font-size: var(--fs-body-md);
    line-height: var(--lh-body-md);
    font-weight: var(--fw-body-md)
}

.prd {
    --max-width: 298px;
    --header-height: 40px;
    --media-padding: 12px;
    --img-width: 100px;
    --offer-padding-inline: 8px;
    --body-padding-inline: 8px;
    --footer-padding: 20px 16px 14px;
    --tag-height: 16px;
    --tag-padding-inline: 8px;
    --block2-margin-top: 8px;
    --block2-height: 64x;
    --price-margin-top: 4px;
    max-width: var(--max-width);
    border: 1px solid #e5e5e5;
    background-color: #fff
}

.prd-header {
    height: var(--header-height);
    position: relative
}

.prd-offer {
    height: var(--header-height);
    background-color: #df2b2a;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 4px 4px 0 0;
    position: absolute;
    top: -1px;
    left: -1px;
    width: calc(100% + 2px);
    padding-inline: var(--offer-padding-inline)
}

.prd-offer-text {
    flex: 1;
    font-size: var(--fs-link);
    line-height: var(--lh-link);
    font-weight: var(--fw-link)
}

.prd-offer-price {
    text-align: right
}

.prd-offer-price span {
    font-size: var(--fs-title-lg);
    line-height: var(--lh-title-lg);
    font-weight: var(--fw-title-lg)
}

.prd-media {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-block: var(--media-padding)
}

.prd-media img {
    max-width: var(--img-width)
}

.prd-badge {
    position: absolute;
    top: 4px;
    left: 8px
}

.prd-like {
    position: absolute;
    top: 4px;
    right: 8px
}

.prd-body {
    padding-inline: var(--body-padding-inline)
}

.prd-block1 {
    height: var(--tag-height)
}

.prd-tag {
    background-color: #005270;
    color: #fff;
    display: inline-flex;
    align-items: center;
    border-radius: 4px;
    height: var(--tag-height);
    padding-inline: var(--tag-padding-inline);
    font-size: var(--fs-info-hl);
    line-height: var(--lh-info-hl);
    font-weight: var(--fw-info-hl)
}

.prd-block2 {
    margin-top: var(--block2-margin-top);
    height: var(--block2-height)
}

.prd-name {
    font-size: var(--fs-title-lg);
    line-height: var(--lh-title-lg);
    font-weight: var(--fw-title-lg);
    line-height: 1;
    color: #000000;
}

.prd-info {
    line-height: 1
}

.prd-price {
    margin-top: var(--price-margin-top)
}

.prd-price .prc {
    color: #666;
    font-size: var(--fs-body-md);
    line-height: var(--lh-body-md);
    font-weight: var(--fw-body-md);
    line-height: 1
}

.prd-footer {
    padding: var(--footer-padding)
}

.prc-old span {
    text-decoration: line-through
}

.cpi {
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    overflow: hidden;
    background-color: #fff;
    max-width: 406px
}

.cpi-media {
    position: relative
}

.cpi-badge {
    position: absolute
}

.cpi-badge .tag {
    gap: 4px
}

.cpi-badge .tag::before {
    content: "";
    width: 12px;
    height: 12px;
    flex: 0 0 12px
}

.cpi-info {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.cpi-date {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--fs-info);
    line-height: var(--lh-info);
    font-weight: var(--fw-info)
}

.cpi-date b {
    font-weight: 500
}

.cpi-date::before {
    content: "";
    width: 16px;
    height: 16px;
    flex: 0 0 16px
}

.cpi-remained {
    display: inline-flex;
    align-items: center;
    gap: 4px
}

.cpi-remained::before {
    content: "";
    width: 16px;
    height: 16px;
    flex: 0 0 16px
}

.cpi-remained span {
    font-size: var(--fs-info);
    line-height: var(--lh-info);
    font-weight: var(--fw-info)
}

.cpi-title {
    font-size: var(--fs-title-lg);
    line-height: var(--lh-title-lg);
    font-weight: var(--fw-title-lg)
}

.cpi-desc {
    font-family: var(--ff-ch-body);
    font-size: var(--fs-ch-body);
    line-height: var(--lh-ch-body);
    font-weight: var(--fw-ch-body)
}

.cpi-applied {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #32ad81
}

.cpi-applied::before {
    content: "";
    flex: 0 0 16px;
    height: 16px;
    width: 16px
}

.cpi-bonus-date {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--fs-info);
    line-height: var(--lh-info);
    font-weight: var(--fw-info)
}

.cpi-bonus-date b {
    font-weight: 500
}

.cpi-bonus-date::before {
    content: "";
    width: 16px;
    height: 16px;
    flex: 0 0 16px
}

.bli {
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    overflow: hidden;
    background-color: #fff;
    max-width: 406px
}

.bli-info {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.bli-time {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--fs-info);
    line-height: var(--lh-info);
    font-weight: var(--fw-info)
}

.bli-time::before {
    content: "";
    width: 16px;
    height: 16px;
    flex: 0 0 16px
}

.bli-title {
    font-size: var(--fs-title-lg);
    line-height: var(--lh-title-lg);
    font-weight: var(--fw-title-lg)
}

.bli-desc {
    font-family: var(--ff-ch-body);
    font-size: var(--fs-ch-body);
    line-height: var(--lh-ch-body);
    font-weight: var(--fw-ch-body)
}

.bli-cta {
    margin-top: 24px
}

.bli-cta span {
    font-size: var(--fs-title-lg);
    line-height: var(--lh-title-lg);
    font-weight: var(--fw-title-lg)
}

.bro-body {
    max-width: 280px;
    flex: 1
}

.bro-title {
    font-size: var(--fs-h1);
    line-height: var(--lh-h1);
    font-weight: var(--fw-h1)
}

.bro-content {
    font-size: var(--fs-text-lg);
    line-height: var(--lh-text-lg);
    font-weight: var(--fw-text-lg)
}

.bro-content b {
    font-size: var(--fs-title-lg);
    line-height: var(--lh-title-lg);
    font-weight: var(--fw-title-lg)
}

.hyt {
    display: flex;
    align-items: center;
    background-color: #fff;
    border: 1px solid #e5e5e5
}

.hyt-content {
    font-size: var(--fs-text-lg);
    line-height: var(--lh-text-lg);
    font-weight: var(--fw-text-lg)
}

.hyt-content b {
    font-weight: 500
}

.ppr {
    display: flex
}

.ppr-media {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e5e5e5
}

.ppr-body {
    flex: 1;
    display: flex;
    flex-direction: column
}

.ppr-title {
    font-size: var(--fs-title-lg);
    line-height: var(--lh-title-lg);
    font-weight: var(--fw-title-lg)
}

.ppr-price .prc {
    display: block
}

.ppr-price .prc-last {
    font-size: var(--fs-title-lg);
    line-height: var(--lh-title-lg);
    font-weight: var(--fw-title-lg)
}

.ppr-price .prc-old {
    color: #7f7f7f
}

.lpw {
    display: flex;
    justify-content: center
}

.lgn {
    flex: 1;
    max-width: 530px;
    background-color: #f8f8f8
}

.lgn-header {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 64px
}

.lgn-back::before {
    content: "";
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    transform: rotate(180deg)
}

.lgn-title {
    font-size: var(--fs-title);
    line-height: var(--lh-title);
    font-weight: var(--fw-title)
}

.lgn-text h2 {
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
    font-weight: var(--fw-h2)
}

.lgn-text p {
    margin-bottom: 0
}

.lgn-text p b {
    font-weight: 500
}

.lgn-form .checkbox button {
    font-weight: 500
}

.lgn-loc {
    text-align: right;
    margin-top: 16px
}

.ccf {
    display: flex;
    flex-direction: column;
    align-items: center
}

.ccf-timer {
    font-size: var(--fs-info);
    line-height: var(--lh-info);
    font-weight: var(--fw-info);
    color: #7f7f7f
}

.ccf-resend {
    margin-top: 24px
}

.ccf-resend button {
    display: inline-flex;
    align-items: center;
    gap: 4px
}

.ccf-resend button::before {
    content: "";
    flex: 0 0 16px;
    height: 16px
}

.ccf-resend button span {
    font-size: var(--fs-info);
    line-height: var(--lh-info);
    font-weight: var(--fw-info);
    color: #df2b2a
}

.ccf-resend button[disabled] span {
    color: #7f7f7f
}

.legal h3 {
    font-size: var(--fs-title);
    line-height: var(--lh-title);
    font-weight: var(--fw-title)
}

.legal p {
    font-family: var(--ff-ch-body);
    font-size: var(--fs-ch-body);
    line-height: var(--lh-ch-body);
    font-weight: var(--fw-ch-body)
}

.legal li {
    font-family: var(--ff-ch-body);
    font-size: var(--fs-ch-body);
    line-height: var(--lh-ch-body);
    font-weight: var(--fw-ch-body)
}

.legal li + li {
    margin-top: 15px
}

.upo-title {
    font-size: var(--fs-title);
    line-height: var(--lh-title);
    font-weight: var(--fw-title)
}

.upm-header {
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 72px;
    padding-inline: 16px
}

.upm-name {
    font-size: var(--fs-title-lg);
    line-height: var(--lh-title-lg);
    font-weight: var(--fw-title-lg);
    margin-bottom: 12px
}

.upm-body {
    background-color: #fff
}

.upm-logout {
    font-size: var(--fs-title-lg);
    line-height: var(--lh-title-lg);
    font-weight: var(--fw-title-lg)
}

.upm-logout .icon {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    font-size: 16px
}

.upm-settings {
    width: 40px;
    height: 40px
}

.upi {
    display: flex;
    height: 64px;
    align-items: center;
    border-bottom: 1px solid #e5e5e5;
    padding-inline: 16px
}

.upi-icon {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    margin-right: 8px
}

.upi-icon .icon {
    font-size: 24px
}

.upi-title {
    font-weight: 500
}

.upi::after {
    content: "";
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    margin-left: auto
}

.upp-header {
    display: flex;
    align-items: center;
    background-color: #fff
}

.upp-title {
    font-size: var(--fs-title);
    line-height: var(--lh-title);
    font-weight: var(--fw-title);
    margin-bottom: 0
}

.pud-info {
    margin-top: 24px
}

.pud-info .info {
    color: #7f7f7f
}

.unp-section-title {
    font-size: var(--fs-title);
    line-height: var(--lh-title);
    font-weight: var(--fw-title)
}

.uni {
    border-top: 1px solid #e5e5e5;
    padding-top: 16px
}

.uni-date {
    color: #7f7f7f;
    font-size: var(--fs-info);
    line-height: var(--lh-info);
    font-weight: var(--fw-info)
}

.uni-inner {
    display: flex;
    align-items: flex-start;
    gap: 8px
}

.uni-body {
    flex: 1
}

.uni-title {
    font-weight: 500
}

.epm {
    display: flex;
    align-items: center;
    justify-content: center
}

.epm-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 470px
}

.epm-title {
    font-size: var(--fs-title);
    line-height: var(--lh-title);
    font-weight: var(--fw-title)
}

.poi {
    border-bottom: 1px solid #e5e5e5
}

.poi-title {
    display: flex;
    align-items: center;
    gap: 8px
}

.poi-title span {
    font-size: var(--fs-title-lg);
    line-height: var(--lh-title-lg);
    font-weight: var(--fw-title-lg);
    flex: 1
}

.poi-title::before {
    content: "";
    flex: 0 0 16px;
    height: 16px;
    width: 16px
}

.poi-details {
    display: flex;
    align-items: center
}

.poi-branch {
    color: #7f7f7f;
    font-size: var(--fs-info);
    line-height: var(--lh-info);
    font-weight: var(--fw-info)
}

.poi-date {
    color: #7f7f7f;
    font-size: var(--fs-info);
    line-height: var(--lh-info);
    font-weight: var(--fw-info);
    margin-left: 3px
}

.poi-date::before {
    content: "•";
    margin-right: 3px
}

.poi-cta {
    display: flex;
    align-items: center;
    gap: 8px
}

.poi-cta .btn, .poi-cta .gsl-details .gsi-cta .link-dir, .gsl-details .gsi-cta .poi-cta .link-dir {
    flex: 1
}

.poi.process .poi-title {
    color: #005270
}

.poi.delivered .poi-title {
    color: #32ad81
}

.poi.cancelled .poi-title {
    color: #df2b2a
}

.pai {
    max-width: 355px
}

.pai-title {
    font-size: var(--fs-title-lg);
    line-height: var(--lh-title-lg);
    font-weight: var(--fw-title-lg)
}

.pai-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #df2b2a
}

.pai-detail {
    font-weight: 500
}

.pai-delete {
    display: inline-flex;
    align-items: center;
    gap: 4px
}

.pai-delete::before {
    content: "";
    flex: 0 0 16px;
    width: 16px;
    height: 16px
}

.pai-delete span {
    font-weight: 500
}

.pfq-accordion .acc-header button {
    font-size: var(--fs-body-md);
    line-height: var(--lh-body-md);
    font-weight: var(--fw-body-md)
}

.pfq-accordion .acc-body {
    font-family: var(--ff-ch-body);
    font-size: var(--fs-ch-body);
    line-height: var(--lh-ch-body);
    font-weight: var(--fw-ch-body);
    border-bottom: 1px solid #e5e5e5
}

.pst-cancel .btn, .pst-cancel .gsl-details .gsi-cta .link-dir, .gsl-details .gsi-cta .pst-cancel .link-dir {
    width: 100%
}

.psr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    border-bottom: 1px solid #e5e5e5
}

.psr-body {
    flex: 1;
    max-width: 570px
}

.psr-title {
    font-size: var(--fs-title-lg);
    line-height: var(--lh-title-lg);
    font-weight: var(--fw-title-lg)
}

.psr-switch {
    flex: 0 0 52px
}

.pcl-desc {
    font-size: var(--fs-text-lg);
    line-height: var(--lh-text-lg);
    font-weight: var(--fw-text-lg)
}

.pcl-section-title {
    font-size: var(--fs-title);
    line-height: var(--lh-title);
    font-weight: var(--fw-title)
}

.pci {
    border-bottom: 1px solid #e5e5e5
}

.pci-header {
    display: flex;
    align-items: center;
    gap: 8px
}

.pci-title {
    font-size: var(--fs-title-lg);
    line-height: var(--lh-title-lg);
    font-weight: var(--fw-title-lg);
    flex: 1
}

.pci-media {
    flex: 0 0 32px
}

.pci-row {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.pci-col:last-child {
    font-weight: 500
}

.pci-code {
    display: inline-flex;
    align-items: center;
    gap: 4px
}

.pci-code span {
    font-weight: 500
}

.pci-code::after {
    content: "";
    flex: 0 0 16px;
    width: 16px;
    height: 16px
}

.pci-footer {
    text-align: right
}

.pci-resend {
    display: inline-flex;
    align-items: center;
    gap: 4px
}

.pci-resend span {
    color: #df2b2a;
    font-weight: 500
}

.pci-resend::before {
    content: "";
    flex: 0 0 16px;
    width: 16px;
    height: 16px
}

.pci-sent {
    display: inline-flex;
    align-items: center;
    gap: 4px
}

.pci-sent span {
    color: #32ad81;
    font-weight: 500
}

.pci-sent::before {
    content: "";
    flex: 0 0 16px;
    width: 16px;
    height: 16px
}

.pci.ready .pci-sent {
    display: none
}

.pci.sent .pci-sent {
    display: inline-flex
}

.pci.sent .js-send-sms-again {
    display: none
}

.pci.expired .pci-media {
    filter: grayscale(1)
}

.pci.expired .pci-table {
    opacity: .5
}

.products {
    display: grid
}

.pdp-block1 {
    position: relative
}

.pdp-like {
    position: absolute
}

.pdp-tags .tag {
    padding-block: 0
}

.pdp-title {
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
    font-weight: var(--fw-h2)
}

.pdp-price .prc {
    font-size: var(--fs-title);
    line-height: var(--lh-title);
    font-weight: var(--fw-title)
}

.pdp-price .prc small {
    font-size: var(--fs-body-md);
    line-height: var(--lh-body-md);
    font-weight: var(--fw-body-md)
}

.pdp-price > small {
    font-size: var(--fs-info);
    line-height: var(--lh-info);
    font-weight: var(--fw-info)
}

.pdp-desc p {
    font-family: var(--ff-ch-body);
    font-size: var(--fs-ch-body);
    line-height: var(--lh-ch-body);
    font-weight: var(--fw-ch-body)
}

.pdp-desc small {
    font-size: var(--fs-info);
    line-height: var(--lh-info);
    font-weight: var(--fw-info)
}

.pdp-warning {
    display: flex;
    align-items: flex-start;
    border: 1px solid #e5e5e5;
    padding-block: 16px;
    gap: 8px
}

.pdp-warning-icon {
    flex: 0 0 24px;
    width: 24px;
    height: 24px
}

.pdp-warning-inner {
    flex: 1
}

.pdp-warning-cta {
    margin-top: 12px
}

.pdp-warning-cta .link {
    font-weight: 500;
    color: #df2b2a;
    line-height: 1
}

.pdp-offer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 24px
}

.pdp-offer-date {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--fs-info);
    line-height: var(--lh-info);
    font-weight: var(--fw-info)
}

.pdp-offer-date b {
    font-weight: 500
}

.pdp-offer-date::before {
    content: "";
    width: 16px;
    height: 16px;
    flex: 0 0 16px
}

.pdp-offer-remained {
    display: inline-flex;
    align-items: center;
    gap: 4px
}

.pdp-offer-remained::before {
    content: "";
    width: 16px;
    height: 16px;
    flex: 0 0 16px
}

.pdp-offer-remained span {
    font-size: var(--fs-info);
    line-height: var(--lh-info);
    font-weight: var(--fw-info)
}

.page-pdp {
    background-color: #fff
}

.plp {
    margin-top: 16px
}

.plp-filters {
    display: flex;
    gap: 8px
}

.plp-filters > * {
    flex: none
}

.plp-categories {
    display: flex;
    margin-bottom: 20px;
    gap: 8px
}

.plp-categories > * {
    flex: none
}

.pls-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    border: 1px solid #df2b2a;
    width: 32px;
    height: 32px;
    cursor: pointer
}

.pls-cta::after {
    content: "";
    flex: 0 0 22px;
    height: 22px
}

.pls-select {
    background-color: #fff;
    padding: 16px;
    z-index: 5;
    display: none
}

.pls-select li + li {
    margin-top: 12px
}

.pls-title {
    margin-bottom: 16px;
    font-size: var(--fs-title-lg);
    line-height: var(--lh-title-lg);
    font-weight: var(--fw-title-lg);
    text-align: center
}

.pls-option {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-text-lg);
    line-height: var(--lh-text-lg);
    font-weight: var(--fw-text-lg);
    text-align: center;
    width: 100%;
    border-radius: 4px
}

.pls-option.selected {
    background-color: #f3f3f3
}

.plp-sort-ready .pls-select {
    display: block
}

.clp-items {
    display: grid
}

.cdp-details .cpi-title {
    font-size: var(--fs-h1);
    line-height: var(--lh-h1);
    font-weight: var(--fw-h1)
}

.cdp-products {
    margin-top: 32px
}

.cdp-conditions {
    max-width: 700px;
    margin-top: 32px
}

.cdp-conditions .acc-header {
    border-bottom: none
}

.cdp-conditions .acc-header button {
    font-size: var(--fs-body-md);
    line-height: var(--lh-body-md);
    font-weight: var(--fw-body-md)
}

.cdp-conditions .acc-body {
    padding-bottom: 16px
}

.cdp-conditions .acc-body h3 {
    font-weight: 500
}

.cdp-conditions .acc-item {
    border-bottom: 1px solid #e5e5e5
}

.cdp-conditions .acc-item + .acc-item {
    margin-top: 16px
}

.cdp-conditions p, .cdp-conditions li {
    font-family: var(--ff-ch-body);
    font-size: var(--fs-ch-body);
    line-height: var(--lh-ch-body);
    font-weight: var(--fw-ch-body)
}

.cdp-content .cdp-conditions {
    margin-inline: auto
}

.cdp-guide-content li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--ff-ch-body);
    font-size: var(--fs-ch-body);
    line-height: var(--lh-ch-body);
    font-weight: var(--fw-ch-body)
}

.cdp-guide-content li::before {
    content: "";
    flex: 0 0 24px;
    height: 24px;
    width: 24px
}

.cdp-guide-content li + li {
    margin-top: 16px
}

.cdp-privilege .cdp-conditions {
    margin-inline: 0
}

.cdp-cta {
    margin-top: 32px;
    max-width: 700px;
    margin-inline: auto
}

.cdp-branches {
    max-width: 700px;
    border-bottom: 1px solid #e5e5e5
}

.cdp-branches .btn-go-branches {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    font-weight: 500
}

.cdp-branches .btn-go-branches::after {
    content: "";
    flex: 0 0 16px;
    height: 16px;
    width: 16px
}

.cpp {
    margin-top: 16px
}

.prl-info {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    border: 1px solid #e5e5e5
}

.prl-info .icon {
    flex: 0 0 16px;
    font-size: 16px
}

.prl-items {
    display: grid
}

.ppl-coupon {
    --bg-color: #ffffff;
    display: flex;
    align-items: center;
    padding-inline: 8px;
    height: 48px;
    width: 100%;
    margin-top: 24px;
    background-color: var(--bg-color)
}

.ppl-coupon::before {
    content: "";
    flex: 0 0 16px;
    height: 16px;
    margin-right: 8px
}

.ppl-coupon::after {
    content: "";
    flex: 0 0 16px;
    height: 16px;
    margin-left: auto
}

.ppl-agreement .link {
    font-weight: 500
}

.ppc-header {
    display: flex;
    align-items: center;
    gap: 5px
}

.ppc-header-back {
    flex: 0 0 16px;
    height: 16px;
    transform: rotate(180deg)
}

.ppc-title {
    font-size: var(--fs-title-lg);
    line-height: var(--lh-title-lg);
    font-weight: var(--fw-title-lg)
}

.ppc-quantity {
    font-size: var(--fs-title);
    line-height: var(--lh-title);
    font-weight: var(--fw-title)
}

.ppc-footer .btn-add {
    padding-left: 12px
}

.ppc-footer .btn-add .svg, .ppc-footer .btn-add .blc-info .bli-time::after, .blc-info .ppc-footer .btn-add .bli-time::after, .ppc-footer .btn-add .cos-bonus::before, .ppc-footer .btn-add .cos-close, .ppc-footer .btn-add .cds-address-addon .btn-add::before, .cds-address-addon .ppc-footer .btn-add .btn-add::before, .ppc-footer .btn-add .ppd-cta::after, .ppc-footer .btn-add .pika-prev, .ppc-footer .btn-add .pika-next, .ppc-footer .btn-add .link-dir::after, .ppc-footer .btn-add .link-location::before, .ppc-footer .btn-add .checkbox label::before, .checkbox .ppc-footer .btn-add label::before, .ppc-footer .btn-add .radio label::before, .radio .ppc-footer .btn-add label::before, .ppc-footer .btn-add .checkbox label::after, .checkbox .ppc-footer .btn-add label::after, .ppc-footer .btn-add .radio label::after, .radio .ppc-footer .btn-add label::after, .ppc-footer .btn-add .select .wrp::after, .select .ppc-footer .btn-add .wrp::after, .ppc-footer .btn-add .fdd button::after, .fdd .ppc-footer .btn-add button::after, .ppc-footer .btn-add .acc-header > button::after, .ppc-footer .btn-add .seo-more::after, .ppc-footer .btn-add .qty-minus, .ppc-footer .btn-add .qty-plus, .ppc-footer .btn-add .qty-remove .qty-minus::after, .qty-remove .ppc-footer .btn-add .qty-minus::after, .ppc-footer .btn-add .cpn::before, .ppc-footer .btn-add .cpn::after, .ppc-footer .btn-add .cpn-inner::before, .ppc-footer .btn-add .info::before, .ppc-footer .btn-add .btn-video-thumb::after, .ppc-footer .btn-add .msg-warning::before, .ppc-footer .btn-add .pgn-dir, .ppc-footer .btn-add .rate label, .rate .ppc-footer .btn-add label, .ppc-footer .btn-add .modal-header .close-modal::before, .modal-header .ppc-footer .btn-add .close-modal::before, .ppc-footer .btn-add .modal-header .close-modal::after, .modal-header .ppc-footer .btn-add .close-modal::after, .ppc-footer .btn-add .cii-header::before, .ppc-footer .btn-add .bsi-cta::after, .ppc-footer .btn-add .mbm-current::before, .ppc-footer .btn-add .muo-resend::before, .ppc-footer .btn-add .mnp-close, .ppc-footer .btn-add .gdc-copy::before, .ppc-footer .btn-add .hmm-close, .ppc-footer .btn-add .hmm-link::after, .ppc-footer .btn-add .ntf-close, .ppc-footer .btn-add .prd-like, .ppc-footer .btn-add .cpi-badge .tag::before, .cpi-badge .ppc-footer .btn-add .tag::before, .ppc-footer .btn-add .cpi-date::before, .ppc-footer .btn-add .cpi-remained::before, .ppc-footer .btn-add .cpi-applied::before, .ppc-footer .btn-add .cpi-bonus-date::before, .ppc-footer .btn-add .bli-time::before, .ppc-footer .btn-add .lgn-back::before, .ppc-footer .btn-add .ccf-resend button::before, .ccf-resend .ppc-footer .btn-add button::before, .ppc-footer .btn-add .upo-close, .ppc-footer .btn-add .upm-settings, .ppc-footer .btn-add .upi::after, .ppc-footer .btn-add .upi::before, .ppc-footer .btn-add .poi-title::before, .ppc-footer .btn-add .pai-delete::before, .ppc-footer .btn-add .pci-code::after, .ppc-footer .btn-add .pci-resend::before, .ppc-footer .btn-add .pci-sent::before, .ppc-footer .btn-add .pdp-like, .ppc-footer .btn-add .pdp-offer-date::before, .ppc-footer .btn-add .pdp-offer-remained::before, .ppc-footer .btn-add .pls-cta::after, .ppc-footer .btn-add .cdp-guide-content li::before, .cdp-guide-content .ppc-footer .btn-add li::before, .ppc-footer .btn-add .cdp-branches .btn-go-branches::after, .cdp-branches .ppc-footer .btn-add .btn-go-branches::after, .ppc-footer .btn-add .ppl-summary-toggle, .ppc-footer .btn-add .ppl-coupon::before, .ppc-footer .btn-add .ppl-coupon::after, .ppc-footer .btn-add .ppc-header-back {
    flex: 16px;
    height: 16px;
    width: 16px
}

.pps-title {
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
    font-weight: var(--fw-h2)
}

.pps-table table {
    width: 100%
}

.pps-table td, .pps-table th {
    padding-block: 3px
}

.pps-table th {
    font-size: var(--fs-title);
    line-height: var(--lh-title);
    font-weight: var(--fw-title);
    text-align: right
}

.pps-table th:not(.total) {
    font-weight: 400
}

.pps-table td small {
    color: #7f7f7f;
    margin-left: 4px
}

.pps-table td .svg, .pps-table td .blc-info .bli-time::after, .blc-info .pps-table td .bli-time::after, .pps-table td .cos-bonus::before, .pps-table td .cos-close, .pps-table td .cds-address-addon .btn-add::before, .cds-address-addon .pps-table td .btn-add::before, .pps-table td .ppd-cta::after, .pps-table td .pika-prev, .pps-table td .pika-next, .pps-table td .link-dir::after, .pps-table td .link-location::before, .pps-table td .checkbox label::before, .checkbox .pps-table td label::before, .pps-table td .radio label::before, .radio .pps-table td label::before, .pps-table td .checkbox label::after, .checkbox .pps-table td label::after, .pps-table td .radio label::after, .radio .pps-table td label::after, .pps-table td .select .wrp::after, .select .pps-table td .wrp::after, .pps-table td .fdd button::after, .fdd .pps-table td button::after, .pps-table td .acc-header > button::after, .pps-table td .seo-more::after, .pps-table td .qty-minus, .pps-table td .qty-plus, .pps-table td .qty-remove .qty-minus::after, .qty-remove .pps-table td .qty-minus::after, .pps-table td .cpn::before, .pps-table td .cpn::after, .pps-table td .cpn-inner::before, .pps-table td .info::before, .pps-table td .btn-video-thumb::after, .pps-table td .msg-warning::before, .pps-table td .pgn-dir, .pps-table td .rate label, .rate .pps-table td label, .pps-table td .modal-header .close-modal::before, .modal-header .pps-table td .close-modal::before, .pps-table td .modal-header .close-modal::after, .modal-header .pps-table td .close-modal::after, .pps-table td .cii-header::before, .pps-table td .bsi-cta::after, .pps-table td .mbm-current::before, .pps-table td .muo-resend::before, .pps-table td .mnp-close, .pps-table td .gdc-copy::before, .pps-table td .hmm-close, .pps-table td .hmm-link::after, .pps-table td .ntf-close, .pps-table td .prd-like, .pps-table td .cpi-badge .tag::before, .cpi-badge .pps-table td .tag::before, .pps-table td .cpi-date::before, .pps-table td .cpi-remained::before, .pps-table td .cpi-applied::before, .pps-table td .cpi-bonus-date::before, .pps-table td .bli-time::before, .pps-table td .lgn-back::before, .pps-table td .ccf-resend button::before, .ccf-resend .pps-table td button::before, .pps-table td .upo-close, .pps-table td .upm-settings, .pps-table td .upi::after, .pps-table td .upi::before, .pps-table td .poi-title::before, .pps-table td .pai-delete::before, .pps-table td .pci-code::after, .pps-table td .pci-resend::before, .pps-table td .pci-sent::before, .pps-table td .pdp-like, .pps-table td .pdp-offer-date::before, .pps-table td .pdp-offer-remained::before, .pps-table td .pls-cta::after, .pps-table td .cdp-guide-content li::before, .cdp-guide-content .pps-table td li::before, .pps-table td .cdp-branches .btn-go-branches::after, .cdp-branches .pps-table td .btn-go-branches::after, .pps-table td .ppl-summary-toggle, .pps-table td .ppl-coupon::before, .pps-table td .ppl-coupon::after, .pps-table td .ppc-header-back {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-left: 4px
}

.ppd-cta {
    font-size: var(--fs-body-md);
    line-height: var(--lh-body-md);
    font-weight: var(--fw-body-md)
}

.pds-items .cpn + .cpn {
    margin-top: 6px
}

.pds-items + .pds-info {
    margin-top: 8px
}

.pds-info .info + .info {
    margin-top: 8px
}

.pce {
    display: flex;
    height: min(100dvh - 74px, 600px);
    justify-content: center
}

.pce-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 343px
}

.pce-title {
    font-size: var(--fs-title);
    line-height: var(--lh-title);
    font-weight: var(--fw-title)
}

.pce-cta {
    width: 100%
}

.pce-cta .btn, .pce-cta .gsl-details .gsi-cta .link-dir, .gsl-details .gsi-cta .pce-cta .link-dir {
    width: 100%
}

.cds-address {
    position: relative;
    z-index: 2
}

.cds-address > button {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 65px;
    display: block;
    z-index: 2
}

.cds-address-addon {
    text-align: right
}

.cds-address-addon .btn-add {
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 8px
}

.cds-address-addon .btn-add::before {
    content: "";
    flex: 0 0 16px;
    height: 16px
}

.cds-delivery-block1, .cds-delivery-block2 {
    position: relative;
    z-index: 2
}

.cds-delivery-block1 button, .cds-delivery-block2 button {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 2
}

.cds-delivery-block1-campaign, .cds-delivery-block2-campaign {
    pointer-events: none
}

.cds-payment {
    border-bottom: 1px solid #e5e5e5
}

.cds-option {
    border-bottom: 1px solid #e5e5e5
}

.cds-option-body .radio {
    margin-right: 16px
}

.cds-note textarea {
    height: 80px
}

.cos-header {
    display: flex;
    align-items: center
}

.cos-title {
    font-size: var(--fs-title);
    line-height: var(--lh-title);
    font-weight: var(--fw-title)
}

.cos-bonus {
    display: flex;
    align-items: flex-start
}

.cos-bonus::before {
    content: "";
    flex: 0 0 32px;
    height: 32px;
    width: 32px
}

.cos-bonus-inner {
    flex: 1
}

.cos-bonus-title {
    font-weight: 500
}

.cos-bonus-cta {
    margin-top: 16px
}

.cos-result {
    display: flex;
    flex-direction: column;
    align-items: center;
    border-top: 1px solid #e5e5e5
}

.cos-result-title {
    font-size: var(--fs-title);
    line-height: var(--lh-title);
    font-weight: var(--fw-title)
}

.ord-header {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.ord-title {
    font-size: var(--fs-title-lg);
    line-height: var(--lh-title-lg);
    font-weight: var(--fw-title-lg)
}

.ord-details-block b {
    font-weight: 500
}

.ord-summary {
    border-top: 1px solid #e5e5e5
}

.ors-total {
    display: flex;
    justify-content: space-between
}

.ors-total-label b {
    font-size: var(--fs-title-lg);
    line-height: var(--lh-title-lg);
    font-weight: var(--fw-title-lg)
}

.ors-total-label span {
    font-size: var(--fs-text-lg);
    line-height: var(--lh-text-lg);
    font-weight: var(--fw-text-lg);
    color: #7f7f7f;
    margin-left: 8px
}

.ors-total-price .prc span {
    font-size: var(--fs-title-lg);
    line-height: var(--lh-title-lg);
    font-weight: var(--fw-title-lg)
}

.ors-notes {
    border-top: 1px solid #e5e5e5
}

.ors-notes .acc-header {
    border-bottom: none
}

.ors-notes .acc-header button {
    font-size: var(--fs-body-md);
    line-height: var(--lh-body-md);
    font-weight: var(--fw-body-md)
}

.ors-notes .acc-body {
    font-family: var(--ff-ch-body);
    font-size: var(--fs-ch-body);
    line-height: var(--lh-ch-body);
    font-weight: var(--fw-ch-body)
}

.orp {
    display: flex;
    align-items: flex-start
}

.orp-media {
    border: 1px solid #e5e5e5
}

.orp-body {
    flex: 1
}

.orp-title {
    font-size: var(--fs-title-lg);
    line-height: var(--lh-title-lg);
    font-weight: var(--fw-title-lg)
}

.orp-table table {
    width: 100%;
    max-width: 370px
}

.orp-table th {
    font-weight: 400
}

.orp-table td small {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    font-weight: var(--fw-body);
    margin-left: 8px
}

.orp-table b {
    font-weight: 500
}

.orp-table .svg, .orp-table .blc-info .bli-time::after, .blc-info .orp-table .bli-time::after, .orp-table .pika-prev, .orp-table .pika-next, .orp-table .link-dir::after, .orp-table .link-location::before, .orp-table .checkbox label::before, .checkbox .orp-table label::before, .orp-table .radio label::before, .radio .orp-table label::before, .orp-table .checkbox label::after, .checkbox .orp-table label::after, .orp-table .radio label::after, .radio .orp-table label::after, .orp-table .select .wrp::after, .select .orp-table .wrp::after, .orp-table .fdd button::after, .fdd .orp-table button::after, .orp-table .acc-header > button::after, .orp-table .seo-more::after, .orp-table .qty-minus, .orp-table .qty-plus, .orp-table .qty-remove .qty-minus::after, .qty-remove .orp-table .qty-minus::after, .orp-table .cpn::before, .orp-table .cpn::after, .orp-table .cpn-inner::before, .orp-table .info::before, .orp-table .btn-video-thumb::after, .orp-table .msg-warning::before, .orp-table .pgn-dir, .orp-table .rate label, .rate .orp-table label, .orp-table .modal-header .close-modal::before, .modal-header .orp-table .close-modal::before, .orp-table .modal-header .close-modal::after, .modal-header .orp-table .close-modal::after, .orp-table .cii-header::before, .orp-table .bsi-cta::after, .orp-table .mbm-current::before, .orp-table .muo-resend::before, .orp-table .mnp-close, .orp-table .gdc-copy::before, .orp-table .hmm-close, .orp-table .hmm-link::after, .orp-table .ntf-close, .orp-table .prd-like, .orp-table .cpi-badge .tag::before, .cpi-badge .orp-table .tag::before, .orp-table .cpi-date::before, .orp-table .cpi-remained::before, .orp-table .cpi-applied::before, .orp-table .cpi-bonus-date::before, .orp-table .bli-time::before, .orp-table .lgn-back::before, .orp-table .ccf-resend button::before, .ccf-resend .orp-table button::before, .orp-table .upo-close, .orp-table .upm-settings, .orp-table .upi::after, .orp-table .upi::before, .orp-table .poi-title::before, .orp-table .pai-delete::before, .orp-table .pci-code::after, .orp-table .pci-resend::before, .orp-table .pci-sent::before, .orp-table .pdp-like, .orp-table .pdp-offer-date::before, .orp-table .pdp-offer-remained::before, .orp-table .pls-cta::after, .orp-table .cdp-guide-content li::before, .cdp-guide-content .orp-table li::before, .orp-table .cdp-branches .btn-go-branches::after, .cdp-branches .orp-table .btn-go-branches::after, .orp-table .ppl-summary-toggle, .orp-table .ppl-coupon::before, .orp-table .ppl-coupon::after, .orp-table .ppc-header-back, .orp-table .ppd-cta::after, .orp-table .cds-address-addon .btn-add::before, .cds-address-addon .orp-table .btn-add::before, .orp-table .cos-close, .orp-table .cos-bonus::before {
    width: 16px;
    height: 16px;
    margin-left: 6px;
    display: inline-block
}

.ost {
    padding: 7px 6px;
    font-weight: 500
}

.ost-success {
    color: #32ad81;
    background-color: rgba(50, 173, 129, .1)
}

.ost-cancelled {
    color: #df2b2a;
    background-color: rgba(223, 43, 42, .1)
}

.ost-ongoing {
    color: #ffa800;
    background-color: rgba(255, 168, 0, .1)
}

.ocp {
    width: 100%
}

.oci {
    padding-block: 10px;
    border-bottom: 1px solid #e5e5e5
}

.oci-check {
    flex: 0 0 32px
}

.oci-body {
    display: flex;
    align-items: center
}

.oci-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1
}

.oci-title {
    font-size: var(--fs-text-lg);
    line-height: var(--lh-text-lg);
    font-weight: var(--fw-text-lg)
}

.oci-price {
    font-size: var(--fs-title-lg);
    line-height: var(--lh-title-lg);
    font-weight: var(--fw-title-lg)
}

.oci-footer {
    padding-left: 32px;
    color: #7f7f7f;
    font-size: var(--fs-info);
    line-height: var(--lh-info);
    font-weight: var(--fw-info)
}

.oci + .oci {
    margin-top: 4px
}

.hps-offers .sct-body {
    --gap: 15px;
    display: flex;
    gap: var(--gap)
}

.hps-offers .bro {
    flex: 1
}

.hps-offers .sct-body-special {
    flex-wrap: wrap
}

.hps-offers .sct-body-special .bro {
    flex: 1 1 48%
}

.hps-offers .sct-body-special .bro .bro-body {
    max-width: fit-content
}

.pnp {
    flex-direction:column;
    background: url(../_ui/responsive/theme-ipragaz/images/404-bg.jpg) no-repeat center center;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100dvh;
    width: 100%;
    color: #fff;
    padding-inline: 16px
}

.pnp-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    width: 100%;
    max-width: 424px;
    color: #fff;
}
.page-notFound .prd-detail.product-cart-item{
    display:none;
}

.pnp-title {
    font-size: 56px;
    line-height: 64px;
    font-weight: 600;
}

.pnp-sub {
    font-size: var(--fs-title);
    line-height: var(--lh-title);
    font-weight: var(--fw-title);
    margin-top: 15px;
}

.pnp-desc {
    font-size: var(--fs-title);
    line-height: var(--lh-title);
    font-weight: var(--fw-title);
    font-weight: 400;
    margin-top: 24px
}

.pnp-cta {
    margin-top: 40px
}

.ccm {
    background-color: #fff;
    position: fixed;
    bottom: 0;
    right: 0;
    width: 100%;
    z-index: 6
}

.ccm-title {
    font-size: var(--fs-title-lg);
    line-height: var(--lh-title-lg);
    font-weight: var(--fw-title-lg)
}

.ccm-text {
    font-family: var(--ff-ch-body);
    font-size: var(--fs-ch-body);
    line-height: var(--lh-ch-body);
    font-weight: var(--fw-ch-body);
    margin-top: 24px
}

.ccm-cta {
    margin-top: 32px
}

.ccm-cta-2 {
    display: flex
}

.ccm-cta .btn, .ccm-cta .gsl-details .gsi-cta .link-dir, .gsl-details .gsi-cta .ccm-cta .link-dir {
    width: 220px
}

.ccm.ccm-saved {
    display: none
}

.goh-bonus {
    background-color: #fff;
    border-bottom: 1px solid #e5e5e5
}

.gop-inner {
    display: flex;
    align-items: center
}

.gop-guide .link {
    font-weight: 500
}

.gop-desc {
    font-size: var(--fs-title);
    line-height: var(--lh-title);
    font-weight: var(--fw-title)
}

.gop-cta {
    display: flex;
    align-items: center
}

.gos {
    display: flex;
    align-items: center
}

.gos-title {
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
    font-weight: var(--fw-h2)
}

.gos-desc {
    font-size: var(--fs-text-lg);
    line-height: var(--lh-text-lg);
    font-weight: var(--fw-text-lg)
}

.gsi {
    background-color: #fff;
    padding: 16px
}

.gsi-title {
    font-size: var(--fs-title-lg);
    line-height: var(--lh-title-lg);
    font-weight: var(--fw-title-lg);
    margin-bottom: 16px
}

.gsi-footer {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.gsi-cta {
    font-weight: 500;
    color: #df2b2a
}

.gsi + .gsi {
    margin-top: 2px
}

.blg-desc {
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
    font-weight: var(--fw-h2);
    max-width: 565px
}

.blg-items {
    display: grid;
    grid-template-columns:repeat(auto-fill, minmax(343px, 1fr))
}

.blg-paging {
    margin-top: 32px
}

.bld-desc {
    max-width: 620px;
    margin-inline: auto;
    font-family: var(--ff-ch-body);
    font-size: var(--fs-ch-body);
    line-height: var(--lh-ch-body);
    font-weight: var(--fw-ch-body)
}

.bld-content {
    display: flex;
    flex-direction: column;
    align-items: center
}

.bld-content-media {
    max-width: 848px
}

.bld-content-section {
    max-width: 620px
}

.bld-content-section h4 {
    font-size: var(--fs-title);
    line-height: var(--lh-title);
    font-weight: var(--fw-title);
    margin-bottom: 24px
}

.bld-content-section p {
    font-family: var(--ff-ch-body);
    font-size: var(--fs-ch-body);
    line-height: var(--lh-ch-body);
    font-weight: var(--fw-ch-body)
}

.bld-content-section li {
    font-family: var(--ff-ch-body);
    font-size: var(--fs-ch-body);
    line-height: var(--lh-ch-body);
    font-weight: var(--fw-ch-body)
}

.bld-content-section h1 {
    font-size: var(--fs-h1);
    line-height: var(--lh-h1);
    font-weight: var(--fw-h1);
    margin-bottom: 24px
}

.bld-content-section h2 {
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
    font-weight: var(--fw-h2);
    margin-bottom: 12px
}

.blc-title {
    font-size: var(--fs-h1);
    line-height: var(--lh-h1);
    font-weight: var(--fw-h1)
}

.blc-info {
    display: flex;
    align-items: center
}

.sph {
    display: flex;
    align-items: center
}

.sph-body {
    flex: 1
}

.spp {
    display: flex;
    align-items: center;
    gap: 8px
}

.spp-label {
    font-size: var(--fs-info-hl);
    line-height: var(--lh-info-hl);
    font-weight: var(--fw-info-hl)
}

.spp-bar {
    background-color: #f3f3f3;
    overflow: hidden;
    border-radius: 12px;
    flex: 1;
    height: 8px
}

.spp-bar span {
    content: "";
    background-color: #005270;
    height: 100%;
    width: 0;
    display: block
}

.spc-controls {
    background-color: #fff
}

.spc-controls-dir {
    display: flex;
    align-items: center
}

.spc-controls-dir .btn, .spc-controls-dir .gsl-details .gsi-cta .link-dir, .gsl-details .gsi-cta .spc-controls-dir .link-dir {
    flex: 1
}

.spc-complete {
    display: none
}

.spc-start .spc-prev {
    display: none
}

.spc-end .spc-next {
    display: none
}

.spc-end .spc-complete {
    display: inline-flex
}

.sps {
    display: none
}

.sps-media {
    display: flex;
    justify-content: center
}

.sps-body {
    min-height: 432px
}

.sps-title {
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
    font-weight: var(--fw-h2);
    text-align: center
}

.sps-question {
    font-size: var(--fs-title-lg);
    line-height: var(--lh-title-lg);
    font-weight: var(--fw-title-lg)
}

.sps-option {
    margin-top: 24px
}

.sps-text {
    margin-top: 24px;
    max-width: 480px
}

.sps-desc {
    min-height: 100px
}

.sps-rate {
    display: flex;
    justify-content: center
}

.sps.active {
    display: block
}

.page-survey-completed .sps-body {
    min-height: auto
}

.page-survey-completed .spp-bar span {
    width: 100%
}

.modal-goh-modal-station-items .gos-media {
    flex: auto;
    text-align: center
}

.modal-goh-modal-station-items .gos-media .responsive {
    display: inline-block
}

.goh-station-no-items .gos-media {
    width: fit-content;
    text-align: -webkit-center
}

.hps-hayat-content {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden
}

.hps-hayat-content .hps-hayat {
    flex: 1 0 33%;
    margin-right: .25rem
}

@media (max-width: 1024px) {
    .hps-hayat-content .hps-hayat {
        flex: 1 0 50%
    }
}

@media (max-width: 700px) {
    .hps-hayat-content .hps-hayat {
        flex: 1 0 65%
    }
}

@media (max-width: 1024px) {
    .d {
        display: none !important
    }

    html {
        font-size: 16px
    }

    .scrollable-h, .blg-filters, .clp-filters, .plp-categories, .plp-filters, .mbm-history-filters {
        white-space: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        -ms-overflow-style: -ms-autohiding-scrollbar
    }

    .scrollable-h > *, .blg-filters > *, .clp-filters > *, .plp-categories > *, .plp-filters > *, .mbm-history-filters > * {
        white-space: normal
    }

    .scrollable-h::-webkit-scrollbar, .blg-filters::-webkit-scrollbar, .clp-filters::-webkit-scrollbar, .plp-categories::-webkit-scrollbar, .plp-filters::-webkit-scrollbar, .mbm-history-filters::-webkit-scrollbar {
        display: none
    }

    [class*=container-max-] {
        padding-inline: 16px
    }

    [class*=container-max-].no-pad {
        padding-inline: 0
    }

    .container-max-540 {
        max-width: 572px
    }

    .container-max-540.no-pad {
        max-width: 540px
    }

    .container-max-720 {
        max-width: 752px
    }

    .container-max-720.no-pad {
        max-width: 720px
    }

    .container-max-830 {
        max-width: 862px
    }

    .container-max-830.no-pad {
        max-width: 830px
    }

    .container-max-1008 {
        max-width: 1040px
    }

    .container-max-1008.no-pad {
        max-width: 1008px
    }

    .container-max-1180 {
        max-width: 1212px
    }

    .container-max-1180.no-pad {
        max-width: 1180px
    }

    .container-max-1264 {
        max-width: 1296px
    }

    .container-max-1264.no-pad {
        max-width: 1264px
    }

    .container-max-1380 {
        max-width: 1412px
    }

    .container-max-1380.no-pad {
        max-width: 1380px
    }

    .btn, .gsl-details .gsi-cta .link-dir {
        --btn-height: 32px
    }

    .btn-lg {
        --btn-height: 40px
    }

    .nav-tabs {
        border-bottom: 1px solid #e5e5e5;
        padding-inline: 16px
    }

    .nav-tabs.fit {
        padding-inline: 0
    }

    .tag {
        padding: 6px
    }

    .tag-icon {
        gap: 4px
    }

    .tag-icon .icon {
        font-size: 12px;
        flex: 0 0 12px
    }

    .splide__desc {
        bottom: 24px;
        padding-inline: 16px
    }

    .seo {
        margin-top: 32px
    }

    .seo-body.less .seo-content {
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 11;
        -webkit-box-orient: vertical;
        text-overflow: ellipsis;
        height: 215.6px
    }

    .cnf-buttons {
        margin-top: 24px
    }

    .msg {
        padding-block: 18px
    }

    .modal-content {
        background-color: #f8f8f8
    }

    .modal-title {
        order: 1
    }

    .modal-header .close-modal {
        margin-right: 8px
    }

    .modal-header .close-modal::after {
        content: "";
        width: 16px;
        height: 16px;
        transform: rotate(180deg)
    }

    .modal-footer {
        padding: 16px 24px
    }

    .cbx-cta {
        margin-top: 32px
    }

    .acl {
        padding: 16px 8px 8px;
        background-color: #fff
    }

    .acl-items .cpn + .cpn {
        margin-top: 8px
    }

    .cii-header {
        padding-bottom: 8px;
        margin-bottom: 8px
    }

    .cii-rules-title {
        margin-bottom: 4px
    }

    .gsl-controls {
        margin-top: 16px
    }

    .gsl-items {
        margin-top: 16px
    }

    .mbm {
        margin-inline: -16px
    }

    .mbm-tabs .nav-tabs {
        margin-bottom: 24px
    }

    .mbm-current {
        padding: 12px 16px 12px 56px;
        border-bottom: 1px solid #e5e5e5
    }

    .mbm-current::before {
        top: calc(50% - 16px);
        left: 16px
    }

    .mbm-items {
        padding-inline: 16px;
        margin-top: 16px
    }

    .mbm-cta {
        padding: 16px
    }

    .mbm-history-filters {
        padding-inline: 16px
    }

    .mbm-history-items {
        padding-inline: 16px;
        margin-top: 24px
    }

    .mbi {
        padding-block: 12px
    }

    .mbi-body {
        margin-top: 12px
    }

    .mbi-body .info + .info {
        margin-top: 12px
    }

    .mbi-footer {
        margin-top: 12px
    }

    .mbi + .mbi {
        margin-top: 8px
    }

    .mub-select, .mub-cancel {
        padding-inline: 24px
    }

    .muo {
        padding-inline: 16px
    }

    .muo-info {
        margin-top: 24px
    }

    .muo-title {
        margin-top: 32px
    }

    .muo-code {
        margin-top: 4px
    }

    .muo-timer {
        margin-top: 24px
    }

    .muo-resend {
        margin-top: 24px
    }

    .mnp {
        padding: 24px
    }

    .mnp-title {
        margin-bottom: 4px
    }

    .mnp-m-bottom {
        bottom: 0;
        left: 0;
        border-radius: 8px 8px 0 0
    }

    .mnp-m-bottom .mnp-close {
        display: none
    }

    .mnp-footer {
        background-color: #fff;
        padding: 12px 16px;
        margin-inline: -24px
    }

    .mnp-footer .btn + .btn, .mnp-footer .gsl-details .gsi-cta .link-dir + .btn, .gsl-details .gsi-cta .mnp-footer .link-dir + .btn, .mnp-footer .gsl-details .gsi-cta .btn + .link-dir, .gsl-details .gsi-cta .mnp-footer .btn + .link-dir, .mnp-footer .gsl-details .gsi-cta .link-dir + .link-dir, .gsl-details .gsi-cta .mnp-footer .link-dir + .link-dir {
        margin-top: 12px
    }

    .dds {
        margin-inline: -24px;
        padding-bottom: 16px
    }

    .dds-slots {
        padding-inline: 16px;
        margin-top: 16px
    }

    .dds-slots li + li {
        margin-top: 10px
    }

    .mas {
        margin-inline: -8px;
        margin-bottom: 16px
    }

    .csb {
        margin-inline: -8px;
        margin-bottom: 16px
    }

    .gdc-desc {
        margin-top: 16px
    }

    .gdc-date {
        margin-top: 8px
    }

    .gdc-code {
        margin-top: 16px
    }

    #mnp-get-discount-code .mnp-header {
        display: none
    }

    .abd-desc {
        margin-top: 4px
    }

    .abd-form {
        margin-top: 24px
    }

    .abd-form .form-button {
        margin-top: 24px
    }

    .dln-body {
        margin-top: 16px
    }

    .dln-cta {
        margin-top: 24px
    }

    .apm-form {
        margin-block: 24px 12px
    }

    .mnp .pika-single {
        top: auto !important;
        bottom: 100%
    }

    #site-header {
        height: 140px
    }

    .hdr-block2 {
        border-bottom: 1px solid #f3f3f3
    }

    .hdr-block2-left {
        display: flex;
        align-items: center;
        gap: 8px
    }

    .hdr-block2-left .logo {
        width: 97px
    }

    .hdr-block2-right .btn-cart.contains-product {
        position: relative;
        display: block
    }

    .hdr-block3-wrapper {
        display: flex;
        flex-direction: column
    }

    .hdr-tabs {
        order: 1;
        margin-inline: -16px
    }

    .hdr-location {
        padding-block: 8px
    }

    .hmm {
        position: fixed;
        top: 0;
        left: 0;
        height: 100dvh;
        width: 100%;
        background-color: #f8f8f8;
        display: none;
        flex-direction: column;
        z-index: 6
    }

    .hmm-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: #fff;
        padding-inline: 16px;
        height: 64px
    }

    .hmm-close {
        flex: 0 0 16px;
        height: 16px
    }

    .hmm-menu {
        background-color: #fff
    }

    .hmm-link {
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #e5e5e5;
        height: 48px;
        padding-inline: 16px
    }

    .hmm-link::after {
        content: "";
        flex: 0 0 16px;
        height: 16px
    }

    .hmm-social {
        padding-inline: 16px;
        margin-top: 32px
    }

    .hmm-social .flu {
        display: flex;
        align-items: center;
        gap: 16px
    }

    .hmm-footer {
        margin-block: auto 48px;
        text-align: center
    }

    .hmm-footer .btn-logout {
        display: inline-flex;
        align-items: center;
        gap: 4px
    }

    .hmm-footer .btn-logout .icon {
        flex: 0 0 16px;
        height: 16px;
        font-size: 16px
    }

    .hmm-footer .btn-logout span {
        color: #df2b2a
    }

    .header-menu-ready .hmm {
        animation: toRight .3s ease forwards;
        display: flex
    }

    .header-basic {
        display: none
    }

    .ntf {
        position: fixed;
        top: 49px;
        left: 0;
        z-index: 5;
        width: 100%
    }

    .profile-menu-ready #header-profile-menu .upo {
        animation: toRight .3s ease forwards;
        display: block
    }

    .profile-menu-ready #overlay {
        z-index: 3;
        display: block
    }

    .footer {
        margin-top: 32px
    }

    .ftr-block1 {
        padding-top: 8px
    }

    .ftr-info {
        padding-block: 24px;
        border-top: 1px solid #c2c2c2
    }

    .ftr-links {
        padding-block: 24px;
        border-top: 1px solid #c2c2c2
    }

    .ftr-social {
        padding-block: 24px
    }

    .ftr-block2-inner {
        height: 36px
    }

    .prd-offer-text {
        padding-right: 3px
    }

    .prd-offer-price {
        font-size: .9rem
    }

    .prd-name {
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        text-overflow: ellipsis;
        height: 33px
    }

    .cpi-badge {
        top: 8px;
        right: 8px
    }

    .cpi-body {
        padding: 8px
    }

    .cpi-title {
        margin-top: 16px;
        margin-bottom:10px;
    }

    .cpi-desc {
        margin-top: 10px
    }

    .cpi-bonus-date {
        order: 1;
        margin-top: 8px
    }

    .bli-body {
        padding: 8px
    }

    .bli-title {
        margin-top: 16px
    }

    .bli-desc {
        margin-top: 12px;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        text-overflow: ellipsis;
        height: 58.8px
    }

    .bro {
        flex-direction: column;
        border-radius: 4px;
        gap: 15px;
        padding: 0 8px 16px
    }

    .bro-logo {
        align-self: center;
        width: 100px;
        flex: 0 0 100px;
        display: flex;
        align-items: center
    }

    .bro-title {
        margin-bottom: 4px
    }

    .hyt {
        padding: 12px;
        gap: 16px
    }

    .hyt-media {
        flex: 0 0 72px
    }

    .hyt-content {
        margin-bottom: 13px
    }

    .ppr {
        gap: 8px
    }

    .ppr-media {
        flex: 0 0 90px;
        height: 100px
    }

    .ppr-media figure {
        width: 60px
    }

    .ppr-body {
        position: relative
    }

    .ppr-price {
        margin-top: auto
    }

    .ppr-quantity {
        position: absolute;
        right: 0;
        bottom: 0
    }

    .lgn-inner {
        max-width: 375px;
        margin-inline: auto
    }

    .lgn-header {
        background-color: #fff;
        padding-inline: 16px;
        margin-inline: -16px
    }

    .lgn-body {
        padding: 20px 16px;
        height: calc(100dvh - 64px);
        display: flex;
        flex-direction: column;
        gap: 30px
    }

    .lgn-form {
        flex: 1;
        display: flex;
        flex-direction: column
    }

    .lgn-form .form-btn {
        margin-block: auto 24px
    }

    .lgn-media {
        margin-bottom: 24px
    }

    .lgn-location .lgn-body {
        height: 100dvh
    }

    .ccf-timer {
        margin-top: 24px
    }

    .upo {
        background-color: #f8f8f8;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        max-width: 400px;
        height: 100dvh;
        z-index: 5;
        overflow: auto;
        padding-bottom: 24px;
        display: none
    }

    .upo-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 64px;
        padding-inline: 16px;
        background-color: #fff
    }

    .upo-close {
        flex: 0 0 16px;
        width: 16px;
        height: 16px
    }

    .profile-menu-ready .upo {
        animation: toRight .3s ease forwards;
        display: block
    }

    .profile-menu-ready #overlay {
        z-index: 3;
        display: block
    }

    .upm-body {
        margin-top: 10px
    }

    .upm-footer {
        margin-top: 32px;
        text-align: center
    }

    .upm-logout {
        display: inline-flex;
        align-items: center;
        justify-content: space-between;
        color: #df2b2a;
        gap: 4px
    }

    .upi-icon {
        color: #df2b2a
    }

    .upp-header {
        height: 64px;
        padding-inline: 16px;
        margin-inline: -16px
    }

    .upp-body {
        margin-top: 16px
    }

    .pud-form .form-button {
        margin-top: 32px
    }

    .pud-form .form-button .btn, .pud-form .form-button .gsl-details .gsi-cta .link-dir, .gsl-details .gsi-cta .pud-form .form-button .link-dir {
        width: 100%
    }

    .unp-section-items {
        margin-top: 16px
    }

    .unp-section + .unp-section {
        margin-top: 15px
    }

    .uni {
        padding-bottom: 16px
    }

    .uni-date {
        padding-left: 24px
    }

    .uni-icon {
        flex: 0 0 16px;
        height: 16px
    }

    .uni-inner {
        margin-top: 12px
    }

    .uni-desc {
        margin-top: 12px
    }

    .uni-cta {
        margin-top: 16px
    }

    .uni + .uni {
        margin-top: 8px
    }

    .epm {
        margin-block: 82px
    }

    .epm-title {
        margin-top: 16px;
        order: 1
    }

    .epm-media {
        width: 72px;
        height: 72px
    }

    .poh {
        margin-inline: -16px
    }

    .poi {
        padding: 16px
    }

    .poi-header {
        margin-bottom: 8px
    }

    .poi-body {
        margin-top: 12px
    }

    .poi-desc {
        flex: 1
    }

    .poi-cta {
        margin-top: 12px
    }

    .pad-cta {
        margin-top: 32px
    }

    .pad-cta .btn, .pad-cta .gsl-details .gsi-cta .link-dir, .gsl-details .gsi-cta .pad-cta .link-dir {
        width: 100%
    }

    .pai {
        border: 1px solid #e5e5e5;
        border-radius: 4px;
        padding: 8px 16px 16px;
        background-color: #fff
    }

    .pai-desc {
        margin-top: 4px
    }

    .pai-footer {
        margin-top: 16px
    }

    .pai + .pai {
        margin-top: 16px
    }

    .pfq {
        margin-inline: -16px
    }

    .pfq-accordion .acc-header {
        padding-inline: 16px
    }

    .pfq-accordion .acc-body {
        padding-inline: 16px
    }

    .pcu-form {
        margin-top: 16px
    }

    .pcu-form-block2 {
        margin-top: 20px
    }

    .pcu-form-button {
        margin-top: 40px
    }

    .pcu-form-button .btn, .pcu-form-button .gsl-details .gsi-cta .link-dir, .gsl-details .gsi-cta .pcu-form-button .link-dir {
        width: 100%
    }

    .pst-items {
        margin-inline: -16px;
        background-color: #fff
    }

    .pst-cancel {
        margin-top: 40px
    }

    .psr {
        padding: 12px 16px
    }

    .psr-title {
        margin-bottom: 4px
    }

    .pcl-desc {
        margin-bottom: 16px
    }

    .pcl-section-items {
        background-color: #fff;
        margin-inline: -16px
    }

    .pcl-section-title {
        margin-bottom: 16px
    }

    .pcl-section + .pcl-section {
        margin-top: 24px
    }

    .pci {
        padding: 16px
    }

    .pci-row {
        margin-top: 16px
    }

    .pci-footer {
        margin-top: 16px
    }

    .odp-message {
        margin: 0 -16px 16px
    }

    .products {
        grid-template-columns:repeat(auto-fill, minmax(164px, 1fr));
        gap: 14px
    }

    .pdp {
        margin-bottom: 35px
    }

    .pdp-gallery {
        margin-inline: -16px;
        border-bottom: 8px solid #f8f8f8;
        padding-bottom: 10px
    }

    .pdp-gallery img {
        width: 100%
    }

    .pdp-like {
        top: 8px;
        right: 0
    }

    .pdp-tags {
        margin-block: 16px
    }

    .pdp-tags .tag {
        height: 20px
    }

    .pdp-cta {
        position: fixed;
        right: 16px;
        bottom: 20px;
        z-index: 2
    }

    .pdp-details {
        border-top: 14px solid #f8f8f8;
        margin-inline: -16px;
        padding-inline: 16px;
        margin-top: 16px;
        order: 3
    }

    .pdp-suggestion {
        margin-inline: -16px;
        padding-inline: 16px;
        background-color: #f8f8f8;
        padding-top: 32px
    }

    .pdp-price {
        position: fixed;
        left: 0;
        bottom: 0;
        z-index: 1;
        width: 100%;
        height: 80px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-inline: 16px;
        background-color: #fff;
        border-top: 1px solid #e5e5e5
    }

    .pdp-price .prc {
        width: 60%
    }

    .pdp-warning {
        margin-inline: -16px;
        padding-inline: 16px;
        background-color: #fff;
        margin-top: 24px
    }

    .pdp-offer {
        margin-top: 12px
    }

    .splide-product {
        margin-inline: -16px
    }

    .splide-product .splide__list {
        gap: 8px
    }

    .splide-product .splide__slide {
        flex: 0 0 164px
    }

    .page-pdp #site-main {
        margin-bottom: 100px
    }

    .plp-filters {
        margin-inline: -16px;
        padding-inline: 16px
    }

    .plp-categories {
        margin-inline: -16px;
        padding-inline: 16px
    }

    .plp-products {
        margin-top: 16px
    }

    .pls-select {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        border-radius: 10px 10px 0 0
    }

    .pls-option {
        height: 37px
    }

    .plp-sort-ready {
        overflow: hidden
    }

    .plp-sort-ready #overlay {
        z-index: 3;
        display: block
    }

    .plp-sort-ready .pls-select {
        animation: toTop .3s ease forwards
    }

    .clp {
        margin-top: 16px
    }

    .clp-filters {
        margin-inline: -16px;
        padding-inline: 16px
    }

    .clp-filters .chip + .chip {
        margin-left: 8px
    }

    .clp-items {
        grid-template-columns:repeat(auto-fill, minmax(320px, 1fr));
        gap: 16px;
        margin-top: 16px
    }

    .cdp {
        display: flex;
        flex-direction: column
    }

    .cdp-media {
        overflow: hidden;
        height: 305px;
        position: relative;
        margin-inline: -16px
    }

    .cdp-media img {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        max-width: none;
        height: 100%
    }

    .cdp-body {
        margin-top: 8px
    }

    .cdp-guide-video {
        margin-top: 32px
    }

    .cdp-privilege .cpi-info {
        display: grid;
        grid-template-columns:70% 30%
    }

    .cdp-privilege .cpi-remained {
        margin-left: auto
    }

    .cdp-branches .btn-go-branches {
        height: 40px
    }

    .prl {
        margin-top: 8px
    }

    .prl-info {
        padding: 12px 29px 12px 16px;
        margin-inline: -16px;
        max-width: 440px
    }

    .prl-items {
        grid-template-columns:repeat(auto-fill, minmax(320px, 1fr));
        gap: 16px;
        margin-top: 8px
    }

    .page-campaign-go-detail {
        margin-bottom: 64px
    }

    .page-campaign-go-detail .cdp-products {
        order: 1
    }

    .page-campaign-go-detail .cdp-cta {
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 3;
        width: 100%;
        background-color: #fff;
        padding: 16px
    }

    .page-campaign-go-detail .cdp-cta .btn, .page-campaign-go-detail .cdp-cta .gsl-details .gsi-cta .link-dir, .gsl-details .gsi-cta .page-campaign-go-detail .cdp-cta .link-dir {
        width: 100%
    }

    .page-campaign-go-detail .cdp-cta .btn + .btn, .page-campaign-go-detail .cdp-cta .gsl-details .gsi-cta .link-dir + .btn, .gsl-details .gsi-cta .page-campaign-go-detail .cdp-cta .link-dir + .btn, .page-campaign-go-detail .cdp-cta .gsl-details .gsi-cta .btn + .link-dir, .gsl-details .gsi-cta .page-campaign-go-detail .cdp-cta .btn + .link-dir, .page-campaign-go-detail .cdp-cta .gsl-details .gsi-cta .link-dir + .link-dir, .gsl-details .gsi-cta .page-campaign-go-detail .cdp-cta .link-dir + .link-dir {
        margin-top: 12px
    }

    .ppl-summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 6;
        width: 100%;
        height: 80px;
        background-color: #fff;
        padding-inline: 16px
    }

    .ppl-summary-toggle {
        width: 16px;
        height: 16px;
        transform: rotate(-180deg);
        position: absolute;
        top: calc(50% - 8px);
        left: calc(50% - 8px)
    }

    .ppl-total {
        flex: 1;
        max-width: 50%
    }

    .ppl-total .prc {
        display: block
    }

    .ppl-agreement {
        margin-top: 16px;
        padding: 16px;
        background-color: #fff
    }

    .ppl-discounts {
        margin-top: 16px
    }

    .ppc-header {
        height: 64px;
        background-color: #fff;
        padding-inline: 16px;
        margin-inline: -16px
    }

    .ppc-body {
        margin-top: 8px
    }

    .ppc-body .pdp-warning {
        margin-bottom: 8px
    }

    .ppc-row {
        background-color: #fff;
        padding: 8px
    }

    .ppc-row + .ppc-row {
        margin-top: 5px
    }

    .ppc-footer {
        margin-top: 16px;
        text-align: right
    }

    .pps {
        background-color: #fff;
        position: fixed;
        z-index: 5;
        left: 0;
        bottom: 80px;
        width: 100%;
        padding: 16px;
        display: none
    }

    .pps-title {
        margin-bottom: 16px
    }

    .pps-quantity {
        margin-bottom: 16px
    }

    .checkout-summary-ready {
        overflow: hidden
    }

    .checkout-summary-ready .pps {
        animation: toTop .3s ease forwards;
        display: block
    }

    .checkout-summary-ready #overlay {
        z-index: 3;
        display: block
    }

    .ppd {
        background-color: #fff;
        padding: 16px 8px 8px
    }

    .ppd-cta {
        cursor: default
    }

    .pds {
        margin-top: 16px
    }

    .pds-title {
        margin-bottom: 10px
    }

    .pce {
        margin-top: 60px
    }

    .pce-desc {
        order: 1;
        max-width: 282px;
        text-align: center;
        margin-top: 78px
    }

    .pce-cta {
        order: 2;
        margin-top: 30px
    }

    .cds-address-addon {
        margin-top: 20px
    }

    .cds-delivery {
        margin-top: 24px
    }

    .cds-delivery-block2 {
        margin-top: 16px
    }

    .cds-payment {
        margin-top: 32px;
        padding: 16px 8px;
        background-color: #fff
    }

    .cds-payment-title {
        margin-bottom: 16px
    }

    .cds-payment-body li + li {
        margin-top: 8px
    }

    .cds-note {
        margin-top: 16px
    }

    .cds-option {
        margin-top: 16px;
        padding: 8px;
        background-color: #fff
    }

    .cds-option-title {
        margin-bottom: 8px
    }

    .cos-header {
        height: 64px;
        justify-content: space-between
    }

    .cos-close {
        flex: 0 0 16px;
        height: 16px
    }

    .cos-bonus {
        padding-block: 16px;
        gap: 8px
    }

    .cos-bonus-desc {
        margin-top: 4px
    }

    .cos-result {
        padding-block: 40px 24px;
        margin-inline: -16px
    }

    .cos-result-desc {
        margin-top: 16px
    }

    .ord-details {
        margin-top: 20px
    }

    .ord-details-block {
        display: flex;
        justify-content: space-between;
        gap: 16px
    }

    .ord-details-block b {
        flex: 1;
        text-align: right
    }

    .ord-details-block + .ord-details-block {
        margin-top: 24px
    }

    .ord-info {
        margin-top: 24px
    }

    .ord-info-block {
        display: flex;
        justify-content: space-between;
        gap: 16px
    }

    .ord-info-block b {
        flex: 1;
        text-align: right
    }

    .ord-info-block + .ord-info-block {
        margin-top: 24px
    }

    .ord-summary {
        margin-top: 16px
    }

    .ors-total {
        align-items: center;
        height: 58px;
        border-bottom: 1px solid #e5e5e5
    }

    .ors-products {
        margin-top: 46px
    }

    .ors-notes {
        margin-top: 24px
    }

    .ors-cta {
        border-top: 1px solid #e5e5e5;
        margin-inline: -16px;
        padding-inline: 24px;
        padding-top: 24px
    }

    .ors-cta .btn, .ors-cta .gsl-details .gsi-cta .link-dir, .gsl-details .gsi-cta .ors-cta .link-dir {
        width: 100%
    }

    .orp {
        gap: 8px
    }

    .orp-media {
        width: 60px;
        height: 60px;
        padding: 4px
    }

    .ocp {
        margin-top: 24px
    }

    .hps-products {
        margin-top: 32px
    }

    .hps-campaigns, .hps-blog {
        margin-top: 32px
    }

    .hps-campaigns .sct-body, .hps-blog .sct-body {
        margin-inline: -16px
    }

    .hps-offers, .hps-hayat {
        margin-top: 32px
    }

    .splide-campaign .splide__list {
        gap: 8px
    }

    .splide-campaign .splide__slide {
        flex: 0 0 320px
    }

    .splide-blog .splide__list {
        gap: 8px
    }

    .splide-blog .splide__slide {
        flex: 0 0 320px
    }

    .ccm {
        padding: 16px
    }

    .ccm-cta-1 .btn, .ccm-cta-1 .gsl-details .gsi-cta .link-dir, .gsl-details .gsi-cta .ccm-cta-1 .link-dir {
        width: 100%
    }

    .ccm-cta-2 {
        margin-top: 16px;
        gap: 8px
    }

    .goh-bonus {
        padding-block: 12px 20px
    }

    .goh-slider {
        padding-block: 16px
    }

    .gop-inner {
        gap: 13px;
        margin-top: 8px
    }

    .gop-media {
        flex: 0 0 54px
    }

    .gop-guide {
        text-align: right
    }

    .gop-desc {
        margin-bottom: 12px
    }

    .gop-cta {
        gap: 14px
    }

    .gos {
        border: 1px solid #e5e5e5;
        border-radius: 4px;
        padding-block: 12px 20px;
        gap: 12px;
        background-color: #fff
    }

    .gos-media {
        flex: 0 0 110px
    }

    .gos-desc {
        margin-block: 4px 16px
    }

    .blg-desc {
        margin-top: 24px
    }

    .blg-filters {
        margin: 24px -16px;
        padding-inline: 16px
    }

    .blg-filters .chip {
        padding-inline: 8px;
        border-radius: 4px
    }

    .blg-items {
        gap: 16px
    }

    .bld-desc {
        margin-top: 24px
    }

    .bld-content-media {
        margin-top: 24px
    }

    .bld-content-section {
        margin-top: 24px
    }

    .blc-body {
        margin-top: 24px;
        max-width: 280px
    }

    .blc-info {
        gap: 16px;
        margin-top: 16px
    }

    .survey-pages {
        margin-bottom: 112px
    }

    .survey-pages .header-basic {
        display: block
    }

    .sph {
        flex-direction: column;
        margin-inline: -16px
    }

    .sph-logo {
        width: 105px;
        order: 1;
        margin-top: 42px
    }

    .sph-body {
        background-color: #fff;
        padding-inline: 16px;
        width: 100%
    }

    .spp {
        height: 48px
    }

    .spc {
        margin-inline: -16px;
        margin-top: 42px
    }

    .spc-controls {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        padding: 16px 24px
    }

    .spc-controls .btn, .spc-controls .gsl-details .gsi-cta .link-dir, .gsl-details .gsi-cta .spc-controls .link-dir {
        width: 100%
    }

    .spc-controls-dir {
        flex: 1;
        gap: 9px;
        margin-bottom: 16px
    }

    .sps-media {
        margin-bottom: 24px
    }

    .sps-title {
        margin-bottom: 24px
    }

    .sps-rate {
        margin-top: 32px
    }

    .sps-body {
        padding-inline: 16px
    }

    .page-survey-completed .spc-controls .btn + .btn, .page-survey-completed .spc-controls .gsl-details .gsi-cta .link-dir + .btn, .gsl-details .gsi-cta .page-survey-completed .spc-controls .link-dir + .btn, .page-survey-completed .spc-controls .gsl-details .gsi-cta .btn + .link-dir, .gsl-details .gsi-cta .page-survey-completed .spc-controls .btn + .link-dir, .page-survey-completed .spc-controls .gsl-details .gsi-cta .link-dir + .link-dir, .gsl-details .gsi-cta .page-survey-completed .spc-controls .link-dir + .link-dir {
        margin-top: 16px
    }
}

@media (min-width: 1025px) {
    :root {
        --fs-link: 0.75rem;
        --fs-px-link: 12px;
        --lh-link: 1.3;
        --fs-link-hl: 0.625rem;
        --fs-px-link-hl: 10px;
        --lh-link-hl: 1.2;
        --fw-link-hl: 500;
        --fs-info: 0.75rem;
        --fs-px-info: 12px;
        --lh-info: 1.3;
        --fs-info-hl: 0.75rem;
        --fs-px-info-hl: 12px;
        --lh-info-hl: 1.3;
        --fw-info-hl: 500;
        --fs-body: 0.875rem;
        --fs-px-body: 14px;
        --lh-body: 1.4;
        --fs-body-md: 0.875rem;
        --fs-px-body-md: 14px;
        --lh-body-md: 1.4;
        --fw-body-md: 500;
        --fs-h1: 2rem;
        --fs-px-h1: 32px;
        --lh-h1: 1.2;
        --fw-h1: 700;
        --fs-h2: 1.25rem;
        --fs-px-h2: 20px;
        --lh-h2: 1.2;
        --fw-h2: 500;
        --fs-title: 1.125rem;
        --fs-px-title: 18px;
        --lh-title: 1.2;
        --fw-title: 500;
        --fs-title-lg: 1rem;
        --fs-px-title-lg: 16px;
        --lh-title-lg: 1.4;
        --fw-title-lg: 500;
        --fs-text-lg: 1rem;
        --fs-px-text-lg: 16px;
        --lh-text-lg: 1.4;
        --fs-ch-body: 1rem;
        --fs-px-ch-body: 16px;
        --lh-ch-body: 1.4;
        --ff-ch-body: Montserrat, arial, sans-serif;
        --fs-ch-big: 1.125rem;
        --fs-px-ch-big: 18px;
        --lh-ch-big: 1.4;
        --ff-ch-big: Montserrat, arial, sans-serif
    }

    .m {
        display: none !important
    }

    html {
        font-size: 16px;
        background-color: #fff
    }

    [class*=container-max-] {
        padding-inline: 30px
    }

    .container-max-540 {
        max-width: 600px
    }

    .container-max-720 {
        max-width: 780px
    }

    .container-max-830 {
        max-width: 890px
    }

    .container-max-1008 {
        max-width: 1068px
    }

    .container-max-1180 {
        max-width: 1240px
    }

    .container-max-1264 {
        max-width: 1324px
    }

    .container-max-1380 {
        max-width: 1440px
    }

    .breadcrumb {
        --brd-height: 35px;
        --brd-padding-inline: 40px
    }

    .link:hover {
        text-decoration: underline
    }

    .link-inline:hover {
        text-decoration: none
    }

    .btn:hover, .gsl-details .gsi-cta .link-dir:hover {
        opacity: .5
    }

    .btn-lg {
        --btn-height: 56px
    }

    .select {
        width: 100%
    }

    .select label {
        font-size: var(--fs-info);
        line-height: var(--lh-info);
        font-weight: var(--fw-info);
        margin-bottom: 8px
    }

    .select .wrp {
        background-color: #f8f8f8
    }

    .form-row .col-lg-6:first-child {
        padding-right: 13px
    }

    .form-row .col-lg-6:last-child:not(:first-child) {
        padding-left: 13px
    }

    .nav-tabs {
        --border-bottom: #e5e5e5
    }

    .tag {
        padding: 9px 10px
    }

    .tag-icon {
        gap: 6px
    }

    .tag-icon .icon {
        flex: 0 0 24px
    }

    .sct {
        --header-margin-bottom: 16px
    }

    .sct-header {
        height: 48px
    }

    .splide__desc {
        bottom: 88px;
        padding-inline: 58px
    }

    .splide-fit .splide__list {
        justify-content: normal;
        gap: 20px
    }

    .seo {
        margin-top: 40px
    }

    .seo-body.less .seo-content {
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        text-overflow: ellipsis;
        height: 89.6px
    }

    .cnf-buttons {
        margin-top: 32px
    }

    .msg {
        padding-block: 16px
    }

    .modal-header {
        background-color: #fff
    }

    .modal-header .close-modal {
        margin-left: auto
    }

    .modal-header .close-modal::before {
        content: "";
        width: 16px;
        height: 16px
    }

    .modal-footer {
        padding: 32px
    }

    .cbx-cta {
        margin-top: 24px
    }

    .acl-items .cpn + .cpn {
        margin-top: 6px
    }

    .cii-header {
        padding-bottom: 32px;
        margin-bottom: 32px
    }

    .cii-rules-title {
        margin-bottom: 10px
    }

    .gsl-controls {
        margin-top: 24px
    }

    .gsl-items {
        margin-top: 24px
    }

    .mbm-current {
        padding: 32px 32px 32px 96px
    }

    .mbm-current::before {
        transform: scale(1.5);
        top: calc(50% - 24px);
        left: 32px
    }

    .mbm-items {
        padding-inline: 32px
    }

    .mbm-cta {
        padding: 32px;
        max-width: 327px
    }

    .mbm-history-filters {
        padding-inline: 24px
    }

    .mbm-history-filters .chip {
        border-radius: 4px;
        padding-inline: 8px
    }

    .mbm-history-items {
        padding-inline: 24px;
        margin-top: 32px
    }

    .mbi {
        padding-block: 24px
    }

    .mbi-body {
        margin-top: 16px
    }

    .mbi-body .info + .info {
        margin-top: 24px
    }

    .mbi-footer {
        margin-top: 32px
    }

    .mbi + .mbi {
        margin-top: 16px
    }

    .mub-options {
        padding-inline: 8px
    }

    .mub-select, .mub-cancel {
        padding: 24px 32px 6px
    }

    .muo {
        padding-inline: 32px
    }

    .muo-info {
        margin-top: 48px
    }

    .muo-title {
        margin-top: 48px
    }

    .muo-code {
        margin-top: 16px
    }

    .muo-timer {
        margin-top: 48px
    }

    .muo-resend {
        margin-top: 48px
    }

    .mnp {
        top: 50%;
        left: 50%;
        border-radius: 8px;
        padding: 48px 32px
    }

    .mnp-title {
        margin-bottom: 24px
    }

    .mnp-footer {
        margin-top: 24px
    }

    .mnp-footer .btn + .btn, .mnp-footer .gsl-details .gsi-cta .link-dir + .btn, .gsl-details .gsi-cta .mnp-footer .link-dir + .btn, .mnp-footer .gsl-details .gsi-cta .btn + .link-dir, .gsl-details .gsi-cta .mnp-footer .btn + .link-dir, .mnp-footer .gsl-details .gsi-cta .link-dir + .link-dir, .gsl-details .gsi-cta .mnp-footer .link-dir + .link-dir {
        margin-top: 16px
    }

    .mnp-sm {
        max-width: 375px
    }

    .mnp-d-right {
        max-width: 392px;
        left: auto;
        right: 0;
        top: 0;
        border-radius: 0;
        padding: 0;
        height: 100%;
        background-color: #f8f8f8
    }

    .mnp-d-right .mnp-header {
        padding-inline: 16px;
        align-items: center;
        justify-content: flex-start;
        height: 64px;
        background-color: #fff;
        display: flex
    }

    .mnp-d-right .mnp-title {
        margin-bottom: 0
    }

    .mnp-d-right .mnp-close {
        margin-left: auto;
        width: 16px;
        height: 16px;
        flex: 0 0 16px
    }

    .mnp-d-right .mnp-body {
        height: calc(100% - 168px);
        padding: 16px
    }

    .mnp-d-right .mnp-footer {
        height: 104px;
        display: flex;
        align-items: center;
        background-color: #fff;
        margin-top: 0;
        padding-inline: 32px
    }

    .mnp-d-right .mnp-active {
        animation: toLeft .3s ease forwards;
        display: flex
    }

    .mnp:not(.mnp-d-right) {
        transform: translate(-50%, -50%)
    }

    .dds {
        margin-inline: -16px
    }

    .dds-slots {
        margin-top: 16px
    }

    .dds-slots li + li {
        margin-top: 10px
    }

    .mas {
        margin-inline: -16px
    }

    .csb {
        margin-inline: -16px
    }

    .gdc {
        margin-top: 40px
    }

    .gdc-desc, .gdc-date {
        margin-top: 24px
    }

    .gdc-code {
        margin-top: 40px
    }

    .gdc-cta {
        margin-top: 40px;
        height: 48px;
        align-items: center
    }

    .abd-desc {
        margin-top: 16px
    }

    .abd-form {
        margin-top: 32px
    }

    .abd-form .form-button {
        margin-top: 32px
    }

    .dln-body, .dln-cta {
        margin-top: 32px
    }

    .apm-form {
        margin-top: 32px
    }

    #site-header {
        height: 120px
    }

    .hdr-block1 {
        background-color: #f3f3f3;
        border-bottom: 1px solid #e5e5e5
    }

    .hdr-block1-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 40px
    }

    .hdr-block1-left ul {
        display: flex
    }

    .hdr-block1-left li {
        padding-inline: 16px
    }

    .hdr-block1-left li + li {
        border-left: 1px solid #c2c2c2
    }

    .hdr-block1-right ul {
        display: flex;
        align-items: center;
        gap: 8px
    }

    .hdr-block1-right .btn-cart {
        display: block;
        height: 32px;
        width: 32px
    }

    .hdr-block1-right .btn-cart.contains-product {
        position: relative
    }

    .hdr-block1-right .btn-cart .icon {
        font-size: 32px
    }

    .hdr-block2 {
        background-color: #fff
    }

    .hdr-block2-inner {
        --height: 80px;
        position: relative
    }

    .hdr-block2-right {
        --flex-gap: 8px
    }

    .hdr-block3 {
        position: relative
    }

    .hdr-block3-inner {
        display: flex;
        justify-content: flex-end;
        position: absolute;
        z-index: 2;
        top: -20px;
        transform: translateY(-100%);
        right: 128px;
        width: calc(100% - 288px)
    }

    .hdr-block3-wrapper {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        max-width: 746px
    }

    .hdr-tabs {
        flex: 1;
        max-width: 484px
    }

    .hdr-location {
        flex: 1;
        max-width: 180px;
        margin-left: auto
    }

    #main-menu {
        display: none
    }

    .stl-cta {
        --height: 40px;
        --padding-left: 20px;
        --border-radius: 64px
    }

    .header-basic {
        border-bottom: 1px solid #e5e5e5
    }

    .hdb {
        display: flex;
        align-items: center;
        height: 74px
    }

    .hdb-logo {
        flex: 0 0 175px
    }

    .hdb-body {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center
    }

    .ntf {
        position: absolute;
        top: 80px;
        right: 0;
        z-index: 5;
        width: 375px
    }

    #header-profile-menu .upo {
        display: none
    }

    .footer {
        margin-top: 72px
    }

    .ftr-block1-inner {
        display: flex;
        justify-content: space-between;
        padding-block: 64px
    }

    .ftr-info {
        flex: 1;
        padding-right: 100px;
        position: relative
    }

    .ftr-info::after {
        content: "";
        width: 0;
        height: 120px;
        border-right: 1px solid #c2c2c2;
        position: absolute;
        top: calc(50% - 60px);
        right: 0
    }

    .ftr-links {
        flex: 1;
        padding-inline: 100px;
        order: 1;
        position: relative
    }

    .ftr-links::after {
        content: "";
        width: 0;
        height: 120px;
        border-right: 1px solid #c2c2c2;
        position: absolute;
        top: calc(50% - 60px);
        right: 0
    }

    .ftr-social {
        order: 2;
        flex: 1;
        max-width: 270px;
        padding-left: 100px
    }

    .ftr-block2-inner {
        height: 42px
    }

    .prd {
        --header-height: 43px;
        --media-padding: 32px 4px;
        --img-width: 180px;
        --offer-padding-inline: 16px;
        --body-padding-inline: 24px;
        --footer-padding: 24px 24px 32px;
        --tag-height: 32px;
        --tag-padding-inline: 10px;
        --block2-margin-top: 14px;
        --block2-height: 64px;
        --price-margin-top: 10px
    }

    .prd-name {
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        text-overflow: ellipsis;
        height: 33px
    }

    .prd-info {
        margin-top: 8px;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        text-overflow: ellipsis;
        height: 16px
    }

    .cpi-badge {
        top: 16px;
        right: 16px
    }

    .cpi-body {
        padding: 16px
    }

    .cpi-title {
        margin-top: 24px;
        margin-bottom:15px;
    }

    .cpi-desc {
        margin-top: 16px
    }

    .bli-body {
        padding: 16px
    }

    .bli-title {
        margin-top: 24px
    }

    .bli-desc {
        margin-top: 16px;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        text-overflow: ellipsis;
        height: 67.2px
    }

    .bro-logo {
        flex: 0 0 150px
    }

    .bro-title {
        margin-bottom: 14px
    }

    .hyt {
        flex-direction: column;
        align-items: center;
        padding-block: 32px;
        gap: 40px
    }

    .hyt-media {
        flex: 0 0 140px;
        width: 140px
    }

    .hyt-content {
        margin-bottom: 40px
    }

    .hyt-body {
        text-align: center
    }

    .ppr {
        gap: 16px
    }

    .ppr-media {
        flex: 0 0 120px;
        height: 120px
    }

    .ppr-title {
        margin-bottom: 20px
    }

    .ppr-quantity {
        margin-top: auto
    }

    .lpw {
        width: 100%;
        height: 100vh;
        background: url(../_ui/responsive/theme-ipragaz/images/login-bg.jpg) center center no-repeat;
        background-size: cover;
        align-items: center
    }

    .lgn {
        padding: 56px 80px
    }

    .lgn-logo {
        display: flex;
        justify-content: center;
        margin-bottom: 40px
    }

    .lgn-body {
        margin-top: 16px
    }

    label[for="pud_referer"] {
        margin-top: 20px;
        color: red;
        font-weight: 600;
    }

    .lgn-form {
        margin-top: 40px
    }

    .lgn-form .form-btn {
        margin-top: 40px
    }

    .lgn-media {
        display: flex;
        justify-content: center;
        margin-bottom: 40px
    }

    .lgn-member .lgn-form {
        margin-top: 16px
    }

    .ccf-timer {
        margin-top: 40px
    }

    .ccf-resend {
        margin-top: 24px
    }

    .upo-header {
        display: none
    }

    .upm-body {
        margin-top: 24px
    }

    .upm-footer {
        background-color: #fff;
        margin-top: 24px
    }

    .upm-logout {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-inline: 24px;
        height: 56px
    }

    .upm-logout .icon {
        order: 1
    }

    .upi.active .upi-icon .icon {
        color: #df2b2a
    }

    .upi.active .upi-title {
        color: #df2b2a
    }

    .upi.active::after {
        display: none
    }

    .upi.active::before {
        content: "";
        flex: 0 0 16px;
        width: 16px;
        height: 16px;
        margin-left: auto;
        order: 1
    }

    .profile-pages {
        background-color: #f8f8f8
    }

    .upp {
        margin-top: 49px;
        display: grid;
        grid-template-columns:400px calc(100% - 432px);
        gap: 32px
    }

    .upp-aside {
        align-self: flex-start
    }

    .upp-header {
        height: 72px;
        padding-inline: 32px
    }

    .upp-body {
        background-color: #fff;
        margin-top: 24px;
        padding: 24px 32px;
        min-height: calc(100% - 96px)
    }

    .pud-form .form-button {
        margin-top: 40px
    }

    .pud-form .form-button .btn, .pud-form .form-button .gsl-details .gsi-cta .link-dir, .gsl-details .gsi-cta .pud-form .form-button .link-dir {
        width: 343px
    }

    .unp-section-items {
        margin-top: 24px;
        display: grid;
        grid-template-columns:1fr 1fr;
        gap: 24px
    }

    .unp-section + .unp-section {
        margin-top: 40px;
        padding-top: 40px;
        border-top: 5px solid #f3f3f3
    }

    .uni {
        padding-bottom: 24px
    }

    .uni-date {
        padding-left: 40px
    }

    .uni-icon {
        flex: 0 0 32px;
        height: 32px
    }

    .uni-inner {
        margin-top: 14px
    }

    .uni-desc {
        margin-top: 16px
    }

    .uni-cta {
        margin-top: 24px
    }

    .uni-cta .btn, .uni-cta .gsl-details .gsi-cta .link-dir, .gsl-details .gsi-cta .uni-cta .link-dir {
        min-width: 175px
    }

    .epm {
        margin-top: 170px
    }

    .epm-title {
        margin-bottom: 16px
    }

    .epm-media {
        width: 145px;
        height: 145px
    }

    .poh {
        margin-top: -24px;
        margin-inline: -32px
    }

    .poi {
        padding: 24px 24px 32px 16px
    }

    .poi-header {
        display: flex;
        align-items: center;
        gap: 8px
    }

    .poi-body {
        margin-top: 16px;
        display: flex;
        gap: 36px;
        padding-left: 24px
    }

    .poi-desc {
        flex: 1
    }

    .poi-cta {
        flex: 0 0 344px;
        justify-content: flex-end
    }

    .poi-cta .btn, .poi-cta .gsl-details .gsi-cta .link-dir, .gsl-details .gsi-cta .poi-cta .link-dir {
        max-width: 168px
    }

    .pad-items {
        display: grid;
        grid-template-columns:1fr 1fr;
        gap: 24px 40px
    }

    .pad-cta {
        margin-top: 40px
    }

    .pad-cta .btn, .pad-cta .gsl-details .gsi-cta .link-dir, .gsl-details .gsi-cta .pad-cta .link-dir {
        width: 343px
    }

    .pai {
        border-bottom: 1px solid #e5e5e5;
        padding: 8px 8px 24px
    }

    .pai-desc {
        margin-top: 16px
    }

    .pai-footer {
        margin-top: 24px
    }

    .pfv-items {
        max-width: 620px
    }

    .pcu-form {
        margin-top: 40px
    }

    .pcu-form-inner {
        display: flex;
        align-items: flex-start;
        gap: 24px
    }

    .pcu-form-block1, .pcu-form-block2 {
        flex: 1
    }

    .pcu-form-button {
        margin-top: 40px
    }

    .pcu-form-button .btn, .pcu-form-button .gsl-details .gsi-cta .link-dir, .gsl-details .gsi-cta .pcu-form-button .link-dir {
        width: 371px
    }

    .pst-cancel {
        margin-top: 75px
    }

    .pst-cancel .btn, .pst-cancel .gsl-details .gsi-cta .link-dir, .gsl-details .gsi-cta .pst-cancel .link-dir {
        max-width: 285px
    }

    .psr {
        padding: 8px 8px 16px
    }

    .psr-title {
        margin-bottom: 10px
    }

    .psr + .psr {
        margin-top: 24px
    }

    .pcl-section {
        margin-top: 40px
    }

    .pcl-section-items {
        display: grid;
        grid-template-columns:1fr 1fr;
        gap: 24px 16px
    }

    .pcl-section-title {
        margin-bottom: 24px
    }

    .pci {
        padding: 8px 8px 24px
    }

    .pci-row {
        margin-top: 24px
    }

    .pci-footer {
        margin-top: 24px
    }

    .odp-message {
        margin: -24px -32px 32px
    }

    .products {
        grid-template-columns:repeat(auto-fill, minmax(298px, 1fr));
        gap: 16px 24px
    }

    .pdp {
        display: flex;
        gap: 40px;
        align-items: flex-start;
        margin-block: 24px 100px
    }

    .pdp-block1 {
        flex: 0 0 600px;
        height: 600px;
        border: 1px solid #e5e5e5;
        display: flex;
        align-items: center;
        justify-content: center
    }

    .pdp-gallery {
        flex: 0 0 400px;
        height: 400px
    }

    .pdp-gallery .splide__pagination {
        margin-top: 75px
    }

    .pdp-tags {
        position: absolute;
        top: 16px;
        left: 16px
    }

    .pdp-tags .tag {
        height: 32px
    }

    .pdp-like {
        top: 16px;
        right: 16px
    }

    .pdp-block2 {
        flex: 1
    }

    .pdp-price {
        margin-top: 24px;
        padding-bottom: 24px;
        border-bottom: 1px solid #e5e5e5
    }

    .pdp-price > small {
        margin-left: 8px
    }

    .pdp-desc {
        margin-top: 16px
    }

    .pdp-desc p {
        margin-bottom: 16px
    }

    .pdp-cta {
        margin-top: 40px
    }

    .pdp-cta .btn, .pdp-cta .gsl-details .gsi-cta .link-dir, .gsl-details .gsi-cta .pdp-cta .link-dir {
        width: 100%
    }

    .pdp-details {
        margin-top: 40px
    }

    .pdp-warning {
        margin-top: 24px;
        padding-inline: 8px
    }

    .pdp-offer {
        margin-top: 20px
    }

    .splide-product .splide__slide {
        flex: 0 0 298px
    }

    .plp-filters {
        flex-wrap: wrap
    }

    .plp-categories {
        flex-wrap: wrap;
        justify-content: center
    }

    .plp-products {
        margin-top: 32px
    }

    .pls {
        position: relative
    }

    .pls-select {
        position: absolute;
        left: -23px;
        top: 40px;
        width: 245px;
        border: 1px solid #e5e5e5
    }

    .pls-option {
        height: 40px
    }

    .clp {
        margin-top: 24px
    }

    .clp-filters {
        display: flex;
        flex-wrap: wrap;
        gap: 8px
    }

    .clp-items {
        grid-template-columns:repeat(auto-fill, minmax(343px, 1fr));
        gap: 32px 23px;
        margin-top: 32px
    }

    .clp-double .clp-items {
        grid-template-columns:repeat(2, 1fr);
        gap: 40px
    }

    .clp-double .cpi {
        max-width: none
    }

    .clp-single .clp-items {
        grid-template-columns:1fr;
        gap: 40px
    }

    .clp-single .cpi {
        max-width: none
    }

    .cdp-body {
        display: flex;
        margin: 24px 0 0
    }

    .cdp-qrcode figure {
        margin: 0 auto 12px;
        width: 47px
    }

    .cdp-qrcode b {
        font-weight: 500
    }

    .cdp-details .cpi-info {
        width: 375px
    }

    .cdp-guide {
        display: grid;
        grid-template-columns:repeat(2, 1fr);
        gap: 32px
    }

    .cdp-privilege .cdp-body {
        width: 900px;
        display: block;
        margin-inline: 0
    }

    .cdp-privilege .cpi-info {
        width: 100%;
        justify-content: flex-start;
        gap: 24px
    }

    .cdp-cta .btn, .cdp-cta .gsl-details .gsi-cta .link-dir, .gsl-details .gsi-cta .cdp-cta .link-dir {
        width: 220px
    }

    .cdp-cta .btn + .btn, .cdp-cta .gsl-details .gsi-cta .link-dir + .btn, .gsl-details .gsi-cta .cdp-cta .link-dir + .btn, .cdp-cta .gsl-details .gsi-cta .btn + .link-dir, .gsl-details .gsi-cta .cdp-cta .btn + .link-dir, .cdp-cta .gsl-details .gsi-cta .link-dir + .link-dir, .gsl-details .gsi-cta .cdp-cta .link-dir + .link-dir {
        margin-left: 32px
    }

    .cdp-branches .btn-go-branches {
        height: 48px
    }

    .cdp-go .cdp-body {
        grid-template-columns:900px 99px;
        width: 100%;
        justify-content: space-between
    }

    .cdp-go .cdp-conditions {
        margin-inline: 0
    }

    .prl {
        margin-top: 24px
    }

    .prl-info {
        padding: 16px 24px 16px 8px;
        max-width: 402px
    }

    .prl-items {
        grid-template-columns:repeat(auto-fill, minmax(343px, 1fr));
        gap: 32px 23px;
        margin-top: 24px
    }

    .page-campaign-go-detail .cdp {
        margin-top: 20px
    }

    .page-campaign-go-detail .cdp-cta {
        margin-inline: 0
    }

    .purchase-pages {
        background-color: #fff
    }

    .ppl {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 32px;
        margin-top: 56px
    }

    .ppl-body {
        flex: 1;
        max-width: 740px
    }

    .ppl-aside {
        flex: 0 0 368px
    }

    .ppl-summary {
        margin-top: 40px
    }

    .ppl-summary .btn, .ppl-summary .gsl-details .gsi-cta .link-dir, .gsl-details .gsi-cta .ppl-summary .link-dir {
        width: 100%
    }

    .ppl-discounts {
        margin-top: 24px
    }

    .ppl-coupon {
        --bg-color: #f8f8f8
    }

    .ppl-agreement {
        margin-top: 24px;
        padding-left: 24px
    }

    .ppl-single .ppl-body {
        max-width: none
    }

    .pps {
        padding-bottom: 24px;
        border-bottom: 1px solid #e5e5e5
    }

    .pps-title {
        margin-bottom: 24px
    }

    .pps-quantity {
        margin-bottom: 20px
    }

    .ppc-header {
        height: 56px;
        border-bottom: 1px solid #e5e5e5;
        padding-inline: 16px
    }

    .ppc-body {
        margin-top: 24px
    }

    .ppc-body .pdp-warning {
        margin-bottom: 24px;
        border-inline-color: rgba(0, 0, 0, 0);
        border-top-color: rgba(0, 0, 0, 0)
    }

    .ppc-row {
        padding-bottom: 32px;
        border-bottom: 1px solid #e5e5e5
    }

    .ppc-row + .ppc-row {
        margin-top: 32px
    }

    .ppc-footer {
        margin-top: 32px
    }

    .ppd {
        background-color: #f8f8f8
    }

    .ppd-cta {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        height: 32px;
        padding-inline: 8px
    }

    .ppd-cta::after {
        content: "";
        flex: 0 0 16px;
        height: 16px
    }

    .ppd-body {
        padding: 0 8px 16px;
        display: none
    }

    .ppd.active .ppd-cta::after {
        transform: scale(-1)
    }

    .ppd.active .ppd-body {
        display: block
    }

    .pds {
        margin-top: 24px
    }

    .pds-title {
        margin-bottom: 16px
    }

    .pce {
        margin-top: 110px
    }

    .pce-desc {
        margin-block: 16px
    }

    .pce-cta {
        margin-top: 24px
    }

    .cds-address-addon {
        margin-top: 24px
    }

    .cds-delivery {
        display: flex;
        gap: 24px;
        margin-top: 32px
    }

    .cds-delivery-block1, .cds-delivery-block2 {
        flex: 1
    }

    .cds-payment {
        margin-top: 24px;
        padding: 16px 8px
    }

    .cds-payment-title {
        margin-bottom: 10px
    }

    .cds-payment-body li + li {
        margin-top: 10px
    }

    .cds-note {
        margin-top: 24px;
        max-width: 343px
    }

    .cds-note textarea {
        background-color: #f8f8f8
    }

    .cds-option {
        margin-top: 24px;
        padding: 16px 8px
    }

    .cds-option-title {
        margin-bottom: 10px
    }

    .page-purchase-success {
        background-color: #f8f8f8
    }

    .cos {
        max-width: 830px;
        background-color: #fff;
        margin-inline: auto
    }

    .cos-header {
        padding-inline: 16px;
        height: 56px;
        border-bottom: 1px solid #e5e5e5
    }

    .cos-bonus {
        padding: 40px 32px;
        gap: 16px
    }

    .cos-bonus-desc {
        margin-top: 6px
    }

    .cos-bonus-cta .btn, .cos-bonus-cta .gsl-details .gsi-cta .link-dir, .gsl-details .gsi-cta .cos-bonus-cta .link-dir {
        min-width: 180px
    }

    .cos-result {
        padding-block: 40px 24px;
        border-bottom: 1px solid #e5e5e5
    }

    .cos-result-desc, .cos-result-media {
        margin-top: 16px
    }

    .cos-result-cta {
        margin-top: 16px
    }

    .cos-order {
        padding: 32px
    }

    .ord-details {
        display: flex;
        justify-content: space-between;
        gap: 8px;
        margin-top: 40px
    }

    .ord-details-block {
        flex: 1
    }

    .ord-details-block b {
        display: block;
        margin-top: 12px
    }

    .ord-info {
        display: flex;
        gap: 8px;
        margin-top: 40px
    }

    .ord-info-block {
        flex: 1
    }

    .ord-info-block b {
        display: block;
        height: 78px;
        padding: 14px 8px;
        border: 1px solid #e5e5e5;
        font-weight: 400;
        margin-top: 8px
    }

    .ord-info-block span {
        color: #7f7f7f
    }

    .ord-summary {
        margin-top: 40px;
        padding-top: 40px
    }

    .ors-total {
        max-width: 466px
    }

    .ors-products {
        margin-top: 40px
    }

    .ors-notes {
        margin-top: 24px;
        margin-left: 96px;
        padding-block: 16px;
        border-bottom: 1px solid #e5e5e5
    }

    .ors-cta {
        padding-left: 96px;
        margin-top: 40px
    }

    .ors-cta .btn, .ors-cta .gsl-details .gsi-cta .link-dir, .gsl-details .gsi-cta .ors-cta .link-dir {
        width: 220px
    }

    .orp {
        gap: 16px
    }

    .orp-media {
        width: 80px;
        height: 80px;
        padding: 10px;
        border: 1px solid #e5e5e5
    }

    .orp-media figure {
        width: 60px
    }

    .orp-table th {
        text-align: right
    }

    .orp-table th, .orp-table td {
        padding-block: 6px
    }

    .ocp {
        margin-top: 32px
    }

    .hps-slider {
        padding-block: 16px
    }

    .hps-products {
        margin-top: 16px
    }

    .hps-campaigns, .hps-blog, .hps-offers, .hps-hayat {
        margin-top: 40px
    }

    .hps-offers .sct-body {
        --gap: 32px
    }

    .splide-campaign .splide__slide, .splide-blog .splide__slide {
        flex: 0 0 407px
    }

    .ccm {
        max-width: 915px;
        padding: 40px
    }

    .ccm-cta {
        display: flex;
        justify-content: space-between
    }

    .ccm-cta-2 {
        gap: 24px
    }

    .goh-bonus, .goh-station {
        padding-block: 40px
    }

    .goh-slider {
        padding-block: 40px
    }

    .goh-slider-inner {
        padding-inline: 32px
    }

    .goh-station {
        background-color: #fff
    }

    .goh-station-listed .sct {
        padding-inline: 32px
    }

    .goh-station-items {
        display: grid;
        grid-template-columns:1fr 1fr;
        gap: 16px
    }

    .goh-station-items .gsi {
        padding: 24px 160px 24px 24px;
        position: relative
    }

    .goh-station-items .gsi-cta {
        position: absolute;
        right: 24px;
        top: calc(50% - 8px)
    }

    .goh-station-items .gsi + .gsi {
        margin-top: 0
    }

    .gop {
        padding-inline: 32px
    }

    .gop-inner {
        gap: 32px
    }

    .gop-media {
        flex: 0 0 145px
    }

    .gop-guide {
        padding-left: 177px;
        color: #df2b2a
    }

    .gop-desc {
        margin-bottom: 40px
    }

    .gop-cta {
        gap: 24px
    }

    .gos {
        padding-inline: 32px;
        gap: 32px
    }

    .gos-media {
        flex: 0 0 145px
    }

    .gos-desc {
        margin-block: 16px 36px
    }

    .blg-desc {
        margin-top: 52px
    }

    .blg-filters {
        margin-top: 52px;
        display: flex;
        flex-wrap: wrap;
        gap: 16px
    }

    .blg-items {
        margin-top: 32px;
        gap: 16px 23px
    }

    .bld-desc {
        margin-top: 72px
    }

    .bld-content-media {
        margin-top: 72px
    }

    .bld-content-section {
        margin-top: 48px
    }

    .blc {
        position: relative
    }

    .blc-body {
        position: absolute;
        bottom: 58px;
        left: 0;
        padding-inline: 58px;
        max-width: 665px
    }

    .blc-title {
        color: #fff
    }

    .blc-info {
        gap: 20px;
        margin-top: 32px
    }

    .blc-info .bli-time {
        color: #fff
    }

    .blc-info .bli-time::after {
        content: "";
        flex: 0 0 16px;
        height: 16px;
        width: 16px
    }

    .blc-info .bli-time::before {
        display: none
    }

    .blc-info .bli-time span {
        order: 1
    }

    .survey-pages .header-basic {
        border-bottom: none;
        background-color: #fff
    }

    .sph {
        gap: 40px;
        height: 74px
    }

    .sph-logo {
        flex: 0 0 176px
    }

    .sph-body {
        max-width: 830px
    }

    .spc-controls {
        padding: 32px 56px 56px;
        display: flex;
        align-items: center;
        justify-content: space-between
    }

    .spc-controls .btn, .spc-controls .gsl-details .gsi-cta .link-dir, .gsl-details .gsi-cta .spc-controls .link-dir {
        flex: 1;
        max-width: 180px
    }

    .spc-controls-dir {
        flex: 1;
        gap: 16px
    }

    .sps {
        margin-top: 40px;
        background-color: #fff
    }

    .sps-media {
        padding: 56px 56px 0
    }

    .sps-title {
        padding: 56px 56px 0;
        margin-bottom: -24px
    }

    .sps-rate {
        margin-top: 40px
    }

    .sps-body {
        padding: 56px 56px 0
    }

    .page-survey-completed .spc-controls {
        gap: 16px;
        justify-content: flex-start
    }

    .hps-hayat-content::-webkit-scrollbar {
        height: 10px
    }

    .hps-hayat-content::-webkit-scrollbar-thumb {
        background-color: #888;
        border-radius: 10px
    }

    .hps-hayat-content::-webkit-scrollbar-thumb:hover {
        background-color: #555
    }

    .hps-hayat-content::-webkit-scrollbar-track {
        background: #f1f1f1
    }
}

.mbi-points-list{
    margin-top: 20px;
}
.mbi-points-list .list-item {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    margin-top: 25px;
}

 .mbi-points-list .list-left {
    display: flex;
    align-items: center;
}

 .mbi-points-list .list-left svg {
    margin-right: 5px;
    color: #df2b2a;
    font-size: 18px;
}

 .mbi-points-list .list-right {
    text-align: right;
}

.mnp-checkout-date{
    width: auto;
    max-width: none;
}

.mnp-checkout-date .nav-tabs .nav-link{
    white-space: nowrap;
    padding: 10px;
}
.points-wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.mbi-points-list{
    overflow: hidden; /* fazla itemleri sakla */
    max-height: 180px; /* ilk durumda sadece 4 iteme yetecek kadar */
    transition: max-height 0.4s ease;
}


.points-wrapper .toggle-btn{
    align-self: center;
    color: #df2b46;
    font-weight: 600;
    border-bottom: 1px solid #df2b46;
    font-size: 16px;
}

@media (max-width: 480px) {
    .mbi-points-list .list-item {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border-bottom: 2px solid #cdcdcd;
        padding: 10px;
    }

    .mbi-points-list{
        max-height: 420px;
    }
}

@media (max-width: 1024px) {
    .mnp-checkout-date .nav-tabs .nav-link{
        white-space: normal;
        padding: 0;
    }

    .mnp-checkout-date {
        width: 100%;
        max-width: 100%;
    }
}

.mfp-bg {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1042;
	overflow: hidden;
	position: fixed;
	background: #0b0b0b;
	opacity: 0.8;
}

.mfp-wrap {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1043;
	position: fixed;
	outline: none !important;
	-webkit-backface-visibility: hidden;
}

.mfp-container {
	text-align: center;
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	padding: 0 8px;
	box-sizing: border-box;
}

.mfp-content {
	position: relative;
	display: inline-block;
	vertical-align: middle;
	margin: 0 auto;
	text-align: left;
	z-index: 1045;
}

.mfp-inline-holder .mfp-content,.mfp-ajax-holder .mfp-content {
	width: 100%;
	cursor: auto;
}

.mfp-zoom-out-cur {
	cursor: -moz-zoom-out;
	cursor: -webkit-zoom-out;
	cursor: zoom-out;
}

.mfp-zoom {
	cursor: pointer;
	cursor: -webkit-zoom-in;
	cursor: -moz-zoom-in;
	cursor: zoom-in;
}

.mfp-auto-cursor .mfp-content {
	cursor: auto;
}

.mfp-close, .mfp-preloader {
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
}

.mfp-hide {
	display: none !important;
}

.mfp-preloader {
	color: #ccc;
	position: absolute;
	top: 50%;
	width: auto;
	text-align: center;
	left: 8px;
	right: 8px;
	z-index: 1044;
}

.mfp-s-ready .mfp-preloader, .mfp-s-error .mfp-content,.mfp-loading.mfp-figure {
	display: none;
}

.mfp-close:hover, .mfp-close:focus {
	opacity: 1;
}

.mfp-image-holder .mfp-close{
    overflow: visible;
    cursor: pointer;
    background: transparent;
    border: 0;
    -webkit-appearance: none;
    display: block;
    outline: none;
    padding: 0;
    z-index: 1046;
    box-shadow: none;
    touch-action: manipulation;
    color: #fff;
    text-align: right;
    position: absolute;
    right: 0;
    top: 0;
    opacity: 0.65;
    color: #fff;
    cursor: pointer;
    font-style: normal;
    font-size: 30px;
    font-family: Arial, Baskerville, monospace;
}

.mfp-img {
	margin: 40px 0 40px;
	background: #fff;
}

.mfp-gallery .mfp-image-holder .mfp-figure {
	cursor: pointer;
}

.scan-qr{
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex-direction: column;
    font-weight: 500;
}

.scan-qr img {
    width:25px;
}

.scan-qr-container{
    box-shadow: rgba(50, 50, 105, 0.15) 0px 2px 5px 0px, rgba(0, 0, 0, 0.05) 0px 1px 1px 0px;
    padding: 6px;
    border-radius: 10px;
    cursor:pointer;
}

.upp-header.coupons{
    display:flex;
    justify-content:space-between;
}

#qr-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.9);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
#reader {
    width: 100%;
    height: auto;
}
#closeQr {
    margin-top: 20px;
    padding: 5px 10px;
    border: none;
    font-size: 16px;
    cursor: pointer;
    color: white;
    background-color: #ff0000;
    border-radius: 10%;
    position: absolute;
    top: 0;
    right: 5%;
}

.badge-container {
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.badge-container.left_up {
    top: 0;
    left: 5%;
}

.badge-container.left_down {
    left: 5%;
    bottom: 0;
}

.badge-container.right_down {
    right: 5%;
    bottom: 0;
}

.badge-container.right_up {
    right: 5%;
    top: 0;
}

.pdp-block1 .badge-container.left_up{
    left: 5%;
    top: 5%;
}

.pdp-block1 .badge-container.left_down{
    left: 5%;
    bottom: 5%;
}

.pdp-block1 .badge-container.right_up{
    right: 5%;
    top: 5%;
}

.pdp-block1 .badge-container.right_down{
    right: 5%;
    bottom: 5%;
}


.product-badge{
    display: flex;
    gap: 10px;
    padding: 5px;
    border-radius: 5px;
    align-items: center;
    justify-content: center
}

.badge-container .badge-icon{
    width:10px;
}

.badge-container .icon-without-text .badge-icon{
    width:55px;
    height:55px;
}

.product-icon-only .badge-icon {
    width: 110px !important;
    height: 110px !important;
}

@media (max-width: 768px) {
 .badge-container .icon-without-text .badge-icon{
     width:30px;
     height:30px;
 }

 .product-icon-only .badge-icon {
     width: 60px !important;
     height: 60px !important;
 }

 .badge-container .product-badge  {
    font-size: 6px;
 }
}

.d-flex{
    display:flex;
}

.justify-content-center{
    justify-content:center;
}

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

.qr-code-id{
    background-color: #acacac;
    color: white;
    padding: 10px;
    border-radius: 10px;
}

.pci-footer{
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: end;
}


.smartbanner {
    height: 43px !important;
}

.smartbanner .smartbanner-info span {
    display: none !important;
}

.smartbanner .smartbanner-container .smartbanner-close {
    left: 5px !important;
    top: 13px !important;
    width: 16px !important;
    height: 16px !important;
    color: transparent !important;
    background: transparent !important;
    background-image: url("https://useruploads.vwo.io/useruploads/529944/images/ee15f232b21a69bd197cc9210d3be7d5_frame7.svg") !important;
    border-radius: 0 !important;
}

.smartbanner .smartbanner-icon {
    top: 5px !important;
    left: 26px !important;
    width: 32px !important;
    height: 32px !important;
}

.smartbanner .smartbanner-info {
    left: 63px !important;
    top: 5px !important;
    font-weight: 400 !important;
    color: #000 !important;
}

.smartbanner .smartbanner-info .smartbanner-title {
    font-weight: 700 !important;
    font-size: 11px !important;
    line-height: normal !important;
}

.smartbanner .smartbanner-container .smartbanner-button {
    top: 5px !important;
    right: 10px !important;
    width: 120px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    border-radius: 5px !important;
    background: #EA2227 !important;
    border: 0 !important;
}

.smartbanner .smartbanner-container .smartbanner-button
.smartbanner-button-text {
    color: #FFF;
    text-align: center;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}
.banner-redirect, .basket-redirect {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.banner-redirect button, .basket-redirect button {
    width:100%;
}
.banner-redirect-cancel, .basket-popup-cancel{
    border:solid 1px #df2b2a;
    color:#df2b2a;
    margin-top:15px;
}
.mnp-hpb-title{
    font-size: var(--fs-title-lg);
    line-height: var(--lh-title-lg);
    font-weight: var(--fw-title-lg);
    margin-bottom: 16px;
}
.mnp-hbp-text {
    color: #7f7f7f;
    text-align: center;
}
.mnp-actions{
    display: flex;
    flex-direction: column;
}
.cdp-guide{
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.cdp-guide-content{
    flex: 1 1 0;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}
@media (min-width: 1025px){
    .cdp-guide{
        flex-direction: row;
        align-items: flex-start;
        gap: 32px;
        flex-wrap: nowrap;
    }
    .cdp-guide-video{
        flex: 0 0 334px;
        display: flex;
        justify-content: center;
    }
    .cdp-guide-video img,
    .cdp-guide-video iframe{
        max-width: 100%;
        height: auto;
        display: block;
    }
}

.js-app-download-link {
    display: none;
}

@media (max-width: 1024px) {
    .cpi-desc {
        display: flex;
        align-items: flex-end;
    }

    .js-app-download-link{
        flex-shrink: 0;
        display: block;
    }
}

.hdr-block1-right .btn-cart.contains-product::after {
    content: attr(data-count);
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: #df2b2a;
    color: #fff;
    position: absolute;
    top: -3px;
    right: -3px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 500;
}
@media (max-width: 1024px) {
    .hdr-block2-right .btn-cart.contains-product::after {
        content: attr(data-count);
        width: 13px;
        height: 13px;
        border-radius: 100%;
        background-color: #df2b2a;
        position: absolute;
        top: 5px;
        right: 5px;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 9px;
        font-weight: 500;
    }
}
.js-addOrEditAddress.ipragaz-loading-button img {
    height: 32px !important;
    width: auto !important;
    max-width: none !important;
    display: inline-block !important;
    vertical-align: middle !important;
}
@media (min-width: 1025px) {
    .mnp-ml {
        max-width: 575px;
    }
}
#mnp-show-agreement{
    overflow: hidden;
}
#mnp-show-agreement .mnp-body{
    overflow: auto;
    max-height: 70vh;
}
.repeat-order {
    display: flex;
    flex-direction: column;
    margin: 15px auto;
}
.repeat-order-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ro-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.ro-title {
    font-weight: 700;
    font-size: 14px;
}
.ro-product {
    font-size: 12px;
    color: #555;
}
.ro-close {
    background: transparent;
    border: 0;
    padding: 4px;
    line-height: 0;
    cursor: pointer;
    color: #444;
}
.ro-close--small {
    margin-left: 8px;
}
.ro-btn {
    width: 100%;
    border-radius: 999px;
    padding: 10px 14px;
    font-weight: 600;
}
@media (min-width: 1025px) {
    .ro-btn {
        width: 50%;
    }
}
.ro-info {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top:10px;
}
.ro-hourglass{
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    color: #333;
}

.ro-info-text {
    font-size: 12px;
    color: #555;
    flex: 1;
    line-height: 1.3;
}
@media (max-width:360px){
    .page-order-detail .odp-body .ord-status{
        font-size:12px;
    }
}
[data-name="Edit Consent Float Button"] {
  bottom: 75px !important;
}
.cdp-qrcode{
    flex-shrink:0;
}
.cnf:has(.location-permission-popup) .cnf-title {
    font-weight:700;
}
.location-permission-popup {
    text-align: center;
    margin-top: 8px;
}

.location-permission-popup__subtitle {
    color: #000;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    margin: 16px 0 14px 0;
}

.location-permission-popup__benefits {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 18px;
}

.location-permission-popup__benefit {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 45px;
    padding: 5px 10px;
    border: 1px solid #df2b2a;
    border-radius: 4px;
    background: #fff;
    text-align: left;
    box-sizing: border-box;
}

.location-permission-popup__icon {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    display: block;
}

.location-permission-popup__benefit-text {
    font-size: 12px;
    line-height: 15px;
    color: #666;
    font-weight: 400;
}

.location-permission-popup__benefit-text strong {
    color: #4a4a4a;
    font-weight: 600;
}

.location-permission-popup__actions {
    display: flex;
    gap: 12px;
    margin-top: 16px;
}

.location-permission-popup__button {
    flex: 1;
    height: 36px;
    border-radius: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    padding: 0;
    margin: 0;
    cursor: pointer;
    text-align: center;
    appearance: none;
    -webkit-appearance: none;
}

.location-permission-popup__button--secondary {
    background: #fff;
    color: #df2b2a;
    border: 2px solid #df2b2a;
}

.location-permission-popup__button--primary {
    background: #df2b2a;
    color: #fff;
    border: 2px solid #df2b2a;
}
.bro-content {
    word-break: break-word;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
}
.bro-content.is-open {
    display: block;
    overflow: visible;
}
.bro-toggle {
    margin-top: 8px;
    padding: 0;
    border: 0;
    background: none;
    color: #0a58ca;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
@media (max-width: 1024px) {
    .bro-content {
        -webkit-line-clamp: 5;
    }
}
.bro {
    display: flex;
    background-color: #fff;
    border: 1px solid #e5e5e5;
    box-sizing: border-box;
    align-items: center;
}
@media (min-width: 1025px) {
    .bro {
        border-radius: 8px;
        gap: 32px;
        padding: 24px 40px;
    }

    .hps-offers .sct-body-special .bro {
        min-height: 190px;
        height: auto;
    }
}
.bro-body {
    flex: 1 1 auto;
    min-width: 0;
}
.hype-download-button {
    position: fixed;
    bottom: 18px;
    left: 38px;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 15px;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    line-height: normal;
    cursor: pointer !important;
    border: 1px solid #DF2B2A;
    border-radius: 6px;
    background: #DF2B2A;
}
.hype-popup-overlay {
    position: fixed;
    bottom: 80px;
    left: 38px;
    z-index: 10001;
    display: none;
    width: 275px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    animation: slideUpIn 0.3s ease-out;
}
@keyframes slideUpIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.hype-popup-modal {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}
.hype-popup-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 15px 13px 18px;
    background: #FFF6F6;
    border-radius: 8px;
}
.hype-popup-close {
    position: absolute;
    top: -10px;
    right: -10px;
    z-index: 10002;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}
.hype-app-icon {
    box-shadow: 0 4px 14px rgba(234, 34, 39, 0.24);
}
.hype-app-details-title {
    color: #000;
    font-size: 13px;
    font-weight: 600;
    line-height: normal;
}
.hype-app-details-description {
    color: #000;
    font-size: 13px;
    font-weight: 400;
    line-height: normal;
}
.hype-popup-content {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 15px;
    text-align: center;
}
.hype-qr-section-title {
    text-align: left;
    color: #000;
    font-size: 16px;
    font-weight: 500;
    line-height: normal;
}
.hype-qr-section-title .highlight {
    color: #DF2B2A;
    font-weight: 600;
}
.hype-qr-container {
    display: flex;
    align-items: center;
}
#hype-footer-download-button-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-top: 20px;
}
.hype-footer-download-button-container-title {
    margin-bottom: 12px;
    color: #000;
    font-size: 14px;
    font-weight: 600;
    line-height: normal;
}
.app-store-download-button {
    margin-bottom: 8px;
}
@media (max-width: 720px) {
    #hype-download-btn,
    #hype-popup-overlay {
        display: none;
    }
    #hype-footer-download-button-container {
        padding-top: 20px;
        margin-top: 20px;
        border-top: 1px solid #C3C3C3;
    }
    .hype-footer-download-button-container-buttons {
        display: flex;
        gap: 10px;
    }
    .app-store-download-button {
        margin-bottom: 0;
    }
}
.hype-footer-download-button-container-buttons a{
    width:151px;
}
.app-store-download-button{
    width:100%;
}
.deposit-result-popup {
    position: relative;
    text-align: center;
}

.deposit-result-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 28px;
    height: 28px;
    border: 0;
    background: transparent;
    font-size: 28px;
    line-height: 28px;
    cursor: pointer;
    color: #7B7B7B;
    display: flex;
    align-items: center;
    justify-content: center;
}

.deposit-result-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: #E5F7EA;
    display: flex;
    align-items: center;
    justify-content: center;
}

.deposit-result-icon svg {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #2DBE60;
    padding: 6px;
    box-sizing: border-box;
}

.deposit-result-icon svg path {
    stroke: #fff;
}

.deposit-result-title {
    font-size: 20px;
    line-height: 30px;
    font-weight: 600;
    color: #1D1D1D;
    margin-bottom: 10px;
}

.deposit-result-message {
    font-size: 16px;
    color: #6F6F6F;
    margin-bottom: 24px;
}

.deposit-product-name {
    font-weight: 600;
    color: #303030;
}

.deposit-result-cart-btn {
    width: 100%;
    height: 52px;
    border-radius: 999px;
    background: #ED1C24;
    color: #fff !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    font-size: 17px;
    font-weight: 500;
    margin-bottom: 12px;
}

.deposit-result-continue-btn {
    width: 100%;
    height: 52px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid #D9D9D9;
    color: #303030;
    font-size: 17px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
}
.deposit-result-cart-btn svg{
    font-size:30px;
}

@media (max-width: 767px) {
    #mnp-deposit-result-popup {
        border-radius: 16px 16px 0 0;
    }

    .deposit-result-title {
        font-size: 20px;
        line-height: 28px;
    }

    .deposit-result-message {
        font-size: 15px;
    }

    .deposit-result-cart-btn,
    .deposit-result-continue-btn {
        height: 48px;
        font-size: 16px;
    }
}



@charset "UTF-8";


.hdr-block2-right .icon {
  font-size: 40px;
}
@media (min-width: 1025px) {
  .login-sms-step3 .lpw {
    height: auto !important;
  }
}
@media (min-width: 1025px) {
  .login-sms-step4 .lpw {
    height: auto !important;
  }
}
.js-current-city-selection {
  overflow: hidden;
  display: inline-block;
  text-overflow: ellipsis;
  white-space: normal;
}
.d-none {
  display: none;
}
.smartbanner {
  width: 100%;
  height: 78px;
  font-family: "Helvetica Neue", helvetica, arial, sans-serif;
  background: #fff;
  overflow: unset;
  border-bottom: 1px solid #ccc;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: none;
  position: relative;
  z-index: 9999999999;
}
.smartbanner .smartbanner-container {
  margin: 0 auto;
}
.smartbanner .smartbanner-container .smartbanner-close {
  position: absolute;
  left: 7px;
  top: 7px;
  display: block;
  font-family: 'ArialRoundedMTBold', Arial;
  font-size: 15px;
  text-align: center;
  text-decoration: none;
  border-radius: 14px;
  -webkit-font-smoothing: subpixel-antialiased;
  border: 0;
  width: 17px;
  height: 17px;
  line-height: 17px;
  color: #b1b1b3;
  background: #efefef;
}
.smartbanner .smartbanner-container .smartbanner-button {
  position: absolute;
  right: 20px;
  top: 24px;
  border-bottom: 3px solid #b3c833;
  padding: 0 10px;
  min-width: 12%;
  height: 24px;
  font-size: 14px;
  line-height: 24px;
  text-align: center;
  font-weight: bold;
  color: #fff;
  background-color: #b3c833;
  text-decoration: none;
  border-radius: 5px;
}
.smartbanner .smartbanner-container .smartbanner-button:hover {
  background-color: #c1d739;
  border-bottom: 3px solid #8c9c29;
}
.smartbanner .smartbanner-container .smartbanner-button .smartbanner-button-text {
  text-align: center;
  display: block;
  padding: 0 5px;
}
.smartbanner .smartbanner-icon {
  position: absolute;
  left: 30px;
  top: 10px;
  display: block;
  width: 57px;
  height: 57px;
  background-color: #fff;
  background-size: cover;
  background-image: url("/_ui/responsive/common/images/ipapp-logo.png");
}
.smartbanner .smartbanner-info {
  position: absolute;
  left: 98px;
  top: 15px;
  width: 44%;
  font-size: 12px;
  line-height: 1.2em;
  font-weight: bold;
  color: #999;
}
.smartbanner .smartbanner-info .smartbanner-title {
  font-size: 15px;
  line-height: 17px;
  color: #000;
  font-weight: bold;
}
.page-homepage #site-header.app-header {
  height: 200px !important;
}