/* ==== Letter Nav ==== */
.letter-nav {
    display         : flex;
    justify-content : center;
    flex-wrap       : wrap;
    gap             : 0.25rem 0.75rem;
    padding         : 1.5rem 0;
}

.letter-nav-letter {
    font-weight     : 400;
    text-decoration : none;
    color           : var(--color-dark);
    transition      : color 0.1s;
}

a.letter-nav-letter:hover {
    color : var(--color-contrast-medium);
}

.letter-nav-letter-active {
    font-weight : 700;
}

.letter-nav-letter-disabled {
    color  : #cccccc;
    cursor : default;
}

/* ==== Category Letter Grid ==== */
.category-letter-grid {
    display         : flex;
    flex-wrap       : wrap;
    justify-content : center;
    align-items     : flex-start;
    gap             : 0.625rem;
    padding         : 0.5rem 0 2rem;
}

.category-letter-item {
    flex             : 0 0 calc((100% - 3 * 0.625rem) / 4);
    background-color : #ffffff;
    border           : 1px solid #e0e0e0;
    border-radius    : 20px;
    font-size        : 0.875rem;
    overflow         : hidden;
    transition       : border-color 0.15s;
}

.category-letter-item[open] {
    border-color : var(--color-contrast-medium);
}

.category-letter-item-header {
    display         : flex;
    align-items     : center;
    justify-content : space-between;
    gap             : 0.5rem;
    padding         : 0.75rem 1rem;
    cursor          : pointer;
    list-style      : none;
    color           : var(--color-dark);
    user-select     : none;
}

.category-letter-item-header::-webkit-details-marker {
    display : none;
}

.category-letter-item-header:hover {
    color : var(--color-contrast-medium);
}

.category-letter-item-chevron {
    color       : #aaaaaa;
    font-size   : 0.75rem;
    flex-shrink : 0;
    transition  : transform 0.2s;
}

.category-letter-item[open] .category-letter-item-chevron {
    transform : rotate(180deg);
}

.category-letter-item-subcats {
    list-style : none;
    margin     : 0;
    padding    : 0 0 0.5rem;
    border-top : 1px solid #f0f0f0;
    max-height : 200px;
    overflow-y : auto;
}

.category-letter-item-subcats li a {
    display         : block;
    padding         : 0.4rem 1rem;
    color           : var(--color-dark);
    text-decoration : none;
    font-size       : 0.8125rem;
    transition      : color 0.1s, background-color 0.1s;
}

.category-letter-item-subcats li a:hover {
    color            : var(--color-contrast-medium);
    background-color : var(--bg-color-default-accent);
}

@media (max-width : 768px) {
    .category-letter-item {
        flex-basis : calc((100% - 0.625rem) / 2);
    }
}

@media (max-width : 480px) {
    .category-letter-item {
        flex-basis : 100%;
    }
}

/* ==== Category List Heading ==== */
.category-list-heading {
    text-align     : center;
    font-size      : clamp(1.5rem, 3vw, 2rem);
    font-weight    : 700;
    text-transform : uppercase;
    letter-spacing : 0.05em;
    margin         : 2rem 0 1.5rem;
    color          : var(--color-dark);
}

/* ==== Category Cards Grid ==== */
.category-cards-grid {
    display               : grid;
    grid-template-columns : repeat(4, 1fr);
    gap                   : 0.75rem;
    padding-bottom        : 3rem;
}

.category-card {
    background-color : #ffffff;
    border           : 1px solid #e0e0e0;
    border-radius    : 12px;
    padding          : 1rem;
    display          : flex;
    flex-direction   : column;
    gap              : 0.25rem;
}

.category-card-header {
    display         : flex;
    align-items     : center;
    gap             : 0.5rem;
    text-decoration : none;
    color           : var(--color-dark);
    margin-bottom   : 0.5rem;
    
    &:hover {
        text-decoration : none;
    }
}

.category-card-header:hover .category-card-title {
    color : var(--color-contrast-medium);
}

.category-card-icon {
    color       : var(--color-dark);
    font-size   : 0.9rem;
    flex-shrink : 0;
}

.category-card-title {
    font-size   : 0.875rem;
    font-weight : 700;
    color       : var(--color-dark);
    line-height : 1.3;
}

.category-card-shop {
    display         : flex;
    align-items     : center;
    gap             : 0.5rem;
    padding         : 0.3rem 0;
    border-top      : 1px solid #f0f0f0;
    text-decoration : none;
    color           : var(--color-dark);
    font-size       : 0.8125rem;
    
    &:hover {
        text-decoration : none;
    }
}

.category-card-shop:hover {
    color : var(--color-contrast-medium);
}

.category-card-shop-name {
    flex          : 1;
    overflow      : hidden;
    white-space   : nowrap;
    text-overflow : ellipsis;
}

.category-card-shop-rating {
    display     : flex;
    align-items : center;
    gap         : 0.2rem;
    white-space : nowrap;
    font-weight : 600;
    flex-shrink : 0;
    
    i {
        color : var(--color-yellow);
    }
}

.category-card-shop-arrow {
    color       : #aaaaaa;
    font-size   : 0.7rem;
    flex-shrink : 0;
}

@media (max-width : 1024px) {
    .category-cards-grid {
        grid-template-columns : repeat(3, 1fr);
    }
}

@media (max-width : 768px) {
    .category-cards-grid {
        grid-template-columns : repeat(2, 1fr);
    }
}

@media (max-width : 480px) {
    .category-cards-grid {
        grid-template-columns : 1fr;
    }
}