/** Shopify CDN: Minification failed

Line 344:20 Expected identifier but found "!"
Line 1696:0 Expected "}" to go with "{"

**/
/* =====================================================================
   CUSTOM - HEADER / SEARCH PILL (DAWN) — SINGLE MAINTAINABLE VERSION
   Breakpoints:
   - Desktop: >= 990px
   - Mobile : <= 989px
   ✅ Keep ONLY this block (remove duplicates above)
   ===================================================================== */


/* =========================================================
   0) Index template: 기본 검색영역 폭(영향 방지)
   ========================================================= */
body.template-index .header__search,
body.template-index .header__search form,
body.template-index .header__search .search{
  width: 100%;
}


/* =========================================================
   1) Header padding (height 느낌)
   ========================================================= */
@media (min-width: 990px){
  header .header__inner,
  .header-wrapper .header__inner,
  .header-wrapper .header{
    padding-top: 60px !important;
    padding-bottom: 26px !important;
  }
}
@media (max-width: 989px){
  header .header__inner,
  .header-wrapper .header__inner,
  .header-wrapper .header{
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }
}


/* =========================================================
   2) Desktop header layout (Logo | Menu | Icons)
   ========================================================= */
@media (min-width: 990px){
  .header{
    display: grid !important;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    column-gap: 24px;
  }

  /* predictive-search wrapper가 grid 칸을 차지하지 않게 */
  predictive-search.header-search-pill__ps{
    display: contents !important;
  }

  .header__heading{ justify-self: start; }

  .header__inline-menu{
    justify-self: center;
    width: 100%;
    display: flex;
    justify-content: center;
  }
  .header__inline-menu > .list-menu{
    justify-content: center;
  }

  .header__icons{ justify-self: end; }

  /* 데스크톱 메뉴 아래로 */
  .header-wrapper nav.header__inline-menu{
    margin-top: 50px !important;
  }

  /* absolute 기준 + 드롭다운 잘림 방지 */
  .header-wrapper .header,
  header.header{
    position: relative !important;
    overflow: visible !important;
  }

  /* 데스크탑에서는 기본 돋보기 숨김 */
  .header__icons details-modal.header__search,
  .header__icons a[aria-label="Search"],
  .header__icons a[aria-label="검색"]{
    display: none !important;
  }
}


/* =========================================================
   3) Desktop Search Pill + Dropdown (STATIC / PREDICTIVE)
   ========================================================= */
