@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Gabarito:wght@400..900&display=swap');

/* Bubblegum Sans
Amaranth
Sour Gummy */

:root {
    /* --p: #3bb9b8;
    --ph: #23acac; */

    --p: #9f7b77;
    --ph: #835f5b;

    --s: #1d1a1a;
    --sh: #2b2828;

    --t_10: #e3f5f5;

    --st: rgb(24 24 27 / 80%);

   --font: Gabarito, sans-serif;

    --fc1: #241a19;
    --fc2: #8a6864;
    --fc3: #9f7b77;
    --fc4: #c0a19e;
    
   /*  --fc3: #80808a;
    --fc5: rgb(133, 133, 133); */
    --fc8: #e7d6d5;
    --fc9: #f5ebea;
    --fc10: #fff;

    --bgc1: #fff;
    --bgc2: #f3f2ee;
    --bgc3: #ece6da;
    --bgc4: #e2e6ec;
    --bgc5: #cbd1db;
    --bgc8: #9f7b77;
    --bgc10: #1d1a1a;

    --danger: #E53935;
    --danger2: #ffe2e1;
    --notice: #eb782c;
    --info: #f9c034;

    --success: #69aa1e;
    --success_h: #538d10;

    --success1: #69aa1e;
    --success2: #ceead6;
    --success3: #e6f4ea; 

    --gold: rgb(252 171 37);
    --gold_15: #fff2df;

    --br1: #f3f2ee;
    --br2: #ece6da;
    --br3: #e0cbc8;
    --br4 : #c9aaa6;


    


    --trans: all 0.3s ease-in-out;
    --trans_vslw: all 0.5s ease-in-out;
    --trans_md: all 0.2s ease-in-out;
    --trans_fst: all 0.1s ease-in-out;
    --trans_var: all 0.25s cubic-bezier(0.79, 0.14, 0.15, 0.86);


    --trans_trf:  transform 0.1s ease-in;
    --trans_clr: color 0.1s ease-in-out;
    --trans_bgc: background-color 0.1s linear;
    --trans_br_c: border-color 0.1s ease-in;
    --trans_h: height 0.1s ease-in;
    --trans_bxs:  box-shadow 0.1s ease-in;

    --trans_1_5_h: height 0.15s ease-in;
   
    --trans_2_trf:  transform 0.2s ease-in;
    --trans_2_bgc: background-color 0.2s linear;
    --trans_2_w: width 0.2s ease-in;
    --trans_2_h: height 0.2s ease-in;
    --trans_2_opc: opacity 0.2s linear;

    --trans_var_trf: transform 0.15s cubic-bezier(0.79, 0.14, 0.15, 0.86);

    --box_shadow: 0 0 2px 0 rgba(34, 47, 62, .2), 0 4px 8px 0 rgba(34, 47, 62, .15);
}

*,
::before,
::after {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}

/* pseudo element style */
::placeholder{color: #b8a1a1}
.no_sbar::-webkit-scrollbar{
    display: none;
}
.no_sbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}


/* element style */
html {
    font-size: 10px;
}
body{
    font: normal 400 1.6rem/1.46 var(--font);
    line-height: 1.57142857143;
    color: var(--fc1);
    text-align: left;
    background-color: var(--bgc1);
    font-optical-sizing: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
footer {
    overflow: hidden;
}
h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    line-height: 1.3;
    /* font-family: lora, serif; */
}
h1 {
    font-size: 4rem;
    font-weight: 600;
}
h2 {
    font-size: 3.6rem;
    margin-bottom: 2rem;
}
h3 {
    font-size: 1.8rem;
    line-height: 1.4;
    margin-bottom: 1.5rem;
}
h4 {
    margin-bottom: .5rem;
}
img {
    display: block;
    width: 100%;
    height: auto;
}
svg {
    display: inline-block;
    vertical-align: middle;
    width: 100%;
    height: auto;
}

a {
    text-decoration: none;
    color: var(--fc1);
}
a:hover {
    color: var(--fc2);
}
ul {
    list-style: none;
    list-style-position: inside;
}
label {display: block}
input,
select,
textarea {
    border: 1px solid var(--br3);
    height: 4.6rem;
    width: 100%;
    border-radius: 8px;
    padding: 0 1.5rem;
    font-family: var(--font);
    font-weight: 400;
    font-size: 1.6rem;
    line-height: 1.46;
    display: block;
    background-color: var(--bgc1);
    color: var(--fc1);
}
textarea {
    height: 160px;
    padding: 1.2rem 1.5rem;
}
input:focus,
select:focus, 
textarea:focus {
    border: 1px solid var(--s);
    outline: none;
    box-shadow: inset 0 0 0px 1px var(--s);
}
input[type="checkbox"] {
    width: 18px;
    height: 18px;
    border: none;
    display: block;
    margin-top: 1px;
}



.trans_trf {transition: var(--trans_trf)}
.trans_clr {transition: var(--trans_clr)}
.trans_bgc {transition: var(--trans_bgc)}
.trans_h {transition: var(--trans_h)}

.trans_1_5_h {transition: var(--trans_1_5_h)}

.trans_2_trf, .icon_angle_down, .oh_scale1_03, .fl_lbl ~ label {transition: var(--trans_2_trf)}
.trans_2_bgc {transition: var(--trans_2_bgc)}
.trans_2_w, .dots .dot {transition: var(--trans_2_w)}
.trans_2_h, .accord_c {transition: var(--trans_2_h)}
.trans_2_opc {transition: var(--trans_2_opc)}


.trans_var_trf, .slds {transition: var(--trans_var_trf)}




@keyframes fade_in {
    0% {opacity: 0}
    100% {opacity: 1}
}
@keyframes fade_in_up {
    0% {transform: translate(0, 3rem); opacity: 0}
    100% {transform: translate(0, 0); opacity: 1}
}
@keyframes fade_in_left {
    0% {transform: translate(3rem, 0); opacity: 0}
    100% {transform: translate(0, 0); opacity: 1}
}
@keyframes zoom_in {
    0% {transform: scale(0); opacity: 0}
    100% {transform: scale(1); opacity: 1}
}
@keyframes zoom_out {
    0% {transform: scale(1)}
    100% {transform: scale(0)}
}
@keyframes zoom_bounce {
	0% {transform: scale(1)}
	50% {transform: scale(.9)}
	100% {transform: scale(1)}
}


