/* ═══════════════════════════════════════════════
   Abu Osama Store — Homepage Hub Styles
   ═══════════════════════════════════════════════ */

/* ── Trust Bar ── */
.aos-hp-trust-bar {
    background: var(--aos-bg-card);
    border-bottom: 1px solid var(--aos-border-light);
    padding: var(--aos-space-lg) 0;
}
.aos-hp-trust-bar__inner {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--aos-space-2xl);
    flex-wrap: wrap;
}
.aos-hp-trust-bar__item {
    display: flex;
    align-items: center;
    gap: var(--aos-space-sm);
    font-size: var(--aos-fs-sm);
    font-weight: var(--aos-fw-medium);
    color: var(--aos-text-secondary);
}
.aos-hp-trust-bar__icon {
    width: 36px; height: 36px;
    border-radius: var(--aos-radius-full);
    background: var(--aos-primary-bg);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem; flex-shrink: 0;
}

/* ── Intent Cards ── */
.aos-hp-intent { padding: var(--aos-space-3xl) 0; background: var(--aos-bg); }
.aos-hp-intent__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--aos-space-lg);
}
.aos-hp-intent-card {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    padding: var(--aos-space-xl) var(--aos-space-lg);
    background: var(--aos-bg-card);
    border-radius: var(--aos-radius-lg);
    box-shadow: var(--aos-shadow-sm);
    border: 2px solid transparent;
    transition: all var(--aos-duration) var(--aos-ease);
    cursor: pointer; position: relative; overflow: hidden;
    text-decoration: none; color: var(--aos-text);
}
.aos-hp-intent-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--aos-primary), var(--aos-primary-light));
    opacity: 0; transition: opacity var(--aos-duration) var(--aos-ease);
}
.aos-hp-intent-card:hover {
    transform: translateY(-6px); box-shadow: var(--aos-shadow-lg);
    border-color: var(--aos-primary-light); color: var(--aos-text);
}
.aos-hp-intent-card:hover::before { opacity: 1; }
.aos-hp-intent-card__icon {
    width: 56px; height: 56px;
    border-radius: var(--aos-radius-lg);
    background: linear-gradient(135deg, var(--aos-primary-bg), rgba(200,155,109,0.15));
    display: flex; align-items: center; justify-content: center;
    font-size: 1.75rem; margin-bottom: var(--aos-space-md);
}
.aos-hp-intent-card__title {
    font-family: var(--aos-ff-heading);
    font-size: var(--aos-fs-md); font-weight: var(--aos-fw-bold);
    margin-bottom: var(--aos-space-xs);
}
.aos-hp-intent-card__desc {
    font-size: var(--aos-fs-xs); color: var(--aos-text-muted); line-height: var(--aos-lh);
}
.aos-hp-intent-card__arrow {
    margin-top: var(--aos-space-md); color: var(--aos-primary);
    opacity: 0; transform: translateX(-8px);
    transition: all var(--aos-duration) var(--aos-ease);
}
.aos-hp-intent-card:hover .aos-hp-intent-card__arrow {
    opacity: 1; transform: translateX(0);
}