@media (min-width: 990px){

  /* ---------------------------------------------------------
     3-0) Tokens (유지보수 포인트)
     --------------------------------------------------------- */
  .header-search-pill{
    /* pill */
    --sp-pill-h: 44px;
    --sp-pill-w: min(560px, 44vw);

    /* ✅ Static과 동일하게 맞출 값 */
    --sp-fig-left-pr: 23px;   /* 좌측 컬럼 → divider까지 */
    --sp-fig-right-pl: 30px;  /* divider → 우측 컬럼 */
    --sp-title-mb: 16px;      /* 타이틀 아래 간격 */

    /* dropdown common */
    --sp-dd-top-gap: 10px;
    --sp-dd-border: #E2E2E2;
    --sp-dd-bg: #FFFFFF;
    --sp-dd-radius: 15px;

    /* figma dropdown size (static + predictive) */
    --sp-dd-w: min(800px, calc(100vw - 48px));
    --sp-dd-minh: 452px;

    /* figma layout */
    --sp-fig-pad-t: 43px;
    --sp-fig-pad-x: 38px;
    --sp-fig-pad-b: 34px;
    --sp-fig-left-col: 220px;
    --sp-fig-gap: 30px;

    /* product tiles */
    --sp-thumb: 112px;
    --sp-thumb-radius: 12px;
    --sp-prod-cols: 4;
    --sp-title-lines: 2;

    /* fallback (Dawn default predictive) */
    --sp-fb-pad-y: 18px;
    --sp-fb-pad-x: 22px;
    --sp-fb-left-col: 180px;
    --sp-fb-gap: 22px;
    --sp-fb-line: #D6D6D6;
  }


  /* ---------------------------------------------------------
     3-1) Search pill (form)
     --------------------------------------------------------- */
  form.header-search-pill[data-search-pill]{
    position: absolute !important;
    left: 50% !important;
    top: 60px !important;
    transform: translateX(-50%) !important;

    width: var(--sp-pill-w) !important;
    height: var(--sp-pill-h) !important;
    z-index: 30 !important;

    border: 1px solid rgba(var(--color-foreground), 1);
    border-radius: 9999px;
    background: rgb(var(--color-background));

    display: flex;
    align-items: center;
    padding: 0 48px 0 16px;
    box-sizing: border-box;
  }

  .header-search-pill__input{
    width: 100%;
    height: 100%;
    border: 0 !important;
    outline: 0 !important;
    background: transparent;
    font-size: 14px;
    color: rgb(var(--color-foreground));
  }
  .header-search-pill__input::placeholder{
    color: rgba(var(--color-foreground), 0.55);
  }

  /* 포커스 링 제거 */
  .header-search-pill:focus-within,
  .header-search-pill__input:focus,
  .header-search-pill__input:focus-visible,
  .header-search-pill__btn:focus,
  .header-search-pill__btn:focus-visible{
    outline: none !important;
    box-shadow: none !important;
  }

  .header-search-pill__btn{
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border: 0;
    background: transparent;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: rgb(var(--color-foreground));
  }
  .header-search-pill__btn .icon{
    width: 30px;
    height: 30px;
  }


  /* ---------------------------------------------------------
     3-2) Dropdown base (공통: 숨김/표시/애니메이션만)
     - padding/레이아웃은 각 variant 내부에서만
     --------------------------------------------------------- */
  .search-pill-dd{
    position: absolute !important;
    left: 50% !important;
    top: calc(100% + var(--sp-dd-top-gap)) !important;

    z-index: 999 !important;
    background: var(--sp-dd-bg) !important;

    border: 1px solid var(--sp-dd-border) !important;
    border-radius: var(--sp-dd-radius) !important;
    box-sizing: border-box !important;
    box-shadow: none !important;

    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;

    transform: translateX(-50%) translateY(6px) !important;
    transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s;

    padding: 0 !important;
    overflow: visible !important;
  }

  /* Toggle */
  form.header-search-pill.is-open:not(.has-query) .search-pill-dd--static{
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateX(-50%) translateY(0) !important;
    transition: opacity .15s ease, transform .15s ease, visibility 0s;
    display: block !important;
  }
  form.header-search-pill.has-query .search-pill-dd--predictive{
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateX(-50%) translateY(0) !important;
    transition: opacity .15s ease, transform .15s ease, visibility 0s;
    display: block !important;
  }
  form.header-search-pill.has-query .search-pill-dd--static{
    display: none !important;
  }

  /* 링크 밑줄 제거(공통) */
  .search-pill-dd a,
  .search-pill-dd a.link,
  .search-pill-dd .link{
    text-decoration: none !important;
    background-image: none !important;
    box-shadow: none !important;
  }
  .search-pill-dd a:hover,
  .search-pill-dd a:focus-visible,
  .search-pill-dd a.link:hover,
  .search-pill-dd a.link:focus-visible,
  .search-pill-dd .link:hover,
  .search-pill-dd .link:focus-visible{
    text-decoration: none !important;
    background-image: none !important;
    box-shadow: none !important;
  }


  /* ---------------------------------------------------------
     3-3) STATIC dropdown (클릭만 했을 때) — Figma
     --------------------------------------------------------- */
  .search-pill-dd--static{
    width: var(--sp-dd-w) !important;
    min-height: var(--sp-dd-minh) !important;
  }

  .search-pill-dd--static .search-pill-dd__cols--figma{
    height: 100% !important;
    display: grid !important;
    grid-template-columns: var(--sp-fig-left-col) 1px 1fr !important;
    column-gap: 0 !important;

    padding: var(--sp-fig-pad-t) var(--sp-fig-pad-x) var(--sp-fig-pad-b) var(--sp-fig-pad-x) !important;
    box-sizing: border-box !important;
    align-items: start !important;
    position: relative !important;
  }

  /* divider (pseudo) */
  .search-pill-dd--static .search-pill-dd__divider{ display: none !important; }
  .search-pill-dd--static .search-pill-dd__cols--figma::before{
    content: "" !important;
    position: absolute !important;
    top: var(--sp-fig-pad-t) !important;
    bottom: var(--sp-fig-pad-b) !important;
    left: calc(var(--sp-fig-pad-x) + var(--sp-fig-left-col)) !important;
    width: 1px !important;
    background: var(--sp-dd-border) !important;
    pointer-events: none !important;
    z-index: 10 !important;
  }

  /* 좌측 컬럼 */
  .search-pill-dd--static .search-pill-dd__cols--figma > :first-child{
    display: flex !important;
    flex-direction: column !important;
    min-height: 375px !important;
    padding-right: var(--sp-fig-left-pr) !important; /* 23px -> 변수 */
    box-sizing: border-box !important;
    min-width: 0 !important;
  }

  /* 우측 컬럼 */
  .search-pill-dd--static .search-pill-dd__cols--figma > :nth-child(3){
    height: 100% !important;
    padding-left: var(--sp-fig-right-pl) !important; /* 30px -> 변수 */
    box-sizing: border-box !important;
    min-width: 0 !important;
  }

  /* Typography (Static) */
  .search-pill-dd--static :is(.search-dd__title, .search-pill-dd__title){
    font-family: inherit !important;
    font-style: normal !important;
    font-weight: 700 !important;
    font-size: 18px !important;
    line-height: 22px !important;
    color: #121212; !important;
    margin: 0 0 16px 0 !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
  }

  .search-pill-dd--static .search-dd__panel{
    position: relative !important;
    z-index: 20 !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 0 !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
  }

  .search-pill-dd--static .search-dd__recent{
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    gap: 10px !important;
  }

  .search-pill-dd--static .search-dd__recent li{
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
  }

  .search-pill-dd--static .search-dd__recent a{
    font-family: inherit !important;
    font-style: normal !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    line-height: 19px !important;
    color: #9c9c9c !important;
    display: inline-block !important;
  }

/* X 버튼(Recent item 옆) - 2가지 클래스명 모두 커버하여 네모칸 원천 차단 */
  .search-pill-dd--static .search-pill-dd__x,
  .search-pill-dd--static .msh-recent__remove {
    width: 14px !important;
    height: 14px !important;
    font-size: 14px !important;
    color: #9C9C9C !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative;
    top: 1px;

    /* 네모칸 버그를 막기 위한 강제 초기화 (배경 투명, 패딩 제거) */
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important; /* #F0F0F0 배경 무효화 */
    box-shadow: none !important;
    outline: none !important;
    padding: 0 !important; /* 1px 6px 패딩 무효화 */
    margin: 0 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    min-width: 0 !important;
    min-height: 0 !important;

    /* 마우스 오버(호버) 설정 */
    cursor: pointer !important; /* 손가락 모양 */
    transition: color 0.3s ease !important; /* 부드러운 색상 전환 */
  }

  /* X 버튼 호버 시 색상 짙어짐 */
  .search-pill-dd--static .search-pill-dd__x:hover,
  .search-pill-dd--static .msh-recent__remove:hover {
    color: #121212 !important;
  }

/* Clear All */
  .search-pill-dd--static .search-dd__clear{
    margin-top: auto !important;
    align-self: flex-start !important;

    font-family: inherit !important;
    font-style: normal !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    line-height: 17px !important;
    color: #9C9C9C !important;

    border: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    cursor: pointer !important;
    transition: color 0.3s ease !important; /* ✅ 부드러운 색상 전환 추가 */
  }

  /* ✅ Clear All 호버 시 색상 짙어짐 추가 */
  .search-pill-dd--static .search-dd__clear:hover {
    color: #121212 !important;
  }

  /* Featured Brands (Static) */
  .search-pill-dd--static .search-dd__brands{
    display: grid !important;
    grid-template-columns: repeat(2, 218px) !important;
    column-gap: 38px !important;
    gap: 28px !important;
    align-content: start !important;
    justify-content: start !important;
  }

  .search-pill-dd--static .brand-card{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 12px !important;
    min-width: 0 !important;
  }

  .search-pill-dd--static .brand-card__img{
    width: 218px !important;
    height: 141px !important;
    border-radius: 15px !important;
    overflow: hidden !important;
    background: rgba(0,0,0,.10) !important;
    display: block !important;
  }

  .search-pill-dd--static .brand-card__img img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  .search-pill-dd--static .brand-card__label{
    font-family: inherit !important;
    font-style: normal !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    line-height: 17px !important;
    color: #121212bf !important;

    width: 218px !important;
    text-align: center !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }


  /* ---------------------------------------------------------
     3-4) PREDICTIVE dropdown — 공통 베이스
     --------------------------------------------------------- */
  .search-pill-dd--predictive{
    width: var(--sp-dd-w) !important;
    min-height: var(--sp-dd-minh) !important;
    border-radius: var(--sp-dd-radius) !important;
    overflow: hidden !important;
    background: #fff !important;
  }

  /* Dawn 기본 “Search for …” 버튼 제거 */
  .header-search-pill .search-pill-dd--predictive .predictive-search__search-for-button{
    display: none !important;
  }

  /* Dawn 기본 padding 제거(레이아웃은 wrapper가 책임) */
  .header-search-pill .search-pill-dd--predictive .predictive-search__results{
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  /* Predictive 내부 불릿/marker 제거(공통) */
  .header-search-pill .search-pill-dd--predictive :is(ul,ol,li){
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .header-search-pill .search-pill-dd--predictive li::marker{ content: "" !important; }

  /* 검색어 하이라이트(배경 없이 빨강) */
  .header-search-pill .search-pill-dd--predictive :is(mark, .highlight){
    background: transparent !important;
    color: #ff5656 !important;
    font-weight: 400 !important;
    padding: 0 !important;
  }

  /* 선택(파란 배경) 제거 */
  .header-search-pill .search-pill-dd--predictive :is(.predictive-search__item, .predictive-search__list-item)[aria-selected="true"]{
    background: transparent !important;
  }


  /* ---------------------------------------------------------
     3-5) PREDICTIVE (FIGMA) — ps-figma / ps--figma 가 있을 때
     --------------------------------------------------------- */
  .header-search-pill .search-pill-dd--predictive
  #predictive-search-results-groups-wrapper:is(.ps-figma, .ps--figma){
    display: grid !important;
    grid-template-columns: var(--sp-fig-left-col) 1px 1fr !important;
    column-gap: 0 !important;
    align-items: start !important;

    padding: var(--sp-fig-pad-t) var(--sp-fig-pad-x) var(--sp-fig-pad-b) var(--sp-fig-pad-x) !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-height: var(--sp-dd-minh) !important; /* ✅ 핵심 */
    position: relative !important;
  }

  .header-search-pill .search-pill-dd--predictive
  #predictive-search-results-groups-wrapper:is(.ps-figma, .ps--figma) > .ps-left{
    grid-column: 1 !important;
    padding-right: var(--sp-fig-gap) !important;
    align-self: stretch !important; /* ✅ 핵심 */
    min-width: 0 !important;
  }

  .header-search-pill .search-pill-dd--predictive
  #predictive-search-results-groups-wrapper:is(.ps-figma, .ps--figma) > .ps-divider{
    grid-column: 2 !important;
    width: 1px !important;
    background: var(--sp-dd-border) !important;
    align-self: stretch !important;
    display: block !important;
    
  }

  .header-search-pill .search-pill-dd--predictive
  #predictive-search-results-groups-wrapper:is(.ps-figma, .ps--figma) > .ps-right{
    grid-column: 3 !important;
    padding-left: var(--sp-fig-gap) !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  /* ✅ 불릿(•) 완전 제거 (marker + ::before 둘다 컷) */
  .header-search-pill .search-pill-dd--predictive
  #predictive-search-results-groups-wrapper:is(.ps-figma, .ps--figma) .ps-item::before{
    content: none !important;
  }

  /* 좌측 타이틀/리스트 */
  .header-search-pill .search-pill-dd--predictive
  #predictive-search-results-groups-wrapper:is(.ps-figma, .ps--figma) .ps-title{
    font-weight: 800 !important;
    font-size: 18px !important;
    line-height: 22px !important;
    color: #121212bf !important;
    white-space: nowrap !important;
    margin: 0 0 var(--sp-title-mb) 0 !important; /* ✅ Static처럼 */
  }

  .header-search-pill .search-pill-dd--predictive
  #predictive-search-results-groups-wrapper:is(.ps-figma, .ps--figma) .ps-list{
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important; /* 검색창 리스트 자간 조정*/
  }

  .header-search-pill .search-pill-dd--predictive
  #predictive-search-results-groups-wrapper:is(.ps-figma, .ps--figma) .ps-item{
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
  }

  .header-search-pill .search-pill-dd--predictive
  #predictive-search-results-groups-wrapper:is(.ps-figma, .ps--figma) .ps-item a{
    font-weight: 400 !important;
    font-size: 14px !important;
    line-height: 19px !important;
    color: #9c9c9c !important;
    text-decoration: none !important;
  }

  /* 왼쪽 컬럼 안에서 섹션(블록) 사이 간격 */
  .header-search-pill .search-pill-dd--predictive
  #predictive-search-results-groups-wrapper:is(.ps-figma,.ps--figma) .ps-left .ps-block + .ps-block{
    margin-top: 30px !important; /* ✅ 여기 숫자 키우면 핑크-초록 사이만 벌어짐 */
  }


  /* ✅ 선택 하이라이트 제거 */
  .header-search-pill .search-pill-dd--predictive
  #predictive-search-results-groups-wrapper:is(.ps-figma, .ps--figma) :is(.ps-item,.ps-product)[aria-selected="true"]{
    background: transparent !important;
  }

  /* 우측 상품 4열 타일 */
  .header-search-pill .search-pill-dd--predictive
  #predictive-search-results-groups-wrapper:is(.ps-figma, .ps--figma) .ps-products{
    display: grid !important;
    grid-template-columns: repeat(var(--sp-prod-cols), var(--sp-thumb)) !important;
    gap: 18px 8px !important;/*세로,가로 갭*/
    justify-content: start !important;
    align-content: start !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .header-search-pill .search-pill-dd--predictive
  #predictive-search-results-groups-wrapper:is(.ps-figma, .ps--figma) a.ps-product-link{
    width: var(--sp-thumb) !important;
    min-width: var(--sp-thumb) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    text-decoration: none !important;
    color: #121212bf !important;
  }

  .header-search-pill .search-pill-dd--predictive
  #predictive-search-results-groups-wrapper:is(.ps-figma, .ps--figma) .ps-product-media{
    width: var(--sp-thumb) !important;
    height: var(--sp-thumb) !important;
    border-radius: var(--sp-thumb-radius) !important;
    overflow: hidden !important;
    background: rgba(0,0,0,.04) !important;
  }

  .header-search-pill .search-pill-dd--predictive
  #predictive-search-results-groups-wrapper:is(.ps-figma, .ps--figma) .ps-product-media img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

