/** Shopify CDN: Minification failed

Line 733:18 Unexpected "{"
Line 733:27 Expected ":"
Line 737:18 Unexpected "{"
Line 737:27 Expected ":"
Line 742:18 Unexpected "{"
Line 742:27 Expected ":"
Line 750:18 Unexpected "{"
Line 750:27 Expected ":"

**/
/* ==========================================================
   [통합 완성본] 컬렉션 툴바 미니멀리즘 레이아웃 및 폰트 스타일 고정
   ========================================================== */

/* 1. 회색 가로선/세로선 및 배경색 완벽 제거 */
.collection-toolbar,
.height-observer\.collection-toolbar,
.collection-toolbar__button-list,
.collection-toolbar__button-container,
.collection-toolbar__button-container button,
.collection-toolbar__button {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* 테마 가상 요소로 들어가 있던 구분선들 완전 박멸 */
.collection-toolbar::before,
.collection-toolbar::after,
.height-observer\.collection-toolbar::before,
.height-observer\.collection-toolbar::after,
.shopify-section--collection-toolbar::before,
.shopify-section--collection-toolbar::after {
  display: none !important;
  content: none !important;
  height: 0 !important;
}

/* 2. 폰트 색상(#1c1c1c), 대소문자(Capitalize), 자간(Narrow) 설정 */
.collection-toolbar__button,
.collection-toolbar__button-container span {
  color: #1c1c1c !important;
  text-transform: capitalize !important; /* All Caps 고정을 풀고 첫 글자만 대문자로 변경 */
  font-size: 12px !important;             /* 폰트 크기 미세 축소 */
  letter-spacing: -0.03em !important;     /* 자간을 더 좁게(Narrow) 조정 */
  font-weight: 400 !important;
}

/* 화살표 아이콘 색상 및 크기 동기화 */
.collection-toolbar__button svg,
.collection-toolbar__button .icon {
  color: #1c1c1c !important;
  width: 11px !important;
  height: 11px !important;
}


/* ==========================================================
   [모바일 환경 저격] 수직 영역 유지 + 양끝 칼정렬 + 사진 상단 밀착
   ========================================================== */
@media screen and (max-width: 740px) {
  
  /* 3. 툴바 세로 영역(50px) 확보 및 글자들을 영역의 하단(flex-end)으로 정렬 */
  .collection-toolbar.full-bleed,
  .height-observer\.collection-toolbar {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-end !important;   /* 글씨들을 영역 맨 바닥으로 밀착 */
    height: 50px !important;             /* 툴바 수직 길이 유지 */
    padding-bottom: 6px !important;     /* 글자와 아래 사진 사이의 최소한의 바닥 여백 */
    padding-right: 14px !important;      /* 오른쪽 가방 사진 끝선과 칼매칭 */
    padding-left: 14px !important;       /* 왼쪽 가방 사진 끝선과 칼매칭 */
    box-sizing: border-box !important;
  }

  /* 내부 리스트 상자가 양극단으로 찢어지도록 공간 100% 개방 */
  .collection-toolbar__button-list {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-end !important;
    width: 100% !important;
  }

  /* 반반씩 너비를 공유하며 정렬을 방해하던 부모 상자 족쇄 해제 */
  div.collection-toolbar__button-container {
    flex: 0 0 auto !important;
    width: auto !important;
  }

  button.collection-toolbar__button.w-full {
    width: auto !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* 4. Filters는 좌측 끝정렬, Sort By는 우측 끝정렬 축 고정 */
  div.collection-toolbar__button-container:first-child span.justify-center {
    justify-content: flex-start !important;
    text-align: left !important;
  }

  div.collection-toolbar__button-container:last-child span.justify-center {
    justify-content: flex-end !important;
    text-align: right !important;
  }

  /* Sort By 우측 화살표 아이콘의 불필요한 여백 철거 및 밀착 */
  div.collection-toolbar__button-container:last-child span.justify-center svg,
  div.collection-toolbar__button-container:last-child span.justify-center .icon {
    margin-right: 0 !important;
    padding-right: 0 !important;
    margin-left: 4px !important; /* 글자와 화살표 사이의 미니멀한 간격 */
    transform: none !important;
  }

  /* 5. 상품 영역의 사진 시작 부분을 상단으로 완전히 끌어올리기 */
  .shopify-section--main-collection .v-stack {
    gap: 0 !important; /* 테마 기본 공백 박멸 */
  }
  
  .product-list {
    margin-top: -14px !important; /* 사진을 위로 끌어올려 글씨와 가깝게 붙이는 핵심 값 */
  }
}



/* ==========================================================
   Filter , Sort By 정렬 태블릿 전용 구간 (iPad)
   ========================================================== */

@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .sort-filter-wrapper {
    /* 상품 그리드와 동일한 최대 너비 설정 */
    max-width: 1200px; /* 실제 사용하는 그리드 최대 너비로 변경하세요 */
    margin: 0 auto; /* 중앙 정렬 */
    padding-right: 20px; /* 상품 그리드의 여백과 맞추기 */
    display: flex;
    justify-content: flex-end; /* 우측 정렬 유지 */
  }
}




/* ==========================================================
   [마토니 디테일업] FILTER & SORT BY 기본 색상 및 투명도 100% 강제 고정
   ========================================================== */

/* 1. 버튼 전체와 내부 글자(span)의 투명도(opacity) 족쇄 해제 및 색상 강제 덮어쓰기 */
button.collection-toolbar__button,
button.collection-toolbar__button span,
button.collection-toolbar__button .text-with-icon {
  color: #1c1c1c !important;
  -webkit-text-fill-color: #1c1c1c !important; /* 사파리/모바일 브라우저 색상 강제 고정 */
  opacity: 1 !important; /* 테마가 숨겨둔 반투명(흐림) 효과 완벽 제거 */
}

/* 2. Sort By 옆 화살표 아이콘(SVG) 역시 호버 전/후 상관없이 항상 진하게 고정 */
button.collection-toolbar__button svg,
button.collection-toolbar__button .icon,
button.collection-toolbar__button-container:last-child span.justify-center svg {
  color: #1c1c1c !important;
  fill: #1c1c1c !important; /* 아이콘 내부 채움 색상 고정 */
  opacity: 1 !important;
}

/* 3. 마우스 호버(올렸을 때) 시에도 색상이 변하거나 깜빡이지 않도록 쐐기 박기 */
button.collection-toolbar__button:hover,
button.collection-toolbar__button:hover span,
button.collection-toolbar__button:hover svg {
  color: #1c1c1c !important;
  opacity: 1 !important;
}


/* ==========================================================
   [마토니 디테일업] Sort By 옆 화살표 아이콘 완벽 제거
   ========================================================== */

/* Sort By 버튼 내부의 SVG 화살표 아이콘을 화면에서 완전히 숨김 */
div.collection-toolbar__button-container:last-child svg,
div.collection-toolbar__button-container:last-child .icon,
.collection-toolbar__button[data-action="open-sort"] svg {
  display: none !important;
}

/* ==========================================================
   [마토니 디테일업] 필터 & 정렬 툴바 스크롤 상단 고정(Sticky) 해제
   ========================================================== */

/* 툴바가 화면을 따라다니지 않고 원래 자리에 머물도록 고정 해제 */
.collection-toolbar,
.height-observer\.collection-toolbar,
.shopify-section--main-collection .collection-toolbar,
#shopify-section-collection-toolbar {
  position: static !important;
  top: auto !important;
  transform: none !important;
  z-index: auto !important;
}


