/** Shopify CDN: Minification failed

Line 544:93 The "+" operator only works if there is whitespace on both sides

**/

.swatch__button--circle .swatch__link--white {
  border: 1px solid black;
}
 .header-localization-group {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0;
  margin-top: -12px;
}

.header-localization-mb-group {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
}
.header-localization-group .popout-header__holder{
  display: flex;
  align-items: center;
  border-left: 1px solid #1a1a1a;
  padding-left: 12px;
}
.header-localization-mb-group .popout-header__holder{
  display: flex;
  align-items: center;
  border-left: 1px solid #FFFFFF;
  padding-left: 12px;
}
.header-localization-mb-group .popout-header__holder{
  margin-left: 12px;
}

/* .header__desktop__language .localization-separator {
  display: inline-block;
  line-height: 1;
  padding-top:2px;
}
.header__desktop__language .localization-separator {
  display: inline-block;
  line-height: 1;
  padding-top:5px;
}
.header__desktop__language .popout__toggle{
  margin-left: 10px;
  margin-right: 5px;
} */

/* 공통 메뉴 제목 */
.sliderow__title {
  display: block;
  font-size: var(--FONT-HEADING-SMALL-MOBILE);
  font-weight: 500;
}

/* 상위 카테고리 */
.shop-inline-heading .sliderow__title {
  min-height: auto !important;
}

/* 하위 링크 목록 */
.shop-inline-links {
  display: block;
}

.shop-inline-links .sliderow__title {
  display: block;
}

/* 하위 메뉴 제목 */
.shop-inline-submenu .sliderow__title {
  font-size: var(--FONT-HEADING-X-SMALL-MOBILE);
  font-weight: 400;
}

/* BETA 삭제 시 아래 코드로 다시 변경 -10/22  */
/* 기본적으로 숨김 */
.mobile-logo-beta {
  display: none;
}

.header__mobile .header__logo {
  flex-direction: column;

}

/* 모바일 헤더의 로고 아래에서만 표시 */
.header__mobile .header__logo .mobile-logo-beta {
  display: block;
  color: #e1192c;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  text-align: center;
  margin-top: 4px;
}

/* PC 헤더에서는 확실하게 숨김 */
.header__desktop .mobile-logo-beta {
  display: none !important;
}

.header__desktop__brand-meta::after {
  content: "BETA";
  display: block;
  color: #ed1b2f;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  margin-top: -3px;
  padding-left: 15px;
}

body .header__menu a.navlink--toplevel[data-nav="shop"] {
  position: relative;
}

body .header__menu a.navlink--toplevel[data-nav="shop"]::before {
    content: "BETA";
    position: absolute;
    top: 22px;
    right: -18px;
    display: block;
    width: auto;
    height: auto;
    background: none;
    color: #e1192c;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    opacity: 1;
}

/* 사이즈 가이드 페이지 CSS */
.size-guide {
  width: 100%;
  margin: 0 auto;
  text-align: center;
}

.size-guide__image {
  margin: 0 auto 24px;
  text-align: center;
}

.size-guide__image img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  float: none;
}

.size-guide__table {
  width: 100% !important;
  margin: 0 auto;
  border-collapse: collapse;
  table-layout: fixed !important;
}

.size-guide__table th,
.size-guide__table td {
  width: auto !important;
  padding: 8px 6px;
  text-align: center;
  vertical-align: middle;
  box-sizing: border-box;
  white-space: nowrap;
}

.size-guide__table th:first-child,
.size-guide__table td:first-child {
  color: #e1192c;
  font-weight: 500;
}

.size-guide__table thead th {
  font-weight: 500;
}

.size-guide__description {
  margin: 24px auto 0;
  text-align: center;
}

/* 표 형식 아코디언 CSS */

.accordion__content table.product-information-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

.accordion__content table.product-information-table tr > th,
.accordion__content table.product-information-table tr > td {
  padding: 12px 14px;
  line-height: 1.5;
  vertical-align: middle;
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
  overflow-wrap: break-word;
  word-break: normal;
  white-space: normal;
}

.accordion__content table.product-information-table tr > th {
  width: 28%;
  font-weight: 500;
  text-align: left;
}

.accordion__content table.product-information-table tr > td {
  width: 72%;
  text-align: left;
}

/* Mobile */
@media screen and (max-width: 749px) {
  .accordion__content table.product-information-table tr > th {
    width: 35%;
  }

  .accordion__content table.product-information-table tr > td {
    width: 65%;
  }

  .accordion__content table.product-information-table tr > th,
  .accordion__content table.product-information-table tr > td {
    padding: 10px 8px;
    font-size: 13px;
  }
}


.radio__fieldset--size-guide{
  display:grid !important;
  grid-template-columns:1fr auto;
  grid-template-areas:
    "guide guide"
    "legend buttons";
  row-gap:12px;
  align-items:center;
}

.radio__fieldset--size-guide popup-component{
  grid-area:guide;
  justify-self:end;
  padding-bottom: 10px;
}

.radio__fieldset--size-guide .radio__legend{
  grid-area:legend;
  margin:0;
}

.radio__fieldset--size-guide .radio__buttons{
  grid-area:buttons;
}

.radio__fieldset--size-guide .radio__legend__link__label{
  font-size: var(--font-body-small);
}
/* WITPLUS 아코디언 버튼 */

.accordion__page-link {
  width: 100%;
  padding: 0;
  font-weight: 400;

  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 4x;

  transition: color .25s ease;
}

.accordion__page-link-text {
  padding-top: 4px;
  font-weight: 400;
}

.accordion__page-link svg {
  transition: transform .25s ease;
}