.header-search-pill .search-pill-dd--predictive
  #predictive-search-results-groups-wrapper:is(.ps-figma, .ps--figma) .ps-product-title{
    font-size: 12px !important;
    line-height: 1.25 !important;
    color: #121212bf !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: var(--sp-title-lines) !important;
    overflow: hidden !important;
    text-align: center !important; /* ✅ 이 부분 추가: 텍스트 가운데 정렬 */
  }

/* 가격: 판매가/비교가 센터 정렬 */
  .header-search-pill .search-pill-dd--predictive
  #predictive-search-results-groups-wrapper:is(.ps-figma, .ps--figma) .ps-product-price{
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important; /* ✅ 이 부분 추가: 가로축 가운데 정렬 */
    align-items: baseline !important;
    gap: 0px !important;
    flex-wrap: wrap !important; /* 좁아지면 자연스럽게 줄바꿈 */
  }

/* 폰트 라인높이/여백 때문에 뜨는 ‘아래로 처짐’ 방지 */
  .header-search-pill .search-pill-dd--predictive
  #predictive-search-results-groups-wrapper:is(.ps-figma, .ps--figma) .ps-product-price :is(.price, .price-item, s) { /* ✅ .price 추가됨 */
    line-height: 1.1 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* ✅ 1) 판매가 / 단일가(비교가 없는 제품 포함) = 빨강 Bold 14px */
  .header-search-pill .search-pill-dd--predictive
  #predictive-search-results-groups-wrapper:is(.ps-figma, .ps--figma) .ps-product-price
  :is(
    .price-item--sale,
    .price__sale .price-item--last,
    .price__regular .price-item--regular,
    .price__regular .price-item--final
  ){
    color: #ff5656 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
  }

  /* ✅ 2) 비교가(취소선) = s 태그/compare만 회색 처리 */
  .header-search-pill .search-pill-dd--predictive
  #predictive-search-results-groups-wrapper:is(.ps-figma, .ps--figma) .ps-product-price
  :is(
    s.price-item,
    s.price-item--regular,
    .price-item--compare
  ){
    color: #9C9C9C !important;
    text-decoration: line-through !important;
    font-size: 11px !important;
    font-weight: 400 !important;
  }


  /* ---------------------------------------------------------
     3-6) PREDICTIVE fallback — ps-figma가 “없을 때” Dawn 기본 마크업 강제
     (디자인/기능 안 풀리게 안전망)
     --------------------------------------------------------- */
  .header-search-pill .search-pill-dd--predictive
  .predictive-search__results-groups-wrapper:not(.ps-figma):not(.ps--figma){
    padding: var(--sp-fb-pad-y) var(--sp-fb-pad-x) !important;
    box-sizing: border-box !important;

    display: grid !important;
    grid-template-columns: var(--sp-fb-left-col) 1fr !important;
    column-gap: calc(var(--sp-fb-gap) * 2 + 1px) !important;
    align-items: start !important;
    min-width: 0 !important;

    background-image: linear-gradient(var(--sp-fb-line), var(--sp-fb-line)) !important;
    background-repeat: no-repeat !important;
    background-size: 1px 100% !important;
    background-position: calc(var(--sp-fb-left-col) + var(--sp-fb-gap)) 0 !important;
  }

  /* 기본 그룹은 왼쪽, products 그룹은 오른쪽 */
  .header-search-pill .search-pill-dd--predictive
  .predictive-search__result-group{
    grid-column: 1 !important;
    min-width: 0 !important;
  }
  .header-search-pill .search-pill-dd--predictive
  .predictive-search__result-group--products{
    grid-column: 2 !important;
    grid-row: 1 / span 99 !important;
    min-width: 0 !important;
  }

  .header-search-pill .search-pill-dd--predictive
  .predictive-search__heading{
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    color: #121212 !important;
    margin: 0 0 10px 0 !important;
  }

  .header-search-pill .search-pill-dd--predictive :is(
    .predictive-search__item,
    .predictive-search__item--term,
    .predictive-search__item--query,
    .predictive-search__item--page,
    .predictive-search__item--article
  ){
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    text-decoration: none !important;

    font-size: 12px !important;
    line-height: 1.35 !important;
    color: #121212 !important;
  }

  /* products 4열 타일 */
  .header-search-pill .search-pill-dd--predictive :is(
    .predictive-search__results-list--products,
    .predictive-search__result-group--products .predictive-search__results-list
  ){
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(var(--sp-prod-cols), var(--sp-thumb)) !important;
    gap: 14px 18px !important;
    justify-content: start !important;
    align-content: start !important;
  }

  .header-search-pill .search-pill-dd--predictive :is(
    a.predictive-search__item--link-with-thumbnail,
    a.predictive-search__item.predictive-search__item--product,
    a.predictive-search__item--product
  ){
    width: var(--sp-thumb) !important;
    min-width: var(--sp-thumb) !important;

    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;

    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    text-decoration: none !important;
  }

  .header-search-pill .search-pill-dd--predictive :is(
    .predictive-search__image,
    .predictive-search__image-wrapper,
    .predictive-search__item-media
  ){
    width: var(--sp-thumb) !important;
    height: var(--sp-thumb) !important;
    border-radius: var(--sp-thumb-radius) !important;
    overflow: hidden !important;
    background: rgba(0,0,0,.04) !important;
  }

  .header-search-pill .search-pill-dd--predictive :is(
    .predictive-search__image img,
    .predictive-search__image-wrapper img
  ){
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  .header-search-pill .search-pill-dd--predictive .predictive-search__item-heading{
    font-size: 10px !important;
    line-height: 1.2 !important;
    color: #121212 !important;

    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
  }

  /* fallback에서만 적용되게 스코프 제한 */
.header-search-pill .search-pill-dd--predictive
.predictive-search__results-groups-wrapper:not(.ps-figma):not(.ps--figma)
:is(.price, .predictive-search__item--product .price){
  font-size: 10px !important;
  line-height: 1.2 !important;
}

.header-search-pill .search-pill-dd--predictive
.predictive-search__results-groups-wrapper:not(.ps-figma):not(.ps--figma)
:is(.price-item--sale, .price__sale .price-item--last){
  color: #dd2b11 !important;
}

/* regular는 빼는 게 안전 */
.header-search-pill .search-pill-dd--predictive
.predictive-search__results-groups-wrapper:not(.ps-figma):not(.ps--figma)
:is(s, .price-item--compare){
  color: #9C9C9C !important;
  text-decoration: line-through !important;
}

/* No results (Predictive empty state) */
.header-search-pill .search-pill-dd--predictive
#predictive-search-results-groups-wrapper.ps-figma .ps-empty{
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: calc(var(--sp-dd-minh) - var(--sp-fig-pad-t) - var(--sp-fig-pad-b));
}

