/* Feeders — 옵션 리스트 + 카트 모달
   색상·크기는 아래 값만 바꾸면 됨 (버튼색 #1a1a1a, 포인트색 #2e7d32) */

/* ── 옵션 리스트 ─────────────────────────── */
.feeders-options { display: flex; flex-direction: column; gap: 10px; margin: 16px 0; }

.feeders-row {
    display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    padding: 14px 16px; border: 1px solid #e2e2e2; border-radius: 10px; background: #fff;
}
.feeders-row.is-soldout { opacity: .55; }

/* 한 줄: [제품명 — 가격] · 제품명이 주인공, 가격은 보조 정보 */
.feeders-row-info {
    display: flex; flex-direction: row; align-items: baseline; gap: 10px;
    flex: 1 1 auto; min-width: 0;
}
.feeders-row-name {
    flex: 0 1 auto; min-width: 0;
    font-weight: 600; font-size: 17px; color: #1a1a1a; line-height: 1.35;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;   /* 길면 제품명만 말줄임 */
}
/* 입수 배지 — "옵션 1개 = 10마리" 인 상품(냉동마우스)에서 사이즈 옆에 붙는다.
   가격보다 먼저 읽혀야 오해가 안 생기므로 이름 바로 옆, 가격 앞에 둔다.
   말줄임되면 안 되는 정보라 flex-shrink 는 0. */