/* Hover */
.accordion__page-link:hover {
  color: var(--link-a70);
}
.accordion__page-link:hover svg {
  transform: translateX(2px);
}

/* Keyboard accessibility */
.accordion__page-link:focus-visible {
  outline: none;
}

.accordion__page-link:focus-visible svg {
  transform: translateX(2px);
}

.product-certifications {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px 24px;
  margin: 20px 0;
}

.certification-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-light);
}
.certification-item img {
  width: var(--cert-icon-size);
  height: var(--cert-icon-size);
  object-fit: contain;
}

/* 정기구독 버튼 시작 WITPLUS */
.subscription-options {
  margin-top: 20px;
  margin-bottom: 30px;
  border: 1px solid #ccc;
}

.subscription-options label {
  display: block;
}

.subscription-option {
  padding: 15px 10px;
}
.subscription-option:hover{
  background: #f5f5f5ff;
}

#subscription-frequency {
  padding: 0 20px 20px 35px;
}

.subscription-frequency-option {
  display: flex !important;
  align-items: center;
  gap: 12px;
  padding: 12px 12px 12px 0;
}


.subscription-discount {
  margin-left: auto;
  font-weight: 600;
}

/* 정기구독 버튼 끝 WITPLUS */

/* 스토리 게시글  WITPLUS */

@media (min-width: 990px) {
.template-article .main-content .wrapper{
        max-width: 1400px;
        margin: auto;
        min-width: unset;
  }

}
.product__submit__item button[data-add-to-cart] {
  padding: 0 22.4px !important;

  height: 53px;
  min-height: 53px;

  display: flex;
  align-items: center;
  justify-content: center;
}
/* bottom header drawer */

.hb-link--parent{
  padding:12px 0 10px;
  margin:0;
  cursor:pointer;
  font-weight:600;
}

.hb-drawer{
  position:fixed;
  top:calc(var(--HEADER-HEIGHT) + var(--hb-bottom-menu-height) + var(--announcement-height) + var(--tos-ship-bar-height, 0px));
  left:0;
  right:0;
  bottom:0;
  z-index:300;
  pointer-events:none;
}

@media (max-width:749px){
  .hb-drawer{
    top:calc(var(--HEADER-HEIGHT-MOBILE) + var(--hb-bottom-menu-height) + var(--announcement-height) + var(--tos-ship-bar-height, 0px));
  }
}

@media (min-width:750px) and (max-width:1199px){
  .hb-drawer{
    top:calc(var(--HEADER-HEIGHT-MEDIUM) + var(--hb-bottom-menu-height) + var(--announcement-height) + var(--tos-ship-bar-height, 0px));
  }
}

body:has(.js__header__stuck) .hb-drawer{
  top:calc(var(--HEADER-HEIGHT) + var(--hb-bottom-menu-height));
}

@media (max-width:749px){
  body:has(.js__header__stuck) .hb-drawer{
    top:calc(var(--HEADER-HEIGHT-MOBILE) + var(--hb-bottom-menu-height));
  }
}

@media (min-width:750px) and (max-width:1199px){
  body:has(.js__header__stuck) .hb-drawer{
    top:calc(var(--HEADER-HEIGHT-MEDIUM) + var(--hb-bottom-menu-height));
  }
}

.hb-drawer.is-active{
  pointer-events:all;
}

.hb-drawer__panel{
  position:absolute;
  top:0;
  left:0;
  width:280px;
  max-width:88vw;
  height:100%;
  background:#fff;
  overflow-y:auto;
  z-index:2;
  transform:translateX(-100%);
  transition:transform .35s cubic-bezier(.4,0,.2,1);
}

.hb-drawer.is-active .hb-drawer__panel{
  transform:translateX(0);
}

.hb-drawer__backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.35);
  z-index:1;
  opacity:0;
  transition:opacity .35s ease;
  pointer-events:none;
}

.hb-drawer.is-active .hb-drawer__backdrop{
  opacity:1;
  pointer-events:all;
}

.hb-drawer__close{
  cursor:pointer;
  padding:12px 16px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  width:100%;
  margin-top: 20px;
}

.hb-drawer__close svg{
  width:12px;
  height:12px;
}

.hb-drawer__close:hover{
  opacity:.6;
}

.hb-drawer__body{
  padding:4px 20px 40px;
}

.hb-drawer__section{
  margin-bottom:28px;
}

.hb-drawer__section-title{
  display:block;
  font-size:12px;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:inherit;
  text-decoration:none;
  margin-bottom:10px;
}

.hb-drawer__section-title:hover{
  opacity:.7;
}

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

.hb-drawer__section-link{
  display:block;
  font-size:12px;
  color:inherit;
  text-decoration:none;
  padding:7px 0;
  opacity:.75;
  transition:opacity .2s;
}

.hb-drawer__section-link:hover{
  opacity:1;
}



/* ==========================
   Desktop Mega Menu
   1200px 이상
========================== */

