@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css');

/* ==========================================================================
   FEEDUS - Bricks Builder Global CSS
   WordPress Bricks Builder용 풀페이지 반응형 글로벌 스타일
   Reference: Redbrick Coffee (redbrick.coffee) 구조 기반
   ========================================================================== */

/* ==========================================================================
   1. ROOT VARIABLES - 피더스 브랜드 컬러 & 글로벌 설정
   ========================================================================== */
:root {
  /* Brand Colors */
  /* 2026-08-18 확정 팔레트 (대비 검증 완료)
     primary  — 베이지 위 6.25:1, 버튼 흰 글자 7.42:1 (WCAG AA 여유 통과)
     accent   — 베이지 위 4.92:1. 배경과 hue 가 가까워 묻히므로 배지/아이콘 등
                면적 있는 요소 전용. 얇은 텍스트에는 쓰지 말 것. */
  --feedus-primary: #4a5c10;               /* 딥 올리브 — 로고, 강조 텍스트, 가격, 주요 버튼 */
  --feedus-primary-rgb: 74, 92, 16;
  --feedus-primary-hover: #3e4d0d;         /* hover / pressed */
  --feedus-accent: #566d11;                /* 올리브 — 배지·아이콘 등 면적 요소 전용 */
  --feedus-accent-tint: #eaefd8;           /* 올리브 틴트 배경 */
  --feedus-white: #ffffff;
  --feedus-black: #1a1a1a;
  --feedus-gray-light: #f2f2f2;
  --feedus-gray: #6c757d;
  --feedus-bg-beige: #EEECE7;
  --feedus-bg-beige-light: #F8F6F2;        /* 더 연한 베이지 (표 헤더 등) */
  --feedus-bg-beige-lighter: #FAF9F5;      /* 가장 연한 베이지 — 누끼 썸네일 배경 */
  --feedus-bg: #f4f1ea;                    /* 전 페이지 배경 — 사이트 배경색은 이 토큰 하나로 관리 (2026-08-18) */
  --feedus-text-soft: #5C553D;             /* 본문 보조 텍스트 (블랙보다 연함) */
  --feedus-border-color: #F4F2EF;          /* 모든 라인색 통일 (밝은 웜 그레이) */
  --feedus-border-table: #C9C4BD;          /* 표 전용 라인색 (베이지 계열) — table/표 셀렉터에서만 사용 */
  --feedus-price: #D42700;                 /* 단가(unit price) 강조 컬러 */
  --feedus-text-muted: #6B7280;            /* 보조 텍스트 그레이 (선택사항, placeholder 등) */
  --feedus-danger: #d62c2c;                /* 삭제/취소 등 파괴적 동작 버튼 */
  --feedus-input-border: #D1D5DB;          /* 인풋 테두리 (네이버/쿠팡 기준 밝은 회색) */
  --feedus-card-pad: 24px;                 /* 흰 카드 내부 패딩 — 데스크탑/모바일 공통 */
  --feedus-input-bg: #ffffff;              /* 인풋 배경 — 항상 흰색 */

  /* Typography (Font Family)
     본문 · 기본 제목 = Pretendard
     --font-display (rixseoulstation-pro) 는 전역 기본값이 아니다. 적용 범위는 딱 두 곳:
       (1) h1  — 이 파일 3. TYPOGRAPHY 의 h1 블록
       (2) 상품상세 상품명 + h1~h3 — feedus-pages.css 4-2 섹션
     새 위치에 쓰고 싶으면 --feedus-font-display-weight 와 함께 그 셀렉터에만 지정할 것.
     Adobe Fonts 킷 rbi5eep, 로더는 feedus-functions.php 2-1 */
  --font-primary: "PretendardVariable", -apple-system, "Malgun Gothic", sans-serif;
  --font-fallback: "PretendardVariable", -apple-system, "Malgun Gothic", sans-serif;
  --font-display: "rixseoulstation-pro", var(--font-primary);
  --feedus-font-body: var(--font-primary);
  --feedus-font-heading: var(--font-primary);

  /* Font Weights */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --feedus-font-body-weight: var(--fw-regular);
  --feedus-font-heading-weight: var(--fw-semibold);
  --feedus-font-display-weight: var(--fw-medium);  /* rixseoulstation-pro 는 500 단일 굵기 — 올리면 가짜 볼드 */
  --feedus-font-body-size: 15px;

  /* Type scale tokens */
  --fs-lead: 17px;
  --fs-body: 15px;
  --fs-small: 13px;
  --fs-tiny: 12px;
  --fs-xl: 20px;
  --fs-2xl: 24px;

  /* Line-height tokens */
  --lh-tight: 1.3;
  --lh-snug: 1.45;
  --lh-normal: 1.65;
  --lh-loose: 1.8;

  /* Letter-spacing tokens */
  --ls-heading: -0.03em;
  --ls-body: -0.02em;
  --ls-label: -0.01em;

  /* Spacing */
  --feedus-row-padding-top: 20px;
  --feedus-row-padding-bottom: 20px;
  --space-2xs: 8px;
  --space-xs: 10px;
  --space-sm: 12px;
  --space-sm-plus: 14px;
  --space-md: 16px;
  --space-lg: 20px;
  --space-xl: 24px;
  --space-2xl: 30px;
  --space-3xl: 40px;

  /* Standard layout spacing system
     참고: 헤더 바는 뷰포트 좌우 10px 만 남긴 풀폭 카드라 본문 가장자리와는
     세로 정렬되지 않는다. 레퍼런스처럼 맞추려면 아래를 none / 10px 로 바꾸면
     되지만, 사이트 전 섹션이 풀폭이 되므로 현재는 기존 1320px 폭을 유지한다. */
  --feedus-container-max: 1320px;
  --feedus-container-pad-mobile: 16px;
  --feedus-container-pad-tablet: 24px;
  --feedus-container-pad-desktop: 32px;
  --feedus-section-y-mobile: 40px;
  --feedus-section-y-tablet: 64px;
  --feedus-section-y-desktop: 88px;
  --feedus-gap-mobile: 12px;
  --feedus-gap-tablet: 16px;
  --feedus-gap-desktop: 20px;
  --feedus-card-gap: var(--feedus-gap-mobile);
  --feedus-card-pad: 16px;
  /* 카드/박스 라운드 — 주문요약 카드처럼 "큰 박스" 전용 (작은 컨트롤은 --radius) */
  --feedus-card-radius: 12px;
  /* 카드/박스를 세로로 쌓을 때의 단일 간격 토큰.
     체크아웃 우측(주문요약 아래) 스택이 이 토큰 하나로만 벌어진다. */
  --feedus-stack-gap: 15px;
  --feedus-card-bg: #fff;
  --feedus-card-border: var(--feedus-border-color);

  /* Legacy alias for existing components */
  --feedus-container-padding: var(--feedus-container-pad-mobile);
  --feedus-inner-padding: 0px;

  /* Layout */
  --feedus-page-width: 100% !important;
  --feedus-header-height: 50px;

  /* ──────────────────────────────────────────────────────────────────
     Radius 시스템 — 사이트 전역 단일 마스터 토큰
     모든 border-radius 가 --radius 한 곳에서 결정됨 (버튼/인풋/카드/이미지)
     예외: 시멘틱하게 원형이어야 하는 요소 (라디오, 카운트 배지) → --radius-circle
     ────────────────────────────────────────────────────────────────── */
  --radius: 6px;
  --radius-circle: 50%;                        /* 라디오 버튼, 카운트 배지 등 */
  --feedus-border-radius: var(--radius);       /* 카드, 컨테이너 (구 25px) */
  --feedus-border-radius-pill: var(--radius);  /* 버튼 (구 50px → 통일됨) */

  /* Control sizing system — input/select/textarea/button 공통 세로 메트릭
     이 토큰만 바꾸면 모든 폼 컨트롤과 버튼 높이가 동기화됨 */
  --control-font-size: var(--fs-body);
  --control-font-weight: var(--fw-medium);
  --control-line-height: 1.4;
  --control-padding-y: 10px;
  --control-padding-x: 20px;          /* 인풋 기본 가로 패딩 */
  --control-padding-x-button: 30px;   /* 버튼은 클릭 영역 위해 더 넓게 */
  --control-border-width: 1px;
  --control-radius: var(--radius);    /* 인풋 라운드 (마스터 --radius 참조) */

  /* Action button variant — 장바구니 담기 / 목록에 담기 같은 주요 CTA
     일반 버튼보다 한 단계 크고 굵게 (위계 표현) */
  --control-action-font-size: var(--fs-lead);     /* 17/18px (body 보다 +2px) */
  --control-action-font-weight: var(--fw-semibold); /* 600 (medium 보다 한 단계 ↑) */

  /* Form row gap — 상품 폼(옵션→수량→버튼) 세로 균일 간격
     모든 상품 폼 행 사이가 이 토큰 하나로 통일됨 */
  --form-row-gap: var(--space-md);  /* 16px */
  /* 위 토큰들로부터 계산되는 통합 컨트롤 높이 */
  --control-height: calc(
    var(--control-padding-y) * 2 +
    var(--control-font-size) * var(--control-line-height) +
    var(--control-border-width) * 2
  );

  /* Close (X) buttons — 모든 닫기 / 삭제 X 버튼 공통 메트릭 (2026-08-19)
     공지 띠배너, 모달·오버레이 닫기, 장바구니 상품 삭제, 담기 팝업 항목 삭제까지
     전부 이 토큰 한 벌만 쓴다. 크기를 바꾸려면 여기만 고칠 것. */
  --feedus-close-size: 32px;          /* 정사각 터치 타깃 */
  --feedus-close-glyph: 24px;         /* × 글리프 크기 */
  --feedus-close-color: #8a8a8a;
  --feedus-close-color-hover: var(--feedus-black, #1a1a1a);
  --feedus-close-radius: 50%;

  /* Transitions */
  --feedus-duration-short: 0.1s;
  --feedus-duration-default: 0.2s;
  --feedus-duration-medium: 0.3s;
  --feedus-duration-long: 0.5s;
  --feedus-ease-out-slow: cubic-bezier(0, 0, 0.3, 1);

  /* Z-index */
  --feedus-z-header: 1001;
  --feedus-z-overlay: 1000;
  --feedus-z-dropdown: 100;
  --feedus-z-modal: 2000;

  /* Shadows */
  --feedus-shadow-none: none;
  --feedus-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --feedus-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
  --feedus-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
}

@media screen and (min-width: 768px) {
  :root {
    --feedus-header-height: 50px;
    --feedus-container-padding: var(--feedus-container-pad-tablet);
    --feedus-card-gap: var(--feedus-gap-tablet);
  }
}

@media screen and (min-width: 1200px) {
  :root {
    --feedus-header-height: 50px;
    --feedus-container-padding: var(--feedus-container-pad-desktop);
    --feedus-card-gap: var(--feedus-gap-desktop);
    --fs-body: 16px;
    --fs-lead: 18px;
  }
}

/* ==========================================================================
   2. RESET & BASE - Bricks Builder 기본 오버라이드
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  box-sizing: border-box;
  font-size: var(--feedus-font-body-size);
  height: 100%;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--feedus-font-body);
  font-weight: var(--feedus-font-body-weight);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--feedus-black);
  background-color: var(--feedus-bg) !important;
  overflow-x: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Bricks Builder 기본 wrapper */
#brx-content {
  flex: 1;
}

