/* ==========================================================================
   Components — Sections
   ========================================================================== */

/* Section Header
   ========================================================================== */

.section-title {
    font-size: var(--fs-xl);
    font-weight: 700;
    color: var(--color-text-primary);
}

.section-description {
    max-width: 36rem;
    font-size: var(--fs-md);
    color: var(--color-text-secondary);
}

/* Hero
   ========================================================================== */

.hero__heading {
    margin-bottom: var(--space-md);
    font-size: clamp(var(--fs-xl), 5vw, var(--fs-3xl));
    font-weight: 700;
    line-height: 1.15;
    color: var(--color-text-primary);
}

.hero__text {
    max-width: 32rem;
    margin-bottom: var(--space-lg);
    font-size: var(--fs-md);
    color: var(--color-text-secondary);
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
}

/* Categories
   ========================================================================== */

.category-card {
    display: flex;
    flex-direction: column;
    min-height: var(--category-card-height);
    overflow: hidden;
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-lg);
    transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.category-card:hover {
    border-color: var(--color-brand-accent);
    box-shadow: var(--shadow-md);
}

.category-card__image {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    object-fit: cover;
}

.category-card__name {
    flex-shrink: 0;
    padding: var(--space-md);
    text-align: center;
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--color-text-primary);
}

/* Featured Products
   ========================================================================== */

.product-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding: var(--space-md);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-lg);
    transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.product-card:hover {
    border-color: var(--color-brand-accent);
    box-shadow: var(--shadow-md);
}

.product-card__image {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: var(--radius-md);
}

.product-card__name {
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--color-text-primary);
}

.product-card__category {
    font-size: var(--fs-xs);
    color: var(--color-text-secondary);
}

.product-card__price {
    font-size: var(--fs-md);
    font-weight: 700;
    color: var(--color-text-primary);
}

.product-card__button {
    margin-top: var(--space-sm);
}

.product-card__badge {
    position: absolute;
    top: var(--space-sm);
    left: var(--space-sm);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-full);
    background-color: var(--color-brand-accent);
    color: var(--color-text-primary);
    font-size: var(--fs-xs);
    font-weight: 700;
}

.product-card__wishlist {
    position: absolute;
    top: var(--space-sm);
    right: var(--space-sm);
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-full);
    background-color: var(--color-surface);
    color: var(--color-text-primary);
    box-shadow: var(--shadow-md);
    transition: background-color var(--transition-fast);
}

.product-card__wishlist:hover {
    background-color: var(--color-surface-alt);
}

.product-card__wishlist-icon {
    width: var(--icon-size);
    height: var(--icon-size);
    fill: none;
    stroke: currentColor;
    transition: fill var(--transition-fast), color var(--transition-fast);
}

/* Active state reads off aria-pressed — the same value assistive tech already needs,
   so there's one source of truth instead of a class kept in sync with it. */
.product-card__wishlist[aria-pressed="true"] .product-card__wishlist-icon {
    fill: var(--color-brand-accent);
    color: var(--color-brand-accent);
}

/* Why Choose Us
   ========================================================================== */

.feature-card {
    display: block;
    padding: var(--space-lg);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-lg);
    color: inherit;
    text-decoration: none;
    transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.feature-card:hover {
    border-color: var(--color-brand-accent);
    box-shadow: var(--shadow-md);
}

.feature-card__icon {
    width: var(--icon-size);
    height: var(--icon-size);
    margin-bottom: var(--space-md);
    color: var(--color-brand-primary);
}

.feature-card__title {
    margin-bottom: var(--space-xs);
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--color-text-primary);
}

.feature-card__description {
    font-size: var(--fs-sm);
    color: var(--color-text-secondary);
}