@media (min-width:1200px){

  .hb-drawer{
    top:calc(var(--HEADER-HEIGHT) + var(--hb-bottom-menu-height) + var(--announcement-height)+var(--tos-ship-bar-height, 0px));
    left:0;
    right:0;
    bottom:auto;
    height:auto;
    z-index:9999;
  }

  body:has(.js__header__stuck) .hb-drawer{
    top:calc(var(--HEADER-HEIGHT) + var(--hb-bottom-menu-height));
  }

  /* backdrop 제거 */
  .hb-drawer__backdrop{
    display:none;
  }

  /* panel */
  .hb-drawer__panel{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:auto;
    min-height:150px;
    max-width:none;
    background:#fff;
    overflow:visible;
    overflow-y:visible;
    z-index:10000;

    /* slide 애니메이션 제거 */
    transform:none;

    opacity:0;
    visibility:hidden;

    transition:
      opacity .15s ease,
      visibility .15s ease;
  }

  .hb-drawer.is-active .hb-drawer__panel{
    transform:none;
    opacity:1;
    visibility:visible;
  }

  /* close button */
  .hb-drawer__close{
    position:absolute;
    top:32px;
    right:64px;
    width:auto;
    padding:0;
    z-index:10;
    margin-top: 0;  
  }

  /* 5 columns */
  .hb-drawer__body{
    width:100%;
    margin:0 auto;
    padding:30px 60px;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:0;
  }

  .hb-drawer__section {
    border-left: none;
    margin-bottom: 0;
    padding: 0 48px;
  }

  .hb-drawer__section:nth-child(n + 3) {
    border-left: 1px solid #e5e5e5;
  }

  .hb-drawer__section:first-child{
    display:none;
  }

  .hb-drawer__section-title{
    display:block;
    font-size:16px;
    font-weight:800;
    letter-spacing:.12em;
    text-transform:uppercase;
    margin-bottom:18px;
    color:inherit;
    text-decoration:none;
  }

  .hb-drawer__section-link{
    display:block;
    font-size:16px;
    padding:8px 0;
    opacity:1;
    color:inherit;
    text-decoration:none;
  }

}

.hb-drawer__close{
  transition:opacity .15s ease, transform .15s ease;
}

@media (hover:hover) and (pointer:fine){

  .hb-drawer__close:hover{
    opacity:.6;
    transform:scale(1.15);
  }

}
/* WITPLUS ETC */

.heading-accent {
    font-weight: 800;
    margin: 0 0 8px 0;
    position: relative;
    /* display: inline-block; */
    line-height: 1.2;
}

.heading-accent-large{
    font-size: var(--font-heading-large) !important;
}
.heading-accent-medium{
    font-size: var(--font-heading-medium) !important;
}
.heading-accent::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100px;
    height: 4px;
    background: var(--timeOut, #E31C2B);
    border-radius: 999px;
}
.tab__title.heading-accent::after{
    margin-left: var(--outer);
}

.product-item--beauty {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
}

.product-item--beauty .product-item__image {
  width: 100px;
  flex-shrink: 0;
}

.product-item--beauty .product-information {
  flex: 1;
}

.product-item--beauty .product-item__title-row {
  display: block;
}

.product-item--beauty wishlist-button-collection {
  display: none;
}

.product-item--beauty .product-item__bg {
  margin-bottom: 0;
}
/* WITPLUS BEAUTY START */

.beauty-wit-product .product-form__input .radio__fieldset {
    display: block !important;
}

.beauty-wit-product .product-form__input .radio__legend {
    display: block;
    margin-bottom: 16px;
}

.beauty-wit-product .radio__legend__values {
    flex-basis: auto;
}

.beauty-wit-product .radio__fieldset .radio__buttons {
    display: flex !important;
    flex-direction: column !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;

    margin: var(--inner) 0 0 !important;
    gap: 12px;
}

.beauty-wit-product .radio__button {
    width: 100% !important;
    max-width: 100% !important;
}

.beauty-wit-product .radio__button label {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    width: 100% !important;
    min-width: 100% !important;

    min-height: 96px !important;
    height: auto !important;

    padding: 16px !important;

    border: 1px solid #e5e5e5;
    border-radius: 0 !important;

    background: #fff;

    box-sizing: border-box !important;
    white-space: normal !important;
}

.beauty-wit-product .radio__button label > span:last-child {
    display: none;
}

.beauty-wit-product .option-image {
    width: 64px;
    height: 64px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-right: 16px;

    border-radius: 0;
}

.beauty-wit-product .option-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.beauty-wit-product .option-content {
    flex: 1;
    min-width: 0;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;

    white-space: normal !important;
}

.beauty-wit-product .option-title {
    width: 100%;

    font-size: var(--font-body-large);
    font-weight: 500;
    line-height: 1.3;

    text-align: left;
    text-transform: none !important;
}

.beauty-wit-product .option-description {
    width: 100%;

    margin-top: 4px;

    font-size: var(--font-body-medium);
    font-weight: 400;
    line-height: 1.4;

    color: #666;
    text-align: left;

    white-space: normal !important;
}

.beauty-wit-product .option-price {
    flex-shrink: 0;

    margin-left: 16px;

    font-size: var(--font-body-large);
    font-weight: 500;

    text-align: right;
    white-space: nowrap;
}

.beauty-wit-product .radio__button input:checked + label {
    background: #fff !important;
    color: #111 !important;
    border: 2px solid #e30613 !important;
}

/* WITPLUS BEAUTY END */

.pdp-breadcrumb {
    /* max-width: 1102px; */
    margin: 0 auto;
}
.collection__nav--filter.collection__nav--sort {
    justify-content: flex-end;
}
.popout--group .popout__toggle {
    border-right: none;
    /* border-left: 1px solid var(--border); */
}
.popout__toggle{
    border: none !important;
    font-size: 12px !important;
    font-weight: 500 !important;
}
.product__title__wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 0;
}
body #judgeme_product_reviews {
    padding:0 var(--outer);
    max-width: none !important;
    width: 100% !important;
}
.product-item__title-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}

.product-item__title-row wishlist-button-collection {
  flex-shrink: 0;
}

.product-item__title-row .wk-button {
  margin: 0 !important;
}