@keyframes zoom_in_large {
    0% {transform: scale(1); opacity: 1}
    50% {transform: scale(1); opacity: 1}
    55% {transform: scale(10); opacity: 0}
    95% {transform: scale(10); opacity: 0}
    100% {transform: scale(1); opacity: 1}
}
@keyframes zoom_in_out {
    0% {transform: scale(0); opacity: 0}
    52% {transform: scale(0); opacity: 0}
    57% {transform: scale(1); opacity: 1}
    93% {transform: scale(1); opacity: 1}
    100% {transform: scale(0); opacity: 0}
}

.input_md {
    height: 4rem;
    padding: 0 1.3rem;
}
input.checkbox_tog {
    width: 44px;
    height: 22px;
    display: inline-block;
    position: relative;
    cursor: pointer;
}
input.checkbox_tog:focus {
    box-shadow: none;
}
.checkbox_tog:before {  
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-color: var(--bgc2);
    border: 1px solid var(--p);
    z-index: 1;
    border-radius: 20px;
    transition: var(--trans_2_bgc);
}
.checkbox_tog:after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    z-index: 2;
    background-color: var(--p);
    border-radius: 50%;
    transition: var(--trans_2_trf), var(--trans_2_bgc);
}
.checkbox_tog:checked:before {
    background-color: var(--p);
}
.checkbox_tog:checked:after {
    transform: translateX(22px);
    background-color: var(--bgc2);
}

.anim_fi {
    animation: fade_in .1s ease-in-out;
}
.options,
.anim_fiu {
    animation: fade_in_up .1s ease-in-out;
}
.anim_fil {
    animation: fade_in_left .1s ease-in-out;
}
.anim_fic {
    animation: zoom_in .2s ease-in-out;
}
.anim_zoom_in {
    animation: zoom_in 1s ease-in-out infinite;
}
.anim_text_flash .span1 {
    animation: zoom_in_large 3s ease-in-out infinite
}
.anim_text_flash .span2 {
    animation: zoom_in_out 3s ease-in-out infinite
}

.accord_c,
.error,
.anim{
    animation-duration:.3s;
    animation-fill-mode: both
}


.loading span {
    width: 26px;
    height: 26px;
    border: 3px solid var(--br2);
    border-bottom-color: var(--p);
    border-radius: 50%;
    display: inline-block;
    animation: rotation .5s linear infinite;
}

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


.zoom_bounce,
.error {
    animation-name: zoom_bounce;
    transform-origin: center;
}

#overlay,
.trans {
    -webkit-transition: var(--trans);
    -moz-transition: var(--trans);
    -ms-transition: var(--trans);
    -o-transition: var(--trans);
    transition: var(--trans);
}
input,
.anim_delay1 {animation-delay: 1s}
.trans_fst,
.error,
.btn,
.tab,
.tabc {
    -webkit-transition: var(--trans_fst);
    -moz-transition: var(--trans_fst);
    -ms-transition: var(--trans_fst);
    -o-transition: var(--trans_fst);
    transition: var(--trans_fst);
}
label,
.accord_i,
.accord_c,
.scroll_card,
.trans_md {
    -webkit-transition: var(--trans_md);
    -moz-transition: var(--trans_md);
    -ms-transition: var(--trans_md);
    -o-transition: var(--trans_md);
    transition: var(--trans_md);
}

.trans_var,
.slides {
    -webkit-transition: var(--trans_var);
    -moz-transition: var(--trans_var);
    -ms-transition: var(--trans_var);
    -o-transition: var(--trans_var);
    transition: var(--trans_var);
}
.trans_p_tf {
    transition-property: transform;
}
.fl_lbl::placeholder {
    opacity: 0;
}
.fl_lbl ~ label {
    position: absolute;
    top: 15px;
    left: 17px;
    color: var(--fc2);
    font-size: 1em;
    line-height: 1;
}
.fl_lbl:not(:placeholder-shown) ~ label,
.fl_lbl:is(:focus-within, :-webkit-autofill, :autofill) ~ label {
    transform: translate(-7px, -22px);
    font-size: 1.3rem;
    padding: 0 4px 3px 4px;
    background-color: inherit;
    border-radius: 3px;
    font-weight: 500;
}
.fl_lbl:focus ~ label {
    color: var(--s);
}
.fl_lbl.field_dng ~ label {
    color: var(--danger);
}
.form_field + .icon {
    position: absolute;
    top: 0;
    right: 12px;
    width: 2.4rem;
    height: 4.8rem;
    line-height: 1;
    cursor: pointer;
}

.slide_active_step_1 .slide_step {
    transform: translateX(0);
}
.slide_active_step_2 .slide_step {
    transform: translateX(-100%);
}
.slide_active_step_3 .slide_step {
    transform: translateX(-200%);
}
.slide_active_step_4 .slide_step {
    transform: translateX(-300%);
}


.container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}
.container.w_cw {
    max-width: 1300px;
    margin: 0 auto;
}
.wrapper {
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
}
section, .section {
    padding: 2rem 1.5rem;
}
.error {
    line-height: 1.2;
    color: var(--danger);
    padding: 1rem 0 0 0;
    display: inline-flex;
    gap: .7rem;
    align-items: center;
}
.lazy {
    filter: blur(6px);
}
.popup {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    display: none;
    width: 100%;
    max-width: 600px;
    max-height: calc(100%);
    overflow-x: hidden;
    overflow-y: auto;
    padding: 1.5rem;
}
.popup.active {
    display: block;
}
.popup.active .popup_wrapper {
    display: grid;
}
.popup_wrapper {
    height: auto;
    min-height:200px;
    background-color: var(--bgc2);
    border-radius: 16px;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    animation: zoom_in .2s ease-in-out;
}
.popup_heading {
    display: flex;
    gap: 1.1rem;
    align-items: center;
    padding: 2rem 5rem 0 2.5rem;
    font-size: 2.4rem;
    line-height: 1.4;
    font-weight: 400;
    text-transform: capitalize;
    border-radius: 16px 16px 0 0;
}
.popup_content {
    overflow-x: hidden;
    overflow-y: auto;
    padding: 2.5rem;
    width: 100%;
    border-radius: 0 0 16px 16px;
}
.ai_wrapper.active {
    opacity: 1;
    display: block;
}
.accord {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}
.accord_b {
    border: 1px solid var(--br1);
    border-radius: 10px;
    background-color: var(--fc10);
    width: 100%;
}
.accord_h {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0;
    padding: 1.5rem 2rem;
    cursor: pointer;
    font-weight: 500;
}
.accord_c {
    height: 0;
    overflow: hidden;
    opacity: 0;
}
.accord_ci {
    padding: 0 2.5rem 2rem;
}
.accord_b.active .accord_c {
    height: auto;
    opacity: 1;
}
.accord_b.active .accord_i {
    transform: rotate(-180deg);
}



