@charset "UTF-8";

*{min-height: 0; min-width: 0}img{max-width: 100%; height: auto; font-style: italic; background-repeat: no-repeat; background-size: cover; shape-margin: .75rem}img.alignright{float:right;margin:0 0 1em 1em}img.alignleft{float:left;margin:0 1em 1em 0}img.aligncenter{display:block;margin-left:auto;margin-right:auto}.alignright{float:right}.alignleft{float:left}.aligncenter{display:block;margin-left:auto;margin-right:auto}a, button, input, textarea, select{outline: none!important}*:focus{outline:none!important}.row:before, .row:after {width:0px; height:0px}input::-webkit-outer-spin-button, input::-webkit-inner-spin-button{-webkit-appearance: none; margin: 0}input[type=number]{-moz-appearance: textfield}svg{max-width: 100%;height:auto}

/* =============================================================================
   animated close icon
   ========================================================================== */
.remove, .btn-close{position: relative; display: block; overflow: hidden; text-decoration: none}
   .remove::before, .remove::after,
   .btn-close::before, .btn-close::after{content: ''; display: block; width: 12px; height: 2px; position: absolute; top: calc(50% - 1px); left: calc(50% - 6px); background-color: currentColor; transition: background-color .2s ease-in-out, transform .2s ease-in-out, width .2s ease-in-out}
   .remove::before, .btn-close::before{transform: rotate(45deg)}
   .remove::after, .btn-close::after{transform: rotate(-45deg)}
   .remove:hover::before, .remove:hover::after,
   .btn-close:hover::before, .btn-close:hover::after{transform: rotate(0)}
   
.remove{display: inline-block; width: 1.25rem; height: 1em; padding: 0; vertical-align: middle}
button.remove{border: none; background: none}

/* =============================================================================
   data-animate
   ========================================================================== */
[data-animate]{will-change: transform, opacity; transition: transform .5s cubic-bezier(0.42,0,0.58,1), opacity .5s cubic-bezier(0.42,0,0.58,1)}
[data-animate^=T_FADE]{opacity:0}
[data-animate^=T_FADE].animate{opacity:1; transform:none}
[data-animate^=T_FADE_DOWN]{transform: translateY(calc(var(--ama-gutter-x) * -1))}
[data-animate^=T_FADE_UP]{transform: translateY(var(--ama-gutter-x))}
[data-animate^=T_FADE_LEFT]{transform: translateX(var(--ama-gutter-x))}
[data-animate^=T_FADE_RIGHT]{transform: translateX(calc(var(--ama-gutter-x) * -1))}
[data-animate^=T_FADE_FLIP]{transform: rotateX(-90deg)}
[data-animate^=T_FADE_ZOOM]{transform: scale(0.4)}

/* =============================================================================
   wpml
   ========================================================================== */


/* =============================================================================
   header
   ========================================================================== */
#header > .row{height: var(--ama-header-height)}
   #header > .row > .col > * + *{margin-top: var(--ama-gutter-x)}

.h__inner{
   display: grid;
   grid-template-columns: auto 1fr;
   gap: 0 var(--ama-gutter-double-x);
   align-items: center;
   height: var(--ama-header-nheight);
}

.h-logo svg{width: 15rem}

.h-actions a{color: currentColor; text-decoration: none}
.h-actions a:hover{color: var(--ama-secondary-color)}

.h-actions ul{list-style: none; padding-left: 0}
.h-actions{
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: flex-end;
}
   .h-actions > * + *{margin-left: 2.5rem; position: relative}
   .h-actions > * + ul.c-methods.is-style-icons{margin-left: 1.875rem}
   .h-actions > * + *::before{
      content: '';
      display: block;
      width: 1px;
      height: 1.125rem;
      position: absolute;
      left: -1.25rem;
      top: 50%;
      transform: translateY(-50%);
      background-color: rgba(71, 73, 57, .2)
   }
   .h-actions > * + ul.c-methods.is-style-icons::before{left: -.625rem}

   .h-actions__tiggers{display: flex; flex-wrap: wrap; align-items: center}
   .h-actions__tiggers > li + li{margin-left: .9375rem}

