/* Belcher shop (public, order by inquiry) — reuses the site's tokens and card style from /assets/sub.css */
.shop-main{padding:0 0 clamp(48px,6vw,80px)}
.shop-main .crumb{padding-top:14px;margin-bottom:12px}
.shop-head{margin:0 0 clamp(10px,1.6vw,18px)}
.shop-head h1,.shop-title{font-size:clamp(28px,3.4vw,44px);margin:0}
.shop-list{display:flex;flex-direction:column}
.shop-list .card{display:grid;grid-template-columns:minmax(0,300px) 1fr;gap:clamp(14px,3vw,36px);align-items:center;padding:clamp(10px,1.4vw,16px) 0;border-top:1px solid var(--line)}
.shop-list .card:first-child{border-top:0;padding-top:0}
.shop-list .card:hover{transform:none;box-shadow:none}
.shop-list .card .im{aspect-ratio:4/3}
.shop-list .tx{display:flex;align-items:center;justify-content:space-between;gap:12px}
.shop-list .tx b{font-size:clamp(22px,2.6vw,32px);font-weight:600;color:var(--c)}
.shop-list .go{flex:none;display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border:1px solid var(--line);border-radius:99px;font-size:18px;color:var(--ink);transition:background .3s,color .3s,border-color .3s}
.shop-list .card:hover .go{background:var(--ink);color:#fff;border-color:var(--ink)}
/* 시리즈 페이지: 데스크톱은 사진 왼쪽 + 제목·국가·버튼 오른쪽, 모바일은 제목 → 사진 → 국가 → 버튼 순서 */
.shop-pd{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);grid-template-areas:"gal title" "gal side";grid-template-rows:auto 1fr;column-gap:clamp(24px,5vw,72px);row-gap:14px;align-items:start}
.shop-title{grid-area:title}
.shop-gal{grid-area:gal;min-width:0}
.shop-side{grid-area:side}
.shop-car{position:relative;border-radius:28px;overflow:hidden;background:var(--white);aspect-ratio:1;user-select:none;-webkit-user-select:none}
.shop-car .track{display:flex;height:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch;cursor:grab}
.shop-car .track::-webkit-scrollbar{display:none}
.shop-car .track.drag{scroll-snap-type:none;scroll-behavior:auto;cursor:grabbing}
.shop-car .sl{flex:0 0 100%;height:100%;scroll-snap-align:start;scroll-snap-stop:always}
.shop-car .sl img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;-webkit-user-drag:none}
.shop-car .nav{position:absolute;top:50%;transform:translateY(-50%);width:36px;height:36px;border-radius:99px;border:0;background:rgba(255,255,255,.75);font-size:20px;line-height:1;cursor:pointer;color:var(--ink);opacity:0;transition:opacity .3s}
.shop-car:hover .nav,.shop-car .nav:focus-visible{opacity:1}
.shop-car .prev{left:12px}.shop-car .next{right:12px}
.shop-gal .cap{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 2px 0;min-height:54px}
.shop-gal .cap>span{min-width:0}
.shop-gal .cap b{display:block;font-size:16px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shop-gal .cap small{display:block;font-size:12px;letter-spacing:.08em;color:var(--c,var(--ink2));font-weight:600;margin-top:2px}
.shop-gal .dots{display:flex;gap:6px;padding:8px 2px 0}
.shop-gal .dots button{width:6px;height:6px;border-radius:99px;border:0;background:var(--line);padding:0;cursor:pointer;transition:width .3s,background .3s}
.shop-gal .dots button[aria-current]{background:var(--ink);width:18px}
.lk{flex:none;font-size:14px;font-weight:600;color:var(--ink);border-bottom:1px solid var(--ink);padding:10px 0 1px;white-space:nowrap}
/* 배송 국가: 직접 만든 목록이라 항상 버튼 아래로 열림(휴대폰 기본 선택창은 위로 뜨거나 화면을 확대함) */
.shop-ship{display:flex;align-items:center;gap:14px}
.shop-ship .lbl{flex:none;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2)}
.dd{position:relative;flex:1;max-width:300px}
.dd-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;font:inherit;font-size:16px;font-weight:500;color:var(--ink);background:none;border:0;border-bottom:1px solid var(--ink);border-radius:0;padding:10px 2px;cursor:pointer;text-align:left;-webkit-tap-highlight-color:transparent}
.dd-btn i{flex:none;width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .25s}
.dd.open .dd-btn i{transform:translateY(2px) rotate(-135deg)}
.dd-list{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:20;padding:6px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 14px 40px rgba(30,26,22,.12);max-height:min(360px,60vh);overflow:auto;overscroll-behavior:contain;visibility:hidden;opacity:0;transform:translateY(-4px);transition:opacity .18s,transform .18s,visibility 0s .18s}
.dd.open .dd-list{visibility:visible;opacity:1;transform:none;transition:opacity .18s,transform .18s}
.dd-list button{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:44px;padding:0 12px;border:0;border-radius:10px;background:none;font:inherit;font-size:15px;color:var(--ink);text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
.dd-list button:hover,.dd-list button:focus-visible{background:var(--white);outline:0}
.dd-list button[aria-selected=true]{font-weight:600}
.dd-list button[aria-selected=true]::after{content:"";width:9px;height:5px;border-left:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(-45deg)}
.shop-acts{display:flex;margin-top:18px}
.shop-acts .btn{flex:1;justify-content:center}
@media (prefers-reduced-motion:reduce){.shop-car .track{scroll-behavior:auto}.dd-list,.dd-btn i{transition:none}}
@media (max-width:860px){
  .shop-list .card{grid-template-columns:42% 1fr;gap:14px}
  .shop-pd{grid-template-columns:minmax(0,1fr);grid-template-areas:"title" "gal" "side";grid-template-rows:none;row-gap:12px}
  .shop-car{border-radius:22px;aspect-ratio:4/3}
  .shop-car .nav{display:none}
  .dd{max-width:none}
  .shop-acts{margin-top:16px}
}