/* Shared interaction roles keep the expressive sections consistent to use. */
:root {
  --control-height: 44px;
  --control-radius: 5px;
  --control-gap: 12px;
  --text-supporting: #c0c0b5;
  --focus-dark: #202717;
  --feedback-duration: 180ms;
}
.filter-tabs button, .saved-filter, .sort-controls select, .studio-tabs button,
.studio-compare, .quick-secondary > button { min-height: var(--control-height); }
.sort-controls { align-items: stretch; gap: var(--control-gap); }
.sort-controls select, .saved-filter { border-radius: var(--control-radius); font-size: 12px; }
.filter-tabs button { font-size: 12px; }
.studio-tabs button:focus-visible, .studio-actions button:focus-visible,
.gift-card:focus-visible { outline-color: var(--focus-dark); outline-offset: -5px; }
.product-image > .save-button { width: var(--control-height); height: var(--control-height); }
.product-image > .save-button:focus-visible { outline-color: var(--focus-dark); outline-offset: -4px; }
.dialog-close { min-width: var(--control-height); min-height: var(--control-height); }
.comparison-scroll:focus-visible { outline: 2px solid var(--co-motion-gold); }
.compare-remove { min-height: 36px; font-size: 11px; top: 3px; }
.comparison-table thead th { padding-top: 44px; }
.comparison-table td > a { font-size: 12px; min-height: 44px; display: flex; align-items: center; }
.comparison-table .button { min-height: 44px; font-size: 12px; }
.compare-dialog-heading p:last-child, .comparison-footnote { font-size: 12px; color: var(--text-supporting); }
.compare-dock #clearCompare { min-width: 36px; min-height: 44px; }
.compare-dock #openCompare:disabled { opacity: .65; cursor: default; }
.compare-thumb { margin-inline: 4px; }
.compare-thumb button::after { content: ''; position: absolute; inset: -8px; }
.toast { display: flex; align-items: center; gap: 14px; width: max-content; padding: 10px 12px 10px 20px; text-align: left; }
.toast[hidden] { display: none; }
.toast.show { pointer-events: auto; }
.toast > span { max-width: 420px; line-height: 1.5; }
.toast > button { font-size: 24px; min-width: 36px; min-height: 36px; flex-shrink: 0; }
.toast > button:focus-visible { outline-color: var(--focus-dark); outline-offset: -3px; }
.product-visual:focus-visible .quick-hint { opacity: 1; transform: none; }

@media (max-width: 600px) {
  body { padding-bottom: calc(62px + env(safe-area-inset-bottom)); }
  .search input { font-size: 16px; }
  .search button { min-width: 44px; min-height: 44px; }
  .saved-header, .bag-button, .menu-button { min-width: 44px; min-height: 44px; }
  .header-actions { gap: 6px; }
  .hero-description, .studio-description, .faq-list p, .quick-copy p,
  .condition-card p, #conditionContent > p, .visit-copy > p { font-size: 16px; line-height: 1.65; }
  .hero-meta .motion-toggle { min-height: 44px; font-size: 12px; }
  .studio-description { max-width: 100%; }
  .studio-tabs button { font-size: 12px; min-height: 44px; }
  .studio-product-meta > span { font-size: 14px; line-height: 1.5; }
  .studio-product-meta del { font-size: 13px; }
  .studio-product-meta b { font-size: 10px; }
  .studio-button, .studio-compare { font-size: 13px; min-height: 44px; }
  .studio-actions { gap: 16px; flex-wrap: wrap; }
  .studio-bottomline { font-size: 9px; letter-spacing: 0; }
  .studio-bottomline > span:last-child { font-size: 10px; }
  .sort-controls { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
  .sort-controls select { font-size: 16px; min-height: 44px; padding: 9px 7px; }
  #savedOnly { grid-column: 1 / -1; grid-row: 2; font-size: 13px; }
  .filter-tabs button { font-size: 12px; padding-inline: 6px; min-height: 44px; }
  .filter-chips > button { font-size: 12px; min-height: 44px; }
  .product-title { font-size: 14px; min-height: 84px; line-height: 1.45; }
  .product-title .muted { display: inline-block; font-size: 12px; margin-top: 5px; }
  .product-card .condition-pill { font-size: 10px; }
  .product-card .product-price { flex-wrap: wrap; gap: 5px 9px; }
  .product-card .product-price del, .product-saving { font-size: 12px; }
  .product-add, .compare-select { min-height: 44px; font-size: 12px; }
  .product-image > .save-button { width: 44px; height: 44px; }
  .gift-number { font-size: 9px; }
  .gift-bottom { font-size: 12px; }
  .gift-guide h3, .gift-guide .text-link { font-size: 14px; }
  .gift-guide p { font-size: 14px; line-height: 1.6; }
  .faq-list summary { font-size: 15px; min-height: 44px; }
  .condition-link { font-size: 13px; }
  .quick-secondary > button { font-size: 12px; min-height: 44px; }
  .quick-copy > a { font-size: 14px; padding-block: 5px; }
  .quick-copy small { font-size: 12px; }
  .bag-item h3, .bag-item strong { font-size: 14px; }
  .quantity-row { flex-wrap: wrap; gap: 10px; }
  .quantity button { min-width: 44px; min-height: 44px; }
  .remove-item, .bag-item-store { min-height: 44px; display: inline-flex; align-items: center; font-size: 12px; }
  .bag-notice, .bag-total-note { font-size: 13px; line-height: 1.6; }
  .compare-dialog-heading p:last-child { font-size: 14px; max-width: none; }
  .comparison-table { font-size: 14px; }
  .comparison-table thead th > span { font-size: 14px; line-height: 1.45; }
  .comparison-table th[scope='row'] { font-size: 12px; }
  .comparison-table thead th { padding-top: 48px; }
  .compare-condition, .saving-tag { font-size: 12px; }
  .compare-price-row td > del { font-size: 12px; }
  .compare-swipe, .comparison-footnote { font-size: 12px; line-height: 1.6; }
  .compare-remove { min-height: 44px; font-size: 12px; top: 0; }
  .compare-dock { grid-template-columns: 1fr auto 36px; bottom: calc(72px + env(safe-area-inset-bottom)); }
  .compare-dock #openCompare { font-size: 13px; min-height: 44px; }
  .compare-dock-copy strong { font-size: 13px; }
  .compare-thumb { margin-inline: 5px; }
  .mobile-shortcuts { height: calc(62px + env(safe-area-inset-bottom)); padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
  .mobile-shortcuts > a, .mobile-shortcuts > button { font-size: 10px; }
  .toast, .dialog-open .toast { font-size: 14px; padding: 10px 10px 10px 15px; }
  .toast { bottom: calc(75px + env(safe-area-inset-bottom)); }
  .has-compare .toast { bottom: calc(210px + env(safe-area-inset-bottom)); }
  .toast > button { min-width: 44px; min-height: 44px; }
}
@media (hover: none), (prefers-reduced-motion: reduce) {
  .product-card:hover, .gift-card:hover img, .category-card:hover img { transform: none; }
}
.motion-paused .product-card:hover, .motion-paused .gift-card:hover img { transform: none; }