.jm-review-widget-minimal-header__title {
    font-size: var(--font-heading-medium) !important;
    font-weight: 800 !important;
    margin: 0 0 8px 30px;
    position: relative;
    display: inline-block;
    line-height: 1.1;

    
}
.jm-review-widget-minimal-header__title:after {
    /* content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100px;
    height: 4px;
    background: var(--timeOut, #E31C2B);
    border-radius: 999px; */

        content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100px;
    height: 4px;
    background: var(--timeOut, #E31C2B);
    border-radius: 999px;
}


.tabs-wrapper {
    /* max-width:1202px; */
    margin:0 auto;
}

@media only screen and (min-width: 750px) {
    body .navlink--toplevel {
        padding: 20px 15px 8px;
    }
}
body .navlink--toplevel {
    height:auto;
    display: inline-flex;
    position: relative;
    align-items: center;
    justify-content: center;
}
body .navlink--toplevel::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background-color: #E1192C;
    transition: width 0.3s ease;
}
body .navlink--toplevel:hover::after {
    width: 100%;
}

body .navlink--toplevel[data-nav="shop"]::after {
    width: 100%;
}

.ht-tms-currency-note.ht-tms-currency-node--cart-page {
    text-align:left !important;
}

@media(max-width:989px){
    body #judgeme_product_reviews {
        padding:0 30px;
    }
}
@media(max-width:749px){
    body #judgeme_product_reviews {
        padding:0 16px;
    }
    .cart .cart__item__content__left {
        flex-flow: row wrap;
    }
    .cart-holder .cart__quantity-wrapper, .cart-holder .cart__quantity {
        width:110px;
    }
    .cart__quantity .cart__quantity-field {
        height:33px;
    }
    .cart__quantity button {
        width:33px;
        height:33px;
    }
    body .drawer--header .drawer__inner {
        max-width:300px;
    }
    body .collection__sidebar__slide-out {
        max-width:300px;
    }
}


