/** Shopify CDN: Minification failed

Line 6467:0 Expected "}" to go with "{"

**/
/* =========================================================
   Toast Notification System for Wishlist
   ========================================================= */

.wishlist-toast {
  position: fixed;
  top: 20px;
  right: 20px;
  background: #000000;
  color: #FF4596;
  border: 2px solid #FF4596;
  padding: 12px 20px;
  border-radius: 24px;
  font-family: 'Sukhumvit Set', 'Helvetica Neue', Helvetica, 'Pretendard', sans-serif;
  font-weight: 500;
  font-size: 14px;
  z-index: 9999;
  transform: translateX(100%);
  opacity: 0;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  max-width: 300px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.wishlist-toast.show {
  transform: translateX(0);
  opacity: 1;
}

.wishlist-toast.added {
  background: #000000;
  color: #FF4596;
  border: 2px solid #FF4596;
}

.wishlist-toast.removed {
  background: #000000;
  color: #FF4596;
  border: 2px solid #FF4596;
}

.wishlist-toast-icon {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

/* =========================================================
   Manual Wishlist Button - No XB Dependencies
   ========================================================= */

/* Position wrapper on product cards */
.card__wishlist-wrapper {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  z-index: 10 !important;
  width: 48px;
  height: 48px;
}

/* Manual wishlist button - ON PRODUCT CARDS ONLY */
.card__wishlist-wrapper .manual-wishlist-btn {
  position: relative;
  display: block;
  width: 48px;
  height: 48px;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  margin: 0;
}

/* Circle background - 48x48, black with 40% opacity - PRODUCT CARDS ONLY */
.card__wishlist-wrapper .manual-wishlist-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 48px;
  height: 48px;
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 50%;
  z-index: 1;
}

/* Heart icon - centered within circle - PRODUCT CARDS */
.card__wishlist-wrapper .manual-wishlist-btn svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 24px;
  height: 24px;
  z-index: 2;
  pointer-events: none;
  transition: all 0.2s ease;
}

/* Not in wishlist - white outline - PRODUCT CARDS */
.card__wishlist-wrapper .manual-wishlist-btn svg path {
  fill: none;
  stroke: #ffffff;
  stroke-width: 2px;
  transition: all 0.2s ease;
}

/* In wishlist - filled white - PRODUCT CARDS */
.card__wishlist-wrapper .manual-wishlist-btn.in-wishlist svg path {
  fill: #ffffff;
  stroke: #ffffff;
  stroke-width: 0;
}

/* Mobile adjustments */
@media screen and (max-width: 749px) {
  .card__wishlist-wrapper {
    top: 8px !important;
    right: 8px !important;
  }
}

/* =========================================================
   Manual Wishlist Page Styles
   ========================================================= */

/* Wishlist products container */
.wishlist-products-container {
  display: block;
  width: 100%;
  padding: 2rem 0;
}

/* Empty wishlist state */
.wishlist-empty {
  text-align: center;
  grid-column: 1 / -1;
}

.wishlist-empty__image {
  max-width: 1600px;
  width: 100%;
  height: auto;
  margin: 0 auto;
  display: block;
}

/* Wishlist items list */
.wishlist-products-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 1200px;
  margin: 0 auto;
}

/* Individual wishlist item - enhanced design */
.wishlist-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  padding: 2rem;
  background: #fff;
  transition: all 0.3s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.wishlist-item:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border-color: #d5d5d5;
  transform: translateY(-2px);
}

.wishlist-item__image-link {
  flex-shrink: 0;
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  background: #f9f9f9;
}

.wishlist-item__image {
  width: 180px;
  height: 180px;
  overflow: hidden;
  border-radius: 10px;
}

.wishlist-item__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.wishlist-item:hover .wishlist-item__image img {
  transform: scale(1.05);
}

.wishlist-item .card__content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0.5rem 0;
}

