/* Hero Section Styling */
.y-l-hero-section {
    position: relative;
    width: var(--y-percent-100);
    height: var(--y-height-90vh);
    min-height: var(--y-size-600);
    background-image: url('/assets/home-hero.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
}

.y-l-hero-content {
    height: var(--y-percent-100);
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    padding-right: var(--y-size-150);
    padding-bottom: var(--y-size-130);
}

.y-c-hero-text-panel {
    display: flex;
    align-items: flex-start;
}

/* --- Perfect Gift Section --- */
.y-l-perfect-gift-section {
    padding-top: var(--y-spacing-60);
    padding-bottom: var(--y-spacing-60);
}

/* Force Grid Layout for Products - Override any conflicting styles */
.y-l-perfect-gift-section .y-l-products-grid,
.y-l-perfect-gift-section #gift-product-container,
#gift-product-container.y-l-products-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    grid-auto-rows: auto !important;
    gap: var(--y-spacing-30) !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    /* Override any flex properties */
    flex-direction: unset !important;
    flex-wrap: unset !important;
    flex-flow: unset !important;
    flex: unset !important;
    /* Override any list styles */
    list-style: none !important;
}

/* Mobile: Single column (up to 768px) */
@media (max-width: 768px) {
    .y-l-perfect-gift-section .y-l-products-grid,
    .y-l-perfect-gift-section #gift-product-container,
    #gift-product-container.y-l-products-grid {
        grid-template-columns: 1fr !important;
        gap: var(--y-spacing-15) !important;
    }
}

/* Tablet: 2 columns (769px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    .y-l-perfect-gift-section .y-l-products-grid,
    .y-l-perfect-gift-section #gift-product-container,
    #gift-product-container.y-l-products-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

.y-c-section-header-centered {
    text-align: center;
    margin-bottom: var(--y-spacing-50);
}

.y-c-gift-title {
    font-family: var(--y-font-family-Cairo);
    font-size: var(--y-font-size-40);
    color: var(--y-color-secondary-text);
    font-weight: var(--y-font-weight-700);
    margin-bottom: var(--y-spacing-10);
}

.y-c-gift-subtitle {
    font-family: var(--y-font-family-Cairo);
    font-size: var(--y-font-size-18);
    color: var(--y-color-secondary-text);
    max-width: 900px;
    margin: 0 auto;
    padding: 0 var(--y-spacing-20);
    line-height: var(--y-line-height-160);
}

/* --- How It Works Section --- */
.y-l-how-it-works-section {
    background-color: var(--y-color-secondary);
    /* Matches the beige background */
    padding-top: var(--y-spacing-60);
    padding-bottom: var(--y-spacing-90);
}

.y-c-section-title {
    font-family: var(--y-font-family-Cairo);
    font-size: var(--y-font-size-40);
    font-weight: var(--y-font-weight-700);
    color: var(--y-color-secondary-text);
    margin-bottom: var(--y-spacing-10);
}

.y-c-section-subtitle {
    font-family: var(--y-font-family-Cairo);
    font-size: var(--y-font-size-18);
    color: var(--y-color-secondary-text);
    font-weight: var(--y-font-weight-500);
    opacity: 0.8;
}

/* Steps Grid */
.y-l-steps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--y-spacing-30);
    margin-top: var(--y-spacing-50);
    align-items: start;
}

/* Step Card Styling */
.y-c-step-card {
    background-color: var(--y-color-background-light);
    border-radius: var(--y-radius-16);
    padding: var(--y-spacing-40) var(--y-spacing-30);
    text-align: center;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--y-spacing-20);
    border: var(--y-border-1) solid var(--y-color-border-blured2);
}

#y-c-step-tall {
    min-height: var(--y-size-370);
}

/* Number Badge */
.y-c-step-number {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    /* Centers the number on the top border */
    width: var(--y-size-50);
    height: var(--y-size-50);
    background-color: var(--y-color-accent);
    color: var(--y-color-secondary-text);
    font-weight: var(--y-font-weight-500);
    font-size: var(--y-font-size-24);
    border-radius: var(--y-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--y-z-2);
}