.scroll_cards {
    width: 100%;
    max-width: 1944px;
    max-width: 1368px;
    margin: 0 auto;
    position: relative;
    height: 420px;
}
.scroll_card {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%) scale(0);
    transform-origin: center bottom;
    z-index: 0;
    opacity: 0;
    width: 360px;
    border-radius: 10px 10px 0 0;
    background-color: var(--bgc1);
    box-shadow: 0 0 15px rgb(0 0 0 / 30%);

}

.scroll_card:nth-child(1) {
    transform: translatex(-257%) scale(.55);
    z-index: 3;
}
.scroll_card:nth-child(2) {
    transform: translateX(-205%)  scale(.7);
    z-index: 4;
    opacity: 1;
}
.scroll_card:nth-child(3) {
    transform: translateX(-140%) scale(.85);
    z-index: 5;
    opacity: 1;
}
.scroll_card:nth-child(4) {
    transform: translateX(-50%) scale(1);
    z-index: 6;
    opacity: 1;
}
.scroll_card:nth-child(5) {
    transform: translateX(40%) scale(.85);
    z-index: 5;
    opacity: 1;
}
.scroll_card:nth-child(6) {
    transform: translateX(105%) scale(.7);
    z-index: 4;
    opacity: 1;
}
.scroll_card:nth-child(7) {
    transform: translateX(157%) scale(.55);
    z-index: 3;
}

.pstep {
    color: var(--fc3);
}
.pstep:after,
.pstep.active:after,
.pstep:before,
.pstep.active:before {
    content: "";
    position: absolute;
    left: 50%;
    top: 2.6rem;
    margin-top: -1px;
    height: 3px;
    width: 50%;
    background-color: rgb(0 0 0 / 6%);
    z-index: -1;
}
.psteps.type_text .pstep:after,
.psteps.type_text .pstep.active:after,
.psteps.type_text .pstep:before,
.psteps.type_text .pstep.active:before {
    top: 1.5rem;
}
.pstep:before,
.pstep.active:before {
    left: 0;
}
.pstep:first-child:before,
.pstep:last-child:after {
    content: none;
}
.pstep_icon,
.pstep_number {
    background-color: var(--bgc2);
    padding: 0 3rem 1rem 3rem;
    display: inline-block;
}
.pstep_number {
    padding: 0 1.5rem 1.5rem 1.5rem;
}
.pstep_icon svg {
    box-sizing: content-box;
    width: 3.4rem;
    height: 3.4rem;
    border: 2px solid var(--br3);
    color: var(--br3);
    border-radius: 50%;
    padding: .9rem;
}
.pstep_number span {
    display: block;
    width: 3rem;
    height: 3rem;
    line-height: 3rem;
    border-radius: 50%;
    background-color: var(--bgc3);
}
.pstep.active svg {
    background-color: var(--success1);
    color: var(--fc10);
    border-color: var(--success1);
}
.pstep.active .pstep_number span {
    background-color: var(--p);
    color: var(--fc10);
}
.pstep.active:after,
.pstep.active:before {
    background-color: var(--success1);
    z-index: -1;
}
.psteps.type_text .pstep.active:after,
.psteps.type_text .pstep.active:before {
    background-color: var(--p);
}

.or {
    position: relative;
    left: 0;
    top: 0;
    text-align: center;
}
.or:before {
    content: "";
    border-top: 1px solid var(--br2);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 0;
}
.or span {
    padding: 0 2rem;
    background-color: var(--bgc1);
    position: relative;
    left: 0;
    top: 0;
    z-index: 2;
}

.psb {
    z-index: 3;
    color: var(--fc10);
    font-size: 11px;
    line-height: 13px;
    padding: 7px 10px;
    text-align: center;
    position: absolute;
    top: .5rem;
    right: .5rem;
    width: auto;
    min-width: 60px;
    text-transform: capitalize;
    font-weight: 500;
    border-radius: 16px;
}
.psb span {
    font-size: 17px;
    line-height: 17px;
}
.psb.freeship {
    text-transform: uppercase;
    font-size: 9px;
    line-height: 11px;
}
#product_page .psb {
    font-size: 12px;
    line-height: 15px;
}
#product_page .psb span {
    font-size: 20px;
    letter-spacing: .1em;
    line-height: 20px;
}
/* #product_page .freeship.psb:after {
    max-width: 84px;
    margin-left: -42px;
    bottom: -51px;
    border: 42px solid transparent;
    border-top: 10px solid transparent;
    border-top-color: inherit;
} */
.slider,
.carousel {
    position: relative;
}
.slides,
.carousel_items {
    display: flex;
    flex-wrap: nowrap;
    place-items: center;
    z-index: 2;
}

.ls_check ul {
    margin-top: 1rem;
}
.ls_check ul {
    list-style: none;
}
.ls_check ul li {
    position: relative;
    left: 0;
    top: 0;
    padding-left: 27px;
}
.ls_check ul li:after {
    content: "";
    position: absolute;
    left: 0;
    top: 3px;
    width: 20px;
    height: 20px;
    background-image: url(/media/icon/check.svg);
    z-index: 2;
    background-size: cover;
}

/* .stars {
    position: absolute;
    top: -100px;
    left: -100px;
    background-color: var(--bgc1);
    z-index: 0;
    border-radius: 2px;
} */




