@layer components{.shop-by-animal-section{padding-block:var(--space-12)}.shop-by-animal-header{margin-block-end:var(--space-8);text-align:center}.shop-by-animal-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-4)}@media (min-width:30em){.shop-by-animal-grid{grid-template-columns:repeat(3,1fr)}}@media (min-width:48em){.shop-by-animal-grid{grid-template-columns:repeat(4,1fr)}}.animal-type-item{--card-accent:var(--sand-300);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:var(--space-2);padding-block:var(--space-6);padding-inline:var(--space-4);color:var(--text-primary);text-align:center;text-decoration:none;background-color:var(--background-primary);border-inline-start:4px solid var(--card-accent);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);transition:box-shadow var(--transition-fast),transform var(--transition-fast)}@media (hover:hover) and (pointer:fine){.animal-type-item:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}}.animal-type-item .animal-icon{display:inline-flex;color:var(--purple-700)}.animal-type-item .animal-name{font-size:var(--text-base);font-weight:var(--font-semibold);line-height:var(--leading-tight)}.animal-type-item[data-animal=dog]{--card-accent:var(--accent-dog)}.animal-type-item[data-animal=cat]{--card-accent:var(--accent-cat)}.animal-type-item[data-animal=bird]{--card-accent:var(--accent-bird)}.animal-type-item[data-animal=fish]{--card-accent:var(--accent-fish)}.animal-type-item[data-animal=rabbit]{--card-accent:var(--accent-rabbit)}.animal-type-item[data-animal=snake]{--card-accent:var(--accent-snake)}.animal-type-item[data-animal=hamster]{--card-accent:var(--accent-small-animal)}}