.header-search-pill .search-pill-dd--predictive .ps-empty__title{
  font-weight: 800;
  font-size: 18px;
  line-height: 22px;
  margin: 0 0 10px 0;
}

.header-search-pill .search-pill-dd--predictive .ps-empty__desc{
  font-size: 14px;
  line-height: 1.4;
  color: #6b6b6b;
  max-width: 520px;
  margin: 0 0 14px 0;
}

.header-search-pill .search-pill-dd--predictive .ps-empty__cta{
  font-size: 14px;
  font-weight: 700;
  color: #9c9c9c;
  text-decoration: underline !important;
}

/* No results 추천 검색어 */
.header-search-pill .search-pill-dd--predictive .ps-empty__suggestions{
  margin-top: 14px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px 12px !important;
  justify-content: center !important;
}

.header-search-pill .search-pill-dd--predictive .ps-empty__suggestion a{
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}
/* =========================================================
    Global Fix — Desktop pill 안의 reset/X 제거
   ========================================================= */
  .header-search-pill__input[type="search"]::-webkit-search-decoration,
  .header-search-pill__input[type="search"]::-webkit-search-cancel-button,
  .header-search-pill__input[type="search"]::-webkit-search-results-button,
  .header-search-pill__input[type="search"]::-webkit-search-results-decoration{
    -webkit-appearance: none;
    appearance: none;
    display: none;
  }

  .header-search-pill .reset__button,
  .header-search-pill button[type="reset"]{
    display: none !important;
  }