.pe_n,
use {pointer-events: none}
.icon {
    width: 2.2rem;
    height: 2.2rem;
}
.rating_stars,
.rating_stars div {
    width: 87px;
    height: 22px;
}
.btn {
    padding: 0 2.1rem;
    width: auto;
    min-width: 4.4rem;
    height: 4.4rem;
    border-radius: 8px;
    color: var(--p);
    background-color: transparent;
    border: 1px solid var(--br3);
    cursor: pointer;
    font-size: 1.7rem;
    line-height: 1;
    font-weight: 400;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    white-space: nowrap;
    gap: .8rem;
    font-family: inherit;
    cursor: pointer;
}
.btn_xsm,
.input_xsm {
    height: 3.4rem;
    padding: 0 1.2rem;
    font-size: 1.6rem;
    min-width: 3.4rem;
}
.btn_sm {
    height: 3.8rem;
    padding: 0 1.6rem;
    font-size: 1.45rem;
    min-width: 3.8rem;
}
.btn_md {
    height: 4rem;
    padding: 0 1.6rem;
    font-size: 1.6rem;
    min-width: 4rem;
}
.btn_xl,
.btn.xl {
    height: 5rem;
    padding: 0 2.5rem;
    font-size: 1.8rem;
}
.btn_2xl {
    height: 5.6rem;
    padding: 0 2.5rem;
    font-size: 2.1rem;
}
.btn:hover {
    background-color: var(--bgc2);
    border-color: var(--br3);
    text-decoration: none;
    color: var(--ph);
}
.btn:active {
    transform: scale(.95);
}
.btn_close {
    padding: 0;
    border: none;
    position: absolute;
    right: 3rem;
    top: 3rem;
    z-index: 2;
}
.btn_close:hover {
    color: #d09392;
    background-color: initial;
}
.btn.p {
    background-color: var(--p);
    color: var(--fc10);
    border-color: var(--p);
}
.btn.p:hover {
    background-color: var(--ph);
    border-color: var(--ph);
}
.btn.s {
    background-color: var(--s);
    color: var(--fc10);
    border-color: var(--s);
}
.btn.s:hover {
    background-color: var(--sh);
    border-color: var(--sh);
}
.btn.success {
    background-color: var(--success);
    color: var(--fc10);
    border-color: var(--success);
}
.btn.success:hover {
    background-color: var(--success_h);
    border-color: var(--success_h);
}
.btn.trp,
.btn.trp:hover {
    background-color: transparent;
    border-color: transparent;
}
.btn.hollow {
    background-color: transparent;
    border-width: 2px;
}
.btn.hollow.p {
    background-color: transparent;
    color: var(--p);
    border-color: var(--p);
}
.btn.hollow.p:hover {
    background-color: transparent;
    color: var(--ph);
    border-color: var(--ph);
}
.btn:disabled,
.btn:disabled:hover {
    background-color: var(--bgc4);
    border: 1px solid var(--bgc4);
}

.btn .icon {
    width: 2rem;
    height: 2rem;
    pointer-events: none;
}
.btn_2xl .icon,
.btn_close .icon {
    width: 2.6rem;
    height: 2.6rem;
}

.btn_checkbox {
    padding: 0;
}
.btn_checkbox input {
    display: none;
}
.btn_checkbox.btn_xsm label {
    cursor: pointer;
    padding: 0 1.5rem;
    height: 3.2rem;
    line-height: 3.3rem;
    border-radius: 100px;
}
.btn_checkbox_input:checked + label {
    background-color: var(--success1);
    color: var(--fc10);
}

.dropdown.active {
    z-index: 5;
}
.dropdown.active > .options {
    display: block;
}
.options {
    display: none;
    position: absolute;
    top: 4rem;
    left: 0;
    z-index: 1;
    border: 1px solid var(--br1);
    background-color: var(--bgc1);
    width: max-content;
    min-width: 150px;
    max-width: 300px;
    height: auto;
    max-height: 450px;
    border-radius: 6px;
    box-shadow: 0 0 2px 0 rgba(34, 47, 62, .2), 0 4px 8px 0 rgba(34, 47, 62, .15);
    padding: .5rem;
    overflow-x: hidden;
    overflow-y: auto;
}
.option {
    display: flex;
    align-items: center;
    gap: 1.3rem;
    width: 100%;
    line-height: 20px;
    border-radius: 3px;
    padding: 5px 13px;
    position: relative;
    left: 0;
    top: 0;
    margin-bottom: 4px;
    cursor: pointer;
}
.option:hover {
    background-color: var(--bgc2);
}
.tag,
.tag2 {
    color: var(--fc10);
    background-color: var(--p);
    display: inline-flex;
    gap: 1rem;
    align-items: center;
    border-radius: 100px;
    padding: .3rem 1.2rem;
    font-weight: 500;
    font-size: 1.5rem;
    line-height: 1.4;
    text-transform: uppercase;
}
.tag2 {
    padding-right: 1.2rem;
}
.icon_xxsm {
    width: 1.8rem;
    height: 1.8rem;
}
.icon_xsm {
    width: 2rem;
    height: 2rem;
}
.icon_sm {
    width: 2.2rem;
    height: 2.2rem;
}
.popup_icon,
.icon_md {
    width: 2.4rem;
    height: 2.4rem;
}
.icon_lg {
    width: 2.6rem;
    height: 2.6rem;
}
.icon_xl {
    width: 2.8rem;
    height: 2.8rem;
}
.icon_size3_4 {
    width: 3.4rem;
    height: 3.4rem;
}
.icon_size3_6 {
    width: 3.6rem;
    height: 3.6rem;
}
.icon_size5 {
    width: 5rem;
    height: 5rem;
}
.figure_phone:before {
    content: "";
    position: absolute;
    top: 50%;
    right: 3px;
    z-index: 1;
    width: 3px;
    height: 26%;
    border-radius: 8px;
    background-color: var(--br3);
    transform: translateY(-50%);
}





.bs_cb {box-sizing: content-box;}
.block {display: block}
.iblock {display: inline-block}
.iflex {
    display: inline-flex;
}
.flex {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: stretch;
    align-items: flex-start;
    justify-content: flex-start;
}
.flex1 {flex: 1}
.aratio1_1 {aspect-ratio: 1/1}
.fd_col {flex-direction: column}
.slide,
.flex_i_w_eq {
    flex-basis: 0;
    flex-grow: 1;
}
.wrap {
    flex-wrap: wrap;
}
.grid {
    display: grid;
    grid-template-columns: 1fr;
}
.gtc1a {grid-template-columns: 1fr auto}
.gtc2 {grid-template-columns: repeat(2, 1fr)}
.gtc3 {grid-template-columns: repeat(3, 1fr)}
.gtc3_2{grid-template-columns: 3fr 2fr}
.gtc4 {grid-template-columns: repeat(4, 1fr)}

.gtr2 {grid-template-rows: repeat(2, 1fr);}
.gtr_a1 {grid-template-rows: auto 1fr}
.gtr_a1a {grid-template-rows: auto 1fr auto}
.gtr_a1aa {grid-template-rows: auto 1fr auto auto}
.gtr_aa1a {grid-template-rows: auto auto 1fr auto}

.gc1_2 {grid-column: 1 / 2}
.gc1_4 {grid-column: 1 / 4}
.gc2_3 {grid-column: 2 / 3}
.gc2_4 {grid-column: 2 / 4}
.gc3_4 {grid-column: 3 / 4}
.gc1_1 {grid-column: 1 /-1}