/* ==========================================================
   [마토니 데스크탑] 사진 고정 + 텍스트 하강 + 끝선/간격 초정밀 세팅
   ========================================================== */

@media screen and (min-width: 741px) {
  
  /* 1. 팝업 오류 방지용 레이어 설정 */
  .collection-toolbar,
  .height-observer\.collection-toolbar {
    position: relative !important;
    z-index: 50 !important; 
  }

  /* 2. 상품 사진 영역 고정 */
  .shopify-section--main-collection .v-stack {
    gap: 0 !important;
  }
  .collection-toolbar + .collection,
  .product-list {
    margin-top: 0px !important; 
  }

  /* 3. 글자 위치 및 끝선/간격 세팅 */
  .collection-toolbar__button-list {
    position: relative !important;
    top: 10px !important; /* 텍스트 하강 간격 */
    
    display: flex !important;
    justify-content: flex-end !important;
    gap: 15px !important; /* ★ 여기서 두 글자 사이 간격을 조절하세요 (예: 10px, 8px) ★ */
    padding-right: 50px !important; /* 대표님이 찾으신 완벽한 끝선 맞춤 수치! */
  }

  /* 4. 컨테이너 족쇄 해제 */
  .collection-toolbar__button-list .collection-toolbar__button-container {
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    min-width: 0 !important;
    flex: 0 0 auto !important; 
  }

  /* 5. 버튼 내부 숨은 좌우 범퍼(여백) 완전 박멸 (이게 있어야 gap이 정확히 먹힙니다) */
  .collection-toolbar__button,
  .collection-toolbar__button span.text-with-icon {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;
  }
}