.wishlist-item .card__information {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Brand name - gray text */
.wishlist-item__brand {
  font-size: 1.5rem;
  font-weight: 500;
  color: #999;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Product title - large and bold */
.wishlist-item__product-title {
  margin: 0;
  line-height: 1.2;
}

.wishlist-item__product-title a {
  color: #111;
  text-decoration: none;
  font-weight: 600;
  font-size: 3rem;
  line-height: 1.2;
  transition: color 0.2s ease;
}

.wishlist-item__product-title a:hover {
  color: #000;
  text-decoration: underline;
}

/* Prices container */
.wishlist-item__prices {
  margin-top: 0.5rem;
}

.wishlist-item__price-row {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Sale price - black, bold */
.wishlist-item__sale-price {
  font-size: 2.5rem;
  font-weight: 700;
  color: #111;
  letter-spacing: -0.02em;
}

/* Original price - gray, strikethrough */
.wishlist-item__original-price {
  font-size: 2.5rem;
  font-weight: 500;
  color: #999;
  text-decoration: line-through;
  letter-spacing: -0.02em;
}

/* Regular price (when no sale) */
.wishlist-item__regular-price {
  font-size: 2.5rem;
  font-weight: 700;
  color: #111;
  letter-spacing: -0.02em;
}

.wishlist-item__remove {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 40px;
  height: 40px;
  background: #fff;
  border: 2px solid #e5e5e5;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: all 0.25s ease;
  z-index: 10;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.wishlist-item__remove:hover {
  background: #FF4596;
  border-color: #FF4596;
  transform: scale(1.1) rotate(90deg);
  box-shadow: 0 4px 12px rgba(255, 68, 68, 0.3);
}

.wishlist-item__remove svg {
  fill: #666;
  display: block;
  transition: fill 0.25s ease;
}

.wishlist-item__remove:hover svg {
  fill: #ffffff;
}

/* Hide Swym/XB injected elements */
#swym-wishlist-render-container,
xb-wishlist-page,
.xb-wishlist-page {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Mobile adjustments */
@media screen and (max-width: 749px) {
  .wishlist-item {
    flex-direction: column;
    padding: 1.5rem;
    gap: 1.5rem;
  }

  .wishlist-item__image-link {
    width: 100%;
  }

  .wishlist-item__image {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
  }

  .wishlist-item__image img {
    aspect-ratio: 1 / 1;
  }

  .wishlist-item__product-title a {
    font-size: 1.75rem;
  }

  .wishlist-item__sale-price,
  .wishlist-item__original-price,
  .wishlist-item__regular-price {
    font-size: 1.5rem;
  }

  .wishlist-item__remove {
    top: 0.75rem;
    right: 0.75rem;
    width: 36px;
    height: 36px;
  }
}

/* =========================================================
   Rolling Banner Section - Custom Padding Top
   ========================================================= */

/* Add padding-top: 144px to rolling banner section specifically */
.section-rolling-banner {
  padding-top: 144px !important;
}

/* =========================================================
   Blog Slider Section - Max Width and Full Width Content
   ========================================================= */

/* Apply max-width: 1400px and center alignment to blog slider section */
.shopify-section:has(.blog-slider.section) {
  max-width: 1400px;
  width: 100%;
  margin-inline: auto;
  box-sizing: border-box;
}

/* Ensure page-width container fills full width without additional padding */
.shopify-section:has(.blog-slider.section) .page-width {
  max-width: none !important;
  width: 100% !important;
  padding-inline: 0 !important;
}

/* =========================================================
   Brand Info Section - Max Width and Custom Padding
   ========================================================= */

/* Apply max-width: 1400px and center alignment to brand info section */
/* 데스크톱 기본 설정 */
.shopify-section:has(.bi.section) {
  max-width: 1400px;
  width: 100%;
  margin-inline: auto;
  box-sizing: border-box;
}

/* 모바일에서 shopify-section 루트에 좌우 16px 패딩 적용 */
@media (max-width: 749px) {
  .shopify-section:has(.bi.section) {
    padding-left: 16px !important;
    padding-right: 16px !important;
    max-width: 100% !important;
  }
}

/* Ensure page-width container fills full width without additional padding */
.shopify-section:has(.bi.section) .page-width {
  max-width: none !important;
  width: 100% !important;
  padding-inline: 0 !important;
}

/* Custom padding for this Brand Info section: top 88px, sides 0, bottom 216px */
/* 데스크톱에서만 상하 패딩 적용 (좌우는 0) */
@media (min-width: 750px) {
  .shopify-section .bi.section {
    padding: 88px 0 216px !important;
  }

  /* Alternative selector in case of different structure */
  .shopify-section:has(.bi.section) .bi {
    padding: 88px 0 216px !important;
  }
}

/* 모바일에서는 상하 패딩만 적용 (좌우는 shopify-section에서 처리) */
@media (max-width: 749px) {
  .shopify-section .bi.section {
    padding: 40px 0 !important;
  }

  .shopify-section:has(.bi.section) .bi {
    padding: 40px 0 !important;
  }
}

/* Remove any external margins that might cause horizontal spacing */
.shopify-section .bi.section,
.shopify-section:has(.bi.section) .bi {
  margin-inline: 0 !important;
}

/* Ensure bi__inner grid doesn't add unwanted margins */
.shopify-section .bi.section .bi__inner,
.shopify-section:has(.bi.section) .bi__inner {
  margin-inline: 0 !important;
}

/* =========================================================
   Card List Section - Max Width and Full Width Content
   ========================================================= */

/* Apply max-width: 1400px and center alignment to card list section */
.shopify-section:has(.section-card-list) {
  max-width: 1400px;
  width: 100%;
  margin-inline: auto;
  background-color: #F8F9FB;

}

/* Ensure page-width container fills full width without additional padding */
.shopify-section:has(.section-card-list) .page-width {
  max-width: none !important;
  width: 100% !important;
  padding-inline: 0 !important;
}

/* 모바일에서 좌우 16px 패딩 적용 */
@media (max-width: 749px) {
  .shopify-section:has(.section-card-list) {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* Ensure card list items don't have unwanted horizontal margins */
.shopify-section .section-card-list .card-list__item {
  margin-inline: 0;
}

@media screen and (max-width: 749px) {
  .wishlist-toast {
    top: 10px;
    right: 10px;
    left: 10px;
    max-width: none;
    text-align: center;
    justify-content: center;
  }
}

/* Targeted Wishlist Modal Hiding - Only hide variant selector modal */

/* Hide ONLY the variant selector modal that causes the white screen issue */
.swym-variant-select-modal,
div.swym-modal.swym-variant-select-modal {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Also hide the modal background overlay when variant selector appears */
.swym-variant-select-modal + .swym-modal-bg,
.swym-variant-select-modal .swym-modal-bg {
  display: none !important;
}

/* CSS-based text replacement for Swym modal buttons */
/* Hide original "Add to list" text and replace with "Confirm" */

.swym-modal button[data-action*="add-to-wishlist"],
.swym-modal button[aria-label*="Add to"],
.swym-modal .swym-button[data-action*="add"],
.swym-modal button:has-text("Add to list"),
.swym-modal button:has-text("Add to wishlist") {
  font-size: 0 !important; /* Hide original text */
  position: relative !important;
  background-color: #FF4596 !important;
  color: white !important;
  border: 2px solid #FF4596 !important;
  border-radius: 6px !important;
  padding: 12px 24px !important;
  font-family: 'Prompt', sans-serif !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  min-width: 100px !important;
  min-height: 40px !important;
}

/* =========================================================
   Rolling Banner Section - Max Width and Padding Customization
   ========================================================= */

/* Apply max-width 1400px and center alignment to rolling banner section */
.shopify-section[class*="rolling_banner"] {
  max-width: 1400px;
  width: 100%;
  margin-inline: auto;
  box-sizing: border-box;
  padding-top: 144px;
}

/* Prevent child elements from adding conflicting margins that could interfere with padding */
.shopify-section[class*="rolling_banner"] [class*="rolling-banner__container"],
.shopify-section[class*="rolling_banner"] [class*="rolling-banner__track"] {
  margin-top: 0;
  margin-bottom: 0;
}

/* =========================================================
   Blog Slider Section - Max Width and Full Width Content
   ========================================================= */

/* Target the specific blog slider section with higher specificity */
.shopify-section:has(.blog-slider.section) {
  max-width: 1400px !important;
  width: 100% !important;
  margin-inline: auto !important;
  box-sizing: border-box !important;
}

/* Remove horizontal padding from .page-width within this section */
.shopify-section:has(.blog-slider.section) .page-width {
  padding-inline: 0 !important;
  max-width: none !important;
  width: 100% !important;
}

/* Override existing blog-slider styles for this specific section */
/* 데스크톱에서만 상단 120px 패딩 적용 */
@media (min-width: 750px) {
  .shopify-section:has(.blog-slider.section) .blog-slider {
    padding: 120px 0 0 !important;
  }
}

/* 모바일에서는 상하 32px, 좌우 16px 패딩 적용 */
@media (max-width: 749px) {
  .shopify-section:has(.blog-slider.section) .blog-slider {
    padding: 32px 16px !important;
  }

  /* .page-width의 기본 좌우 패딩 제거 (중복 방지) */
  .shopify-section:has(.blog-slider.section) .blog-slider .page-width {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* Ensure slider content fills full width without gaps */
.shopify-section:has(.blog-slider.section) .slider__content {
  width: 100% !important;
  margin-inline: 0 !important;
  padding-inline: 0 !important;
}

/* Ensure slider slides fill available space */
.shopify-section:has(.blog-slider.section) .slider__slide {
  margin-inline: 0 !important;
}

/* Override scroll-padding that might add unwanted horizontal spacing */
.shopify-section:has(.blog-slider.section) .slider--mobile {
  scroll-padding-left: 0 !important;
  scroll-padding-right: 0 !important;
}

/* Ensure blog slider header and content respect max-width */
.shopify-section:has(.blog-slider.section) .blog-slider__header {
  margin-inline: 0 !important;
  width: 100% !important;
}

/* =========================================================
   Brand Info Section - Max Width and Full Width Content
   ========================================================= */

/* Target the specific brand info section with higher specificity */
.shopify-section:has(.bi.section) {
  max-width: 1400px !important;
  width: 100% !important;
  margin-inline: auto !important;
  box-sizing: border-box !important;
  padding-inline: 0 !important;
}

/* Override existing bi__inner max-width for this section only */
.shopify-section:has(.bi.section) .bi__inner {
  max-width: none !important;
  width: 100% !important;
  margin-inline: 0 !important;
  padding-inline: 0 !important;
}

/* Ensure panels and tabs fill full width without gaps */
.shopify-section:has(.bi.section) .bi__panels,
.shopify-section:has(.bi.section) .bi__tabs {
  margin-inline: 0 !important;
}

/* Ensure bi__panel grid layout respects full width */
.shopify-section:has(.bi.section) .bi__panel {
  width: 100% !important;
  margin-inline: 0 !important;
}

/* 데스크톱에서만 좌우 패딩 제거 */
@media (min-width: 750px) {
  .shopify-section .bi.section {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-inline: 0 !important;
  }

  /* Alternative selector in case of different structure */
  .shopify-section:has(.bi.section) .bi {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-inline: 0 !important;
  }
}

/* 모바일에서는 좌우 16px 패딩 적용 */
@media (max-width: 749px) {
  .shopify-section .bi.section {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* Remove any external margins that might cause horizontal spacing */
.shopify-section .bi.section,
.shopify-section:has(.bi.section) .bi {
  margin-inline: 0 !important;
}

/* Ensure bi__inner grid doesn't add unwanted margins */
.shopify-section .bi.section .bi__inner,
.shopify-section:has(.bi.section) .bi__inner {
  margin-inline: 0 !important;
}

/* Remove any page-width padding if present (fallback) */
.shopify-section:has(.bi.section) .page-width {
  padding-inline: 0 !important;
  max-width: none !important;
  width: 100% !important;
}

/* NOTE: Card List Section CSS has been refactored to class-based selectors
   See lines 144-175 for the updated implementation */

/* Target the specific card list section using correct class selector */
/* Override existing styles to apply max-width: 1400px and center alignment */
.shopify-section.section-apps {
  max-width: 1400px;
  width: 100%;
  margin-inline: auto;
  box-sizing: border-box;
  padding-inline: 0;
}

/* Ensure page-width container fills full width without additional padding */
.shopify-section.section-apps .page-width {
  max-width: none;
  width: 100%;
  padding-inline: 0;
}

/* Ensure app block content fills available width */
.shopify-section.section-apps .shopify-app-block,
.shopify-section.section-apps [class*="mintty-tiktok"],
.shopify-section.section-apps [id*="mintty-tiktok"] {
  width: 100%;
  margin-inline: 0;
}

.swym-modal button[data-action*="add-to-wishlist"]:after,
.swym-modal button[aria-label*="Add to"]:after,
.swym-modal .swym-button[data-action*="add"]:after,
.swym-modal button:has-text("Add to list"):after,
.swym-modal button:has-text("Add to wishlist"):after {
  content: "Confirm" !important;
  font-size: 14px !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  color: white !important;
  font-family: 'Prompt', sans-serif !important;
  font-weight: 500 !important;
}

.swym-modal button[data-action*="add-to-wishlist"]:hover,
.swym-modal button[aria-label*="Add to"]:hover,
.swym-modal .swym-button[data-action*="add"]:hover {
  background-color: #E63D87 !important;
  border-color: #E63D87 !important;
  transform: translateY(-1px) !important;
}

/* More aggressive approach - target any button in Swym modals that contains common add text */
.swym-modal button *,
.swym-modal .swym-button * {
  pointer-events: none !important;
}

/* Alternative approach: Hide all button text and add custom text */
.swym-modal .swym-variant-selector-add-btn,
.swym-modal .swym-add-btn,
.swym-modal button[class*="add"],
.swym-modal button[id*="add"] {
  font-size: 0 !important;
  background-color: #FF4596 !important;
  color: white !important;
  border: 2px solid #FF4596 !important;
  border-radius: 6px !important;
  padding: 12px 24px !important;
  font-family: 'Prompt', sans-serif !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  position: relative !important;
  min-width: 100px !important;
  min-height: 40px !important;
}

.swym-modal .swym-variant-selector-add-btn:after,
.swym-modal .swym-add-btn:after,
.swym-modal button[class*="add"]:after,
.swym-modal button[id*="add"]:after {
  content: "Confirm" !important;
  font-size: 14px !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  color: white !important;
  font-family: 'Prompt', sans-serif !important;
  font-weight: 500 !important;
}

/* Clean up wishlist page titles - VERY targeted */
body[class*="template-page"] .swym-wishlist-grid h2.swym-title,
.page-swym .swym-wishlist-grid h2.swym-title {
  font-family: 'Prompt', sans-serif !important;
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  color: #111111 !important;
  margin: 1rem 0 !important;
  padding: 0 !important;
}

/* Hide heart icons and menu dots on wishlist page - Enhanced targeting */
/* Remove heart icons from titles */
body[class*="template-page"] .swym-wishlist-grid .swym-title svg,
.page-swym .swym-wishlist-grid .swym-title svg,
body[class*="template-page"] .swym-wishlist-grid .swym-title i,
.page-swym .swym-wishlist-grid .swym-title i,
body[class*="template-page"] .swym-wishlist-grid .swym-title::before,
.page-swym .swym-wishlist-grid .swym-title::before {
  display: none !important;
}

/* Remove three dots menu */
body[class*="template-page"] .swym-wishlist-grid .swym-title + .swym-wishlist-menu,
.page-swym .swym-wishlist-grid .swym-wishlist-actions .swym-wishlist-menu-dots,
body[class*="template-page"] .swym-wishlist-grid [class*="menu"],
.page-swym .swym-wishlist-grid [class*="menu"],
body[class*="template-page"] .swym-wishlist-grid .swym-wishlist-menu,
.page-swym .swym-wishlist-grid .swym-wishlist-menu {
  display: none !important;
}

/* Clean up any heart symbols in text content */
body[class*="template-page"] .swym-title,
.page-swym .swym-title {
  position: relative;
}

body[class*="template-page"] .swym-title:has-text("♥"),
.page-swym .swym-title:has-text("♥"),
body[class*="template-page"] .swym-title:has-text("…"),
.page-swym .swym-title:has-text("…") {
  font-size: 0 !important;
}

body[class*="template-page"] .swym-title:has-text("♥")::after,
.page-swym .swym-title:has-text("♥")::after,
body[class*="template-page"] .swym-title:has-text("…")::after,
.page-swym .swym-title:has-text("…")::after {
  content: "My Wishlist" !important;
  font-size: 1.25rem !important;
  font-family: 'Prompt', sans-serif !important;
  font-weight: 600 !important;
  color: #111111 !important;
  display: block;
}

/* =========================================================
   Slideshow (Split) — Final CSS (Dawn compatible)
   - Section container max 1600px
   - Content frame max 1400px (centered)
   - Left text / Right image (desktop)
   - On mobile: image sits between Title and CTA
   - Smooth snap slider with dots & CTA area nav
   ========================================================= */

/* 가로 스크롤 방지 - 전역 안전장치 */
html, body {
  overflow-x: hidden !important; /* 전역 가로 스크롤 방지 */
  max-width: 100% !important;
}

/* NOTE: 풀블리드 섹션 제외 규칙 삭제됨
   각 섹션에서 개별적으로 max-width 1400px 설정으로 대체 */

/* ---------------- Root tokens ---------------- */
:root {
  --site-max: 1440px;       /* 공통 콘텐츠 최대 너비 (PC 기준) */
  --content-max: 1440px;    /* 주요 콘텐츠 최대 너비 */
  --content-gap: 120px;     /* 좌/우 컨텐츠 간격 (desktop) */
  --gutter-m: 1.5rem;       /* 모바일 좌우 여백 */
  --gutter-d: 5rem;         /* 데스크탑 좌우 여백 */
  --site-container-max: 1400px; /* 표준 사이트 컨테이너 최대 너비 */
}

/* 공통 컨테이너 폭 규격화 - 1400px max-width만 적용 (padding/margin 제거) */
.page-width {
  max-width: 1400px;
}

/* 풀블리드 예외 섹션들 - 전체 폭 유지 (가로 스크롤 방지 개선) */
/* ① 롤링 배너 섹션 */
.section-rolling-banner,
[class*="section-"]:has([class*="rolling-banner"]) {
  max-width: none !important;
  width: 100% !important; /* 100vw → 100% 변경으로 스크롤바 폭 이슈 해결 */
  margin-left: 0 !important; /* 50% → 0 변경 */
  transform: none !important; /* translateX 제거 */
  position: relative !important;
  overflow-x: hidden !important; /* 가로 오버플로우 방지 */
}

.section-rolling-banner .page-width,
[class*="section-"]:has([class*="rolling-banner"]) .page-width {
  max-width: none !important;
  padding: 0 !important;
}

/* ② TikTok 피드 섹션 (우측 콘텐츠 롤링) - 우측 클리핑 유지 */
/* NOTE: 하드코딩된 .shopify-section.section-apps 제거됨
   .shopify-section.section-apps로 대체 (line 397-419) */
[id*="mintty-tiktok"] {
  max-width: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  transform: none !important;
  position: relative !important;
  overflow-x: hidden !important;
}

[id*="mintty-tiktok"] .page-width {
  max-width: none !important;
  padding: 0 !important;
}

/* ==================== 사이트 컨테이너 시스템 ==================== */
/* 표준 사이트 컨테이너 - 1400px 중앙 정렬, 수평 패딩 없음 */
.site-container {
  max-width: var(--site-container-max) !important;
  width: 100% !important;
  margin-inline: auto !important;
  padding-inline: 0 !important;
  box-sizing: border-box !important;
  min-width: 0 !important; /* Flexbox 컨텍스트에서 줄바꿈 허용 */
}

/* 풀블리드 옵트아웃 - 컨테이너 제약 해제 */
.site-container[data-container="none"],
.site-container.container-optout {
  max-width: none !important;
  width: 100% !important;
  margin-inline: 0 !important;
  padding-inline: 0 !important;
}

/* ---------------- Slider base (Dawn 호환) ---------------- */
.slider { position: relative; overflow: hidden; }
.slider .slider__content{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  margin: 0; padding: 0; list-style: none;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.slider .slider__content::-webkit-scrollbar{ display: none; }
.slider .slider__slide{
  width: 100%;
  margin: 0;
  scroll-snap-align: start;
  box-sizing: border-box;
}

/* ---------------- Banner: split layout ---------------- */
/* Slideshow Split 섹션 래퍼에 max-width 적용 */
.shopify-section:has(.banner--split) {
  max-width: 1400px;
  width: 100%;
  margin-inline: auto;
  box-sizing: border-box;
}

.banner.banner--split{
  max-width: var(--site-max);
  margin: 0 auto;
  padding: 24px 0; /* 기본: 상하 padding 24px */
}

/* 모바일에서만 좌우 16px 패딩 추가 */
@media (max-width: 749px) {
  .banner.banner--split {
    padding: 24px 16px !important;
  }

  /* 배너 프레임 내부 패딩 제거 (중복 방지) */
  .banner--split .banner__frame {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* 이미지는 패딩 없이 전체 너비 사용 */
  .banner--split .banner__media {
    margin-left: -16px !important;
    margin-right: -16px !important;
    width: calc(100% + 32px) !important;
    max-width: calc(100% + 32px) !important;
    border-radius: 0 !important;
  }
}

/* Dawn .page-width 패딩 제거(배너 내부에서만) */
.banner--split .page-width{
  max-width: 100%;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 한 화면 = 한 슬라이드 정확히 맞추기 (안전 재정의) */
.banner--split .slider__content{
  display: flex;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.banner--split .slider__slide { margin: 0; }
.banner--split .slider__content::-webkit-scrollbar{ display: none; }
.banner--split .slider__slide{
  flex: 0 0 100%;
  margin: 0;
  scroll-snap-align: start;
}

/* ===== 핵심 레이아웃: 데스크톱 좌텍스트/우이미지, 모바일 타이틀-이미지-CTA ===== */

/* 슬라이드 내용 프레임 */
.banner--split .banner__frame{
  max-width: var(--content-max);
  margin: 0 auto;

  /* 데스크톱: 2열 그리드, 이미지 오른쪽 고정 */
  display: grid;
  grid-template-columns: minmax(0, 1fr) 750px; /* 좌 텍스트 유동 + 우 750px 고정 */
  grid-template-areas:
    "sub   media"
    "title media"
    "cta   media"
    "nav   media"
    "dots  media";
  align-items: center;
  column-gap: var(--content-gap);
  row-gap: 12px;

  min-height: 548px;   /* 요구사항 height 548px → min-height로 안정화 */
  padding: 0;
}

/* 텍스트 그룹: children을 상위 grid에 직접 배치하기 위해 contents */
.banner--split .banner__content{
  display: contents; /* 자식(.banner__sub/title/cta/nav/dots)을 .banner__frame 그리드에 직접 배치 */
}

/* Sub text */
.banner--split .banner__sub{
  grid-area: sub;
  color: var(--pink, #FF4596);
  font-size: 18px;
  font-weight: 500;
  line-height: 120%;
  margin: 0;
}

/* Main text */
.banner--split .banner__title{
  grid-area: title;
  color: var(--gray-900, #111);
  font-size: clamp(28px, 6vw, 64px); /* 데스크탑 64px, 작은 화면 축소 */
  font-weight: 700;
  line-height: 120%;
  margin: 0;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* 이미지(우측 박스) — 데스크톱 750×500(3:2) */
.banner--split .banner__media{
  grid-area: media;
  justify-self: end;
  width: 750px;
  height: 500px;
  aspect-ratio: 3 / 2;
  border-radius: 8px;
  overflow: hidden;
}
.banner--split .banner__media img{
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
}

/* CTA 버튼 */
.banner--split .banner__cta{
  grid-area: cta;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  padding: 20px 32px;        /* 요구사항 */
  gap: 8px;
  background:#000; color:#fff;
  text-decoration:none;
  border: 0;
  border-radius: var(--buttons-radius, 8px);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
}
.banner--split .banner__cta:hover { opacity: .9; }
.banner--split .banner__cta:focus-visible {
  outline: .2rem solid rgba(0,0,0,.5);
  outline-offset: .2rem;
}

/* CTA 아래 Prev/Next 버튼 행 (절대배치 해제) */
.banner--split .banner__nav{
  grid-area: nav;
  display:flex; gap:8px; margin-top: 12px;
}
.banner--split .banner__nav .slider-button{
  position: static !important;
  width:44px; height:44px;
  display:inline-flex; align-items:center; justify-content:center;
  background:#fff; border:1px solid rgba(0,0,0,.15); border-radius:50%;
  cursor:pointer;
}
.banner--split .banner__nav .slider-button:hover{ background:#f6f6f6; }
.banner--split .banner__nav .slider-button svg{ width:20px; height:20px; }

/* 도트 인디케이터 (좌측 텍스트 영역 하단) */
.banner--split .banner__dots{
  grid-area: dots;
  width: 260px; height: 20px;           /* 요구사항 */
  display: flex; gap: 8px; align-items: center;
  margin-top: 12px;
}
.banner--split .banner__dot{
  width: 8px; height: 8px; padding:0; border:0; border-radius:50%;
  background: rgba(0,0,0,.25);
}
.banner--split .banner__dot[aria-selected="true"]{ background: rgba(0,0,0,.85); }

/* ---------------- Responsive ---------------- */
@media (max-width: 1200px){
  .banner--split .banner__frame{
    grid-template-columns: minmax(0, 1fr) 680px;
    column-gap: 72px;
  }
  .banner--split .banner__media{ width: 680px; max-width: 100%; height: auto; aspect-ratio: 3/2; } /* max-width 추가로 반응형 대응 */
}

@media (max-width: 990px){
  /* 모바일: 1열 흐름 — 타이틀 다음에 이미지, 그 다음 CTA */
  .banner--split .banner__frame{
    display: block;            /* 그리드 해제 */
    max-width: min(100%, var(--content-max));
    padding: 0;                /* 패딩은 .banner--split 루트에서 처리 */
    min-height: unset;
  }

  /* display: contents 제거 → 일반 세로 스택 */
  .banner--split .banner__content{
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .banner--split .banner__title{ font-size: 24px; font-weight: 700; /* UNIFIED: Consistent with all sections */ }

  .banner--split .banner__media{
    width: 100%; height: auto; aspect-ratio: 3/2;
    border-radius: 8px;
    margin: 8px 0;            /* 타이틀과 CTA 사이 간격 */
  }

  .banner--split .banner__nav{ margin-top: 8px; }
}

/* Safari 구버전 gap 대체 (선택) */
@supports not (gap: 8px){
  .banner--split .banner__nav > * { margin-right: 8px; }
  .banner--split .banner__nav > *:last-child { margin-right: 0; }
}

/* ---------------- Collection list custom ---------------- */
.collection-list-custom{
  --collection-thumb-radius: 12px;
  background-color: #ffffff;
  padding: 80px 0 120px;
  max-width: 1400px;
  margin: 0 auto;
}

/* 기본: 가운데 정렬, 열 48px / 행 24px */
.collection-list-custom .collection-list{
  display:flex;
  flex-wrap:wrap;
  justify-content:center !important;
  align-items:flex-start;
  align-content:flex-start; /* 여러 줄 정렬 안정화 */
  gap:24px 48px;            /* row-gap 24px, column-gap 48px */
  max-width: 100%;
  margin:0 auto;
  padding:0 0 80px 0;
  list-style:none;
  box-sizing:border-box;
}

@media screen and (min-width: 990px) {
  .collection-list-custom .page-width-desktop {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}
.collection-list-custom .collection-list.grid{
  display:flex !important;
  justify-content:center !important;
  gap:24px 48px !important;
}

/* 아이템: 데스크탑 기준 자동 크기 조정 - collection-list 하위만 적용 */
.collection-list-custom .collection-list:not(.collection-products-featured-namespace) .collection-list__item{
  list-style:none;
  flex: 0 0 auto;
  box-sizing:border-box;
  margin:0;              /* 간격은 gap으로만 */
  min-width:0;           /* 긴 텍스트 줄바꿈 허용 */
}
.collection-list-custom .collection-list:not(.collection-products-featured-namespace) .collection-list__item .collection-card-wrapper,
.collection-list-custom .collection-list:not(.collection-products-featured-namespace) .collection-list__item .card{ 
  width: auto; 
  max-width: none;
}

/* 카드 베이스 - 카테고리 카드만 적용 */
.collection-list-custom .collection-list .collection-card-wrapper .card,
.collection-list-custom .collection-list .card{
  border-radius:10px;
  overflow:visible;
  transition:transform .25s ease, box-shadow .25s ease;
  text-align:center;
  display: flex;          /* 이미지 -> 텍스트 세로 스택 */
  flex-direction: column;
  align-items: center;
  width: auto;
  max-width: none;
}
.collection-list-custom .collection-list .collection-card-wrapper .card:hover,
.collection-list-custom .collection-list .card:hover{ 
  /* 기존 transform과 box-shadow 호버 효과 제거 */
}

/* ===== 썸네일 100×100 중앙 크롭 + 라운드 - 카테고리 카드만 적용 ===== */
.collection-list-custom .collection-list .card__media,
.collection-list-custom .collection-list a.card__media{
  width:100px!important; height:100px!important;
  position:relative!important;
  overflow:hidden!important;
  border-radius:var(--collection-thumb-radius, 12px) !important;
  margin:0 auto;
  display:block!important;
  -webkit-mask-image:-webkit-radial-gradient(#fff,#000);
  clip-path:inset(0 round var(--collection-thumb-radius, 12px));
}

/* ratio/패딩 제거 - 카테고리 카드만 적용 */
.collection-list-custom .collection-list .card__inner.ratio,
.collection-list-custom .collection-list .ratio{
  position:static!important; height:auto!important; padding:0!important; --ratio-percent:0!important;
}
.collection-list-custom .collection-list .ratio::before,
.collection-list-custom .collection-list .card__inner.ratio::before,
.collection-list-custom .collection-list .card__media .media::before{
  content:none!important; display:none!important; padding-top:0!important;
}

/* media 꽉 채우기 - 카테고리 카드만 적용 */
.collection-list-custom .collection-list .card__media .media{
  position:absolute!important; inset:0!important; width:100%!important; height:100%!important;
  padding:0!important; overflow:hidden!important; display:block!important; border-radius:inherit;
}
.collection-list-custom .collection-list .card__media .media > img,
.collection-list-custom .collection-list .card__media .media > picture > img,
.collection-list-custom .collection-list .card__media > img,
.collection-list-custom .collection-list .card__media .media.media--transparent img,
.collection-list-custom .collection-list .card__media .media.media--hover-effect img,
.collection-list-custom .collection-list .card__media .media .motion-reduce{
  position:absolute!important; inset:0!important; width:100%!important; height:100%!important;
  max-width:none!important; object-fit:cover!important; object-position:center!important;
  display:block!important; transform:none!important; border-radius:inherit;
}

/* 오버레이 card__content 숨김(이미지 아래 텍스트만 사용) - 카테고리 카드만 적용 */
.collection-list-custom .collection-list .card__inner > .card__content{ display:none!important; }

/* 텍스트 간격/스타일 - 카테고리 카드만 적용 */
.collection-list-custom .collection-list .card__heading{ margin-top: 14px; margin-bottom: 0; margin-left: 0; margin-right: 0; }
.collection-list-custom .collection-list .card__heading,
.collection-list-custom .collection-list .card__heading a,
.collection-list-custom .collection-list .full-unstyled-link{
  color: var(--gray-500, #5D5D5D);
  font-family:"Prompt",system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,"Noto Sans","Apple SD Gothic Neo",sans-serif;
  font-size:16px; font-style:normal; font-weight:400; line-height:120%; text-decoration:none;
  transition: color 0.2s ease;
}
.collection-list-custom .collection-list .icon-arrow, .collection-list-custom .collection-list .icon-wrap{ display:none!important; }

/* 호버 효과 - 카테고리 카드만 적용 */
.collection-list-custom .collection-list .card:hover .card__media,
.collection-list-custom .collection-list .card:hover a.card__media{
  border: 2px solid var(--gray-900, #111);
  box-sizing: border-box;
}

.collection-list-custom .collection-list .card:hover .card__heading,
.collection-list-custom .collection-list .card:hover .card__heading a,
.collection-list-custom .collection-list .card:hover .full-unstyled-link{
  color: var(--gray-900, #111);
}

/* Active state styles */
.collection-list-custom .collection-list__item.is-active .card .card__media,
.collection-list-custom .collection-list__item.is-active .card a.card__media {
    border: 2px solid var(--gray-900, #111);
    box-sizing: border-box;
}

.collection-list-custom .collection-list__item.is-active .card .card__heading,
.collection-list-custom .collection-list__item.is-active .card .card__heading a,
.collection-list-custom .collection-list__item.is-active .card .full-unstyled-link {
    color: var(--gray-900, #111);
}

/* 기본 상태에서 투명한 보더 추가하여 크기 일관성 유지 - 카테고리 카드만 적용 */
.collection-list-custom .collection-list .card__media,
.collection-list-custom .collection-list a.card__media{
  border: 2px solid transparent;
  box-sizing: border-box;
}

/* ---------------- Responsive ---------------- */
/* 공통: 아이템/카드/텍스트가 컨테이너 폭을 넘지 않게 */
.collection-list-custom .collection-list:not(.collection-products-featured-namespace) .collection-list__item,
.collection-list-custom .collection-card-wrapper .card,
.collection-list-custom .card__content,
.collection-list-custom .card__information,
.collection-list-custom .card__heading,
.collection-list-custom .full-unstyled-link{
  box-sizing: border-box;
  min-width: 0;           /* 긴 텍스트가 폭을 밀어내지 않도록 */
  word-break: keep-all;   /* 한글 가독성 */
  overflow-wrap: anywhere;/* 긴 영문/단어도 줄바꿈 */
}

/* 기본(데스크탑): 기존 레이아웃 유지 */
.collection-list-custom .collection-list{
  justify-content: center !important;
  align-items: flex-start;
  gap: 24px 48px; /* row 24, col 48 */
}
.collection-list-custom .collection-list:not(.collection-products-featured-namespace) .collection-list__item{
  flex: 0 0 auto;   /* 자동 크기 조정 */
  position: relative;
  isolation: isolate;     /* 이 셀 내부 레이어만 쌓이게 */
  min-width: 0;
}

/* 태블릿 이하: 2열 균등 (열 간격만큼 빼고 나눈 값) */
@media (max-width: 749px){
  .collection-list-custom .collection-list{
    display:grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap:24px;
    row-gap:20px;
    justify-items:center;   /* 카드 가운데 정렬 */
    align-items:start;      /* 각 셀 위쪽 정렬 */
  }
  .collection-list-custom .collection-list:not(.collection-products-featured-namespace) .collection-list__item{
    width:100%; max-width:100%;
  }

  /* 카드 폭/정렬 안정화 - 카테고리 카드만 적용 */
  .collection-list-custom .collection-list .collection-card-wrapper,
  .collection-list-custom .collection-list .card{
    width:auto;
    max-width:none;      /* 자동 크기 조정 */
  }

  /* 이미지가 카드 높이를 확실히 차지하도록(겹침 방지 핵심) - 카테고리 카드만 적용 */
  .collection-list-custom .collection-list .card__media{
    display:block;
    margin-bottom:0;      /* 간격은 아래 정보 블록에서 제어 */
  }

  /* 텍스트 블록이 항상 이미지 '아래'에서 흐르게 - 카테고리 카드만 적용 */
  .collection-list-custom .collection-list .card__inner > .card__content{ display:none !important; } /* 오버레이용 숨김 */
  .collection-list-custom .collection-list .card > .card__content{
    position: static !important; /* 절대배치 방지 */
    width: 100%;
  }

  /* 길어도 겹치지 않게 줄바꿈/두줄 클램프 - 카테고리 카드만 적용 */
  .collection-list-custom .collection-list .card__information,
  .collection-list-custom .collection-list .card__heading,
  .collection-list-custom .collection-list .full-unstyled-link{
    box-sizing:border-box;
    min-width:0;
    word-break:keep-all;
    overflow-wrap:anywhere;
  }
  .collection-list-custom .collection-list .card__heading,
  .collection-list-custom .collection-list .full-unstyled-link{
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
}

/* <= 420px: 1열 */
@media (max-width: 420px){
  .collection-list-custom .collection-list{
    grid-template-columns: 1fr;
    row-gap:16px;
  }
  .collection-list-custom .collection-list .collection-card-wrapper,
  .collection-list-custom .collection-list .card{
    max-width: none;    /* 자동 크기 조정 */
  }
}

/* Flex gap 미지원 브라우저 폴백 */
@supports not (gap: 1rem){
  .collection-list-custom .collection-list{ margin:-12px; }
}

/* =========================
   상품 리스트 레이아웃 & 정렬
   ========================= */

/* 상품 리스트 컨테이너 - page-width 규격 준수, 중복 여백 제거 */
.collection-products-featured-namespace {
  max-width: var(--page-width) !important;
  margin: 0 auto !important;
  padding: 0 var(--page-margin) !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* 그리드 복구 - 뒤틀린 상품 리스트 그리드 정상화 */
.collection-products-featured-namespace .grid.product-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  grid-template-rows: auto auto !important;
  gap: 16px !important;
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  justify-items: center !important;
  align-items: start !important;
  overflow: visible !important;
  min-height: 0 !important;
}

/* 그리드 아이템 정렬 - 높이 잘림 방지, margin-left 제거 */
.collection-products-featured-namespace .grid__item {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: center !important;
  width: 100% !important;
  max-width: min(338px, 100vw - 3rem) !important; /* 가로 스크롤 방지: 뷰포트 폭에서 패딩 제외 */
  height: auto !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
}

/* 슬라이더 첫 번째 아이템의 margin-left 제거 */
.collection-products-featured-namespace .slider--desktop .slider__slide:first-child,
.collection-products-featured-namespace .slider__slide:first-child {
  margin-left: 0 !important;
  scroll-margin-left: 0 !important;
}

/* 카드 스타일 리셋 - 높이 보장 */
.collection-products-featured-namespace .card {
  border-radius: var(--border-radius) !important;
  overflow: visible !important;
  transition: none !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
  max-width: min(338px, 100vw - 3rem) !important; /* 가로 스크롤 방지: 뷰포트 폭에서 패딩 제외 */
  height: auto !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
}

/* 썸네일 338x338px 정확 적용 */
.collection-products-featured-namespace .card__media {
  width: min(338px, 100vw - 3rem) !important; /* 가로 스크롤 방지: 뷰포트 폭에서 패딩 제외 */
  height: 338px !important;
  position: relative !important;
  overflow: hidden !important;
  border-radius: var(--border-radius) var(--border-radius) 0 0 !important;
  margin: 0 auto !important;
  display: block !important;
  -webkit-mask-image: none !important;
  clip-path: none !important;
  border: none !important;
  flex-shrink: 0 !important;
}

/* 썸네일 미디어 요소 338x338px 고정 */
.collection-products-featured-namespace .card__media .media {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: min(338px, 100vw - 3rem) !important; /* 가로 스크롤 방지: 뷰포트 폭에서 패딩 제외 */
  height: 338px !important;
  padding: 0 !important;
  overflow: hidden !important;
  display: block !important;
  border-radius: inherit !important;
}

/* 썸네일 이미지 338x338px 중앙 크롭 */
.collection-products-featured-namespace .card__media img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: min(338px, 100vw - 3rem) !important; /* 가로 스크롤 방지: 뷰포트 폭에서 패딩 제외 */
  height: 338px !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  transform: none !important;
  border-radius: inherit !important;
}

/* 카드 콘텐츠 - 썸네일 하단 세로형 배치 */
.collection-products-featured-namespace .card__content {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 20px !important;
  box-sizing: border-box !important;
}

/* 상품 리스트 호버 효과 제거 */
.collection-products-featured-namespace .card:hover .card__media {
  border: none !important;
}

/* 상품 리스트 텍스트 스타일 - Collection Split과 동일 */
.collection-products-featured-namespace .card__heading {
  margin: 0 !important;
  font-family: inherit !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 140% !important; /* 22.4px */
  color: #111 !important;
}

.collection-products-featured-namespace .card__heading a {
  color: inherit !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

/* card__information 영역 기본 스타일 */
.collection-products-featured-namespace .card__information {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

/* card-information 영역 잘림 방지 + padding: 20px */
.collection-products-featured-namespace .card-information {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  margin-top: 8px !important;
  padding: 20px !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

/* 공급업체 스타일 */
.collection-products-featured-namespace .caption-large {
  font-size: 12px !important;
  color: var(--color-foreground-75) !important;
  font-weight: 400 !important;
}

/* 별점 스타일 */
.collection-products-featured-namespace .product-rating {
  order: 2 !important;
}

.collection-products-featured-namespace .rating {
  font-size: 14px !important;
  color: #ffa500 !important;
  line-height: 1 !important;
}

/* 상품명 스타일 - Collection Split과 동일하게 수정 */
.collection-products-featured-namespace .card__heading {
  order: 2 !important;
  margin: 0 !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 140% !important; /* 22.4px */
  color: #111 !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
  word-wrap: break-word !important;
  white-space: normal !important;
}

/* 가격 영역 스타일 - 높이 보장 */
.collection-products-featured-namespace .price {
  order: 4 !important;
  margin-top: 8px !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
  display: block !important;
}

/* Collection List Custom 섹션 - 가격 영역 스타일 (섹션 스코프) */
.collection-list-custom .collection-products-featured-namespace .price--on-sale .price__sale {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
}

/* 세일가 스타일 - 요구사항 적용 */
.collection-list-custom .collection-products-featured-namespace .price-item.price-item--sale {
  color: var(--gray-900, #111);
  font-size: 17px;
  font-style: normal;
  font-weight: 700;
  line-height: 120%;
}

/* 비교가 스타일 - 요구사항 적용 */
.collection-list-custom .collection-products-featured-namespace .price-item.price-item--regular {
  color: var(--gray-300, #B0B0B0);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
  text-decoration-line: line-through;
}

/* 일반가 래퍼도 동일한 간격 적용 */
.collection-list-custom .collection-products-featured-namespace .price__regular {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* =========================    Recommended Products (base)    ========================= */
.recommended-products {
  --reco-prod-thumb-radius: 8px;
  padding: 64px 0; /* 초기 패딩 — 이후 조정 가능 */
}

.recommended-products .recommended-products__heading {
  margin: 0 0 20px 0;
  font-size: clamp(20px, 2.5vw, 28px);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}
.recommended-products .recommended-products__subheading {
  margin: 0 0 32px 0;
  font-size: 14px;
  color: rgba(0,0,0,.6);
  text-align: center;
}

/* 리스트: 중앙 정렬 + 반응형 그리드 베이스 */
.recommended-products .reco-prod-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px 32px; /* row, col */
  list-style: none;
  margin: 0;
  padding: 0;
}
.recommended-products .reco-prod-item { list-style: none; }

/* 썸네일 둥근 모서리(기본 카드 이미지 래퍼에 상속) */
.recommended-products .card__media,
.recommended-products a.card__media {
  border-radius: var(--reco-prod-thumb-radius);
  overflow: hidden;
}

/* 모바일/태블릿 간단 반응형 */
@media (max-width: 1200px){
  .recommended-products .reco-prod-list{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px){
  .recommended-products .reco-prod-list{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px){
  .recommended-products .reco-prod-list{ grid-template-columns: 1fr; }
}




/* =========================    Blog Slider (Hero Cards) — Left align + 20px gap + peek    ========================= */
/* Blog Slider 섹션 스코프 - max-width 1400px 및 패딩 조정 */
.blog-slider.section {
  max-width: 1400px;
  width: 100%;
  margin-inline: auto;
  box-sizing: border-box;
  padding: 120px 0 0;
}

/* 하위 호환성: .blog-slider만 있는 경우 */
.blog-slider {
  padding: 120px 0 0;
}

/* 넘치는 영역 숨김 */
.blog-slider .slider{ position:relative; overflow:hidden; }

/* 트랙: 왼쪽 정렬, 가로 스크롤, 간격 20px */
.blog-slider .slider__content{
  display:flex;
  gap: var(--slide-gap, 20px);   /* 요구: 오른쪽 20px 여백 */
  margin:0;
  padding:0;                     /* 패딩 제거 → 왼쪽 정렬 보장 */
  list-style:none;
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.blog-slider .slider__content::-webkit-scrollbar{ display:none; }

/* 각 슬라이드: 시작점 스냅 + 살짝 작은 폭으로 다음 카드가 보이게 */
.blog-slider .slider__slide{
  flex:0 0 auto;
  scroll-snap-align:start;
  scroll-snap-stop:always;
  /* 화면(100%) - (간격 20px + 다음 카드가 보일 양, 기본 40px) */
  width: clamp(800px, calc(100% - (var(--slide-gap, 20px) + var(--peek-next, 40px))), 1050px);
}

/* 카드: 슬라이드 폭에 100%로 맞춤 */
.blog-slider .blog-card{
  position: relative;
  width: 100%;
  min-width: 320px;  /* 모바일 최소 폭으로 변경 */
  max-width: 1050px;
  /* 비율 고정 + 높이 한계 지정 */
  aspect-ratio: 1050 / 436.416;
  height: auto;
  min-height: 201.167px;
  max-height: 436.416px;

  border-radius: 12px;
  overflow: hidden;
}

/* 데스크톱에서만 800px 최소 폭 적용 */
@media (min-width: 990px) {
  .blog-slider .blog-card {
    min-width: 800px;
  }
}

/* 대표 이미지 / placeholder */
.blog-slider .blog-card__media,
.blog-slider .blog-card__media img{
  position:absolute; inset:0; width:100%; height:100%;
}
.blog-slider .blog-card__media img{
  object-fit:cover; object-position:center; display:block; opacity:.92;
}
.blog-slider .blog-card__media svg.blog-card__ph{
  position:absolute; inset:0; width:100%; height:100%; display:block; background:#f3f4f6;
}

/* 좌측 오버레이 280px */
.blog-slider .blog-card__overlay{
  position:relative; z-index:1;
  width:280px; height:100%;
  padding:24px;
  display:flex; flex-direction:column; gap:10px;
  color:#111;
}

/* 텍스트 */
.blog-slider .blog-card__subtitle{ margin:0; font-size:14px; font-weight:600; letter-spacing:.02em; opacity:.9; }
.blog-slider .blog-card__title{ margin:0; font-size:clamp(22px,3.2vw,32px); line-height:1.2; font-weight:800; word-break:keep-all; }
.blog-slider .blog-card__excerpt{ margin:0; font-size:14px; line-height:1.6; opacity:.95; }
.blog-slider .blog-card__subtitle,
.blog-slider .blog-card__title,
.blog-slider .blog-card__excerpt{ min-width:0; overflow-wrap:anywhere; }

/* CTA */
.blog-slider .blog-card__cta{
  margin-top:auto; width:fit-content;
  padding:12px 18px; border-radius:8px;
  background:#111; color:#fff; font-weight:700; text-decoration:none; line-height:1;
}
.blog-slider .blog-card__cta:hover{ opacity:.9; }

/* =========================
   Header (Title/Sub title & Controls)
   ========================= */
.blog-slider .blog-slider__header{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:20px; margin-bottom:20px;
}
.blog-slider .blog-slider__titles{ flex:1 1 auto; min-width:0; }
.blog-slider .blog-slider__title{
  margin:0; color:#111; font-size:32px; font-weight:700; line-height:100%;
}
.blog-slider .blog-slider__subtitle{
  margin:10px 0 0 0; color:#555; font-size:14px; font-weight:400; line-height:24px;
}

/* Top-right controls */
.blog-slider .blog-slider__controls{ display:flex; gap:8px; flex-shrink:0; }
.blog-slider .slider-button{
  width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center;
  background:#fff; border:1px solid rgba(0,0,0,.15); border-radius:50%; cursor:pointer;
}
.blog-slider .slider-button:hover{ background:#f6f6f6; }
.blog-slider .slider-button svg{ width:20px; height:20px; }

/* ---- Fix: first slide flush-left (Dawn offsets override) ---- */
.blog-slider .slider--desktop .slider__content,
.blog-slider .slider__content{
  padding-left: 0 !important;      /* 트랙 좌측 패딩 제거 */
  scroll-padding-left: 0 !important;/* 스냅 기준점 좌측 오프셋 제거 */
}

.blog-slider .slider__slide{
  scroll-margin-left: 0 !important; /* 스냅 시 앞 여백 제거 */
}

.blog-slider .slider__slide:first-child{
  margin-left: 0 !important;        /* 혹시 모를 첫 카드 왼쪽 마진 제거 */
}

/* =========================
   Responsive
   ========================= */
/* Tablet: 750px ~ 989px - Dawn 표준 */
@media (min-width: 750px) and (max-width: 989px) {
  .blog-slider .slider__slide {
    width: calc(100% - (var(--slide-gap, 20px) + var(--peek-next, 40px)));
  }
  .blog-slider .blog-card {
    aspect-ratio: 16 / 9;
    border-radius: 10px;
    min-width: 500px;  /* 태블릿 최소 폭 */
  }
  .blog-slider .blog-card__overlay {
    width: 70%;
    padding: 16px;
  }
}

/* Mobile: ≤ 749px - Dawn 표준 */
@media (max-width: 749px) {
  .blog-slider {
    padding: 32px 16px;  /* 좌우 16px 패딩 추가 */
  }

  /* .page-width의 기본 좌우 패딩 제거 (중복 방지) */
  .blog-slider .page-width {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .blog-slider .blog-slider__header {
    align-items: flex-start;
    gap: 12px;
  }

  .blog-slider .blog-slider__controls {
    margin-top: 6px;
  }

  .blog-slider .blog-slider__title {
    font-size: 24px; /* UNIFIED: Match all sections mobile */
    line-height: 1.2;
    font-weight: 700;
  }

  .blog-slider .slider__slide {
    width: 100%;  /* 모바일 전체 폭 */
  }

  .blog-slider .blog-card {
    min-width: 100%;  /* 800px 강제 해제 */
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 8px;
  }

  .blog-slider .blog-card__overlay {
    width: 100%;
    padding: 14px;
    background: transparent;  /* 배경 제거 */
  }

  /* 모바일에서 이미지 잘림 방지 */
  .blog-slider .blog-card__media img {
    object-fit: contain !important;  /* cover → contain: 전체 이미지 표시 */
    object-position: center !important;
  }

  .blog-slider .blog-card__title {
    font-size: clamp(17px, 5.2vw, 22px);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .blog-slider .blog-card__excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .blog-slider .blog-card__cta {
    margin-top: 10px;
    padding: 10px 14px;
  }
}

/* =========================
   Collection showcase (Split)
   ========================= */

/* 섹션 컨테이너 - 1400px 폭 제한 및 중앙 정렬 */
.ccs.section {
  max-width: 1400px;
  width: 100%;
  margin-inline: auto;
  box-sizing: border-box;
  padding: 88px 0; /* 좌우 패딩 제거, 상하만 유지 */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  position: relative;
  z-index: 1; /* GNB(z-index: 99999)보다 낮게 설정 */
}

/* 하위 호환성: .ccs만 있는 경우도 지원 */
.ccs {
  min-width: 769px;
}

/* Collection Split 섹션 스코프 - 배경색만 적용 */
.shopify-section:has(.ccs.section) {
  background: #F8F9FB;
}

/* Collection Split 섹션 내 page-width 좌우 패딩 제거 */
.shopify-section:has(.ccs.section) .page-width {
  padding-inline: 0;
  max-width: none;
}

/* 내부 레이아웃 (좌/우) - 1400px 폭 맞춤 플렉스 레이아웃 */
.ccs__inner{
  max-width: none; /* 섹션 레벨에서 1400px 제한하므로 제거 */
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 40px;
  align-self: flex-start;
  margin: 0;
  padding-inline: 0; /* 좌우 여백 제거 */
  overflow: hidden; /* 가로 스크롤 방지 */
}

/* 좌측 패널 - 잔여 공간 차지 */
.ccs__left{
  flex: 1 1 auto;
  min-width: 300px; /* 최소 폭 보장 */
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* 탭 */
.ccs__tabs{
  display: flex; flex-wrap: wrap; gap: 12px 16px;
  margin: 0; padding: 0; list-style: none;
}

/* Brand tab order: So Natural → Arocell → Skinrxlab → Dearspa */
.ccs__tabs li:has([data-ccs-tab-index="2"]) { order: 1; } /* SONATURAL first */
.ccs__tabs li:has([data-ccs-tab-index="1"]) { order: 2; } /* Arocell second */
.ccs__tabs li:has([data-ccs-tab-index="0"]) { order: 3; } /* SKINRx LAB third */
.ccs__tabs li:has([data-ccs-tab-index="3"]) { order: 4; } /* DEARSPA fourth */

.ccs__tab{
  background: transparent; border: 0; padding: 0;
  color: #111; font-size: 16px; font-weight: 700; line-height: 120%;
  cursor: pointer; opacity: .65;
}


/* Collection Split 활성 탭 - 텍스트 및 밑줄 색상 #FF4596 적용 */
.ccs__tab.is-active,
.ccs__tab.is-active {
  opacity: 1;
  color: #FF4596; /* 활성 탭 텍스트 색상 */
  text-decoration: underline;
  text-decoration-color: #FF4596; /* 활성 탭 밑줄 색상 */
  text-underline-offset: 3px; /* 밑줄 간격 개선 */
}

/* 타이틀/서브타이틀 - UNIFIED TO MATCH EVENTS SECTION */
.ccs__title{
  margin: 6px 0 0 0; color: #111; font-size: 48px; font-weight: 700; line-height: 140%;
}
.ccs__subtitle{
  margin: 0; color: var(--gray-400, #888); font-size: 14px; font-weight: 400; line-height: 140%;
}

/* 좌우 버튼 */
.ccs__controls{ display: flex; gap: 8px; margin-top: 8px; }
.ccs__btn{
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid rgba(0,0,0,.15); border-radius: 50%; cursor: pointer;
}
.ccs__btn:hover{ background: #f6f6f6; }
.ccs__btn svg{ width: 20px; height: 20px; }

/* 우측 패널 - 고정 폭 950px */
.ccs__right{ 
  flex: 0 0 auto; 
  width: min(950px, calc(100vw - 300px - 40px - 10rem)); /* 최대 950px, 좌측 최소폭 300px 고려 */
  max-width: 950px;
  min-width: 300px; /* 최소 폭 보장 */
}

/* 슬라이더 */
.ccs__slider{ display: none; }
.ccs__slider.is-active{ display: block; }

.ccs__products{
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 16px;
  margin: 0; padding: 0; list-style: none;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  width: 100%;
  min-width: 100%;
}
.ccs__products::-webkit-scrollbar{ display: none; }

/* 상품 카드 */
.ccs__product{
  flex: 0 0 338px; 
  width: 338px;
  min-width: 338px;
  max-width: 338px;
  scroll-snap-align: start;
  display: flex; flex-direction: column; align-items: flex-start;
  position: relative; /* 배지 오버레이 기준 */
  box-sizing: border-box;
}
.ccs__product--empty{ flex: 0 0 auto; padding: 16px; opacity: .6; }

/* Dawn card-product 폭 맞추기 */
.ccs__product .card,
.ccs__product .card-wrapper{ 
  width: min(338px, 100vw - 3rem) !important; /* 가로 스크롤 방지: 뷰포트 폭에서 패딩 제외 */ 
  max-width: min(338px, 100vw - 3rem) !important; /* 가로 스크롤 방지: 뷰포트 폭에서 패딩 제외 */ 
  min-width: 338px !important;
  box-sizing: border-box;
}

/* ===== 썸네일 338x338 고정 & 꽉 채우기 ===== */
/* Dawn ratio 제거 (섹션 범위 한정) */
.ccs .ccs__product .card__inner.ratio{ --ratio-percent: 0 !important; height: auto; }
.ccs .ccs__product .ratio::before{ content: none !important; }

/* card__inner gradient/color-scheme 높이 강제 적용 */
.ccs .ccs__product .card__inner.gradient,
.ccs .ccs__product .card__inner[class*="color-scheme"],
.ccs .ccs__product .card__inner{ 
  height: 338px !important; 
  min-height: 338px !important;
  max-height: 338px !important;
}

/* Dawn 테마 카드 전체 클릭 레이어 비활성화 - 썸네일 직접 클릭 활성화 */
.ccs .card__heading a::after,
.collection-list-custom .card__heading a::after,
.collection-products-featured-namespace .card__heading a::after,
.product-grid .card__heading a::after,
.main-collection-product-grid .card__heading a::after,
#MainContent .card__heading a::after {
  content: none !important;
  display: none !important;
}

/* 썸네일 이미지 클릭 이벤트를 부모 앵커로 전달 */
.card__media a.media img,
.card__media .media img,
.product-grid .card__media img {
  pointer-events: none !important;
}

/* Collection Split 미디어 박스 - 썸네일 영역 내 꽉 차게 노출 */
.ccs .ccs__product .card__media,
.ccs .ccs__product .media{
  position: relative;
  display: block;
  overflow: visible !important;
  box-sizing: border-box;
  z-index: 1;
}

.ccs .ccs__product .card__media a.media {
  position: relative;
  z-index: 2;
  pointer-events: auto;
  overflow: hidden;
  border-radius: inherit;
}

/* Collection Split 카드 백그라운드 제거 */
.ccs .ccs__product .card,
.ccs .ccs__product .card-wrapper,
.ccs .ccs__product .card__inner {
  background: transparent !important;
  background-color: transparent !important;
}

.ccs .ccs__product .card.gradient,
.ccs .ccs__product .card__inner.gradient {
  background: transparent !important;
}

/* Collection Split 카드 콘텐츠 패딩 제거하고 정보 영역에만 적용 */
.ccs .ccs__product .card__content {
  padding: 0 !important;
}

.ccs .ccs__product .card__information {
  padding: 20px !important;
}

/* Collection Split 카드 가격 스타일 */
.ccs .ccs__product .card__information .price-item.price-item--sale {
  color: #111 !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  line-height: 120% !important; /* 20.4px */
}

.ccs .ccs__product .card__information .price-item.price-item--regular {
  color: #B0B0B0 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 120% !important; /* 16.8px */
  text-decoration-line: line-through !important;
}

/* Collection Split 카드 상품명 스타일 */
.ccs .ccs__product .card__information .card__heading {
  color: #111 !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 140% !important; /* 22.4px */
}

/* Collection Split 카드 상품명 링크 호버 효과 제거 */
.ccs .ccs__product .card__information .card__heading a {
  text-decoration: none !important;
}

.ccs .ccs__product .card__information .card__heading a:hover {
  text-decoration: none !important;
}

/* 이미지가 박스를 꽉 채우도록 (cover) */
.ccs .ccs__product .media > img,
.ccs .ccs__product .card__media img,
.ccs .ccs__product .media picture > img,
.ccs .ccs__product .card__media .media > img,
.ccs .ccs__product .card__media .media picture > img{
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;     /* 박스에 맞춰 채우기 */
  object-position: center center !important;
  display: block !important;
  border-radius: inherit;
}

/* 이미지 래퍼도 100% 채우기 */
.ccs .ccs__product .card__media .media{
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  border-radius: inherit;
}

/* (선택) 호버 강조 */
.ccs .ccs__product .card:hover .media{
  border-color: rgba(0,0,0,.12);
  box-shadow: 0 4px 14px rgba(0,0,0,.06);
}

/* ===== 배지(오버레이) ===== */
/* Dawn 기본 배지도 좌상단 고정 */
.ccs .ccs__product .card{ position: static; } /* li가 기준이니 static 유지 */
.ccs .ccs__product .card__badge{
  position: absolute; top: 8px; left: 8px; z-index: 1;
  display: flex; gap: 6px; flex-wrap: wrap; pointer-events: none;
}

/* 커스텀 배지 스택 - GNB보다 낮은 z-index 설정 */
.ccs .ccs__badge-stack{
  position: absolute; top: 8px; left: 8px; z-index: 2;
  display: flex; gap: 6px; flex-wrap: wrap; pointer-events: none;
}
.ccs .ccs__badge{
  pointer-events: none;
  padding: 4px 8px;
  font-size: 12px; line-height: 1; font-weight: 700;
  border-radius: 999px; color: #fff; background: #111; text-transform: uppercase;
  box-shadow: 0 1px 2px rgba(0,0,0,.12);
}
.ccs .ccs__badge--new{ background: #0ea5e9; }      /* sky-ish */
.ccs .ccs__badge--sale{ background: #ef4444; }     /* red */
.ccs .ccs__badge--fast{ background: #f59e0b; }     /* amber */
.ccs .ccs__badge--soldout{ background: #6b7280; }  /* gray */

/* =========================
   Collection Split 추천 리스트 CSS 독립화
   ========================= */

/* Collection Split 내 카드 스타일 완전 독립 처리 */
.csplit__recs .grid__item .card {
  /* 카드 컨테이너 독립 스타일 */
  border-radius: var(--border-radius) !important;
  border-width: var(--border-width) !important; 
  border-opacity: var(--border-opacity) !important;
  box-shadow: var(--shadow-horizontal-offset, 0) var(--shadow-vertical-offset, 0) var(--shadow-blur-radius, 0) rgba(var(--color-shadow), var(--shadow-opacity, 0)) !important;
  background: rgb(var(--color-background)) !important;
  position: relative !important;
  display: block !important;
}

.csplit__recs .grid__item .card__inner {
  /* 카드 내부 컨테이너 독립 */
  border-radius: var(--border-radius) !important;
  background: rgb(var(--color-background)) !important;
  padding: 0 !important;
  margin: 0 !important;
  position: relative !important;
}

.csplit__recs .grid__item .card__media {
  /* 미디어 컨테이너 완전 독립 - 외부 CSS 차단 */
  border-radius: var(--border-radius) var(--border-radius) 0 0 !important;
  overflow: hidden !important;
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important; /* square 비율 강제 */
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}

.csplit__recs .grid__item .card__media .media {
  /* 미디어 래퍼 독립 */
  width: 100% !important;
  height: 100% !important;
  position: relative !important;
  overflow: hidden !important;
  border-radius: inherit !important;
  background: transparent !important;
}

.csplit__recs .grid__item .card__media img {
  /* 이미지 요소 완전 독립 */
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: var(--border-radius) var(--border-radius) 0 0 !important;
  display: block !important;
  position: relative !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

/* 카드 정보 영역도 독립 처리 */
.csplit__recs .grid__item .card__information {
  padding: 1.3rem 1rem !important;
  margin: 0 !important;
  background: rgb(var(--color-background)) !important;
}

/* 컬러 스킴 독립 처리 */
.csplit__recs .grid__item .color-scheme-1,
.csplit__recs .grid__item .color-scheme-2 {
  --color-background: 255, 255, 255 !important;
  --gradient-background: transparent !important;
  --color-foreground: 18, 18, 18 !important;
  background: rgb(var(--color-background)) !important;
}

.csplit__recs .grid__item .gradient {
  background: rgb(var(--color-background)) !important;
  --gradient-background: transparent !important;
}

/* Collection list (Custom)의 12px border-radius 전이 완전 차단 */
.csplit__recs .grid__item .card,
.csplit__recs .grid__item .card__inner,
.csplit__recs .grid__item .card__media,
.csplit__recs .grid__item .card__media img,
.csplit__recs .grid__item .card__media .media {
  border-radius: var(--border-radius) !important;
}

.csplit__recs .grid__item .card__media,
.csplit__recs .grid__item .card__media img {
  border-radius: var(--border-radius) var(--border-radius) 0 0 !important;
}

/* 외부 CSS 전이 차단을 위한 높은 특이성 규칙 */
.ccs .csplit__recs .grid__item .card__media,
.ccs .csplit__recs .grid__item .media {
  border-radius: var(--border-radius) var(--border-radius) 0 0 !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  overflow: hidden !important;
  background: transparent !important;
}

.ccs .csplit__recs .grid__item .card__media img {
  border-radius: var(--border-radius) var(--border-radius) 0 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* Collection list (Custom) 12px border-radius 차단 */
.collection-list-custom ~ .ccs .csplit__recs .grid__item .card__media,
.collection-list-custom ~ .ccs .csplit__recs .grid__item .card__media img {
  border-radius: var(--border-radius) var(--border-radius) 0 0 !important;
}

/* Dawn 추천 컬렉션과 동일한 그리드 스타일 */
.csplit__recs .product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.csplit__recs .grid__item {
  display: block;
}

/* Collection Split Responsive - 태블릿/모바일 단일 컬럼 스택 */
@media (max-width: 1199px) {
  .ccs {
    padding: 60px 16px; /* 반응형에서는 최소 좌우 패딩 유지 */
  }

  .ccs__inner {
    flex-direction: column;
    gap: 32px;
    overflow: visible; /* 세로 스택에서는 오버플로우 허용 */
  }
  
  .ccs__left {
    flex: none;
    width: 100%;
    min-width: auto;
    max-width: none;
    align-items: flex-start;
    text-align: left;
  }
  
  .ccs__right {
    flex: none;
    width: 100%;
    max-width: none;
    min-width: auto;
  }

  /* 반응형에서 그리드 조정 */
  .csplit__recs .product-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem 0.5rem;
  }

  .ccs__product {
    flex: 0 0 280px;
    width: 280px;
    min-width: 280px;
    max-width: 280px;
  }
  
  .ccs__product .card,
  .ccs__product .card-wrapper {
    width: 280px !important;
    max-width: 280px !important;
    min-width: 280px !important;
  }
  
  /* 태블릿에서 미디어 영역은 카드 크기에 맞춰 자동 조정 */
  
  .ccs .ccs__product .card__inner.gradient,
  .ccs .ccs__product .card__inner[class*="color-scheme"],
  .ccs .ccs__product .card__inner{ 
    height: 280px !important; 
    min-height: 280px !important;
    max-height: 280px !important;
  }
}

@media (max-width: 749px) {
  .ccs {
    min-width: auto;
    padding: 60px 16px;
  }
  
  .ccs__product {
    flex: 0 0 240px;
    width: 240px;
    min-width: 240px;
    max-width: 240px;
  }
  
  .ccs__product .card,
  .ccs__product .card-wrapper {
    width: 240px !important;
    max-width: 240px !important;
    min-width: 240px !important;
  }
  
  /* 모바일에서 미디어 영역은 카드 크기에 맞춰 자동 조정 */
  
  .ccs .ccs__product .card__inner.gradient,
  .ccs .ccs__product .card__inner[class*="color-scheme"],
  .ccs .ccs__product .card__inner{ 
    height: 240px !important; 
    min-height: 240px !important;
    max-height: 240px !important;
  }
  
  .ccs__title {
    font-size: 24px; /* Match Events mobile size */
  }
}



/* ===== Brand info (isolated) ===== */
.bi.section {
  max-width: 1400px;
  width: 100%;
  margin-inline: auto;
  box-sizing: border-box;
  padding: 88px 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 94px;
  position: relative;
  z-index: 1 !important; /* GNB(z-index: 99999-100000)보다 낮게 설정 */
}

/* 하위 호환성: .bi만 있는 경우 */
.bi {
  padding: 88px 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 94px;
}

@media (min-width: 750px) {
  .bi {
    min-width: 769px;
  }
}

/* 레이아웃: [왼쪽 패널(타이틀+갤러리)] | [오른쪽 탭] */
.bi__inner{
  width: 100%;
  max-width: 1400px;
  margin-inline: auto;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "panels tabs";
  align-items: start;
  gap: 64px;
}


/* 패널: [타이틀/서브] | [이미지 4장] */
.bi__panels{ grid-area: panels; }
.bi__panel{
  display: grid;
  grid-template-columns: minmax(300px, 380px) 1fr;
  align-items: start;
  gap: 64px;
}

/* 표시 제어 - SSOT (Single Source of Truth) */
.bi__panel:not(.is-active) {
  display: none !important;
}

.bi__panel.is-active {
  display: grid;
}

/* 타이틀 영역 (요구사항) */
.bi__head{
  max-width: var(--content-max);
  display: flex; flex-direction: column;
  align-items: flex-start; align-content: flex-start;
  gap: 32px;
}
.bi__title{
   width: 275px;
  height: 56px;
  margin: 0;
}
.bi .bi__title--img img,
.bi .bi__title--img svg{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;   /* 넘치지 않게 */
  object-position: center;
}
.bi__subtitle{
  margin: 0;
  color: var(--gray-400, #888);
  font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%;
}

/* 이미지 4개 영역 (요구사항) */
.bi__gallery{
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 20px; flex: 1 0 0; flex-wrap: wrap;
}
.bi__img{
  width: 180px;
  max-width: calc(25% - 15px);
  height: 240px;
  margin: 0; overflow: hidden; background:#f7f7f7;
  position: relative;
  flex-shrink: 1;
}
.bi__img img, .bi__img svg{
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%; display: block; 
  object-fit: cover; object-position: center;
}

/* 첫번째, 세번째 이미지 48px 아래로 이동 */
.bi__img:nth-child(1),
.bi__img:nth-child(3) {
  transform: translateY(48px);
}

/* 오른쪽 탭 (요구사항) */
.bi__tabs{ grid-area: tabs; display: flex; flex-direction: column; gap: 16px; }

/* Brand tab order: So Natural → Arocell → Skinrxlab → Dearspa */
.bi__tabs button[data-bi-tab-index="0"] { order: 1; } /* SONATURAL first */
.bi__tabs button[data-bi-tab-index="1"] { order: 2; } /* AROCELL second */
.bi__tabs button[data-bi-tab-index="3"] { order: 3; } /* SKINRx LAB third */
.bi__tabs button[data-bi-tab-index="2"] { order: 4; } /* DEARSPA fourth */

.bi__tab{
  appearance: none; background: transparent; border: 0; padding: 8px 0;
  text-align: right; cursor: pointer;
  color: #111; font-size: 18px; font-style: normal; font-weight: 600; line-height: 120%;
  opacity: .6;
}
.bi__tab.is-active{ opacity: 1; text-decoration: underline; text-underline-offset: 3px; color: #FF4596; }

/* Responsive */
@media (max-width: 1200px){
  .bi__panel{ grid-template-columns: minmax(280px, 340px) 1fr; }
}

/* Tablet: 750px ~ 989px - Dawn 표준 적용 */
@media (min-width: 750px) and (max-width: 989px) {
  .bi__inner{
    grid-template-columns: 1fr;
    grid-template-areas: "panels" "tabs";
  }
  .bi__tabs{ flex-direction: row; flex-wrap: wrap; justify-content: flex-end; }

  /* 표시 제어 유지 - 레이아웃만 조정 */
  .bi__panel:not(.is-active) {
    display: none !important;
  }
  .bi__panel.is-active {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .bi__head{ gap: 24px; }
  .bi__gallery{
    flex-wrap: wrap;
    gap: 12px;
  }
  .bi__img{
    width: calc((100% - 36px) / 4);
    min-width: 120px;
    height: auto;
    aspect-ratio: 180 / 240;
    flex-shrink: 1;
  }
  .bi__img:nth-child(1),
  .bi__img:nth-child(3) { transform: translateY(36px); }
}

/* Mobile: ≤ 749px - Dawn 표준 모바일 브레이크포인트 */
/* ⚠️ 높은 특이성으로 하드코딩 규칙(5076 이하) 오버라이드 */
@media (max-width: 749px) {
  html body .bi.section,
  body .bi.section {
    padding: 40px 0 !important;  /* 상하만 적용, 좌우는 shopify-section에서 */
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* shopify-section 루트 레벨에 좌우 16px 패딩 적용 */
  .shopify-section.section:has(.bi) {
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }

  html body .bi__inner,
  body .bi__inner {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    grid-template-areas: none !important;
    gap: 32px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  html body .bi__tabs,
  body .bi__tabs {
    order: 1 !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    width: 100% !important;
  }

  html body .bi__panels,
  body .bi__panels {
    order: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  html body .bi__panel.is-active,
  body .bi__panel.is-active {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    gap: 24px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  html body .bi__panel:not(.is-active),
  body .bi__panel:not(.is-active) {
    display: none !important;
  }

  html body .bi__head,
  body .bi__head {
    order: 1 !important;
    gap: 20px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  html body .bi__title,
  body .bi__title {
    width: 100% !important;
    max-width: 275px !important;
    height: auto !important;
  }

  html body .bi__gallery,
  body .bi__gallery {
    order: 2 !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  html body .bi__img,
  body .bi__img {
    width: calc((100% - 12px) / 2) !important;
    min-width: 140px !important;
    max-width: calc(50% - 6px) !important;
    height: auto !important;
    aspect-ratio: 180 / 240 !important;
    flex-shrink: 1 !important;
    flex-grow: 0 !important;
  }

  /* 모바일에서는 첫 2개 이미지만 표시 */
  html body .bi__img:nth-child(1),
  html body .bi__img:nth-child(2),
  body .bi__img:nth-child(1),
  body .bi__img:nth-child(2) {
    display: block !important;
    transform: none !important;
  }

  html body .bi__img:nth-child(3),
  html body .bi__img:nth-child(4),
  body .bi__img:nth-child(3),
  body .bi__img:nth-child(4) {
    display: none !important;
  }
}

/* Extra small screens */
@media (max-width: 576px){
  /* Brand Info 섹션 제외 - 다른 섹션에만 적용 */
  .bi__gallery:not(.shopify-section:has(.bi.section) .bi__gallery) {
    gap: 8px;
  }
  .bi__img:not(.shopify-section:has(.bi.section) .bi__img) {
    width: 120px;
    height: 160px;
  }
  .bi__img:nth-child(1):not(.shopify-section:has(.bi.section) .bi__img),
  .bi__img:nth-child(3):not(.shopify-section:has(.bi.section) .bi__img) {
    transform: translateY(24px);
  }
}

/* =========================
   Judge.me Testimonials Carousel Customization - Using Actual Judge.me Classes
   ========================= */

/* 메인 컨테이너 - 정확한 섹션 ID 타겟팅 */
#shopify-section-175617664310e3ce5f {
  max-width: var(--content-max) !important;
  margin: 0 auto !important;
  padding: 48px 24px !important;
}

/* =========================
   공지 표시줄 위치 수정
   ========================= */

/* 공지 표시줄(Announcement Bar)을 최상단 고정 위치로 설정 */
.announcement-bar-section {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 100000 !important; /* 최상위 위치 */
  height: auto !important;
}

.announcement-bar-section .utility-bar {
  position: relative;
  z-index: 100000 !important;
}

/* =========================
   GNB (Global Navigation Bar) 커스터마이징
   ========================= */

/* GNB 메인 헤더 영역 - 모든 페이지 공통 */
.header-wrapper,
.header-wrapper .header {
  z-index: 99999 !important;
  position: relative !important;
}

/* GNB 관련 설정은 아래 GNB 섹션 커스터마이징에서 통합 관리 */

/* 헤더 래퍼 z-index 최상위 설정 */
.header-wrapper {
  z-index: 99999 !important;
}

/* Sticky 상태에서도 z-index 유지 */
sticky-header,
.header-wrapper[data-sticky-type] {
  z-index: 99999 !important;
}

/* 헤더를 공지 표시줄 아래에 위치하도록 설정 */
.header-wrapper {
  position: fixed !important;
  top: var(--announcement-bar-height, 40px) !important; /* 공지 표시줄 높이만큼 아래로 이동 */
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 99999 !important;
}

/* 공지 표시줄이 있는 경우 body 상단 여백 조정 */
body {
  padding-top: 160px !important; /* 공지 표시줄(40px) + 헤더 높이(120px) */
}

/* Sticky 헤더가 아닌 경우에도 공지 표시줄 아래에 위치 */
.header-wrapper:not([data-sticky-type]) {
  position: relative !important;
  top: var(--announcement-bar-height, 40px) !important; /* 공지 표시줄 높이만큼 아래로 이동 */
  left: auto !important;
  right: auto !important;
}

/* 공지 표시줄이 없는 페이지에서 GNB 원래 위치로 복원 */
body:not(:has(.announcement-bar-section)) .header-wrapper {
  top: 0 !important;
}

body:not(:has(.announcement-bar-section)) {
  padding-top: 120px !important; /* 헤더 높이만 */
}

/* =========================
   최상단 공지 섹션 커스터마이징
   ========================= */

/* 공지 섹션 영역 스타일 - 패딩 및 배경 */
.announcement-bar-section .utility-bar {
  --announcement-bar-height: auto;
  padding: 14px 48px !important;
  background: var(--gray-900, linear-gradient(0deg, rgba(0,0,0,.20) 0%, rgba(0,0,0,.20) 100%), linear-gradient(0deg, rgba(0,0,0,.20) 0%, rgba(0,0,0,.20) 100%), linear-gradient(0deg, rgba(0,0,0,.20) 0%, rgba(0,0,0,.20) 100%), linear-gradient(0deg, rgba(0,0,0,.20) 0%, rgba(0,0,0,.20) 100%), #111) !important;
}

/* 공지 텍스트 폰트 스타일 */
.announcement-bar-section .announcement-bar__message {
  color: #F6F6F6 !important;
  text-align: center !important;
  font-size: 16px !important;
  font-style: normal !important;
  font-weight: 500 !important;
  line-height: 120% !important;
  padding: 0 !important; /* 기본 패딩 제거 */
  margin: 0 !important; /* 기본 마진 제거 */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: auto !important;
}

/* 공지 링크 스타일 유지 */
.announcement-bar-section .announcement-bar__link {
  color: #F6F6F6 !important;
  text-decoration: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important;
  width: 100% !important;
}

.announcement-bar-section .announcement-bar__link:hover {
  color: #F6F6F6 !important;
  text-decoration: underline !important;
}

/* Header 로고 가운데 정렬 및 여백 제거 - 홈과 서브페이지 통합 지원 (섹션 스코프) */
.shopify-section-group-header-group .header__heading,
.shopify-section-group-header-group .header .header__heading-link,
[data-section-type="header"] .header__heading,
[data-section-type="header"] .header .header__heading-link {
  margin: 0 !important;
  padding: 0 !important;
  grid-column: 2 !important;
  justify-self: center !important;
  z-index: 10 !important;
}

.header__heading-link {
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
}

.header__heading-logo-wrapper {
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  width: fit-content !important;
}

.header__heading-logo {
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
}

/* Header 햄버거 메뉴 아이콘 height 제거 - 아이콘 크기만 유지 */
.header__icon--menu.header__icon--summary {
  height: auto !important;
  min-height: auto !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.header__icon--menu.header__icon--summary span {
  height: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
}

.header__icon--menu.header__icon--summary .icon {
  width: 26.667px !important;
  height: 18.667px !important;
  display: block !important;
}

/* 슬라이더 타입 공지에도 동일한 스타일 적용 */
.announcement-bar-section .announcement-bar-slider .announcement-bar__message {
  color: #F6F6F6 !important;
  text-align: center !important;
  font-size: 16px !important;
  font-style: normal !important;
  font-weight: 500 !important;
  line-height: 120% !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: auto !important;
}

.announcement-bar-section .announcement-bar-slider .announcement-bar__link {
  color: #F6F6F6 !important;
  text-decoration: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important;
  width: 100% !important;
}

.announcement-bar-section .announcement-bar-slider .announcement-bar__link:hover {
  color: #F6F6F6 !important;
  text-decoration: underline !important;
}

/* =========================
   GNB 섹션 커스터마이징
   ========================= */

/* GNB 컨테이너 스타일 - 그리드 기반 1fr auto 1fr 균형 (섹션 스코프) */
/* 데스크톱 기본 스타일은 990px 미디어쿼리로 이동 - 모바일 우선순위 확보 */
.shopify-section-group-header-group .header-wrapper .header,
[data-section-type="header"] .header-wrapper .header {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important;
  position: relative !important;
}

/* page-width 기본 설정 */
.shopify-section-group-header-group .header-wrapper .header.page-width,
[data-section-type="header"] .header-wrapper .header.page-width {
  max-width: none !important;
}

/* Sticky 헤더 기본 설정 - 패딩은 미디어쿼리에서 설정 */
sticky-header .header,
.header-wrapper[data-sticky-type] .header {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important;
  position: relative !important;
}

/* 모바일 (≤749px) */
@media screen and (max-width: 749px) {
  .shopify-section-group-header-group .header-wrapper .header,
  [data-section-type="header"] .header-wrapper .header,
  sticky-header .header,
  .header-wrapper[data-sticky-type] .header,
  .header-wrapper .header {
    padding: 40px 16px !important;
  }

  .shopify-section-group-header-group .header-wrapper .header.page-width,
  [data-section-type="header"] .header-wrapper .header.page-width,
  .header-wrapper .header.page-width {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* 로그인/마이페이지 아이콘 모바일 표시 */
  .header__icon--account.small-hide {
    display: flex !important;
  }

  /* 모바일 헤더 아이콘 크기 20px */
  .header__icon,
  .header__icon .icon,
  .header__icon .svg-wrapper {
    width: 20px !important;
    height: 20px !important;
  }

  .header__icon--cart .icon {
    width: 20px !important;
    height: 20px !important;
  }

  /* 검색 아이콘 우측 여백 */
  .header__icon--search {
    padding-right: 15px !important;
  }

  /* 햄버거 메뉴 아이콘 좌측 여백 */
  .header__icon--menu {
    padding-left: 16px !important;
  }
}

/* 태블릿 (750px~989px) */
@media screen and (min-width: 750px) and (max-width: 989px) {
  .shopify-section-group-header-group .header-wrapper .header,
  [data-section-type="header"] .header-wrapper .header,
  sticky-header .header,
  .header-wrapper[data-sticky-type] .header,
  .header-wrapper .header {
    padding: 40px 48px !important;
  }

  .shopify-section-group-header-group .header-wrapper .header.page-width,
  [data-section-type="header"] .header-wrapper .header.page-width,
  .header-wrapper .header.page-width {
    padding-left: 48px !important;
    padding-right: 48px !important;
  }
}

/* 데스크톱 (≥990px) */
@media screen and (min-width: 990px) {
  .shopify-section-group-header-group .header-wrapper .header,
  [data-section-type="header"] .header-wrapper .header,
  sticky-header .header,
  .header-wrapper[data-sticky-type] .header,
  .header-wrapper .header {
    padding: 40px 48px !important;
  }

  .shopify-section-group-header-group .header-wrapper .header.page-width,
  [data-section-type="header"] .header-wrapper .header.page-width,
  .header-wrapper .header.page-width {
    padding-left: 48px !important;
    padding-right: 48px !important;
  }
}

/* =========================
   Collection list (Custom) 섹션 커스터마이징
   ========================= */

/* Collection list (Custom) 섹션 내 컬렉션 카드 라운드 처리 (상품 리스트 제외) */
.collection-list-custom .collection-list .card--card,
.collection-list-custom .collection-list .card--standard .card__inner {
  border-radius: 12px !important;
  overflow: hidden !important;
}

.collection-list-custom .collection-list .card__media,
.collection-list-custom .collection-list .card__media .media {
  border-radius: 12px !important;
  overflow: hidden !important;
}

.collection-list-custom .collection-list .card__media img {
  border-radius: 12px !important;
}

.collection-list-custom .collection-list .card__content {
  border-radius: 0 0 12px 12px !important;
}

/* Collection list (Custom) 섹션 내 color-scheme-2 배경 제거 */
.collection-list-custom .color-scheme-2 {
  background: transparent !important;
  --gradient-background: transparent !important;
}

/* Collection list (Custom) 섹션 내 그라데이션 배경 제거 */
.collection-list-custom .gradient {
  background: transparent !important;
  --gradient-background: transparent !important;
}

/* Collection list (Custom) 섹션 내 card__information 여백 제거 */
.collection-list-custom .card__information {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* 모든 화면 크기에서 일관되게 적용 */
@media screen and (min-width: 750px) {
  .collection-list-custom .card__information {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}

/* Collection list (Custom) 클릭 기능 관련 스타일 */
.collection-list-custom .collection-card-clickable {
  cursor: pointer;
  transition: transform 0.2s ease;
}

.collection-list-custom .collection-card-clickable:hover {
  transform: translateY(-2px);
}

/* 링크 동작 금지 */
.collection-list-custom .collection-card-clickable a {
  pointer-events: none !important;
  text-decoration: none !important;
}

/* 상품 리스트 컨테이너 */
.collection-list-custom .collection-products-container {
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(var(--color-foreground), 0.1);
}

/* 로딩 스켈레톤 */
.collection-list-custom .loading-skeleton {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}

@media screen and (max-width: 749px) {
  .collection-list-custom .loading-skeleton {
    grid-template-columns: repeat(2, 1fr);
  }
}

.collection-list-custom .skeleton-item {
  height: 300px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 12px;
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* Collection list (Custom) 상품 그리드 - 추천 컬렉션 스타일 완전 복제 */
.collection-list-custom .collection-products-grid {
  isolation: isolate; /* 전역 누수 방지 */
}

.collection-list-custom .collection-products-grid .product-grid {
  margin-top: 2rem;
}

/* Collection list (Custom) 내부 상품 카드 스타일 초기화 */
.collection-list-custom .collection-products-grid .card {
  border-radius: var(--border-radius) !important;
  border-width: var(--border-width) !important;
  border-opacity: var(--border-opacity) !important;
  box-shadow: var(--shadow-horizontal-offset, 0) var(--shadow-vertical-offset, 0) var(--shadow-blur-radius, 0) rgba(var(--color-shadow), var(--shadow-opacity, 0)) !important;
  background: rgb(var(--color-background)) !important;
}

.collection-list-custom .collection-products-grid .card__inner {
  border-radius: var(--border-radius) !important;
  background: rgb(var(--color-background)) !important;
}

/* Collection list (Custom) 섹션 내 상품 카드 썸네일 영역 상단 모서리만 10px 라운드 적용 */
.collection-list-custom .collection-products-featured-namespace .card__media {
  border-radius: 10px 10px 0 0 !important;
  overflow: hidden !important;
}

.collection-list-custom .collection-products-featured-namespace .card__media .media {
  border-radius: 10px 10px 0 0 !important;
  overflow: hidden !important;
}

.collection-list-custom .collection-products-featured-namespace .card__media img {
  border-radius: 10px 10px 0 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Collection list (Custom) 섹션 내 상품 카드 콘텐츠 재배치 */
.collection-list-custom .collection-products-featured-namespace .card__content {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important;
}

.collection-list-custom .collection-products-featured-namespace .card__information {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important;
}

/* 메타 행: 공급업체(좌측) + 별점(우측) */
.collection-list-custom .collection-products-featured-namespace .card__meta-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 0.5rem !important;
  flex-wrap: wrap !important;
}

.collection-list-custom .collection-products-featured-namespace .card__vendor {
  font-size: 14px !important;
  line-height: 1.4 !important;
  color: #666 !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
}

.collection-list-custom .collection-products-featured-namespace .card__rating {
  flex: 0 0 auto !important;
  margin: 0 !important;
}

/* Judge.me 별점 위젯 가시성 보장 (섹션 스코프) */
.collection-list-custom .collection-products-featured-namespace .card__rating .jdgm-preview-badge {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  z-index: 1 !important;
}

.collection-list-custom .collection-products-featured-namespace .card__rating .jdgm-preview-badge[data-template="product"] {
  display: inline-flex !important;
}

/* Judge.me 별점 스타일 복원 */
.collection-list-custom .collection-products-featured-namespace .jdgm-star {
  display: inline !important;
  font-family: 'JudgemeStar' !important;
  color: var(--jdgm-star-color, #108474) !important;
}

/* 상품명 순서 보장 및 좌측 정렬 - Collection Split과 동일한 스타일 */
.collection-list-custom .collection-products-featured-namespace .card__heading {
  order: 2 !important;
  margin: 0 !important;
  text-align: left !important;
  color: #111 !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 140% !important; /* 22.4px */
}

.collection-list-custom .collection-products-featured-namespace .card__heading a {
  text-align: left !important;
  color: #111 !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 140% !important; /* 22.4px */
}

/* 가격 순서 보장 및 좌측 정렬 */
.collection-list-custom .collection-products-featured-namespace .price {
  order: 3 !important;
  margin: 0 !important;
  text-align: left !important;
}

.collection-list-custom .collection-products-featured-namespace .price__container {
  text-align: left !important;
}

.collection-list-custom .collection-products-featured-namespace .price__regular,
.collection-list-custom .collection-products-featured-namespace .price__sale {
  text-align: left !important;
}


/* 컬러 스킴 재정의 - 전역 상속 차단 */
.collection-list-custom .collection-products-grid .color-scheme-1,
.collection-list-custom .collection-products-grid .color-scheme-2 {
  --color-background: 255, 255, 255;
  --gradient-background: transparent;
  --color-foreground: 18, 18, 18;
  background: rgb(var(--color-background)) !important;
}

.collection-list-custom .collection-products-grid .gradient {
  background: rgb(var(--color-background)) !important;
  --gradient-background: transparent !important;
}

/* 에러 및 빈 상품 메시지 */
.collection-list-custom .error-message,
.collection-list-custom .no-products-message {
  text-align: center;
  padding: 3rem 0;
  color: rgba(var(--color-foreground), 0.7);
  font-size: 1.4rem;
}

/* 이미지 플레이스홀더 스타일 */
.collection-list-custom .image-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 200px;
  background-color: #f5f5f5;
  color: #666;
  font-size: 1.2rem;
  border: 1px dashed #ccc;
  border-radius: var(--border-radius);
}

/* Collections 페이지 enhanced template 스타일링 - 섹션 스코프 한정 */
.main-collection-product-grid .grid__item {
  position: relative;
}

.main-collection-product-grid .card-wrapper {
  position: relative;
}

/* XB Wishlist Button positioning */
.main-collection-product-grid .card__wishlist-wrapper {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 5;
}

/* Product badges - 메인화면과 동일한 스타일링 + 강제 가시성 */
.main-collection-product-grid .card__media {
  position: relative !important;
  overflow: visible !important;
}

.main-collection-product-grid .product__badges {
  position: absolute !important;
  top: 8px !important;
  left: 8px !important;
  z-index: 999 !important; /* 최대한 위로 */
  display: flex !important;
  gap: 4px !important;
  pointer-events: none !important;
  margin-right: 60px !important; /* Wishlist 버튼 공간 확보 */
  visibility: visible !important;
  opacity: 1 !important;
  max-width: none !important;
  max-height: none !important;
  overflow: visible !important;
  transform: none !important;
}

/* 할인/세일 뱃지 - .ccs 섹션과 완전 동일 */
.main-collection-product-grid .product__badge--discount,
.main-collection-product-grid .product__badge--sale {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  padding: 4px 6px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 4px;
  line-height: 1.2;
  white-space: nowrap;
}

.main-collection-product-grid .product__badge--discount {
  background: #FF4596;
  color: #ffffff;
}

.main-collection-product-grid .product__badge--sale {
  background: #111111;
  color: #ffffff;
}

.main-collection-product-grid .product__badge--new {
  background: #00C851;
  color: #ffffff;
}

.main-collection-product-grid .product__badge--fast {
  background: #ff6900;
  color: #ffffff;
}

.main-collection-product-grid .product__badge--soldout {
  background: #999999;
  color: #ffffff;
}

/* 카드 배경색 제거 - 회색 배경 완전 제거 */
.main-collection-product-grid .card__inner {
  background: transparent !important;
  background-color: transparent !important;
}

.main-collection-product-grid .card__inner.color-scheme-2 {
  background: transparent !important;
  background-color: transparent !important;
}

.main-collection-product-grid .card__inner.gradient {
  background: transparent !important;
  background-color: transparent !important;
}

/* card__content 배경색도 제거 */
.main-collection-product-grid .card__content {
  background: transparent !important;
  background-color: transparent !important;
}

.main-collection-product-grid .card__content.color-scheme-2 {
  background: transparent !important;
  background-color: transparent !important;
}

/* 색상 스킴 전체 재정의 - gradient-background 완전 차단 */
.main-collection-product-grid .color-scheme-2 {
  --gradient-background: transparent !important;
  background: transparent !important;
  background-color: transparent !important;
}

/* 카드 래퍼 전체 배경 제거 */
.main-collection-product-grid .card-wrapper {
  background: transparent !important;
  background-color: transparent !important;
}

.main-collection-product-grid .card {
  background: transparent !important;
  background-color: transparent !important;
}

/* gradient 클래스 배경 완전 차단 */
.main-collection-product-grid .gradient {
  background: transparent !important;
  background-color: transparent !important;
}

/* 메타 행 레이아웃 (공급업체 + Judge.me 별점) - Collection Split과 완전 동일 */
.main-collection-product-grid .card__meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  min-height: 20px;
}

.main-collection-product-grid .card__vendor {
  flex: 1;
  min-width: 0;
  color: rgba(var(--color-foreground), 0.7);
  font-size: 12px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.main-collection-product-grid .card__rating {
  flex-shrink: 0;
  margin-left: auto;
  display: flex;
  align-items: center;
}

/* Judge.me 위젯 스타일링 - Collection Split과 완전 동일 */
.main-collection-product-grid .card__rating .jdgm-widget.jdgm-preview-badge {
  font-size: 12px !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  display: inline-block !important;
  vertical-align: middle !important;
  visibility: visible !important;
  opacity: 1 !important;
  min-height: 16px;
  position: relative;
  z-index: 3;
  overflow: visible !important;
}

/* Judge.me 상품명 숨김 (별점만 표시) */
.main-collection-product-grid .card__rating .jdgm-prev-badge__text {
  display: none !important;
}

/* Judge.me 별점 컨테이너 */
.main-collection-product-grid .card__rating .jdgm-prev-badge__stars {
  display: inline-block !important;
  font-size: 12px !important;
  vertical-align: middle !important;
}

/* Judge.me 별 아이콘 */
.main-collection-product-grid .card__rating .jdgm-star {
  font-size: 12px !important;
  line-height: 1 !important;
  display: inline !important;
  color: #FF4596 !important;
}

/* Judge.me 위젯 완료 상태 */
.main-collection-product-grid .card__rating .jdgm-widget.jdgm--done-setup {
  opacity: 1;
  display: inline-block !important;
}

/* Media link styling to maintain card hover effects - Collection Split과 동일 */
.main-collection-product-grid .card__media a.media {
  display: block;
  text-decoration: none;
  color: inherit;
}

.main-collection-product-grid .card__media a.media:hover,
.main-collection-product-grid .card__media a.media:focus {
  transform: scale(1.05);
  transition: transform 0.2s ease;
}

/* 이미지 placeholder 스타일 - Collection Split과 동일 */
.main-collection-product-grid .image-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f3f3f3;
  color: #666;
  font-size: 12px;
  height: 100%;
  min-height: 200px;
}

/* XB Wishlist 버튼 스타일링 */
.main-collection-product-grid xb-wishlist-button-collection,
.main-collection-product-grid .xb-wishlist-button-collection,
.main-collection-product-grid .xb-wishlist-button-collection__add,
.main-collection-product-grid .xb-wishlist-button-collection__remove {
  position: relative;
  z-index: 6;
}

/* 카드 정보 섹션 스타일링 - Collection Split과 완전 동일 */
.main-collection-product-grid .card__content {
  padding: 0 !important;
  margin-top: 0;
}

.main-collection-product-grid .card__information {
  padding: 20px !important;
}

/* 상품명 스타일링 - Collection Split과 완전 동일 */
.main-collection-product-grid .card__information .card__heading {
  color: #111 !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 140% !important; /* 22.4px */
  margin: 0 0 0.5rem 0 !important;
  font-family: inherit !important;
}

.main-collection-product-grid .card__information .card__heading a {
  text-decoration: none !important;
  color: inherit !important;
}

.main-collection-product-grid .card__information .card__heading a:hover {
  text-decoration: none !important;
}

/* 가격 스타일링 - Collection Split과 완전 동일 */
.main-collection-product-grid .card__information .price-item.price-item--sale {
  color: #111 !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  line-height: 120% !important; /* 20.4px */
}

.main-collection-product-grid .card__information .price-item.price-item--regular {
  color: #B0B0B0 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 120% !important; /* 16.8px */
  text-decoration-line: line-through !important;
}

.main-collection-product-grid .price__sale {
  text-align: left !important;
}

/* 헤더 내부 요소들이 제대로 배치되도록 */
.header__inner {
  max-width: 100% !important;
  width: 100% !important;
}

/* 헤더 그리드 요소 배치 - 1fr auto 1fr 균형 (섹션 스코프) */
.shopify-section-group-header-group .header header-drawer,
.shopify-section-group-header-group .header .header__icons:first-of-type,
[data-section-type="header"] .header header-drawer,
[data-section-type="header"] .header .header__icons:first-of-type {
  grid-column: 1 !important;
  justify-self: start !important;
}

.shopify-section-group-header-group .header .header__icons:last-of-type,
.shopify-section-group-header-group .header .header__icons--localization,
[data-section-type="header"] .header .header__icons:last-of-type,
[data-section-type="header"] .header .header__icons--localization {
  grid-column: 3 !important;
  justify-self: end !important;
}

/* 모바일에서도 동일한 그리드 구조 유지 (섹션 스코프) */
@media screen and (max-width: 749px) {
  .shopify-section-group-header-group .header--mobile-center .header__heading,
  .shopify-section-group-header-group .header--mobile-center .header__heading-link,
  [data-section-type="header"] .header--mobile-center .header__heading,
  [data-section-type="header"] .header--mobile-center .header__heading-link {
    grid-column: 2 !important;
    justify-self: center !important;
  }
}

/* =========================
   Dawn 기반 Trending Now (Juniper TikTok Feed) - 4×2 그리드 Override
   ========================= */

/* 🎯 Trending Now Title - UNIFIED TO MATCH EVENTS SECTION */
#mintty-tiktok-feed h2,
.mintty-tiktok-feed h2,
[id*="mintty-tiktok-feed"] h2,
[class*="mintty-tiktok"] h2 {
  color: #111 !important;
  font-size: 32px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  margin: 0 0 24px 0 !important;
  font-family: 'Sukhumvit Set', 'Helvetica Neue', Helvetica, 'Pretendard', sans-serif !important;
}

/* Trending Now Title - Mobile Responsive */
@media screen and (max-width: 989px) {
  #mintty-tiktok-feed h2,
  .mintty-tiktok-feed h2,
  [id*="mintty-tiktok-feed"] h2,
  [class*="mintty-tiktok"] h2 {
    font-size: 24px !important; /* Match Events mobile: 24px */
    line-height: 1.2 !important;
    margin: 0 0 16px 0 !important;
  }
}

/* 📱 TikTok Feed 전체 섹션 */

.shopify-section[data-section-type="apps"]:has([class*="mintty-tiktok"]),
.section:has([class*="juniper-tiktok"]),
.section:has([id*="mintty-tiktok-feed"]) {
  width: 100% !important;
  max-width: var(--content-max) !important;
  margin: 0 auto !important;
  padding: 48px 24px !important;
  box-sizing: border-box;
}

/* 🎯 핵심: Juniper TikTok Feed 컨테이너 오버라이드 */
#mintty-tiktok-feed,
.mintty-tiktok-feed,
[id*="mintty-tiktok-feed"],
[class*="mintty-tiktok-feed"],
.juniper-new-carousel,
.juniper-tiktok-container {
  width: 100% !important;
  max-width: 100% !important;
  overflow: visible !important;
  position: relative !important;
}

/* 슬라이더 컨테이너를 그리드로 강제 변환 */
#mintty-tiktok-feed .juniper-new-carousel-container,
#mintty-tiktok-feed .carousel-container,
#mintty-tiktok-feed .swiper-container,
.mintty-tiktok-feed .juniper-new-carousel-container,
.mintty-tiktok-feed .carousel-container,
[class*="mintty-tiktok"] .juniper-new-carousel-container,
[id*="mintty-tiktok"] .juniper-new-carousel-container {
  height: auto !important;
  width: 100% !important;
  overflow: visible !important;
  transform: none !important;
}

/* 🎨 4×2 그리드 래퍼 */
#mintty-tiktok-feed .juniper-new-carousel-wrapper,
#mintty-tiktok-feed .carousel-wrapper,
#mintty-tiktok-feed .swiper-wrapper,
.mintty-tiktok-feed .juniper-new-carousel-wrapper,
.mintty-tiktok-feed .carousel-wrapper,
[class*="mintty-tiktok"] .juniper-new-carousel-wrapper,
[id*="mintty-tiktok"] .juniper-new-carousel-wrapper {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  grid-template-rows: repeat(2, 1fr) !important;
  gap: 20px !important;
  width: 100% !important;
  height: auto !important;
  justify-items: center !important;
  align-items: start !important;
  transform: none !important;
  transition: none !important;
  overflow: visible !important;
  flex-direction: unset !important;
  flex-wrap: unset !important;
}

/* 🔲 개별 TikTok 아이템 - PC 335×440px */
#mintty-tiktok-feed .juniper-new-carousel-item,
#mintty-tiktok-feed .carousel-item,
#mintty-tiktok-feed .swiper-slide,
.mintty-tiktok-feed .juniper-new-carousel-item,
.mintty-tiktok-feed .carousel-item,
[class*="mintty-tiktok"] .juniper-new-carousel-item,
[id*="mintty-tiktok"] .juniper-new-carousel-item {
  width: 100% !important;
  max-width: 335px !important;
  height: 440px !important;
  min-height: 440px !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: none !important;
  transform: none !important;
  transition: all 0.3s ease !important;
  position: relative !important;
  display: block !important;
  background: #000 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
  aspect-ratio: unset !important; /* Dawn 기본 ratio 제거 */
}

/* 🖼️ 이미지/비디오 - center cover 크롭 */
#mintty-tiktok-feed .juniper-new-carousel-item img,
#mintty-tiktok-feed .juniper-new-carousel-item video,
#mintty-tiktok-feed .juniper-new-carousel-item iframe,
#mintty-tiktok-feed .carousel-item img,
#mintty-tiktok-feed .carousel-item video,
.mintty-tiktok-feed .juniper-new-carousel-item img,
.mintty-tiktok-feed .juniper-new-carousel-item video,
[class*="mintty-tiktok"] .juniper-new-carousel-item img,
[class*="mintty-tiktok"] .juniper-new-carousel-item video,
[id*="mintty-tiktok"] .juniper-new-carousel-item img,
[id*="mintty-tiktok"] .juniper-new-carousel-item video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  border-radius: inherit !important;
  border: none !important;
  max-width: none !important;
  max-height: none !important;
  transform: none !important;
}

/* ✨ 호버 효과 보존 */
#mintty-tiktok-feed .juniper-new-carousel-item:hover,
#mintty-tiktok-feed .carousel-item:hover,
.mintty-tiktok-feed .juniper-new-carousel-item:hover,
[class*="mintty-tiktok"] .juniper-new-carousel-item:hover,
[id*="mintty-tiktok"] .juniper-new-carousel-item:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 12px 24px rgba(0,0,0,0.25) !important;
}

/* 🚫 슬라이더 네비게이션 완전 제거 */
#mintty-tiktok-feed .carousel-nav,
#mintty-tiktok-feed .swiper-button-prev,
#mintty-tiktok-feed .swiper-button-next,
#mintty-tiktok-feed .swiper-pagination,
#mintty-tiktok-feed [class*="arrow"],
#mintty-tiktok-feed [class*="prev"],
#mintty-tiktok-feed [class*="next"],
#mintty-tiktok-feed [class*="dot"],
#mintty-tiktok-feed [class*="pagination"],
#mintty-tiktok-feed button,
.mintty-tiktok-feed .carousel-nav,
.mintty-tiktok-feed .swiper-button-prev,
.mintty-tiktok-feed .swiper-button-next,
.mintty-tiktok-feed .swiper-pagination,
.mintty-tiktok-feed [class*="arrow"],
.mintty-tiktok-feed [class*="prev"],
.mintty-tiktok-feed [class*="next"],
.mintty-tiktok-feed [class*="dot"],
.mintty-tiktok-feed [class*="pagination"],
.mintty-tiktok-feed button,
[class*="mintty-tiktok"] .carousel-nav,
[class*="mintty-tiktok"] .swiper-button-prev,
[class*="mintty-tiktok"] .swiper-button-next,
[class*="mintty-tiktok"] .swiper-pagination,
[class*="mintty-tiktok"] [class*="arrow"],
[class*="mintty-tiktok"] [class*="prev"],
[class*="mintty-tiktok"] [class*="next"],
[class*="mintty-tiktok"] [class*="dot"],
[class*="mintty-tiktok"] [class*="pagination"],
[class*="mintty-tiktok"] button,
[id*="mintty-tiktok"] button {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
}

/* 🔢 8개 제한 - 9번째 이상 숨김 */
#mintty-tiktok-feed .juniper-new-carousel-item:nth-child(n+9),
#mintty-tiktok-feed .carousel-item:nth-child(n+9),
.mintty-tiktok-feed .juniper-new-carousel-item:nth-child(n+9),
[class*="mintty-tiktok"] .juniper-new-carousel-item:nth-child(n+9),
[id*="mintty-tiktok"] .juniper-new-carousel-item:nth-child(n+9) {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  position: absolute !important;
  left: -9999px !important;
  pointer-events: none !important;
  z-index: -999 !important;
}

/* 🔗 링크 기능 보존 */
#mintty-tiktok-feed a[href],
.mintty-tiktok-feed a[href],
[class*="mintty-tiktok"] a[href],
[id*="mintty-tiktok"] a[href] {
  display: block !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  color: inherit !important;
  text-decoration: none !important;
}

/* 📱 반응형 디자인 */
@media (max-width: 1200px) {
  #mintty-tiktok-feed .juniper-new-carousel-wrapper,
  .mintty-tiktok-feed .juniper-new-carousel-wrapper,
  [class*="mintty-tiktok"] .juniper-new-carousel-wrapper,
  [id*="mintty-tiktok"] .juniper-new-carousel-wrapper {
    grid-template-columns: repeat(4, 1fr) !important;
    grid-template-rows: repeat(2, 1fr) !important;
    gap: 18px !important;
  }
  
  #mintty-tiktok-feed .juniper-new-carousel-item,
  .mintty-tiktok-feed .juniper-new-carousel-item,
  [class*="mintty-tiktok"] .juniper-new-carousel-item,
  [id*="mintty-tiktok"] .juniper-new-carousel-item {
    max-width: 300px !important;
    height: 395px !important;
    min-height: 395px !important;
  }
}

@media (max-width: 749px) {
  #mintty-tiktok-feed .juniper-new-carousel-wrapper,
  .mintty-tiktok-feed .juniper-new-carousel-wrapper,
  [class*="mintty-tiktok"] .juniper-new-carousel-wrapper,
  [id*="mintty-tiktok"] .juniper-new-carousel-wrapper {
    grid-template-columns: repeat(3, 1fr) !important;
    grid-template-rows: repeat(3, 1fr) !important;
    gap: 16px !important;
  }
  
  #mintty-tiktok-feed .juniper-new-carousel-item,
  .mintty-tiktok-feed .juniper-new-carousel-item,
  [class*="mintty-tiktok"] .juniper-new-carousel-item,
  [id*="mintty-tiktok"] .juniper-new-carousel-item {
    max-width: 280px !important;
    height: 368px !important;
    min-height: 368px !important;
  }
}

@media (max-width: 480px) {
  .shopify-section.section-apps {
    padding: 32px 16px !important;
  }
  
  #mintty-tiktok-feed .juniper-new-carousel-wrapper,
  .mintty-tiktok-feed .juniper-new-carousel-wrapper,
  [class*="mintty-tiktok"] .juniper-new-carousel-wrapper,
  [id*="mintty-tiktok"] .juniper-new-carousel-wrapper {
    grid-template-columns: repeat(2, 1fr) !important;
    grid-template-rows: repeat(4, 1fr) !important;
    gap: 12px !important;
  }
  
  #mintty-tiktok-feed .juniper-new-carousel-item,
  .mintty-tiktok-feed .juniper-new-carousel-item,
  [class*="mintty-tiktok"] .juniper-new-carousel-item,
  [id*="mintty-tiktok"] .juniper-new-carousel-item {
    max-width: 100% !important;
    height: 280px !important;
    min-height: 280px !important;
  }
}

/* =========================
   롤링 배너 섹션 CSS 커스터마이징
   ========================= */

/* 롤링 배너 섹션 전용 - 트랙 gap을 12px로 수정 */
.section-rolling-banner [class*="rolling-banner__track"],
[class*="section-"]:has([class*="rolling-banner"]) [class*="rolling-banner__track"] {
  gap: 12px !important;
}

/* 롤링 배너 섹션 전용 - 아이템 내부 요소 간 gap을 12px로 수정 */
.section-rolling-banner .rolling-banner__item,
[class*="section-"]:has([class*="rolling-banner"]) .rolling-banner__item {
  gap: 12px !important;
}

/* 롤링 배너 섹션 전용 - 이미지 래퍼 세로 가운데 정렬 강화 */
.section-rolling-banner .rolling-banner__image-wrapper,
[class*="section-"]:has([class*="rolling-banner"]) .rolling-banner__image-wrapper {
  width: auto !important;
  height: 40px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  align-self: center !important; /* 부모 컨테이너 내에서 세로 가운데 정렬 */
  vertical-align: middle !important; /* 추가 세로 정렬 보장 */
}

/* 롤링 배너 섹션 전용 - 이미지 세로 가운데 정렬 완벽 적용 */
.section-rolling-banner .rolling-banner__image,
[class*="section-"]:has([class*="rolling-banner"]) .rolling-banner__image {
  width: auto !important;
  max-width: none !important;
  height: 40px !important;
  object-fit: contain !important;
  object-position: center center !important; /* 가로+세로 모두 가운데 */
  vertical-align: middle !important; /* 세로 정렬 보장 */
  display: block !important; /* 인라인 요소 정렬 문제 방지 */
}

/* 롤링 배너 무한 롤링 개선 - 끊김 없는 애니메이션 */
[class*="rolling-banner__track"] {
  width: 400% !important; /* 원본 + 3배 중복으로 충분한 길이 확보 */
  min-width: 400% !important;
  animation-timing-function: linear !important;
}

/* 롤링 배너 애니메이션 키프레임 재정의 */
@keyframes rolling-banner-seamless {
  from { 
    transform: translateX(0); 
  }
  to { 
    transform: translateX(-25%); /* 400% 중 25%만 이동하여 완벽한 루프 */
  }
}

/* 모든 롤링 배너 트랙에 새 애니메이션 적용 */
[class*="rolling-banner__track"] {
  animation-name: rolling-banner-seamless !important;
}

/* 롤링 배너 컨테이너 - overflow 처리 강화 */
[class*="rolling-banner__container"] {
  overflow: hidden !important;
  position: relative !important;
}

/* 롤링 배너 아이템들 - 연속성 보장 및 세로 정렬 강화 */
.section-rolling-banner .rolling-banner__item,
[class*="section-"]:has([class*="rolling-banner"]) .rolling-banner__item {
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  display: flex !important;
  align-items: center !important; /* 아이템 내 모든 요소 세로 가운데 정렬 */
  height: 40px !important; /* 컨테이너 높이와 일치 */
}

/* 롤링 배너 전체 섹션 - 세로 가운데 정렬 강화 */
[class*="section-"][class*="rolling-banner"] {
  display: flex !important;
  align-items: center !important;
}

/* 롤링 배너 트랙 - 세로 가운데 정렬 */
[class*="rolling-banner__track"] {
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
}

/* 롤링 배너 텍스트 - 이미지와 동일한 세로 정렬 */
.section-rolling-banner .rolling-banner__title,
[class*="section-"]:has([class*="rolling-banner"]) .rolling-banner__title {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 40px !important; /* 이미지 높이와 동일하게 설정 */
  display: flex !important;
  align-items: center !important;
  height: 40px !important;
}

/* =========================================================
   Trending Now TikTok Feed Section - Max Width and Full Width Content
   ========================================================= */

/* Override existing styles to apply max-width: 1400px and center alignment */
.shopify-section.section-apps {
  max-width: 1400px;
  width: 100%;
  margin-inline: auto;
  box-sizing: border-box;
  padding-inline: 0;
}

/* Ensure page-width container fills full width without additional padding */
.shopify-section.section-apps .page-width {
  max-width: none;
  width: 100%;
  padding-inline: 0;
}

/* Ensure app block content fills available width */
.shopify-section.section-apps .shopify-app-block,
.shopify-section.section-apps [class*="mintty-tiktok"],
.shopify-section.section-apps [id*="mintty-tiktok"] {
  width: 100%;
  margin-inline: 0;
}

/* Override high-specificity global padding rules for TikTok feed section */
.shopify-section.section-apps:has([class*="mintty-tiktok"]) {
  padding: 0 !important;
}

.shopify-section.section-apps .shopify-section:has([class*="mintty-tiktok"]) {
  padding: 0 !important;
}

.shopify-section.section-apps .page-width:has([class*="mintty-tiktok"]) {
  padding: 0 !important;
}

/* Additional overrides with maximum specificity */
html body .shopify-section.section-apps {
  max-width: 1400px !important;
  padding-inline: 0 !important;
  margin-inline: auto !important;
}

html body .shopify-section.section-apps .page-width {
  max-width: none !important;
  padding-inline: 0 !important;
}

/* =========================================================
   LNB Side Menu - Vertical Single Column Layout
   ========================================================= */

/* Target both Dawn native menu and Qikify Smart Menu within drawer */
.menu-drawer-container.menu-opening .menu-drawer {
  /* Ensure drawer is displayed properly */
  visibility: visible;
}

/* Dawn Native Menu - Force 1-depth items to vertical single column */
.menu-drawer-container.menu-opening .menu-drawer__menu,
.menu-drawer-container.menu-opening .menu-drawer__navigation .list-menu,
details[open].menu-opening .menu-drawer__menu {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0 !important;
  width: 100% !important;
}

/* Dawn Native Menu - 1-depth menu items to full width single line */
.menu-drawer-container.menu-opening .menu-drawer__menu-item,
.menu-drawer-container.menu-opening .list-menu__item,
details[open].menu-opening .menu-drawer__menu-item {
  display: block !important;
  width: 100% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  margin-bottom: 0 !important;
}

/* Qikify Smart Menu - Override desktop horizontal layout for mobile drawer */
.menu-drawer-container.menu-opening .tmenu_nav,
.menu-drawer-container.menu-opening .tmenu_navbar {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  width: 100% !important;
}

/* Qikify Smart Menu - 1-depth root items to full width single line */
.menu-drawer-container.menu-opening .tmenu_item--root,
.menu-drawer-container.menu-opening .tmenu_item {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  margin: 0 !important;
  vertical-align: top !important;
}

/* Qikify Smart Menu - Links within root items */
.menu-drawer-container.menu-opening .tmenu_item--root > .tmenu_item_link,
.menu-drawer-container.menu-opening .tmenu_item_link {
  display: block !important;
  width: 100% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  padding: 1.1rem 3rem !important; /* Match Dawn menu padding */
  box-sizing: border-box !important;
}

/* Remove any grid or multi-column layouts within drawer scope */
.menu-drawer-container.menu-opening [class*="grid"],
.menu-drawer-container.menu-opening [class*="col-"],
.menu-drawer-container.menu-opening .tmenu_col {
  display: block !important;
  flex: none !important;
  width: 100% !important;
  max-width: 100% !important;
  grid-template-columns: none !important;
  column-count: 1 !important;
}

/* Preserve existing functionality - transitions, focus states, etc */
.menu-drawer-container.menu-opening .menu-drawer__menu-item:hover,
.menu-drawer-container.menu-opening .menu-drawer__menu-item:focus,
.menu-drawer-container.menu-opening .tmenu_item_link:hover,
.menu-drawer-container.menu-opening .tmenu_item_link:focus {
  /* Maintain existing hover/focus styles */
  color: rgb(var(--color-foreground)) !important;
  background-color: rgba(var(--color-foreground), 0.04) !important;
}

/* Responsive - maintain single column layout at all breakpoints */
@media screen and (min-width: 768px) {
  .menu-drawer-container.menu-opening .tmenu_nav {
    flex-direction: column !important;
  }

  .menu-drawer-container.menu-opening .tmenu_item--root,
  .menu-drawer-container.menu-opening .tmenu_item {
    display: block !important;
  }
}

@media screen and (min-width: 990px) {
  .menu-drawer-container.menu-opening .tmenu_nav {
    flex-direction: column !important;
  }
}

/* =========================================================
   LNB 2-Depth Submenu Visibility Fix - Respecting qikify Rules
   ========================================================= */

/* Fix layout clipping issues - ensure containers can show submenus */
.menu-drawer-container.menu-opening .tmenu_item--root,
.menu-drawer-container.menu-opening .tmenu_item_mobile {
  position: relative !important;
  overflow: visible !important;
}

/* Refine 1-depth white-space rules to NOT affect submenus */
.menu-drawer-container.menu-opening .tmenu_item--root > .tmenu_item_link,
.menu-drawer-container.menu-opening .tmenu_item_mobile > .tmenu_item_link {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Allow submenu content to wrap normally */
.menu-drawer-container.menu-opening .tmenu_submenu,
.menu-drawer-container.menu-opening .tmenu_submenu * {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: initial !important;
}

/* qikify Smart Menu - Mobile submenu visibility toggle */
.menu-drawer-container.menu-opening .tmenu_item_mobile.tmenu_item_active > .tmenu_submenu,
.menu-drawer-container.menu-opening .tmenu_item_mobile[aria-expanded="true"] > .tmenu_submenu {
  height: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
  overflow: visible !important;
  pointer-events: auto !important;
  transition: height 0.3s ease, opacity 0.2s ease !important;
}

/* Ensure inactive submenus are properly hidden */
.menu-drawer-container.menu-opening .tmenu_item_mobile:not(.tmenu_item_active) > .tmenu_submenu {
  height: 0 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

/* Desktop submenu positioning within drawer context */
.menu-drawer-container.menu-opening .tmenu_item--root > .tmenu_submenu {
  position: absolute !important;
  left: 100% !important;
  top: 0 !important;
  z-index: 999 !important;
  min-width: 200px !important;
  background: #fff !important;
  box-shadow: 0 5px 20px rgba(0,0,0,0.15) !important;
}

/* However, in drawer context, prefer mobile-style vertical expansion */
@media screen and (max-width: 989px) {
  .menu-drawer-container.menu-opening .tmenu_item--root > .tmenu_submenu {
    position: relative !important;
    left: 0 !important;
    top: auto !important;
    width: 100% !important;
    padding-left: 15px !important;
    background: transparent !important;
    box-shadow: none !important;
  }
}

/* Preserve qikify's indicator arrow rotation on active state */
.menu-drawer-container.menu-opening .tmenu_item_mobile.tmenu_item_active .tmenu_indicator_icon {
  transform: rotate(-180deg) !important;
}

/* Fix potential z-index layering issues within drawer */
.menu-drawer-container.menu-opening {
  z-index: 1000 !important;
}

.menu-drawer-container.menu-opening .menu-drawer {
  z-index: 1001 !important;
}

.menu-drawer-container.menu-opening .tmenu_submenu {
  z-index: 1002 !important;
}

/* Ensure Dawn native menu 2-depth also works within drawer */
.menu-drawer-container.menu-opening .menu-drawer__submenu {
  position: relative !important;
  transform: translateX(0) !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  left: 0 !important;
  top: auto !important;
  padding-left: 15px !important;
  background: rgba(var(--color-foreground), 0.02) !important;
  transition: all var(--duration-default) ease !important;
}

/* Maintain proper spacing for nested menu items */
.menu-drawer-container.menu-opening .tmenu_submenu .tmenu_item_link,
.menu-drawer-container.menu-opening .menu-drawer__submenu .menu-drawer__menu-item {
  padding-left: 2rem !important;
  font-size: 0.9rem !important;
  opacity: 0.9 !important;
}

/* =========================================================
   Fixed: qikify Submenu Visibility Based on Actual HTML Structure
   ========================================================= */

/* Force submenu visibility on hover/focus for drawer context */
.menu-drawer-container.menu-opening .tmenu_item--root:hover > .tmenu_submenu,
.menu-drawer-container.menu-opening .tmenu_item--root:focus-within > .tmenu_submenu,
.menu-drawer-container.menu-opening .tmenu_item--root.tmenu_item_active > .tmenu_submenu {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}

/* Default hidden state for submenus */
.menu-drawer-container.menu-opening .tmenu_submenu {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  position: relative !important;
  left: 0 !important;
  top: auto !important;
  width: 100% !important;
  padding: 10px 0 !important;
  margin: 5px 0 !important;
  background: rgba(var(--color-foreground), 0.02) !important;
  border-left: 3px solid rgba(var(--color-foreground), 0.1) !important;
  transition: all 0.3s ease !important;
}

/* Make submenu items properly styled */
.menu-drawer-container.menu-opening .tmenu_submenu .tmenu_item {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.menu-drawer-container.menu-opening .tmenu_submenu .tmenu_item_link {
  display: block !important;
  width: 100% !important;
  padding: 8px 15px 8px 30px !important;
  color: rgba(var(--color-foreground), 0.8) !important;
  font-size: 0.9rem !important;
  line-height: 1.4 !important;
  white-space: normal !important;
  text-decoration: none !important;
  border-radius: 0 !important;
  transition: background-color 0.2s ease !important;
}

.menu-drawer-container.menu-opening .tmenu_submenu .tmenu_item_link:hover {
  background-color: rgba(var(--color-foreground), 0.08) !important;
  color: rgb(var(--color-foreground)) !important;
}

/* Fix collection images in submenus */
.menu-drawer-container.menu-opening .tmenu_submenu .tmenu_collection {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.menu-drawer-container.menu-opening .tmenu_submenu .tmenu_collection img {
  width: 30px !important;
  height: 30px !important;
  object-fit: cover !important;
  border-radius: 4px !important;
  flex-shrink: 0 !important;
}

/* Click-based interaction for mobile devices */
@media (max-width: 749px) {
  .menu-drawer-container.menu-opening .tmenu_item--root > .tmenu_item_link {
    cursor: pointer !important;
    position: relative !important;
  }

  /* Show submenu on click/tap (requires JS but provide fallback) */
  .menu-drawer-container.menu-opening .tmenu_item--root:active > .tmenu_submenu,
  .menu-drawer-container.menu-opening .tmenu_item--root[data-expanded="true"] > .tmenu_submenu {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}

/* Ensure proper stacking context */
.menu-drawer-container.menu-opening .tmenu_item--root {
  position: relative !important;
  z-index: 1 !important;
}

.menu-drawer-container.menu-opening .tmenu_submenu {
  z-index: 2 !important;
}

/* Remove qikify watermark interference */
.menu-drawer-container.menu-opening .tmenu-watermark {
  position: absolute !important;
  bottom: 10px !important;
  right: 10px !important;
  opacity: 0.5 !important;
  font-size: 10px !important;
  z-index: 10 !important;
}

/* Force show mega menu submenus specifically */
.menu-drawer-container.menu-opening .tmenu_item--root.tmenu_item_has_child:hover > .tmenu_submenu_type_mega,
.menu-drawer-container.menu-opening .tmenu_item--root.tmenu_item_has_child:focus-within > .tmenu_submenu_type_mega {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  width: 100% !important;
  margin-top: 5px !important;
  background: rgba(var(--color-foreground), 0.02) !important;
  border-radius: 4px !important;
  overflow: visible !important;
}

/* Force show flyout submenus specifically */
.menu-drawer-container.menu-opening .tmenu_item--root.tmenu_item_has_child:hover > .tmenu_submenu_type_flyout,
.menu-drawer-container.menu-opening .tmenu_item--root.tmenu_item_has_child:focus-within > .tmenu_submenu_type_flyout {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  width: 100% !important;
  margin-top: 5px !important;
}

/* =========================================================
   Desktop-Specific Fix: 2-Depth Submenu Visibility (≥990px)
   ========================================================= */

@media screen and (min-width: 990px) {
  /* Desktop: Fix container positioning and overflow for submenus */
  .menu-drawer-container.menu-opening .menu-drawer__navigation-container,
  .menu-drawer-container.menu-opening .menu-drawer__navigation,
  .menu-drawer-container.menu-opening .tmenu_app_desktop {
    position: relative !important;
    overflow: visible !important;
    height: auto !important;
  }

  /* Desktop: Ensure 1-depth containers can show submenus */
  .menu-drawer-container.menu-opening .tmenu_item--root,
  .menu-drawer-container.menu-opening .tmenu_item_level_0 {
    position: relative !important;
    overflow: visible !important;
  }

  /* Desktop: Force submenu visibility on hover/focus - Override qikify desktop rules */
  .menu-drawer-container.menu-opening .tmenu_app_desktop .tmenu_item--root:hover > .tmenu_submenu,
  .menu-drawer-container.menu-opening .tmenu_app_desktop .tmenu_item--root:focus-within > .tmenu_submenu,
  .menu-drawer-container.menu-opening .tmenu_app_desktop .tmenu_item--root.tmenu_item_active > .tmenu_submenu,
  .menu-drawer-container.menu-opening .tmenu_app_desktop .tmenu_item_has_child:hover > .tmenu_submenu,
  .menu-drawer-container.menu-opening .tmenu_app_desktop .tmenu_item_has_child:focus-within > .tmenu_submenu {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateX(0) translateY(0) !important;
  }

  /* Desktop: Mega menu specific positioning in drawer */
  .menu-drawer-container.menu-opening .tmenu_app_desktop .tmenu_submenu_type_mega {
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 5px 0 !important;
    background: rgba(var(--color-foreground), 0.02) !important;
    border-radius: 4px !important;
    padding: 10px !important;
    box-shadow: none !important;
    z-index: 999 !important;
  }

  /* Desktop: Flyout menu specific positioning in drawer */
  .menu-drawer-container.menu-opening .tmenu_app_desktop .tmenu_submenu_type_flyout {
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 5px 0 !important;
    background: rgba(var(--color-foreground), 0.02) !important;
    border-radius: 4px !important;
    padding: 10px !important;
    box-shadow: none !important;
    z-index: 999 !important;
  }

  /* Desktop: Fix white-space inheritance issue */
  .menu-drawer-container.menu-opening .tmenu_app_desktop .tmenu_item--root > .tmenu_item_link {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .menu-drawer-container.menu-opening .tmenu_app_desktop .tmenu_submenu,
  .menu-drawer-container.menu-opening .tmenu_app_desktop .tmenu_submenu * {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: initial !important;
  }

  /* Desktop: Submenu items styling */
  .menu-drawer-container.menu-opening .tmenu_app_desktop .tmenu_submenu .tmenu_item {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .menu-drawer-container.menu-opening .tmenu_app_desktop .tmenu_submenu .tmenu_item_link {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    padding: 8px 15px !important;
    color: rgba(var(--color-foreground), 0.8) !important;
    font-size: 0.9rem !important;
    line-height: 1.4 !important;
    text-decoration: none !important;
    border-radius: 2px !important;
    transition: background-color 0.2s ease !important;
  }

  .menu-drawer-container.menu-opening .tmenu_app_desktop .tmenu_submenu .tmenu_item_link:hover {
    background-color: rgba(var(--color-foreground), 0.08) !important;
    color: rgb(var(--color-foreground)) !important;
  }

  /* Desktop: Collection images in submenus */
  .menu-drawer-container.menu-opening .tmenu_app_desktop .tmenu_submenu .tmenu_collection {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .menu-drawer-container.menu-opening .tmenu_app_desktop .tmenu_submenu .tmenu_collection img {
    width: 30px !important;
    height: 30px !important;
    object-fit: cover !important;
    border-radius: 4px !important;
    flex-shrink: 0 !important;
  }

  /* Desktop: Override any qikify desktop-specific hiding rules */
  .menu-drawer-container.menu-opening .tmenu_app_desktop .tmenu_submenu--desktop {
    position: relative !important;
    display: none !important; /* Default hidden */
  }

  .menu-drawer-container.menu-opening .tmenu_app_desktop .tmenu_item--root:hover > .tmenu_submenu--desktop,
  .menu-drawer-container.menu-opening .tmenu_app_desktop .tmenu_item--root:focus-within > .tmenu_submenu--desktop {
    display: block !important; /* Show on interaction */
  }

  /* Desktop: Fix z-index stacking context */
  .menu-drawer-container.menu-opening {
    z-index: 1000 !important;
  }

  .menu-drawer-container.menu-opening .menu-drawer {
    z-index: 1001 !important;
  }

  .menu-drawer-container.menu-opening .tmenu_app_desktop .tmenu_submenu {
    z-index: 1002 !important;
  }
}

/* Ensure mobile behavior remains unchanged */
@media screen and (max-width: 989px) {
  .menu-drawer-container.menu-opening .tmenu_submenu {
    position: relative !important;
    left: 0 !important;
    top: auto !important;
    width: 100% !important;
  }
}

/* =========================================================
   LNB Utility Links - Hide Bottom Section
   ========================================================= */

/* Hide utility links section (login, localization, social) in LNB drawer only */
.menu-drawer-container.menu-opening .menu-drawer__utility-links {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

/* =========================================================
   LNB Utility Links - Hide Bottom Section (Append)
   ========================================================= */
/* Hide utility links section (login, localization, social) in LNB drawer. */
#Details-menu-drawer-container .menu-drawer__utility-links {
  display: none !important;
}

/* =========================================================
   LNB 2-Depth Submenu Style Override
   ========================================================= */

/* 1. Make submenu width fill the LNB drawer on all screen sizes */
.menu-drawer-container.menu-opening .tmenu_item--root > .tmenu_submenu {
    position: relative !important;
    left: 0 !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important; /* Ensure it doesn't overflow */
    box-shadow: none !important;
    background: rgba(var(--color-foreground), 0.02) !important; /* Use a subtle background like the Dawn mobile submenu */
    border-left: 3px solid rgba(var(--color-foreground), 0.1) !important; /* Add a visual indicator */
    margin: 5px 0 !important;
    padding: 10px 0 !important;
}

/* 2. Make 2-depth font size same as 1-depth by inheriting */
.menu-drawer-container.menu-opening .tmenu_submenu .tmenu_item_link {
    font-size: inherit !important;
    opacity: 1 !important; /* Make it fully opaque like 1-depth */
}

/* Remove desktop-specific absolute positioning that creates the flyout */
@media screen and (min-width: 990px) {
    .menu-drawer-container.menu-opening .tmenu_app_desktop .tmenu_submenu_type_mega,
    .menu-drawer-container.menu-opening .tmenu_app_desktop .tmenu_submenu_type_flyout {
        position: relative !important;
        box-shadow: none !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }
}

/* =========================
   모바일 Slideshow 요소 순서 재정렬
   ========================= */

@media screen and (max-width: 749px) {
  /* 홈 템플릿 한정 스코프 - slideshow_split 섹션 대상 */
  .banner.banner--split .banner__content {
    display: flex !important;
    flex-direction: column !important;
  }

  /* 1) 이미지 영역 */
  .banner.banner--split .banner__content .banner__media { order: 1 !important; }

  /* 2) 서브텍스트 */
  .banner.banner--split .banner__content .banner__sub { order: 2 !important; }

  /* 3) 타이틀 */
  .banner.banner--split .banner__content .banner__title { order: 3 !important; }

  /* 4) CTA 버튼 */
  .banner.banner--split .banner__content .banner__cta { order: 4 !important; }

  /* 초기화 상태에서도 동일 적용 */
  .banner.banner--split.is-initializing .banner__content {
    display: flex !important;
    flex-direction: column !important;
  }

  /* NOTE: 모바일 패딩 규칙은 667-686 라인에 통합됨 (중복 제거) */

  /* CTA 버튼 상단 여백 제거 */
  html body .shopify-section .banner--split .banner__content .banner__cta,
  .shopify-section .banner--split .banner__content .banner__cta {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
  }
}

/* =========================
   Collection List Custom 반응형 개선 - 한 줄 가로 스크롤
   ========================= */

@media screen and (max-width: 749px) {
  /* 기존 태블릿 2열 그리드 규칙 덮어쓰기 */
  .collection-list-custom .collection-list {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 16px !important;
    padding: 0 20px !important;
    justify-content: center !important;
    align-items: center !important;
    margin-bottom: 40px !important;
  }

  /* 항목 크기 축소 및 한 줄 고정 */
  .collection-list-custom .collection-list:not(.collection-products-featured-namespace) .collection-list__item {
    flex: 0 0 auto !important;
    scroll-snap-align: start !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  /* 이미지 크기 축소 - 100px에서 72px로 */
  .collection-list-custom .collection-list .card__media,
  .collection-list-custom .collection-list a.card__media {
    width: 72px !important;
    height: 72px !important;
    min-width: 72px !important;
    min-height: 72px !important;
  }

  /* 텍스트 라벨 줄바꿈 방지 및 ellipsis */
  .collection-list-custom .collection-list .card__heading,
  .collection-list-custom .collection-list .full-unstyled-link {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 90px !important;
    display: block !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: unset !important;
  }

  /* 카드 전체 폭 제한 */
  .collection-list-custom .collection-list .collection-card-wrapper,
  .collection-list-custom .collection-list .card {
    width: auto !important;
    max-width: 90px !important;
    min-width: 72px !important;
  }
}

@media screen and (max-width: 420px) {
  /* 모바일에서 더 작게 축소 */
  .collection-list-custom .collection-list .card__media,
  .collection-list-custom .collection-list a.card__media {
    width: 60px !important;
    height: 60px !important;
    min-width: 60px !important;
    min-height: 60px !important;
  }

  /* 텍스트도 더 작게 조정 */
  .collection-list-custom .collection-list .card__heading,
  .collection-list-custom .collection-list .full-unstyled-link {
    max-width: 70px !important;
    font-size: 14px !important;
  }

  /* 카드 전체 폭도 조정 */
  .collection-list-custom .collection-list .collection-card-wrapper,
  .collection-list-custom .collection-list .card {
    max-width: 70px !important;
    min-width: 60px !important;
  }

  /* 간격 조정 */
  .collection-list-custom .collection-list {
    gap: 12px !important;
    padding: 0 16px !important;
  }
}

/* =========================
   Collection List Custom 상품 리스트 모바일 반응형 개편 - 2열 4행 8개
   ========================= */

@media screen and (max-width: 749px) {
  /* 상품 리스트 그리드 2열로 변경 */
  .collection-list-custom .collection-products-featured-namespace .grid.product-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    grid-template-rows: auto !important;
    gap: 12px 16px !important;
    max-width: 100% !important;
    padding: 0 16px !important;
    margin: 0 auto !important;
  }

  /* 상품 카드 아이템 크기 축소 */
  .collection-list-custom .collection-products-featured-namespace .grid__item {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* 상품 카드 전체 크기 축소 */
  .collection-list-custom .collection-products-featured-namespace .card {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
  }

  /* 썸네일 크기 축소 - 338px에서 160px로 */
  .collection-list-custom .collection-products-featured-namespace .card__media {
    width: 100% !important;
    height: 160px !important;
    min-height: 160px !important;
    margin: 0 auto !important;
    border-radius: 8px !important;
  }

  .collection-list-custom .collection-products-featured-namespace .card__media .media {
    width: 100% !important;
    height: 160px !important;
    border-radius: 8px !important;
  }

  .collection-list-custom .collection-products-featured-namespace .card__media img {
    width: 100% !important;
    height: 160px !important;
    object-fit: cover !important;
    border-radius: 8px !important;
  }

  /* 카드 콘텐츠 간격 축소 */
  .collection-list-custom .collection-products-featured-namespace .card__content {
    gap: 0.25rem !important;
    padding: 0 6px 8px 6px !important;
  }

  .collection-list-custom .collection-products-featured-namespace .card__information {
    gap: 0.25rem !important;
    padding: 0 !important;
  }

  .collection-list-custom .collection-products-featured-namespace .card-information {
    gap: 2px !important;
    padding: 0 !important;
    min-height: 0 !important;
  }

  /* 텍스트 크기 축소 */
  .collection-list-custom .collection-products-featured-namespace .card__heading {
    font-size: 14px !important;
    line-height: 120% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .collection-list-custom .collection-products-featured-namespace .card__heading a {
    font-size: 14px !important;
    line-height: 120% !important;
  }

  /* 가격 텍스트 크기 축소 */
  .collection-list-custom .collection-products-featured-namespace .price-item.price-item--sale {
    font-size: 15px !important;
    line-height: 120% !important;
  }

  .collection-list-custom .collection-products-featured-namespace .price-item.price-item--regular {
    font-size: 12px !important;
    line-height: 120% !important;
  }

  /* 공급업체/브랜드 텍스트 크기 축소 */
  .collection-list-custom .collection-products-featured-namespace .card__vendor,
  .collection-list-custom .collection-products-featured-namespace .caption-large {
    font-size: 11px !important;
    line-height: 120% !important;
  }

  /* Judge.me 별점 크기 축소 */
  .collection-list-custom .collection-products-featured-namespace .card__rating {
    font-size: 12px !important;
  }

  .collection-list-custom .collection-products-featured-namespace .jdgm-star {
    font-size: 12px !important;
  }

  /* 뱃지 크기 축소 */
  .collection-list-custom .collection-products-featured-namespace .product__badge--discount,
  .collection-list-custom .collection-products-featured-namespace .product__badge--sale {
    font-size: 11px !important;
    padding: 2px 4px !important;
    top: 6px !important;
    left: 6px !important;
  }

  /* XB Wishlist 버튼 위치 조정 */
  .collection-list-custom .collection-products-featured-namespace .card__wishlist-wrapper {
    top: 8px !important;
    right: 8px !important;
  }

  /* 슬라이더 관련 여백 제거 */
  .collection-list-custom .collection-products-featured-namespace .slider__slide:first-child {
    margin-left: 0 !important;
  }

  /* 가격 영역 간격 축소 */
  .collection-list-custom .collection-products-featured-namespace .price {
    margin-top: 4px !important;
  }

  .collection-list-custom .collection-products-featured-namespace .price__sale {
    gap: 6px !important;
  }

  .collection-list-custom .collection-products-featured-namespace .price__regular {
    gap: 6px !important;
  }
}

/* =========================
   Collection Split 섹션 모바일 반응형 - 한줄 가로 스크롤
   ========================= */

@media screen and (max-width: 749px) {
  /* Collection Split 우측 패널 - 한줄 가로 스크롤 유지 */
  .ccs__right {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 16px !important;
  }

  /* 상품 리스트를 한줄 가로 스크롤로 유지 */
  .ccs__products {
    display: flex !important;
    flex-direction: row !important;
    gap: 12px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
  }

  .ccs__products::-webkit-scrollbar {
    display: none !important;
  }

  /* 상품 카드 크기 - 2개가 한 화면에 보이도록 조정 */
  .ccs__product {
    flex: 0 0 calc((100% - 12px) / 2) !important;
    width: calc((100% - 12px) / 2) !important;
    min-width: calc((100% - 12px) / 2) !important;
    max-width: calc((100% - 12px) / 2) !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    scroll-snap-align: start !important;
    scroll-snap-stop: normal !important;
    box-sizing: border-box !important;
  }

  /* 카드 래퍼 크기 조정 */
  .ccs__product .card,
  .ccs__product .card-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
  }

  /* 썸네일 크기 축소 - 240px에서 160px로 */
  .ccs .ccs__product .card__inner.gradient,
  .ccs .ccs__product .card__inner[class*="color-scheme"],
  .ccs .ccs__product .card__inner {
    height: 160px !important;
    min-height: 160px !important;
    max-height: 160px !important;
  }

  /* Dawn 카드 전체 클릭 레이어 비활성화 */
  .ccs .card__heading a::after {
    content: none !important;
    display: none !important;
  }

  /* 카드 미디어 크기 조정 */
  .ccs .ccs__product .card__media,
  .ccs .ccs__product .media {
    width: 100% !important;
    height: 160px !important;
    max-width: 100% !important;
    border-radius: 8px !important;
    overflow: visible !important;
  }

  .ccs .ccs__product .card__media a.media {
    overflow: hidden !important;
    border-radius: 8px !important;
  }

  .ccs .ccs__product .media > img,
  .ccs .ccs__product .card__media img,
  .ccs .ccs__product .media picture > img,
  .ccs .ccs__product .card__media .media > img,
  .ccs .ccs__product .card__media .media picture > img {
    width: 100% !important;
    height: 160px !important;
    object-fit: cover !important;
    border-radius: 8px !important;
  }

  /* 카드 정보 영역 간격 축소 */
  .ccs .ccs__product .card__information {
    padding: 8px 6px !important;
  }

  /* 텍스트 크기 축소 - Collection List Custom과 동일 */
  .ccs .ccs__product .card__information .card__heading {
    font-size: 14px !important;
    line-height: 120% !important;
    margin: 0 !important;
  }

  .ccs .ccs__product .card__information .price-item.price-item--sale {
    font-size: 15px !important;
    line-height: 120% !important;
  }

  .ccs .ccs__product .card__information .price-item.price-item--regular {
    font-size: 12px !important;
    line-height: 120% !important;
  }

  /* 배지 크기 및 위치 조정 */
  .ccs .ccs__badge-stack,
  .ccs .ccs__product .card__badge {
    top: 6px !important;
    left: 6px !important;
  }

  .ccs .ccs__badge {
    font-size: 11px !important;
    padding: 2px 4px !important;
  }


  /* XB Wishlist 버튼 위치 조정 */
  .ccs .ccs__product .card__wishlist-wrapper {
    top: 8px !important;
    right: 8px !important;
    pointer-events: none !important;
  }

  .ccs .ccs__product .card__wishlist-wrapper > * {
    pointer-events: auto !important;
  }

  /* XB Wishlist 커스텀 엘리먼트 클릭 방해 방지 */
  .ccs xb-wishlist-button-collection,
  .ccs .xb-wishlist-button-collection {
    pointer-events: none !important;
  }

  .ccs .xb-wishlist-button-collection__add,
  .ccs .xb-wishlist-button-collection__remove {
    pointer-events: auto !important;
  }

  /* 썸네일 링크 클릭 우선순위 보장 */
  .ccs .card__media a.media {
    pointer-events: auto !important;
    z-index: 2 !important;
  }

  /* Judge.me 별점 크기 축소 */
  .ccs .ccs__product .card__rating {
    font-size: 12px !important;
  }

  .ccs .ccs__product .jdgm-star {
    font-size: 12px !important;
  }

  /* 가격 영역 간격 축소 */
  .ccs .ccs__product .price {
    margin-top: 4px !important;
  }

  .ccs .ccs__product .price__sale {
    gap: 6px !important;
  }

  .ccs .ccs__product .price__regular {
    gap: 6px !important;
  }
}

/* Collection Split 모바일 반응형 - 상단 ccs__left + 하단 ccs__right 2카드 노출 */
@media screen and (max-width: 749px) {
  /* 메인 섹션 컨테이너 */
  .shopify-section:has(.ccs.section) .ccs {
    padding: 0 16px !important;
  }

  /* ccs__left 영역 (탭) */
  .shopify-section:has(.ccs.section) .ccs__left {
    margin-bottom: 24px !important;
  }

  /* ccs__right 영역 - 하단 상품 슬라이더 */
  .shopify-section:has(.ccs.section) .ccs__right {
    width: 100% !important;
  }

  /* 상품 목록 - 한줄 가로 스크롤 유지, 2개 카드만 보이도록 조정 */
  .shopify-section:has(.ccs.section) .ccs__products {
    display: flex !important;
    flex-direction: row !important;
    gap: 12px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .shopify-section:has(.ccs.section) .ccs__products::-webkit-scrollbar {
    display: none !important;
  }

  /* 개별 상품 카드 - 2개가 한 화면에 보이도록 width 조정 */
  .shopify-section:has(.ccs.section) .ccs__product {
    flex: 0 0 calc((100% - 12px) / 2) !important;
    width: calc((100% - 12px) / 2) !important;
    max-width: calc((100% - 12px) / 2) !important;
    min-width: calc((100% - 12px) / 2) !important;
    scroll-snap-align: start !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* 카드 래퍼 크기 조정 */
  .shopify-section:has(.ccs.section) .ccs__product .card-wrapper,
  .shopify-section:has(.ccs.section) .ccs__product .card {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* 상품 이미지 - 정사각형 비율 유지하되 카드 width에 맞춤 */
  .shopify-section:has(.ccs.section) .ccs__product .card__media {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    max-width: 100% !important;
    border-radius: 8px !important;
    overflow: hidden !important;
  }

  .shopify-section:has(.ccs.section) .ccs__product .card__inner,
  .shopify-section:has(.ccs.section) .ccs__product .ratio {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    padding-bottom: 0 !important;
  }

  .shopify-section:has(.ccs.section) .ccs__product .card__media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  /* 상품 정보 영역 */
  .shopify-section:has(.ccs.section) .ccs__product .card__content {
    padding: 8px 6px !important;
    margin-top: 8px !important;
  }

  /* 상품명 - 14px */
  .shopify-section:has(.ccs.section) .ccs__product .card__heading,
  .shopify-section:has(.ccs.section) .ccs__product .card__heading a {
    font-size: 14px !important;
    line-height: 120% !important;
    margin: 0 !important;
  }

  /* 판매가격 - 15px */
  .shopify-section:has(.ccs.section) .ccs__product .card__information .price-item.price-item--sale {
    font-size: 15px !important;
    line-height: 120% !important;
  }

  /* 원가 - 12px */
  .shopify-section:has(.ccs.section) .ccs__product .card__information .price-item.price-item--regular {
    font-size: 12px !important;
    line-height: 120% !important;
  }

  /* 슬라이드 컨트롤 버튼 유지 */
  .shopify-section:has(.ccs.section) .ccs__controls {
    display: flex !important;
    justify-content: center !important;
    gap: 12px !important;
    margin-top: 20px !important;
  }

  /* 배지, 위시리스트, 별점 등 앱 요소 크기 조정 */
  .shopify-section:has(.ccs.section) .ccs__product .card__badge {
    font-size: 11px !important;
    padding: 2px 4px !important;
  }

  .shopify-section:has(.ccs.section) .ccs__product .card__rating {
    font-size: 12px !important;
  }

  .shopify-section:has(.ccs.section) .ccs__product .jdgm-star {
    font-size: 12px !important;
  }
}

/* =========================================================
   CCS Section Mobile Responsive Fix - Card Layout Width Issue
   Target: collection-showcase-splite section mobile layout
   ========================================================= */

/* Mobile responsive layout for CCS section - Fix width overflow and element visibility */
@media (max-width: 749px) {
  /* Fix card wrapper width overflow and enable proper responsive behavior */
  .shopify-section:has(.ccs.section) .ccs .ccs__right .ccs__product {
    width: auto !important;
    max-width: 100% !important;
    min-width: 280px !important;
    flex: 1 1 auto !important;
  }

  .shopify-section:has(.ccs.section) .ccs .ccs__right .ccs__product .card-wrapper,
  .shopify-section:has(.ccs.section) .ccs .ccs__right .ccs__product .card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* Dawn 카드 전체 클릭 레이어 비활성화 */
  .shopify-section:has(.ccs.section) .ccs .card__heading a::after {
    content: none !important;
    display: none !important;
  }

  /* Fix card media responsive sizing */
  .shopify-section:has(.ccs.section) .ccs .ccs__right .ccs__product .card__media {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: none !important;
    min-width: auto !important;
    min-height: auto !important;
    aspect-ratio: 1 / 1 !important;
    overflow: visible !important;
  }

  .shopify-section:has(.ccs.section) .ccs .ccs__right .ccs__product .card__media a.media {
    overflow: hidden !important;
    border-radius: inherit !important;
  }

  .shopify-section:has(.ccs.section) .ccs .ccs__right .ccs__product .card__inner,
  .shopify-section:has(.ccs.section) .ccs .ccs__right .ccs__product .ratio {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: none !important;
    aspect-ratio: 1 / 1 !important;
    padding-bottom: 0 !important;
  }

  /* Ensure overflow visible for wishlist and rating elements */
  .shopify-section:has(.ccs.section) .ccs .card-wrapper {
    overflow: visible !important;
  }

  /* Fix z-index stacking for proper visibility */
  .shopify-section:has(.ccs.section) .ccs .card-wrapper .underline-links-hover {
    z-index: 1 !important;
    position: relative !important;
  }

  .shopify-section:has(.ccs.section) .ccs .card__wishlist-wrapper {
    z-index: 6 !important;
    position: absolute !important;
    pointer-events: none !important;
  }

  .shopify-section:has(.ccs.section) .ccs .card__wishlist-wrapper > * {
    pointer-events: auto !important;
  }

  /* XB Wishlist 커스텀 엘리먼트 클릭 방해 방지 */
  .shopify-section:has(.ccs.section) .ccs xb-wishlist-button-collection,
  .shopify-section:has(.ccs.section) .ccs .xb-wishlist-button-collection {
    pointer-events: none !important;
  }

  .shopify-section:has(.ccs.section) .ccs .xb-wishlist-button-collection__add,
  .shopify-section:has(.ccs.section) .ccs .xb-wishlist-button-collection__remove {
    pointer-events: auto !important;
  }

  /* 썸네일 링크 클릭 우선순위 보장 */
  .shopify-section:has(.ccs.section) .ccs .card__media {
    z-index: 1 !important;
  }

  .shopify-section:has(.ccs.section) .ccs .card__media a.media {
    pointer-events: auto !important;
    z-index: 2 !important;
    position: relative !important;
  }

  .shopify-section:has(.ccs.section) .ccs .card__rating {
    z-index: 5 !important;
    position: relative !important;
  }
}

/* =========================================================
   CCS Section Mobile Slider Controls Fix - Click Event Issue
   Target: collection-showcase-splite section mobile slider controls
   ========================================================= */

/* Fix mobile slider control buttons not responding to clicks */
@media (max-width: 749px) {
  /* Prevent card overlay from blocking touch events on controls */
  .shopify-section:has(.ccs.section) .product-card-wrapper .underline-links-hover {
    pointer-events: none !important;        /* Disable click blocking */
  }

  /* Ensure slider controls are on top and clickable */
  .shopify-section:has(.ccs.section) .ccs__controls {
    position: relative !important;
    z-index: 10 !important;                /* Higher than cards */
    pointer-events: auto !important;
  }

  .shopify-section:has(.ccs.section) .ccs__controls button {
    pointer-events: auto !important;       /* Ensure buttons are clickable */
    position: relative !important;
    z-index: 11 !important;
  }

  /* Prevent any card elements from overlaying controls */
  .shopify-section:has(.ccs.section) .ccs__product {
    z-index: 1 !important;                 /* Lower than controls */
  }

  .shopify-section:has(.ccs.section) .ccs__product .card-wrapper {
    z-index: 2 !important;                 /* Still lower than controls */
  }
}

/* =========================================================
   CCS Section Responsive Width Fix - Content Overflow Prevention
   Target: collection-showcase-splite section responsive layout
   ========================================================= */

/* Fix CCS section responsive width and content clipping issues across all breakpoints */

/* Remove fixed min-width constraint for responsive behavior */
@media (max-width: 749px) {
  .shopify-section:has(.ccs.section) .ccs {
    min-width: auto !important;           /* Remove 769px constraint */
    width: 100% !important;
    max-width: 100% !important;
    padding: 40px 16px !important;        /* Responsive padding */
    box-sizing: border-box !important;
  }

  /* Ensure page-width container is fully responsive */
  .shopify-section:has(.ccs.section) .page-width {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  /* Fix ccs__inner layout for responsive stacking */
  .shopify-section:has(.ccs.section) .ccs__inner {
    width: 100% !important;
    max-width: 100% !important;
    flex-direction: column !important;
    gap: 24px !important;
    overflow: visible !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    margin: 0 !important;
  }
}

/* Fix ccs__left area - tabs and content area */
@media (max-width: 749px) {
  .shopify-section:has(.ccs.section) .ccs__left {
    flex: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;              /* Allow shrinking */
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  /* Fix tab navigation responsive wrapping */
  .shopify-section:has(.ccs.section) .ccs__tabs {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  .shopify-section:has(.ccs.section) .ccs__tab {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    padding: 8px 12px !important;
    font-size: 14px !important;
  }

  /* Fix title and subtitle responsive text - MATCH EVENTS SECTION */
  .shopify-section:has(.ccs.section) .ccs__title {
    width: 100% !important;
    max-width: 100% !important;
    font-size: 24px !important; /* Match Events mobile: 24px */
    line-height: 1.2 !important;
    font-weight: 700 !important; /* Ensure bold matches Events */
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }

  .shopify-section:has(.ccs.section) .ccs__subtitle {
    width: 100% !important;
    max-width: 100% !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }
}

/* Fix ccs__right area - product slider container */
@media (max-width: 749px) {
  .shopify-section:has(.ccs.section) .ccs__right {
    flex: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;              /* Allow shrinking */
    box-sizing: border-box !important;
    overflow: hidden !important;          /* Prevent horizontal scroll on container */
  }

  /* Fix slider container responsive behavior */
  .shopify-section:has(.ccs.section) .ccs__slider {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .shopify-section:has(.ccs.section) .ccs__slider.is-active {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Ensure product list doesn't overflow */
  .shopify-section:has(.ccs.section) .ccs__products {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

/* Tablet and medium screen responsive fixes */
@media (min-width: 769px) and (max-width: 1199px) {
  .shopify-section:has(.ccs.section) .ccs {
    min-width: auto !important;           /* Remove fixed constraint */
    width: 100% !important;
    max-width: 100% !important;
    padding: 60px 32px !important;       /* Balanced tablet padding */
  }

  .shopify-section:has(.ccs.section) .ccs__inner {
    width: 100% !important;
    max-width: 100% !important;
    flex-direction: column !important;
    gap: 32px !important;
    overflow: visible !important;
  }

  .shopify-section:has(.ccs.section) .ccs__left,
  .shopify-section:has(.ccs.section) .ccs__right {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: none !important;
  }
}

/* Update all star rating text to 14px */
.star-rating--small,
.star-rating--small .star-rating__average,
.star-rating--small .star-rating__count {
  font-size: 14px !important;
}

.star-rating--medium,
.star-rating--medium .star-rating__average, 
.star-rating--medium .star-rating__count {
  font-size: 14px !important;
}

.star-rating--large,
.star-rating--large .star-rating__average,
.star-rating--large .star-rating__count {
  font-size: 14px !important;
}

/* Override any existing font sizes */
.star-rating .star-rating__average,
.star-rating .star-rating__count {
  font-size: 14px !important;
}


/* Update SVG icon sizes to better match 14px text */
.star-rating--small .star-rating__icon svg,
.star-rating--medium .star-rating__icon svg,
.star-rating--large .star-rating__icon svg {
  width: 14px !important;
  height: 14px !important;
}


/* Override - Only small star ratings use 14px, others use larger sizes */
.star-rating--small,
.star-rating--small .star-rating__average,
.star-rating--small .star-rating__count {
  font-size: 14px !important;
}

.star-rating--medium,
.star-rating--medium .star-rating__average, 
.star-rating--medium .star-rating__count {
  font-size: 16px !important;
}

.star-rating--large,
.star-rating--large .star-rating__average,
.star-rating--large .star-rating__count {
  font-size: 18px !important;
}

/* Update SVG icon sizes to match text sizes */
.star-rating--small .star-rating__icon svg {
  width: 14px !important;
  height: 14px !important;
}

.star-rating--medium .star-rating__icon svg {
  width: 16px !important;
  height: 16px !important;
}

.star-rating--large .star-rating__icon svg {
  width: 18px !important;
  height: 18px !important;
}

/* =========================================================
   Blog Slider 섹션 모바일 반응형 보완 (PC/타섹션 영향 없음)
   ========================================================= */

@media (max-width: 749px) {
  /* 섹션 좌우 패딩은 상단 244-254 라인에서 이미 적용됨 (padding: 32px 16px) */
  /* 중복 규칙 제거 - 상단 규칙 사용 */

  /* 1) 슬라이드 컨테이너: 한 화면 한 장 노출 설정 */
  .shopify-section:has(.blog-slider.section) .blog-slider .slider__content {
    display: flex !important;
    gap: 0 !important;                    /* 기존 20px gap 덮어쓰기 */
    padding-left: 0 !important;          /* 좌측 여백 제거 */
    scroll-padding-left: 0 !important;   /* 스크롤 좌측 패딩 제거 */
    -webkit-overflow-scrolling: touch;

    /* CSS 변수 초기화 - 기존 계산식 무력화 */
    --slide-gap: 0px !important;
    --peek-next: 0px !important;
  }

  /* 2) 개별 슬라이드: 한 화면 전체 너비 - 기존 clamp() 계산식 덮어쓰기 */
  .shopify-section:has(.blog-slider.section) .blog-slider .slider__slide {
    width: 100% !important;               /* 기존 clamp(800px, calc(...), 1050px) 덮어쓰기 */
    min-width: 100% !important;           /* 최소 너비 보장 */
    max-width: 100% !important;           /* 최대 너비 제한 */
    flex: 0 0 100% !important;            /* flex 기준 100% */
    margin-right: 0 !important;           /* 우측 마진 제거 */
    margin-left: 0 !important;            /* 좌측 마진 제거 */
    scroll-snap-align: start !important;  /* 스냅 정렬 시작점 */
    scroll-margin-left: 0 !important;     /* 스크롤 마진 제거 */
  }

  /* 3) blog-card: 비율 유지하며 한 화면 최적화 - 800px 제약 완전 해제 */
  .shopify-section:has(.blog-slider.section) .blog-slider .blog-card {
    width: 100% !important;
    min-width: 100% !important;           /* 800px 강제 해제, 100%로 변경 */
    max-width: 100% !important;
    aspect-ratio: 16 / 9 !important;      /* 16:9 비율 고정 */
    border-radius: 12px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;    /* 패딩/보더 포함 크기 계산 */
  }

  /* 4) 배너 미디어: 비율 유지, 잘림 방지 */
  .shopify-section:has(.blog-slider.section) .blog-slider .blog-card__media {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;          /* 이미지 컨테이너 오버플로우 숨김 */
  }

  .shopify-section:has(.blog-slider.section) .blog-slider .blog-card__media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;       /* 전체 이미지 비율 유지, 잘림 방지 */
    object-position: center !important;
    display: block !important;
  }

  /* 5) 오버레이: 모바일 최적화 - 배경 제거 */
  .shopify-section:has(.blog-slider.section) .blog-slider .blog-card__overlay {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    padding: 20px !important;
    background: transparent !important;  /* 배경 제거 */
    color: #111 !important;  /* 텍스트 색상 어두운 색으로 변경 */
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
  }

  /* 6) 컨트롤 버튼: 클릭 가능하도록 z-index 보장 */
  .shopify-section:has(.blog-slider.section) .blog-slider .blog-slider__controls {
    position: relative !important;
    z-index: 10 !important;
    pointer-events: auto !important;
  }

  .shopify-section:has(.blog-slider.section) .blog-slider .blog-slider__controls button {
    pointer-events: auto !important;
    z-index: 10 !important;
  }
}

/* =========================================================
   Brand info section responsive (order + gallery columns/spacing)
   ========================================================= */

/* ⚠️ 아래 하드코딩 블록은 DEPRECATED - Dawn 표준 브레이크포인트(custom.css:2138-2210)로 대체됨 */
/* 하드코딩된 섹션 ID (.shopify-section:has(.bi.section))는 */
/* 특정 인스턴스에만 적용되므로, 범용 .bi 선택자 규칙으로 교체 완료 */
/*
@media (max-width: 749px) {
  [DEPRECATED - 2138-2210 라인 규칙으로 대체]
*/

/* Brand info 모바일 순서 제어 - 범용 섹션 스코프 */
@media (max-width: 749px) {
  /* .bi 컨테이너 - 전역 flex 속성 오버라이드 */
  .bi.section {
    padding: 40px 16px !important;
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    display: block !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  /* bi__inner를 세로 flex로 변경 */
  .bi.section .bi__inner {
  html body .shopify-section .bi.section,
  .shopify-section:has(.bi.section) .bi,
  .shopify-section .bi.section {
    padding: 40px 16px !important;           /* 88px 24px → 40px 16px */
    min-width: 0 !important;                 /* 769px min-width 제거 */
    max-width: 100% !important;
    width: 100% !important;
    /* 전역 flex 속성 오버라이드 */
    display: flex !important;                /* 명시적 재선언 */
    flex-direction: column !important;       /* 전역 규칙 유지 */
    justify-content: flex-start !important;  /* center → flex-start */
    align-items: stretch !important;         /* center → stretch (핵심!) */
    gap: 0 !important;                       /* 94px → 0 */
    overflow-x: hidden !important;
    box-sizing: border-box !important;
    margin: 0 !important;
  }

  /* 🔧 2. bi__inner를 세로 flex로 변경 - grid 속성 명시적 무효화 */
  /* 전역 라인 2058-2066: grid-template-columns: 1fr auto, grid-template-areas: "panels tabs" */
  html body .shopify-section:has(.bi.section) .bi .bi__inner,
  .shopify-section:has(.bi.section) .bi .bi__inner {
    display: flex !important;
    flex-direction: column !important;
    /* Grid 속성 완전 무효화 (방안 1: Grid Display 제거) */
    grid: none !important;                   /* Grid 단축 속성 제거 */
    grid-template: none !important;          /* Grid 템플릿 제거 */
    grid-template-columns: none !important;  /* 전역 1fr auto 제거 */
    grid-template-rows: none !important;
    grid-template-areas: none !important;    /* 전역 "panels tabs" 제거 */
    grid-auto-columns: auto !important;
    grid-auto-rows: auto !important;
    grid-auto-flow: row !important;
    align-items: stretch !important;         /* 전역 align-items: start 오버라이드 */
    gap: 0 !important;                       /* 전역 64px gap 제거 */
    /* 너비 설정 (방안 2: Width 명시) */
    max-width: 100% !important;              /* var(--content-max) 오버라이드 */
    width: 100% !important;
    min-width: 100% !important;              /* 정확한 너비 강제 */
    overflow-x: hidden !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* 🔧 3. bi__tabs - 1순위 (990px의 justify-content: flex-end 오버라이드) */
  /* 전역 라인 2129: grid-area: tabs */
  html body .shopify-section:has(.bi.section) .bi .bi__inner .bi__tabs,
  .shopify-section:has(.bi.section) .bi .bi__inner .bi__tabs {
    order: 1 !important;
    display: flex !important;          /* 명시적 flex 재선언 */
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex-direction: row !important;    /* 990px의 row 유지 */
    flex-wrap: wrap !important;
    justify-content: flex-start !important;  /* 990px의 flex-end 오버라이드 */
    align-items: flex-start !important;
    gap: 8px !important;               /* 전역 16px → 8px */
    margin: 0 0 24px 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
    /* Grid 속성 무효화 */
    grid-area: unset !important;       /* tabs → unset */
    grid-column: auto !important;
    grid-row: auto !important;
  }

  /* 🔧 3-1. bi__tab 개별 버튼 */
  html body .shopify-section:has(.bi.section) .bi .bi__inner .bi__tabs .bi__tab,
  .shopify-section:has(.bi.section) .bi .bi__inner .bi__tabs .bi__tab {
    flex: 0 0 auto !important;         /* 버튼 크기 자동 조정 */
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 8px 16px !important;      /* 좌우 패딩 추가 */
    text-align: center !important;     /* 우측 정렬 → 중앙 정렬 */
    white-space: nowrap !important;    /* 텍스트 줄바꿈 방지 */
    box-sizing: border-box !important;
  }

  /* 🔧 4. bi__panels - 2순위 (내부에 head, gallery 포함) - 화면 전체 너비 강제 */
  /* 극대화된 명시도: grid-area: panels (라인 2070) 완전 무효화 */
  /* 방안 3: 명시도 극대화 - 4가지 선택자로 중복 선언 */
  html body .shopify-section:has(.bi.section) .bi .bi__inner .bi__panels,
  .shopify-section:has(.bi.section) .bi .bi__inner .bi__panels,
  .bi__inner > .bi__panels,
  .shopify-section:has(.bi.section) .bi__panels {
    order: 2 !important;
    display: block !important;         /* flex 제거 */
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;        /* 방안 2: 정확한 너비 강제 */
    /* Grid 속성 완전 무효화 (방안 1) */
    grid: none !important;             /* Grid 단축 속성 제거 */
    grid-area: unset !important;       /* panels → unset (none보다 강력) */
    grid-column: auto !important;
    grid-column-start: auto !important;
    grid-column-end: auto !important;
    grid-row: auto !important;
    grid-row-start: auto !important;
    grid-row-end: auto !important;
    grid-template: none !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    grid-template-areas: none !important;
    /* 기본 속성 */
    padding: 0 !important;
    margin: 0 !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
    /* 위치 강제 */
    position: relative !important;
    left: auto !important;
    right: auto !important;
  }

  /* 🔧 5. bi__panel 표시 제어 - 활성 패널만 표시 */
  html body .shopify-section:has(.bi.section) .bi .bi__inner .bi__panels .bi__panel:not(.is-active),
  .shopify-section:has(.bi.section) .bi .bi__inner .bi__panels .bi__panel:not(.is-active) {
    display: none !important;
  }

  html body .shopify-section:has(.bi.section) .bi .bi__inner .bi__panels .bi__panel.is-active,
  .shopify-section:has(.bi.section) .bi .bi__inner .bi__panels .bi__panel.is-active {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;  /* 전역 380px 1fr 제거 */
    grid-template-rows: none !important;     /* grid rows 제거 */
    align-items: stretch !important;         /* 전역 align-items: start 오버라이드 */
    gap: 24px !important;                    /* 990px의 32px, 전역의 64px 오버라이드 */
    max-width: 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  /* 🔧 6. bi__head - 고정 너비 제거 및 전역 max-width 오버라이드 */
  html body .shopify-section:has(.bi.section) .bi__panel.is-active .bi__head,
  .shopify-section:has(.bi.section) .bi__panel.is-active .bi__head {
    order: 1 !important;
    display: flex !important;                /* 명시적 재선언 */
    flex-direction: column !important;       /* 명시적 재선언 */
    align-items: flex-start !important;      /* 전역 규칙 유지 */
    align-content: flex-start !important;    /* 전역 규칙 유지 */
    gap: 24px !important;                    /* 990px의 24px, 전역의 32px 오버라이드 */
    width: 100% !important;
    max-width: 100% !important;              /* var(--content-max) 오버라이드 */
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  /* 🔧 7. bi__title - 고정 275px 너비 제거 */
  html body .shopify-section:has(.bi.section) .bi__panel.is-active .bi__title,
  .shopify-section:has(.bi.section) .bi__panel.is-active .bi__title {
    width: 100% !important;
    max-width: 275px !important;       /* 최대 275px, 작은 화면에서는 줄어듦 */
    height: auto !important;           /* 56px 고정 높이 제거 */
    min-height: 56px !important;
    margin: 0 !important;
  }

  /* 🔧 8. bi__subtitle - 텍스트 오버플로우 방지 */
  html body .shopify-section:has(.bi.section) .bi__panel.is-active .bi__subtitle,
  .shopify-section:has(.bi.section) .bi__panel.is-active .bi__subtitle {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    box-sizing: border-box !important;
  }

  /* 🔧 9. bi__gallery - flex 속성 완전 무효화 */
  html body .shopify-section:has(.bi.section) .bi__panel.is-active .bi__gallery,
  .shopify-section:has(.bi.section) .bi__panel.is-active .bi__gallery {
    order: 2 !important;
    /* 전역 flex 속성 무효화 */
    display: block !important;               /* flex → block (grid로 재정의됨) */
    flex: none !important;                   /* flex: 1 0 0 제거 */
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    flex-basis: auto !important;
    justify-content: flex-start !important;  /* space-between 오버라이드 */
    align-items: flex-start !important;      /* 전역 규칙 오버라이드 */
    flex-wrap: nowrap !important;            /* 전역 규칙 유지 */
    gap: 8px !important;                     /* 990px의 12px, 전역의 20px 오버라이드 */
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  /* 🔧 10. 모바일 갤러리: 2열 그리드 + 여백 축소 (중복 선언으로 오버라이드) */
  html body .shopify-section:has(.bi.section) .bi__panel.is-active .bi__gallery,
  .shopify-section:has(.bi.section) .bi__panel.is-active .bi__gallery {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important; /* 모바일: 2열 */
    gap: 8px !important;                                          /* 모바일 여백 축소 */
    flex-wrap: nowrap !important;                                 /* flex 속성 무효화 */
    justify-content: flex-start !important;
    align-items: flex-start !important;
  }

  /* 🔧 11. 모바일 갤러리 이미지 컨테이너 - 고정 너비 제거 및 그리드 셀 맞춤 */
  html body .shopify-section:has(.bi.section) .bi__panel.is-active .bi__gallery .bi__img,
  .shopify-section:has(.bi.section) .bi__panel.is-active .bi__gallery .bi__img {
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    aspect-ratio: 3 / 4 !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-shrink: 1 !important;
    transform: none !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  /* 모바일에서는 첫 2개 이미지만 표시 */
  html body .shopify-section:has(.bi.section) .bi__panel.is-active .bi__gallery .bi__img:nth-child(1),
  html body .shopify-section:has(.bi.section) .bi__panel.is-active .bi__gallery .bi__img:nth-child(2),
  .shopify-section:has(.bi.section) .bi__panel.is-active .bi__gallery .bi__img:nth-child(1),
  .shopify-section:has(.bi.section) .bi__panel.is-active .bi__gallery .bi__img:nth-child(2) {
    display: block !important;
  }

  html body .shopify-section:has(.bi.section) .bi__panel.is-active .bi__gallery .bi__img:nth-child(3),
  html body .shopify-section:has(.bi.section) .bi__panel.is-active .bi__gallery .bi__img:nth-child(4),
  .shopify-section:has(.bi.section) .bi__panel.is-active .bi__gallery .bi__img:nth-child(3),
  .shopify-section:has(.bi.section) .bi__panel.is-active .bi__gallery .bi__img:nth-child(4) {
    display: none !important;
  }

  /* 🔧 12. 모바일 갤러리 이미지 최적화 */
  html body .shopify-section:has(.bi.section) .bi__panel.is-active .bi__gallery img,
  .shopify-section:has(.bi.section) .bi__panel.is-active .bi__gallery img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover !important;
    object-position: center !important;
  }
}


/* =========================================================
   Brand Info 모바일 반응형 문제 해결 완료
   ========================================================= */

/* =========================================================
   Mobile GNB Icons - Precise Target Move Strategy
   모바일: 특정 아이콘만 드로어로 이동, PC: 헤더 원위치 유지
   ========================================================= */

/* 드로어 아이콘 슬롯 - UL/LI 구조 (표시 제어만, DOM 이동은 JS 담당) */
.drawer-icons-ul[hidden] {
  display: none;
}

.drawer-icons-ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* PC (≥750px): 드로어 슬롯 강제 숨김, 헤더 아이콘 표시 */
@media (min-width: 750px) {
  .drawer-icons-ul {
    display: none !important;
  }

  /* 헤더 아이콘 영역 명시적 표시 보장 */
  header .header__icons {
    display: flex !important;
  }

  /* 개별 아이콘 표시 보장 */
  header .header__icons .xb-wishlist-header-container,
  header .header__icons .header__icon--search,
  header .header__icons .header__icon--account,
  header .header__icons .header__icon--cart {
    display: block !important;
  }
}

/* 모바일 (≤749px): 드로어 슬롯 표시 */
@media (max-width: 749px) {
  .drawer-icons-ul:not([hidden]) {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    gap: 1rem;
    padding: 2rem 1.5rem;
    margin: 0;
    list-style: none;
    border-top: 0.1rem solid rgba(var(--color-foreground), 0.08);
  }

  /* LI 래퍼는 투명하게 (contents로 제거 효과) */
  .drawer-icons-ul .drawer-icons-slot {
    display: contents;
  }

  /* 드로어 내부 아이콘 스타일 */
  .drawer-icons-ul .xb-wishlist-header-container,
  .drawer-icons-ul .header__icon {
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-width: 4.4rem;
    height: 4.4rem;
  }

  /* 이동 완료 시 헤더 아이콘 숨김 (안전장치: body 플래그 기반) */
  body.has-drawer-icons header .header__icons .xb-wishlist-header-container {
    display: none !important;
  }
}

/* Product page wishlist button */
.product__action-button.manual-wishlist-btn svg {
  fill: none;
  stroke: #333;
  stroke-width: 2px;
  transition: all 0.3s ease;
}

.product__action-button.manual-wishlist-btn.in-wishlist svg {
  fill: #fff;
  stroke: #fff;
  stroke-width: 0;
}


/* Product page wishlist button - clean styling */
button.product__action-button.manual-wishlist-btn {
  position: relative;
  background: #fff !important;
  border: 1px solid #E7E7E7 !important;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px frgba(0, 0, 0, 0.08);
}

button.product__action-button.manual-wishlist-btn:hover {
  background: #ffffff !important;
  border-color: #eeeeee !important;
  transform: scale(1.05);
}

button.product__action-button.manual-wishlist-btn svg {
  fill: none;
  stroke: #333;
  stroke-width: 1px;
  width: 24px;
  height: 24px;
  transition: all 0.3s ease;
}

/* =========================================================
   Mobile Responsive Padding - Collection & Content Pages
   Prevent content from sticking to screen edges on mobile
   ========================================================= */

@media screen and (max-width: 749px) {
  /* 1. Categories Collection Pages - Makeup, Hair, Skincare, Bath & Body */
  /* Add padding to collection page wrapper */
  .collection[data-collection-handle="makeup"] .page-width,
  .collection[data-collection-handle="hair"] .page-width,
  .collection[data-collection-handle="skincare"] .page-width,
  .collection[data-collection-handle="bath-body"] .page-width,
  body[class*="collection-makeup"] .page-width,
  body[class*="collection-hair"] .page-width,
  body[class*="collection-skincare"] .page-width,
  body[class*="collection-bath-body"] .page-width {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }

  /* Collection title area padding */
  .collection .collection-hero,
  .collection .collection-hero__title,
  .collection .page-width > .title-wrapper {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }

  /* Product grid padding */
  .collection .product-grid,
  .collection .product-grid-container,
  .collection .collection__main-products {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }

  /* 2. Brands Collection Pages - SONATURAL, Arocell, SKINRx LAB, DEARSPA */
  /* Add padding to vendor/brand collection pages */
  .collection-template .page-width,
  .collection[class*="vendor"] .page-width,
  body[class*="collection-vendors"] .page-width,
  body.collection-template-vendors .page-width {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }

  /* Brand collection title area */
  .collection-template .collection-hero,
  .collection-template .page-width > .title-wrapper {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }

  /* Brand product grid */
  .collection-template .product-grid,
  .collection-template .product-grid-container {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }

  /* 3. Search Page */
  /* Search page wrapper padding */
  .search-template .page-width,
  .template-search .page-width,
  body[class*="search"] .page-width {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }

  /* Search box container */
  .search-template .search,
  .template-search .search,
  .search__input-wrapper,
  .search-modal__form,
  .predictive-search {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
    max-width: 100% !important;
  }

  /* Search input field - constrain width */
  .search__input,
  .predictive-search__input {
    max-width: calc(100% - 4rem) !important;
  }

  /* Search results */
  .search__results,
  .predictive-search__results,
  .search-template .collection {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }

  /* 4. Wishlist Page */
  /* Wishlist page wrapper */
  .page-swym-wishlist .page-width,
  .template-page .page-width[class*="wishlist"],
  body[class*="wishlist"] .page-width,
  .swym-wishlist-page .page-width {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }

  /* Wishlist title */
  .page-swym-wishlist .page-title,
  .page-swym-wishlist h1,
  .swym-wishlist-page .page-title,
  .swym-wishlist-page h1 {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }

  /* Wishlist content area */
  .swym-wishlist-container,
  .swym-wishlist-grid,
  .swym-wishlist-items,
  [class*="swym"] .product-grid {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }

  /* General fallback for all collection and page templates */
  .template-collection .page-width,
  .template-page .page-width {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }

  /* Product grid cards - ensure they don't extend to edges */
  .product-grid .product-card,
  .collection .grid__item {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* Tablet responsive padding (750px - 989px) */
@media screen and (min-width: 750px) and (max-width: 989px) {
  /* Apply slightly reduced padding on tablets */
  .collection .page-width,
  .search-template .page-width,
  .template-page .page-width {
    padding-left: 3rem !important;
    padding-right: 3rem !important;
  }
}

/* =========================================================
   Additional Mobile Padding Fixes
   Product Details, Wishlist, Cart Pages
   ========================================================= */

@media screen and (max-width: 749px) {
  /* 1. Product Details Page - Quantity Input */
  /* Constrain quantity input container width and add right padding */
  .price-per-item__container,
  .product__info-wrapper .price-per-item__container {
    max-width: 100%;
    padding-right: 2rem ;
    margin-right: 2rem ; 
    box-sizing: border-box;
  }

  /* Constrain quantity input to appropriate width */
  .product__info-wrapper quantity-input,
  .product-form quantity-input,
  quantity-input.quantity {
    max-width: 15rem !important;
    width: 15rem !important;
    display: inline-flex !important;
    box-sizing: border-box !important;
  }

  /* Ensure quantity input fits within container */
  .product__info-container .quantity,
  .product-form__input .quantity {
    max-width: 15rem !important;
    width: 15rem !important;
  }

  /* Add padding to product info wrapper */
  .product__info-wrapper,
  .product__info-container {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }

  /* Product title and description padding */
  .product__title,
  .product__description,
  .product__text,
  .product-form {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }

  /* 2. Wishlist Page - Title Padding */
  /* Add padding to wishlist page title */
  .page-swym-wishlist .page-header,
  .page-swym-wishlist .main-page-title,
  .swym-wishlist-page .page-header,
  .swym-wishlist-page h1.page-title,
  [class*="wishlist"] .page-title {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Wishlist section headers */
  .swym-wishlist h2,
  .swym-wishlist h3,
  [class*="swym-wishlist"] .section-header {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }

  /* 3. Cart Page - Title and Content Padding */
  /* Cart page title */
  .cart-template .page-title,
  .cart__title,
  .template-cart .page-title,
  .main-cart-items .title-wrapper,
  .cart-items .title-wrapper-with-link {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Cart content area */
  .cart__items,
  .cart-items,
  .main-cart-items,
  .cart-item,
  .cart__footer {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }

  /* Cart item details */
  .cart-item__details,
  .cart-item__image,
  .cart-item__totals {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Cart drawer (if used) */
  cart-drawer .drawer__inner,
  cart-drawer .cart-items,
  .cart-drawer__collection {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }

  /* Cart summary/totals */
  .cart__footer-wrapper,
  .cart-summary,
  .totals {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }

  /* General page wrapper for cart and wishlist */
  .template-cart .page-width,
  body[class*="cart"] main > .page-width {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }
}