/* Todos los productos: mosaico con fotos en recuadros altos y densidad elegible (patrón de starnutrition.com.ar). */
body.catalog-page .catalog{max-width:1440px}
body.catalog-page .section-head h1{font-size:clamp(34px,4.4vw,56px);margin:0 0 8px}
body.catalog-page .section-head .eyebrow{display:none}
/* Barra de navegación del catálogo: Filtro, Ordenar por y densidad de la grilla. */
body.catalog-page .catalog-controls{display:flex;flex-wrap:wrap;align-items:center;gap:0 0;margin:18px 0 0}
.filter-toggle{display:inline-flex;align-items:center;gap:12px;min-height:48px;padding:0 20px;background:#29383e;color:#fff;border:1px solid #29383e;font:600 13px 'DM Sans',Arial,sans-serif;letter-spacing:.2em;text-transform:uppercase;cursor:pointer}
.filter-toggle .plus{font-size:18px;letter-spacing:0}
.filter-toggle.has-filter:after{content:'';width:8px;height:8px;border-radius:50%;background:#2fd8e0}
.filter-toggle:focus-visible,.sort select:focus-visible{outline:3px solid #087d83;outline-offset:2px}
body.catalog-page .sort{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 6px 0 18px;margin:0;border:1px solid #29383e;border-left:0;background:#fff;font:600 13px 'DM Sans',Arial,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#29383e}
body.catalog-page .sort select{border:0;background:transparent;min-height:46px;padding:0 6px;font:500 14px 'DM Sans',Arial,sans-serif;letter-spacing:0;text-transform:none;color:#29383e;cursor:pointer}
.view-toggle{display:flex;align-items:center;gap:4px;margin-left:auto}
.view-toggle button{position:relative;min-width:44px;min-height:44px;display:inline-flex;align-items:flex-start;justify-content:center;padding-top:12px;background:transparent;border:0;color:#7a8b8c;cursor:pointer}
.view-toggle button svg{width:26px;height:18px;fill:currentColor}
.view-toggle button sup{font:600 11px 'DM Sans',Arial,sans-serif;margin:-2px 0 0 2px}
.view-toggle button[aria-pressed=true]{color:#29383e}
.view-toggle button[aria-pressed=true] svg{outline:0}
.view-toggle button:focus-visible{outline:3px solid #087d83;outline-offset:2px}
/* Panel «Filtro»: hoja blanca bajo la barra, con la página atenuada detrás. */
body.catalog-page .catalog-controls{position:relative}
.filter-overlay{position:fixed;inset:0;z-index:55;background:rgba(15,25,27,.5)}
.filter-overlay[hidden]{display:none}
.filter-panel{position:absolute;top:100%;left:0;z-index:60;width:min(920px,100%);max-height:min(72vh,640px);overflow:auto;background:#fff;box-shadow:0 24px 60px rgba(0,0,0,.28)}
.filter-panel[hidden]{display:none}
.filter-columns{display:grid;grid-template-columns:1.25fr 1fr;gap:0 44px;padding:22px 24px 8px}
.filter-title{margin:0 0 12px;padding-bottom:12px;border-bottom:1px solid #dbe3e2;font:500 18px 'DM Sans',Arial,sans-serif;color:#29383e}
.filter-types{display:flex;flex-direction:column}
.filter-panel .check{display:flex;align-items:center;gap:12px;min-height:40px;font:500 14px 'DM Sans',Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#4b5b5d;cursor:pointer}
.filter-panel .check input{appearance:none;flex:none;width:18px;height:18px;margin:0;border:1px solid #9fb0b0;background:#fff;cursor:pointer;display:grid;place-content:center}
.filter-panel .check input:checked{background:#29383e;border-color:#29383e}
.filter-panel .check input:checked::after{content:'';width:9px;height:5px;border:2px solid #fff;border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px)}
.filter-panel .check input:focus-visible{outline:3px solid #087d83;outline-offset:2px}
.filter-actions{display:flex;align-items:center;gap:26px;margin-top:14px;padding:20px 24px 24px;border-top:1px solid #dbe3e2}
.filter-apply{min-height:48px;padding:0 38px;background:#29383e;color:#fff;border:0;font:600 13px 'DM Sans',Arial,sans-serif;letter-spacing:.3em;text-transform:uppercase;cursor:pointer}
.filter-apply:hover{background:#1f2c31}
.filter-clear{background:none;border:0;border-bottom:1px solid #29383e;padding:2px 0;font:500 16px 'DM Sans',Arial,sans-serif;color:#29383e;cursor:pointer}
.filter-apply:focus-visible,.filter-clear:focus-visible{outline:3px solid #087d83;outline-offset:3px}
body.catalog-page .search-row{display:flex;align-items:center;gap:14px;margin:18px 0 22px}
body.catalog-page #products{--cols:4;display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:48px 24px;grid-auto-flow:dense}
body.catalog-page #products[data-cols="1"]{--cols:1}body.catalog-page #products[data-cols="2"]{--cols:2}body.catalog-page #products[data-cols="3"]{--cols:3}
body.catalog-page #products .search-empty,body.catalog-page #products .store-loading{grid-column:1/-1}
/* Recuadro alto (2:3) gris claro con la foto grande y centrada. */
body.catalog-page .product-face{aspect-ratio:2/3;min-height:0!important;padding:0;background:#f3f3f3;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
body.catalog-page .product-face .face-top,body.catalog-page .product-face .face-bottom{display:none}
body.catalog-page .product-photo{width:88%;height:84%;object-fit:contain}
/* Los combos tienen el mismo recuadro que el resto; sus fotos se superponen para que entren grandes. */
body.catalog-page .combo-photo-pair{width:96%;height:72%;gap:0;margin:0;justify-content:center}
body.catalog-page .combo-photo-pair img{flex:0 0 58%;width:58%;max-width:none;height:100%;object-fit:contain;object-position:center;margin:0}
body.catalog-page .combo-photo-pair img:not(:first-child){margin-left:-20%}
/* Con tres fotos: las laterales atrás y la del medio adelante, más grande. */
body.catalog-page .combo-photo-pair:has(img:nth-child(3)){position:relative;display:block}
body.catalog-page .combo-photo-pair:has(img:nth-child(3)) img{position:absolute;margin:0;height:auto;max-width:none;object-fit:contain}
body.catalog-page .combo-photo-pair:has(img:nth-child(3)) img:nth-child(1){left:0;top:4%;width:54%}
body.catalog-page .combo-photo-pair:has(img:nth-child(3)) img:nth-child(3){right:0;top:4%;width:54%}
body.catalog-page .combo-photo-pair:has(img:nth-child(3)) img:nth-child(2){left:50%;transform:translateX(-50%);bottom:2%;width:72%;z-index:2}
body.catalog-page .combo-photo-pair img:nth-child(2){position:relative;z-index:1}
body.catalog-page .product-info{padding:16px 0 0}
body.catalog-page .product-info h3{font-size:17px;line-height:1.3}
@media(prefers-reduced-motion:no-preference){body.catalog-page .product-card{animation:card-in .5s ease both}@keyframes card-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}}
@media(max-width:760px){.filter-panel{width:100%}.filter-columns{grid-template-columns:1fr;padding:18px 16px 4px}.filter-actions{padding:16px;position:sticky;bottom:0;background:#fff;margin-top:6px}.filter-group+.filter-group{margin-top:18px}body.catalog-page #products{gap:32px 12px}body.catalog-page .catalog-controls{flex-direction:row;flex-wrap:wrap;justify-content:flex-start;align-items:center;row-gap:6px}.filter-toggle{padding:0 12px;gap:8px;font-size:12px;letter-spacing:.1em}body.catalog-page .sort{flex:1 1 0;min-width:0;padding:0 4px 0 10px;gap:6px;font-size:11px;letter-spacing:.1em}body.catalog-page .sort span{white-space:nowrap}body.catalog-page .sort select{flex:1;min-width:0;max-width:none;font-size:13px}body.catalog-page .view-toggle{width:100%;justify-content:flex-end}}