/* ==========================================================
   [마토니 하이엔드 무드] 상품 정보 상자 확장 및 사진 초밀착
   ========================================================== */

/* 1. 상품 카드 전체를 묶는 뼈대의 기본 간격(gap) 강제 제거 */
product-card {
  align-items: flex-start !important;
  justify-items: start !important;
  gap: 0 !important; /* 테마에 숨은 그리드 간격 제거 */
}

/* 2. 사진을 감싸는 영역(Figure)의 하단 여백 완벽 박멸 */
product-card .product-card__figure,
product-card .product-card__media {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* 3. 텍스트 상자 밀착 (마이너스 수치로 더 끌어올리기) */
product-card .product-card__info {
  width: 100% !important;
  text-align: left !important;
  margin-top: -15px !important; /* ★ 0으로도 멀다면 -5px, -10px, -15px로 숫자를 키워 강제로 바짝 붙이세요! */
}

/* 4. 내부 텍스트(이름/가격) 묶음 확장 및 간격 유지 */
product-card .product-card__info .v-stack {
  width: 100% !important;
  align-items: flex-start !important;
  justify-items: start !important;
  gap: 0px !important; 
}

/* ==========================================================
   [마토니 하이엔드 무드] 컬러 카운트 좌측 정렬 및 간격 초밀착
   ========================================================== */

/* 1. 컬러 카운트(3 COLORS AVAILABLE) 텍스트 강제 좌측 정렬 */
product-card .product-card__info p.smallcaps {
  text-align: left !important;
  width: 100% !important;
  
  /* 가격 텍스트와의 간격 (이름-가격 간격과 동일한 2px 세팅) */
  margin-top: -10px !important; 
  margin-bottom: 0 !important;
}

/* 2. 이름/가격을 묶고 있는 윗동네 상자가 가진 불필요한 하단 여백 박멸 */
product-card .product-card__info > .v-stack {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}


/* ==========================================================
   [마토니 디테일업] 가격 및 컬러 카운트 폰트 사이즈 절대 강제
   ========================================================== */

/* 1. 가격을 구성하는 모든 깊숙한 태그들을 잡아내서 사이즈 강제 축소 */
product-card .product-card__info price-list,
product-card .product-card__info .price-list,
product-card .product-card__info .price-list span,
product-card .product-card__info .price-list sale-price,
product-card .product-card__info .price {
  font-size: 11px !important; 
  font-weight: 400 !important; /* 미니멀리즘을 위해 굵기 축소 */
}

/* ==========================================================
   [마토니 디테일업] 컬러 폰트 스타일: 대문자(All Caps) 제거 및 정갈한 텍스트로 전환
   ========================================================== */

/* 1. 컬러 텍스트의 강제 대문자 족쇄(smallcaps) 해제 및 일반 텍스트화 */
product-card .product-card__info p.smallcaps {
  text-transform: none !important; /* 대문자 스타일 제거 */
  font-size: 11px !important;      /* 폰트 사이즈 고정 */
  letter-spacing: -0.02em !important; /* 미니멀한 자간 설정 */
  font-weight: 400 !important;     /* 레귤러 굵기 */
  color: #1c1c1c !important;       /* 폰트 색상 */
}



/* ==========================================================
   [마토니 상세페이지] Add to cart 장바구니 버튼 보더 강제 주입
   ========================================================== */

/* HTML 구조 상 buy-buttons 바로 밑에 있는 button 태그를 직접 타격 */
buy-buttons > button.button,
buy-buttons > .button.w-full,
form[action="/cart/add"] button[type="submit"] {
  /* 1. 두께 1px, 컬러 #1c1c1c 보더 강제 생성 */
  border: 1px solid #1c1c1c !important;
  
  /* 2. 미니멀한 무드를 위해 둥근 모서리 직각화 */
  border-radius: 0px !important;
  
  /* 3. 테마의 인라인 CSS 변수 무력화 및 색상 고정 */
  background: #ffffff !important;
  color: #1c1c1c !important;
  
  /* 4. 그림자나 다른 테두리 족쇄 박멸 */
  box-shadow: none !important;
  outline: none !important;
}






/* ==========================================================================
   /* --- Collapsible text(아코디언) 메뉴 수직 간격 조절 ---
   ========================================================================== */

.accordion summary,
.accordion__toggle {
  padding-top: 5px !important;  
  padding-bottom: 5px !important;
}

.accordion {
  margin-bottom: 0px !important;
}





/* ==========================================================================
   Mattoni Custom : Contact Form Minimalist Underline Style (Updated)
   ========================================================================== */

/* 기본 박스 테두리 제거 및 밑줄 생성 */
.shopify-section--contact .input,
.shopify-section--contact .textarea {
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 1px solid #d3d3d3 !important; /* 연한 회색 선 */
    background-color: transparent !important;
    border-radius: 0 !important;
    padding-left: 0 !important; /* 텍스트 좌측 밀착 */
    padding-right: 0 !important;
    box-shadow: none !important;
}

/* 마우스 클릭(포커스) 시 딥블랙 선으로 변경 */
.shopify-section--contact .input:focus,
.shopify-section--contact .textarea:focus {
    outline: none !important;
    border-bottom: 1px solid #1c1c1c !important; /* Mattoni 딥블랙 */
    box-shadow: none !important;
}

/* 배경색 채움 현상 방지 (자동완성 시) */
.shopify-section--contact .input:-webkit-autofill,
.shopify-section--contact .textarea:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 30px white inset !important;
    -webkit-text-fill-color: #000 !important;
}