.feeders-row-pack {
    flex: 0 0 auto; white-space: nowrap;
    align-self: center;
    padding: 2px 7px; border-radius: 4px;
    background: rgba(var(--feedus-primary-rgb, 74, 92, 16), .09);
    font-size: 12px; font-weight: 700; line-height: 1.5;
    color: var(--feedus-primary, #4a5c10);
    letter-spacing: -.01em;
}

.feeders-row-price {
    flex: 0 0 auto; white-space: nowrap;
    font-size: 15px; font-weight: 400; color: #666;
}
.feeders-row-price del { color: #aaa; }
.feeders-row-price ins { text-decoration: none; }

/* feedus-pages.css 19. PRODUCT DETAIL 의 단가 규칙이 !important 로
   .woocommerce-Price-amount 를 데스크탑 24px / 모바일 22px · 빨강으로 키운다.
   옵션 행의 가격은 보조 정보라 그 규칙에서 되돌린다 (상단 대표 가격은 그대로 둠). */
body.single-product .feeders-row-price,
body.single-product .feeders-row-price .woocommerce-Price-amount,
body.single-product .feeders-row-price .woocommerce-Price-amount bdi,
body.single-product .feeders-row-price .woocommerce-Price-amount strong,
body.single-product .feeders-row-price .woocommerce-Price-amount .woocommerce-Price-currencySymbol {
    font-size: 15px !important;
    font-weight: 400 !important;
    color: #666 !important;
    line-height: 1.3 !important;
}
body.single-product .feeders-row-price del,
body.single-product .feeders-row-price del .woocommerce-Price-amount,
body.single-product .feeders-row-price del .woocommerce-Price-amount bdi,
body.single-product .feeders-row-price del .woocommerce-Price-amount .woocommerce-Price-currencySymbol {
    color: #aaa !important;
}

/* 구매 영역 — 수량 박스가 남는 가로폭을 먹고 늘어나야 해서 flex-grow 를 준다.
   데스크탑에서는 제품명이 주인공이라 max-width 로 상한을 두고, 모바일(≤480)
   에서는 상한을 풀어 한 줄 전체를 쓴다. */
.feeders-row-buy {
    display: flex; align-items: center; gap: 8px;
    flex: 1 1 auto; min-width: 0; max-width: 320px;
    justify-content: flex-end;
}

/* 수량 박스 — 라인은 "외곽 1줄 + 좌우 구분선 1줄" 뿐이다.
   NOTE: 안쪽 input 은 feedus-global.css / feedus-pages.css 의 `input[type="number"]`
         규칙(테두리·라운드·포커스 그림자)을 그대로 물려받아 박스 라인과 겹쳐 보였다.
         타입 셀렉터(0,1,1)보다 특이도를 올린 `.feeders-qty-box input.feeders-qty`(0,2,1)
         로 전부 눌러 중첩 라인 / 내부 라운드 / 포커스 그림자를 제거한다.
   +/- 버튼은 박스 높이와 같은 정사각형으로 고정해 터치 영역을 확보한다. */
.feeders-qty-box {
    --feeders-ctl-h: 42px;              /* 박스 높이 = +/- 버튼 한 변 */
    display: flex; align-items: stretch;
    flex: 1 1 auto; min-width: 0;       /* 남는 폭은 숫자 영역이 가져간다 */
    height: var(--feeders-ctl-h);
    border: 1px solid #ddd; border-radius: 8px;
    background: #fff; overflow: hidden;
}
.feeders-qty-btn {
    flex: 0 0 auto;
    width: var(--feeders-ctl-h); height: var(--feeders-ctl-h);
    aspect-ratio: 1 / 1;                /* 정사각 비율 유지 */
    display: flex; align-items: center; justify-content: center;
    border: 0; border-radius: 0; box-shadow: none;
    background: #f6f6f6; color: #333;
    font-size: 18px; line-height: 1; text-align: center;
    padding: 0; margin: 0; cursor: pointer;
    transition: background .15s;
}
.feeders-qty-btn:hover { background: #ececec; }
.feeders-qty-btn:focus,
.feeders-qty-btn:focus-visible { outline: none; box-shadow: none; }

.feeders-qty,
.feeders-qty-box input.feeders-qty {
    flex: 1 1 auto;                     /* +/- 를 뺀 나머지 전부 = 반응형 full width */
    width: 100%; min-width: 0; max-width: none;
    height: var(--feeders-ctl-h);
    padding: 0; margin: 0;
    border: 0;
    border-left: 1px solid #ddd;        /* 구분선은 여기 한 줄만 */
    border-right: 1px solid #ddd;
    border-radius: 0;
    box-shadow: none;
    background: #fff;
    text-align: center; font-size: 15px; font-weight: 600; line-height: 1;
    color: #1a1a1a;
    -moz-appearance: textfield; appearance: textfield;
}
.feeders-qty-box input.feeders-qty:focus {
    outline: none; box-shadow: none;
    border-left-color: #ddd; border-right-color: #ddd;
}
.feeders-qty::-webkit-outer-spin-button,
.feeders-qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.feeders-add {
    height: 42px; padding: 0 18px; border: 0; border-radius: 8px; cursor: pointer;
    background: #1a1a1a; color: #fff; font-size: 14px; font-weight: 600; white-space: nowrap;
    flex-shrink: 0; transition: opacity .15s;
}
.feeders-add:hover { opacity: .85; }
.feeders-add:disabled { opacity: .5; cursor: default; }

/* wrap 된 행 — 담기 영역이 두 번째 줄로 내려간 경우에만 feeders-options.js 가
   .is-stacked 를 달아준다. 폭 상한만 풀면 그 줄에 이 영역 하나뿐이므로 행 전체 폭을
   쓰고, 남는 폭은 기본 규칙대로 수량 박스가 흡수한다(담기 버튼은 내용 폭 그대로,
   우측 끝은 행 우측 = 가격 우측 정렬선). 모바일(≤480)과 같은 모양이 된다.
   한 줄에 다 들어가는 행과 모바일(원래부터 한 줄 전체를 쓰는 레이아웃)은
   건드리지 않는다 — 그래서 min-width:481px 로 가둔다. */
@media (min-width: 481px) {
    .feeders-row.is-stacked .feeders-row-buy { width: 100%; max-width: none; }
}

/* ── 수량 필(pill) 탭 — 수량 × 크기 2축 상품(귀뚜라미 등) ──
   미선택 = 흰 배경 + 1.5px 컬러 보더 / 선택 = 컬러 채움 + 흰 텍스트.
   가장 큰 수량(1,000마리)이 프라이머리, 나머지는 블랙 (PHP 가 data-tone 부여). */
.feeders-qty-tabs { display: flex; gap: 8px; }

.feeders-qty-tab {
    --feeders-tab: #1a1a1a;
    flex: 0 1 auto; min-width: 132px;
    /* 테마의 button 규칙이 text-align 을 왼쪽으로 돌려놔서 라벨이 쏠렸다.
       inline-flex 로 가로·세로 모두 가운데 고정한다. */
    display: inline-flex; align-items: center; justify-content: center; text-align: center;
    height: 44px; padding: 0 24px;
    border: 1.5px solid var(--feeders-tab);
    border-radius: 999px;
    background: #fff; color: var(--feeders-tab);
    font-family: inherit; font-size: 17px; font-weight: 700; line-height: 1;
    white-space: nowrap; cursor: pointer;
    transition: background .15s, color .15s;
}
.feeders-qty-tab[data-tone="primary"] { --feeders-tab: var(--feedus-primary, #4a5c10); }
.feeders-qty-tab:hover { background: rgba(0, 0, 0, .04); }
.feeders-qty-tab.is-active,
.feeders-qty-tab.is-active:hover { background: var(--feeders-tab); color: #fff; }

/* 서비스 문구 — 탭 전환으로 문구가 바뀌거나 비어도 아래 리스트가 밀리지 않게 높이 고정 */
.feeders-qty-note {
    min-height: 18px; margin: -2px 0 2px;
    font-size: 13px; font-weight: 600; line-height: 1.4;
    color: var(--feedus-primary, #4a5c10);
}

/* 탭 레이아웃의 품절 — 탭에 따라 재고가 달라져 두 상태를 모두 그려두고 여기서 토글한다 */
.feeders-options--tabs .feeders-row.is-soldout .feeders-qty-box,
.feeders-options--tabs .feeders-row.is-soldout .feeders-add,
.feeders-options--tabs .feeders-row:not(.is-soldout) .feeders-soldout-badge { display: none; }

/* 품절 배지를 구매 컨트롤과 같은 높이로 잡아 탭 전환 시 행 높이가 변하지 않게 한다.
   수량 박스의 실제 높이는 --feeders-ctl-h(42px) + 상하 보더 2px = 44px. */
.feeders-options--tabs .feeders-soldout-badge {
    display: flex; align-items: center;
    height: 44px;
}

@media (max-width: 480px) {
    .feeders-qty-tab { flex: 1 1 0; min-width: 0; padding: 0 12px; }
    .feeders-options--tabs .feeders-soldout-badge { height: 46px; }   /* 모바일 컨트롤 높이(44+보더 2) */
}

.feeders-soldout-badge { font-size: 13px; font-weight: 600; color: #c0392b; }
.feeders-row-error { width: 100%; margin: 6px 0 0; font-size: 13px; color: #c0392b; }

/* ── 모달 ─────────────────────────────────── */
body.feeders-modal-open { overflow: hidden; }

.feeders-modal-overlay {
    position: fixed; inset: 0; z-index: 99999;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, .55); padding: 20px;
}
.feeders-modal-overlay[hidden] { display: none; }

.feeders-modal {
    position: relative; display: flex; flex-direction: column;
    width: 100%; max-width: 440px; max-height: 82vh;
    background: #fff; border-radius: 14px; overflow: hidden;
    animation: feedersPop .18s ease-out;
}
@keyframes feedersPop {
    from { transform: translateY(8px); opacity: 0; }
    to   { transform: none; opacity: 1; }
}

/* 닫기 X — 모달 우상단. 크기/글리프/색은 feedus-global.css 의
   `닫기(X) 버튼 공통 베이스` 토큰(--feedus-close-*)을 그대로 쓴다.
   (이 파일은 global 뒤에 로드될 수 있어 토큰을 직접 참조한다) */
.feeders-modal-x {
    position: absolute; top: 4px; right: 4px;
    width: var(--feedus-close-size, 32px); height: var(--feedus-close-size, 32px);
    display: flex; align-items: center; justify-content: center;
    margin: 0; padding: 0; border: 0; background: transparent;
    border-radius: var(--feedus-close-radius, 50%);
    font-size: var(--feedus-close-glyph, 24px); line-height: 1; cursor: pointer;
    color: var(--feedus-close-color, #8a8a8a); z-index: 2;
    transition: color .2s ease, background-color .2s ease;
}
.feeders-modal-x:hover {
    color: var(--feedus-close-color-hover, #1a1a1a);
    background-color: rgba(0, 0, 0, .06);
}

/* 상단 고정 영역 — 썸네일 위에 체크 오버레이, 그 아래 안내문구
   체크(1행1열)와 썸네일(1행1열)을 같은 grid 셀에 겹쳐 마크업 순서 그대로 레이어링 */
.feeders-modal-head {
    flex-shrink: 0; display: grid; grid-template-columns: auto;
    justify-items: center; align-content: start; text-align: center; gap: 10px;
    /* 상하 여백만 확대 (16 → 24px) — 좌우 20px 은 본문/목록과 맞춰 그대로 둔다 */
    padding: 24px 20px; border-bottom: 1px solid #eee;
}
.feeders-check {
    grid-column: 1; grid-row: 1; z-index: 1;
    width: 76px; height: 76px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(74, 92, 16, .55);
    background: color-mix(in srgb, var(--feedus-primary, #4a5c10) 55%, transparent);
    color: #fff; font-size: 32px; font-weight: 700; line-height: 1;
}
.feeders-modal-thumb {
    grid-column: 1; grid-row: 1;
    width: 76px; height: 76px; border-radius: 14px;
    overflow: hidden; background: #f4f4f4;
}
.feeders-modal-thumb img {
    width: 76px !important; height: 76px !important; max-width: 76px;
    border-radius: 14px; object-fit: cover; display: block;
}
.feeders-modal-msg {
    grid-column: 1; grid-row: 2;
    margin: 0; font-size: 17px; line-height: 1.5; text-align: center; font-weight: 400;
}
.feeders-modal-msg strong { font-weight: 700; }

/* 장바구니 영역 — 목록만 스크롤, 제목·합계는 고정 */
.feeders-modal-cartwrap {
    flex: 1 1 auto; min-height: 0;
    display: flex; flex-direction: column;
    padding: 14px 20px 4px;
}
.feeders-modal-carttitle { flex-shrink: 0; margin: 0 0 10px; font-size: 13px; font-weight: 700; color: #333; }
.feeders-cart-count { color: #888; font-weight: 500; }

.feeders-cart-list {
    flex: 1 1 auto; min-height: 0; overflow-y: auto;
    display: flex; flex-direction: column; gap: 6px; padding-right: 4px;
}

.feeders-cart-item { display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: 8px; }
.feeders-cart-item.is-just-added { background: #eaefd8; border-radius: 12px; }
.feeders-cart-item-thumb {
    flex-shrink: 0; width: 44px; height: 44px; border-radius: 6px;
    overflow: hidden; background: #f4f4f4;
}
.feeders-cart-item-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.feeders-cart-item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.feeders-cart-item-name { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feeders-cart-item-meta { font-size: 12px; color: #888; }

/* 항목 가격 — 상품명과 동일하게 14px/600 고정
   NOTE: feedus-pages.css 의 `body.single-product .woocommerce-Price-amount`(22~24px !important)
         가 우선하므로 #feeders-modal (ID) 로 특이도를 올려 눌러준다. */
.feeders-cart-item-price { flex-shrink: 0; font-size: 14px; font-weight: 600; }
#feeders-modal .feeders-cart-item-price,
#feeders-modal .feeders-cart-item-price .amount,
#feeders-modal .feeders-cart-item-price .amount strong,
#feeders-modal .feeders-cart-item-price .amount bdi,
#feeders-modal .feeders-cart-item-price .woocommerce-Price-amount,
#feeders-modal .feeders-cart-item-price .woocommerce-Price-amount bdi,
#feeders-modal .feeders-cart-item-price .woocommerce-Price-amount strong,
#feeders-modal .feeders-cart-item-price .woocommerce-Price-currencySymbol,
#feeders-modal .feeders-cart-item-price bdi {
    font-size: 14px !important; font-weight: 600 !important;
    line-height: 1.4 !important; color: #222 !important;
}

/* 합계 — 팝업 안에서 유일하게 강조되는 가격 */
.feeders-cart-total {
    flex-shrink: 0; padding: 10px 6px; margin-top: 4px;
    border-top: 1px solid #eee; font-size: 14px; text-align: right;
}
#feeders-modal .feeders-cart-total strong,
#feeders-modal .feeders-cart-total .amount,
#feeders-modal .feeders-cart-total .amount strong,
#feeders-modal .feeders-cart-total .amount bdi,
#feeders-modal .feeders-cart-total .woocommerce-Price-amount,
#feeders-modal .feeders-cart-total .woocommerce-Price-amount bdi,
#feeders-modal .feeders-cart-total .woocommerce-Price-amount strong,
#feeders-modal .feeders-cart-total .woocommerce-Price-currencySymbol,
#feeders-modal .feeders-cart-total bdi {
    font-size: 16px !important; font-weight: 700 !important;
    line-height: 1.4 !important;
    color: var(--feedus-primary, #4a5c10) !important;
}

/* 하단 버튼 */
.feeders-modal-foot { flex-shrink: 0; display: flex; gap: 8px; padding: 12px 20px 20px; }
.feeders-btn {
    flex: 1; height: 44px; display: flex; align-items: center; justify-content: center;
    border-radius: 10px; font-size: 14px; font-weight: 700; cursor: pointer; text-decoration: none;
}
.feeders-btn-ghost { border: 1px solid #ddd; background: #fff; color: #333; }
.feeders-btn-solid { border: 0; background: #1a1a1a; color: #fff !important; }

@media (max-width: 480px) {
    .feeders-row { align-items: center; }
    .feeders-row-info { width: 100%; }
    .feeders-row-buy { width: 100%; justify-content: flex-end; }
    /* 모바일은 터치 타깃 44px 확보 (버튼은 그대로 정사각) + 폭 상한 해제 */
    .feeders-row-buy { max-width: none; }
    .feeders-qty-box { --feeders-ctl-h: 44px; }
    .feeders-add { height: 44px; }
}