/* ==========================================================================
   3. TYPOGRAPHY - 피더스 타이포그래피
   ========================================================================== */
h1, h2, h3, h4, h5, h6,
.brxe-heading {
  font-family: var(--feedus-font-heading);
  font-weight: var(--feedus-font-heading-weight);
  color: var(--feedus-black);
  line-height: var(--lh-tight);
  word-break: keep-all;
  letter-spacing: var(--ls-heading);
  margin: 0;
}

/* h1 은 사이트 전 페이지에서 리스서울역체 (--font-display)
   주의: Bricks 는 <h1 class="brxe-heading"> 로 렌더하고 data-tag 속성을 붙이지 않는다.
   위 기본 블록의 `.brxe-heading` (0,1,0) 이 맨 h1 (0,0,1) 을 특이성으로 이기므로
   반드시 `h1.brxe-heading` (0,1,1) 을 같이 써야 폰트가 적용된다. */
h1,
h1.brxe-heading,
.brxe-heading[data-tag="h1"] {
  font-family: var(--font-display);
  font-weight: var(--feedus-font-display-weight);
}

h1, .brxe-heading[data-tag="h1"] {
  font-size: 32px;
  line-height: 1.3;
  letter-spacing: -0.035em;
  margin: 0 0 30px 0;
}