/* Name, E-mail 등 라벨 텍스트 좌측 밀착 정렬 */
.shopify-section--contact .floating-label {
    left: 0 !important;
}


/* ==========================================================================
   Mattoni Custom : Contact Form Layout & Button 
   ========================================================================== */

/* 1. Name과 E-mail을 각각 한 줄씩 세로로 배치 */
.shopify-section--contact .fieldset-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.25rem !important; /* 다른 입력 칸들과 동일한 간격 유지 */
}

/* 2. Send Message 버튼 테두리 및 미니멀 스타일링 */
.shopify-section--contact button[type="submit"] {
    border: 1px solid #1c1c1c !important; /* 딥블랙 테두리 */
    background-color: transparent !important; /* 배경 투명 */
    color: #1c1c1c !important; /* 폰트 색상 딥블랙 */
    border-radius: 0 !important; /* 각진 모서리 */
    padding: 14px 28px !important; /* 버튼 안쪽 여백 조정 */
    text-transform: none !important; /* 대문자 강제 해제 (원래 입력된 대소문자 유지) */
    letter-spacing: 0.03em !important; /* 자간 살짝 넓게 */
    transition: all 0.3s ease !important; /* 부드러운 전환 효과 */
    width: 100% !important; /* 가로 꽉 차게 유지 */
}



