/* 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; }
/* Shared home/catalog cards: generous width, compact media and a stable action row. */
body.portal-shell .portal-catalog-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    align-items: stretch;
}
body.portal-shell .portal-catalog-card {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    grid-template-rows: 1fr auto;
    gap: 14px;
    min-width: 0;
    padding: 16px;
    border: 1px solid #dfe8ef;
    border-radius: 20px;
    box-shadow: 0 4px 16px #0b223e06;
    transition: border-color .18s ease, box-shadow .18s ease;
}
body.portal-shell .portal-catalog-card:hover { border-color: #b5cfdf; box-shadow: 0 8px 24px #0b223e0c; }
body.portal-shell .portal-catalog-media { align-self: start; min-width: 0; padding: 8px; border-radius: 14px; }
body.portal-shell .portal-catalog-media .portal-product-image { display: block; width: 100%; height: 88px; aspect-ratio: auto; object-fit: contain; border-radius: 8px; }
body.portal-shell .portal-catalog-body { flex: initial; min-width: 0; gap: 8px; overflow-wrap: anywhere; }
body.portal-shell .portal-catalog-title { display: block; min-height: 0; overflow: visible; margin: 0; font-size: 1.05rem; line-height: 1.4; font-weight: 650; }
body.portal-shell .portal-catalog-card .portal-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
body.portal-shell .portal-catalog-card .status-pill { font-size: .72rem; padding: 4px 8px; }
body.portal-shell .portal-catalog-card .portal-discount-badge { font-size: .66rem; letter-spacing: .01em; }
body.portal-shell .portal-catalog-pricing { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
body.portal-shell .portal-catalog-card .portal-price-main { font-size: 1.4rem; line-height: 1.2; letter-spacing: -.02em; }
body.portal-shell .portal-catalog-card .portal-price-old { font-size: .8rem; }
body.portal-shell .portal-catalog-card .portal-price-subtitle { font-size: .78rem; line-height: 1.5; }
body.portal-shell .portal-catalog-card .portal-tag-list { display: flex; flex-wrap: wrap; gap: 5px; }
body.portal-shell .portal-catalog-card .portal-tag { font-size: .7rem; padding: 3px 6px; max-width: 100%; border-radius: 6px; }
body.portal-shell .portal-catalog-card .portal-card-actions { grid-column: 1 / -1; display: flex; flex-direction: row; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 0; padding-top: 12px; border-top: 1px solid #edf2f6; }
body.portal-shell .portal-catalog-card .portal-card-buy-form { width: auto; display: flex; flex-direction: row; align-items: center; flex-wrap: nowrap; gap: 8px; margin: 0; }
body.portal-shell .portal-catalog-card .portal-card-qty-field { display: grid; grid-template-columns: auto 64px; align-items: center; gap: 6px; margin: 0; font-size: .68rem; }
body.portal-shell .portal-catalog-card .button { width: auto; min-height: 44px; padding: 9px 12px; font-size: .85rem; white-space: normal; }
body.portal-shell .portal-catalog-card .portal-card-qty-field input { width: 64px; min-height: 44px; padding: 8px; }
body.portal-shell .portal-catalog-media:focus-visible { outline: 3px solid var(--brand-accent); outline-offset: 3px; }
@media(max-width:1199px) { body.portal-shell .portal-catalog-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(max-width:767px) { body.portal-shell .portal-catalog-grid { grid-template-columns: minmax(0,1fr); } }
@media(max-width:479px) {
    body.portal-shell .portal-catalog-card { grid-template-columns: 80px minmax(0,1fr); gap: 12px; padding: 14px; }
    body.portal-shell .portal-catalog-media { padding: 6px; }
    body.portal-shell .portal-catalog-media .portal-product-image { height: 66px; }
}
@media(max-width:359px) {
    body.portal-shell .portal-catalog-card .portal-card-actions > a { width: 100%; }
    body.portal-shell .portal-catalog-card .portal-card-buy-form { width: 100%; justify-content: space-between; }
}
@media(prefers-reduced-motion:reduce) { body.portal-shell .portal-catalog-card { transition: none; } }
/* 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 { display: grid; 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; }

/* Compact touch navigation leaves room for the catalog on phones. */
body.portal-shell .portal-catalog-media .portal-product-image-fallback { display:flex; align-items:center; justify-content:center; text-align:center; font-size:.75rem; }
@media(max-width:767px) {
    body.portal-shell .portal-strip-stats { display:none; }
    body.portal-shell .portal-topbar-brand { max-width:none; flex-wrap:nowrap; gap:4px; }
    body.portal-shell .portal-topbar-brand .back-button { width:44px; min-width:44px; padding:10px; }
    body.portal-shell .portal-topbar-brand .back-button span { display:none; }
    body.portal-shell .portal-topbar-actions { gap:6px; }
    body.portal-shell .portal-topbar-actions .portal-action-button,
    body.portal-shell .portal-topbar-actions .portal-action-form { width:44px; min-width:44px; flex:0 0 44px; }
}