/* =========================================================
   [추가] 호버 애니메이션 & 텍스트 색상 변경 (좌측/우측 통합)
   ========================================================= */

/* 1. 좌측 검색어 목록 호버 효과 (Static & Predictive 공통) */
.search-pill-dd--static .search-dd__recent a,
.header-search-pill .search-pill-dd--predictive #predictive-search-results-groups-wrapper:is(.ps-figma, .ps--figma) .ps-item a {
  transition: color 0.3s ease !important;
}

.search-pill-dd--static .search-dd__recent a:hover,
.header-search-pill .search-pill-dd--predictive #predictive-search-results-groups-wrapper:is(.ps-figma, .ps--figma) .ps-item a:hover {
  color: #121212 !important; /* 마우스 올렸을 때 더 짙어짐 (기존 #9c9c9c -> #121212) */
}

/* 2. 우측 이미지 확대 (Static 브랜드 카드 & Predictive 상품) */
.search-pill-dd--static .brand-card__img img,
.header-search-pill .search-pill-dd--predictive #predictive-search-results-groups-wrapper:is(.ps-figma, .ps--figma) .ps-product-media img,
.header-search-pill .search-pill-dd--predictive :is(.predictive-search__image img, .predictive-search__image-wrapper img) {
  transition: transform 0.5s ease, opacity 0.4s ease !important;
}

/* 2-1. Static 브랜드 호버시 확대 */
.search-pill-dd--static .brand-card:hover .brand-card__img img {
  transform: scale(1.08) !important;
}

/* 2-2. Predictive 상품 호버시 확대 */
.header-search-pill .search-pill-dd--predictive #predictive-search-results-groups-wrapper:is(.ps-figma, .ps--figma) a.ps-product-link:hover .ps-product-media img,
.header-search-pill .search-pill-dd--predictive a.predictive-search__item:hover :is(.predictive-search__image img, .predictive-search__image-wrapper img) {
  transform: scale(1.08) !important;
}

/* 3. 우측 글씨 색상 호버 효과 (마우스 올렸을 때 짙어지도록 기본색 조정 포함) */
/* 기본 텍스트 색상을 약간 연한 회색(#555)으로 조정하여 호버 대비감 극대화 */
.search-pill-dd--static .brand-card__label,
.header-search-pill .search-pill-dd--predictive #predictive-search-results-groups-wrapper:is(.ps-figma, .ps--figma) .ps-product-title,
.header-search-pill .search-pill-dd--predictive .predictive-search__item-heading {
  color: #555 !important; 
  transition: color 0.3s ease !important;
}

/* 마우스 올렸을 때 완전히 짙은 색(#121212)으로 변경 */
.search-pill-dd--static .brand-card:hover .brand-card__label,
.header-search-pill .search-pill-dd--predictive #predictive-search-results-groups-wrapper:is(.ps-figma, .ps--figma) a.ps-product-link:hover .ps-product-title,
.header-search-pill .search-pill-dd--predictive a.predictive-search__item:hover .predictive-search__item-heading {
  color: #121212 !important;
}
/* =========================================================
   검색창 드롭다운 겹침(Z-index) 문제 해결
   ========================================================= */