.gr_a {grid-row: auto}
.gr1 {grid-row: 1fr}

.gr1_2 {grid-row: 1/2}
.gr1_3 {grid-row: 1/3}
.gr2_3 {grid-row: 2/3}

.fb0 {flex-basis: 0}
.fb40 {flex-basis: 40%}
.fg1 {flex-grow: 1}


.ai_c {align-items: center}
.ai_s {align-items: stretch}
.ai_e {align-items: end}
.ai_fe {align-items: flex-end}

.as_c {align-self: center}
.as_e {align-self: end}

.jc_c {justify-content: center}
.jc_e {justify-content: end}
.jc_sb {justify-content: space-between}
.jc_sa {justify-content: space-around}

.gp0{gap: 0}
.gp_3{gap: .3rem}
.gp_5{gap:.5rem}
.gp_7{gap:.7rem}
.gp1{gap:1rem}
.gp1_5{gap:1.5rem}
.gp2{gap:2rem}
.gp2_2{gap: 2.2rem}
.gp2_5{gap: 2.5rem}
.gp3{gap:3rem}
.gp3_5 {gap: 3.5rem}
.gp4{gap:4rem}
.gp5{gap:5rem}
.gp6{gap:6rem}
.gp_r4 {
    row-gap: 4rem;
}

.gp0_r {row-gap: 0}
.gp1_r {row-gap: 1rem}
.gp2_r {row-gap: 2rem}
.gp2_5r {row-gap: 2.5rem}

.tablist {
    width: auto;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    overflow-y: hidden;
    overflow-x: auto;
    white-space: nowrap;
}
.tab {
    display: block;
    padding: 0 0 1.3rem 0;
    cursor: pointer;
    font-size: 1.6rem;
    line-height: 21px;
    color: var(--fc1);
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 1rem;
    position: relative;
}
.tab.active {
    z-index: 1;
    background-color: var(--bgc3);
}
.tabpanel {
    display: none;
}
.tabpanel.active {
    display: block;
}


.cvis_a {
    content-visibility: auto;
    contain-intrinsic-size: 1000px;
}

