/* BASIC css start */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap');

/* ============================================================
   스위티스푼 | 모바일 상품분류 (shopbrand.css)
   ============================================================ */

/* ============================================================
   SECTION 1   히어로 (카테고리 공용)   .cate-hero
   · category_title_html_mobile 필드의 마크업이 렌더되는 영역(모든 분류 공용 클래스)
   · .ss-hero 래퍼 → 공통 header.js가 투명헤더 활성화(이미지 위 흰 로고/아이콘 → 스크롤 시 흰 배경)
   ============================================================ */
.cate-hero { width: 100%; background: #fff; overflow: hidden; }
.cate-hero * { box-sizing: border-box; }

/* 히어로 이미지 (풀블리드) */
.cate-hero-visual {
  position: relative;
  width: 100%;
  height: 68vh;
  min-height: 440px;
  max-height: 600px;
  overflow: hidden;
  background: #000;
}
.cate-hero-visual img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 오버레이 (하단 정렬 + 하단 어두운 그라데이션 → 흰 글씨 가독) */
.cate-hero-overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  text-align: center;
  padding: 28px 22px calc(50px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.1) 45%, rgba(0,0,0,0) 70%);
}
.cate-hero-overlay h1 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 38px; font-weight: 600; color: #fff;
  letter-spacing: 0.3rem; line-height: 1.05; margin: 0;
}
/* 이미지 위 영문 태그라인 (예: MARK EVERY MOMENT)
   · 이전엔 이 규칙이 @media(max-width:480px) 안에만 있어 480px 초과에서 스타일이 사라졌음 → 기본 규칙으로 이관 */
