/* Trang cửa hàng, danh mục và thẻ sản phẩm (mockup category.html).
   .card/.grid/.badge/.btn nằm ở base.css; file này thêm khung hai cột, thanh công cụ và phần riêng của thẻ. */

/* khung hai cột: cột danh mục + kết quả */
.layout{display:grid;grid-template-columns:240px minmax(0,1fr);gap:40px;align-items:start;margin-bottom:8px}
.layout.no-side{grid-template-columns:minmax(0,1fr)}
.layout>*{min-width:0}
.layout .filters{position:sticky;top:150px;display:grid;grid-template-columns:minmax(0,1fr);gap:28px}
.fgroup{min-width:0}
.fgroup .fh{font-size:13px;letter-spacing:.08em;text-transform:uppercase;margin:0 0 10px}
.fgroup ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.fgroup li>a{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:var(--r);font-size:14.5px;line-height:1.35}
.fgroup li>a:hover{background:var(--bg);color:var(--ink)}
.fgroup li>a.on{background:#fdf0f0;color:var(--red-ink);font-weight:600}
.fgroup .n{margin-left:auto;color:var(--muted);font-size:12.5px;font-weight:400}

/* dòng kết quả + sắp xếp */
.layout .tools{display:flex;justify-content:space-between;align-items:center;gap:10px 16px;margin:0 0 20px;flex-wrap:wrap}
.layout .tools .woocommerce-result-count{float:none;margin:0;color:var(--muted);font-size:14.5px}
.layout .tools .woocommerce-ordering{float:none;margin:0;max-width:100%}
.layout .tools select.orderby{height:42px;max-width:100%;border:1px solid var(--line);border-radius:var(--r);padding:0 34px 0 14px;background:#fff;font-size:14.5px;cursor:pointer}
.layout .tools select.orderby:hover{border-color:var(--ink)}
.layout .woocommerce-info,.layout .woocommerce-message,.layout .woocommerce-error{margin:0 0 20px;border-radius:var(--r)}

/* lưới: 3 cột cạnh cột danh mục */
.layout .grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:0;padding:0;list-style:none}
.layout.no-side .grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid.htc-products>.card{margin:0;width:auto;float:none}
.card .ph img{width:auto;max-width:100%;max-height:100%;object-fit:contain}
.card .spec{margin:0;font-size:13px;line-height:1.4;color:var(--muted)}
.card p.stock{margin:0;font-size:12.5px;font-weight:600;color:#17692e;display:flex;align-items:center;gap:6px}
.card p.stock::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.card p.stock.out,.card p.stock.back{color:var(--muted)}
/* thẻ nằm trong .woocommerce div.product (sản phẩm liên quan): thắng luật `.stock{color:#958e09}` của WC */
.woocommerce div.product li.card p.stock{color:#17692e}
.woocommerce div.product li.card p.stock.out,.woocommerce div.product li.card p.stock.back{color:var(--muted)}
.card .price .from{font-size:13px;color:var(--muted)}
.card .price s{text-decoration:line-through}

/* nút trên thẻ nằm trên lớp liên kết phủ cả thẻ (h3 a::after) */
.card .act{margin-top:8px;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;position:relative;z-index:2}
.card .act .btn{position:relative;width:100%;height:40px;padding:0 12px;font-size:14px}
.card .act .btn.loading{opacity:.6;pointer-events:none}
.card .act .btn.added{border-color:#1a7f37;color:#1a7f37}
.card .act .btn.added:hover{background:#1a7f37;border-color:#1a7f37;color:#fff}
.card .act .btn::after{display:none}
.card .act a.added_to_cart{font-size:13px;font-weight:600;color:var(--red-ink);text-decoration:underline;text-underline-offset:2px;padding:0}

.layout .pagination .nav-links{margin-top:40px}

@media (max-width:1100px){
	.layout{grid-template-columns:200px minmax(0,1fr);gap:28px}
	.layout .grid,.layout.no-side .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
	.layout.no-side .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:900px){
	/* cột danh mục thành một hàng nút cuộn ngang phía trên lưới */
	.layout,.layout.no-side{grid-template-columns:minmax(0,1fr);gap:18px}
	.layout .filters{position:static;gap:0}
	.fgroup .fh{margin-bottom:8px}
	.fgroup ul{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin}
	.fgroup li{flex:none}
	.fgroup li>a{border:1px solid var(--line);white-space:nowrap;padding:8px 14px}
	.fgroup li>a.on{border-color:var(--red-ink)}
	.layout .grid,.layout.no-side .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:640px){
	.layout .grid,.layout.no-side .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
	.layout .tools select.orderby{height:40px}
	.card .act .btn{height:38px;font-size:13px;padding:0 8px;gap:6px}
	.card .spec{font-size:12.5px}
}