/* ===== Página de categoría (DOGBOX) ===== */
.cat-page{max-width:1440px;margin:0 auto;padding:20px 16px 8px}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:14px;color:#6b6b5c;margin-bottom:14px}
.crumbs a{color:inherit;text-decoration:none}.crumbs a:hover{color:var(--olive-700);text-decoration:underline}
.crumbs b{font-weight:600;color:var(--ink)}
.cat-head h1{font:800 clamp(34px,6vw,56px)/1 var(--font-head);text-transform:uppercase;color:var(--olive-900);margin:0 0 12px}
.cat-intro{max-width:760px;margin:0 0 20px;color:#4a4a3c;font-size:17px;line-height:1.55}
.cat-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:20px}
.cat-bar p{margin:0;font-weight:600}
.cat-bar form{display:flex;align-items:center;gap:10px}
.cat-bar label{font-size:14px;color:#6b6b5c}
.cat-bar select{padding:9px 12px;border:1px solid #b9b9a8;border-radius:8px;background:#fff;font:500 15px var(--font-body)}

.cat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media(min-width:700px){.cat-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}}
@media(min-width:1100px){.cat-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}}
@media(min-width:1500px){.cat-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
.cat-grid .product{width:auto;min-width:0;border:1px solid var(--line);border-radius:8px;background:#fff;padding:0 0 8px;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.05);cursor:pointer;transition:border-color .25s,box-shadow .25s}
.cat-grid .product__img{display:block;height:auto;aspect-ratio:1/1;background:linear-gradient(#f4f4f2,#e8e8e4);overflow:hidden}
.cat-grid .product__img img{width:100%;height:100%;object-fit:cover;display:block}
.cat-grid .product h3{font:600 16px/1.25 var(--font-body);padding:10px 12px 0;min-height:42px;color:var(--olive-900)}
.cat-grid .product h3 a{color:inherit;text-decoration:none}
.cat-grid .price{padding:6px 12px 10px;font-size:19px}
.cat-grid .product .btn{width:calc(100% - 16px);margin:0 8px}
@media(hover:hover){.cat-grid .product:hover{border-color:var(--olive-700);box-shadow:0 0 0 1px var(--olive-700),0 6px 18px rgba(0,0,0,.12)}.cat-grid .product:hover .img-alt{opacity:1}}
@media(max-width:560px){.cat-grid .product h3{font-size:14px;min-height:38px}.cat-grid .product .btn{padding:9px 4px;font-size:14px}}

.cat-vacio,.cat-empty{padding:40px 0;color:#4a4a3c}
.pager{display:flex;justify-content:center;flex-wrap:wrap;gap:6px;margin:34px 0 8px}
.pager a{min-width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;border:1.5px solid var(--line);border-radius:50%;background:#fff;color:var(--ink);text-decoration:none;font-weight:600}
.pager a:hover{border-color:var(--olive-700)}.pager a.on{background:var(--olive-700);border-color:var(--olive-700);color:#fff}

.more{margin-top:48px;padding-top:28px;border-top:1px solid var(--line)}
.more h2{font:800 28px var(--font-head);text-transform:uppercase;color:var(--olive-900);margin:0 0 16px}

/* Secciones: mismo carrusel y tarjetas que las categorías de la portada (styles.css), alineado con el contenido */
.cat-page .sec-cats{--pad:0px;max-width:none;margin-bottom:8px}
.sec-cats .section__head{padding-bottom:10px}
.sec-cats .cat{text-decoration:none}
.sec-cats .cat.on::before{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;box-shadow:inset 0 0 0 4px var(--olive-900);pointer-events:none}
.sec-cats .cat.on i{opacity:1;transform:none}
@media(hover:none){.sec-cats .cat:not(.on) i{opacity:0}}

/* Formulario de buscar.php */
.buscar-form{display:flex;max-width:560px;border:2px solid var(--olive-300);border-radius:14px;overflow:hidden;background:#fff;margin:0 0 6px}
.buscar-form input{flex:1;min-width:0;border:0;padding:13px 16px;font:400 17px var(--font-body);outline:0;background:transparent}
.buscar-form button{border:0;background:var(--olive-700);color:#fff;padding:0 24px;font:700 17px var(--font-head);letter-spacing:1px;text-transform:uppercase;cursor:pointer}
.buscar-form button:hover{background:var(--olive-900)}
@media(min-width:900px){.cat-page{padding-left:var(--dpad,28px);padding-right:var(--dpad,28px);max-width:none}}