/* ===== 오쓰 스토어 전용 스킨 — 무신사 톤 (사장님 지시: 스토어 들어왔을 때만 완전 다른 느낌) =====
   원리: 마크업·클래스는 기존 그대로 두고, body.store-page 밑에서만 모양을 갈아끼운다.
   홈·구매대행 등 다른 화면은 이 파일을 불러오지 않으므로 전혀 영향 없음.
   무신사 실측값 기준: 카드 테두리·그림자 없음 / 사진 각짐(0px) / 간격 4px / 흑백 + 빨강은 할인율만. */

body.store-page {
  font-family: "Pretendard Variable", Pretendard, "Noto Sans KR", sans-serif;
  background: #fff;
  color: #000;
}

/* ---- 상단 검정 헤더 ---- */
.sthead-in { max-width: 1200px; margin: 0 auto; padding: 0 16px; height: 52px;
  display: flex; align-items: center; gap: 14px; }
.sthead-logo { color: #fff; font-size: 19px; font-weight: 900; letter-spacing: .02em;
  text-decoration: none; flex: none; }
.sthead-cart { margin-left: auto; color: #fff; text-decoration: none; display: flex;
  align-items: center; gap: 6px; font-size: 13px; font-weight: 600; }
.sthead-cart .n { background: #fff; color: #000; font-size: 11px; font-weight: 800;
  border-radius: 999px; padding: 1px 7px; min-width: 20px; text-align: center; }
.sthead-cart .n:empty { display: none; }
.sthead-cart + .sthead-cart { margin-left: 10px; }   /* 관리자 [상품등록]이 장바구니 바로 왼쪽에 (둘 다 auto면 사이가 벌어짐) */