h2, .brxe-heading[data-tag="h2"] {
  font-size: 26px;
  line-height: 1.32;
  letter-spacing: -0.032em;
  margin: 0 0 30px 0;
}

h3, .brxe-heading[data-tag="h3"] {
  font-size: 20px;
  line-height: 1.4;
  letter-spacing: -0.025em;
  margin: 0 0 30px 0;
}

h4, .brxe-heading[data-tag="h4"] {
  font-size: 18px;
  line-height: 1.45;
  letter-spacing: -0.02em;
}

h5, .brxe-heading[data-tag="h5"] {
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.015em;
}

h6, .brxe-heading[data-tag="h6"] {
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: -0.01em;
}

p, .brxe-text-basic,
li, span, label, select, option, textarea {
  font-family: var(--feedus-font-body);
  font-size: 15px;
  color: var(--feedus-black);
  font-weight: var(--feedus-font-body-weight);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-body);
  margin: 0;
}

@media screen and (min-width: 768px) {
  h1, .brxe-heading[data-tag="h1"] { font-size: 40px; }
  h2, .brxe-heading[data-tag="h2"] { font-size: 32px; }
  h3, .brxe-heading[data-tag="h3"] { font-size: 22px; }
  h4, .brxe-heading[data-tag="h4"] { font-size: 19px; }
  h5, .brxe-heading[data-tag="h5"] { font-size: 17px; }
}

@media screen and (min-width: 1200px) {
  h1, .brxe-heading[data-tag="h1"] { font-size: 48px; }
  h2, .brxe-heading[data-tag="h2"] { font-size: 38px; }
  h3, .brxe-heading[data-tag="h3"] { font-size: 24px; }
  h4, .brxe-heading[data-tag="h4"] { font-size: 20px; }
  h5, .brxe-heading[data-tag="h5"] { font-size: 18px; }
  h6, .brxe-heading[data-tag="h6"] { font-size: 16px; }
  p, .brxe-text-basic,
  li, span, label, select, option, textarea { font-size: 16px; }
}

.feedus-lead {
  font-size: var(--fs-lead);
  font-weight: var(--fw-regular);
  line-height: 1.6;
  letter-spacing: var(--ls-body);
}

.feedus-small,
small {
  font-size: var(--fs-small);
  font-weight: var(--fw-regular);
  line-height: 1.5;
  letter-spacing: -0.01em;
}

.feedus-tiny {
  font-size: var(--fs-tiny);
  font-weight: var(--fw-medium);
  line-height: 1.4;
  letter-spacing: 0;
}


a {
  color: var(--feedus-black);
  text-decoration: none;
  transition: color var(--feedus-duration-default) ease;
}

a:hover {
  color: var(--feedus-primary-hover);
  text-decoration: none;
}

/* ==========================================================================
   4. LAYOUT
   ========================================================================== */
.brxe-section {
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: var(--feedus-section-y-mobile) 0;
  overflow: visible;
  position: relative;
}

@media screen and (min-width: 768px) {
  .brxe-section {
    padding-top: var(--feedus-section-y-tablet);
    padding-bottom: var(--feedus-section-y-tablet);
  }
}

@media screen and (min-width: 1200px) {
  .brxe-section {
    padding-top: var(--feedus-section-y-desktop);
    padding-bottom: var(--feedus-section-y-desktop);
  }
}

.brxe-container {
  width: 100%;
  max-width: var(--feedus-container-max);
  padding-left: var(--feedus-container-pad-mobile);
  padding-right: var(--feedus-container-pad-mobile);
  margin: 0 auto;
  position: relative;
  overflow: visible;
}

@media screen and (min-width: 768px) {
  .brxe-container {
    padding-left: var(--feedus-container-pad-tablet);
    padding-right: var(--feedus-container-pad-tablet);
  }
}

@media screen and (min-width: 1200px) {
  .brxe-container {
    padding-left: var(--feedus-container-pad-desktop);
    padding-right: var(--feedus-container-pad-desktop);
  }
}

