/* 内容・購入処理は共通のまま、スマホの配置と操作領域を調整する。 */
@media (max-width: 600px) {
  main:has(.pdp, #lines, #shopSearch) { padding-top: 104px; }
  :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]) {
    font-size: 16px;
  }
  #productQuantity, #demoShipping, .shipping-form :is(input, select) { font-size: 16px; }
  .line { grid-template-columns: 80px minmax(0, 1fr); gap: 12px 16px; }
  .line .thumb { width: 80px; grid-row: 1 / 3; }
  .line > div { min-width: 0; overflow-wrap: anywhere; }
  .line .right { grid-column: 2; display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
  .qty button { width: 44px; height: 44px; }
  .rm { min-height: 44px; padding: 8px; }
}

/* スマホは商品を先に見せ、同じカテゴリ・検索条件を必要なときに開く。 */
.shop-browse > summary { display: none; }
.shop-browse > summary[hidden] { display: none !important; }
.store-menu-toggle[hidden] { display: none !important; }
@media (max-width: 860px) {
  .site-header { flex-wrap: nowrap; gap: 8px; padding: 12px 16px; }
  .site-header .wordmark { margin-right: auto; flex-shrink: 0; }
  .site-header .cart-btn { min-height: 44px; flex-shrink: 0; }
  .store-menu-toggle {
    display: grid; place-items: center; flex-shrink: 0; min-width: 44px; min-height: 44px; padding: 8px; border: 0; background: transparent;
    color: var(--ink); font: inherit; font-size: 12px; cursor: pointer;
  }
  .store-menu-toggle svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; }
  .store-menu-toggle:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
  .site-header .gnav { display: none; }
  .site-header[data-menu-open] .gnav {
    position: absolute; top: 100%; left: 0; display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%;
    max-height: calc(100dvh - 72px); overflow-y: auto; margin: 0; padding: 12px 16px;
    gap: 0 16px; background: #fff; border-bottom: 1px solid #dedfd8;
    font-size: 13px; letter-spacing: .04em;
  }
  .site-header .gnav a { display: flex; align-items: center; min-height: 44px; padding: 8px 0; }
  main:has(.pdp, #shopSearch) { padding-top: 96px; }
  #subnav { gap: 0 16px; padding-top: 0; font-size: 12px; font-weight: 500; }
  #subnav a { min-height: 36px; display: flex; align-items: center; }
  #pageTitle { font-size: 28px; line-height: 1.3; margin-top: 16px; font-weight: 600; }
  #pageLede { font-size: 13px; line-height: 1.7; font-weight: 400; margin-top: 8px; }
  .shop-browse { margin-top: 20px; border-block: 1px solid #e9e7e2; }
  .shop-browse > summary {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    min-height: 48px; padding: 10px 0; cursor: pointer; font-size: 14px; font-weight: 600;
    list-style: none;
  }
  .shop-browse > summary::-webkit-details-marker { display: none; }
  .shop-browse > summary::after { content: '+'; font-size: 20px; font-weight: 400; }
  .shop-browse[open] > summary::after { content: '−'; }
  #shopBrowseState { margin-left: auto; color: var(--body-text); font-size: 12px; font-weight: 400; }
  .shop-browse .category-browser { margin-top: 12px; }
  .shop-browse .shop-controls { padding-bottom: 16px; }
  .shop-browse ~ .pgrid { margin-top: 20px; }
  main:has(#shopBrowse) ~ .filter-pill { display: none; }
  .block h2 { font-size: 28px; letter-spacing: 0; font-weight: 600; }
  .block h2::after { display: none; }
  .block .lede { font-size: 13px; line-height: 1.8; font-weight: 400; }
}