.h-search--cart{
   display: grid;
   grid-template-columns: auto 1fr auto;
   align-items: center;
   gap: 0 var(--ama-gutter-x)
}
   .h-search--cart > .btn-cart{
      align-self: stretch;
      position: relative
   }
   .h-search--cart > .btn-cart:hover{
      background-color: var(--ama-body-color)!important;
      border-color: var(--ama-body-color)!important;
      transform: none
   }

.btn.btn-cart{
   --ama-btn-bg: var(--ama-secondary-color);
   --ama-btn-border-color: var(--ama-secondary-color);
   --ama-btn-border-radius: var(--ama-general-border-radius);
   --ama-btn-padding-y: calc(.625rem - var(--ama-btn-border-width));
   --ama-btn-padding-x: calc(.625rem - var(--ama-btn-border-width));
   display: grid;
   grid-template-columns: auto 1fr auto;
   width: 15rem
}
.btn.btn-cart svg + span{text-align: left}

#header{
   position: sticky;
   top: 0;
   background-color: rgba(255, 255, 255, 1);
   z-index: 1020;
   box-shadow: 0 0 1.25rem 0 rgba(0, 0, 0, 0);
   transition: box-shadow .15s linear
}
#header.scroll-header{
   box-shadow: 0 0 1.25rem 0 rgba(0, 0, 0, .1)
}

#menu-toggle{color: currentColor; padding: 0; width: 2rem; height: 2rem; border: none; background: none; position: relative}
* + #menu-toggle{margin-left: .9375rem!important}
   #menu-toggle > span{display: block; width: 100%; height: 2px; position: absolute; top: 50%; background-color: currentColor; transform: translate(0, -50%); transition: opacity 0.3s 0.3s}
      #menu-toggle::before{left: 0!important}
      #menu-toggle::before,
      #menu-toggle::after{margin: 0!important; content: ''; display: block; width: 100%; height: 2px; position: absolute; background-color: currentColor; transition: transform 0.3s, top 0.3s 0.3s, bottom 0.3s 0.3s}
      #menu-toggle::before{top: 6px}
      #menu-toggle::after{bottom: 6px}

/* =============================================================================
   content
   ========================================================================== */
.classic-editor ul > li + li{margin-top: var(--ama-margin-top-li)}
.classic-editor ol > li + li{margin-top: .375rem}

.classic-editor > * + *{margin-top: var(--ama-margin-top-base)}
.classic-editor > *:not(.ama-block-button) + .ama-block-button:not(.is-style-read-more){margin-top: 1.875rem}

.classic-editor > * + h1,
.classic-editor > * + h2,
.classic-editor > * + h3,
.classic-editor > * + h4,
.classic-editor > * + h5,
.classic-editor > * + h6{margin-top: var(--ama-margin-top-heading)}

.classic-editor ul:not([class]){padding-left: 0; list-style: none}
   .classic-editor ul:not([class]) li{position: relative; padding-left: 1.25rem}
   .classic-editor ul:not([class]) li + li{margin-top: .3125rem}
      .classic-editor ul:not([class]) li::before{
         content: '';
         display: block;
         width: .5rem;
         height: .5rem;
         border-radius: 50%;
         background-color: var(--ama-marker-color);
         position: absolute;
         top: 50%;
         left: 0;
         transform: translateY(-50%)
      }

/* =============================================================================
   footer
   ========================================================================== */
#footer{margin-top: var(--ama-footer-offset-top); padding-bottom: var(--ama-footer-offset-bottom)}
   #footer * + .site-dev{margin-top: 2.5rem}
   #footer .site-dev a{text-decoration: none; color: inherit}
   #footer .site-dev a:hover{color: var(--ama-secondary-color)}

   #footer .block-bgcolor > .block__body{
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: var(--ama-gutter-double-x) 7.5rem
   }

   .f-b__col > * + *{margin-top: 1.25rem}
   .f-b__col .col__title{font-size: 1.125rem; line-height: 1.375rem; font-weight: 600}

   #footer svg[width="199.999"]{width: 7.5rem}

/* =============================================================================
   media query
   ========================================================================== */