/* ===== Currency selector: same look as the Weglot language switcher (desktop header) ===== */
.header-localization-group .popout-header__holder { padding-left: 0; }
.header-localization-group .popout { position: relative; }
.header-localization-group .popout__toggle {
  position: relative;
  z-index: 1001;
  height: 40px;
  padding: 0 15px !important;
  margin: 0 !important;
  font-family: var(--FONT-STACK-BODY);
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 40px;
  color: #1a1a1a;
}
.header-localization-group .popout-list {
  top: 0 !important;
  bottom: auto !important;
  left: 0 !important;
  right: auto !important;
  width: max-content;
  min-width: 100%;
  max-height: none;
  padding: 40px 0 0 !important;
  border: 0 !important;
  border-radius: 5px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transform-origin: 100% 0%;
  transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out, visibility 0.2s;
}
.header-localization-group .popout-list:not(.popout-list--visible) { transform: skew(10deg); }
.header-localization-group .popout-list__item { width: auto; }
.header-localization-group .popout-list__item.is-active { display: none; }
.header-localization-group .popout-list__option {
  display: block;
  width: auto;
  min-width: 0 !important;
  height: 40px;
  padding: 0 15px !important;
  font-family: var(--FONT-STACK-BODY);
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 40px;
  color: #1a1a1a;
  white-space: nowrap;
}
.header-localization-group .popout-list__option span { display: inline; border: 0 !important; }
.header-localization-group .popout-list__option:hover,
.header-localization-group .popout__toggle[aria-expanded="true"] { color: #E1192C; }


/* ===== Currency selector: same look as the Weglot language switcher (mobile menu, opens upward) ===== */
.header-localization-mb-group .popout-header__holder { margin-left: 0; padding-left: 0; }
.header-localization-mb-group .popout { position: relative; }
.header-localization-mb-group .popout__toggle {
  position: relative;
  z-index: 1001;
  height: 40px;
  padding: 0 15px !important;
  margin: 0 !important;
  font-family: var(--FONT-STACK-BODY);
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 40px;
}
.header-localization-mb-group .popout__toggle[aria-expanded="true"] { color: #E1192C; }
.header-localization-mb-group .popout-list {
  top: auto !important;
  bottom: 0 !important;
  left: 0 !important;
  right: auto !important;
  width: max-content;
  min-width: 100%;
  max-height: none;
  padding: 0 0 40px !important;
  border: 0 !important;
  border-radius: 5px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transform-origin: 0% 100%;
  transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out, visibility 0.2s;
}
.header-localization-mb-group .popout-list:not(.popout-list--visible) { transform: skew(-10deg); }
.header-localization-mb-group .popout-list__item { width: auto; }
.header-localization-mb-group .popout-list__item.is-active { display: none; }
.header-localization-mb-group .popout-list__option {
  display: block;
  width: auto;
  min-width: 0 !important;
  height: 40px;
  padding: 0 15px !important;
  font-family: var(--FONT-STACK-BODY);
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 40px;
  color: #1a1a1a;
  white-space: nowrap;
}
.header-localization-mb-group .popout-list__option span { display: inline; border: 0 !important; }
.header-localization-mb-group .popout-list__option:hover { color: #E1192C; }


/* ===== Divider between language and currency: one hairline, centred on the text, 15px clear on each side ===== */
.header-localization-group .popout-header__holder,
.header-localization-mb-group .popout-header__holder {
  position: relative;
  border-left: 0 !important;
}
.header-localization-group .popout-header__holder::before,
.header-localization-mb-group .popout-header__holder::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 12px;
  transform: translateY(-50%);
  background: #1a1a1a;
  pointer-events: none;
}
.header-localization-mb-group .popout-header__holder::before { background: #ffffff; }
.header-localization-group .popout__toggle,
.header-localization-mb-group .popout__toggle { padding-left: 16px !important; }
.header-localization-mb-group .popout-header { margin-left: 0 !important; margin-right: 0 !important; }
.header-localization-mb-group .mobile-menu__block-localization { flex-shrink: 0; }


/* ===== Beauty product page: "Meet the {range}" section, matched to Figma (centred, no underline, Pretendard SemiBold 40/1920) ===== */
[id$="section_collection_zr7TAJ"] .grid__heading-holder { justify-content: center; text-align: center; }
[id$="section_collection_zr7TAJ"] .grid__heading-text { width: 100%; text-align: center; }
[id$="section_collection_zr7TAJ"] .grid__heading {
  font-family: "Pretendard Variable", Pretendard, -apple-system, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  font-weight: 600;
  font-size: max(24px, calc(40 * min(100vw, 1920px) / 1920));
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: #000;
  text-transform: none;
  text-align: center;
}
[id$="section_collection_zr7TAJ"] .grid__heading::after { display: none; }
@media (max-width: 1023px) {
  [id$="section_collection_zr7TAJ"] .grid__heading { font-size: max(26px, calc(50 * min(100vw, 720px) / 720)); }
}


/* ===== One currency only: plain label, same type as the switcher, no hover or pointer ===== */
.tos-currency-static { display: inline-flex; align-items: center; cursor: default; }
.tos-currency-static:hover { color: inherit !important; }


/* ===== KRW checkout note (cart and drawer) ===== */
.tos-krw-note { margin: 0 0 10px; font-size: 12px; line-height: 1.5; color: #666; text-align: left; }

/* ===== Header matched to timeout.com (desktop) — [WOO] TEST, 2026-11-05 =====
   Source: timeout.com measured at 1440 and 1920 wide (computed styles).
   Bar: full width with the theme margins (as on timeout.com/time-out-market), 80px tall, Time Out wordmark.
   Nav: Franklin Gothic regular width, 16px / 24px, weight 500, Time Out Black #1A1A1A, 24px between items.
     Line: 2px red, full word width, 4px under the text. It fades in (opacity 0 -> 1, 0.3s ease-out)
     on hover and stays on for the current section (SHOP). One line only.
   Sub-nav (red bar): 12px / 18px, weight 500, 20px between items, padding 5px 2px 6px.
     Line: 2px white, 4px from the bottom, same fade on hover, on for the current page.
   Language/currency and right-side icons stay as they are. */
@media only screen and (min-width: 990px) {
  /* Full width like timeout.com/time-out-market: logo and icons sit at the theme's 64px side margins (no 1102px column) */

  /* Main nav */
  body .header__desktop .header__menu { display: flex; align-items: center; gap: 24px; }
  body .header__desktop .header__menu .navlink--toplevel,
  body .header__desktop .header__menu .navlink--toplevel .navtext {
    font-family: FranklinGothicLTPro, Arial, Helvetica, sans-serif !important;
    font-size: 16px !important;
    line-height: 24px !important;
    font-weight: 500 !important;
    letter-spacing: normal !important;
    text-transform: uppercase;
    color: #1A1A1A !important; /* Time Out Black, same as the language/currency switch and icons */
  }
  body .header__desktop .header__menu .navlink--toplevel { padding: 0 0 4px !important; }
  body .header__desktop .header__menu .navlink--toplevel::after {
    left: 0;
    right: 0;
    bottom: 0;
    width: 100% !important;
    height: 2px;
    background-color: #E1192C;
    opacity: 0;
    transition: opacity 0.3s ease-out !important;
  }
  body .header__desktop .header__menu .navlink--toplevel:hover::after,
  body .header__desktop .header__menu .navlink--toplevel[data-nav="shop"]::after { opacity: 1; }
  /* The theme's own "highlight item" line made a second line under SHOP */
  body .header__desktop .navlink--highlight .navtext::before { display: none !important; }
  body .header__desktop .header__menu a.navlink--toplevel[data-nav="shop"]::before {
    top: 4px;
    right: auto;
    left: calc(100% + 6px);
  }

  /* Red sub-nav */
  body .header-bottom-menu .header-bottom-menu-inner { gap: 0 20px; }
  body .header-bottom-menu a.hb-link,
  body .header-bottom-menu a.hb-link--parent {
    font-size: 12px;
    line-height: 18px;
    font-weight: 500 !important;
    padding: 5px 2px 6px !important;
  }
  body .header-bottom-menu a.hb-link::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 4px;
    width: auto;
    height: 2px;
    background-color: #fff;
    opacity: 0;
    transition: opacity 0.3s ease-out;
  }
  body .header-bottom-menu a.hb-link:hover::after,
  body .header-bottom-menu a.hb-link.selected-link::after { opacity: 1; }
}


/* ===== Header: centre TIME OUT MARKETS on the bar, current-page lines fade in on load — [WOO] TEST ===== */
@media only screen and (min-width: 990px) {
  /* Three equal-weight columns: left (logo, language/currency) and right (icons) balance, so the nav sits on the bar's centre */
  body .header__desktop .header__desktop__upper { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
  body .header__desktop .header__desktop__bar__l { justify-self: start; }
  body .header__desktop .header__desktop__bar__c { justify-self: center; }
  body .header__desktop .header__desktop__bar__r { justify-self: end; }
  /* Equal space left and right of the middle item (TIME OUT MARKETS) */
  body .header__desktop .header__menu { display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; }
  body .header__desktop .header__menu > :nth-child(1) { justify-self: end; }
  body .header__desktop .header__menu > :nth-child(3) { justify-self: start; }
  body .header__desktop .header__menu > .hover__bar,
  body .header__desktop .header__menu > .hover__bg { position: absolute; }

  /* The current page's line appears in place when the page opens */
  @keyframes tos-line-in { from { opacity: 0; } to { opacity: 1; } }
  body .header__desktop .header__menu a.navlink--toplevel[data-nav="shop"]::after,
  body .header-bottom-menu a.hb-link.selected-link::after { animation: tos-line-in 0.3s ease-out both; }
}

/* ===== SHOP dropdown in Time Out type and colour — [WOO] TEST, 2026-11-05 =====
   Colours from Time Out Brand Colors: Secondary #1A1A1A, Grey600 #757575, Grey200 #E8E8E8, Primary #E1192C.
   Type: ITC Franklin Gothic (FranklinGothicLTPro), as the brand guidelines specify.
   Group titles 16/24, 500, uppercase, #1A1A1A. Links 16/24, 400, Time Out Grey #757575, #1A1A1A on hover.
   One hover line: 2px #E1192C, full word width, fades in (opacity, 0.3s ease-out), same as the header.
   Panel fades in over 0.3s, no sliding; 1px Grey200 line on top. */
@media only screen and (min-width: 990px) {
  /* Header nav: keep one line only (theme also draws a growing line under the word) */
  body .header__desktop .navlink--toplevel span:first-of-type::after { display: none !important; }

  body .header__desktop .header__dropdown {
    border-top: 1px solid #E8E8E8;
    transition: opacity 0.3s ease-out, visibility 0.3s ease-out !important;
  }
  body .header__desktop .header__grandparent__links { column-gap: 24px; }

  body .header__desktop .header__dropdown .navlink--child,
  body .header__desktop .header__dropdown .navlink--grandchild {
    transform: none !important;
    transition: opacity 0.3s ease-out, color 0.3s ease-out !important;
  }
  body .header__desktop .header__dropdown .navlink--child .navtext,
  body .header__desktop .header__dropdown .navlink--grandchild .navtext {
    font-family: FranklinGothicLTPro, Arial, Helvetica, sans-serif !important;
    font-size: 16px !important;
    line-height: 24px !important;
    letter-spacing: normal !important;
  }
  body .header__desktop .header__dropdown .navlink--child { --link: #1A1A1A; --link-hover: #1A1A1A; color: #1A1A1A; margin-bottom: 8px; }
  body .header__desktop .header__dropdown .navlink--child .navtext { font-weight: 500 !important; text-transform: uppercase; color: #1A1A1A; }
  body .header__desktop .header__dropdown .navlink--grandchild { --link: #757575; --link-hover: #1A1A1A; color: #757575; margin-bottom: 8px; }
  body .header__desktop .header__dropdown .navlink--grandchild .navtext { font-weight: 400 !important; text-transform: none; color: inherit; }
  body .header__desktop .header__dropdown .navlink--grandchild:hover { color: #1A1A1A; }

  body .header__desktop .header__dropdown .navlink--child span:first-of-type::after,
  body .header__desktop .header__dropdown .navlink--grandchild span:first-of-type::after {
    bottom: -2px;
    left: 0;
    width: 100% !important;
    height: 2px;
    background: #E1192C !important;
    opacity: 0;
    transition: opacity 0.3s ease-out !important;
  }
  body .header__desktop .header__dropdown .navlink--child:hover span:first-of-type::after,
  body .header__desktop .header__dropdown .navlink--grandchild:hover span:first-of-type::after { opacity: 1; }
}


/* ===== Free shipping bar in Time Out type — [WOO] TEST, 2026-11-05 =====
   Time Out Black #1A1A1A, white text (set in the section). ITC Franklin Gothic 12/18, weight 500,
   the same scale as the red sub-nav. 36px tall. */
.tos-ship-bar {
  text-align: center;
  padding: 9px 16px;
  font-family: FranklinGothicLTPro, Arial, Helvetica, sans-serif;
  font-size: 12px;
  line-height: 18px;
  font-weight: 500;
  letter-spacing: normal;
}


/* ===== Header stays still on page load (no white fade over the logo) — 2026-11-05 ===== */
.theme__header[data-aos],
.theme__header[data-aos].aos-animate {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* ===== Whole-site type and colour — [WOO] TEST, 2026-11-05 =====
   Type, from timeout.com (measured): Franklin Gothic in regular width everywhere.
     Body 16/24, 400. Headings 800 (heavy). Buttons 16px, 400, sentence case, pill.
     Tags and badges 12/18, 500, uppercase.
   Colour, from Time Out Brand Colors: Black #1A1A1A, Red #E1192C, White #FFFFFF,
     Grey600 #757575 (secondary text), Grey300 #B8B8B8, Grey200 #E8E8E8, Grey100 #FAFAFA.
   Korean and Japanese fall back to Pretendard, then the system font. */
html:root { /* html:root outranks the theme's own :root variables, which load later */
  --FONT-STACK-HEADING: 'FranklinGothicLTPro', 'Pretendard', Arial, Helvetica, sans-serif;
  --FONT-STACK-SUBHEADING: 'FranklinGothicLTPro', 'Pretendard', Arial, Helvetica, sans-serif;
  --FONT-STACK-NAV: 'FranklinGothicLTPro', 'Pretendard', Arial, Helvetica, sans-serif;
  --BTN-FONT-STACK: 'FranklinGothicLTPro', 'Pretendard', Arial, Helvetica, sans-serif;
  --FONT-WEIGHT-HEADING: 800;
  --BTN-FONT-SIZE: 16px;
  --BTN-FONT-WEIGHT: 400;
  --BTN-LETTER-SPACING: 0;
  --COLOR-SUBMENU-TEXT-LIGHT: #757575;
  --COLOR-TEXT-BTN-BG-BLACK: #1A1A1A;
  --COLOR-TEXT-BTN-BORDER-BLACK: #1A1A1A;
  --COLOR-TEXT-BTN-WHITE: #1A1A1A;
}
:root,
.color-scheme-7d26fc74-b300-4205-9ee8-6f131d38a7bf,
.color-scheme-1,
.color-scheme-226460f0-17f7-4e1f-b525-aa79d7be35c5,
.color-scheme-db77aad5-ef93-4dff-9cb5-4a7c62169bcb {
  --COLOR-TEXT-LIGHT: #757575;
  --COLOR-TEXT-DARK: #1A1A1A;
}
.color-scheme-2 { --COLOR-TEXT-LIGHT: #B8B8B8; }
body { line-height: 1.5; }

/* Buttons: timeout.com pills, 16px, sentence case */
.btn,
.btn.caps,
.caps .btn {
  text-transform: none !important;
  letter-spacing: normal !important;
}

/* Tags and badges: 12/18, 500, uppercase, square */
.badge-box {
  font-family: 'FranklinGothicLTPro', 'Pretendard', Arial, Helvetica, sans-serif;
  font-size: 12px !important;
  line-height: 18px !important;
  font-weight: 500 !important;
  text-transform: uppercase;
  letter-spacing: normal;
  padding: 3px 8px;
  border-radius: 0;
}


/* ===== Badge colours — [WOO] TEST, 2026-11-05 =====
   Time Out palette only. Every pair clears WCAG 4.5 for small text (contrast with white in brackets).
   SALE Red #E1192C (4.80) · NEW Things to Do 2 #4E712F (5.63) · BEST Music & Nightlife 2 #0D618B (6.77)
   COLLAB / LIMITED Art 2 #7F2051 (9.43) · PRE-ORDER Eating & Drinking 2 #1A5E66 (7.40) · SOLD OUT Grey600 #757575 (4.61)
   Custom badges (product metafield theme.badge or tag _badge_X) default to BEST blue; collab-type words take Art 2. */
.badge-box { color: #FFFFFF !important; }
.badge-box.sale-box { background-color: #E1192C !important; }
.badge-box.new-box { background-color: #4E712F !important; }
.badge-box.custom-box { background-color: #0D618B !important; }
.badge-box.custom-box--collab,
.badge-box.custom-box--collaboration,
.badge-box.custom-box--limited,
.badge-box.custom-box--limited-edition,
.badge-box.custom-box--exclusive { background-color: #7F2051 !important; }
.badge-box.preorder-box { background-color: #1A5E66 !important; }
.badge-box.sold-box { background-color: #757575 !important; }

/* ===== Footer matched to timeout.com — [WOO] TEST, 2026-11-05 =====
   timeout.com footer (measured): Time Out Black, column titles 16/24 weight 800 white,
   links 16/24 weight 400 light grey, legal links 14/21, "Back to Top" in sentence case. */
.site-footer-wrapper .footer__block__title { font-size: 16px; line-height: 24px; font-weight: 800; color: #FFFFFF; }
.site-footer-wrapper a { color: #E8E8E8; }
.site-footer-wrapper a:hover { color: #FFFFFF; }
.supporting-menu__copyright,
.supporting-menu__copyright a { font-size: 14px !important; line-height: 21px !important; color: #E8E8E8; }
.footer-sections .text-label { text-transform: none; }

/* ===== Page sweep: last off-brand colours — [WOO] TEST, 2026-11-05 =====
   Found by checking every text element on home, collection, product (beauty and apparel), cart,
   Journal, About, FAQs and Contact against the Time Out palette. */
/* Beauty descriptions: pure black and 60% black -> Time Out Black and Grey600 */
.tm, .tm .tm-eyebrow, .tm .tm-card__title, .tm .tm-card__desc { color: #1A1A1A; }
.tm .tm-muted { color: #757575 !important; }
/* About page cards: #6B6B6B -> Grey600 */
.wap-card__n, .wap-card__p { color: #757575 !important; }
/* Contact form note: 80% black -> Grey600 */
.custom-form__required-text { color: #757575 !important; }
/* Checkout note in cart: #666 -> Grey600 */
.tos-krw-note { color: #757575 !important; }
/* Cart errors: theme maroon -> Time Out Red */
.cart__errors__heading, .cart__errors { color: #E1192C !important; }
/* Sold-out size and colour options: 35% black -> Grey300 */
.option-title, .label-unavailable { color: #B8B8B8; }
/* Judge.me reviews: pure black and #7B7B7B -> Time Out Black and Grey600 */
.jdgm-widget, .jdgm-widget .jm-text, .jdgm-tab--active { color: #1A1A1A !important; }
.jdgm-tab:not(.jdgm-tab--active) { color: #757575 !important; }
/* Rich text typed in pure red (#FF0000) -> Time Out Red */
.rte [style*="#ff0000"], .rte [style*="#FF0000"], .rte [style*="rgb(255, 0, 0)"],
[style*="color: #ff0000"], [style*="color:#ff0000"], [style*="color: rgb(255, 0, 0)"] { color: #E1192C !important; }

/* ===== Footer layout, logo and line, matched to timeout.com — [WOO] TEST, 2026-11-05 =====
   timeout.com footer at 1440 wide (measured): content column 1102px (1150px wrapper, 24px inset), 12-column grid with 24px gaps,
   40px top padding. Logo 250 x 96 in columns 1-5. Link columns start at columns 7, 9 and 11, two columns wide.
   Titles 16/16 weight 800, first link 28px below the title, links 16/24 with 24px between them.
   "Best of the city." sits centred under the logo (same centre line), 25/30 weight 500, white, 24px below. */
@media only screen and (min-width: 990px) {
  .site-footer-wrapper { padding-top: 40px !important; }
  .site-footer-wrapper .site-footer.wrapper { max-width: 1150px; margin-left: auto; margin-right: auto; padding-left: 24px !important; padding-right: 24px !important; }
  .site-footer-wrapper .footer__blocks { display: grid !important; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; margin: 0 !important; }
  .site-footer-wrapper .footer__block { padding: 0 !important; margin: 0 !important; width: auto !important; max-width: none !important; }
  .site-footer-wrapper .footer__block--text { grid-column: 1 / 6; }
  .site-footer-wrapper .footer__block--menu:nth-of-type(2) { grid-column: 7 / 9; }
  .site-footer-wrapper .footer__block--menu:nth-of-type(3) { grid-column: 9 / 11; }
  .site-footer-wrapper .footer__block--menu:nth-of-type(4) { grid-column: 11 / 13; }

  .site-footer-wrapper .footer__block--text > div { width: 250px; text-align: center; }
  .site-footer-wrapper .footer__block--text .rte,
  .site-footer-wrapper .footer__block--text .rte p { width: 250px; max-width: none; }
  .site-footer-wrapper img[src*="footer-logo"] { display: block; width: 250px !important; height: auto !important; max-width: none; margin: 0; }

  .site-footer-wrapper .footer__block__title { margin: 0 0 28px !important; line-height: 16px !important; }
  .site-footer-wrapper .footer__block--menu li { margin: 0 0 24px; line-height: 24px; }
  .site-footer-wrapper .footer__block--menu li:last-child { margin-bottom: 0; }
}
.site-footer-wrapper .rte,
.site-footer-wrapper .rte p { text-align: center !important; }
.site-footer-wrapper .rte p:only-child { font-size: 25px; line-height: 30px; font-weight: 500; color: #FFFFFF; margin: 24px 0 0; }


/* ===== Back to Top, matched to timeout.com — [WOO] TEST, 2026-11-05 =====
   Red bar 56px tall; chevron 20 x 11, 1.6 stroke, 20px left of the words; words 16/20, weight 500, sentence case. */
#footer_gototop { min-height: 56px; display: flex; align-items: center; justify-content: center; gap: 20px; background-color: #E1192C; cursor: pointer; }
#footer_gototop .svg-icon { display: inline-flex; width: 20px; height: 11px; margin: 0; }
#footer_gototop .svg-icon svg { width: 20px; height: 11px; display: block; }
#footer_gototop .text-label { font-size: 16px; line-height: 20px; font-weight: 500; text-transform: none; letter-spacing: normal; color: #FFFFFF; }

/* ===== FAQ side menu: same line as the header — [WOO] TEST, 2026-11-05 =====
   Was: 1px black line that grew left to right (scaleX, 0.25s). Now: 2px Time Out Red, full width,
   fades in (opacity, 0.3s ease-out) on hover and stays on for the current section. Type 16/24, 500, Time Out Black. */
.widget__link { font-size: 16px !important; line-height: 24px !important; font-weight: 500 !important; color: #1A1A1A !important; }
.widget__link::after {
  height: 2px !important;
  background-color: #E1192C !important;
  transform: none !important;
  visibility: visible !important;
  opacity: 0 !important;
  transition: opacity 0.3s ease-out !important;
}
.widget__link:hover::after,
.widget__link.is-selected::after { opacity: 1 !important; }

/* ===== Contact form in timeout.com's form style — [WOO] TEST, 2026-11-05 =====
   timeout.com inputs and buttons are pills: 48px tall, radius 38px, 16px text, Franklin Gothic.
   On a white page the field gets a 1px Grey300 edge; placeholders Grey600; focus edge Time Out Black. */
.template-page .custom-form input.field,
.template-page .custom-form select,
.template-page .custom-form textarea.field,
.contact-form input.field,
.contact-form select.field,
.contact-form textarea.field {
  min-height: 48px;
  padding: 12px 20px !important;
  border: 1px solid #B8B8B8 !important;
  border-radius: 38px !important;
  background: #FFFFFF !important;
  font-size: 16px;
  line-height: 24px;
  color: #1A1A1A;
}
.template-page .custom-form textarea.field,
.contact-form textarea.field { border-radius: 24px !important; }
.template-page .custom-form .field:focus,
.contact-form .field:focus { border-color: #1A1A1A !important; outline: none; }
.template-page .custom-form .field::placeholder,
.contact-form .field::placeholder { color: #757575; opacity: 1; }
.template-page .custom-form .btn,
.contact-form .btn { min-height: 48px; border-radius: 38px; }
.template-page .custom-form + p,
.template-page .custom-form p,
.index-contact p { color: #757575; }


/* ===== Footer tagline on mobile too — 2026-11-05 =====
   Keeps "Best of the city." on the logo's centre line at every screen size (was 25px off on phones). */
.site-footer-wrapper .footer__block--text > div,
.site-footer-wrapper .footer__block--text .rte,
.site-footer-wrapper .footer__block--text .rte p { width: 250px; max-width: 100% !important; }
.site-footer-wrapper .footer__block--text .rte { max-width: 100% !important; } /* the section sets 200px by ID */

/* ===== Footer on phones: logo centred, links two per row — 2026-11-05 =====
   Below 990px: Time Out logo and "Best of the city." on the screen's centre line;
   Shop · Support side by side, Connect below (timeout.com mobile uses two per row; three per row wraps "Drops & Collabs"). */
@media only screen and (max-width: 989px) {
  .site-footer-wrapper .footer__blocks { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; row-gap: 32px; margin: 0 !important; }
  .site-footer-wrapper .footer__block { padding: 0 !important; margin: 0 !important; width: auto !important; max-width: none !important; border: 0 !important; }
  .site-footer-wrapper .footer__block--text { grid-column: 1 / -1; }
  .site-footer-wrapper .footer__block--text > div { margin-left: auto !important; margin-right: auto !important; }
  .site-footer-wrapper .footer__block--text img { display: block; margin-left: auto !important; margin-right: auto !important; }
}