/* Icon Circle */
.y-c-step-icon {
    width: var(--y-size-90);
    height: var(--y-size-90);
    background-color: var(--y-color-third);
    border-radius: var(--y-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: var(--y-spacing-10);
    margin-bottom: var(--y-spacing-10);
}

.y-c-step-icon i {
    font-size: var(--y-size-40);
    color: var(--y-color-accent);
}

/* Text Styling */
.y-c-step-title {
    font-family: var(--y-font-family-Cairo);
    font-size: var(--y-font-size-24);
    font-weight: var(--y-font-weight-700);
    color: var(--y-color-secondary-text);
    margin-bottom: var(--y-spacing-4);
}

.y-c-step-desc {
    font-size: var(--y-font-size-16);
    color: var(--y-color-secondary-text);
    line-height: var(--y-line-height-160);
    max-width: var(--y-size-260);
    margin: 0 auto;
    opacity: 0.8;
}

/* Image Styling */
.y-c-banner-image-wrapper {
    height: var(--y-percent-100);
    min-height: var(--y-size-400);
    overflow: hidden;
}

.y-c-banner-img {
    width: var(--y-percent-100);
    height: var(--y-percent-100);
    object-fit: cover;
}

/* --- Why Goat Section --- */
.y-l-why-goat-section {
    padding-top: var(--y-spacing-60);
    padding-bottom: var(--y-spacing-90);
}

/* Features Grid */
.y-l-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--y-spacing-30);
    margin-top: var(--y-spacing-50);
}

/* Feature Card Styling */
.y-c-feature-card {
    background-color: var(--y-color-background-light);
    /* White card */
    border-radius: var(--y-radius-16);
    padding: var(--y-spacing-50) var(--y-spacing-30);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--y-spacing-20);
    border: var(--y-border-1) solid var(--y-color-border-blured2);
    transition: var(--y-transition-default);
}

/* Icon Circle Wrapper */
.y-c-feature-icon-circle {
    width: var(--y-size-90);
    height: var(--y-size-90);
    background-color: var(--y-color-third);
    border-radius: var(--y-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--y-spacing-10);
}

.y-c-feature-icon-circle i {
    font-size: var(--y-size-40);
    color: var(--y-color-accent);
    /* Gold color */
}

/* Typography */
.y-c-feature-title {
    font-family: var(--y-font-family-Cairo);
    font-size: var(--y-font-size-24);
    font-weight: var(--y-font-weight-700);
    color: var(--y-color-secondary-text);
    margin: 0;
}

.y-c-feature-desc {
    font-size: var(--y-font-size-16);
    color: var(--y-color-secondary-text);
    opacity: 0.8;
    line-height: var(--y-line-height-160);
    max-width: var(--y-size-280);
    margin: 0 auto;
}


/* Responsive Adjustments */
@media (max-width: 992px) {
    .y-l-hero-section {
        height: var(--y-height-60vh);
        background-position: 70% center;
    }

    .y-c-hero-title {
        font-size: var(--y-font-size-60);
    }

    .y-c-hero-text-panel {
        padding-right: var(--y-spacing-20);
    }

    .y-l-steps-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .y-l-features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .y-l-hero-section {
        background-position: right;
        height: var(--y-height-50vh);
        min-height: var(--y-size-400);
    }

    .y-l-hero-content {
        padding-right: var(--y-spacing-40);
        padding-bottom: var(--y-spacing-70);
    }

    .y-c-hero-title {
        font-size: var(--y-font-size-40);
    }

    .y-c-gift-title {
        font-size: var(--y-font-size-32);
    }

    .y-l-steps-grid {
        grid-template-columns: 1fr;
        gap: var(--y-spacing-60);
        margin-top: var(--y-spacing-60);
    }

    .y-c-step-card {
        padding: var(--y-spacing-30);
        margin: 0 var(--y-spacing-20);
    }

    .y-c-feature-card {
        padding: var(--y-spacing-30);
        margin: 0 var(--y-spacing-20);
    }

    .y-l-features-grid {
        grid-template-columns: 1fr;
        gap: var(--y-spacing-30);
        margin-top: 0;
    }

    .y-l-why-goat-section {
        padding-top: var(--y-spacing-15);
        padding-bottom: var(--y-spacing-30);
    }

    .y-l-how-it-works-section {
        padding-top: 0;
        padding-bottom: var(--y-spacing-60);
    }

    .y-c-banner-image-wrapper {
        min-height: fit-content;
    }

    .y-c-banner-img {
        width: var(--y-percent-100);
    }

    .y-l-perfect-gift-section {
        padding-top: var(--y-spacing-30);
        padding-bottom: var(--y-spacing-30);
    }
}