/* ==========================================================================
   Mattoni Custom : Contact Form Success Message (No Border, Left Align)
   ========================================================================== */

.shopify-section--contact .banner--success {
    background-color: #ffffff !important; /* 흰색 바탕 */
    border: none !important; /* 테두리 완벽히 제거 */
    color: #1c1c1c !important; /* 텍스트 딥블랙 */
    border-radius: 0 !important;
    padding: 15px 0 !important; /* 좌우 여백을 0으로 만들어 아래 입력칸과 선 맞춤 */
    text-align: left !important; /* 좌측 정렬 */
    font-weight: 400 !important;
    letter-spacing: 0.03em !important;
    margin-bottom: 2rem !important; /* 폼과의 간격 확보 */
}


/* ==========================================================================
   Mattoni Custom : Contact Us Title Left Align & Font
   ========================================================================== */

/* 1. 타이틀을 감싸는 컨테이너를 좌측으로 이동 */
.shopify-section--contact .section-header {
    justify-self: start !important; 
    text-align: left !important;
    width: 100% !important;
}

/* 2. 타이틀 폰트 디테일 및 좌측 정렬 */
.shopify-section--contact .section-header .h2 {
    text-align: left !important; /* 좌측 정렬 */
    color: #1c1c1c !important; /* 딥블랙 색상 */
    font-size: 18px !important; /* 사이즈 축소 */
    font-weight: 400 !important; /* 얇은 굵기 */
    letter-spacing: 0.03em !important; /* 넓은 자간 */
    margin-bottom: 30px !important; /* 폼과의 여백 */
    margin-top: 0 !important;
}



/* ==========================================================================
   [MATTONI] 섹션 헤더 타이틀(About MATTONI 등) H2 폰트 사이즈 조절
   ========================================================================== */
.section-header h2.h2 {
  font-size: 15px !important; /* 데스크탑 폰트 크기 (원하시는 대로 숫자 조절) */
  font-weight: 400 !important; /* 조용하고 미니멀한 무드를 위한 얇은 굵기 */
  letter-spacing: 0.00em !important;
  margin-bottom: 30px !important; /* 타이틀과 아래 사진 사이의 간격 넓히기 */
  margin-top: 30px !important; /* 타이틀 위로 마진 두기 */
}

/* 모바일 화면(768px 이하) 비율 맞춤 */
@media screen and (max-width: 768px) {
  .section-header h2.h2 {
    font-size: 15px !important; /* 모바일 폰트 크기 */
    font-weight: 400 !important; /* 조용하고 미니멀한 무드를 위한 얇은 굵기 */
     letter-spacing: 0.00em !important;
    margin-bottom: 12px !important; /* 모바일 하단 여백 */
  }
}




/* ==========================================================================
   [MATTONI] Footer Menu 페이지 문구 문단 간격 조절
   ========================================================================== */

/* prose 클래스 내부의 모든 문단과 리스트 항목 간격 강제 조정 */
.prose p, 
.prose ul, 
.prose ol, 
.prose h3, 
.prose h4 {
  margin-top: 0.2rem !important;
  margin-bottom: 0.2rem !important;
}

/* Shopify 페이지 컨테이너 자체의 여백도 줄이기 */
.section-stack {
  gap: 0.2rem !important;
}

/* 1. 글자 위아래 기본 줄 간격 좁히기 */
.prose p, 
.prose ul, 
.prose ol, 
.prose li {
  line-height: 1.4 !important; 
}




/* ==========================================================================
   [MATTONI] 배송비 테이블 레이아웃 전체 고정 (데스크탑 포함)
   ========================================================================== */