.static {position: static}
.dropdown,
.rel {
    position: relative;
}
.sticky{
    position: sticky;
    top: 0;
}
.popup_wrapper > .loading,
.abs_cntr,
.abs_cntr_x,
.abs_cntr_y,
.abs {
    position: absolute
}
.fxd {
    position: fixed;
}
.rel, .abs, .fxd{
    left: 0;
    top: 0;
}
.abs_cntr_x {
    left: 50%;
    transform: translateX(-50%);
}
.abs_cntr_y {
    top: 50%;
    transform: translateY(-50%);
}
.popup_wrapper > .loading,
.abs_cntr {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.tp_a {top: auto}
.tp0 {top: 0}
.tp_5 {top: .5rem}
.tp1 {top: 1rem}
.tp1_5 {top: 1.5rem}
.tp2 {top: 2rem}
.tp4 {top: 4rem}
.tp4_5 {top: 4.5rem}

.tp50p{top:50%}

.rgt0 {right: 0}
.rgt1_5 {right: 1.5rem}
.rgt1 {right: 1rem}
.rgt5 {right: 5rem}

.btm0 {bottom: 0}
.btm_5 {bottom: .5rem}
.btm1 {bottom: 1rem}
.btm100p{bottom: 100%}

.lft_a {left: auto}
.lft1 {left: 1rem}
.lft-300 {left: -300px}
.lft-340 {left: -340px}
.lft50p{left: 50%}
.lft100p{left: 100%}
.lft-100p{left: -100%}

.zi-10{z-index: -10}
.zi0{z-index: 0}
.zi1{z-index: 1}
.zi2{z-index: 2}
.zi3{z-index: 3}
.zi10{z-index: 10}

.rotate270 {transform: rotate(270deg)}
.rotate290 {transform: rotate(290deg)}

.fs_c{field-sizing: content}

.m0auto{margin: 0 auto}

.mt_2{margin-top: .2rem}
.mt_5{margin-top: .5rem}
.mt1{margin-top: 1rem}
.mt1_5{margin-top: 1.5rem}
.mt2{margin-top: 2rem}
.mt3{margin-top: 3rem}
.mt5{margin-top: 5rem}

.mr_a{margin-right: auto}

.mb0{margin-bottom: 0}
.mb_5{margin-bottom: .5rem}
.mb_7{margin-bottom: .7rem}
.mb1{margin-bottom: 1rem}
.mb1_5{margin-bottom: 1.5rem}
.mb2{margin-bottom: 2rem}
.mb2_5{margin-bottom: 2.5rem}
.mb3{margin-bottom: 3rem}
.mb3_5{margin-bottom: 3.5rem}
.mb4{margin-bottom: 4rem}
.mb5{margin-bottom: 5rem}
.mb6{margin-bottom: 6rem}
.mb8{margin-bottom: 8rem}
.mb10{margin-bottom: 10rem}

.mb4_neg{margin-bottom: -4rem}

.ml_a{margin-left: auto}
.ml_1{margin-left: -1rem}
.ml1{margin-left: 1rem}
.ml2{margin-left: 2rem}
.ml3{margin-left: 3rem}


.p0{padding: 0}
.p_1{padding: .1rem}
.p_2{padding: .2rem}
.p_3{padding: .3rem}
.p_4{padding: .4rem}
.p_5{padding: .5rem}
.p_7{padding: .7rem}
.p1{padding: 1rem}
.p1_2{padding: 1.2rem}
.p1_5{padding: 1.5rem}
.p2{padding: 2rem}
.p2_5{padding: 2.5rem}
.p3{padding: 3rem}
.p4{padding: 4rem}
.p5{padding: 5rem}

.pt0{padding-top: 0}
.pt_2{padding-top: .2rem}
.pt_3{padding-top: .3rem}
.pt_5{padding-top: .5rem}
.pt1{padding-top: 1rem}
.pt1_5{padding-top: 1.5rem}
.pt2{padding-top: 2rem}
.pt2_5{padding-top: 2.5rem}
.pt3{padding-top: 3rem}
.pt3_5{padding-top: 3.5rem}
.pt5{padding-top: 5rem}
.pt6{padding-top: 6rem}
.pt8{padding-top: 8rem}
.pt10{padding-top: 10rem}

.pr0{padding-right: 0}
.pr_5{padding-right: .5rem}
.pr1{padding-right: 1rem}
.pr1_5{padding-right: 1.5rem}
.pr2{padding-right: 2rem}

.pb0{padding-bottom: 0}
.pb_2{padding-bottom: .2rem}
.pb_3{padding-bottom: .3rem}
.pb_5{padding-bottom: .5rem}
.pb1{padding-bottom: 1rem}
.pb1_5{padding-bottom: 1.5rem}
.pb2{padding-bottom: 2rem}
.pb2_5{padding-bottom: 2.5rem}
.pb3{padding-bottom: 3rem}
.pb3_5{padding-bottom: 3.5rem}
.pb5{padding-bottom: 5rem}
.pb6{padding-bottom: 6rem}
.pb8{padding-bottom: 8rem}
.pb10{padding-bottom: 10rem}

.pb100p{padding-bottom: 100%}

.pl0{padding-left: 0}
.pl_5{padding-left: .5rem}
.pl1{padding-left: 1rem}
.pl1_5{padding-left: 1.5rem}
.pl2{padding-left: 2rem}

.pointer {cursor: pointer}

.w_a, .wa{width: auto}
.w_fc, .wa{width: fit-content}
.w1_2 {width: 1.2rem}
.w1_4 {width: 1.4rem}
.w1_9 {width: 1.9rem}

.w20{width:20px}
.w24{width:24px}
.w30{width:30px}
.w36{width:36px}
.w40{width:40px}
.w50{width:50px}
.w60{width:60px}
.w70{width:70px}
.w80{width:80px}
.w90{width:90px}
.w100{width:100px}
.w140{width:140px}
.w160{width:160px}
.w180{width:180px}
.w200{width:200px}
.w270{width:270px}
.w300{width:300px}
.w340{width:340px}
.w400{width:400px}
.w450{width:450px}
.w500{width:500px}

.w20p{width:20%}
.w25p{width:25%}
.w30p{width:30%}
.w33p{width:33.333%}
.w35p{width:35%}
.w40p{width:40%}
.w45p{width:45%}
.w49p{width:49%}
.w50p{width:50%}
.w55p{width:55%}
.w65p{width:65%}
.w66p{width:66%}
.w60p{width:60%}
.w70p{width:70%}
.w100p{width:100%}

.mxw_n{max-width: none}

.mxw150{max-width:150px}
.mxw160{max-width:160px}
.mxw180{max-width:180px}
.mxw200{max-width:200px}
.mxw220{max-width:220px}
.mxw250{max-width:250px}
.mxw280{max-width:280px}
.mxw300{max-width:300px}
.mxw400{max-width:400px}
.mxw450{max-width:450px}
.mxw500{max-width:500px}
.mxw540{max-width:540px}
.mxw600{max-width:600px}
.mxw800{max-width:800px}
.mxw900{max-width:900px}
.mxw1000{max-width:1000px}
.mxw1100{max-width:1100px}
.mxw1200{max-width:1200px}

.mxw100p{max-width: 100%}

.mnw0{min-width: 0}
.mnw180{min-width: 180px}

.h_a{height: auto}
.h0{height:0}
.h8r{height: 8rem}
.h17{height:17px}
.h18{height:18px}
.h20{height:20px}
.h22{height:22px}
.h24{height:24px}
.h26{height:26px}
.h30{height:30px}
.h36{height:36px}
.h40{height:40px}
.h44{height:44px}
.h100{height:100px}
.h200{height:200px}

.h100p{height: 100%}

.mxh600{max-height: 600px}

.mxh100p{max-height: 100%}

.fs_xs {
    font-size: 1.2rem;
}
.fs_sm{
    font-size:1.3rem;
    line-height: 1.5;
}
.fs1_4 {
    font-size: 1.4rem
}
.fs_md{
    font-size:1.5rem;
}
.fs_rg{
    font-size:1.6rem;
    line-height: 1.46;
}

.fs1_6 {
    font-size: 1.6rem;
    line-height: 1.46;
}
.fs1_7 {
    font-size: 1.7rem;
    line-height: 1.46;
}
.fs2 {
    font-size: 2rem;
    line-height: 1.3;
}
.fs_xl{
    font-size:1.8rem;
    line-height: 1.4;
}
.fs_2xl{
    font-size:2.2rem;
    line-height: 1.3
}
.fs_3xl{
    font-size:3rem;
    line-height: 1.3
}
.fs_4xl{
    font-size:4rem;
    line-height: 1.2
}
.fs3_6 {font-size: 3.6rem; line-height: 1.2}
.fs_5xl{
    font-size: 5.6rem;
    line-height: 1.2;
}


.lh1 {line-height: 1}
.lh1_1 {line-height: 1.1}
.lh1_2 {line-height: 1.2}
.lh1_4 {line-height: 1.4}
.lh1_6 {line-height: 1.6}
.lh1_7 {line-height: 1.7}
.lh3_6r {line-height: 3.6rem}

.fc1{color: var(--fc1)}
.fc2{color: var(--fc2)}
.fc3{color: var(--fc3)}
.fc5{color: var(--fc5)}
.fc8{color: var(--fc8)}
.fc9{color: var(--fc9)}
.fc10{color: var(--fc10)}

.fc_p{color: var(--p)}
.fc_s, .oh_fc_s:hover{color: var(--s)}
.fc_t{color: var(--t)}
.fc_dng, .oh_fc_dng:hover{color: var(--danger)}
.fc_scs{color: var(--success1)}
.fc_ntc{color: var(--notice)}

.fc_gld{color: var(--gold)}

.fc_ptb{
    background: linear-gradient(90deg, #c72c91 33.54%, #006cbe 73.82%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.tt_c{text-transform: capitalize;}
.tt_u{text-transform: uppercase;}

.td_n{text-decoration: none}
.td_u{text-decoration: underline}
.td_lt{text-decoration: line-through}

.bgc_p{background-color: var(--p)}
.bgc_s{background-color: var(--s)}
.bgc_t{background-color: var(--t)}
.bgc_trp{background-color: transparent}

.bgc_t_10{background-color: var(--t_10)}

.bgc_dng{background-color: var(--danger)}
.bgc_scs{background-color: var(--success1)}
.bgc_ntc{background-color: var(--notice)}
.bgc_inf{background-color: var(--info)}

.bgc_gld{background-color: var(--gold)}
.bgc_gld_15{background-color: var(--gold_15)}

.bgc1{background-color: var(--bgc1)}
.bgc2{background-color: var(--bgc2)}
.bgc3{background-color: var(--bgc3)}
.bgc8{background-color: var(--bgc8)}

.bgc1_83{background-color: hsl(0deg 0% 100% / 83%)}
.bgc1_65{background-color: hsl(0deg 0% 100% / 65%)}
.bgc10_40{background-color: hsla(0, 0%, 0%, 0.40)}

.bgs_c{background-size: cover;}

.bgp_c{background-position: center;}

.bgr_nr{background-repeat: no-repeat}

.bgi_g {background-image: radial-gradient(circle at 85% -15%, #006cbe -20%, transparent 20%), radial-gradient(circle at 65% 10%, #005fa7 10%, transparent 50%), radial-gradient(circle at 30% 55%, #0e7cd1 -20%, transparent 40%)}

.bxs {box-shadow: inset 0 -1px .5px #0000000a,0 8px 8px -4px #00000005,0 4px 4px -2px #00000008,0 3px 3px -1.5px #1b1b1b08,0 2px 2px -1px #0000000a,0 .5px 1px #0000000f,0 0 0 1px #0000000a;}
.bxs_lite {box-shadow: 0 0 0 1px #0000000f,0 24px 48px -12px #0a0d122e,0 4px 4px -2px #0a0d120a;}
.bxs2 {box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px}
.br0 {border: none}
.br_p{border: 1px solid var(--p)}
.br_s{border: 1px solid var(--s)}
.br_trp{border: 1px solid transparent}
.br_bgc1{border: 1px solid var(--bgc1)}
.br1{border: 1px solid var(--br1)}
.br2{border: 1px solid var(--br2)}
.br3{border: 1px solid var(--br3)}
.br4{border: 1px solid var(--br4)}

.br0_t{border-top: none}
.br1_t{border-top: 1px solid var(--br1)}
.br1_r{border-right: 1px solid var(--br1)}
.br1_b{border-bottom: 1px solid var(--br1)}

.br0_b{border-bottom: none}
.br2_b{border-bottom: 1px solid var(--br2)}

.br3_t{border-top: 1px solid var(--br3)}
.br3_r{border-right: 1px solid var(--br3)}
.br3_b{border-bottom: 1px solid var(--br3)}

.br_w2{border-width: 2px}
.br_w3{border-width: 3px}
.br_w4{border-width: 4px}

.br_s_d{border-style: dashed}

.brr0{border-radius: 0}
.brr3{border-radius: 3px}
.brr6{border-radius: 6px}
.brr10{border-radius: 10px}
.brr16{border-radius: 16px}
.brr20{border-radius: 20px}
.brr100{border-radius: 100px}
.brr50p{border-radius: 50%}

.brr6_tl {border-top-left-radius: 6px}
.brr10_tl {border-top-left-radius: 10px}
.brr16_tl {border-top-left-radius: 16px}
.brr20_tl {
    border-top-left-radius: 20px
}

.brr6_tr {border-top-right-radius: 6px}
.brr10_tr {border-top-right-radius: 10px}
.brr16_tr {border-top-right-radius: 16px}
.brr20_tr {border-top-right-radius: 20px}

.brr6_br {border-bottom-right-radius: 6px}
.brr10_br {border-bottom-right-radius: 10px}

.brr20_br {border-bottom-right-radius: 20px}

.brr6_bl {border-bottom-left-radius: 6px}
.brr10_bl {border-bottom-left-radius: 10px}
.brr20_bl {border-bottom-left-radius: 20px}


.fw4 {font-weight: 400}
.fw5 {font-weight: 500}
.fw6 {font-weight: 600}
.fw7 {font-weight: 700}

.ta_c{text-align:center}
.ta_l{text-align:left}
.ta_r{text-align:right}

.ws_n {white-space: nowrap}

.mxw500_block,
.om_block,
.om_flex,
.hidden {display: none;}

.om_sticky {
    position: sticky;
    top: 0;
}

.of_h {overflow:hidden}
.of_x_a {overflow-x: auto}
.of_y_a {overflow-y: auto}

.sst_x_m {scroll-snap-type: x mandatory}

.to_e {text-overflow: ellipsis}

.opc0{opacity: 0}
.opc_3{opacity: .3}




.field_dng,
.field_dng:focus {
    border: 1px solid var(--danger);
    /* box-shadow: 0 0 0px 1px var(--danger); */
    background-color: var(--danger2);
}


.of_initial:focus {
    border: initial;
    box-shadow: initial;
}



.oh_trig:hover .oh_target_block {display: block}
.oh_trig:hover .oh_target_flex {display: flex}
.oh_trig:hover .oh_target_grid {display: grid}


#main_menu a {
    margin-top: 5px;
}
#overlay {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: rgb(0 0 0 / 75%);
    opacity: 0;
    z-index: 9;
    display: none;
}
#overlay.active {
    opacity: 1;
    display: block;
}
#reminder.active,
#cart_view.active {
    transform: translateX(-400px); 
}
#reminder_popup {
    max-width: 500px;
}
#shipping_address_popup .popup_wrapper,
#gift_message_popup .popup_wrapper,
#shipping_calendar .popup_wrapper {
    background-color: var(--bgc1);
}
#shipping_calendar {
    max-width: 1000px;
    /* height: 96%;
    padding: 0;
    max-height: 750px;
    overflow: hidden; */
}

