/* Homepage V2 shell — composes with ag-homepage-marketplace.css */

.ag-hp2-page {
    --ag-hp2-gap: 24px;
    padding-bottom: 32px;
}

.ag-hp2-section {
    margin-bottom: var(--ag-hp2-gap);
}

.ag-hp2-section-inner {
    max-width: 100%;
}

.ag-hp2-rail-scroll {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 16px;
    padding-bottom: 4px;
}

.ag-hp2-rail-scroll > * {
    flex: 0 0 auto;
    scroll-snap-align: start;
    min-width: 168px;
}

.ag-hp2-content-card {
    min-width: 180px;
    border-radius: 12px;
    background: var(--ag-dh-on-primary, #fff);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--ag-dh-text, #0f172a) 7%, transparent);
}

.ag-hp2-slide-caption {
    position: absolute;
    inset: auto 0 0 0;
    padding: 24px;
    background: linear-gradient(transparent, color-mix(in srgb, var(--ag-dh-text, #0f172a) 55%, transparent));
    color: var(--ag-dh-on-primary, #fff);
}

.ag-hp2-hero .ag-dh-slide {
    position: relative;
}

.ag-hp2-shortcuts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 16px;
}

.ag-hp2-shortcut {
    text-align: center;
    text-decoration: none;
    color: inherit;
}

.ag-hp2-shortcut img {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 50%;
}

.ag-hp2-announcement {
    background: var(--ag-text, #0f172a);
    color: var(--ag-dh-on-primary, #fff);
    text-align: center;
    padding: 8px 16px;
    font-size: .875rem;
}

.ag-hp2-preset-marketplace .ag-dh-product-card,
.ag-hp2-preset-agafort-enterprise .ag-dh-product-card {
    border-radius: 12px;
}

.ag-hp2-product-card-deal .ag-dh-product-discount {
    background: var(--ag-dh-badge-flash, var(--ag-dh-accent, #be123c));
}

.ag-hp2-shadow-medium .ag-dh-product-card,
.ag-hp2-shadow-medium .ag-dh-promo-card {
    box-shadow: 0 4px 16px color-mix(in srgb, var(--ag-dh-text, #0f172a) 7%, transparent);
}

.ag-hp2-shadow-high .ag-dh-product-card:hover {
    box-shadow: 0 12px 32px color-mix(in srgb, var(--ag-dh-text, #0f172a) 12%, transparent);
}

/* Performance: deferred below-fold section shells */
.ag-hp2-section-deferred {
    min-height: 1px !important;
    height: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    contain-intrinsic-size: 0 !important;
    content-visibility: visible !important;
}

.ag-hp2-section-deferred[data-hp2-defer-state="loading"] {
    min-height: min(var(--ag-hp2-defer-intrinsic, 160px), 160px) !important;
    height: auto !important;
    margin: 0 0 var(--ag-hp2-gap, 24px) !important;
    contain-intrinsic-size: var(--ag-hp2-defer-intrinsic, 160px) !important;
    content-visibility: auto !important;
}

.ag-hp2-section-deferred[data-hp2-defer-state="empty"],
.ag-hp2-section-deferred[data-hp2-defer-state="error"],
.ag-hp2-section-deferred[data-hp2-defer-state="timeout"] {
    min-height: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    contain-intrinsic-size: 0 !important;
    content-visibility: hidden !important;
}

.ag-hp2-section-deferred[data-hp2-defer-state="pending"] .ag-hp2-section-deferred__shell,
.ag-hp2-section-deferred[data-hp2-defer-state="empty"] .ag-hp2-section-deferred__shell,
.ag-hp2-section-deferred[data-hp2-defer-state="error"] .ag-hp2-section-deferred__shell,
.ag-hp2-section-deferred[data-hp2-defer-state="timeout"] .ag-hp2-section-deferred__shell {
    min-height: 0;
    height: 0;
    display: none;
}

.ag-hp2-section-deferred__shell {
    min-height: min(var(--ag-hp2-defer-intrinsic, 160px), 160px);
    border-radius: 12px;
    background: color-mix(in srgb, var(--ag-dh-border, #e2e8f0) 55%, transparent);
    overflow: hidden;
}

.ag-hp2-section-deferred__pulse {
    height: 100%;
    min-height: min(var(--ag-hp2-defer-intrinsic, 160px), 160px);
    background: linear-gradient(
        90deg,
        transparent 0%,
        color-mix(in srgb, #fff 55%, transparent) 50%,
        transparent 100%
    );
    background-size: 200% 100%;
    animation: ag-hp2-defer-pulse 1.2s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .ag-hp2-section-deferred__pulse {
        animation: none;
    }
}

@keyframes ag-hp2-defer-pulse {
    from { background-position: 100% 0; }
    to { background-position: -100% 0; }
}