@media (min-width: 1200px){

}
@media (min-width: 1200px) and (max-width: 1400px){
   :root{
      --ama-html-font-size: 1.112vw
   }
}
@media (max-width: 1199px){
   .h-search--cart{gap: 0 var(--ama-gutter-x)}

   .col-logo svg,
   .h-logo svg{width: 11.25rem}
   .btn.btn-cart{width: unset}
      .btn.btn-cart svg + span{display: none!important}
}
@media (max-width: 767px){
   .col-logo svg,
   .h-logo svg{width: 7.5rem}

   .h-search--cart{gap: 0 .625rem}
   .btn.btn-cart{position: fixed; right: .625rem; bottom: .625rem; z-index: 100}

   #footer{padding-bottom: 3.75rem}

   .h__inner ul.c-methods.is-style-icons{margin: 0 -.5rem}
   .h__inner ul.c-methods.is-style-icons > li{padding: 0 .5rem}
   .h__inner ul.c-methods.is-style-icons .c-icon + *{display: none!important}
}

/* remove search x */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration{-webkit-appearance:none}

* + .row:not(.row-grid){margin-top: 1.25rem}

.iti{display: block!important}

.item-qty__btn.inc-checkbox{
   display: grid;
   grid-template-columns: repeat(3, auto);
   gap: .625rem;
   align-items: center;
   max-width: 10.125rem;
}
.item-qty__btn.inc-checkbox > .ama-block-button:last-child:nth-child(2){grid-column: 2 / 3}
.item-qty__btn.inc-checkbox .ama-block-button{margin: 0}
.item-qty__btn.inc-checkbox .ama-block-button .ama-block-button__link svg{margin: 0}
.item-qty__btn.inc-checkbox .ama-block-button .ama-block-button__link.has-bgcolor-white{
   --ama-btn-border-color: #ddd;
}