/* 1. 쇼피파이 헤더 섹션 전체를 스토어 최상단 레이어로 띄움 */
.shopify-section-header,
.section-header,
.header-wrapper {
  position: relative !important;
  z-index: 99999 !important;
}

/* 2. 검색 폼(알약 모양) 자체의 우선순위 상향 (기존 z-index: 30을 무효화) */
form.header-search-pill[data-search-pill] {
  z-index: 99999 !important;
}

/* 3. 드롭다운 패널을 그보다 더 위로 확실하게 배치 */
.search-pill-dd {
  z-index: 999999 !important;
}
 /* =========================================================
   HEADER MENU underline & Hover Dropdown Animation
   ========================================================= */

.header__inline-menu {
  --menu-underline-h: 1px;      /* 밑줄 두께 */
  --menu-underline-dur: 300ms; /* 밑줄 채워지는 속도 */
  --menu-drop-dur: 0.8s;       /* 드롭다운 페이드/슬라이드 속도 (배너와 비슷한 호흡) */
}

/* 1) Dawn(base.css) 기본 밑줄 & 애니메이션 충돌 방지 */
.header__inline-menu :is(a.header__menu-item, summary.header__menu-item),
.header__inline-menu :is(a.header__menu-item, summary.header__menu-item) span,
.header__inline-menu details[open] > :is(a.header__menu-item, summary.header__menu-item),
.header__inline-menu .header__active-menu-item {
  text-decoration: none !important;
}

/* 2) a / summary: "첫번째 span"에 밑줄 배경 생성 (왼쪽 -> 오른쪽) */
.header__inline-menu :is(a.header__menu-item, summary.header__menu-item) > span {
  display: inline-block !important;
  padding-bottom: 2px !important;
  background-image: linear-gradient(currentColor, currentColor) !important;
  background-repeat: no-repeat !important;
  /* 무조건 왼쪽(left)을 기준으로 채워지고 빠지도록 고정 */
  background-position: left bottom !important;
  background-size: 0% var(--menu-underline-h) !important;
  transition: background-size var(--menu-underline-dur) ease-out !important;
}

/* 3) hover/focus 시 100%로 확장 (밑줄 긋기) */
.header__inline-menu :is(a.header__menu-item, summary.header__menu-item):hover > span,
.header__inline-menu :is(a.header__menu-item, summary.header__menu-item):focus-visible > span {
  background-size: 100% var(--menu-underline-h) !important;
}

/* 4) 활성화(현재 페이지) 및 호버 상태 유지 */
.header__inline-menu details:hover > summary.header__menu-item > span,
.header__inline-menu details[open] > summary.header__menu-item > span,
.header__inline-menu a.header__menu-item[aria-current="page"] > span,
.header__inline-menu a.header__menu-item:has(.header__active-menu-item) > span {
  background-size: 100% var(--menu-underline-h) !important;
}

/* =========================================================
   HOVER DROPDOWN & MEGA MENU (무한 반복 애니메이션 완벽 지원)
   ========================================================= */

/* 1) 드롭다운 초기 상태 (투명도 0, 위로 15px 올라간 상태) */
.header__inline-menu details > .header__submenu,
.header__inline-menu details > .mega-menu__content {
  opacity: 0 !important;
  transform: translateY(-15px) !important;
  /* ease-out으로 스무스하게 내려오도록 설정 (속도: 0.4초) */
  transition: opacity 0.4s ease-out, transform 0.4s ease-out !important;
}

/* 2) JS가 'hover-anim-open' 클래스를 붙였을 때 (제자리로 스르륵 내려옴) */
.header__inline-menu details.hover-anim-open > .header__submenu,
.header__inline-menu details.hover-anim-open > .mega-menu__content {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* 3) 마우스 호버 시 메뉴 옆 화살표(Caret) 스무스하게 180도 회전 */
.header__inline-menu summary .icon-caret {
  transition: transform 0.3s ease !important;
}
.header__inline-menu details.hover-anim-open summary .icon-caret {
  transform: rotate(180deg) !important;
}

/* Mega menu 드롭다운 링크 밑줄 애니메이션 */
.mega-menu__content .mega-menu__link{
  position: relative;
  display: inline-block;
  text-decoration: none !important;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size .25s ease;
}
.mega-menu__content .mega-menu__link:hover,
.mega-menu__content .mega-menu__link:focus-visible{
  background-size: 100% 1px;
}
.mega-menu__content .mega-menu__link.mega-menu__link--active{
  background-size: 100% 1px;
}

/* =========================================================
   MEGA MENU PROMOTION (Featured Brands)
   ========================================================= */

/* 1. 프로모션이 있는 메뉴의 전체 레이아웃 (가로 배열) */
.has-promo-wrapper {
  display: flex !important;
  justify-content: space-between !important;
  width: 100% !important;
}

/* 2. 기존 텍스트 메뉴 영역 (왼쪽) */
.has-promo-wrapper .mega-menu__list {
  flex: 1; 
  
  /* ✨ 핵심 1: 기존 6칸이던 메뉴를 4칸으로 제한하여 5번째 메뉴부터는 자동으로 아랫줄로 떨어지게 만듭니다. */
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  
  border-right: 1px solid #E2E2E2; 
  padding-right: 50px !important; /* 선 바로 왼쪽 여백 */
}

/* 3. 새로운 추천 브랜드 배너 영역 (오른쪽) */
.mega-menu__promo-section {
  /* ✨ 핵심 1: 박스 전체 너비를 키워서 이미지를 어두운 초록색 선만큼 큼직하게 만듭니다. (기존 320px -> 420px) */
  width: 420px !important; 
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  padding-top: 0px;
  
  /* ✨ 숫자를 키울수록 구분선이 왼쪽으로 더 밀려납니다. */
  margin-left: 60px !important;  /* 💡 기존 40px에서 80px, 100px, 120px */
  margin-right: 50px !important; 
}

/* 4. 'Featured Brands' 타이틀 텍스트 */
.mega-menu__promo-title {
  font-size: 16px;
  font-weight: 800;
  color: #121212;
  margin: 0 0 20px 0;
  letter-spacing: 0;
}