/* 페이지 제목 래퍼 — Bricks 에서 제목 블록에 .page-title 클래스를 준다.
   제목 섹션의 위 패딩은 본문 섹션(40/64/88)보다 타이트해야 헤더와의 간격이
   카트·마이계정 h1 과 맞는다 → 24/40/56. 아래는 그 절반 → 12/20/28.

   제목 아래 간격은 이 래퍼가 단독으로 관리한다. 안쪽 제목의 margin 을 0 으로
   눌러두는 이유: Bricks 는 <h1 class="brxe-heading"> 로 렌더하고 data-tag 를
   안 붙여서, 위 TYPOGRAPHY 의 `.brxe-heading { margin: 0 }` (0,1,0) 이
   `h1 { margin: 0 0 30px }` (0,0,1) 을 이겨 실제 여백이 0 이 된다.
   반대로 코드 요소에 손으로 쓴 맨 <h1> 은 30px 이 살아 있다 —
   같은 .page-title 인데 마크업에 따라 간격이 달라지므로 여기서 통일한다. */
.page-title {
  padding-top: 24px;
  padding-bottom: 12px;
}

.page-title > h1,
.page-title > .brxe-heading {
  margin-bottom: 0;
}

/* Bricks 섹션/컨테이너 없이 <main> 바로 아래 놓인 경우에만 컨테이너 폭·좌우 패딩을
   대신 준다. 컨테이너 안에 들어 있으면 이 셀렉터가 안 걸려 이중 패딩이 나지 않는다. */
main#brx-content > .page-title {
  width: 100%;
  max-width: var(--feedus-container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--feedus-container-pad-mobile);
  padding-right: var(--feedus-container-pad-mobile);
}

@media screen and (min-width: 768px) {
  .page-title { padding-top: 40px; padding-bottom: 20px; }
  main#brx-content > .page-title {
    padding-left: var(--feedus-container-pad-tablet);
    padding-right: var(--feedus-container-pad-tablet);
  }
}

@media screen and (min-width: 1200px) {
  .page-title { padding-top: 56px; padding-bottom: 28px; }
  main#brx-content > .page-title {
    padding-left: var(--feedus-container-pad-desktop);
    padding-right: var(--feedus-container-pad-desktop);
  }
}

.feedus-no-padding { padding: 0 !important; }
.feedus-no-padding-x { padding-left: 0 !important; padding-right: 0 !important; }
.feedus-no-padding-y { padding-top: 0 !important; padding-bottom: 0 !important; }
.brxe-container.feedus-flush { padding-left: 0; padding-right: 0; }
.feedus-no-gap { gap: 0 !important; }
.feedus-no-gap > * { padding-left: 0 !important; padding-right: 0 !important; }

.feedus-line { position: relative; }
.feedus-line::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: var(--feedus-container-padding);
  width: calc(100% - var(--feedus-container-padding) * 2);
  height: 1px;
  background-color: var(--feedus-primary);
  pointer-events: none;
  z-index: 1;
}

.brxe-section.feedus-line,
.brxe-container.feedus-line,
.brxe-div.feedus-line,
.brxe-block.feedus-line {
  padding-bottom: var(--feedus-row-padding-bottom);
}

.brxe-section.feedus-line + .brxe-section,
.brxe-container.feedus-line + .brxe-container,
.brxe-div.feedus-line + .brxe-div,
.brxe-block.feedus-line + .brxe-block {
  padding-top: var(--feedus-row-padding-top);
}

.feedus-line-full { position: relative; }
.feedus-line-full::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: var(--feedus-primary);
  pointer-events: none;
  z-index: 1;
}

.feedus-line-white::after { background-color: rgba(255, 255, 255, 0.3); }

.feedus-line-top { position: relative; }
.feedus-line-top::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: auto;
  left: var(--feedus-container-padding);
  width: calc(100% - var(--feedus-container-padding) * 2);
  height: 1px;
  background-color: var(--feedus-black);
  pointer-events: none;
  z-index: 1;
}

.feedus-row-line {
  position: relative;
  padding-bottom: 10px;
  margin-bottom: 20px;
}

.feedus-row-line::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: var(--feedus-primary);
  pointer-events: none;
}

.feedus-line.feedus-spacing-sm { padding-bottom: 15px; }
.feedus-line.feedus-spacing-md { padding-bottom: 30px; }
.feedus-line.feedus-spacing-lg { padding-bottom: 50px; }
.feedus-line.feedus-spacing-xl { padding-bottom: 80px; }
.feedus-line.feedus-spacing-sm + * { padding-top: 15px; }
.feedus-line.feedus-spacing-md + * { padding-top: 30px; }
.feedus-line.feedus-spacing-lg + * { padding-top: 50px; }
.feedus-line.feedus-spacing-xl + * { padding-top: 80px; }

@media screen and (min-width: 768px) {
  .feedus-line.feedus-spacing-sm { padding-bottom: 20px; }
  .feedus-line.feedus-spacing-md { padding-bottom: 40px; }
  .feedus-line.feedus-spacing-lg { padding-bottom: 70px; }
  .feedus-line.feedus-spacing-xl { padding-bottom: 100px; }
  .feedus-line.feedus-spacing-sm + * { padding-top: 20px; }
  .feedus-line.feedus-spacing-md + * { padding-top: 40px; }
  .feedus-line.feedus-spacing-lg + * { padding-top: 70px; }
  .feedus-line.feedus-spacing-xl + * { padding-top: 100px; }
}

.brxe-block,
.brxe-div {
  position: relative;
}

/* ==========================================================================
   5. HEADER
   ========================================================================== */
header,
.brxe-section.feedus-header,
#brx-header {
  position: relative;
  width: 100%;
  height: var(--feedus-header-height);
  z-index: var(--feedus-z-header);
  background-color: var(--feedus-white);
}

#brx-content,
main {
  padding-top: 0;
}

#brx-header a,
.feedus-header a {
  color: var(--feedus-black);
  font-family: var(--feedus-font-body);
  font-size: 1rem;
  text-decoration: none;
  transition: color var(--feedus-duration-default) ease;
}

#brx-header a:hover,
.feedus-header a:hover {
  color: var(--feedus-primary-hover);
}