.page_checkout { 
    #mobile_menu_trig,
    #mobile_search_trig,
    #mobile_user_trig,
    #mobile_cart_trig,
    #secondary_menu,
    #main_menu,
    #search_area,
    #user_account_trig,
    #sign_in_trig,
    #reminder_trig,
    #track_order_trig,
    #footer_subscribe {
        display: none;
    }

    #mobile_secure_checkout,
    #secure_checkout {
        display: flex;
    }
    #main_header {
        padding: 1rem 1.5rem 0;
    }
}

#mobile_search_f.active {
    display: flex;
}
#mobile_menu.active {
    transform: translateX(340px)
}

.grecaptcha-badge { 
    visibility: hidden !important;
}



@media (max-width: 1200px) {
    .mxw1200_block {display: block}
    .mxw1200_gp2 {gap: 2rem}
    .mxw1200_gp2_5 {gap: 2.5rem}
}

@media (max-width: 1100px) {
    .mxw1100_gp1_5 {
        gap: 1.5rem;
    }

    .mxw1100_hidden {display: none}
}

@media (max-width: 1000px) {
    .mxw1000_gc1_1 {grid-column: 1/-1;}
}
@media (max-width: 900px) {
    html {
        font-size: 9.5px;
    }
    h1 {
        font-size: 3.4rem;
    }
    h2 {
        font-size: 2.7rem;
    }
    h3 {font-size: 1.7rem}



    section, .section {
        padding: 1.3rem;
    }
    .popup_content {
        padding: 1.5rem;
    }
    .accord_h {
        padding: 1.5rem 2rem;
    }
    .accord_ci {
        padding: 0 2rem 1.5rem;
    }
  
    .pstep_icon {
        padding: 0 .8rem 1rem .8rem;
    }
    .pstep_icon svg {
        width: 2.6rem;
        height: 2.6rem;
        padding: .7rem;
    }
    .pstep:after, .pstep.active:after, .pstep:before, .pstep.active:before {
        top: 2.2rem;
        margin-top: 1px;
    }
    .psb {
        font-size: 9px;
        line-height: 11px;
        padding: 6px 9px;
        min-width: 46px;
    }
    .psb span {
        font-size: 13px;
        line-height: 13px;
    }
    .psb.freeship {
        font-size: 7px;
        line-height: 9px;
    }
    #product_page .psb.freeship {
        font-size: 9px;
        line-height: 10px;
    }
    #product_page .psb span {
        font-size: 15px;
        line-height: 16px;
    }

    .btn.xxl {
        height: 4.2rem;
        padding: 0 1.8rem;
        font-size: 1.6rem;
    }


    .om_tp_5 {top: .5rem}
    .om_rgt_5 {right: .5rem}
    .om_btm_5 {bottom: .5rem}
    .om_lft_5 {left: .5rem}
    
    .om_ta_c{text-align: center}
 
    .fs_2xl {
        font-size: 2.2rem;
    }
    .fs_3xl {
        font-size: 2.4rem;
    }
    .fs_4xl {
        font-size: 3rem;
    }
    .fs_5xl{
        font-size: 4rem;
    }
    .p3 {
        padding: 2rem;
    }
    .mb5 {
        margin-bottom: 3.5rem;
    }
    .mb6 {
        margin-bottom: 4rem;
    }
    .mb8 {
        margin-bottom: 5rem;
    }
    .mb10 {
        margin-bottom: 7rem;
    }

    .mxw220 {
        max-width: 190px;
    }

    .om_fs_md{
        font-size: 1.4rem;
        line-height: 1.6;
    }
    .om_fs1_7{
        font-size: 1.7rem;
        line-height: 1.3;
    }
    .om_fs2_8{
        font-size: 2.8rem;
        line-height: 1.2;
    }

    .om_gtc1{grid-template-columns: 1fr}
    .om_gtc2{grid-template-columns: repeat(2, 1fr)}
    .om_gtc5{grid-template-columns: repeat(5, 1fr)}
    .gp1_5{gap: 1rem}
    .gp2 {gap: 1rem}
    .gp3 {
        gap: 1.5rem;
    }
    .om_gp0{gap: 0}
    .om_gp2 {gap: 2rem}
    .om_gp3 {gap: 3rem}
    .om_wrap {
        flex-wrap: wrap;
    }
    .om_jc_c {justify-content: center}
    .om_jc_fs {justify-content: flex-start}
    .om_fb90 {flex-basis: 90%;}


    .om_of_x_a {overflow-x: auto}

    .om_w100p {width: 100%}

    .om_brr10 {
        border-radius: 10px;
    }
   /*  .om_brr20_tr {
        border-top-right-radius: 20px;
    }
    .om_brr20_br {
        border-bottom-right-radius: 20px;
    } */

    .om_mb2{margin-bottom: 2rem}

    .om_p1 {padding: 1rem}
    .om_p1_5 {padding: 1.5rem}
    .om_pt1 {padding-top: 1rem}
    .om_pt1_5{padding-top: 1.5rem}
    .om_pt3{padding-top: 3rem}
    .om_pt5{padding-top: 5rem}

    .om_pr1_5 {padding-right: 1.5rem}
    .om_pr3 {padding-right: 3rem}

    .om_pb1 {padding-bottom: 1rem}
    .om_pb1_5{padding-bottom: 1.5rem}
    .om_pb5{padding-bottom: 5rem}

    .om_pl1_5{padding-left: 1.5rem}


    .om_fxd {position: fixed}

    .om_block {display: block}
    .om_flex {display: flex}
    .om_grid {display: grid}
    .om_hidden {display: none}

    #mobile_menu_items {
        transform: translateX(0);
    }
    #mobile_menu_items li {
        margin-bottom: 3px;
    }
    #mobile_menu_items li:last-child {
        margin-bottom: 0;
    }
    #mobile_menu_items li a {
        display: flex;
        align-items: center;
        gap: 1rem;
        justify-content: space-between;
        width: 100%;
        border-radius: 6px;
        padding: .8rem 1.5rem;
        font-size: 1.7rem;
        font-weight: 500;
        line-height: 1.3;
    }
    #mobile_menu_items li a .icon {
        margin: 0 -5px;
        pointer-events: none;
    }

}