/* 데스크탑과 모바일 전체에 적용 */
.prose table {
  table-layout: fixed; /* 모든 열을 균등하게 강제 고정 */
  width: 100% !important;
}

/* 모바일에서만 글자 크기와 패딩 조절 */
@media screen and (max-width: 768px) {
  .prose table {
    font-size: 12px;
  }

  .prose table td, 
  .prose table th {
    padding: 6px 4px !important;
    word-wrap: break-word;
  }
}



/* ==========================================================================
   Footer Newsletter Customization (Contact Us Form Style)
   ========================================================================== */

/* 1. Newsletter 이메일 입력칸 기본 상태 (연한 회색 선) */
.shopify-section--footer .footer__block--newsletter .input {
  border: none !important;
  border-bottom: 1px solid rgb(var(--border-color)) !important; /* 기본은 연한 테두리 색상 */
  border-radius: 0 !important;
  padding-inline-start: 0 !important;
  padding-inline-end: 0 !important;
  background-color: transparent !important;
  box-shadow: none !important;
  transition: border-color 0.3s ease !important; /* 부드러운 색상 전환 */
}

/* 1-1. 입력칸 클릭(포커스) 시 상태 (검정색 선) */
.shopify-section--footer .footer__block--newsletter .input:focus,
.shopify-section--footer .footer__block--newsletter .input:focus-visible {
  border-bottom: 1px solid rgb(var(--text-color)) !important; /* 클릭 시 검정색으로 변경 */
  outline: none !important;
  box-shadow: none !important;
}

/* 테마의 기본 Floating Label 테두리 효과 숨김 처리 */
.shopify-section--footer .footer__block--newsletter .form-control::before,
.shopify-section--footer .footer__block--newsletter .form-control::after {
  display: none !important;
}

/* 2. Newsletter Subscribe 버튼 디자인 */
.shopify-section--footer .footer__block--newsletter .button {
  background: transparent !important; /* 배경 투명하게 */
  color: rgb(var(--text-color)) !important; /* 글씨 검정 */
  border: 1px solid rgb(var(--text-color)) !important; /* 테두리 뚜렷하게 검정으로 고정 */
  border-radius: var(--button-border-radius, 0) !important;
  width: 100% !important; 
  margin-top: 0.5rem;
  transition: all 0.3s ease !important;
}

/* 2-1. 마우스 오버 시 살짝 투명해지는 효과 */
.shopify-section--footer .footer__block--newsletter .button:hover {
  opacity: 0.7; 
}



/* ==========================================================================
   Footer Newsletter Success Message (Contact Us Style)
   ========================================================================== */
.shopify-section--footer .footer__block--newsletter .banner--success {
  background-color: transparent !important; /* 푸터 배경에 자연스럽게 스며들도록 투명 처리 */
  border: none !important; /* 녹색 테두리 완벽히 제거 */
  color: #1c1c1c !important; /* 텍스트 딥블랙 */
  border-radius: 0 !important;
  padding: 15px 0 !important; /* 좌우 여백을 0으로 만들어 기존 텍스트들과 좌측 정렬 라인 맞춤 */
  text-align: left !important;
  font-weight: 400 !important;
  letter-spacing: 0.03em !important;
  margin-bottom: 1rem !important; /* 푸터 레이아웃에 맞춘 간격 */
}

/* 성공 메시지 내부 아이콘(체크 모양 등)이 있다면 숨김 처리하여 텍스트만 깔끔하게 남기기 (선택 사항) */
.shopify-section--footer .footer__block--newsletter .banner--success svg {
  display: none !important;
}




/* ==========================================================================
   Filter Availability 옵션 수정 - 선택 전 테두리 숨김 & 선택 시 활성화
   ========================================================================== */

/* 1. 기본 체크박스/라디오 버튼 요소 화면에서 완전히 숨기기 */
.checkbox-control input[type="checkbox"]:not(.switch),
.checkbox-control input[type="radio"]:not(.switch) {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
  appearance: none;
}

