.directory-page{max-width:var(--max-width-wide);margin:0 auto;padding:var(--space-12) var(--space-4) var(--space-16)}.directory-eyebrow{font-size:var(--text-xs);font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--color-primary);margin-bottom:var(--space-2)}.directory-page h1{font-size:var(--text-4xl);font-weight:700;letter-spacing:.02em;color:var(--color-text);margin-bottom:var(--space-2);line-height:var(--leading-tight)}.directory-page .subtitle{font-size:var(--text-base);color:var(--color-text-light);margin-bottom:var(--space-8);line-height:var(--leading-relaxed)}.directory-filter-pills{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;padding-bottom:var(--space-6);border-bottom:1px solid var(--color-border);margin-bottom:var(--space-6)}.directory-filter-pill{appearance:none;background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:var(--space-2) var(--space-3);font-size:var(--text-sm);font-family:var(--font-body);color:var(--color-text);cursor:pointer;white-space:nowrap;transition:border-color var(--transition-fast),box-shadow var(--transition-fast);line-height:1.4;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23555568' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right var(--space-3) center;padding-right:calc(var(--space-3) + 18px)}.directory-filter-pill:hover{border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-light)}.directory-filter-pill:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-light)}.directory-filter-pill[data-active=true],.directory-filter-pill:not([value=""]):has(option:checked:not([value=""])){border-color:var(--color-primary);color:var(--color-primary)}.directory-clear-btn{appearance:none;background:var(--color-primary-light);border:1px solid transparent;border-radius:var(--radius-sm);padding:var(--space-2) var(--space-3);font-size:var(--text-sm);font-family:var(--font-body);color:var(--color-primary);font-weight:600;cursor:pointer;transition:background var(--transition-fast),color var(--transition-fast);white-space:nowrap}.directory-clear-btn:hover{background:var(--color-primary);color:#fff}.directory-meta{display:flex;align-items:center;gap:var(--space-4);font-size:var(--text-sm);color:var(--color-text-muted);margin-bottom:var(--space-6);flex-wrap:wrap}.directory-meta>span:first-child{font-weight:600;color:var(--color-text)}.directory-freshness{margin-left:auto}.directory-sort-label{display:flex;align-items:center;gap:var(--space-2);color:var(--color-text-muted)}.directory-sort{appearance:none;border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:var(--space-1) var(--space-6) var(--space-1) var(--space-2);font-size:var(--text-sm);font-family:var(--font-body);color:var(--color-text);background:#fff;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23555568' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right var(--space-2) center;transition:border-color var(--transition-fast)}.directory-sort:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-light)}.directory-results{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:var(--space-4)}.directory-shoe-card{display:flex;gap:var(--space-4);background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-md);border-top:3px solid var(--color-primary);padding:var(--space-4);box-shadow:var(--shadow-sm);transition:box-shadow var(--transition-normal),transform var(--transition-normal);position:relative}.directory-shoe-card:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}.directory-shoe-image-wrap{flex-shrink:0}.directory-shoe-image{width:96px;height:96px;object-fit:contain;object-position:center;border-radius:var(--radius-sm);display:block;padding:4px;background:var(--color-bg-alt)}.directory-shoe-image-placeholder{width:96px;height:96px;background:var(--color-primary-light);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:var(--text-2xl);font-weight:700;color:var(--color-primary);letter-spacing:0}.directory-shoe-info{flex:1;min-width:0;display:flex;flex-direction:column}.directory-shoe-header{display:flex;align-items:flex-start;gap:var(--space-2);flex-wrap:wrap;margin-bottom:var(--space-1)}.directory-shoe-name{font-weight:700;font-size:var(--text-base);color:var(--color-text);line-height:var(--leading-tight);flex:1;min-width:0}.directory-review-badge{display:inline-flex;align-items:center;gap:.25em;background:var(--color-primary-light);color:var(--color-primary);border-radius:var(--radius-sm);padding:var(--space-1) var(--space-2);font-size:var(--text-xs);font-weight:600;text-decoration:none;white-space:nowrap;flex-shrink:0;transition:background var(--transition-fast),color var(--transition-fast)}.directory-review-badge:hover{background:var(--color-primary);color:#fff;text-decoration:none}.directory-shoe-meta{color:var(--color-text-muted);font-size:var(--text-sm);margin-bottom:var(--space-2);text-transform:capitalize}.directory-tags{display:flex;flex-wrap:wrap;gap:var(--space-1);margin-bottom:var(--space-2)}.directory-tag{background:var(--color-bg-alt);border-radius:var(--radius-sm);padding:1px var(--space-2);font-size:var(--text-xs);color:var(--color-text-light);font-weight:500;letter-spacing:.02em;text-transform:capitalize}.directory-shoe-availability{font-size:var(--text-xs);color:var(--color-text-muted);margin-bottom:var(--space-2)}.directory-retailer-buttons{margin-top:auto;padding-top:var(--space-2)}.directory-from-price{display:block;font-size:var(--text-sm);font-weight:600;color:var(--color-text);margin-bottom:var(--space-2)}.directory-buttons-row{display:flex;flex-wrap:wrap;gap:var(--space-2)}.directory-retailer-btn{display:inline-block;background:var(--color-primary);color:#fff;border-radius:var(--radius-sm);padding:var(--space-2) var(--space-3);font-size:var(--text-sm);font-weight:600;font-family:var(--font-body);text-decoration:none;white-space:nowrap;transition:background var(--transition-fast);letter-spacing:.01em}.directory-retailer-btn:hover{background:var(--color-primary-dark);color:#fff;text-decoration:none}.directory-size-confirm{font-size:var(--text-xs);font-weight:500;margin-top:var(--space-2);padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);display:inline-block}.directory-size-confirm--available{color:#16a34a;background:#f0fdf4}.directory-size-confirm--unavailable{color:#b91c1c;background:#fef2f2}.directory-empty{text-align:center;padding:var(--space-16) var(--space-4);color:var(--color-text-muted);grid-column:1 / -1}.directory-empty p:first-child{font-size:var(--text-lg);font-weight:600;color:var(--color-text);margin-bottom:var(--space-2)}.directory-loading{text-align:center;padding:var(--space-16) var(--space-4);color:var(--color-text-muted);font-size:var(--text-sm)}@media(max-width:600px){.directory-page h1{font-size:var(--text-3xl)}.directory-results{grid-template-columns:1fr}.directory-shoe-card{flex-direction:column}.directory-shoe-image,.directory-shoe-image-placeholder{width:100%;height:160px;object-fit:contain;object-position:center}.directory-freshness{margin-left:0;width:100%}}