/* ===== NHJ Product Detail — 2-column layout with gallery ===== */

.nhj-prod {
  --nhj-bg: #ffffff;
  --nhj-surface: #ffffff;
  --nhj-surface-2: #f5f5f5;
  --nhj-border: #e0ddd6;
  --nhj-border-md: #ccc8bf;
  --nhj-border-dk: #b0ab9f;
  --nhj-text: #111110;
  --nhj-text-2: #5a5852;
  --nhj-text-3: #9a9690;
  --nhj-ink: #1a1916;
  --nhj-r: 10px;
  --nhj-r-sm: 6px;

  background: var(--nhj-bg);
  color: var(--nhj-text);
  font-family: 'DM Sans', sans-serif;
  line-height: 1.6;
  padding-block-end: 100px;
}

.nhj-prod__bc {
  font-size: 11.5px;
  color: var(--nhj-text-3);
  padding: 14px 32px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.nhj-prod__bc a {
  color: var(--nhj-text-3);
  text-decoration: none;
}

.nhj-prod__bc a:hover {
  color: var(--nhj-text-2);
}

.nhj-prod__inner {
  max-width: 100%;
  margin: 0 auto;
  padding: 0 24px;
}

/* ===== Top: 2-column layout ===== */
.nhj-prod-top {
  display: grid;
  grid-template-columns: 500px minmax(0, 1fr);
  gap: 32px;
  margin-bottom: 24px;
}

/* ===== Gallery (left column) ===== */
.nhj-gallery {
  position: sticky;
  top: 80px;
  align-self: start;
}

.nhj-gallery__main {
  width: 100%;
  aspect-ratio: 1;
  border: 1px solid var(--nhj-border);
  border-radius: var(--nhj-r);
  overflow: hidden;
  background: var(--nhj-surface-2);
  position: relative;
}

.nhj-gallery__main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.15s;
}

.nhj-gallery__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--nhj-text-3);
}

.nhj-gallery__thumbs {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  margin-top: 12px;
}

.nhj-thumb {
  aspect-ratio: 1;
  border: 1px solid var(--nhj-border);
  border-radius: var(--nhj-r-sm);
  overflow: hidden;
  cursor: pointer;
  background: var(--nhj-surface-2);
  padding: 0;
  transition: all 0.15s;
}

.nhj-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.nhj-thumb:hover {
  border-color: var(--nhj-border-dk);
}

.nhj-thumb.is-active {
  border: 2px solid var(--nhj-ink);
  padding: 0;
}

/* ===== Info column (right) ===== */
.nhj-info-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.nhj-prod-brand {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--nhj-text-3);
}

.nhj-prod-name {
  font-size: 22px;
  font-weight: 500;
  line-height: 1.3;
  margin-top: 2px;
}

.nhj-prod-num {
  font-size: 12px;
  color: var(--nhj-text-2);
  font-family: 'DM Mono', monospace;
  margin-top: 2px;
}

.nhj-prod-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 0;
  border-top: 1px solid var(--nhj-border);
  border-bottom: 1px solid var(--nhj-border);
}

.nhj-meta-row {
  display: flex;
  gap: 10px;
  font-size: 13px;
}

.nhj-meta-key {
  color: var(--nhj-text-3);
  min-width: 60px;
  flex-shrink: 0;
}

.nhj-meta-val {
  color: var(--nhj-text-2);
}

.nhj-buckle-pill {
  display: inline-block;
  font-size: 10px;
  padding: 1px 6px;
  border: 1px solid var(--nhj-border-md);
  border-radius: 4px;
  color: var(--nhj-text-3);
  background: var(--nhj-surface-2);
  margin-left: 5px;
}

/* Product detail box */
.nhj-prod-detail-box {
  border: 1px solid var(--nhj-border);
  border-radius: var(--nhj-r);
  overflow: hidden;
  background: var(--nhj-surface);
}

.nhj-prod-detail-hd {
  padding: 8px 12px;
  background: var(--nhj-surface-2);
  border-bottom: 1px solid var(--nhj-border);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nhj-text-3);
}

.nhj-prod-detail-body {
  padding: 12px;
  font-size: 12.5px;
  color: var(--nhj-text-2);
  line-height: 1.65;
}

.nhj-prod-detail-row {
  display: flex;
  gap: 10px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--nhj-border);
}

.nhj-pd-key {
  font-size: 11.5px;
  color: var(--nhj-text-3);
  min-width: 72px;
  flex-shrink: 0;
}

.nhj-pd-val {
  font-size: 12px;
  color: var(--nhj-text-2);
  line-height: 1.5;
}

/* ===== Order card ===== */
.nhj-order-card {
  background: var(--nhj-surface);
  border: 1px solid var(--nhj-border);
  border-radius: var(--nhj-r);
  overflow: hidden;
}

.nhj-order-card__hd {
  padding: 11px 14px;
  border-bottom: 1px solid var(--nhj-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--nhj-surface-2);
}

.nhj-order-card__hd-l {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--nhj-text-3);
}

.nhj-order-card__hd-note {
  font-size: 10px;
  font-weight: 400;
  color: var(--nhj-text-3);
}

