/* Shared interaction layer: opt a theme in with .commerce-app. */
.commerce-app{padding-bottom:calc(104px + env(safe-area-inset-bottom,0px))}
.commerce-app #bag-open{position:fixed;right:max(20px,env(safe-area-inset-right,0px));bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:45;min-height:56px;padding:14px 24px;border-radius:999px;background:var(--accent);color:var(--on-accent);box-shadow:0 8px 28px #0003;border:1px solid var(--line);font-size:15px;font-weight:700;transition:transform .18s}
.commerce-app #bag-count{background:var(--on-accent);color:var(--accent);min-width:26px;height:26px}
.commerce-app button:active,.commerce-app .hero-cta:active{transform:scale(.97)}
.commerce-app .toast,.commerce-app .connection{bottom:calc(90px + env(safe-area-inset-bottom,0px))}
.commerce-app dialog[open]{animation:commerce-sheet .48s cubic-bezier(.2,.8,.2,1)}
.commerce-app dialog::backdrop{animation:commerce-backdrop .2s ease}
.commerce-app .commerce-arrive{animation:commerce-rise .45s ease both}
.commerce-app .commerce-bump{animation:commerce-bump .3s ease}
html.commerce-modal-open{overflow:hidden}
@keyframes commerce-sheet{from{opacity:0;transform:translateY(110px)}to{opacity:1;transform:translateY(0)}}
@keyframes commerce-rise{from{opacity:.25;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes commerce-backdrop{from{opacity:0}to{opacity:1}}
@keyframes commerce-bump{50%{transform:translateY(-5px)}}
@media(max-width:760px){
.commerce-app .header{min-height:72px;gap:12px}
.commerce-app .header nav{gap:8px}
.commerce-app .nav-collection{display:none}
.commerce-app .filter-tabs{flex-wrap:nowrap;overflow-x:auto;padding:4px 2px 10px;scrollbar-width:thin}
.commerce-app .filter-tabs button{flex-shrink:0;min-height:44px;border-radius:999px}
.commerce-app .search{border:1px solid var(--line);border-radius:14px;padding:8px 12px}
.commerce-app .search input,.commerce-app dialog input,.commerce-app dialog select,.commerce-app dialog textarea{font-size:16px}
.commerce-app dialog.product-dialog,.commerce-app dialog.bag-dialog{position:fixed;inset:auto 0 0;margin:0 auto;width:100%;max-width:600px;height:auto;max-height:92dvh;border-radius:24px 24px 0 0;overscroll-behavior:contain;padding-bottom:calc(24px + env(safe-area-inset-bottom,0px));scroll-padding-bottom:28px}
.commerce-app .bag-dialog{padding:22px 20px}
.commerce-app .bag-head{position:sticky;top:-22px;background:var(--background);z-index:3;padding:12px 0;border-bottom:1px solid var(--line)}
.commerce-app .close,.commerce-app .quantity button,.commerce-app .remove{min-width:44px;min-height:44px}
.commerce-app .detail-layout{grid-template-columns:1fr}
.commerce-app .detail-image{height:230px;min-height:0}
.commerce-app .detail-copy{padding:24px 20px}
.commerce-app .primary{min-height:52px;border-radius:14px}
.commerce-app .field-row{grid-template-columns:1fr}
.commerce-app .bag-line{grid-template-columns:52px minmax(0,1fr) auto;gap:10px}
.commerce-app .bag-line img{width:52px;height:52px}
.commerce-app .bag-line h3{overflow-wrap:anywhere}
}
@media(prefers-reduced-motion:reduce){
.commerce-app *,.commerce-app *::before,.commerce-app *::after{animation:none!important;transition:none!important}
}

/* Catalogue cards animate on viewport entry, not during initial rendering. */
.commerce-app .product-card{animation:none}
.commerce-app .product-card.commerce-arrive{animation:commerce-rise .65s cubic-bezier(.2,.75,.2,1) both}
@media(prefers-reduced-motion:reduce){.commerce-app .product-card.commerce-arrive{animation:none!important}}