/* 2. 테마에서 가상 요소나 SVG로 만든 동그란 불릿 아이콘 강제 삭제 */
.checkbox-control input[type="checkbox"]:not(.switch) + label::before,
.checkbox-control input[type="checkbox"]:not(.switch) + label::after,
.checkbox-control input[type="checkbox"]:not(.switch) + label svg,
.checkbox-control input[type="radio"]:not(.switch) + label::before,
.checkbox-control input[type="radio"]:not(.switch) + label::after,
.checkbox-control input[type="radio"]:not(.switch) + label svg {
  display: none !important;
}

/* 3. 텍스트 라벨을 콤팩트한 버튼 형태로 디자인 (선택 전 테두리 투명) */
.checkbox-control input[type="checkbox"]:not(.switch) + label,
.checkbox-control input[type="radio"]:not(.switch) + label {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px !important;    
  font-size: 12px !important;     
  width: fit-content !important;  
  margin-left: 0 !important;
  border: 1px solid transparent !important; /* 선택 전 테두리 투명 */
  color: #888888; 
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

/* 4. 옵션이 선택되었을 때 (클릭 시) 블랙 테두리 생성 및 텍스트 강조 */
.checkbox-control input[type="checkbox"]:not(.switch):checked + label,
.checkbox-control input[type="radio"]:not(.switch):checked + label {
  border: 1px solid #1c1c1c !important; /* 선택 시 테두리 노출 */
  color: #1c1c1c !important; 
  font-weight: 500 !important;
  padding: 3px 8px !important; 
  margin-left: 0 !important;
  transform: none !important;
}



/* ==========================================================================
   Filter Price 옵션 - 입력창 테두리 스타일 수정 (1px 고정)
   ========================================================================== */

/* 1. 기본 상태: 얇은 회색 테두리 */
.facets-drawer .input-prefix {
    border: 1px solid #e0e0e0 !important;
    box-shadow: none !important;
    transition: border-color 0.2s ease !important;
}

/* 2. 클릭(포커스) 시: 1px 두께의 블랙 테두리만 남기고 그림자 제거 */
.facets-drawer .input-prefix:focus-within {
    border: 1px solid #1c1c1c !important;
    box-shadow: none !important;
    outline: none !important;
}

/* 3. 인풋 필드 자체의 기본 아웃라인 및 그림자 완벽 차단 */
.facets-drawer .input-prefix .field {
    outline: none !important;
    box-shadow: none !important;
    border: none !important; /* 인풋 내부 테두리 제거 */
    background: transparent !important;
}





/* ==========================================================================
   상품 페이지 Filter 옵션 디자인 수정 (좌측 정렬 및 콤팩트한 패딩)
   ========================================================================== */
#shopify-section-{{ section.id }} .active-facets {
  justify-content: flex-start !important;
}

#shopify-section-{{ section.id }} .active-facets__list {
  justify-content: flex-start !important;
}

/* 필터(Facet) 디자인: 콤팩트한 여백 설정 유지 */
#shopify-section-{{ section.id }} .removable-facet {
  padding: 2px 8px !important;      
  margin-right: 6px !important;     
  display: inline-flex;
  align-items: center;
}

/* 필터 내부 텍스트: 기존 설정한 폰트 사이즈 유지 */
#shopify-section-{{ section.id }} .removable-facet .text-subdued {
  font-size: 0.8rem !important;     
}







/* ==========================================================================
   상품 페이지: 필터(Active Facets)와 상품 목록 사이 간격 제거
   ========================================================================== */

/* 1. 필터 영역 하단 여백 제거 */
#shopify-section-template--19085319503943__main .active-facets {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* 2. 상품 목록 상단 여백 제거 */
#shopify-section-template--19085319503943__main .product-list {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* 3. 혹시 모를 컨테이너 간의 gap 제거 (Flex/Grid 레이아웃일 경우 대비) */
#shopify-section-template--19085319503943__main .collection__main {
  gap: 15px !important;
}