.cate-hero-tagline {
  font-size: 11px;
  color: #fff;
  opacity: .95;
  font-family: 'Josefin Sans', 'Noto Sans KR', sans-serif;
  text-transform: uppercase;
  letter-spacing: -0.02rem;
  font-weight: 400;
  padding-top: 3px;
}
.cate-hero-eyebrow { font-size: 18px; letter-spacing: -0.02rem; color: #222; margin-bottom: 10px; font-family: "Noto Serif KR", serif !important; font-weight: 600; }


/* 본문 설명 + 더보기 토글 */
.cate-hero-content { padding: 30px 22px 32px; }
.cate-hero-desc {
  font-size: 15px; line-height: 1.5; color: #3d3d3d; word-break: keep-all; font-family: 'Lato', 'Noto Sans KR', sans-serif;
  overflow: hidden;
  transition: max-height .4s ease;           /* 펼침/접힘 부드럽게 (높이는 JS가 지정) */
}
/* 접힘: 2줄에서 말줄임(…)   레퍼런스처럼 */
.cate-hero-desc.is-clamped {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.cate-hero-toggle {
    margin-top: 10px;
    border: none;
    background: none;
    padding: 0;
    font-size: 12px;
    font-weight: 500;
    color: #222;
    cursor: pointer;
    letter-spacing: -0.02em;
    border-bottom: 1px solid #111;
    transition: opacity .2s ease;
    font-family: 'Lato', 'Noto Sans KR', sans-serif;
}
.cate-hero-toggle:hover { opacity: .7; }

@media (max-width: 480px) {
  .cate-hero-overlay h1 { font-size: 28px; }
}


/* ============================================================
   SECTION 2   서브카테고리 (하위분류 · 형제분류 탭)
   html: <nav class="shopbrand-subcate">
   · 구분선 | 제거 → 선택 분류는 "밑줄"로 구분(레퍼런스 탭바)
   · 선택 분류 옆에만 상품수 노출(total_product_count 우선, 미리보기 등 빈값이면 JS가 로드수로 폴백)
   · 4개 초과해도 안 깨지도록 가로 스크롤(flex-wrap:nowrap + overflow-x)
   · [스티키] 스크롤 시 카테고리바가 상단(헤더 아래)에 고정
   ============================================================ */
.shopbrand-subcate {
  background: #fff;
  border-top: 12px solid #f7f7f8;
  border-bottom: 1px solid #f0f0f0;
}
/* [스티키] 이 사이트는 전역 overflow(html,body)로 네이티브 position:sticky가 안 먹힘
   → 상세페이지(.detail-tabmenu-fixed)와 동일하게 JS가 스크롤 시 .is-fixed를 토글해 fixed 고정 */
.shopbrand-subcate.is-fixed {
  position: fixed;
  top: 0; left: 0; right: 0;      /* 폴백값. JS가 헤더 상태에 맞춰 nav.style.top을 !important로 덮어씀(헤더 보이면 60, 숨으면 0) */
  z-index: 90;                    /* 상품/찜(z-index 2) 위, 헤더(100000) 아래 */
  border-top: 0;                  /* 고정(스티키) 시에만 상단 12px 회색밴드 숨김 → 헤더/상단에 딱 밀착 (평소 흐름에선 12px 유지) */
}
/* 고정 순간 아래 콘텐츠가 위로 튀지 않게 원래 높이만큼 자리 유지 (JS가 height/노출 제어) */
.shopbrand-subcate-holder { display: none; }
.shopbrand-subcate-holder.is-active { display: block; }
/* 탭 스트립: 4개 이하는 균등분배, 5개 이상은 가로 스크롤(줄바꿈으로 안 깨짐) */
.shopbrand-subcate-list {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  justify-content: space-between;      /* 이전과 동일: 탭이 넘치지 않으면 좌우 간격 자동 분배 */
  margin: 0;
  padding: 0 6px;
  list-style: none;
  scrollbar-width: none;               /* Firefox: 스크롤바 숨김 */
}
.shopbrand-subcate-list::-webkit-scrollbar { display: none; }  /* iOS·크롬: 스크롤바 숨김 */
.shopbrand-subcate-list li {
  position: relative;
  flex: 0 0 auto;
  display: flex;
}
.shopbrand-subcate-list a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 15px 14px;
  border: none;
  border-bottom: 2px solid transparent;   /* 밑줄 자리 예약 → 선택 시 높이 안 밀림 */
  border-radius: 0;
  font-family: 'Arial', sans-serif;
  font-size: 12px;
  color: #8a8a8a;
  text-decoration: none;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
/* 선택된 분류: 검정 밑줄 + 진한 글자 (구분선 | 대신 밑줄로 구분) */
.shopbrand-subcate-list a.is-active {
  color: #2c2c2c;
  font-weight: 500;
  border-bottom-color: #2c2c2c;
}
/* 선택된 분류 옆 상품수 (비선택 분류는 미노출) */
.shopbrand-subcate-count {
  font-size: 11px;
  font-weight: 400;
  color: #c2935f;                      /* 브랜드 크림·골드 톤 */
  letter-spacing: 0;
}


/* ============================================================
   SECTION 3   상품 목록 (2열/1열 토글 · 정렬 · 그리드 · 더보기)
   html: <div class="list_array"> / <div class="list_shopping1x|2x">
   메이크샵 기본코드 뼈대(list_array/list_shopping1x·2x/listName 등)를 그대로 쓰고
   디자인만 새로 입힘   클래스명은 네이티브 그대로라 자체 개명하지 않음.
   ============================================================ */
.list_array {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 15px;
  font-family: 'Lato', 'Noto Sans KR', sans-serif;
}
.list_arrayLeft { position: relative; font-size: 11px; color: #666; }
/* iOS 네이티브 select의 ↕(위아래) 화살표 제거 → PC처럼 아래 화살표 하나로 통일 */
.list_arrayLeft select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  border: none; outline: none;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23666' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right center;
  background-size: 11px 11px;
  padding-right: 15px;
  font-size: 11px; color: #666;
}
.list_arrayLeft select::-ms-expand { display: none; }
.list_arrayRight { display: flex; gap: 2px; }
.list_arrayRight a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  color: #3d3d3d;
  text-decoration: none;
}
.list_arrayRight a.is-active { color: #000; }
.list_arrayRight .material-symbols-outlined {
  font-size: 20px;
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 20;
}
.list_arrayRight a.is-active .material-symbols-outlined {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 20;
}

/* 상품 카드 공통
   네이티브 now_product_list_viewtype 기본값이 "list"라 list_shopping1x가 항상 먼저
   렌더링됨 → 진입 시 2열이 기본으로 보이도록 클래스별 열배치를 서로 바꿔 적용
   (list_shopping1x = 2열/갤러리형 디자인, list_shopping2x = 1열/리스트형 디자인) */
.list_shopping1x ul, .list_shopping2x ul { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.list_shopping1x li, .list_shopping2x li { position: relative; }
/* list_shopping1x/2x는 네이티브 클래스명이라 #search 등 사이트 다른 화면에 이미
   `#search .list_shopping1x li:first-child{padding:0 4px 18px}` 같은 규칙이 있고
   그게 우리 페이지에도 끼어들어 1번째 카드만 위쪽 패딩이 사라져 틀어져 보였음
   → id보다 강하게 이기도록 !important로 우리 패딩 값을 명시 고정 */
.list_shopping1x li,
.list_shopping1x li:first-child { padding: 8px 8px 40px 8px; }
.list_shopping1x li a, .list_shopping2x li a { text-decoration: none; border: none !important; }

/* 1열(피드)뷰: 이미지를 크게 위에, 상품명·설명은 그 아래로(스택). 좌우 인라인 배치 아님 */
.list_shopping2x li a { display: block !important; }

/* 찜하기 = 관심상품 토글(my-wish-list). 이미지 우상단, 흰 원 배경 + 하트.
   클릭 시 메이크샵이 wish 상태(빈↔채움) 토글. 미리보기(link_preview) 미사용. */
.listWish { position: absolute; top: 20px; right: 20px; margin: 0; z-index: 2; }
.list_shopping1x .listWish .my-wish-list,
.list_shopping2x .listWish .my-wish-list {
  display: flex !important; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: #fff;
  cursor: pointer; color: #222; box-sizing: border-box; pointer-events: auto;
}
.listWish .material-symbols-outlined { font-size: 18px; line-height: 1; color: #222; }
.listWish .heart-fill { color: #222; font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 0, 'opsz' 18; }
.listWish .heart-line { color: #222; font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 18; }

/* 열배치: 2열(갤러리) / 1열(피드) */
.list_shopping1x li { width: 50%; box-sizing: border-box; }
.list_shopping2x li { width: 100%; box-sizing: border-box; padding: 10px 20px 30px; border: none !important; }
/* 1열(피드)뷰 카드 내부: 이미지 풀폭 크게 + 정보는 그 아래(블록) */
.list_shopping2x .prd-img-wrap { width: 100%; margin-bottom: 14px; }
.list_shopping2x .prd-info-text { width: 100%; }
.list_shopping2x .listWish { top: 25px; right: 35px; left: auto; }

.none-data { padding: 80px 0; text-align: center; color: #999; font-size: 12px; }
.none-data .fa { display: none; }
/* 노출 상품수 카운터 (더보기 위)   "전체 N개 중 M개 표시" */
.list-count {
    text-align: center;
    font-family: 'Lato', 'Noto Sans KR', sans-serif;
    font-size: 12px;
    color: #222;
    padding: 22px 15px 10px 15px;
    letter-spacing: 0.02rem;
}
.list-count .lc-total, .list-count .lc-shown { color: #3b3b3b; font-weight: 400; padding: 0px 2px; }

.more { padding: 15px 100px 0px; }
.btn_moreGray {
    display: block;
    width: 100%;
    height: 45px;
    line-height: 45px;
    text-align: center;
    border: 1px solid #3d3d3d;
    font-family: 'Josefin Sans', 'Noto Sans KR', sans-serif;
    font-size: 12px;
    color: #222;
    text-decoration: none;
    letter-spacing: 0.2rem;
}

/* 하단 상담 섹션 */ 
.visit_btn_wrap, .kakao_btn_wrap { text-align:center; }
.what_title { font-family: 'Noto Serif KR', serif !important; font-size: 1.6rem; text-align: center; font-weight: 600; line-height: 1.3; padding: 50px 0px 0px 0px; border-top: 1px solid #c7c7c7; margin-top: 70px; }
.what_detail { font-size: 0.85rem; text-align: center; line-height: 1.6; letter-spacing: initial; padding: 20px 10px 35px 10px; word-break: keep-all; }
.what_title_warp { margin: 0px 0px 60px 0px; }
.visit_btn { min-width: 160px; width: 100%; max-width: 185px; text-align: center; padding: 15px 20px; display: inline-block; font-size: 13px; border: 1px solid #111111; position: relative; overflow: hidden; background-color: #111111; color: #ffffff; z-index: 1; transition: color 0.4s ease, border-color 0.4s ease; cursor: pointer; text-decoration: none; box-sizing: border-box; font-weight: 500; }        
.kakao_info { letter-spacing: 0.02em; font-size: 0.85rem; text-align: center; line-height: 1.5; padding: 50px 0px 20px 0px; border-top: 1px solid #c7c7c7; margin-top: 50px;  }
.kakao_btn { position: relative; display: inline-block; text-align: center; padding-bottom: 4px; color: #111; letter-spacing: 0.02em; font-size: 0.85rem; }
.kakao_btn::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: #c7a97b; transform: scaleX(1); transform-origin: left; transition: transform 0.35s ease; }
.kakao-link:hover .kakao_btn::after { transform: scaleX(0); }


/* ============================================================
   [상품배열 통일] 상품 카드 = 메인화면 클래스(.prd-*)로 렌더
   · 구 .list* 값(폰트/색/크기 = 메인과 동일)을 .prd-* 로 이관
   · shopbrand.css는 상품분류 전용 로드라 .prd-* 전역 선언해도 메인에 영향 없음
   · 2열 폭에 맞춰 이름만 2줄 클램프 유지(그 외는 메인과 동일)
   ============================================================ */
.prd-img-wrap { display: block; background-color: rgba(0, 0, 0, .02); text-align: center; margin-bottom: 15px; }
.prd-img-wrap .prd-img { max-width: 100%; width: 100%; height: auto; display: block; mix-blend-mode: multiply; }
.prd-info-text { display: block; text-align: left; }
.prd-name {
  font-family: 'Lato', 'Noto Sans KR', sans-serif; color: #1b1b1b; font-size: 12px; font-weight: 400;
  letter-spacing: -0.020em; text-align: left; margin: 0;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prd-subname { font-family: 'Lato', 'Noto Sans KR', sans-serif; font-weight: 400; letter-spacing: 0.03em; font-size: 10px; color: #1d1c1c; font-style: italic; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0px 0px 0px 0px; }
.prd-soldout, .prd-replace { margin: 6px 0 0; font-size: 12px; color: #999; text-align: left; }
/* 판매가·정가·할인율을 한 줄에 인라인 가운데정렬(할인율이 아래로 안 내려가게 flex row) */
.prd-price-wrap { display: flex; align-items: center; flex-wrap: wrap; gap: 3px 5px; padding-top: 4px; text-align: left; }
.prd-price-sale { margin: 0; font-weight: 600; font-size: 12px; color: #222; white-space: nowrap; }
.prd-price-origin { margin: 0; color: #5f5e5e; font-size: 10px; font-family: 'PT Sans', sans-serif; white-space: nowrap; }
.prd-price-origin del { color: #5f5e5e; }
.prd-discount-rate { margin: 0 0 0 auto; font-family: 'Lato', 'Noto Sans KR', sans-serif; letter-spacing: -0.03em; color: #fa5500; font-size: 12px; white-space: nowrap; }
.prd-price { margin: 0; }
.prd-price-bold { text-align: left; margin: 0; font-weight: 600; font-size: 13px; color: #111; padding: 5px 0px 0px 0px; }
.review-height { min-height: 17px; }
.prd-review { font-size: 9px; font-family: 'Lato', 'Noto Sans KR', sans-serif; text-align: left; color: #3b3b3b; letter-spacing: -0.02em;}
.prd-review-count { padding-left: 3px; color: #777; font-family: 'PT Sans', sans-serif; }

/* 접근성 숨김(SEO용 h1 등)   화면엔 안 보이되 스크린리더/검색엔진엔 노출 */
.shopbrand-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ── 옵션 미리보기(퀵뷰) 팝업 스타일은 상품미리보기.css(팝업 전용 파일)로 이관 ──
   상세페이지 detail-drawer와 동일한 바텀시트로 그쪽에서 관리(#detailpage 스코프). */


/* ============================================================
   [카테고리별] 중앙 배너 (JS가 분류명 매칭해 10번째 상품 뒤에 삽입)
   · 이미지/영상 = shopbrand.html의 CATE_BANNER 맵(분류명 → URL)
   · 문구/위치 = 맨 아래 [data-cate="분류명"] 블록에서 카테고리별 개별 지정 ← 여기만 편집
   ============================================================ */
.list_shopping1x .prd-cate-row,
.list_shopping2x .prd-cate-row {
  width: 100% !important;      /* 2열(50%) 무시하고 한 줄 전체 차지 */
  margin: 10px 0px 30px 0px;
  list-style: none;
  box-sizing: border-box;
}
/* 풀블리드 아님 → 좌우 여백을 상품 리스트 li와 동일하게 */
.list_shopping1x .prd-cate-row { padding: 0 8px !important; }   /* 2열 상품 여백 */
.list_shopping2x .prd-cate-row { padding: 0 15px !important; }  /* 1열 상품 여백 */
.prd-cate-band {
  position: relative; width: 100%;
  height: 56vh; min-height: 380px; max-height: 520px;   /* 영상 등 기본 세로형 높이 */
  overflow: hidden; background: #000;
}
/* 이미지 카테고리: 1000×1000(1:1)에 딱 맞게 밴드 비율 고정 → 무크롭. (영상=기념일은 위 기본 세로형 유지) */
.prd-cate-row.is-image .prd-cate-band { height: auto; aspect-ratio: 1 / 1; min-height: 0; max-height: none; }
/* 미디어(이미지/영상 공통) */
.prd-cate-media, .prd-cate-media video, .prd-cate-media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
}
/* 오버레이: 기본 중앙정렬 흰 글씨 (카테고리별로 아래에서 위치/문구 재정의) */
.prd-cate-overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; color: #fff; padding: 24px; z-index: 1;
  background: linear-gradient(to bottom, rgba(0,0,0,.0), rgba(0,0,0,.15));   /* 가독용 살짝 어둡게 */
}
/* 문구 슬롯: 기본 숨김 → 카테고리별로 display:block + content 지정한 것만 노출.
   줄바꿈은 content 안 \A 로 (슬롯에 white-space:pre-line 적용됨) */
.prd-cate-overlay .cate-tx { display: none; margin: 0; white-space: pre-line; }
.prd-cate-overlay .t1 { font-family: 'Josefin Sans', 'Noto Sans KR', sans-serif; text-transform: uppercase; letter-spacing: 0.22em; font-size: 12px; margin-bottom: 10px; }
.prd-cate-overlay .t2 { font-family: "Noto Serif KR", serif !important; letter-spacing: -0.02rem; font-size: 20px; font-weight: 600; line-height: 1.6em; opacity: 0.9; }
.prd-cate-overlay .t3 { font-family: Arial, sans-serif; font-size: 14px; letter-spacing: -0.01rem; line-height: 1.3;; opacity: 0.9; margin-top: 12px; word-break: keep-all; font-weight: 500; }
@media (max-width: 480px) { .prd-cate-overlay .t2 { font-size: 20px; } }

/* ─────────────────────────────────────────────────────────────
   ▼ 카테고리별 문구 + 위치 (여기만 편집) ▼
   추가법: 아래 [기념일] 블록 복사 → data-cate 분류명만 바꾸고 content/위치 수정
   위치: .prd-cate-overlay 의 align-items(가로) · justify-content(세로) · text-align
   ───────────────────────────────────────────────────────────── */
/* [웨딩밴드] 타이틀 + 보조타이틀 */
.prd-cate-row[data-cate="웨딩밴드"] .prd-cate-overlay { justify-content: flex-end; }
.prd-cate-row[data-cate="웨딩밴드"] .t2 { display: block; }
.prd-cate-row[data-cate="웨딩밴드"] .t2::before { content: '기억을 담는 오브제'; }
.prd-cate-row[data-cate="웨딩밴드"] .t3 { display: block; }
.prd-cate-row[data-cate="웨딩밴드"] .t3::before { content: '특별한 순간을,\A당신만의 상징적인 형태로 간직하세요'; }

/* [기념일] 타이틀 + 보조타이틀 */
.prd-cate-row[data-cate="기념일"] .prd-cate-overlay { justify-content: flex-end; }
.prd-cate-row[data-cate="기념일"] .t2 { display: block; }
.prd-cate-row[data-cate="기념일"] .t2::before { content: '기억을 담는 오브제'; }
.prd-cate-row[data-cate="기념일"] .t3 { display: block; }
.prd-cate-row[data-cate="기념일"] .t3::before { content: '특별한 순간을,\A당신만의 상징적인 형태로 간직하세요'; }

/* [밀그레인] 타이틀 + 보조타이틀 */
.prd-cate-row[data-cate="밀그레인"] .prd-cate-overlay { justify-content: flex-end; }
.prd-cate-row[data-cate="밀그레인"] .t2 { display: block; } 
.prd-cate-row[data-cate="밀그레인"] .t2::before { content: '시간을 담은 디테일'; }
.prd-cate-row[data-cate="밀그레인"] .t3 { display: block; }
.prd-cate-row[data-cate="밀그레인"] .t3::before { content: '섬세한 밀그레인 장식이\A절제된 클래식의 아름다움을 완성합니다.'; }

/* [네추럴] 타이틀 + 보조타이틀 */
.prd-cate-row[data-cate="네추럴"] .prd-cate-overlay { justify-content: flex-end; }
.prd-cate-row[data-cate="네추럴"] .t2 { display: block; }  
.prd-cate-row[data-cate="네추럴"] .t2::before { content: '즐거움과 익숙함'; }
.prd-cate-row[data-cate="네추럴"] .t3 { display: block; }
.prd-cate-row[data-cate="네추럴"] .t3::before { content: '손끝에 닿는 섬세한 질감과 잔잔한 촉감이\A시간의 흐름 속에서 더욱 깊은 울림을 만들어갑니다.'; }

/* [에센셜] 타이틀 + 보조타이틀 */
.prd-cate-row[data-cate="에센셜"] .prd-cate-overlay { justify-content: flex-end; }
.prd-cate-row[data-cate="에센셜"] .t2 { display: block; } 
.prd-cate-row[data-cate="에센셜"] .t2::before { content: '본질을 담은 디자인'; }
.prd-cate-row[data-cate="에센셜"] .t3 { display: block; }
.prd-cate-row[data-cate="에센셜"] .t3::before { content: '절제된 라인과 섬세한 디테일이 어우러져\A일상 속에서 오래도록 함께할 아름다움을 완성합니다.'; }


/* ============================================================
   우측 고정 버튼(.right_fixed) 노출 구간 (상품분류 전용, shopbrand.js가 클래스 토글)
   · 기본 숨김 → 상품리스트 구간에서만 .is-zone-shown 으로 노출
   · 이 CSS는 상품분류 페이지에서만 로드되므로 다른 페이지의 버튼엔 영향 없음
   ============================================================ */
.right_fixed { opacity: 0; pointer-events: none; transition: opacity .25s ease; }
.right_fixed.is-zone-shown { opacity: 1; pointer-events: auto; }

/* BASIC css end */