/* Opt-in Blokus prototype. No other product page loads this stylesheet. */
.page--detail-preview { padding-bottom: calc(90px + env(safe-area-inset-bottom)); }
.detail-back a { display: inline-flex; align-items: center; gap: 7px; min-height: 48px; font-size: 12px; text-decoration: none; color: #61715f; }
.detail-product { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 36px; }
.detail-photo { background: #edf0e5; padding: 38px; border-radius: 22px; }
.page--detail-preview .detail-photo .product-card__media-frame { background: transparent; height: 320px; min-height: 0; border: 0; border-radius: 0; }
.page--detail-preview .detail-photo .product-card__image { width: 100%; height: 100%; object-fit: contain; padding: 0; mix-blend-mode: multiply; }
.detail-intro { align-self: center; }
.detail-maker { margin: 0 0 8px; color: #70786f; font-size: 11px; letter-spacing: 1.8px; }
.detail-maker span { padding: 0 5px; }
.detail-intro h1 { margin: 0; font-size: 32px; line-height: 1.45; letter-spacing: 2px; }
.detail-formal-title { margin: 8px 0 0; color: #657160; font-size: 12px; line-height: 1.8; overflow-wrap: anywhere; }
.detail-lead { margin: 10px 0 20px; font-size: 15px; line-height: 1.8; }
.detail-facts { display: flex; justify-content: space-between; padding: 16px 0; margin: 0; list-style: none; border-top: 1px solid #e1e3d9; border-bottom: 1px solid #e1e3d9; }
.detail-facts li { display: flex; align-items: center; gap: 7px; font-size: 12px; white-space: nowrap; }
.detail-facts svg { color: #6b7e65; flex-shrink: 0; }
.detail-summary { font-size: 14px; line-height: 1.95; margin: 19px 0 0; }
.detail-reading { grid-column: 1 / -1; width: 100%; max-width: 680px; margin: 0 auto; }
.detail-section { padding: 26px 0; border-bottom: 1px solid #e1e3d9; }
.detail-section h2 { margin: 0 0 16px; font-size: 19px; letter-spacing: .6px; }
.detail-section p { font-size: 14px; line-height: 2; margin: 0 0 13px; }
.detail-source { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; min-height: 44px; color: #586e52; text-decoration: underline; text-underline-offset: 4px; }
.detail-steps { list-style: none; padding: 0; margin: 0; counter-reset: steps; }
.detail-steps li { position: relative; padding-left: 39px; margin-bottom: 20px; counter-increment: steps; }
.detail-steps li::before { content: counter(steps, decimal-leading-zero); position: absolute; left: 0; top: 0; color: #89977c; font-family: Georgia, serif; font-size: 22px; }
.detail-steps strong { display: block; font-size: 14px; margin-bottom: 5px; }
.detail-section .detail-variation { background: #f1f0e7; border-radius: 13px; padding: 16px; font-size: 13px; }
.detail-specs { margin: 0; }
.detail-specs > div { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 12px; padding: 11px 0; border-top: 1px solid #eeede5; font-size: 12px; line-height: 1.9; }
.detail-specs > div:first-child { border: 0; padding-top: 0; }
.detail-specs dt { color: #70786f; }
.detail-specs dd { margin: 0; overflow-wrap: anywhere; }
.detail-more { display: flex; align-items: center; justify-content: space-between; min-height: 58px; margin-top: 16px; text-decoration: none; font-size: 13px; }
.detail-more span { font-size: 20px; }
.detail-purchase { position: fixed; z-index: 4; bottom: 0; left: 0; right: 0; background: #fcfaf6; border-top: 1px solid #e1e3d9; box-shadow: 0 -5px 24px #29363008; padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); }
.detail-purchase__inner { display: flex; align-items: center; gap: 18px; max-width: 680px; margin: auto; }
.detail-purchase__note { display: flex; align-items: center; gap: 9px; flex: 1; margin: 0; font-size: 11px; line-height: 1.6; color: #61715f; }
.detail-purchase__note small { font-size: 9px; color: #70786f; border: 1px solid #dce0d5; padding: 1px 3px; white-space: nowrap; }
.detail-purchase__button { display: flex; align-items: center; justify-content: space-between; gap: 22px; min-height: 48px; padding: 0 20px; border-radius: 12px; color: #fffaf2; background: #354b3b; text-decoration: none; font-size: 14px; font-weight: 600; }
.detail-purchase__button span { font-size: 20px; font-weight: 400; }
.detail-purchase__button:hover { background: #24392a; }
.detail-purchase__unavailable { font-size: 13px; }
.page--detail-preview .site-footer { margin-top: 10px; }
@media (max-width: 679px) {
  .detail-product { grid-template-columns: 1fr; gap: 24px; }
  .detail-photo { padding: 22px 28px; border-radius: 18px; }
  .page--detail-preview .detail-photo .product-card__media-frame { height: 242px; }
  .detail-intro h1 { font-size: 29px; }
  .detail-lead { margin-bottom: 18px; font-size: 14px; }
  .detail-reading { margin-top: -8px; }
  .detail-section { padding: 24px 0; }
  .detail-purchase__inner { gap: 10px; }
  .detail-purchase__button { gap: 14px; padding: 0 16px; }
}
@media (max-width: 359px) {
  .detail-facts li { gap: 4px; font-size: 11px; }
  .detail-purchase__note { gap: 4px; font-size: 10px; }
  .detail-purchase__button { padding: 0 12px; gap: 9px; font-size: 13px; }
}