/* ==========================================================================
   Cart Drawer 내 Checkout 버튼 테두리 추가
   ========================================================================== */

   .cart-drawer button[name="checkout"] {
  border: 1px solid #1c1c1c; /* 테두리 두께(2px)와 색상(#000000)을 원하시는 대로 변경하세요 */
  /* 필요한 경우 아래 속성들의 주석을 해제하여 조정하세요 */
  /* border-radius: 4px; */ /* 모서리 둥글기 */
  /* box-sizing: border-box; */ /* 테두리가 버튼 크기에 포함되도록 함 */
}






/* ==========================================================================
   Cart Drawer 내 Pre-order 와 Combined order에 대한 announcement 문구
   ========================================================================== */

   .cart-drawer__items {
  position: relative;
  /* 상품 리스트 하단에 여백을 주어 안내문이 겹치지 않게 함 */
  padding-bottom: 60px; 
}

/* 2. 안내문을 가상 요소로 생성 */
.cart-drawer__items::after {
  content: "* Pre-orders: Expected to ship in approximately 2 weeks. \A * Combined orders: Entire order will be held and shipped together once all items are ready.";
  white-space: pre-line; /* \A 줄바꿈 적용 */
  
  
  /* 텍스트 스타일링 */
  font-size: 0.9em;
  color: #333;
  text-align: start;
  box-sizing: border-box;
}


/* ==========================================================================
   1. 인스타그램 아이콘 기본 설정 (데스크탑/태블릿): 하단 여백 제거 및 우측 정렬
   ========================================================================== */

.social-media {
  margin-bottom: 0px !important;
  justify-content: flex-end !important; 
}

/* 2. 모바일 전용 설정 (화면 너비 749px 이하): 좌측 정렬로 덮어쓰기 */
@media screen and (max-width: 749px) {
  .social-media {
    justify-content: flex-start !important; /* 모바일에서는 왼쪽으로 정렬 */
  }
}


/* ==========================================================================
   쇼피파이가 자동 생성하는 구글 프로필 이미지 강제로 숨기기 & "Account" 텍스트로 교체
   ========================================================================== */

.account-button__avatar-image {
    display: none !important;
}

/* 프로필 이미지 자리에 'Account' 텍스트 생성하기 */
.account-button::after {
    content: "Account";
    font-size: 14px; 
    font-weight: 500;
    margin-left: 5px;
    display: inline-block;
}




/* ==========================================================================
   Password 페이지: Notify Me Button Black & White Style
   ========================================================================== */
.shopify-section--main-password .button {
  background: #000000 !important; /* background-image(그라데이션)까지 완벽하게 덮어쓰기 */
  color: #ffffff !important;
  border: 1px solid #000000 !important;
  -webkit-text-fill-color: #ffffff !important; /* 글자색 흰색 강제 고정 */
}

.shopify-section--main-password .button:hover {
  background: #333333 !important; /* 마우스 올렸을 때의 이불(hover gradient)도 덮어쓰기 */
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}





/* ==========================================================================
   Main Password 페이지에서 소셜 미디어 아이콘 리스트를 중앙 정렬
   ========================================================================== */

.password__social .social-media {
  display: flex;
  justify-content: center;
  list-style: none;
  padding: 0;
}

/* 각 아이콘 사이의 간격 조정 */
.password__social .social-media__item {
  margin: 0 10px;
}




/* ==========================================================================
   Password 페이지 인스타그램(소셜 미디어) 아이콘 테두리 완벽 제거 & 아이콘 색 검정으로
   ========================================================================== */
.shopify-section--main-password .social-media__item {
  outline: none !important;
  border: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

/* Password 페이지 인스타그램 아이콘 검정색으로 고정 (모바일 터치 환경 포함) */
.shopify-section--main-password .social-media__item,
.shopify-section--main-password .social-media__item svg {
  color: #000000 !important;
}