.feedus-logo img,
#brx-header .brxe-image img {
  height: auto;
  max-height: 40px;
  width: auto;
}

@media screen and (min-width: 768px) {
  .feedus-logo img,
  #brx-header .brxe-image img {
    max-height: 50px;
  }
}

.feedus-cart-count {
  position: absolute;
  top: -5px;
  right: -5px;
  background-color: var(--feedus-primary);
  color: var(--feedus-white);
  height: 20px;
  width: 20px;
  border-radius: var(--radius-circle);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.7rem;
  font-weight: var(--fw-semibold);
  line-height: 1;
}

/* ==========================================================================
   6. HERO / BANNER SECTION
   ========================================================================== */
.feedus-hero,
.feedus-banner {
  width: 100%;
  min-height: 60vh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}

@media screen and (min-width: 768px) {
  .feedus-hero,
  .feedus-banner {
    min-height: 80vh;
  }
}

@media screen and (min-width: 1200px) {
  .feedus-hero,
  .feedus-banner {
    min-height: calc(100vh - var(--feedus-header-height));
  }
}

.feedus-hero h1 {
  font-size: clamp(3rem, 8vw, 6rem);
  line-height: 1.1;
  color: var(--feedus-black);
}

.feedus-hero-image,
.feedus-banner-image {
  display: block;
  min-height: 250px;
  width: 100%;
  background-color: var(--feedus-gray-light);
  border-radius: var(--feedus-border-radius);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
}

@media screen and (min-width: 768px) {
  .feedus-hero-image,
  .feedus-banner-image {
    min-height: 500px;
  }
}

.feedus-hero-image img,
.feedus-banner-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--feedus-border-radius);
}

/* ==========================================================================
   7. PRODUCT GRID & CARDS
   ========================================================================== */
.feedus-product-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--feedus-gap-mobile);
  padding: 0;
}

@media screen and (min-width: 768px) {
  .feedus-product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--feedus-gap-tablet);
  }
}

@media screen and (min-width: 1200px) {
  .feedus-product-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--feedus-gap-desktop);
  }
}

/* 상품 상세 페이지 — 갤러리 + 정보 컬럼 레이아웃
   (목록용 .feedus-product-grid 와 분리)
   주의: Bricks 가 ID 셀렉터로 인라인 CSS 를 출력하므로 specificity 를
        이기기 위해 !important 사용. 컨테이너 패딩 토큰까지 직접 명시. */
.feedus-product-detail-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: var(--feedus-gap-mobile) !important;
  padding-left: var(--feedus-container-pad-mobile) !important;
  padding-right: var(--feedus-container-pad-mobile) !important;
}

@media screen and (min-width: 768px) {
  .feedus-product-detail-grid {
    grid-template-columns: 60fr 40fr !important;
    gap: var(--feedus-gap-tablet) !important;
    padding-left: var(--feedus-container-pad-tablet) !important;
    padding-right: var(--feedus-container-pad-tablet) !important;
    align-items: start !important;
  }
  /* 우측 상품 정보 sticky */
  .feedus-product-detail-grid > *:last-child {
    position: sticky;
    top: calc(var(--feedus-header-height, 80px) + 20px);
  }
}

@media screen and (min-width: 1200px) {
  .feedus-product-detail-grid {
    grid-template-columns: 60fr 40fr !important;
    gap: var(--feedus-gap-desktop) !important;
    padding-left: var(--feedus-container-pad-desktop) !important;
    padding-right: var(--feedus-container-pad-desktop) !important;
  }
}

.feedus-product-card {
  text-align: center;
  text-decoration: none;
  display: block;
  transition: transform var(--feedus-duration-medium) var(--feedus-ease-out-slow);
}

.feedus-product-card:hover {
  transform: translateY(-4px);
}

.feedus-product-card-image {
  display: block;
  background-color: var(--feedus-gray-light);
  border-radius: var(--feedus-border-radius);
  overflow: hidden;
  aspect-ratio: 1 / 1;
}

.feedus-product-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--feedus-duration-long) ease;
}

.feedus-product-card:hover .feedus-product-card-image img {
  transform: scale(1.05);
}

.feedus-product-card-title {
  margin-top: 12px;
  font-size: 0.9rem;
  font-weight: var(--fw-regular);
  color: var(--feedus-black);
}

/* ==========================================================================
   8. TWO COLUMN SECTION
   ========================================================================== */
.feedus-two-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  padding: var(--feedus-row-padding-top) 0 var(--feedus-row-padding-bottom);
}

@media screen and (min-width: 768px) {
  .feedus-two-col {
    flex-direction: row;
    gap: 40px;
  }

  .feedus-two-col > * {
    flex: 1;
  }

  .feedus-two-col.image-right {
    flex-direction: row;
  }

  .feedus-two-col.image-left {
    flex-direction: row-reverse;
  }
}

.feedus-two-col h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.15;
  margin-bottom: 20px;
}

.feedus-two-col p {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--feedus-black);
}

.feedus-two-col .feedus-content-image {
  width: 100%;
  border-radius: var(--feedus-border-radius);
  overflow: hidden;
}

.feedus-two-col .feedus-content-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--feedus-border-radius);
  object-fit: cover;
}

/* ==========================================================================
   9. SECTION TITLE ROW
   ========================================================================== */
.feedus-section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--feedus-border-color);
  margin-bottom: 20px;
}

.feedus-section-title h3 {
  font-size: 1.25rem;
  font-weight: var(--fw-bold);
  margin: 0;
}

/* ==========================================================================
   10. BUTTONS
   ========================================================================== */