/* 5. 이미지 2개 감싸는 그리드 */
.mega-menu__promo-grid {
  display: flex;
  flex-direction: column;
  gap: 16px; /* 이미지 위아래 간격 */
}

/* 6. 개별 이미지 카드 형태 및 모션 (수정 완료) */
.mega-menu__promo-card {
  display: block;
  position: relative; /* ✨ 핵심: 자식(img)의 기준점이 됩니다. */
  border-radius: 12px;
  overflow: hidden;
  background: #f4f4f4; /* 이미지가 로딩되기 전 회색 배경 */
  
  /* 박스 비율 고정 (가로 2 : 세로 1 비율) */
  /* 만약 세로를 좀 더 얇게 하고 싶다면 2.5 / 1 등으로 숫자를 바꿔보세요! */
  aspect-ratio: 2 / 1; 
}

.mega-menu__promo-card img {
  position: absolute; /* ✨ 핵심: 부모 박스(card) 기준으로 절대 위치를 잡습니다. */
  top: 0;
  left: 0;
  width: 100% !important;  /* ✨ 너비를 강제로 100% 채웁니다. */
  height: 100% !important; /* ✨ 높이를 강제로 100% 채웁니다. */
  display: block;
  object-fit: cover !important; /* ✨ 이미지가 찌그러지지 않고 박스 영역을 빈틈없이 채움 (중요!) */
  transition: transform 0.3s ease;
}

/* 마우스 올렸을 때 이미지 살짝 확대 효과 (고급스러움 추가) */
.mega-menu__promo-card:hover img {
  transform: scale(1.03);
}

.banner {
  display: flex;
  position: relative;
  flex-direction: column;
  z-index: auto;
  isolation: isolate;
}

.banner__box {
  text-align: center;
}

/* 슬라이드 배너 레이아웃 유지용 코드 (삭제 시 깨짐 주의) */
.banner__box.gradient {
  transform: perspective(0);
}

@media only screen and (max-width: 749px) {
  .banner--content-align-mobile-right .banner__box {
    text-align: right;
  }

  .banner--content-align-mobile-left .banner__box {
    text-align: left;
  }
}

@media only screen and (min-width: 750px) {
  .banner--content-align-right .banner__box {
    text-align: right;
  }

  .banner--content-align-left .banner__box {
    text-align: left;
  }

  .banner--content-align-left.banner--desktop-transparent .banner__box,
  .banner--content-align-right.banner--desktop-transparent .banner__box,
  .banner--medium.banner--desktop-transparent .banner__box {
    max-width: 68rem;
  }
}

.banner__media.animate--zoom-in {
  clip-path: inset(0px);
}

.banner__media.animate--zoom-in > img:not(.zoom):not(.deferred-media__poster-button),
.banner__media.animate--zoom-in > svg:not(.zoom):not(.deferred-media__poster-button) {
  position: fixed;
  height: 100vh;
}

@media screen and (max-width: 749px) {
  .banner--small.banner--mobile-bottom:not(.banner--adapt) .banner__media,
  .banner--small.banner--stacked:not(.banner--mobile-bottom):not(.banner--adapt) > .banner__media {
    height: 28rem;
  }

  .banner--medium.banner--mobile-bottom:not(.banner--adapt) .banner__media,
  .banner--medium.banner--stacked:not(.banner--mobile-bottom):not(.banner--adapt) > .banner__media {
    height: 34rem;
  }

  .banner--large.banner--mobile-bottom:not(.banner--adapt) .banner__media,
  .banner--large.banner--stacked:not(.banner--mobile-bottom):not(.banner--adapt) > .banner__media {
    height: 39rem;
  }

  .banner--small:not(.banner--mobile-bottom):not(.banner--adapt) .banner__content {
    min-height: 28rem;
  }

  .banner--medium:not(.banner--mobile-bottom):not(.banner--adapt) .banner__content {
    min-height: 34rem;
  }

  .banner--large:not(.banner--mobile-bottom):not(.banner--adapt) .banner__content {
    min-height: 39rem;
  }
}

@media screen and (min-width: 750px) {
  .banner {
    flex-direction: row;
  }

  .banner--small:not(.banner--adapt) {
    min-height: 42rem;
  }

  .banner--medium:not(.banner--adapt) {
    min-height: 56rem;
  }

  .banner--large:not(.banner--adapt) {
    min-height: 72rem;
  }

  .banner__content.banner__content--top-left {
    align-items: flex-start;
    justify-content: flex-start;
  }

  .banner__content.banner__content--top-center {
    align-items: flex-start;
    justify-content: center;
  }

  .banner__content.banner__content--top-right {
    align-items: flex-start;
    justify-content: flex-end;
  }

  .banner__content.banner__content--middle-left {
    align-items: center;
    justify-content: flex-start;
  }

  .banner__content.banner__content--middle-center {
    align-items: center;
    justify-content: center;
  }

  .banner__content.banner__content--middle-right {
    align-items: center;
    justify-content: flex-end;
  }

  .banner__content.banner__content--bottom-left {
    align-items: flex-end;
    justify-content: flex-start;
  }

  .banner__content.banner__content--bottom-center {
    align-items: flex-end;
    justify-content: center;
  }

  .banner__content.banner__content--bottom-right {
    align-items: flex-end;
    justify-content: flex-end;
  }
}