.nhj-order-wrap {
  overflow-x: auto;
}

.nhj-order {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}

.nhj-order th {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--nhj-text-3);
  padding: 9px 8px;
  text-align: left;
  border-bottom: 1px solid var(--nhj-border);
  white-space: nowrap;
}

.nhj-order th.nhj-th-img { width: 50px; padding-left: 14px; }
.nhj-order th.nhj-th-sku { min-width: 130px; }
.nhj-order th.nhj-th-stock { width: 70px; text-align: center; }
.nhj-order th.nhj-th-price { width: 60px; text-align: right; }
.nhj-order th.nhj-th-qty { width: 80px; text-align: center; }
.nhj-order th.nhj-th-total { width: 80px; text-align: right; padding-right: 14px; }

.nhj-order tbody td {
  padding: 10px 8px;
  border-bottom: 1px solid var(--nhj-border);
  vertical-align: middle;
}

.nhj-order tbody tr:last-child td {
  border-bottom: none;
}

.nhj-td-img {
  padding-left: 14px !important;
  width: 50px;
}

.nhj-sku-img-btn {
  display: block;
  width: 40px;
  height: 40px;
  border: 1px solid var(--nhj-border);
  border-radius: var(--nhj-r-sm);
  overflow: hidden;
  background: var(--nhj-surface-2);
  cursor: pointer;
  padding: 0;
  transition: all 0.15s;
}

.nhj-sku-img-btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.nhj-sku-img-btn:hover {
  border-color: var(--nhj-border-dk);
}

.nhj-sku-img-btn.is-active {
  border: 2px solid var(--nhj-ink);
}

.nhj-sku-img-placeholder {
  width: 100%;
  height: 100%;
  background: var(--nhj-surface-2);
}

.nhj-td-sku .nhj-s-name {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--nhj-text);
}

.nhj-td-sku .nhj-s-code {
  font-size: 10.5px;
  color: var(--nhj-text-2);
  font-family: 'DM Mono', monospace;
  margin-top: 1px;
}

.nhj-td-stock {
  text-align: center;
}

.nhj-stock-num {
  font-size: 12.5px;
  font-weight: 500;
}

.nhj-stock-num.is-plenty { color: var(--nhj-text); }
.nhj-stock-num.is-low { color: #8a6500; }
.nhj-stock-num.is-none { color: var(--nhj-text-3); }

.nhj-stock-lbl {
  font-size: 9.5px;
  color: var(--nhj-text-3);
  margin-top: 1px;
}

.nhj-td-price {
  text-align: right;
  font-size: 12.5px;
  color: var(--nhj-text-2);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.nhj-td-qty {
  text-align: center;
}

.nhj-qty-input {
  width: 64px;
  height: 32px;
  border: 1px solid var(--nhj-border-md);
  border-radius: 5px;
  text-align: center;
  font-size: 13px;
  font-family: 'DM Mono', monospace;
  background: var(--nhj-surface);
  color: var(--nhj-text);
  outline: none;
  transition: border-color 0.15s;
  padding: 4px 6px;
}

.nhj-qty-input:focus {
  border-color: var(--nhj-ink);
}

.nhj-qty-input::-webkit-outer-spin-button,
.nhj-qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.nhj-qty-input[type=number] {
  -moz-appearance: textfield;
}

.nhj-qty-input:disabled {
  background: var(--nhj-surface-2);
  cursor: not-allowed;
  color: var(--nhj-text-3);
}

.nhj-td-total {
  text-align: right;
  padding-right: 14px !important;
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.nhj-sample-warn {
  font-size: 9.5px;
  color: #8a6500;
  margin-top: 3px;
  display: flex;
  align-items: center;
  gap: 3px;
}

/* ===== Footer bar ===== */
.nhj-footer-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--nhj-surface);
  border-top: 1px solid var(--nhj-border);
  padding: 14px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 100;
  font-family: 'DM Sans', sans-serif;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.04);
}

.nhj-footer-total {
  display: flex;
  flex-direction: column;
}

.nhj-footer-total__label {
  font-size: 11px;
  color: var(--nhj-text-3);
}

.nhj-footer-total__amt {
  font-size: 18px;
  font-weight: 600;
}

.nhj-footer-total__sub {
  font-size: 11px;
  color: var(--nhj-text-2);
  margin-top: 1px;
}

.nhj-footer-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.nhj-btn-cart {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 28px;
  background: var(--nhj-ink) !important;
  color: #ffffff !important;
  border: none;
  border-radius: var(--nhj-r-sm);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  transition: opacity 0.15s;
}

.nhj-btn-cart:hover {
  opacity: 0.84;
}

.nhj-btn-cart:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.nhj-btn-clear {
  padding: 10px 18px;
  background: transparent;
  color: var(--nhj-text-2);
  border: 1px solid var(--nhj-border-md);
  border-radius: var(--nhj-r-sm);
  font-size: 13px;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  transition: all 0.15s;
}

.nhj-btn-clear:hover {
  border-color: var(--nhj-ink);
  color: var(--nhj-text);
}