.feedus-btn,
.brxe-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--feedus-font-body);
  font-size: var(--control-font-size);
  font-weight: var(--control-font-weight);
  padding: var(--control-padding-y) var(--control-padding-x-button);
  border-radius: var(--feedus-border-radius-pill);
  text-decoration: none;
  cursor: pointer;
  transition: all var(--feedus-duration-medium) ease;
  border: var(--control-border-width) solid var(--feedus-primary);
  line-height: var(--control-line-height);
  letter-spacing: var(--ls-label);
}

.feedus-btn-primary {
  background-color: var(--feedus-primary);
  color: var(--feedus-white);
  border-color: var(--feedus-primary);
}

.feedus-btn-primary:hover {
  filter: brightness(0.88);
}

.feedus-btn-secondary {
  background-color: transparent;
  color: var(--feedus-gray);
  border-color: var(--feedus-gray);
}

.feedus-btn-secondary:hover {
  background-color: var(--feedus-gray-light);
}

.feedus-btn-arrow {
  position: relative;
  padding: 0 50px 0 0;
  background-color: transparent;
  border: none;
  font-size: 1rem;
  color: var(--feedus-primary);
  line-height: 1.2;
}

.feedus-btn-arrow::after {
  content: "→";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2rem;
  transition: right var(--feedus-duration-default) ease;
}

.feedus-btn-arrow:hover::after {
  right: 0;
}

.feedus-btn-white {
  background-color: var(--feedus-white);
  color: var(--feedus-primary);
  border-color: var(--feedus-white);
}

.feedus-btn-white:hover {
  filter: brightness(0.92);
}

/* ── 닫기(X) 버튼 공통 베이스 ──────────────────────────────────────────
   공지 띠배너 / 모달 / 오버레이 / 장바구니·담기팝업 항목 삭제까지
   모든 X 버튼이 같은 터치 타깃(--feedus-close-size)과 같은 글리프 크기를 쓴다.
   각 컴포넌트 CSS 는 이 셀렉터 목록에 자기 클래스를 추가만 하고
   크기를 따로 선언하지 않는다. */
.feedus-close-btn,
.feedus-notice-bar__close,
.feedus-auth-modal__close,
.feedus-addr-overlay-close,
.feedus-postcode-overlay__close,
.feedus-fm-item-remove,
.feedus-fm-queue-remove,
.feeders-modal-x,
.woocommerce-cart-form .cart_item .product-remove a.remove,
.woocommerce-mini-cart .cart_item a.remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--feedus-close-size);
  height: var(--feedus-close-size);
  min-width: var(--feedus-close-size);
  padding: 0;
  background: none;
  border: 0;
  border-radius: var(--feedus-close-radius);
  font-size: var(--feedus-close-glyph);
  font-weight: 400;
  line-height: 1;
  color: var(--feedus-close-color);
  text-decoration: none;
  cursor: pointer;
  transition: color var(--feedus-duration-default) ease,
              background-color var(--feedus-duration-default) ease;
}

.feedus-close-btn:hover,
.feedus-notice-bar__close:hover,
.feedus-auth-modal__close:hover,
.feedus-addr-overlay-close:hover,
.feedus-postcode-overlay__close:hover,
.feedus-fm-item-remove:hover,
.feedus-fm-queue-remove:hover,
.feeders-modal-x:hover,
.woocommerce-cart-form .cart_item .product-remove a.remove:hover,
.woocommerce-mini-cart .cart_item a.remove:hover {
  color: var(--feedus-close-color-hover);
  background-color: rgba(0, 0, 0, 0.06);
}

/* WooCommerce 코어 cart.css 가 a.remove 에 color:red!important / font-size:1.5em 을
   걸어두기 때문에 이 한 컴포넌트만 !important 로 다시 덮는다. */
.woocommerce-cart-form .cart_item .product-remove a.remove,
.woocommerce-mini-cart .cart_item a.remove {
  width: var(--feedus-close-size) !important;
  height: var(--feedus-close-size) !important;
  font-size: var(--feedus-close-glyph) !important;
  color: var(--feedus-close-color) !important;
  background: none !important;
}

.woocommerce-cart-form .cart_item .product-remove a.remove:hover,
.woocommerce-mini-cart .cart_item a.remove:hover {
  color: var(--feedus-danger, #d62c2c) !important;
  background-color: rgba(214, 44, 44, 0.08) !important;
}

/* ==========================================================================
   11. FOOTER — 이전됨
   풋터 전체 스타일은 `feedus-pages.css` 의 `16. FOOTER` 섹션에서 단일 관리.
   여기에는 풋터 규칙을 두지 않음 (print 미디어쿼리 안의 display:none 만 예외로 유지).
   ========================================================================== */

/* ==========================================================================
   12. IMAGES & MEDIA
   ========================================================================== */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

.brxe-image {
  display: block;
  width: 100%;
  background-color: var(--feedus-gray-light);
  border-radius: var(--feedus-border-radius);
  overflow: hidden;
}

.brxe-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  border-radius: var(--feedus-border-radius);
}