/* ── Featured Best Lists ── */
.aos-hp-bestlists { padding: var(--aos-space-3xl) 0; background: var(--aos-bg-alt); }
.aos-hp-bestlists__grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--aos-space-lg);
}
.aos-hp-bl-card {
    background: var(--aos-bg-card); border-radius: var(--aos-radius-lg);
    overflow: hidden; box-shadow: var(--aos-shadow-sm);
    transition: all var(--aos-duration) var(--aos-ease);
    text-decoration: none; color: var(--aos-text);
    display: flex; flex-direction: column;
}
.aos-hp-bl-card:hover {
    transform: translateY(-6px); box-shadow: var(--aos-shadow-lg); color: var(--aos-text);
}
.aos-hp-bl-card__image {
    aspect-ratio: 16/10; overflow: hidden; background: var(--aos-surface); position: relative;
}
.aos-hp-bl-card__image img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform var(--aos-duration-slow) var(--aos-ease);
}
.aos-hp-bl-card:hover .aos-hp-bl-card__image img { transform: scale(1.08); }
.aos-hp-bl-card__image-placeholder {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    font-size: 2.5rem;
    background: linear-gradient(135deg, var(--aos-surface), var(--aos-bg-alt));
}
.aos-hp-bl-card__badge {
    position: absolute; top: var(--aos-space-sm); right: var(--aos-space-sm);
    background: var(--aos-primary); color: var(--aos-text-inverse);
    font-size: var(--aos-fs-xs); font-weight: var(--aos-fw-semibold);
    padding: 4px 10px; border-radius: var(--aos-radius-full);
}
.aos-hp-bl-card__body {
    padding: var(--aos-space-lg); flex: 1; display: flex; flex-direction: column;
}
.aos-hp-bl-card__title {
    font-family: var(--aos-ff-heading); font-size: var(--aos-fs-base);
    font-weight: var(--aos-fw-bold); margin-bottom: var(--aos-space-xs);
    line-height: 1.4; display: -webkit-box;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.aos-hp-bl-card__subtitle {
    font-size: var(--aos-fs-xs); color: var(--aos-text-muted);
    margin-bottom: var(--aos-space-md); flex: 1;
}
.aos-hp-bl-card__cta {
    display: inline-flex; align-items: center; gap: var(--aos-space-xs);
    font-size: var(--aos-fs-sm); font-weight: var(--aos-fw-semibold);
    color: var(--aos-primary); transition: gap var(--aos-duration) var(--aos-ease);
}
.aos-hp-bl-card:hover .aos-hp-bl-card__cta { gap: var(--aos-space-sm); }

/* ── Featured Routines ── */
.aos-hp-routines { padding: var(--aos-space-3xl) 0; background: var(--aos-bg); }
.aos-hp-routines__grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--aos-space-lg);
}
.aos-hp-rt-card {
    background: var(--aos-bg-card); border-radius: var(--aos-radius-lg);
    padding: var(--aos-space-xl); box-shadow: var(--aos-shadow-sm);
    transition: all var(--aos-duration) var(--aos-ease);
    text-decoration: none; color: var(--aos-text);
    display: flex; flex-direction: column;
    border: 1px solid var(--aos-border-light);
}
.aos-hp-rt-card:hover {
    transform: translateY(-6px); box-shadow: var(--aos-shadow-lg);
    border-color: var(--aos-primary-light); color: var(--aos-text);
}
.aos-hp-rt-card__badges { display: flex; gap: var(--aos-space-sm); margin-bottom: var(--aos-space-md); flex-wrap: wrap; }
.aos-hp-rt-card__badge {
    font-size: var(--aos-fs-xs); font-weight: var(--aos-fw-semibold);
    padding: 3px 10px; border-radius: var(--aos-radius-full);
    background: var(--aos-primary-bg); color: var(--aos-primary-dark);
}
.aos-hp-rt-card__badge--level { background: rgba(76,175,80,0.1); color: var(--aos-success); }
.aos-hp-rt-card__title {
    font-family: var(--aos-ff-heading); font-size: var(--aos-fs-md);
    font-weight: var(--aos-fw-bold); margin-bottom: var(--aos-space-sm); line-height: 1.4;
}
.aos-hp-rt-card__subtitle {
    font-size: var(--aos-fs-xs); color: var(--aos-text-muted);
    margin-bottom: var(--aos-space-lg); flex: 1; line-height: var(--aos-lh);
}
.aos-hp-rt-card__stats {
    display: flex; gap: var(--aos-space-md); margin-bottom: var(--aos-space-lg);
    padding-top: var(--aos-space-md); border-top: 1px solid var(--aos-border-light);
}
.aos-hp-rt-card__stat { display: flex; flex-direction: column; align-items: center; text-align: center; flex: 1; }
.aos-hp-rt-card__stat-value { font-size: var(--aos-fs-md); font-weight: var(--aos-fw-bold); color: var(--aos-primary); }
.aos-hp-rt-card__stat-label { font-size: 10px; color: var(--aos-text-muted); margin-top: 2px; }
.aos-hp-rt-card__cta {
    display: inline-flex; align-items: center; justify-content: center;
    gap: var(--aos-space-xs); font-size: var(--aos-fs-sm); font-weight: var(--aos-fw-semibold);
    color: var(--aos-text-inverse); background: var(--aos-primary);
    padding: 10px var(--aos-space-lg); border-radius: var(--aos-radius-full);
    transition: all var(--aos-duration) var(--aos-ease); text-align: center;
}
.aos-hp-rt-card:hover .aos-hp-rt-card__cta {
    background: var(--aos-primary-dark); box-shadow: var(--aos-shadow-glow);
}

/* ── Shop by Goal ── */
.aos-hp-goals { padding: var(--aos-space-3xl) 0; background: var(--aos-bg-alt); }
.aos-hp-goals__grid { display: flex; flex-wrap: wrap; gap: var(--aos-space-md); justify-content: center; }
.aos-hp-goal-pill {
    display: inline-flex; align-items: center; gap: var(--aos-space-sm);
    padding: var(--aos-space-md) var(--aos-space-xl);
    background: var(--aos-bg-card); border: 2px solid var(--aos-border);
    border-radius: var(--aos-radius-full); font-size: var(--aos-fs-sm);
    font-weight: var(--aos-fw-semibold); color: var(--aos-text);
    transition: all var(--aos-duration) var(--aos-ease); text-decoration: none;
}
.aos-hp-goal-pill:hover {
    border-color: var(--aos-primary); background: var(--aos-primary);
    color: var(--aos-text-inverse); transform: translateY(-3px); box-shadow: var(--aos-shadow-md);
}
.aos-hp-goal-pill__icon { font-size: 1.25rem; }