@media screen and (max-width: 749px) {
  .banner:not(.banner--stacked) {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .banner--stacked {
    height: auto;
  }

  .banner--stacked .banner__media {
    flex-direction: column;
  }
}

.banner__media {
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}

.banner__media-half {
  width: 50%;
}

.banner__media-half + .banner__media-half {
  right: 0;
  left: auto;
}

.banner__media-half.animate--fixed:first-child > img,
.banner__media-half.animate--zoom-in:first-child > img {
  width: 50%;
}

.banner__media-half.animate--fixed:nth-child(2) > img,
.banner__media-half.animate--zoom-in:nth-child(2) > img {
  left: 50%;
  width: 50%;
}

@media screen and (max-width: 749px) {
  .banner--stacked .animate--fixed:first-child > img,
  .banner--stacked .animate--zoom-in:first-child > img {
    width: 100%;
  }

  .banner--stacked .banner__media-half.animate--fixed:nth-child(2) > img,
  .banner--stacked .banner__media-half.animate--zoom-in:nth-child(2) > img {
    left: 0;
    width: 100%;
  }

  .banner--stacked .banner__media-half {
    width: 100%;
  }

  .banner--stacked .banner__media-half + .banner__media-half {
    order: 1;
  }
}

@media screen and (min-width: 750px) {
  .banner__media {
    height: 100%;
  }
}

.banner--adapt,
.banner--adapt_image.banner--mobile-bottom .banner__media:not(.placeholder) {
  height: auto;
}

@media screen and (max-width: 749px) {
  .banner--mobile-bottom .banner__media,
  .banner--stacked:not(.banner--mobile-bottom) .banner__media {
    position: relative;
  }

  .banner--stacked.banner--adapt .banner__content {
    height: auto;
  }

  .banner:not(.banner--mobile-bottom):not(.email-signup-banner) .banner__box {
    background: transparent;
  }

  .banner:not(.banner--mobile-bottom) .banner__box {
    border: none;
    border-radius: 0;
    box-shadow: none;
  }

  .banner:not(.banner--mobile-bottom) .button--secondary {
    --alpha-button-background: 0;
  }

  .banner--stacked:not(.banner--mobile-bottom):not(.banner--adapt) .banner__content {
    position: absolute;
    height: auto;
  }

  .banner--stacked.banner--adapt:not(.banner--mobile-bottom) .banner__content {
    max-height: 100%;
    overflow: hidden;
    position: absolute;
  }

  .banner--stacked:not(.banner--adapt) .banner__media {
    position: relative;
  }

  .banner::before {
    display: none !important;
  }

  .banner--stacked .banner__media-image-half {
    width: 100%;
  }
}

.banner__content {
  padding: 0;
  display: flex;
  position: relative;
  width: 100%;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

@media screen and (min-width: 750px) {
  .banner__content {
    padding: 5rem;
  }

  .banner__content--top-left {
    align-items: flex-start;
    justify-content: flex-start;
  }

  .banner__content--top-center {
    align-items: flex-start;
    justify-content: center;
  }

  .banner__content--top-right {
    align-items: flex-start;
    justify-content: flex-end;
  }

  .banner__content--middle-left {
    align-items: center;
    justify-content: flex-start;
  }

  .banner__content--middle-center {
    align-items: center;
    justify-content: center;
  }

  .banner__content--middle-right {
    align-items: center;
    justify-content: flex-end;
  }

  .banner__content--bottom-left {
    align-items: flex-end;
    justify-content: flex-start;
  }

  .banner__content--bottom-center {
    align-items: flex-end;
    justify-content: center;
  }

  .banner__content--bottom-right {
    align-items: flex-end;
    justify-content: flex-end;
  }
}

@media screen and (max-width: 749px) {
  .banner--mobile-bottom:not(.banner--stacked) .banner__content {
    order: 2;
  }

  .banner:not(.banner--mobile-bottom) .field__input,
  .banner--mobile-bottom:not(.banner--stacked) .banner__box.color-scheme-1 {
    background: transparent;
  }
}

.banner__box {
  padding: 4rem 1.5rem;
  position: relative;
  height: fit-content;
  align-items: center;
  text-align: center;
  width: 100%;
  word-wrap: break-word;
  z-index: 1;
}

.banner--mobile-bottom .banner__box {
  padding: 4rem 3.5rem;
}

@media screen and (min-width: 750px) {
  .banner__box {
    padding: 4rem 3.5rem;
  }

  .banner--desktop-transparent .banner__box {
    padding: 4rem 0;
    background: transparent;
    max-width: 89rem;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }

  .banner--desktop-transparent .button--secondary {
    --alpha-button-background: 0;
  }

  .banner--desktop-transparent .content-container:after {
    display: none;
  }
}

@media screen and (max-width: 749px) {
  .banner--mobile-bottom::after,
  .banner--mobile-bottom .banner__media::after {
    display: none;
  }
}

.banner::after,
.banner__media::after {
  content: '';
  position: absolute;
  top: 0;
  background: #000000;
  opacity: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
}

.banner__box > * + .banner__text {
  margin-top: 1.5rem;
}

@media screen and (min-width: 750px) {
  .banner__box > * + .banner__text {
    margin-top: 2rem;
  }
}

.banner__box > * + * {
  margin-top: 1rem;
}

.banner__box > *:first-child {
  margin-top: 0;
}

@media screen and (max-width: 749px) {
  .banner--stacked .banner__box {
    width: 100%;
  }
}

@media screen and (min-width: 750px) {
  .banner__box {
    width: auto;
    max-width: 71rem;
    min-width: 45rem;
  }
}

@media screen and (min-width: 1400px) {
  .banner__box {
    max-width: 90rem;
  }
}

.banner__heading {
  margin-bottom: 0;
}

.banner__box .banner__heading + * {
  margin-top: 1rem;
}

.banner__buttons {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 1rem;
  max-width: 45rem;
  word-break: break-word;
}

@media screen and (max-width: 749px) {
  .banner--content-align-mobile-right .banner__buttons--multiple {
    justify-content: flex-end;
  }

  .banner--content-align-mobile-center .banner__buttons--multiple > * {
    flex-grow: 1;
    min-width: 22rem;
  }
}

@media screen and (min-width: 750px) {
  .banner--content-align-center .banner__buttons--multiple > * {
    flex-grow: 1;
    min-width: 22rem;
  }

  .banner--content-align-right .banner__buttons--multiple {
    justify-content: flex-end;
  }
}

.banner__box > * + .banner__buttons {
  margin-top: 2rem;
}

@media screen and (max-width: 749px) {
  .banner:not(.slideshow) .rte a,
  .banner:not(.slideshow) .inline-richtext a:hover,
  .banner:not(.slideshow) .rte a:hover {
    color: currentColor;
  }
}

@media screen and (min-width: 750px) {
  .banner--desktop-transparent .rte a,
  .banner--desktop-transparent .inline-richtext a:hover,
  .banner--desktop-transparent .rte a:hover {
    color: currentColor;
  }
}