.nhj-qty-summary {
  font-size: 12px;
  color: var(--nhj-text-2);
  display: flex;
  align-items: center;
  gap: 6px;
}

.nhj-qty-dot {
  width: 5px;
  height: 5px;
  background: var(--nhj-border-dk);
  border-radius: 50%;
}

/* ===== Responsive ===== */
@media (max-width: 900px) {
  .nhj-prod-top {
    grid-template-columns: 1fr;
  }
  .nhj-gallery {
    position: static;
    max-width: 500px;
    margin: 0 auto;
  }
}

@media (max-width: 640px) {
  .nhj-prod__inner {
    padding: 0 16px;
  }
  .nhj-gallery__thumbs {
    grid-template-columns: repeat(5, 1fr);
  }
  .nhj-footer-bar {
    flex-direction: column;
    gap: 10px;
    padding: 12px 16px;
  }
  .nhj-footer-actions {
    width: 100%;
    justify-content: space-between;
  }
  .nhj-btn-cart {
    flex: 1 1 auto;
    justify-content: center;
  }
}

/* ===== ASK（要問い合わせ）ボックス ===== */
.nhj-ask-box{
  margin-top:16px; border:1px solid var(--nhj-border-md); border-radius:var(--nhj-r);
  background:var(--nhj-surface-2); padding:26px 24px; text-align:center;
}
.nhj-ask-box__hd{
  display:flex; align-items:center; justify-content:center; gap:8px;
  font-size:15px; font-weight:600; color:var(--nhj-ink); margin-bottom:10px;
}
.nhj-ask-box__text{ font-size:13px; color:var(--nhj-text-2); line-height:1.7; margin:0 auto 18px; max-width:40ch; }
.nhj-ask-box__btn{
  display:inline-flex; align-items:center; gap:8px; padding:13px 26px;
  background:var(--nhj-ink) !important; color:#fff !important; text-decoration:none;
  border-radius:var(--nhj-r-sm); font-size:14px; font-weight:600; letter-spacing:.02em;
}
.nhj-ask-box__btn:hover{ opacity:.88; }

/* ===== 発注テーブル: カラー別 入荷予定数量 ===== */
.nhj-stock-arr{
  margin-top:4px; font-family:'DM Mono', monospace; font-size:10.5px; line-height:1.3;
  color:var(--nhj-text-2); white-space:nowrap;
}
.nhj-stock-arr::before{ content:''; }
.nhj-stock-arr--2{ color:var(--nhj-text-3); }

/* ===== 入荷予定ブロック ===== */
.nhj-arrival-box {
  margin-top: 14px;
  border: 1px solid var(--nhj-border);
  border-radius: var(--nhj-r-sm);
  background: var(--nhj-surface-2);
  padding: 12px 14px;
}
.nhj-arrival-hd {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--nhj-ink);
  margin-bottom: 10px;
}
.nhj-arrival-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.nhj-arrival-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--nhj-text);
}
.nhj-arrival-badge {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 600;
  color: var(--nhj-ink);
  background: #ffffff;
  border: 1px solid var(--nhj-border-md);
  border-radius: 4px;
  padding: 2px 8px;
}
.nhj-arrival-badge--2 {
  color: var(--nhj-text-2);
}
.nhj-arrival-date {
  font-family: 'DM Mono', monospace;
  letter-spacing: -0.01em;
}
.nhj-arrival-qty {
  margin-left: auto;
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  color: var(--nhj-text-2);
}

/* ===== 未ログイン: 価格・在庫のロック表示 ===== */
.nhj-locked,
.nhj-qty-locked {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--nhj-text-3);
}
.nhj-locked-txt {
  font-size: 11px;
  color: var(--nhj-text-3);
  white-space: nowrap;
}

/* ===== 未ログイン: フッターCTA ===== */
.nhj-footer-bar--guest {
  justify-content: space-between;
  gap: 16px;
}
.nhj-footer-guest__text {
  font-size: 13px;
  color: var(--nhj-text-2);
}
.nhj-btn-login {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 11px 22px;
  background: var(--nhj-ink) !important;
  color: #ffffff !important;
  text-decoration: none;
  border-radius: var(--nhj-r-sm);
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
}
.nhj-btn-login:hover {
  opacity: 0.88;
}

/* SKU(カラー)欄の 即納/取り寄せ バッジ */
.nhj-sku-badge {
  display: inline-block;
  margin-top: 4px;
  font-size: 10px;
  line-height: 1;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 999px;
  letter-spacing: .02em;
}
.nhj-sku-badge--stock { background: #1a1916; color: #fff; }
.nhj-sku-badge--order { background: #efece6; color: #6b6659; border: 1px solid #ddd7cc; }

/* SP価格が適用されている単価に付けるバッジ。
   ⚠ 対象顧客のページにしか出力されないため、一般顧客には見えない。 */
.nhj-sp-badge {
  display: inline-block;
  margin-left: 5px;
  padding: 1px 5px;
  border-radius: 3px;
  background: #1a1916;
  color: #fafaf8;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .04em;
  vertical-align: middle;
}