@media (max-width: 700px) {

    .mxw700_gtc2 {grid-template-columns: 1fr 1fr}

    .mxw700_gtr2 {grid-template-rows: 1fr 1fr}

    .mxw700_gp2 {gap: 2rem}

    .mxw700_wrap {flex-wrap: wrap}

    .mxw700_jc_c{justify-content: center}


    .mxw700_gc1_2 {grid-column: 1/2}
    .mxw700_gc1_3 {grid-column: 1/3}
    .mxw700_gc2_3 {grid-column: 2/3}

    .mxw700_gr1_3 {grid-row: 1/3}

    .mxw700_ta_c {text-align: center}

    .mxw700_mt0 {margin-top: 0}

   
}

@media (max-width: 600px) {

    .mxw600_block{display: block}

    .mxw600_gtc1 {grid-template-columns: 1fr}

    .mxw600_w80 {width: 80px}

    .mxw600_p0 {
        padding: 0;
    }
}

@media (max-width: 500px) {
    .mxw500_block {
        display: block;
    }
    .mxw500_hidden {
        display: none;
    }
    #reminder,
    #cart_view {
        width: 360px;
    }
    #reminder.active,
    #cart_view.active {
        transform: translateX(-360px); 
    }
}

@media (max-width: 400px) {
    .mxw400_fs_sm{
        font-size: 1.3rem;
        line-height: 1.5;
    }
}