.feedus-image,
.brxe-div.feedus-image,
.brxe-block.feedus-image {
  display: block;
  min-height: 250px;
  width: 100%;
  background-color: var(--feedus-gray-light);
  border-radius: var(--feedus-border-radius);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

@media screen and (min-width: 768px) {
  .feedus-image,
  .brxe-div.feedus-image,
  .brxe-block.feedus-image {
    min-height: 500px;
  }
}

.feedus-image-hero {
  display: block;
  min-height: 300px;
  width: 100%;
  background-color: var(--feedus-gray-light);
  border-radius: var(--feedus-border-radius);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

@media screen and (min-width: 768px) {
  .feedus-image-hero {
    min-height: 500px;
    margin-top: 0;
  }
}

@media screen and (min-width: 1200px) {
  .feedus-image-hero {
    min-height: 600px;
  }
}

.feedus-image-product {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  background-color: var(--feedus-gray-light);
  border-radius: var(--feedus-border-radius);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  overflow: hidden;
}

.feedus-image-product img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.feedus-image-thumb {
  display: block;
  width: 70px;
  height: 70px;
  border-radius: var(--radius);
  border: 1px solid var(--feedus-border-color);
  background-color: var(--feedus-gray-light);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
  flex-shrink: 0;
}

/* 구 .feedus-image-circle / .feedus-image-square 유틸은 마스터 토큰으로 통일
   (네이밍은 호환을 위해 유지하되 실제 값은 6px) */
.feedus-image-circle,
.brxe-image.feedus-image-circle {
  border-radius: var(--radius);
  aspect-ratio: 1 / 1;
}

.feedus-image-circle img { border-radius: var(--radius); }

.feedus-image-square,
.brxe-image.feedus-image-square {
  border-radius: var(--radius);
}

.feedus-image-square img { border-radius: var(--radius); }

.feedus-image-nobg,
.brxe-image.feedus-image-nobg {
  background-color: transparent;
}

.feedus-image-contain img { object-fit: contain; }

.feedus-image-full {
  min-height: calc(100vh - var(--feedus-header-height));
}

.brxe-video,
.feedus-video {
  border-radius: var(--feedus-border-radius);
  overflow: hidden;
  background-color: var(--feedus-gray-light);
}

/* ==========================================================================
   13. FORMS
   ========================================================================== */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="search"],
textarea,
select {
  font-family: var(--feedus-font-body);
  font-size: var(--control-font-size);
  line-height: var(--control-line-height);
  color: var(--feedus-black);
  padding: var(--control-padding-y) var(--control-padding-x);
  border: var(--control-border-width) solid var(--feedus-input-border);
  border-radius: var(--control-radius);
  background-color: var(--feedus-input-bg);
  width: 100%;
  transition: border-color var(--feedus-duration-default) ease,
              box-shadow var(--feedus-duration-default) ease;
  -webkit-appearance: none;
  appearance: none;
}

/* 모든 라디오 버튼은 시멘틱하게 원형 유지 (글로벌 안전망) */
input[type="radio"] {
  border-radius: var(--radius-circle);
}

/* Select 검정 화살표 (커스텀 SVG) */
select {
  padding-right: 44px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%231a1a1a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 18px center;
  background-size: 12px 8px;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--feedus-black);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.15);
}

textarea {
  min-height: 120px;
  resize: vertical;
}

input::placeholder,
textarea::placeholder {
  color: var(--feedus-text-muted);
}

/* ==========================================================================
   14. UTILITY CLASSES
   ========================================================================== */
.bg-primary { background-color: var(--feedus-primary); }
.bg-white { background-color: var(--feedus-white); }
.bg-light { background-color: var(--feedus-gray-light); }
.text-primary { color: var(--feedus-primary); }
.text-white { color: var(--feedus-white); }
.text-dark { color: var(--feedus-black); }
.fw-light { font-weight: var(--fw-light); }
.fw-regular { font-weight: var(--fw-regular); }
.fw-medium { font-weight: var(--fw-medium); }
.fw-semibold { font-weight: var(--fw-semibold); }
.fw-bold { font-weight: var(--fw-bold); }
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.d-none { display: none !important; }
.d-block { display: block !important; }
.d-flex { display: flex !important; }
.d-grid { display: grid !important; }

@media screen and (min-width: 768px) {
  .d-md-none { display: none !important; }
  .d-md-block { display: block !important; }
  .d-md-flex { display: flex !important; }
}

@media screen and (min-width: 1200px) {
  .d-lg-none { display: none !important; }
  .d-lg-block { display: block !important; }
  .d-lg-flex { display: flex !important; }
}

.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-column { display: flex; flex-direction: column; }
.align-center { align-items: center; }
.align-start { align-items: flex-start; }
.align-end { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.gap-sm { gap: 10px; }
.gap-md { gap: 20px; }
.gap-lg { gap: 40px; }
.gap-xl { gap: 60px; }
.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }
.w-100 { width: 100%; }
.h-100 { height: 100%; }
.min-h-screen { min-height: 100vh; }

.visually-hidden {
  position: absolute !important;
  overflow: hidden;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  word-wrap: normal !important;
}

/* ==========================================================================
   15. ANIMATIONS
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .feedus-fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity var(--feedus-duration-long) var(--feedus-ease-out-slow),
                transform var(--feedus-duration-long) var(--feedus-ease-out-slow);
  }

  .feedus-fade-in.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  .feedus-slide-up {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.6s var(--feedus-ease-out-slow),
                transform 0.6s var(--feedus-ease-out-slow);
  }

  .feedus-slide-up.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (hover: hover) {
  .feedus-hover-lift {
    transition: transform var(--feedus-duration-medium) var(--feedus-ease-out-slow);
  }

  .feedus-hover-lift:hover {
    transform: translateY(-6px);
  }
}

/* ==========================================================================
   16. BRICKS BUILDER SPECIFIC OVERRIDES
   ========================================================================== */
.brxe-section > .brxe-container {
  max-width: var(--feedus-container-max);
  padding-left: var(--feedus-container-pad-mobile);
  padding-right: var(--feedus-container-pad-mobile);
}

@media screen and (min-width: 768px) {
  .brxe-section > .brxe-container {
    padding-left: var(--feedus-container-pad-tablet);
    padding-right: var(--feedus-container-pad-tablet);
  }
}

@media screen and (min-width: 1200px) {
  .brxe-section > .brxe-container {
    padding-left: var(--feedus-container-pad-desktop);
    padding-right: var(--feedus-container-pad-desktop);
  }
}

