/* 쇼핑의 상품·장바구니·주문 내역 쪽, 새 디자인 (ShopDetail, ShopCart, ShopMyOrders 가
   새 디자인일 때 싣는다). 2026년 10월. 각 쪽은 예전 그대로 Shop.css 로 그려지고, 여기서
   폭과 여백, 카드, 단추, 글꼴만 새 모습으로 바꾼다. */

.shop-wrap { box-sizing: border-box; max-width: 1320px; margin: 0 auto !important; padding: 0 16px 40px !important; font-family: var(--v2-font); color: var(--v2-text); }
.shop-wrap a { text-decoration: none; }

/* 길 (쇼핑 › Health) */
.shop-wrap .shop-crumb { margin: 20px 4px 14px; font-size: 13px; color: var(--v2-muted); }
.shop-wrap .shop-crumb a { color: var(--v2-muted); }
.shop-wrap .shop-crumb a:hover { color: var(--v2-primary); }

/* ---------- 상품 한 개 ---------- */
.shop-wrap .shop-detail { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 40px; align-items: start; overflow: visible; margin: 0 0 24px;
    padding: 28px; border: 1px solid var(--v2-line); border-radius: 18px; background: #fff; box-shadow: 0 4px 18px rgba(31, 36, 48, .04); }
.shop-wrap .shop-detail .clearBoth { display: none; }
.shop-wrap .shop-detail .shop-gallery, .shop-wrap .shop-detail .shop-info { float: none; width: auto; min-width: 0; }
.shop-wrap .shop-detail .shop-gallery { display: flex; gap: 14px; align-items: flex-start; overflow: visible; }
.shop-wrap .shop-detail .shop-thumbs-v { float: none; flex: 0 0 72px; width: 72px; display: flex; flex-direction: column; gap: 8px; }
.shop-wrap .shop-detail .shop-thumbs-v a { margin: 0; border: 2px solid var(--v2-line); border-radius: 10px; overflow: hidden; background: #fff; }
.shop-wrap .shop-detail .shop-thumbs-v a.is-on { border-color: var(--v2-primary); }
.shop-wrap .shop-detail .shop-main-image { flex: 1; min-width: 0; margin: 0 !important; border: 1px solid var(--v2-line); border-radius: 16px; overflow: hidden; background: var(--v2-bg); min-height: 320px; }
.shop-wrap .shop-detail .shop-main-image img { display: block; margin: 0 auto; max-height: 560px; object-fit: contain; }
.shop-wrap .shop-detail .shop-nav { width: 40px; height: 40px; margin-top: -20px; border-radius: 50%; background: rgba(255, 255, 255, .9); box-shadow: 0 2px 8px rgba(31, 36, 48, .15);
    color: var(--v2-navy); font-size: 28px; line-height: 38px; }
.shop-wrap .shop-detail .shop-prev { left: 10px; }
.shop-wrap .shop-detail .shop-next { right: 10px; }
.shop-wrap .shop-detail .shop-nav:hover { color: var(--v2-primary); }

.shop-wrap .shop-detail h1 { margin: 6px 0 8px; font-family: var(--v2-font); font-size: 26px; font-weight: 900; line-height: 1.35; color: var(--v2-navy); letter-spacing: -.3px; }
.shop-wrap .shop-detail .shop-sub { margin: 0 0 18px; font-size: 14px; line-height: 1.6; color: var(--v2-muted); }
.shop-wrap .shop-detail .shop-detail-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0 0 6px; padding: 16px 0; border-top: 1px solid var(--v2-line); border-bottom: 1px solid var(--v2-line);
    font-size: 32px; font-weight: 900; color: var(--v2-pink); }
.shop-wrap .shop-detail .shop-was { margin: 0; font-size: 16px; color: #a3a9b8; }
.shop-wrap .shop-detail .shop-tax-note { margin-left: auto; padding: 3px 10px; border-radius: 12px; background: var(--v2-bg); font-size: 12px; font-weight: 700; color: var(--v2-muted); }
.shop-wrap .shop-detail .shop-stock { display: inline-block; margin: 12px 0 18px; padding: 4px 12px; border-radius: 12px; background: #e3f6ea; font-size: 12.5px; font-weight: 700; color: #15803d; }
.shop-wrap .shop-detail .shop-stock.is-out { background: #fdeaea; color: #dc2626; }
.shop-wrap .shop-buybox { margin: 0 0 18px; }
.shop-wrap .shop-buy-row { display: flex; gap: 10px; align-items: stretch; }
.shop-wrap .shop-qty { min-width: 76px; height: 50px; padding: 0 12px; border: 1px solid var(--v2-line); border-radius: 12px; background: #fff; font: inherit; font-size: 15px; }
.shop-wrap .shop-buy-button { flex: 1; height: 50px; padding: 0 24px; border: 0; border-radius: 12px; background: var(--v2-primary) !important; color: #fff !important;
    font-family: var(--v2-font); font-size: 16px; font-weight: 700; cursor: pointer; box-shadow: 0 8px 18px rgba(107, 63, 224, .22); }
.shop-wrap .shop-buy-button:hover { background: #5a30c8 !important; }
.shop-wrap .shop-buy-button.is-off { display: inline-flex; align-items: center; justify-content: center; background: #e6e8ef !important; color: var(--v2-muted) !important; box-shadow: none; }
.shop-wrap .shop-buy-msg { margin-top: 10px; padding: 10px 14px; border-radius: 10px; font-size: 13.5px; }
.shop-wrap .shop-back a { display: inline-flex; align-items: center; gap: 4px; padding: 8px 14px; border: 1px solid var(--v2-line); border-radius: 10px; font-size: 13.5px; font-weight: 700; color: #4b5162; }
.shop-wrap .shop-back a:hover { border-color: var(--v2-primary); color: var(--v2-primary); }

/* 상품 설명 */
.shop-wrap .shop-section { margin: 0 0 24px; padding: 26px 28px; border: 1px solid var(--v2-line); border-radius: 18px; background: #fff; }
.shop-wrap .shop-section-title { margin: 0 0 16px; padding: 0 0 0 12px; border: 0; border-left: 4px solid var(--v2-primary); font-family: var(--v2-font); font-size: 19px; font-weight: 900; color: var(--v2-navy); }
.shop-wrap .shop-description { font-size: 15px; line-height: 1.8; color: #2b3040; }
.shop-wrap .shop-description img { max-width: 100%; height: auto; border-radius: 10px; }

/* ---------- 장바구니, 주문 내역 ---------- */
.shop-wrap .shop-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 24px 0 18px !important; }
.shop-wrap .shop-head h1 { margin: 0; padding-left: 12px; border-left: 4px solid var(--v2-primary); font-family: var(--v2-font); font-size: 24px; font-weight: 900; color: var(--v2-navy); }
.shop-wrap .shop-head .shop-cart-link { position: static; margin: 0; padding: 8px 16px; border: 1px solid var(--v2-line); border-radius: 20px; background: #fff; font-size: 13.5px; font-weight: 700; color: #4b5162; }
.shop-wrap .shop-head .shop-cart-link:hover { border-color: var(--v2-primary); color: var(--v2-primary); }
.shop-wrap .cart-line, .shop-wrap .myorder { border-radius: 14px; }
.shop-wrap .cart-list, .shop-wrap .cart-sumbox, .shop-wrap .cart-form-block, .shop-wrap .myorder, .shop-wrap .shop-done {
    border: 1px solid var(--v2-line) !important; border-radius: 16px; background: #fff; }
.shop-wrap .cart-list { padding: 4px 20px; }
.shop-wrap .cart-sumbox, .shop-wrap .cart-form-block { padding: 20px; }
.shop-wrap .cart-name { font-weight: 700; color: var(--v2-text); }
.shop-wrap .cart-name:hover { color: var(--v2-primary); }
.shop-wrap .cart-pic img, .shop-wrap .myorder-pic img { border-radius: 10px; }
.shop-wrap .cart-sum-row.is-total b { color: var(--v2-pink); }
.shop-wrap .cart-field input[type="text"], .shop-wrap .cart-field textarea { border-radius: 10px !important; border: 1px solid var(--v2-line) !important; }
.shop-wrap .cart-field input[type="text"]:focus, .shop-wrap .cart-field textarea:focus { border-color: var(--v2-primary) !important; box-shadow: 0 0 0 3px var(--v2-primary-soft); }
.shop-wrap .cart-notice { border-radius: 12px; }
.shop-wrap .cart-submit input, .shop-wrap .cart-submit .shop-buy-button, .shop-wrap .cart-mini-button { border-radius: 12px !important; }
.shop-wrap .cart-mini-button { background: var(--v2-primary-soft) !important; color: var(--v2-primary) !important; border-color: #d9cdfa !important; }
.shop-wrap .shop-done-links a { border-radius: 12px; }

@media (max-width: 900px) {
    .shop-wrap .shop-detail { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 18px; }
    .shop-wrap .shop-detail .shop-gallery { flex-direction: column-reverse; }
    /* the small pictures in one row that slides - stretched to the column (flex-start let the row grow as wide as its pictures) */
    .shop-wrap .shop-detail .shop-thumbs-v { flex-direction: row; width: auto; flex-basis: auto; overflow-x: auto; align-self: stretch; max-width: 100%; scrollbar-width: none; }
    .shop-wrap .shop-detail .shop-thumbs-v::-webkit-scrollbar { display: none; }
    .shop-wrap .shop-detail .shop-thumbs-v a { flex: 0 0 64px; }
}