/* ---- 카테고리 칩 + 정렬 줄 ---- */
.stm-bar { position: sticky; top: 52px; z-index: 49; background: #fff; border-bottom: 1px solid #f0f0f0; }
.stm-bar-in { max-width: 1200px; margin: 0 auto; padding: 10px 16px;
  display: flex; align-items: center; gap: 8px; }
/* 칩 줄 — 옆으로 더 있으면 오른쪽을 흐리게 해서 "더 있음"을 알린다(fadeChips 가 .more 를 붙임) */
.stm-chips-wrap { position: relative; flex: 1; min-width: 0; }
.stm-chips-wrap::after { content: ""; position: absolute; top: 0; right: 0; width: 34px; height: 100%;
  background: linear-gradient(to right, rgba(255,255,255,0), #fff); pointer-events: none;
  opacity: 0; transition: opacity .2s; }
.stm-chips-wrap.more::after { opacity: 1; }
.stm-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.stm-chips::-webkit-scrollbar { display: none; }
.stm-chips button { flex: none; font-family: inherit; font-size: 13px; color: #000;
  background: #fff; border: 1px solid #e0e0e0; border-radius: 4px; padding: 6px 12px;
  cursor: pointer; height: 30px; line-height: 1; }
.stm-chips button.on { background: #000; color: #fff; border-color: #000; font-weight: 700; }
.stm-sort { flex: none; font-family: inherit; font-size: 13px; color: #000; border: none;
  background: #fff; cursor: pointer; padding: 6px 2px; font-weight: 600; }

/* ---- 목록 상단 (개수) ---- */
.stm-head { max-width: 1200px; margin: 0 auto; padding: 18px 16px 10px;
  display: flex; align-items: baseline; gap: 10px; }
.stm-head h1 { font-size: 18px; font-weight: 800; margin: 0; }
.stm-head .cnt { font-size: 13px; color: #8a8a8a; }
.stm-note { font-size: 12px; color: #8a8a8a; margin: 0 0 0 auto; }

/* ---- 상품 격자 — 무신사식: 붙여서, 평평하게 ---- */
.store-page .container { max-width: 1200px; }
.store-page .section { padding: 0 0 60px; }
.store-page .st-grid { grid-template-columns: repeat(5, 1fr); gap: 26px 4px; }
@media (max-width: 1000px) { .store-page .st-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .store-page .st-grid { grid-template-columns: repeat(2, 1fr); gap: 20px 3px; } }

/* ---- 카드: 테두리·그림자·라운드 전부 제거, 사진이 주인공 ---- */
.store-page .oss-prod { background: transparent; border: none; border-radius: 0; box-shadow: none; }
.store-page .oss-prod:hover { transform: none; box-shadow: none; }
.store-page .oss-prod:hover .pn { text-decoration: underline; }
.store-page .oss-prod .pimg { display: block; position: relative; }
/* 사진은 자르지 않고(contain) 흰 바탕에 통째로 — 상품컷이 잘리면 싸구려처럼 보인다 */
.store-page .oss-prod img, .store-page .oss-prod .sp-noimg { border-radius: 0; background: #fff; object-fit: contain; }
.store-page .oss-prod .sp-noimg { display: flex; align-items: center; justify-content: center;
  width: 100%; aspect-ratio: 1/1; color: #999; font-size: 12px; }
.store-page .oss-prod .pi { padding: 8px 2px 0; }
.store-page .oss-prod .pb { font-size: 11px; font-weight: 700; color: #000; }
.store-page .oss-prod .pn { font-size: 13px; font-weight: 400; color: #000; line-height: 1.4;
  margin: 3px 0 5px; }
.store-page .oss-prod .pp { font-size: 14px; font-weight: 700; color: #000; }
.store-page .oss-prod .sp-sale { font-style: normal; color: #f31110; margin-right: 2px; }
.store-page .oss-prod .sp-unit { font-size: 11px; font-weight: 400; color: #8a8a8a; }
.store-page .oss-prod .sp-list { font-size: 11px; color: #aaa; font-weight: 400; margin-left: 4px; }
.store-page .sp-bdg { background: #000; color: #fff; border-radius: 0; font-size: 10px;
  letter-spacing: .08em; top: 0; left: 0; padding: 3px 8px; }
.store-page .sp-over { position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; background: rgba(255,255,255,.55); color: #000;
  font-size: 14px; font-weight: 800; letter-spacing: .1em; }
.store-page .sp-stk { color: #f31110; font-weight: 600; font-size: 11px; margin: 3px 0 0; }
.store-page .sp-sold { opacity: 1; }
.store-page .sp-sold .pi { opacity: .45; }

/* ---- 버튼·수량·플로팅도 각지게 ---- */
.store-page .st-btn { border-radius: 4px; font-weight: 700; }
.store-page .st-btn-main { background: #000; color: #fff; box-shadow: none; }
.store-page .st-btn-main:hover { background: #222; }
.store-page .st-btn-ghost { background: #fff; color: #000; border: 1px solid #d0d0d0; }
.store-page .st-btn-ghost:hover { background: #f7f7f7; }
.store-page .st-qty button, .store-page .st-qty input { border-radius: 4px; border-color: #d0d0d0; }
.store-page .st-fab { background: #000; box-shadow: 0 8px 20px rgba(0,0,0,.28); border-radius: 4px; }
.store-page .st-fab .st-fab-n { background: #fff; color: #000; }
.store-page .st-toast { border-radius: 4px; background: #111; }
/* 담기 토스트 안의 '장바구니 보기' 버튼 — 메시지가 짧으니 한 줄로 고정(꺾이면 3~4줄로 접혀 지저분) */
.st-toast.has-act { display: flex; align-items: center; gap: 14px; white-space: nowrap; }
.st-toast-act { color: #fff; font-weight: 800; text-decoration: underline; white-space: nowrap; }

/* ---- 상세 페이지 ---- */
.store-page .st-gal .main { border-radius: 0; border: 1px solid #eee; background: #f4f4f4; }
.store-page .st-gal .thumbs img { border-radius: 0; border-color: #e0e0e0; }
.store-page .st-gal .thumbs img.on { border-color: #000; }
.store-page .st-info h1 { font-size: 20px; font-weight: 700; }
.store-page .st-brand { font-size: 13px; font-weight: 700; color: #000; margin: 0 0 8px;
  padding-bottom: 8px; border-bottom: 1px solid #f0f0f0; }
.store-page .st-price { font-size: 24px; }
.store-page .st-price .sale { color: #f31110; margin-right: 6px; }
.store-page .st-meta { color: #555; font-size: 13px; }
.store-page .st-desc { border-top: 1px solid #f0f0f0; color: #333; }

/* ---- 결제(장바구니) ---- */
.store-page .page-hero { background: #fff; padding: 26px 0 6px; }
.store-page .page-hero h1 { font-size: 20px; color: #000; }
.store-page .page-hero p { color: #8a8a8a; font-size: 13px; }

/* ---- 배송·교환환불·문의 접이식 안내 ---- */
.store-page .st-acc { margin-top: 26px; border-top: 1px solid #eee; }
.store-page .st-acc details { border-bottom: 1px solid #eee; }
.store-page .st-acc summary { list-style: none; cursor: pointer; padding: 15px 2px;
  font-size: 14px; font-weight: 700; color: #000; position: relative; }
.store-page .st-acc summary::-webkit-details-marker { display: none; }
.store-page .st-acc summary::after { content: "＋"; position: absolute; right: 4px; top: 14px;
  font-weight: 400; color: #999; }
.store-page .st-acc details[open] summary::after { content: "－"; }
.store-page .st-acc details > div { padding: 0 2px 16px; font-size: 13px; line-height: 1.85; color: #555; }
.store-page .st-acc a { color: #000; }

/* ---- 사진 크게 보기 ---- */
.st-lb { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,.92);
  display: flex; align-items: center; justify-content: center; }
.st-lb[hidden] { display: none; }
.st-lb img { max-width: 94vw; max-height: 88vh; object-fit: contain; }
.st-lb button { position: absolute; background: rgba(255,255,255,.14); color: #fff; border: none;
  cursor: pointer; font-family: inherit; border-radius: 4px; }
.st-lb-x { top: 14px; right: 14px; width: 42px; height: 42px; font-size: 17px; }
.st-lb-p, .st-lb-n { top: 50%; transform: translateY(-50%); width: 46px; height: 64px; font-size: 30px; line-height: 1; }
.st-lb-p { left: 10px; } .st-lb-n { right: 10px; }
.st-lb button:hover { background: rgba(255,255,255,.28); }
.st-lb-c { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
  color: #fff; font-size: 12.5px; letter-spacing: .06em; }

/* ---- 최근 본 상품 (가로 한 줄) ---- */
.store-page .st-recent { margin-top: 54px; padding-top: 26px; border-top: 1px solid #eee; }
.store-page .st-recent[hidden] { display: none; }
.store-page .st-recent h2 { font-size: 15px; font-weight: 800; margin: 0 0 14px; }
.store-page .st-recent-row { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 6px;
  scrollbar-width: thin; }
.store-page .st-recent-row .oss-prod { flex: 0 0 132px; width: 132px; }
.store-page .st-recent-row .pn { font-size: 12px; }
.store-page .st-recent-row .pp { font-size: 12.5px; }
.store-page .st-recent-row .sp-stk { display: none; }

/* ---- 구매 버튼 한 줄 [구매하기][장바구니][링크복사] — 모바일도 본문 버튼 사용 (2026-08-26 사장님 지시) ---- */
.store-page .st-buy { flex-wrap: nowrap; gap: 8px; }
.store-page .st-buy .st-btn { flex: 1; white-space: nowrap; padding-left: 8px; padding-right: 8px; }
/* ④ 수량 +/- 파란 느낌 + 숫자칸 가운데 정렬 (데스크톱·모바일 공통) */
.store-page .st-qty button { color: #2f6df6; border-color: #BCD2FF; background: #F5F8FF; font-weight: 700; }
.store-page .st-qty input { text-align: center; }

/* ---- 푸터: 법정 표시는 남기되 무신사 톤(밝은 회색·조용하게)으로 ---- */
.store-page .footer-sitemap { display: none; }   /* 주황 사이트맵 바는 스토어에선 뺌 */
.store-page .site-footer { background: #fafafa; border-top: 1px solid #eee; }
.store-page .site-footer, .store-page .site-footer p, .store-page .site-footer a,
.store-page .site-footer .footer-logo, .store-page .site-footer .footer-col-tit,
.store-page .site-footer .footer-desc, .store-page .site-footer .footer-biz,
.store-page .site-footer .footer-legal, .store-page .site-footer .footer-copy { color: #8a8a8a !important; }
.store-page .footer-bottom { background: transparent; border-top: 1px solid #eee; }

/* ---- 결제(장바구니) 페이지 co-* 덮어쓰기 — 따뜻한 톤 → 무신사 톤 ---- */
body.store-page { padding-bottom: 40px; }
.store-page .co-top { background: #000; border-bottom: none; }
.store-page .co-top a { color: #fff; font-size: 15px; }
.store-page .co-top span { color: #999; }
.store-page .co-card { border: 1px solid #eee; border-radius: 4px; }
.store-page .co-row img, .store-page .co-row .ph { border-radius: 0; background: #f4f4f4; }
.store-page .co-qty button { border-radius: 4px; border-color: #d0d0d0; }
.store-page .co-qty .rm { color: #f31110; }
.store-page input.co-i, .store-page textarea.co-i, .store-page select.co-i { border-radius: 4px; border-color: #d0d0d0; }
.store-page .co-pay { border-radius: 4px; border-color: #d0d0d0; }
.store-page .co-pay.on { border-color: #000; background: #f7f7f7; }
.store-page .co-btn { border-radius: 4px; background: #000; box-shadow: none; }
.store-page .co-acct { border-radius: 4px; }

/* 모바일 헤더 + 글자 키우기 */
/* 손님 상당수가 40~50대라 13px 상품명은 작다. 이름·가격을 키우고 여백도 넉넉하게. */
@media (max-width: 760px) {
  .stm-bar { top: 48px; }
  .stm-head { padding: 14px 12px 8px; }
  .stm-head h1 { font-size: 17px; }
  .stm-head .cnt { font-size: 13px; }
  .stm-note { display: none; }          /* 좁은 화면에선 제목 줄이 두 줄로 깨져서 숨김 */
  .stm-bar-in { padding: 8px 12px; }
  .stm-chips button { font-size: 13.5px; height: 33px; padding: 7px 13px; }

  .store-page .oss-prod .pi { padding: 9px 3px 0; }
  .store-page .oss-prod .pb { font-size: 11.5px; }
  .store-page .oss-prod .pn { font-size: 14px; line-height: 1.45; margin: 4px 0 6px; }
  .store-page .oss-prod .pp { font-size: 16px; }
  .store-page .oss-prod .sp-stk { font-size: 12px; }
  .store-page .st-grid { gap: 26px 8px; }

  /* 상세 */
  .store-page .st-info h1 { font-size: 18px; line-height: 1.45; }
  .store-page .st-price { font-size: 22px; }
  .store-page .st-meta { font-size: 13.5px; line-height: 1.95; }
  .store-page .st-desc { font-size: 14px; line-height: 1.85; }
  .store-page .st-acc summary { font-size: 14.5px; padding: 16px 2px; }
  .store-page .st-acc details > div { font-size: 13.5px; }
  .store-page .st-recent-row .oss-prod { flex: 0 0 118px; width: 118px; }
}

/* ═══ 스토어 상단바 — 사이트 공통 헤더를 색만 반전해서 쓴다 (2026-08-26 사장님 지시)
   검은 바탕 + 주황 OSSohayo. 흰색(검색창·동그란 아이콘)은 그대로 흰색. ═══ */
.store-page .osshead, .store-shell .osshead { background: #111; border-bottom: none; }
@media (min-width: 861px) {
  /* 위 검정 밴드 + 아래 흰 카테고리줄 (본 사이트 주황 밴드와 같은 구조) */
  .store-page .osshead, .store-shell .osshead { background: linear-gradient(to bottom, #111 0, #111 102px, #fff 102px); }
}
.store-page .osshead-logo, .store-shell .osshead-logo { color: var(--orange); }
.store-page .osshead-auth a, .store-shell .osshead-auth a { color: #D8D2CC; }
.store-page .osshead-auth a:hover, .store-shell .osshead-auth a:hover { background: rgba(255,255,255,.14); color: #fff; }
.store-page .osshead-auth a b, .store-shell .osshead-auth a b { color: var(--orange); }
.store-page .osshead-burger, .store-shell .osshead-burger { color: #fff; }
/* 카테고리 줄 (유먼트·무신사식) — 흰 바탕에 검은 글씨, 지금 보는 분류는 주황 */
.store-page .osshead-nav, .store-shell .osshead-nav { border-top: none; }
.store-page .osshead-nav a, .store-shell .osshead-nav a { color: #1a1a1a; font-size: 15px; font-weight: 700; letter-spacing: -.2px; }
.store-page .osshead-nav a.on, .store-page .osshead-nav a:hover, .store-shell .osshead-nav a.on, .store-shell .osshead-nav a:hover { color: var(--orange); }
.store-page .osshead-nav a.st-nav-out, .store-shell .osshead-nav a.st-nav-out { color: #8a8a8a; font-weight: 600; }
.store-page .osshead-nav a.st-nav-out:hover, .store-shell .osshead-nav a.st-nav-out:hover { color: #1a1a1a; }
/* 헤더 장바구니 — 흰 동그라미 위 숫자 뱃지 */
.store-page .st-headcart, .store-shell .st-headcart { position: relative; }
.store-page .st-headcart .n, .store-shell .st-headcart .n { position: absolute; top: -3px; right: -3px; min-width: 17px; height: 17px;
  border-radius: 999px; background: var(--orange); color: #fff; font-size: 10.5px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; padding: 0 4px; }
.store-page .st-headcart .n:empty, .store-shell .st-headcart .n:empty { display: none; }
/* 관리자 [상품등록] — 검정 밴드 위라 주황 알약으로 */
.store-page .st-headreg, .store-shell .st-headreg { display: inline-flex; align-items: center; height: 34px; padding: 0 12px;
  border-radius: 999px; background: var(--orange); color: #fff; font-size: 12.5px; font-weight: 800;
  text-decoration: none; white-space: nowrap; }
.store-page .st-headreg:hover, .store-shell .st-headreg:hover { background: #E25B1E; }
/* ★ hidden 이 display:inline-flex 에 져서 손님에게도 [상품등록]이 보이던 버그 (2026-08-26 사장님 지적) */
.store-page .st-headreg[hidden], .store-shell .st-headreg[hidden] { display: none; }
/* PC 는 카테고리가 헤더에 있으니 아래 칩줄은 감춘다 (모바일은 칩줄을 그대로 씀) */
@media (min-width: 861px) { .store-page .stm-chips-wrap { display: none; } }
.store-page .stm-bar, .store-shell .stm-bar { position: static; }   /* 헤더가 sticky 라 이 줄까지 붙으면 화면을 너무 먹는다 */

/* 모바일: 스토어 검색칸은 로고줄 아래 한 줄 통째로 (스토어 상품 검색이라 폰에서도 필요) */
@media (max-width: 860px) {
  .store-page .oh-hsearch, .store-shell .oh-hsearch { display: flex; flex: 1 0 100%; order: 9; width: 100%; max-width: none; margin-top: 2px; }
  .store-page .osshead-in, .store-shell .osshead-in { gap: 10px; row-gap: 8px; }
}

/* 손님용 [구매대행 홈] — 검정 밴드 위 흰 테두리 알약 (관리자면 이 자리에 [＋ 상품등록]) */
.store-page .st-headhome, .store-shell .st-headhome { display: inline-flex; align-items: center; height: 34px; padding: 0 14px;
  border-radius: 999px; border: 1px solid rgba(255,255,255,.45); background: transparent; color: #fff;
  font-size: 12.5px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.store-page .st-headhome:hover, .store-shell .st-headhome:hover { background: rgba(255,255,255,.14); border-color: #fff; }
.store-page .st-headhome[hidden], .store-shell .st-headhome[hidden] { display: none; }
@media (max-width: 860px) { .store-page .st-headhome { height: 30px; padding: 0 10px; font-size: 11.5px; } }

/* 스토어 껍데기(로그인·회원가입·마이페이지)에선 사이트 메뉴줄이 필요 없다 (2026-08-26 사장님 지시).
   메뉴줄이 빠지므로 검정 밴드 아래 흰 띠도 없애고 통짜 검정으로. */
.store-shell .osshead-nav { display: none !important; }
@media (min-width: 861px) { .store-shell .osshead { background: #111; } }
.store-shell .osshead-in { grid-template-rows: 30px 72px !important; }

/* ── 상품카드 하트(찜) — 평소엔 숨어 있다가 마우스 올리면 나타난다 (2026-08-26 사장님 지시) ── */
.store-page .oss-prod .pimg { position: relative; }
.st-wish { position: absolute; right: 8px; bottom: 8px; z-index: 2; width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer;
  border: none; border-radius: 999px; background: rgba(255,255,255,.92); color: #6f6f6f;
  box-shadow: 0 1px 6px rgba(0,0,0,.18); opacity: 0; transition: opacity .15s, color .15s, transform .1s; }
.store-page .oss-prod:hover .st-wish, .st-wish.on, .st-wish:focus-visible { opacity: 1; }
.st-wish:hover { color: #E5483F; transform: scale(1.06); }
.st-wish.on { color: #E5483F; }
.st-wish.on svg { fill: currentColor; }
.st-wish[disabled] { opacity: .55; cursor: default; }
/* 손가락으로 쓰는 화면은 마우스 올리기가 없다 → 항상 보이게 */
@media (hover: none) { .st-wish { opacity: 1; } }

/* 찜한 상태는 한눈에 — 빨간 하트가 꽉 차고 테두리까지 빨갛게 (2026-08-26 사장님 지시) */
.st-wish.on { color: #E5483F; background: #FFF1F0; box-shadow: 0 0 0 1.5px #E5483F, 0 1px 6px rgba(229,72,63,.28); }
.st-wish.on svg { fill: currentColor; }
/* 상세페이지 찜 버튼 — 구매하기·장바구니와 같은 줄 */
.store-page .st-buy .st-wish-lg { position: static; opacity: 1; width: auto; height: auto;
  flex: 0 0 auto; gap: 6px; border: 1px solid #d0d0d0; border-radius: 4px; background: #fff;
  box-shadow: none; color: #000; font-weight: 700; padding: 0 14px; }
.store-page .st-buy .st-wish-lg:hover { background: #f7f7f7; color: #E5483F; transform: none; }
.store-page .st-buy .st-wish-lg.on { color: #E5483F; border-color: #E5483F; background: #FFF1F0; box-shadow: none; }
.st-wish-tx { font-size: 14px; }
@media (max-width: 760px) { .st-wish-tx { display: none; } .store-page .st-buy .st-wish-lg { padding: 0 12px; } }

/* 일본 현지 배송비 한 줄 안내 — 구매 버튼 바로 위 (2026-08-28 사장님 지시) */
.st-localship {
  margin: 14px 0 0; padding: 11px 14px;
  border: 1px solid #F0C36B; border-left: 4px solid #E8981C;
  background: #FFF7E6; border-radius: 8px;
  font-size: 13.5px; line-height: 1.55; color: #6B4A12; font-weight: 500;
}
.st-localship b { color: #B35C00; font-weight: 800; }
.st-localship span { color: #C9A15A; margin: 0 3px; }
@media (max-width: 640px) { .st-localship { font-size: 12.5px; padding: 10px 12px; } }

/* 옵션을 사진으로 고르기 — 종류가 많은 굿즈용 (2026-08-28 사장님 지시) */
.st-optpics { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; }
.st-optpic {
  position: relative; display: block; padding: 5px 4px 7px; cursor: pointer;
  border: 1.5px solid #E8DCCF; border-radius: 11px; background: #fff;
  font-family: inherit; text-align: center; transition: border-color .12s, box-shadow .12s;
}
.st-optpic img { display: block; width: 100%; aspect-ratio: 1/1; object-fit: contain; border-radius: 7px; }
.st-optpic .noimg { display: flex; align-items: center; justify-content: center;
  width: 100%; aspect-ratio: 1/1; background: #F6F3EF; border-radius: 7px; font-size: 11px; color: #A99B8E; }
.st-optpic b { display: block; margin-top: 4px; font-size: 11.5px; font-weight: 600; color: #3C3229;
  line-height: 1.25; word-break: keep-all; }
.st-optpic i { display: block; font-style: normal; font-size: 11px; color: #B35C00; font-weight: 700; }
.st-optpic:hover { border-color: #C9B9A6; }
.st-optpic.on { border-color: #FF6F20; box-shadow: 0 0 0 2px rgba(255,111,32,.16); }
.st-optpic.out { opacity: .45; cursor: not-allowed; }
.st-optpic em { position: absolute; top: 6px; left: 6px; font-style: normal;
  background: #3C3229; color: #fff; font-size: 10px; padding: 1px 5px; border-radius: 4px; }
@media (max-width: 640px) { .st-optpics { grid-template-columns: repeat(3, 1fr); } }