.brxe-section.feedus-full-width {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(-50vw + 50%);
  padding: 0;
}

.brxe-image { overflow: hidden; }

.brxe-video {
  border-radius: var(--feedus-border-radius);
  overflow: hidden;
}

.brxe-accordion .accordion-item {
  border: 1px solid var(--feedus-border-color);
  border-radius: var(--feedus-border-radius);
  margin-bottom: 10px;
  overflow: hidden;
}

.brxe-accordion .accordion-title {
  font-family: var(--feedus-font-body);
  color: var(--feedus-black);
  padding: 15px 20px;
  cursor: pointer;
}

.brxe-slider .swiper-button-next,
.brxe-slider .swiper-button-prev {
  color: var(--feedus-primary);
}

.brxe-slider .swiper-pagination-bullet-active {
  background-color: var(--feedus-primary);
}

.brxe-nav-menu .bricks-nav-menu > li > a {
  color: var(--feedus-black);
  font-size: 1rem;
  padding: 10px 15px;
}

.brxe-nav-menu .bricks-nav-menu > li > a:hover {
  color: var(--feedus-primary-hover);
}

/* ==========================================================================
   17. GREEN SECTION
   ========================================================================== */
.feedus-green-section,
.brxe-section.bg-primary {
  background-color: var(--feedus-primary);
  color: var(--feedus-white);
}

.feedus-green-section *,
.brxe-section.bg-primary * {
  color: var(--feedus-white);
}

.feedus-green-section .feedus-line::after,
.feedus-green-section .feedus-row-line::after,
.brxe-section.bg-primary .feedus-line::after {
  background-color: rgba(255, 255, 255, 0.3);
}

.feedus-green-section a:hover {
  color: rgba(255, 255, 255, 0.6);
}

/* ==========================================================================
   18. RESPONSIVE GRID SYSTEM
   ========================================================================== */
.feedus-grid { display: grid; gap: var(--feedus-gap-mobile); }
.feedus-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.feedus-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.feedus-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.feedus-grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media screen and (min-width: 768px) {
  .feedus-grid { gap: var(--feedus-gap-tablet); }
  .feedus-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feedus-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .feedus-grid-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .feedus-grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media screen and (min-width: 1200px) {
  .feedus-grid { gap: var(--feedus-gap-desktop); }
  .feedus-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feedus-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .feedus-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .feedus-grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* ==========================================================================
   19. WOOCOMMERCE OVERRIDES
   ========================================================================== */
.woocommerce .button,
.woocommerce input.button,
.woocommerce a.button {
  font-family: var(--feedus-font-body);
  background-color: var(--feedus-primary);
  color: var(--feedus-white);
  border: 1px solid var(--feedus-primary);
  border-radius: var(--feedus-border-radius-pill);
  padding: 10px 30px;
  font-size: 1rem;
  transition: all var(--feedus-duration-medium) ease;
}

.woocommerce .button:hover,
.woocommerce input.button:hover,
.woocommerce a.button:hover {
  background-color: transparent;
  color: var(--feedus-primary);
}

.woocommerce .price,
.woocommerce .amount {
  color: var(--feedus-black);
  font-weight: var(--fw-bold);
  font-size: var(--fs-xl);
}

.woocommerce .onsale {
  background-color: var(--feedus-primary);
  color: var(--feedus-white);
  border-radius: var(--feedus-border-radius-pill);
}

/* ==========================================================================
   Quantity (네이버 스타일 통합 수량 셀렉터)
   외곽 박스 하나로 [-] [숫자] [+] 묶음. HTML order: input → minus → plus
   → flex order 로 minus(1) → input(2) → plus(3) 재배치
   ========================================================================== */
.woocommerce .quantity,
.quantity {
  display: inline-flex;
  align-items: stretch;
  width: fit-content;
  height: var(--control-height);
  border: var(--control-border-width) solid var(--feedus-border-color);
  border-radius: var(--control-radius);
  background-color: var(--feedus-white);
  overflow: hidden;
}

/* 가운데 숫자 input — 글로벌 input 스타일 무력화 */
.quantity input[type="number"],
.quantity input.qty {
  order: 2;
  width: 52px;
  height: 100%;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  text-align: center;
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--feedus-black);
  -moz-appearance: textfield;
}

.quantity input[type="number"]::-webkit-outer-spin-button,
.quantity input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.quantity input[type="number"]:focus,
.quantity input.qty:focus {
  outline: none;
  border: none;
  box-shadow: none;
}

/* +/- 버튼 공통 */
.quantity .action,
.quantity .plus,
.quantity .minus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 100%;
  background-color: #f7f7f7;
  color: var(--feedus-black);
  cursor: pointer;
  user-select: none;
  border: none;
  transition: background-color var(--feedus-duration-default) ease;
}

.quantity .action:hover,
.quantity .plus:hover,
.quantity .minus:hover {
  background-color: var(--feedus-gray-light);
}

.quantity .action svg,
.quantity .plus svg,
.quantity .minus svg {
  width: 16px;
  height: 16px;
  display: block;
}

/* 좌측 minus → 구분선(우) */
.quantity .action.minus,
.quantity .minus {
  order: 1;
  border-right: 1px solid var(--feedus-border-color);
}

/* 우측 plus → 구분선(좌) */
.quantity .action.plus,
.quantity .plus {
  order: 3;
  border-left: 1px solid var(--feedus-border-color);
}

/* ==========================================================================
   20. PRINT STYLES
   ========================================================================== */
@media print {
  *,
  *::before,
  *::after {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  a,
  a:visited {
    text-decoration: underline;
  }

  #brx-header,
  .feedus-header,
  #brx-footer,
  .feedus-footer {
    display: none;
  }

  #brx-content,
  main {
    padding-top: 0;
  }
}