/* 写真の有無と文の長さに影響されないカード。 */
.product-media { display: grid; place-items: center; width: 64px; height: 72px; flex: none; border-radius: var(--card-radius); background: var(--surface-subtle); overflow: hidden; }
.product-media .product-photo { width: 100%; height: 100%; object-fit: contain; object-position: center; padding: 8px; background: var(--transparent); border-radius: 0; }
.product-media:empty { border: 1px solid var(--line); }
.product-meta, .product-spec, .product-last { overflow-wrap: anywhere; }
.selected { border-color: var(--line-strong) !important; background: var(--surface-subtle) !important; }
.selected .check { background: var(--text); color: var(--surface); border-color: var(--text); }
.select-product.selected, .qty-button.has-qty, #nav button.active { color: var(--text); }
.tabs button.active, .view-toggle button.active, .unit-toggle button.active { color: var(--text); border-color: var(--line-strong); background: var(--surface-subtle); }
.demo-pill { color: var(--text-secondary); }
.profile-completeness, .setup-recap, .industry-tile > span { min-width: 0; overflow-wrap: anywhere; }
.unit-toggle { flex-wrap: wrap; }
.unit-toggle button { min-width: 44px; }
.quick-step button { min-width: 44px; min-height: 44px; }
.quick-step input, .quick-quantity select, .quick-add { min-height: 44px; }
.quick-quantity { margin-top: auto; }
@media (min-width:600px) {
 html[data-view=cards] .product-grid { align-items: stretch; }
 html[data-view=cards] .product-card { display: flex; flex-direction: column; align-items: stretch; align-content: normal; }
 html[data-view=cards] .product-main { flex: 1 1 auto; flex-basis: auto; display: flex; flex-direction: column; align-items: stretch; width: 100%; }
 html[data-view=cards] .product-media { width: 100%; height: auto; aspect-ratio: 4/3; }
 html[data-view=cards] .product-media .product-photo { height: 100%; }
 html[data-view=cards] .product-text { display: flex; flex-direction: column; flex: 1; }
 html[data-view=cards] .product-price { margin-top: auto; padding-top: 8px; }
 html[data-view=cards] .select-product, html[data-view=cards] .qty-button { margin-top: 8px; margin-left: auto; }
 html[data-view=cards] .quick-quantity { margin-top: 8px; }
}
@media (max-width:599px) {
 html[data-layout=app][data-view=cards] .product-media { width: 100%; height: auto; aspect-ratio: 4/3; }
 html[data-layout=app][data-view=cards] .product-media .product-photo { height: 100%; }
}
@media (min-width:1024px) and (max-width:1279px) {
 html[data-layout=app][data-view=cards] .product-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (min-width:1280px) {
 html[data-layout=app][data-view=cards] .product-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
 html[data-layout=setup][data-view=cards] .product-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
}

/* v138: allow all bounded cards to lay out before capture and pagination. */
#main:focus { outline: none; }
.quantity-unit { padding-right: 8px; font-size: 12px; }
.product-main { text-align: left; }
@media (max-width:1023px) {
 main { padding-bottom: calc(var(--bottom-space, 240px) + 32px); }
 .bottom-actions.with-nav { bottom: var(--nav-height, 71px); }
}
.row-between { flex-wrap: wrap; }

/* hotfix 2026-11-11: photo must fit its frame; back button never wraps */
.product-media { position: relative; }
.product-media .product-photo { position: absolute; inset: 0; width: 100%; height: 100%; box-sizing: border-box; }
[data-action=setup-back] { white-space: nowrap; min-width: max-content; flex: none; }