/* Shared content insets apply to current and future Topa surfaces. */
:root {
  --inset-block:40px;
  --inset-card:16px;
  --inset-field:24px;
  --duration-profile:240ms;
}
.search-stage {padding:0 var(--inset-block) 32px}
.search-stage .intro {padding:40px 0 32px}
.search-stage .search-form {padding:20px var(--inset-field);gap:24px}
.store {padding:var(--inset-card)}
.store-meta {padding:18px 4px 6px}
.profile-inner {padding:24px var(--inset-block) 0}
.profile-heading {padding-bottom:24px}
.purchase-list .delivery-match {padding:16px}
.search-guidance {padding:18px var(--inset-field)}
@media(max-width:1050px) {
  :root {--inset-block:32px;--inset-field:20px}
  .search-stage .search-form {gap:18px}
}
@media(max-width:760px) {
  :root {--inset-block:24px;--inset-card:12px;--inset-field:18px}
  .search-stage {padding-bottom:26px}
  .search-stage .intro {padding:30px 0 27px}
  .search-stage .search-form {padding:21px var(--inset-field) 18px;gap:18px 14px}
  .store-meta {padding:15px 4px 5px}
  .store-art:not(.image-cover) {padding-inline:12px}
  .profile-inner {padding-top:16px}
  .profile-heading {padding-bottom:20px}
  .purchase-list .delivery-match {padding:14px}
}
@media(max-width:370px) {
  :root {--inset-block:20px;--inset-field:15px}
  .search-stage .search-form {padding:19px var(--inset-field) 17px;gap:17px}
  .store-art:not(.image-cover) {padding-inline:8px}
}
/* Occasional pointer action: spatial consistency, native modal semantics.
   No timers or JS exit state; unsupported browsers keep instant open/close. */
@supports (transition-behavior:allow-discrete) and (overlay:auto) {
  @media(prefers-reduced-motion:no-preference) {
    html[data-input=pointer] .profile {
      opacity:0;
      transform:translateX(100%);
      transition:transform var(--duration-profile) var(--ease-drawer),
        opacity var(--duration-profile) var(--ease-out),
        display var(--duration-profile) allow-discrete,
        overlay var(--duration-profile) allow-discrete;
    }
    html[data-input=pointer] .profile[open] {opacity:1;transform:translateX(0)}
    html[data-input=pointer] .profile::backdrop {
      opacity:0;
      transition:opacity var(--duration-profile) var(--ease-out),
        display var(--duration-profile) allow-discrete,
        overlay var(--duration-profile) allow-discrete;
    }
    html[data-input=pointer] .profile[open]::backdrop {opacity:1}
    @starting-style {
      html[data-input=pointer] .profile[open] {opacity:0;transform:translateX(100%)}
      html[data-input=pointer] .profile[open]::backdrop {opacity:0}
    }
  }
}
.profile:not([open]) {pointer-events:none}