/* Metal Roller Kalemler kategori sayfası — card-category.css üzerine */
.pen-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.pen-card .category-image img{height:240px;padding:10px}
.pen-card .category-product-top small{font-weight:700;color:#17334e;font-size:11px;letter-spacing:.02em}
.pen-card h3{font-size:18px}
.pen-card .category-product-copy p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pen-card .category-product-copy ul{display:flex;flex-wrap:wrap;gap:6px;list-style:none;padding:0;margin:0}
.pen-card .category-product-copy li{font-size:11px;padding:4px 8px;border-radius:3px;background:#f1f5fa;color:#41566d}
.pen-card li.pen-in-stock{background:#e8f6ee;color:#16683c}
.pen-card li.pen-out-stock{background:#fdeef3;color:#a3134f}
.pen-filters{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:0 0 18px}
.pen-search{flex:1 1 260px;display:flex;align-items:center;gap:8px;background:#fff;border:1px solid #cfdae6;border-radius:6px;padding:0 12px}
.pen-search .material-symbols-outlined{font-size:20px;color:#637a94}
.pen-search input{flex:1;min-width:0;border:0;outline:0;background:none;padding:12px 0;font:14px 'DM Sans',sans-serif;color:#0a2540}
.pen-search:focus-within,.pen-sort select:focus-visible,.pen-check input:focus-visible{outline:3px solid #e52182;outline-offset:2px}
.pen-check{display:flex;align-items:center;gap:8px;font-size:13px;color:#33445b;cursor:pointer}
.pen-check input{width:17px;height:17px;accent-color:#0b72bd}
.pen-sort{display:flex;align-items:center;gap:8px;font-size:13px;color:#52667e}
.pen-sort select{border:1px solid #cfdae6;border-radius:6px;padding:10px 12px;background:#fff;font:13px 'DM Sans',sans-serif;color:#0a2540}
.pen-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.pen-empty{padding:28px;background:#fff;border:1px dashed #cfdae6;border-radius:6px;color:#52667e;font-size:14px;text-align:center}
@media(max-width:1250px){.pen-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.pen-grid{grid-template-columns:1fr}.pen-sort,.pen-check{flex:1 1 100%}.pen-sort select{flex:1}}
.pen-card .pen-ask{font-size:20px}
/* Detaylı filtre (defterler) */
.facet-panel{background:#fff;border:1px solid #cfdae6;border-radius:8px;margin:0 0 20px}
.facet-panel>summary{display:flex;align-items:center;gap:8px;padding:14px 16px;font:700 14px 'DM Sans',sans-serif;color:#0a2540;cursor:pointer;list-style:none}
.facet-panel>summary::-webkit-details-marker{display:none}
.facet-panel>summary::after{content:'';width:8px;height:8px;margin:0 4px 4px auto;border-right:2px solid #637a94;border-bottom:2px solid #637a94;transform:rotate(45deg);transition:transform .2s}
.facet-panel[open]>summary::after{transform:translateY(4px) rotate(225deg)}
.facet-panel>summary .material-symbols-outlined{font-size:20px;color:#0b72bd}
.facet-panel>summary:focus-visible{outline:3px solid #e52182;outline-offset:2px;border-radius:8px}
.facet-active{min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:#e52182;color:#fff;font-size:12px;display:inline-grid;place-items:center}
.facet-active[hidden]{display:none}
.facet-body{border-top:1px solid #e3eaf2;padding:6px 16px 16px}
.facet-group{border:0;margin:0;padding:12px 0 0;min-width:0}
.facet-group+.facet-group{border-top:1px dashed #e3eaf2;margin-top:12px}
.facet-group legend{padding:0 0 8px;font:700 11px 'DM Sans',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#52667e}
.facet-options{display:flex;flex-wrap:wrap;gap:8px}
.facet-chip{position:relative;display:inline-flex;align-items:center;gap:8px;padding:7px 10px;border:1px solid #cfdae6;border-radius:999px;background:#fff;font:13px 'DM Sans',sans-serif;color:#33445b;cursor:pointer;transition:border-color .15s,background .15s}
.facet-chip:hover{border-color:#0b72bd}
.facet-chip input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.facet-chip:has(input:focus-visible){outline:3px solid #e52182;outline-offset:2px}
.facet-chip:has(input:checked){border-color:#0b72bd;background:#eaf3fb;color:#0a2540;font-weight:700}
.facet-chip:has(input:checked)::before{content:'';width:5px;height:10px;margin:-3px 1px 0 2px;border-right:2px solid #0b72bd;border-bottom:2px solid #0b72bd;transform:rotate(45deg)}
.facet-chip.is-off{opacity:.42;cursor:not-allowed}
.facet-chip.is-off:hover{border-color:#cfdae6}
.facet-label small{display:block;font-size:10.5px;font-weight:400;color:#637a94;line-height:1.2}
.facet-swatch{width:16px;height:16px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 1px rgba(10,37,64,.25)}
.facet-n{font-size:11px;font-weight:700;color:#637a94;background:#f1f5fa;border-radius:10px;padding:1px 7px}
.facet-actions{display:flex;justify-content:flex-end;margin-top:14px}
.facet-clear{border:1px solid #cfdae6;background:#fff;border-radius:6px;padding:9px 14px;font:700 13px 'DM Sans',sans-serif;color:#a3134f;cursor:pointer}
.facet-clear:disabled{color:#9aabbd;cursor:default}
.facet-clear:focus-visible{outline:3px solid #e52182;outline-offset:2px}
@media(max-width:560px){.facet-body{padding:4px 12px 14px}.facet-chip{padding:6px 9px;font-size:12.5px}.facet-clear{width:100%}}

.pen-card[hidden],.pen-empty[hidden]{display:none!important}