.it_box_item__header{border-bottom: 1px solid #ddd; padding-bottom: 0.625rem; margin-bottom: 0.625rem}
.it_box_item__header > div{font-weight: 700}

.it_box_item__header,
.it_box_item{
   display: grid;
   grid-template-columns: 7.5rem 9.5rem 1fr 5rem 7.5rem 0rem;
   gap: 0 .625rem;
   align-items: center
}
.it_box_item + .it_box_item{border-top: 5px solid #ddd; margin-top: 0.625rem; padding-top: 0.625rem}
.it_box_item > .col_collapse{grid-column: 1 / -1; align-self: flex-start}

td.ama_sort_button,
.table-bordered thead tr > .ama_sort_button{position: relative; padding-left: 1.25rem!important; cursor: pointer}
   td.ama_sort_button::before{
      content: '';
      display: block;
      width: 12px;
      height: 100%;
      position: absolute;
      top: 50%;
      left: 4px;
      background-color: #000;
      transform: translateY(-50%);
      mask-image: url(../media/sorting-default.svg);
      mask-position: center;
      mask-repeat: no-repeat;
      mask-size: 100% auto;
      -webkit-mask-image: url(../media/sorting-default.svg);
      -webkit-mask-position: center;
      -webkit-mask-repeat: no-repeat;
      -webkit-mask-size: 100% auto
   }
   td.ama_sort_button.asc::before{
      mask-image: url(../media/sorting-asc.svg);
      -webkit-mask-image: url(../media/sorting-asc.svg);
   }
   td.ama_sort_button.desc::before{
      mask-image: url(../media/sorting-desc.svg);
      -webkit-mask-image: url(../media/sorting-desc.svg);
   }

@media (max-width: 1199px){
   .ama-block.is-style-lg-padding{padding: 1.875rem}
   #footer .block-bgcolor > .block__body{gap: var(--ama-gutter-double-x)}
}
@media (max-width: 991px){
   #footer .block-bgcolor > .block__body{grid-template-columns: repeat(3, 1fr)}
   #footer .block-bgcolor > .block__body > .f-b__col.text-center{grid-column: 1 / -1}
}
@media (max-width: 839px){
   .h__inner{gap: 0 0.625rem}

   .h-actions > * + *{margin-left: 0.9375rem}
   .h-actions > * + *:not(#menu-toggle)::before{display: none;}

   #footer .block-bgcolor > .block__body{grid-template-columns: 1fr; text-align: center}
}

@media (max-width: 567px) {
   .h__inner ul.c-methods.is-style-icons{margin: 0 -.3125rem}
   .h__inner ul.c-methods.is-style-icons > li{padding: .3125rem}

   .col-logo svg, .h-logo svg {width: 6.25rem;}
}

@media (max-width: 1199px){
   #address h2{font-size: 1.125rem; line-height: 1.5rem}
}


@media (max-width: 767px){
   .order_view > .it_box_item__header{display: none!important}
   .order_view > .block__body > .it_box_item{
      grid-template-columns: 1fr
   }
   .order_view > .block__body > .it_box_item > div[data-label]{
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 0.625rem;
      align-items: center
   }
      .order_view > .block__body > .it_box_item > div[data-label]::before{
         content: attr(data-label);
         display: block;
         font-weight: 700
      }

   .it_box_item + .it_box_item{margin-top: 0.9375rem; padding-top: 0.9375rem; border-top-width: 2px}
}

.statistic_empty{
   min-height: 20.625rem;
   display: flex;
   flex-wrap: wrap;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   text-align: center
}
   .statistic_empty > p{
      text-transform: uppercase;
      font-weight: 600
   }
   .statistic_empty > * + *{margin-top: 1.25rem}

   .t-btns > * + *{margin-left: .5rem}

@media (min-width: 1200px){
   .h-search--cart{grid-template-columns: 1fr auto}
      .h-search--cart > .ama_qr_code_button{display: none}
}
@media (max-width: 1199.9px){
   .h-search--cart > .ama_qr_code_button{
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      padding: 0;
      width: 3.125rem;
      height: 3.125rem;
      color: var(--ama-primary-color);
      border: 2px solid currentColor;
      background-color: #fff;
      border-radius: var(--ama-general-border-radius)
   }
   .h-search--cart > .ama_qr_code_button:hover{color: var(--ama-secondary-color)}
}

#qr_modal .modal-header > .btn + *{margin-top: unset!important}
#qr_modal video{width: 100%!important; height: 100%; object-fit: cover; display: block}

.item-qty__btn.inc-checkbox.grid2{
   grid-template-columns: 1fr auto!important;
   gap: 5px!important
}

.ama-block-button__link.only-icon{
   padding-left: 5px!important;
   padding-right: 5px!important;
   min-width: 2.5rem!important
}

.ama-table-product-actions{
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: flex-end
}
   .ama-table-product-actions > .ama-block-button + *{margin-top: 0!important}
@media (min-width: 992px){
   .show_mobile_detail{display: none!important}
}
@media (max-width: 991px){
   .ama-one-line-txt{
      display: block;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
   }
   .mobile_td_hidden {display: none!important}
   .ama-table-product-actions > * + *{margin-left: .5rem}
   .h__inner > .h-actions > .c-methods a > span + span{display: none}
}
@media (max-width: 767px){
   .h__inner > .h-actions > .c-methods{
      display: none!important;
   }
   .h__inner > .h-actions > .c-methods + *{margin-left: 0!important}
}
@media (max-width: 479px){
   table.has-data-labels .ama-xs-break[data-label]{grid-template-columns: 1fr}
   table.has-data-labels .ama-xs-break[data-label]::before{display: none}
}

.modal-body.search_autocomplete .form-floating + .search_autocomplete_block > ul.list-unstyled{padding-top: 0.625rem}
.modal-body.search_autocomplete .form-floating + .search_autocomplete_block > ul.list-unstyled > li:hover{cursor: pointer;}

/* ama language switcher */
.ama-ls{position: relative}
   .ama-ls button,
   .ama-ls a{
      display: flex;
      align-items: center;
      border: none;
      background: none;
      color: var(--ama-body-color);
      font-size: .875rem;
      line-height: 1.125rem;
      text-transform: uppercase
   }
   .ama-ls button:hover,
   .ama-ls a:hover{color: var(--ama-secondary-color)}
      .ama-ls button > span,
      .ama-ls a > span{display: block}
   .ama-ls .ama-ls-toggle{padding: .25rem 0}
   .ama-ls .ama-ls-toggle::after{
      content: '';
      display: block;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: .375rem .25rem 0 .25rem;
      border-color: currentColor transparent transparent transparent;
      transform: rotate(0deg);
      margin-left: .375rem
   }

   .ama-ls-list{
      position: absolute;
      top: 100%;
      right: 0;
      width: max-content;
      max-width: 11.25rem;
      min-width: 100%;
      z-index: 10;
      padding: 0;
      border: 1px solid rgba(71, 73, 57, .2);
      background-color: #fff;
      display: none
   }
   .ama-ls .ama-ls-list li + li{border-top: 1px solid rgba(71, 73, 57, .2)}
   .ama-ls .ama-ls-list a{padding: 4px 9px}