/* ── Final CTA ── */
.aos-hp-final-cta {
    padding: var(--aos-space-4xl) 0;
    background: linear-gradient(135deg, var(--aos-text) 0%, #3D3228 50%, var(--aos-text) 100%);
    position: relative; overflow: hidden;
}
.aos-hp-final-cta::before {
    content: ''; position: absolute; top: -50%; right: -20%;
    width: 500px; height: 500px; border-radius: 50%;
    background: radial-gradient(circle, rgba(200,155,109,0.12) 0%, transparent 70%);
    pointer-events: none;
}
.aos-hp-final-cta__inner {
    text-align: center; position: relative; z-index: 1; max-width: 640px; margin: 0 auto;
}
.aos-hp-final-cta__eyebrow {
    display: inline-block; font-size: var(--aos-fs-xs); font-weight: var(--aos-fw-semibold);
    color: var(--aos-primary-light); letter-spacing: 1px; margin-bottom: var(--aos-space-md);
}
.aos-hp-final-cta__title {
    font-family: var(--aos-ff-heading); font-size: var(--aos-fs-3xl);
    font-weight: var(--aos-fw-extrabold); color: var(--aos-text-inverse);
    margin-bottom: var(--aos-space-md); line-height: var(--aos-lh-heading);
}
.aos-hp-final-cta__subtitle {
    font-size: var(--aos-fs-md); color: rgba(255,255,255,0.7);
    margin-bottom: var(--aos-space-2xl); line-height: var(--aos-lh);
}
.aos-hp-final-cta__buttons {
    display: flex; gap: var(--aos-space-md); justify-content: center; flex-wrap: wrap;
}
.aos-hp-final-cta__btn {
    display: inline-flex; align-items: center; gap: var(--aos-space-sm);
    padding: 14px 32px; border-radius: var(--aos-radius-full);
    font-size: var(--aos-fs-base); font-weight: var(--aos-fw-bold);
    transition: all var(--aos-duration) var(--aos-ease); text-decoration: none;
}
.aos-hp-final-cta__btn--primary {
    background: var(--aos-primary); color: var(--aos-text-inverse);
    box-shadow: 0 4px 20px rgba(200,155,109,0.4);
}
.aos-hp-final-cta__btn--primary:hover {
    background: var(--aos-primary-light); transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(200,155,109,0.5); color: var(--aos-text-inverse);
}
.aos-hp-final-cta__btn--outline {
    background: transparent; color: var(--aos-text-inverse);
    border: 2px solid rgba(255,255,255,0.3);
}
.aos-hp-final-cta__btn--outline:hover {
    border-color: var(--aos-primary-light); background: rgba(200,155,109,0.1);
    transform: translateY(-3px); color: var(--aos-text-inverse);
}
.aos-hp-final-cta__trust {
    display: flex; justify-content: center; gap: var(--aos-space-xl);
    margin-top: var(--aos-space-xl); flex-wrap: wrap;
}
.aos-hp-final-cta__trust-item {
    display: flex; align-items: center; gap: 6px;
    font-size: var(--aos-fs-xs); color: rgba(255,255,255,0.6);
}
.aos-hp-final-cta__trust-item svg { color: var(--aos-success); }

/* ── Sticky Mobile CTA ── */
.aos-hp-sticky-mobile {
    display: none; position: fixed; bottom: var(--aos-mobile-nav-h);
    left: 0; right: 0; background: var(--aos-bg-card);
    box-shadow: 0 -4px 20px rgba(0,0,0,0.1);
    padding: var(--aos-space-sm) var(--aos-space-md);
    z-index: calc(var(--aos-z-mobile-nav) - 1);
    transform: translateY(100%); transition: transform var(--aos-duration) var(--aos-ease);
}
.aos-hp-sticky-mobile.is-visible { transform: translateY(0); }
.aos-hp-sticky-mobile__inner { display: flex; gap: var(--aos-space-sm); }
.aos-hp-sticky-mobile__btn {
    flex: 1; display: flex; align-items: center; justify-content: center;
    gap: var(--aos-space-xs); padding: 10px;
    border-radius: var(--aos-radius-md); font-size: var(--aos-fs-xs);
    font-weight: var(--aos-fw-bold); transition: all var(--aos-duration) var(--aos-ease);
    text-decoration: none; text-align: center;
}
.aos-hp-sticky-mobile__btn--primary { background: var(--aos-primary); color: var(--aos-text-inverse); }
.aos-hp-sticky-mobile__btn--outline { background: transparent; border: 2px solid var(--aos-primary); color: var(--aos-primary); }

/* ── Section Headers ── */
.aos-hp-section-header { text-align: center; margin-bottom: var(--aos-space-2xl); }
.aos-hp-section-header__eyebrow {
    display: inline-block; font-size: var(--aos-fs-xs); font-weight: var(--aos-fw-semibold);
    color: var(--aos-primary); letter-spacing: 1px; margin-bottom: var(--aos-space-sm);
}
.aos-hp-section-header__title {
    font-family: var(--aos-ff-heading); font-size: var(--aos-fs-2xl);
    font-weight: var(--aos-fw-extrabold); color: var(--aos-text);
    margin-bottom: var(--aos-space-sm); line-height: var(--aos-lh-heading);
}
.aos-hp-section-header__subtitle {
    font-size: var(--aos-fs-base); color: var(--aos-text-muted);
    max-width: 600px; margin: 0 auto; line-height: var(--aos-lh);
}

/* ── Scroll Animations ── */
.aos-hp-animate {
    opacity: 0; transform: translateY(24px);
    transition: opacity 0.6s var(--aos-ease), transform 0.6s var(--aos-ease);
}
.aos-hp-animate.is-visible { opacity: 1; transform: translateY(0); }
.aos-hp-animate-stagger > * {
    opacity: 0; transform: translateY(20px);
    transition: opacity 0.5s var(--aos-ease), transform 0.5s var(--aos-ease);
}
.aos-hp-animate-stagger.is-visible > *:nth-child(1) { transition-delay: 0s; opacity: 1; transform: translateY(0); }
.aos-hp-animate-stagger.is-visible > *:nth-child(2) { transition-delay: .08s; opacity: 1; transform: translateY(0); }
.aos-hp-animate-stagger.is-visible > *:nth-child(3) { transition-delay: .16s; opacity: 1; transform: translateY(0); }
.aos-hp-animate-stagger.is-visible > *:nth-child(4) { transition-delay: .24s; opacity: 1; transform: translateY(0); }
.aos-hp-animate-stagger.is-visible > *:nth-child(5) { transition-delay: .32s; opacity: 1; transform: translateY(0); }
.aos-hp-animate-stagger.is-visible > *:nth-child(6) { transition-delay: .4s; opacity: 1; transform: translateY(0); }

/* ═══ RESPONSIVE ═══ */
@media (max-width: 1024px) {
    .aos-hp-bestlists__grid, .aos-hp-routines__grid { grid-template-columns: repeat(2, 1fr); }
    .aos-hp-intent__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .aos-hp-trust-bar__inner { gap: var(--aos-space-md); }
    .aos-hp-trust-bar__item { font-size: var(--aos-fs-xs); }
    .aos-hp-intent__grid { grid-template-columns: repeat(2, 1fr); gap: var(--aos-space-md); }
    .aos-hp-intent-card { padding: var(--aos-space-lg) var(--aos-space-md); }
    .aos-hp-bestlists__grid, .aos-hp-routines__grid { grid-template-columns: 1fr 1fr; gap: var(--aos-space-md); }
    .aos-hp-final-cta__title { font-size: var(--aos-fs-2xl); }
    .aos-hp-sticky-mobile { display: block; }
    .aos-hp-goals__grid { gap: var(--aos-space-sm); }
    .aos-hp-goal-pill { padding: var(--aos-space-sm) var(--aos-space-lg); font-size: var(--aos-fs-xs); }
}
@media (max-width: 480px) {
    .aos-hp-intent__grid { grid-template-columns: 1fr 1fr; gap: var(--aos-space-sm); }
    .aos-hp-intent-card__icon { width: 44px; height: 44px; font-size: 1.25rem; }
    .aos-hp-intent-card__title { font-size: var(--aos-fs-sm); }
    .aos-hp-bestlists__grid, .aos-hp-routines__grid { grid-template-columns: 1fr; }
    .aos-hp-final-cta { padding: var(--aos-space-3xl) 0; }
    .aos-hp-final-cta__btn { padding: 12px 24px; font-size: var(--aos-fs-sm); width: 100%; justify-content: center; }
    .aos-hp-final-cta__buttons { flex-direction: column; }
    .aos-hp-rt-card__stats { gap: var(--aos-space-sm); }
}