/* Keep the header in flow: its height changes with screen size and available actions. */
body.portal-shell > .portal-topbar-fixed { position: sticky; flex-shrink: 0; }
body.portal-shell > .portal-main-with-fixed-strip { padding-top: 1.5rem; }
body.portal-shell .portal-catalog-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
    gap: .85rem;
    align-items: stretch;
}
body.portal-shell .portal-catalog-card { min-width: 0; padding: .7rem; gap: .6rem; border-radius: 20px; }
body.portal-shell .portal-catalog-media { padding: .5rem; border-radius: 14px; }
body.portal-shell .portal-catalog-media .portal-product-image { display: block; height: 160px; aspect-ratio: auto; border-radius: 10px; }
body.portal-shell .portal-catalog-body { flex: 1; min-width: 0; gap: .4rem; overflow-wrap: anywhere; }
body.portal-shell .portal-catalog-card .portal-price-main { font-size: 1.35rem; line-height: 1.15; }
body.portal-shell .portal-catalog-card .portal-price-subtitle { font-size: .85rem; }
body.portal-shell .portal-catalog-card .portal-tag { font-size: .75rem; padding: .25rem .45rem; max-width: 100%; }
body.portal-shell .portal-catalog-card .portal-card-actions { margin-top: auto; padding-top: .25rem; }
body.portal-shell .portal-catalog-card .button,
body.portal-shell .portal-catalog-card .portal-card-qty-field input { min-height: 44px; }
@media (max-width: 479px) {
    body.portal-shell .portal-catalog-media .portal-product-image { height: 176px; }
}
/* On short landscape screens, keep navigation reachable without covering the catalog. */
@media (max-height: 600px) {
    body.portal-shell > .portal-topbar-fixed { max-height: 40dvh; overflow-y: auto; overscroll-behavior: contain; }
}

/* Use the same Portal menu icon and 64px desktop header as the administration panel. */
body.portal-shell .portal-logo-link { width: 44px; height: 44px; flex: 0 0 44px; justify-content: center; border-radius: 10px; background: var(--brand-primary); }
body.portal-shell .portal-brand-icon { display: block; width: 24px; height: 24px; }
body.portal-shell > .portal-topbar-fixed { min-height: 64px; padding-block: 9px; }
body.portal-shell .portal-topbar-inner { grid-template-columns: auto minmax(0, 1fr); gap: 1rem; }
body.portal-shell .portal-topbar-inner:has(> .portal-topbar-copy) { grid-template-columns: auto minmax(0, 1fr) auto; }
body.portal-shell .portal-topbar-brand { width: auto; }
body.portal-shell .portal-topbar-side { min-width: 0; width: auto; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .75rem; }
body.portal-shell .portal-strip-stats { display: flex; gap: .5rem; }
body.portal-shell .portal-stat-chip { min-width: 0; min-height: 40px; padding: .2rem .65rem; border-radius: 12px; gap: 0; }
body.portal-shell .portal-stat-chip span { font-size: .65rem; }
body.portal-shell .portal-stat-chip strong { font-size: .85rem; }
body.portal-shell .portal-topbar-actions { display: flex; flex-wrap: wrap; }
body.portal-shell .portal-topbar-fixed .button { min-height: 44px; }
body.portal-shell > .portal-header { min-height: 64px; padding-block: 10px; }
@media (max-width: 767px) {
    body.portal-shell .portal-topbar-inner,
    body.portal-shell .portal-topbar-inner:has(> .portal-topbar-copy) { grid-template-columns: auto minmax(0, 1fr); gap: .6rem; align-items: start; }
    body.portal-shell .portal-topbar-copy { grid-column: 1 / -1; grid-row: 2; }
    body.portal-shell .portal-topbar-brand { flex-wrap: wrap; max-width: 80px; gap: .4rem; }
    body.portal-shell .portal-topbar-side { gap: .5rem; }
}

/* Share the sidebar color token so the portal follows the Sipedy identity. */
body.portal-shell > .portal-topbar-fixed { background: var(--brand-accent); }

/* Portal filters share the available width and stack naturally on phones. */
body.portal-shell .portal-catalog-filters { display:grid; grid-template-columns:minmax(180px,2fr) minmax(140px,1fr) minmax(120px,1fr) auto; gap:12px; align-items:end; }
body.portal-shell .portal-catalog-filters label { min-width:0; }
body.portal-shell .portal-filter-actions { display:flex; gap:12px; align-items:center; }
.details-modal .portal-item-detail { padding:0; box-shadow:none; border:0; min-width:0; }
.details-modal .portal-item-detail .portal-product-image-large { max-height: min(35dvh,280px); width:100%; object-fit:contain; }
@media(max-width:991px) { body.portal-shell .portal-catalog-filters { grid-template-columns:minmax(0,1fr) minmax(0,1fr); } }
@media(max-width:479px) { body.portal-shell .portal-catalog-filters { grid-template-columns:minmax(0,1fr); } }

body.portal-shell .portal-filter-actions { grid-column:-2 / -1; justify-content:flex-end; }